/* ==========================================================================
   남한산성 CAMP모닥불 — 브랜드 아이덴티티 케이스
   강디자인

   실측 정정 (2026-08-08)
   선언돼 있던 여섯 색이 전부 승인 마크와 어긋나 있었다. 승인 시그니춰 SVG 를
   1400px 로 렌더해 2단위 양자화 뒤 구역별 중앙값으로 다시 쟀다.

     이전 --camp-night  #0B3148 → #0E476C   (심볼 80.3% · 시그니춰 70.9% 를 차지하는 감청)
     이전 --camp-teal   #008A98 → #007B8A   (CAMP모닥불 글자)
     이전 --camp-ink    #173245 → #0E476C   (마크가 글자에 쓰는 색)
     이전 --camp-ember  #FF9A29 → #EA5805   (캐릭터 불꽃. 마크에는 주황이 없다)
     이전 --camp-deep   #071F2C → #0E476C   (측정값이 없어 마크 감청으로 통일)
     이전 --camp-paper  #F7F4EC → #FFFFFF   (자산에 따뜻한 종이가 한 장도 없다.
                                             character-combination.jpg 가장자리 #FCFCFC 100%)
   태그라인 회색 #747374 도 실측값이다.
   순백 위에서 흰 도판이 묻히므로 route 도판에 헤어라인과 그림자를 줬다.

   물성 — 모닥불 빛 (2026-08-08 추가)
   - 지면 #0E476C 위로 아래 가운데에서 따뜻한 빛이 오르고, 마크의 아래 가장자리가
     그 빛을 받는다. 브랜드 이름이 모닥불이다.
   - 착지 곡선 settle_ember 는 **스물세 물성 중 유일하게 단조 증가가 아니다** —
     표본 201개 중 66구간에서 값이 내려간다. 무리수 주파수 넷을 겹쳐 주기를 없앴다.
     다만 끝 프레임은 승인 조합에 정확히 닿아야 하므로 (1-t)^1.3 로 떨림을 죽였다.
   - 모션을 1440×900 / 30fps / 300프레임 / 정확히 10.000초 규격으로 다시 만들었다.
     이전 파일은 1280×720 / 222프레임 / 7.4초로 규격을 어기고 있었다.
   ========================================================================== */

:root {
  --camp-night: #0e476c;   /* 승인 시그니춰 실측 */
  --camp-deep: #0e476c;    /* 측정값 없음 — 마크 감청으로 통일 */
  --camp-teal: #007b8a;    /* 승인 시그니춰 실측 */
  --camp-ember: #ea5805;   /* 캐릭터 불꽃 실측 */
  --camp-paper: #ffffff;   /* 자산에 따뜻한 종이 없음 */
  --camp-ink: #0e476c;     /* 마크가 글자에 쓰는 색 */
  --camp-grey: #747374;    /* 태그라인 실측 */
}

body[data-campfire-project='true'] .campfire-video,
body[data-campfire-project='true'] .campfire-photo > img,
body[data-campfire-project='true'] .campfire-application > img,
body[data-campfire-project='true'] .campfire-overview > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body[data-campfire-project='true'] .campfire-scene {
  background: var(--camp-paper);
  color: var(--camp-ink);
  overflow: hidden;
  position: relative;
}

body[data-campfire-project='true'] .campfire-scene img { display: block; }

.campfire-scene-head {
  display: flex;
  justify-content: space-between;
  left: clamp(22px, 4.1vw, 70px);
  position: absolute;
  right: clamp(22px, 4.1vw, 70px);
  top: clamp(20px, 3.7vw, 62px);
  z-index: 6;
}

