/* reset */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; height: 100%; }

body {
  font-family: "Reckless Standard S", "Pretendard", serif;
  background: #dbdbdb;
  color: #383838;

  /* 스케치처럼 스크롤 없이 한 화면에 */
  overflow: hidden;
}

@font-face {
  font-family: "Reckless Standard S";
  src: url("/assets/fonts/RecklessStandardS-TRIAL-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== grain overlay (네가 쓰던 방식 그대로) ===== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: url("assets/img/grain.png"); /* 경로 필요하면 조정 */
  background-repeat: repeat;
  background-size: 500px 500px;

  opacity: 0.25;
  mix-blend-mode: multiply;
}

/* ===== 로고: 상단 중앙 고정 ===== */
.rcl-logo {
  position: fixed;
  top: 18px;                 /* 상단 여백 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 로고 이미지 */
.rcl-logo img {
  height: 18px;              /* ← 기존 30px 텍스트와 동일한 시각 크기 */
  width: auto;
  display: block;

  opacity: 1;             
  transition: filter 0.25s ease;
  filter: brightness(0) invert(0.4); /* 기본: 연한 회색 */
}

.rcl-logo:hover img {
  filter: brightness(0) invert(1);   /* ✅ 완전 흰색 */
}


/* ===== 중앙 컨텐츠 래퍼 ===== */
.about-wrap {
  position: relative;
  z-index: 5;
  height: 100vh;
  width: 100vw;

  display: grid;
  place-items: start center;   /* ✅ 세로는 위 / 가로는 중앙 */
  padding: 80px 7vw 50px;        /* ✅ 상단 여백으로 위치 컨트롤 */
}

/* ===== 2컬럼 레이아웃 ===== */
.about-columns {
  width: min(1100px, 88vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 120px);

  /* 스케치처럼 가운데에 모여있게 */
  align-items: start;
}

/* 컬럼 공통 */
.col {
  text-align: center;
  line-height: 1.65;
  font-size: clamp(11px, 1.1vw, 14px);
  color: rgba(40, 40, 40, 0.65);
}

/* 문단 간격 */
.col p + p { margin-top: 28px; }

/* 강조(em) 스타일 */
.col em {
  font-style: normal;
  color: rgba(40, 40, 40, 0.85);
}

/* ===== 모바일: 한 컬럼으로 내려주기 ===== */
@media (max-width: 860px) {
  body { overflow: auto; } /* 모바일에서 너무 답답하면 스크롤 허용 */
  .about-wrap { padding: 90px 7vw 70px; place-items: start top; }
  .about-columns { grid-template-columns: 1fr; gap: 90px; }
}