/* 별짓 포트폴리오 — styles/ 에서 자동으로 묶은 파일입니다. 직접 고치지 마세요. */

/* ===== 00-tokens.css ===== */
/* 디자인 값 — 브랜드 가이드라인 v0.1 기준. 색·글꼴·간격·속도는 여기서 바꾸면 전체에 반영 */
:root {
  --bj-yellow: #FFD43B;
  --bj-ink: #202124;
  --bj-paper: #F7F5EF;
  --bj-gray: #666866;
  --bg: #FFFFFF;           /* 웹 기본 배경 — 페이퍼 화이트 대신 화이트 */
  --shade: #ECECE9;        /* 그라디언트 그늘 */
  --line: rgba(32, 33, 36, 0.14);
  --ph: #F1F1EF;
  --ph-line: rgba(32, 33, 36, 0.08);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0 0 0 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.1 0 0 0 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ink-deep: radial-gradient(110% 140% at 12% 0%, #303136 0%, #202124 42%, #141517 100%);
  --gutter: clamp(20px, 5.4vw, 88px);
  --ease: cubic-bezier(0.78, 0, 0.18, 1); /* Easy Ease 약 80% — '쫀득한' 결 */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --en-display: "Archivo Black", "Archivo", var(--kr);
  --en: "Archivo", var(--kr);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===== 01-base.css ===== */
/* 기본 — 초기화, 본문, 질감, 글자 스타일 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--bj-ink);
  font: 400 17px/1.65 var(--kr); letter-spacing: -0.005em;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* hidden 속성은 레이아웃 스타일보다 우선 */
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--bj-yellow); color: var(--bj-ink); }
:focus-visible { outline: 2px solid var(--bj-ink); outline-offset: 3px; }

/* 질감: 화면 전체에 아주 옅은 그레인 */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--grain); background-size: 220px; opacity: .09; mix-blend-mode: multiply; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--bj-ink); color: var(--bj-paper); padding: 8px 14px; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 글자 ---------- */
.label {
  font: 600 12px/1.2 var(--en); letter-spacing: 0.06em; text-transform: uppercase;
}
.muted { color: var(--bj-gray); }
.small { font-size: 14px; line-height: 1.55; }
.h-section { margin: 14px 0 0; font: 800 clamp(22px, 2vw, 28px)/1.3 var(--kr); letter-spacing: -0.02em; }
.h-page { margin: 14px 0 0; font: 900 clamp(52px, 7vw, 120px)/1 var(--kr); letter-spacing: -0.035em; }
.text-link { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: gap .4s var(--ease); }
.text-link:hover { gap: 14px; }

/* 글자 크기·헤더 — 좁은 화면 */
@media (max-width: 640px) {
  body { font-size: 16px; }
}

/* ===== 02-buttons.css ===== */
/* ---------- 버튼 ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border: 1.5px solid var(--bj-ink);
  font: 700 16px/1 var(--kr); letter-spacing: -0.01em; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-ink { background: var(--bj-ink); color: var(--bj-paper); }
.btn-ink:hover { background: transparent; color: var(--bj-ink); }
.btn-line { background: transparent; color: var(--bj-ink); }
.btn-line:hover { background: var(--bj-ink); color: var(--bj-paper); }
.btn-yellow { background: var(--bj-yellow); border-color: var(--bj-yellow); color: var(--bj-ink); }
.btn-yellow:hover { background: #FFFFFF; border-color: #FFFFFF; }
body:not(.is-home) .btn-yellow:hover, .inquiry .btn-yellow:hover { background: var(--bj-ink); border-color: var(--bj-ink); color: #FFFFFF; }
.btn-line-paper { background: transparent; border-color: rgba(247, 245, 239, .5); color: var(--bj-paper); font-weight: 500; }
.btn-line-paper:hover { border-color: var(--bj-paper); }

@media (max-width: 640px) {
  .btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
}

/* ===== 03-layout.css ===== */
/* 틀 — 헤더, 구간, 왼쪽 라벨/오른쪽 본문(split), 페이지 머리, 푸터 */
/* ---------- 헤더 ---------- */
.site-header { position: relative; z-index: 10; }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 96px; }
.brand { display: inline-flex; }
.logo { height: 30px; width: auto; fill: currentColor; }
.main-nav { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.main-nav a { font: 500 16px/1 var(--kr); padding: 6px 0; border-bottom: 1.5px solid transparent; transition: border-color .3s var(--ease); }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-color: currentColor; }
.is-home .site-header { position: absolute; inset: 0 0 auto 0; }

