/*
Theme Name: 오류사전 Renewal
Theme URI: https://lhfas.org/
Description: lhfas.org 진단 순서형 자식 테마. 검색과 공식 원문 근거를 우선합니다.
Author: 오류사전 운영팀
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Template: lhfas
Text Domain: lhfas-renewal
*/
/* DESIGN-ID 2026-09-05 — Pretendard 400(166,076B)·JetBrains Mono 400 라틴(21,168B) 셀프호스팅, optional+preload로 CLS 0 */
@font-face{font-family:"Pretendard";font-style:normal;font-weight:400;font-display:optional;src:url(assets/fonts/pretendard-400.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+3000-303F,U+3131-3163,U+AC00-D7A3}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:optional;src:url(assets/fonts/jetbrains-mono-400.woff2) format("woff2");unicode-range:U+0020-007E}


/* ============================================================
   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: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
          "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-body: 17px;
  --lh-body: 1.75;
  --wrap: 760px;      /* 본문 페이지(가독성 우선) */
  --wrap-wide: 1120px;/* 홈·허브 그리드 */
  --pad: 16px;
  --radius: 6px;
  --radius-lg: 12px;

  /* 그림자 — 색을 새로 만들지 않고 주색을 투명도로 섞는다 */
  --sh-1: 0 1px 2px color-mix(in srgb, var(--c1) 12%, transparent);
  --sh-2: 0 4px 14px color-mix(in srgb, var(--c1) 14%, transparent);
  --sh-3: 0 10px 30px color-mix(in srgb, var(--c1) 18%, transparent);

  /* 히어로 — 주색 계열 딥 톤 */
  --hero-bg: color-mix(in srgb, var(--c1) 92%, var(--k));
  --hero-bg2: color-mix(in srgb, var(--c1) 70%, var(--k));
  --hero-ink: color-mix(in srgb, var(--w) 92%, var(--c1));
  --hero-ink-2: color-mix(in srgb, var(--w) 68%, var(--c1));
}

/* ============================================================
   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); }
/* 홈·허브는 그리드를 쓰므로 더 넓게. body 클래스로 갈라 본문 가독성(760px)은 유지한다. */
.home .l-wrap, .tax-er_system .l-wrap, .tax-er_type .l-wrap { max-width: var(--wrap-wide); }
.home .l-main { padding-top: 0; }
.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: .8125rem; margin-left: 8px; }
.l-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.l-nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; 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: .8125rem; 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: .8125rem; 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 {
  min-height: 44px; font: inherit; font-size: .8125rem; 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: 0; top: 0; width: 44px; height: 44px;
  appearance: none; cursor: pointer; margin: 0; border: 0;
  background:
    linear-gradient(var(--bg), var(--bg)) center / 20px 20px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center / 22px 22px no-repeat;
}
.er-check:checked {
  background:
    linear-gradient(var(--c1), var(--c1)) center / 14px 14px no-repeat,
    linear-gradient(var(--bg), var(--bg)) center / 20px 20px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center / 22px 22px no-repeat;
}
.er-check:focus-visible { outline: 2px solid var(--c1); outline-offset: -4px; }
.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: .8125rem; 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; }



/* ============================================================
   11. 홈 — 히어로
   ============================================================ */
.hero {
  position: relative;
  margin: 0 calc(-1 * var(--pad)) 28px;
  padding: 44px var(--pad) 36px;
  background: linear-gradient(160deg, var(--hero-bg) 0%, var(--hero-bg2) 100%);
  color: var(--hero-ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__in { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--w); z-index: 0; pointer-events: none;
}
.hero__eyebrow {
  display: inline-block; margin: 0 0 14px; padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--w) 34%, transparent);
  border-radius: 999px; font-size: .82rem; font-weight: 600;
  color: var(--hero-ink); background: color-mix(in srgb, var(--w) 10%, transparent);
}
.hero__h1 {
  font-size: clamp(1.65rem, 4.6vw, 2.5rem);
  line-height: 1.25; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 12px; color: var(--w);
}
.hero__hl {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c2) 68%, transparent) 62%);
  padding: 0 2px;
}
.hero__lead { color: var(--hero-ink-2); margin: 0 0 20px; font-size: 1rem; max-width: 46em; }
.hero .s-box { margin-bottom: 10px; }
.hero .s-input {
  border-color: transparent; box-shadow: var(--sh-3);
  padding-left: 46px;
}
/* 검색 아이콘 — 입력창 첫 줄 기준(세로 중앙 아님). s-box에는 힌트 문구도 들어 있어
   50%로 잡으면 아이콘이 입력창 밖으로 내려간다(실측). */
