@charset "utf-8";
/* ==========================================================================
   공개 홈페이지 (가맹 · 제휴 모집) — 실제 고객이 보는 화면
   메시지 구조상 "가맹 강요"로 읽히면 안 된다. 두 갈래를 항상 대등하게 배치한다.

   [타이포 원칙]
   여기는 목업 주석이 아니라 실제 고객이 읽는 화면이다. 40~50대 원장님이
   휴대폰으로 본다는 전제로 크기를 잡았다.
     본문      15px / 행간 1.8   ← 12~13px 로 두면 실제로 안 읽힌다
     보조      13.5px
     잔글씨    12px  (법적 고지·출처 표기 전용, 그 아래로는 쓰지 않는다)
     버튼      15px / 최소 터치 영역 44px
   한글은 같은 px 에서 라틴보다 작아 보이므로 자간을 -.02em 이상 조이지 않는다.
   ========================================================================== */

.site {
  background: var(--cream);
  min-height: 100%;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: -.015em;
}
.site .pad { padding-left: var(--pad); padding-right: var(--pad); }
.site section.blk { padding: 30px var(--pad); }
.site section.blk--paper { background: var(--paper); }
.site section.blk--ink { background: var(--ink); color: #EDE7E1; }
.site section.blk--sand { background: var(--sand-soft); }

/* 공개 화면 전용 부품 크기 상향 — 내부 관리 화면(ui.css 기본값)보다 한 단계 크다 */
.site .btn { font-size: 15px; padding: 12px 18px; min-height: 44px; letter-spacing: -.015em; }
.site .btn--sm { font-size: 13.5px; padding: 9px 14px; min-height: 38px; }
.site .btn--lg { font-size: 16px; padding: 15px 22px; min-height: 52px; }
.site .badge { font-size: 12.5px; padding: 4px 10px; letter-spacing: -.01em; }
.site .notice { font-size: 13.5px; line-height: 1.8; padding: 13px 15px; }
.site .notice .ico { font-size: 18px; }
.site .source { font-size: 12px; padding: 3px 7px; }
.site .sec-label { font-size: 12.5px; letter-spacing: .16em; }
.site .sec-title { font-size: 20px; letter-spacing: -.035em; }
.site .sec-more { font-size: 13.5px; }
.site .field__l { font-size: 13.5px; margin-bottom: 7px; }
.site .field__c { height: 52px; font-size: 15px; padding: 0 14px; }
.site .field__help { font-size: 13px; line-height: 1.65; margin-top: 6px; }
.site .seg__b { font-size: 14px; padding: 13px 8px; min-height: 48px; }
.site .chip { font-size: 13.5px; padding: 9px 15px; min-height: 40px; }
.site .check { padding: 11px 0; }
.site .check__t { font-size: 14px; line-height: 1.7; }
.site .row__t { font-size: 14.5px; }
.site .row__s { font-size: 12.5px; line-height: 1.6; margin-top: 3px; }
.site .tline__t { font-size: 14.5px; }
.site .tline__s { font-size: 13px; margin-top: 3px; }
.site .card__hd h3, .site .card__hd h4 { font-size: 15.5px; }
.site .card__hd .sub { font-size: 13px; margin-top: 3px; }
.site .stat__k { font-size: 12.5px; }
.site .stat__d { font-size: 12.5px; }
.site .stat__v { font-size: 26px; }
.site .stat__v small { font-size: 13px; }
.site .t-sm { font-size: 12.5px; }

/* 앱바 · 시트 · 표 — ui.css 기본값은 관리자용이라 공개 화면엔 작다 */
.site .appbar, .phone > .appbar { height: 56px; }
.phone > .appbar .appbar__t { font-size: 17px; }
.phone > .appbar .appbar__b { width: 44px; height: 44px; }
.phone > .appbar .appbar__b .ico { font-size: 24px; }
.sheet__hd h3 { font-size: 17px; }
.sheet__bd { padding: 18px; }
.site .tbl th, .phone .tbl th { font-size: 12.5px; padding: 11px 12px; }
.site .tbl td, .phone .tbl td { font-size: 13.5px; padding: 13px 12px; line-height: 1.7; }
.site .tbl__sub, .phone .tbl__sub { font-size: 12px; line-height: 1.5; margin-top: 3px; }

/* ---------- 상단 헤더 ---------- */
.site-hd {
  position: absolute; top: 34px; left: 0; right: 0; z-index: 12;
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
}
.site-hd__b { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; margin-right: -10px; }
.site-hd__b .ico { font-size: 24px; }
.site-hd--solid { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.site-hd--solid .site-hd__b { color: var(--ink); }

/* ---------- 히어로 ----------
   배경 사진 위 흰 글씨는 사진이 밝아지면 바로 안 읽힌다.
   그라디언트를 충분히 진하게 깔고, 본문 글자는 불투명도를 거의 낮추지 않는다. */
.hero { position: relative; isolation: isolate; padding: 104px var(--pad) 34px; color: #fff; overflow: hidden; }
/* 배경 레이어는 반드시 absolute 로 남아야 한다.
   아래 `.hero > *` 규칙과 특이도가 같아 :not() 으로 명시적으로 제외한다 —
   이걸 빼먹으면 배경이 흐름 안으로 들어가 높이 0 이 되고,
   그라디언트가 사라져 히어로의 흰 글씨가 밝은 배경 위에 놓여 읽히지 않는다. */
.hero__bg { position: absolute !important; inset: 0; z-index: 0; }
.hero__bg .ph { width: 100%; height: 100%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,21,20,.74) 0%, rgba(24,21,20,.52) 34%, rgba(20,18,17,.94) 100%),
    linear-gradient(90deg, rgba(24,21,20,.30) 0%, rgba(24,21,20,0) 60%);
}
.hero > *:not(.hero__bg) { position: relative; z-index: 1; }
.hero__eyebrow {
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
}
.hero__title {
  font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.42;
  margin-top: 12px; text-shadow: 0 1px 14px rgba(0,0,0,.34);
}
.hero__title .em { color: var(--hero-em, #F4C0B3); }
.hero__sub {
  font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.94);
  margin-top: 14px; text-shadow: 0 1px 10px rgba(0,0,0,.42);
}
.hero__cta { display: flex; gap: 9px; margin-top: 24px; }
.hero__cta .btn { flex: 1; }
.hero__cta .btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); }

