/* 2026-11 디자인 마무리 층. 기준: 타이포그래피 중심 격자(큰 제목 · 가는 괘선 · 무채색 + 뜻 있는 색 하나)를 쓰는 에이전시 사이트의 구조.
   원칙: 토큰(--ink --ink2 --gray --line --paper)만 쓰고 고정색을 두지 않는다. 홈은 스크롤에 따라 토큰이 밝음↔어두움으로 바뀐다. */

/* 첫 화면 3초 검사: 누가(IMP) · 무엇을(마케팅 회사, 전략부터 성과까지) · 근거(브랜드 50+, 재계약 92%)가 첫 화면에 같이 보이게 */
.wm-line{display:flex;justify-content:space-between;gap:16px 32px;align-items:baseline;padding:14px var(--pad) 18px;font-size:14px;line-height:1.5;color:var(--ink2,#55555a);flex-wrap:wrap}
.wm-line b{font-weight:700;color:var(--ink)}
.wm-line span{white-space:nowrap}
@media (max-width:640px){.wm-line{font-size:13px;padding-top:10px;padding-bottom:14px}.wm-line span:last-child{display:none}}

/* 키보드 초점: 모든 화면에서 같은 모양 */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

/* 휴대폰: 긴 목록은 접고 펼친다 (명단 8개 · 후기 6개) */
.more-btn{display:none;margin-top:18px;background:none;border:1px solid var(--line);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;padding:12px 18px;border-radius:999px;cursor:pointer;letter-spacing:.01em}
@media (max-width:640px){
  .who-list:not(.is-open) li:nth-child(n+9){display:none}
  .voice-list:not(.is-open) li:nth-child(n+7){display:none}
  .more-btn{display:inline-block}
  .is-open+.more-btn{display:none}
}

/* 섹션 머리말 통일: Work 명단 제목도 사이트 공통 제목 크기 */
.who-top h2{font-size:clamp(28px,3vw,48px)}
.who-top .eyebrow{margin-bottom:6px}

/* 카드·괘선 두께 통일(2px 머리선, 1px 구분선)과 그림 모서리 */
.voice,.faq-list,.cs-result,.cs-eps ul,.cs-badges li,.who-list{border-top-width:2px}
.cs-stills figure,.c15-case-art,.wd-card-img{border-radius:2px;overflow:hidden}

/* 인쇄: 배경 · 움직임 없이 */
@media print{.logo-track{animation:none!important}.more-btn{display:none}}

/* 휴대폰 첫 화면: 설명 줄은 줄바꿈 허용, 릴 버튼은 한 줄로 */
@media (max-width:640px){
  .wm-line span:first-child{white-space:normal}
  .b-hero .watch-reel{white-space:nowrap;font-size:11px;letter-spacing:.08em;flex:none}
  .b-hero .c-hero-bar{gap:12px;flex-wrap:nowrap;align-items:flex-end}
  .b-hero .c-dots{min-width:0;flex:1 1 auto}
}
@media (max-width:640px){
  .b-hero .c-dots{flex:1 1 auto;min-width:0;gap:10px;margin-right:12px}
  .b-hero .c-dots button{width:auto;flex:1 1 0;min-width:0}
}

/* 글자색 대비: 보조 회색을 흰 바탕 4.5:1 이상으로(#8b8b88 → #6b6b68). 홈 어두운 구간은 five.css가 따로 밝은 회색을 쓴다 */
:root{--gray:#6b6b68}
/* 화면 짜임이 늦게 들어와도 아래 내용이 튀지 않게, 빈 동안 자리를 잡아 둔다 */
#whoTop:empty{min-height:clamp(520px,70vw,900px)}
#clients:empty{min-height:320px}
#voices:empty{min-height:520px}
#faq:empty{min-height:480px}
#actmore .am-card{min-height:280px}
/* 누르는 영역 24px 이상 */
#wdInfo dd a{display:inline-block;padding:4px 0}
/* 진행 단계: 불 켜지기 전에도 읽히는 밝기(대비 4.5:1 이상), 첫 화면 점 버튼은 24px 이상 */
body[data-page=home] .b-steps li{opacity:.85}
body[data-page=home] .b-steps li.is-lit,body[data-page=home] .b-steps li.is-on{opacity:1}
.b-hero .c-dots button{min-width:24px;min-height:24px}
/* 진행 단계 흐림은 #process 규칙(six.css)보다 우선해야 적용된다 */
body[data-page=home] #process .b-steps li{opacity:.9}
body[data-page=home] #process .b-steps li.is-lit{opacity:1}