/* junto.kr v2 — madup.com 참고: 검정 바탕, SUIT 한 가지 글꼴, 아주 굵은 영문 대문자, 파란 포인트.
   style.css 위에 덮어쓴다. 상단바 구조는 그대로, 색과 글꼴만 바꾼다. */
:root {
  --acc: #3b6cff;
  --acc-soft: #7d9bff;
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,.66);
  --gray: rgba(255,255,255,.48);
  --line: rgba(255,255,255,.14);
  --paper: #0c0c0f;
  --bg: #000000;
  --dark: #000000;
  --r: 22px;
  --font: "SUIT Variable", "SUIT", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --mx-pad: clamp(20px, 4.4vw, 64px);
}
body { background: var(--bg); color: var(--ink); font-family: var(--font); }

/* 상단바: 구조 유지, 어두운 바탕에 맞춘 색 */
.hd.solid { background: rgba(0,0,0,.78); color: #fff; box-shadow: 0 1px 0 var(--line); }
.gnb a { font-weight: 600; letter-spacing: .01em; }
.logo { font-weight: 900; }

/* 공통 */
.mx-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--mx-pad); }
.mx-h { font-size: clamp(44px, 6vw, 88px); font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.mx-h.center, .mx-sub.center { text-align: center; }
.mx-sub { color: var(--ink-2); margin-top: 18px; font-size: 16px; }
.mx-say { font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 1.45; letter-spacing: -0.03em; }
.mx-say.sm { font-size: clamp(24px, 2.6vw, 40px); }
.mx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; }
.mx-more { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.mx-more span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--acc); color: #fff; font-size: 22px; font-weight: 500; transition: transform .3s; }
.mx-more:hover span { transform: rotate(90deg); }

/* 1. 히어로: 화면 가운데 아주 굵은 대문자, 단어 사이에 작업 장면이 알약 모양으로 들어간다 */
.mx-hero { position: relative; min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 120px var(--mx-pad) 80px; background: #000; overflow: hidden; }
.mx-hero::before { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(closest-side, rgba(59,108,255,.35), transparent 70%); pointer-events: none; }
.mx-hero-t { position: relative; font-size: clamp(46px, 9.2vw, 150px); font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; }
.mx-hero-t .ln { display: flex; align-items: center; justify-content: center; gap: .18em; white-space: nowrap; }
.pill { display: inline-block; width: 1.9em; height: .82em; border-radius: 999px; overflow: hidden; vertical-align: middle; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.pill.p2 { width: .82em; border-radius: 50%; }
.pill.p2 img { animation: none; object-position: 40% 50%; }
.pill img { width: 100%; height: 100%; object-fit: cover; animation: mx-pan 9s ease-in-out infinite alternate; }
@keyframes mx-pan { from { transform: scale(1.15) translateX(-4%); } to { transform: scale(1.15) translateX(4%); } }
.mx-hero-s { position: relative; margin-top: 40px; font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; color: var(--ink-2); }
.mx-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--gray); }

