/* =========================
   기본 리셋
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: "Trattatello", "SF Mono Light", "pretendard";
  background: #f7f7f6;
  color: #282828;
  overflow: hidden; /* 세로 스크롤 방지 */
}

/* =========================
   Background 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: 0px;
  left: 5%;
  transform: translateX(0);
  font-size: 30px;
  text-decoration: none;
  color: #c8c8c8;
  letter-spacing: 0.02em;
  z-index: 20;
}

.rcl-logo:hover {
  color: white;
} */

/* ===== 로고: 상단 중앙 고정 ===== */
.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);   /* ✅ 완전 흰색 */
}


/* =========================
   전체 캔버스
   ========================= */
.rcl-canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 2; /* grain 위로 */
}

/* =========================
   오브제 컨테이너
   ========================= */
.rcl-objects {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3vh;
  width: min(90vw, 1300px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0px;
}

/* =========================
   공통 오브제 스타일
   ========================= */
.rcl-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  border: 0;
  background: var(--accent);
  transition: background-color 0.35s ease-in-out;
  overflow: hidden;

  /* 흔들림 기본 적용 */
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(0deg);
  animation: none;
}

/* =========================
   CHAIN WOBBLE (Hover only)
   - hover 시에만 1회 휘청 → 복원
   - 오브제별 진폭(각도/이동량) 다르게
   ========================= */

/* 기본은 정지 + 오프셋 유지 */
.rcl-item {
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(0deg);
  animation: none;
  transition: transform 0.25s ease-out; /* hover 끝났을 때도 자연스럽게 */
}

/* 진폭 변수(기본값) */
.rcl-item {
  --wobble-x: 1px;      /* 좌우 이동 진폭 */
  --wobble-rot: 0.4deg; /* 회전 진폭 */
  --wobble-time: 700ms; /* 기본 시간 */
}

/* 오브제별 진폭 차등 (⭐️ 여기서 ‘정도’를 만든다) */
.circle {
  --wobble-x: 10.5px;
  --wobble-rot: 6.5deg;
  --wobble-time: 2000ms;
}

.quote-bar {
  --wobble-x: 2.0px;
  --wobble-rot: 0.80deg;
  --wobble-time: 1500ms;
}

.middle-card {
  --wobble-x: 0.5px;
  --wobble-rot: 0.2deg;
  --wobble-time: 900ms;
}

.bottom-card {
  --wobble-x: 0.2px;
  --wobble-rot: 0.05deg;
  --wobble-time: 460ms;
}

/* 핵심 애니메이션: 휘청 → 반대 → 감쇠 → 복원 */
@keyframes stone-wobble-amp {
  0%   { transform: translate(var(--x), var(--y)) rotate(0deg); }
  18%  { transform: translate(calc(var(--x) + var(--wobble-x)), var(--y))
                 rotate(var(--wobble-rot)); }
  40%  { transform: translate(calc(var(--x) - calc(var(--wobble-x) * 0.75)), var(--y))
                 rotate(calc(var(--wobble-rot) * -0.5)); }
  65%  { transform: translate(calc(var(--x) + calc(var(--wobble-x) * 0.35)), var(--y))
                 rotate(calc(var(--wobble-rot) * 0.25)); }
  100% { transform: translate(var(--x), var(--y)) rotate(0deg); }
}

/* hover 또는 JS로 추가되는 .wobble 클래스가 붙으면 1회 실행 */
.rcl-item:hover,
.rcl-item.wobble {
  animation: stone-wobble-amp var(--wobble-time) ease-out 1;
}


/* 기본 아이콘 텍스트 */
.rcl-item .item-text {
  color: #ffffff;
  padding: 12px 24px;
  line-height: 1.4;
  transition: color 0.35s ease-in-out, opacity 0.35s ease-in-out;
}

/* hover 시 아이콘 색상 */
.rcl-item:hover .item-text {
  color: var(--accent);
}

