/*
Theme Name: 오류사전 (lhfas)
Theme URI: https://lhfas.org/
Description: lhfas.org 오류 코드·에러 메시지 해결 사전 전용 클래식 테마. 시스템 폰트, 단일 컬럼, 검색 우선.
Author: 오류사전 운영팀
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: lhfas
*/

/* ============================================================
   1. 디자인 토큰 — 하드코딩 hex는 --c1/--c2 두 개뿐. 파생색은 color-mix().
   ============================================================ */
:root {
  --c1: #1F3B63;   /* 주색 — 짙은 청색 */
  --c2: #C8501B;   /* 강조색 — 경고 주황 */
  --w: white;
  --k: black;

  --gray-1: color-mix(in srgb, var(--w) 32%, var(--k));
  --gray-2: color-mix(in srgb, var(--w) 50%, var(--k));
  --ink:    color-mix(in srgb, var(--c1) 20%, var(--k));
  --ink-2:  color-mix(in srgb, var(--c1) 28%, var(--gray-1));
  --ink-3:  color-mix(in srgb, var(--c1) 20%, var(--gray-2));
  --line:   color-mix(in srgb, var(--c1) 14%, var(--w));
  --line-2: color-mix(in srgb, var(--c1) 26%, var(--w));
  --bg:     var(--w);
  --bg-soft:color-mix(in srgb, var(--c1) 4%, var(--w));
  --bg-c1:  color-mix(in srgb, var(--c1) 8%, var(--w));
  --bg-c2:  color-mix(in srgb, var(--c2) 9%, var(--w));
  --on-c1:  var(--w);
  --c1-hover: color-mix(in srgb, var(--c1) 80%, var(--k));
  --c2-ink: color-mix(in srgb, var(--c2) 76%, var(--k));
  --line-c2: color-mix(in srgb, var(--c2) 36%, var(--w));
  --ok:     color-mix(in srgb, var(--c1) 55%, var(--w));

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
          "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-body: 17px;
  --lh-body: 1.75;
  --wrap: 760px;
  --pad: 16px;
  --radius: 6px;
}

/* ============================================================
   2. 리셋
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c1); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c1-hover); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.25rem; margin-top: 1.8em; padding-bottom: .25em; border-bottom: 2px solid var(--line); }
h3 { font-size: 1.05rem; margin-top: 1.4em; }
p, ul, ol { margin: 0 0 1em; }
code, pre, kbd { font-family: var(--mono); font-size: .92em; }
code { background: var(--bg-soft); padding: .1em .35em; border-radius: 3px; }
pre {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;   /* 코드 블록만 자체 스크롤 — 본문 가로스크롤 0 */
  position: relative;
  margin: .5em 0 .8em;
}
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; overflow: visible; }
th, td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
th { background: var(--bg-soft); font-weight: 600; }
.is-scrollable { overflow-x: auto; }
.is-scrollable table { min-width: 560px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.l-skip:focus { position: static; width: auto; height: auto; clip: auto; }

/* ============================================================
   3. 레이아웃 — 헤더 · 본문 · 푸터
   ============================================================ */
.l-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.l-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.l-head__in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px;
}
.l-brand { font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--c1); letter-spacing: -.01em; }
.l-brand small { font-weight: 500; color: var(--ink-3); font-size: .8rem; margin-left: 8px; }
.l-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.l-nav a { font-size: .9rem; text-decoration: none; padding: 6px 8px; border-radius: 4px; color: var(--ink-2); }
.l-nav a:hover { background: var(--bg-soft); }
.l-main { padding: 20px 0 48px; min-height: 60vh; }
.l-foot { border-top: 1px solid var(--line); background: var(--bg-soft); font-size: .88rem; color: var(--ink-2); }
.l-foot__in { padding: 24px 0 32px; }
.l-foot__sys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.l-foot__sys a { text-decoration: none; }
.l-foot__legal { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; padding: 0; list-style: none; }
.l-foot p { margin: 0 0 6px; }

/* ============================================================
   4. 검색 — 홈 첫 화면 · 허브 · 404 공용
   ============================================================ */
