/*
Theme Name: Marketory
Theme URI: https://definingvalue.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: marketory
Tags: custom-theme, korean, seo-ready, performance, classic
*/

/* ─────────────────────────────────────────────────────────────
   CSS 변수 — 디자인 토큰
   색상·폰트·여백을 한 곳에서 관리. 페이지/컴포넌트 CSS는 이 변수 참조.
   ───────────────────────────────────────────────────────────── */
:root {
  /* 색상 — 혜움 톤: 흰바탕 + 옅은 그레이 + 다크 박스 + 진네이비 액센트 */
  --color-bg: #ffffff;
  --color-surface: #f6f6f6;        /* 옅은 그레이 - 카드/섹션 */
  --color-surface-2: #f2f2f2;      /* 한 단계 더 진한 그레이 */
  --color-border: #e5e7eb;
  --color-dark: #181d27;           /* 다크 섹션 배경 */
  --color-text: #0a0a0a;
  --color-text-muted: #6b7280;
  --color-text-on-dark: #f5f5f5;
  --color-primary: #053e8b;        /* 진한 네이비 — 메인 브랜드 */
  --color-primary-hover: #042e69;
  --color-accent: #053e8b;         /* 액센트도 동일 네이비 */
  --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), 전체 한 단계 확대.
     단일 글 본문(article.single)은 아래에서 별도 확대 스케일 적용. */
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 1.875rem;   /* 30px */
  --fs-3xl: 2.5rem;     /* 40px */
  --fs-4xl: 3.5rem;     /* 56px */

  /* 여백 (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: 1320px;
  --container-narrow: 760px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* sticky 헤더 높이 — TOC·사이드바·scroll-margin이 모두 참조.
     설명문 포함 시 헤더가 ~72-80px이 되므로 96px로 안전한 여유. */
  --site-header-h: 96px;

  /* 기타 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 100px;
  --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;
}

/* ─────────────────────────────────────────────────────────────
   단일 글 본문 전용 스케일 — 기존 축소 스케일(16px 기준)의 125%.
   브라우저 125% 줌과 동일한 체감 크기. 읽기 폭(컨테이너)도 함께 확대.
   헤더·CTA·푸터는 다른 페이지와 동일해야 하므로 body가 아닌
   글 래퍼(article.single — single.php의 post_class('single'))에만 적용.
   ───────────────────────────────────────────────────────────── */
article.single {
  --fs-xs: 0.9375rem;   /* 15px */
  --fs-sm: 1.0625rem;   /* 17px */
  --fs-base: 1.25rem;   /* 20px — 16px의 125% */
  --fs-lg: 1.40625rem;  /* 22.5px */
  --fs-xl: 1.71875rem;  /* 27.5px */
  --fs-2xl: 2.1875rem;  /* 35px */
  --fs-3xl: 2.8125rem;  /* 45px */
  --fs-4xl: 3.75rem;    /* 60px */
  --container-max: 1400px;
  font-size: var(--fs-base);
}

/* ─────────────────────────────────────────────────────────────
   리셋·기본
   ───────────────────────────────────────────────────────────── */
*, *::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); } }