/* 홈 — 언덕 머리 · 커지는 영상 · 한 문장 소개 · What We Do · Partners · Our Works · 마지막 부름 */

/* 01 언덕 머리 + 영상 카드 (JS 가 스크롤에 맞춰 카드를 화면 전체로 키움) */
.intro { position: relative; height: 320vh; background: var(--ink); }
.intro-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.intro .hill { height: 100%; }
.hero-mark { position: absolute; left: 50%; bottom: calc(34% + 3.5vh); width: min(52vw, 860px);   /* 우상단 영상 카드와 겹치지 않는 크기 */ translate: -50% 0; color: var(--ink); }
/* 워드마크 아랫줄 순환(시안A 그대로): HOLDINGS → FRAN → F&B → FOOD → CAST → MEDIA, 받침점 색이 따라감 */
.lc { --lc-holdings: var(--ink); --lc-fran: var(--fran); --lc-fnb: var(--fnb); --lc-source: var(--source); --lc-cast: var(--cast); --lc-media: var(--media); }
.lc .lc-tri { transition: fill .5s var(--ease); }
.lc .lc-sub { transform: translateY(400px); transition: transform .7s var(--ease); }
.lc .lc-sub.is-on { transform: none; }
.lc .lc-sub.is-out { transform: translateY(-400px); }
html:not(.js) .lc .lc-sub:first-child { transform: none; }
.hero-tags { display: flex; justify-content: space-between; margin-top: clamp(14px, 1.6vw, 26px); padding-inline: .4%; font-size: clamp(12px, 1vw, 15px); font-weight: 500; letter-spacing: .02em; color: var(--sub); }
.hero-shade { top: calc(66% - 1.4vw); translate: calc(-50% + var(--sx, 0vw)) 0; }
/* 언덕 위 빛: 커서 쪽으로 천천히 옮겨 감(home.js) */
.intro .hill-sky { background: radial-gradient(46% 60% at calc(50% + var(--lx, 0%)) 78%, rgb(255 253 248 / .9), transparent 70%), radial-gradient(120% 70% at 50% 100%, var(--paper) 0%, var(--ivory) 46%, #E4DDCF 100%); }
.reel { position: absolute; z-index: 3; top: calc(var(--hd-h) + 28px); right: var(--gut); width: min(360px, calc(24vw - var(--gut) - 16px)); aspect-ratio: 16 / 9;   /* 워드마크(52vw) 옆 빈칸 안에서만 */ margin: 0; border-radius: 16px; overflow: hidden; background: var(--ink-3); box-shadow: 0 24px 60px -18px rgb(18 18 18 / .45), 0 0 0 1px rgb(18 18 18 / .08); will-change: width, height, top, right; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel-cap { position: absolute; left: 16px; bottom: 12px; display: flex; gap: 6px; align-items: baseline; font-size: 12px; letter-spacing: .08em; color: var(--ivory); text-shadow: 0 1px 8px rgb(0 0 0 / .5); }
.reel-cap span { font-weight: 800; }
.reel-cap b { font-weight: 300; }
.intro-down { position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 22px; height: 34px; translate: -50% 0; border: 1.5px solid rgb(236 230 218 / .5); border-radius: 12px; }
.intro-down::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; translate: -50% 0; border-radius: 2px; background: var(--ivory); animation: down 1.8s var(--ease) infinite; }
@keyframes down { 0% { opacity: 0; translate: -50% -3px; } 40% { opacity: 1; } 100% { opacity: 0; translate: -50% 9px; } }
.js .hero-mark, .js .hill-mound, .js .hill-below, .js .reel { transition: opacity 1.2s var(--ease), translate 1.6s var(--ease); }
.js:not(.ready) .hill-mound { translate: -50% 12vh; }
.js:not(.ready) .hero-mark { opacity: 0; translate: -50% 6vh; }
.js:not(.ready) .hill-below, .js:not(.ready) .reel { opacity: 0; translate: 0 3vh; }
.js.ready .hero-mark { transition-delay: .25s; }
.js.ready .hill-below { transition-delay: .55s; }
.js.ready .reel { transition-delay: .8s; }

/* 02 한 문장 소개 */
.sol { position: relative; padding: 220px 0 160px; overflow: clip; }
.sol-bg { position: absolute; inset: 0; pointer-events: none; }
.sol-sym { position: sticky; top: 18vh; display: block; width: min(96vw, 1500px); margin: 12vh auto 0; color: #1D1C1A; }
.sol-in { position: relative; }
.sol-kicker { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
.sol h2 { margin-top: 22px; font-size: clamp(32px, 4.6vw, 66px); line-height: 1.3; }
.sol-en { margin-top: 30px; font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--sub-dk); }
.sol-b { margin: 42vh 0 0 auto; width: max-content; max-width: 100%; text-align: right; }
.sol-num { margin-top: 30vh; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dk); }
.sol-num > div { padding: 28px 24px 0 0; display: grid; gap: 6px; }
.sol-num > div + div { padding-left: 24px; border-left: 1px solid var(--line-dk); }
.sol-num dt { font-size: 14px; color: var(--sub-dk); }
.sol-num dd { font-size: clamp(44px, 5vw, 76px); font-weight: 200; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sol-num small { margin-left: 4px; font-size: .34em; font-weight: 500; letter-spacing: 0; color: var(--accent); }
.sol-note { margin-top: 18px; font-size: 12px; color: var(--sub-dk); }

/* 03 What We Do */
.wwd { padding: 150px 0 120px; overflow: clip; }
.orbs { --w: min(calc((100vw - var(--gut) * 2) / 5.3), 230px); display: flex; justify-content: center; margin-top: 90px; }
.orb { position: relative; flex: none; width: var(--w); aspect-ratio: 1; border-radius: 50%; display: grid; grid-template-columns: minmax(0, 1fr); place-content: center; justify-items: center; gap: 6px; padding: 0 calc(var(--w) * .12); text-align: center; color: var(--ivory); border: 1px solid rgb(236 230 218 / .3); background: var(--ink); transition: background .5s var(--ease), border-color .5s, color .5s; }
.orb + .orb { margin-left: calc(var(--w) * -.06); }
/* 여섯 로고 같은 높이(원 지름 기준) — % 폭은 아래 글자 길이를 따라가 제각각이 됨 */
.orb-logo, .orb-mark { height: calc(var(--w) * .2); width: auto; color: currentColor; }
.orb-mark { height: calc(var(--w) * .28); margin-block: calc(var(--w) * -.04); filter: brightness(0) invert(.92); }   /* 적갈색 마크는 검은 원 위에서 안 보여 다른 로고처럼 밝은 단색으로 */   /* 원형 마크는 글자 로고와 같은 높이면 작아 보여 눈대중 보정, 위아래 여백은 상쇄 */
.orb b { margin-top: 8px; font-size: clamp(15px, 1.25vw, 19px); font-weight: 700; letter-spacing: -0.02em; }
.orb small { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--sub-dk); transition: color .5s; }
.orb.is-on, .orb:hover { background: color-mix(in srgb, var(--c) 24%, var(--ink)); border-color: var(--c); }
.orb.is-on small, .orb:hover small { color: var(--ivory); }

/* 04 Partners */
.ptn { position: relative; padding: 160px 0 0; overflow: clip; perspective: 1600px; }
.ptn-in { position: relative; z-index: 2; }
.ptn-text { max-width: 780px; margin: 60px auto 0; text-align: center; font-size: clamp(16px, 1.25vw, 18.5px); font-weight: 300; line-height: 1.9; }
.ptn-text p + p { margin-top: 28px; }
.ptn-stack { position: absolute; z-index: 1; top: 200px; width: clamp(220px, 23vw, 360px); aspect-ratio: 3 / 4; transform-style: preserve-3d; }
.ptn-stack.is-l { left: -3vw; transform: rotateY(26deg) rotateZ(-7deg); }
.ptn-stack.is-r { right: -3vw; transform: rotateY(-26deg) rotateZ(7deg); }
.ptn-stack i { position: absolute; inset: 0; border-radius: 20px; background: var(--ink-3) var(--img) center / cover; box-shadow: 0 30px 60px -24px rgb(18 18 18 / .5), 0 0 0 1px rgb(255 255 255 / .4) inset; }
.ptn-stack.is-l i:nth-child(1) { translate: 26% 14% -120px; opacity: .55; }
.ptn-stack.is-l i:nth-child(2) { translate: 12% 7% -60px; opacity: .8; }
.ptn-stack.is-r i:nth-child(1) { translate: -26% 14% -120px; opacity: .55; }
.ptn-stack.is-r i:nth-child(2) { translate: -12% 7% -60px; opacity: .8; }
.ptn-belt { position: relative; z-index: 2; margin-top: 110px; padding: 14px 0 22px; overflow: hidden; background: linear-gradient(transparent, rgb(18 18 18 / .05)); }
.ptn-belt .mq-track { gap: 18px; animation-duration: 46s; }

/* 05 Our Works */
.wk { padding: 160px 0 60px; overflow: clip; }
.wk-btns { display: flex; justify-content: center; gap: 22px; margin-top: 40px; color: var(--ivory); }
.wk-row { overflow: hidden; margin-top: 20px; }
.wk-row:first-of-type { margin-top: 64px; }
.wk-row .mq-track { gap: 20px; animation-duration: 70s; }
.wk-row[data-dir="right"] .mq-track { animation-direction: reverse; animation-duration: 80s; }
.wk-row:hover .mq-track { animation-play-state: paused; }
.wk-card { position: relative; flex: none; margin: 0; border-radius: 16px; overflow: hidden; background: var(--ink-3); }
.wk-card.is-tall { width: clamp(220px, 18vw, 300px); aspect-ratio: 3 / 4; }
.wk-card.is-wide { width: clamp(300px, 26vw, 420px); aspect-ratio: 4 / 3; }
.wk-img { position: absolute; inset: 0; background: var(--img) center / cover; transition: scale 1s var(--ease); }
.wk-card:hover .wk-img { scale: 1.05; }
.wk-card figcaption { position: absolute; inset: auto 0 0; padding: 40px 18px 16px; display: grid; background: linear-gradient(transparent, rgb(18 18 18 / .78)); color: var(--ivory); }
.wk-card b { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.wk-card small { font-size: 12.5px; color: #CFC9BE; }

@media (max-width: 760px) {
  .intro { height: 260vh; }
  .hero-mark { width: 84vw; bottom: calc(38% + 7vh); }
  .hero-tags { font-size: 10.5px; }
  .hero-shade { top: calc(62% - 3vw); }
  .reel { width: 200px; top: calc(var(--hd-h) + 16px); border-radius: 12px; }
  .sol { padding: 140px 0 100px; }
  .sol-b { margin-top: 24vh; }
  .sol-num { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18vh; }
  .sol-num > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .sol-num > div:nth-child(n+3) { border-top: 1px solid var(--line-dk); margin-top: 24px; }
  /* 모바일: 2칸×3줄을 한 줄기 선이 ㄹ자로 꿰어 순서대로 이음(01→02↓03←04↓05→06). 원이 선을 덮어 틈에서만 보임 */
  .orbs { --w: 40vw; --cg: 22px; --rg: 22px; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, var(--w)); gap: var(--rg) var(--cg); width: max-content; margin: 56px auto 0; }
  .orb + .orb { margin-left: 0; }
  .orb:nth-child(3) { grid-area: 2 / 2; }
  .orb:nth-child(4) { grid-area: 2 / 1; }
  .orbs::before, .orbs::after { content: ""; position: absolute; left: calc(var(--w) / 2); right: calc(var(--w) / 2); border: 1.5px solid rgb(236 230 218 / .26); pointer-events: none; z-index: -1; }
  .orbs::before { top: calc(var(--w) / 2); height: calc(var(--w) + var(--rg)); border-left: 0; }
  .orbs::after { top: calc(var(--w) * 1.5 + var(--rg)); height: calc(var(--w) + var(--rg)); border-top: 0; border-right: 0; }
  .ptn-stack { width: 42vw; top: auto; bottom: 120px; opacity: .5; }
  .ptn-text { font-size: 15px; text-align: left; }
  .ptn-text br { display: none; }
}