/* 제니스미디어파트너스 — 손님 theme 통째 (2026-10-06, 2_설계/10_섞기표.md)
   색·서체 값은 brand.json → :root 변수(--paper --ink --accent --sub --sub-dark --line --line-dark --plan --dev --design --mkt --fb --fd).
   인트로 raggededge · 팀 카드 쌓기 elespacio · 사례 줄 locomotive · 끝 주황 면 thinkcompany · 한글 조판 studiojt */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--fb), "Site Sans", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px; line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--plan); color: var(--ink); }
:focus-visible { outline: 2px solid var(--plan); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 12px; }
[id] { scroll-margin-top: 96px; }

:root { --side: clamp(20px, 4.4vw, 72px); --wd: "Bricolage Grotesque", var(--fb), sans-serif; --ez: cubic-bezier(.16, 1, .3, 1); --eo: cubic-bezier(.23, 1, .32, 1); }
/* 탄성 곡선(.34,1.37,.64,1)은 팀 카드 쌓기(motion stack)에만 — 단추·＋ 같은 자주 누르는 자리는 ease-out(emil) */
.z-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--side); }
.z-narrow { max-width: calc(46em + 2 * var(--side)); }

/* 면 두 가지 */
.z-dark { background: var(--ink); color: var(--paper); }
.z-light { background: var(--paper); color: var(--ink); }
.z-dark .z-lead, .z-dark .z-prose p:not(.z-big), .z-dark .z-card-tx { color: var(--sub-dark); }
.z-light .z-lead { color: var(--sub); }

/* 글씨 */
.z-h1 { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(38px, 6.2vw, 92px); line-height: 1.1; letter-spacing: -0.03em; max-width: 14em; text-wrap: balance; }
.z-h1-s { font-size: clamp(36px, 5.4vw, 80px); max-width: 15em; }
.z-h2 { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(30px, 3.9vw, 58px); line-height: 1.16; letter-spacing: -0.03em; text-wrap: balance; }
.z-h2-s { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; margin: 2.4em 0 .7em; }
.z-h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.32; letter-spacing: -0.02em; }
.z-lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.72; max-width: 34em; }
.z-lead p + p, .z-prose p + p { margin-top: .9em; }
.z-eb { display: inline-flex; align-items: center; gap: .5em; font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1; padding: .7em 1.1em; border-radius: 999px; border: 1px solid currentColor; margin-bottom: 28px; }
.z-dark .z-eb { border-color: var(--line-dark); color: var(--paper); }
.z-ls { margin-top: .8em; }
.z-ls li { padding-left: 1.1em; position: relative; }
.z-ls li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }

/* 단추: 알약 + 오른쪽 동그라미 화살표 (elespacio) */
.z-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.z-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 6px 6px 24px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text);
  font: 600 16px/1 var(--fb); text-decoration: none; border: 0; cursor: pointer; transition: transform .16s var(--eo), background-color .2s ease; }
.z-btn i { width: 40px; height: 40px; border-radius: 50%; background: var(--plan); position: relative; flex: none; transition: transform .28s var(--eo); }
.z-btn i::before { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 2px; background: var(--ink); }
.z-btn i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: translate(-30%, -50%) rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .z-btn:hover { transform: translateY(-2px); }
  .z-btn:hover i { transform: rotate(-45deg); }
}
.z-btn:active { transform: scale(.97); }
.z-btn-ln { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; padding-right: 24px; }
.z-btn-ln i { display: none; }
.z-dark .z-btn:not(.z-btn-ln) { background: var(--paper); color: var(--ink); }

/* 머리: 왼쪽 워드마크, 오른쪽 알약 메뉴 */
.z-hd { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--side); pointer-events: none; }
.z-hd > * { pointer-events: auto; }
.z-hd { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.z-hd.is-hide { transform: translateY(-120%); }
.z-hd:focus-within, .z-hd:has(:hover) { transform: none; }
.z-logo { font-family: var(--wd); font-weight: 800; font-size: 24px; letter-spacing: 0; line-height: 1; text-decoration: none; color: var(--paper); display: inline-flex; align-items: center; min-height: 50px; padding: 0 20px; border-radius: 999px; background: rgba(30, 29, 27, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.z-nav { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(30, 29, 27, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.z-pl { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--paper); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .25s; }
.z-pl:hover, .z-pl[aria-current] { background: rgba(244, 239, 230, .14); }
.z-pl-go { background: var(--paper); color: var(--ink); font-weight: 650; }
.z-pl-go:hover, .z-pl-go[aria-current] { background: var(--plan); }
.z-mnav { display: none; position: relative; }
.z-mnav > summary { list-style: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(30, 29, 27, .8); backdrop-filter: blur(14px); display: grid; place-items: center; cursor: pointer; }
.z-mnav > summary::-webkit-details-marker { display: none; }
.z-bars, .z-bars::before, .z-bars::after { display: block; width: 18px; height: 2px; background: var(--paper); border-radius: 2px; position: relative; transition: transform .3s var(--ez); }
.z-bars::before, .z-bars::after { content: ""; position: absolute; left: 0; }
.z-bars::before { top: -6px; } .z-bars::after { top: 6px; }
.z-mnav[open] .z-bars { background: transparent; }
.z-mnav[open] .z-bars::before { transform: translateY(6px) rotate(45deg); }
.z-mnav[open] .z-bars::after { transform: translateY(-6px) rotate(-45deg); }
/* 폰 메뉴 판은 아래 「2판 화면 틀」 블록(.z-mnav-p) */

/* 첫 화면 3판 — 픽셀 ZENITH + 낱말 바뀜 (10/7 시안 F, motion pixelmark·wordroll). 값은 2_설계/10_시안/히어로/f 그대로 */
:root { --mkt-lit: #CFA03F; }  /* 숯빛 위에서 탁하지 않게 밝힌 마케팅 금색(화면용 픽셀·알약만). brand.json mkt 는 그대로 */
.z-pxh [data-k="plan"] { --c: var(--plan); } .z-pxh [data-k="dev"] { --c: var(--dev); }
.z-pxh [data-k="design"] { --c: var(--design); } .z-pxh [data-k="mkt"] { --c: var(--mkt-lit); }
.z-hero { position: relative; }
.z-pxh-stage { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
html.z-mo:not(.m-calm) .z-pxh { height: 150vh; }
html.z-mo:not(.m-calm) .z-pxh-stage { position: sticky; top: 0; }
.z-pxh-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.z-pxh-in { position: relative; z-index: 2; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 96px var(--side) 52px; pointer-events: none; will-change: transform, opacity; max-width: 1600px; margin: 0 auto; }
.z-pxh-in a, .z-pxh-in button { pointer-events: auto; }
.z-pxh-mid { display: flex; flex-direction: column; justify-content: center; padding-bottom: 20px; }
/* 눈썹 — 끝난 뒤 작은 알약 낱말이 느리게 돈다 */
.z-pxh-eb { font-size: 17px; font-weight: 600; line-height: 1.4; color: rgba(244, 239, 230, .86); display: flex; align-items: center; gap: 14px; }
html.z-mo:not(.m-calm) .z-pxh-eb { opacity: 0; }
.z-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.z-pxh-bar { width: 28px; height: 1px; background: rgba(244, 239, 230, .5); flex: none; }
.z-pxh-ebt { display: inline-flex; align-items: center; white-space: nowrap; }
.z-pxh-es { position: relative; display: inline-flex; align-items: center; height: 1.62em; border-radius: .81em; overflow: hidden; margin: 0 .22em 0 .3em; vertical-align: middle; background: var(--plan); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.z-pxh-esw { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 700; white-space: nowrap; }
.z-pxh-esw:first-child { position: relative; inset: auto; padding: 0 .55em; }
.z-pxh-esw:not(:first-child) { opacity: 0; }
html.m-on:not(.m-calm) .z-pxh-esw { opacity: 1; }
.z-pxh-slot { margin-top: 22px; width: 100%; min-height: 1px; }   /* 픽셀이 모이는 자리(높이는 스크립트가 맞춘다) */
/* 네 팀 알약 줄 — 워드마크 바로 아래 */
.z-pxh-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
html.z-mo:not(.m-calm) .z-pxh-pills { visibility: hidden; }
.z-pxh-pill { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: var(--c); color: var(--ink); font-weight: 700; font-size: 17px; line-height: 1; will-change: transform, opacity; }
/* 아래 — 큰 제목·본문·단추 */
.z-pxh-foot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 56px; align-items: end; }
.z-pxh-h1 { font-family: var(--fd); font-size: clamp(34px, 3.6vw, 54px); line-height: 1.18; font-weight: 700; letter-spacing: -.025em; }
.z-pxh-h1 .z-tl { display: block; overflow: hidden; padding-bottom: .06em; }
.z-pxh-h1 .z-tl > span { display: block; will-change: transform; }
html.z-mo:not(.m-calm) .z-pxh-h1 .z-tl > span { transform: translateY(125%); }
.z-pxh .z-lead { font-size: 16px; line-height: 1.75; color: rgba(244, 239, 230, .74); max-width: 500px; }
.z-pxh .z-acts { margin-top: 26px; }
html.z-mo:not(.m-calm) .z-pxh-side { opacity: 0; transform: translateY(24px); }
/* 거대 낱말 바뀜 — 큰 제목 자리에서 돈다(움직임 켜졌을 때만) */
.z-roll { display: none; }
html.m-on:not(.m-calm) .z-roll { position: absolute; left: var(--side); right: var(--side); bottom: 44px; z-index: 3; display: flex; align-items: center; gap: .26em;
  font-family: var(--fd); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-size: min(8.6vw, 14.5vh); color: var(--paper); pointer-events: none; }
.z-roll-l1, .z-roll-l2 { display: flex; align-items: center; overflow: hidden; padding: .05em 0 .07em; }
.z-roll-l2 { gap: .1em; }
.z-roll .m-c { display: inline-block; will-change: transform; }
.z-roll-g { position: relative; display: inline-block; height: 1.1em; border-radius: .55em; overflow: hidden; flex: none; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.z-roll-line { position: absolute; left: .16em; right: .16em; bottom: .16em; height: .035em; background: rgba(244, 239, 230, .32); transform-origin: left; }
.z-roll-f { position: absolute; inset: 0; background: var(--c); will-change: transform; }
.z-roll-w { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; color: var(--ink); white-space: nowrap; }
.z-roll-fly { position: absolute; z-index: 4; border-radius: 999px; pointer-events: none; display: none; }

/* 하위 쪽 머리: 숯빛 + 가는 빛줄 (raggededge 0:04 의 한 줄) */
.z-phd { position: relative; overflow: hidden; padding: clamp(150px, 24vh, 240px) 0 clamp(80px, 12vh, 140px); isolation: isolate; }
.z-glow { position: absolute; inset: 0; z-index: -2;
  background: conic-gradient(from 200deg at 50% 50%, var(--mkt), var(--plan), var(--design), var(--dev), var(--mkt));
  filter: blur(56px) saturate(.7); transform: scaleY(.62); opacity: .42; }  /* 하위 쪽 머리 빛 번짐(2판 값) */
.z-glow::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(closest-side, transparent 30%, var(--ink) 100%); }
.z-glow-s { opacity: .32; transform: translate(30%, -38%) scale(.9, .5); }
.z-phd .z-lead { margin-top: 30px; }
.z-beam { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--mkt) 18%, var(--plan) 40%, var(--design) 62%, var(--dev) 82%, transparent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--plan) 60%, transparent); transform-origin: 50% 50%; animation: z-beam 1.6s .2s var(--ez) both; }
@keyframes z-beam { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* 글 구역 */
.z-text, .z-faq, .z-contact { padding: clamp(96px, 14vh, 168px) 0; }
.z-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.z-prose { max-width: 34em; }
.z-prose .z-big { font-size: clamp(20px, 1.75vw, 25px); line-height: 1.62; letter-spacing: -0.015em; font-weight: 500; color: inherit; margin-bottom: 1.4em; }
.z-prose .z-h3 { margin: 1.6em 0 .5em; }
.z-dark .z-prose .z-big { color: var(--paper); }
.z-text + .z-text.z-light { padding-top: 0; }

/* 팀 카드 쌓기 (elespacio) */
.z-stk { padding: clamp(96px, 14vh, 168px) 0 clamp(120px, 20vh, 220px); }
.z-stk + .z-stk { padding-top: 0; }
.z-stk-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.z-stk-head { align-self: stretch; }
.z-stk-pin { position: sticky; top: 18vh; }
.z-stk-head .z-lead { margin-top: 24px; }
.z-stack { display: grid; gap: 4vh; }
.z-card > div { border-radius: var(--r); padding: clamp(28px, 3vw, 48px); min-height: clamp(320px, 44vh, 440px); display: flex; flex-direction: column; color: var(--ink); box-shadow: 0 -18px 50px rgba(0, 0, 0, .28); }
.z-card .z-no { font-family: var(--wd); font-weight: 800; font-size: clamp(88px, 9vw, 150px); line-height: .8; letter-spacing: -0.04em; opacity: .9; }
.z-card .z-h3 { font-size: clamp(30px, 3vw, 46px); line-height: 1.1; letter-spacing: -0.03em; margin-top: auto; padding-top: 48px; }
.z-card .z-card-tx { margin-top: 18px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; max-width: 30em; color: var(--ink); }
.z-card.t-plan > div { background: var(--plan); }
.z-card.t-dev > div { background: var(--dev); }
.z-card.t-design > div { background: var(--design); }
.z-card.t-mkt > div { background: var(--mkt); }
.z-card.t-none > div { background: var(--paper); }

/* 순서 (studiojt 가는 선 표) */
.z-steps { padding: clamp(96px, 14vh, 168px) 0; }
.z-steps-head { max-width: 40em; margin-bottom: clamp(40px, 6vh, 72px); }
.z-steps-head .z-lead { margin-top: 20px; }
.z-st li { display: grid; grid-template-columns: 120px minmax(0, 4fr) minmax(0, 6fr); gap: clamp(16px, 3vw, 48px); padding: 34px 0 38px; border-top: 1px solid var(--line); align-items: baseline; }
.z-st li:last-child { border-bottom: 1px solid var(--line); }
.z-dark .z-st li { border-color: var(--line-dark); }
.z-num { font-family: var(--wd); font-weight: 700; font-size: clamp(36px, 3.4vw, 54px); line-height: 1; letter-spacing: -0.03em; }
.z-st-tx { max-width: 34em; }
.z-light .z-st-tx { color: var(--sub); }

/* 사례 줄 (locomotive) */
.z-rows { padding: clamp(96px, 14vh, 168px) 0 clamp(72px, 10vh, 120px); }
.z-rows + .z-rows { padding-top: 0; }
.z-rows-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 120px); align-items: end; margin-bottom: clamp(32px, 5vh, 56px); }
.z-rows-head .z-eb { grid-column: 1 / -1; justify-self: start; margin-bottom: 0; }
.z-rows-head .z-lead { margin: 0; }
.z-list { border-top: 1px solid var(--ink); }
.z-row { position: relative; border-bottom: 1px solid var(--line); isolation: isolate; }
.z-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--row, var(--plan)); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ez); }
.z-row:has(details[open])::before { transform: scaleY(1); opacity: .22; }
@media (hover: hover) and (pointer: fine) { .z-row:hover::before { transform: scaleY(1); opacity: 1; } }
.t-none { --row: rgba(30,29,27,.08); } .t-plan { --row: var(--plan); } .t-dev { --row: var(--dev); } .t-design { --row: var(--design); } .t-mkt { --row: var(--mkt); }
.z-row summary, .z-row-in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 28px; padding: 26px 8px; cursor: pointer; list-style: none; }
.z-row-in { cursor: default; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; padding: 34px 8px; }
.z-row summary::-webkit-details-marker { display: none; }
.z-rt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; min-width: 0; }
.z-rt b { font-family: var(--fd); font-weight: 650; font-size: clamp(26px, 3.4vw, 52px); line-height: 1.12; letter-spacing: -0.035em; transition: transform .5s var(--ez); }
.z-rt b em { font-style: normal; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.z-rt span { font-size: clamp(15px, 1.2vw, 18px); color: var(--sub); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .z-row:hover .z-rt b { transform: translateX(18px); }
  .z-row:hover .z-rt span { color: var(--ink); transform: translateX(18px); transition-delay: .04s; }
  .z-row:hover .z-pills { transform: translateX(-6px); }
}
.z-rt span, .z-pills { transition: transform .55s var(--ez), color .3s; }
.z-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.z-pill { font-style: normal; font-size: 13px; font-weight: 650; line-height: 1; padding: 8px 12px; border-radius: 999px; background: var(--row, var(--line)); color: var(--ink); white-space: nowrap; }
.z-pill.t-plan { background: var(--plan); } .z-pill.t-dev { background: var(--dev); } .z-pill.t-design { background: var(--design); } .z-pill.t-mkt { background: var(--mkt); }
.z-plus { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; position: relative; flex: none; }
.z-plus::before, .z-plus::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 1.5px; background: currentColor; }
.z-plus::after { transform: rotate(90deg); transition: transform .25s var(--eo); }
details[open] > summary .z-plus::after { transform: rotate(0deg); }
.z-rbody { padding: 0 8px 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 6vw, 120px); }
.z-rbody p { grid-column: 2; max-width: 34em; }
.z-rbody .z-res { color: var(--ink); font-weight: 600; position: relative; padding-left: 22px; }
.z-rbody .z-res::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--row, var(--plan)); }
.z-row-in .z-rbody { display: block; padding: 0; }
.z-row-in .z-rbody p { color: var(--sub); }
.z-row-in:hover .z-rbody p { color: var(--ink); }
.z-acts-end { margin-top: 40px; }

