/* XERKONIX — shared design tokens & cross-page normalizations.
   Loaded LAST in <head> so selectors override inline <style>. */

/* Design tokens — TACTILE v2.0. --xk-* names kept for backward-compat. */
:root {
  --xk-gray-000: #FBFBFC;
  --xk-gray-050: #F4F4F6;
  --xk-gray-100: #EAEAEE;
  --xk-gray-200: #DBDBE0;
  --xk-gray-400: #ACADB7;
  --xk-gray-600: #71727F;

  /* 액션 — 화면당 1개, 근-흑색 */
  --xk-identity:        #232430;
  --xk-identity-deep:   #3F404C;
  --xk-identity-light:  #575866;
  --xk-brand:           #ACADB7;
  --xk-ink:             #232430;
  --xk-text:            #232430;
  --xk-text-body:       #4A4B57;
  --xk-text-muted:      #71727F;
  --xk-surface:         #FBFBFC;
  --xk-surface-sub:     #EAEAEE;
  --xk-border:          #DBDBE0;
  --xk-canvas:          #F4F4F6;

  /* 온도 (관계 warm/cool) · 상태 */
  --xk-temp-warm:       #C65F45;
  --xk-temp-cool:       #7B84C4;
  --xk-success:         #5E8F7B;
  --xk-warning:         #C96E14;
  --xk-error:           #C13030;

  /* 뉴모픽 조명 — 좌상단 광원(밝은쪽 -x-y, 어두운쪽 +x+y) */
  --xk-neu-shadow:      rgba(146,148,166,.55);
  --xk-neu-light:       #FFFFFF;
  --xk-neu-raise:       7px 7px 16px var(--xk-neu-shadow), -6px -6px 14px var(--xk-neu-light);
  --xk-neu-raise-sm:    4px 4px 9px var(--xk-neu-shadow), -3px -3px 8px var(--xk-neu-light);
  --xk-neu-inset:       inset 4px 4px 10px var(--xk-neu-shadow), inset -3px -3px 8px var(--xk-neu-light);

  --xk-nav-h:           68px;
  --xk-logo-h-desktop:  48px;
  --xk-logo-h-mobile:   32px;

  /* 곡률 — TACTILE 은 더 부드럽다 */
  --xk-radius-sm:       10px;
  --xk-radius-md:       14px;
  --xk-radius-lg:       18px;

  /* Typography — Pretendard body/UI, MaruBuri 디스플레이, IBM Plex Mono data */
  --xk-serif: 'MaruBuri', 'Noto Serif KR', serif;
  --xk-sans:  'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --xk-mono:  'IBM Plex Mono', monospace;
}

/* Dark theme — 표면을 낮추고 하이라이트 그림자를 미광으로 감쇠 */
[data-theme="dark"] {
  --xk-gray-000: #23242C;
  --xk-gray-050: #1A1B22;
  --xk-gray-100: #2C2D37;
  --xk-gray-200: #373844;
  --xk-identity:        #F1F1F4;
  --xk-identity-deep:   #DBDBE0;
  --xk-identity-light:  #ACADB7;
  --xk-brand:           #ACADB7;
  --xk-ink:             #F1F1F4;
  --xk-text:            #F1F1F4;
  --xk-text-body:       #B4B5BE;
  --xk-text-muted:      #7E7F8A;
  --xk-surface:         #23242C;
  --xk-surface-sub:     #2C2D37;
  --xk-border:          #373844;
  --xk-canvas:          #1A1B22;
  --xk-temp-warm:       #DE9074;
  --xk-temp-cool:       #939CD6;
  --xk-neu-shadow:      rgba(0,0,0,.62);
  --xk-neu-light:       rgba(255,255,255,.035);
  --xk-neu-raise:       8px 8px 18px var(--xk-neu-shadow), -5px -5px 12px var(--xk-neu-light);
  --xk-neu-raise-sm:    5px 5px 10px var(--xk-neu-shadow), -3px -3px 7px var(--xk-neu-light);
  --xk-neu-inset:       inset 4px 4px 11px var(--xk-neu-shadow), inset -3px -3px 8px var(--xk-neu-light);
}

/* ── 2. Logo size normalization ────────────────────────────── */
.nav-logo img,
.brand-link img,
.brand img,
header .logo-box img { height: var(--xk-logo-h-desktop) !important; width: auto !important; }

/* Weave: logo is wrapped in a sized box; cap its container too */
.logo-box {
  width: auto !important;
  height: calc(var(--xk-logo-h-desktop) + 12px) !important;
  min-width: 0 !important;
}
.logo-box img { object-fit: contain; }

@media (max-width: 820px) {
  .nav-logo img,
  .brand-link img,
  .brand img,
  header .logo-box img { height: var(--xk-logo-h-mobile) !important; }
  .logo-box { height: calc(var(--xk-logo-h-mobile) + 10px) !important; }
}

/* ── 3. Reduced-motion: disable decorative motion across site ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-glow, .hero-threads { display: none !important; }
}

/* ── 4a. Shared team-card color accents ─────────────────────
   Used by home (/index.html) and AX landing (/ax/index.html).
   Keep accent tokens here so both pages render identical colors. */