.s-box { position: relative; margin: 0 0 12px; }
.s-input {
  width: 100%; font: inherit; font-size: 1.15rem; padding: 14px 16px;
  border: 2px solid var(--line-2); border-radius: var(--radius); background: var(--bg);
  color: var(--ink);
}
.s-input:focus { outline: 2px solid var(--c1); outline-offset: 1px; border-color: var(--c1); }
.s-hint { font-size: .85rem; color: var(--ink-3); margin: 6px 0 0; }
.s-list {
  list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg); position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--k) 12%, transparent);
  max-height: 60vh; overflow-y: auto;
}
.s-list:empty { display: none; }
.s-list li a {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; text-decoration: none;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.s-list li:last-child a { border-bottom: 0; }
.s-list li a:hover, .s-list li.is-active a { background: var(--bg-c1); }
.s-list .s-code { font-family: var(--mono); font-weight: 700; }
.s-list .s-sub { color: var(--ink-3); font-size: .88rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-list .s-none { padding: 10px 14px; color: var(--ink-3); }
.s-sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.s-sys a {
  display: block; text-align: center; padding: 12px 6px; border: 1px solid var(--line-2); border-radius: var(--radius);
  text-decoration: none; font-weight: 600; background: var(--bg);
}
.s-sys a:hover { background: var(--bg-c1); border-color: var(--c1); }
.s-sys small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-3); }
.s-sys .s-sys__soon { display: block; text-align: center; padding: 12px 6px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-3); font-weight: 600; background: var(--bg-soft); }
@media (min-width: 600px) { .s-sys { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   5. 홈
   ============================================================ */
.h-hero { padding: 28px 0 8px; }
.h-hero h1 { font-size: 1.5rem; margin-bottom: .3em; }
.h-hero p { color: var(--ink-2); margin-bottom: 16px; }
.h-recent { margin-top: 36px; }
.h-recent ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.h-recent li a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; }
.h-recent li a:hover { background: var(--bg-soft); }
.h-recent .s-code { font-family: var(--mono); font-weight: 700; }
.h-recent .s-sub { color: var(--ink-3); font-size: .9rem; }

/* ============================================================
   6. 오류 코드 페이지
   ============================================================ */
.er-crumb { font-size: .85rem; color: var(--ink-3); margin: 0 0 8px; }
.er-crumb a { text-decoration: none; color: var(--ink-2); }
.er-head h1 { margin-bottom: .2em; }
.er-sub { color: var(--ink-3); margin: 0 0 10px; font-size: 1.02rem; }
.er-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 18px; }
.badge {
  display: inline-block; font-size: .78rem; line-height: 1; padding: 6px 9px; border-radius: 999px;
  background: var(--bg-c1); color: var(--c1); font-weight: 600; white-space: nowrap;
}
.badge--date { background: var(--bg-soft); color: var(--ink-2); font-weight: 500; }
.badge--admin { background: var(--bg-c2); color: var(--c2-ink); }
.badge--noindex { background: var(--bg-c2); color: var(--c2-ink); }
.btn-copy {
  font: inherit; font-size: .8rem; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg); color: var(--ink-2); cursor: pointer;
}
.btn-copy:hover { background: var(--bg-soft); }
.btn-copy.is-done { border-color: var(--c1); color: var(--c1); }
.er-meaning { padding: 14px 16px; border-left: 4px solid var(--c1); background: var(--bg-soft); margin: 0 0 6px; }
.er-meaning p { margin: 0; }
.er-meaning .er-where { font-size: .92rem; color: var(--ink-2); margin-top: 6px; }
.er-steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1em; }
.er-steps > li {
  position: relative; padding: 12px 12px 12px 48px; border: 1px solid var(--line); border-radius: var(--radius);
  margin: 0 0 10px; background: var(--bg);
}
.er-steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c1); color: var(--on-c1); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.er-steps > li.is-done { background: var(--bg-soft); }
.er-steps > li.is-done::before { background: var(--ok); }
.er-steps > li.is-done > .er-step-text { text-decoration: line-through; color: var(--ink-3); }
.er-steps > li > p:last-child { margin-bottom: 0; }
.er-check { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; accent-color: var(--c1); cursor: pointer; margin: 0; }
.er-steps > li { padding-right: 44px; }   /* 체크박스 자리 상시 예약 — JS 삽입 후 이동 0 */
.er-cmd { margin: 8px 0 4px; }
.er-cmd .btn-copy { position: absolute; right: 8px; top: 8px; }
.er-warn {
  border: 1px solid var(--line-c2); border-left: 4px solid var(--c2); background: var(--bg-c2); color: var(--c2-ink);
  padding: 10px 12px; border-radius: var(--radius); margin: 8px 0 4px; font-size: .95rem;
}
.er-warn strong { color: var(--c2-ink); }
.er-note { font-size: .92rem; color: var(--ink-2); }
.er-fn { font-size: .8rem; color: var(--ink-3); text-decoration: none; margin-left: 4px; }
.er-fn:hover { text-decoration: underline; }
.er-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .er-related ul { grid-template-columns: 1fr 1fr; } }
.er-related li a { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }
.er-related li a:hover { background: var(--bg-soft); }
.er-related .s-code { font-family: var(--mono); font-weight: 700; margin-right: 6px; }
.er-related .s-sub { color: var(--ink-3); font-size: .88rem; }
.er-src { margin-top: 28px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: .86rem; color: var(--ink-2); }
.er-src p { margin: 0 0 4px; }
.er-aliases { font-size: .9rem; color: var(--ink-2); }
.er-aliases code { margin-right: 4px; }

