/* 젠느 사이트 공통 — 값은 모두 tokens.css에서 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, dl, dd, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; }
::selection { background: var(--rec); color: var(--text-on-ink); }
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 20;
  background: var(--paper); color: var(--text); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-btn); font-weight: var(--weight-strong); text-decoration: none;
}
.skip:focus { top: var(--sp-3); }
[data-tone="ink"] :focus-visible, .hero :focus-visible { outline-color: var(--text-on-ink); }

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

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--sp-5);
  border-radius: var(--radius-btn);
  font-weight: var(--weight-strong); font-size: var(--fs-body);
  text-decoration: none; line-height: 1.2;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--rec { background: var(--rec); color: var(--text-on-ink); }
.btn--rec:active { background: var(--rec-press); }
@media (hover: hover) and (pointer: fine) { .btn--rec:hover { background: var(--rec-press); } .btn--ink:hover { background: var(--ink); } }
.btn--ink { background: var(--text); color: var(--paper); }
.btn--sm { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-small); }

.link-on-ink {
  color: var(--text-on-ink); font-weight: var(--weight-strong);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
  min-height: 48px; display: inline-flex; align-items: center;
}
.link-on-ink { transition: transform var(--dur-fast) var(--ease-out); }
.link-on-ink:active { transform: scale(0.97); }
.link-on-ink:hover { text-decoration-color: var(--rec-on-ink); }

/* ---------- 상단 바 ---------- */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  color: var(--text-on-ink);
}
.bar__in {
  display: flex; align-items: center; gap: var(--sp-5);
  max-width: var(--max); margin: 0 auto;
  padding: var(--sp-4) var(--gutter);
}
.bar__brand { display: flex; align-items: center; gap: var(--sp-4); min-height: 44px; text-decoration: none; margin-right: auto; }
.bar__brand img { width: 94px; height: auto; }
.bar__desc { font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.bar__nav { display: flex; gap: var(--sp-5); }
.bar__nav a {
  text-decoration: none; font-size: var(--fs-small); font-weight: var(--weight-strong);
  color: var(--text-on-ink); padding: var(--sp-3) 0;
}
.bar__nav a:hover { color: var(--text-sub-on-ink); }
.bar__toggle { display: none; }

@media (max-width: 1023px) {
  .bar__desc { display: none; }
  .bar__toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3);
    background: none; border: 0; color: var(--text-on-ink);
    font: inherit; font-size: var(--fs-small); font-weight: var(--weight-strong); cursor: pointer;
  }
  .bar__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--ink); padding: var(--sp-2) var(--gutter) var(--sp-5);
  }
  .bar__nav.is-open { display: flex; }
  .bar__nav a { font-size: var(--fs-lead); padding: var(--sp-3) 0; }
}

/* ---------- 1. 히어로 ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--ink); color: var(--text-on-ink);
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* 글자 아래 영상을 한 톤 낮추는 평평한 막(그라데이션 아님) */
.hero__media::after { content: ""; position: absolute; inset: 0; background: rgb(14 14 16 / 0.5); }

.hero__in {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 120px var(--gutter) var(--sp-6);
}
.hero__title {
  font-size: clamp(30px, 8.2vw, 88px);
  font-weight: var(--weight-title);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.hero__lead {
  text-wrap: pretty;
  margin-top: var(--sp-5);
  max-width: 34em;
  font-size: var(--fs-lead);
  color: var(--text-on-ink);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }

/* 재생 진행 바: 쇼릴 재생 위치를 그대로 따라간다 */
.playbar { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-8); }
.playbar__toggle {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  margin-left: -13px;
  background: none; border: 0; color: var(--text-on-ink); cursor: pointer; border-radius: var(--radius-btn);
}
.playbar__toggle .i-play { display: none; }
.playbar__toggle[aria-pressed="true"] .i-play { display: block; }
.playbar__toggle[aria-pressed="true"] .i-pause { display: none; }
.playbar__track { flex: 1; height: 2px; background: var(--line-on-ink); position: relative; overflow: hidden; }
.playbar__fill {
  position: absolute; inset: 0; background: var(--rec-on-ink);
  transform-origin: left; transform: scaleX(var(--p, 1));
}
.js .playbar__fill { --p: 0; }
.playbar__label { flex: none; font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.playbar__label .mono { color: var(--rec-on-ink); font-weight: 500; }

/* ---------- 2. 숫자 줄 ---------- */
.stats { background: var(--ink); color: var(--text-on-ink); padding: var(--sp-8) 0 var(--section-y); }
.stats__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.stat { display: flex; flex-direction: column; gap: var(--sp-2); }
.stat__num {
  font-size: var(--fs-stat); font-weight: var(--weight-title);
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  margin-bottom: var(--sp-3);
}
.stat__unit { font-size: 0.5em; margin-left: 0.08em; letter-spacing: 0; }
.stat__what { font-size: var(--fs-body); }
.stat__note { font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.stats__source { max-width: 60ch; margin-top: var(--sp-8); font-size: var(--fs-label); color: var(--text-sub-on-ink); line-height: 1.6; }

@media (max-width: 899px) {
  .stats { padding-top: var(--sp-7); }
  .stats__list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-5); }
}

/* ---------- 3. 세 가지 입구 ---------- */
.doors { background: var(--paper); padding: var(--section-y) 0; }
.doors__title {
  font-size: var(--fs-h2); font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title); line-height: var(--leading-title);
  margin-bottom: var(--sp-8);
}
.doors__list { display: flex; flex-direction: column; gap: var(--sp-8); }
.door { display: flex; flex-direction: column; align-items: flex-start; }
.door__thumb { width: 100%; margin-bottom: var(--sp-5); }
.door__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); }
.door__name {
  font-size: var(--fs-h3); font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title); line-height: var(--leading-title);
}
.door__name a { display: inline-block; padding: 10px 0; margin: -10px 0; text-decoration: none; }
.door__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.door__line { margin-top: var(--sp-3); font-size: var(--fs-lead); font-weight: var(--weight-strong); }
.door__body { margin-top: var(--sp-2); }
.door__proof { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-sub); }
.door .btn { margin-top: var(--sp-5); }
.doors__stage { display: none; }

@media (min-width: 1024px) {
  .doors__grid {
    display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--sp-9);
    align-items: start;
  }
  .doors__title { grid-column: 1 / -1; }
  .doors__list { gap: var(--sp-8); }
  .doors__title { margin-bottom: var(--sp-8); }
  .door__thumb { display: none; }
  /* 손대지 않은 입구는 한 단계 낮춘다(대비 6.2 유지) */
  .door .door__name, .door .door__line { color: var(--text-sub); transition: color var(--dur) var(--ease-out); }
  .door.is-active .door__name, .door.is-active .door__line { color: var(--text); }
  .doors__stage { display: block; position: sticky; top: var(--sp-7); }
  .stage__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: var(--ink); }
  .stage__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; filter: blur(6px); transform: scale(1.02);
    transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .stage__img.is-on { opacity: 1; filter: none; transform: none; }
  .stage__cap { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--text-sub); }
}

/* ---------- 4. 문제 + 비교표 ---------- */
.why { background: var(--paper); padding: 0 0 var(--section-y); }
.why__grid { display: grid; gap: var(--sp-7); }
.why__title {
  font-size: var(--fs-h2); font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title); line-height: var(--leading-title);
  text-wrap: balance;
}
.why__body { font-size: var(--fs-lead); max-width: 30em; }
.br-pc { display: none; }

/* 표는 정보 구분이라 1px 선 사용(가이드 4장) */
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.compare th, .compare td { padding: var(--sp-4) 0; border-bottom: var(--border) solid var(--line); text-align: left; font-weight: var(--weight-body); }
.compare thead th { font-size: var(--fs-small); color: var(--text-sub); padding-top: 0; }
.compare thead th:last-child { color: var(--text); font-weight: var(--weight-strong); }
.compare td { width: 6.5em; text-align: center; }
@media (max-width: 479px) { .compare td { width: 4.25em; } .compare thead th { font-size: var(--fs-label); } }
.compare thead th:not(:first-child) { text-align: center; }
.compare tbody th { font-weight: var(--weight-strong); }
.yes, .no { display: inline-block; width: 22px; height: 22px; vertical-align: middle; }
.yes { background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; color: var(--text); }
.no { background: currentColor; -webkit-mask: var(--i-dash) center / contain no-repeat; mask: var(--i-dash) center / contain no-repeat; color: var(--text-sub); }
:root {
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
  .why__grid { grid-template-columns: 5fr 7fr; column-gap: var(--sp-9); row-gap: var(--sp-8); align-items: start; }
  .why__title { grid-column: 1 / -1; }
  .br-pc { display: inline; }
}

/* ---------- 4-1. 썸네일 벽 ---------- */
.wall { background: var(--ink); color: var(--text-on-ink); padding: var(--section-y) 0; overflow: hidden; }
.wall__head { display: grid; gap: var(--sp-4) var(--sp-7); align-items: end; margin-bottom: var(--sp-8); }
.wall__num {
  font-size: var(--fs-stat); font-weight: var(--weight-title);
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.wall__lead { font-size: var(--fs-lead); max-width: 26em; text-wrap: pretty; }
.wall__note { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
@media (min-width: 900px) { .wall__head { grid-template-columns: auto 1fr auto; } .wall__toggle { justify-self: end; } }

.wall__rows { display: flex; flex-direction: column; gap: 8px; }
.wall__row { overflow: hidden; }
.wall__toggle {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-3) 0 var(--sp-2); margin-left: calc(var(--sp-2) * -1);
  background: none; border: 0; border-radius: var(--radius-btn);
  color: var(--text-sub-on-ink); font: inherit; font-size: var(--fs-small); cursor: pointer;
}
.wall__toggle:hover { color: var(--text-on-ink); }
.wall__toggle .i-play { display: none; }
.wall__toggle[aria-pressed="true"] .i-play { display: block; }
.wall__toggle[aria-pressed="true"] .i-pause { display: none; }
.wall.is-held .wall__track, .wall__rows:hover .wall__track { animation-play-state: paused; }
.wall__track { display: flex; width: max-content; animation: wall-run 160s linear infinite; }
.wall__row.is-rev .wall__track { animation-direction: reverse; animation-duration: 190s; }
.wall__track img { width: auto; height: clamp(84px, 7vw + 40px, 126px); max-width: none; }
.wall.is-off .wall__track { animation-play-state: paused; }
@keyframes wall-run { to { transform: translateX(-50%); } }

/* ---------- 5. 대표 작업 ---------- */
.work { background: var(--ink); color: var(--text-on-ink); padding: 0 0 var(--section-y); }
.work__title, .proof__title, .steps__title, .clients__title, .final__title {
  font-size: var(--fs-h2); font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance;
}
.work__title { margin-bottom: var(--sp-7); }
.work__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-7) var(--sp-5); grid-template-columns: 1fr; }
.work__item a { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; color: inherit; }
.work__item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); margin-bottom: var(--sp-2); transition: transform var(--dur) var(--ease-out); }
.work__name { font-size: var(--fs-lead); font-weight: var(--weight-strong); }
.work__role { font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.work__item a:hover .work__name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .work__item a:hover img { transform: scale(1.015); } }
.work__all { margin-top: var(--sp-8); }
@media (min-width: 700px) { .work__grid { grid-template-columns: repeat(2, 1fr); } .work__item.is-lead { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .work__grid { grid-template-columns: repeat(3, 1fr); }
  .work__item.is-lead { grid-column: span 2; grid-row: span 2; }
  .work__item.is-lead .work__name { font-size: var(--fs-h3); }
}

/* ---------- 6. 성적표 ---------- */
.proof { background: var(--paper); padding: var(--section-y) 0 0; }
.proof__grid { display: grid; gap: var(--sp-7); }
.proof__lead { font-size: var(--fs-lead); color: var(--text-sub); }
.proof__shot img { width: 100%; border-radius: var(--radius-card); }
.proof__shot figcaption { margin-top: var(--sp-3); font-size: var(--fs-label); color: var(--text-sub); }
@media (min-width: 1024px) {
  .proof__grid { grid-template-columns: 4fr 8fr; column-gap: var(--sp-9); row-gap: var(--sp-7); align-items: start; }
  .proof__title { grid-column: 1 / -1; }
}

/* ---------- 7. 진행 방식 ---------- */
.steps { background: var(--paper); padding: var(--section-y) 0 0; }
.steps__title { margin-bottom: var(--sp-7); }
.steps__list { counter-reset: step; display: grid; gap: var(--sp-5); }
.steps__list li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: var(--sp-3); row-gap: var(--sp-1); }
.steps__list li::before {
  content: counter(step); grid-row: span 2;
  font-size: var(--fs-h3); font-weight: var(--weight-title); line-height: 1.1; color: var(--rec);
  font-variant-numeric: tabular-nums;
}
.steps__list b { font-size: var(--fs-lead); font-weight: var(--weight-strong); }
.steps__list span { color: var(--text-sub); }
@media (min-width: 1024px) {
  .steps__list { grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); }
  .steps__list li { grid-template-columns: 1fr; }
  .steps__list li::before { grid-row: auto; font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
}

