*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

section { scroll-margin-top: var(--header-h); }

/* 글자 */
.t-display { font-size: var(--fs-display); font-weight: 700; letter-spacing: var(--ls-display); line-height: 1.2; }
.t-h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-h2); line-height: 1.25; }
.t-h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; }
.t-body { font-size: var(--fs-body); }
.t-small { font-size: var(--fs-small); }
.t-en {
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-en);
}
.wordmark {
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  letter-spacing: var(--ls-wordmark);
}

/* 레이아웃 */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--lime { background: var(--lime); color: var(--ink); }

/* 부품 */
.pill-label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
}
.card { border-radius: var(--radius-card); padding: clamp(20px, 2.4vw, 32px); }
.card--ink { background: var(--ink-card); color: var(--cream); border: 1px solid var(--ink-line); }
.card--paper { background: var(--paper-card); color: var(--ink); border: 1px solid var(--paper-line); }
.card--lime { background: var(--lime); color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--line { background: transparent; color: inherit; border-color: currentColor; }

.logo-mark { display: inline-flex; align-items: center; gap: calc(var(--shape, 14px) * 0.3); }
.logo-mark__shape {
  display: block;
  width: var(--shape, 14px);
  height: var(--shape, 14px);
  background: var(--cream);
}
.logo-mark__shape:nth-child(1) { border-radius: var(--r1, 0%); }
.logo-mark__shape:nth-child(2) { border-radius: var(--r2, 28%); }
.logo-mark__shape:nth-child(3) { border-radius: var(--r3, 50%); background: var(--lime); }
.section--lime .logo-mark__shape { background: var(--ink); }

/* 포커스 링 */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.section--paper :focus-visible, .section--lime :focus-visible { outline-color: var(--ink); }
/* 카드 면이 섹션과 다른 색이면 카드 기준으로 링 색을 다시 고른다 */
.card--lime :focus-visible { outline-color: var(--ink); }
.card--ink :focus-visible { outline-color: var(--lime); }