/* 칸(그 밖) */
.z-grid { padding: clamp(96px, 14vh, 168px) 0; }
.z-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.z-cells > li { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line); }

/* 2판 — 네 팀 선이 한 점으로 모이는 도식 (koto 0:14, motion converge). 크림 구역 안 숯빛 판 */
.c-plan { --c: var(--plan); } .c-dev { --c: var(--dev); } .c-design { --c: var(--design); } .c-mkt { --c: var(--mkt); } .c-none { --c: var(--paper); }
.z-cv { background: var(--ink); border-radius: var(--r); padding: clamp(20px, 2.8vw, 44px) clamp(16px, 2.6vw, 44px); margin: 0 0 clamp(44px, 7vh, 80px); }
.z-cv svg { display: block; width: 100%; height: auto; overflow: visible; }
.z-cv .z-cv-p { display: none; }
.z-cv-ln { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; }
.z-cv-dot, .z-cv-tx { fill: var(--c); }
.z-cv-tx { font-family: var(--fb); font-weight: 700; letter-spacing: -0.01em; }
.z-cv-out { fill: none; stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
.z-cv-meet, .z-cv-end { fill: var(--paper); }
.z-cv-ring { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.5; }

/* 2판 — 흐르는 낱말 띠 (plusx, motion marquee). 팀 이름은 그 팀 색 */
.z-mq { overflow: hidden; margin-top: clamp(72px, 12vh, 150px); padding: 14px 0 18px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.z-mq-tr { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.z-mq span { display: inline-flex; align-items: center; font-family: var(--fd); font-weight: 800; font-size: clamp(52px, 8.4vw, 136px); line-height: 1.08; letter-spacing: -0.04em; color: var(--c); }
.z-mq span::after { content: ""; flex: none; width: .14em; height: .14em; border-radius: 50%; background: var(--paper); opacity: .45; margin: 0 .55em; }

/* 2판 — 마우스 있는 기기: 단추는 자석(motion magnet)이 transform 을 쓰므로 css 떠오름은 끈다 */
html.m-fine .z-btn { transition: background-color .2s ease; }

/* 자주 묻는 물음 */
.z-qa details { border-top: 1px solid var(--line); }
.z-qa details:last-child { border-bottom: 1px solid var(--line); }
.z-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; }
.z-qa summary::-webkit-details-marker { display: none; }
.z-qa .z-plus { width: 36px; height: 36px; }
.z-ans { padding: 0 56px 28px 0; max-width: 34em; color: var(--sub); }
.z-ans .z-acts { margin-top: 16px; }
.z-faq .z-lead { margin-top: 20px; }
.z-contact + .z-faq { padding-top: 0; }

/* 마지막 띠 — 주황 면 한 문장 (thinkcompany) */
.z-band { background: var(--accent); color: var(--ink); padding: clamp(110px, 18vh, 200px) 0 clamp(90px, 14vh, 160px); }
.z-band-h { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(40px, 7.4vw, 120px); line-height: 1.04; letter-spacing: -0.04em; max-width: 12em; text-wrap: balance; }
.z-band-low { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 60px; margin-top: clamp(40px, 7vh, 80px); }
.z-band-p { max-width: 30em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; }
.z-band .z-acts { margin-top: 0; }
.z-band .z-btn i { background: var(--paper); }
html.m-on:not(.m-calm) .z-band-h .m-w { opacity: .38; }

/* 문의 칸 */
.z-contact .z-lead { margin-top: 20px; }
.fm { display: grid; gap: 22px; }
.fl { display: grid; gap: 10px; }
.fl > span { font-weight: 650; font-size: 16px; }
.fl i { color: var(--plan); font-style: normal; }
.fm input:not([type=checkbox]), .fm textarea { width: 100%; font: 400 17px/1.6 var(--fb); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; transition: border-color .2s, box-shadow .2s; }
.fm input:not([type=checkbox]):focus, .fm textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan) 35%, transparent); }
.fm textarea { resize: vertical; min-height: 160px; }
.fm-note { font-size: 16px; color: var(--sub); line-height: 1.65; }
.cs { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.cs input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--ink); flex: none; }
.fm .z-btn { justify-self: start; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.msg { min-height: 1.6em; font-weight: 600; }
.msg.err { color: #B3261E; }
.msg.ok { color: #1F6B3A; }

/* 법정 글 */
.z-legal { padding: 24px 0 0; }
.z-legal:last-of-type { padding-bottom: 140px; }
.z-legal p, .z-legal li { color: var(--ink); }
.z-legal p + p { margin-top: .7em; }
.z-legal .z-h3 { font-size: 19px; margin: 1.6em 0 .4em; }
.z-tw { overflow-x: auto; margin: 1em 0; border-top: 1px solid var(--ink); }
.z-tw table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 16px; line-height: 1.6; }
.z-tw th, .z-tw td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.z-tw th { font-weight: 650; }
.pg-privacy .z-phd + .z-legal, .pg-privacy main > .z-legal:first-of-type { padding-top: 80px; }

/* 꼬리 — 거대 워드마크 (thinkcompany) */
.z-ft { background: var(--ink); color: var(--paper); padding-top: 72px; overflow-x: clip; }  /* 2판: 위 둥근 띠(cover)가 보이게 hidden → clip */
.z-ft-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line-dark); }
.z-ft-lines p { color: var(--sub-dark); font-size: 15px; }
.z-ft-nav { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.z-ft-nav a { color: var(--paper); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.z-ft-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.z-ft-mark { font-family: var(--wd); font-weight: 800; font-size: 25vw; line-height: .9; letter-spacing: -0.015em; text-align: center; white-space: nowrap; margin: 3vw 0 -.1em; color: var(--paper); }

/* 404 */
.pg-404 .z-phd { min-height: 70vh; }

/* 폰 */
@media (max-width: 760px) {
  .z-pxh-in { padding: 84px var(--side) 30px; }
  .z-pxh-mid { justify-content: flex-start; padding-top: 14px; }
  .z-pxh-eb { font-size: 16px; }
  .z-pxh-slot { margin-top: 14px; }
  .z-pxh-pills { gap: 6px; margin-top: 14px; }
  .z-pxh-pill { height: 36px; padding: 0 13px; font-size: 14px; }
  .z-pxh-foot { grid-template-columns: 1fr; gap: 16px; }
  .z-pxh-h1 { font-size: 30px; }
  .z-pxh .z-lead { font-size: 16px; line-height: 1.7; }
  .z-pxh .z-acts { margin-top: 20px; }
  html.m-on:not(.m-calm) .z-roll { flex-direction: column; align-items: flex-start; gap: 0; font-size: min(14.2vw, 64px); bottom: auto; top: var(--gtop, 55%); }
  .z-roll-l2 { margin-top: .04em; }
}
@media (max-width: 960px) {
  .z-nav { display: none; }
  .z-mnav { display: block; }
  .z-split, .z-stk-grid, .z-rows-head, .z-rbody, .z-row-in { grid-template-columns: 1fr; }
  .z-rbody p { grid-column: 1; }
  .z-stk-pin { position: static; }
  .z-stk-head { margin-bottom: 8px; }
  .z-st li { grid-template-columns: 64px 1fr; }
  .z-st-tx { grid-column: 2; }
}
@media (max-width: 600px) {
  .z-cv .z-cv-w { display: none; }
  .z-cv .z-cv-p { display: block; }
  .z-mq span { font-size: 54px; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .z-hd { padding: 14px 18px; }
  .z-logo { font-size: 20px; min-height: 48px; padding: 0 16px; }
  .z-h1 { font-size: 36px; line-height: 1.16; }
  .z-h1-s { font-size: 33px; }
  .z-h2 { font-size: 28px; line-height: 1.22; }
  .z-acts { margin-top: 28px; }
  .z-acts-hero .z-btn { flex: 1 1 auto; justify-content: space-between; }
  .z-card > div { min-height: 300px; padding: 26px; }
  .z-card .z-no { font-size: 80px; }
  .z-card .z-h3 { font-size: 30px; }
  .z-row summary { grid-template-columns: 1fr auto; padding: 22px 4px; }
  .z-row summary .z-pills { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .z-row summary .z-plus { grid-column: 2; grid-row: 1 / span 2; }
  .z-rt { flex-direction: column; gap: 6px; }
  .z-rt b { font-size: 26px; }
  .z-rbody { padding: 0 4px 32px; }
  .z-row-in { padding: 26px 4px; gap: 12px; }
  .z-num { font-size: 30px; }
  .z-st li { grid-template-columns: 48px 1fr; padding: 26px 0 30px; }
  .z-band-h { font-size: 40px; }
  .z-ans { padding-right: 0; }
  .z-tw table { min-width: 0; }
  .z-tw th, .z-tw td { padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .z-beam { animation: none; }
  .z-btn, .z-btn i, .z-row::before, .z-rt b, .z-rt span, .z-pills, .z-plus::after { transition: none; }
}

/* ───────── 2판 화면 틀 (2026-10-07, 랜딩 → 28쪽 홈페이지) ─────────
   2단 메뉴·폰 접는 메뉴·위치 표시·옆 탭·관련 카드·참여 팀·이전/다음·사례 흐름·인사이트 글 폭·꼬리 사이트맵.
   색·서체·움직임 결은 위와 같은 것만(둥근 판, cubic .16,1,.3,1 = --ez). 새 얼굴 없음 */

/* 공용 화살표 동그라미 */
.z-arw { width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; position: relative; flex: none; display: inline-block; transition: transform .45s var(--ez), background-color .3s ease, color .3s ease; }
.z-arw::before { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 1.5px; background: currentColor; }
.z-arw::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-30%, -50%) rotate(45deg); }
.z-arw-l { transform: scaleX(-1); }
.z-dots { display: inline-flex; gap: 3px; margin-right: 9px; vertical-align: middle; flex: none; }
.z-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.z-dots i.c-mkt { --c: var(--mkt-lit); }

/* 머리 2단 메뉴 — 묶음 칸 위에 마우스(또는 키보드 초점)면 펼침 판 */
.z-nav { position: relative; }
.z-menu { display: flex; align-items: center; gap: 6px; }
.z-mg-h { position: relative; gap: 8px; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.z-mg-h::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; }  /* 칸 → 판 사이를 지날 때 닫히지 않게 */
.z-car { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .45s var(--ez); }
.z-mg.is-cur > .z-mg-h { background: rgba(244, 239, 230, .14); }
.z-dd { position: absolute; right: 0; top: calc(100% + 10px); min-width: 100%; width: 440px; visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: 100% 0;
  clip-path: inset(0 0 100% 0 round 28px); transition: clip-path .5s var(--ez) .08s, opacity .28s ease .08s, transform .5s var(--ez) .08s, visibility 0s .58s; }
.z-dd::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }
.z-dd-wide { width: 760px; }
.z-dd-in { display: grid; gap: 2px; padding: 10px; border-radius: 28px; background: var(--ink); border: 1px solid var(--line-dark); box-shadow: 0 30px 70px rgba(0, 0, 0, .38); }
.z-dd-wide .z-dd-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.z-dd-a { display: block; padding: 14px 18px 15px; border-radius: 20px; color: var(--paper); text-decoration: none; transition: background-color .25s ease; }
.z-dd-a:hover, .z-dd-a:focus-visible { background: rgba(244, 239, 230, .08); }
.z-dd-a[aria-current] { background: rgba(244, 239, 230, .12); }
.z-dd-t { display: flex; align-items: center; font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.z-dd-a[aria-current] .z-dd-t::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--plan); margin-left: 8px; }
.z-dd-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--sub-dark); }
.z-dd-in > li { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .5s var(--ez); }
.z-mg:hover > .z-dd, .z-mg:focus-within > .z-dd { visibility: visible; opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 28px); transition: clip-path .55s var(--ez), opacity .2s ease, transform .55s var(--ez), visibility 0s; }
.z-mg:hover > .z-dd .z-dd-in > li, .z-mg:focus-within > .z-dd .z-dd-in > li { opacity: 1; transform: none; transition-delay: .06s; }
.z-mg:hover > .z-dd .z-dd-in > li:nth-child(n+3), .z-mg:focus-within > .z-dd .z-dd-in > li:nth-child(n+3) { transition-delay: .1s; }
.z-mg:hover > .z-dd .z-dd-in > li:nth-child(n+5), .z-mg:focus-within > .z-dd .z-dd-in > li:nth-child(n+5) { transition-delay: .14s; }
.z-mg:hover > .z-dd .z-dd-in > li:nth-child(n+7), .z-mg:focus-within > .z-dd .z-dd-in > li:nth-child(n+7) { transition-delay: .18s; }
.z-mg:hover > .z-mg-h .z-car, .z-mg:focus-within > .z-mg-h .z-car { transform: translateY(1px) rotate(225deg); }
.z-mg:hover > .z-mg-h { background: rgba(244, 239, 230, .14); }