.hero .s-box::before {
  content: ""; position: absolute; left: 16px; top: 27px; width: 20px; height: 20px;
  transform: translateY(-50%); z-index: 2; pointer-events: none;
  background: var(--ink-3);
  -webkit-mask: var(--ico-search) center / contain no-repeat;
          mask: var(--ico-search) center / contain no-repeat;
}
.hero .s-hint { color: color-mix(in srgb, var(--w) 60%, var(--c1)); }
.hero__ex { margin: 14px 0 0; font-size: .88rem; color: var(--hero-ink-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hero__ex a {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--w); text-decoration: none; font-family: var(--mono); font-size: .86rem;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--w) 30%, transparent);
  background: color-mix(in srgb, var(--w) 8%, transparent);
}
.hero__ex a:hover { background: color-mix(in srgb, var(--w) 20%, transparent); color: var(--w); }

/* 검색 아이콘(마스크용 data URI — 외부 요청 0) */
:root {
  --ico-search: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.6-3.6"/></svg>');
}

/* ============================================================
   12. 홈 — 섹션 공통
   ============================================================ */
.sec { margin: 0 0 40px; }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec__h2 {
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 16px; padding: 0; border: 0;
}
.sec__head .sec__h2 { margin-bottom: 16px; }
.sec__more {
  font-size: .88rem; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; color: var(--c1);
}
.sec__more:hover { text-decoration: underline; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.nav-links .page-numbers {
  min-width: 44px; min-height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
}
.ico { flex: none; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-sprite { position: absolute; }

/* ============================================================
   13. 홈 — 시스템 타일
   ============================================================ */
/* 9개라 5열이면 마지막 줄에 빈칸 4개가 생긴다. 3열(3×3)로 딱 떨어지게 한다. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tiles__i > a, .tiles__i--soon {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  height: 100%; padding: 14px 14px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg); text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tiles__i > a:hover {
  border-color: var(--c1); box-shadow: var(--sh-2); transform: translateY(-2px); color: var(--ink);
}
.tiles__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--bg-c1); color: var(--c1);
}
.tiles__i > a:hover .tiles__ico { background: var(--c1); color: var(--on-c1); }
.tiles__name { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.tiles__meta { font-size: .82rem; color: var(--ink-3); }
.tiles__i--soon { color: var(--ink-3); border-style: dashed; background: var(--bg-soft); }
.tiles__i--soon .tiles__ico { background: transparent; color: var(--ink-3); }
/* 시스템별 악센트 — 주색/강조색 혼합만 쓴다(새 hex 없음) */
.tiles__i > a[data-sys="ps"] .tiles__ico,
.tiles__i > a[data-sys="xbox"] .tiles__ico,
.tiles__i > a[data-sys="steam"] .tiles__ico { background: var(--bg-c2); color: var(--c2-ink); }
.tiles__i > a[data-sys="ps"]:hover .tiles__ico,
.tiles__i > a[data-sys="xbox"]:hover .tiles__ico,
.tiles__i > a[data-sys="steam"]:hover .tiles__ico { background: var(--c2); color: var(--w); }

/* ============================================================
   14. 홈 — 코드 카드 그리드
   ★ 코드 문자열이 세로로 쪼개지지 않게 한다(0x8007000D 실측 사고).
     코드 줄과 설명 줄을 분리하고, 코드에는 줄바꿈을 금지한다.
   ============================================================ */
.codegrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .codegrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .codegrid { grid-template-columns: repeat(3, 1fr); } }
.cc > a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 14px 16px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cc > a:hover { border-color: var(--c1); box-shadow: var(--sh-2); transform: translateY(-2px); color: var(--ink); }
.cc__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc__ico { color: var(--ink-3); flex: none; }
.cc > a:hover .cc__ico { color: var(--c1); }
.cc__code {
  font-family: var(--mono); font-weight: 700; font-size: .98rem; color: var(--c1);
  white-space: nowrap;              /* 코드는 절대 쪼개지 않는다 */
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.cc__sub {
  font-size: .88rem; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.codegrid--tight .cc > a { padding: 12px 14px; }
/* 같은 코드의 다른 문맥(업데이트/활성화)을 구별하는 뱃지 */
.cc__ctx {
  flex: none; font-size: .8125rem; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-3); border: 1px solid var(--line);
}
.cc > a:hover .cc__ctx { border-color: var(--line-2); }

/* ============================================================
   15. 홈 — 상황별 바로가기 · 가이드 카드
   ============================================================ */
.quick { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .quick { grid-template-columns: repeat(2, 1fr); } }
.quick a {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink); background: var(--bg);
  transition: border-color .15s, background .15s;
}
.quick a:hover { border-color: var(--c1); background: var(--bg-c1); color: var(--ink); }
.quick__ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 10px; background: var(--bg-c1); color: var(--c1);
}
.quick a:hover .quick__ico { background: var(--c1); color: var(--on-c1); }
.quick__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quick__txt strong { font-size: .96rem; }
.quick__txt small { font-size: .84rem; color: var(--ink-3); }
.quick a > .ico { color: var(--ink-3); }

.guidegrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .guidegrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .guidegrid { grid-template-columns: repeat(3, 1fr); } }
.guidegrid a {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.guidegrid a:hover { border-color: var(--c1); box-shadow: var(--sh-2); transform: translateY(-2px); color: var(--ink); }
.guidegrid__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; background: var(--bg-c1); color: var(--c1);
}
.guidegrid strong { font-size: .98rem; line-height: 1.4; }
.guidegrid__ex { font-size: .86rem; color: var(--ink-3); line-height: 1.55; }

/* ============================================================
   16. 홈 — 신뢰 고지
   ============================================================ */
.trust { padding: 24px; border-radius: var(--radius-lg); background: var(--bg-soft); border: 1px solid var(--line); }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .trust__list { grid-template-columns: repeat(2, 1fr); } }
.trust__list li { display: flex; flex-direction: column; gap: 4px; }
.trust__list strong { font-size: .95rem; color: var(--c1); }
.trust__list span { font-size: .88rem; color: var(--ink-2); line-height: 1.6; }


/* ============================================================
   17. 코드 페이지 다듬기 — 헤더 카드 · 별칭 칩 · 단계 강조
   ============================================================ */
.er-head--card {
  padding: 20px 22px 18px;
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--c1);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}
.er-head--card .er-crumb { margin-bottom: 10px; }
.er-head--card h1 { font-size: clamp(1.35rem, 3.4vw, 1.75rem); letter-spacing: -.015em; }
.er-head--card .er-meta { margin-bottom: 0; }

/* 별칭 칩 */
.er-aliases__note { font-size: .88rem; color: var(--ink-3); margin: 0 0 10px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips__i {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg);
  font-size: .86rem; max-width: 100%;
}
.chips__k {
  padding: 5px 8px; background: var(--bg-c1); color: var(--c1);
  font-size: .8125rem; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.chips__v {
  padding: 5px 10px; font-family: var(--mono); color: var(--ink);
  overflow-wrap: anywhere; min-width: 0;
}
.chips__i--message .chips__k { background: var(--bg-c2); color: var(--c2-ink); }
.chips__i--message .chips__v { font-family: var(--font); }

/* 단계 — 번호 원을 그라데이션으로, 완료 시 체크 */
.er-steps > li { box-shadow: var(--sh-1); }
.er-steps > li::before {
  background: linear-gradient(140deg, var(--c1), var(--c1-hover));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c1) 35%, transparent);
}
.er-steps > li.is-done::before {
  background: var(--ok); box-shadow: none;
  content: "✓"; font-size: 1rem;
}
.er-meaning { border-radius: 0 var(--radius) var(--radius) 0; }

/* 그리드 항목의 기본 min-width는 auto라, 안의 긴 코드 문자열이 트랙을 밀어
   컨테이너보다 넓어진다(허브 375px에서 scrollWidth 510 실측). 0으로 눌러야 한다. */
.codegrid > li, .hub-list > li, .er-related ul > li, .guidegrid > li, .quick > li, .tiles > li { min-width: 0; }
.codegrid > li > a, .hub-list > li > a, .er-related ul > li > a { min-width: 0; max-width: 100%; }

