/* =========================================================
   타이포그래피 시스템 + 스플릿 레이아웃
   ---------------------------------------------------------
   역할        폰트                 크기 (모바일 → 데스크톱)   굵기  행간  자간
   Display     프리텐다드           34 → 64px                700   1.18  -0.035em   섹션 대제목 (회사 소개, 기업비전, 사업 문의)
   Title       프리텐다드           24 → 36px                700   1.30  -0.03em    첫 화면 "준비 중" 문구
   Lead        프리텐다드           19 → 23px                600   1.60  -0.02em    섹션 첫 문단, 브랜드 한 줄 소개, 맺음말
   Body        IBM Plex Sans KR     16 → 17px                400   1.90  -0.01em    본문
   Label       프리텐다드           14px                     600   1.40  0          섹션 이름 (■ 회사 소개)
   Small       프리텐다드           13.5px                   500   1.60  0          폼 라벨, 보조 정보
   규칙: 한 섹션 = [라벨 + 대제목] 전체 폭 → 그 아래 오른쪽 7칸에 [Lead → Body → (맺음말)], 왼쪽 5칸은 보조 정보·이미지
         라벨→대제목 20px, 대제목→본문 64px, 문단 사이 28px, 섹션 위아래 여백 동일
   ========================================================= */
:root {
  --fs-display: clamp(34px, 4.4vw, 64px);
  --fs-title:   clamp(24px, 2.6vw, 36px);
  --fs-lead:    clamp(19px, 1.55vw, 23px);
  --fs-body:    clamp(16px, 1.1vw, 17px);
  --fs-label:   14px;
  --fs-small:   13.5px;
  --section-y:  clamp(112px, 13vw, 176px);
  --para-gap:   28px;
}
[data-layout="b"] { --body: "IBM Plex Sans KR", var(--pretendard); }

/* ---------- 역할별 스타일 ---------- */
.label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 20px;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.4; color: rgba(255,255,255,.7);
}
.label::before { content: ""; width: 8px; height: 8px; background: currentColor; flex-shrink: 0; }
.display { margin: 0; font-family: var(--head); font-size: var(--fs-display); font-weight: 700; line-height: 1.18; letter-spacing: -0.035em; white-space: pre-line; }
.lead { margin: 0; font-family: var(--head); font-size: var(--fs-lead); font-weight: 600; line-height: 1.6; letter-spacing: -0.02em; }
.body-text { margin: 0; font-family: var(--body); font-size: var(--fs-body); line-height: 1.9; color: rgba(255,255,255,.78); }

/* 문단 묶음: 첫 문단 = Lead, 나머지 = Body, (copy--closing) 마지막 = 맺음말 */
.copy p { margin: 0 0 var(--para-gap); font-family: var(--body); font-size: var(--fs-body); line-height: 1.9; letter-spacing: -0.01em; color: rgba(255,255,255,.78); white-space: pre-line; }
.copy p:first-child { font-family: var(--head); font-size: var(--fs-lead); font-weight: 600; line-height: 1.6; letter-spacing: -0.02em; color: var(--white); margin-bottom: calc(var(--para-gap) + 8px); }
.copy p:last-child { margin-bottom: 0; }
.copy--closing p:last-child:not(:first-child) {
  margin-top: calc(var(--para-gap) + 12px); padding-top: var(--para-gap); border-top: 1px solid rgba(255,255,255,.28);
  font-family: var(--head); font-size: var(--fs-lead); font-weight: 600; line-height: 1.6; letter-spacing: -0.02em; color: var(--white);
}