.team-card.c-leadership { --team-ac: rgba(35, 36, 48, 0.92); }    /* action */
.team-card.c-sales      { --team-ac: rgba(172, 173, 183, 0.92); } /* brand gray-400 */
.team-card.c-business   { --team-ac: rgba(113, 114, 127, 0.92); } /* gray-600 */
.team-card.c-data       { --team-ac: rgba(94, 143, 123, 0.92); }  /* success */
.team-card.c-platform   { --team-ac: rgba(87, 88, 102, 0.92); }   /* gray-700 */
.team-card.c-ax         { --team-ac: rgba(123, 132, 196, 0.92); } /* temp-cool */

/* ── 4. Partner-logo marquee polish ─────────────────────────── */
.partners-wall .pr-track { will-change: transform; }
.partners-wall, .partners-wall * { user-select: none; }
.partners-wall .pr-row[aria-hidden] img { pointer-events: none; }

/* ── 5. Minimal brand header for pages that were text-only
   (news / contact). Class-scoped, only applies where used. ── */
.xk-mini-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: color-mix(in srgb, var(--xk-surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--xk-border);
  font-family: var(--xk-sans);
}
.xk-mini-nav .xk-mini-logo { display: inline-flex; align-items: center; }
.xk-mini-nav .xk-mini-logo img { height: var(--xk-logo-h-desktop); width: auto; display: block; }
.xk-mini-nav .xk-mini-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.xk-mini-nav .xk-mini-links a {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--xk-text); text-decoration: none; font-weight: 600;
  position: relative; padding-bottom: 3px;
  transition: color .2s ease;
}
.xk-mini-nav .xk-mini-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--xk-identity);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.xk-mini-nav .xk-mini-links a:hover { color: var(--xk-identity-deep); }
.xk-mini-nav .xk-mini-links a:hover::after,
.xk-mini-nav .xk-mini-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 820px) {
  .xk-mini-nav { padding: 10px 18px; }
  .xk-mini-nav .xk-mini-logo img { height: var(--xk-logo-h-mobile); }
  .xk-mini-nav .xk-mini-links { gap: 14px; }
  .xk-mini-nav .xk-mini-links a { font-size: 11px; }
}

/* ── 6. Minimal footer for pages that were missing one ───────── */
.xk-mini-footer {
  padding: 48px 32px; margin-top: 80px;
  background: var(--xk-surface);
  border-top: 1px solid var(--xk-border);
  color: var(--xk-text-body);
  font-family: var(--xk-sans);
  font-size: 13px; line-height: 1.7;
}
.xk-mini-footer .xk-foot-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.xk-mini-footer .xk-foot-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.xk-mini-footer a { color: var(--xk-text); text-decoration: none; }
.xk-mini-footer a:hover { color: var(--xk-identity-deep); }
.xk-mini-footer .xk-foot-copy { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .05em; }
@media (max-width: 680px) {
  .xk-mini-footer { padding: 32px 18px; }
  .xk-mini-footer .xk-foot-inner { flex-direction: column; align-items: flex-start; }
}


/* ===== XERKONIX wordmark — CSS build (Pretendard 800; E=bars/brand, O=ring+dot/accent) ===== */
.xk{--xk-s:26px;--xk-ink:#232430;--xk-bar:#ACADB7;--xk-dot:#232430;
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif;font-weight:800;
  font-size:var(--xk-s);line-height:1;color:var(--xk-ink);display:inline-flex;align-items:center;
  gap:.15em;user-select:none;white-space:nowrap}
.xk b{font-weight:800;display:block;transform:translateY(.015em)}
.xk .e{display:flex;flex-direction:column;justify-content:space-between;height:.71em;width:.58em}
.xk .e i{height:.148em;background:var(--xk-bar);border-radius:.09em}
.xk .o{position:relative;width:.76em;height:.76em;border:.148em solid var(--xk-ink);border-radius:50%;flex-shrink:0}
.xk .o i{position:absolute;inset:0;margin:auto;width:.19em;height:.19em;border-radius:50%;background:var(--xk-dot)}
.xk.xk--on-dark{--xk-ink:#EFF1F8;--xk-dot:#575866}
[data-theme="dark"] .xk:not(.xk--on-dark){--xk-ink:#EFF1F8;--xk-dot:#575866}
.nav-logo .xk{--xk-s:24px}
.footer-logo .xk{--xk-s:28px}
.logo-box .xk{--xk-s:24px}
@media(max-width:760px){.nav-logo .xk{--xk-s:20px}}

/* ── 8. TACTILE 뉴모픽 표면 (v2.0) — 만지는 층에만 조명. box-shadow/곡률만이라
   레이아웃에 무영향. 정보 카드/패널은 평면(토큰 border) 유지, 주 CTA만 융기. ── */
.btn-cta{ box-shadow: var(--xk-neu-raise-sm) !important; border-radius: 12px !important;
  transition: box-shadow .18s cubic-bezier(.33,.02,.2,1), transform .18s cubic-bezier(.33,.02,.2,1) !important; }
.btn-cta:hover{ box-shadow: var(--xk-neu-raise) !important; }
.btn-cta:active{ box-shadow: var(--xk-neu-inset) !important; transform: translateY(1px) !important; }