/* 폰 — 전체 화면 접는 메뉴(JS 없이 details), 오른쪽 위 단추 자리에서 원으로 열림 */
.z-logo { position: relative; z-index: 2; }
.z-mnav > summary { position: relative; z-index: 2; }
.z-mnav .z-mnav-p { position: fixed; inset: 0; z-index: 1; background: var(--ink); overflow-y: auto; overscroll-behavior: contain; padding: 92px var(--side) 40px; }
.z-mnav[open] .z-mnav-p { animation: z-mnav-in .7s var(--ez) both; }
@keyframes z-mnav-in { from { clip-path: circle(0 at calc(100% - 42px) 38px); } to { clip-path: circle(150% at calc(100% - 42px) 38px); } }
.z-mnav-in { max-width: 560px; }
.z-mg2 { border-bottom: 1px solid var(--line-dark); }
.z-mg2 > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 10px 0; list-style: none; cursor: pointer;
  font-family: var(--fd); font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -.03em; color: var(--paper); }
.z-mg2 > summary::-webkit-details-marker { display: none; }
.z-mg2 > summary.is-cur > span:first-child::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--plan); margin-left: 10px; vertical-align: middle; }
.z-mg2 .z-plus { width: 38px; height: 38px; }
.z-mg2 ul { display: grid; padding: 0 0 18px; }
.z-mg2[open] ul { animation: z-fold .5s var(--ez) both; }
@keyframes z-fold { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.z-mg2 a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; color: rgba(244, 239, 230, .76); font-size: 17px; font-weight: 500; text-decoration: none; }
.z-mg2 a[aria-current] { color: var(--paper); font-weight: 700; }
.z-mg2 a[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--plan); margin-left: 10px; }
.z-mnav-end { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; }
.z-mnav-end .z-btn { background: var(--paper); color: var(--ink); }
.z-mnav-mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--sub-dark); font-size: 16px; text-decoration: none; }
html.z-lock, html.z-lock body { overflow: hidden; }

/* 쪽 머리 — 위치 표시 + 옆 탭 */
.z-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: -14px 0 18px -6px; font-size: 14px; font-weight: 500; color: var(--sub-dark); }
.z-crumbs li { display: inline-flex; align-items: center; }
.z-crumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 6px 0 2px; opacity: .55; }
.z-crumbs a, .z-crumbs span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; color: inherit; text-decoration: none; border-radius: 999px; transition: color .25s; }
.z-crumbs a:hover { color: var(--paper); }
.z-crumbs [aria-current] { color: var(--paper); }
.z-phd:has(.z-tabs) { padding-bottom: 0; }
.z-tabs { position: relative; margin-top: clamp(64px, 10vh, 120px); border-top: 1px solid var(--line-dark); }
.z-tabs-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 14px 0 18px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.z-tabs-in::-webkit-scrollbar { display: none; }
.z-tab { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; color: rgba(244, 239, 230, .7); font-size: 15px; font-weight: 550; text-decoration: none; white-space: nowrap; transition: background-color .3s var(--ez), color .3s; }
.z-tab:hover { color: var(--paper); background: rgba(244, 239, 230, .08); }
.z-tab[aria-current] { background: var(--paper); color: var(--ink); font-weight: 700; }

/* 서비스 갈래 쪽 — 그 일의 첫 팀 색을 쪽 머리에 은은하게 */
.z-phd-svc { --c: var(--plan); }
.z-phd-svc.c-dev { --c: var(--dev); } .z-phd-svc.c-design { --c: var(--design); } .z-phd-svc.c-mkt { --c: var(--mkt-lit); }
.z-phd-svc .z-glow { opacity: .12; }
.z-tint { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 64% at 88% 6%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%), radial-gradient(40% 50% at 6% 100%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); }
.z-phd-svc .z-eb::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.z-phd-svc .z-tab[aria-current] { background: var(--c); }
.z-phd-svc .z-beam { background: linear-gradient(90deg, transparent, var(--c) 30%, var(--c) 70%, transparent); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--c) 55%, transparent); }

/* 사례 쪽 — 큰 업종 제목, 상황 한 줄(h1), 흐름 표, 구역 번호 */
.z-case-ind { font-family: var(--fd); font-weight: 800; font-size: clamp(46px, 7.4vw, 124px); line-height: 1.02; letter-spacing: -.045em; max-width: 11em; text-wrap: balance; }
.z-h1.z-h1-case { font-size: clamp(24px, 2.5vw, 38px); line-height: 1.32; font-weight: 700; letter-spacing: -.02em; max-width: 24em; margin-top: clamp(22px, 3vh, 34px); color: var(--paper); }
.z-phd-case .z-lead { margin-top: 18px; }
.z-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(36px, 5vh, 52px); }
.z-flow li { display: inline-flex; align-items: center; }
.z-flow li + li::before { content: ""; width: 18px; height: 1px; background: var(--line-dark); margin-right: 8px; }
.z-flow a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 7px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--paper); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .3s, border-color .3s; }
.z-flow a:hover { background: rgba(244, 239, 230, .08); border-color: rgba(244, 239, 230, .4); }
.z-flow-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(244, 239, 230, .1); font: 700 12px/1 var(--wd); }
.z-fno { display: block; font-family: var(--wd); font-weight: 800; font-size: clamp(54px, 5.6vw, 92px); line-height: .86; letter-spacing: -.045em; color: var(--accent); margin-bottom: 20px; }
.ser-work main > .z-text + .z-grid, .ser-work main > .z-grid + .z-text { padding-top: 0; }