/* 하위 페이지: 화면 맨 위부터 이어지는 옅은 그늘 (구간 경계에서 끊기지 않게 body 에 둠) */
body:not(.is-home) { background: radial-gradient(70% 640px at 0% 0%, #F1F1EF 0%, rgba(255,255,255,0) 72%) no-repeat, var(--bg); }

/* ---------- 구간 공통 ---------- */
.section { padding: clamp(80px, 12vw, 180px) 0 0; }
.split { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; gap: 32px clamp(24px, 3vw, 48px); }
.split-label { position: relative; }
.split-label .label::after { content: ""; display: block; width: 14px; height: 1.5px; background: currentColor; margin-top: 12px; }
.split-label .small { margin-top: 10px; }

/* ---------- 푸터 ---------- */
.site-footer { background: #141517; color: var(--bj-paper); padding: 56px 0 40px; border-top: 1px solid rgba(247,245,239,.14); }
.footer-grid { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: 32px; }
.footer-brand .logo { height: 34px; margin-bottom: 16px; }
.footer-col .label { margin-bottom: 12px; }
.footer-col p:not(.label) { line-height: 1.9; }
.footer-col a:hover { text-decoration: underline; }
.site-footer .muted { color: rgba(247,245,239,.55); }
.footer-copy { grid-column: 1 / -1; color: rgba(247,245,239,.55); font-size: 13px; padding-top: 32px; border-top: 1px solid rgba(247,245,239,.14); }
body:not(.is-home) .site-footer { margin-top: clamp(100px, 14vw, 200px); }

/* ---------- 페이지 머리 ---------- */
.page-head { padding: clamp(28px, 4vw, 64px) 0 0; }
.page-lead { margin-top: 28px; max-width: 36em; font-size: 18px; color: var(--bj-ink); }

/* 어두운 면(문의 띠·푸터)의 질감: 밝은 그레인 */
.cta, .site-footer { position: relative; isolation: isolate; }
.cta::before, .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain-light); background-size: 220px; opacity: .07; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .header-row { height: 72px; }
  .logo { height: 24px; }
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 15px; }
}

/* ===== 10-media.css ===== */
/* 영상(유튜브) · 이미지 자리 */
/* ---------- 영상 ---------- */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--bj-ink); overflow: hidden; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity .4s; }
.video:hover img { transform: scale(1.02); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 14px; padding: clamp(16px, 2.4vw, 32px); background: linear-gradient(to top, rgba(32,33,36,.45), rgba(32,33,36,0) 45%); border: 0; cursor: pointer; color: var(--bj-paper); }
.play-dot { width: 64px; height: 64px; border-radius: 50%; background: var(--bj-paper); display: grid; place-items: center; transition: transform .45s var(--ease); }
.play-dot svg { width: 22px; height: 22px; fill: var(--bj-ink); margin-left: 3px; }
.play:hover .play-dot { transform: scale(1.08); }
.play-text { font: 600 15px/1 var(--kr); padding-bottom: 24px; }
.video.is-playing .play, .video.is-playing img { display: none; }
.video-note { margin-top: 18px; }