/* ---------- 8. 함께한 곳: 로고 벽(잉크 한 색) ---------- */
.clients { background: var(--paper); padding: var(--section-y) 0 0; }
.clients__grid { display: grid; gap: var(--sp-6); }
.clients__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-4); align-items: center; }
.logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 56px; text-align: center; }
.logo img { width: auto; height: auto; max-height: 36px; max-width: 100%; opacity: 0.86; transition: opacity var(--dur) ease; }
.logo.is-text { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-weight: var(--weight-title); letter-spacing: -0.03em; color: var(--text); opacity: 0.86; }
.logo.is-tall img { max-height: 56px; }
.logo.is-award small { font-size: var(--fs-label); color: var(--text-sub); line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .logo:hover img, .logo.is-text:hover { opacity: 1; } }
@media (min-width: 1024px) {
  .clients__grid { grid-template-columns: 3fr 9fr; column-gap: var(--sp-9); align-items: center; }
  .clients__list { grid-template-columns: repeat(5, 1fr); gap: var(--sp-7) var(--sp-6); }
  .logo { min-height: 72px; }
  .logo img { max-height: 44px; }
  .logo.is-tall img { max-height: 68px; }
}

/* ---------- 9. 감독 ---------- */
.director { background: var(--paper); padding: var(--section-y) 0; }
.director__grid { display: grid; gap: var(--sp-5); }
.director__title { font-size: var(--fs-h2); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance; max-width: 18em; }
.director__bio { font-size: var(--fs-lead); max-width: 34em; }
.director__bio b { font-weight: var(--weight-strong); margin-right: var(--sp-2); }

/* ---------- 10. 마지막 문의 ---------- */
.final { background: var(--ink); color: var(--text-on-ink); padding: var(--section-y) 0; }
.final__title { max-width: 16em; }
.final__lead { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--text-sub-on-ink); }
.final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-7); }

/* ---------- 푸터 ---------- */
.foot { background: var(--ink); color: var(--text-sub-on-ink); padding: var(--sp-8) 0 calc(var(--sp-8) + 72px); font-size: var(--fs-small); }
.foot__grid { display: grid; gap: var(--sp-6); }
.foot__brand img { width: 120px; height: auto; margin-bottom: var(--sp-3); }
.foot__nav { display: flex; flex-direction: column; }
.foot__nav a { color: var(--text-on-ink); text-decoration: none; padding: 11px 0; }
.foot__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__biz { line-height: 1.8; max-width: 60ch; }
.foot__biz a { color: var(--text-on-ink); }
@media (min-width: 1024px) { .foot { padding-bottom: var(--sp-8); } .foot__grid { grid-template-columns: 4fr 3fr 3fr; } .foot__biz { grid-column: 1 / -1; } }

/* ---------- 모바일 고정 문의 ---------- */
.dock { display: none; }
@media (max-width: 1023px) {
  .dock {
    display: flex; gap: var(--sp-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: var(--sp-2) var(--gutter) calc(var(--sp-2) + env(safe-area-inset-bottom));
    background: var(--ink);
    transform: translateY(110%); transition: transform var(--dur-fast) var(--ease-out);
  }
  .dock.is-on { transform: none; transition-duration: var(--dur); }
  .dock__main { flex: 1; }
  .dock__kakao {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--sp-4);
    color: var(--text-on-ink); text-decoration: none; font-weight: var(--weight-strong); font-size: var(--fs-small);
    border: var(--border) solid var(--line-on-ink); border-radius: var(--radius-btn);
  }
}

/* ==========================================================
   하위 페이지 공통 (서비스·문의·감사·처리방침·404)
   ========================================================== */
.page-top { background: var(--ink); color: var(--text-on-ink); padding: 120px 0 var(--sp-9); }
.page-top__grid { display: grid; gap: var(--sp-7); align-items: end; }
.crumb { font-size: var(--fs-small); color: var(--text-sub-on-ink); margin-bottom: var(--sp-5); }
.crumb a { color: var(--text-sub-on-ink); text-decoration: none; }
.crumb a:hover { color: var(--text-on-ink); }
.page-top__title { font-size: clamp(1.875rem, 1.1rem + 3.6vw, 4rem); font-weight: var(--weight-title); letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.page-top__lead { margin-top: var(--sp-5); font-size: var(--fs-lead); max-width: 32em; text-wrap: pretty; }
.page-top__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }
.page-top__media a { display: block; text-decoration: none; color: inherit; }
.page-top__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line-on-ink); }
.page-top__cap { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.page-top__stats { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); margin-top: var(--sp-7); }
.page-top__stats b { display: block; font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.page-top__stats span { font-size: var(--fs-small); color: var(--text-sub-on-ink); }
@media (min-width: 1024px) { .page-top__grid.has-media { grid-template-columns: 6fr 6fr; column-gap: var(--sp-8); } }

.block { background: var(--paper); padding: var(--section-y) 0 0; }
.block:last-of-type { padding-bottom: var(--section-y); }
.block__title { font-size: var(--fs-h2); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance; margin-bottom: var(--sp-7); }
.block__lead { margin: calc(var(--sp-5) * -1) 0 var(--sp-7); color: var(--text-sub); max-width: 36em; }

/* 이런 곳에서 맡깁니다: 상자 없이 세 줄 */
.fit, .cases { list-style: none; margin: 0; padding: 0; }
.fit { display: grid; gap: var(--sp-6); }
.fit li { display: grid; gap: var(--sp-2); }
.fit b { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; line-height: 1.3; }
.fit span { color: var(--text-sub); }
@media (min-width: 900px) { .fit { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-7); } }

/* 받으시는 것 */
.incl { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); }
.incl dt { font-weight: var(--weight-strong); }
.incl dd { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--text-sub); }
.incl__note { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--text-sub); }
@media (min-width: 900px) { .incl { grid-template-columns: repeat(4, 1fr); } }

/* 기간·플랜 표 */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tbl th, .tbl td { text-align: left; padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; border-bottom: var(--border) solid var(--line); vertical-align: top; }
.tbl thead th { font-size: var(--fs-small); color: var(--text-sub); font-weight: var(--weight-body); }
.tbl tbody th { font-weight: var(--weight-strong); }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }

@media (min-width: 1024px) { .steps__list--3 { grid-template-columns: repeat(3, 1fr); } }
.page-top__media > img { width: 100%; aspect-ratio: auto; object-fit: contain; border-radius: var(--radius-card); }

/* 자주 묻는 질문: 정보 구분이라 1px 선 */
.faq { border-top: var(--border) solid var(--line); }
.faq details { border-bottom: var(--border) solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; font-weight: var(--weight-strong); font-size: var(--fs-lead); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: var(--weight-body); color: var(--text-sub); transition: transform var(--dur) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--sp-5); color: var(--text); max-width: 44em; }
@media (min-width: 1024px) { .faq-grid { display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--sp-9); } }

/* 사례 목록(서비스 페이지 하단) */
.cases { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(2, 1fr); }
.cases a { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; color: inherit; }
.cases img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line); }
.cases b { font-weight: var(--weight-strong); line-height: 1.4; }
.cases span { font-size: var(--fs-small); color: var(--text-sub); }
.cases a:hover b { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, 1fr); } }

/* 버튼: 테두리형(실패 안내 등 보조) */
.btn--line { border: var(--border) solid var(--line); color: var(--text); background: transparent; }

