/* 2026-11 보이는 디자인 개편(look.css). 방향: 편집 디자인(에디토리얼) — 모서리 없는 꽉 찬 그림, 큰 제목과 가는 괘선, 무채색, 색은 ACTMORE 파랑 하나.
   근거: 타이포그래피 중심 에이전시 사이트의 공통 구조(전면 그림 → 한 줄 선언 → 숫자 → 사례 격자 → 역량 → 연락). 토큰(--ink --paper --gray --line)만 쓴다. */

/* 0. 토큰: 둥근 모서리를 없앤다(사진·카드·상자 전부). 알약 버튼만 둥글다 */
:root{--radius:0;--card-r:0}
.pill{border-radius:999px}

/* 1. 홈 첫 화면: 화면 가득 찬 그림, 큰 제목 */
body[data-page=home] .reel-card.b-hero{margin:0;width:100%;height:min(88svh,980px);border-radius:0}
.b-hero .c-cap{bottom:clamp(88px,10vh,120px);max-width:min(880px,80vw)}
.b-hero .c-cap h2{font-size:clamp(30px,4.6vw,72px);letter-spacing:-.05em;line-height:1.02}
.b-hero .c-cap p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.wordmark{padding-top:10px}
.wm-line{padding-bottom:22px}

/* 2. 제목 체계: 구역 제목은 한 크기, 꽉 짠 자간, 설명은 16px */
.sec-title,.who-top h2,.cx-works h2,.wd-more h2,.c15-head h2,.ab-who h2{font-size:clamp(34px,4.2vw,64px)!important;letter-spacing:-.05em!important;line-height:1.02!important;font-weight:800!important}
.b-sub,.who-lead{font-size:16px;line-height:1.7}
.eyebrow,.am-eyebrow,.cs-h,.cs-res small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.eyebrow::before{content:"";display:inline-block;width:8px;height:8px;background:currentColor;margin-right:10px;vertical-align:1px}
.who-top .eyebrow::before,.cs .eyebrow::before{display:none}

/* 3. 선언: 왼쪽 큰 문장은 더 크게 */
body[data-page=home] .statement h2{font-size:clamp(44px,6.4vw,112px)!important;line-height:.98!important;letter-spacing:-.06em!important}

/* 4. 사례 격자: 세 칸, 4:5 사진, 번호 · 고객 · 제목이 사진 아래 한 줄 체계로. 올리면 사진이 살짝 커진다 */
.works-page-grid .work-grid,#aiWorks{grid-template-columns:repeat(3,1fr)!important;column-gap:clamp(16px,2vw,32px)!important;row-gap:clamp(40px,4vw,64px)!important}
.work-card{counter-increment:work;display:grid;gap:14px}
.work-card .work-art{border-radius:0;overflow:hidden;aspect-ratio:4 / 5;background:#111}
.work-card .work-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.work-card:hover .work-art img{transform:scale(1.04)}
.work-card:hover .work-art,.work-card.is-wide:hover .work-art{transform:none;box-shadow:none}
.work-card .work-meta{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:start;border-top:1px solid var(--line);padding-top:12px}
.work-card .work-client{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);font-weight:700}
.work-card .work-names strong{display:block;font-size:clamp(16px,1.3vw,19px);line-height:1.35;letter-spacing:-.025em;margin-top:4px}
.work-card .work-result{display:block;font-size:13px;color:var(--ink2,#55555a);margin-top:6px;font-style:normal}
.work-card .work-tag{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:var(--gray)}
#worksFlat{counter-reset:work}
@media (max-width:900px){.works-page-grid .work-grid,#aiWorks{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:560px){.works-page-grid .work-grid,#aiWorks{grid-template-columns:1fr!important}}

/* 5. 로고 띠: 로고를 더 크게, 더 천천히 */
.logo-marquee .logo-track li{--base:clamp(28px,2.8vw,44px)}
.logo-track{animation-duration:56s}

/* 6. 후기: 큰 따옴표 하나, 글자 키움 */
.voice blockquote{position:relative;padding-top:34px}
.voice blockquote::before{content:"\201C";position:absolute;top:-6px;left:-2px;font-size:64px;line-height:1;font-weight:300;color:var(--ink);opacity:.9}
.voice blockquote p{font-size:clamp(16px,1.25vw,19px)}

/* 7. 사례 상세: 제목 크게, 그림은 화면 가득 */
.wd-head h1{font-size:clamp(34px,5vw,80px)!important;letter-spacing:-.05em!important;line-height:1!important}
.wd-hero{width:100%;border-radius:0}
.wd-hero,.wd-hero img,.cs-stills figure,.c15-case-art,.wd-card-img,.wd-card-img img{border-radius:0}
.cs-h{font-size:11px}
.cs-p,.cs-ul{font-size:17px;line-height:1.75}
.cs-res ul{font-size:18px}
.cs-badges b{font-size:clamp(40px,4vw,64px)}

/* 8. 알약 버튼: 올리면 채움이 뒤집힌다 */
.pill{transition:background .25s,color .25s,border-color .25s}
.pill-dark:hover{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--ink)!important}

/* 9. 연락 상자·바닥: 더 큰 문장 */
.cta-box{border-radius:0;margin-left:0;margin-right:0;width:100%}
.cta-box h2{font-size:clamp(40px,6vw,104px)!important}
.footer-news h2,.footer-tag{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.04em;line-height:1.05}

/* 10. 링크 밑줄 움직임 */
.who-list a,.cs-p a,.faq-item p a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s}
.who-list a:hover,.cs-p a:hover{background-size:100% 1px}

/* 보강: 첫 화면 제목은 두 줄까지 보여 주고 줄임표를 쓰지 않는다. 사례 사진은 4:3 한 비율 */
.b-hero .c-cap h2{white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:none!important}
.works-page-grid .work-card .work-art,#worksFlat .work-card .work-art,.sw-grid .work-card .work-art{aspect-ratio:4 / 3!important}
/* 좌우 여백: 명단 구역과 사례 본문도 다른 구역과 같은 여백 안에 */
.who-top,.cs,.cs-lite{padding-left:var(--pad);padding-right:var(--pad)}
.wd .cs{margin-left:0;margin-right:0}

/* 고객이 다시 선택한 일: 따옴표 없이, 카드 전체가 사례로 가는 링크 */
.voice.is-fact a{display:grid;gap:14px;color:inherit;text-decoration:none}
.voice.is-fact p{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.6;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.voice.is-fact footer{font-size:13px;color:var(--gray);font-weight:600;letter-spacing:.02em}
.voice.is-fact footer i{font-style:normal;display:inline-block;transition:transform .2s}
.voice.is-fact a:hover footer i{transform:translateX(4px)}