/* Atorni 새 사이트 — **원본 이후의 의도적 조정**.
 *
 * 왜 별도 파일인가: `site_home.css` / `site_home2.css` 는 업로드된 디자인 원본을
 * 기계 변환한 결과라 손대지 않는다(구조 대조 테스트의 전제). 원본을 고칠 만큼은 아닌
 * 자잘한 조정은 전부 여기 모으고, 각 줄에 **왜 바꿨는지**를 남긴다.
 *
 * 로드 순서: 항상 마지막(그래야 원본 값을 덮는다).
 */

/* [2026-08-02 대표님] 마무리 문구 "Speak to us about your matter." 가 18ch 상한 때문에
 * `matter.` 한 단어만 둘째 줄로 떨어졌다 — 한 줄에 들어가게 상한을 문장 길이로.
 * [2026-08-03 대표님] 홈만 고쳐져 있었다. 홈은 `.final`(원본 마크업), 소개·사례·자주묻는
 * 질문은 `.s-final`(우리가 만든 섹션) 이라 선택자가 달랐다 — 둘을 같이 잡는다. */
.site .final h2,
.site .s-final h2 { max-width: 32ch; text-wrap: balance; }

/* [2026-08-03 모바일 점검] 홈 문답의 **질문 글씨**가 "Q." 마커 스타일을 그대로 뒤집어썼다.
 *   원본 마크업 = `<span>Q.</span>` + 맨 텍스트.
 *   우리 마크업 = 질문에도 번역을 붙여야 해서 `<span data-i18n>` 으로 한 번 더 감쌌다.
 *   그 바람에 원본의 `.q span { flex-shrink:0; 세리프 19px 초록 }`(마커가 줄지 않게 한 규칙)이
 *   질문 텍스트에도 걸렸다 → ①글씨가 초록 세리프로 나오고 ②줄바꿈이 안 돼 390px 에서
 *   화면 밖으로 13px 밀려났다(문서 가로 스크롤 92px).
 * 마커는 그대로 두고, **두 번째 span 만** 원래대로 되돌린다. */
.site .answer .q > span + span {
  flex: 1 1 auto; min-width: 0;
  font-family: inherit; font-weight: inherit; font-size: inherit;
  line-height: inherit; color: inherit;
}

/* ────────────────────────────────────────────────────────────────────────
 * [착수 12단계 / 2026-08-09] 메인 홈 브랜드 1차 polish — CSS-only, parity 불변.
 *   원본 마크업/클래스/섹션수/i18n/CTA 라우트는 그대로. 값만 조정한다.
 *   홈 전용 selector(.hero / .sec-head / #pricing / .final)로만 적용 → 공유 페이지
 *   (about·cases·faq·notes·quote·mycase) 레이아웃엔 영향 없음.
 *   예외 둘(footer 대비·focus-visible)은 공유 표면이라 **의도적으로** 전 페이지 개선.
 * ──────────────────────────────────────────────────────────────────────── */

/* 섹션 세로 리듬 — 데스크톱 숨 쉴 공간(원본 .site section = 70px). 홈 전용(히어로 뒤 section들).
 * 모바일은 clamp 하한 64로 과도 축소 방지. divider 대신 여백으로 섹션을 가른다. */
.site .hero ~ section { padding-block: clamp(64px, 8vw, 104px); }

/* 섹션 헤더 위계 — eyebrow→제목→설명 다음 콘텐츠까지 간격(원본 38 → 데스크톱 48). .sec-head=홈 전용. */
.site .sec-head { margin-bottom: clamp(38px, 4vw, 48px); }

/* 히어로 제목 — 360~430 모바일 과대 스케일·태블릿 과점유 완화(원본 clamp 42/10.5vw/78). */
.site .hero h1 { font-size: clamp(40px, 9vw, 72px); }

/* 히어로 면 — 회색 줄무늬 → forest 기반 '설계된 하나의 어두운 면'(정적·이미지 URL/애니메이션 없음).
 * 텍스트가 앉는 하단을 더 어둡게 해 흰 글씨 대비 확보. 마크업/사진 불변. */
.site .hero { background: #0B1512; }
.site .hero-img {
  background:
    linear-gradient(180deg, rgba(8,14,12,0) 34%, rgba(6,11,9,.58) 100%),
    linear-gradient(120deg, #0E4A38 0%, #0A3226 52%, #0B1512 100%);
}

/* CTA 위계 — pricing 의 Book 을 forest 로 낮춰 amber 는 '핵심 행동'(히어로·최종 CTA)에만 남긴다.
 * pricing+final 이 한 화면에 겹칠 때 amber 중복으로 위계가 약해지던 문제 해소. 텍스트/링크/DOM 불변. */
.site #pricing .btn-amber { background: var(--forest); color: #fff; }
.site #pricing .btn-amber:hover { background: var(--forest-dark); }

/* footer 면책·법인 문구 대비 — 너무 흐린 회색(#6D767D on 잉크)을 읽히는 톤으로. 공유 footer(전 페이지 개선). */
.site .disclaimer, .site .f-entities { color: #8C959C; }
.site .disclaimer b { color: #B4BBC1; }

/* 접근성 — 키보드 focus 링(원래 정의 없음). 공유 표면이라 전 페이지 적용(a11y). outline:none 금지. */
.site a:focus-visible, .site button:focus-visible, .site .btn:focus-visible,
.site .navlink:focus-visible, .site select:focus-visible {
  outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 4px;
}
/* 어두운 배경(홈 .hero/.final + about·cases·faq·notes 의 다크 .s-final)에서는 흰 링. */
.site .hero :focus-visible, .site .final :focus-visible, .site .s-final :focus-visible { outline-color: #fff; }

/* [착수39] 모바일 시트 Book = amber(핵심 행동) — 데스크톱 헤더 Book(.btn-amber)과 정합.
 *   '앰버=행동' 규칙(홈 #pricing 강등과 대칭). 정본 generated 마크업 불변·CSS만·.btn-amber(site_home:54-55) 값 그대로. */
.site .mfootbar .btn { background: var(--amber); color: var(--ink); }
.site .mfootbar .btn:hover { background: #E2A428; }