/* ============================================================ web3darchitrip — style.css (BOM 없는 UTF-8) 디자인 시스템 단일 출처. 스펙: ../../DESIGN.md (A "출판과 문턱") 값을 바꾸려면 :root 한 곳. build.ps1 이 산출물로 그대로 복사. ============================================================ */ :root{ /* ── 1. 색 — 출판(paper) 레지스터 ── */ --paper:#f3f1ea; /* 종이 배경 (ersatz 공유) */ --ink:#1b1a16; /* 본문·제목·구조선 */ --ink-soft:#6e6b62; /* 메타·캡션 — paper 대비 실측 4.7:1 (AA) */ --hair:rgba(27,26,22,0.16);/* 하이라인·도판 테두리 */ --accent:#e0402a; /* 버밀리온 — 일시적인 것에만 */ /* ── 색 — 도판/뷰어(dark) 레지스터 ── */ --plate:#0a0b08; /* 도판·뷰어 배경 */ --plate-ink:#f1ede2; /* 도판 위 텍스트 */ --plate-frame:rgba(27,26,22,0.40); --plate-vignette:inset 0 0 120px rgba(0,0,0,0.45); /* ── 2. 타이포 ── */ --serif:'Spectral',Georgia,'Noto Serif KR','Noto Serif JP',serif; /* 콘텐츠 목소리 */ --mono:'Space Mono',ui-monospace,'Noto Sans KR','Noto Sans JP',monospace; /* 시스템 목소리 (ersatz 공유) */ /* 타입 사다리(ratio≈1.25): serif 13.5·16.5·21(+clamp 3단) / mono = 시스템 크롬 단일 크기(10.5)+워드마크(15) */ --fs-meta:10.5px; /* mono 시스템 크롬 단일 크기 — 내비·라벨·메타·캡션·dl·콜로폰 (위계는 크기가 아니라 색·자간·배치로) */ --fs-wm:15px; /* mono 워드마크 전용 (모바일 14 재정의가 유일한 예외) */ --fs-deck:13.5px; /* serif index 카드 덱 */ --fs-body:16.5px; /* serif 본문 */ --fs-name:21px; /* serif index 작품명 */ --fs-lede:clamp(28px,3vw,36px); --fs-title:clamp(40px,5vw,54px); --fs-display:clamp(48px,7vw,88px); --track-data:0.06em; /* mono 긴 데이터 행(카드 메타·dl·refs·by) — 길어서 좁게 */ --track-label:0.16em; /* mono 대문자 라벨·캡션·내비 */ --track-wm:0.24em; /* 워드마크 */ --track-tight:-0.015em; /* 세리프 디스플레이 광학 */ /* ── 3. 공간·선 ── */ /* 여백 사다리(단일 척도): 6 < 10 < 14 < 22(--flow) < 32(--block) < 48(--lead) — 미세 3단은 리터럴, 상위 3단은 토큰. 사다리 밖 값 금지 */ --gutter:56px; /* 좌우 거터 (반응형은 이 값만 재정의) */ --gutter-in:44px; /* 상세 split 내측 거터 — 책 스프레드 관례(안쪽 마진 < 바깥 마진)상 외측보다 좁게 */ --flow:22px; --block:32px; --lead:48px; --rule:1px solid var(--ink); /* 구조선 */ --rule-hair:1px solid var(--hair); /* 하이라인 */ /* ── 4. 모션 ── */ --dur-fast:0.15s; --dur-base:0.18s; --dur-slow:0.4s; --ease:cubic-bezier(.2,.6,.2,1); } /* ── reset ── */ *{margin:0;padding:0;box-sizing:border-box} html,body{background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} /* clip(≠hidden): 스크롤 컨테이너를 만들지 않아 position:sticky와 양립 */ body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} /* 콘텐츠가 짧은 페이지(About)에서도 콜로폰이 화면 바닥에 붙도록 — 푸터는 margin-top:auto */ a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ::selection{background:var(--accent);color:var(--paper)} /* ── 마스트헤드 ── */ .mast{display:flex;justify-content:space-between;align-items:baseline;padding:var(--block) var(--gutter) var(--flow)} .wm{font-family:var(--mono);font-size:var(--fs-wm);letter-spacing:var(--track-wm);text-transform:uppercase} .wm .a{color:var(--accent)} /* "WEB3D" */ .nav{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} .nav a:hover{color:var(--accent)} .nav b{color:var(--ink);font-weight:400} /* 활성/현재 언어 */ .rule{height:1px;background:var(--ink);margin:0 var(--gutter)} /* ── 홈: 리드 ── */ .intro{padding:var(--lead) var(--gutter) 14px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--lead)} .intro h1{font-weight:300;font-size:var(--fs-lede);line-height:1.2;letter-spacing:-.01em} /* 가독성 max-width 금지 (DESIGN §2) */ .intro h1 em{font-style:italic;color:var(--accent)} .intro .kick{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);text-align:right;line-height:2} /* ── 홈: 작품 index (folio) ── */ .collection{padding:var(--lead) var(--gutter) var(--block);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)} .work{display:flex;flex-direction:column} .work .no{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);color:var(--ink-soft)} .work .render{margin-top:6px;border-bottom:var(--rule-hair);padding-bottom:14px} .work .render img{display:block;width:84%;height:auto;margin:0 auto;mix-blend-mode:multiply;transition:transform var(--dur-slow) var(--ease)} /* height:auto 필수 — img의 width/height 속성(CLS 가드)만 있으면 높이가 720px 고정으로 왜곡 */ .work:hover .render img{transform:scale(1.03)} /* 점진적 향상 */ .work .name{font-size:var(--fs-name);font-weight:400;line-height:1.1;margin-top:14px} /* h2 — 위계·SEO */ .work .deck{font-size:var(--fs-deck);line-height:1.5;color:var(--ink-soft);margin-top:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} /* short 덱 — 제목 부연, 2줄 클램프로 행 정렬 유지 */ .work .meta{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-data);text-transform:uppercase;color:var(--ink-soft);margin-top:6px;line-height:1.7} .work .visit{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);margin-top:10px} /* ── 홈: 인덱스 바 — 좌 필터 토글 · 우 정렬 (점진적 향상 JS, 무JS=시간순 전체 정적 노출) ── */ .indexbar{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:var(--flow) var(--gutter) 0;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} .sortbar{display:flex;align-items:baseline;gap:14px} .indexbar button,.filterbar button{background:none;border:0;padding:8px 2px;margin:-8px -2px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink-soft);cursor:pointer;transition:color var(--dur-fast) var(--ease)} .indexbar button:hover,.filterbar button:hover{color:var(--accent)} .indexbar button.on,.filterbar button.on{color:var(--ink)} .fl-toggle .cnt{color:var(--accent)} /* 필터 적용 중 결과 수 — 일시적 상태라 강조색 허용 */ /* ── 홈: 필터 바 (건축가·연대·대륙 — OLD 4그룹 필터의 재해석, 그룹 내 OR·그룹 간 AND) ── */ .filterbar{display:none;margin:14px var(--gutter) 0;border-top:var(--rule-hair)} .filterbar.open{display:grid;grid-template-columns:max-content 1fr;column-gap:var(--flow)} .filterbar .flabel{padding:10px 0;border-bottom:var(--rule-hair);font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} .filterbar .fchips{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:10px 0;border-bottom:var(--rule-hair);font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-data);text-transform:uppercase;color:var(--ink-soft)} .work[hidden]{display:none} /* 필터로 숨김(점진적 향상) */ .fempty{padding:0 var(--gutter) var(--lead);font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} .fempty[hidden]{display:none} /* ── 상세: split (도판 stage | catalogue entry) ── */ .crumb{padding:14px var(--gutter) 0;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} .crumb b{color:var(--ink);font-weight:400} .detail{display:grid;grid-template-columns:1fr;padding:14px 0 0} /* 모바일-퍼스트: 기본 적층(도판 위·entry 아래). split은 ≥1100에서만 */ .stage{padding:var(--flow) var(--gutter) var(--block);border-bottom:var(--rule-hair)} /* ── The Plate — tipped-in 어두운 도판 = 실시간 web3d iframe 라이브 임베드 (DESIGN §4) ── */ .plate{position:relative;width:100%;aspect-ratio:3/2;max-height:75vh;border:1px solid var(--plate-frame);background:var(--plate); box-shadow:0 1px 0 rgba(27,26,22,.22),var(--plate-vignette);overflow:hidden} /* 전폭 규율: width:100% 명시(auto면 max-height가 비례를 타고 폭을 줄여 캡션·분할선 여백이 어긋남). 비례 3:2 기준, 75vh 가드에서는 비례가 양보(초와이드=더 넓은 도판) */ .plate-frame{display:block;width:100%;height:100%;border:0;background:var(--plate)} .platecap{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;margin-top:14px;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} .platecap b{color:var(--ink);font-weight:400} /* Pl.NN 도판 번호 — 강조색 금지(일시적인 것이 아님) */ /* ── 상세: catalogue entry ── */ .entry{padding:var(--flow) var(--gutter) var(--lead)} .entry .no{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} /* 정적 사실 — 강조색 규율(일시성)상 잉크로 */ .entry h1{font-weight:300;font-size:var(--fs-title);line-height:.98;letter-spacing:var(--track-tight);margin-top:10px} .entry .by{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-data);text-transform:uppercase;color:var(--ink-soft);margin-top:14px} .entry .body{font-size:var(--fs-body);line-height:1.66;margin-top:var(--flow);text-wrap:pretty} /* 가독성 max-width 금지 (DESIGN §2) */ .entry .body em{font-style:italic} .entry .body p+p{margin-top:var(--flow)} .dl{margin-top:var(--flow);border-top:var(--rule)} .dl div{display:flex;justify-content:space-between;gap:var(--flow);padding:10px 0;border-bottom:var(--rule-hair);font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-data);text-transform:uppercase} .dl dt{color:var(--ink-soft)} .dl dd{color:var(--ink);text-align:right} .refs{margin-top:var(--flow);font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-data);text-transform:uppercase;color:var(--ink-soft);line-height:2} .refs a{color:var(--ink);border-bottom:var(--rule-hair)} .refs .ar{color:var(--accent)} /* ── About (판권면) — 단일 URL 3언어 인라인, ≥1100 split(본문 | 슬로건 에피그래프) ── */ .about{display:grid;grid-template-columns:1fr;padding:14px 0 0} .a-entry{padding:var(--flow) var(--gutter) var(--lead)} .a-entry .no{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} .a-entry h1{font-weight:300;font-size:var(--fs-lede);line-height:1.2;margin-top:10px} .a-entry .body{font-size:var(--fs-body);line-height:1.66;margin-top:var(--flow);text-wrap:pretty} .a-entry .body p+p{margin-top:var(--flow)} .a-entry .body a{border-bottom:var(--rule-hair)} .a-entry .body a:hover{color:var(--accent)} .a-side{padding:var(--flow) var(--gutter) var(--lead);border-top:var(--rule-hair)} .a-side .slogan{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);line-height:2} /* ── 콜로폰 / pager ── */ .colophon,.pager{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;padding:var(--flow) var(--gutter) var(--block);border-top:var(--rule); font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)} .colophon,.pager{margin-top:auto} /* sticky footer: 짧은 페이지=바닥 고정, 긴 페이지=자연 위치 */ .pager b{color:var(--ink);font-weight:400} /* ── 반응형 (유니버설 — 거터·열수만 재정의) ── */ @media (min-width:1100px){ /* 가로형(태블릿 가로 1112·iPad 11" 가로 1194 포함) — 상세 split + sticky 도판. 1100: 데스크탑 세로(1080)는 적층 유지, 태블릿 가로부터 split */ .detail{grid-template-columns:1.55fr 1fr} .stage{border-bottom:none;border-right:var(--rule-hair);padding:var(--flow) var(--gutter-in) var(--block) var(--gutter); position:sticky;top:14px;align-self:start} /* 도판 고정 → 긴 entry 스크롤 시 데드스페이스 없음 (html/body는 overflow-x:clip — hidden이면 sticky 죽음) */ .entry{padding:var(--flow) var(--gutter) var(--lead) var(--gutter-in)} .about{grid-template-columns:1.55fr 1fr} /* About도 detail split 비례 공유 */ .a-entry{border-right:var(--rule-hair);padding:var(--flow) var(--gutter-in) var(--lead) var(--gutter)} .a-side{border-top:none;padding:var(--flow) var(--gutter) var(--lead) var(--gutter-in)} } @media (min-width:601px) and (max-width:1099px){ /* 적층 구간(넓음) — dl 데이터 쌍의 근접성 회복 */ .dl{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter)} } @media (min-width:1600px){ .collection{grid-template-columns:repeat(4,1fr)} /* 대형 데스크탑 — folio 밀도 */ } @media (max-width:980px){ /* 태블릿(세로 포함) */ :root{--gutter:28px} .collection{grid-template-columns:repeat(2,1fr);gap:var(--lead) var(--block)} } @media (max-width:600px){ /* 모바일(세로) */ :root{--gutter:16px} .mast{flex-direction:column;align-items:flex-start;gap:6px;padding:var(--flow) var(--gutter) 14px} /* 마스트헤드 2단 적층 */ .wm{font-size:14px} /* 워드마크 모바일 — 유일한 반응형 타입 재정의 */ .intro{grid-template-columns:1fr;padding-top:var(--block)} .intro .kick{text-align:left;margin-top:6px} .collection{grid-template-columns:1fr;gap:var(--lead)} .filterbar.open{grid-template-columns:1fr} /* 필터 그룹: 라벨 위·칩 아래 적층 */ .filterbar .flabel{border-bottom:none;padding-bottom:0} .filterbar .fchips{padding-top:6px} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} .work:hover .render img{transform:none} } /* ── i18n — 3개 언어 칩이 마크업에 모두 있고 html[data-lang]로 표시 전환 ── */ /* JS 꺼지면 data-lang 기본값(en — 2026-06-11 전환)만 보임 = 콘텐츠 항상 노출. 상세는 언어별 파일이라 칩 미사용. */ .lng{display:none} html[data-lang="ko"] .lng-ko, html[data-lang="en"] .lng-en, html[data-lang="ja"] .lng-ja{display:revert} /* CJK 줄바꿈·가독 — keep-all은 띄어쓰기 있는 한국어 전용. 일본어는 normal + 금칙처리(strict) */ html[lang="ko"]{word-break:keep-all} html[lang="ja"]{word-break:normal;line-break:strict} /* ja 활자 스택 — JP 폰트를 KR보다 앞에(공유 한자의 일본 자형 보장; ko/en은 :root 스택의 KR 우선) */ html[lang="ja"]{--serif:'Spectral',Georgia,'Noto Serif JP','Noto Serif KR',serif;--mono:'Space Mono',ui-monospace,'Noto Sans JP','Noto Sans KR',monospace} /* 언어 스위처 (마스트헤드) — index는