/* ---------- 문의 폼 ---------- */
.contact__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 7fr 5fr; column-gap: var(--sp-9); align-items: start; } }
.form { display: grid; gap: var(--sp-6); }
.form__hp { position: absolute; left: -9999px; }
.field { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: var(--weight-strong); padding: 0; }
.field .sub { font-weight: var(--weight-body); font-size: var(--fs-small); color: var(--text-sub); }
.req { font-weight: var(--weight-body); font-size: var(--fs-small); color: var(--text-sub); margin-left: var(--sp-1); }
.field input[type=text], .field input[type=tel], .field input[type=email], .field input[type=url], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: var(--fs-body); color: var(--text); background: #fff;
  border: var(--border) solid var(--line); border-radius: var(--radius-btn);
  transition: border-color var(--dur-fast) ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.field input::placeholder, .field textarea::placeholder { color: #9A9CA3; }
.field__pair { display: grid; gap: var(--sp-3); }
.field__pair > div { display: grid; gap: var(--sp-1); }
@media (min-width: 600px) { .field__pair { grid-template-columns: 1fr 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border: var(--border) solid var(--line); border-radius: 999px; font-weight: var(--weight-strong); background: #fff; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.chip input:checked + span { background: var(--text); color: var(--paper); border-color: var(--text); }
.chip input:focus-visible + span { outline: 2px solid var(--rec); outline-offset: 2px; }
.more { border-top: var(--border) solid var(--line); padding-top: var(--sp-4); }
.more summary { cursor: pointer; font-weight: var(--weight-strong); min-height: 44px; display: flex; align-items: center; gap: var(--sp-1); }
.more__body { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
.agree { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); color: var(--text-sub); cursor: pointer; }
.agree input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--text); flex: none; }
.agree a { color: var(--text); }
.form__submit { width: 100%; min-height: 56px; font-size: var(--fs-lead); }
.form__submit:disabled { opacity: 0.6; cursor: progress; }
.form__note { font-size: var(--fs-small); color: var(--text-sub); text-align: center; margin-top: calc(var(--sp-3) * -1); }
.form-status[hidden] { display: none; }
.form-status { padding: var(--sp-5); background: #fff; border: var(--border) solid var(--line); border-radius: var(--radius-card); display: grid; gap: var(--sp-4); }
.form-status__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (min-width: 600px) { .form__submit { width: auto; justify-self: start; padding: 0 var(--sp-7); } .form__note { text-align: left; } }

.aside { display: grid; gap: var(--sp-6); }
.aside h2 { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; }
.aside ul { display: grid; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.aside li::before { content: "·"; margin-right: var(--sp-2); color: var(--text-sub); }
.aside p { color: var(--text-sub); margin-top: var(--sp-2); }
.aside .direct a { font-weight: var(--weight-strong); color: var(--text); }

/* 문서형(처리방침) */
.doc { max-width: 44em; }
.doc h2 { font-size: var(--fs-h3); font-weight: var(--weight-title); margin: var(--sp-7) 0 var(--sp-3); }
.doc p, .doc li { color: var(--text); }
.doc ul { padding-left: 1.2em; display: grid; gap: var(--sp-1); }
.doc .todo { background: #FFF4CC; padding: 0 var(--sp-1); }

/* ---------- 사례·인사이트 본문 ---------- */
.page-top--article { padding-bottom: var(--sp-8); }
.page-top--article .page-top__title { font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem); max-width: 20em; }
.page-top__meta { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.vids { margin-bottom: var(--sp-8); }
.vids b { font-size: var(--fs-small); font-weight: var(--weight-strong); }
.prose { max-width: 40em; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; line-height: 1.3; margin-top: var(--sp-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lead); font-weight: var(--weight-strong); margin-top: var(--sp-6); }
.prose p, .prose li { font-size: var(--fs-lead); line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.prose strong { font-weight: var(--weight-title); }
.prose a { text-underline-offset: 4px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.prose th, .prose td { text-align: left; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: var(--border) solid var(--line); }
.prose + .tbl-wrap, .tbl-wrap + .prose, .proof__shot + .prose { margin-top: var(--sp-6); }
.related { margin-top: var(--sp-9); max-width: 40em; }
.related h2 { font-size: var(--fs-small); color: var(--text-sub); font-weight: var(--weight-body); margin-bottom: var(--sp-3); }
.related ul { list-style: none; padding: 0; margin: 0; border-top: var(--border) solid var(--line); }
.related li { border-bottom: var(--border) solid var(--line); }
.related a { display: block; padding: var(--sp-4) 0; font-weight: var(--weight-strong); text-decoration: none; color: var(--text); }
.related a:hover { color: var(--rec); }

/* 작업 30편: 종류 거르기 */
.filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filter button { min-height: 44px; padding: 0 var(--sp-4); border: var(--border) solid var(--line); border-radius: 999px; background: transparent; font: inherit; font-weight: var(--weight-strong); color: var(--text); cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.filter button span { font-weight: var(--weight-body); color: var(--text-sub); margin-left: 2px; font-variant-numeric: tabular-nums; }
.filter button[aria-pressed="true"] { background: var(--text); color: var(--paper); border-color: var(--text); }
.filter button[aria-pressed="true"] span { color: var(--text-sub-on-ink); }
.grid-work li[hidden] { display: none; }
@media (min-width: 1024px) { .grid-work { grid-template-columns: repeat(4, 1fr); } }

/* 인사이트 목록 */
.posts { list-style: none; margin: 0; padding: 0; border-top: var(--border) solid var(--line); }
.posts li { border-bottom: var(--border) solid var(--line); }
.posts a { display: grid; gap: var(--sp-2); padding: var(--sp-6) 0; text-decoration: none; color: inherit; }
.posts b { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; line-height: 1.3; }
.posts span { color: var(--text-sub); max-width: 44em; }
.posts small { font-size: var(--fs-small); color: var(--text-sub); }
.posts a:hover b { color: var(--rec); }
@media (min-width: 1024px) { .posts a { grid-template-columns: 1fr 9em; column-gap: var(--sp-7); } .posts small { grid-row: 1; grid-column: 2; text-align: right; } }
.about-stats { color: var(--text); }
.about-stats span { color: var(--text-sub); }

/* ==========================================================
   서비스 페이지 구역 (2026-10-27 사후 점검 후 재구성)
   ========================================================== */
.svc-top { padding-bottom: var(--sp-8); }
/* 큰 숫자 띠: 상단(ink)에 이어지는 ink */
.numband { background: var(--ink); color: var(--text-on-ink); padding: 0 0 var(--sp-9); }
.numband__list { list-style: none; margin: 0; padding: var(--sp-7) 0 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-6); border-top: var(--border) solid var(--line-on-ink); }
.numband__list b { display: inline-block; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); font-weight: var(--weight-title); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; padding-bottom: var(--sp-2); border-bottom: 3px solid var(--rec-on-ink); }
.numband__list small { font-size: 0.42em; margin-left: 0.08em; letter-spacing: 0; }
.numband__list span { display: block; margin-top: var(--sp-3); font-size: var(--fs-body); color: var(--text-sub-on-ink); max-width: 18em; }
.numband__src { margin-top: var(--sp-6); font-size: var(--fs-label); color: var(--text-sub-on-ink); max-width: 60ch; }
@media (min-width: 700px) { .numband__list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* 이런 곳에서: 실제 썸네일 카드 3장 */
.fitcards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.fitcards__list li { background: #fff; border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.fitcards__list figure { position: relative; margin: 0; }
.fitcards__list img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); display: block; }
.fitcards__list figcaption { position: absolute; left: var(--sp-3); bottom: var(--sp-3); padding: 2px var(--sp-2); border-radius: var(--radius-btn); background: rgb(14 14 16 / 0.72); color: #fff; font-size: var(--fs-label); }
.fitcards__body { padding: var(--sp-5); display: grid; gap: var(--sp-2); }
.fitcards__body .ic { width: 26px; height: 26px; color: var(--rec); }
.fitcards__body b { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; line-height: 1.3; }
.fitcards__body span { font-size: var(--fs-body); color: var(--text-sub); }
@media (min-width: 900px) { .fitcards__list { grid-template-columns: repeat(3, 1fr); } .fitcards__list li:nth-child(2) { background: var(--ink); color: var(--text-on-ink); } .fitcards__list li:nth-child(2) span { color: var(--text-sub-on-ink); } .fitcards__list li:nth-child(2) .ic { color: var(--rec-on-ink); } }

/* 대표작 크게 (ink) */
.feature { background: var(--ink); color: var(--text-on-ink); padding: var(--section-y) 0; }
.feature__grid { display: grid; gap: var(--sp-7); align-items: center; }
.feature__media { display: block; position: relative; }
.feature__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line-on-ink); }
.feature__media[href*="youtu"]::before { content: ""; position: absolute; z-index: 1; left: 16px; top: 16px; width: 48px; height: 48px; border-radius: 50%; background: rgb(14 14 16 / 0.72) var(--i-play-white) center / 20px no-repeat; transition: background-color var(--dur-fast) ease; }
.feature__title { font-size: var(--fs-h2); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance; }
.feature__lead { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--text-on-ink); max-width: 30em; }
.feature__stat { margin-top: var(--sp-6); display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.feature__stat b { font-size: var(--fs-stat); font-weight: var(--weight-title); letter-spacing: -0.03em; line-height: 1; color: var(--rec-on-ink); font-variant-numeric: tabular-nums; }
.feature__stat small { font-size: 0.45em; margin-left: 0.06em; }
.feature__stat span { color: var(--text-sub-on-ink); }
.feature__role { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }
@media (min-width: 1024px) { .feature__grid { grid-template-columns: 7fr 5fr; column-gap: var(--sp-8); } }

/* 받으시는 것: 좌우 분할 */
.incl-split__grid { display: grid; gap: var(--sp-6); }
.incl-split__head .block__title { margin-bottom: var(--sp-4); }
.incl-split__lead { color: var(--text-sub); margin-bottom: var(--sp-5); max-width: 22em; }
.incl--big { gap: var(--sp-6) var(--sp-5); }
.incl--big dt { font-size: var(--fs-lead); }
.incl--big dt .ic { width: 24px; height: 24px; color: var(--rec); }
.incl--big dd { font-size: var(--fs-body); color: var(--text-sub); margin-top: var(--sp-2); padding-left: calc(24px + var(--sp-2)); }
@media (min-width: 1024px) { .incl-split__grid { grid-template-columns: 4fr 8fr; column-gap: var(--sp-9); align-items: start; } .incl-split__head { position: sticky; top: var(--sp-7); } .incl--big { grid-template-columns: repeat(2, 1fr); } }

/* 진행 방식: 재생 진행 바 타임라인(브랜드 장치) */
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); position: relative; }
.tl li { position: relative; padding-left: 36px; display: grid; gap: var(--sp-1); }
.tl li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: calc(var(--sp-6) * -1); width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl__dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rec); }
.tl li:last-child .tl__dot { background: var(--rec); }
.tl b { font-size: var(--fs-lead); font-weight: var(--weight-strong); }
.tl span:not(.tl__dot) { color: var(--text-sub); }
@media (min-width: 1024px) {
  .tl { grid-template-columns: repeat(var(--n), 1fr); gap: var(--sp-5); padding-top: 36px; }
  .tl::before { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; background: var(--line); }
  .tl::after { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; background: var(--rec); transform-origin: left; transform: scaleX(1); transition: transform 1.2s var(--ease-out); }
  .js .tl.reveal:not(.is-in)::after { transform: scaleX(0); }
  .tl li { padding-left: 0; }
  .tl li::before { display: none; }
  .tl__dot { top: -36px; }
}

/* 막대그래프: 기간·유지율 */
.bars { display: grid; gap: var(--sp-4); }
.bars__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.bars__label { font-weight: var(--weight-strong); }
.bars__track { position: relative; height: 14px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bars__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 100%); width: calc(var(--w) * 100%); border-radius: 999px; background: var(--rec); }
.bars__track i.is-range { background: rgb(168 0 0 / 0.28); }
.bars__val { font-size: var(--fs-small); color: var(--text-sub); font-variant-numeric: tabular-nums; }
.bars__val--big { font-size: var(--fs-h3); font-weight: var(--weight-title); color: var(--rec); white-space: nowrap; text-align: right; }
.bars__scale { display: none; }
.js .bars.reveal .bars__track i { transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-out); }
.js .bars.reveal.is-in .bars__track i { transform: scaleX(1); }
@media (min-width: 900px) {
  .bars__row { grid-template-columns: 9em 1fr 16em; align-items: center; column-gap: var(--sp-5); }
  .bars--pct .bars__row { grid-template-columns: 14em 1fr 5.5em; }
  .bars__scale { display: block; position: relative; height: 20px; margin-left: calc(9em + var(--sp-5)); margin-right: calc(16em + var(--sp-5)); font-size: var(--fs-label); color: var(--text-sub); }
  .bars__scale span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); white-space: nowrap; }
  .bars__scale span:first-child { transform: none; }
  .bars__scale span:last-child { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) { .js .bars.reveal .bars__track i, .tl::after { transition: none; transform: none; } }

/* 운영 방식 카드 3장 */
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.plans li { background: #fff; border-radius: var(--radius-card); padding: var(--sp-6); display: grid; gap: var(--sp-2); align-content: start; }
.plans b { font-size: var(--fs-h3); font-weight: var(--weight-title); display: flex; align-items: center; gap: var(--sp-2); }
.plans em { font-style: normal; font-size: var(--fs-label); font-weight: var(--weight-strong); background: var(--rec); color: #fff; padding: 2px var(--sp-2); border-radius: var(--radius-btn); }
.plans__when { color: var(--text-sub); }
.plans strong { margin-top: var(--sp-4); font-size: var(--fs-lead); font-weight: var(--weight-title); }
.plans__shoot { font-size: var(--fs-small); color: var(--text-sub); }
.plans li.is-pick { background: var(--ink); color: var(--text-on-ink); }
.plans li.is-pick .plans__when, .plans li.is-pick .plans__shoot { color: var(--text-sub-on-ink); }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }

/* 사례(ink) — 홈 대표 작업 격자 재사용 */
.svc-cases { padding-top: var(--section-y); }

/* ---------- 선 아이콘·화살표·재생 표시 (과하지 않게, 잉크 한 색) ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.door__name a { display: inline-flex; align-items: center; gap: 0.4em; }
.door__name .ic { width: 0.9em; height: 0.9em; stroke-width: 1.75; color: var(--rec); }
.fit li > .ic, .steps__list li > .ic { width: 28px; height: 28px; color: var(--rec); margin-bottom: var(--sp-2); }
.steps__list li:has(> .ic)::before { display: none; }
.steps__list li > .ic { grid-row: span 2; width: 26px; height: 26px; margin: 2px 0 0; }
@media (min-width: 1024px) { .steps__list li > .ic { grid-row: auto; width: 32px; height: 32px; margin-bottom: var(--sp-3); } }
.incl dt { display: flex; align-items: center; gap: var(--sp-2); }
.incl dt .ic { width: 20px; height: 20px; color: var(--text-sub); }
.aside .ic-li { display: flex; align-items: center; gap: var(--sp-2); }
.aside .ic-li::before { content: none; }
.aside .ic-li .ic { width: 18px; height: 18px; color: var(--text-sub); }
/* 버튼·링크 끝 화살표: 페이지 이동 →, 새 창 ↗ */
.btn--rec:not(.btn--sm):not(.form__submit)::after, .link-on-ink::after, .related a::after, .incl__note a::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.35em; flex: none;
  background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
a[target="_blank"].link-on-ink::after, a[target="_blank"].btn--rec::after, .incl__note a[target="_blank"]::after { -webkit-mask-image: var(--i-out); mask-image: var(--i-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--rec:hover::after, .link-on-ink:hover::after, .related a:hover::after { transform: translateX(3px); }
  a[target="_blank"].link-on-ink:hover::after, a[target="_blank"].btn--rec:hover::after { transform: translate(2px, -2px); }
}
:root {
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E");
}
.related a { display: flex; align-items: center; justify-content: space-between; }
/* 유튜브로 열리는 썸네일: 왼쪽 위 작은 재생 버튼 */
.cases a[href*="youtu"], .work__item a[href*="youtu"], .page-top__media a[href*="youtu"] { position: relative; }
.cases a[href*="youtu"]::before, .work__item a[href*="youtu"]::before, .page-top__media a[href*="youtu"]::before {
  content: ""; position: absolute; z-index: 1; left: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgb(14 14 16 / 0.72) var(--i-play-white) center / 14px no-repeat;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease;
}
:root { --i-play-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='white'/%3E%3C/svg%3E"); }
@media (hover: hover) and (pointer: fine) {
  .cases a[href*="youtu"]:hover::before, .work__item a[href*="youtu"]:hover::before, .page-top__media a[href*="youtu"]:hover::before { background-color: var(--rec); transform: scale(1.06); }
}
/* 문의 페이지 옆 대표작 3장 */
.mini-work ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.mini-work li::before { content: none; }
.mini-work a { display: grid; gap: var(--sp-1); text-decoration: none; color: var(--text-sub); font-size: var(--fs-label); line-height: 1.35; }
.mini-work img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-btn); background: var(--line); }

/* ---------- 이미지: 툭 뜨지 않게 ---------- */
.door__thumb, .work__item a, .proof__shot { position: relative; }
.door__thumb img, .proof__shot img { background: var(--line); }
.work__item img { background: var(--line-on-ink); }
.js img.fade { opacity: 0; transition: opacity 520ms var(--ease-out), transform var(--dur) var(--ease-out); }
.js img.fade.is-loaded { opacity: 1; }

/* ---------- 폰: 덜 크게, 더 촘촘하게 ---------- */
@media (max-width: 699px) {
  .doors__list { gap: var(--sp-7); }
  .door__thumb { margin-bottom: var(--sp-4); }
  .door__line { margin-top: var(--sp-2); }
  .door .btn { margin-top: var(--sp-4); }
  .work__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-3); }
  .work__item.is-lead { grid-column: 1 / -1; }
  .work__item:not(.is-lead) .work__name { font-size: var(--fs-small); line-height: 1.4; }
  .work__item:not(.is-lead) .work__role { font-size: var(--fs-label); }
  .work__item img { margin-bottom: var(--sp-1); }
  .stat__what { font-size: var(--fs-small); }
  .stats__list { gap: var(--sp-7) var(--sp-4); }
  .steps__list { gap: var(--sp-4); }
  .steps__list span { font-size: var(--fs-small); }
  .why__body, .proof__lead, .director__bio, .final__lead, .wall__lead { font-size: var(--fs-body); }
  .compare { font-size: var(--fs-small); }
  .wall__head { margin-bottom: var(--sp-6); }
}