/* 2. 국문 선언 2단: 왼쪽 큰 문장 | 세로선 | 오른쪽 설명 */
.mx-intro { padding: clamp(120px, 14vw, 200px) 0; }
.mx-intro-in { display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.mx-vline { width: 1px; height: 100%; min-height: 360px; background: var(--line); }
.mx-intro-p { display: grid; gap: 22px; padding-top: 12px; font-size: 16px; line-height: 1.85; color: var(--ink-2); max-width: 520px; }

/* 3. 좌우 분할 대형 문구 + 가운데 세로 비주얼 */
.mx-split { position: relative; padding: clamp(60px, 8vw, 120px) var(--mx-pad) clamp(120px, 12vw, 180px); }
.mx-split-t { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; row-gap: .1em; font-size: clamp(40px, 7vw, 112px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; mix-blend-mode: difference; }
.mx-split-t .l { text-align: left; } .mx-split-t .r { text-align: right; }
.mx-split-v { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(30vw, 420px); aspect-ratio: 3/4; transform: translate(-50%, -54%); border-radius: var(--r); overflow: hidden; }
.mx-split-v img { width: 100%; height: 100%; object-fit: cover; }
.mx-split-c { position: relative; z-index: 2; margin: clamp(180px, 22vw, 320px) 0 0 auto; max-width: 420px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.mx-split-c a { color: #fff; font-weight: 700; white-space: nowrap; }

/* 4. 대표 작업: 모서리가 둥근 세로 카드를 가로로 넘긴다 */
.mx-works { padding: 40px 0 clamp(120px, 12vw, 180px); }
.mx-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--mx-pad) 8px; scrollbar-width: none; cursor: grab; }
.mx-rail::-webkit-scrollbar { display: none; }
.mx-rail.drag { cursor: grabbing; scroll-snap-type: none; }
.mx-card { position: relative; flex: 0 0 clamp(260px, 27vw, 400px); aspect-ratio: 3/4; border-radius: var(--r); overflow: hidden; scroll-snap-align: start; background: #111; }
.mx-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.mx-card:hover img { transform: scale(1.06); }
.mx-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.mx-card-t { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; }
.mx-card-t small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.7); margin-bottom: 6px; }

/* 5. 서비스: 굵은 영문 줄 목록 */
.mx-svc { padding: clamp(100px, 10vw, 160px) 0; border-top: 1px solid var(--line); }
.mx-row { display: grid; grid-template-columns: 60px minmax(0, 1.1fr) minmax(0, 1fr) 48px; gap: 32px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line); transition: padding .35s; }
.mx-row:first-of-type { border-top: 1px solid var(--line); }
.mx-row .n { font-size: 14px; font-weight: 700; color: var(--gray); }
.mx-row b { font-size: clamp(28px, 3.2vw, 48px); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
.mx-row p { color: var(--ink-2); line-height: 1.75; }
.mx-row .go { justify-self: end; font-size: 26px; transition: transform .3s; }
.mx-row:hover { padding-left: 14px; }
.mx-row:hover .go { transform: translateX(6px); color: var(--acc-soft); }

/* 6. 고객사 타일 */
.mx-clients { padding: clamp(100px, 10vw, 160px) 0; }
.mx-tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 56px; }
.mx-tiles li { display: grid; place-items: center; text-align: center; aspect-ratio: 16/9; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #17171b, #0e0e11); border: 1px solid rgba(255,255,255,.06); font-size: 15px; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.62); transition: color .25s, border-color .25s; }
.mx-tiles li:hover { color: #fff; border-color: rgba(255,255,255,.22); }

/* 7. 소식 */
.mx-news { padding: clamp(80px, 8vw, 140px) 0 clamp(120px, 12vw, 180px); }
.mx-news-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mx-nc { display: grid; gap: 12px; align-content: start; padding: 14px 14px 20px; border-radius: 16px; background: #0f0f12; border: 1px solid rgba(255,255,255,.06); transition: border-color .25s, transform .35s; }
.mx-nc:hover { border-color: rgba(255,255,255,.22); transform: translateY(-4px); }
.mx-nc .img { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: #1a1a20; display: grid; place-items: center; }
.mx-nc .img img { width: 100%; height: 100%; object-fit: cover; }
.mx-nc .img b { font-size: 22px; font-weight: 900; line-height: 1.1; text-align: center; color: var(--acc-soft); }
.mx-nc small { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gray); }
.mx-nc .t { font-size: 17px; font-weight: 800; line-height: 1.45; letter-spacing: -0.02em; }
.mx-nc .plus { font-size: 12px; font-weight: 700; color: var(--gray); margin-top: 6px; }

/* 기존 페이지 공통 요소: 어두운 바탕에 맞춤 */
.sec.paper, .paper { background: var(--paper); }
.sec.dark { background: #000; }
.card figure { background: #16161a; }
.cover { background: #000; }
.chip { color: var(--ink-2); border-color: var(--line); }
.chip.on { background: #fff; color: #000; border-color: #fff; }
.btn { border-radius: 999px; }
input, textarea, select { background: #0e0e11; color: #fff; border-color: var(--line); }

@media (max-width: 960px) {
  .mx-intro-in { grid-template-columns: 1fr; }
  .mx-vline { display: none; }
  .mx-split-t { grid-template-columns: 1fr; }
  .mx-split-t .r { text-align: left; color: var(--acc-soft); mix-blend-mode: normal; }
  .mx-split-v { position: relative; left: auto; top: auto; transform: none; width: 100%; aspect-ratio: 4/3; margin-top: 40px; }
  .mx-split-c { margin-top: 32px; }
  .mx-row { grid-template-columns: 40px 1fr; } .mx-row p { grid-column: 2; } .mx-row .go { display: none; }
  .mx-news-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mx-hero-t .ln { flex-wrap: wrap; white-space: normal; }
  .mx-news-g { grid-template-columns: 1fr; }
  .mx-head { flex-direction: column; align-items: flex-start; }
}

/* 기존 요소의 흰 바탕을 어두운 바탕으로 */
.clients-band, .svc, .pr, .clients li { background: #0e0e11; }
.fld input, .fld textarea, .sub-row input { background: #0e0e11; color: #fff; }
.fld input::placeholder, .fld textarea::placeholder, .sub-row input::placeholder { color: rgba(255,255,255,.35); }
.sub-row button { background: #fff; color: #000; }
.tf-case, .pd-credit { background: transparent; }
.tf-case { background: #0e0e11; }

/* 좌우 분할 문구: 네 줄을 왼쪽·오른쪽 번갈아 놓고, 가운데 세로 이미지를 글자 뒤에 겹친다 */
.mx-split-t { grid-template-columns: 1fr; mix-blend-mode: normal; font-size: clamp(40px, 7.4vw, 124px); }
.mx-split-t p { position: relative; z-index: 2; white-space: nowrap; mix-blend-mode: difference; }
.mx-split-t .l { text-align: left; } .mx-split-t .r { text-align: right; }
.mx-split-v { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(180px, 20vw, 320px); aspect-ratio: 3/4; }
.mx-split-c { margin-top: 56px; }
@media (max-width: 960px) {
  .mx-split-t p { white-space: normal; }
  .mx-split-t .r { text-align: right; color: #fff; }
  .mx-split-v { position: relative; left: auto; top: auto; transform: none; width: 100%; aspect-ratio: 4/3; margin-top: 32px; }
}
@media (min-width: 961px) { .mx-split-c { margin-top: clamp(90px, 10vw, 150px); } }

/* 고객사 로고 타일 */
.mx-tiles.logos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.mx-tiles.logos li { aspect-ratio: 16/9; padding: 18px 22px; }
.mx-tiles.logos img { max-width: 72%; max-height: 38px; width: auto; height: auto; object-fit: contain; opacity: .62; transition: opacity .25s; }
.mx-tiles.logos li:hover img { opacity: 1; }
@media (max-width: 560px) { .mx-tiles.logos { grid-template-columns: repeat(2, 1fr); } .mx-tiles.logos img { max-height: 30px; } }
.card-method { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gray); }

/* 메인 컬러: 보라 (블루 대신, 2026-10-09 확정) */
:root { --acc: #5B2EF5; --acc-soft: #8F72FF; }
.mx-hero::before { background: radial-gradient(closest-side, rgba(91,46,245,.38), transparent 70%); }
.phead::after { background: radial-gradient(circle, rgba(91,46,245,.22), transparent 65%); }

/* 메인 컬러: Signal Lime (2026-10-09 확정, 보라 대체). 라임 바탕 위 글자는 검정 */
:root { --acc: #C8FF2E; --acc-soft: #C8FF2E; --on-acc: #0A0A0A; }
.mx-hero::before { background: radial-gradient(closest-side, rgba(200,255,46,.16), transparent 70%); }
.phead::after { background: radial-gradient(circle, rgba(200,255,46,.12), transparent 65%); }
.mx-more span, .btn, .role:first-child, .pr-n, .chip.on, .opt input:checked + span, .sub-row button:hover { color: var(--on-acc); }
.role:first-child .card-lb, .role:first-child p, .role:first-child h3 { color: var(--on-acc); }
.btn:hover { color: var(--on-acc); }
.fld input:focus, .fld textarea:focus { box-shadow: 0 0 0 3px rgba(200,255,46,.18); }
.end-glow { background: radial-gradient(50% 70% at 75% 60%, rgba(200,255,46,.22), transparent 70%), radial-gradient(40% 50% at 10% 10%, rgba(200,255,46,.08), transparent 70%); }
/* 역할 카드 항목 구분선: 라임 카드는 검정 선, 검정 카드는 옅은 흰 선 */
.role li { border-bottom: 1px solid var(--line); }
.role:first-child li { border-color: #0A0A0A; border-bottom-width: .5px; }
.role li:last-child { border-bottom: 0; }
.role:not(:first-child) { border: 1px solid rgba(255,255,255,.4); }

/* ===== 기준 가이드: 박스 라인 (DESIGN.md 참고) =====
   검정 바탕 위에 놓이는 어두운 박스(카드·패널)는 바탕과 구분되도록 흰 라인 1px(40%)을 두른다.
   라임 바탕 박스는 라인 없이, 안쪽 구분선만 검정으로. */
:root { --box-line: rgba(255,255,255,.4); }
.tf-case, .role:not(:first-child), .svc, .pr, .direct, .why-card, .nl-sub-box, .cd-note, .art-body .stat, .ep, .mx-nc {
  border: 1px solid var(--box-line);
}
.svc:hover, .mx-nc:hover, .ep:hover { border-color: rgba(255,255,255,.75); }
.ep.on { border-color: var(--acc); }
/* 단계 목록: 세로로 쌓일 때 맨 위 선만 굵게(2px), 아래 세부 구분선은 얇게(1px) */
.steps4 li + li { border-top-width: 1px; }

/* ===== 기준 가이드: 글자 단계 (DESIGN.md 참고) ===== */
:root {
  --t-label: 600 12px/1.4 var(--font);   /* 영문 라벨: 클라이언트, 섹션 키커 */
  --t-meta: 500 13px/1.5 var(--font);    /* 보조 정보: 형식·기법·제작 방식 */
  --t-card: 600 clamp(17px, 1.35vw, 20px)/1.4 var(--font); /* 카드 제목 */
}
.card-lb { font: var(--t-label); letter-spacing: .08em; }
.card h3, .mason .card h3 { font: var(--t-card); letter-spacing: -0.02em; }
.card-sub, .card-method, .mason .card-sub { font: var(--t-meta); letter-spacing: 0; color: var(--ink-2); }
.card-sub { margin-top: 6px; }
.card-method { margin-top: 2px; }
/* 팀 페이지 고객사: 블록이 아닌 선 격자 (칸 사이를 1px 선으로만 나눈다) */
.clients.logos li { background: transparent; padding: 18px 22px; }
.clients.logos img { max-width: 70%; max-height: 34px; width: auto; height: auto; object-fit: contain; opacity: .62; transition: opacity .25s; }
.clients.logos li:hover img { opacity: 1; }
.end-glow { display: none; }
/* 고객사 로고: 로고마다 면적이 비슷해지도록 계산한 폭(인라인 width)을 쓰고, 칸보다 크면 줄인다 */
.clients.logos img { max-width: 82%; max-height: none; height: auto; }

/* 홈 강조 밑줄 — 메인컬러 라인 */
.ul { text-decoration: none; position: relative; display: inline-block; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: max(3px, .06em); background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.65,0,.35,1) .35s; }
.reveal.in .ul::after { transform: scaleX(1); }
.mx-hero .ul::after { animation: ul-in .9s cubic-bezier(.65,0,.35,1) 1s both; }
@keyframes ul-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ul::after { transition: none; } }

/* 홈 split 이미지 5장 루프 — 장당 3초, 크로스페이드 */
.mx-split-v.loop img { position: absolute; inset: 0; opacity: 0; transform-origin: 50% 45%; will-change: opacity, transform; animation: split-loop 15s linear infinite; }
.mx-split-v.loop img:nth-child(2) { animation-delay: 3s; }
.mx-split-v.loop img:nth-child(3) { animation-delay: 6s; }
.mx-split-v.loop img:nth-child(4) { animation-delay: 9s; }
.mx-split-v.loop img:nth-child(5) { animation-delay: 12s; }
@keyframes split-loop { 0% { opacity: 0; transform: scale(1); } 6.7% { opacity: 1; } 20% { opacity: 1; } 26.7% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .mx-split-v.loop img { animation: none; } }

/* 홈 히어로 모션 — 줄 등장 → 이미지 펼침 → 밑줄 → 마우스·스크롤 반응 */
.mx-hero-t .ln { animation: hero-ln 1.1s cubic-bezier(.2,.7,.2,1) both; will-change: transform; }
.mx-hero-t .ln:nth-child(2) { animation-delay: .12s; }
.mx-hero-t .ln:nth-child(3) { animation-delay: .24s; }
@keyframes hero-ln { from { opacity: 0; transform: translateY(45%); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.mx-hero .pill { animation: hero-pill 1s cubic-bezier(.7,0,.2,1) .75s both; }
.mx-hero .pill.p2 { animation-name: hero-pill2; animation-delay: .9s; }
@keyframes hero-pill { from { width: 0; opacity: 0; } to { width: 1.9em; opacity: 1; } }
@keyframes hero-pill2 { from { width: 0; opacity: 0; } to { width: .82em; opacity: 1; } }
.mx-hero .ul::after { animation-delay: 1.5s; }
.mx-hero-s { animation: hero-ln 1s cubic-bezier(.2,.7,.2,1) 1.2s both; }
.mx-hero-t .mv { display: flex; align-items: center; justify-content: center; gap: .18em; transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mx-hero-t { transform: translateY(var(--sy, 0)) scale(var(--ss, 1)); opacity: var(--so, 1); transform-origin: 50% 30%; }
@media (prefers-reduced-motion: reduce) { .mx-hero-t .ln, .mx-hero .pill, .mx-hero-s { animation: none; } .mx-hero-t .mv { transform: none; } }
@media (max-width: 560px) { .mx-hero-t .mv { flex-wrap: wrap; } }

/* 히어로 한 줄 소개 — 얇게, 흰색 */
.mx-hero-s { font-weight: 400; color: #fff; }

/* 헤더 AI LAB 버튼 — 마우스를 올리면 아래에 설명 */
.ext { position: relative; }
.ext-tip { position: absolute; top: calc(100% + 10px); right: 0; padding: 7px 11px; border-radius: 8px; background: #fff; color: #0A0A0A; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s; }
.ext:hover .ext-tip, .ext:focus-visible .ext-tip { opacity: 1; transform: none; }

/* 홈 서비스 줄 제목 — 한 단계 작게 */
.mx-row b { font-size: clamp(24px, 2.6vw, 38px); }

/* 문의 — 컴퍼니 덱 다운로드 버튼 (라임) */
.deck-btn { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding: 18px 22px; border-radius: 999px; background: var(--acc); color: var(--on-acc); font-size: 16px; font-weight: 700; transition: transform .2s, background .2s; }
.deck-btn:hover { background: #fff; transform: translateY(-2px); }
.deck-btn.off { background: transparent; color: var(--gray); border: 1px solid var(--box-line); font-weight: 600; cursor: default; }
.deck-btn.off:hover { transform: none; }

/* 언어 선택 — 한국어 / English / 日本語 (영어·일본어는 준비 중) */
.lang-wrap { position: relative; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: inherit; opacity: .85; }
.lang:hover, .lang[aria-expanded="true"] { opacity: 1; }
.lang-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; min-width: 150px; list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: #111; border: 1px solid rgba(255,255,255,.4); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s, transform .18s; }
.lang-wrap.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu a, .lang-menu span { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.lang-menu a.on { background: #C8FF2E; color: #0A0A0A; }
.lang-menu span { color: rgba(255,255,255,.45); cursor: default; }
.lang-menu small { font-size: 11px; font-weight: 500; }

/* 캠페인 목록 — 가운데 목록 구간만 흰 바탕 */
.sec.light { background: #fff; color: #0A0A0A; --ink: #0A0A0A; --ink-2: rgba(10,10,10,.62); --gray: rgba(10,10,10,.45); --line: rgba(10,10,10,.14); --box-line: rgba(10,10,10,.3); padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 128px); }
.sec.light .chip { color: rgba(10,10,10,.7); border-color: rgba(10,10,10,.2); }
.sec.light .chip:hover { border-color: #0A0A0A; color: #0A0A0A; }
.sec.light .chip.on { background: #0A0A0A; border-color: #0A0A0A; color: #fff; }
.sec.light .chip.on small { color: #C8FF2E; }
.sec.light .card-lb { color: rgba(10,10,10,.55); }
.sec.light .card h3 { color: #0A0A0A; }
.sec.light .more-ai a { color: #0A0A0A; border-bottom: 2px solid #C8FF2E; }

/* 팀 — 영역별 분류: 왼쪽 영역명, 오른쪽 사람 */
.team-g { border-top: 2px solid var(--ink); }
.tg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.tg-a { font-size: 20px; font-weight: 800; color: var(--acc); letter-spacing: -0.01em; }
.tg-n { margin-top: 6px; font-size: 14px; color: var(--gray); line-height: 1.6; }
.tg .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.tg .team li { border-top: 0; padding: 0; }
@media (max-width: 760px) { .tg { grid-template-columns: 1fr; gap: 16px; } .tg .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg .team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .tg .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 구독 버튼 — 기본 라임, 마우스를 올리면 흰색 */
.sub-row button { background: var(--acc); color: var(--on-acc); font-weight: 700; transition: background .2s, transform .2s; }
.sub-row button:hover { background: #fff; color: #0A0A0A; transform: translateY(-1px); }

/* 메인컬러 02 — 흰 바탕에서 쓰는 어두운 라임 (흰 바탕 대비 4:1) */
:root { --acc-02: #5E8C00; }
.sec.light .card-lb { color: var(--acc-02); font-weight: 700; }
/* 카드 재생 버튼 — 검정 원, 라임 삼각형 */
.play { background: #0A0A0A; }

/* 기본 버튼 — 흰색, 마우스를 올리면 라임 */
.btn { background: #fff; color: #0A0A0A; }
.btn:hover { background: var(--acc); color: var(--on-acc); }

/* 로고 글꼴 — Outfit Medium */
.logo { font-family: "Outfit", var(--font); font-weight: 500; letter-spacing: -0.03em; }

/* 캠페인 카드 분류 줄 — 검정, 한 단계 작게 */
.sec.light .card-sub { color: #0A0A0A; font-size: 12px; letter-spacing: .02em; }

/* 역할 카드 라벨(AI가 맡는 일 / 사람이 맡는 일) — 섹션 라벨(역할 분담)과 같은 크기·굵기 */
.role .card-lb { font-size: 14px; font-weight: 600; letter-spacing: 0; }

/* 홈 서비스 줄 — 마우스를 올리면 부드럽게: 여백을 바꾸지 않고 transform 으로만 움직인다 */
.mx-row, .mx-row:hover { padding-left: 0; }
.mx-row { position: relative; transition: background .5s ease; }
.mx-row > * { transition: transform .7s cubic-bezier(.2,.7,.2,1), color .45s ease; }
.mx-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.65,0,.35,1); }
.mx-row:hover::after { transform: scaleX(1); }
.mx-row:hover .n { color: var(--acc); }
.mx-row:hover b { transform: translateX(18px); }
.mx-row:hover p { transform: translateX(10px); color: var(--ink); }
.mx-row .go { transition: transform .6s cubic-bezier(.2,.7,.2,1), color .45s ease; }
.mx-row:hover .go { transform: translateX(6px) rotate(-45deg); color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .mx-row > *, .mx-row::after { transition: none; } }
.mx-row b { font-size: clamp(22px, 2.2vw, 32px); }

/* 페이지 머리 본문(lead) — 한 단계 얇게 */
.lead { font-weight: 300; }
.lead { color: rgba(255,255,255,.8); }
.sec.light .card-sub { color: rgba(10,10,10,.62); }

/* 상세 영상 — 재생 전 덮개: 우리 썸네일 + 라임 재생 버튼 */
.player { position: relative; }
.yt-cover { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; cursor: pointer; background: #000; display: block; transition: opacity .5s ease; }
.yt-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .5s; filter: brightness(.82); }
.yt-cover:hover img { transform: scale(1.03); filter: brightness(.95); }
.yt-play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--acc); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.yt-play::after { content: ""; position: absolute; left: 35px; top: 28px; border-left: 26px solid #0A0A0A; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.yt-cover:hover .yt-play { transform: scale(1.08); }
.yt-cover.off { opacity: 0; pointer-events: none; }

/* 상세 영상 — 화면 끝까지 붙지 않게 좌우 여백, 모서리 둥글게 */
.pd-hero:not(.tall) { padding: 0 var(--pad); }
.pd-hero:not(.tall) .player { max-width: 1600px; margin: 0 auto; border-radius: var(--r); overflow: hidden; }

/* 본문 줄바꿈 기본 — 단어 단위로 끊고, 마지막 줄이 한 단어만 남지 않게 */
body { word-break: keep-all; overflow-wrap: break-word; }
p, li, dd { text-wrap: pretty; }

/* 캠페인 상세 — 흰 바탕. 라임 강조는 흰 바탕용 메인컬러 02로 바꿔 쓴다 */
.lt { background: #fff; color: #0A0A0A; --ink: #0A0A0A; --ink-2: rgba(10,10,10,.62); --gray: rgba(10,10,10,.45); --line: rgba(10,10,10,.12); --box-line: rgba(10,10,10,.3); --acc: var(--acc-02); --acc-soft: var(--acc-02); }
.pd-head.lt { padding-top: calc(var(--hd-h) + 56px); }
.lt .yt-play { background: #C8FF2E; }
.lt .player { box-shadow: 0 30px 60px rgba(0,0,0,.12); }
.lt .pd-credit dt, .lt .pd-crumb, .lt .pd-crumb a { color: rgba(10,10,10,.5); }
.lt .pd-credit dd, .lt h1, .lt h2, .lt .pd-sec p { color: #0A0A0A; }
.lt .pd-sec p { color: rgba(10,10,10,.78); }
.lt .ep { color: #0A0A0A; }
.lt .cd-pn a { color: #0A0A0A; }
body:has(.pd-head.lt) .hd { background: #000; color: #fff; }
/* 상세 — 첫 영상까지는 검정, 본문부터 흰 바탕. 영상 아래 여백을 검정으로 채워 경계를 만든다 */
.pd-hero { padding-bottom: clamp(56px, 6vw, 96px); background: #000; }

/* 상세 — 참여 크레딧 (역할 / 이름 두 칸) */
.pd-staff { margin-top: clamp(40px, 5vw, 64px); }
.pd-staff h2 { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); margin-bottom: 16px; }
.pd-staff dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.pd-staff dl > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pd-staff dt { color: var(--gray); }
.pd-staff dd { color: var(--ink); margin: 0; }
@media (max-width: 760px) { .pd-staff dl { grid-template-columns: 1fr; } .pd-staff dl > div { grid-template-columns: 130px minmax(0, 1fr); } }

/* 상세 제목 위 클라이언트 × 대행사 — 한 단계 작게 */
.pd-sub { font-size: clamp(14px, 1.2vw, 17px); }
/* 상세 영상 아래 검정 여백 — 앞 규칙(.pd-hero:not(.tall))보다 우선 */
.pd-hero, .pd-hero:not(.tall) { padding-bottom: clamp(64px, 7vw, 112px); background: #000; }
.pd-hero .player { box-shadow: none; }
/* 클라이언트·대행사 표기 — 항상 영문 대문자 */
.pd-sub { text-transform: uppercase; letter-spacing: .02em; }
/* 히어로 한 줄 소개 — 큰 제목 위로 */
.mx-hero-s { margin: 0 0 clamp(20px, 2.4vw, 36px); animation-delay: .1s; }
/* SCROLL 아래 가는 선 화살표 — 천천히 위아래로 */
.mx-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.mx-arrow { display: block; opacity: .7; animation: mx-arrow 1.8s ease-in-out infinite; }
@keyframes mx-arrow { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(5px); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .mx-arrow { animation: none; } }

/* 하단 뉴스레터 구독 — juntoart.ai 와 같은 구조 (모든 페이지 공통) */
.ft-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; align-items: center; padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); border-bottom: 1px solid var(--line); margin-bottom: 48px; }
.ft-lbl { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 14px; }
.ft-sub h2 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: #fff; }
.ft-sub-more { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.ft-sub-more:hover { color: #fff; }
.ft-sub .sub-row { display: flex; gap: 10px; }
.ft-sub .sub-row input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; padding: 16px 20px; border-radius: 999px; border: 1px solid var(--line); background: #000; color: #fff; }
.ft-sub .sub-row input:focus { outline: none; border-color: var(--acc); }
.ft-sub .sub-row button { flex: none; font-size: 17px; font-weight: 700; padding: 18px 40px; border-radius: 999px; border: 0; background: var(--acc); color: var(--on-acc); cursor: pointer; box-shadow: 0 8px 30px rgba(200,255,46,.25); }
.ft-sub .sub-row button:hover { background: #fff; color: #0A0A0A; }
.ft-sub .sub-agree { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.ft-sub .sub-msg { margin-top: 8px; font-size: 13px; color: var(--acc); min-height: 1.2em; }
@media (max-width: 860px) { .ft-sub { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 560px) { .ft-sub .sub-row { flex-direction: column; } }
/* junto.kr 뉴스레터 목록 — 흰 바탕 */
.nl-light .nl-title { color: #0A0A0A; }
.nl-light .nl-row:hover .nl-title { color: var(--acc-02); }
.nl-light .nl-thumb { background: #f1f1f3; }
.nl-light .nl-type { color: #0A0A0A; }
.nl-light .tags span { color: rgba(10,10,10,.7); border-color: rgba(10,10,10,.18); }
/* 홈 소개 — 정의 문장은 흰색으로 강조하고 한 줄로 시작 */
.mx-def { display: block; color: #fff; font-weight: 600; margin-bottom: 6px; }

/* 뉴스레터 본문 — 이미지와 유튜브 카드 */
.art-img { margin: 28px 0; }
.art-img img { width: 100%; border-radius: 14px; display: block; }
.art-img figcaption { margin-top: 10px; font-size: 13px; color: var(--gray); }
.art-yt { position: relative; display: block; margin: 28px 0; border-radius: 14px; overflow: hidden; background: #000; }
.art-yt img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; opacity: .85; transition: opacity .3s; }
.art-yt:hover img { opacity: 1; }
.art-yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--acc); }
.art-yt-play::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 20px solid #0A0A0A; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.art-yt-cap { position: absolute; left: 16px; bottom: 14px; font-size: 13px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* 목록 마우스오버 모션 — 홈 SERVICE 줄과 같은 규칙을 일하는 방식·서비스 페이지 목록에도 적용 */
.role li, .checks li, .steps4 li { position: relative; }
.role li, .checks li > *, .steps4 li > *, .checks li { transition: transform .7s cubic-bezier(.2,.7,.2,1), color .45s ease; }
.role li::after, .checks li::after, .steps4 li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.65,0,.35,1); pointer-events: none; }
.role li:hover::after, .checks li:hover::after, .steps4 li:hover::after { transform: scaleX(1); }
.role:first-child li::after { background: #0A0A0A; }
.role li:hover { transform: translateX(12px); }
.checks li:hover { transform: translateX(12px); color: var(--ink); }
.steps4 li:hover h3 { transform: translateX(14px); }
.steps4 li:hover p { transform: translateX(8px); color: var(--ink); }
.steps4 li:hover span { color: var(--acc); }
.pr { transition: transform .6s cubic-bezier(.2,.7,.2,1), border-color .45s ease; }
.pr .pr-n { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pr:hover { transform: translateY(-6px); border-color: var(--acc); }
.pr:hover .pr-n { transform: rotate(-12deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .role li, .checks li, .steps4 li > *, .pr, .pr .pr-n, .role li::after, .checks li::after, .steps4 li::after { transition: none; } }

/* 뉴스레터 목록 썸네일 — 캠페인 카드처럼 마우스를 올리면 살짝 확대 */
.nl-thumb img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.nl-row:hover .nl-thumb img { transform: scale(1.06); }
/* 팀 영역 줄 — 같은 마우스오버 모션 */
.tg { position: relative; }
.tg .tg-h, .tg .team li { transition: transform .7s cubic-bezier(.2,.7,.2,1), color .45s ease; }
.tg::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.65,0,.35,1); pointer-events: none; }
.tg:hover::after { transform: scaleX(1); }
.tg:hover .tg-h { transform: translateX(14px); }
.tg:hover .team li { transform: translateX(8px); }
.tg .team li:hover b { color: var(--acc); }
.tg .team b { transition: color .3s ease; }
@media (prefers-reduced-motion: reduce) { .tg .tg-h, .tg .team li, .tg::after { transition: none; } }

/* 뉴스레터 상세 — 위(제목·대표 이미지)는 검정, 본문부터 흰 바탕 */
.art:not(.art-main) { padding-bottom: clamp(48px, 6vw, 88px); }
.art-main { padding-top: clamp(48px, 6vw, 88px); }
.art-main.lt .art-body, .art-main.lt .art-body p, .art-main.lt .art-body li { color: rgba(10,10,10,.8); }
.art-main.lt .art-body h2, .art-main.lt .art-body b { color: #0A0A0A; }
.art-main.lt .art-body blockquote { color: #0A0A0A; border-color: var(--acc-02); }
.art-main.lt .stat { background: #f4f4f6; }
.art-main.lt .art-pn a { color: #0A0A0A; }
.art-main.lt .art-pn small { color: rgba(10,10,10,.5); }

/* 설명 문단 — 문장마다 줄을 바꾸므로 한 문장이 한 줄에 들어가도록 폭을 넓힌다 */
.lead { max-width: 980px; }
.svc-lead { max-width: 920px; }
.mx-intro-p { max-width: 620px; }
/* 페이지 머리(phead) 아래 경계 — 흰 라인으로 분리 */
.phead { border-bottom: 1px solid rgba(255,255,255,.4); }
/* 팀 영역 — 마우스오버 라인 효과는 쓰지 않는다 */
.tg::after { display: none; }
/* 마우스오버로 그어지는 라인 효과는 사이트 전체에서 쓰지 않는다 */
.mx-row::after, .role li::after, .checks li::after, .steps4 li::after, .tg::after { display: none; }

/* 뉴스레터 아래 고정 코너: TREND SHORTS · AI PROMPT (src/newsletter.mjs corners) — 밝은/어두운 바탕 모두 currentColor 기준 */
.nl-corner { margin-top: 64px; padding-top: 32px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.nl-c-lbl { font-size: 12px; font-weight: 800; letter-spacing: .16em; margin: 0 0 6px; }
.nl-c-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 22px; }
.nl-c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nl-short { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.nl-short-img { position: relative; display: block; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.nl-short-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.nl-short:hover img { transform: scale(1.04); }
.nl-short-img em { position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; }
.nl-short b { font-size: 15px; line-height: 1.4; }
.nl-short > span:last-child { font-size: 13px; line-height: 1.55; opacity: .7; }
.nl-c-list { display: grid; gap: 16px; }
.nl-prompt { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); color: inherit; text-decoration: none; transition: border-color .3s; }
.nl-prompt:hover { border-color: currentColor; }
.nl-prompt-img { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.nl-prompt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-prompt-txt { display: grid; gap: 6px; align-content: start; }
.nl-prompt-txt small { font-size: 12px; opacity: .6; }
.nl-prompt-txt b { font-size: 17px; line-height: 1.4; }
.nl-prompt-txt > span { font-size: 14px; line-height: 1.6; opacity: .8; }
.nl-prompt-txt code { justify-self: start; font: 12px/1.5 Menlo, monospace; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, currentColor 8%, transparent); }
.nl-prompt-txt em { font-style: normal; font-size: 13px; font-weight: 700; margin-top: 4px; }
@media (max-width: 640px) { .nl-c-grid { grid-template-columns: repeat(2, 1fr); } .nl-prompt { grid-template-columns: 1fr; } }
.nl-c-lead { font-size: 15px; line-height: 1.7; opacity: .75; margin: -10px 0 22px; }