/* 팀별 한 일 — 항목 이름이 팀이면 그 팀 색 머리표 */
.z-cells.z-tmcells { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; border-top: 0; }
.z-cells > li.z-tmc { padding: 28px 30px 32px; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--paper) 50%, #fff); position: relative; overflow: hidden; }
.z-tmc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--row); }
.z-tmh { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--row); color: var(--ink); font-size: 17px; line-height: 1; margin-bottom: 20px; }
.z-tmh i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.z-tmc p { color: var(--ink); }
.z-tmc p + p { margin-top: .8em; }

/* 직접 만든 서비스 등 — 팀 알약이 붙은 항목은 둥근 판 격자 */
.z-cells.z-boxes { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; border-top: 0; }
.z-cells.z-boxes > li { display: flex; flex-direction: column; padding: 30px 30px 28px; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--paper) 50%, #fff); transition: transform .5s var(--ez), border-color .3s; }
.z-boxes > li .z-h3 { margin-bottom: 12px; }
.z-boxes > li p { color: var(--sub); font-size: 16px; line-height: 1.7; }
@media (hover: hover) and (pointer: fine) { .z-cells.z-boxes > li:hover { transform: translateY(-4px); border-color: var(--ink); } }
.z-pills-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 22px; }

/* 사례 줄 링크(cases-link) — 줄 전체가 그 사례 쪽으로 */
.z-row-a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: 14px clamp(24px, 4vw, 64px); align-items: start; padding: 32px 8px 34px; color: inherit; text-decoration: none; }
.z-row-tx { display: grid; gap: 10px; max-width: 34em; color: var(--sub); font-size: 16px; line-height: 1.7; transition: color .3s; }
.z-row-tx .z-res { color: var(--ink); font-weight: 600; position: relative; padding-left: 20px; }
.z-row-tx .z-res::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--row, var(--plan)); }
.z-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.z-row-goto { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 650; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .z-row-go:hover .z-row-tx { color: var(--ink); }
  .z-row-go:hover .z-row-tx .z-res::before { background: var(--ink); }
  .z-row-go:hover .z-arw { transform: rotate(-45deg); background: var(--ink); color: var(--paper); }
}

/* 관련 카드 */
.z-rel { padding: clamp(80px, 12vh, 140px) 0; }
.z-rel + .z-rel { padding-top: 0; }
.z-rel-head { margin-bottom: clamp(26px, 4vh, 40px); }
.z-h2-m { font-size: clamp(26px, 2.6vw, 40px); }
.z-rel .z-lead { margin: -10px 0 30px; }
.z-rel-ls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.z-rel-ls.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.z-rel-ls.n1 { grid-template-columns: minmax(0, 640px); }
.z-rel-ls > li { display: flex; }
.z-rel-a { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; width: 100%; min-height: 290px; padding: 24px 28px 28px; border-radius: var(--r);
  background: color-mix(in srgb, var(--paper) 50%, #fff); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .3s; }
.z-rel-a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--row); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ez); }
.z-rel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(36px, 5vh, 56px); }
.z-rel-g { font-size: 13px; font-weight: 650; line-height: 1; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); }
.z-rel-a .z-h3 { font-size: clamp(22px, 1.9vw, 28px); }
.z-rel-a p { margin-top: 10px; color: var(--sub); font-size: 16px; line-height: 1.65; transition: color .3s; }
.z-rel-a .z-pills { justify-content: flex-start; margin-top: auto; padding-top: 24px; }
@media (hover: hover) and (pointer: fine) {
  .z-rel-a:hover { border-color: transparent; }
  .z-rel-a:hover::before { transform: scaleY(1); }
  .z-rel-a:hover p { color: var(--ink); }
  .z-rel-a:hover .z-rel-g { border-color: var(--ink); }
  .z-rel-a:hover .z-arw { transform: rotate(-45deg); background: var(--ink); color: var(--paper); }
  .z-rel-a:hover .z-pill { background: var(--paper); }
}

/* 참여 팀 줄 */
.z-ts { padding: clamp(56px, 8vh, 96px) 0 0; }
.z-ts + .z-rel { padding-top: clamp(64px, 9vh, 110px); }
.z-ts-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 6vw, 120px); align-items: center; border-top: 1px solid var(--line); padding-top: clamp(36px, 5vh, 56px); }
.z-ts-h .z-eb { margin-bottom: 14px; }
.z-ts-ls { display: flex; flex-wrap: wrap; gap: 10px; }
.z-ts-ls li { display: inline-flex; align-items: center; height: clamp(54px, 5vw, 76px); padding: 0 clamp(22px, 2.3vw, 34px); border-radius: 999px; background: var(--c); color: var(--ink);
  font-family: var(--fd); font-weight: 800; font-size: clamp(20px, 2vw, 30px); letter-spacing: -.025em; line-height: 1; }
.z-ts .z-lead { grid-column: 2; }

/* 이전 / 다음 */
.z-pn { padding: 0 0 clamp(80px, 12vh, 140px); }
.z-pn-in { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.z-pn-a { display: flex; flex-direction: column; gap: 16px; padding: 34px 32px 40px 0; color: var(--ink); text-decoration: none; min-height: 44px; }
.z-pn-next { grid-column: 2; align-items: flex-end; text-align: right; padding: 34px 0 40px 32px; border-left: 1px solid var(--line); }
.z-pn-k { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 650; color: var(--sub); }
.z-pn-t { font-family: var(--fd); font-weight: 700; font-size: clamp(24px, 2.8vw, 44px); line-height: 1.14; letter-spacing: -.03em; transition: transform .55s var(--ez); }
@media (hover: hover) and (pointer: fine) {
  .z-pn-prev:hover .z-pn-t { transform: translateX(-12px); }
  .z-pn-next:hover .z-pn-t { transform: translateX(12px); }
  .z-pn-a:hover .z-arw { background: var(--ink); color: var(--paper); }
}

/* 인사이트 글 — 읽기 좋은 본문 폭(34em), 큰 제목, 목차 없이 한 줄기 */
.z-phd-post > .z-wrap { max-width: calc(40em + 2 * var(--side)); }
.z-h1.z-h1-post { font-size: clamp(40px, 5vw, 76px); max-width: 11em; }
.ser-insights main > .z-text { padding: clamp(36px, 5vh, 56px) 0; }
.ser-insights main > .z-phd + .z-text { padding-top: clamp(72px, 10vh, 120px); }
.ser-insights main > .z-text > .z-split { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: calc(40em + 2 * var(--side)); }
.ser-insights .z-text .z-h2 { font-size: clamp(24px, 2.1vw, 31px); line-height: 1.32; letter-spacing: -.025em; }
.ser-insights .z-prose { max-width: 34em; }
.ser-insights .z-prose p, .ser-insights .z-prose .z-big { font-size: 18px; line-height: 1.86; font-weight: 400; letter-spacing: 0; margin: 0; color: var(--ink); }
.ser-insights .z-prose p + p { margin-top: 1.05em; }
.ser-insights .z-prose .z-ls { margin: 1.1em 0; }
.ser-insights .z-prose .z-ls li { font-size: 18px; line-height: 1.8; }
.ser-insights .z-prose .z-ls li + li { margin-top: .5em; }
.ser-insights main > .z-rel { margin-top: clamp(40px, 6vh, 72px); }
.ser-insights main > .z-rel > .z-wrap { border-top: 1px solid var(--line); padding-top: clamp(56px, 8vh, 96px); }

/* 같은 크림 면이 이어지는 자리 — 위아래 여백이 겹쳐 빈 띠가 생기지 않게 뒤 구역 위 여백을 줄인다 */
main > .z-light + :is(.z-grid, .z-steps, .z-faq, .z-rows, .z-text, .z-rel).z-light { padding-top: clamp(28px, 4.5vh, 56px); }

/* 검수 맞춤: 사례 줄 링크 제목은 한 줄 글로 읽히게(flex 면 화면 글이 줄로 끊김), 닫힌 폰 메뉴 판은 아예 안 그림 */
.z-row-go .z-rt { display: block; }
.z-row-go .z-rt b, .z-row-go .z-rt > span { display: inline-block; }
.z-row-go .z-rt > span { margin-left: 14px; }
.z-row-go .z-rt b em { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 0; }
.z-mnav:not([open]) .z-mnav-p { display: none; }
.z-sm a, .z-ft-mail a { min-width: 44px; }

/* 꼬리 사이트맵 */
.z-ft-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px clamp(32px, 5vw, 80px); padding-bottom: 48px; }
.z-ft-mail { margin-top: 10px; }
.z-ft-mail span { color: var(--sub-dark); margin-right: 6px; }
.z-ft-mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244, 239, 230, .35); }
.z-sm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; }
.z-sm-h { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--paper); border-bottom: 1px solid var(--line-dark); margin-bottom: 8px; }
.z-sm-h a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-decoration: none; }
.z-sm ul li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sub-dark); font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: color .2s; }
.z-sm a:hover { color: var(--paper); }

@media (max-width: 1100px) {
  .z-rel-ls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .z-nav { display: none; }
  .z-row-a { grid-template-columns: 1fr; gap: 12px; padding: 26px 4px 28px; }
  .z-row-end { flex-direction: row; align-items: center; justify-content: space-between; }
  .z-ts-in { grid-template-columns: 1fr; }
  .z-ts .z-lead { grid-column: 1; }
  .z-ft-top { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .z-crumbs ol { font-size: 16px; }
  .z-eb { font-size: 16px; }
  .z-rel-ls, .z-rel-ls.n2 { grid-template-columns: 1fr; }
  .z-rel-a { min-height: 0; padding: 22px 22px 24px; }
  .z-rel-top { margin-bottom: 26px; }
  .z-pn-in { grid-template-columns: 1fr; }
  .z-pn-next { grid-column: 1; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .z-pn-a { padding-right: 0; }
  .z-case-ind { font-size: 44px; }
  .z-h1.z-h1-case { font-size: 23px; }
  .z-flow a { font-size: 14.5px; }
  .z-flow li + li::before { display: none; }
  .z-h1.z-h1-post { font-size: 36px; }
  .ser-insights .z-prose p, .ser-insights .z-prose .z-big, .ser-insights .z-prose .z-ls li { font-size: 17px; }
  .z-ts-ls li { height: 50px; font-size: 19px; }
  .z-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; }
  .z-cells > li.z-tmc, .z-cells.z-boxes > li { padding: 24px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .z-dd, .z-dd-in > li, .z-car, .z-rel-a::before, .z-arw, .z-pn-t, .z-boxes > li { transition: none !important; }
  .z-mnav[open] .z-mnav-p, .z-mg2[open] ul { animation: none; }
}

/* ───────── 3판 서비스 (2026-10-07, 섞기표 「4판 — 서비스 전용 틀」) ─────────
   서비스 전체 = 쪽 머리(왼쪽 눈썹·오른쪽 범위 선언) + svc-list(koto/all 줄, pxd 한 줄 도식) + 띠.
   서비스 상세 = svc-hero(cuberto) → situations(halolab 카드·선 도식) → scope(instrument 펼침 줄 + 붙는 칸) → timeline(halolab 고정 무대·막대)
               → docs(cuberto 칸 모양 표지 카드) → feature-case(elespacio 사례) → team-strip → faq(rejouice 왼쪽 고정 제목) → 띠.
   갈래 얼굴 = 그 쪽 첫 팀 색(--c, 숯빛 위 마케팅은 --mkt-lit). 메인 쪽 부품(cards 칸·related 묶음)은 쓰지 않는다. */
.z-dark.c-mkt, .z-dark .c-mkt { --c: var(--mkt-lit); }
:is(.z-sh, .z-sit, .z-sc, .z-tm, .z-docs, .z-fc, .z-sl-row) { --cs: color-mix(in srgb, var(--c) 80%, var(--ink)); }

/* 서비스 전체 쪽 머리 — 왼쪽 작은 눈썹, 오른쪽 범위 선언 큰 문장 (koto/all 0:02) */
.z-phd-idx > .z-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; }
.z-phd-idx .z-crumbs { grid-column: 1 / -1; }
.z-phd-idx .z-eb { grid-column: 1; justify-self: start; margin: .5em 0 0; }
.z-phd-idx .z-h1 { grid-column: 2; font-size: clamp(34px, 4.7vw, 72px); line-height: 1.12; max-width: 15em; }
.z-phd-idx .z-lead, .z-phd-idx .z-acts { grid-column: 2; }

/* svc-list 머리 — 갈래 바로가기 알약 + 한 줄 도식 */
.z-sl { padding-top: clamp(48px, 8vh, 96px); }
.z-sl-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(24px, 4vw, 64px); align-items: center; padding-bottom: clamp(56px, 9vh, 110px); }
.z-sl-hl .z-eb { margin-bottom: 12px; }
.z-sl-h2 { font-family: var(--fd); font-weight: 700; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; line-height: 1.3; color: var(--sub-dark); }
.z-sl-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.z-sl-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--paper); text-decoration: none; font-size: 16px; font-weight: 600; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.z-sl-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); transition: background-color .3s ease; }
@media (hover: hover) and (pointer: fine) { .z-sl-pill:hover { background: var(--c); border-color: var(--c); color: var(--ink); } .z-sl-pill:hover i { background: var(--ink); } }
.z-sl-head > .z-lead { grid-column: 2; }
.z-ch { grid-column: 1 / -1; margin-top: clamp(20px, 4vh, 44px); }
.z-ch svg { display: block; width: 100%; height: auto; overflow: visible; }
.z-ch .z-ch-p { display: none; }
.z-ch-ln { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; }
.z-ch-dot, .z-ch-tx { fill: var(--c); }
.z-ch-tx { font-family: var(--fb); font-weight: 700; letter-spacing: -.01em; }

