/*
 * 건축 네비게이션 — 디자인 토큰 v0.2 (보물지도)
 *
 * 컨셉: 낡은 양피지 보물지도 + 하우빌드 브랜드 컬러를 포인트로
 * 메인 톤: 베이지·갈색 (양피지 분위기)
 * 포인트: 청록·주황 (하우빌드 브랜드)
 */

:root {
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 양피지 배경 — 보물지도 종이                       */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --parchment-base: #F5E6C8;        /* 메인 양피지 베이지 */
  --parchment-light: #FAF1D9;       /* 밝은 영역 */
  --parchment-dark: #E8D2A0;        /* 어두운 영역 (얼룩) */
  --parchment-edge: #C9A56B;        /* 가장자리 그을림 */
  --parchment-shadow: rgba(101, 67, 33, 0.15);  /* 그림자·얼룩 */

  /* 종이 텍스처 (그라데이션·반점) */
  --parchment-gradient: radial-gradient(ellipse at center, #FAF1D9 0%, #F5E6C8 40%, #E8D2A0 100%);
  --parchment-stain-1: rgba(139, 90, 43, 0.06);
  --parchment-stain-2: rgba(101, 67, 33, 0.04);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 길 (Path) — 점선                                  */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --path-color: #8B5A2B;            /* 진한 갈색 점선 */
  --path-color-completed: #2C7280;   /* 완료된 길 — 청록 (하우빌드 포인트) */
  --path-dash-size: "8 12";          /* 점선 간격 */
  --path-stroke-width: 4;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 큰 원 (7개 주요 단계 노드)                        */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --big-node-bg: #FFFFFF;
  --big-node-border: #8B5A2B;        /* 진한 갈색 외곽선 */
  --big-node-text: #4A2F18;          /* 진한 갈색 텍스트 */
  --big-node-size: 110px;            /* 데스크톱 */
  --big-node-size-mobile: 80px;
  --big-node-border-width: 4px;
  --big-node-shadow: 0 4px 0 #8B5A2B, 0 8px 20px rgba(101, 67, 33, 0.2);

  /* 큰 원 — 현재 위치 강조 (펄스) */
  --big-node-current-bg: #E89F4D;    /* 하우빌드 주황 */
  --big-node-current-text: #FFFFFF;
  --big-node-current-glow: rgba(232, 159, 77, 0.5);

  /* 큰 원 — 완료 */
  --big-node-completed-bg: #1A4D5C;  /* 하우빌드 청록 */
  --big-node-completed-text: #FFFFFF;
  --big-node-completed-border: #1A4D5C;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 작은 원 (34개 세부 단계 노드)                     */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --small-node-bg: #FFFFFF;
  --small-node-border: #C9A56B;
  --small-node-text: #6B4226;
  --small-node-size: 54px;            /* 데스크톱 */
  --small-node-size-mobile: 40px;
  --small-node-border-width: 2.5px;
  --small-node-shadow: 0 2px 0 #C9A56B, 0 4px 10px rgba(101, 67, 33, 0.12);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 시작점 / 도착지 (보물상자)                        */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --start-flag: #C85A5A;             /* 빨간 깃발 */
  --start-text: #4A2F18;
  --treasure-gold: #FFD43B;          /* 보물상자 금색 */
  --treasure-gold-dark: #B89320;
  --treasure-bg-glow: radial-gradient(circle, rgba(255, 212, 59, 0.4) 0%, transparent 60%);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 랜드마크 (건축 도구 일러스트)                      */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --landmark-color: #6B4226;         /* 갈색 — 양피지에 그린 일러스트 톤 */
  --landmark-shadow: rgba(101, 67, 33, 0.3);
  --landmark-opacity: 0.85;
  /* 사용 예: 측량기·삽·망치·도면롤·크레인·집·나침반 */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 하우빌드 브랜드 컬러 (포인트로만 사용)             */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --brand-primary: #1A4D5C;
  --brand-primary-light: #2C7280;
  --brand-accent: #E89F4D;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 모서리 장식 (잎사귀·덩굴)                         */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --corner-decoration-color: #8B5A2B;
  --corner-decoration-opacity: 0.6;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 타이포그래피                                       */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --font-family-display: "Pretendard", "Noto Sans KR", sans-serif;
  --font-family-handwritten: "Caveat", "Kalam", "Gowun Dodum", "Pretendard", cursive;
  --font-family-base: "Pretendard", "Noto Sans KR", sans-serif;

  /* 보물지도 위 텍스트 — 손글씨 같은 느낌 가능 (대안) */
  /* 큰 원 안 텍스트 — Pretendard Bold */
  /* 작은 원 안 텍스트 — Pretendard Medium */

  --font-size-title: 36px;             /* "건축의 길" 같은 큰 제목 */
  --font-size-big-node: 14px;          /* 큰 원 안 텍스트 */
  --font-size-small-node: 10px;        /* 작은 원 안 텍스트 */
  --font-size-landmark: 13px;          /* 랜드마크 캡션 */
  --font-size-start-end: 22px;         /* "Start Here" / "건물주" */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 간격                                              */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --spacing-between-big-nodes: 220px;  /* 데스크톱 — 큰 원 사이 거리 (세로) */
  --spacing-between-small-nodes: 80px; /* 작은 원 사이 거리 (세로) */
  --map-padding: 60px;                 /* 지도 종이 안쪽 여백 */
  --map-padding-mobile: 24px;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 애니메이션                                         */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --node-hover-transition: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  --path-draw-duration: 2s;            /* 처음 페이지 로드 시 길이 그려지는 애니메이션 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 현재 위치 펄스 애니메이션                          */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes pulse-current {
  0%   { box-shadow: 0 0 0 0 var(--big-node-current-glow); }
  70%  { box-shadow: 0 0 0 20px rgba(232, 159, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 159, 77, 0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 보물상자 빛나는 애니메이션                         */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes treasure-glow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 10px rgba(255, 212, 59, 0.4)); }
  50%      { filter: brightness(1.15) drop-shadow(0 0 25px rgba(255, 212, 59, 0.7)); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 길 그려지는 애니메이션 (SVG path)                  */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes draw-path {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 사용 예시 (참고용 주석)                            */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*

.treasure-map {
  background: var(--parchment-gradient);
  font-family: var(--font-family-base);
  padding: var(--map-padding);
  position: relative;
}

.path {
  stroke: var(--path-color);
  stroke-width: var(--path-stroke-width);
  stroke-dasharray: var(--path-dash-size);
  fill: none;
}

.big-node {
  width: var(--big-node-size);
  height: var(--big-node-size);
  background: var(--big-node-bg);
  border: var(--big-node-border-width) solid var(--big-node-border);
  border-radius: 50%;
  color: var(--big-node-text);
  font-size: var(--font-size-big-node);
  font-weight: 700;
  box-shadow: var(--big-node-shadow);
  transition: var(--node-hover-transition);
}

.big-node.current {
  background: var(--big-node-current-bg);
  color: var(--big-node-current-text);
  animation: pulse-current 2s infinite;
}

.big-node.completed {
  background: var(--big-node-completed-bg);
  color: var(--big-node-completed-text);
  border-color: var(--big-node-completed-border);
}

.small-node {
  width: var(--small-node-size);
  height: var(--small-node-size);
  background: var(--small-node-bg);
  border: var(--small-node-border-width) solid var(--small-node-border);
  border-radius: 50%;
  color: var(--small-node-text);
  font-size: var(--font-size-small-node);
}

.treasure-chest {
  animation: treasure-glow 3s ease-in-out infinite;
}

.start-flag {
  color: var(--start-flag);
  font-size: var(--font-size-start-end);
}

@media (max-width: 768px) {
  :root {
    --big-node-size: 80px;
    --small-node-size: 40px;
    --spacing-between-big-nodes: 140px;
    --map-padding: 24px;
  }
}

*/