/* 2026-11 개편: 명단(1단계) · 사례 상세 틀(2단계). 기존 토큰(--ink --gray --line --soft)만 쓴다.
   근거: 참고 회사소개서의 '고객 현황 → 사례' 순서, 사례 상세는 배경·문제·진행·결과 순서(이희수 대리 포트폴리오). */

/* 함께한 기업 명단: Work 맨 위 */
.who-top{padding:clamp(40px,4vw,64px) 0 clamp(56px,6vw,96px);display:grid;gap:14px}
.who-top h2{font-size:clamp(28px,3vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.15;max-width:18em}
.who-lead{font-size:15px;line-height:1.75;color:#55555a;max-width:36em}
.who-list{list-style:none;margin:clamp(20px,2vw,32px) 0 0;padding:0;border-top:2px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,56px)}
.who-list li{display:grid;grid-template-columns:minmax(0,11em) 1fr auto;gap:4px 14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5}
.who-list b{font-weight:700;letter-spacing:-.01em}
.who-list li.is-ind b{font-weight:600;color:#3a3a3c}
.who-list span{color:#55555a;min-width:0}
.who-list i{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--gray);white-space:nowrap}
@media (max-width:900px){.who-list{grid-template-columns:1fr}}
@media (max-width:520px){.who-list li{grid-template-columns:1fr auto}.who-list span{grid-column:1 / -1}}

/* 홈 띠: 사이트의 .block/.sec-row 양식을 따르고 색은 홈의 밝음·어두움 전환에 맡긴다(고정색 없음) */
.who-band .sec-row .pill{align-self:end}
/* 로고 띠(홈·Work 공용). 홈의 home-b.css가 흐름 속도와 멈춤을 정하고, 여기서는 모양과 Work용 기본 흐름만 */
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{list-style:none;margin:0;padding:0 clamp(22px,2.4vw,40px) 0 0;display:flex;align-items:center;width:max-content;gap:clamp(22px,2.4vw,40px);animation:logoFlow 40s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-marquee .logo-track li{--base:clamp(24px,2.4vw,36px);height:calc(var(--base) * var(--h,1));display:flex;align-items:center;flex:0 0 auto;padding:0 clamp(12px,1.4vw,22px)}
.logo-track img{height:100%;width:auto;max-width:clamp(130px,15vw,220px);object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.8}
.logo-track li:hover img{filter:none;opacity:1}
html.is-dark body[data-page=home] .logo-track img{filter:grayscale(1) invert(1) brightness(1.15)}
html.is-dark body[data-page=home] .logo-track li:hover img{filter:invert(1) brightness(1.1)}
@keyframes logoFlow{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation-duration:120s}}
@media (max-width:520px){.logo-track{gap:18px;padding-right:18px}.logo-marquee .logo-track li{padding:0 8px}.logo-track img{max-width:120px}}
.who-top .logo-marquee{margin:clamp(14px,1.6vw,24px) 0 clamp(20px,2vw,32px)}

/* 사례 상세 틀 */
.wd.has-case .wd-meta{padding-bottom:clamp(20px,2vw,32px)}
.cs{display:grid;gap:clamp(40px,4vw,64px);padding:0 0 clamp(56px,6vw,96px);border-top:1px solid var(--line);margin-top:clamp(8px,1vw,16px)}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,80px);padding-top:clamp(36px,3.4vw,56px)}
.cs-col{display:grid;gap:10px;align-content:start;min-width:0}
.cs-h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-top:18px}
.cs-h:first-of-type{margin-top:8px}
.cs-p{font-size:15.5px;line-height:1.8;color:#1d1d1f}
.cs-p.is-draft{color:#1d1d1f}
.cs-ul{margin:0;padding-left:1.1em;display:grid;gap:8px;font-size:15px;line-height:1.7;color:#1d1d1f}
.cs-stills .cs-still-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:14px}
.cs-stills figure{aspect-ratio:4 / 3;background:#111;overflow:hidden}
.cs-stills img{width:100%;height:100%;object-fit:cover;display:block}
.cs-eps ul,.cs-badges ul{list-style:none;margin:14px 0 0;padding:0}
.cs-eps ul{border-top:2px solid var(--ink)}
.cs-eps li{display:grid;grid-template-columns:minmax(0,9em) 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
.cs-eps li b{font-size:clamp(20px,1.8vw,26px);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cs-eps li span{color:#3a3a3c}
.cs-badges ul{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px)}
.cs-badges li{border-top:2px solid var(--ink);padding:16px 0 8px;display:grid;gap:4px}
.cs-badges b{font-size:clamp(30px,3vw,48px);font-weight:300;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.cs-badges span{font-size:13px;color:#55555a}
.cs-result{display:grid;gap:18px;border-top:2px solid var(--ink);padding-top:22px}
.cs-res small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
.cs-res ul{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:16px;line-height:1.7;font-weight:600;color:#1d1d1f}
.cs-res.is-sub ul{font-weight:400;font-size:14.5px;color:#55555a}
.cs-note{font-size:13.5px;color:#55555a;line-height:1.7;max-width:40em}
@media (max-width:820px){.cs-grid{grid-template-columns:1fr}.cs-stills .cs-still-grid{grid-template-columns:1fr 1fr}.cs-badges ul{grid-template-columns:1fr}}

/* 사례 이름이 길어져 휴대폰에서 줄임표로 잘리지 않게 */
.wd-head h1{white-space:normal;overflow:visible;text-overflow:clip;display:block;-webkit-line-clamp:unset;max-height:none}

/* 숫자 칸 다음 로고 띠: 이웃 구역과 같은 위 여백, 옛 #clients 규칙의 높이·정렬은 끈다 */
body[data-page=home] #clients{min-height:0!important;display:block!important;padding-top:clamp(64px,8vw,115px)!important;align-content:start}
body[data-page=home] #clients .sec-row{margin-bottom:clamp(16px,2vw,28px)}

/* 3단계: Work 둘째 층. 종류 카드 세 칸을 내리고 역량별로 섞은 목록을 항상 보여 준다 */
.wt-cards{display:none!important}
#worksFlat{display:block!important}
.filter-count{display:none!important}
.works-tools{margin-bottom:clamp(20px,2vw,32px)}
/* 보조 사례 짧은 틀 */
.cs-lite .cs-grid{padding-top:clamp(28px,3vw,44px)}
.cs-lite .cs-still-grid{margin-top:0}

/* 4단계: 자주 묻는 질문 (details/summary, 사이트 토큰만 사용) */
.faq-list{border-top:2px solid var(--ink);max-width:52em}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px 0;font-size:clamp(16px,1.3vw,19px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{position:relative;width:14px;height:14px;flex:none}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor;transition:transform .25s}
.faq-item summary i::before{width:14px;height:2px}
.faq-item summary i::after{width:2px;height:14px}
.faq-item[open] summary i::after{transform:rotate(90deg)}
.faq-item p{margin:0;padding:0 0 22px;font-size:15.5px;line-height:1.8;color:var(--ink2,#55555a);max-width:44em}
/* 4단계: 함께 일한 분들의 말 */
.voice-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px) clamp(16px,2vw,32px)}
.voice{border-top:2px solid var(--ink);padding-top:20px;display:grid;gap:14px;align-content:start}
.voice blockquote{margin:0;display:grid;gap:14px}
.voice blockquote p{margin:0;font-size:clamp(15px,1.15vw,17.5px);line-height:1.65;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.voice footer{font-size:13px;color:var(--gray);font-weight:600;letter-spacing:.02em}
.voice-tag{display:inline-block;justify-self:start;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--gray);border:1px solid var(--line);padding:4px 8px;border-radius:999px}
@media (max-width:1100px){.voice-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.voice-list{grid-template-columns:1fr}}
body[data-page=home] #voices{padding-top:0}

/* ACTMORE 출시 배너: 브랜드색 #6b86ff 는 점과 밑줄에만(뜻이 있는 색), 반짝임·반투명 장식 없음 */
.am-card{display:grid;gap:18px;justify-items:start;padding:clamp(28px,3.4vw,52px) clamp(24px,3vw,48px);border:1px solid var(--line);border-top:3px solid #6b86ff;color:var(--ink);text-decoration:none;max-width:1120px}
.am-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gray);text-transform:uppercase}
.am-dot{width:8px;height:8px;border-radius:50%;background:#6b86ff}
.am-logo{height:clamp(18px,1.8vw,26px);width:auto;margin-top:4px}
html.is-dark body[data-page=home] .am-logo{filter:invert(1)}
.am-title{font-size:clamp(26px,3vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1.12;margin:6px 0 0}
.am-sub{font-size:15px;line-height:1.75;color:var(--ink2,#55555a);max-width:38em;margin:0}
.am-cta{font-size:14px;font-weight:700;letter-spacing:.02em;border-bottom:2px solid #6b86ff;padding-bottom:4px;display:inline-flex;gap:8px;align-items:center}
.am-card:hover .am-cta i{transform:translateX(4px)}
.am-cta i{font-style:normal;transition:transform .2s}
body[data-page=home] #actmore{padding-bottom:clamp(64px,7vw,110px)}