/* ============================================================
   7. 허브(시스템·유형) · 목록
   ============================================================ */
.hub-head h1 { margin-bottom: .2em; }
.hub-head p { color: var(--ink-2); }
.hub-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.hub-types a { display: inline-block; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem; }
.hub-types a.is-current { background: var(--c1); color: var(--on-c1); border-color: var(--c1); }
.hub-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .hub-list { grid-template-columns: 1fr 1fr; } }
.hub-list li a { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; min-width: 0; }
.hub-list li a:hover { background: var(--bg-soft); }
.hub-list .s-code { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.hub-list .s-sub { color: var(--ink-3); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-empty { color: var(--ink-3); }
.g-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.g-list li a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.g-list li a:hover { background: var(--bg-soft); }
.g-list .g-title { font-weight: 700; display: block; }
.g-list .g-ex { color: var(--ink-2); font-size: .92rem; }

/* ============================================================
   8. 가이드·고정 페이지 본문
   ============================================================ */
.g-body h2 { margin-top: 1.6em; }
.g-body img { margin: 0 auto 1em; }
.g-body blockquote { margin: 0 0 1em; padding: 8px 14px; border-left: 4px solid var(--line-2); color: var(--ink-2); }
.g-meta { font-size: .86rem; color: var(--ink-3); margin: 0 0 14px; }

/* ============================================================
   9. 광고 자리 — 예약 높이(자동광고 OFF). 빈 상태·채움 상태 모두 같은 높이.
   ============================================================ */
.ad-slot { min-height: 280px; margin: 24px 0; overflow: hidden; }
.ad-slot:empty { display: none; }


/* ============================================================
   9-1. 자동광고 대응 — 계정 설정으로 켜진 자동광고가 body 직계에
   div.google-auto-placed(375px)를 삽입했다가 접으면서 CLS 0.46을 만든다(실측 2026-09-04).
   구글이 래퍼에 인라인 height:auto !important를 박으므로 스타일시트로 래퍼는 못 이긴다.
   채워지지 않은 ins만 처음부터 0으로 눌러 "자리를 잡았다 접는" 구간을 없앤다.
   data-ad-status가 늦게 붙으므로 :not([data-ad-status="filled"])로 그 이전 구간까지 덮는다.
   ★ 이것으로 부족하면 정공법은 애드센스 대시보드에서 자동광고 OFF뿐이다(사용자 몫).
   ============================================================ */
ins.adsbygoogle:not([data-ad-status="filled"]) {
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   10. 소형 화면
   ============================================================ */
@media (max-width: 480px) {
  :root { --fs-body: 16px; }
  .l-brand small { display: none; }   /* 375px에서 태그라인이 줄바꿈되며 헤더가 두 줄이 된다 */
  h1 { font-size: 1.35rem; }
  .l-head__in { min-height: 50px; }
  .l-nav a { padding: 6px 6px; font-size: .86rem; }
  .s-input { font-size: 1.05rem; padding: 12px 14px; }
  .s-sys { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .s-sys a { padding: 10px 4px; font-size: .92rem; }
  .er-steps > li { padding-left: 44px; }
}