.campfire-scene-head span,
.campfire-direction-grid article > span,
.campfire-color-panel span,
.campfire-character-copy > span,
.campfire-signature > span {
  font-size: clamp(11px, .75vw, 13px);
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.campfire-scene-head strong {
  font-size: clamp(18px, 2vw, 36px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-align: right;
}

.campfire-directions { padding: clamp(20px, 3.7vw, 64px); }
.campfire-directions .campfire-scene-head { left: 0; position: relative; right: 0; top: 0; }
.campfire-direction-grid {
  display: grid;
  gap: clamp(10px, 1.5vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(28px, 5vw, 80px);
}

.campfire-direction-grid article {
  border-top: 1px solid rgba(23,50,69,.24);
  display: grid;
  grid-template-columns: auto 1fr;
  padding-top: clamp(9px, 1vw, 16px);
  position: relative;
}

.campfire-direction-grid article.selected::after {
  background: var(--camp-ember);
  content: '';
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: -2px;
}

.campfire-direction-grid img {
  background: #fff;
  grid-column: 1 / -1;
  height: clamp(145px, 19vw, 300px);
  margin-bottom: clamp(8px, 1vw, 15px);
  object-fit: contain;
  width: 100%;
}

.campfire-direction-grid article > span { color: var(--camp-teal); padding-top: .35em; }
.campfire-direction-grid h3 {
  font-size: clamp(16px, 1.55vw, 27px);
  font-weight: 400;
  justify-self: end;
  letter-spacing: -.04em;
  margin: 0;
  text-align: right;
}

.campfire-gather { background: var(--camp-deep) !important; color: #fff !important; }
.campfire-gather-stage {
  height: clamp(240px, 32vw, 510px);
  left: 50%;
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 67vw, 1040px);
}

.campfire-gather .shelter {
  animation: campShelter 5.2s cubic-bezier(.2,.78,.23,1) infinite;
  background: rgba(201,225,226,.78);
  height: 4px;
  position: absolute;
  top: 50%;
  width: 48%;
}
.campfire-gather .shelter-left { left: 3%; transform: rotate(35deg); transform-origin: right center; }
.campfire-gather .shelter-right { right: 3%; transform: rotate(-35deg); transform-origin: left center; }
.campfire-gather .dot {
  animation: campGather 5.2s cubic-bezier(.22,.78,.26,1) infinite;
  background: #ffc05e;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255,154,41,.68);
  height: 9px;
  left: var(--start-x);
  position: absolute;
  top: var(--start-y);
  transform: translate(-50%, -50%);
  width: 9px;
}
.campfire-gather .dot-1 { --start-x: 3%; --start-y: 65%; --end-x: 39%; --end-y: 58%; }
.campfire-gather .dot-2 { --start-x: 10%; --start-y: 54%; --end-x: 44%; --end-y: 64%; animation-delay: .08s; }
.campfire-gather .dot-3 { --start-x: 18%; --start-y: 44%; --end-x: 48%; --end-y: 55%; animation-delay: .16s; }
.campfire-gather .dot-4 { --start-x: 97%; --start-y: 65%; --end-x: 61%; --end-y: 58%; }
.campfire-gather .dot-5 { --start-x: 90%; --start-y: 54%; --end-x: 56%; --end-y: 64%; animation-delay: .08s; }
.campfire-gather .dot-6 { --start-x: 82%; --start-y: 44%; --end-x: 52%; --end-y: 55%; animation-delay: .16s; }
.campfire-gather .ember {
  animation: campEmber 5.2s ease infinite;
  background: var(--camp-ember);
  border-radius: 50%;
  box-shadow: 0 0 70px 32px rgba(255,154,41,.26);
  height: 17px;
  left: 50%;
  position: absolute;
  top: 62%;
  transform: translate(-50%, -50%);
  width: 17px;
}
.campfire-gather > p,
.campfire-overview > p {
  bottom: 6%;
  font-size: clamp(8px, .72vw, 12px);
  left: 0;
  letter-spacing: .16em;
  position: absolute;
  right: 0;
  text-align: center;
}

.campfire-structure-stage {
  height: clamp(250px, 36vw, 540px);
  left: 50%;
  position: absolute;
  top: 61%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 62vw, 930px);
}
.campfire-structure-stage img { height: 100%; object-fit: contain; width: 100%; }
.campfire-structure-stage .note {
  color: var(--camp-teal);
  font-size: clamp(7px, .68vw, 11px);
  letter-spacing: .13em;
  position: absolute;
}
.campfire-structure-stage .note::before { background: currentColor; content: ''; height: 1px; position: absolute; width: 54px; }
.campfire-structure-stage .peak { left: 48%; top: 2%; }
.campfire-structure-stage .peak::before { left: -62px; top: .55em; }
.campfire-structure-stage .forest { left: 7%; top: 26%; }
.campfire-structure-stage .forest::before { right: -62px; top: .55em; }
.campfire-structure-stage .wall { right: 6%; top: 60%; }
.campfire-structure-stage .wall::before { left: -62px; top: .55em; }
.campfire-structure-stage .fire { bottom: 10%; left: 51%; }
.campfire-structure-stage .fire::before { left: -62px; top: .55em; }

.campfire-photo::after { background: linear-gradient(90deg, rgba(7,31,44,.62), transparent 66%); content: ''; inset: 0; position: absolute; }
.campfire-photo-caption { bottom: 9%; color: #fff; left: 6%; position: absolute; z-index: 6; }
.campfire-photo-caption span { font-size: clamp(8px, .72vw, 12px); letter-spacing: .15em; }
.campfire-photo-caption strong { display: block; font-size: clamp(21px, 3vw, 52px); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; margin-top: 14px; }

.campfire-color { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.campfire-color-panel { display: flex; flex-direction: column; padding: clamp(14px, 2.2vw, 36px); }
.campfire-color-panel.night { background: var(--camp-night); color: #fff; }
.campfire-color-panel.forest { background: var(--camp-teal); color: #fff; }
.campfire-color-panel.ember { background: var(--camp-ember); color: var(--camp-deep); }
.campfire-color-panel strong { font-size: clamp(17px, 2.1vw, 36px); font-weight: 400; letter-spacing: -.04em; line-height: 1; margin-top: auto; }
.campfire-color-panel em { font-size: 9px; font-style: normal; letter-spacing: .12em; margin-top: 14px; }

.campfire-application-shade { background: linear-gradient(180deg, transparent, rgba(7,31,44,.28)); inset: 0; position: absolute; }
.campfire-application > p { bottom: 6%; color: #fff; font-size: clamp(8px, .72vw, 12px); left: 6%; letter-spacing: .14em; position: absolute; }
.campfire-application > img { object-position: 50% 50%; }

.campfire-character { align-items: center; background: #fff !important; border: 1px solid rgba(14,71,108,.14); box-shadow: 0 6px 20px rgba(14,71,108,.07); display: grid; grid-template-columns: .78fr 1.22fr; padding: clamp(24px, 5vw, 80px); }
.campfire-character-copy { max-width: 420px; position: relative; z-index: 6; }
.campfire-character-copy > span { color: var(--camp-teal); }
.campfire-character-copy strong { display: block; font-size: clamp(25px, 3vw, 52px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; margin-top: 20px; }
.campfire-character-copy p { font-size: clamp(11px, 1vw, 16px); line-height: 1.45; margin-top: 26px; }
.campfire-character > img { height: 92%; justify-self: end; max-width: 100%; object-fit: contain; width: 100%; }

.campfire-overview > img { object-position: 50% 45%; }
.campfire-overview::after { background: linear-gradient(180deg, transparent 58%, rgba(7,31,44,.55)); content: ''; inset: 0; position: absolute; }
.campfire-overview > p { color: #fff; z-index: 6; }

.campfire-signature { align-items: center; display: flex; flex-direction: column; justify-content: center; }
.campfire-signature > span { margin-bottom: 4%; }
.campfire-signature > img { max-height: 62%; max-width: 68%; width: auto; }
.campfire-signature > p { bottom: 7%; font-size: clamp(9px, .8vw, 13px); letter-spacing: .16em; position: absolute; }

body[data-campfire-project='true'] .case__study__info__left { display: grid; gap: var(--pd2); grid-column: 1 / 2; grid-template-columns: 1fr 1fr; }
body[data-campfire-project='true'] .case__study__info__project__information { grid-column: 1 / -1; }
body[data-campfire-project='true'] .case__study__info__right { display: flex; flex-flow: column; grid-column: 2 / -1; row-gap: var(--pd2); }
body[data-campfire-project='true'] .case__study__info h2 { color: var(--color-gray50); margin-bottom: 8px; }
body[data-campfire-project='true'] .case__study__info h2:not(:first-child) { margin-top: 32px; }
body[data-campfire-project='true'] .case__study__info p:not(:last-child) { margin-bottom: 12px; }

@keyframes campGather {
  0%, 8% { left: var(--start-x); opacity: 0; top: var(--start-y); }
  15% { opacity: 1; }
  45%, 77% { left: var(--end-x); opacity: 1; top: var(--end-y); }
  90%, 100% { left: var(--end-x); opacity: 0; top: var(--end-y); }
}
@keyframes campShelter { 0%, 16% { opacity: 0; width: 0; } 44%, 78% { opacity: .8; width: 48%; } 92%, 100% { opacity: 0; } }
@keyframes campEmber { 0%, 34% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 52%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 92%, 100% { opacity: 0; } }

@media (max-width: 1024px) {
  body[data-campfire-project='true'] .case__study__info__left,
  body[data-campfire-project='true'] .case__study__info__right { grid-column: 1 / -1; }
}

@media (max-width: 656px) {
  body[data-campfire-project='true'] .campfire-directions { aspect-ratio: auto !important; min-height: 330px; }
  body[data-campfire-project='true'] .campfire-gather,
  body[data-campfire-project='true'] .campfire-structure,
  body[data-campfire-project='true'] .campfire-character,
  body[data-campfire-project='true'] .campfire-signature { aspect-ratio: auto !important; min-height: 410px; }
  .campfire-scene-head strong { max-width: 63%; }
  .campfire-directions .campfire-scene-head { display: block; }
  .campfire-directions .campfire-scene-head strong { display: block; font-size: 25px; margin-top: 18px; max-width: none; text-align: left; }
  .campfire-direction-grid { gap: 9px; margin-top: 28px; }
  .campfire-direction-grid img { height: 130px; }
  .campfire-direction-grid article { display: block; }
  .campfire-direction-grid article > span { display: block; font-size: 7px; }
  .campfire-direction-grid h3 { font-size: 12px; margin-top: 7px; text-align: left; }
  .campfire-gather-stage { top: 60%; width: 92%; }
  .campfire-structure-stage { top: 62%; width: 94%; }
  .campfire-structure-stage .note { display: none; }
  .campfire-color-panel { padding: 13px; }
  .campfire-color-panel span { font-size: 6px; }
  .campfire-color-panel strong { font-size: 16px; }
  .campfire-color-panel em { font-size: 6px; }
  .campfire-photo-caption strong { font-size: 23px; }
  .campfire-character { grid-template-columns: 1fr; padding: 28px; }
  .campfire-character-copy p { margin-top: 16px; }
  .campfire-character > img { height: 190px; margin-top: 18px; }
  .campfire-signature > img { max-width: 88%; }
  body[data-campfire-project='true'] .case__study__info__left { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .campfire-gather .shelter,
  .campfire-gather .dot,
  .campfire-gather .ember { animation: none; opacity: .8; }
  .campfire-gather .dot { left: var(--end-x); top: var(--end-y); }
}

/* 모션은 1440×900 이다. 껍데기의 .page__card 는 16/9 라 object-fit:cover 가 위아래를 각 45줄
   (높이의 10%) 잘라냈다. **모션이 든 카드에만** 영상 비율을 돌려준다 — 다른 카드는 건드리지 않는다. */
body[data-campfire-project="true"] .page__card:has(> video) { aspect-ratio: 1440 / 900 !important; }  /* 카드에 style="aspect-ratio:16/9" 가 인라인으로 박혀 있어 !important 가 없으면 안 먹는다 */

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/campfire-case-assets/route-01-r2.jpg"],
img[src$="/campfire-case-assets/route-02-r2.jpg"],
img[src$="/campfire-case-assets/route-03-r2.jpg"] { aspect-ratio: 3/2; }
img[src$="/campfire-case-assets/architecture-sign.jpg"],
img[src$="/campfire-case-assets/architecture-overview-r2.webp"] { aspect-ratio: 800/569; }
img[src$="/campfire-case-assets/campfire-nav-symbol-r2.png"] { aspect-ratio: 210/331; }
img[src$="/campfire-case-assets/campfire-symbol-final.png"] { aspect-ratio: 1583/650; }
img[src$="/campfire-case-assets/camp-night-r2.webp"] { aspect-ratio: 16/9; }
img[src$="/campfire-case-assets/campfire-logo-character.svg"] { aspect-ratio: 1123/794; }
img[src$="/campfire-case-assets/campfire-signature-final-r2.png"] { aspect-ratio: 2532/1766; }