/* svc-list 줄 — 갈래 하나에 화면 한 높이 (koto/all 0:12~0:24) */
.z-sl-ls { border-top: 1px solid var(--line-dark); }
.z-sl-row { border-bottom: 1px solid var(--line-dark); }
.z-sl-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); min-height: min(92vh, 880px); padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); }
.z-sl-l { min-width: 0; }  /* 이름·사례 카드가 한 덩어리로 붙어 따라옴(따로 두면 올라오는 카드가 이름을 덮는다) */
.z-sl-stick { position: sticky; top: 112px; }
.z-sl-no { display: block; margin-bottom: 18px; font: 700 15px/1 var(--fb); letter-spacing: .04em; color: var(--c); }
.z-sl-t { font-family: var(--fd); font-weight: 800; font-size: clamp(40px, 5.2vw, 84px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.z-sl-t a { color: inherit; text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 100% / 0 .06em no-repeat; transition: background-size .6s var(--ez); }
.z-sl-teams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.z-sl-teams li { font-size: 15px; font-weight: 650; line-height: 1; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--sub-dark); transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
.z-sl-case { margin-top: clamp(32px, 6vh, 64px); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 8px 16px; width: 100%; max-width: 400px; aspect-ratio: 16 / 10; padding: 22px 22px 22px 24px;
  border-radius: var(--r); background: color-mix(in srgb, var(--c) 14%, var(--ink)); color: var(--paper); text-decoration: none; transition: color .45s ease; }
.z-sl-case::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); clip-path: circle(0% at 0% 100%); transition: clip-path .8s var(--ez); }
.z-sl-ck { grid-column: 1 / -1; font-size: 14px; font-weight: 650; opacity: .78; }
.z-sl-cn { grid-row: 3; align-self: end; font-family: var(--fd); font-weight: 700; font-size: clamp(20px, 1.8vw, 27px); line-height: 1.24; letter-spacing: -.02em; }
.z-sl-case .z-arw { grid-row: 3; grid-column: 2; align-self: end; }
.z-sl-r { padding-top: 4px; }
.z-sl-one { font-family: var(--fd); font-weight: 650; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.36; letter-spacing: -.025em; max-width: 20em; color: var(--paper); text-wrap: pretty; }
.z-sl-tx { margin-top: 14px; color: var(--sub-dark); max-width: 34em; }
.z-sl-tags { margin-top: clamp(36px, 6vh, 64px); border-top: 1px solid var(--line-dark); max-width: 40em; }
.z-sl-tags li { display: flex; align-items: center; gap: 14px; min-height: 58px; border-bottom: 1px solid var(--line-dark); font-size: 17px; color: rgba(244, 239, 230, .8); transition: padding-left .55s var(--ez), color .3s ease; }
.z-sl-tags li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.z-sl-go { margin-top: 34px; }
@media (hover: hover) and (pointer: fine) {
  .z-sl-row:hover .z-sl-case::before { clip-path: circle(150% at 0% 100%); }
  .z-sl-row:hover .z-sl-case { color: var(--ink); }
  .z-sl-row:hover .z-sl-teams li { background: var(--c); border-color: var(--c); color: var(--ink); }
  .z-sl-row:hover .z-sl-tags li { color: var(--paper); }
  .z-sl-row:hover .z-sl-tags li:nth-child(odd) { padding-left: 6px; }
  .z-sl-t a:hover { background-size: 100% .06em; }
  .z-sl-case:hover .z-arw { transform: rotate(-45deg); }
}
@media (hover: none) {  /* 마우스 없는 기기: 펼친 모습 그대로 */
  .z-sl-case { background: var(--c); color: var(--ink); }
  .z-sl-teams li { background: var(--c); border-color: var(--c); color: var(--ink); }
}

/* svc-hero — 숯빛 면 가운데 큰 갈래 이름, 뒤에 갈래 색 빛 은은히 (cuberto/detail 0:05) */
.z-sh { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(150px, 24vh, 240px); }
.z-sh-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 104%, color-mix(in srgb, var(--c) 26%, transparent), transparent 72%), radial-gradient(26% 24% at 50% 100%, color-mix(in srgb, var(--c) 22%, transparent), transparent 80%); }
html.z-mo:not(.m-calm) .z-sh-glow { animation: z-sh-breathe 7s ease-in-out infinite alternate; }
@keyframes z-sh-breathe { from { opacity: .78; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
.z-sh-in { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(20px, 4vh, 48px); padding-bottom: clamp(64px, 11vh, 128px); }
.z-sh .z-eb::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.z-sh-h { font-family: var(--fd); font-weight: 800; font-size: clamp(52px, 9vw, 144px); line-height: 1.02; letter-spacing: -.045em; max-width: 11em; text-wrap: balance; }
.z-sh-core { margin-top: clamp(22px, 3.4vh, 36px); font-family: var(--fd); font-weight: 650; font-size: clamp(21px, 2vw, 30px); line-height: 1.45; letter-spacing: -.02em; max-width: 24em; color: var(--paper); text-wrap: balance; }
.z-sh-sub { margin-top: 18px; max-width: 36em; color: var(--sub-dark); text-wrap: pretty; }
.z-sh-teams { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.z-sh-teams li { font-size: 15px; font-weight: 700; line-height: 1; padding: 10px 16px; border-radius: 999px; background: var(--c); color: var(--ink); }
.z-sh-acts { justify-content: center; margin-top: 30px; }
.z-sh .z-tabs { margin-top: 0; }
.z-sh .z-tab[aria-current] { background: var(--c); }
.z-sh .z-beam { background: linear-gradient(90deg, transparent, var(--c) 30%, var(--c) 70%, transparent); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--c) 50%, transparent); }

/* situations — 가운데 제목 + 크림 카드 셋, 카드 위 선 도식 (halolab/detail 0:18) */
.z-sit { padding: clamp(96px, 14vh, 160px) 0; }
.z-sit-head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 880px; margin: 0 auto clamp(44px, 7vh, 80px); }
.z-sit-head .z-lead { margin-top: 18px; }
.z-sit-ls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.z-sit-ls.n2, .z-sit-ls.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.z-sit-c { display: flex; flex-direction: column; padding: 14px 14px 30px; border-radius: var(--r); background: var(--paper); color: var(--ink); }
.z-sit-fig { padding: 18px 16px; margin-bottom: 26px; border-radius: calc(var(--r) - 8px); background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.z-sit-c .z-h3, .z-sit-tx { padding: 0 10px; }
.z-sit-tx { margin-top: 12px; color: var(--sub); }
.z-dg { display: block; width: 100%; height: auto; overflow: visible; }
.z-dg-ln { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.z-dg-mute { stroke: color-mix(in srgb, var(--ink) 32%, var(--paper)); }
.z-dg-c { stroke: var(--cs); stroke-width: 3.2; }
.z-dg-wall { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.z-dg-dot { fill: var(--cs); } .z-dg-o { fill: var(--ink); } .z-dg-m { fill: color-mix(in srgb, var(--ink) 28%, var(--paper)); }
.z-dg-ring { fill: none; stroke: var(--cs); stroke-width: 1.5; opacity: .6; }

/* scope — 하는 일 줄 목록 + 펼침 + 붙어 따라오는 받는 것 칸 (instrument/detail 0:16~0:20) */
.z-sc { padding: clamp(96px, 14vh, 168px) 0; }
.z-sc-head { max-width: 760px; margin-bottom: clamp(40px, 6vh, 72px); }
.z-sc-head .z-lead { margin-top: 18px; }
.z-sc-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.z-sc-lab { padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 650; color: var(--sub); }
.z-sc-row { border-bottom: 1px solid var(--line); }
.z-sc-row summary { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 80px; padding: 14px 0; list-style: none; cursor: pointer; }
.z-sc-row summary::-webkit-details-marker { display: none; }
.z-sc-n { font: 700 14px/1 var(--fb); color: var(--sub); transition: color .3s ease; }
.z-sc-t { font-family: var(--fd); font-weight: 700; font-size: clamp(20px, 1.8vw, 27px); line-height: 1.3; letter-spacing: -.02em; transition: transform .55s var(--ez); }
.z-sc-row .z-plus { width: 42px; height: 42px; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.z-sc-row[open] .z-plus { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.z-sc-row[open] .z-sc-n { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .z-sc-row summary:hover .z-sc-t { transform: translateX(8px); } }
.z-sc-body { overflow: hidden; }
.z-sc-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; padding: 2px 0 32px 58px; }
.z-sc-k { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 650; color: var(--sub); }
.z-sc-get .z-sc-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cs); }
.z-sc-v { font-weight: 650; }
.z-sc-side { position: sticky; top: 112px; }
.z-sc-card { display: flex; flex-direction: column; min-height: clamp(320px, 42vh, 440px); padding: clamp(26px, 2.6vw, 40px); border-radius: var(--r); background: var(--c); color: var(--ink); }
.z-sc-card .z-sc-k { color: var(--ink); }
.z-sc-card .z-sc-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.z-sc-big { margin-top: auto; font-family: var(--fd); font-weight: 750; font-size: clamp(30px, 3vw, 48px); line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
.z-sc-from { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(30, 29, 27, .28); font-size: 15px; font-weight: 600; }

/* timeline — 넓은 화면은 고정 무대: 카드 한 장 + 차오르는 막대 (halolab/detail 0:44~0:50, motion timeline) */
.z-tm { padding: clamp(96px, 14vh, 160px) 0; }
.z-tm-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(40px, 6vh, 64px); }
.z-tm-head .z-lead { margin-top: 16px; }
.z-tm-cards { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
.z-tm-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; border-radius: var(--r); border: 1px solid var(--line-dark); background: color-mix(in srgb, var(--paper) 5%, var(--ink)); }
.z-tm-no { font: 700 14px/1 var(--fb); letter-spacing: .04em; color: var(--c); }
.z-tm-t { font-family: var(--fd); font-weight: 750; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.15; letter-spacing: -.03em; }
.z-tm-do { color: var(--sub-dark); }
.z-tm-out { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.z-tm-k { font-size: 14px; font-weight: 700; color: var(--c); }
.z-tm-v { font-weight: 600; color: var(--paper); }
.z-tm-foot { display: none; }
.z-tm.m-tl-pin { height: calc(100vh + var(--n, 4) * 62vh); padding: 0; }
.m-tl-pin .z-tm-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 84px 0 34px; }
.m-tl-pin .z-tm-head { margin-bottom: clamp(20px, 3.5vh, 36px); }
.m-tl-pin .z-tm-cards { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.m-tl-pin .z-tm-card { grid-area: 1 / 1; width: min(680px, 100%); min-height: clamp(260px, 36vh, 340px); padding: 30px 34px 32px; background: var(--paper); color: var(--ink); border: 0; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); }
.m-tl-pin .z-tm-card:not(.is-cur) { pointer-events: none; }
.m-tl-pin .z-tm-no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; }
.m-tl-pin .z-tm-do { color: var(--sub); }
.m-tl-pin .z-tm-out { border-top-color: var(--line); }
.m-tl-pin .z-tm-k { color: var(--cs); }
.m-tl-pin .z-tm-v { color: var(--ink); }
.m-tl-pin .z-tm-foot { display: block; margin-top: clamp(24px, 4vh, 44px); }
.z-tm-bars { display: flex; align-items: flex-end; justify-content: space-between; height: clamp(40px, 7vh, 72px); }
.z-tm-bars i { width: 2px; height: var(--h); border-radius: 1px; background: var(--c); opacity: calc(.16 + .84 * clamp(0, var(--p, 0) * 56 - var(--i), 1)); }
.z-tm-track { position: relative; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--line-dark); }
.z-tm-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.z-tm-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: 14px; }
.z-tm-steps li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--sub-dark); transition: color .3s ease; }
.z-tm-steps li i { width: 11px; height: 11px; flex: none; border-radius: 50%; border: 1.5px solid var(--sub-dark); transition: background-color .3s ease, border-color .3s ease; }
.z-tm-steps li span { padding: 7px 12px; border-radius: 999px; transition: background-color .35s ease, color .35s ease; }
.z-tm-steps li.is-on { color: var(--paper); }
.z-tm-steps li.is-on i { background: var(--c); border-color: var(--c); }
.z-tm-steps li.is-cur span { background: var(--paper); color: var(--ink); }

