/* ===== Duedance, Pentagram 순수 갤러리 (실측 스펙) ===== */
:root{
/* 라틴은 Helvetica Neue, 한글은 Pretendard. Helvetica Neue 에 한글 글리프가 없어
한글만 자연히 Pretendard 로 떨어진다. Apple SD Gothic Neo 를 빼야 그게 이긴다
(있으면 시스템 한글이 Pretendard 를 가로챈다), 조중현 2026-07-28. */
/* 한 서체로 두 문자를 쓴다 (조중현 2026-07-29: "영문 국문 자간이 달라서 덜그럭거린다. 프리텐다드 쓰자").
Pretendard 는 라틴 세트까지 갖춘 서체라, 섞어 쓸 때 생기던 자간·웨이트 불일치가 사라진다.
Helvetica Neue 를 스택에서 뺐다, 있으면 라틴을 가로채 다시 두 서체가 된다. */
--font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
--ink:#1a1a1a;
--muted:#767676;
--paper:#ffffff;
--black:#0a0a0a;
--line:#eaeaea;
--ph:#d8d6d2; /* 라이트 섹션 이미지 자리 (뉴트럴 그레이) */
--ph-dark:#2b2b2b; /* 다크 섹션 이미지 자리 */
--dark-muted:#8c8c8c; /* 다크 배경 보조 텍스트 단일 토큰(Pentagram 실측 푸터값) */
--edge:max(24px,6.7vw);
/* 거터를 Collins 비율로 (조중현 2026-08-09, 노트북 1710 에서 97% 가 꽉 차 보임).
콘텐츠가 어떤 폭에서든 화면의 86.6%(Collins 실측 1440 에서 1248)가 되도록
--edge 를 6.7vw 비례로 둔다. 고정 캡(7/27 방식)은 1710 에서 73% 로 휑해져 폐기.
캡 1728 과 '그 안을 비율로 채우는' 구조는 그대로다. ≤1023 은 아래 쿼리가 16/12 로 덮는다.
1710 에서 콘텐츠 1481px(한 칸 112px), 1440 에서 1247px(한 칸 93px, 4칸 스팬 408px).
이전 값 --edge:24px (Pentagram 실측, 조중현 2026-07-28 "Pentagram 은 폭을 좁히지 않는다"). */
--cap:1728px;
--gap:12px;
/* 넓은 칼럼 간격. studio 페이지의 다단 영역(인트로 2단·프로그램 카드·팀·디렉터)이
이 하나를 함께 쓴다 (조중현 2026-08-05 "디렉터 세션의 간격을 studio 페이지에
전부 적용" → 64, 이어서 "컬럼간격 40px로 전면 제조정" → 40).
디렉터 사진 트랙도 이 토큰으로 계산하므로 팀 썸네일과 크기가 갈라질 수 없다. */
--gap-wide:40px;
--rowgap:168px; /* 섹션 간격. 112 → 1.5배 (조중현 2026-07-28) */
/* 타입 6종. 이 표에 없는 크기를 새로 쓰지 않는다 (DESIGN-SYSTEM.md §2) */
--t1:52px; --lh1:1.05;
--t2:32px; --lh2:1.2;
--t3:19px; --lh3:1.3;
--t4:16px; --lh4:1.5;
--t5:13px; --lh5:1.25;
--t6:12px; --lh6:1.2;
--disp:var(--t1); /* 구 이름 유지, 참조가 많다 */
--sub:var(--t2);
/* 글줄길이 4종. 역할마다 다르게 끊는다, 하나로 자르면 페이지가 한 덩어리로 읽힌다 (§3) */
--m-disp:24ch;
--m-head:30ch;
--m-lead:48ch;
--m-body:74ch;
/* 라운드 2단계 + 컨트롤 높이 1종 (§4·§5). 히어로 스코프에만 있던 것을 전역으로.
programs 본문의 segtoggle 등 히어로 밖 컴포넌트도 같은 토큰을 쓴다. */
--hr-lg:14px;
--hr-md:9px;
--hr-sm:4px;
--hc:46px;
}
/* Pentagram 실측 브레이크포인트: 800px(거터 12→16) / 1024px(16→24), 캡 1728px */
/* 태블릿 티어는 기본값 40px 을 그대로 쓴다, 같은 값을 다시 적지 않는다 */
@media(max-width:1023px){:root{--edge:16px}}
/* 모바일 칼럼 간격은 양옆 마진과 같게 (조중현 2026-08-05 "모바일은 양옆 마진과 맞춰").
숫자를 다시 적지 않고 --edge 를 그대로 참조한다, 거터가 바뀌면 같이 따라온다. */
@media(max-width:799px){:root{--edge:12px;--t1:34px;--t2:24px;--rowgap:108px;--hc:40px;--gap-wide:var(--edge)}}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:var(--t4);line-height:var(--lh4)}
/* 국문: 단어 중간에서 줄바꿈하지 않는다(연/결 쪼개짐 방지). 아주 긴 토큰만 폴백 분리. */
body{word-break:keep-all;overflow-wrap:break-word}
/* 본문 단락 미아(외톨이 줄) 방지 */
p,.lead-para,.c-desc,.dir-bio{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:italic}
/* ---- 언어 전환 (영문 기본 / 국문 선택) ----
병기하면 카드·헤딩 컴포넌트가 두 줄로 깨지므로, 한 번에 한 언어만 노출한다.
.en / .ko 는 같은 자리에서 서로를 대체하며, 선택된 쪽이 주 텍스트 스타일을 그대로 상속한다. */
.en,.ko{display:inline;color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
html[data-lang="en"] .ko{display:none}
html[data-lang="ko"] .en{display:none}
/* 한글은 자간을 좁히지 않는다 */
/* ===== 웨이트·줄높이 (조중현 2026-07-29) =====
한 서체(Pretendard)로 두 문자를 쓰므로 문자별 보정을 두지 않는다, 자간·웨이트가 하나다.
Pretendard 400·450 은 한글에서 얇게 읽힌다, 기본을 500 으로 올렸다
(조중현 2026-07-29 "한글 폰트 웨이트 올려"). §2 는 여전히 두 종: 500·600.
400 리터럴은 남기지 않는다, 제목도 --w-base 를 쓴다.
줄높이는 한글 기준으로 잡는다, 한글이 기본 노출이고, 라틴만 조금 좁게 되돌린다. */
:root{--w-base:500;--w-strong:600;
/* 본문 줄높이는 한글 기준이 기본이다, 라틴만 조금 좁게 되돌린다 */
--lh-body:1.7;--lh-lead:1.45}
html[data-lang="en"]{--lh-body:1.55;--lh-lead:1.35}
body{font-weight:var(--w-base)}
/* 본문 줄높이: 한글이 기본 노출이라 지면 전체를 한글 기준으로 잡는다 */
/* 헤더 우측 도구: 검색 + 언어 */
.hdr-tools{display:flex;align-items:center;gap:20px;margin-left:28px}
/* 컨트롤 높이 1종 --hc (§5), 버튼 박스만 --hc 로 올리고 아이콘 svg 는 20px 그대로 중앙 정렬.
20×20 박스는 히트 타깃으로도 작았다. */
.searchtoggle{background:none;border:0;padding:0;width:20px;height:20px;color:var(--ink);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center}
.searchtoggle:hover{color:var(--muted)}
.langtoggle{display:flex;align-items:center;gap:4px;font-size:var(--t4);line-height:1.25}
.langtoggle button{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer}
.langtoggle button.on{color:var(--ink)}
.langtoggle button:hover{color:var(--ink)}
.langsep{color:var(--line)}
/* 검색 패널 (Pentagram 실측: 전체 폭 오버레이, 입력 32px, 하단 보더 1px #ccc, 좌측 거터) */
.searchpanel{position:fixed;inset:0;z-index:40;background:var(--paper);
padding-top:60px;overflow-y:auto}
.searchbar{display:flex;align-items:center;gap:16px;
width:min(100% - 2*var(--edge),var(--cap));margin-inline:auto;padding:40px 0 0}
#searchinput{flex:1;font:inherit;font-size:var(--t2);line-height:1.2;color:var(--ink);
background:none;border:0;border-bottom:1px solid #ccc;padding:8px 0;outline:none}
#searchinput::placeholder{color:var(--muted)}
#searchinput::-webkit-search-cancel-button,#searchinput::-webkit-search-decoration{-webkit-appearance:none;display:none}
#searchinput:focus{border-bottom-color:var(--ink)}
.searchclose{background:none;border:0;font-size:var(--t2);line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.searchclose:hover{color:var(--ink)}
.searchresults{width:min(100% - 2*var(--edge),var(--cap));margin-inline:auto;padding:32px 0 96px}
.searchhit{display:grid;grid-template-columns:120px 1fr;gap:4px var(--gap);align-items:baseline;
padding:16px 0;border-top:1px solid var(--line);color:inherit}
.searchhit:hover .searchhit-title{color:var(--muted)}
.searchhit .pill{justify-self:start}
.searchhit-title{font-size:var(--t3);font-weight:var(--w-strong);line-height:25px}
.searchhit-desc{grid-column:2;font-size:var(--t4);color:var(--muted);line-height:1.25}
.search-none{font-size:var(--t4);color:var(--muted);padding:16px 0}
@media(max-width:799px){
.hdr-tools{margin-left:auto;margin-right:12px;gap:14px}
.searchhit{grid-template-columns:1fr}
.searchhit-desc{grid-column:1}
#searchinput{font-size:var(--t2)}
}
/* 포커스 링 (Pentagram 실측: outline 2px solid, 다크 컨텍스트는 흰색) */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
footer a:focus-visible,.banner :focus-visible{outline-color:#fff}
.bslide:focus-visible{outline-offset:-3px}
/* 이미지 hover 페이드 (Pentagram 실측: 이미지에만 300ms, nav·텍스트는 0s) */
.card .thumb,.wgrid a img,.post .shot{transition:opacity .3s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){*{transition-duration:0s!important}}
/* CMS 이미지 슬롯 통일: div 자리표시자를 img로 (aspect-ratio+회색 배경 유지) */
.card .thumb,.tmember .thumb,.post .shot,.fullbleed .shot{object-fit:cover;width:100%}
.wrap{width:min(100% - 2*var(--edge),var(--cap));margin-inline:auto}
.wrap.rowgap-top{padding-top:var(--rowgap)}
/* ---- Header : 60px, static, 투명 ---- */
header{height:60px;display:flex;align-items:center;justify-content:space-between;
width:min(100% - 2*var(--edge),var(--cap));margin-inline:auto;
padding:0;position:relative;z-index:20}
/* 워드마크는 글자가 아니라 심볼이다 (조중현 2026-08-06). 헤더는 정지된 정본 심볼이고,
춤추는 쪽은 studio 상단 자리 하나로 보냈다 (조중현 "그냥 스틸svg가 나은거 같아").
머리에서 계속 움직이면 페이지마다 눈이 그리로 끌린다, 로고는 가만히 있는 게 맞다.
글자 'Duedance' 는 .sr-only 로 남겨 둔다. 읽는 기계(스크린리더·크롤러)에게 이 링크가
무엇인지 말하는 유일한 문자열이고, 전 페이지 머리에 브랜드명이 있다는 사실 자체가
생성형 검색에서 엔티티를 잇는 신호다. 보이는 자리에서만 뺀 것이다. */
.wordmark{font-size:var(--t3);font-weight:var(--w-strong);letter-spacing:-.01em;line-height:25px;
display:inline-flex;align-items:center}
/* 색은 currentColor 를 따른다, 그래서 흰 헤더(feed)에서도 저절로 흰 심볼이 된다.
viewBox 안에 여백이 있어 실제 그림은 상자의 4분의 3쯤이다, 그만큼 상자를 크게 잡는다. */
/* 정본 심볼의 패스를 그대로 심는다. favicon.svg 를 ![]()
로 걸면 그 파일에 검정(#040000)이
박혀 있어 흰 글자를 쓰는 feed 헤더에서 혼자 검정으로 남고, CSS 마스크로 우회하면
file:// 로 열었을 때 마스크가 로드되지 않아 심볼이 통째로 사라진다. 인라인이면
fill:currentColor 한 줄로 색이 따라오고 어떤 방식으로 열어도 보인다.
높이 40px 은 앞서 춤 심볼이 서 있던 크기와 같다, 파일 비율(198.33×231.59)로 폭을 맞춘다. */
.wordmark-logo{width:34px;height:40px;display:block;flex:0 0 auto}
@media(max-width:799px){.wordmark-logo{width:29px;height:34px}}
/* 춤 심볼은 studio 상단에만 있다. viewBox 안 여백 때문에 그림이 상자의 4분의 3쯤이라,
예전 정본 이미지(120px)와 같아 보이려면 상자를 그만큼 크게 잡는다. */
/* 누르면 부르르 떤다 (site.js), 그래서 커서가 손이다. .enter 는 군중 기믹으로 새로 오는
사람의 첫 프레임이고, 클래스가 떨어지면서 스르륵 나타난다. */
.symbol-dance{aspect-ratio:1;display:block;flex:0 0 auto;position:relative;cursor:pointer;transition:opacity .5s}
.symbol-dance.enter{opacity:0}
.symbol-dance svg{display:block}
/* 춤 심볼의 말풍선 (조중현 2026-08-11 "머리 위로 말풍선이 뜨고 문워크.. 리브랜딩..
같이 말이 나오면 재밌을거 같아"). site.js 가 마디마다 단어를 갈아 끼우고 머리 좌표를
left/top %로 넣어 준다, 그래서 문워크로 미끄러지면 말풍선도 머리를 따라간다.
채운 상자에 흰 글자다. 서서 숨 쉬는 1.5초에는 사라진다(.on 이 빠진다),
그 정지가 로고로 읽히는 순간이라 말을 시키지 않는다. */
/* 자리는 site.js 가 transform 하나로 옮긴다 (left/top 을 매 프레임 갱신하면 초당 60번
문서 리플로를 강제한다 — 조중현 2026-08-11 "좀 느려지는거 같은데" 의 원인 하나).
머리 위 26px 여백도 그 transform 문자열 안에 있다. */
.dance-bubble{position:absolute;left:0;top:0;
background:var(--ink);color:var(--paper);font-size:var(--t5);line-height:var(--lh5);
padding:7px 11px;border-radius:var(--hr-md);white-space:nowrap;
opacity:0;transition:opacity .18s;pointer-events:none}
.dance-bubble.on{opacity:1}
.dance-bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;
border:5px solid transparent;border-top:6px solid var(--ink);border-bottom:0}
header nav ul{display:flex;gap:28px;list-style:none}
header nav a{font-size:var(--t4);font-weight:var(--w-base)}
header nav a:hover{color:var(--muted)}
header nav a[aria-current="page"]{color:var(--muted)}
/* 햄버거: 데스크톱에선 숨김 (Pentagram도 <800px에서만 노출) */
/* 컨트롤 높이 1종 --hc (§5), 같은 헤더의 .searchtoggle 과 같은 규격.
햄버거 라인(24×18)은 패딩으로 중앙에 두고, 아이콘 우단이 캡 선에 오도록 패딩만큼 내민다. */
.navtoggle{display:none;background:none;border:0;width:60px;height:60px;padding:21px 18px;
margin-right:calc(var(--edge)*-1);
flex-direction:column;justify-content:space-between;cursor:pointer}
.navtoggle span{display:block;height:1px;width:100%;background:var(--ink);transition:transform .3s cubic-bezier(.4,0,.2,1)}
/* ---- Hero 배너 캐러셀 (Pentagram 실측: 7:3 풀블리드, 모바일 3:4, 100vh 아님) ---- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 배너는 풀블리드가 아니라 캡(1728px) 폭. 그 이상 뷰포트에선 중앙 정렬 (실측: 2560px에서 left=416) */
.banner{position:relative;width:100%}
/* ===== 히어로 카드 덱 (조중현 2026-07-28) =====
평평한 필름 트랙을 걷어내고 카드 덱으로 바꿨다. 가운데 카드가 서고 좌우 이웃이
뒤에서 비켜 보인다. 스크롤 컨테이너가 아니라 변형 무대다, 손으로 밀 수 있어야 하고,
위치는 스크립트가 transform 으로 정한다(스크롤 위치 역산 폐기).
카드 크기는 여기서 한 벌로 정한다. 무대 높이는 카드 높이 + 이웃이 내려앉을 자리 + 그림자. */
/* 세로 스택 치수. --ch(펼친 카드 높이)는 스크립트가 실측해 넣는다.
미디어 비율에서 나오는 값이라 CSS 로는 px 로 못 적는데, 접힘/펼침을 transition 하려면
양끝이 모두 px 여야 한다 (조중현 2026-07-28). */
/* 필름 스트립 (조중현 2026-08-04 "롤링 디자인이 별로야, 다른 방식" → 필름 스트립 선택).
가로 아코디언(단색 세로 캡슐 + 세운 라벨)을 버렸다, 캡슐은 커버도 버튼도 아닌
애매한 물건이었다. 이제 이웃도 자기 커버 그대로의 카드다. 모두 같은 크기로 나란히
서고, 무대 양 끝에서 --sw 폭만큼만 조각으로 내다보인다(peek). 잘림은 무대의
overflow:hidden 이 맡는다, 조각이라도 실제 작업 이미지라 '옆에 다음이 있다' 로 읽힌다.
--sw: 이웃이 내다보이는 폭. 캡슐 시절의 이름을 그대로 쓴다, 카드 폭 식
calc(100% - 2*(--sgap + --sw)) 이 JS(cardW)와 CSS 에 같은 꼴로 있기 때문이다. */
/* --car = 카드의 가로/세로. 커버 정본이 3:2(2025x1350)이므로 히어로도 3:2 다
(조중현 2026-08-12 "썸네일 비율과 통일"). 데스크톱이 2.05 이던 동안 히어로만 커버
위아래를 크게 잘라 써서, 같은 그림이 work 그리드와 다르게 보였다. */
/* 리볼버 무대 값 (2026-08-05, 2026-08-12 다섯 겹). 이웃 카드는 자기 띠의 바깥 끝을
경첩 삼아 안쪽으로 접혀 들어간다. --ang 은 첫 겹, --ang2 는 그 바깥 겹의 각이다
(클수록 깊이 눕는다). --persp 는 보는 거리(작을수록 원근이 세다).
--cw(카드 폭) --ch(카드 높이) --band(한쪽 띠 폭)은 site.js 의 measure() 가 적는다. */
/* 데스크톱 무대 높이 = (무대폭 − --hbase) ÷ --hdiv. 다섯 겹이 되면서 카드 폭을 높이에서
역산하게 됐는데(높이 × --car), 그러면 높이를 정할 기준이 사라진다. 그래서 예전 식
(펼친 카드 폭 ÷ 2.05)을 상수로 남겨 무대 높이가 지금 있던 자리에 그대로 서게 한다
(조중현 2026-08-12 "높이 유지"). 324 는 예전 좌우 띠 2 × (12 + 150) 이다. */
.banner{--sw:150px;--sgap:12px;--car:1.5;--ang:44;--ang2:64;--persp:1100px;
--hbase:324px;--hdiv:2.05;--cw:600px;--band:150px}
/* 히어로가 배너 단독 전폭이 됐다 (조중현 2026-08-04 "히어로 영역은 배너롤링만").
2026-08-05 에 카드 자체를 1.5배 높여봤다가 되돌렸다 (조중현 "섹션 크기를 조정하라는게
아니었고"). 히어로에 숨 쉴 자리가 필요한 것이었고, 그건 .heroframe 의 위아래 여백이다. */
/* isolation:isolate, 카드 z-index(최대 30)를 이 무대 안에 가둔다.
가두지 않으면 검색 패널(z-index 15) 위로 카드가 올라와 검색 결과를 못 누른다
(조중현 2026-07-28: clicktest '검색 결과 클릭 → 이동' 이 이걸 잡았다).
세로로 굴러가므로 끌기는 걸지 않는다, 페이지 세로 스크롤과 싸운다. 띠를 누르거나
인디케이터·화살표 키로 옮긴다. */
/* overflow:hidden, 필름 스트립의 핵심이다. 이웃 카드는 무대 밖까지 이어지고,
무대 경계가 조각(peek)을 잘라낸다. 그림자는 2026-07-30 에 없앴으므로 잘릴 것도 없다. */
.deck{position:relative;width:100%;overflow:hidden;isolation:isolate}
/* 원근은 카드의 부모가 준다, 여기 걸어야 카드가 실제로 뒤로 접힌다.
preserve-3d 를 함께 준다 (2026-08-06). 이걸 빼면 카드끼리는 z-index 순서로만 겹치는데,
접힌 카드는 경첩(무대 경계)에서 z=0 이고 안쪽으로 갈수록 뒤로 물러나는 비스듬한 면이라
'앞이냐 뒤냐' 가 한 장 안에서도 갈린다. 순서를 손으로 정하면 굴러가는 도중 어느 쪽으로
정해도 틀리고, 도중에 바꾸면 화면이 튄다. preserve-3d 면 브라우저가 픽셀마다 실제
깊이로 정렬하므로, 접혀서 물러난 부분은 저절로 평평한 카드 뒤로 들어간다. */
.dring{position:absolute;inset:0;perspective:var(--persp,1100px);transform-style:preserve-3d}
/* 카드 높이는 내용이 정한다. 4:5 로 못박았더니 가로 미디어 아래로 흰 여백이 크게 남았다
(조중현 2026-07-28). 미디어 4:3 + 이름 캡슐 한 줄 = 거의 정사각 카드. */
/* 카드는 무대 가운데를 기준으로 서고, 접힌 캡슐들이 좌우에 쌓인다.
폭·위치가 한 이징으로 함께 움직여야 '접힌다'로 읽힌다 (조중현 2026-07-28). */
/* 카드 면(흰 컨테이너)은 없앴다, 썸네일이 곧 카드다 (조중현 2026-07-28).
그림자도 없앴다 (조중현 2026-07-30 "히어로 영역에서 그림자 지워봐").
면이 직각이 된 뒤에는 떠 있는 그림자가 액자와 어긋나 보였다. 종이 위에 놓인 인쇄면처럼 둔다.
2026-08-12 에 다섯 겹이 된 뒤 두 번 다시 대봤고 둘 다 걷어냈다. 접힌 면을 겹마다
어둡게 덮는 그늘(조중현 "딤드처리가 아니라"), 그리고 7월에 지웠던 그 드롭섀도우를
그대로 되살린 것(조중현 "완전 별로다 그냥 제거해"). 카드가 3D 로 누워도 결론은 같다,
히어로는 그림자 없이 종이 위 인쇄면으로 둔다. 깊이는 원근 하나로만 낸다. */
/* 폭도 스크립트가 준다 (2026-08-12). 다섯 겹이 되기 전에는 폭이 먼저였고
(무대 − 좌우 띠) 높이가 거기서 나왔는데, 이제 높이가 먼저고 폭이 3:2 로 따라온다.
좌우에 남는 자리를 두 겹이 나눠 쓰므로 띠 폭을 CSS 에서 미리 적을 수 없다. */
.dcard{position:absolute;left:50%;top:50%;translate:-50% -50%;
width:var(--cw,600px);height:var(--ch,360px);
display:flex;flex-direction:column;
border-radius:var(--hr-lg);color:var(--ink);overflow:hidden;
will-change:transform;backface-visibility:hidden}
/* transform 에 transition 을 걸지 않는다 (2026-08-05). 자리와 각도가 서로 다른 속도로
가야 하는데 transition 은 둘을 한 곡선에 묶는다. 그러면 중앙을 지나는 큰 카드가
누운 채 무대를 가로지르며 위아래가 잘려 보인다. site.js 의 roll() 이 프레임마다 그린다. */
/* 이웃 카드: 크기·미디어 모두 가운데와 같다, 상태(is-off)는 역할만 바꾼다.
진입점(⊕)은 가운데만 가진다. 44px 조각 시절 커버 대신 채우던 대표색(--solid)은
폐기, 150px 조각은 작업이 실제로 보인다. */
.dcard.is-off .dcard-go{display:none}
.dcard-open{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;color:inherit}
/* 미디어가 카드를 그대로 채운다, 안쪽에 별도 창을 두지 않는다 */
.dcard-media{position:relative;display:block;flex:1 1 auto;min-height:0;overflow:hidden;
background:var(--ph)}
.bshot{width:100%;height:100%;object-fit:cover;display:block;background:var(--ph);
transition:opacity .42s cubic-bezier(.22,.61,.36,1)}
/* 제목 오버레이·스크림은 폐기 (2026-08-04 필름 스트립과 함께), 커버 위에 글자를
얹지 않는다, 카드가 커버 그대로 보이는 게 정본이다. */
/* 원형 진입점, 레퍼런스의 아이콘 캡슐과 같은 어휘 */
/* 오른쪽 위로 올렸다, 아래에 두면 긴 제목이 ⊕ 를 파고든다 (조중현 2026-07-28).
아래 띠는 제목이 온전히 쓰고, 진입점은 이미지 위 모서리에 선다. */
.dcard-go{position:absolute;right:14px;top:14px;width:var(--hc);height:var(--hc);border-radius:var(--hr-sm);
background:var(--ink);display:grid;place-items:center;
transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .34s cubic-bezier(.4,0,.2,1)}
/* 제목 (2026-08-06). ⊕ 왼쪽에 같은 높이·같은 모서리의 알약으로 붙는다, 태그 칩과 같은 어휘다.
평소에는 ⊕ 뒤에 숨어 있다가 손이 히어로 위로 오면 왼쪽으로 밀려 나온다. 커버가 주인공이라
가만히 있을 때는 글자를 얹지 않는다 (2026-07-28 제목 오버레이 폐기와 같은 이유).
숨을 때 오른쪽으로 8px 만 물리는 게 아니라 ⊕ 폭만큼 물려 두면, 나오는 동작이 '버튼 뒤에서
빠져나온다' 로 읽힌다. transform 만 쓰고 폭은 건드리지 않는다, 폭을 애니메이션하면
글자가 매 프레임 다시 줄바꿈을 계산한다. */
.dcard-name{position:absolute;right:calc(14px + var(--hc) + 6px);top:14px;
height:var(--hc);display:inline-flex;align-items:center;padding:0 16px;
border-radius:var(--hr-sm);background:var(--ink);color:var(--paper);
font-size:var(--t4);line-height:1.2;white-space:nowrap;
opacity:0;transform:translateX(calc(var(--hc) + 6px));pointer-events:none;
transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.22,.61,.36,1)}
/* 가운데 카드만이다. 접힌 이웃은 ⊕ 도 없고, 누워 있어 글자가 읽히지도 않는다. */
@media(hover:hover) and (pointer:fine){
.deck:hover .dcard.is-on .dcard-name{opacity:1;transform:none}
}
/* 손을 올려두는 동작이 없는 기기에서는 늘 보여준다 (조중현 2026-08-06 "모바일에서는 항상").
좁은 화면을 함께 묶은 건 데스크톱 창을 줄여 볼 때도 같게 보이는 편이 낫기 때문이다. */
@media(hover:none),(max-width:799px){
.dcard.is-on .dcard-name{opacity:1;transform:none}
}
/* 좁은 화면에서는 카드도 좁다. 긴 이름이 커버를 가로지르지 않게 남는 폭 안에서 자른다.
⊕ 자리(--hc)와 좌우 여백 14 씩, 둘 사이 6 을 뺀 만큼이 제목이 쓸 수 있는 폭이다. */
@media(max-width:799px){
/* ⊕ 가 11px 로 올라붙으므로(위 .dcard-go 규칙) 제목도 같은 기준을 쓴다, 안 그러면 3px 어긋난다 */
.dcard-name{display:block;padding:0 12px;font-size:var(--t5);line-height:var(--hc);
top:11px;right:calc(11px + var(--hc) + 6px);
max-width:calc(100% - 28px - var(--hc));overflow:hidden;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){.dcard-name{transition:opacity .3s linear}}
.dcard-go::before,.dcard-go::after{content:"";position:absolute;background:var(--paper)}
.dcard-go::before{width:15px;height:1.5px}
.dcard-go::after{width:1.5px;height:15px}
.dcard.is-on .dcard-open:hover .dcard-go{transform:rotate(90deg)}
/* 이웃 조각은 눌러서 가운데로 '가져오는' 것이다, 프로젝트로 가는 게 아니다.
누르는 자리는 카드가 아니라 무대 좌우에 얹은 투명한 띠다(site.js 가 만든다).
3D 로 누운 면은 마우스 판정을 받지 못하기 때문이다. 폭은 접힌 면이 비치는 폭과 같다.
겹마다 자리를 따로 둔다 (2026-08-12). 안쪽 겹을 누르면 한 칸, 바깥 겹을 누르면
두 칸 간다, 누른 카드가 가운데로 온다는 약속이 겹이 늘어도 그대로여야 한다.
자리와 폭은 site.js 가 px 로 적는다, 겹 수와 띠 폭이 화면 폭마다 달라진다. */
.dhit{position:absolute;top:0;bottom:0;
z-index:40;background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none}
.dcard.is-off{cursor:pointer}
.dcard.is-off .dcard-open{pointer-events:none}
@media(prefers-reduced-motion:reduce){.dcard,.dcard-go,.dcard-media .bshot{transition:none!important}}
/* 설명 줄(덱 아래). 이름은 카드 안에 있으니 여기선 감춘다, 같은 말을 두 번 하지 않는다. */
.bcap{display:block;font-size:var(--t4);font-weight:var(--w-base);line-height:20px}
.bname{display:none}
.bdesc{display:block}
/* 제목 줄(.btitles)·진행 획(.bdots)은 2026-08-04 은퇴, 덱 아래는 태그 줄 하나다.
진행 획이 맡던 위치·지속시간 표시는 태그 줄(활성 칩)과 자동 롤링 자체가 대신한다. */
/* 모바일: 카드를 키우고 이웃 조각은 살짝만 비치게, 좁은 폭에서 조각이 크면 다 흐릿해진다 */
/* 모바일: 비치는 폭이 34px 뿐이라 접힌 면이 거의 안 보인다. 보는 거리를 당겨
좁은 폭 안에서도 원근이 읽히게 한다. */
@media(max-width:799px){.banner{--sw:28px;--sgap:6px;--persp:520px}
.dcard{border-radius:20px}
.dcard-go{right:11px;top:11px}
}
/* ---- 테마 섹션 (헤드라인 + 좁은 본문 + 캐러셀) ---- */
section{padding-top:24px}
/* 아래 여백은 다음 섹션 .page-head 의 pt 48 과 합쳐 --rowgap 이 된다 (§8 요소 기준 간격) */
.theme{padding:var(--rowgap) 0 calc(var(--rowgap) - 48px)}
.theme .disp,.thematic .disp{font-size:var(--disp);font-weight:var(--w-base);line-height:1.05;letter-spacing:-.02em;max-width:min(100%,var(--m-disp));text-wrap:pretty}
.theme .lede,.thematic .lede{max-width:min(100%,var(--m-lead));margin-top:26px;color:var(--muted);font-size:var(--t4);line-height:var(--lh-lead)}
/* ---- 배경 컨테이너 섹션 (Pentagram .block--dark.thematic 실측) ----
풀블리드 아님. 블록 폭 = min(뷰포트, 1728) 중앙 정렬 (2000px→left 136, 2560px→left 416).
안쪽 컨테이너 = 블록 폭 − 좌우 거터(24px, 1536px 이상은 32px).
bg #222, padding 48px 0 64px. 내부 카드 이미지는 #000 + radius 8px (rounded-8). */
.thematic{background:#222;color:#fff;padding:48px 0 64px;margin-top:24px;
width:min(100%,var(--cap));margin-inline:auto;--thpad:24px}
@media(min-width:1536px){.thematic{--thpad:32px}}
@media(max-width:1023px){.thematic{--thpad:var(--edge)}}
.thematic > .wrap{width:100%;max-width:none;padding-inline:var(--thpad)}
.thematic .lede{color:var(--dark-muted)}
.thematic .c-title{color:#fff}
.thematic .c-desc{color:var(--dark-muted)}
.thematic .card .thumb{background:#000;border-radius:0} /* 카드는 직각 (조중현: 라운드 금지) */
/* Pentagram 다크 섹션 실측: 카드는 절대 줄바꿈하지 않는다.
1440→286px, 900→174px 로 비율대로 줄고, 375px 에선 158px 로 고정된 채 가로로 밀린다(peek). */
/* 서비스 카드 캐러셀 (네이버 쇼핑 레퍼런스, 조중현 2026-07-22):
- 카드는 항상 온전히 보인다(잘림·peek 없음). 한 화면에 정수 개(--cols)만.
- 우측 상단 ‹ › 화살표로 넘긴다. '더보기'는 마지막 온전한 카드로 자연스럽게 이어진다.
- "다 보이는 건 필요 없어" = 한 번에 다 안 보이고 화살표로 넘김. */
.rail-carousel{margin-top:56px}
.rail-head{display:flex;justify-content:flex-end;align-items:center;margin-bottom:20px}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:40px;height:40px;border-radius:var(--hr-sm);border:1px solid #3a3a3a; /* 아이콘 버튼은 --hr-sm 정사각 (§4) */
background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
font-size:var(--t3);line-height:1;transition:background .2s,border-color .2s,opacity .2s}
.rail-nav button:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:#5a5a5a}
.rail-nav button:disabled{opacity:.28;cursor:default}
/* 카드는 크게, 마지막 보이는 카드가 절반쯤 걸쳐 "옆에 더 있다"를 알린다(peek).
오른쪽은 왼쪽 거터를 강제 복제하지 않고 블록 가장자리까지 흘러나간다(margin-right 로 bleed).
›를 누르면 옆으로 밀리며 See more 가 온전히 드러난다. See more 는 끝에서 우측 거터를 갖는다(scroll-padding-right). */
.rail.rail-5{--peek:4.5;display:flex;flex-wrap:nowrap;gap:var(--gap);overflow-x:auto;
scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;margin-top:0;
margin-right:calc(-1 * var(--thpad));padding-right:var(--thpad);scroll-padding-right:var(--thpad)}
.rail.rail-5::-webkit-scrollbar{display:none}
.rail.rail-5 > .card{flex:0 0 calc(100% / var(--peek) - var(--gap));scroll-snap-align:start}
@media(max-width:1023px){.rail.rail-5{--peek:2.5}}
@media(max-width:799px){.rail.rail-5{--peek:1.35}}
/* '더보기' 카드, 다른 서비스 카드와 완전히 같은 스타일(같은 검정 썸네일, 테두리 없음).
차이는 썸네일 안 화살표 하나뿐. "마지막 카드만 스타일 다르다"를 없앤다. */
.card-more .more-face{display:flex;align-items:center;justify-content:center}
.card-more .more-arrow{font-size:var(--t1);line-height:1;color:#fff;
transition:transform .3s cubic-bezier(.4,0,.2,1)}
.card-more a:hover .more-arrow{transform:translateX(8px)}
@media(max-width:799px){.card-more .more-arrow{font-size:var(--t2)}}
/* 서비스 5축 (studio), 홈 카드가 각 항목으로 착지.
2026-08-05 (조중현 "같은 디자인으로 통일"): 번호 칼럼 + 항상 펼친 본문을 버리고
상황 목록과 같은 행(.prog/.progline/.progpanel)을 쓴다. 치수를 여기서 다시 적지
않는다, 한 벌을 나눠 써야 두 탭의 행 높이가 저절로 같다. 이 목록은 이라
목록 표식만 지운다. 세로 여백은 .proglist 가 준다. */
.services{list-style:none;margin:0}
#services{scroll-margin-top:88px}
/* ---- 캐러셀 ---- */
/* rail: 3개 고정 서비스 쇼케이스, 태블릿에서도 3열 유지 (2열 강제 시 3번째 카드가 고아가 됨) */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:56px}
.card .thumb{aspect-ratio:3/4;background:var(--ph)}
/* 서비스 카드도 다른 카드와 같은 a>img+figcaption 문법 (Pentagram .thematic 카드 실측) */
.rail .card a{display:block;color:inherit}
.rail .card a:hover .c-title{color:var(--muted)}
.rail .card a:hover .thumb{opacity:.85}
/* ---- 앵커 (조용한 텍스트) ----
위 간격은 --rowgap 하나가 정한다 (§8). 앞선 풀블리드 샷의 mb 12 는 이 마진과 겹치므로(collapse)
빼지 않고 --rowgap 자체를 쓴다. 아래 패딩 0, 푸터 간격은 .footwrap 의 mt --rowgap 이 만든다. */
.anchor{text-align:left;margin-top:var(--rowgap);font-size:var(--t4);color:var(--muted)}
.anchor a{color:var(--muted);display:inline-block;padding:10px 0;text-decoration:underline;text-underline-offset:2px}
.anchor a:hover{color:var(--ink)}
/* ---- Footer (Pentagram 실측: 배경 #000, 키라인 #333, 라벨 좌 / 내용 우 2단 행, 대형 워드마크) ---- */
.footwrap{background:#000;margin-top:var(--rowgap)}
footer{color:var(--dark-muted);width:min(100% - 2*var(--edge),var(--cap));margin-inline:auto;padding:0 0 24px}
/* 행: 좌 라벨 / 우 내용. 콘텐츠 1392px 기준 (1392-12)/2=690, 우측 열은 726px에서 시작 */
.footrow{display:grid;grid-template-columns:1fr 1fr;gap:32px var(--gap);
border-top:1px solid #333;padding-top:24px;padding-bottom:48px}
.footlabel{font-size:var(--t4);font-weight:var(--w-strong);color:#fff;line-height:1.25}
.footbody{font-size:var(--t4);line-height:1.25}
/* Recent News, 정사각 썸네일 + 12px gap, 제목은 썸네일 아래가 아니라 옆이다
(조중현 2026-08-11). 예전에는 세 자식이 자동 배치돼 매체·날짜만 오른쪽으로 가고
제목이 다음 줄로 떨어졌다. 이제 셋 다 오른쪽 칸에 세운다.
썸네일은 언론사 이미지라 우리가 못 다듬는다, 비율만 두고 확 줄였다
(조중현 2026-08-12, 222 → 96). */
.foot-newslist{list-style:none}
.foot-newslist li{padding:24px 0;border-top:1px solid #333}
.foot-newslist li:first-child{border-top:0;padding-top:0}
.foot-newslist a{display:grid;grid-template-columns:96px minmax(0,1fr);
grid-template-rows:auto auto 1fr;gap:6px var(--gap);align-items:start;color:inherit}
.foot-newslist a:hover .foot-title{color:var(--dark-muted)}
.foot-newslist a:hover .foot-thumb{opacity:.85}
.foot-thumb{grid-column:1;grid-row:1/4;width:96px;aspect-ratio:1/1;object-fit:cover;
background:var(--ph-dark);transition:opacity .3s cubic-bezier(.4,0,.2,1)}
.foot-newslist .c-meta{grid-column:2;grid-row:1;margin-top:0}
.foot-title{grid-column:2;grid-row:2;display:block;margin-top:2px;color:#fff;
font-size:var(--t4);line-height:1.35}
/* 본문 조금. 원문의 공유 요약이고, 네 줄에서 끊는다 */
.foot-desc{grid-column:2;grid-row:3;color:var(--dark-muted);font-size:var(--t5);line-height:1.5;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:799px){
.foot-newslist a{grid-template-columns:64px minmax(0,1fr)}
.foot-thumb{width:64px}
.foot-desc{-webkit-line-clamp:2}
}
/* 뉴스 전체 보기는 밑줄 링크 → pill 버튼 (조중현 2026-08-12 "푸터에 뉴스 전체보기는
버튼 디자인해"). 본문 CTA pill(a.pill)과 같은 규격(--hc·0 18px·라운드 4px)이고
색만 어두운 지면 것, footer .pill 과 같은 rgba 흰 채움에 글자는 흰색이다.
마크업 클래스는 더하지 않는다, build.py 푸터 함수의 정규식이