/* 관련 코드 — 홈 카드와 같은 모양으로 통일 */
.er-related ul { gap: 10px; }
.er-related li { list-style: none; }
.er-related li a {
  border-radius: var(--radius-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .15s, box-shadow .15s;
}
.er-related li a:hover { border-color: var(--c1); box-shadow: var(--sh-2); background: var(--bg); }
.er-related .cc__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.er-related .cc__code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   18. 허브 다듬기
   ============================================================ */
.hub-head { margin-bottom: 24px; }
.hub-head h1 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); letter-spacing: -.015em; }
.hub-types a {
  box-shadow: var(--sh-1);
  transition: border-color .15s, background .15s, color .15s;
}
.hub-types a:hover { border-color: var(--c1); background: var(--bg-c1); }
.hub-list { gap: 10px; }
@media (min-width: 940px) { .hub-list { grid-template-columns: repeat(3, 1fr); } }
.hub-list li { list-style: none; }
.hub-list li a {
  flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 12px 14px; border-radius: var(--radius-lg);
  transition: border-color .15s, box-shadow .15s;
}
.hub-list li a:hover { border-color: var(--c1); box-shadow: var(--sh-2); background: var(--bg); }
.hub-list .cc__top { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.hub-list .cc__code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-list .cc__sub { -webkit-line-clamp: 2; }

/* ============================================================
   19. 가이드 본문 다듬기
   ============================================================ */
.g h1 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); letter-spacing: -.015em; margin-bottom: .3em; }
.g-body h2 {
  font-size: 1.15rem; margin-top: 2em; padding-bottom: .3em;
  border-bottom: 2px solid var(--line-2);
}
.g-body h3 { font-size: 1.02rem; color: var(--c1); }
.g-body ol, .g-body ul { padding-left: 1.3em; }
.g-body li { margin-bottom: .4em; }
.g-body li::marker { color: var(--c1); font-weight: 700; }
.g-body table { box-shadow: var(--sh-1); border-radius: var(--radius); overflow: hidden; }
.g-body th { background: var(--bg-c1); color: var(--c1); }
.g-body tbody tr:nth-child(2n) { background: var(--bg-soft); }
.g-meta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid var(--line); color: var(--ink-2); font-size: .82rem;
}


/* ============================================================
   20. 검색 자동완성 — 결과 목록 다듬기
   ============================================================ */
.s-list { border-radius: var(--radius-lg); box-shadow: var(--sh-3); overflow: hidden; }
.s-list li a { padding: 11px 14px; gap: 12px; }
.s-list li a:hover, .s-list li.is-active a { background: var(--bg-c1); }
.s-list .s-code {
  color: var(--c1); white-space: nowrap; flex: none;
  max-width: 45%; overflow: hidden; text-overflow: ellipsis;
}
.s-list .s-none { padding: 14px; text-align: center; }
.s-list .s-ctx {
  flex: none; font-size: .8125rem; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-3); border: 1px solid var(--line);
}
/* 허브 검색창은 히어로가 아니므로 아이콘 여백 없음 */
.hub-head .s-input { padding-left: 16px; }

/* ============================================================
   10. 소형 화면
   ============================================================ */
@media (max-width: 480px) {
  :root { --fs-body: 17px; }
  .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; }
}

/* Renewal 2026-09-14 — 이미지, 터치, 진단 흐름 */
.hero__in{max-width:var(--wrap-wide);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);align-items:center;gap:32px}
.hero__copy{min-width:0}
.hero__art{display:block;margin:0;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg);box-shadow:var(--sh-3)}
.hero__art img{width:100%;height:100%;object-fit:cover}
.er-figure{margin:18px 0 22px;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);border:1px solid var(--line)}
.er-figure img{width:100%;height:100%;object-fit:cover}
.er-crumb a,.er-fn,.sec__more,.l-foot a{display:inline-flex;align-items:center;min-height:44px;padding-block:6px}
.l-brand{display:inline-flex;align-items:center;min-height:44px}
.er-crumb a,.l-foot a{min-width:44px;justify-content:center}
.hub-art{display:block;margin:18px 0 22px;aspect-ratio:16/9;max-width:560px;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);box-shadow:var(--sh-1)}
.hub-art img{width:100%;height:100%;object-fit:cover}
.g-thumb{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);box-shadow:var(--sh-1);margin:14px 0 24px}
.g-thumb img{width:100%;height:100%;object-fit:cover}
.faq details{border-top:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
@media(max-width:760px){.hero__in{grid-template-columns:1fr;gap:20px}.hero__art{max-width:520px}.hero{padding-top:32px}.hero__h1 br{display:none}}
@media(max-width:480px){.hero__art{aspect-ratio:16/10}.sec__more{padding-inline:4px}.l-foot__sys,.l-foot__legal{gap:0 12px}}
.js-ready .reveal{transform:translateY(5px);transition:transform 180ms ease}
.js-ready .reveal.is-in{transform:none}
@media(prefers-reduced-motion:reduce){.js-ready .reveal{transform:none;transition:none}}