/* docs — 문서 표지 카드 (cuberto/detail 0:52~0:56 칸 모양) */
.z-docs { padding: clamp(96px, 14vh, 160px) 0; }
.z-docs-head { max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px); }
.z-docs-head .z-lead { margin-top: 18px; }
.z-docs-ls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.z-docs-ls.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .z-docs-ls.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.z-doc-in { position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; min-height: clamp(340px, 28vw, 430px); padding: 22px 24px 26px; border-radius: var(--r);
  background: color-mix(in srgb, #fff 42%, var(--paper)); border: 1px solid var(--line); transition: transform .55s var(--ez), box-shadow .55s var(--ez); }
.z-doc-in::after { content: ""; position: absolute; top: 0; right: 0; width: 42px; height: 42px; border-bottom-left-radius: 12px; background: linear-gradient(225deg, var(--paper) 50%, color-mix(in srgb, var(--ink) 12%, var(--paper)) 50%); }
.z-doc-t .z-doc-in { background: color-mix(in srgb, var(--c) 22%, var(--paper)); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .z-doc-in:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(30, 29, 27, .12); } }
.z-doc-top { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.z-doc-tag { font-size: 13px; font-weight: 700; line-height: 1; padding: 7px 11px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.z-doc-no { font: 600 14px/1 var(--fb); color: var(--sub); }
.z-doc-h { margin-top: clamp(36px, 5vh, 72px); font-family: var(--fd); font-weight: 750; font-size: clamp(25px, 2.2vw, 34px); line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
.z-doc-rule { display: grid; gap: 7px; margin: 22px 0 24px; }
.z-doc-rule i { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.z-doc-rule i:nth-child(2) { width: 84%; } .z-doc-rule i:nth-child(3) { width: 58%; }
.z-doc-p { color: var(--sub); }
.z-doc-ls { margin-top: auto; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.z-doc-ls li { position: relative; padding: 5px 0 5px 16px; font-size: 15.5px; line-height: 1.5; color: var(--sub); }
.z-doc-ls li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--cs); }

/* feature-case — 대표 사례 하나 크게 (elespacio/detail 0:32~0:42) */
.z-fc { padding: clamp(96px, 14vh, 168px) 0; }
.z-fc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(22px, 3.5vh, 36px); }
.z-fc-top .z-eb { margin-bottom: 0; }
.z-fc-svc { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--c); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1; }
.z-fc-svc i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.z-fc-cl { font-size: 15px; font-weight: 600; color: var(--sub-dark); }
.z-fc-h { font-family: var(--fd); font-weight: 800; font-size: clamp(44px, 6.6vw, 108px); line-height: 1.03; letter-spacing: -.045em; max-width: 12em; text-wrap: balance; }
.z-fc > .z-wrap > .z-lead { margin-top: 22px; }
.z-fc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); margin-top: clamp(48px, 8vh, 96px); padding-top: 30px; border-top: 1px solid var(--line-dark); }
.z-fc-k { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 16px; font-weight: 700; color: var(--paper); }
.z-fc-k span { font: 700 14px/1 var(--fb); color: var(--c); }
.z-fc-tx { color: var(--sub-dark); max-width: 32em; }
.z-fc-out { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 6vh, 72px);
  padding: clamp(14px, 1.4vw, 20px) clamp(28px, 4vw, 64px) clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px); border: 1px solid var(--line-dark); border-radius: 999px; }
.z-fc-badge { display: grid; place-items: center; width: clamp(108px, 10vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--c); color: var(--ink); font-size: 17px; font-weight: 750; text-align: center; }
.z-fc-big p { font-family: var(--fd); font-weight: 650; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.32; letter-spacing: -.025em; color: var(--paper); max-width: 26em; text-wrap: pretty; }
.z-fc-acts { margin-top: 34px; }

/* faq — 서비스 쪽은 왼쪽 큰 제목이 붙어 따라옴 (rejouice/all 0:56~1:02) */
.grp-g-services .z-faq .z-tl { position: sticky; top: 112px; }

@media (max-width: 1100px) {
  .z-docs-ls.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-sit-ls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {  /* 폰·좁은 화면: 진행 순서는 세로 단계 목록 */
  .z-tm-head { align-items: flex-start; text-align: left; }
  .z-tm-cards { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 40px; }
  .z-tm-cards::before { content: ""; position: absolute; left: 12px; top: 10px; bottom: 30px; width: 2px; background: linear-gradient(var(--c), var(--line-dark)); }
  .z-tm-card { position: relative; gap: 8px; padding: 0 0 36px; border: 0; border-radius: 0; background: none; }
  .z-tm-no { position: absolute; left: -40px; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: var(--ink); font-size: 11px; }
  .z-tm-out { margin-top: 8px; padding-top: 12px; }
  .z-sc-grid { grid-template-columns: minmax(0, 1fr); }
  .z-sc-side { display: none; }
}
@media (max-width: 760px) {
  .z-phd-idx > .z-wrap, .z-sl-head { grid-template-columns: minmax(0, 1fr); }
  .z-phd-idx .z-eb { margin: 0 0 22px; }
  .z-phd-idx .z-h1, .z-phd-idx .z-lead, .z-phd-idx .z-acts, .z-sl-head > .z-lead { grid-column: 1; }
  .z-ch .z-ch-w { display: none; } .z-ch .z-ch-p { display: block; }
  .z-sl-in { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  .z-sl-l { display: contents; }
  .z-sl-stick { display: contents; }
  .z-sl-no, .z-sl-t, .z-sl-teams { order: 1; }
  .z-sl-r { order: 2; padding-top: 26px; }
  .z-sl-case { order: 3; margin-top: 30px; max-width: none; aspect-ratio: auto; min-height: 150px; }
  .z-sit-ls, .z-sit-ls.n2, .z-sit-ls.n4, .z-docs-ls, .z-docs-ls.n2, .z-docs-ls.n4, .z-fc-cols { grid-template-columns: minmax(0, 1fr); }
  .z-sit-head, .z-docs-head, .z-sc-head { align-items: flex-start; text-align: left; }
  .z-doc-in { min-height: 0; }
  .z-doc-h { margin-top: 30px; }
  .z-sc-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-left: 0; }
  .z-sc-row summary { grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 68px; }
  .z-fc-out { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; padding: 20px 22px 26px; border-radius: var(--r); }
  .z-fc-badge { width: auto; aspect-ratio: auto; padding: 10px 16px; border-radius: 999px; }
  .grp-g-services .z-faq .z-tl { position: static; }
}
@media (max-width: 600px) {
  .z-sh-h { font-size: 52px; }
  .z-sh-core { font-size: 21px; }
  .z-sl-t { font-size: 40px; }
  .z-sl-one { font-size: 23px; }
  .z-fc-h { font-size: 40px; }
  .z-fc-big p { font-size: 21px; }
  .z-sc-lab, .z-sc-k, .z-doc-ls li, .z-sl-teams li, .z-sh-teams li, .z-fc-k, .z-tm-k { font-size: 16px; }
  .z-sl-tags li { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .z-sh-glow { animation: none; }
  .z-sl-case, .z-sl-case::before, .z-sl-teams li, .z-sl-tags li, .z-sl-t a, .z-sc-t, .z-doc-in, .z-tm-steps li, .z-tm-steps li i, .z-tm-steps li span { transition: none; }
}

/* 서비스 쪽: 사례(숯빛) 바로 뒤 참여 팀 줄 — 위 선·빈 띠 없이 */
.z-fc + .z-ts { padding-top: clamp(80px, 11vh, 128px); }
.z-fc + .z-ts .z-ts-in { border-top: 0; padding-top: 0; }

/* ───────── 4판 사례·회사 (2026-10-07, 섞기표 「5판 — 작업 사례·사례 상세·회사 소개 전용 틀」) ─────────
   작업 사례 전체 = work-index(thinkcompany/work 머리·카드 + cuberto 거르기 + locomotive 줄) + 띠.
   사례 상세 = case-hero(thinkcompany/case + locomotive 메타) → challenge(thinkcompany 남색 면 원호) → approach(halolab 번호 줄 + koto 장 차례)
             → outcome(숫자 elespacio 둥근 띠 / 없으면 thinkcompany 문제·해결 카드) → deliverables(locomotive Credits) → next-case(locomotive) → 띠.
   회사 소개 = manifesto(pxd 낱말 알약) → principles(thinkcompany 가는 선 표) → engine(pxd 겹친 원) → sold-ourselves(challenge 꼴) → big-links → 띠.
   사진 자리는 첫 팀 색 면 + 선 도식. 메인 부품(cards·related)은 쓰지 않는다. 색·서체·곡선은 위와 같은 것만 */

/* 크림 면 위 위치 표시·옆 탭 */
.z-light .z-crumbs ol { color: var(--sub); }
.z-light .z-crumbs a:hover, .z-light .z-crumbs [aria-current] { color: var(--ink); }
.z-light .z-tabs { border-top-color: var(--line); }
.z-light .z-tab { color: var(--sub); }
.z-light .z-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.z-light .z-tab[aria-current] { background: var(--ink); color: var(--paper); }
html.m-on:not(.m-calm) :is(.z-cl-big, .z-mf-l) .m-w { opacity: .3; }

/* 팀 알약 줄 */
.z-tp { display: flex; flex-wrap: wrap; gap: 6px; }
.z-tp li { display: inline-block; font-size: 15px; font-weight: 700; line-height: 1; padding: 9px 14px; border-radius: 999px; background: var(--c); color: var(--ink); white-space: nowrap; }

/* 사례 그림 자리 — 팀 선이 모여 둥근 상자로 (사진 대신) */
.z-tf svg { display: block; width: 100%; height: auto; overflow: visible; }
.z-tf .z-tf-p { display: none; }
.z-tf-ln, .z-tf-out { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.z-tf-dot { fill: var(--c); stroke: var(--ink); stroke-width: 2; }
.z-tf-tx { fill: var(--ink); font-family: var(--fb); font-weight: 700; letter-spacing: -.01em; }
.z-tf-meet, .z-tf-end { fill: var(--ink); }
.z-tf-box { fill: none; stroke: var(--ink); stroke-width: 2.2; }

/* work-index — 크림 면 큰 머리 + 거르기 + 대표 카드 + 큰 줄 (thinkcompany/work 0:01~0:44) */
.z-wi { padding: clamp(128px, 17vh, 184px) 0 clamp(80px, 12vh, 140px); }
.z-wi-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px clamp(28px, 5vw, 96px); align-items: end; padding-top: clamp(16px, 3vh, 36px); }
.z-wi-big { grid-column: 1 / -1; font-family: var(--fd); font-weight: 800; font-size: clamp(60px, 10.4vw, 172px); line-height: .96; letter-spacing: -.05em; }
.z-wi-h { font-family: var(--fd); font-weight: 650; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.34; letter-spacing: -.025em; max-width: 20em; text-wrap: balance; }
.z-wi-lead { color: var(--sub); max-width: 30em; }
.z-wi-flt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(40px, 6vh, 64px); padding-top: 22px; border-top: 1px solid var(--line); }
html:not(.m-on) .z-wi-flt { display: none; }
.z-wi-fb { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 16px/1 var(--fb); cursor: pointer; transition: background-color .3s var(--ez), color .3s, border-color .3s; }
.z-wi-fb:hover { border-color: var(--ink); }
.z-wi-fb[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.z-wi-fb:active { transform: scale(.97); }
.z-wi-body { margin-top: clamp(28px, 4vh, 44px); }
/* 대표 사례 — 두 배 높이 숯빛 카드, 오른쪽 첫 팀 색 면에 선 도식 */
.z-wf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 48px); min-height: clamp(500px, 64vh, 660px); padding: clamp(14px, 1.4vw, 20px);
  border-radius: var(--r); background: var(--ink); color: var(--paper); text-decoration: none; }
