/* =========================================================================
   KNGS Base — reset · typography · layout primitives · utilities
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--safe-top) + 12px);
  hanging-punctuation: first last;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;           /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: anywhere;
  overflow-x: clip;               /* 의도치 않은 가로 스크롤 차단 */
  -webkit-tap-highlight-color: transparent;
  /* 하단 탭바 높이만큼 여백 (데스크톱은 0) */
  padding-bottom: var(--bottom-ui);
  isolation: isolate;
}
/* 블루프린트 텍스처 — 고정 레이어 1장(블러 없음 → 스크롤 비용 0에 가깝게) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 50% at 85% -10%, rgb(242 106 27 / 0.10), transparent 60%),
    radial-gradient(70% 50% at -10% 0%, rgb(58 110 190 / 0.14), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0.35) 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0.35) 100%);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(80% 50% at 85% -10%, rgb(242 106 27 / 0.07), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px;
}
body.is-locked { overflow: hidden; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
summary { cursor: pointer; }
::selection { background: var(--accent-soft-2); color: var(--text); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  font-kerning: normal;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
  color: var(--text);
}
h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.038em; font-weight: var(--fw-black); line-height: 1.1; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.032em; font-weight: var(--fw-black); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.display { font-size: var(--fs-display); font-weight: var(--fw-black); line-height: 1.02; letter-spacing: var(--ls-display); text-wrap: balance; }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); color: var(--text-2); line-height: 1.55; }
.small, small { font-size: var(--fs-sm); }
.caption { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-mono); text-transform: uppercase; line-height: 1.3;
  color: var(--accent-text);
}
.eyebrow::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 1px;
  background: var(--accent-bright); box-shadow: 0 0 10px 1px rgb(255 122 46 / 0.55);
}
/* 모노 테크 라벨 — 좌표/규격 표기 같은 장식 메타 */
.tech-label, .mono-label {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--label);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.num, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.text-grad { background: var(--grad-accent-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
strong, b { font-weight: var(--fw-bold); }
code, kbd {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 0.1em 0.4em;
}
hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--sp-6); }

/* Prose (가이드/회사소개 본문) */
.prose { max-width: 68ch; color: var(--text-2); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { color: var(--text); margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.35em; }
.prose a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Links ---------- */
a { color: inherit; text-decoration: none; }
/* 클래스 없는 링크(본문 링크)만 밑줄 — :where 로 specificity 0, 컴포넌트가 쉽게 덮어씀 */
:where(a:not([class])) { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(a:not([class])):hover { color: var(--accent-text); }
:where(nav, .site-footer, .pcard, .menu-nav, .breadcrumb, .search-results) a { text-decoration: none; color: inherit; }
.link { color: var(--brand-text); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 4px; }
.link:hover { color: var(--accent-text); }
.link svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.link:hover svg { transform: translateX(3px); }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.skip-link {
  position: fixed; left: var(--sp-3); top: calc(var(--safe-top) + var(--sp-3)); z-index: 1000;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  background: var(--brand); color: var(--text-on-brand); font-weight: var(--fw-bold);
  transform: translateY(-200%); transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right));
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--bleed-mobile { padding-inline: 0; }
@media (min-width: 768px) { .container--bleed-mobile { padding-inline: var(--gutter); } }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--alt { position: relative; background: linear-gradient(180deg, var(--bg-2), transparent 70%); }
.section--alt::before { /* 정밀 헤어라인 구분선 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline); pointer-events: none;
}
:root[data-theme="light"] .section--alt { background: var(--surface); }
.section--brand {
  position: relative; isolation: isolate; color: var(--text-on-brand);
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(242 106 27 / 0.22), transparent 60%),
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(160deg, var(--navy-900), var(--ink-950));
}
.section--brand :is(h1, h2, h3, h4) { color: #fff; }
.section--brand .lead, .section--brand .caption { color: rgb(255 255 255 / 0.78); }

main { display: block; min-height: 50vh; }

/* Stack: 세로 간격 */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.stack-2 { --stack-gap: var(--sp-2); }
.stack-3 { --stack-gap: var(--sp-3); }
.stack-6 { --stack-gap: var(--sp-6); }
.stack-8 { --stack-gap: var(--sp-8); }
.stack-12 { --stack-gap: var(--sp-12); }

/* Cluster: 가로 줄바꿈 정렬 */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-2)); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--nowrap { flex-wrap: nowrap; }

/* Grid: 자동 반응형 */
.grid { display: grid; gap: var(--grid-gap, var(--sp-4)); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.grid-2 { --cols: 2; }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); }
@media (min-width: 768px) {
  .md\:grid-2 { --cols: 2; }
  .md\:grid-3 { --cols: 3; }
  .md\:grid-4 { --cols: 4; }
}
@media (min-width: 1024px) {
  .grid { --grid-gap: var(--sp-6); }
  .lg\:grid-3 { --cols: 3; }
  .lg\:grid-4 { --cols: 4; }
  .lg\:grid-5 { --cols: 5; }
}
/* 상품 그리드: 모바일 2열 → 3 → 4 */
.product-grid {
  display: grid; gap: var(--sp-5) var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-5); } }

/* Split: 데스크톱 2단 (상세 이미지/정보) */
.split { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
  .split--aside { grid-template-columns: 260px minmax(0, 1fr); }
}

/* ---------- Utilities ---------- */
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-accent { color: var(--accent-text); }
.text-brand { color: var(--brand-text); }
.fw-bold { font-weight: var(--fw-bold); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-12 { margin-top: var(--sp-12); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.w-full { width: 100%; }
.only-mobile { }
.only-desktop { display: none !important; }
@media (min-width: 1024px) {
  .only-mobile { display: none !important; }
  .only-desktop { display: revert !important; }
}
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.2em; }

/* Safe-area helpers */
.pt-safe { padding-top: var(--safe-top); }
.pb-safe { padding-bottom: var(--safe-bottom); }

/* Reveal-on-scroll (layout.js 가 .is-in 부여 + 형제 순번 --ri 로 스태거) */
@media (prefers-reduced-motion: no-preference) {
  html .reveal {
    opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px);
    transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out), filter var(--dur-5) var(--ease-out);
    transition-delay: calc(min(var(--ri, 0), 6) * 70ms);
  }
  html .reveal.is-in { opacity: 1; transform: none; filter: none; }
}

/* ---------- Precision decorations ---------- */
/* 코너 마커(+) — 패널/섹션 네 귀퉁이 중 좌상·우하에 십자 표시. 부모에 position 필요 */
.corner-marks { position: relative; }
.corner-marks::before, .corner-marks::after {
  content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--marker), var(--marker)) center / 1px 100% no-repeat,
    linear-gradient(var(--marker), var(--marker)) center / 100% 1px no-repeat;
}
.corner-marks::before { top: -5px; left: -5px; }
.corner-marks::after { bottom: -5px; right: -5px; }
.hairline { height: 1px; border: 0; background: var(--hairline); margin-block: var(--sp-8); }
.grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.dot-bg { background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.2px); background-size: 18px 18px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}