/* 셈톡 웹 — 공통 컴포넌트 (토스 톤). tokens.css 위에서 동작. */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  background: var(--background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* 🔴 **폼 요소는 서체를 상속하지 않는다**(D-363). 브라우저 기본이 input은 Arial,
   `<textarea>`는 **monospace**다 — body에 Pretendard를 걸어도 사용자가 «글을 쓰는 칸»만
   다른 얼굴로 그려진다. 실측으로 잡았다: 질문 작성 화면의 placeholder가 monospace였고,
   그래서 한글 자간이 눈에 띄게 넓고 가운뎃점 같은 글자가 어긋나 보였다.
   ⚠ chat.css·brief.css 등 몇 곳이 각자 `font-family: inherit`을 붙여 두었는데, 그건 이 줄이
     없어서 지면마다 따로 때운 흔적이다. 여기 한 줄이 정본이다. */
input, textarea, select, optgroup { font-family: inherit; }
ul { list-style: none; }

/* Typography (app_typography 매핑)
   ⚠ 자간은 **크기에서 따라온다**(D-161) — 칸마다 손으로 정하지 말고 tokens.css의
      --ls-* 에서 고른다. 15px 이하는 위 body의 -0.2px가 이미 맞아서 적지 않는다.
      새 크기를 추가할 땐 자간도 같이 붙일 것: 안 붙이면 그 요소만 -0.2px로 남아
      같은 화면의 이웃 제목과 어긋난다(이게 정확히 D-161에서 고친 문제다). */
.t-display { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-2xl); }
.t-h1 { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-2xl); }
.t-h2 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-xl); }
.t-title1 { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: var(--ls-xl); }
.t-title2 { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: var(--ls-lg); }
.t-title3 { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: var(--ls-lg); }
.t-body1 { font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: var(--ls-lg); }
.t-body2 { font-size: 15px; font-weight: 400; line-height: 1.6; }
.t-label1 { font-size: 16px; font-weight: 600; letter-spacing: var(--ls-lg); }
.t-label2 { font-size: 14px; font-weight: 500; }
.t-caption1 { font-size: 13px; color: var(--text-secondary); }
.t-caption2 { font-size: 12px; color: var(--text-tertiary); }
.c-secondary { color: var(--text-secondary); }
.c-tertiary { color: var(--text-tertiary); }
.c-primary { color: var(--primary); }

/* Layout */
.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-xl); }

/* Header / Nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header .bar { display: flex; align-items: center; gap: var(--s-2xl); height: 64px; }
.site-header .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.site-header .brand .dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--primary); }
.site-header nav { display: flex; gap: var(--s-xl); margin-left: auto; }
.site-header nav a { color: var(--text-secondary); font-weight: 500; font-size: 15px; }
.site-header nav a:hover { color: var(--text-primary); }

/* Buttons (app_theme CTA 54h 라운드12) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 54px; padding: 0 22px; border-radius: var(--r-md);
  font-size: 16px; font-weight: 600; transition: background .15s, opacity .15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-pressed); }
.btn-ghost { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-sm { height: 44px; padding: 0 16px; font-size: 15px; }

/* Card (AppCard: 흰 카드 + 헤어라인 + 은은한 그림자) */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s-lg);
}
.card-flat { box-shadow: none; }

/* 공통 플래시 슬롯 (S-05) — layout.html이 content 위에 그린다. 모든 지면이 상속하는 정본이다.
   error는 경고색(§7 #FFFBEB 계열, --warning), notice는 중립. 하드 레드(--error)는 폼 인라인
   오류(W-03) 몫이라 여기서 쓰지 않는다. 개별 화면이 자체 슬롯을 그리면 이중으로 뜨므로 걷어낼 것.
   ⚠ client.css의 `.flash`와 이름이 겹치지 않도록 `.page-flash`로 둔다(client.css는 전역 로드가 아니다). */
.page-flash {
  margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; line-height: 1.5; border: 1px solid transparent;
}
.page-flash-error  { background: #FFFBEB; border-color: #F3E3B3; color: var(--warning-dark); }
.page-flash-notice { background: var(--grey50); border-color: var(--border); color: var(--text-secondary); }

/* Chip */
.chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: var(--r-sm); background: var(--surface-alt);
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
}

/* Presence dot */
.dot-presence { width: 10px; height: 10px; border-radius: var(--r-full); display: inline-block; }
.dot-online { background: var(--presence-online); }
.dot-away { background: var(--presence-away); }
.dot-busy { background: var(--presence-busy); }
.dot-offline { background: var(--presence-offline); }

