/* Studio Rapa — 유튜브 비즈니스 파트너 */
:root {
  /* 팔레트: 라임(메인) + 포레스트 그린 + 민트 크림 + 라벤더 + 그린 블랙 */
  --bg: #ffffff;
  --ink: #0e1410;
  --ink-2: #33403a;
  --muted: #69786f;
  --line: #dde8d6;
  --soft: #f1f8ec;
  --dark: #0f1511;
  --dark-2: #18221b;
  --dark-line: rgba(220, 255, 200, 0.12);
  --dark-muted: rgba(235, 248, 228, 0.64);
  --accent: #abf783;
  --accent-ink: #0e1410;
  --forest: #1f4d2c;
  --forest-2: #3c7a4a;
  --mint: #dff5cf;
  --lilac: #e6e0ff;
  --violet: #7d6cf2;
  --font-display: "GmarketSans", "SUIT Variable", "SUIT", sans-serif;
  --font-body: "SUIT Variable", "SUIT", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-en: "Montserrat", "SUIT Variable", sans-serif;
  --radius: 18px;
  --w: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face { font-family: "GmarketSans"; font-weight: 700; font-display: swap; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff"); }
@font-face { font-family: "GmarketSans"; font-weight: 500; font-display: swap; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: var(--w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section.dark { background: var(--dark); color: #fff; }
.section.soft { background: var(--soft); }

/* 섹션 머리 */
.label {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted);
  margin-bottom: 22px;
}
.label b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dark .label { color: var(--dark-muted); }
.dark .label b { color: var(--accent); }
.label::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.4; }
.h2 {
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 800; line-height: 1.18; letter-spacing: -0.035em;
  max-width: 20ch;
}
.lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--muted); max-width: 56ch; margin-top: 20px; line-height: 1.75; }
.dark .lead { color: var(--dark-muted); }
.mark { background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); padding: 0 2px; }
.dark .mark { color: var(--accent); background: none; padding: 0; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.dark .btn.ghost, .hero .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.dark .btn.ghost:hover, .hero .btn.ghost:hover { border-color: #fff; }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* 헤더 */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand img { height: 22px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 15px; font-weight: 600; color: var(--ink-2); transition: color 0.2s; }
.nav a:hover { color: var(--ink); }
.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta .ytlink { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); padding: 0 8px; }
.header-cta .ytlink svg { width: 24px; height: 24px; color: #ff0000; }
.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: 0.3s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); transition: 0.3s; }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
.menu-open .burger span::after { top: 0; transform: rotate(-45deg); }
.mobile-nav { display: none; }