/* 오브제별 accent 컬러 */
.circle      { --accent: #eb9eef; }
.quote-bar   { --accent: #aa8d63; border-radius: 0; }
.middle-card { --accent: #55aa8e; border-radius: 20px; }
.bottom-card { --accent: #6ca0d8; border-radius: 0; }

/* =========================
   1번: 원형 오브제
   ========================= */
.circle {
  width: min(40vw, 250px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;

  /* ✅ 자연스러운 쌓임 오프셋: transform 대신 변수 */
  --x: clamp(-180px, -50vw, 20px);
  --y: 0px;
}

.circle .item-text {
  font-size: 1rem;
}

/* No image 상태 */
.circle.is-no-image .item-text {
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0.01em;
}

.circle.is-no-image:hover .item-text {
  color: var(--accent);
}

/* 활성(클릭 가능) 상태 */
.circle.is-active {
  background: #ffffff !important;
  cursor: pointer;
}

/* 1번 원형 hover 텍스트 — 진짜 원 정중앙 고정 */
.circle .circle-hover-text {
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: none; /* JS가 켜줄 때만 */
  align-items: center;
  justify-content: center;

  width: 70%;
  max-width: 70%;
  text-align: center;

  color: #eb9eef;
  line-height: 1.25;
  letter-spacing: 0.01em;

  font-size: clamp(14px, 1.6vw, 18px);

  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* =========================
   2번: 긴 막대
   ========================= */
.quote-bar {
  width: min(90vw, 1300px);
  height: max(10vh);
  max-width: 1300px;
  aspect-ratio: 10 / 1;
  border-radius: 0;
  position: relative;
  overflow: hidden;

  /* 기본 오프셋 없음 */
  --x: 0px;
  --y: 0px;
}

/* hover 텍스트 레이어 */
.quote-bar .text-embed {
  position: absolute;
  inset: 0;
  background: #ffffff;

  opacity: 0;
  transition: opacity 0.45s ease-in-out;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
}

.quote-bar:hover .text-embed {
  opacity: 1;
}

/* 텍스트가 뜨면 아이콘 숨김 */
.quote-bar:hover .item-text {
  opacity: 0;
}

/* 텍스트 표시(2줄 제한 유지) */
.quote-bar .text-link {
  color: #aa8d63;
  text-decoration: none;
  cursor: default;

  text-align: center;
  line-height: 1.35;
  font-size: 16px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
  max-width: 100%;

  opacity: 0.85;
  transition: opacity 0.18s ease;

  /* ✅ 텍스트 자체는 클릭/호버 대상 아님 */
  pointer-events: none;
}

.quote-bar .text-link:hover {
  opacity: 1; /* (pointer-events none 이라 실제 hover는 안 탐) */
}

/* 2번 오브제 자체가 클릭 가능할 때 */
.quote-bar.is-clickable {
  cursor: pointer;
}

/* =========================
   3번: 정사각형
   ========================= */
.middle-card {
  width: min(30vw, 280px);
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  position: relative;
  overflow: hidden;

  /* ✅ 자연스러운 쌓임 오프셋: transform 대신 변수 */
  --x: clamp(10px, 5vw, 50px);
  --y: 0px;
}

/* =========================
   4번: 하단 카드
   ========================= */
.bottom-card {
  width: min(60vw, 500px);
  aspect-ratio: 7 / 4;
  border-radius: 0;
  position: relative;
  overflow: hidden;

  /* 기본 오프셋 없음 */
  --x: 0px;
  --y: 0px;
}

/* =========================
   3/4번: 오브제 내부 embed 공통
   ========================= */
.rcl-item .embed {
  position: absolute;
  inset: 0;
  background: #ffffff;

  opacity: 0;
  transition: opacity 0.45s ease-in-out;
  display: flex;
  flex-direction: column;
}

.rcl-item:hover .embed {
  opacity: 1;
}

/* embed 상단 OPEN 영역 */
.embed-top {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 10px;
  flex: 0 0 auto;
}

.embed-open {
  font-size: 12px;
  text-decoration: underline;
  color: #282828;
  cursor: pointer;
}

/* iframe */
.embed iframe {
  width: 100%;
  flex: 1 1 auto;
  border: 0;
  pointer-events: auto;
}

/* =========================
   Floating (1번 이미지용)
   ========================= */
.rcl-floating {
  position: fixed;
  z-index: 9999;
  background: transparent;
  padding: 0;
  border-radius: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.rcl-floating.show {
  opacity: 1;
  transform: translateY(0);
}

.rcl-floating img {
  max-width: min(420px, calc(100vw - 32px)); /* ✅ 화면폭 - 좌우 16px 여백 */
  height: auto;
  display: block;
  border-radius: 0;
}

.rcl-floating a {
  display: inline-block;
  line-height: 0;
}

/* =========================
   반응형 보정
   ========================= */
@media (max-width: 1024px) {
  .rcl-objects {
    width: 96vw;
    bottom: 3vh;
  }

  .circle {
    width: min(40vw, 250px);
  }

  .quote-bar {
    width: min(90vw, 1100px);
    max-width: 1100px;
    aspect-ratio: 10 / 1;
  }

  .middle-card {
    width: min(40vw, 280px);
  }

  .bottom-card {
    width: min(60vw, 500px);
  }
}

@media (max-width: 720px) {
  .rcl-objects {
    width: 96vw;
    bottom: 2vh;
  }

  .circle {
    width: min(40vw, 210px);
    /* ✅ 모바일 오프셋도 변수로 */
    --x: clamp(-40px, -20vw, 20px);
    --y: 0px;
  }

  .quote-bar {
    width: min(90vw, 1100px);
    aspect-ratio: 10 / 1;
    height: max(9vh);
  }

  .middle-card {
    width: 40vw;
    max-width: min(230px, calc(100vw - 40px)); /* ✅ 화면폭 - 좌우 16px 여백 */
    height: auto;
    border-radius: 20px;
    /* ✅ 모바일 오프셋도 변수로 */
    --x: clamp(10px, 5vw, 70px);
    --y: 0px;
  }

  .bottom-card {
    width: 60vw;
    aspect-ratio: 6 / 5;
    max-width: min(300px, calc(100vw - 32px)); /* ✅ 화면폭 - 좌우 16px 여백 */
  height: auto;
  }
}

/* 모바일 padding 조정 */
@media (max-width: 720px) {
  .rcl-item .item-text {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 720px) {
  .rcl-item {
    animation-duration: 9s, 6s;
  }
}

@media (max-width: 720px) {
  .rcl-logo img {
    height: 13px;
  }
}