/* ---------- 이미지 자리 ---------- */
.media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ph); }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph { background:
  linear-gradient(var(--ph-line), var(--ph-line)) 50% 50% / 100% 1px no-repeat,
  linear-gradient(var(--ph-line), var(--ph-line)) 50% 50% / 1px 100% no-repeat,
  linear-gradient(140deg, #F6F6F4 0%, #E9E9E6 100%); }
.ph-label { position: absolute; left: 14px; bottom: 12px; font: 400 12px/1.4 var(--mono); color: var(--bj-gray); }
.ph-label em { font-style: normal; opacity: .7; margin-left: 6px; }

@media (max-width: 640px) {
  .play-dot { width: 52px; height: 52px; }
  .play-text { padding-bottom: 18px; }
}

/* 이미지 테두리 — 흰 바탕 로고 표지도 카드 모양이 보이도록 아주 옅은 1px 선 */
.media:not(.ph)::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(32, 33, 36, 0.09); pointer-events: none; }

/* ===== 11-card.css ===== */
/* 프로젝트 카드 — 홈·작업 목록·다음 프로젝트 공통 */
/* ---------- 카드 ---------- */
.card { display: block; }
.card .media { transition: transform .8s var(--ease); }
.card:hover .media { transform: scale(0.985); }
.card-meta { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; padding-top: 16px; }
.card-no { grid-row: span 2; font: 400 15px/1.5 var(--en-display); }
.card-title { font: 700 clamp(17px, 1.3vw, 20px)/1.4 var(--kr); letter-spacing: -0.015em; }
.card-sub { color: var(--bj-gray); font-size: 14px; }
.card:not(:has(.card-no)) .card-meta { grid-template-columns: 1fr; }

/* 넓은 카드 — 한 줄의 작업이 열 수보다 적을 때 남는 칸을 채움.
   이미지는 일반 카드와 같은 한 칸 크기, 나머지 칸에 요약 · 작업 범위 · 자세히 보기 */
.card-wide { grid-column: span var(--span, 2); display: grid; grid-template-columns: repeat(var(--span, 2), minmax(0, 1fr)); column-gap: var(--cat-gap-x, 24px); align-items: start; }
.card-wide .media { grid-column: 1; }
.card-wide .card-meta { grid-column: 2 / -1; padding-top: 0; row-gap: 4px; align-content: start; }
.card-wide .card-title { font: 800 clamp(22px, 2vw, 30px)/1.3 var(--kr); letter-spacing: -0.025em; }
.card-wide .card-no { line-height: 2; }
.card-summary, .card-scope, .card-more { grid-column: 2; }
.card-summary { margin-top: 14px; font-size: 16px; line-height: 1.65; max-width: 26em; }
.card-scope { margin-top: 6px; color: var(--bj-gray); font-size: 14px; }
.card-more { justify-self: start; display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; padding-bottom: 3px; border-bottom: 1.5px solid currentColor; font: 600 15px/1.2 var(--kr); transition: gap .4s var(--ease); }
.card-wide:hover .card-more { gap: 14px; }

@media (max-width: 640px) {
  .card-wide { display: block; grid-column: auto; }
  .card-wide .card-meta { padding-top: 16px; }
  .card-wide .card-title { font: 700 clamp(17px, 1.3vw, 20px)/1.4 var(--kr); letter-spacing: -0.015em; }
  .card-wide .card-no { line-height: 1.5; }
}

/* ===== 20-home-hero.css ===== */
/* ---------- 홈: 첫 화면 ---------- */
/* 별표는 오른쪽 화면 끝에서만 잘리고, 아래로는 다음 구간까지 자연스럽게 이어짐 (수평으로 잘리는 선이 생기지 않게) */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; overflow: clip visible; display: flex;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 72%, var(--bg) 100%),
    radial-gradient(70% 80% at 100% 100%, rgba(236,236,233,.9) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(60% 70% at 0% 0%, #F4F4F2 0%, rgba(255,255,255,0) 70%),
    var(--bg); }
.hero-star {
  position: absolute; z-index: 0; overflow: visible;
  width: min(66vw, 118vh); right: max(-17vw, -30vh); bottom: max(-30vw, -52vh);
  transform: rotate(0deg);
}
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding-top: clamp(150px, 24vh, 240px); padding-bottom: clamp(36px, 6vh, 64px); }
.hero-slogan {
  margin: 0; font: 900 clamp(54px, 9.4vw, 172px)/1.04 var(--kr); letter-spacing: -0.032em;
}
.hero-slogan span { display: block; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 48px; }
.hero-copy .label { margin-bottom: 14px; }
.hero-sub { font: 500 clamp(16px, 1.2vw, 19px)/1.6 var(--kr); margin-bottom: 26px; }
.hero-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.hero-aside-text { font: 800 clamp(20px, 1.75vw, 28px)/1.35 var(--kr); letter-spacing: -0.025em; }
.hero-aside-more { display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; font: 600 15px/1 var(--kr); border-bottom: 1.5px solid currentColor; padding-bottom: 4px; }
.hero-aside .arrow { display: inline-block; transition: transform .5s var(--ease); }
.hero-aside:hover .arrow { transform: translateY(4px); }