/* 히어로 */
.hero {
  position: relative; background: var(--dark); color: #fff; overflow: hidden;
  min-height: calc(100dvh - 72px);
  display: flex; align-items: flex-end;
}
.hero-wall {
  position: absolute; inset: -14% -6% -14% 30%; z-index: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  transform: perspective(1400px) rotateY(-16deg) rotateX(4deg) scale(1.08);
  opacity: 0.5; filter: saturate(0.65) contrast(1.05);
  pointer-events: none;
}
.wall-col { overflow: hidden; height: 100%; }
.wall-track { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; will-change: transform; animation: wallUp 46s linear infinite; }
.wall-col:nth-child(2) .wall-track { animation-name: wallDown; animation-duration: 58s; }
.wall-col:nth-child(3) .wall-track { animation-duration: 40s; }
.wall-col:nth-child(4) .wall-track { animation-name: wallDown; animation-duration: 64s; }
.wall-track img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #222; flex: none; }
@keyframes wallUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wallDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(13, 13, 13, 0.92) 22%, rgba(13, 13, 13, 0.45) 55%, rgba(13, 13, 13, 0.15) 100%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.1) 0%, rgba(13, 13, 13, 0) 45%, rgba(13, 13, 13, 0.9) 100%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: clamp(64px, 9vw, 110px); padding-bottom: clamp(56px, 7vw, 90px); }
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-eyebrow { font-size: 14px; font-weight: 600; color: var(--dark-muted); letter-spacing: 0.02em; margin-bottom: 20px; }
.hero h1 {
  font-size: clamp(32px, 4.5vw, 58px); font-weight: 800; line-height: 1.14; letter-spacing: -0.04em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { margin-top: 22px; font-size: clamp(16px, 1.4vw, 19px); color: var(--dark-muted); max-width: 44ch; line-height: 1.7; }
.hero-stat { margin-top: 34px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero-stat .num { font-size: clamp(72px, 12vw, 164px); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.hero-stat .unit { font-size: clamp(22px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; }
.hero-stat .desc { flex-basis: 100%; margin-top: 14px; font-size: 14px; color: var(--dark-muted); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero-side { padding-bottom: 8px; max-width: 420px; justify-self: end; width: 100%; }
.hero-side small { display: block; margin-top: 12px; font-size: 13px; color: var(--dark-muted); text-align: right; }

/* 01 결과 (벤토) */
.results { position: relative; overflow: hidden; }
.results::before { content: ""; position: absolute; right: -10%; top: -20%; width: 48vw; height: 48vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(171, 247, 131, 0.35) 0%, rgba(171, 247, 131, 0) 65%); pointer-events: none; }
.results .wrap { position: relative; }
.bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: 56px; }
.tile { position: relative; overflow: hidden; padding: 32px 32px 30px; min-height: 240px; display: flex; flex-direction: column; }
.tile-cap { font-size: 14px; font-weight: 700; opacity: 0.75; }
.tile-num { margin-top: auto; font-size: clamp(56px, 6.5vw, 104px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.tile-num small { font-size: 0.4em; letter-spacing: -0.02em; margin-left: 4px; }
.tile-sub { margin-top: 12px; font-size: 14px; opacity: 0.75; }
.tile-green .tile-num { font-size: clamp(84px, 10vw, 168px); }
.tile-green { grid-row: 1 / 3; color: var(--ink); background: linear-gradient(145deg, #c8ff9f 0%, var(--accent) 45%, #7fdc5b 100%); min-height: 420px; }
.tile-green .orb { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35); filter: blur(2px); animation: orbFloat 9s ease-in-out infinite; }
.tile-green .o1 { width: 220px; height: 220px; right: -60px; top: -40px; }
.tile-green .o2 { width: 140px; height: 140px; left: 20%; bottom: -50px; background: rgba(10, 10, 10, 0.08); animation-delay: -4s; animation-duration: 12s; }
.tile-green .tile-play { position: absolute; right: 28px; bottom: 28px; width: 64px; height: 64px; padding: 18px 16px 18px 22px; border-radius: 50%; background: var(--ink); fill: var(--accent); animation: pulse 2.6s ease-out infinite; }
@keyframes orbFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 22px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(10, 10, 10, 0.28); } 70% { box-shadow: 0 0 0 22px rgba(10, 10, 10, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 10, 10, 0); } }
.tile-dark { background: var(--dark); color: #fff; }
.tile-dark .tile-num { color: var(--accent); }
.spark { position: absolute; right: 24px; top: 26px; display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.spark i { width: 7px; height: var(--h); background: rgba(255, 255, 255, 0.22); transform-origin: bottom; transform: scaleY(0); transition: transform 0.9s var(--ease); }
.spark i:last-child { background: var(--accent); }
.spark i:nth-child(2) { transition-delay: 0.05s; } .spark i:nth-child(3) { transition-delay: 0.1s; } .spark i:nth-child(4) { transition-delay: 0.15s; } .spark i:nth-child(5) { transition-delay: 0.2s; } .spark i:nth-child(6) { transition-delay: 0.25s; } .spark i:nth-child(7) { transition-delay: 0.3s; } .spark i:nth-child(8) { transition-delay: 0.35s; } .spark i:nth-child(9) { transition-delay: 0.4s; } .spark i:nth-child(10) { transition-delay: 0.45s; }
.tile.in .spark i { transform: scaleY(1); }
.tile-line { background: var(--bg); border: 1px solid var(--line); }
.chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 700; }
.tile-chart { grid-column: 2 / 4; background: var(--soft); min-height: 0; }
.bars { margin-top: 20px; display: grid; gap: 12px; }
.bars li { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 14px; font-size: 14px; }
.bar-name { font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.bar { height: 12px; background: rgba(10, 10, 10, 0.07); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--ink) 0%, #3a3a3a 100%); transform: translateX(-101%); transition: transform 1.1s var(--ease); }
.bars li:first-child .bar i { background: linear-gradient(90deg, #7fdc5b, var(--accent)); }
.tile.in .bar i { transform: none; }
.bars li:nth-child(2) .bar i { transition-delay: 0.08s; } .bars li:nth-child(3) .bar i { transition-delay: 0.16s; } .bars li:nth-child(4) .bar i { transition-delay: 0.24s; } .bars li:nth-child(5) .bar i { transition-delay: 0.32s; } .bars li:nth-child(6) .bar i { transition-delay: 0.4s; }
.bars b { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.foot-note { margin-top: 28px; font-size: 13px; color: var(--muted); }

/* 02 포트폴리오 */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 44px; }
.tabs button {
  padding: 10px 16px; font-size: 14px; font-weight: 700; border-radius: 999px;
  border: 1px solid var(--dark-line); color: var(--dark-muted); transition: 0.25s;
}
.tabs button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.tabs button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.grid-videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; margin-top: 36px; }
.vcard { display: block; }
.vcard.hide { display: none; }
.vcard .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1c1c1c; }
.vcard .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.vcard:hover .thumb img { transform: scale(1.04); }
.vcard .thumb .dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, 0.8); color: #fff; }
.vcard .thumb .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.3s; background: rgba(0, 0, 0, 0.25); }
.vcard:hover .thumb .play { opacity: 1; }
.vcard .thumb .play span { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.vcard .thumb .play svg { width: 20px; height: 20px; margin-left: 3px; }
.vcard .t { margin-top: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard .m { margin-top: 6px; font-size: 12.5px; color: var(--dark-muted); }
.vcard .m b { font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.vcard .m b::after { content: " · "; color: var(--dark-muted); }
.more { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.more p { font-size: 14px; color: var(--dark-muted); }

/* 03 사례 */
.case { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.case + .case { margin-top: clamp(72px, 9vw, 130px); }
.case.flip .case-media { order: 2; }
.case-media { position: relative; }
.yt { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.yt:hover img { transform: scale(1.03); }
.yt .playbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.3s var(--ease); }
.yt:hover .playbtn { transform: translate(-50%, -50%) scale(1.06); }
.yt .playbtn svg { width: 26px; height: 26px; margin-left: 4px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-cap { margin-top: 12px; font-size: 13px; color: var(--muted); }
.case-tag { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.case h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.2; }
.case p { margin-top: 18px; font-size: 16px; color: var(--ink-2); line-height: 1.8; }
.case dl { margin: 22px 0 0; display: grid; gap: 10px; }
.case dl div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; font-size: 15px; padding: 10px 0; border-top: 1px solid var(--line); }
.case dt { font-weight: 800; }
.case dd { margin: 0; color: var(--ink-2); }
.mini-stats { display: flex; gap: 32px; margin-top: 26px; }
.mini-stats b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.mini-stats b small { font-size: 15px; margin-left: 2px; }
.mini-stats span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* 철학 */
.manifesto { position: relative; overflow: hidden; }
.manifesto .bg { position: absolute; inset: 0; z-index: 0; }
.manifesto .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; filter: grayscale(0.3); }
.manifesto .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--dark) 0%, rgba(13, 13, 13, 0.6) 50%, var(--dark) 100%); }
.manifesto .wrap { position: relative; z-index: 1; }
.manifesto .h2 { max-width: 24ch; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 72px; border-top: 1px solid var(--dark-line); }
.pillars li { padding-top: 28px; }
.pillars .n { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.pillars h3 { margin-top: 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.pillars p { margin-top: 10px; font-size: 15px; color: var(--dark-muted); line-height: 1.75; }

/* 04 숏폼 */
.shorts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.phone { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111; }
.phone:nth-child(2) { margin-top: 56px; }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; }
.phone .mute { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; display: grid; place-items: center; }
.phone .mute svg { width: 16px; height: 16px; }
.types { margin-top: 36px; border-top: 1px solid var(--line); }
.types li { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 12px; }
.types .n { font-size: 14px; font-weight: 800; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.types h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.types p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }

/* 05 프로세스 */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 60px; }
.steps li { position: relative; padding-top: 22px; }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); }
.steps li:nth-child(n+2)::before { background: var(--line); }
.steps .n { font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.steps p { margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-top: 64px; }
.photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photos img:first-child { aspect-ratio: 16 / 10; }
.owner { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; padding: 40px 0 0; border-top: 1px solid var(--ink); }
.owner h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; }
.owner h3 em { font-style: normal; background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); }
.owner ul { display: grid; gap: 14px; }
.owner li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16px; color: var(--ink-2); }
.owner li svg { width: 22px; height: 22px; }

/* 06 가격 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.plan { border: 1px solid var(--dark-line); padding: 36px 32px; display: flex; flex-direction: column; }
.plan.hot { border-color: var(--accent); background: var(--dark-2); }
.plan .tier { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--dark-muted); }
.plan.hot .tier { color: var(--accent); }
.plan .name { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.plan .price { margin-top: 22px; font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 16px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.plan .per { margin-top: 6px; font-size: 13px; color: var(--dark-muted); }
.plan ul { margin-top: 26px; display: grid; gap: 10px; flex: 1; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; color: rgba(255, 255, 255, 0.86); }
.plan li svg { width: 18px; height: 18px; margin-top: 3px; }
.plan .btn { margin-top: 30px; width: 100%; }
.plan-notes { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 28px; border-top: 1px solid var(--dark-line); }
.plan-notes b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.plan-notes p { font-size: 14px; color: var(--dark-muted); line-height: 1.7; }

/* 07 장비 */
.gear { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.gear-img { aspect-ratio: 4 / 5; overflow: hidden; }
.gear-img img { width: 100%; height: 100%; object-fit: cover; }
.gear-groups { display: grid; gap: 0; margin-top: 8px; }
.gear-groups > li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.gear-groups h3 { font-size: 15px; font-weight: 800; letter-spacing: 0.01em; padding-top: 2px; }
.gear-groups ul { display: flex; flex-wrap: wrap; gap: 8px; }
.gear-groups ul li { padding: 8px 14px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; border-radius: 999px; }
.gear-groups p { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* 08 대표 */
.director { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.director-img { aspect-ratio: 4 / 5; overflow: hidden; }
.director-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.director .name { margin-top: 28px; display: flex; align-items: baseline; gap: 10px; }
.director .name b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.director .name span { font-size: 14px; color: var(--muted); font-weight: 600; }
.director p { margin-top: 18px; font-size: 16px; color: var(--ink-2); line-height: 1.8; }
.facts { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.facts li { border-top: 1px solid var(--line); padding-top: 12px; }
.facts b { display: block; font-size: 13px; color: var(--muted); font-weight: 700; }
.facts span { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; }

/* 09 FAQ */
.faq { margin-top: 48px; border-top: 1px solid var(--ink); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 20px; padding: 24px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; transition: transform 0.3s var(--ease), background 0.3s; }
.faq summary .ic svg { width: 14px; height: 14px; }
.faq details[open] summary .ic { transform: rotate(45deg); background: var(--accent); }
.faq .a { padding: 0 48px 26px 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.8; }

/* 10 문의 */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact .mail { display: inline-block; margin-top: 30px; font-size: clamp(20px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
.contact .ways { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 15px; color: #fff;
  background: var(--dark-2); border: 1px solid var(--dark-line); padding: 14px 16px; border-radius: 0;
  transition: border-color 0.2s;
}
.form input::placeholder, .form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form select option { color: #0a0a0a; }
.form textarea { min-height: 140px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .hint { font-size: 13px; color: var(--dark-muted); }
.form .btn { justify-self: start; }

/* 푸터 */
.footer { background: var(--dark); color: #fff; border-top: 1px solid var(--dark-line); padding: 56px 0 40px; }
.footer .top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.footer .top img { height: 34px; width: auto; }
.footer .cols { display: flex; gap: clamp(32px, 6vw, 96px); flex-wrap: wrap; }
.footer .cols b { display: block; font-size: 13px; color: var(--dark-muted); margin-bottom: 12px; font-weight: 700; }
.footer .cols a, .footer .cols span { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.footer .cols a:hover { color: var(--accent); }
.footer .bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--dark-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--dark-muted); }

/* 플로팅 CTA (오른쪽 하단) */
.float-cta { position: fixed; right: 20px; bottom: 20px; z-index: 48; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.float-cta a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px;
  border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.float-cta a:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28); }
.float-cta a:active { transform: translateY(0) scale(0.98); }
.float-cta svg { width: 20px; height: 20px; flex: none; }
.float-cta .fc-mail { background: #fff; color: var(--ink); border: 1px solid rgba(10, 10, 10, 0.12); }
.float-cta .fc-ask { background: var(--accent); color: var(--accent-ink); }

/* 타이포그래피 리빌 */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.04em 0.02em 0.12em; margin: -0.04em -0.02em -0.12em; }
.split .wi { display: inline-block; transform: translateY(112%); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.split.in .wi { transform: none; }
.mark, .owner h3 em { background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 0.8s var(--ease) 0.5s; }
.in .mark, .in .owner h3 em, .owner.in h3 em { background-size: 100% 100%; }
.dark .mark { background-size: auto; }
.hero-eyebrow.reveal { transition-delay: 0.05s; }

/* 모션 */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .split .wi { transform: none; transition: none; }
  .wall-track { animation: none; }
  .tile-green .orb, .tile-green .tile-play { animation: none; }
  .spark i, .bar i { transform: none; transition: none; }
  .mark, .owner h3 em { background-size: 100% 100%; transition: none; }
  .btn, .vcard .thumb img, .yt img { transition: none; }
}

/* 반응형 */
@media (max-width: 1024px) {
  .nav { gap: 20px; }
  .nav a { font-size: 14px; }
  .grid-videos { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
  .plan-notes { grid-template-columns: repeat(2, 1fr); }
  .hero-wall { inset: -12% -10% -12% 15%; }
}
@media (max-width: 860px) {
  .nav, .header-cta .btn.accent { display: none; }
  .header-cta .ytlink { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; border: 1px solid #e5e5e5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); font-size: 14px; font-weight: 800; color: #0f0f0f; }
  .header-cta .ytlink svg { width: 26px; height: 26px; color: #ff0000; }
  .burger { display: flex; }
  .mobile-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 72px); background: #fff; z-index: 49; padding: 12px var(--gutter) 32px; flex-direction: column; gap: 0; overflow-y: auto; border-top: 1px solid var(--line); }
  .menu-open .mobile-nav { display: flex; }
  .mobile-nav a { font-family: var(--font-display); font-size: 20px; font-weight: 700; padding: 16px 0; border-bottom: 1px solid var(--line); letter-spacing: -0.02em; }
  .mobile-nav a.btn { border-bottom: 0; justify-content: center; color: var(--accent-ink); font-family: var(--font-body); font-size: 16px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .float-cta { display: none; }
  .mobile-nav .btn { margin-top: 24px; }
  .hero { min-height: calc(100dvh - 72px); align-items: center; }
  .hero .wrap { padding-top: 48px; padding-bottom: 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-wall { inset: -8% -28% -8% -12%; grid-template-columns: repeat(3, 1fr); opacity: 0.42; transform: perspective(1000px) rotateY(-8deg) scale(1.12); }
  .wall-col:nth-child(4) { display: none; }
  .hero::before { background: linear-gradient(180deg, rgba(13, 13, 13, 0.15) 0%, rgba(13, 13, 13, 0.45) 40%, rgba(13, 13, 13, 0.82) 70%, var(--dark) 100%); }
  .hero-side p { margin-top: 18px; }
  /* 결과 섹션: 한 화면에 들어오는 컴팩트 레이아웃 */
  .results { padding: 56px 0 48px; }
  .results::before { width: 70vw; height: 70vw; right: -25%; top: -10%; }
  .results .lead { display: none; }
  .bento { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 8px; margin-top: 26px; }
  .tile { min-height: 0; padding: 14px 12px 12px; }
  .tile-cap { font-size: 11px; line-height: 1.3; }
  .tile-num, .tile-green .tile-num { font-size: 34px; margin-top: 10px; letter-spacing: -0.04em; }
  .tile-num small { font-size: 0.45em; }
  .tile-sub, .tile-green .orb, .tile-green .tile-play, .spark, .chips { display: none; }
  .tile-green { grid-row: auto; min-height: 0; }
  .tile-chart { grid-column: 1 / -1; padding: 14px 14px 12px; }
  .bars { gap: 7px; margin-top: 10px; }
  .bars li { grid-template-columns: 86px 1fr 24px; gap: 8px; font-size: 12px; }
  .bar { height: 8px; }
  .results .foot-note { font-size: 11px; margin-top: 14px; }
  .grid-videos { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .case, .case.flip { grid-template-columns: 1fr; }
  .case.flip .case-media { order: 0; }
  .pillars { grid-template-columns: 1fr; gap: 0; }
  .pillars li { padding: 24px 0; border-bottom: 1px solid var(--dark-line); }
  .shorts { grid-template-columns: 1fr; }
  .phones { max-width: 420px; }
  .steps { grid-template-columns: 1fr 1fr; }
  #process .wrap { display: flex; flex-direction: column; }
  #process .photos { order: 1; display: flex; gap: 10px; margin: 28px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #process .photos::-webkit-scrollbar { display: none; }
  #process .photos img, #process .photos img:first-child { flex: 0 0 76%; aspect-ratio: 16 / 10; scroll-snap-align: start; }
  #process .steps { order: 2; margin-top: 36px; }
  #process .owner { order: 3; }
  .owner { grid-template-columns: 1fr; gap: 24px; }
  .plans { grid-template-columns: 1fr; }
  .plan.hot { order: -1; }
  .gear, .director, .contact { grid-template-columns: 1fr; }
  .gear-img { aspect-ratio: 16 / 10; }
  .director-img { aspect-ratio: 4 / 3; }
  .gear-groups > li { grid-template-columns: 1fr; gap: 12px; }
  .faq summary { font-size: 16px; padding: 20px 0; }
  .faq .a { padding-right: 0; }
  .form .row { grid-template-columns: 1fr; }
  .float-cta { right: 14px; bottom: 14px; }
  .float-cta a { min-height: 48px; font-size: 14px; }
  .footer { padding-bottom: 96px; }
}
@media (max-width: 480px) {
  .grid-videos { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .plan-notes { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .mini-stats { gap: 20px; }
  .mini-stats b { font-size: 28px; }
  .hero-cta .btn { flex: 1; }
  .hero-side { max-width: none; justify-self: stretch; }
  .hero-side small { text-align: left; }
}

/* ===== 2차 스타일: 폰트 · 컬러 · 모서리 ===== */
.hero h1, .h2, .case h3, .owner h3, .pillars h3, .steps h3, .types h3, .plan .name, .director .name b, .faq summary, .contact .mail {
  font-family: var(--font-display); font-weight: 700;
}
.hero h1 { letter-spacing: -0.03em; line-height: 1.22; }
.h2 { letter-spacing: -0.03em; line-height: 1.28; }
.case h3, .owner h3 { letter-spacing: -0.025em; line-height: 1.35; }
.pillars h3, .steps h3, .types h3, .plan .name { letter-spacing: -0.02em; }
.faq summary { font-weight: 500; letter-spacing: -0.01em; }
.split .w { padding-top: 0.08em; margin-top: -0.08em; }
.hero-stat .num, .tile-num, .stats .num, .mini-stats b, .plan .price, .bars b {
  font-family: var(--font-en); font-weight: 800; letter-spacing: -0.04em;
}
.label b, .plan .tier, .steps .n, .pillars .n, .types .n, .vcard .thumb .dur, .loop-head b, .hero-eyebrow {
  font-family: var(--font-en);
}
.hero-eyebrow { font-family: var(--font-body); letter-spacing: 0.01em; }
.label { font-family: var(--font-body); }

/* 버튼: 뭉툭한 알약형 */
.btn { border-radius: 999px; font-weight: 800; min-height: 56px; padding: 0 30px; }
.btn.sm { min-height: 46px; padding: 0 22px; }
.btn.accent { box-shadow: 0 8px 22px rgba(123, 210, 80, 0.32), inset 0 -2px 0 rgba(14, 20, 16, 0.12); }
.btn.accent:hover { background: #bcff98; border-color: #bcff98; }
.header .btn.accent { box-shadow: 0 4px 14px rgba(123, 210, 80, 0.28), inset 0 -2px 0 rgba(14, 20, 16, 0.12); }

/* 라운드 시스템: 카드 18px, 썸네일 12px, 입력 12px */
.tile, .plan, .yt, .phone, .gear-img, .director-img, .photos img, .case-media .yt { border-radius: var(--radius); }
.vcard .thumb { border-radius: 12px; }
.form input, .form select, .form textarea { border-radius: 12px; }
.loop-head b { border-radius: 999px; }

/* 라이트 섹션 포인트 컬러 */
.label b { color: var(--forest); }
.section.soft { background: var(--soft); }
.results::before { background: radial-gradient(circle, rgba(171, 247, 131, 0.42) 0%, rgba(171, 247, 131, 0) 65%); }
.results::after { content: ""; position: absolute; left: -12%; bottom: -18%; width: 36vw; height: 36vw; max-width: 520px; max-height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 108, 242, 0.14) 0%, rgba(125, 108, 242, 0) 65%); pointer-events: none; }
.tile-line { background: var(--lilac); border: 0; }
.tile-line .tile-num { color: #3b2fa0; }
.chips li { background: #fff; color: #3b2fa0; }
.tile-chart { background: var(--soft); }
.bar { background: rgba(31, 77, 44, 0.1); border-radius: 999px; }
.bar i { background: linear-gradient(90deg, var(--forest) 0%, var(--forest-2) 100%); border-radius: 999px; }
.bars li:first-child .bar i { background: linear-gradient(90deg, #7fdc5b, var(--accent)); }
.tile-dark { background: linear-gradient(160deg, #18221b 0%, var(--dark) 70%); }

.case-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--mint); color: var(--forest); }
.case dt { color: var(--forest); }
.mini-stats b small { color: var(--forest-2); }
.case.flip .case-tag { background: var(--lilac); color: #3b2fa0; }

.steps li::before { background: var(--forest); }
.steps .n { color: var(--forest-2); }
.owner { border-top-color: var(--forest); }
.owner li svg { color: var(--forest-2); }
.types .n { color: var(--forest-2); }
.gear-groups ul li { background: var(--soft); border-color: transparent; }
.facts b { color: var(--forest-2); }
.faq { border-top-color: var(--forest); }
.faq summary .ic { border-color: var(--forest); color: var(--forest); }
.faq details[open] summary .ic { color: var(--ink); border-color: var(--accent); }

/* 다크 섹션 */
.section.dark { background: var(--dark); }
#portfolio { background: radial-gradient(1200px 500px at 85% 0%, rgba(171, 247, 131, 0.08), transparent 60%), var(--dark); }
#pricing { background: radial-gradient(900px 500px at 50% 100%, rgba(125, 108, 242, 0.12), transparent 60%), var(--dark); }
#contact { background: radial-gradient(900px 520px at 100% 0%, rgba(171, 247, 131, 0.1), transparent 60%), var(--dark); }
.plan { background: rgba(255, 255, 255, 0.02); }
.plan.hot { background: linear-gradient(170deg, #1d2b20 0%, var(--dark-2) 60%); box-shadow: 0 20px 60px rgba(123, 210, 80, 0.12); }
.plan.hot .tier { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.pillars .n { color: var(--accent); }
.tabs button.on { box-shadow: 0 6px 18px rgba(123, 210, 80, 0.25); }
.footer { background: var(--dark); }

/* ===== 역동적 타이포그래피 ===== */
.split .w { perspective: 600px; }
.split .wi {
  transform: translateY(115%) rotate(9deg) scale(0.92);
  transform-origin: 0% 100%;
  opacity: 0; filter: blur(10px);
  transition: transform 1.05s cubic-bezier(0.22, 1.45, 0.36, 1), opacity 0.5s ease, filter 0.8s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.split.in .wi { transform: none; opacity: 1; filter: none; }
.hero h1 em .wi { color: var(--accent); }
@keyframes shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.hero-stat.reveal { transform: translateY(40px) scale(0.86); transform-origin: 0% 100%; filter: blur(8px); transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.22, 1.35, 0.36, 1), filter 0.9s ease; transition-delay: 0.45s; }
.hero-stat.reveal.in { transform: none; filter: none; }
.hero-stat .num { display: inline-block; background: linear-gradient(100deg, var(--accent) 0%, #f0ffe4 45%, var(--accent) 60%, #7fdc5b 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 4.5s ease-in-out infinite; }
.label.reveal { transform: translateX(-24px); }
.label.reveal.in { transform: none; }
.label.in::after { animation: grow 0.9s var(--ease) both 0.2s; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 em .wi, .hero-stat .num { animation: none; }
  .split .wi, .hero-stat.reveal, .label.reveal { transform: none; opacity: 1; filter: none; transition: none; }
  .label.in::after { animation: none; }
}

/* ===== 히어로 크기 조정 ===== */
.hero h1 { font-family: var(--font-body); font-weight: 800; font-size: clamp(26px, 3.2vw, 42px); letter-spacing: -0.035em; line-height: 1.3; }
.hero-stat { margin-top: 26px; gap: 10px; }
.hero-stat .num { font-family: var(--font-body); font-weight: 800; font-size: clamp(52px, 7vw, 96px); letter-spacing: -0.045em; line-height: 1; }
.hero-stat .unit { font-family: var(--font-body); font-weight: 700; font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.03em; }
@media (max-width: 860px) {
  .hero-eyebrow { font-size: 12px; margin-bottom: 14px; }
  .hero h1 { font-size: 25px; line-height: 1.32; }
  .hero-stat { margin-top: 18px; gap: 8px; }
  .hero-stat .num { font-size: 50px; }
  .hero-stat .unit { font-size: 17px; }
  .hero-cta { flex-wrap: nowrap; gap: 8px; margin-top: 26px; }
  .hero-cta .btn { flex: 0 0 auto; min-height: 44px; padding: 0 18px; font-size: 14px; }
}

/* 제목 포인트 */
.h2 .mark { padding: 0 0.06em; background-image: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 94%, transparent 94%); }
.section.soft .h2 .mark, #process .h2 .mark { color: var(--forest); }
.dark .h2 .mark { background: none; color: var(--accent); }

/* 모바일: 사례 태그를 영상 위로 */
@media (max-width: 860px) {
  .case, .case.flip { gap: 0; }
  .case > div:not(.case-media) { display: contents; }
  .case .case-tag { order: -2; justify-self: start; margin-bottom: 14px; }
  .case .case-media { order: -1; margin-bottom: 24px; }
}
/* 포트폴리오 전체 보기 12개 제한 */
.vcard.over { display: none; }
/* 모바일: 숏폼 문구 아래 영상 */
@media (max-width: 860px) {
  .shorts { gap: 0; }
  .shorts > div:not(.phones) { display: contents; }
  .shorts .phones { order: 1; margin-top: 28px; }
  .shorts .types { order: 2; }
}

/* ===== 진행 과정: 단계 목록 + 사진 한 화면 ===== */
#process { padding: clamp(72px, 8vw, 110px) 0; }
.flowx { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); gap: clamp(24px, 3vw, 44px); margin-top: 40px; align-items: stretch; }
.flowx-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: #dfe9d8; box-shadow: 0 24px 60px rgba(31, 77, 44, 0.16); }
.flowx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.7s ease, transform 1.4s var(--ease); }
.flowx-media img.on { opacity: 1; transform: none; }
.flowx-list { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.flowx-list li button { width: 100%; text-align: left; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; align-items: center; padding: 14px 18px 16px; border-radius: 14px; position: relative; overflow: hidden; transition: background 0.3s, box-shadow 0.3s; }
.flowx-list li button:hover { background: rgba(255, 255, 255, 0.6); }
.fx-n { font-family: var(--font-en); font-size: 12px; font-weight: 800; color: var(--forest-2); letter-spacing: 0.02em; }
.fx-t { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--ink-2); transition: color 0.3s; }
.fx-d { grid-column: 2; font-size: 14px; color: var(--ink-2); line-height: 1.65; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s, margin 0.4s; }
.fx-bar { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 3px; border-radius: 999px; background: rgba(31, 77, 44, 0.12); opacity: 0; }
.fx-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }
.flowx-list li.on button { background: #fff; box-shadow: 0 10px 30px rgba(31, 77, 44, 0.1); }
.flowx-list li.on .fx-t { color: var(--ink); }
.flowx-list li.on .fx-d { max-height: 80px; opacity: 1; margin-top: 6px; }
.flowx-list li.on .fx-bar { opacity: 1; }
.flowx-list li.on .fx-bar i { animation: fxfill var(--fx-dur, 4.5s) linear forwards; }
.flowx.paused .fx-bar { display: none; }
@keyframes fxfill { from { width: 0; } to { width: 100%; } }
.owner { margin-top: 48px; padding-top: 32px; }
@media (max-width: 860px) {
  .flowx { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .flowx-media { aspect-ratio: 16 / 10; }
  .flowx-list { gap: 4px; }
  .flowx-list li button { grid-template-columns: 54px 1fr; padding: 11px 14px 13px; }
  .fx-t { font-size: 16px; }
  .fx-d { font-size: 13px; }
  .owner { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .flowx-media img { transition: none; transform: none; }
  .fx-bar { display: none; }
}

/* 포트폴리오 탭 버튼 축소 */
.tabs { gap: 6px; margin-top: 32px; }
.tabs button { padding: 8px 14px; font-size: 13px; }
@media (max-width: 860px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 22px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
}

/* 진행 과정 안정화: 높이 고정 + 모바일 알약 탭 */
.flowx-list { justify-content: flex-start; gap: 8px; }
.fx-s, .flowx-cap { display: none; }
@media (max-width: 860px) {
  .flowx { gap: 12px; }
  .flowx-cap { display: block; order: 2; min-height: 92px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(31, 77, 44, 0.08); }
  .fc-t { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
  .fc-d { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
  .flowx-list { order: 3; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .flowx-list li button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 12px; background: rgba(255, 255, 255, 0.55); box-shadow: none; }
  .flowx-list li.on button { background: var(--ink); box-shadow: none; }
  .fx-n, .fx-t, .fx-d { display: none; }
  .fx-s { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; color: var(--ink-2); }
  .fx-s b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-en); font-size: 11px; background: #fff; color: var(--forest); }
  .flowx-list li.on .fx-s { color: #fff; }
  .flowx-list li.on .fx-s b { background: var(--accent); color: var(--accent-ink); }
  .fx-bar { left: 8px; right: 8px; bottom: 5px; height: 2px; background: rgba(255, 255, 255, 0.18); }
}

/* 포트폴리오 제목 한 줄 */
.h2.one { max-width: none; white-space: nowrap; font-size: clamp(22px, 3vw, 40px); }
@media (max-width: 860px) {
  .h2.one { font-size: 4.5vw; }
}

/* 성과 사례: 라벨만 크게 */
.label.label-lg { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.03em; gap: 12px; color: var(--ink); }
.label.label-lg b { font-size: 0.8em; }
.label.label-lg::after { width: 40px; }
@media (max-width: 860px) {
  .label.label-lg { font-size: 20px; }
}

/* 성과 사례 제목 크기 */
.case h3 { font-size: clamp(24px, 2.5vw, 32px); }
@media (max-width: 860px) { .case h3 { font-size: 22px; } }

/* ===== 섹션 경계 자연스럽게 ===== */
/* 어두운 구간은 둥근 패널로 떨어뜨리고, 연한 구간은 위아래를 흰색으로 풀어줌 */
:root { --seam: 40px; --fade: 140px; }
.hero { border-radius: 0 0 var(--seam) var(--seam); }
#portfolio { border-radius: var(--seam); }
#about { border-radius: var(--seam) var(--seam) 0 0; }
#pricing { border-radius: 0 0 var(--seam) var(--seam); }
#about + #pricing { padding-top: clamp(40px, 6vw, 80px); }
#contact { border-radius: var(--seam) var(--seam) 0 0; }
#contact + .footer, .footer { border-top-color: transparent; }
.section.soft {
  background: linear-gradient(180deg, var(--bg) 0, var(--soft) var(--fade), var(--soft) calc(100% - var(--fade)), var(--bg) 100%);
}
@media (max-width: 860px) {
  :root { --seam: 24px; --fade: 80px; }
}

/* ===== 결과 타일: 원형 장식 대신 배경 이미지 ===== */
.results::before, .results::after { display: none; }
.tile { background-size: cover; background-repeat: no-repeat; }
.tile > * { position: relative; z-index: 1; }
.tile-green { background: #abf783 url("../assets/img/bg/tile-green.jpg") center top / cover no-repeat; }
.tile-dark { background: #0d0d0d url("../assets/img/bg/tile-dark.jpg") right center / cover no-repeat; }
.tile-dark .spark { display: none; }
.tile-line { background: var(--lilac) url("../assets/img/bg/tile-line.jpg") right top / cover no-repeat; }
.tile-chart { background: var(--soft) url("../assets/img/bg/tile-chart.jpg") right center / cover no-repeat; }
.tile-chart::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(241, 248, 236, 0.92) 0%, rgba(241, 248, 236, 0.75) 70%, rgba(241, 248, 236, 0.35) 100%); }
.tile-line .chips { max-width: 60%; }
.tile-line .chips li { background: rgba(255, 255, 255, 0.7); }
@media (max-width: 860px) {
  .tile-green { background-position: 70% 10%; }
  .tile-dark { background-position: 85% center; }
  .tile-line { background-position: 85% top; }
}
@media (max-width: 860px) {
  .tile-green::before, .tile-dark::before, .tile-line::before { content: ""; position: absolute; inset: 0; }
  .tile-green::before { background: linear-gradient(180deg, rgba(171, 247, 131, 0.85) 0%, rgba(171, 247, 131, 0.35) 55%, rgba(171, 247, 131, 0.7) 100%); }
  .tile-dark::before { background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.3) 55%, rgba(13, 13, 13, 0.75) 100%); }
  .tile-line::before { background: linear-gradient(180deg, rgba(230, 224, 255, 0.85) 0%, rgba(230, 224, 255, 0.35) 55%, rgba(230, 224, 255, 0.7) 100%); }
}

/* ===== 3차 정리: 폰트 통일(프리텐다드) · 글자 크기 축소 ===== */
:root {
  --font-display: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-body: var(--font-display);
  --font-en: var(--font-display);
}
body { font-size: 15px; }
.section { padding: clamp(64px, 8vw, 112px) 0; }
.h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.h2.one { font-size: clamp(22px, 2.6vw, 34px); }
.lead { font-size: 15px; margin-top: 14px; }
.hero-line { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0.32em; white-space: nowrap; --hs: clamp(28px, 3.4vw, 48px); font-size: var(--hs); }
.hero .hero-line h1 { font-size: var(--hs); font-weight: 700; line-height: 1.2; }
.hero .hero-line .hero-stat { margin-top: 0; gap: 0.2em; }
.hero .hero-line .hero-stat .num { font-size: calc(var(--hs) * 1.35); font-weight: 800; letter-spacing: -0.04em; }
.hero .hero-line .hero-stat .unit { font-size: var(--hs); font-weight: 700; }
.hero-stat.reveal { transform-origin: 0% 50%; }
.tile-cap { font-size: 13px; }
.tile-num { font-size: clamp(40px, 4.4vw, 64px); font-weight: 800; letter-spacing: -0.04em; }
.tile-green .tile-num { font-size: clamp(56px, 6vw, 96px); }
.tile-sub { font-size: 13px; }
.bars li { font-size: 13px; }
.case h3 { font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; line-height: 1.4; }
.case dl div { font-size: 14px; }
.mini-stats b { font-size: 26px; }
.mini-stats b small { font-size: 13px; }
.pillars h3 { font-size: 18px; font-weight: 700; }
.pillars p { font-size: 14px; }
.types h3 { font-size: 17px; font-weight: 700; }
.types p { font-size: 14px; }
.owner h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 700; }
.owner li { font-size: 15px; }
.plan .name { font-size: 19px; font-weight: 700; }
.plan .price { font-size: 34px; }
.plan li { font-size: 14px; }
.plan-notes b { font-size: 13px; }
.plan-notes p { font-size: 13px; }
.director .name b { font-size: 21px; }
.director p { font-size: 15px; }
.faq summary { font-size: 16px; font-weight: 600; padding: 20px 0; }
.faq .a { font-size: 14.5px; }
.contact .mail { font-size: clamp(18px, 2vw, 24px); }
.fx-t { font-size: 16px; }
@media (max-width: 860px) {
  body { font-size: 14px; }
  .section { padding: 56px 0; }
  .h2 { font-size: 21px; }
  .h2.one { font-size: 4.4vw; }
  .lead { font-size: 14px; }
  .hero-line { --hs: 4.3vw; }
  .tile-num, .tile-green .tile-num { font-size: 28px; }
  .case h3 { font-size: 3.9vw; white-space: nowrap; }
  .mini-stats b { font-size: 22px; }
  .owner h3 { font-size: 19px; }
  .faq summary { font-size: 15px; }
  .fc-t { font-size: 15px; }
}
@media (min-width: 861px) { .case h3 { white-space: nowrap; } }

/* 제목 포인트: 형광펜 밑줄 대신 글자색 */
.h2 .mark, .section.soft .h2 .mark, #process .h2 .mark { padding: 0; background: none; color: var(--forest); }
.dark .h2 .mark { color: var(--accent); }
.mark { background: none; color: var(--forest); font-weight: inherit; }
.dark .mark { color: var(--accent); }
@media (min-width: 861px) { .case h3 { font-size: clamp(18px, 1.45vw, 21px); } }

/* ===== 업종별 제작 편수 차트 ===== */
.tile-chart { background: #fff url("../assets/img/bg/tile-chart.jpg") right center / cover no-repeat; border: 1px solid rgba(31, 77, 44, 0.08); box-shadow: 0 1px 2px rgba(16, 40, 22, 0.04), 0 12px 32px -16px rgba(16, 40, 22, 0.14); }
.tile-chart::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0.6) 100%); }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; }
.chart-total { font-size: 13px; color: var(--muted); font-weight: 600; }
.chart-total b { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; margin: 0 1px; }
.share { display: flex; gap: 3px; height: 10px; margin-top: 16px; border-radius: 99px; overflow: hidden; }
.share i { width: var(--w); background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.tile.in .share i { transform: none; }
.tile-chart .bars { margin-top: 18px; gap: 0; }
.tile-chart .bars li { grid-template-columns: 8px 112px 1fr 44px 36px; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(31, 77, 44, 0.07); font-size: 13px; }
.tile-chart .bars li:first-child { border-top: 0; }
.tile-chart .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tile-chart .bar-name { font-weight: 600; color: var(--ink); }
.tile-chart .bar { height: 6px; border-radius: 99px; background: rgba(31, 77, 44, 0.07); }
.tile-chart .bar i, .tile-chart .bars li:first-child .bar i { border-radius: 99px; background: var(--c); }
.tile-chart .bars b { font-size: 14px; font-weight: 700; color: var(--ink); }
.tile-chart .bars b small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.tile-chart .bars em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .chart-total b { font-size: 16px; }
  .share { height: 8px; margin-top: 10px; }
  .tile-chart .bars { margin-top: 10px; }
  .tile-chart .bars li { grid-template-columns: 7px 84px 1fr 34px 28px; gap: 8px; padding: 6px 0; font-size: 12px; }
  .tile-chart .bars b { font-size: 12px; }
}

/* ===== 재생 버튼: 유튜브 스타일 ===== */
.yt .playbtn, .vcard .thumb .play span, .tile-green .tile-play {
  width: 68px; height: 48px; padding: 0; border-radius: 14px / 14px;
  background: #ff0033; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  display: grid; place-items: center; animation: none;
}
.yt .playbtn svg, .vcard .thumb .play svg { width: 30px; height: 30px; margin: 0; fill: #fff; }
.yt .playbtn svg path, .vcard .thumb .play svg path { fill: #fff; }
.yt:hover .playbtn { background: #ff0033; }
.vcard .thumb .play span { width: 56px; height: 40px; border-radius: 12px; }
.vcard .thumb .play svg { width: 26px; height: 26px; }
.tile-green .tile-play { fill: #fff; width: 60px; height: 42px; padding: 6px 15px; border-radius: 12px; right: 28px; bottom: 30px; }
.yt .playbtn { opacity: 0.94; }
.yt:hover .playbtn { opacity: 1; }

/* 타일 숫자 크기 통일 */
.tile-num, .tile-green .tile-num { font-size: clamp(44px, 4.6vw, 66px); }
@media (max-width: 860px) { .tile-num, .tile-green .tile-num { font-size: 28px; } }

/* 섹션 라벨 크게 */
.label { font-size: 17px; font-weight: 700; gap: 10px; color: var(--ink-2); }
.label b { font-size: 15px; }
.dark .label { color: rgba(255, 255, 255, 0.85); }
.label::after { width: 32px; }
.label.label-lg { font-size: clamp(20px, 2.2vw, 28px); }
#portfolio .tabs { margin-top: 28px; }
@media (max-width: 860px) {
  .label { font-size: 16px; }
  .label b { font-size: 14px; }
  .label.label-lg { font-size: 20px; }
}
@media (max-width: 860px) { .tile-green .tile-play { display: none; } }

/* 히어로 높이 축소 */
.hero { min-height: clamp(440px, 64vh, 640px); align-items: center; }
.hero .wrap { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero .wrap { padding-top: 72px; padding-bottom: 64px; }
}

/* 문의 섹션: 편집실 배경 + 전화 */
#contact { position: relative; overflow: hidden; }
#contact .contact-bg { position: absolute; inset: 0; z-index: 0; }
#contact .contact-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
#contact .contact-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dark) 0%, rgba(13, 13, 13, 0.82) 45%, rgba(13, 13, 13, 0.55) 100%); }
#contact .wrap { position: relative; z-index: 1; }
.contact .tel { display: block; width: fit-content; margin-top: 14px; font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: rgba(255, 255, 255, 0.85); letter-spacing: -0.01em; }
.contact .tel:hover { color: var(--accent); }
#contact .contact-bg { left: 35%; }
#contact .contact-bg img { opacity: 0.26; object-position: 75% center; }
#contact .contact-bg::after { background: linear-gradient(90deg, var(--dark) 0%, rgba(13, 13, 13, 0.7) 40%, rgba(13, 13, 13, 0.45) 100%); }
@media (max-width: 860px) { #contact .contact-bg { left: 0; } #contact .contact-bg img { opacity: 0.18; } }

/* ===== 히어로 리디자인 ===== */
.hero::before {
  background:
    linear-gradient(90deg, rgba(13, 13, 13, 0.97) 0%, rgba(13, 13, 13, 0.9) 34%, rgba(13, 13, 13, 0.5) 62%, rgba(13, 13, 13, 0.25) 100%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.35) 0%, rgba(13, 13, 13, 0) 40%, rgba(13, 13, 13, 0.85) 100%);
}
.hero-wall { inset: -14% -6% -14% 42%; opacity: 0.55; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.01em; margin-bottom: 22px; }
.hero-eyebrow .rec { width: 7px; height: 7px; border-radius: 50%; background: #e5362e; box-shadow: 0 0 0 4px rgba(229, 54, 46, 0.18); animation: recBlink 1.6s ease-in-out infinite; }
@keyframes recBlink { 50% { opacity: 0.35; } }
.hero .hero-line h1 { color: #fff; }
.hero .hero-line h1 em { color: rgba(255, 255, 255, 0.42); font-weight: 600; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 255, 255, 0.35); }
.hero-desc { margin-top: 18px; font-size: clamp(14px, 1.15vw, 16px); color: rgba(255, 255, 255, 0.6); line-height: 1.7; }
.hero-cta { margin-top: 30px; }
.hero .btn { border-radius: 10px; min-height: 50px; padding: 0 24px; }
.hero .btn.accent { box-shadow: none; }
.hero .btn.ghost { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(6px); }
.hero-proof { display: flex; gap: 0; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); width: fit-content; }
.hero-proof li { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 3px; padding: 0 32px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.hero-proof li:first-child { padding-left: 0; border-left: 0; }
.hero-proof b { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.hero-proof span { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.hero-proof small { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
@media (max-width: 860px) {
  .hero-wall { inset: -8% -28% -8% -12%; opacity: 0.3; }
  .hero::before { background: linear-gradient(180deg, rgba(13, 13, 13, 0.6) 0%, rgba(13, 13, 13, 0.82) 45%, rgba(13, 13, 13, 0.95) 100%); }
  .hero-eyebrow { font-size: 12px; margin-bottom: 14px; }
  .hero-desc { font-size: 13px; margin-top: 12px; }
  .hero-cta { margin-top: 22px; }
  .hero .btn { min-height: 44px; padding: 0 18px; }
  .hero-proof { margin-top: 30px; padding-top: 18px; width: 100%; }
  .hero-proof li { flex: 1; padding: 0 14px; }
  .hero-proof b { font-size: 20px; }
  .hero-proof span { font-size: 12px; }
  .hero-proof small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .hero-eyebrow .rec { animation: none; } }

/* 히어로: 이전 수치는 흐리게 */
.hero .hero-line h1 em, .hero .hero-line h1 em .wi { color: rgba(255, 255, 255, 0.45); font-weight: 600; text-decoration: none; }

/* 함께 만든 채널 */
.channels { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--dark-line); }
.channels-cap { font-size: 14px; font-weight: 600; color: var(--dark-muted); }
.channels ul { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.channels a { display: grid; grid-template-columns: 44px 1fr 16px; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.03); transition: border-color 0.25s, background 0.25s; }
.channels a:hover { border-color: rgba(171, 247, 131, 0.45); background: rgba(171, 247, 131, 0.05); }
.channels img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.channels b { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.channels small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--dark-muted); }
.channels svg { width: 16px; height: 16px; color: var(--dark-muted); }
.channels a:hover svg { color: var(--accent); }

/* 소개서 배너 */
.brochure { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 28px; margin-bottom: 64px; padding: 14px 28px 14px 14px; border-radius: 16px; background: #f4f3f1; color: var(--ink); }
.brochure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.brochure small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.brochure b { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.brochure em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: var(--ink-2); }
.brochure-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background 0.25s, color 0.25s; }
.brochure-btn svg { width: 16px; height: 16px; }
.brochure:hover .brochure-btn { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 860px) {
  .channels { margin-top: 36px; padding-top: 24px; }
  .channels ul { grid-template-columns: 1fr 1fr; gap: 8px; }
  .channels a { grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 12px; }
  .channels img { width: 36px; height: 36px; }
  .channels svg { display: none; }
  .channels b { font-size: 13px; }
  .channels small { font-size: 11px; }
  .brochure { grid-template-columns: 96px 1fr; gap: 14px; padding: 10px 14px 10px 10px; margin-bottom: 40px; }
  .brochure b { font-size: 16px; }
  .brochure em { display: none; }
  .brochure-btn { grid-column: 1 / -1; justify-content: center; }
}

/* =====================================================================
   4차: 소개서(PPT) 톤 — 흑백 베이스, 라임은 포인트로만
   ===================================================================== */
:root {
  --ink: #111111; --ink-2: #3b3b3b; --muted: #7a7a7a; --line: #e7e7e5;
  --soft: #f5f5f3; --dark: #0c0c0c; --dark-2: #161616;
  --dark-line: rgba(255, 255, 255, 0.1); --dark-muted: rgba(255, 255, 255, 0.58);
  --forest: #111111; --forest-2: #555555; --mint: #efefed; --lilac: #efefed; --violet: #555555;
}

/* 제목: 가는 글씨 + 굵은 강조 (색 대신 굵기로) */
.h2 { font-weight: 400; }
.h2 .mark, .section.soft .h2 .mark, #process .h2 .mark, .dark .h2 .mark { color: inherit; font-weight: 800; }
.mark, .dark .mark { color: inherit; font-weight: 700; }

/* 섹션 라벨: 번호만 라임 태그 */
.label b, .dark .label b { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--accent); color: #111; font-size: 12px; font-weight: 800; }
.label::after { background: currentColor; opacity: 0.25; }

/* 버튼: 흑백, 라임은 점 하나 */
.btn.accent, .hero .btn.accent { background: #fff; border-color: #fff; color: #111; box-shadow: none; }
.btn.accent:hover { background: #fff; border-color: var(--accent); }
.btn.accent::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #111; transition: background 0.25s; }
.btn.accent:hover::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(171, 247, 131, 0.25); }
.section:not(.dark) .btn.accent, .header .btn.accent, .mobile-nav .btn.accent { background: #111; border-color: #111; color: #fff; box-shadow: none; }
.section:not(.dark) .btn.accent::before, .header .btn.accent::before, .mobile-nav .btn.accent::before { background: var(--accent); }
.header .btn.accent:hover { background: #111; }
.btn { border-radius: 10px; }
.float-cta .fc-ask { background: #111; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.float-cta .fc-ask svg { color: var(--accent); }

/* 어두운 섹션: 가장자리에 은은한 라임 빛 */
.section.dark { background: radial-gradient(60% 50% at 0% 0%, rgba(171, 247, 131, 0.07), transparent 70%), radial-gradient(50% 45% at 100% 100%, rgba(171, 247, 131, 0.05), transparent 70%), var(--dark); }

/* 결과 타일: 흑백 사진 + 라임 숫자 */
.tile-green { background: #141414 url("../assets/img/bg/tile-green.jpg") center top / cover no-repeat; background-blend-mode: luminosity; color: #fff; }
.tile-green::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(12, 12, 12, 0.15) 0%, rgba(12, 12, 12, 0.25) 45%, rgba(12, 12, 12, 0.88) 100%); }
.tile-green .tile-num { color: var(--accent); }
.tile-green .tile-cap, .tile-green .tile-sub { color: rgba(255, 255, 255, 0.75); opacity: 1; }
.tile-line { background: #ededeb url("../assets/img/bg/tile-line.jpg") right top / cover no-repeat; background-blend-mode: luminosity; }
.tile-line .tile-num { color: #111; }
.tile-line .chips li { background: rgba(255, 255, 255, 0.85); color: #111; }
@media (max-width: 860px) {
  .tile-green::before { background: linear-gradient(180deg, rgba(12, 12, 12, 0.55), rgba(12, 12, 12, 0.85)); }
  .tile-line::before { background: linear-gradient(180deg, rgba(237, 237, 235, 0.85), rgba(237, 237, 235, 0.6)); }
}

/* 차트: 1위만 라임, 나머지는 회색 단계 */
.tile-chart .bars li:nth-child(2), .share i:nth-child(2) { --c: #2a2a2a !important; }
.tile-chart .bars li:nth-child(3), .share i:nth-child(3) { --c: #555 !important; }
.tile-chart .bars li:nth-child(4), .share i:nth-child(4) { --c: #808080 !important; }
.tile-chart .bars li:nth-child(5), .share i:nth-child(5) { --c: #a8a8a8 !important; }
.tile-chart .bars li:nth-child(6), .share i:nth-child(6) { --c: #cfcfcf !important; }
.tile-chart .bars li:first-child, .share i:first-child { --c: #8fe063 !important; }
.tile-chart { border-color: var(--line); }

/* 사례 태그: 검정 알약 대신 작은 검정 라벨 */
.case-tag, .case.flip .case-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; background: #111; color: #fff; font-size: 12px; }
.case-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mini-stats b small { color: var(--muted); }

/* 칩·태그 중립색 */
.chips li, .gear-groups ul li { background: #f3f3f1; border-color: var(--line); color: #222; }
.tabs button.on { background: #fff; border-color: #fff; color: #111; }
.tabs button.on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }

/* 연한 섹션은 회색 */
.section.soft { background: linear-gradient(180deg, var(--bg) 0, var(--soft) var(--fade), var(--soft) calc(100% - var(--fade)), var(--bg) 100%); }
.plan.hot { background: linear-gradient(170deg, #1a1a1a 0%, var(--dark-2) 60%); border-color: rgba(171, 247, 131, 0.55); box-shadow: none; }
.plan.hot .tier { border-radius: 6px; }

/* 사례: PDF 톤 제목 (가는 글씨 + 굵은 강조) */
.case + .case { margin-top: clamp(64px, 8vw, 110px); }
.case h3 { font-weight: 400; white-space: normal !important; font-size: clamp(20px, 1.9vw, 26px); }
.case h3 b { font-weight: 800; }
.case-tag::before { display: none; }
.case-tag, .case.flip .case-tag { background: var(--accent); color: #111; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 4px 9px; }
.case-sub { margin-top: 10px !important; font-size: 15px !important; color: var(--muted) !important; line-height: 1.6 !important; }
.case dl dd { line-height: 1.6; }
@media (max-width: 860px) { .case h3 { font-size: 19px; } .case-sub { font-size: 13.5px !important; } }

/* 대표 소개: 강점 3가지 */
.strengths { margin-top: 22px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.strengths li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.strengths b { font-weight: 700; color: var(--ink); }
.strengths span { color: var(--ink-2); line-height: 1.6; }
@media (max-width: 860px) { .strengths li { grid-template-columns: 1fr; gap: 4px; font-size: 13.5px; } }

/* ===== 소개 섹션 ===== */
.intro .h2 { max-width: none; }
.intro-body { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; padding-top: 32px; border-top: 1px solid var(--line); }
.intro-body p { font-size: 16px; line-height: 1.9; color: var(--ink-2); }
.intro-body .intro-sign { padding-left: 20px; border-left: 2px solid var(--accent); font-size: 17px; color: var(--ink); }
.intro-sign b { font-weight: 800; }
@media (max-width: 860px) {
  .intro-body { grid-template-columns: 1fr; margin-top: 24px; padding-top: 22px; }
  .intro-body p { font-size: 14px; }
  .intro-body p:first-child br { display: none; }
  .intro-body .intro-sign { font-size: 15px; }
}

/* 히어로 제목 */
.hero .hero-title { font-size: clamp(28px, 3.6vw, 52px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.25; white-space: nowrap; }
.hero .hero-title em, .hero .hero-title em .wi { font-style: normal; color: var(--accent); font-weight: 600; }
@media (max-width: 860px) { .hero .hero-title { font-size: 5.4vw; } }

/* 대표 소개 */
.director .name { display: flex; align-items: baseline; gap: 10px; }
.director .name span { font-size: 13px; letter-spacing: 0.04em; }
.facts { grid-template-columns: 1fr !important; }

/* ===== 섹션 전환 모션 (스크롤 연동, 위아래 모두) ===== */
.motion main > section { --p: 1; --q: 1; }
.motion main > .section.dark {
  clip-path: inset(calc((1 - var(--p)) * 7%) calc((1 - min(var(--p), var(--q))) * 5%) calc((1 - var(--q)) * 7%) calc((1 - min(var(--p), var(--q))) * 5%) round var(--seam));
}
.motion main > .section:not(.dark) > .wrap { opacity: calc(0.15 + min(var(--p), var(--q)) * 0.85); transform: translateY(calc((1 - var(--p)) * 60px)); }
.motion main > .section.dark > .wrap { transform: translateY(calc((1 - var(--p)) * 80px)); }
.motion .hero .wrap { transform: translateY(calc(var(--hy, 0) * 0.25px)); opacity: calc(1 - var(--hy, 0) / 700); }
.motion .hero-wall { translate: 0 calc(var(--hy, 0) * -0.15px); }

/* 라벨: 들어올 때 선이 그어짐 */
.label.reveal::after { width: 0; transition: width 0.9s var(--ease) 0.2s; }
.label.reveal.in::after { width: 32px; }
.label.in::after { animation: none; }

/* 제작 사례: 영상이 좌우에서 열리며 들어옴 */
.case.reveal, .case.reveal:not(.in) { opacity: 1; transform: none; }
.case .case-media { transition: transform 1s var(--ease), opacity 1s var(--ease), clip-path 1.1s var(--ease); clip-path: inset(0 0 0 0 round 14px); }
.case:not(.in) .case-media { opacity: 0; transform: translateX(-60px); clip-path: inset(0 30% 0 0 round 14px); }
.case.flip:not(.in) .case-media { transform: translateX(60px); clip-path: inset(0 0 0 30% round 14px); }
.case > div:last-child { transition: opacity 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s; }
.case:not(.in) > div:last-child { opacity: 0; transform: translateY(30px); }

/* 포트폴리오 카드 순차 등장 */
.grid-videos.reveal, .grid-videos.reveal:not(.in) { opacity: 1; transform: none; }
.motion #videoGrid .vcard { opacity: 0; transform: translateY(30px) scale(0.98); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.motion #videoGrid.in .vcard { opacity: 1; transform: none; }
.motion #videoGrid.in .vcard:nth-child(4n+2) { transition-delay: 0.06s; }
.motion #videoGrid.in .vcard:nth-child(4n+3) { transition-delay: 0.12s; }
.motion #videoGrid.in .vcard:nth-child(4n+4) { transition-delay: 0.18s; }
.channels li { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.channels:not(.in) li { opacity: 0; transform: translateY(16px); }
.channels.in li:nth-child(2) { transition-delay: 0.05s; } .channels.in li:nth-child(3) { transition-delay: 0.1s; } .channels.in li:nth-child(4) { transition-delay: 0.15s; } .channels.in li:nth-child(5) { transition-delay: 0.2s; } .channels.in li:nth-child(6) { transition-delay: 0.25s; }

/* 숏폼 폰 */
.phones.reveal .phone { transition: transform 1s var(--ease), opacity 1s var(--ease); }
.phones.reveal:not(.in) .phone:first-child { transform: translateY(60px) rotate(-6deg); opacity: 0; }
.phones.reveal:not(.in) .phone:last-child { transform: translateY(100px) rotate(6deg); opacity: 0; }

/* 섹션 레일 (넓은 화면) */
.sec-rail { position: fixed; left: 22px; top: 50%; z-index: 40; display: grid; gap: 4px; transform: translate(-12px, -50%); opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s var(--ease); }
.sec-rail.show { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.sec-rail a { display: flex; align-items: center; gap: 8px; height: 22px; color: rgba(17, 17, 17, 0.35); font-size: 11px; font-weight: 700; }
.sec-rail a::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: width 0.35s var(--ease), background 0.35s; }
.sec-rail b { font-weight: 800; letter-spacing: 0.02em; }
.sec-rail span { opacity: 0; transform: translateX(-4px); transition: opacity 0.3s, transform 0.3s var(--ease); white-space: nowrap; }
.sec-rail a.on { color: #111; }
.sec-rail a.on::before { width: 28px; background: var(--accent); }
.sec-rail a.on span, .sec-rail a:hover span { opacity: 1; transform: none; }
.sec-rail.on-dark a { color: rgba(255, 255, 255, 0.35); }
.sec-rail.on-dark a.on { color: #fff; }
@media (max-width: 1360px) { .sec-rail { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .case:not(.in) .case-media, .case:not(.in) > div:last-child, .channels:not(.in) li, .phones.reveal:not(.in) .phone { opacity: 1; transform: none; clip-path: none; }
}

/* 가로 넘침 방지 */
main { overflow-x: clip; }

/* ===== 5차: Codex 검토 반영 + 태그 정리 ===== */
:root { --muted: #666666; }
html { scroll-padding-top: 88px; }

/* 업종 태그: 색 덩어리 대신 얇은 선 + 자간 넓은 영문 */
.case-tag, .case.flip .case-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; border-radius: 0; background: none; color: #111;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
}
.case-tag::before { display: block; content: ""; width: 22px; height: 2px; border-radius: 0; background: var(--accent); }

/* 사례별 관련 영상 썸네일 */
.case-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.case-more a { display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 9; background: #eee; }
.case-more img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.4s; filter: saturate(0.85); }
.case-more a:hover img { transform: scale(1.06); filter: none; }
.motion .case-more a { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.motion .case.in .case-more a { opacity: 1; transform: none; }
.motion .case.in .case-more a:nth-child(1) { transition-delay: 0.35s; }
.motion .case.in .case-more a:nth-child(2) { transition-delay: 0.42s; }
.motion .case.in .case-more a:nth-child(3) { transition-delay: 0.49s; }

/* 진행 과정 소제목 */
.sub-h { margin-top: 18px; }
h2.label { margin: 0; }

/* 히어로 배지 */
.hero-badge { display: inline-block; margin-bottom: 18px; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.02em; }
.hero-badge + .hero-eyebrow { display: flex; width: fit-content; }

/* 히어로 제목: 모바일은 자연스럽게 줄바꿈 */
.hero-grid > div { min-width: 0; }
@media (max-width: 860px) {
  .hero .hero-title { white-space: normal; word-break: keep-all; font-size: clamp(26px, 7vw, 34px); line-height: 1.3; }
}

/* 단어 리빌: 블러·회전 없이 짧고 단정하게 */
.split .wi { transform: translateY(100%); filter: none; opacity: 0; transition: transform 0.5s var(--ease), opacity 0.3s linear; transition-delay: calc(var(--i, 0) * 30ms); }
.split.in .wi { transform: none; opacity: 1; }

/* 모서리: 알약 형태 제거 */
.tabs button, .float-cta a { border-radius: 8px; }
.tabs button { min-height: 40px; }
.float-cta a { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }

/* 레일: 숨겨졌을 때 키보드 포커스 차단 */
.sec-rail { visibility: hidden; }
.sec-rail.show { visibility: visible; }
.sec-rail a { min-height: 28px; color: #777; }
.sec-rail.on-dark a { color: #9a9a9a; }
.sec-rail a:focus-visible span { opacity: 1; transform: none; }

/* 포커스 표시 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* 폼: iOS 확대 방지 */
.form input, .form select, .form textarea { font-size: 16px; }

/* 대표·숏폼 제목 모바일 폭 */
@media (max-width: 860px) { .director .h2, .shorts .h2 { max-width: none; } .case-more { gap: 6px; margin-top: 16px; } }

/* JS가 없거나 모션 감소일 때는 처음부터 보이게 */
html:not(.motion) .reveal, html:not(.motion) .split .wi { opacity: 1; transform: none; }
html:not(.motion) .case .case-media, html:not(.motion) .case > div:last-child, html:not(.motion) .channels li, html:not(.motion) .phones .phone { opacity: 1; transform: none; clip-path: none; }

/* 섹션 번호: 박스 없이 숫자 + 구분선 */
.label b, .dark .label b {
  display: inline-flex; align-items: center; gap: 12px; min-width: 0; height: auto; padding: 0;
  border-radius: 0; background: none; color: var(--muted);
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
}
.dark .label b { color: rgba(255, 255, 255, 0.5); }
.label b::after { content: ""; width: 1px; height: 12px; background: currentColor; opacity: 0.45; }
.label { gap: 12px; }
.label::after { height: 2px; background: var(--accent); opacity: 1; }
.label.reveal.in::after { width: 24px; }

/* ===== 6차: 섹션별 배경 이미지 (소개서 사진) ===== */
main > section { position: relative; isolation: isolate; }
main > section > .wrap { position: relative; z-index: 1; }
.sec-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sec-bg::before { content: ""; position: absolute; inset: -8% 0; background-repeat: no-repeat; background-size: cover; translate: 0 calc((1 - var(--p, 1)) * 60px); transition: translate 0.1s linear; }
.sec-bg::after { content: ""; position: absolute; inset: 0; }

/* 01 소개: 밝은 스튜디오 사진이 오른쪽에서 번져 나옴 */
#about .sec-bg::before { left: 35%; background-image: url("../assets/img/bg/sec-intro.jpg"); background-position: right center; filter: grayscale(1) contrast(1.05); opacity: 0.55; }
#about .sec-bg::after { background: linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.15) 100%), linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 30%); }
.intro { padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px); }
.intro .h2 { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.32; }
.intro-body { border-top: 0; padding-top: 0; margin-top: 44px; max-width: 980px; }
.intro-body p:first-child { padding-top: 26px; border-top: 1px solid rgba(17, 17, 17, 0.12); }
.intro-body .intro-sign { padding: 22px 0 0 22px; border-left: 2px solid var(--accent); font-size: 18px; line-height: 1.75; }

/* 02 포트폴리오: 소개서와 같은 썸네일 모자이크가 위쪽에 깔림 */
#portfolio .sec-bg::before { inset: 0 0 auto 0; height: 520px; background-image: url("../assets/img/bg/sec-portfolio.jpg"); background-position: center top; filter: grayscale(0.6) brightness(0.55); opacity: 0.55; }
#portfolio .sec-bg::after { background: linear-gradient(180deg, rgba(12, 12, 12, 0.35) 0%, rgba(12, 12, 12, 0.85) 300px, var(--dark) 520px); }

/* 03 제작 사례: 흐린 카메라 사진 */
#cases .sec-bg::before { inset: 0 0 auto 0; height: 900px; background-image: url("../assets/img/bg/sec-cases.jpg"); background-position: center top; filter: grayscale(1); opacity: 0.5; }
#cases .sec-bg::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.85) 420px, #fff 900px); }

/* 04 릴스: 어두운 스튜디오 */
#shorts .sec-bg::before { background-image: url("../assets/img/bg/sec-shorts.jpg"); background-position: center; opacity: 0.4; }
#shorts .sec-bg::after { background: linear-gradient(90deg, rgba(12, 12, 12, 0.55) 0%, rgba(12, 12, 12, 0.75) 50%, rgba(12, 12, 12, 0.92) 100%); }
#shorts { color: #fff; border-radius: var(--seam); }
#shorts .types li { border-color: var(--dark-line); }
#shorts .types h3 { color: #fff; }
#shorts .types p { color: var(--dark-muted); }
#shorts .types .n { color: var(--accent); }

/* 06 대표 소개: 밝은 스튜디오 */
#director .sec-bg::before { background-image: url("../assets/img/studio.jpg"); background-position: left center; filter: grayscale(1); opacity: 0.35; right: 40%; }
#director .sec-bg::after { background: linear-gradient(90deg, rgba(245, 245, 243, 0.4) 0%, rgba(245, 245, 243, 0.9) 45%, var(--soft) 70%), linear-gradient(180deg, var(--bg) 0, transparent 140px, transparent calc(100% - 140px), var(--bg) 100%); }

/* 05 진행 과정: 소개서 3D 아이콘 */
.flowx-list button { position: relative; }
.fx-ic { position: absolute; right: 14px; top: 50%; width: 48px; height: 48px; object-fit: contain; translate: 0 -50%; opacity: 0.35; filter: grayscale(1); transition: opacity 0.4s, filter 0.4s, transform 0.5s var(--ease); }
.flowx-list li.on .fx-ic { opacity: 1; filter: none; transform: scale(1.12) rotate(-6deg); }
@media (max-width: 860px) { .fx-ic { display: none; } }

@media (max-width: 860px) {
  #about .sec-bg::before { left: 0; opacity: 0.3; }
  #about .sec-bg::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), #fff 70%); }
  #portfolio .sec-bg::before { height: 320px; }
  #portfolio .sec-bg::after { background: linear-gradient(180deg, rgba(12, 12, 12, 0.4) 0%, var(--dark) 320px); }
  #cases .sec-bg::before { height: 520px; }
  #director .sec-bg::before { right: 0; opacity: 0.2; }
  .intro-body .intro-sign { font-size: 15px; }
}
.sub-h, #shorts .h2 { max-width: none; }
#shorts .h2 { font-size: clamp(22px, 2.3vw, 32px); }

/* 문의: 폼 제거 후 한 단 구성 */
.contact { grid-template-columns: 1fr !important; }
.contact > div { max-width: 640px; }

/* =====================================================================
   7차: '왜 유튜브 대행인가' 중심 개편 (2026-10-30 클라이언트 요청)
   고민 공감 · 도입 전/후 · 작업 범위 6칸 · 채널별 성과 카드 · 크몽 고정 버튼
   ===================================================================== */
:root {
  --fs-body: clamp(16px, 0.35vw + 14.8px, 18px);
  --fs-h2: clamp(28px, 2.4vw + 16px, 50px);
  --fs-h3: clamp(19px, 0.6vw + 16px, 24px);
  --danger: #c8463c;
  --danger-soft: #f8e7e5;
  --quick-h: 0px;
}
body { font-size: var(--fs-body); -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 글자 크기 전반 상향 */
.h2 { font-size: var(--fs-h2); line-height: 1.3; }
.intro .h2 { font-size: var(--fs-h2); }
.label { font-size: clamp(16px, 0.3vw + 15px, 19px); }
.label b, .dark .label b { font-size: 14px; }
.lead { font-size: clamp(16px, 0.4vw + 14.5px, 20px); line-height: 1.75; }
.intro-body { grid-template-columns: 1fr; max-width: 860px; }
.intro-body p { font-size: clamp(16px, 0.4vw + 14.6px, 19px); line-height: 1.9; }
.vcard .t { font-size: clamp(15px, 0.2vw + 14px, 17px); line-height: 1.5; }
.vcard .m { font-size: 14px; }
.types h3 { font-size: clamp(18px, 0.4vw + 16px, 21px); }
.types p { font-size: clamp(15px, 0.2vw + 14px, 17px); }
.fx-t { font-size: clamp(16px, 0.4vw + 15px, 19px); }
.fx-d { font-size: 15.5px; }
.strengths li { font-size: clamp(15px, 0.2vw + 14.4px, 17px); }
.facts b { font-size: 14px; }
.facts span { font-size: 16px; }
.director .name b { font-size: clamp(22px, 0.6vw + 19px, 28px); }
.channels b { font-size: 16px; }
.channels small { font-size: 13.5px; }
.tabs button { font-size: 14.5px; }

/* 강조: 더 굵게, 라임 형광 표시 */
.mark, .h2 .mark, .section.soft .h2 .mark, #process .h2 .mark {
  font-weight: 800; color: inherit; padding: 0 0.04em;
  background: linear-gradient(transparent 58%, rgba(171, 247, 131, 0.9) 58%, rgba(171, 247, 131, 0.9) 94%, transparent 94%);
  background-size: 100% 100%; background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dark .mark, .dark .h2 .mark, #shorts .mark { color: var(--accent); background: none; padding: 0; font-weight: 800; }

/* ---------- 히어로: 썸네일 벽은 그대로, 더 어둡게 ---------- */
.hero { min-height: clamp(560px, calc(100svh - 72px), 920px); align-items: center; }
.hero::before {
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.86) 42%, rgba(10, 10, 10, 0.7) 75%, rgba(10, 10, 10, 0.6) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.92) 100%);
}
.hero-wall { opacity: 0.6; filter: saturate(0.5) brightness(0.8); }
.hero-badge { font-size: 13px; padding: 6px 12px; margin-bottom: 26px; color: rgba(255, 255, 255, 0.85); border-color: rgba(171, 247, 131, 0.45); letter-spacing: 0.04em; }
.hero .hero-title { font-size: clamp(32px, 3.6vw + 12px, 68px); font-weight: 500; line-height: 1.24; letter-spacing: -0.04em; }
.hero .hero-title em, .hero .hero-title em .wi { color: var(--accent); font-weight: 800; }
.hero-desc { margin-top: 26px; max-width: 46em; font-size: clamp(16px, 0.5vw + 14px, 20px); line-height: 1.75; color: rgba(255, 255, 255, 0.8); }
.hero-cta { margin-top: 36px; }
.hero .btn { min-height: 56px; padding: 0 28px; font-size: 16.5px; }

/* ---------- 01 고민 공감 ---------- */
.pains { padding-bottom: clamp(80px, 9vw, 140px); }
#why .sec-bg::before { left: 50%; background-position: right center; filter: grayscale(1); opacity: 0.32; }
#why .sec-bg::after { background: linear-gradient(90deg, #fff 0%, #fff 50%, rgba(255, 255, 255, 0.82) 70%, rgba(255, 255, 255, 0.55) 100%), linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 35%); }
.pains .h2 { max-width: 22em; }
.pain-list { margin-top: clamp(36px, 4vw, 60px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
.pain-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: clamp(24px, 2.4vw, 34px) 0; border-top: 1px solid rgba(17, 17, 17, 0.14); }
.pain-x { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-size: 22px; font-weight: 800; line-height: 1; transition: transform 0.7s var(--ease) 0.15s, opacity 0.5s 0.15s; }
.pain-list h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.03em; line-height: 1.4; color: var(--ink); }
.pain-list p { margin-top: 10px; font-size: clamp(15.5px, 0.3vw + 14.5px, 18px); line-height: 1.75; color: var(--ink-2); }
.motion .pain-list li.reveal:not(.in) .pain-x { transform: scale(0.6) rotate(-45deg); opacity: 0; }

/* ---------- 02 도입 전 / 후 ---------- */
#change .sec-bg::before { background-position: center; filter: grayscale(1); opacity: 0.22; }
#change .sec-bg::after { background: linear-gradient(180deg, rgba(12, 12, 12, 0.6) 0%, rgba(12, 12, 12, 0.85) 60%, rgba(12, 12, 12, 0.95) 100%); }
.vs { --g: clamp(14px, 2vw, 28px); position: relative; margin-top: clamp(32px, 4vw, 52px); }
.vs::before, .vs::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(50% - var(--g) / 2); border-radius: 18px; pointer-events: none; }
.vs::before { left: 0; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); }
.vs::after { right: 0; background: linear-gradient(180deg, rgba(171, 247, 131, 0.13), rgba(171, 247, 131, 0.05)); border: 1px solid rgba(171, 247, 131, 0.5); }
.vs-head, .vs-rows li { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.vs-h { display: flex; align-items: center; gap: 12px; padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.6vw, 40px) 14px; font-size: clamp(21px, 1vw + 16px, 30px); font-weight: 800; letter-spacing: -0.03em; }
.vs-h.is-before { color: rgba(255, 255, 255, 0.6); }
.vs-h.is-after { color: var(--accent); }
.vs-rows li p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: clamp(18px, 1.8vw, 24px) clamp(22px, 2.6vw, 40px); border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: clamp(16px, 0.4vw + 14.6px, 19px); line-height: 1.6; }
.vs-rows li:last-child p { padding-bottom: clamp(26px, 2.6vw, 36px); }
.vs-rows .is-before { color: rgba(255, 255, 255, 0.55); }
.vs-rows .is-after { color: #fff; font-weight: 700; border-top-color: rgba(171, 247, 131, 0.18); }
.vs-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 800; line-height: 1; flex: none; }
.vs-rows .vs-ic { margin-top: 0.1em; }
.is-before .vs-ic { background: rgba(232, 104, 95, 0.16); color: #ef8a82; }
.is-after .vs-ic { background: var(--accent); color: #111; }
.vs-h .vs-ic { width: 34px; height: 34px; font-size: 17px; }
.motion .vs.reveal { opacity: 1; transform: none; }
.motion .vs .vs-rows .is-after { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.motion .vs:not(.in) .vs-rows .is-after { opacity: 0; transform: translateX(-24px); }
.motion .vs.in .vs-rows li:nth-child(2) .is-after { transition-delay: 0.1s; }
.motion .vs.in .vs-rows li:nth-child(3) .is-after { transition-delay: 0.2s; }
.motion .vs.in .vs-rows li:nth-child(4) .is-after { transition-delay: 0.3s; }

/* ---------- 04 작업 범위 6칸 ---------- */
#work .sec-bg::before { background-position: center; filter: grayscale(1); opacity: 0.18; }
#work .sec-bg::after { background: linear-gradient(180deg, rgba(12, 12, 12, 0.7), rgba(12, 12, 12, 0.94)); }
.work .h2 { max-width: none; }
.work-grid { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.work-grid li { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(240px, 22vw, 300px); padding: clamp(24px, 2.4vw, 34px); border-radius: 18px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1); transition: border-color 0.35s, transform 0.5s var(--ease), background 0.35s; }
.work-grid li.has-img { background-color: #141414; background-position: center; background-size: cover; background-repeat: no-repeat; }
.work-grid li.has-img::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(12, 12, 12, 0.3) 0%, rgba(12, 12, 12, 0.78) 55%, rgba(12, 12, 12, 0.94) 100%); }
.work-grid li > * { position: relative; z-index: 1; }
.wk-n { font-size: 15px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.wk-c { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.work-grid h3 { margin-top: auto; padding-top: 28px; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; color: #fff; }
.work-grid p { margin-top: 10px; font-size: clamp(15px, 0.25vw + 14.2px, 17px); line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
@media (hover: hover) and (pointer: fine) {
  .work-grid li:hover { border-color: rgba(171, 247, 131, 0.6); transform: translateY(-4px); }
}
.motion .work-grid li.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), border-color 0.35s; }
.motion .work-grid li:nth-child(3n+2) { transition-delay: 0.07s; }
.motion .work-grid li:nth-child(3n+3) { transition-delay: 0.14s; }

/* ---------- 05 제작 사례: 채널별 카드 ---------- */
.proof-list { container-type: inline-size; margin-top: clamp(32px, 4vw, 52px); display: grid; gap: clamp(18px, 2vw, 28px); }
.proof-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.2vw, 52px); align-items: center; padding: clamp(18px, 2vw, 28px); border-radius: 22px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); box-shadow: 0 20px 50px -30px rgba(17, 17, 17, 0.28); }
.proof-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.proof-thumbs a { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9; background: #e9e9e7; }
.proof-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.proof-body { padding-right: clamp(0px, 1vw, 12px); }
.proof-ch { display: flex; align-items: center; gap: 14px; width: 100%; }
.proof-ch img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); }
.proof-ch span { min-width: 0; }
.proof-ch b { display: block; font-size: clamp(20px, 0.8vw + 16px, 26px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.proof-ch small { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); }
.proof-ch small i { font-style: normal; margin: 0 8px; opacity: 0.4; }
.proof-ch svg { width: 22px; height: 22px; margin-left: auto; flex: none; color: var(--muted); transition: color 0.25s, transform 0.35s var(--ease); }
.proof-desc { margin-top: 18px; font-size: clamp(15.5px, 0.3vw + 14.4px, 17.5px); line-height: 1.75; color: var(--ink-2); }
.proof-stats { margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid #111; }
.proof-stats div { padding: 16px 14px 0; border-left: 1px solid var(--line); }
.proof-stats div:first-child { padding-left: 0; border-left: 0; }
.proof-stats dt { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.proof-stats dd { margin: 6px 0 0; font-size: clamp(18px, 1vw + 13px, 27px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.25; color: var(--ink); }
.proof-stats div:first-child dd { width: fit-content; font-size: clamp(24px, 1.6vw + 14px, 38px); line-height: 1.1; background: linear-gradient(transparent 62%, rgba(171, 247, 131, 0.9) 62%, rgba(171, 247, 131, 0.9) 96%, transparent 96%); }
@media (hover: hover) and (pointer: fine) {
  .proof-thumbs a:hover img { transform: scale(1.06); }
  .proof-ch:hover svg { color: #111; transform: translate(2px, -2px); }
}
@container (max-width: 820px) {
  .proof-card { grid-template-columns: 1fr; }
  .proof-body { padding: 0 4px 6px; }
}
@container (max-width: 420px) {
  .proof-stats div, .proof-stats div:first-child { padding: 14px 8px 0; border-left: 1px solid var(--line); }
  .proof-stats div:first-child { padding-left: 0; border-left: 0; }
  .proof-stats dt { font-size: 12.5px; }
  .proof-stats dd { font-size: 15.5px; }
  .proof-stats div:first-child dd { font-size: 24px; }
}
#cases .sec-bg::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.86) 420px, #f7f7f5 900px, #f7f7f5 100%); }

/* ---------- 10 마무리 ---------- */
#contact .h2 { font-size: clamp(28px, 2.8vw + 16px, 56px); line-height: 1.28; max-width: 20em; }
#contact .lead { color: rgba(255, 255, 255, 0.8); max-width: 40em; }
.contact > div { max-width: 980px; }

/* ---------- 크몽 견적 고정 버튼 ---------- */
.quick-cta { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 45; transition: opacity 0.35s, transform 0.45s var(--ease), visibility 0.35s; }
.quick-cta a { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 22px 0 26px; border-radius: 12px; background: var(--accent); color: #111; font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(17, 17, 17, 0.08); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.quick-cta svg { width: 20px; height: 20px; flex: none; }
.quick-cta a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .quick-cta a:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5); } }
.quick-cta.off { opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; }
body.menu-open .quick-cta { display: none; }

/* ---------- 넓은 화면 ---------- */
@media (min-width: 1600px) {
  :root { --w: 1440px; }
  .work-grid li { min-height: 320px; }
}

/* ---------- 태블릿 ---------- */
@media (max-width: 1024px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion .work-grid li { transition-delay: 0s !important; }
}

/* ---------- 모바일 ---------- */
@media (max-width: 767px) {
  :root { --quick-h: calc(76px + env(safe-area-inset-bottom)); }
  .hero { min-height: calc(100svh - 64px); align-items: flex-end; }
  .hero .hero-title { font-size: clamp(28px, 8.2vw, 38px); line-height: 1.3; }
  .hero-desc { font-size: 16px; }
  .hero-desc br { display: none; }
  .hero-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero .btn { padding: 0 12px; font-size: 15px; justify-content: center; white-space: nowrap; }
  .pain-list { grid-template-columns: 1fr; }
  .pain-list li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .pain-x { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
  #why .sec-bg::before { left: 0; opacity: 0.16; }
  #why .sec-bg::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), #fff 60%); }
  .vs::before, .vs::after { display: none; }
  .vs-head { gap: 8px; }
  .vs-h { padding: 0 0 14px; font-size: 16px; gap: 8px; }
  .vs-h .vs-ic { width: 24px; height: 24px; font-size: 12px; }
  .vs-rows { display: grid; gap: 12px; }
  .vs-rows li { grid-template-columns: 1fr; gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(171, 247, 131, 0.35); }
  .vs-rows li p, .vs-rows li:last-child p { padding: 16px 18px; border-top: 0; font-size: 15.5px; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
  .vs-rows .is-before { background: rgba(255, 255, 255, 0.04); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); }
  .vs-rows .is-after { background: rgba(171, 247, 131, 0.1); }
  .vs-rows .vs-ic { width: 24px; height: 24px; font-size: 12px; }
  .work-grid { grid-template-columns: 1fr; }
  .work-grid li { min-height: 0; }
  .work-grid h3 { padding-top: 18px; }
  .proof-card { border-radius: 18px; }
  .quick-cta { left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(12, 12, 12, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .quick-cta a { width: 100%; justify-content: center; min-height: 54px; font-size: 16px; box-shadow: none; }
  .quick-cta.off { transform: translateY(100%); }
  .footer { padding-bottom: calc(var(--quick-h) + 24px); }
}

/* 가로모드 휴대폰 */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero .wrap { padding-top: 40px; padding-bottom: 40px; }
  .quick-cta { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: 12px; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .quick-cta a { width: auto; min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-cta, .work-grid li, .pain-x, .vs .is-after { transition: none !important; }
}