/* Hero (홈 상단 — 앱 히어로 톤) */
.hero {
  background: linear-gradient(135deg, #3182F6, #1B64DA);
  color: #fff; border-radius: var(--r-xl);
  padding: 40px 32px; margin-top: var(--s-2xl);
}
.hero h1 { font-size: 32px; font-weight: 700; line-height: 1.3; }
.hero p { margin-top: 10px; font-size: 16px; color: rgba(255,255,255,.88); }
.hero .btn { margin-top: 24px; background: #fff; color: var(--primary); }
.hero .btn:hover { background: #f0f6ff; }

/* Feature grid */
.grid { display: grid; gap: var(--s-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.feature .ic {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px;
}
.feature h3 { font-size: 17px; font-weight: 700; }
.feature p { margin-top: 4px; font-size: 14px; color: var(--text-tertiary); }

/* Section */
.section { margin-top: var(--s-3xl); }
.section > h2 { font-size: 22px; font-weight: 700; margin-bottom: var(--s-lg); }

/* Footer */
.site-footer { margin-top: 64px; border-top: 1px solid var(--border); background: var(--surface-alt); }
.site-footer .inner { padding: 28px 0 40px; color: var(--text-tertiary); font-size: 13px; }
.site-footer a { color: var(--text-secondary); }

/* ── 로그인 (D-165) ────────────────────────────────────────────────────────
   참고 지면 accounts.yanolja.com 실측(1280×720):
     배경 #F2F2F2(흰 카드 없음) · 칼럼 600px에 좌우 패딩 32 → 내용 폭 536
     버튼 536×52 · 흰 배경 · 테두리 1px #DADBDF · 모서리 16 · 글자 16/700 가운데
     버튼 간격 8 · 심볼 20×20(왼쪽 끝에서 17)
     로고 250×30 · 안내문 16/400/24 가운데 · 하단 고지 12/400

   ⚠ 색은 새로 만들지 않고 기존 토큰으로 맞춘다 — #F2F2F2→--surface-alt(#F2F4F6),
      #DADBDF→--border(#E5E8EB), 모서리 16→--r-lg. 눈에 안 보이는 차이다. */
.login-page {
  /* 🔴 **흰 배경이다**(D-704, 사용자 지시). 예전에는 `--surface-alt`(#F2F4F6) 회색 띠였다
     (D-165 — 참고 지면 accounts.yanolja.com을 그대로 옮긴 값).
     회색을 걷으면서 **셸 패딩을 되돌리던 음수 마진도 함께 걷었다**. 그 마진이 있던 이유는
     「회색 바탕이 화면을 가득 채우게」 하나뿐이었다 — 칠할 색이 흰색이면 되돌릴 것이 없다.
     그 마진이 남기던 부작용 셋도 함께 사라진다(전부 헤드리스 실측):
       ⓐ 하단 −64px이 `.shell-footer`를 8px 끌어올려, 푸터 헤어라인이 띠 **안쪽**에 그려졌다
          (띠 하단 y=813 vs 푸터 top y=805).
       ⓑ 모바일(≤768)에서 `margin-top:-24px` vs `.main`의 `padding-top:16px`이라 띠가 8px 위에서
          시작해 상단바 밑으로 들어갔다(불투명 상단바가 덮어 안 보였을 뿐이다 — y=48 vs 56).
       ⓒ `/login?app=1`(app-embed)에서 가로 스크롤이 났다. shell.css의 `.app-embed .main`이
          좌우 패딩만 0으로 만드는데 여기 `-shell-pad` 좌우 마진은 아무도 되돌리지 않아
          칼럼이 뷰포트를 31px 넘어갔다(실측 우측 끝 1471 > 1440).
     ⚠ `min-height`에서 **88px을 더 뺀다** — `.main`의 상 24 + 하 64다. 예전에는 음수 마진이
       그 패딩을 먹어서 뺄 것이 없었다. 안 빼면 문서가 88px 길어져 늘 스크롤이 남는다.
     ⚠ 좌우 패딩도 `--shell-pad`에서 0으로 내린다 — 이제 `.main`이 그 여백을 준다.
       여기서 한 번 더 주면 칼럼이 두 겹으로 안쪽으로 들어간다. */
  min-height: calc(100vh - var(--topbar-h) - 88px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 0;
  background: var(--background);
}
.login-col { width: 100%; max-width: 536px; text-align: center; }

/* ⚠ 심볼 없이 **글자만**이다(D-168) — 상단바에 같은 심볼이 있어 한 화면에 로고가 두 번
   나왔다. `.login-mark`는 그래서 지웠다. 심볼이 빠진 만큼 글자를 키운다(24 → 30px). */
.login-brand { display: inline-flex; align-items: center; }
.login-word {
  font-size: 30px; font-weight: 700; letter-spacing: var(--ls-2xl); color: var(--text-primary);
}
.login-lead {
  margin: 18px 0 0; font-size: 16px; line-height: 1.5;
  letter-spacing: var(--ls-lg); color: var(--text-secondary);
}
.login-next {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.45;
  letter-spacing: var(--ls-md); color: var(--text-secondary);
}

.login-sns { display: flex; flex-direction: column; gap: 8px; margin-top: 36px; }
/* 네 버튼은 높이·모서리·글자 크기를 한 규칙으로 그린다(D-165).
   Q-132: **카카오만** 공식 노랑(--kakao)으로 살린다. 첫 행동이 보이게.
   네이버·구글·애플은 흰 버튼. 심볼은 각 사 공식 아트워크 그대로. */
/* 🔴 테두리를 `--border`(#E5E8EB)에서 `--grey300`(#D1D6DB)로 한 단 올렸다(D-704).
   바탕이 흰색이 되면서 흰 버튼 셋(네이버·구글·애플)의 **면 대비가 사라졌기** 때문이다 —
   회색 띠 위에서는 면만으로 1.10:1이 났지만 흰 바탕에서는 1.00:1, 즉 버튼임을 말하는 것이
   1px 테두리 하나뿐이 된다. 실측: #E5E8EB 1.23:1 → #D1D6DB **1.46:1**.
   ⚠ 3:1(WCAG 1.4.11 비텍스트 대비)에 닿으려면 `--grey500`(#8B95A1, 3.04:1)이라야 한다.
     그건 로그인 첫 화면에 놓기엔 확연히 무거워서 «한 단만» 올렸다 — 대신 hover를 그 값으로
     두어, 만질 수 있는 것임을 손이 닿는 순간 확실히 말한다.
   ⚠ 카카오 버튼은 아래 `.login-btn-kakao`가 테두리를 노랑으로 덮는다(공식 가이드) — 이 값이
     카카오에는 닿지 않는다. */
.login-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 52px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--grey300);
  color: var(--text-primary); font-size: 16px; font-weight: 700;
  letter-spacing: var(--ls-lg);
  transition: background .15s ease, border-color .15s ease;
}
.login-btn:hover { background: var(--grey50); border-color: var(--grey500); }
.login-btn:active { background: var(--grey100); }
.login-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 카카오 공식 버튼색. 노랑 위 글자는 --kakao-text(#191919).
   hover는 노랑을 조금만 눌러 버튼임이 보이게 — 색을 바꾸면 가이드를 깬다. */
.login-btn-kakao {
  background: var(--kakao); border-color: var(--kakao); color: var(--kakao-text);
}
.login-btn-kakao:hover { background: #F5DC00; border-color: #F5DC00; }
.login-btn-kakao:active { background: #E8D000; border-color: #E8D000; }
/* 심볼은 글자와 **같이 흐르지 않는다** — 왼쪽에 고정해야 네 버튼의 글자가 모두 같은
   자리(가운데)에서 시작한다. 문구 길이가 달라도 줄이 흔들리지 않는다. */
/* ⚠ 네 심볼은 **상자 크기가 아니라 잉크(실제 그림) 높이**를 맞춰야 같아 보인다(D-168).
   같은 20px 상자에 넣었더니 각 로고가 캔버스를 채우는 정도가 달라 크기가 제각각으로 보였다
   — 실측 세로 채움률: 카카오 89% · 네이버 100% · 구글 98% · **애플 70%**.
   애플이 유독 작아 보인 건 상자가 작아서가 아니라 로고 주변 여백이 커서다.
   그래서 잉크 높이가 모두 **약 18px**이 되도록 상자만 개별로 키우고 줄인다.
   ⚠ 로고 자체(파일)는 손대지 않는다 — 각 사 공식 아트워크라 잘라내거나 늘리면 안 된다. */
.login-ic {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  display: block; object-fit: contain;
  width: 20px; height: 20px;
}
/* 아래 주석의 잉크 높이는 **브라우저에 그려진 것을 캔버스로 잰 실측값**이다(파일을 트림해
   구한 값과 다르다 — 구글은 파일 기준 98%였지만 실제로는 93%로 그려진다). 값을 고칠 땐
   눈대중이 아니라 같은 방식으로 다시 재라. */
.ic-kakao  { width: 20px; height: 20px; }   /* 잉크 18.3px */
.ic-naver  { width: 18px; height: 18px; }   /* 잉크 18.0px */
.ic-google { width: 19px; height: 19px; }   /* 잉크 17.6px — 18px에선 16.7px로 혼자 작았다 */
.ic-apple  { width: 26px; height: 26px; }   /* 잉크 17.9px — 로고 여백이 커서 상자만 크다 */

/* ⚠ `--text-tertiary`를 쓰지 마라. 회색 바탕(--surface-alt) 위에서 대비가 **4.2:1**이라
   12px 본문 기준(4.5:1)에 미달한다(실측). 약관 동의 고지는 특히 읽혀야 하는 글이다.
   참고 지면도 이 문구를 거의 검정(rgb(27,28,31))으로 쓴다. */
.login-legal {
  margin: 22px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary);
}
.login-legal a { color: var(--text-primary); text-decoration: underline; }

@media (max-width: 768px) {
  /* `.main`의 패딩이 16 / 16 / 48로 바뀐다 — 위 base가 빼던 88px도 **64px**로 함께 바뀐다.
     좌우는 `.main`이 16px을 주므로 여기서는 0이다(base와 같은 이유). */
  .login-page { min-height: calc(100vh - var(--topbar-h) - 64px); padding: 16px 0; }
  .login-word { font-size: 25px; letter-spacing: var(--ls-2xl); }
  .login-lead { font-size: 15px; }
  .login-sns { margin-top: 28px; }
  .login-btn { height: 50px; font-size: 15px; }
}
.input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-md);
  background: var(--surface-alt); border: 1px solid transparent; font-size: 15px; color: var(--text-primary);
}
.input:focus { outline: none; border-color: var(--primary); background: var(--surface); }

/* Key-Value (마이) */
.kv { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.kv:last-child { border-bottom: none; }
.kv .k { width: 72px; color: var(--text-tertiary); font-size: 14px; flex-shrink: 0; }
.kv .v { color: var(--text-primary); font-size: 15px; font-weight: 500; word-break: break-all; }

/* 세무사 카드(디렉토리·인기) */
/* 공용 목록 컨테이너(세무사·예약·견적 등 9개 화면이 함께 쓴다).
   본문이 전폭이 되면서(D-154) 한 줄짜리 목록은 **가운데가 텅 비었다** — 왼쪽에 이름,
   오른쪽 끝에 상태 배지, 사이에 1000px의 공백(실측). 폭을 도로 좁히는 대신 **넓어지면
   여러 열로 접는다** — 그게 공간을 실제로 쓰는 방법이고, 한 화면에 보이는 항목도 늘어난다.
   520px는 카드 한 장이 답답하지 않은 최소 폭이다(아바타+이름+사무소+한줄소개+별점+분야칩).
   좁은 화면에서는 자동으로 1열이 되므로 기존 모습 그대로다. */
.tax-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
  gap: 12px; margin-top: var(--s-lg);
}
@media (max-width: 560px) { .tax-list { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   세무사 찾기 목록(/directory) — D-248 개편.
   · 필터바 한 줄(검색 + 지역 2단 드롭다운 + 분야 복수선택 드롭다운 + 정렬 세그먼트)
   · 적용 칩(남색 #14243D) + 초기화 + 결과 수
   · 리스트형 하나(D-430) — 데스크톱 큰 사진 행 / 모바일 카드. 테이블형·보기 토글은 삭제됐다.
   · 광고 표기는 전면 삭제(A-01) — 라벨·태그라인·강조 마크업 자체가 없다.
   공용 .tax-list(예약·견적·Q&A 등)는 위 520px 규칙 그대로 두고, 이 화면은 .dir-list로 덮는다. */

/* ── 필터바 ── */
.dir-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; position: relative; }
.dir-search { display: flex; gap: 8px; flex: 1 1 240px; min-width: 200px; margin: 0; }
.dir-search .input { flex: 1; min-width: 0; }

/* 드롭다운(지역·분야) — <details>로 여닫는다(JS 없이도 열린다). */
/* ⚠ 패널의 기준은 버튼이 아니라 **조작 줄**이다(.dir-filters가 relative) — 버튼 기준
   right:0은 모바일(버튼이 화면 중간)에서 왼쪽이 잘린다(실측). 줄 기준이면 양끝이 안전하다. */
.dir-facet, .dir-facet-d { position: static; margin: 0; }
.dir-facet-btn {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap;
}
.dir-facet-btn::-webkit-details-marker { display: none; }
.dir-facet[open] > .dir-facet-btn, .dir-facet-d[open] > .dir-facet-btn {
  border-color: var(--primary); color: var(--primary);
}
.dir-caret { font-size: 10px; color: var(--text-tertiary); }
/* 🔴 오른쪽 끝 정렬(사용자 실측 D-470) — 지역·분야 버튼은 조작 줄의 **오른쪽 끝**에 산다.
   left:0(버튼 왼끝 기준, 오른쪽으로 펼침)이면 460px 지역 패널·분야 패널의 오른쪽이
   뷰포트 밖으로 잘려 구 칩·분야 체크가 안 보였다. 버튼의 오른끝에 맞춰 왼쪽으로 펼친다. */
.dir-facet-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: auto; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(20, 36, 61, .16); padding: 12px;
}

/* 지역 2단(시/도 좌 · 구 칩 우) */
.dir-region-pop { display: grid; grid-template-columns: 140px 1fr; gap: 12px; width: 460px; max-width: calc(100vw - 40px); }
.dir-region-sido {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 300px; overflow-y: auto; border-right: 1px solid var(--border); padding-right: 8px;
}
.dir-region-opt { padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.dir-region-opt:hover { background: var(--surface-alt); }
.dir-region-opt.on { background: var(--primary-light); color: var(--primary-pressed); font-weight: 700; }
.dir-region-gu { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; max-height: 300px; overflow-y: auto; }
.dir-region-gu-chip { padding: 6px 10px; border-radius: var(--r-full); background: var(--surface-alt); font-size: 13px; color: var(--text-secondary); cursor: pointer; border: 1px solid transparent; }
.dir-region-gu-chip:hover { background: var(--primary-light); color: var(--primary); }
.dir-region-gu-chip.on { background: var(--primary-light); border-color: var(--primary); color: var(--primary-pressed); font-weight: 700; }
.dir-region-hint { color: var(--text-tertiary); font-size: 13px; padding: 8px; }

/* 분야 복수 선택 */
.dir-spec-pop { display: flex; flex-direction: column; gap: 2px; width: 220px; max-width: calc(100vw - 40px); }
.dir-check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-primary); cursor: pointer; }
.dir-check:hover { background: var(--surface-alt); }
.dir-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.dir-facet-actions { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); text-align: right; }

/* ── 적용 칩 (조건 줄 아래) ── */
.dir-applied { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.dir-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dir-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-full); background: #14243D; color: #fff; font-size: 13px; font-weight: 600; }
.dir-chip:hover { background: #0E1A2C; }
.dir-chip .x { font-size: 11px; opacity: .85; }
.dir-reset { margin-left: 2px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-decoration: underline; }

/* ── 결과 줄(개편2 §4) — 왼쪽 '결과 N명', 오른쪽 정렬 세그먼트 + ≡/⊞ 토글 ── */
.dir-resultbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 10px 0 4px; }
/* 기능이 갈리는 이유를 적는 한 줄(D-726) — 목록 바로 위. 작지만 **본문 대비**를 지킨다
   (--text-tertiary는 흰 바탕에서 4.6:1, design.md 본문 하한 4.5:1 위). 고지는 장식이 아니다. */
.dir-depth-note { margin: 2px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); word-break: keep-all; }
.dir-count { font-size: 13px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.dir-rb-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* 정렬 세그먼트: 라벨·기준점 note는 감춘다(선택값이 곧 설명 — 켜진 칩이 곧 실제 정렬), 칩 30px. */
.dir-resultbar .sort-bar { margin: 0; flex-wrap: nowrap; }
.dir-resultbar .sort-lab, .dir-resultbar .sort-note { display: none; }
.dir-resultbar .sort-bar .sort-chip { height: 30px; padding: 0 12px; }

.dir-empty { text-align: center; color: var(--text-tertiary); padding: 40px; }

/* ── 목록 — 리스트형 하나(D-430, 테이블형·토글 삭제). 데스크톱 큰 사진 행 / 모바일 카드 ── */
.tax-list.dir-list {
  display: block; grid-template-columns: none; gap: 0; margin-top: 8px;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
}

/* 🔴 **왼 사진 → 오른 텍스트 한 덩어리**(R5). 예전에는 이름·사무소·평점·분야가 각각 제 칸을
      가진 6열 표였다 — 열 폭이 고정이라 사무소가 긴 세무사는 말줄임으로 끝나고, 눈은 가로로
      네 번 건너뛰어야 한 사람을 다 읽었다. 지금은 사진 옆으로 **위→아래 한 줄기**다:
      이름·접속 → 사무소·지역 → 별·후기·경력 → 분야 → 소개.
   ⚠ 이 순서를 섞지 마라 — 「누구인지 → 어디인지 → (한 줄로) 얼마나 했고 무엇을 하는지」다.
   표 보기는 D-430에서 삭제됐다 — 격자는 이 리스트형과 모바일 카드 둘뿐이다. */
/* 🔴 **높이는 카드가 정하고 사진은 따른다**(D-432). 사진을 격자 안에 두면 <img>의
   원본 비율이 행 높이 계산에 끼어들어 — 정사각 사진은 낮은 카드, 세로 사진은 높은 카드가
   됐다(사용자 실측). 그래서 행 높이를 **고정**하고 사진은 절대배치로 패딩 안에 핀 고정한다:
   어떤 비율의 사진이 와도 카드는 같은 키, 사진은 그 키를 cover로 채운다. */
.tax-row {
  position: relative; display: grid; align-items: center; align-content: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name   side"
    "office side"
    "meta   side"
    "intro  side";
  column-gap: 16px; row-gap: 2px; height: 144px; color: inherit;
  padding: 12px 16px 12px 124px;   /* 왼쪽 = 16 + 사진 88 + 20 */
}
.tax-row + .tax-row { border-top: 1px solid var(--border); }
.tax-row:hover { background: var(--surface-alt); }
/* 행 전체를 프로필로 잇는 늘린 링크 — [상담 예약] pill만 위에 둔다(a 안의 a 금지 회피). */
.tr-cover { position: absolute; inset: 0; z-index: 1; }
.tr-cta { position: relative; z-index: 2; }

/* 리스트형: tr-id를 펼쳐 사진·이름이 각 칸으로 간다. */
.tr-id { display: contents; }
/* 🔴 사진이 **행 높이를 거의 다 쓴다**(D-430, 사용자 지시 «카드 높이 90%») — stretch가
   패딩 안 영역 전체를 채우므로 카드 높이의 약 90%다. 높이를 px로 박지 마라: 소개가 없는
   행·긴 행에서 사진과 글의 키가 어긋난다. stretch면 행이 크는 만큼 사진도 큰다.
   ⚠ `object-fit: cover`를 지우지 마라 — 비율이 다른 사진이 눌려서 얼굴이 찌그러진다. */
.tr-photo {
  position: absolute; left: 16px; top: 12px; bottom: 12px; width: 88px;
  border-radius: var(--r-lg); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); font-weight: 700; font-size: 32px; color: var(--primary);
}
.tr-name { grid-area: name; display: inline-flex; align-items: center; gap: 5px; min-width: 0; align-self: center; }
.tr-name-txt { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-name .dot-presence { width: 7px; height: 7px; flex: none; }
.tr-presence { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.tr-office { grid-area: office; align-self: center; font-size: 13px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 평점·경력 + 분야 칩 — **한 행**(D-430). 칩은 최대 2+N이라 한 줄이 계약이다. */
.tr-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.tr-rating { flex: none; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.tr-rating .star { color: var(--warning); }
.tr-specs { display: flex; gap: 4px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.tr-specs .spec-more { background: var(--surface-alt); color: var(--text-tertiary); }
/* 오른쪽 세로 축(D-432) — 거리 위·버튼 아래를 한 축에 상하 정렬(사용자 지시). 카드가
   고정 키라 축은 세로 가운데에 서고, 거리·버튼은 축 안에서 가로 가운데 — 어수선하던
   «메타 줄 끝 거리 + 따로 노는 버튼»을 하나의 안정된 기둥으로 모았다. */
.tr-side {
  grid-area: side; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.tr-dist { flex: none; font-size: 12.5px; font-weight: 700; color: var(--primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-dist[hidden] { display: none; }
/* 소개 한 줄 — 예전엔 리스트에서 감췄다(모바일 전용). R5가 카드 읽기 순서의 마지막 줄로
   요구한다. **한 줄 말줄임**이 계약이다: 두 줄이 되면 카드 높이가 사람마다 달라진다. */
.tr-intro {
  grid-area: intro; align-self: center; font-size: 13px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.tr-cta { white-space: nowrap; }   /* .tr-side 축 안의 플렉스 아이템(D-432) */

/* 모바일 카드(≤768px) — 가로 카드. 사진은 고정 박스(D-432 — 비율이 카드 키를 못 흔든다),
   거리·버튼(side)은 카드 하단 가로 축. */
@media (max-width: 768px) {
  .dir-list .tax-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "name"
      "office"
      "meta"
      "intro"
      "side";
    height: auto; min-height: 124px; padding: 14px 16px 14px 106px;  /* 왼쪽 = 16 + 76 + 14 */
    row-gap: 3px; align-content: start;
  }
  .dir-list .tr-id { display: contents; }
  .dir-list .tr-photo { left: 16px; top: 14px; bottom: auto; width: 76px; height: 96px; border-radius: var(--r-lg); font-size: 24px; }
  .dir-list .tr-name { grid-area: name; align-self: center; }
  .dir-list .tr-office { grid-area: office; }
  .dir-list .tr-meta { grid-area: meta; }
  .dir-list .tr-side { grid-area: side; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; align-self: auto; }
  .dir-list .tr-presence { display: inline; }
  .dir-list .tr-intro {
    grid-area: intro; display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dir-region-pop { grid-template-columns: 110px 1fr; width: calc(100vw - 40px); }
}

/* ── 페이지네이션(번호식) ── */
.dir-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 4px; }
.dir-pg {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
.dir-pg:hover { border-color: var(--grey300); }
.dir-pg.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.dir-pg-gap { color: var(--text-tertiary); padding: 0 2px; }
.tax-card { display: flex; gap: 14px; align-items: flex-start; }
.tax-card:hover { border-color: var(--grey300); }
.avatar {
  width: 56px; height: 56px; border-radius: var(--r-lg); flex-shrink: 0;
  background: var(--surface-alt); object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--primary);
}
.avatar-sm { width: 44px; height: 44px; font-size: 16px; border-radius: var(--r-md); }
.tax-main { flex: 1; min-width: 0; }
.tax-name-row { display: flex; align-items: center; gap: 8px; }
.tax-name { font-size: 17px; font-weight: 700; }
.badge {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--primary-light); color: var(--primary);
}
/* 답변대기 등 '아직 처리 전' 상태 배지. */
.badge-pending { background: #FFF3E8; color: #C2410C; }
.tax-sub { margin-top: 3px; font-size: 13px; color: var(--text-tertiary); }
.tax-rating { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.tax-rating .star { color: var(--warning); }
.spec-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.spec { font-size: 12px; padding: 3px 8px; border-radius: var(--r-sm); background: var(--primary-light); color: var(--primary); }
.presence { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-tertiary); }

/* 필터 바 */
.filter-bar { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.filter-chip {
  padding: 8px 16px; border-radius: var(--r-full); background: var(--surface-alt);
  /* 켜질 때 테두리가 생겨도 칸이 밀리지 않게 자리를 미리 잡아 둔다(border-box라 높이 불변). */
  border: 1px solid transparent;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
/* 켜진 칩 — **색만으로 구분하지 않는다**(§7 관례): 테두리·굵기를 함께 바꾼다.
   ⚠ 예전의 파랑 바탕 + 흰 글자(#fff on #3182F6)는 대비 3.7:1로 14px 본문 기준(4.5:1)
     미달이었다(실측). 지금 조합(--primary-pressed #1B64DA on --primary-light #E8F3FF)은
     4.8:1로 통과한다 — 색을 바꾸면 같은 방식으로 다시 재라. */
.filter-chip.on {
  background: var(--primary-light); border-color: var(--primary);
  color: var(--primary-pressed); font-weight: 700;
}
/* 검색바 — 제목과 필터 사이에서 **숨 쉴 자리**를 준다(사용자 지적: "여백이 너무 없는 느낌").
   아래 필터 줄이 margin-top:12px이라 8px만 두면 검색·지역·분야가 한 덩어리로 붙어 보였다. */
.search-box { display: flex; gap: 8px; margin-top: 20px; margin-bottom: 20px; }
.search-box input { flex: 1; }

/* ── 세무사 찾기 조작부 (D-189) ──────────────────────────────────────────────
   조각: templates/fragments/directory-controls.html — /directory와 /directory/map이 함께 쓴다.
   새 디자인 언어를 만들지 않는다: 칩은 위 `.filter-chip` 그대로, 버튼은 `.btn` 그대로다. */

.dir-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.dir-head h2 { margin: 0; }
.dir-head .dir-switch { margin-left: auto; }

/* 지도 ↔ 목록 — 두 화면에서 같은 자리·같은 모양(§3.1). 링크 한 줄('지도로 보기 ›')을 대신한다:
   두 선택지와 **지금 어디에 있는지**가 함께 보여야 한 기능의 두 얼굴로 읽힌다. */
.dir-switch {
  display: inline-flex; gap: 2px; padding: 4px;
  border-radius: var(--r-full); background: var(--surface-alt);
  border: 1px solid var(--border);
}
/* 눌리는 자리를 키웠다 — 7px 패딩·13px 글자는 손가락으로 겨누기에 작았고, 전체 폭 화면에서
   제목 옆에 붙은 회색 알약이 눌리는 것으로 안 읽혔다(사용자 지적). */
.dsw {
  padding: 9px 20px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap;
  transition: color .15s, background .15s;
}
.dsw:hover { color: var(--text-primary); }
.dsw.on {
  background: var(--surface); color: var(--primary);
  box-shadow: 0 1px 3px rgba(17, 31, 40, .10);
}

/* 필터 한 줄 — [라벨] [입력·칩들] [더보기]. 시·도 18개 + 분야 10개를 그냥 늘어놓으면 좁은 화면에서
   세 줄을 먹어 정작 목록이 화면 밖으로 밀린다(§3.4, 사용자 지적). */
/* position:relative는 장식이 아니다 — 이 줄 안의 눈에 안 보이는 요소들(.chip-more-cb·.sr-only)이
   position:absolute라, 기준 조상이 없으면 페이지 왼쪽 위 구석으로 날아가 남의 자리에 겹친다. */
/* 라벨 한 칸 + 칩 묶음 한 칸. 칩은 자기들끼리 줄바꿈하고 라벨은 **첫 줄에 고정**된다 —
   예전처럼 같은 flex 줄에 섞어 두면 칩이 넘칠 때 라벨이 칩 사이로 밀려 들어간다. */
.filter-row { position: relative; display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.filter-lab {
  flex: none; width: 34px; height: 36px; display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--text-tertiary);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* 칩 높이를 못 박는다 — 아래 한 줄 접기(max-height)가 **정확히 한 줄**이어야 해서,
   글꼴이 바뀌어 높이가 1~2px 달라지면 둘째 줄 윗머리가 삐져나온다. */
.filter-row .filter-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; }

/* ── 필터 묶음 (사용자 지시 2026-08-09) — 지역·분야·정렬 세 줄을 한 영역으로 ──────────
   라벨 열(지역/분야/정렬, 34px)이 나란히 서고 칩 크기(36px)·간격(8px)은 세 줄이 같다.
   지역 17개가 두세 줄로 쏟아지던 것을 **한 줄 가로 스크롤 + 오른쪽 끝 페이드**로 눕혔다.
   · D-129("모든 지역 이름이 버튼으로")는 그대로다 — 접기·셀렉트가 아니라 같은 버튼 전부가
     한 줄로 이어질 뿐이다. [더보기] 접기를 다시 쓰지 않은 이유: 한때 접었다가 걷어낸 이력이
     있고(directory.html 주석), 접으면 무엇이 더 있는지 아예 안 보인다 — 페이드는 계속을
     말해 준다. 지역·분야가 **같은 규칙**을 쓴다(한 화면 두 규칙 금지, 기존 원칙 유지).
   · 고른 칩이 스크롤 밖에 숨지 않게 directory.js가 첫 화면에서 끌어온다(JS 없어도 스크롤로
     닿는다). 새 문구는 없다(P5). */
.filter-panel { margin-top: 6px; }
.filter-panel .filter-row { margin-top: 10px; align-items: center; }
/* 위아래 4px는 초점 테두리 자리다 — overflow가 걸리면 칩 밖 outline이 잘린다.
   왼쪽도 같은 이유로 4px 주되 음수 마진으로 당겨 라벨 열과 칩 첫 글자를 맞춘다.
   오른쪽 끝 페이드는 mask로 그린다 — 안쪽 padding-right(32px)가 페이드 구간(28px)보다
   넓어서, 끝까지 스크롤하면 빈 여백이 흐려질 뿐 마지막 칩은 또렷하다. */
.filter-panel .filter-chips {
  flex-wrap: nowrap; overflow-x: auto; padding: 4px 32px 4px 4px; margin-left: -4px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.filter-panel .filter-chips::-webkit-scrollbar { display: none; }
/* 스크롤로 왼쪽이 잘려 있으면(JS가 data-scrolled를 켠다) 왼쪽 끝도 흐려 "이쪽에도 더 있다"를
   알린다. 정지 상태(scrollLeft 0)에는 안 켠다 — 첫 칩이 이유 없이 흐려 보이면 안 된다. */
.filter-panel .filter-chips[data-scrolled] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.filter-panel .filter-chip { flex: none; }
/* 정렬 줄(공용 조각 .sort-bar)을 위 두 줄과 같은 간격으로 — 라벨 폭은 .sort-lab이 맞춘다. */
.filter-panel .sort-bar { margin: 10px 0 0; }

/* 목록 조각을 받아 오는 동안 (dir-filter.js, 사용자 지시 2026-08-09) ─────────────
   필터를 눌렀는데 아무 표시가 없으면 눌린 건지 알 수 없어 같은 칩을 또 누르게 된다.
   ⚠ **0.15초 늦게** 흐려진다(transition-delay). 대부분의 응답은 그보다 빨라서, 지연이 없으면
     누를 때마다 화면이 번쩍인다 — 느릴 때만 보이는 표시가 목적이다.
   ⚠ 자리(높이)는 그대로 두고 투명도만 낮춘다. 내용을 비우면 스크롤이 튀고, 방금 보던 카드가
     사라졌다 돌아오는 것처럼 보인다.
   ⚠ 클릭은 막지 않는다 — 기다리는 동안 다른 필터로 바꿀 수 있어야 한다(마지막 요청만 반영). */
[data-dir-results] { transition: opacity .12s ease; }
[data-dir-results][aria-busy="true"] { opacity: .5; transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
  [data-dir-results] { transition: none; }
}

.region-form { display: flex; align-items: center; gap: 8px; }
.region-select {
  height: 36px; padding: 0 8px; border-radius: var(--r-full);
  background: var(--surface-alt); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
.region-select:focus { outline: none; border-color: var(--primary); }

/* 고른 값 칩 — ✕로 바로 푼다(고른 것은 접혀 있어도 항상 보인다). */
.chip-x { gap: 6px; }
.chip-x .x { font-size: 11px; opacity: .85; }

/* 한 줄만 보이는 칩 묶음 + [더보기].
   ⚠ 토글을 **CSS 체크박스**로 한 이유: JS로 접었다 폈다 하면 스크립트가 죽었을 때 나머지 분야로
     갈 길이 아예 사라진다. 체크박스는 눈에 안 보이되 초점은 받으므로 키보드로도 열린다. */
.chip-clamp {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px;
  overflow: hidden; max-height: 36px;
}
.chip-more-cb {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chip-more-cb:checked ~ .chip-clamp { max-height: none; }
.chip-more {
  flex: none; align-self: flex-start; padding: 9px 4px;
  font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer; white-space: nowrap;
}
.chip-more .m-close { display: none; }
.chip-more-cb:checked ~ .chip-more .m-open { display: none; }
.chip-more-cb:checked ~ .chip-more .m-close { display: inline; }
/* 체크박스가 안 보이므로 초점 테두리를 라벨에 대신 그린다 — 안 그리면 키보드 사용자가
   지금 [더보기]에 와 있다는 걸 알 방법이 없다. */
.chip-more-cb:focus-visible ~ .chip-more { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }

/* 정렬 칩 (§3.3) — 켜진 칩은 **실제로 적용된 정렬**이다. '가까운순'은 위치를 받은 뒤에만 켜진다. */
.sort-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: var(--s-lg) 0 4px; }
/* 폭 34px은 .filter-lab과 같은 값이다 — 필터 묶음 안에서 세 줄의 라벨 열이 나란히 선다. */
.sort-lab { flex: none; width: 34px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); }
.sort-bar .sort-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; }
/* 위치를 못 받았을 때 "그래서 지금 무슨 순서인지"를 적는 줄 — 한 줄을 통째로 쓴다. */
.sort-note { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: var(--text-tertiary); }
.sort-note[hidden] { display: none; }

/* 필터 묶음 바로 뒤에 광고 레일이 붙으면 제목이 칩에 닿는다 — 여백은 여기서 준다.
   레일 쪽(home.css .dad-sec)을 고치면 지도 화면까지 함께 벌어진다(거기는 이미 여백이 있다).
   (2026-08-09 필터 묶음 도입으로 이웃이 .filter-row → .filter-panel로 바뀌었다.) */
.filter-panel + .dad-sec { margin-top: var(--s-xl); }

/* 조건에 맞는 사람이 전부 위 광고 레일로 올라간 경우. */
.list-allads { margin-top: var(--s-lg); color: var(--text-tertiary); }

/* 눈에는 안 보이고 화면낭독기에만 읽히는 글 — ✕ 칩이 무엇을 푸는지 알려 준다. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 상세 */
.detail-cover { height: 120px; border-radius: var(--r-xl); background: linear-gradient(135deg,#3182F6,#1B64DA); }
.detail-head { display: flex; gap: 16px; align-items: center; margin-top: -28px; padding: 0 8px; }
.detail-head .avatar { width: 72px; height: 72px; border: 3px solid #fff; font-size: 26px; }
.product-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--divider); }
.product-row:last-child { border-bottom: none; }
.price { font-weight: 700; color: var(--primary); }

/* 선택 칩 (체크박스·라디오 공용) — 분야·상담방식·전달대상 */
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* 고정가 카탈로그 라디오 (D-312) — 유형과 가격이 «한 몸»으로 읽히게 세로 2줄.
   가격을 chip 밖 캡션으로 빼면 어느 유형의 가격인지 시선이 왕복한다. */
.prov-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.prov-catalog-chip { width: auto; }
.prov-catalog-label { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.prov-catalog-label b { font-size: 13px; }
.choice-chip { position: relative; display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500; background: var(--surface); user-select: none; }
.choice-chip input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chip:has(input:checked) { border-color: var(--primary); color: var(--primary); background: var(--primary-light); font-weight: 700; }
/* 상한(D-129)에 닿아 지금은 고를 수 없는 항목 — 눌리지 않는 이유를 눈으로 알려 준다. */
.choice-chip.is-locked { opacity: .45; cursor: not-allowed; }

/* 질문 칸 늘리기 (`[+ 질문 추가]`, question-rows.js) — 견적요청서 작성·수정 화면이 쓴다.
   ⚠ 접두사가 `.qw-`인 것은 견적 위저드에서 온 이름이라서다. 위저드는 걷어냈지만(D-191 B4)
     이 부품은 견적요청서 화면이 **그대로 물려받아** 쓰고 있다 — 지우지 마라.
   ⚠ 지역 접기(.qw-region*)는 함께 지웠다: 지역을 아예 묻지 않게 됐다(Q-071 ⓒ). */
.qw-qlist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.qw-qrow { display: flex; gap: 8px; align-items: center; }
.qw-qrow .input { flex: 1; min-width: 0; }
/* 지우기는 보조 동작이라 칸보다 조용하게 — 색은 올려놓을 때만 경고색으로 바뀐다.
   높이는 .input(48px)에 맞춘다 — 한 줄 안에서 위아래로 어긋나 보이지 않게. */
/* 안쪽은 인라인 SVG다(fragments/chat-icons :: close, 동적 생성분은 question-rows.js).
   전역 `svg{display:block}`이라 가운데 정렬은 버튼이 직접 해야 한다. */
.qw-qdel {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 44px; height: 48px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-tertiary); cursor: pointer;
}
.qw-qdel svg { width: 18px; height: 18px; }
.qw-qdel:hover { border-color: var(--error); color: var(--error); }
.qw-qadd {
  margin-top: 10px; padding: 9px 14px; border: 1px dashed var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer;
}
.qw-qadd:hover { border-color: var(--primary); color: var(--primary); }

/* ── 위저드에서 물려받은 부품 (D-191 B4에서 남긴 것) ─────────────────────────────
   견적 작성 위저드(D-188)는 걷어냈다. 아래는 그때 만든 부품 중 **지금도 화면이 쓰는 것**만
   남긴 것이다 — 이름의 `.qw-` 접두는 출신을 말할 뿐 위저드가 살아 있다는 뜻이 아니다.

     .qw-progress / .qw-progress-fill  견적요청서 작성 진행 바 (brief-new.html)
     .qw-opt*                          견적요청서 고르기 라디오 줄 (fragments/brief-picker.html)
     .qw-error                         본문 검증 문구 (brief-new.html)
     .qw-nav                           단계 이동 줄 배치 (brief-new.html의 `qw-nav br-nav`)
     .qw-in-fwd / .qw-in-back          단계 전환 애니메이션 (brief-write.js)

   ⚠ 함께 지운 것(소비처 0으로 실측): .qw-head · .qw-step · .qw-group(-lead) · .qw-reveal ·
     .qw-intro · .qw-bubble* · .qw-opts · .choice-chip.qw-unsure · .qw-hint ·
     [data-wizard-submit|tail|prev|next]. 되살릴 일이 생기면 CSS부터가 아니라 D-191을 먼저 뒤집어라.
   ⚠ 감추기는 JS가 `hidden` 속성으로만 한다. 여기서 `display:none`을 기본값으로 두면 JS가
     죽었을 때 화면이 영영 안 보인다(.ip 패널에서 겪은 함정과 같다 — annotate.css:143).
     대신 `[hidden]`이 author의 display 선언에 지지 않게 못박아 둔다 — 상자 단위는 brief.css가
     (`.br-step`·`.br-nav`·`[data-brief-*]`), 버튼 단위는 아래 `.qw-nav .btn[hidden]`이 맡는다.
   ⚠ 새 색·모서리·자간을 만들지 않는다. 전부 tokens.css의 값이다. */

/* 진행률 — 값은 JS가 채운다(마크업에 적지 않는다). */
.qw-progress {
  height: 6px; border-radius: var(--r-full); background: var(--surface-alt); overflow: hidden;
}
.qw-progress-fill {
  display: block; height: 100%; width: 0; border-radius: var(--r-full);
  background: var(--primary); transition: width .25s ease;
}

/* 고르는 줄 — 부제가 붙어 칩으로는 좁다. 카드 줄로 두고 상태는 칩과 같은 규칙으로 칠한다.
   ⚠ 라디오로 쓰는 곳(견적요청서 고르기)은 brief.css가 네모 표시를 동그라미로 바꾼다. */
.qw-opt {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; user-select: none;
}
.qw-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qw-opt::before {
  content: ''; flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--grey300); border-radius: 6px; background: var(--surface);
}
.qw-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
/* 체크 표시는 인라인 data URI다 — 외부 파일을 하나 더 물지 않으려고. */
.qw-opt:has(input:checked)::before {
  border-color: var(--primary); background: var(--primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}
.qw-opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qw-opt-title { line-height: 1.35; }
.qw-opt-desc { line-height: 1.45; }

/* 막힌 이유는 **그 자리에** 뜬다. 위로 올려 모아 두면 어느 칸이 문제인지 다시 찾아야 한다. */
.qw-error { margin-top: 8px; color: var(--error); font-weight: 500; }

/* 단계 이동 줄 — 폭 배분은 쓰는 쪽이 정한다(brief.css의 `.br-nav [data-brief-prev|next]`).
   🔴 아래 `[hidden]` 규칙을 지우지 마라. `.btn`이 `display:inline-flex`를 주는 순간 UA의
      `[hidden]{display:none}`을 이겨서, JS가 감춘 [이전]·[다음]이 계속 보인다
      (brief-write.js는 prevBtn/nextBtn을 `hidden` 속성으로만 여닫는다).
      줄 전체를 감추는 것은 brief.css의 `.br-nav[hidden]`이 맡는다. */
.qw-nav { display: flex; gap: 10px; }
.qw-nav .btn[hidden] { display: none; }

/* 단계 전환 애니메이션 (사용자 지시: "단계적으로 애니메이션되며 다음 단계로").
   ⚠ 들어오는 카드만 움직인다. 나가는 카드까지 겹쳐 보이려면 position:absolute로 자리를 겹쳐야
     하고, 그러면 컨테이너 높이가 순간 0이 되어 화면이 더 크게 튄다 — 전환을 부드럽게 하려다
     오히려 점프를 키우는 셈이다.
   ⚠ 방향이 상태를 말한다: 앞으로 갈 땐 아래에서 올라오고, [이전]은 위에서 내려온다. */
@keyframes qw-in-fwd {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes qw-in-back {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.qw-in-fwd  { animation: qw-in-fwd  200ms ease-out both; }
.qw-in-back { animation: qw-in-back 200ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .qw-progress-fill { transition: none; }
  /* 움직임을 끄되 **보이기는 해야 한다** — both로 끝난 상태(opacity:1)에 머물게 0s로 준다.
     animation:none으로 지우면 from의 opacity:0이 남는 브라우저가 있다. */
  .qw-in-fwd, .qw-in-back { animation-duration: 0s; }
}

/* 예약 슬롯 선택 */
.slot-group { margin-top: 18px; }
.slot-group-label { font-weight: 700; margin-bottom: 10px; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 62px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 500; background: var(--surface); user-select: none; }
.slot-chip input { position: absolute; opacity: 0; pointer-events: none; }
.slot-chip:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); background: var(--surface-alt); font-weight: 700; }
.review-item { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.review-item:last-child { border-bottom: none; }

/* 채팅 */
.chat-msgs { margin: 16px 0; min-height: 200px; display: flex; flex-direction: column; gap: 10px; }
.msg-row { display: flex; align-items: flex-end; gap: 6px; }
.msg-row.mine { flex-direction: row-reverse; }
.bubble { max-width: 72%; padding: 10px 14px; border-radius: var(--r-lg); font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.bubble-peer { background: var(--surface-alt); color: var(--text-primary); border-top-left-radius: 4px; }
.bubble-mine { background: var(--primary); color: #fff; border-top-right-radius: 4px; }
.msg-time { font-size: 11px; color: var(--text-tertiary); margin-bottom: 2px; }
.chat-send { display: flex; gap: 8px; position: sticky; bottom: 12px; background: var(--background); padding-top: 8px; }
.chat-send input { flex: 1; }

/* ── 일터 화면 골격 (시안 v2.0 §1 ⑦) ─────────────────────────────────────
   페이지 제목 21/700 + ~해요체 한 줄 → 요약 카드 줄 → 흰 콘텐츠 카드(radius 16).

   🔴 **골라 쓰는 부품이다. 전역에 강제하지 않는다.** 셸 담당이 여기 한 벌만 두고, 각 화면
      담당이 자기 템플릿에서 붙인다. 화면마다 제목·요약 카드를 제각각 만들면 같은 뜻의 칸이
      지면마다 다른 크기로 서는데, 그게 지금 개편 전 상태였다.
   ⚠ 이름이 `.page-head`가 아니라 `.pg-head`인 이유: `.page-head`는 content.css가 이미 쓰고
     있다(pro-quotes·pro-subscription·directory-map·pro-ads). 같은 이름을 덮어쓰면 그 넷이
     조용히 바뀐다. */
.pg-head { margin-bottom: 20px; }
.pg-title { font-size: 21px; font-weight: 700; line-height: 1.35; letter-spacing: var(--ls-xl); color: var(--text-primary); }
/* 부제는 «무엇을 하는 화면인지»를 당근 톤으로 한 줄. 규칙이 아니라 안내다. */
.pg-sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }

/* 요약 카드 줄 — 아이콘 칩 34 틴트 + 값 24 tabular + 이동 링크.
   ⚠ 값은 반드시 tabular-nums다. 비례폭 숫자로 두면 자동 갱신·페이지 이동마다 숫자 폭이
     달라져 카드가 미세하게 들썩인다. */
.sum-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.sum-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.sum-ic {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary-pressed);
}
.sum-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sum-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sum-label { font-size: 13px; color: var(--text-tertiary); }
.sum-val { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: var(--ls-2xl); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.sum-link { font-size: 13px; font-weight: 600; color: var(--primary); }

/* 흰 콘텐츠 카드 — 회색 지면(--shell-bg) 위에 서는 본문 판. */
.pg-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px;
}

/* 폭 — 값의 근거와 «전역 상한이 아닌 이유»는 tokens.css 주석에. */
.pg-panel { max-width: var(--panel-max); }
.pg-editor { max-width: var(--editor-max); }

/* Responsive */
@media (max-width: 720px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .site-header nav { display: none; }
  .hero { padding: 32px 22px; }
  .hero h1 { font-size: 26px; }
  /* 좁은 화면에서는 요약 카드도 한 줄에 하나 — 212px 두 칸이 들어가면 값이 잘린다. */
  .sum-grid { grid-template-columns: 1fr; }
}

/* ══ 서체 적용 (D-260) ══════════════════════════════════════════════════════
   서체는 Pretendard 한 벌이다 — 그 배경은 tokens.css의 서체 주석에 있다(D-363).
   여기는 **어디에 씌우는지**만 적는다. 목록을 늘릴 때는 그 주석을 먼저 읽어라. */

/* ── 제목 (D-271) — 전용 서체 없이 **크기 × 굵기**로 세운다 ────────────────
   🔴 잘난체 2를 걷어냈다(사용자 지시). 그 서체는 굵기가 한 벌뿐이라 ① 굵게 하면 브라우저가
      «가짜 굵게»를 덧그려 획이 뭉개지고(「제목이 두꺼워 보인다」로 돌아왔다) ② 19px 미만에서
      뭉개져 목록 카드 제목에는 못 썼다 — 결국 같은 위계가 지면마다 다른 얼굴이었다.

   ⚠ **여기서 font-family를 지정하지 않는다.** body의 Pretendard를 그대로 물려받는다.
     제목임을 만드는 것은 서체가 아니라 **크기·굵기·자간**이고, 그 값은 각 지면 CSS에 이미 있다
     (`.sisun-article-title` 34px/800 · `.qna-question-title` 23px/700 …).
   ⚠ 그래서 예전의 `font-weight: 400 !important`도 함께 걷었다 — 그것은 «가짜 굵게»를 막으려던
     장치였고, 서체가 사라진 지금은 **제목을 도로 얇게 만드는 버그**일 뿐이다.
   ⚠ 제목을 더 세우고 싶으면 굵기를 800까지 올려라. Pretendard는 400·500·600·700 실제 굵기가
     있고, 800은 700을 합성하지만 원래 굵은 얼굴이 아니라 뭉개지지 않는다.

   🔴 이 자리에 새 «브랜드 제목 서체»를 다시 들이려거든 위 두 가지를 먼저 확인할 것:
      **굵기가 여러 벌인가 · 15px에서도 읽히는가.** 둘 중 하나라도 아니면 같은 일이 반복된다. */

/* ── 안내 — 우리가 말을 거는 자리 ────────────────────────────────────────────
   🔴 **여기서 font-family를 지정하지 않는다**(D-363). 예전엔 주아체를 입혔는데 사용자 지적으로
      걷어냈다: 자간이 넓어 같은 안내가 지면마다 다른 얼굴이었고, 가운뎃점 「·」처럼 **글리프가
      빠진 글자가 그냥 공백으로** 그려졌다(「세액 · 신고」가 「세액   신고」로 보였다).
   ⚠ 안내를 안내로 만드는 것은 서체가 아니라 **크기·색**이다. 그 둘만 남긴다. */

/* ① 홀로 서는 안내 — 화면에 이것 하나뿐일 때(빈 상태·결과 알림). 조금 커도 된다. */
.empty-box,               /* 의뢰인 지면 빈 상태 */
.my-empty,                /* 마이페이지 빈 상태 — 「아직 예약이 없어요…」 */
.adm2-empty,              /* 관리자 빈 상태 */
.ed-strip-anon,           /* 에디터 안내 스트립 */
.qna-empty,               /* 세무 Q&A 빈 상태 */
.page-flash {             /* 저장·승인 같은 결과 알림 */
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
}

/* ② 곁들이는 안내 — 제목·목록 옆에 붙는 한 줄(캡션 자리).
   ⚠ 본문을 거들지, 본문보다 소리치면 안 된다 — 그래서 색을 한 단계 눌러 둔다. */
.sisun-note,              /* 세무시선 지면 안내 */
.dir-region-hint,         /* 세무사찾기 — 「시·도를 먼저 골라 주세요」 */
.qna-field-note,          /* 세무 Q&A 작성 — 칸마다 붙는 한 줄 안내 */
.qna-edit-note,           /* 세무 Q&A 수정 안내 */
.sort-note {              /* 세무사찾기 — 「위치를 알 수 없어 인기순으로…」 */
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-tertiary);
}

/* ⚠ 옛 «되돌림» 블록(계약서·법적 문구를 Pretendard로 강제)은 함께 걷었다 — 서체가 하나뿐인
     지금은 아무 일도 하지 않는 죽은 규칙이고, 남겨 두면 다음 사람이 «서체가 둘인가»로 읽는다.
     아래 한 줄만 남긴다: 숫자가 줄 맞춰 서야 하는 자리다(서체와 무관한 요구다). */
[class*="amount"], [class*="money"], [class*="price"], .num, table
{ font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
   세무사 명함 = 메뉴 (D-267) — 커뮤니티 지면 공용(fragments/tax-menu.html)
   ══════════════════════════════════════════════════════════════════════════
   메뉴 알맹이(.acct-item)는 상단바 계정 메뉴와 **같은 클래스를 쓴다**(shell.css) —
   두 벌로 만들면 한쪽만 고쳐진다. 여기서는 «명함처럼 생긴 버튼»만 정의한다. */
.taxm { position: relative; }
.taxm-sum {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 8px 10px; border-radius: var(--r-md); cursor: pointer;
  list-style: none;                      /* 사파리·파이어폭스의 기본 삼각형 제거 */
  transition: background .15s ease;
}
.taxm-sum::-webkit-details-marker { display: none; }   /* 구형 웹킷 */
.taxm-sum:hover { background: var(--surface-alt); }
.taxm-sum:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.taxm-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.taxm-av-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: 17px; font-weight: 700;
}
.taxm-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.taxm-name { font-size: 15.5px; font-weight: 700; color: var(--text-primary); }
.taxm-sub {
  font-size: 12.5px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.taxm-caret { flex: none; color: var(--text-tertiary); transition: transform .15s ease; }
.taxm[open] .taxm-caret { transform: rotate(180deg); }
/* 메뉴는 명함 **왼쪽 끝**에 맞춘다 — 상단바는 화면 오른쪽 끝이라 right:0이지만,
   여기는 명함이 지면 왼쪽에 있어 right:0이면 메뉴가 카드 밖으로 밀린다. */
.taxm-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-float);
}

/* ══ 이미지 드래그 금지 (D-280) ═════════════════════════════════════════════
   🔴 **범위를 넓혔다.** D-279에서는 캐러셀 이미지에만 걸고 「프로필·후기 사진은 끌 수 있어야
      한다」고 일부러 좁혔는데, 실제로 써 보니 세무사 프로필 사진·세무시선 첨부·Q&A 첨부를 끌 때
      **똑같은 사진 고스트**가 나왔다(사용자 지적). 그 예외는 상상한 요구였고 실제 요구가 아니었다.
   ⇒ 이제 **모든 이미지**가 대상이다. 지면마다 클래스를 세어 가며 붙이는 방식은 새 화면이
     생길 때마다 빠진다 — 기본을 막고, 정말 끌어야 할 자리가 생기면 그때 예외를 둔다.

   ⚠ 이 규칙은 **WebKit·Blink 전용**이다(표준 아님). Firefox는 무시하므로 `shell.js`의
     dragstart 위임 처리가 함께 있어야 한다. 한쪽만 두면 「내 브라우저에서는 되는데」가 된다.
   ⚠ 막는 것은 **이미지 끌기**뿐이다. 파일을 밖에서 끌어다 놓는 업로드(세무시선 에디터·보관함)는
     `drop`/`dragover`를 쓰므로 영향이 없다 — 실제로 확인하고 넓혔다.
   ⚠ `user-select`·`pointer-events`를 여기 얹지 마라. 전자는 글 선택을, 후자는 링크 클릭을 죽인다. */
img {
  -webkit-user-drag: none;
}

/* 상세 후기도 홈 카드와 **같은 인용 처리**(D-280). 한쪽만 하면 같은 후기가 지면마다
   다른 얼굴이 된다 — 값은 home.css의 `.rv-body::before/after`와 함께 고칠 것. */
.rev-body::before,
.rev-body::after {
  color: var(--primary);
  opacity: 0.55;
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.28em;
  font-weight: 700;
}
.rev-body::before { content: '\201C'; margin-right: 2px; }
.rev-body::after  { content: '\201D'; margin-left: 2px; }

/* 전자계약서 링크 카드 (D-327) — 예약(파랑)·결제(주황)와 갈리는 남색 계열.
   ⚠ 세 톤이 서로 충분히 멀어야 한다 — 채팅방에서 스치듯 보는 카드라 색이 곧 종류다. */
.chat-card.card-contract .link-strip { background: #EEF2FB; color: #1E3A5F; }

/* ══ 세무사 찾기 목록 상단 [AD] (map_top, D-453) — 구독 세무사 가로 한 줄, 최대 10명. ══ */
.dir-ad { margin: 14px 0 4px; }
.dir-ad-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dir-ad-mark {
  font-size: 10px; font-weight: 900; letter-spacing: .04em;
  color: var(--text-tertiary); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.dir-ad-t { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.dir-ad-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
/* 넓은 사각 프로필 카드(사용자 지시) — 위 가로 사진, 아래 이름·지역·평점.
   아래 일반 행(.tax-row)보다 시각적으로 커야 광고값을 한다 — 저쪽 키를 줄인 것과 한 벌. */
/* 🔴 카드 전체가 세로 16:9(=9:16)다(사용자 지시) — 사진은 남는 키를 다 쓴다(flex:1).
   가로 132px 사진은 인물(세로 원본)의 이마를 잘랐다(라이브 실측) — 세로로 길어야
   스튜디오 프로필이 온전히 선다. 텍스트 블록은 고정, 사진이 카드 키를 따른다. */
.dir-ad-card {
  flex: none; width: 176px; aspect-ratio: 9 / 16; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--surface); color: inherit; text-decoration: none;
}
.dir-ad-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(20, 36, 61, .08); }
.dir-ad-photo { width: 100%; flex: 1; min-height: 0; border-radius: 0; object-fit: cover; background: #F1F6FE; }
.dir-ad-photo-empty { display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 34px; color: var(--primary); }
.dir-ad-b { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 11px; min-width: 0; }
.dir-ad-nm { font-size: 14.5px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-ad-rg { font-size: 12px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-ad-rt { font-size: 12px; color: var(--text-secondary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dir-ad-rt .star { color: var(--warning); }
@media (max-width: 768px) {
  .dir-ad-card { width: 148px; }
  .dir-ad-t { font-size: 15px; }
}



/* ══ 예약 화면 개편 (D-482 보강 ⑨, 사용자 지시) ═══════════════════════════════
   날짜를 먼저 고르고 그 날의 시간만 본다 — 2주치 시간을 한 번에 깔지 않는다.
   🔴 무JS: 라디오(.bk-r)가 슬롯 묶음의 **형제로 앞에** 있고, 아래 규칙이 «N번째가 켜지면
      N번째 묶음만 보인다»를 그린다. :has()가 아니라 형제 결합자라 구형에서도 동작한다.
   ⚠ 날짜 수 상한은 BookingController.DAYS_AHEAD(14)다 — 늘리면 아래 규칙 개수도 늘려라
      (규칙이 모자라면 그 날짜를 골라도 시간이 안 뜬다). 지금은 18까지 깔아 뒀다. */

.bk-head { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bk-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.bk-avatar-empty { display: flex; align-items: center; justify-content: center;
  background: var(--surface-alt, #f2f4f6); color: var(--text-secondary, #4e5968); font-weight: 700; }
.bk-who { min-width: 0; }
.bk-name { display: flex; align-items: baseline; gap: 8px; }
.bk-profile-link { font-size: 12px; color: var(--primary, #3182f6); }

.bk-product { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bk-product-l { display: flex; flex-direction: column; gap: 2px; }
.bk-product .price { margin-left: auto; }
.bk-credit-tag { margin-left: auto; font-size: 12px; font-weight: 700; color: #0b8043;
  background: #e6f4ea; border-radius: 999px; padding: 6px 11px; white-space: nowrap; }

.bk-picker { margin-top: 12px; }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bk-day { flex: none; min-width: 84px; padding: 9px 12px; border: 1px solid var(--border, #e5e8eb);
  border-radius: 10px; background: #fff; cursor: pointer; text-align: center; line-height: 1.3;
  transition: border-color .12s, background .12s; }
.bk-day:hover { border-color: #c6d3e4; }
.bk-day b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.bk-day i { display: block; font-style: normal; font-size: 11px; color: var(--text-tertiary, #8b95a1); margin-top: 2px; }
.bk-set { display: none; padding-top: 10px; border-top: 1px solid var(--border-light, #f2f4f6); margin-top: 6px; }
.bk-set-label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary, #4e5968); margin-bottom: 9px; }

/* 선택된 날짜만 보이고, 그 칩만 파랗게 선다. */
.bk-r:nth-of-type(1):checked ~ .bk-sets .bk-set:nth-child(1),
.bk-r:nth-of-type(2):checked ~ .bk-sets .bk-set:nth-child(2),
.bk-r:nth-of-type(3):checked ~ .bk-sets .bk-set:nth-child(3),
.bk-r:nth-of-type(4):checked ~ .bk-sets .bk-set:nth-child(4),
.bk-r:nth-of-type(5):checked ~ .bk-sets .bk-set:nth-child(5),
.bk-r:nth-of-type(6):checked ~ .bk-sets .bk-set:nth-child(6),
.bk-r:nth-of-type(7):checked ~ .bk-sets .bk-set:nth-child(7),
.bk-r:nth-of-type(8):checked ~ .bk-sets .bk-set:nth-child(8),
.bk-r:nth-of-type(9):checked ~ .bk-sets .bk-set:nth-child(9),
.bk-r:nth-of-type(10):checked ~ .bk-sets .bk-set:nth-child(10),
.bk-r:nth-of-type(11):checked ~ .bk-sets .bk-set:nth-child(11),
.bk-r:nth-of-type(12):checked ~ .bk-sets .bk-set:nth-child(12),
.bk-r:nth-of-type(13):checked ~ .bk-sets .bk-set:nth-child(13),
.bk-r:nth-of-type(14):checked ~ .bk-sets .bk-set:nth-child(14),
.bk-r:nth-of-type(15):checked ~ .bk-sets .bk-set:nth-child(15),
.bk-r:nth-of-type(16):checked ~ .bk-sets .bk-set:nth-child(16),
.bk-r:nth-of-type(17):checked ~ .bk-sets .bk-set:nth-child(17),
.bk-r:nth-of-type(18):checked ~ .bk-sets .bk-set:nth-child(18) { display: block; }
.bk-r:nth-of-type(1):checked ~ .bk-days .bk-day:nth-child(1),
.bk-r:nth-of-type(2):checked ~ .bk-days .bk-day:nth-child(2),
.bk-r:nth-of-type(3):checked ~ .bk-days .bk-day:nth-child(3),
.bk-r:nth-of-type(4):checked ~ .bk-days .bk-day:nth-child(4),
.bk-r:nth-of-type(5):checked ~ .bk-days .bk-day:nth-child(5),
.bk-r:nth-of-type(6):checked ~ .bk-days .bk-day:nth-child(6),
.bk-r:nth-of-type(7):checked ~ .bk-days .bk-day:nth-child(7),
.bk-r:nth-of-type(8):checked ~ .bk-days .bk-day:nth-child(8),
.bk-r:nth-of-type(9):checked ~ .bk-days .bk-day:nth-child(9),
.bk-r:nth-of-type(10):checked ~ .bk-days .bk-day:nth-child(10),
.bk-r:nth-of-type(11):checked ~ .bk-days .bk-day:nth-child(11),
.bk-r:nth-of-type(12):checked ~ .bk-days .bk-day:nth-child(12),
.bk-r:nth-of-type(13):checked ~ .bk-days .bk-day:nth-child(13),
.bk-r:nth-of-type(14):checked ~ .bk-days .bk-day:nth-child(14),
.bk-r:nth-of-type(15):checked ~ .bk-days .bk-day:nth-child(15),
.bk-r:nth-of-type(16):checked ~ .bk-days .bk-day:nth-child(16),
.bk-r:nth-of-type(17):checked ~ .bk-days .bk-day:nth-child(17),
.bk-r:nth-of-type(18):checked ~ .bk-days .bk-day:nth-child(18) { border-color: var(--primary, #3182f6); background: #f0f6ff; }
.bk-r:nth-of-type(1):checked ~ .bk-days .bk-day:nth-child(1) b,
.bk-r:nth-of-type(2):checked ~ .bk-days .bk-day:nth-child(2) b,
.bk-r:nth-of-type(3):checked ~ .bk-days .bk-day:nth-child(3) b,
.bk-r:nth-of-type(4):checked ~ .bk-days .bk-day:nth-child(4) b,
.bk-r:nth-of-type(5):checked ~ .bk-days .bk-day:nth-child(5) b,
.bk-r:nth-of-type(6):checked ~ .bk-days .bk-day:nth-child(6) b,
.bk-r:nth-of-type(7):checked ~ .bk-days .bk-day:nth-child(7) b,
.bk-r:nth-of-type(8):checked ~ .bk-days .bk-day:nth-child(8) b,
.bk-r:nth-of-type(9):checked ~ .bk-days .bk-day:nth-child(9) b,
.bk-r:nth-of-type(10):checked ~ .bk-days .bk-day:nth-child(10) b,
.bk-r:nth-of-type(11):checked ~ .bk-days .bk-day:nth-child(11) b,
.bk-r:nth-of-type(12):checked ~ .bk-days .bk-day:nth-child(12) b,
.bk-r:nth-of-type(13):checked ~ .bk-days .bk-day:nth-child(13) b,
.bk-r:nth-of-type(14):checked ~ .bk-days .bk-day:nth-child(14) b,
.bk-r:nth-of-type(15):checked ~ .bk-days .bk-day:nth-child(15) b,
.bk-r:nth-of-type(16):checked ~ .bk-days .bk-day:nth-child(16) b,
.bk-r:nth-of-type(17):checked ~ .bk-days .bk-day:nth-child(17) b,
.bk-r:nth-of-type(18):checked ~ .bk-days .bk-day:nth-child(18) b { color: var(--primary, #3182f6); }

/* ══ 히어로 노트 — «빈 상태·시작 관문»의 표준 얼굴 (D-485, 사용자 확정 A-3안) ═══════
   🔴 **이 서비스의 빈 상태는 전부 이 얼굴을 쓴다.** 파란 그라디언트 판 위에 일러스트를
      «배경으로 옅게» 깔고, 글이 주인공이 된다 — 글과 그림이 다투지 않는 것이 이 안의 핵심이다.
      새 빈 상태를 만들 때 회색 «항목이 없습니다» 판을 새로 짜지 마라. 이 조각을 써라
      (`fragments/hero.html` :: note).
   ⚠ 아트는 **장식**이다: `aria-hidden`이고, 좁은 화면에서는 더 옅어진다. 아트에 정보를
     싣지 마라 — 읽어야 하는 것은 전부 왼쪽 글에 있어야 한다.
   ⚠ 글 칸에 `max-width`가 있는 이유는 아트와 글이 겹치지 않게 하기 위해서다. 지우면
     넓은 화면에서 제목이 그림 위로 올라탄다. */
/* 🔴 **아트는 절대배치가 아니라 «칸»이다.** 예전엔 판 전체에 깔고 글에 max-width를 줘서
      피했는데, 그 방식은 판이 높아질수록(줄이 늘수록) 그림이 함께 커져 **글 위로 걸어 들어왔다**
      — 사용자 지적으로 걸렸다. 격자 칸으로 두면 글칸과 그림칸이 자리를 나눠 갖기 때문에
      어떤 높이·너비에서도 겹칠 수가 없다. 절대배치로 되돌리지 마라. */
.hero-note {
  position: relative; overflow: hidden;
  /* ⚠ 그림칸 크기는 **여기서** 정한다. svg 쪽에 `width: 30%`를 주면 auto 칸에서 순환 참조가
     되어 칸이 0으로 접힌다(라이브에서 그림이 통째로 사라졌다). 퍼센트는 격자 컨테이너
     기준으로 풀리는 이 자리에 둬야 한다. */
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) clamp(148px, 26%, 264px);
  border: 1px solid #D7E6FF; border-radius: var(--r-lg, 16px);
  background: linear-gradient(105deg, #EAF2FF 0%, #F5F9FF 52%, #FBFDFF 100%);
}
/* 그림칸 — 폭은 판을 따라 줄지만 제 크기를 넘지 않는다(늘리면 선이 굵어져 배경답지 않다). */
.hero-note-art {
  width: 100%; height: auto;
  margin-right: 16px; opacity: .55; pointer-events: none;
}
.hero-note-body {
  position: relative; min-width: 0;
  padding: 30px var(--s-2xl, 24px) 26px;
}
.hero-note-eyebrow {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: var(--ls-sm, -.1px);
  color: var(--primary-pressed, #1B64DA); background: var(--primary-light, #E8F3FF);
  border-radius: var(--r-full, 999px); padding: 4px 10px;
}
.hero-note-title {
  margin: 12px 0 9px; font-size: 23px; font-weight: 700; line-height: 1.34;
  letter-spacing: var(--ls-xl, -.4px); color: var(--text-primary, #191F28);
  word-break: keep-all;
}
.hero-note-lead {
  margin: 0; font-size: 13px; line-height: 1.7;
  color: var(--text-tertiary, #6B7684); word-break: keep-all;
}
.hero-note-cta { margin-top: 20px; }
.hero-note-foot {
  margin: 10px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--text-disabled, #9AA3AE);
}

/* 좁은 화면 — 아트를 더 옅게 물리고 글 칸을 풀어 준다. 글이 그림 위에 얹히는 구조라
   여기서 대비를 확보하지 않으면 모바일에서 제목이 읽히지 않는다. */
@media (max-width: 560px) {
  /* 좁은 화면에서는 그림을 **버린다** — 줄여서 끼워 넣으면 글칸이 읽기 어려운 폭이 된다.
     장식과 본문이 다투면 본문이 이긴다. */
  .hero-note { grid-template-columns: minmax(0, 1fr); }
  .hero-note-art { display: none; }
  .hero-note-body { padding: 26px 20px 22px; }
  .hero-note-title { font-size: 21px; }
}

/* 판만 좁은 자리(넓은 화면의 2열 배치 등)에 넣을 때 — 미디어 쿼리는 «화면» 기준이라
   여기까지 못 잡는다. 이 수식어를 붙이면 그림 칸이 통째로 사라진다. */
.hero-note--narrow { grid-template-columns: minmax(0, 1fr); }
.hero-note--narrow .hero-note-art { display: none; }

/* ══ 예약 맥락 머리 (D-529, 사용자 확정 T1) ═══════════════════════════════════════
   Q&A 답변을 읽고 넘어온 예약에서 «어느 질문인지»를 세운다 — 없으면 여정의 실이 여기서 끊긴다.
   ⚠ 이 카드는 Q&A를 거친 예약에만 뜬다. 프로필에서 바로 온 예약에는 없다. */
.bk-ctx {
  border-color: var(--tint-blue-line); background: var(--surface-tint);
  padding: 16px 18px; margin-bottom: 10px;
}
/* ⚠ 자간을 벌리지 마라 — 이건 «결제 완료» 같은 두세 글자 눈썹이 아니라 한 문장이다.
     한글 문장에 트래킹을 넣으면 낱글자로 흩어져 읽는 속도가 떨어진다. */
.bk-ctx-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); }
.bk-ctx-title {
  display: block; margin-top: 7px; font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; color: var(--text-primary); word-break: keep-all;
}
.bk-ctx-title:hover { color: var(--primary-pressed); }
.bk-ctx-note {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--grey700); word-break: keep-all;
}