/* ============================================================
   office-brand.css — 사무소 화이트라벨 (2026-10-13, 최종 목업 v2 고정)
   · 블로그 기사 하단 카드(views/office/_card.ejs) · /office/:slug 상세(views/office/profile.ejs) · 대시보드 미리보기
   · 외부 리소스 없음. 대표 컬러는 요소 style 의 CSS 변수로만 들어온다(services/office/brandColor.js 가 보정):
       --ob-brand(버튼 면 = brandColor.ctaPair 의 cta) --ob-brand-fg(버튼 글자·아이콘·번호) --ob-brand-ink(글자 4.5:1) --ob-brand-line(선 3:1)
       --ob-brand-edge(버튼 테두리) --ob-brand-tint / --ob-brand-soft(첫 badge·로고 마크)
   · 대표 컬러는 작은 accent 에만 — 배경 면(hero·페이지·섹션)에는 쓰지 않는다.
   ============================================================ */
.blog-offices, .ob-profile, .ob-preview {
  --ob-ink: #111513; --ob-text: #2A2F2C; --ob-muted: #545955; --ob-muted2: #878B88;
  --ob-line: #E4E6E4; --ob-line2: #C9CFCB; --ob-g-ink: #0B3D2E;
  --ob-brand: #12533F; --ob-brand-fg: #FFFFFF; --ob-brand-ink: #12533F; --ob-brand-line: #12533F;
  --ob-brand-edge: #12533F; --ob-brand-tint: #EFF3F1; --ob-brand-soft: #B8CBC5;
}

/* ── 공통: 로고 마크 / badge ─────────────────────────────── */
.ob-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box;
  width: 48px; height: 48px; border-radius: 22%; background: #fff; border: 1.5px solid var(--ob-brand-soft); overflow: hidden; }
.ob-mark img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.ob-mark--ph { background: var(--ob-brand-tint); color: var(--ob-brand-ink); font-weight: 800; letter-spacing: -.02em;
  font-size: 20px; position: relative; line-height: 1; }
.ob-mark--ph::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 16%; height: 2px; border-radius: 2px; background: var(--ob-brand-line); }
.ob-mark--ph > span { transform: translateY(-2px); }
.ob-mark--lg { width: 80px; height: 80px; }
.ob-mark--lg.ob-mark--ph { font-size: 34px; }
.ob-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; }
.ob-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: #3A403C; background: #F4F5F4; border: 1px solid #E7E9E7; white-space: nowrap; }
.ob-tag:first-child { color: var(--ob-brand-ink); background: var(--ob-brand-tint); border-color: var(--ob-brand-soft); }

/* ── 블로그 하단 카드 (B 골격 + C 정돈) ─────────────────── */
.blog-offices .ob-grid, .ob-preview .ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.blog-office-card { position: relative; box-sizing: border-box; min-width: 0; background: #fff; border: 1px solid #E6E8E6; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 21, 19, .03); padding: 18px 18px 14px; overflow: hidden; gap: 0;
  display: grid; grid-template-columns: 48px auto 1fr auto; grid-template-rows: auto auto auto auto 1fr auto;
  grid-template-areas: "mark name name name" "mark region view view" "tl tl tl tl" "tags tags tags tags" "sep sep sep sep" "phone phone phone call"; }
.blog-office-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ob-brand-line); }
.blog-office-card .ob-mark { grid-area: mark; align-self: center; }
.blog-office-card .blog-office-name { grid-area: name; margin: 0 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ob-ink);
  letter-spacing: -.01em; align-self: end; min-width: 0; }
.blog-office-card .ob-region { grid-area: region; margin: 2px 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--ob-muted2); white-space: nowrap; align-self: start; }
.blog-office-card .ob-region:not(:empty)::after { content: "·"; margin: 0 5px; color: var(--ob-line2); }
.blog-office-card .ob-region:empty { margin-left: 12px; }
.blog-office-card .blog-office-link { grid-area: view; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 2px;
  margin: 2px 0 0; padding: 0; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--ob-g-ink); text-decoration: none; white-space: nowrap; }
