:root{--bg:#e4e4e2;--fg:#111;--mute:#6b6b68;--line:#111;--mono:Montserrat,"Pretendard Variable",Pretendard,sans-serif;--key:#58fead;--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:15px/1.6 "Pretendard Variable",Pretendard,system-ui,sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--key);outline-offset:2px;box-shadow:0 0 0 4px #111}
.mono{font:500 12px/1.5 var(--mono);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}

/* 상단 바 */
header{position:fixed;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:4px var(--pad);color:var(--key);background:rgba(10,10,10,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
header nav{display:flex;gap:20px}
header a{padding:12px 0}
header a:hover{text-decoration:underline}

/* 배경 영상 */
.hero{position:relative;height:100svh;overflow:hidden;background:#000;color:#fff}
.bg{position:absolute;inset:0;pointer-events:none}
.bg iframe{position:absolute;top:50%;left:50%;width:max(100vw,177.78svh);height:max(56.25vw,100svh);transform:translate(-50%,-50%) scale(1.15);border:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.05) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.92) 70%,#000)}
.hero-in{position:absolute;inset:auto var(--pad) 24px;z-index:1;display:grid;gap:24px}
.hero h1{font:700 clamp(56px,15vw,240px)/.85 Montserrat,sans-serif;letter-spacing:-.05em;color:var(--key);opacity:.45;mix-blend-mode:screen}
/* 브랜드 이름은 Montserrat */
header .brand{font:700 14px/1 Montserrat,sans-serif;letter-spacing:.02em}
.hero-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;border-top:1px solid rgba(255,255,255,.5);padding-top:12px}
.hero p.slogan{font-size:clamp(16px,2vw,22px);font-weight:600;letter-spacing:-.02em;max-width:520px}
.caret{display:inline-block;width:.5em;height:1.05em;margin-left:4px;vertical-align:-.15em;background:var(--key);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.now::before{content:"";display:inline-block;margin-right:8px;vertical-align:1px;width:8px;height:8px;border-radius:50%;background:var(--key);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.2}}

/* 섹션 머리 */
.sec-h{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:end;padding:72px var(--pad) 12px;border-bottom:1px solid var(--line)}
.sec-h h2{font:500 clamp(28px,5vw,56px)/1 var(--mono);letter-spacing:-.04em;text-transform:uppercase}

/* 썸네일 그리드 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);list-style:none;padding:0 calc(var(--pad) - 20px)}
.grid li{border-bottom:1px solid var(--line)}
.grid li:nth-child(odd){border-right:1px solid var(--line)}
.grid a{display:block;padding:20px}
.thumb{aspect-ratio:16/9;overflow:hidden;background:#cfcfcc}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s,filter .6s;filter:grayscale(1)}
.grid a:hover img,.grid a:focus-visible img{transform:scale(1.04);filter:none}
.meta{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin-top:14px}
.meta strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.meta .mono{color:var(--mute)}
.sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;padding:28px var(--pad) 10px;border-bottom:1px solid var(--line)}
.sub h3{font-size:20px;letter-spacing:-.02em}
.sub a{padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.sub a:hover{color:var(--mute)}
.bg>div{position:absolute;inset:0;transition:opacity .8s}.bg>.out{opacity:0}
.more{display:block;padding:16px var(--pad);border-bottom:1px solid var(--line);text-align:right}
.more:hover,.row:hover{background:#111;color:var(--bg)}

/* 목록형 행 */
.row{display:grid;grid-template-columns:80px 1fr 1.4fr auto;gap:16px;padding:20px var(--pad);border-bottom:1px solid var(--line);align-items:baseline}
.row h3{font-size:20px;letter-spacing:-.02em}
.row p{color:inherit;opacity:.75}
.awards{list-style:none;padding:0}
.award{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:baseline;padding:16px var(--pad);border-bottom:1px solid var(--line);font-size:17px;letter-spacing:-.01em}
.award .org{color:var(--mute)}
.award>.mono:last-child{color:var(--mute)}
.prize{font:600 12px/1 var(--mono);background:var(--key);color:#111;padding:6px 10px}
.cols{display:grid;grid-template-columns:repeat(2,1fr)}
.cols>div{padding:20px;border-bottom:1px solid var(--line)}
.cols>div:first-child{border-right:1px solid var(--line)}
.cols>div{padding:28px var(--pad) 24px}
.cols h3{font-size:22px;letter-spacing:-.02em;margin-bottom:16px}
.cols ul{list-style:none;padding:0;margin-bottom:20px}
.cols li{font-size:18px;letter-spacing:-.01em;padding:10px 0;border-top:1px solid #c9c9c6}
.cols .mono{color:var(--mute)}

/* 문의 */
form{display:grid;grid-template-columns:1fr 1fr}
form>div{padding:16px var(--pad);border-bottom:1px solid var(--line)}
form>div:nth-child(odd):not(.full){border-right:1px solid var(--line)}
.full{grid-column:1/-1}
label{display:block;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--mute);padding:8px 0;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 1px 0 var(--fg)}
textarea{min-height:140px;resize:vertical}
button{font:inherit;cursor:pointer;background:var(--fg);color:var(--bg);border:0;padding:14px 24px}
button:hover{background:var(--key);color:#111}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding:40px var(--pad) 24px}
footer a{display:inline-block;padding:6px 0}
/* 하단: 이메일(왼쪽) · 저작권(가운데) · 회사 정보(오른쪽, 옅게) */
footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
footer>div:nth-child(2){grid-area:1/3;text-align:right;color:#a3a39f;font-size:11px;line-height:1.35}
footer>div:last-child{grid-area:1/2;text-align:center}
@media (max-width:720px){footer{grid-template-columns:1fr}footer>div:nth-child(2),footer>div:last-child{grid-area:auto;text-align:left}}
footer a:hover{text-decoration:underline}

@media (max-width:720px){
  /* 세로 화면: 영상을 자르지 않고 16:9 전체를 위쪽에 */
  .bg{background:#000!important}
  .bg>div{inset:20svh 0 auto;height:56.25vw}
  .bg iframe{width:100%;height:100%;transform:translate(-50%,-50%)}
  header nav a:nth-last-child(n+3){display:none}
  .cols,form{grid-template-columns:1fr}
  .cols>div:first-child,form>div:nth-child(odd):not(.full){border-right:0}
  .row{grid-template-columns:1fr auto}
  .grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;border-bottom:1px solid var(--line)}
  .grid li,.grid li:nth-child(odd){scroll-snap-align:start;border-bottom:0;border-right:1px solid var(--line)}
  .grid a{padding:16px}
  .row h3,.row p{grid-column:1/-1}
  .row>:last-child{grid-row:1;grid-column:2}
  .award{grid-template-columns:52px 1fr auto;gap:10px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.now::before{animation:none}.thumb img{transition:none}}

/* 흐르는 이름 띠 */
.logos{display:flex;overflow:hidden;background:var(--fg);color:var(--bg);padding:20px 0}
.logos ul{display:flex;flex-shrink:0;gap:48px;padding:0 48px 0 0;list-style:none;animation:marquee 80s linear infinite}
.logos li{font:500 clamp(18px,2.4vw,28px)/1 var(--mono);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:48px}
.logos li::after{content:"✳";color:var(--key)}
.logos img{height:clamp(24px,3vw,36px);width:auto;max-width:180px;object-fit:contain;filter:brightness(0) invert(1)}
.logos:hover ul{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.logos{overflow-x:auto}.logos ul{animation:none}}

/* 인터랙션 — '동작 줄이기' 설정이면 모두 꺼짐 */
@media (prefers-reduced-motion:no-preference){
  /* 스크롤하면 아래에서 올라오기 (브라우저 기본 기능, 미지원 브라우저는 그냥 보임) */
  @supports (animation-timeline:view()){
    .sec-h h2{animation:wipe linear both;animation-timeline:view();animation-range:entry 10% entry 80%}
    .sub,.row,.award,.cols>div,.grid li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  }
}
@keyframes wipe{from{clip-path:inset(100% 0 0 0);transform:translateY(.4em)}to{clip-path:inset(0);transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

/* PLAY 커서 (마우스 쓰는 기기만, JS가 .fx 붙임) */
.cursor{position:fixed;left:0;top:0;z-index:20;pointer-events:none;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--key);color:#111;display:grid;place-items:center;font:500 12px/1 var(--mono);letter-spacing:.06em;scale:0;transition:scale .25s}
.cursor.on{scale:1}
.fx .grid a{cursor:none}

/* 썸네일 위 영상 미리보기 */
.thumb{position:relative}
.pv{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none}
.pv.on{opacity:1}
.pv iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.35);border:0}

/* 인트로: 검은 화면 → 문장 타자 → STUDIO1216 → 영상 (JS가 없으면 8초 뒤 자동으로 사라짐) */
.intro{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#000;color:#fff;text-align:center;clip-path:circle(150% at 50% 50%);transition:clip-path .9s cubic-bezier(.7,0,.2,1);animation:intro-off 0s 9s forwards}
.intro.close{clip-path:circle(0 at 50% 50%)}
.intro p{grid-area:1/1}
.intro-type{font:500 clamp(18px,2.6vw,32px)/1.3 var(--mono)}
.intro-logo{font:700 clamp(44px,9vw,140px)/1 Montserrat,sans-serif;letter-spacing:-.04em;color:var(--key);visibility:hidden}
.intro.logo .intro-type{visibility:hidden}
.intro.logo .intro-logo{visibility:visible}
@keyframes intro-off{to{visibility:hidden}}

/* 클라이언트 작업: 컴퓨터에서는 3칸 한 줄 */
@media (min-width:721px){
  #clients{grid-template-columns:repeat(3,1fr)}
  #clients li{border-right:1px solid var(--line)}
  #clients li:last-child{border-right:0}
}