/* 홈. 기준: R/GA(rga.com) 홈 구조를 그대로 따른다 — 검은 첫 화면에 4줄 굵은 선언문 + 오른쪽 아래 한 줄,
   그 아래 작업 사진 띠, 흰 바탕 WORK 큰 타일 2열(대문자 제목 + 한 줄 설명), WHAT WE DO 접힘 목록,
   색 카드 4장, 검은 바닥(연락처 + 화면을 가로지르는 큰 문장). 글꼴은 Helvetica Neue/Pretendard 900. 색은 검정·흰색 + 사각 점 하나. */
:root{--bg:#fff;--ink:#0a0a0a;--ink2:#333;--mute:#6b6b6b;--line:#e4e4e4;--acc:#F13C3A;--pad:clamp(20px,3vw,48px);--k:#0a0a0a}
body{background:var(--bg);color:var(--ink)}
h1,h2,h3{letter-spacing:-.03em}
.pills{background:var(--k);color:#fff;border-bottom:0;height:60px}
.pills .nav-link{color:#fff;font-size:13px;font-weight:600;letter-spacing:0;border-bottom-color:transparent}
.pills .nav-link:hover,.pills .nav-link.is-current{border-bottom-color:#fff}
.pills .nav-logo img{filter:invert(1);height:18px}
.nav-toggle{border-color:#fff;color:#fff}
@media (max-width:640px){.pills.is-open .nav-link{border-bottom-color:rgba(255,255,255,.2)}}

/* 1. 첫 화면 */
.hero{background:var(--k);color:#fff;padding:clamp(40px,7vh,96px) var(--pad) 0;display:grid;gap:clamp(56px,12vh,180px) 0}
.hero h1{font-size:clamp(44px,9vw,132px);font-weight:900;line-height:.95;letter-spacing:-.045em;max-width:9em;text-wrap:balance}
.hero h1 b{color:#F13C3A}
.hero-sub{justify-self:end;width:min(380px,100%);font-size:clamp(16px,1.5vw,22px);line-height:1.3;color:#fff;margin-right:clamp(0px,8vw,160px)}
.hero-strip{display:grid;grid-template-columns:1fr 1.5fr 1fr;grid-template-rows:clamp(200px,25vw,360px) clamp(200px,25vw,360px);gap:0;margin:0 calc(-1 * var(--pad));padding:0 clamp(0px,5vw,100px)}
.hero-strip a{display:block;overflow:hidden;background:#111}
.hero-strip a:nth-child(1){grid-column:1;grid-row:1 / 3;align-self:end;height:70%}
.hero-strip a:nth-child(2){grid-column:2;grid-row:1 / 3;aspect-ratio:1;align-self:center;width:100%}
.hero-strip a:nth-child(3){grid-column:3;grid-row:1}
.hero-strip a:nth-child(4){grid-column:3;grid-row:2}
.hero-strip a:nth-child(5){display:none}
.hero-strip img,.hero-strip video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.hero-strip{grid-template-columns:1fr 1fr;grid-template-rows:48vw 48vw;padding:0}.hero-strip a{grid-column:auto!important;grid-row:auto!important;height:100%!important;aspect-ratio:auto!important}}

/* 2. WORK */
.sec{padding:clamp(56px,7vw,110px) var(--pad) 0}
.sec > h2{font-size:clamp(28px,2.9vw,42px);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:clamp(24px,2.8vw,44px)}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,5.5vw,80px) 0;margin:0 calc(-1 * var(--pad));align-items:start}
.work-tile{display:grid;grid-template-rows:auto auto 1fr;gap:0;min-width:0;align-content:start}
.work-tile figure{aspect-ratio:3 / 2;overflow:hidden;background:#111;margin-bottom:clamp(24px,3.3vw,48px)}
.work-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.work-tile:hover img{transform:scale(1.03)}
.work-tile h3{font-size:clamp(18px,1.7vw,24px);font-weight:700;letter-spacing:-.01em;padding:0 var(--pad);margin-bottom:8px}
.work-tile p{font-size:clamp(16px,1.5vw,21px);color:var(--ink2);line-height:1.4;max-width:24em;padding:0 var(--pad)}
.work-tile em{display:block;margin-top:6px}
.work-tile em{font-style:normal;color:var(--acc);font-weight:700}
.sec-more{margin-top:clamp(28px,3vw,44px)}
.sec-more a{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid #000;padding-bottom:3px}
@media (max-width:640px){.work-grid{grid-template-columns:1fr}}

/* 3. WHAT WE DO */
.wwd-intro{font-size:clamp(18px,1.7vw,24px);line-height:1.45;max-width:30em;color:var(--ink);margin-bottom:36px}
.wwd-intro a{border-bottom:1px solid currentColor}
.acc-list{border-top:1px solid var(--line)}
.acc-list details{border-bottom:1px solid var(--line)}
.acc-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(28px,3.6vw,52px) 0;font-size:clamp(24px,2.8vw,40px);font-weight:400;letter-spacing:-.02em}
.acc-list summary::-webkit-details-marker{display:none}
.acc-list summary i{font-style:normal;font-size:28px;transition:transform .25s}
.acc-list details[open] summary i{transform:rotate(180deg)}
.acc-body{display:grid;grid-template-columns:1.2fr 1fr;gap:28px 48px;padding:0 0 40px}
.acc-body p{font-size:18px;line-height:1.55;color:var(--ink2);max-width:32em}
.acc-body ul{display:grid;gap:12px}
.acc-body li a{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;font-size:15px;font-weight:600}
.acc-body li img{width:120px;aspect-ratio:16/10;object-fit:cover;display:block;background:#111}
@media (max-width:760px){.acc-body{grid-template-columns:1fr}}

/* 4. 카드 4장 (R/GA의 NEWS 타일 자리): 고객이 다시 선택한 일 */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.card{display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;padding:18px;color:#fff;text-decoration:none}
.card img{width:calc(100% + 36px);margin:-18px -18px 0;aspect-ratio:16/9;object-fit:cover;display:block}
.card small{font-size:13px;font-weight:600;letter-spacing:.02em}
.card h3{font-size:clamp(17px,1.4vw,21px);font-weight:700;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.card span{font-size:12px;font-weight:700;border-bottom:1.5px solid currentColor;justify-self:start;padding-bottom:2px}
.card.c1{background:#F13C3A}.card.c2{background:#111}.card.c3{background:#C9C1B6;color:#000}.card.c4{background:#3a3a3a}
.cards-more{text-align:center;margin-top:24px}
.cards-more a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid #000;padding-bottom:2px}
@media (max-width:900px){.cards{grid-template-columns:repeat(4,80%);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}.card{scroll-snap-align:start}}

/* 5. CLIENTS: 로고 띠 */
.clients{padding-bottom:clamp(56px,7vw,110px)}
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent)}
.logo-track{display:flex;align-items:center;gap:clamp(44px,5vw,88px);width:max-content;padding-right:clamp(44px,5vw,88px);animation:flow 60s linear infinite}
.logo-track li{height:28px;flex:none;display:flex;align-items:center}
@media (max-width:640px){.logo-track{gap:40px}.logo-track li{height:22px}}
.logo-track img{height:100%;width:auto;max-width:220px;object-fit:contain;filter:grayscale(1);opacity:.8}
@keyframes flow{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}}

/* 6. 검은 바닥 */
.foot{background:var(--k);color:#fff;padding:clamp(48px,6vw,96px) var(--pad) 0}
.foot-top{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding-bottom:28px;border-bottom:1px solid #333}
.foot-top h2{font-size:clamp(28px,3.3vw,48px);font-weight:500;letter-spacing:-.02em}
.foot-top a{font-size:clamp(16px,1.7vw,24px);font-weight:700;display:flex;gap:14px;align-items:center}
.foot-top a i{font-style:normal;font-size:44px;line-height:1}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;padding:40px 0 clamp(48px,6vw,96px)}
.foot-places{display:grid;grid-template-columns:repeat(3,max-content);gap:12px 56px;font-size:clamp(28px,3.3vw,48px);font-weight:500;align-content:start}
.foot-right{display:grid;gap:22px;font-size:clamp(16px,1.5vw,22px);line-height:1.4;color:#d9d9d9;max-width:26em}
.foot-right .lnk{display:grid;gap:4px}
.foot-right .lnk a{color:#fff;font-weight:600}
.foot-small{display:grid;grid-template-columns:repeat(2,minmax(200px,max-content));gap:6px 24px;font-size:12px;color:#9a9a9a}
.foot-small span,.foot-small a{white-space:nowrap}
.foot-big{padding:clamp(80px,11vw,160px) 0 clamp(24px,3vw,40px);font-size:clamp(40px,9.6vw,140px);font-weight:900;letter-spacing:-.045em;line-height:.94;text-align:center;text-wrap:balance}
.foot-big b{display:inline-block;width:.6em;height:.6em;background:var(--acc);vertical-align:-.02em;margin-right:.15em}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;padding:14px 0 18px;border-top:1px solid #333;font-size:11px;color:#9a9a9a}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-places{grid-template-columns:1fr 1fr}}
/* ACTMORE 한 줄 */
.am-strip{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid #333;font-size:13px;color:#d9d9d9}
.am-strip img{height:12px;width:auto;filter:invert(1)}
.am-strip i{margin-left:auto;font-style:normal}
/* 휴대폰 바닥: 넘침 방지 */
.foot-grid > *{min-width:0}
@media (max-width:760px){.foot-places{grid-template-columns:1fr 1fr;gap:10px 24px;font-size:28px}.foot-right{max-width:100%;font-size:16px}.foot-small{grid-template-columns:1fr}.foot-small span,.foot-small a{white-space:normal}.foot-top{grid-template-columns:1fr}.foot-top a{font-size:16px}.foot-top a i{font-size:32px}}