/* 이상한마케팅 병원 검색 최적화 — 사이트 공통 (피그마 '홈페이지' 페이지 v6.4 토큰)
   색: 검정 #141311 · 패널 #1e1c19 · 아이보리 #efede6 · 금색 #c8a97e · 종이 #fafaf8
   글꼴: Noto Sans KR(본문·제목) · Jost(숫자·영문 라벨) · Noto Serif KR(계약서)
   모션 토큰: 10-27_A_메인_모션인터랙션.md 1장 */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Serif+KR:wght@300;400;600&display=swap');

:root {
  --bg: #141311;
  --bg-2: #1b1a17;
  --panel: #1e1c19;
  --panel-2: #24221e;
  --line: #2e2c29;
  --line-soft: rgba(239, 237, 230, 0.08);
  --ivory: #efede6;
  --sub: #b0aca3;
  --mute: #8f8c85;
  --dim: #615e59;
  --gold: #c8a97e;
  --gold-hi: #dcc39c;
  --gold-dk: #211c17;
  --gold-soft: rgba(200, 169, 126, 0.12);
  --paper: #fafaf8;
  --ink: #1f1d1a;
  --ok: #7fbf8f;

  --f-sans: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --f-num: 'Jost', 'Noto Sans KR', sans-serif;
  --f-serif: 'Noto Serif KR', serif;

  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-xs: 180ms;
  --dur-s: 320ms;
  --dur-m: 700ms;
  --dur-l: 1200ms;
  --rise: 21.6px;

  --wrap: 1296px;
  --gutter: clamp(18px, 6vw, 86.4px);
  --header-h: 72px;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2.7px; border-radius: 3.6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 공통 헤더 */
.site-h {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(20, 19, 17, 0.55);
  backdrop-filter: blur(14.4px); -webkit-backdrop-filter: blur(14.4px);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-s) var(--ease-soft), transform var(--dur-s) var(--ease-lux);
}
.site-h.is-solid { background: rgba(20, 19, 17, 0.92); }
/* 헤더 한 줄형 (피그마 '헤더 · 공통 v2' 277:655): 로고 | 페이지 메뉴 | 외부 링크 · 문의하기 */
.site-h__top { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 72px; }
/* 줄이 하나뿐이라 스크롤해도 접지 않고 배경만 짙어진다 */
.site-h.is-compact { transform: none; }
.site-h__brand { display: flex; align-items: center; gap: 10.8px; flex: none; }
.site-h__mark { width: 28.8px; height: 28.8px; }
.site-h__brand b { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.site-h__bar { width: 1px; height: 14.4px; background: rgba(239, 237, 230, 0.3); }
.site-h__tag { font-size: 13px; font-weight: 500; color: var(--gold); }
.site-h__nav { display: flex; align-items: center; gap: 40px; }
.site-h__menu { font-size: 16px; font-weight: 500; color: var(--sub); white-space: nowrap; transition: color var(--dur-xs); }
.site-h__menu:hover { color: var(--ivory); }
.site-h__menu.is-on { color: var(--ivory); font-weight: 700; }
.site-h__right { display: flex; align-items: center; gap: 22px; flex: none; }
.site-h__ext { font-size: 13px; color: var(--mute); white-space: nowrap; transition: color var(--dur-xs); }
.site-h__ext:hover { color: var(--ivory); }
.site-h__btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 6px; background: var(--ivory); font-size: 13px; font-weight: 700; color: #211f1c; white-space: nowrap; transition: background 180ms var(--ease-soft); }
.site-h__btn:hover { background: #fafaf8; }
/* 좁은 화면: 외부 링크는 숨기고 푸터에서 안내 */
@media (max-width: 1360px) { .site-h__ext { display: none; } .site-h__nav { gap: 30px; } }
/* 휴대폰: 둘째 줄에 메뉴, 옆으로 넘겨 봄 */
@media (max-width: 860px) {
  :root { --header-h: 108px; }
  .site-h__top { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 14px; }
  .site-h__tag, .site-h__bar { display: none; }
  .site-h__right { margin-left: auto; }
  .site-h__nav { order: 3; width: 100%; gap: 22px; overflow-x: auto; height: 44px; }
  .site-h__menu { font-size: 15px; }
}


/* ---------------------------------------------------------------- 공통 푸터 */
/* 푸터: 내용은 이상한마케팅 본 사이트와 같게, 모양은 이 사이트 톤으로 */
.site-f { border-top: 1px solid var(--line-soft); background: #141311; color: var(--ivory); }
.site-f__in { display: flex; justify-content: space-between; gap: 48px; width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 56px var(--gutter) 64px; }
.site-f__logo { display: flex; align-items: center; gap: 10px; }
.site-f__logo b { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.site-f__ex { margin-top: 28px; font-size: 12px; font-weight: 500; color: var(--gold); }
.site-f__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: 14px; color: var(--sub); }
.site-f__links a { transition: color 180ms var(--ease-soft); }
.site-f__links a:hover { color: var(--ivory); }
.site-f__r { display: grid; align-content: start; gap: 6px; font-size: 13px; line-height: 1.7; color: var(--mute); text-align: right; }
.site-f__r p:last-child { margin-top: 8px; }
@media (max-width: 860px) { .site-f__in { flex-direction: column; } .site-f__r { text-align: left; } }
/* 푸터 모바일 (피그마 300:1743): 로고 28, Explore 위 28, 링크 위 10, 회사 정보 위 48 */
@media (max-width: 860px) { .site-f__logo img { width: 28px; height: 28px; } .site-f__ex { margin-top: 28px; line-height: 1.4; } .site-f__links { margin-top: 10px; line-height: 1.5; } }

/* ---------------------------------------------------------------- 버튼 */
/* 버튼: 두 가지만 쓴다. 주 버튼 = 아이보리 단색, 보조 버튼 = 얇은 테두리. 금색은 글자 강조에만 쓰고 버튼 바탕에는 쓰지 않는다.
   문구에 화살표를 붙이지 않는다 (.arr 는 숨김). 누르면 살짝 눌린다. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; cursor: pointer; transition: background 180ms var(--ease-soft), color 180ms var(--ease-soft), border-color 180ms var(--ease-soft), transform 120ms var(--ease-soft); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn .arr { display: none; }
.btn--gold, .btn--ivory { background: var(--ivory); color: #211f1c; }
.btn--gold:hover, .btn--ivory:hover { background: #fafaf8; }
.btn--line { border-color: rgba(239, 237, 230, 0.28); background: transparent; color: var(--ivory); font-weight: 500; }
.btn--line:hover { border-color: rgba(239, 237, 230, 0.7); background: rgba(239, 237, 230, 0.04); }
.btn__meta { font-size: 13px; font-weight: 400; color: #77726a; }
.btn--line .btn__meta { color: var(--mute); }
/* 연한 버튼: 테두리 대신 옅은 아이보리 바탕 */
.btn--soft { border-color: transparent; background: rgba(239, 237, 230, 0.14); color: var(--ivory); font-weight: 500; }
.btn--soft:hover { background: rgba(239, 237, 230, 0.22); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---------------------------------------------------------------- 섹션 머리 (번호 — 이름 — 영문) */
.sec-label { display: flex; align-items: center; gap: 14.4px; font-size: 14px; font-weight: 500; }
.sec-label .n { font-family: var(--f-num); font-size: 13px; color: var(--gold); }
.sec-label .ln { width: 36px; height: 1px; background: var(--gold); transform-origin: left; }
.sec-label .en { font-family: var(--f-num); font-size: 11px; letter-spacing: 0.2em; color: var(--dim); }
.h2 { font-size: clamp(30.6px, 3.4vw, 50.4px); line-height: 1.35; font-weight: 300; letter-spacing: -0.03em; }
.h2 b, .h2 strong { font-weight: 700; }
.lead-q { font-size: 18px; color: var(--mute); }
.sub { font-size: 18px; color: var(--sub); }

/* ---------------------------------------------------------------- 등장 모션 */
[data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-m) var(--ease-lux), transform var(--dur-m) var(--ease-lux); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.sec-label[data-reveal] .ln { transform: scaleX(0); transition: transform 500ms var(--ease-lux) 200ms; }
.sec-label[data-reveal].is-in .ln { transform: scaleX(1); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 모달 · 토스트 */
.modal-bg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(28, 25, 22, 0.6); backdrop-filter: blur(7.2px); opacity: 0; pointer-events: none; transition: opacity var(--dur-s) var(--ease-soft); }
.modal-bg.is-open { opacity: 1; pointer-events: auto; }
.modal { position: relative; width: min(468px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 32.4px 36px 36px; border: 1px solid #33312d; border-radius: 14.4px; background: #14130f; box-shadow: 0 21.6px 54px rgba(28, 25, 22, 0.6); transform: translateY(14.4px); transition: transform var(--dur-s) var(--ease-lux); }
.modal-bg.is-open .modal { transform: none; }
.modal__x { position: absolute; top: 25.2px; right: 25.2px; width: 28.8px; height: 28.8px; border: 0; background: none; color: var(--mute); font-size: 18px; }
.modal__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--gold); }
.modal__title { margin-top: 5.4px; font-size: 22px; line-height: 1.4; font-weight: 700; }
.modal__p { margin-top: 12.6px; font-size: 14px; color: var(--sub); }
.toast { position: fixed; left: 50%; bottom: 32.4px; z-index: 95; display: flex; align-items: center; gap: 10.8px; padding: 12.6px 19.8px; border: 1px solid rgba(200, 169, 126, 0.4); border-radius: 89.1px; background: #1a1916; font-size: 14px; box-shadow: 0 10.8px 27px rgba(28, 25, 22, 0.5); transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: all var(--dur-s) var(--ease-lux); }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: var(--gold-dk); font-style: normal; font-size: 10px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 200ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-reveal] { transform: none; }
}

/* 드롭다운 (dropdown.js): 기본 select 대신 쓰는 목록. 색은 페이지마다 --dd-* 로 바꾼다 */
.dd { --dd-bg: #1e1c19; --dd-line: #3a3833; --dd-fg: #b0aca3; --dd-strong: #efede6; --dd-hover: #24211c; --dd-empty: #77726a; --dd-mark: #c8a97e; position: relative; cursor: pointer; }
.dd__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dd__btn:focus-visible { outline: none; }
.dd__v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__btn.is-empty .dd__v { color: var(--dd-empty); }
.dd__chev { flex: none; color: var(--dd-empty); transition: transform 220ms var(--ease-soft), color 220ms; }
.dd.is-open .dd__chev { transform: rotate(180deg); color: var(--dd-mark); }
.dd__list { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 30; max-height: 312px; overflow: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--dd-line); border-radius: 10px; background: var(--dd-bg); box-shadow: 0 24px 56px rgba(28, 25, 22, 0.45); cursor: default; animation: dd-in 180ms var(--ease-soft); overscroll-behavior: contain; }
.dd__list li { position: relative; padding: 11px 12px 11px 34px; border-radius: 6px; font-size: 15px; line-height: 1.35; color: var(--dd-fg); cursor: pointer; }
.dd__list li.is-active { background: var(--dd-hover); color: var(--dd-strong); }
.dd__list li[aria-selected='true'] { color: var(--dd-mark); font-weight: 700; }
.dd__list li[aria-selected='true']::before { content: ''; position: absolute; left: 13px; top: 50%; width: 9px; height: 5px; border: solid var(--dd-mark); border-width: 0 0 1.6px 1.6px; transform: translateY(-70%) rotate(-45deg); }
.dd__list::-webkit-scrollbar { width: 8px; }
.dd__list::-webkit-scrollbar-thumb { border: 2px solid var(--dd-bg); border-radius: 8px; background: var(--dd-line); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dd__list { animation: none; } }

/* 진단 완료 알림 카드 (job-watch.js): 어느 페이지에서든 오른쪽 아래에 뜬다 */
.jobcard { position: fixed; right: 24px; bottom: 96px; z-index: 95; width: min(340px, calc(100vw - 32px)); padding: 22px 22px 20px; border: 1px solid #3a3833; border-radius: 12px; background: #14130f; color: var(--ivory); box-shadow: 0 24px 60px rgba(28, 25, 22, 0.55); opacity: 0; transform: translateY(12px); transition: opacity 320ms var(--ease-soft), transform 320ms var(--ease-soft); }
.jobcard.is-on { opacity: 1; transform: none; }
.jobcard__k { font-size: 12px; font-weight: 500; color: var(--gold); }
.jobcard__t { margin-top: 6px; font-size: 17px; line-height: 1.5; }
.jobcard__go { width: 100%; min-height: 46px; margin-top: 16px; font-size: 15px; }
.jobcard__x { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border: 0; background: none; color: var(--mute); font-size: 15px; cursor: pointer; }
@media (max-width: 860px) { .jobcard { right: 16px; bottom: 16px; } }

/* 줄바꿈 가독성: 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남지 않게 (모바일에서 특히) */
/* 제목은 디자인에서 정한 줄바꿈을 따른다 (자동 균형은 '있습니다.'만 떨어뜨리는 식으로 줄을 쪼개서 쓰지 않는다) */
h3, h4 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

/* 모바일 줄바꿈: class="mb" 는 좁은 화면에서만, class="db" 는 넓은 화면에서만 줄을 바꾼다 (피그마 모바일 시안의 줄바꿈 위치) */
br.mb, br.nd, br.tb { display: none; }
@media (max-width: 860px) { br.mb, br.nd { display: inline; } br.db { display: none; } }
/* br.nd: 데스크톱만 빼고 (모바일, 태블릿) 줄을 바꾼다 */

/* 좁은 화면 여백: 피그마 모바일 390 = 좌우 20, 태블릿 768 = 좌우 40 */
@media (max-width: 860px) { :root { --gutter: 20px; } .h2 { font-size: 30px; line-height: 1.38; letter-spacing: -0.03em; } }
@media (min-width: 600px) and (max-width: 860px) { :root { --gutter: 40px; } .h2 { font-size: 40px; } .sub { font-size: 18px; } br.mb { display: none; } br.db, br.tb { display: inline; } }
/* br.tb: 태블릿에서만 줄을 바꾼다 */

/* 메인이 아닌 페이지(현황판, 진단, 문의)는 스크롤에 따라 헤더를 짙게 하는 스크립트가 없다.
   반투명 헤더가 밝은 본문 위에서 회색으로 보이지 않게 처음부터 짙게 둔다 */
body:not(:has(#s01)) .site-h { background: rgba(20, 19, 17, 0.94); }