/* ─────────────────────────────────────────────
   drawcut.kr — custom styles
   ───────────────────────────────────────────── */

:root {
  --paper:    #FAFAFA;
  --paper-pure: #FFFFFF;
  --ink-900:  #0A0A0A;
  --ink-700:  #2A2A2A;
  --ink-500:  #6E6E6E;
  --ink-300:  #B5B5B5;
  --ink-100:  #E8E8E8;
  --ink-50:   #F2F2F2;
  --signal:        #C5F82A;
  --signal-hover:  #B4E51F;
  --signal-ink:    #1F2A05;
}

/* 기본 ─────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 한글에 letter-spacing이 너무 강하면 어색 — 영문에만 적용 */
.font-display { font-family: 'Geist', 'Pretendard', sans-serif; }
.font-mono    { font-feature-settings: "ss01"; }

/* 셀렉션 */
::selection { background: var(--signal); color: var(--signal-ink); }

/* 가는 가로선 */
.hairline { border-top: 1px solid var(--ink-100); }

/* ─────────────────────────────────────────────
   reveal: 스크롤 진입 시 fade-up
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ─────────────────────────────────────────────
   히어로 라벨 — 줄번호 디테일
   ───────────────────────────────────────────── */
.line-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-300);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   링크 언더라인 (마우스 호버 시 라임 그린)
   ───────────────────────────────────────────── */
.link-under {
  position: relative;
  display: inline-block;
}
.link-under::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.link-under:hover::after {
  transform: scaleX(1);
}

/* ─────────────────────────────────────────────
   카드
   ───────────────────────────────────────────── */
.card-flat {
  background: var(--paper-pure);
  border: 1px solid var(--ink-100);
  transition: border-color .3s ease, transform .3s ease;
}
.card-flat:hover {
  border-color: var(--ink-900);
}

/* ─────────────────────────────────────────────
   대표자 타이포 카드 (사진 대체)
   ───────────────────────────────────────────── */
.founder-card {
  background: var(--ink-900);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.founder-card::after {
  content: "";
  position: absolute;
  left: 24px; right: 24px; bottom: 60px;
  height: 2px;
  background: var(--signal);
}
.founder-label {
  font-family: 'Geist', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* ─────────────────────────────────────────────
   대형 헤딩 — display
   ───────────────────────────────────────────── */
.h-display {
  font-family: 'Geist', 'Pretendard', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.h-section {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ─────────────────────────────────────────────
   이미지 톤 통일 (살짝 색감 통일)
   ───────────────────────────────────────────── */
.tone-img {
  filter: contrast(1.02) saturate(0.96);
}

/* ─────────────────────────────────────────────
   가로 스크롤 marquee
   ───────────────────────────────────────────── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee 36s linear infinite;
  display: flex;
  gap: 64px;
  white-space: nowrap;
  width: max-content;
}

/* ─────────────────────────────────────────────
   드롭다운/포커스 일반
   ───────────────────────────────────────────── */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 큰 number 디스플레이 */
.big-num {
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 12vw, 168px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--ink-100);
}

/* mobile menu 표시 */
.menu-open #mobile-menu { display: flex; }
.menu-open { overflow: hidden; }