.z-wf-l { display: flex; flex-direction: column; padding: clamp(16px, 2vw, 32px) clamp(8px, 1.4vw, 20px) clamp(12px, 1.4vw, 20px) clamp(10px, 1.6vw, 24px); }
.z-wf-top { display: flex; flex-wrap: wrap; gap: 8px; }
.z-wf-tag, .z-wf-g { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.z-wf-tag { background: var(--paper); color: var(--ink); }
.z-wf-g { border: 1px solid var(--line-dark); color: var(--sub-dark); }
.z-wf-h { margin-top: clamp(40px, 8vh, 96px); font-family: var(--fd); font-weight: 800; font-size: clamp(40px, 4.8vw, 78px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.z-wf-tx { margin-top: 20px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: var(--sub-dark); max-width: 22em; }
.z-wf-end { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 32px; }
.z-wf-fig { display: grid; align-items: center; padding: clamp(18px, 3vw, 48px) clamp(14px, 2.4vw, 40px); border-radius: calc(var(--r) - 6px); background: color-mix(in srgb, var(--c) 58%, var(--paper)); color: var(--ink); overflow: hidden; }
.z-wf .z-arw { color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .z-wf-fig { transition: background-color .6s var(--ez); }
  .z-wf:hover .z-wf-fig { background: color-mix(in srgb, var(--c) 78%, var(--paper)); }
  .z-wf:hover .z-arw { transform: rotate(-45deg); background: var(--paper); color: var(--ink); }
}
/* 나머지 — 화면 폭 큰 줄 (locomotive 줄 + thinkcompany 카드 글 크기), 올리면 첫 팀 색 차오름 */
.z-wl { margin-top: clamp(28px, 4vh, 48px); border-top: 1px solid var(--ink); }
.z-wl-i { border-bottom: 1px solid var(--line); }
.z-wl-a { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 4fr) minmax(0, 4.4fr) auto; gap: 12px clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(26px, 3.6vh, 38px) 12px; color: var(--ink); text-decoration: none; }
.z-wl-a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; background: var(--c); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ez); }
.z-wl-g { justify-self: start; font-size: 14px; font-weight: 650; line-height: 1; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--sub); transition: border-color .3s, color .3s; }
.z-wl-h { font-family: var(--fd); font-weight: 750; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.12; letter-spacing: -.035em; transition: transform .55s var(--ez); }
.z-wl-tx { color: var(--sub); font-size: 16.5px; line-height: 1.6; transition: color .3s; }
.z-wl-end { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.z-wl-end .z-tp li { background: color-mix(in srgb, var(--c) 72%, var(--paper)); font-size: 14px; padding: 8px 12px; }
@media (hover: hover) and (pointer: fine) {
  .z-wl-a:hover::before { transform: scaleY(1); }
  .z-wl-a:hover .z-wl-h { transform: translateX(14px); }
  .z-wl-a:hover .z-wl-tx { color: var(--ink); }
  .z-wl-a:hover .z-wl-g { border-color: var(--ink); color: var(--ink); }
  .z-wl-a:hover .z-tp li { background: var(--paper); }
  .z-wl-a:hover .z-arw { transform: rotate(-45deg); background: var(--ink); color: var(--paper); }
}
/* 직접 만든 서비스 줄 — 숯빛 둥근 판 */
.z-wl-i.z-wl-lab { border-bottom: 0; margin-top: clamp(28px, 4vh, 44px); }
.z-wl-lab .z-wl-a { border-radius: var(--r); background: var(--ink); color: var(--paper); padding: clamp(30px, 4.4vh, 48px) clamp(20px, 2.4vw, 36px); }
.z-wl-lab .z-wl-a::before { background: var(--plan); border-radius: var(--r); }
.z-wl-lab .z-wl-g { border-color: var(--line-dark); color: var(--sub-dark); }
.z-wl-lab .z-wl-tx { color: var(--sub-dark); }
@media (hover: hover) and (pointer: fine) { .z-wl-lab .z-wl-a:hover { color: var(--ink); } }
.z-wl-i[hidden], .z-wf-box[hidden] { display: none; }

/* case-hero — 크림 면, 업종 아주 크게, 상황 큰 본문, 메타 가는 선 3칸, 첫 팀 색 면 도식 (thinkcompany/case 0:02 + locomotive/case 0:04~0:10) */
.z-ch2 { padding-top: clamp(128px, 17vh, 184px); }
.z-ch2 .z-eb { margin: clamp(10px, 2vh, 24px) 0 22px; }
.z-ch2-h { font-family: var(--fd); font-weight: 800; font-size: clamp(52px, 8.6vw, 146px); line-height: .98; letter-spacing: -.05em; max-width: 10.5em; text-wrap: balance; }
.z-ch2-line { margin-top: clamp(24px, 4vh, 40px); }
.z-ch2-line p { font-size: clamp(22px, 2.15vw, 32px); font-weight: 550; line-height: 1.45; letter-spacing: -.02em; max-width: 26em; text-wrap: pretty; }
.z-ch2-meta { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); margin: clamp(48px, 8vh, 88px) 0 0; border-top: 1px solid var(--ink); }
.z-ch2-m { padding: 18px clamp(16px, 2vw, 32px) 4px; border-left: 1px solid var(--line); min-width: 0; }
.z-ch2-m:first-child { border-left: 0; padding-left: 0; }
.z-ch2-m dt { font-size: 14px; font-weight: 650; color: var(--sub); }
.z-ch2-m dd { margin: 10px 0 0; font-size: 18px; font-weight: 600; line-height: 1.5; }
.z-ch2-fig { margin-top: clamp(40px, 6vh, 64px); padding: clamp(20px, 3.4vw, 56px) clamp(16px, 4vw, 72px); border-radius: var(--r); background: color-mix(in srgb, var(--c) 52%, var(--paper)); }
.z-ch2 .z-tabs { margin-top: clamp(40px, 6vh, 64px); }

/* challenge · sold-ourselves — 숯빛 면 큰 문장 + 원호 선 (thinkcompany/case 0:30~0:32) */
.z-cl { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(120px, 18vh, 210px) 0; }
.z-arcs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.z-arcs svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.z-arc { fill: none; stroke: color-mix(in srgb, var(--c) 72%, transparent); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.z-arc-2 { stroke: color-mix(in srgb, var(--paper) 30%, transparent); }
.z-cl-in { position: relative; }
.z-cl-k { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; line-height: 1; color: var(--paper); }
.z-cl-k::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.z-cl-big { margin-top: clamp(24px, 4vh, 40px); font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 4.1vw, 64px); line-height: 1.26; letter-spacing: -.03em; max-width: 19em; color: var(--paper); text-wrap: balance; }
.z-cl-so .z-cl-big { margin-top: 0; }
.z-cl-tx { margin-top: clamp(28px, 4vh, 44px); max-width: 36em; font-size: 18px; color: var(--sub-dark); }
.z-cl-tx p + p { margin-top: .8em; }

/* approach — 왼쪽 붙는 제목 + 팀 차례, 오른쪽 번호 단계 (halolab/case 0:22~0:42 + koto/case) */
.z-ap { padding: clamp(110px, 15vh, 180px) 0 clamp(80px, 11vh, 130px); }
.z-ap-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 6vw, 112px); align-items: start; }
.z-ap-stick { position: sticky; top: 112px; }
.z-ap-toc { margin-top: clamp(28px, 5vh, 48px); border-top: 1px solid var(--line); }
.z-ap-toc li { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 600; color: var(--sub); transition: color .3s, padding-left .5s var(--ez); }
.z-ap-toc li span { font: 700 13px/1 var(--fb); width: 22px; }
.z-ap-toc li::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--c); transform: scale(0); transition: transform .45s var(--ez); }
.z-ap-toc li.is-cur { color: var(--ink); padding-left: 6px; }
.z-ap-toc li.is-cur::after { transform: scale(1); }
.z-ap-step { display: grid; grid-template-columns: clamp(64px, 7vw, 116px) minmax(0, 1fr); gap: 8px 12px; padding: clamp(30px, 4.4vh, 48px) 0 clamp(36px, 5vh, 56px); border-top: 1px solid var(--line); }
.z-ap-step:first-child { border-top-color: var(--ink); }
.z-ap-no { font-family: var(--wd); font-weight: 800; font-size: clamp(40px, 4vw, 64px); line-height: .9; letter-spacing: -.04em; }
.z-ap-h { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 15px; border-radius: 999px; background: var(--c); color: var(--ink); font-family: var(--fd); font-weight: 750; font-size: clamp(20px, 1.8vw, 26px); line-height: 1; letter-spacing: -.02em; }
.z-ap-h i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.z-ap-p { margin-top: 18px; color: var(--sub); max-width: 34em; }
.z-ap-do { margin-top: 18px; }
.z-ap-do li { position: relative; padding: 15px 0 15px 34px; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.66; max-width: 40em; }
.z-ap-do li:last-child { border-bottom: 0; }
.z-ap-do li::before { content: ""; position: absolute; left: 0; top: calc(15px + .83em); width: 16px; height: 1.5px; background: var(--ink); }

/* outcome — 숫자 띠 (elespacio/case 0:10~0:12) / 문제·해결 카드 (thinkcompany/case 0:32~0:46) */
.z-oc { padding: clamp(96px, 14vh, 168px) 0 clamp(64px, 9vh, 110px); }
.z-ap + .z-oc { padding-top: clamp(32px, 5vh, 64px); }
.z-oc-head { margin-bottom: clamp(28px, 4.4vh, 48px); }
.z-oc-band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(14px, 1.4vw, 20px) clamp(28px, 4vw, 72px) clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px); border-radius: 999px; background: var(--ink); color: var(--paper); }
.z-oc-badge { display: grid; place-items: center; width: clamp(110px, 10vw, 156px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.z-oc-badge i { width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ink); position: relative; }
.z-oc-badge i::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--ink); }
.z-oc-nums { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 20px clamp(24px, 4vw, 64px); margin: 0; }
.z-oc-nums.n1 { --n: 1; } .z-oc-nums.n3 { --n: 3; }
.z-oc-n dt { font-family: var(--fd); font-weight: 800; font-size: clamp(52px, 6.2vw, 100px); line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.z-oc-n dd { display: flex; gap: 10px; margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--sub-dark); max-width: 22em; }
.z-oc-ar { flex: none; width: 14px; height: 14px; margin-top: .3em; position: relative; }
.z-oc-ar::before { content: ""; position: absolute; left: 0; top: 50%; width: 13px; height: 1.5px; background: var(--accent); }
.z-oc-ar::after { content: ""; position: absolute; right: 1px; top: 50%; width: 6px; height: 6px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); transform: translateY(-50%) rotate(45deg); }
.z-oc-tx { margin-top: clamp(28px, 4vh, 44px); max-width: 38em; font-size: clamp(17px, 1.3vw, 19px); }
.z-oc-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.6fr) minmax(0, 5.4fr); border-radius: var(--r); background: color-mix(in srgb, var(--c) 20%, var(--paper)); overflow: hidden; }
.z-oc-c { padding: clamp(26px, 2.8vw, 44px); border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); min-width: 0; }
.z-oc-c:first-child { border-left: 0; }
.z-oc-k { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--sub); }
.z-oc-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .55; }
.z-oc-v { font-size: 17px; line-height: 1.65; color: var(--ink); }
.z-oc-after { background: color-mix(in srgb, var(--c) 46%, var(--paper)); display: flex; flex-direction: column; justify-content: center; }
.z-oc-big { font-family: var(--fd); font-weight: 700; font-size: clamp(24px, 2.3vw, 36px); line-height: 1.36; letter-spacing: -.025em; text-wrap: pretty; }
.z-oc-more { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: color-mix(in srgb, var(--ink) 80%, var(--paper)); }
.z-oc-more p + p { margin-top: .7em; }

