/* 마켓플레이스/디렉터리 패턴 컴포넌트 — tokens.css 변수만 사용.
   랜딩(/) + 전문가 찾기(/experts) 공유. app.css 다음, 페이지 전용 CSS 앞에 로드.
   기존 Trust & Authority 토큰(네이비/블루) 그대로. 여긴 "탐색/리스팅" UI만 추가. */

/* ── 내부 페이지 배너 (BioLink 네이비→블루 그라데이션) ─── */
.page-banner { background: linear-gradient(120deg, #16249c 0%, #14318f 55%, #0a6fc4 100%); color: #fff; padding: var(--space-6) 0; }
.page-banner h1 { color: #fff; margin: 0 0 var(--space-2); font-size: var(--fs-3xl); }
.page-banner p { color: rgba(255,255,255,.85); margin: 0; font-size: var(--fs-lg); max-width: 62ch; line-height: var(--lh-snug); }
.page-banner .eyebrow { color: #7fc2eb; }   /* 네이비 위에서 대비 확보 */

/* Professional page headers */
.page-banner {
  background: linear-gradient(180deg, #f8fafc 0%, #eef3f9 100%);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.page-banner h1 {
  color: var(--c-text);
}
.page-banner p {
  color: var(--c-text-muted);
}
.page-banner .eyebrow {
  color: var(--c-accent-strong);
}

/* ── 히어로 검색 (랜딩 — "검색이 곧 CTA") ───────────────── */
.hero-search { max-width: 760px; margin-top: var(--space-4); }
.hero-search-form {
  display: grid; grid-template-columns: minmax(180px, 230px) 1fr auto;
  gap: var(--space-2);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: var(--space-2);
  box-shadow: var(--shadow-lg);
}
.hero-search-form select,
.hero-search-form input { border-color: var(--c-border-strong); }
.hero-search-form .btn { white-space: nowrap; }
.hero-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--space-3); }
.hero-popular .label { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.hero-popular a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--c-bg);
  border: 1px solid var(--c-border-strong); color: var(--c-text);
  text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hero-popular a:visited { color: var(--c-text); }
.hero-popular a:hover, .hero-popular a:focus-visible { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-strong); }

/* ── 카테고리 그리드 (아이콘 카드) ─────────────────────── */
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.cat-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg); color: var(--c-text); text-decoration: none;
  transition: box-shadow var(--t-base) var(--ease-spring), transform var(--t-base) var(--ease-spring), border-color var(--t-base) var(--ease);
}
.cat-card:visited { color: var(--c-text); }
.cat-card:hover, .cat-card:focus-visible { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--c-accent); }
.cat-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--c-ink); transition: transform var(--t-base) var(--ease-spring); }
.cat-card:hover .cat-thumb, .cat-card:focus-visible .cat-thumb { transform: scale(1.06); }
.cat-body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3) var(--space-3); }
.cat-name { font-weight: var(--fw-bold); color: var(--c-ink); line-height: var(--lh-snug); }
.cat-go { color: var(--c-accent-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cat-card:hover .cat-go { text-decoration: underline; }

/* ── 필터 탭 (전문가 찾기) ──────────────────────────────── */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.filter-tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-pill);
  background: var(--c-bg); color: var(--c-text); font-family: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filter-tab:hover, .filter-tab:focus-visible { border-color: var(--c-accent); color: var(--c-accent-strong); }
.filter-tab[aria-pressed="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* ── 리스팅 그리드 / 전문가 카드 ───────────────────────── */
.listing-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.listing-grid.board { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.expert-card { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
.expert-card-head { display: flex; align-items: center; gap: var(--space-2); }
.expert-card-head .avatar { width: 52px; height: 52px; font-size: var(--fs-lg); }
.expert-id { min-width: 0; }
.expert-name { display: block; font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--c-ink); line-height: var(--lh-snug); }
.expert-region { display: inline-flex; align-items: center; gap: 5px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.expert-region svg { width: 15px; height: 15px; }
.expert-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.expert-tags .chip { padding: 4px 11px; font-size: var(--fs-xs); }
.expert-bio { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.expert-card .btn { margin-top: auto; }

/* 아바타 (랜딩 데모 + 전문가 카드 공유) */
.avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink); color: #fff; font-weight: var(--fw-bold); }

/* 리스팅 상태 (로딩/빈) */
.listing-state { grid-column: 1 / -1; padding: var(--space-5) var(--space-3); text-align: center; color: var(--c-text-muted); }
.listing-state h3 { color: var(--c-text); margin: 0 0 var(--space-1); }
.listing-state p { margin: 0 0 var(--space-3); }

/* ── 양면 CTA (기업 ↔ 전문가) ──────────────────────────── */
.dual-cta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.dual-cta-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.dual-cta-card .icon-box { margin-bottom: var(--space-1); }
.dual-cta-card h3 { margin: 0; font-size: var(--fs-xl); }
.dual-cta-card p { color: var(--c-text-muted); margin: 0; flex: 1 1 auto; }
.dual-cta-card .btn { align-self: flex-start; }

/* ── 3 가치 컬럼 (기존 사이트의 "다양한 분야의 전문가" 등) ── */
.value-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.value-card { text-align: center; padding: var(--space-5) var(--space-3); }
.value-card .icon-box { width: 64px; height: 64px; margin: 0 auto var(--space-3); }
.value-card .icon-box svg { width: 30px; height: 30px; }
.value-card h3 { font-size: var(--fs-xl); margin: 0 0 var(--space-1); }
.value-lead { color: var(--c-accent); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.value-card p:last-child { color: var(--c-text-muted); margin: 0; }

/* ── 그라데이션 밴드 (기존 사이트 느낌, 보라색 대신 브랜드 네이비→블루) ── */
.gradient-band { background: linear-gradient(115deg, #16249c 0%, #173a9e 45%, #0097ed 100%); color: #fff; text-align: center; }
.gradient-band h2 { color: #fff; margin: 0 0 var(--space-2); }
.gradient-band p { color: rgba(255,255,255,.92); margin: 0 0 var(--space-4); font-size: var(--fs-lg); }

/* ── 관련기관 (협력기관) ─────────────────────────────────── */
.partner-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.partner-list li { display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 72px; padding: var(--space-2); border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg); color: var(--c-text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: var(--lh-snug); }

/* ── 게시판 레이아웃 (인허가 컨설팅 리스팅: 좌측 분류 + 카드 그리드) ── */
.board-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-4); align-items: start; }
.board-aside { position: sticky; top: 88px; }
.board-aside h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-subtle); margin: 0 0 var(--space-2); }
.cat-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cat-side-list button { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); color: var(--c-text); padding: 10px var(--space-2); border-radius: var(--radius-sm);
  border-left: 3px solid transparent; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cat-side-list button:hover { background: var(--c-surface); }
.cat-side-list button[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-accent-strong); border-left-color: var(--c-accent); font-weight: var(--fw-bold); }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }

/* 게시판 카드 (썸네일 + 본문) */
.expert-card.board-card { padding: 0; overflow: hidden; }
.board-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.board-card-link:visited { color: inherit; }
.expert-card.board-card .card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
.expert-thumb { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16249c, #1f49b8 55%, #0097ed); color: #fff; }
.thumb-initial { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
/* 실제 사진(전문가 본인 업로드) — photoUrl 있을 때만. 일러스트 아바타 자리 그대로 채움. */
.expert-photo { width: 100%; object-fit: cover; }
.expert-card.board-card .expert-name { font-size: var(--fs-lg); display: block; color: var(--c-ink); font-weight: var(--fw-bold); }
.expert-quote { color: var(--c-accent-strong); font-weight: var(--fw-bold); font-size: var(--fs-sm); margin-top: auto; }

/* ── 상세 페이지 ────────────────────────────────────────── */
.breadcrumb { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--space-3); }
.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-accent-strong); }
.detail-top { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-4); align-items: start; }
.detail-visual { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16249c, #1f49b8 55%, #0097ed); color: #fff; }
.detail-visual .thumb-initial { width: 110px; height: 110px; font-size: 52px; }
.detail-title { font-size: var(--fs-2xl); margin: 0 0 var(--space-2); }
.detail-meta { list-style: none; margin: var(--space-3) 0 0; padding: 0; border-top: 1px solid var(--c-border); }
.detail-meta li { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--c-border); }
.detail-meta .k { flex: 0 0 110px; color: var(--c-text-muted); font-weight: var(--fw-semibold); }
.detail-meta .v { flex: 1 1 auto; color: var(--c-text); min-width: 0; }
.detail-cta { margin-top: var(--space-4); }
.detail-section { margin-top: var(--space-6); }
.detail-section h2 { font-size: var(--fs-xl); padding-bottom: var(--space-2); border-bottom: 2px solid var(--c-ink); margin-bottom: var(--space-3); }
.detail-body { color: var(--c-text); line-height: var(--lh-base); }
.detail-body ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.review-empty { padding: var(--space-5); text-align: center; color: var(--c-text-muted); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }

/* ── 회사 소개 / 대표 인사말 ─────────────────────────────── */
.ceo-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-5); align-items: start; }
.ceo-card { text-align: center; }
.ceo-photo { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--c-border); box-shadow: var(--shadow-md); background: var(--c-surface); }
.ceo-name { margin-top: var(--space-2); font-weight: var(--fw-bold); color: var(--c-ink); }
.ceo-name span { display: block; color: var(--c-text-muted); font-weight: var(--fw-medium); font-size: var(--fs-sm); margin-top: 2px; }
.greeting h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.greeting p { margin-bottom: var(--space-3); color: var(--c-text); line-height: var(--lh-base); }
.greeting .sign { margin-top: var(--space-4); color: var(--c-text-muted); font-weight: var(--fw-semibold); }

/* 소개 영상 (시청용 — 컨트롤 포함) */
.video-embed { position: relative; aspect-ratio: 16 / 9; max-width: 900px; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-ink); box-shadow: var(--shadow-lg); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .value-grid { grid-template-columns: 1fr; }
  .partner-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ceo-grid { grid-template-columns: 1fr; justify-items: center; }
  .greeting { text-align: left; }
}
@media (max-width: 880px) {
  .board-layout { grid-template-columns: 1fr; }
  .board-aside { position: static; }
  .cat-side-list { flex-direction: row; flex-wrap: wrap; }
  .cat-side-list button { width: auto; border-left: 0; border: 1px solid var(--c-border-strong); border-radius: var(--radius-pill); }
  .cat-side-list button[aria-pressed="true"] { border-color: var(--c-accent); border-left: 1px solid var(--c-accent); }
  .detail-top { grid-template-columns: 1fr; }
  .detail-visual { max-width: 340px; }
}
@media (max-width: 760px) {
  .hero-search-form { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .dual-cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* ── 큐레이션/디스커버리 띠 (랜딩 — 카테고리와 추천전문가 사이) ──────────
   크몽식 "좌측 형광펜 H2 + 우측 가로 카드 행". tokens.css 변수만 사용.
   .discover* 신규 네임스페이스 — 기존 셀렉터와 충돌 없음. 가격·별점·거래수 없음. */
.discover-split {
  display: grid; grid-template-columns: minmax(260px, 320px) 1fr;
  gap: var(--space-5); align-items: start;
}
.discover-head { position: sticky; top: 96px; }
.discover-head h2 { margin: 0 0 var(--space-2); }
.discover-head p { color: var(--c-text-muted); font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0 0 var(--space-3); }
.discover-head .discover-headlink {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
  font-weight: var(--fw-bold); color: var(--c-accent-strong); text-decoration: none;
}
.discover-head .discover-headlink:hover, .discover-head .discover-headlink:focus-visible { text-decoration: underline; }

/* 가로 카드 행 — 크몽식 좌우 스크롤(스냅). 데스크탑에서도 행이 넘치면 스크롤. */
.discover-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: var(--space-3); overflow-x: auto; overflow-y: hidden;
  padding-bottom: var(--space-2); margin: 0; list-style: none;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.discover-row::-webkit-scrollbar { height: 8px; }
.discover-row::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--radius-pill); }
.discover-row::-webkit-scrollbar-track { background: transparent; }

