/* BEARSYS — BI design tokens & base reset
 * Source: Bearing BI.pdf (LABEL DOCUMENT) — color scheme, logotype, symbol
 * Principles:
 *   - 무채색(화이트→그레이→블랙), 블랙은 포인트
 *   - 볼드 산세리프 + 소형 대문자 메타 라벨
 *   - 얇은 1px 규칙선(다큐멘트 그리드)
 *   - 인더스트리얼 질감(콘크리트/스톤) — 배경 노이즈
 */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* Local Pretendard Variable — copied from sou-manager fonts */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;            /* variable font weight range */
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/PretendardVariable.woff2") format("woff2"),
       url("/assets/fonts/PretendardVariable.ttf")   format("truetype");
}

:root {
  /* color — BI COLOR SCHEME */
  --paper:      #F3F3F3;   /* document background */
  --paper-2:    #FFFFFF;   /* card / surface */
  --ink:        #0A0A0A;   /* point / wordmark */
  --ink-soft:   #1E1E1E;
  --gray-50:    #ECECEC;
  --gray-100:   #E0E0E0;
  --gray-200:   #CFCFCF;   /* concrete light */
  --gray-300:   #B2B2B2;   /* concrete */
  --gray-400:   #8C8C8C;
  --gray-500:   #6B6B6B;
  --gray-600:   #4A4A4A;
  --gray-700:   #2A2A2A;   /* charcoal — sidebar bg */
  --sidebar-w:  240px;
  --line:       #C8C8C8;   /* thin rule (BI dividers) */
  --line-soft:  #DADADA;
  --signal:     #0A0A0A;   /* accent = black only */

  /* type — Pretendard for Korean + Latin coverage.
     Mono stack keeps JetBrains Mono for Latin/digits and falls back to
     Pretendard for Korean (which JetBrains Mono lacks), so Korean in
     meta-dim / monospace contexts renders cleanly instead of using a
     browser system font. */
  --font-sans:  "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", "Pretendard Variable", "Pretendard", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* scale */
  --fs-display: 64px;
  --fs-h1:      28px;
  --fs-h2:      18px;
  --fs-body:    13px;
  --fs-small:   11px;
  --fs-micro:   10px;

  /* rhythm */
  --u: 4px;
  --gutter: 24px;
  --rule: 1px solid var(--line);
  --rule-soft: 1px solid var(--line-soft);
  --rule-ink: 1px solid var(--ink);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-feature-settings: "ss01", "cv11", "tnum";
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* paper noise — 서울 옛 공장지대 러프 질감 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* layout utilities */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.grow { flex: 1 1 auto; }

/* wordmark */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* small meta label: "LABEL DOCUMENT" / "BRAND IDENTITY DEVELOPMENT" 패턴 */
.meta-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.meta-dim {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* horizontal rule (BI style) */
hr.rule { border: 0; border-top: var(--rule); margin: 0; }
hr.rule-ink { border: 0; border-top: var(--rule-ink); margin: 0; }

/* ™ / SM / ® superscript */
.sup {
  font-size: 0.45em;
  vertical-align: top;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-left: 2px;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background .1s, color .1s;
}
.btn:hover { background: var(--ink); color: var(--paper-2); }
.btn--ink { background: var(--ink); color: var(--paper-2); }
.btn--ink:hover { background: var(--paper-2); color: var(--ink); }
.btn--ghost { border-color: var(--line); color: var(--gray-500); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }

/* inputs */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.field__input {
  height: 38px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 0 10px;
  font: 500 13px/1 var(--font-sans);
  color: var(--ink);
  outline: none;
  border-radius: 0;
}
.field__input:focus { border-color: var(--ink); }

/* scroll reset */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--gray-200); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
::-webkit-scrollbar-track { background: transparent; }

/* symbol (currentColor SVG) */
.sym { display: inline-block; color: var(--ink); }