@media (max-width: 640px) {
  .hero-inner { padding-top: 128px; padding-bottom: 56vw; justify-content: flex-start; }
  .hero-slogan { font-size: clamp(44px, 14.2vw, 72px); }
  .hero-star { width: 96vw; right: -26vw; bottom: -22vw; }
  .hero-foot { flex-direction: column; align-items: flex-start; margin-top: 40px; }
  .hero-sub br { display: none; }
  .hero-aside { display: none; }
}

/* ---------- 첫 화면 키비주얼 등장 연출 (새로 열거나 새로고침할 때 한 번) ----------
   전체: 크기 50% → 100%, 회전 -120° → 0°  (1.2초)
   동시에 별을 이루는 굵은 선 6개가 0.1초 간격으로 중앙에서 바깥으로 뻗어 나옴 (위 → 시계 방향)
   값은 아래 변수에서 바꿈 */
.hero-star {
  --star-duration: 1.2s;
  --star-from-scale: 0.5;
  --star-from-rotate: -120deg;
  --arm-step: 0.1s;       /* 선 사이 간격 */
  --arm-duration: 0.7s;   /* 선 하나가 다 뻗는 시간 (마지막 선: 0.5s + 0.7s = 1.2s 에 끝남) */
  transform-origin: var(--star-cx, 50%) var(--star-cy, 50%);
  animation: star-in var(--star-duration) var(--ease) both;
}
.hero-star .arm {
  stroke: var(--bj-yellow);
  stroke-dasharray: 1 1;          /* pathLength="1" 이라 1 = 선 전체 길이 */
  stroke-dashoffset: 1;
  animation: arm-grow var(--arm-duration) var(--ease-out) calc(var(--i) * var(--arm-step)) forwards;
}
@keyframes star-in {
  from { transform: rotate(var(--star-from-rotate)) scale(var(--star-from-scale)); }
  to   { transform: none; }
}
@keyframes arm-grow { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-star { animation: none; }
  .hero-star .arm { animation: none; stroke-dashoffset: 0; }
}

/* ===== 21-home-featured.css ===== */
/* ---------- 홈: 대표 작업 — 분류별 한 줄씩 ----------
   [ 분류 이름 · 설명 · 전체 보기 ] [ 카드 ][ 카드 ]
   카드 크기는 모든 분류에서 같고, 열 수는 --cat-cols 로 정함 */
.featured {
  --cat-cols: var(--cat-cols-config, 2);       /* 열 수 — site.json home.featured.columns */
  --cat-gap-x: clamp(16px, 1.8vw, 28px);       /* 카드 사이 가로 간격 (넓은 카드도 같은 값을 써서 이미지 크기가 같아짐) */
}
.featured-head { align-items: end; }
.featured-head-body { display: flex; justify-content: flex-end; align-items: flex-end; }
.featured-groups { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-direction: column; gap: clamp(56px, 6vw, 96px); }