/* ---------- 화면별 보정 ---------- */
/* 폰 가로처럼 낮은 화면: 히어로가 한 화면에 들어오게 */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__in { padding-top: 72px; padding-bottom: var(--sp-4); }
  .hero__title { font-size: min(8.2vw, 12vh); }
  .hero__lead { margin-top: var(--sp-3); font-size: var(--fs-body); max-width: 44em; }
  .hero__actions { margin-top: var(--sp-4); }
  .playbar { margin-top: var(--sp-4); }
}
/* 큰 모니터: 내용 폭을 넓혀 가운데 섬처럼 작아지지 않게 */
@media (min-width: 1800px) {
  :root { --max: 1520px; }
  .hero__title { font-size: 96px; }
}

/* ---------- 등장 ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: opacity 200ms ease; }
  .stage__img { filter: none; transform: none; }
  .stage__img, .btn, .door .door__name, .door .door__line { transition: none; }
  .wall__track { animation: none; }
  .wall__toggle { display: none; }
  .dock, .work__item img { transition: none; }
  .js img.fade { transition: opacity 200ms ease; }
  .btn--rec::after, .link-on-ink::after, .related a::after { transition: none; }
}

/* ── 서비스 3차: 페이지마다 다른 중간 구역 ── */
/* 이름표는 사진 위가 아니라 아래(영상 자막을 가리지 않게) */
.fitcards__list figcaption { position: static; background: none; color: var(--text-sub); padding: var(--sp-2) var(--sp-5) 0; border-radius: 0; font-size: var(--fs-label); }
@media (min-width: 900px) { .fitcards__list li:nth-child(2) figcaption { color: var(--text-sub-on-ink); } }
/* 대표작 숫자는 흰색: 한 화면의 빨강은 버튼 하나만 */
.feature__stat b { color: var(--text-on-ink); }

/* 웹드라마: 회차 띠 */
.feature--eps .feature__text { max-width: 44rem; }
.eps { list-style: none; margin: var(--sp-8) 0 0; padding: 0 0 var(--sp-3); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.eps li { scroll-snap-align: start; }
.eps a { display: block; position: relative; text-decoration: none; color: inherit; }
.eps img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line-on-ink); display: block; }
.eps__no { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-sub-on-ink); border-top: 2px solid var(--line-on-ink); padding-top: var(--sp-2); }
.eps a:hover .eps__no { color: var(--text-on-ink); border-top-color: var(--rec-on-ink); }
@media (max-width: 699px) { .eps { grid-auto-columns: 72%; margin-right: calc(var(--gutter, 20px) * -1); } }

/* 운영 대행: 리포트 카드 */
.report__card { border: var(--border) solid var(--line-on-ink); border-radius: var(--radius-card); padding: var(--sp-6); }
.report__title { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; }
.report__lead { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--text-sub-on-ink); }
.report .bars { margin-top: var(--sp-6); }
.report .bars__label { color: var(--text-on-ink); }
.report .bars__track { background: var(--line-on-ink); }
.report .bars__track i { background: var(--text-on-ink); }
.report .bars__row:first-child .bars__track i { background: var(--rec-on-ink); }
.report__src { margin-top: var(--sp-5); font-size: var(--fs-label); color: var(--text-sub-on-ink); }
@media (min-width: 1024px) { .report .feature__grid { grid-template-columns: 5fr 7fr; align-items: start; } }

/* 광고 영상: CF 몽타주 */
.montage { background: var(--ink); color: var(--text-on-ink); padding: var(--section-y) 0; }
.montage__lead { margin-top: calc(var(--sp-7) * -1 + var(--sp-3)); margin-bottom: var(--sp-7); color: var(--text-sub-on-ink); max-width: 40em; }
.montage__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-3); }
.montage__item.is-lead { grid-column: 1 / -1; }
.montage__grid a, .montage__tall a { display: flex; flex-direction: column; gap: var(--sp-1); text-decoration: none; color: inherit; position: relative; }
.montage img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line-on-ink); margin-bottom: var(--sp-2); }
.montage__item:not(.is-lead) .work__name { font-size: var(--fs-small); line-height: 1.4; }
.montage .work__role { font-size: var(--fs-label); }
.montage__tall { margin-top: var(--sp-9); display: grid; gap: var(--sp-6); }
.montage__tallhead h3 { font-size: var(--fs-h3); font-weight: var(--weight-title); }
.montage__tallhead p { margin-top: var(--sp-2); color: var(--text-sub-on-ink); }
.montage__tall ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.montage__tall img { aspect-ratio: 9 / 16; }
.montage__tall .work__name { font-size: var(--fs-small); line-height: 1.4; }
@media (min-width: 1024px) {
  .montage__grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-5); }
  .montage__item.is-lead { grid-column: span 2; grid-row: span 2; }
  .montage__item.is-lead .work__name { font-size: var(--fs-h3); }
  .montage__tall { grid-template-columns: 4fr 8fr; align-items: center; column-gap: var(--sp-9); }
  .montage__tall ul { gap: var(--sp-5); }
}
@media (hover: hover) and (pointer: fine) { .montage a:hover img, .eps a:hover img { transform: scale(1.015); } .montage img, .eps img { transition: transform var(--dur) var(--ease-out); } }

/* 폰: 받으시는 것 1열, 보조 글자 키움 */
@media (max-width: 699px) {
  .incl--big { grid-template-columns: 1fr; gap: var(--sp-5); }
  .incl--big dd { font-size: var(--fs-body); }
  .numband__list span, .feature__role, .page-top__cap { font-size: var(--fs-body); }
}
.report .bars__val--big { color: var(--text-on-ink); }
.report .bars__row:first-child .bars__val--big { color: var(--rec-on-ink); }
/* 빨강은 한 화면에 하나: 숫자 띠 밑줄은 첫 숫자만, 기간 막대 범위는 회색 */
.numband__list li + li b { border-bottom-color: var(--line-on-ink); }
.bars__track i.is-range { background: rgb(14 14 16 / 0.22); }

/* ── 서비스 v4: 세 페이지가 서로 다른 순서(2026-10-27 와이어프레임 확정, 밀착 인화 방향) ── */
.sv-h1 { font-size: var(--fs-display); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance; max-width: 15em; }
.sv-h2 { font-size: var(--fs-h2); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance; max-width: 20em; }
.sv-h3 { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.sv-lead { font-size: var(--fs-lead); max-width: 34em; }
.sv-body { margin-top: var(--sp-4); font-size: var(--fs-body); max-width: 36em; }
.sv-role { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-sub); }
.sv-src { margin-top: var(--sp-4); font-size: var(--fs-label); color: var(--text-sub); max-width: 64ch; }
.sv-note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--text-sub); max-width: 62ch; }
.sv-link { display: inline-block; margin-top: var(--sp-5); font-weight: var(--weight-strong); color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }
.sv-hero, .sv-run, .sv-tall, .sv-score, .sv-contact, .sv-cal, .sv-form, .sv-fit__no { background: var(--ink); color: var(--text-on-ink); }
[data-tone="ink"] .sv-role, [data-tone="ink"] .sv-src, [data-tone="ink"] .sv-note { color: var(--text-sub-on-ink); }
.sv-story, .sv-fit, .sv-run, .sv-doc, .sv-terms, .sv-faq, .sv-feature, .sv-tall, .sv-tabs, .sv-drag, .sv-form, .sv-method, .sv-contact, .sv-plans, .sv-cal, .sv-check { padding: var(--section-y) 0; }
.sv-story img, .sv-run img, .sv-feature img, .sv-tall img, .sv-tabs img, .sv-drag img, .sv-sheet img, .sv-strip img, .sv-contact img, .sv-score img, .sv-method img { display: block; max-width: 100%; }

/* 재생 진행 바: 옆으로 넘기는 줄 아래, 얼마나 봤는지 */
.sv-play { height: 4px; margin-top: var(--sp-5); background: var(--line); border-radius: 2px; overflow: hidden; }
.sv-play i { display: block; height: 100%; width: calc(max(var(--p, 0), 0.08) * 100%); background: var(--rec); border-radius: 2px; transition: width 120ms linear; }
[data-tone="ink"] .sv-play { background: var(--line-on-ink); }
[data-tone="ink"] .sv-play i { background: var(--rec-on-ink); }

/* 상단 공통 */
.sv-hero { padding: var(--sp-8) 0 var(--section-y); }

/* 웹드라마 상단: 회차가 켜진 띠 */
.sv-strip { list-style: none; margin: var(--sp-8) 0 0; padding: 0 var(--gutter); display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; }
.sv-strip::-webkit-scrollbar { display: none; }
.sv-strip li { flex: 0 0 auto; scroll-snap-align: start; }
.sv-strip a { display: block; color: inherit; text-decoration: none; }
.sv-strip img { height: clamp(190px, 30vw, 380px); width: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line-on-ink); transition: opacity var(--dur) ease; }
.sv-strip span { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.sv-hero__foot { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); }
.sv-hero__foot .sv-actions { margin-top: var(--sp-4); }
@media (min-width: 1024px) { .sv-hero__foot { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--sp-8); } .sv-hero__foot .sv-src { grid-column: 1 / -1; } }
@media (hover: hover) and (pointer: fine) { .sv-strip:hover img, .sv-sheet:hover img { opacity: 0.5; } .sv-strip a:hover img, .sv-sheet a:hover img, .sv-strip a:focus-visible img, .sv-sheet a:focus-visible img { opacity: 1; } }

/* 듀오 이야기 */
.sv-story__grid { display: grid; gap: var(--sp-7); align-items: end; }
.sv-bignum b { display: block; font-size: clamp(4.5rem, 2rem + 10vw, 11rem); font-weight: var(--weight-title); letter-spacing: -0.05em; line-height: 0.9; color: var(--rec); font-variant-numeric: tabular-nums; }
.sv-bignum small { font-size: 0.32em; margin-left: 0.05em; letter-spacing: 0; color: var(--text); }
.sv-bignum span { display: block; margin-top: var(--sp-3); color: var(--text-sub); }
@media (min-width: 1024px) { .sv-story__grid { grid-template-columns: 6fr 6fr; } .sv-bignum { justify-self: end; text-align: right; } }

/* 맞을 때 / 숏폼이 맞을 때 */
.sv-fit { padding-top: 0; }
.sv-fit__split { margin-top: var(--sp-7); display: grid; gap: var(--sp-4); }
.sv-fit__yes, .sv-fit__no { border-radius: var(--radius-card); padding: var(--sp-7) var(--sp-6); }
.sv-fit__yes { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.sv-fit__yes ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.sv-fit__yes li { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; }
.sv-fit__yes li .ic { width: 24px; height: 24px; color: var(--rec); margin-top: 2px; }
.sv-fit__yes li span { color: var(--text-sub); }
.sv-fit__yes li b { display: block; color: var(--text); font-size: var(--fs-lead); font-weight: var(--weight-strong); margin-bottom: var(--sp-1); }
.sv-fit__no { display: flex; flex-direction: column; align-items: flex-start; }
.sv-fit__big { margin-top: var(--sp-5); font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); font-weight: var(--weight-title); letter-spacing: -0.03em; line-height: 1.2; }
.sv-fit__no .link-on-ink { margin-top: auto; padding-top: var(--sp-6); }
@media (min-width: 900px) { .sv-fit__split { grid-template-columns: 7fr 5fr; } }