/* deliverables — 가는 선 표 (locomotive/case 0:48~0:50 Credits) */
.z-dv { padding: clamp(64px, 9vh, 110px) 0 clamp(80px, 11vh, 130px); }
.z-dv-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 6vw, 112px); align-items: start; }
.z-dv-ls { border-top: 1px solid var(--ink); }
.z-dv-ls.z-dv-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); border-top: 0; }
.z-dv-ls li { display: flex; align-items: baseline; gap: 18px; padding: 18px 0 19px; border-bottom: 1px solid var(--line); }
.z-dv-2 li:nth-child(-n+2) { border-top: 1px solid var(--ink); }
.z-dv-n { flex: none; font: 700 13px/1 var(--wd); color: var(--sub); }
.z-dv-t { font-size: clamp(17px, 1.35vw, 20px); font-weight: 600; line-height: 1.45; }

/* next-case · big-links — 화면 폭 큰 링크, 올리면 팀 색 면이 아래서 차오름 (locomotive/case 0:50~0:56) */
.z-nc { padding: clamp(20px, 3vh, 40px) 0 clamp(72px, 10vh, 120px); }
.z-nc-bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.z-nc-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
html.m-on:not(.m-calm) .z-nc-bar i { transform: scaleX(var(--p, 0)); }
.z-nc-a { position: relative; isolation: isolate; display: block; padding: clamp(32px, 6vh, 64px) clamp(4px, 1.4vw, 24px) clamp(40px, 7vh, 80px); color: var(--ink); text-decoration: none; }
.z-nc-a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r); background: var(--c); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ez); }
.z-nc-k { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 700; line-height: 1; color: var(--sub); }
.z-nc-h { margin-top: clamp(20px, 3.4vh, 36px); font-family: var(--fd); font-weight: 800; font-size: clamp(50px, 9.4vw, 160px); line-height: .98; letter-spacing: -.05em; max-width: 11em; text-wrap: balance; transition: transform .7s var(--ez); }
.z-nc-low { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(22px, 3.4vh, 36px); }
.z-nc-tx { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--sub); max-width: 32em; transition: color .3s; }
@media (hover: hover) and (pointer: fine) {
  .z-nc-a:hover::before { transform: scaleY(1); }
  .z-nc-a:hover .z-nc-h { transform: translateX(clamp(8px, 1.4vw, 24px)); }
  .z-nc-a:hover .z-nc-tx, .z-nc-a:hover .z-nc-k { color: var(--ink); }
  .z-nc-a:hover .z-tp li { background: var(--paper); }
  .z-nc-a:hover .z-arw { transform: rotate(-45deg); background: var(--ink); color: var(--paper); }
}
.z-bl { padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 11vh, 130px); }
.z-bl-k { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(20px, 3vh, 32px); font-size: 16px; font-weight: 700; line-height: 1; color: var(--sub); }
.z-bl-ls { border-top: 1px solid var(--ink); }
.z-bl-ls > li { border-bottom: 1px solid var(--line); }
.z-bl-a .z-nc-h { margin-top: 0; font-size: clamp(54px, 8.4vw, 144px); }
.z-bl-go { display: inline-flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 700; white-space: nowrap; }

/* manifesto — 가운데 큰 선언 여러 줄, 핵심 낱말 팀 색 알약 (pxd/about 0:00~0:08 + elespacio/about 0:12) */
.z-mf { padding-top: clamp(128px, 17vh, 184px); }
.z-mf-in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px, 7vh, 88px) 0 clamp(20px, 4vh, 48px); }
.z-mf-in .z-eb { margin-bottom: clamp(28px, 4vh, 44px); }
.z-mf-l { font-family: var(--fd); font-weight: 700; font-size: clamp(25px, 2.9vw, 46px); line-height: 1.42; letter-spacing: -.03em; max-width: 22em; text-wrap: balance; }
.z-mf-l + .z-mf-l { margin-top: .5em; }
.z-mf-h { font-weight: 800; font-size: clamp(36px, 5vw, 82px); line-height: 1.1; letter-spacing: -.045em; max-width: 14em; margin-bottom: .45em; }
.z-mf-k { display: inline-block; padding: .04em .42em .08em; margin: 0 .04em; border-radius: 999px; background: var(--c); color: var(--ink); font-weight: 800; line-height: 1.16; }
.z-mf .z-tabs { margin-top: clamp(48px, 8vh, 96px); }

/* principles — 숯빛 면, 번호 큰 목록 가는 선 (thinkcompany/about 0:24~0:30) */
.z-pr { padding: clamp(110px, 16vh, 190px) 0; }
.z-pr-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 6vw, 112px); align-items: start; }
.z-pr-stick { position: sticky; top: 112px; }
.z-pr-ls { border-top: 1px solid var(--line-dark); }
.z-pr-i { display: grid; grid-template-columns: clamp(80px, 9vw, 150px) minmax(0, 1fr); gap: 12px; padding: clamp(30px, 4.6vh, 52px) 0; border-bottom: 1px solid var(--line-dark); }
.z-pr-n { font-family: var(--wd); font-weight: 800; font-size: clamp(46px, 4.8vw, 80px); line-height: .9; letter-spacing: -.045em; color: var(--c); }
.z-pr-h { font-family: var(--fd); font-weight: 750; font-size: clamp(25px, 2.5vw, 38px); line-height: 1.22; letter-spacing: -.03em; }
.z-pr-tx { margin-top: 14px; max-width: 34em; color: var(--sub-dark); }
.z-pr-tx p + p { margin-top: .7em; }

/* engine — 겹친 원 셋이 차례로 그려짐 (pxd/about 0:08~0:10) */
.z-en { padding: clamp(110px, 16vh, 190px) 0 clamp(96px, 14vh, 160px); overflow-x: clip; }
.z-en-head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; margin: 0 auto clamp(48px, 8vh, 96px); }
.z-en-lead { margin-top: 22px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.66; max-width: 32em; color: var(--sub); text-wrap: pretty; }
.z-en-ls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin: 0 auto; }
.z-en-o { position: relative; width: 112%; margin: 0 -6%; aspect-ratio: 1; display: grid; place-items: center; }
.z-en-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.z-en-ring { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.z-en-fill { fill: color-mix(in srgb, var(--accent) 62%, var(--paper)); }
.z-en-dot { fill: var(--c); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.z-en-h { position: relative; font-family: var(--fd); font-weight: 800; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.1; letter-spacing: -.035em; }
.z-en-tx { padding: clamp(22px, 3.4vh, 36px) clamp(14px, 2.2vw, 36px) 0; text-align: center; color: var(--sub); font-size: 16.5px; line-height: 1.7; }
.z-en-tx .z-acts { justify-content: center; margin-top: 22px; }

@media (max-width: 1100px) {
  .z-wl-a, .z-wl-lab .z-wl-a { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; }
  .z-wl-g { grid-column: 1 / -1; }
  .z-wl-end .z-tp { display: none; }
}
@media (max-width: 960px) {
  .z-wf { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .z-wf-h { margin-top: 36px; }
  .z-ap-in, .z-pr-in, .z-dv-in { grid-template-columns: minmax(0, 1fr); }
  .z-ap-stick, .z-pr-stick { position: static; }
  .z-ap-toc { display: none; }
  .z-oc-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .z-oc-after { grid-column: 1 / -1; }
  .z-oc-c:nth-child(3) { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
}
@media (max-width: 760px) {
  .z-tf .z-tf-w { display: none; } .z-tf .z-tf-p { display: block; }
  .z-wi-head { grid-template-columns: minmax(0, 1fr); }
  .z-wl-a, .z-wl-lab .z-wl-a { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 24px 6px; }
  .z-wl-g { grid-column: 1 / -1; }
  .z-wl-h { grid-column: 1; }
  .z-wl-tx { grid-column: 1 / -1; }
  .z-wl-end { grid-column: 2; grid-row: 2; }
  .z-wl-lab .z-wl-a { padding: 26px 20px; }
  .z-ch2-meta { grid-template-columns: minmax(0, 1fr); }
  .z-ch2-m, .z-ch2-m:first-child { border-left: 0; padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
  .z-oc-band { grid-template-columns: minmax(0, 1fr); justify-items: start; border-radius: var(--r); padding: 22px 22px 28px; }
  .z-oc-badge { width: 64px; }
  .z-oc-nums, .z-oc-nums.n3 { grid-template-columns: minmax(0, 1fr); }
  .z-oc-card { grid-template-columns: minmax(0, 1fr); }
  .z-oc-c { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
  .z-oc-c:first-child { border-top: 0; }
  .z-dv-ls.z-dv-2 { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); }
  .z-dv-2 li:nth-child(-n+2) { border-top: 0; }
  .z-en-ls { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vh, 56px); }
  .z-en-o { width: min(76%, 300px); margin: 0 auto; }
  .z-ap-step, .z-pr-i { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .z-wi-big { font-size: 60px; }
  .z-wi-h { font-size: 23px; }
  .z-wf-h { font-size: 38px; }
  .z-wf-tx { font-size: 18px; }
  .z-wf-tag, .z-wf-g, .z-wl-g, .z-tp li, .z-wl-end .z-tp li, .z-ch2-m dt, .z-oc-k, .z-dv-n, .z-oc-n dd { font-size: 16px; }
  .z-wl-h { font-size: 27px; }
  .z-wl-tx { font-size: 16.5px; }
  .z-ch2-h { font-size: 48px; }
  .z-ch2-line p { font-size: 21px; }
  .z-cl-big { font-size: 28px; }
  .z-cl-tx { font-size: 17px; }
  .z-oc-n dt { font-size: 56px; }
  .z-oc-big { font-size: 23px; }
  .z-nc-h { font-size: 46px; }
  .z-bl-a .z-nc-h { font-size: 54px; }
  .z-mf-l { font-size: 23px; }
  .z-mf-l.z-mf-h { font-size: 36px; }
  .z-pr-h { font-size: 25px; }
  .z-en-h { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .z-wl-a::before, .z-wl-h, .z-nc-a::before, .z-nc-h, .z-ap-toc li, .z-ap-toc li::after, .z-wi-fb, .z-wf-fig { transition: none; }
}
.z-tp-sep { font-size: 0; }  /* 알약 사이 쉼표 — 화면엔 안 보이고 글로 읽으면 원고 한 줄 그대로 */
.z-mf-g { white-space: nowrap; }
.z-ch2, .z-mf { padding-bottom: 56px; }  /* 뒤 숯빛 판이 둥근 띠(48px)로 얹혀도 옆 탭을 가리지 않게 */
.z-wf-fig .z-tf .z-tf-w { display: none; } .z-wf-fig .z-tf .z-tf-p { display: block; }  /* 대표 카드 그림 칸은 세로가 길어 폰 비율 도식이 맞다 */