.discover-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--space-3); height: 100%;
  text-decoration: none; color: var(--c-text);
  transition: box-shadow var(--t-base) var(--ease-spring), transform var(--t-base) var(--ease-spring), border-color var(--t-base) var(--ease);
}
.discover-card:visited { color: var(--c-text); }
.discover-card:hover, .discover-card:focus-visible { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--c-accent); }
.discover-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.discover-chips .chip { padding: 4px 11px; font-size: var(--fs-xs); }
.discover-card h3 { font-size: var(--fs-lg); color: var(--c-ink); line-height: var(--lh-snug); margin: 0; }
.discover-card p { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); margin: 0; }
.discover-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: .3em;
  color: var(--c-accent-strong); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.discover-card:hover .discover-go, .discover-card:focus-visible .discover-go { text-decoration: underline; }
.discover-go .arr { transition: transform var(--t-fast) var(--ease); }
.discover-card:hover .discover-go .arr { transform: translateX(3px); }

/* '많이 찾는 분야' — 컴팩트 칩 행 (크몽 카테고리 아이콘 행 느낌) */
.discover-cats-wrap { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--c-border); }
.discover-cats-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.discover-cats-head h3 { margin: 0; font-size: var(--fs-xl); }
.discover-cats-head .sub { color: var(--c-text-muted); font-size: var(--fs-sm); }
.discover-cats {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.discover-cat {
  display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 0 18px;
  border-radius: var(--radius-pill); background: var(--c-bg);
  border: 1px solid var(--c-border-strong); color: var(--c-text);
  text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.discover-cat:visited { color: var(--c-text); }
.discover-cat::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent-bright); flex: 0 0 auto;
}
.discover-cat:hover, .discover-cat:focus-visible {
  background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-strong); transform: translateY(-2px);
}

/* ── 반응형 ── */
@media (max-width: 880px) {
  .discover-split { grid-template-columns: 1fr; gap: var(--space-3); }
  .discover-head { position: static; }
  .discover-head p { font-size: var(--fs-base); }
  .discover-row { grid-auto-columns: minmax(240px, 78%); }
}
@media (max-width: 560px) {
  .discover-row { grid-auto-columns: minmax(220px, 86%); }
  .discover-cats-head h3 { font-size: var(--fs-lg); }
  .discover-cat { width: 100%; }
}