.hero__trust { display: flex; margin-top: 26px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 18px; }
.hero__trust > div { flex: 1; }
.hero__trust dt { font-family: var(--mono); font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
.hero__trust dt small { font-family: var(--sans); font-size: 12.5px; font-weight: 600; margin-left: 2px; opacity: .82; }
.hero__trust dd { font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 3px; }

/* ---------- 두 갈래 트랙 카드 ----------
   왼쪽이 우월해 보이면 안 된다. 같은 높이 · 같은 무게로 놓는다. */
.tracks { display: grid; gap: 13px; }
.track {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--track, var(--accent));
  border-radius: var(--r-card); padding: 20px;
}
.track__k { font-family: var(--serif); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--track-ink); }
.track__t { font-size: 19px; font-weight: 800; letter-spacing: -.035em; margin-top: 6px; }
.track__d { font-size: 14.5px; color: var(--ink-70); line-height: 1.8; margin-top: 9px; }
.track__l { margin-top: 15px; display: grid; gap: 9px; }
.track__l li { font-size: 14.5px; color: var(--ink-70); display: flex; gap: 8px; align-items: flex-start; line-height: 1.6; }
.track__l .ico { font-size: 18px; color: var(--track); margin-top: 1px; }
.track__f { margin-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.track__p { font-size: 13.5px; color: var(--ink-50); }
.track__p b { font-family: var(--mono); font-size: 16px; color: var(--ink); font-weight: 700; }

.both-note {
  margin-top: 16px; padding: 15px 16px; border-radius: var(--radius);
  background: var(--paper); border: 1px dashed var(--ink-30);
  font-size: 14px; line-height: 1.8; color: var(--ink-70); text-align: center;
}
.both-note b { color: var(--ink); font-weight: 700; }

/* ---------- 서비스 3종 ---------- */
.svc { display: grid; gap: 11px; }
.svc__i {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 17px;
}
.svc__ic { width: 46px; height: 46px; flex: none; border-radius: 11px; background: var(--accent-dim); color: var(--accent-ink); display: grid; place-items: center; }
.svc__ic .ico { font-size: 24px; }
.svc__t { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.svc__d { font-size: 14px; color: var(--ink-70); line-height: 1.75; margin-top: 6px; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

/* ---------- 에이전트 카드 (분양 상품) ---------- */
.agent {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; margin-bottom: 13px;
}
.agent__hd { display: flex; gap: 12px; align-items: center; padding: 16px 17px; border-bottom: 1px solid var(--line-soft); }
.agent__av { width: 44px; height: 44px; border-radius: 11px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.agent__av .ico { font-size: 24px; }
.agent__n { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.agent__r { font-size: 13px; color: var(--ink-50); margin-top: 2px; }
.agent__bd { padding: 16px 17px; }
.agent__do { display: grid; gap: 10px; }
.agent__do li { font-size: 14.5px; color: var(--ink-70); display: flex; gap: 8px; line-height: 1.6; }
.agent__do .ico { font-size: 18px; color: var(--save); margin-top: 1px; flex: none; }
.agent__out {
  margin-top: 15px; background: var(--cream); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 13px 14px;
}
/* 라틴용 자간(.1em)을 한글 라벨에 그대로 쓰면 글자가 흩어져 보인다 */
.agent__out h5 { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink-50); margin-bottom: 9px; }
.site .source { letter-spacing: 0; }
.agent__ft { padding: 14px 17px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--cream); }
.agent__price { font-size: 13.5px; color: var(--ink-50); }
.agent__price b { font-family: var(--mono); font-size: 17px; color: var(--ink); font-weight: 700; }

/* ---------- 성과 카드 ---------- */
.proof {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 17px; margin-bottom: 11px;
}
.proof__hd { display: flex; align-items: center; gap: 12px; }
.proof__th { width: 50px; height: 50px; border-radius: 10px; flex: none; }
.proof__n { font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.proof__m { font-size: 12.5px; color: var(--ink-50); margin-top: 3px; }
.proof__kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); margin-top: 14px; border-radius: var(--radius); overflow: hidden; }
.proof__kv > div { background: var(--cream); padding: 11px 10px; }
.proof__kv dt { font-size: 12px; color: var(--ink-50); font-weight: 600; }
.proof__kv dd { font-family: var(--mono); font-size: 17px; font-weight: 700; margin-top: 3px; }
.proof__kv dd .up { font-family: var(--sans); font-size: 12px; color: var(--save); font-weight: 700; margin-left: 3px; }

/* ---------- 요금 플랜 ---------- */
.plan {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 19px; margin-bottom: 12px; position: relative;
}
.plan--pick { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.plan__flag {
  position: absolute; top: -10px; left: 19px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--r-pill);
}
.plan__n { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.plan__for { font-size: 13.5px; color: var(--ink-50); margin-top: 4px; }
.plan__p { margin-top: 14px; display: flex; align-items: baseline; gap: 4px; }
.plan__p b { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
.plan__p span { font-size: 13.5px; color: var(--ink-50); }
.plan__l { margin-top: 15px; display: grid; gap: 9px; border-top: 1px solid var(--line-soft); padding-top: 15px; }
.plan__l li { font-size: 14.5px; color: var(--ink-50); display: flex; gap: 8px; align-items: flex-start; line-height: 1.6; }
.plan__l .ico { font-size: 18px; color: var(--ink-30); margin-top: 1px; flex: none; }
.plan__l li.on .ico { color: var(--save); }
.plan__l li.on { color: var(--ink-70); }

/* ---------- 비교표 ----------
   표는 좁은 화면에서 가장 먼저 안 읽히는 요소다. 셀 안 글자를 키우고
   보조 설명(small)도 12px 아래로 내리지 않는다. */
.cmp { width: 100%; font-size: 13.5px; background: var(--paper); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.cmp th, .cmp td { padding: 13px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp thead th { background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; text-align: center; border-bottom: 0; }
.cmp thead th:first-child { text-align: left; }
.cmp tbody th { text-align: left; font-weight: 700; color: var(--ink-70); font-size: 13px; width: 84px; background: var(--cream); }
.cmp td { text-align: center; line-height: 1.6; }
.cmp td b { display: block; font-weight: 700; color: var(--ink); font-size: 14px; }
.cmp td small { display: block; font-size: 12px; color: var(--ink-50); margin-top: 4px; line-height: 1.55; }
.cmp .yes { color: var(--save); }
.cmp .no { color: var(--ink-30); }
.cmp .ico { font-size: 20px; }

/* ---------- 하단 고정 CTA ---------- */
.cta-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 11px var(--pad) 16px; display: flex; gap: 10px; align-items: center;
}
.cta-dock__t { flex: 1; min-width: 0; }
.cta-dock__t b { font-size: 14px; font-weight: 800; letter-spacing: -.03em; display: block; }
.cta-dock__t span { font-size: 12px; color: var(--ink-50); }

/* ---------- 푸터 ---------- */
.site-ft { background: var(--ink); color: #A69E98; padding: 28px var(--pad) 96px; font-size: 12.5px; line-height: 1.85; }
.site-ft .lk { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.site-ft .lk a { color: #E3DCD6; font-size: 13.5px; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.site-ft .legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; margin-top: 14px; font-size: 12px; }

/* ---------- 완료 화면 ---------- */
.done { padding: 50px var(--pad) 32px; text-align: center; }
.done__ic { width: 68px; height: 68px; border-radius: 50%; background: var(--save-dim); color: var(--save); display: grid; place-items: center; margin: 0 auto 18px; }
.done__ic .ico { font-size: 36px; }
.done__t { font-size: 23px; font-weight: 800; letter-spacing: -.04em; }
.done__s { font-size: 14.5px; color: var(--ink-70); line-height: 1.8; margin-top: 10px; }
.done__no {
  margin: 20px auto 0; display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; font-family: var(--mono); font-size: 16px; font-weight: 700;
}
.done__no span { font-family: var(--sans); font-size: 12.5px; color: var(--ink-50); font-weight: 600; }

/* ---------- 좁은 기기(320~360px) 대응 ----------
   갤럭시 S 미니·아이폰 SE 폭에서도 글자를 줄이지 않고 여백만 줄인다. */
@media (max-width: 360px) {
  .site { --pad: 15px; }
  .hero__title { font-size: 26px; }
  .hero__cta { flex-direction: column; }
  .cmp th, .cmp td { padding: 11px 7px; }
  .cmp tbody th { width: 70px; font-size: 12.5px; }
}