/* 다른 작품: 하나를 들어 올린 줄 */
.sv-run__grid { display: grid; gap: var(--sp-7); }
.sv-run__head .link-on-ink { display: inline-block; margin-top: var(--sp-4); }
.sv-run__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-3); align-items: end; }
.sv-run__list .is-lift { grid-column: 1 / -1; }
.sv-run__list a { display: grid; gap: var(--sp-1); color: inherit; text-decoration: none; }
.sv-run__list img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line-on-ink); margin-bottom: var(--sp-2); }
.sv-run__name { font-weight: var(--weight-strong); }
.sv-run__fact { font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.sv-run__list .is-lift .sv-run__name { font-size: var(--fs-h3); }
@media (min-width: 1024px) { .sv-run__grid { grid-template-columns: 3fr 9fr; } .sv-run__list { grid-template-columns: 2.2fr 1fr 1fr; } .sv-run__list .is-lift { grid-column: auto; } }

/* 구성안 견본: 받게 될 문서 */
.sv-doc { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.sv-doc__grid { display: grid; gap: var(--sp-7); align-items: center; }
.sv-doc .btn { margin-top: var(--sp-6); }
.sv-doc__sheet { background: #FFFFFF; color: var(--text); border-radius: 4px; padding: var(--sp-7) var(--sp-6); }
.sv-doc__title { font-size: var(--fs-label); color: var(--text-sub); margin-bottom: var(--sp-4); }
.sv-doc__sheet dl { margin: 0; }
.sv-doc__sheet dl div { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: var(--border) solid var(--line); }
.sv-doc__sheet dt { font-weight: var(--weight-strong); font-size: var(--fs-lead); }
.sv-doc__sheet dd { margin: 0; color: var(--text-sub); align-self: center; }
@media (min-width: 900px) { .sv-doc__grid { grid-template-columns: 5fr 7fr; column-gap: var(--sp-9); } }

/* 기간 표 */
.sv-table { margin-top: var(--sp-7); }
.sv-table__row { display: grid; grid-template-columns: 4.5em repeat(3, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); align-items: baseline; }
.sv-table__row:nth-child(even) { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); border-radius: 4px; }
.sv-table__row span { font-size: var(--fs-lead); font-weight: var(--weight-title); letter-spacing: -0.02em; }
.sv-table__row [role="rowheader"], .sv-table__row.is-head span { font-size: var(--fs-small); font-weight: var(--weight-strong); color: var(--text-sub); letter-spacing: 0; }
@media (min-width: 900px) { .sv-table__row { grid-template-columns: 10em repeat(3, minmax(0, 1fr)); padding: var(--sp-5) var(--sp-4); } .sv-table__row span { font-size: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); } .sv-table__row.is-head span { font-size: var(--fs-body); } }
.sv-terms__cols { margin-top: var(--sp-9); display: grid; gap: var(--sp-8); }
.sv-names { list-style: none; margin: var(--sp-5) 0 0; padding: 0; columns: 2; column-gap: var(--sp-6); }
.sv-names li { padding: var(--sp-2) 0; break-inside: avoid; }
.sv-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.sv-steps li { display: grid; grid-template-columns: 9em 1fr; gap: var(--sp-3); }
.sv-steps span { color: var(--text-sub); }
@media (min-width: 900px) { .sv-terms__cols { grid-template-columns: 1fr 1fr; column-gap: var(--sp-9); } }
@media (max-width: 479px) { .sv-steps li { grid-template-columns: 1fr; gap: 0; } }

/* 질문: 펼친 읽기 글 */
.sv-faq__grid { display: grid; gap: var(--sp-6); }
.faq--read { border-top: 0; }
.faq--read details { border-bottom: 0; break-inside: avoid; padding-bottom: var(--sp-6); }
.faq--read summary { display: block; padding: 0; cursor: default; pointer-events: none; }
.faq--read summary::after { display: none; }
.faq--read details p { padding: var(--sp-2) 0 0; color: var(--text-sub); }
@media (min-width: 1024px) { .sv-faq__grid { grid-template-columns: 3fr 9fr; column-gap: var(--sp-8); } .faq--read { columns: 2; column-gap: var(--sp-8); } }
.sv-faq--tight { padding-top: 0; }
.sv-reads { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: var(--border) solid var(--line); max-width: 46em; }
.sv-faq--fold .sv-reads { border-top: 0; padding-top: 0; margin-top: var(--sp-7); }
.sv-reads__t { font-size: var(--fs-small); font-weight: var(--weight-strong); color: var(--text-sub); }
.sv-reads ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.sv-reads a { display: inline-block; padding: var(--sp-2) 0; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* 한 문장 문의 */
.sv-end { padding: clamp(96px, 18vh, 200px) 0 clamp(80px, 14vh, 160px); }
.sv-end__line { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: var(--weight-strong); letter-spacing: -0.02em; max-width: 26em; text-wrap: balance; }

/* 광고 영상 상단: 밀착 인화 */
.sv-sheet__info { margin-top: var(--sp-6); display: grid; gap: var(--sp-6); }
.sv-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.sv-facts li { font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.sv-facts b { display: block; font-size: var(--fs-stat); font-weight: var(--weight-title); letter-spacing: -0.03em; line-height: 1; color: var(--text-on-ink); margin-bottom: var(--sp-2); }
.sv-sheet__info .sv-actions { margin-top: 0; }
.sv-sheet { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) 8px; }
.sv-sheet a { display: block; color: inherit; text-decoration: none; }
.sv-sheet img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line-on-ink); transition: opacity var(--dur) ease; }
.sv-sheet span { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.sv-when { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
.sv-when li { color: var(--text-sub-on-ink); }
.sv-when b { display: block; color: var(--text-on-ink); font-size: var(--fs-lead); font-weight: var(--weight-strong); margin-bottom: var(--sp-1); }
@media (min-width: 900px) { .sv-sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sv-when { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-7); } }
@media (min-width: 1024px) { .sv-sheet__info { grid-template-columns: 6fr 6fr; column-gap: var(--sp-9); align-items: start; } .sv-sheet__info .sv-actions { grid-column: 1; } .sv-facts { grid-row: 1 / span 2; grid-column: 2; } }
@media (max-width: 479px) { .sv-facts { grid-template-columns: 1fr; gap: var(--sp-4); } .sv-facts li { display: flex; align-items: baseline; gap: var(--sp-3); } .sv-facts b { margin: 0; font-size: 2rem; min-width: 3.2em; } }

/* 대표작 크게 */
.sv-feature__grid { display: grid; gap: var(--sp-7); align-items: center; }
.sv-feature__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line); }
@media (min-width: 1024px) { .sv-feature__grid { grid-template-columns: 7fr 5fr; column-gap: var(--sp-8); } }

/* 세로 숏폼 */
.sv-tall__grid { display: grid; gap: var(--sp-7); align-items: center; }
.sv-tall__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.sv-tall__list a { display: block; color: inherit; text-decoration: none; }
.sv-tall__list img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-card); background: var(--line-on-ink); }
.sv-tall__list span { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-sub-on-ink); line-height: 1.4; }
@media (min-width: 1024px) { .sv-tall__grid { grid-template-columns: 4fr 8fr; column-gap: var(--sp-9); } .sv-tall__list { gap: var(--sp-5); } }

/* 대상별 탭 */
.sv-tabs__bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.sv-tabs__bar button { font: inherit; font-weight: var(--weight-strong); min-height: 44px; padding: 0 var(--sp-5); border-radius: 999px; border: 1.5px solid var(--text); background: transparent; color: var(--text); cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.sv-tabs__bar button:active { transform: scale(0.97); }
.sv-tabs__bar button[aria-selected="true"] { background: var(--text); color: var(--paper); }
.sv-tabs__panel { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); align-items: center; }
.sv-tabs__panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line); }
@media (min-width: 900px) { .sv-tabs__panel { grid-template-columns: 7fr 5fr; column-gap: var(--sp-8); } }

/* 끌어 넘기는 일정 */
.sv-drag__row { list-style: none; margin: 0; padding: var(--sp-6) var(--gutter) var(--sp-3); display: flex; gap: var(--sp-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; }
.sv-drag__row::-webkit-scrollbar { display: none; }
.sv-drag__row li { flex: 0 0 clamp(240px, 24vw, 320px); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--sp-2); }
.sv-drag__row b { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; }
.sv-drag__dur { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--rec); }
.sv-drag__d { color: var(--text-sub); min-height: 3em; }
.sv-drag__row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); background: var(--line); margin-top: var(--sp-4); }
.sv-drag__row li:nth-child(2) img { margin-top: var(--sp-9); }
.sv-drag__row li:nth-child(3) img { margin-top: var(--sp-6); }
.sv-drag__row li:nth-child(4) img { margin-top: var(--sp-10); }
.sv-drag__row li:nth-child(5) img { margin-top: var(--sp-7); }
@media (max-width: 699px) { .sv-drag__row li { flex-basis: 72vw; } .sv-drag__row li img { margin-top: var(--sp-4) !important; } }

/* 문의 폼 구역 */
.sv-form__grid { display: grid; gap: var(--sp-7); }
.sv-form .link-on-ink { display: inline-block; margin-top: var(--sp-5); }
.sv-form__box { background: var(--paper); color: var(--text); border-radius: var(--radius-card); padding: var(--sp-6) var(--sp-5); }
@media (min-width: 1024px) { .sv-form__grid { grid-template-columns: 5fr 7fr; column-gap: var(--sp-9); align-items: start; } .sv-form__box { padding: var(--sp-7); } }

/* 운영 대행 상단: 큰 숫자 */
.sv-num__grid { display: grid; gap: var(--sp-8); align-items: end; }
.sv-num b { display: block; font-size: clamp(5rem, 1.5rem + 13vw, 13rem); font-weight: var(--weight-title); letter-spacing: -0.055em; line-height: 0.85; font-variant-numeric: tabular-nums; }
.sv-num small { font-size: 0.28em; margin-left: 0.04em; letter-spacing: 0; }
.sv-num span { display: block; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 3px solid var(--rec-on-ink); font-size: var(--fs-small); color: var(--text-sub-on-ink); max-width: 30em; }
@media (min-width: 1024px) { .sv-num__grid { grid-template-columns: 6fr 6fr; column-gap: var(--sp-8); } }

/* 성적표 */
.sv-score { padding-top: 0; }
.sv-score__grid { display: grid; gap: var(--sp-6); padding-top: var(--sp-8); border-top: var(--border) solid var(--line-on-ink); }
.sv-score__shot { margin: 0; }
.sv-score__shot img { width: 100%; max-width: 821px; height: auto; border-radius: var(--radius-card); }
.sv-score__nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); align-content: start; }
.sv-score__nums li { font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.sv-score__nums b { display: block; font-size: var(--fs-stat); font-weight: var(--weight-title); letter-spacing: -0.03em; line-height: 1; color: var(--text-on-ink); margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums; }
.sv-score__nums li:first-child { grid-column: 1 / -1; }
@media (min-width: 1024px) { .sv-score__grid { grid-template-columns: 7fr 5fr; column-gap: var(--sp-8); } .sv-score__grid h2 { grid-column: 1 / -1; } }

/* 이 숫자를 만든 방식 */
.sv-method__grid { display: grid; gap: var(--sp-8); align-items: center; }
.sv-pct { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.sv-pct__row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); align-items: center; }
.sv-pct__row span[role="rowheader"] { font-size: var(--fs-body); }
.sv-pct__row b { grid-row: span 2; font-size: var(--fs-h3); font-weight: var(--weight-title); font-variant-numeric: tabular-nums; }
.sv-pct__bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.sv-pct__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--text); border-radius: 999px; transform-origin: left; }
.sv-pct__row:first-child .sv-pct__bar i { background: var(--rec); }
.js .sv-pct.reveal .sv-pct__bar i { transform: scaleX(0); transition: transform 900ms var(--ease-out); }
.js .sv-pct.reveal.is-in .sv-pct__bar i { transform: scaleX(1); }
.sv-method__shot { margin: 0; justify-self: center; }
.sv-method__shot img { width: 100%; max-width: 450px; height: auto; border-radius: var(--radius-card); }
@media (min-width: 1024px) { .sv-method__grid { grid-template-columns: 7fr 5fr; column-gap: var(--sp-9); } }

/* 맡은 채널: 밀착 인화 */
.sv-contact__run { margin-top: var(--sp-8); }
.sv-contact__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); color: inherit; text-decoration: none; }
.sv-contact__name b { font-size: var(--fs-h3); font-weight: var(--weight-title); }
.sv-contact__name span { font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.sv-contact__name:hover b { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sv-contact__frames { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sv-contact__frames img { height: clamp(58px, 8.5vw, 116px); width: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line-on-ink); }

/* 상황 + 운영 방식 표 */
.sv-cases { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-6); }
.sv-cases li { display: grid; gap: var(--sp-2); }
.sv-cases .ic { width: 26px; height: 26px; color: var(--rec); }
.sv-cases b { font-size: var(--fs-lead); font-weight: var(--weight-strong); }
.sv-cases span { color: var(--text-sub); }
@media (min-width: 900px) { .sv-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-7); } }
.sv-ptable { margin-top: var(--sp-9); overflow-x: auto; }
.sv-ptable__row { display: grid; grid-template-columns: 5.5em repeat(3, minmax(8.5em, 1fr)); min-width: 560px; }
.sv-ptable__row > span { padding: var(--sp-4) var(--sp-3); }
.sv-ptable__row:nth-child(even) > span { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.sv-ptable__row [role="rowheader"] { font-size: var(--fs-small); font-weight: var(--weight-strong); color: var(--text-sub); }
.sv-ptable__row.is-head span { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.sv-ptable__row.is-head [role="columnheader"]:first-child { font-size: var(--fs-small); color: var(--text-sub); align-self: end; }
.sv-ptable__row > .is-pick { background: var(--ink) !important; color: var(--text-on-ink); }
.sv-ptable__row.is-head .is-pick { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.sv-ptable__row:last-child .is-pick { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.sv-ptable em { font-style: normal; font-size: var(--fs-label); font-weight: var(--weight-strong); color: var(--rec-on-ink); margin-left: var(--sp-2); vertical-align: middle; }
@media (min-width: 900px) { .sv-ptable__row { grid-template-columns: 10em repeat(3, minmax(0, 1fr)); } .sv-ptable__row > span { padding: var(--sp-5) var(--sp-4); font-size: var(--fs-lead); } }

/* 90일 */
.sv-cal__months { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.sv-cal__months li { position: relative; overflow: hidden; display: grid; gap: var(--sp-2); padding: var(--sp-7) var(--sp-6) var(--sp-6); border-radius: var(--radius-card); background: color-mix(in srgb, var(--paper) 7%, var(--ink)); }
.sv-cal__months li::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; background: var(--rec-on-ink); width: 33.33%; }
.sv-cal__months li:nth-child(2)::before { width: 66.66%; }
.sv-cal__months li:nth-child(3)::before { width: 100%; }
.sv-cal__m { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.sv-cal__months b { font-size: var(--fs-h3); font-weight: var(--weight-title); }
.sv-cal__months span:last-child { color: var(--text-sub-on-ink); }
@media (min-width: 900px) { .sv-cal__months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 받는 것: 계약서 체크리스트 */
.sv-check__grid { display: grid; gap: var(--sp-7); }
.sv-check__list { list-style: none; margin: 0; padding: 0; display: grid; }
.sv-check__list li { display: grid; grid-template-columns: 30px 1fr; column-gap: var(--sp-2); padding: var(--sp-4) 0; border-top: var(--border) solid var(--line); }
.sv-check__list .ic { grid-row: span 2; width: 20px; height: 20px; color: var(--rec); margin-top: 3px; }
.sv-check__list b { font-weight: var(--weight-strong); font-size: var(--fs-lead); }
.sv-check__list span { color: var(--text-sub); }
@media (min-width: 700px) { .sv-check__list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); } }
@media (min-width: 1024px) { .sv-check__grid { grid-template-columns: 4fr 8fr; column-gap: var(--sp-8); } }
@media (prefers-reduced-motion: reduce) { .js .sv-pct.reveal .sv-pct__bar i { transition: none; transform: none; } .sv-play i { transition: none; } }
.sv-tabs__panel[hidden] { display: none; }
/* v4 다듬기: 줄바꿈·겹침 */
.sv-hero--num .sv-h1 { max-width: 22em; font-size: clamp(1.875rem, 0.9rem + 3.9vw, 4.25rem); }
.sv-hero--num .sv-num__grid { margin-top: var(--sp-7); }
.sv-score__nums b { font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); white-space: nowrap; }
@media (min-width: 900px) { .sv-doc__grid { grid-template-columns: 6fr 6fr; column-gap: var(--sp-8); } }
.sv-facts { column-gap: var(--sp-6); }
.sv-facts b { white-space: nowrap; }
@media (min-width: 900px) { .sv-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-tabs__quote { display: grid; align-content: center; min-height: 12em; padding: var(--sp-7); border-radius: var(--radius-card); background: var(--ink); color: var(--text-on-ink); font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem); font-weight: var(--weight-title); letter-spacing: -0.02em; line-height: 1.3; }
.sv-drag__row li { padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-card); background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.sv-drag__dur { font-family: var(--font-sans); font-size: var(--fs-stat); font-weight: var(--weight-title); letter-spacing: -0.03em; line-height: 1; color: var(--text); margin-bottom: var(--sp-4); }
.sv-drag__row li:first-child .sv-drag__dur { color: var(--rec); }
.sv-drag__row li:nth-child(2) { margin-top: var(--sp-6); } .sv-drag__row li:nth-child(4) { margin-top: var(--sp-7); } .sv-drag__row li:nth-child(5) { margin-top: var(--sp-4); }
@media (max-width: 699px) { .sv-drag__row li { margin-top: 0 !important; } }
/* v4 2차: 채점 반영 */
.sv-h1, .sv-h2, .sv-h3, .sv-fit__big, .sv-end__line { word-break: keep-all; }
.sv-pct__row span[role="rowheader"] { grid-column: 1; grid-row: 1; }
.sv-pct__row .sv-pct__bar { grid-column: 1; grid-row: 2; }
.sv-pct__row b { grid-column: 2; grid-row: 1 / 3; align-self: end; min-width: 3em; text-align: right; }
.sv-score { padding-bottom: var(--section-y); }
.sv-src { font-size: var(--fs-small); }
/* 기간 표 ink 띠 */
.sv-terms { background: var(--ink); color: var(--text-on-ink); }
.sv-terms .sv-table__row:nth-child(even) { background: color-mix(in srgb, var(--paper) 7%, var(--ink)); }
.sv-terms .sv-table__row [role="rowheader"], .sv-terms .sv-table__row.is-head span, .sv-terms .sv-steps span { color: var(--text-sub-on-ink); }
/* 질문 세 가지 모양 */
.sv-faq--one .faq--read { columns: 1; max-width: 46em; }
.sv-faq--one .faq--read details { padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: var(--border) solid var(--line); }
.sv-faq--one { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.sv-faq--fold .faq summary { pointer-events: auto; }
/* 맡은 채널: 빈칸 없이 5열 */
.sv-contact__frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sv-contact__frames img { width: 100%; height: auto; }
.sv-swipe { display: none; margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-sub); }
@media (max-width: 899px) { .sv-swipe { display: block; } }
/* v4 3차 */
.sv-end { background: var(--ink); color: var(--text-on-ink); }
.sv-end__line { font-size: var(--fs-display); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); max-width: 14em; }
.sv-names li { display: flex; align-items: center; gap: var(--sp-2); }
.sv-names .ic { flex: none; width: 18px; height: 18px; color: var(--rec-on-ink); }
.sv-steps { position: relative; padding-left: var(--sp-6); }
.sv-steps::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--line-on-ink); }
.sv-steps li { position: relative; }
.sv-steps li::before { content: ""; position: absolute; left: calc(var(--sp-6) * -1); top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--rec-on-ink); }
.sv-steps li:last-child::before { background: var(--rec-on-ink); }
.sv-drag { background: var(--ink); color: var(--text-on-ink); }
.sv-drag__row li { position: relative; overflow: hidden; background: color-mix(in srgb, var(--paper) 7%, var(--ink)); padding-top: var(--sp-7); }
.sv-drag__row li::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; background: var(--rec-on-ink); width: 20%; }
.sv-drag__row li:nth-child(2)::before { width: 40%; } .sv-drag__row li:nth-child(3)::before { width: 60%; } .sv-drag__row li:nth-child(4)::before { width: 80%; } .sv-drag__row li:nth-child(5)::before { width: 100%; }
.sv-drag__dur { color: var(--text-on-ink); }
.sv-drag__row li:first-child .sv-drag__dur { color: var(--rec-on-ink); }
.sv-drag__d { color: var(--text-sub-on-ink); }
.sv-swipe--ink { color: var(--text-sub-on-ink); }
.sv-faq--tight { padding-top: var(--section-y); }
/* PC: 일정 카드가 본문 폭 안에서 시작 */
@media (min-width: 1024px) { .sv-drag__row { padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); } }
/* 90일: 가로 시간선(광고 영상 일정 카드와 다른 모양) */
.sv-cal__months { position: relative; gap: var(--sp-6); }
.sv-cal__months li { background: none; padding: var(--sp-7) 0 0; border-radius: 0; overflow: visible; }
.sv-cal__months li::before { top: 8px; height: 2px; width: 100% !important; background: var(--line-on-ink); }
.sv-cal__months li::after { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--rec-on-ink); }
.sv-cal__months li:last-child::after { background: var(--rec-on-ink); }
.sv-cal__months b { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }

/* ── 작업 사례 v2 (2026-10-27): 목록 = 종류별 밀착 인화, 사례 = 시리즈·채널·묶음 세 가지 틀 ── */
.cs-top { background: var(--ink); color: var(--text-on-ink); padding: var(--sp-8) 0 var(--sp-8); }
.cs-h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance; word-break: keep-all; max-width: 18em; }
.cs-meta { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--text-sub-on-ink); max-width: 44em; }
.cs-band { list-style: none; margin: var(--sp-7) 0 0; padding: var(--sp-6) 0 0; border-top: var(--border) solid var(--line-on-ink); display: grid; gap: var(--sp-5); }
.cs-band b { display: block; font-size: var(--fs-stat); font-weight: var(--weight-title); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.cs-band li:first-child b { color: var(--rec-on-ink); }
.cs-band small { font-size: 0.45em; margin-left: 0.06em; letter-spacing: 0; color: var(--text-on-ink); }
.cs-band span { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
@media (min-width: 700px) { .cs-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-chips { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cs-chips li { padding: var(--sp-2) var(--sp-4); border-radius: 999px; background: color-mix(in srgb, var(--paper) 9%, var(--ink)); font-size: var(--fs-small); font-weight: var(--weight-strong); }
.cs-top .sv-src a { color: inherit; }
.cs-strip { background: var(--ink); color: var(--text-on-ink); padding: 0 0 var(--section-y); }
.cs-strip .sv-strip { margin-top: 0; }
.cs-ga { padding: var(--section-y) 0; }
.cs-ga__grid { display: grid; gap: var(--sp-8); }
.cs-ga__col h2 { font-size: var(--fs-h3); font-weight: var(--weight-title); margin: 0 0 var(--sp-4); }
.cs-ga__col p + p, .cs-ga__col p + ul, .cs-ga__col ul + p { margin-top: var(--sp-4); }
.cs-ga__col ul { padding-left: 1.1em; display: grid; gap: var(--sp-2); }
@media (min-width: 900px) { .cs-ga__grid { grid-template-columns: 1fr 1fr; column-gap: var(--sp-9); } }
.cs-result { padding: var(--section-y) 0; background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.cs-result__grid { display: grid; gap: var(--sp-6); }
.cs-result__body > p:first-child { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: var(--weight-strong); letter-spacing: -0.02em; line-height: 1.45; max-width: 30em; }
.cs-result__body p + p { margin-top: var(--sp-4); max-width: 44em; }
.cs-result__body .tbl-wrap { margin-top: var(--sp-6); }
.cs-svc { margin-top: var(--sp-6) !important; font-weight: var(--weight-strong); }
.cs-svc a { color: var(--rec); text-decoration: underline; text-underline-offset: 4px; }
.cs-shot { margin: var(--sp-6) 0 0; }
.cs-shot img { width: 100%; max-width: 821px; height: auto; border-radius: var(--radius-card); }
@media (min-width: 1024px) { .cs-result__grid { grid-template-columns: 3fr 9fr; column-gap: var(--sp-8); } }
.cs-feat { background: var(--ink); color: var(--text-on-ink); padding: 0 0 var(--section-y); }
.cs-feat__grid { display: grid; gap: var(--sp-5); }
.cs-feat a { display: block; color: inherit; text-decoration: none; }
.cs-feat img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line-on-ink); }
.cs-feat span { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.cs-feat__lead span { font-size: var(--fs-body); color: var(--text-on-ink); font-weight: var(--weight-strong); }
.cs-feat__rest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-content: end; }
@media (min-width: 1024px) { .cs-feat__grid { grid-template-columns: 7fr 5fr; column-gap: var(--sp-6); align-items: end; } .cs-feat__rest { grid-template-columns: 1fr; } .cs-feat__rest li { display: grid; grid-template-columns: 9em 1fr; gap: var(--sp-3); align-items: center; } .cs-feat__rest span { margin: 0; } }
.cs-more { background: var(--ink); color: var(--text-on-ink); padding: var(--section-y) 0; }
.cs-more .prose, .cs-more .prose p, .cs-more .prose li { color: var(--text-on-ink); }
.cs-more a { color: var(--text-on-ink); }
.cs-items { background: var(--ink); color: var(--text-on-ink); padding: 0 0 var(--section-y); }
.cs-items__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-7) var(--sp-5); }
.cs-items__list img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line-on-ink); margin-bottom: var(--sp-3); }
.cs-items__list b { display: block; font-size: var(--fs-lead); }
.cs-items__note { display: block; margin-top: var(--sp-1); color: var(--text-sub-on-ink); max-width: 30em; }
.cs-items__list.is-tall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.cs-items__list.is-tall img { aspect-ratio: 9 / 16; }
.cs-items__list.is-tall b { font-size: var(--fs-small); }
@media (min-width: 900px) { .cs-items__list:not(.is-tall) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-items__list.is-tall { max-width: 900px; gap: var(--sp-5); } }
.cs-rel { padding: var(--sp-9) 0; }
.cs-rel__list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.cs-rel__list a { display: grid; gap: var(--sp-1); padding: var(--sp-5); border-radius: var(--radius-card); background: color-mix(in srgb, var(--ink) 5%, var(--paper)); color: inherit; text-decoration: none; transition: background-color var(--dur-fast) ease; }
.cs-rel__list a:hover { background: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
.cs-rel__list b { font-size: var(--fs-lead); }
.cs-rel__list span { color: var(--text-sub); font-size: var(--fs-small); }
@media (min-width: 900px) { .cs-rel__list { grid-template-columns: 1fr 1fr; } }
/* 목록 */
.wk-filter { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wk-filter button { font: inherit; cursor: pointer; display: grid; text-align: left; gap: var(--sp-1); min-width: 7.5em; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-card); border: 0; background: color-mix(in srgb, var(--paper) 7%, var(--ink)); color: var(--text-sub-on-ink); font-size: var(--fs-small); font-weight: var(--weight-strong); transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.wk-filter button b { font-size: var(--fs-stat); line-height: 1; letter-spacing: -0.03em; color: var(--text-on-ink); }
.wk-filter button:active { transform: scale(0.97); }
.wk-filter button[aria-pressed="true"] { background: var(--paper); color: var(--text); }
.wk-filter button[aria-pressed="true"] b { color: var(--rec); }
.wk-sheet { padding: var(--sp-8) 0 var(--section-y); }
.wk-group + .wk-group { margin-top: var(--sp-9); }
.wk-group__title { font-size: var(--fs-h3); font-weight: var(--weight-title); margin-bottom: var(--sp-4); }
.wk-group__title span { font-size: var(--fs-small); color: var(--text-sub); font-weight: var(--weight-strong); margin-left: var(--sp-2); }
.wk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); }
.wk-grid a { display: grid; gap: var(--sp-1); color: inherit; text-decoration: none; }
.wk-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--line); margin-bottom: var(--sp-1); transition: transform var(--dur) var(--ease-out); }
.wk-grid b { font-size: var(--fs-small); line-height: 1.4; }
.wk-grid span { font-size: var(--fs-label); color: var(--text-sub); }
.wk-item.is-lead { grid-column: 1 / -1; }
.wk-item.is-lead b { font-size: var(--fs-lead); }
.wk-grid.is-tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wk-grid.is-tall img { aspect-ratio: 9 / 16; }
@media (hover: hover) and (pointer: fine) { .wk-grid a:hover img { transform: scale(1.02); } }
@media (min-width: 900px) { .wk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .wk-item.is-lead { grid-column: span 2; grid-row: span 2; } .wk-grid.is-tall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wk-cases { background: var(--ink); color: var(--text-on-ink); padding: var(--section-y) 0; }
.wk-cases__list { list-style: none; margin: var(--sp-7) 0 0; padding: 0; }
.wk-cases__list a { display: grid; gap: var(--sp-1) var(--sp-6); padding: var(--sp-5) 0; border-top: var(--border) solid var(--line-on-ink); color: inherit; text-decoration: none; }
.wk-cases__list li:last-child a { border-bottom: var(--border) solid var(--line-on-ink); }
.wk-cases__list b { font-size: var(--fs-h3); font-weight: var(--weight-title); }
.wk-cases__list span { color: var(--text-sub-on-ink); }
.wk-cases__list a::after { content: "→"; color: var(--rec-on-ink); font-weight: var(--weight-strong); }
@media (min-width: 900px) { .wk-cases__list a { grid-template-columns: 5fr 6fr auto; align-items: baseline; } .wk-cases__list a:hover b { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } }
@media (max-width: 899px) { .wk-cases__list a::after { display: none; } }

/* ── 홈 v2 (2026-10-27 와이어프레임 2차): 상단 썸네일 흐름 · 숫자+원본 · 세 칸 입구 · 비교표 · 가로 시간선 · 고객+감독 ── */
.hero--wall { min-height: auto; display: block; padding-bottom: var(--sp-7); }
.hero--wall .hero__in { padding-top: clamp(112px, 14vh, 168px); padding-bottom: var(--sp-8); }
.hero__wall { gap: 8px; }
.hero__wall .wall__track img { height: clamp(96px, 9vw + 30px, 156px); }
.hero__foot { max-width: var(--max); margin: 0 auto; padding: var(--sp-6) var(--gutter) 0; display: grid; gap: var(--sp-3); }
.hero__foot .playbar { margin-top: 0; }
.hero--wall .playbar__fill { animation: hero-fill 20s linear infinite; }
@keyframes hero-fill { from { --p: 0; transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__wallnote { font-size: var(--fs-small); color: var(--text-sub-on-ink); max-width: 48em; }
@media (prefers-reduced-motion: reduce) { .hero--wall .playbar__fill { animation: none; transform: none; } }
.stats--proof { padding-top: var(--section-y); border-top: var(--border) solid var(--line-on-ink); }
.stats__grid { display: grid; gap: var(--sp-7); }
.stats__title { font-size: var(--fs-h2); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance; word-break: keep-all; max-width: 16em; }
.stats--proof .stat:first-child .stat__num { color: var(--rec-on-ink); }
.stats--proof .proof__shot { margin: 0; }
.stats--proof .proof__shot img { max-width: 821px; height: auto; }
.stats--proof .proof__shot figcaption { color: var(--text-sub-on-ink); font-size: var(--fs-small); }
@media (min-width: 1024px) { .stats__grid { grid-template-columns: 5fr 7fr; column-gap: var(--sp-8); align-items: start; } .stats__title { grid-column: 1 / -1; } .stats--proof .stats__list { grid-template-columns: 1fr 1fr; } }
.doors--cols .doors__title { font-size: var(--fs-h2); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); text-wrap: balance; word-break: keep-all; max-width: 18em; margin-bottom: var(--sp-7); }
.doors__cols { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8) var(--sp-5); }
.dcol { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.dcol__thumb { display: block; width: 100%; margin-bottom: var(--sp-3); }
.dcol__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--line); transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .dcol:hover .dcol__thumb img { transform: scale(1.015); } }
.dcol__name { font-size: var(--fs-h3); font-weight: var(--weight-title); letter-spacing: -0.02em; }
.dcol__name a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.dcol__name .ic { width: 22px; height: 22px; color: var(--rec); }
.dcol__name a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.dcol__line { font-size: var(--fs-lead); font-weight: var(--weight-strong); }
.dcol__body { color: var(--text-sub); }
.dcol__proof { font-size: var(--fs-small); color: var(--text); padding-left: var(--sp-3); border-left: 2px solid var(--rec); margin: var(--sp-2) 0 var(--sp-4); }
.dcol .btn { margin-top: auto; }
@media (min-width: 900px) { .doors__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why--table { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); padding: var(--section-y) 0; }
.why--table .compare { font-size: var(--fs-lead); }
.why--table .compare th, .why--table .compare td { padding: var(--sp-5) var(--sp-2); }
.why--table .compare td:last-child { background: var(--ink); }
.why--table .compare thead th:last-child { background: var(--ink); color: var(--text-on-ink); border-radius: var(--radius-card) var(--radius-card) 0 0; padding-top: var(--sp-4); }
.why--table .compare tbody tr:last-child td:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.why__cta { margin-top: var(--sp-2); }
@media (min-width: 1024px) { .why--table .why__grid { grid-template-columns: 5fr 7fr; column-gap: var(--sp-9); align-items: start; } .why--table .compare { grid-column: 2; grid-row: 1 / span 3; } }
.steps--line { padding: var(--section-y) 0; }
.hline { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-6); position: relative; }
.hline li { position: relative; padding-left: var(--sp-7); display: grid; gap: var(--sp-1); }
.hline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rec); z-index: 1; }
.hline li:last-child::before { background: var(--rec); }
.hline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.hline b { font-size: var(--fs-lead); font-weight: var(--weight-title); }
.hline span { color: var(--text-sub); }
@media (min-width: 900px) {
  .hline { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .hline::before { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; }
  .hline li { padding: var(--sp-7) 0 0; }
  .hline li::before { top: 0; }
}
.clients--dir { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); padding: var(--section-y) 0; }
.director__in { margin-top: var(--sp-8); padding-top: var(--sp-7); border-top: var(--border) solid var(--line); display: grid; gap: var(--sp-4); }
.director__in .director__title { font-size: var(--fs-h3); }
.director__in .director__bio { font-size: var(--fs-body); color: var(--text-sub); }
@media (min-width: 1024px) { .director__in { grid-column: 1 / -1; grid-template-columns: 6fr 6fr; column-gap: var(--sp-8); align-items: start; } }
.why--table .compare td:last-child .yes { color: var(--text-on-ink); }
@media (min-width: 1024px) { .why--table .why__title { grid-column: 1; grid-row: 1; } .why--table .why__body { grid-column: 1; grid-row: 2; } .why--table .why__cta { grid-column: 1; grid-row: 3; } .why--table .why__grid { row-gap: var(--sp-6); } }
/* 작업 사례 v2 다듬기 */
.cs-rel__list a { grid-template-columns: 9em 1fr; align-items: center; gap: var(--sp-4); padding: var(--sp-3); }
.cs-rel__list img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.cs-rel__list div { display: grid; gap: var(--sp-1); }
.cs-rel__list span { font-size: var(--fs-body); }
@media (max-width: 479px) { .cs-rel__list a { grid-template-columns: 7em 1fr; } .cs-rel__list span { font-size: var(--fs-small); } }
.wk-grid span { display: none; }
.wk-grid--brand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk-grid--short { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
.wk-grid--short img { aspect-ratio: 9 / 16; }
@media (min-width: 900px) { .wk-grid--brand { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wk-grid--short { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
/* 유튜브 운영: 시리즈 띠 */
.wk-grid--youtube { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--sp-3); padding-bottom: var(--sp-2); }
.wk-grid--youtube::-webkit-scrollbar { display: none; }
.wk-grid--youtube li { flex: 0 0 clamp(220px, 26vw, 340px); scroll-snap-align: start; }
.wk-group[data-cat="youtube"] { background: var(--ink); color: var(--text-on-ink); margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: var(--sp-8) var(--gutter); border-radius: var(--radius-card); }
.wk-group[data-cat="youtube"] .wk-group__title span { color: var(--text-sub-on-ink); }
.wk-group[data-cat="youtube"] .sv-play { background: var(--line-on-ink); }
.wk-group[data-cat="youtube"] .sv-play i { background: var(--rec-on-ink); }
.wk-group[data-cat="youtube"] img { background: var(--line-on-ink); }
/* 머법관 대표 영상 오른쪽 칸 */
@media (min-width: 1024px) { .cs-feat__rest li { grid-template-columns: 1fr 1fr; } }
/* 홈 감독 구역: 한 줄을 크게 */
.director__in .director__title { font-size: var(--fs-h2); font-weight: var(--weight-title); letter-spacing: var(--tracking-title); line-height: var(--leading-title); word-break: keep-all; }
.director__in .director__title::before { content: ""; display: block; width: 48px; height: 4px; background: var(--rec); margin-bottom: var(--sp-5); }
.director__in .director__bio { font-size: var(--fs-lead); }
@media (max-width: 699px) { .hero__wallnote { font-size: var(--fs-body); } }
@media (min-width: 1024px) { .why--table .why__title { font-size: clamp(1.75rem, 0.9rem + 1.6vw, 2.5rem); word-break: keep-all; } .why--table .br-pc { display: none; } .why--table .why__grid { grid-template-columns: 6fr 6fr; } }
/* 작업 사례 v2 3차 */
.cs-feat__rest li { display: block; }
@media (min-width: 1024px) { .cs-feat__grid { align-items: start; } .cs-feat__rest a { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: center; } .cs-feat__rest img { width: 100%; } }
.cs-strip { padding-bottom: var(--sp-8); }
.cs-result--series { background: var(--ink); color: var(--text-on-ink); }
.cs-result--series .prose, .cs-result--series .prose p { color: var(--text-on-ink); }
.cs-result--series .cs-svc a { color: var(--rec-on-ink); }
.cs-result__num { margin-top: var(--sp-6); }
.cs-result__num b { display: block; font-size: clamp(3.5rem, 2rem + 6vw, 7rem); font-weight: var(--weight-title); letter-spacing: -0.05em; line-height: 0.9; color: var(--rec-on-ink); white-space: nowrap; }
.cs-result__num small { font-size: 0.32em; margin-left: 0.05em; letter-spacing: 0; color: var(--text-on-ink); }
.cs-result__num span { display: block; margin-top: var(--sp-3); color: var(--text-sub-on-ink); font-size: var(--fs-small); }
.cs-result--bundle { background: var(--paper); }
.cs-result--bundle .cs-result__body > p:first-child { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-weight: var(--weight-title); line-height: 1.3; padding-left: var(--sp-5); border-left: 4px solid var(--rec); }
.wk-note a { display: flex !important; flex-direction: column; justify-content: flex-end; gap: var(--sp-3); height: 100%; min-height: 12em; padding: var(--sp-5); border-radius: 4px; background: var(--ink); color: var(--text-on-ink) !important; }
.wk-note b { font-size: var(--fs-lead) !important; line-height: 1.35; }
.wk-note em { font-style: normal; color: var(--rec-on-ink); font-weight: var(--weight-strong); }
@media (min-width: 900px) { .wk-grid--short { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }
@media (max-width: 899px) { .wk-grid--short { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-feat__grid { grid-template-columns: 1fr; } .cs-feat__lead img { aspect-ratio: 21 / 9; } .cs-feat__rest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } .cs-feat__rest a { display: block; } }
/* 작업 목록 마지막 문의: 위 사례 목록(ink)과 이어지지 않게 톤 한 단계 */
.wk-cases + .sv-end { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); color: var(--text); padding: var(--section-y) 0; }

/* ── 차분하게 (2026-10-27 23시, 성준님 "디자인이 구려졌다" 반영) ──
   빨강은 문의 버튼 · 재생/진행 바 · 페이지당 핵심 숫자 하나에만. 아이콘·체크·장식 선·보조 숫자는 무채색 */
.stats--proof .stat:first-child .stat__num { color: var(--text-on-ink); }
.stats__wall { margin-top: var(--section-y); }
.stats__wallnote { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--text-sub-on-ink); }
.dcol__name .ic, .sv-fit__yes li .ic, .sv-cases .ic, .sv-check__list .ic, .fitcards__body .ic { color: var(--text-sub); }
.sv-names .ic { color: var(--text-sub-on-ink); }
.dcol__proof { border-left-color: var(--line); color: var(--text-sub); }
.director__in .director__title::before { display: none; }
.hline li::before { border-color: var(--text-sub); }
.hline li:last-child::before { border-color: var(--rec); }
.cs-band li:first-child b { color: var(--text-on-ink); }
.sv-drag__row li:first-child .sv-drag__dur { color: var(--text-on-ink); }
.sv-drag__row li::before { background: var(--line-on-ink); }
.wk-filter button[aria-pressed="true"] b { color: var(--text); }
.wk-cases__list a::after { color: var(--text-sub-on-ink); }
.cs-svc a { color: inherit; }
.cs-result--bundle .cs-result__body > p:first-child { border-left-color: var(--text); }
.sv-pct__row:first-child .sv-pct__bar i { background: var(--text); }
.sv-steps li::before { border-color: var(--text-sub-on-ink); }
.sv-steps li:last-child::before { background: var(--text-on-ink); border-color: var(--text-on-ink); }
.sv-tabs__quote { font-weight: var(--weight-strong); }
/* 차분하게 2차: 배경은 ink·paper 두 가지만(구역 단위 회색 띠 제거), 큰 숫자 무채색, 목록 상자 걷기 */
.why--table, .clients--dir, .sv-doc, .sv-faq--one, .cs-result, .wk-cases + .sv-end { background: var(--paper); }
.sv-bignum b, .cs-result__num b { color: var(--text); }
.cs-result--series .cs-result__num b { color: var(--text-on-ink); }
.sv-contact__all { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-small); }
.wk-group[data-cat="youtube"] { background: none; color: inherit; margin: 0; padding: 0; border-radius: 0; }
.wk-group[data-cat="youtube"] .wk-group__title span { color: var(--text-sub); }
.wk-group[data-cat="youtube"] .sv-play { background: var(--line); }
.wk-group[data-cat="youtube"] .sv-play i { background: var(--rec); }
.wk-filter button { background: transparent; padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; min-width: 0; border-radius: 0; }
.wk-filter button b { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); color: var(--text-sub-on-ink); }
.wk-filter button[aria-pressed="true"] { background: transparent; color: var(--text-on-ink); }
.wk-filter button[aria-pressed="true"] b { color: var(--text-on-ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--rec-on-ink); }
.wk-filter { gap: var(--sp-6); }
.sv-doc__sheet { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); }
/* 차분하게 3차: 간격·크기 정리 */
.work { padding-top: var(--section-y); }
.wk-group[data-cat="youtube"] { margin-top: var(--sp-9); }
@media (max-width: 699px) { .work__item:last-child:nth-child(even) { grid-column: 1 / -1; } }
.wk-note a { background: transparent; color: var(--text) !important; border: var(--border) solid var(--line); }
.wk-note em { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1024px) { .sv-run__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-run__list .is-lift .sv-run__name { font-size: var(--fs-body); } .sv-run__grid { grid-template-columns: 1fr; } }
.sv-num b { font-size: clamp(4rem, 2rem + 7vw, 8rem); }
.sv-num span { border-top-color: var(--line-on-ink); }
.sv-hero, .cs-top { padding-top: var(--sp-9); }
/* 차분하게 4차 */
.dcol__thumb img[src*="studio-retention"] { object-position: top left; }
.wk-note a { min-height: 0; height: auto; justify-content: flex-start; padding: var(--sp-4); }
.wk-grid--short .wk-note { align-self: end; }
.sv-bignum b { font-size: clamp(3.5rem, 2rem + 5vw, 7rem); }
.sv-contact__frames img { filter: saturate(0.45); transition: filter var(--dur) ease; }
.sv-contact__run:hover .sv-contact__frames img { filter: none; }
@media (min-width: 1024px) { .why--table .why__grid { grid-template-rows: auto auto 1fr; align-items: start; } }
.sv-end__line { font-size: var(--fs-h2); max-width: 20em; }
.cs-rel + .final .final__title { font-size: var(--fs-h2); }
@media (prefers-reduced-motion: reduce) { .sv-contact__frames img { transition: none; } }
/* 완성 1차: 쇼릴이 보이게 막을 낮추고, 대표 작업 큰 칸이 두 줄 높이를 채움 */
.hero__media::after { background: rgb(14 14 16 / 0.36); }
.hero__in { position: relative; }
.hero__title, .hero__lead { text-shadow: none; }
@media (min-width: 1024px) {
  .work__item.is-lead a { height: 100%; }
  .work__item.is-lead img { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 699px) { .work__item:last-child:nth-child(even) { grid-column: auto; } }
/* 완성 2차: 글자 박힌 썸네일은 위쪽만 넓게(자막 영역을 잘라 영화 장면처럼), 덜어내기 */
.dcol__thumb img { aspect-ratio: 2.4 / 1; object-position: center top; }
.sv-strip img { aspect-ratio: 2.4 / 1; object-position: center top; }
.dcol__name .ic { display: none; }
.dcol .btn { background: none; color: var(--text); min-height: 0; padding: 0; font-weight: var(--weight-strong); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.dcol .btn::after { content: " →"; }
@media (min-width: 1024px) { .work__item.is-lead .work__name { font-size: var(--fs-lead); } }
@media (max-width: 699px) { .work__item:last-child:nth-child(even) { grid-column: 1 / -1; } }
.sv-run__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.sv-run__head .link-on-ink { margin-top: 0; }
@media (max-width: 479px) { .sv-hero--sheet .sv-h1 { font-size: 1.875rem; } }
/* 완성 3차 */
.cs-result--series { background: var(--ink) !important; color: var(--text-on-ink); }
.sv-drag__row li:nth-child(n) { margin-top: 0; }
.sv-contact__frames img { filter: grayscale(1); }
.sv-contact__run:hover .sv-contact__frames img { filter: none; }
.clients__list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 760px; }
.logo { min-height: 48px; }
.logo img, .logo.is-tall img { max-height: 30px; filter: grayscale(1); opacity: 0.7; }
.logo.is-text { font-size: 1.125rem; color: var(--text-sub); opacity: 1; }
.dcol .btn::after { content: "→"; margin-left: 0.4em; }
.dcol__thumb img { aspect-ratio: 12 / 5; object-position: center; }
/* 완성 4차: 옆으로 넘기는 줄은 본문 왼쪽 선에서 시작, 로고는 눈에 보이는 무게로, 썸네일 테두리 잘라내기 */
.sv-strip, .wk-grid--youtube { padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.wk-grid--youtube { padding-left: 0; scroll-padding-left: 0; }
.logo img[src*="lotte-ins"], .logo img[src*="geuma"] { max-height: 20px; }
.logo img[src*="duo"] { max-height: 26px; }
.logo img[src*="opm"] { max-height: 40px; }
.logo.is-tall img { max-height: 46px; }
.sv-contact__frames li { overflow: hidden; }
.sv-contact__frames img { transform: scale(1.08); }
/* 완성 5차 */
.logo img, .logo.is-tall img { filter: grayscale(1) brightness(0); opacity: 0.5; }
.logo.is-text { color: var(--text); opacity: 0.5; }
@media (hover: hover) and (pointer: fine) { .logo:hover img, .logo.is-text:hover { opacity: 0.8; } }
.steps--line + .clients--dir { padding-top: 0; }
.sv-strip img[src*="Q2WzA_Mx5YI"] { object-position: center 18%; }
.steps--line { padding-bottom: var(--sp-8); }
/* 완성 6차: 로고는 잉크 면적이 같아 보이게(높이 = 가로세로비·잉크 밀도로 계산), 구분선 통일 */
.logo img[src*="duo"] { max-height: 26px; }
.logo img[src*="geuma"], .logo img[src*="lotte-ins"] { max-height: 20px; }
.logo img[src*="opm"] { max-height: 28px; }
.logo.is-tall img { max-height: 46px; }
.logo img[src*="lotte-ins"] { opacity: 0.62; }
.logo.is-text { font-size: 1.05rem; }
.director__in { border-top: 0; padding-top: 0; }
/* 완성 7차: 진행 단계 윗선 맞춤, 한글 출처 줄은 본문 글꼴(고정폭 글꼴엔 한글이 없어 자간이 벌어짐), 제목 위쪽 맞춤 */
.hline { align-items: start; }
.hline li { align-content: start; }
.sv-src, figcaption.mono, .proof__shot figcaption, .stats__source, .stats__wallnote, .numband__src, .incl__note { font-family: var(--font-sans); letter-spacing: 0; word-spacing: normal; text-align: left; }
@media (min-width: 1024px) { .clients__grid { align-items: start; } }
.hline span { word-break: keep-all; }
.wk-grid--short .wk-note { align-self: start; }
/* 구역 간격을 다른 구역과 같은 기준(약 266px)으로 */
.steps--line { padding-bottom: var(--section-y); }
.steps--line + .clients--dir { padding-top: var(--section-y); }
/* 완성 8차: 마지막 구역과 푸터 사이 1px 틈(소수점 높이로 바탕이 비침) 막기, 문의 링크 정렬 통일 */
.foot { margin-top: -1px; position: relative; }
.sv-actions .sv-link { margin-top: 0; }
a[target="_blank"].sv-link::after { content: "↗"; margin-left: 0.3em; font-weight: var(--weight-body); }
/* 완성 9차: 폼 제출 버튼 — 브라우저 기본 테두리 제거, 폼 폭 전체 */
button.btn { border: 0; font-family: inherit; cursor: pointer; }
.form__submit { justify-self: stretch; align-self: stretch; width: 100%; }