/*
Theme Name: Appraisal
Theme URI: https://appraisal.marketory.co.kr
Author: Marketory
Author URI: https://marketory.co.kr
Description: 한국형 감정평가 사이트 커스텀 테마. 구글 SEO·Core Web Vitals 최적화, OpenLiteSpeed/LSCache 친화, Pretendard 한글 타이포 기반.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: appraisal
Tags: custom-theme, korean, seo-ready, performance, classic
*/

/* ─────────────────────────────────────────────────────────────
   CSS 변수 — 디자인 토큰
   색상·폰트·여백을 한 곳에서 관리. 페이지/컴포넌트 CSS는 이 변수 참조.
   ───────────────────────────────────────────────────────────── */
:root {
  /* 색상 — 감정평가 = 신뢰·전문성. 차분한 네이비 + 따뜻한 액센트 */
  --color-bg: #ffffff;
  --color-surface: #f6f7f9;
  --color-border: #e4e7ec;
  --color-text: #1a1f2e;
  --color-text-muted: #5c6577;
  --color-primary: #1e3a8a;        /* 네이비 — 메인 브랜드 */
  --color-primary-hover: #1e40af;
  --color-accent: #b45309;         /* 황토 — 강조·CTA */
  --color-link: var(--color-primary);

  /* 타이포그래피 — Pretendard: 한글 가독성 최상 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 사이즈 스케일 — 1.250 (Major Third) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  /* 여백 (4px 그리드) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* 컨테이너 */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* 기타 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --transition: 150ms ease;
}

/* ─────────────────────────────────────────────────────────────
   리셋·기본
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;          /* 한글에서 단어 단위 줄바꿈 */
  overflow-wrap: anywhere;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); }

p { margin: 0 0 var(--space-4); }

/* ─────────────────────────────────────────────────────────────
   접근성 — 스크린리더용 숨김, 스킵 링크
   ───────────────────────────────────────────────────────────── */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 100; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ─────────────────────────────────────────────────────────────
   레이아웃 — site-wide 컨테이너
   ───────────────────────────────────────────────────────────── */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.container--narrow { max-width: var(--container-narrow); }

/* 본문 위·아래 여백 */
.site-main > * { padding-block: var(--space-12); }
@media (min-width: 768px) { .site-main > * { padding-block: var(--space-16); } }