.blog-office-card a.blog-office-link:hover { color: var(--ob-brand-ink); }
.blog-office-card .ob-tl { grid-area: tl; margin: 12px 0 10px; font-size: 14px; line-height: 1.55; min-height: 3.1em; color: var(--ob-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.blog-office-card .ob-tags { grid-area: tags; flex-wrap: nowrap; overflow: hidden; }
.blog-office-card .ob-sep { grid-area: sep; align-self: end; display: block; height: 0; margin-top: 14px; border-top: 1px solid #EEF0EE; }
.blog-office-card .ob-phone { grid-area: phone; align-self: center; padding-top: 12px; font-size: 17px; font-weight: 700; color: var(--ob-ink); text-decoration: none;
  white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.blog-office-card .ob-call { grid-area: call; align-self: center; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 9px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: var(--ob-brand); color: var(--ob-brand-fg); border: 1px solid var(--ob-brand-edge); }
.blog-office-card .ob-call:focus-visible, .blog-office-card .ob-phone:focus-visible, .blog-office-card .blog-office-link:focus-visible { outline: 2px solid var(--ob-brand-line); outline-offset: 2px; }

/* 대시보드 미리보기 — 카드 1장을 실제 블로그 카드 폭(2열 한 칸)으로 */
.ob-preview .ob-grid { grid-template-columns: minmax(0, 380px); }
.ob-preview .blog-office-card { text-align: left; }
.op-logo-row.ob-preview { background: transparent; }

@media (max-width: 560px) {
  .blog-offices .ob-grid, .ob-preview .ob-grid { grid-template-columns: 1fr; gap: 12px; }
  .blog-office-card { padding: 16px 16px 14px; grid-template-columns: 48px 1fr auto; grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas: "mark name name" "mark region region" "tl tl tl" "tags tags tags" "sep sep sep" "phone phone phone" "call call view"; }
  .blog-office-card[data-nophone] { grid-template-areas: "mark name name" "mark region region" "tl tl tl" "tags tags tags" "sep sep sep" "view view view"; }
  .blog-office-card .ob-region::after { display: none; }
  .blog-office-card .ob-tl { margin: 10px 0 8px; min-height: 0; }
  .blog-office-card .ob-phone { width: 100%; font-size: 17px; }
  .blog-office-card .ob-call { height: 46px; font-size: 15px; border-radius: 10px; margin-top: 8px; }
  .blog-office-card .blog-office-link { align-self: stretch; justify-self: stretch; justify-content: center; height: 46px; margin: 8px 0 0 8px; padding: 0 14px;
    border: 1px solid var(--ob-line2); border-radius: 10px; font-size: 13px; }
  .blog-office-card[data-nophone] .blog-office-link { margin-left: 0; margin-top: 12px; }
}

/* ── /office/:slug 상세 (C 골격 + B CTA/브랜드) ─────────── */
.ob-profile { max-width: 760px; margin: 0 auto; padding: 46px 32px 44px; box-sizing: border-box; }
.ob-profile .blog-office-profile { padding: 0; }
.ob-p-mark { margin-bottom: 20px; }
.ob-eye { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ob-muted); letter-spacing: .01em; }
.ob-eye b { color: var(--ob-brand-ink); font-weight: 700; }
.ob-h1 { margin: 0; font-size: 40px; line-height: 1.2; letter-spacing: -.025em; color: var(--ob-ink); font-weight: 800; overflow-wrap: anywhere; }
.ob-rule { display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--ob-brand-line); margin: 18px 0; }
.ob-p-tl { margin: 0 0 16px; font-size: 20px; line-height: 1.55; color: #262B28; font-weight: 500; letter-spacing: -.01em; }
.ob-cta { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 48px; padding: 0 18px; border-radius: 11px;
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box; border: 1px solid transparent; }
.ob-btn--call { padding: 0 22px; background: var(--ob-brand); color: var(--ob-brand-fg); border-color: var(--ob-brand-edge); }
.ob-btn--out { background: #fff; color: var(--ob-g-ink); border-color: var(--ob-line2); }
.ob-btn--out:hover { border-color: var(--ob-brand-line); color: var(--ob-brand-ink); }
.ob-btn:focus-visible { outline: 2px solid var(--ob-brand-line); outline-offset: 2px; }
.ob-btn--soft { background: #F3F5F4; color: var(--ob-g-ink); border-color: #F3F5F4; }   /* 카카오 상담 — 3순위 약한 보조 (2026-10-13) */
.ob-btn--soft:hover { background: #ECEFED; border-color: #ECEFED; color: var(--ob-brand-ink); }
.ob-cta .ob-btn--call { height: 52px; font-size: 15.5px; border-radius: 12px; }   /* 1순위 — 가장 강한 CTA */

/* 외부 소개 페이지 확인 카드 (2026-10-13) — CTA 줄 아래 별도 · 4순위. 대표 컬러는 왼쪽 선만, 배경은 거의 흰색 */
.ob-chk { margin-top: 14px; display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px;
  border: 1px solid var(--ob-line); border-left: 3px solid var(--ob-brand-line); border-radius: 12px; background: #FCFDFC; }
.ob-chk-ic { width: 42px; height: 42px; border-radius: 11px; background: #fff; border: 1px solid var(--ob-line); display: flex; align-items: center; justify-content: center; color: var(--ob-g-ink); }
.ob-chk-tx { min-width: 0; }
.ob-chk-tx b { display: block; font-size: 15px; color: var(--ob-ink); }
.ob-chk-tx p { margin: 1px 0 0; font-size: 13px; line-height: 1.55; color: var(--ob-muted); }
.ob-chk-go { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--ob-line2);
  background: #fff; font-size: 13.5px; font-weight: 700; color: var(--ob-g-ink); text-decoration: none; white-space: nowrap; }
.ob-chk-go svg { color: var(--ob-brand-line); }
.ob-chk-go:hover { border-color: var(--ob-brand-line); color: var(--ob-brand-ink); }
.ob-chk-go:focus-visible { outline: 2px solid var(--ob-brand-line); outline-offset: 2px; }
/* 전화 CTA — 아이콘(stroke=currentColor)·"전화하기"·번호 모두 같은 --ob-brand-fg (brandColor.ctaPair, 4.5:1 보장).
   번호에 opacity 를 주지 않는다. 가운데 구분선만 currentColor + 낮은 opacity. */
.ob-btn--call .ob-num { display: inline-flex; align-items: center; gap: 9px; margin-left: 2px; color: inherit; font-weight: 600; }
.ob-btn--call .ob-num::before { content: ""; width: 1px; height: 1.05em; background: currentColor; opacity: .35; }
.ob-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ob-sec { margin-top: 44px; }
.ob-k { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--ob-muted2); }
.ob-k::after { content: ""; flex: 1; height: 1px; background: var(--ob-line); }
.ob-about { margin: 0; font-size: 16.5px; line-height: 1.8; color: var(--ob-text); white-space: pre-line; overflow-wrap: anywhere; }
.ob-dl { margin: 0; border-top: 1px solid var(--ob-ink); }
.ob-dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--ob-line); font-size: 15px; align-items: baseline; }
.ob-dl dt { color: var(--ob-muted); font-size: 13.5px; }
.ob-dl dd { margin: 0; color: var(--ob-ink); min-width: 0; overflow-wrap: anywhere; }
.ob-dl a { color: var(--ob-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ob-brand-soft); }
.ob-dl a:hover { color: var(--ob-brand-ink); border-bottom-color: var(--ob-brand-line); }
.ob-dl .ob-ext { display: inline-flex; align-items: center; gap: 3px; }
.ob-dl .ob-ext svg { color: var(--ob-brand-line); }
.ob-profile .ob-note { margin-top: 34px; padding-top: 0; border-top: 0; font-size: 12px; line-height: 1.6; color: var(--ob-muted2); }
.ob-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; width: min(360px, calc(100% - 32px)); box-sizing: border-box;
  background: #1D2320; color: #fff; font-size: 13px; line-height: 1.5; border-radius: 10px; padding: 10px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.ob-toast[hidden] { display: none; }
.ob-toast > span { display: block; }

@media (max-width: 640px) {
  .ob-profile { padding: 20px 18px 30px; }
  .ob-p-mark { margin-bottom: 16px; }
  .ob-mark--lg { width: 64px; height: 64px; }
  .ob-mark--lg.ob-mark--ph { font-size: 27px; }
  .ob-h1 { font-size: 27px; }
  .ob-rule { width: 32px; margin: 14px 0; }
  .ob-p-tl { font-size: 17px; margin-bottom: 14px; }
  .ob-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .ob-cta .ob-btn { height: 46px; font-size: 14.5px; padding: 0 10px; }
  .ob-cta .ob-btn--call { grid-column: 1 / -1; height: 52px; font-size: 16px; }
  .ob-cta[data-extras="1"] .ob-btn, .ob-cta[data-extras="0"] .ob-btn { grid-column: 1 / -1; }
  .ob-sec { margin-top: 34px; }
  .ob-about { font-size: 15.5px; }
  .ob-dl > div { grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; font-size: 14.5px; }
  .ob-chk { grid-template-columns: 38px 1fr; gap: 12px; padding: 13px 14px; }
  .ob-chk-ic { width: 38px; height: 38px; }
  .ob-chk-go { grid-column: 1 / -1; height: 44px; font-size: 14px; }
}

/* ── LOCAL OFFICE AD v2 (2026-10-18) — 지역 광고 section(views/blog/_local-ad.ejs) ─────────────
   카드는 위 .blog-office-card 그대로. 장수(normal4 4 · blind2 2 · blind1/owner 1)에 맞춰 열 수만 맞춘다 — 큰 배너·강조 없음. */
.la-ads .blog-offices-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.la-ads .blog-offices-badge { font-size: 12px; color: var(--ob-muted2); border: 1px solid var(--ob-line); border-radius: 4px; padding: 0 6px; line-height: 20px; white-space: nowrap; }
@media (min-width: 561px) {
  .la-ads.la-n1 .ob-grid { grid-template-columns: minmax(0, 380px); }
  .la-ads.la-n2 .ob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.la-landing-head { margin: 8px 0 4px; }
.la-landing-kicker { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #0B3D2E; }
.la-landing-head .blog-h1 { margin: 6px 0 10px; }
.la-landing .la-ads { margin-top: 28px; }
.la-landing-empty a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }