/* ============ reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 1rem = 10px — 디자인뱅크 archive 클론(hero/company/capability/stats/certification)이 62.5% 베이스로 작성됨.
   나머지 코드(globals 유틸·러프섹션)는 전부 px라 영향 없음. body 에서 16px로 기본 텍스트 복원. */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--wd-header-h); }
body {
  font-family: var(--wd-font-primary);
  color: var(--wd-text-primary);
  background: var(--wd-surface-white);
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--wd-secondary); outline-offset: 2px; }

/* ============ layout primitives ============ */
.wd-container { width: 100%; max-width: var(--wd-maxw); margin-inline: auto; padding-inline: var(--wd-pad); }
.wd-container--wide { max-width: var(--wd-maxw-wide); }

.wd-section { padding-block: var(--wd-sec-y); }
.wd-section--soft { background: var(--wd-surface-light); }
.wd-section--subtle { background: var(--wd-surface-subtle); }
.wd-section--dark {
  background: var(--wd-surface-dark-section);
  color: var(--wd-text-inverse);
}
.wd-section--dark .wd-sec-desc,
.wd-section--dark .wd-eyebrow { color: var(--wd-primary-light); }
.wd-section--dark .wd-sec-title { color: #fff; }

/* ============ section header ============ */
.wd-sec-head { margin-bottom: 56px; }
.wd-sec-head--center { text-align: center; }
.wd-eyebrow {
  display: inline-block;
  font-family: var(--wd-font-secondary);
  font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
  color: var(--wd-secondary);
  margin-bottom: 14px;
}
.wd-sec-title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700; line-height: 1.25; letter-spacing: -0.03em;
  color: var(--wd-text-primary);
}
.wd-sec-title .accent { color: var(--wd-primary); }
.wd-sec-desc {
  margin-top: 18px; font-size: 16px; line-height: 1.7;
  color: var(--wd-text-secondary); max-width: 640px;
}
.wd-sec-head--center .wd-sec-desc { margin-inline: auto; }

/* ============ buttons ============ */
.wd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding-inline: 30px; min-width: 150px;
  font-size: 16px; font-weight: 600; border-radius: var(--wd-radius-default);
  transition: all var(--wd-dur) var(--wd-ease); white-space: nowrap;
}
.wd-btn--primary { background: var(--wd-primary); color: #fff; }
.wd-btn--primary:hover { background: var(--wd-primary-hover); transform: translateY(-2px); }
.wd-btn--ghost { background: transparent; color: var(--wd-primary); box-shadow: inset 0 0 0 1.5px var(--wd-primary); }
.wd-btn--ghost:hover { background: var(--wd-primary); color: #fff; }
.wd-btn--on-dark { background: #fff; color: var(--wd-primary); }
.wd-btn--on-dark:hover { background: var(--wd-primary-light); }
.wd-btn--sm { height: 44px; padding-inline: 20px; min-width: 0; font-size: 14px; }

/* ============ cards / grid ============ */
.wd-grid { display: grid; gap: 24px; }
.wd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wd-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wd-card {
  background: #fff; border: 1px solid var(--wd-border-default);
  border-radius: var(--wd-radius-default); transition: all var(--wd-dur) var(--wd-ease);
}
.wd-card:hover { border-color: var(--wd-primary); box-shadow: var(--wd-shadow-card); }

/* ============ spec table ============ */
.wd-spec { width: 100%; font-size: 14.5px; border-top: 2px solid var(--wd-primary); }
.wd-spec th, .wd-spec td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--wd-border-light); }
.wd-spec th { background: var(--wd-surface-light); color: var(--wd-text-secondary); font-weight: 600; width: 34%; white-space: nowrap; }
.wd-spec td { color: var(--wd-text-primary); }

/* ============ tags / numbers ============ */
.wd-tag {
  display: inline-block; font-family: var(--wd-font-secondary); font-weight: 600;
  font-size: 12px; letter-spacing: 0.02em; color: var(--wd-secondary);
  background: var(--wd-primary-50); padding: 5px 11px; border-radius: var(--wd-radius-sm);
}
.wd-num { font-family: var(--wd-font-secondary); font-weight: 700; letter-spacing: -0.02em; }

/* ============ disabled nav (unbuilt routes) ============ */
.is-disabled {
  color: var(--wd-text-disabled) !important;
  pointer-events: none; cursor: default; position: relative;
}

/* ============ responsive ============ */
@media (max-width: 960px) {
  .wd-grid--3, .wd-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wd-grid--2, .wd-grid--3, .wd-grid--4 { grid-template-columns: 1fr; }
  .wd-sec-head { margin-bottom: 36px; }
  .wd-btn { height: 50px; }
}

/* ============ reveal-on-scroll (optional, progressive) ============ */
@media (prefers-reduced-motion: no-preference) {
  .wd-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--wd-ease), transform .7s var(--wd-ease); }
  .wd-reveal.is-in { opacity: 1; transform: none; }
}