.cat-row { position: relative; padding-top: clamp(24px, 2.4vw, 32px); }
.cat-row::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1.5px; background: var(--bj-ink); }

.cat-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cat-en { font: 600 12px/1.2 var(--en); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bj-gray); }
.cat-name { margin: 0; font: 800 clamp(24px, 2.2vw, 32px)/1.25 var(--kr); letter-spacing: -0.025em; }
.cat-desc { color: var(--bj-gray); font-size: 15px; line-height: 1.55; max-width: 15em; }
.cat-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding-bottom: 3px; border-bottom: 1.5px solid currentColor; font: 600 15px/1.2 var(--kr); transition: gap .4s var(--ease); }
.cat-more:hover { gap: 12px; }
.cat-count { font: 400 12px/1 var(--en-display); }

.cat-grid { display: grid; grid-template-columns: repeat(var(--cat-cols), minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--cat-gap-x); align-content: start; }

@media (max-width: 900px) {
  .cat-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
  .cat-en { width: 100%; }
  .cat-desc { max-width: none; flex: 1 1 12em; }
  .cat-more { margin-top: 0; }
}
@media (max-width: 640px) {
  .featured { --cat-cols: 1; }
  .featured-head-body { justify-content: flex-start; }
}

/* ===== 22-services.css ===== */
/* ---------- 함께할 수 있는 작업 ---------- */
.section.services { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #F6F6F4 55%, rgba(255,255,255,0) 100%); padding-bottom: clamp(60px, 8vw, 120px); }
.service-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--bj-ink); }
.service-list li { display: grid; grid-template-columns: 64px minmax(200px, 5fr) 6fr; gap: 12px 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.svc-no { font: 400 15px/1.3 var(--en-display); }
.svc-desc { line-height: 1.6; }
.svc-title { font: 800 clamp(20px, 1.9vw, 28px)/1.3 var(--kr); letter-spacing: -0.02em; }
.svc-desc { color: var(--bj-gray); font-size: 16px; }

@media (max-width: 900px) {
  .service-list li { grid-template-columns: 44px 1fr; }
  .svc-desc { grid-column: 2; }
}

/* ===== 23-cta.css ===== */
/* ---------- 문의 띠 ---------- */
.cta { margin-top: clamp(100px, 14vw, 200px); padding: clamp(80px, 10vw, 150px) 0; background: var(--ink-deep); color: var(--bj-paper); }
.cta-title { margin: 22px 0 24px; font: 900 clamp(40px, 6vw, 96px)/1.1 var(--kr); letter-spacing: -0.035em; }
.cta-lead { max-width: 34em; color: rgba(247,245,239,.75); margin-bottom: 36px; font-size: 18px; }

/* ===== 30-works.css ===== */
/* ---------- 작업 목록 ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: clamp(32px, 3.6vw, 56px); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.filters button { background: none; border: 0; padding: 6px 0; cursor: pointer; font: 600 17px/1.2 var(--kr); color: var(--bj-gray); border-bottom: 1.5px solid transparent; transition: color .3s, border-color .3s var(--ease); }
.filters button sup { font: 500 11px/1 var(--en); margin-left: 2px; vertical-align: super; }
.filters button[aria-selected="true"], .filters button:hover { color: var(--bj-ink); border-color: var(--bj-ink); }
.work-grid-wrap { padding-top: clamp(40px, 5vw, 72px); }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(20px, 2.4vw, 40px); row-gap: clamp(56px, 6vw, 100px); }
.work-grid .card[hidden] { display: none; }

@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; row-gap: 48px; }
}

/* ===== 31-project.css ===== */
/* ---------- 프로젝트 상세 ---------- */
.project-head { padding: clamp(28px, 4vw, 64px) 0 clamp(40px, 5vw, 72px); }
.project-kicker { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.project-kicker .back { font-weight: 500; border-bottom-width: 1px; }
.project-kicker .sep { color: var(--bj-gray); }
.project-title-row { margin-top: clamp(36px, 5vw, 64px); }
.project-no { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/1 var(--en-display); letter-spacing: 0.02em; }
.no-star { width: 22px; height: auto; fill: var(--bj-ink); }
.h-project { margin: 18px 0 0; font: 900 clamp(40px, 6.4vw, 112px)/1.06 var(--kr); letter-spacing: -0.035em; max-width: 14em; }
.project-summary { margin-top: 22px; font: 500 clamp(18px, 1.5vw, 22px)/1.55 var(--kr); max-width: 34em; }
.project-cover { padding: 0 var(--gutter); max-width: 1680px; margin: 0 auto; }
.facts { padding-top: 0; }
.facts dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-bottom: 1px solid var(--line); }
.facts dl > div { padding: 22px 24px 24px 0; }
.facts dt { color: var(--bj-gray); margin-bottom: 10px; }
.facts dd { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.5; }
.project-section, .project-film { padding-top: clamp(72px, 9vw, 140px); }
.project-film .wrap { max-width: 1680px; }
.project-intro p { font: 500 clamp(19px, 1.6vw, 24px)/1.6 var(--kr); letter-spacing: -0.015em; max-width: 30em; }
.project-intro p + p { margin-top: 0.6em; }
.next { padding-top: clamp(100px, 12vw, 180px); }
.next-card .card-title { font: 900 clamp(26px, 3vw, 44px)/1.15 var(--kr); letter-spacing: -0.035em; }

@media (max-width: 640px) {
  .facts dl { grid-template-columns: 1fr; }
  .facts dl > div { padding: 16px 0; border-top: 1px solid var(--line); }
  .facts dt { margin-bottom: 6px; }
}

/* ===== 32-about.css ===== */
/* ---------- 소개 ---------- */
.about-body { max-width: 860px; }
.about-body p + p { margin-top: 1.1em; }
.about-lead { font: 800 clamp(24px, 2.6vw, 38px)/1.4 var(--kr); letter-spacing: -0.03em; }
.attitude { margin-top: 2em !important; font: 900 clamp(28px, 3.4vw, 52px)/1.2 var(--kr); letter-spacing: -0.04em; }
.attitude span { display: block; }
.attitude span:last-child { color: var(--bj-gray); }

/* ===== 33-contact.css ===== */
/* ---------- 문의 폼 ---------- */
.direct { margin-top: 18px; font-weight: 600; line-height: 1.9; }
.direct a { border-bottom: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 24px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field.wide { grid-column: 1 / -1; }
.field label { font: 700 15px/1.3 var(--kr); }
.req { font: 600 11px/1 var(--en); color: var(--bj-gray); margin-left: 6px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid rgba(32,33,36,.22); background: #FFFFFF; border-radius: 0;
  padding: 15px 16px; font-size: 16px; line-height: 1.4; transition: border-color .25s;
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--bj-ink) 50%), linear-gradient(135deg, var(--bj-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: #8d8f8c; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bj-ink); }
.field.invalid input, .field.invalid select { border-color: #B3261E; }
.field-custom { margin-top: -2px; animation: field-open .35s var(--ease-out); }
@keyframes field-open { from { opacity: 0; transform: translateY(-6px); } }
.form-error { margin-top: 18px; color: #B3261E; font-weight: 600; font-size: 15px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.form-foot .btn { min-width: 200px; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* 스팸 방지 칸 — 화면에서 숨김 (display:none 이면 일부 스팸 봇이 건너뛰므로 화면 밖으로 보냄) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry { position: relative; }
.inquiry.is-busy .form-grid { opacity: .55; pointer-events: none; transition: opacity .3s; }
.btn[disabled] { cursor: progress; opacity: .7; }

/* 전송 상태 — 보내는 중 · 완료 · 실패 */
.form-status { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--line); border-left: 4px solid var(--bj-ink); background: #fff; }
.form-status[data-state="success"], .form-status[data-state="mailOpened"] { border-left-color: var(--bj-yellow); }
.form-status[data-state="error"] { border-left-color: #B3261E; }
.form-status-text { font-weight: 600; line-height: 1.6; }
.form-status-actions { margin-top: 16px; }

/* ===== 40-motion.css ===== */
/* ---------- 단순한 페이드 ---------- */
.reveal-load { opacity: 0; transform: translateY(24px); animation: rise 1.1s var(--ease) forwards; }
.reveal-load.d2 { animation-delay: .18s; }
.reveal-load.d3 { animation-delay: .32s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
/* 스크립트가 실제로 동작할 때만(html.reveal-on) 숨겼다가 나타나게 함 — 스크립트가 막혀도 내용은 그대로 보임 */
.reveal-on .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-on .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-load { animation: none; opacity: 1; transform: none; }
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===== 41-scroll-effects.css ===== */
/* =========================================================
   스크롤 연출 3곳 — 자바스크립트가 켜질 때만 동작 (html.fx)
   ========================================================= */

/* ---------- 연출 1: 홈 쇼릴이 화면 가득 커짐 ---------- */
.reel-scroll { position: relative; padding-top: clamp(80px, 12vw, 180px); }
.fx .reel-scroll { height: 240vh; padding-top: 0; margin-top: max(clamp(40px, 6vw, 90px), calc(min(30vw, 52vh) * 0.75)); }
.reel-scroll { margin-top: calc(min(30vw, 52vh) * 0.4); }
.fx .reel-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.reel-bg { display: none; }
.fx .reel-bg { display: block; position: absolute; inset: 0; background: var(--ink-deep); clip-path: inset(50% 50% 50% 50%); will-change: clip-path; }
.fx .reel-stage > .wrap { position: static; }
.fx .reel-slot { aspect-ratio: 16 / 9; }
.fx .reel-frame { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; will-change: transform; }
.fx .reel-frame .video { width: 100%; height: 100%; aspect-ratio: auto; }
.reel-label { transition: none; }

/* ---------- 연출 2: 카드 이미지 → 상세 첫 화면 ---------- */
@view-transition { navigation: auto; }
.project-cover .media { view-transition-name: project-cover; }
.site-header { view-transition-name: site-header; }
::view-transition-group(project-cover) { animation-duration: .85s; animation-timing-function: cubic-bezier(0.78, 0, 0.18, 1); z-index: 5; }
::view-transition-old(project-cover), ::view-transition-new(project-cover) { animation-duration: .85s; height: 100%; object-fit: cover; }
::view-transition-old(root) { animation: vt-out .45s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(0.2, 0.8, 0.2, 1) .25s both; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- 연출 3: 상세 영상이 중앙에 고정되며 재생 ---------- */
.fx .film-scroll { height: 230vh; padding-top: clamp(40px, 5vw, 80px); }
.fx .film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.film-dim { display: none; }
.fx .film-dim { display: block; position: absolute; inset: 0 calc(50% - 50vw); background: var(--ink-deep); opacity: 0; pointer-events: none; will-change: opacity; }
.fx .film-stage > .wrap { position: relative; }
.fx .film-slot { position: relative; }
.fx .film-slot .video { transform-origin: 0 0; will-change: transform; }
.film-hint { display: none; }
.fx .film-hint { display: block; position: absolute; left: 0; right: 0; top: 100%; margin-top: 18px; text-align: center; font-size: 14px; color: rgba(247,245,239,.7); opacity: 0; pointer-events: none; }
.fx .film-after { margin-top: -18vh; position: relative; }
.film-after .video-note { margin-top: 0; }

@media (max-width: 640px) {
  .fx .reel-scroll { height: 190vh; margin-top: 10vw; }
  .fx .reel-stage { align-items: flex-start; padding-top: 16vh; }
  .fx .film-scroll { height: 200vh; }
  .fx .film-hint { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}