/* ---------- 스플릿 레이아웃 ---------- */
.about, .vision, .brand, .contact { padding: var(--section-y) 0; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.split-head { display: contents; }
.split .label, .split .display, .split .brand-logo, .split .brand-tagline { grid-column: 1 / -1; }
.split .display, .split .brand-tagline { margin-bottom: clamp(48px, 5.5vw, 72px); }
.split .brand-logo + .brand-tagline { margin-top: 24px; }
.split-body { grid-column: 2; }
.split-body.copy, .split-body > .copy { max-width: 680px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 기업비전: 대제목 바로 아래 빛의 궤적 띠 (제목 아랫부분에 살짝 겹쳐 빛이 글자를 받치는 구도) */
.vision-heading { position: relative; z-index: 1; }
.vision .city-band { margin: calc(clamp(20px, 3vw, 40px) * -1) 0 clamp(56px, 7vw, 96px); }

/* =========================================================
   무딧: 오른쪽 위 렌즈에서 은은하게 번져 나오는 프로젝터 빛
   - 빛 색은 --br/--bgc/--bb 로 정하고, 배경 필름을 고르면 그 무드의 색으로 천천히 바뀜
   ========================================================= */
@property --br  { syntax: '<number>'; inherits: true; initial-value: 255; }
@property --bgc { syntax: '<number>'; inherits: true; initial-value: 244; }
@property --bb  { syntax: '<number>'; inherits: true; initial-value: 228; }
.scene--moodit {
  --br: 255; --bgc: 244; --bb: 228;
  transition: --br 1.2s ease, --bgc 1.2s ease, --bb 1.2s ease;
  background: linear-gradient(180deg, #1A1929 0, #08080C 220px, #050507 100%); color: #fff;
}
.scene--moodit .scene-bg::before { content: ""; position: absolute; inset: 0 0 auto; height: 200px; background: linear-gradient(180deg, #1A1929, rgba(26,25,41,0)); }
.scene--moodit .scene-bg::after { opacity: .16; z-index: 3; }
.pj-beam {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 82% -2%,
    transparent 199deg,
    rgba(var(--br), var(--bgc), var(--bb), .2) 213deg,
    rgba(var(--br), var(--bgc), var(--bb), .32) 220deg,
    rgba(var(--br), var(--bgc), var(--bb), .2) 227deg,
    transparent 241deg);
  filter: blur(50px);
  -webkit-mask-image: radial-gradient(circle at 82% -2%, #000 0, rgba(0,0,0,.55) 45%, transparent 92%);
          mask-image: radial-gradient(circle at 82% -2%, #000 0, rgba(0,0,0,.55) 45%, transparent 92%);
  animation: pj-breathe 9s ease-in-out infinite alternate;
}
.pj-src { position: absolute; inset: 0; background: radial-gradient(280px 210px at 82% 0, rgba(var(--br), var(--bgc), var(--bb), .7), transparent 70%); animation: pj-breathe 9s ease-in-out infinite alternate; }
.pj-floor { position: absolute; inset: 0; background: radial-gradient(38% 9% at 38% 100%, rgba(var(--br), var(--bgc), var(--bb), .12), transparent 70%); }
@keyframes pj-breathe { from { opacity: .82; } to { opacity: 1; } }
.pj-dust { position: absolute; inset: 0; }
.pj-dust i { position: absolute; border-radius: 50%; background: rgb(var(--br), var(--bgc), var(--bb)); opacity: var(--o); filter: blur(2.5px); animation: pj-float var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes pj-float { to { transform: translate(-26px, 34px); } }

.brand .label { color: rgba(255,255,255,.7); }
.brand .label::before { background: #007DFF; }
.brand-logo { margin: 0; }
.brand-logo img { width: min(100%, 440px); height: auto; }
.brand-tagline { margin-top: 24px; color: #fff; }
.brand-tagline > span { display: block; }
.brand-tagline-ko { color: rgba(232,227,227,.7); }

/* 본문 (밝은 배경용 색) */
.brand .copy p { color: rgba(255,255,255,.78); }
.brand .copy p:first-child { color: #fff; }
.brand .split-body .btn { margin: 0 8px 10px 0; }
.brand-link, .brand-popup { display: inline-flex; align-items: center; gap: 10px; }
.brand-link svg, .brand-popup svg { width: 14px; height: 14px; }
.btn-outline-dark { background: transparent; color: #0A0A0A; border-color: #0A0A0A; }
.btn-outline-dark:hover { background: #0A0A0A; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 사업 문의 (흰 배경): 왼쪽 연락처, 오른쪽 폼 */
.contact .label { color: var(--grey-l); }
.contact .body-text, .contact .direct { grid-column: 1; }
.contact .body-text { grid-row: 3; margin: 0; color: var(--grey-l); max-width: 36ch; }
.contact .direct { grid-row: 4; }
.contact .form { grid-column: 2; grid-row: 3 / span 3; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-body, .contact .body-text, .contact .direct, .contact .form { grid-column: 1; grid-row: auto; }
  .contact .form { margin-top: 48px; }
}
@media (max-width: 560px) {
  .copy p { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
}

/* =========================================================
   전체 마감
   ========================================================= */

/* 첫 화면: 스크롤 안내 (얇은 선 위로 빛이 한 번씩 흘러내림) */
.hero { position: relative; }
.scroll-cue { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); width: 1px; height: 56px; background: rgba(255,255,255,.18); overflow: hidden; transform: translateX(-50%); }
.scroll-cue span { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: cue 2.4s cubic-bezier(.6,0,.3,1) infinite; }
.scroll-cue::after { content: ""; position: absolute; inset: -12px -14px; }
@keyframes cue { to { top: 110%; } }

/* 장 표시 */
.chapters { position: fixed; z-index: 25; right: max(20px, calc((100vw - var(--wrap)) / 2 - 120px)); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .4s, color .25s; color: #fff; }
.chapters.show { opacity: 1; pointer-events: auto; }
.chapters a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; font-family: var(--head); font-size: 12.5px; font-weight: 600; color: inherit; }
.chapters a::after { content: ""; width: 14px; height: 2px; background: currentColor; opacity: .35; transition: width .3s, opacity .3s; }
.chapters a span { opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; }
.chapters a.on::after { width: 28px; opacity: 1; }
.chapters a.on span, .chapters a:hover span, .chapters a:focus-visible span { opacity: .9; transform: none; }
.chapters.on-light { color: #0A0A0A; }

/* 무딧의 파스텔 빛이 아래로 갈수록 하얗게 밝아져 사업 문의로 이어짐 */
.scene--moodit::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 120px; background: linear-gradient(180deg, rgba(255,250,244,0), rgba(255,250,244,.5) 55%, #fff 100%); pointer-events: none; }

@media (max-width: 1100px) { .chapters { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; top: 30%; } }

@media (prefers-reduced-motion: reduce) { .pj-beam, .pj-src, .pj-dust i { animation: none; } }

/* =========================================================
   무딧 한 화면: 왼쪽 위 로고·슬로건·버튼, 오른쪽 아래 소개
   ========================================================= */
.brand { min-height: 100svh; display: flex; align-items: stretch; }
.moodit-one { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr auto; column-gap: clamp(40px, 6vw, 96px); }
.moodit-head { grid-column: 1 / -1; grid-row: 1; }
.moodit-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.moodit-actions .btn { display: inline-flex; align-items: center; gap: 10px; }
.moodit-actions svg { width: 14px; height: 14px; }
.moodit-body { grid-column: 2; grid-row: 3; max-width: 640px; padding-top: clamp(64px, 10vh, 140px); }
@media (max-width: 900px) {
  .moodit-one { grid-template-columns: 1fr; }
  .moodit-body { grid-column: 1; }
}