추가. 이 안에 nav, main, footer가 모두 들어감. 양쪽 바깥은 html 배경색(--c-bg)으로 자동 채워짐. */ #page-wrap { max-width: var(--max-w); margin: 0 auto; position: relative; /* 좌우 경계선 — 옵션: 미묘한 구분선 */ box-shadow: 1px 0 0 var(--c-line), -1px 0 0 var(--c-line); min-height: 100svh; } /* ── CURSOR ── */ #vf-cursor { position:fixed; width:8px; height:8px; background:var(--c-tang); border-radius:50%; pointer-events:none; z-index:9000; transform:translate(-50%,-50%); mix-blend-mode:screen; transition:width .18s var(--ease),height .18s var(--ease),opacity .2s; } #vf-cursor-ring { position:fixed; width:30px; height:30px; border:1px solid rgba(255,90,43,.35); border-radius:50%; pointer-events:none; z-index:8999; transform:translate(-50%,-50%); transition:width .25s var(--ease),height .25s var(--ease),border-color .25s; } body.cursor-hover #vf-cursor { width:14px; height:14px; } body.cursor-hover #vf-cursor-ring { width:44px; height:44px; border-color:rgba(255,90,43,.55); } body.cursor-text #vf-cursor { width:2px; height:22px; border-radius:1px; background:var(--c-text); } @media (hover:none) { #vf-cursor,#vf-cursor-ring { display:none; } } /* ── SCROLL PROGRESS ── */ #vf-progress { position:fixed; top:0; height:2px; background:var(--c-tang); z-index:700; width:0; pointer-events:none; transition:width .06s linear; /* page-wrap 폭에 맞춤 */ left:50%; transform:translateX(-50%); max-width:var(--max-w); } /* ── NAV ── fixed라 page-wrap 바깥에 있지만 left/right를 page-wrap에 맞춰 계산 */ #vf-nav { position:fixed; top:0; z-index:600; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s,height .3s; /* page-wrap과 동일한 폭으로 */ width:100%; max-width:var(--max-w); left:50%; transform:translateX(-50%); } #vf-nav.scrolled { background:rgba(27,21,13,.96); backdrop-filter:blur(18px) saturate(1.4); border-color:var(--c-line); height:56px; } .vf-logo { font-family:var(--f-body); font-size:1rem; font-weight:800; letter-spacing:.12em; text-decoration:none; color:var(--c-text); display:flex; align-items:baseline; gap:.5rem; line-height:1; } .vf-logo .sub { font-family:var(--f-body); font-size:.6rem; font-weight:400; letter-spacing:.15em; color:var(--c-muted); text-transform:uppercase; } .vf-nav-links { display:flex; gap:0; list-style:none; align-items:center; } .vf-nav-links a { font-family:var(--f-body); font-size:.92rem; font-weight:500; text-decoration:none; color:var(--c-muted); padding:.3rem 1.1rem; position:relative; transition:color .2s; display:flex; align-items:center; gap:.35rem; } .nav-idx { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; color:var(--c-tang); opacity:0; transition:opacity .2s; } .vf-nav-links a:hover .nav-idx, .vf-nav-links a[aria-current] .nav-idx { opacity:1; } .vf-nav-links a:hover, .vf-nav-links a[aria-current] { color:var(--c-text); } .vf-nav-links a::after { content:''; position:absolute; bottom:-2px; left:1.1rem; right:1.1rem; height:1px; background:var(--c-tang); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); } .vf-nav-links a:hover::after, .vf-nav-links a[aria-current]::after { transform:scaleX(1); } .vf-nav-cta { font-family:var(--f-body); font-size:.9rem; font-weight:700; text-decoration:none; color:#fff; background:var(--c-tang); padding:.55rem 1.25rem; border-radius:3px; transition:background .2s,transform .15s; white-space:nowrap; } .vf-nav-cta:hover { background:#ff6e44; transform:translateY(-1px); } /* hamburger */ .vf-hbg { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; width:36px; } .vf-hbg span { display:block; width:20px; height:1.5px; background:var(--c-text); transition:transform .28s var(--ease),opacity .2s; transform-origin:center; } .vf-hbg[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } .vf-hbg[aria-expanded="true"] span:nth-child(2) { opacity:0; } .vf-hbg[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } /* mobile overlay — page-wrap 안에서 */ #vf-mob-nav { position:fixed; z-index:590; background:var(--c-bg); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:calc(var(--nav-h) + 2rem) var(--px) 4rem; pointer-events:none; opacity:0; transition:opacity .3s; width:100%; max-width:var(--max-w); top:0; bottom:0; left:50%; transform:translateX(-50%); } #vf-mob-nav.open { opacity:1; pointer-events:all; } #vf-mob-nav a { font-family:var(--f-display); font-size:clamp(2.2rem,8vw,4rem); font-weight:700; line-height:1.15; text-decoration:none; color:var(--c-muted); display:block; padding:.2rem 0; transition:color .2s; } #vf-mob-nav a:hover, #vf-mob-nav a[aria-current] { color:var(--c-tang); } .mob-nav-sub { margin-top:2rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--c-muted); } /* ── FOOTER ── */ #vf-footer { border-top:1px solid var(--c-line); } .foot-top { padding:4rem var(--px) 3rem; display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap; border-bottom:1px solid var(--c-line); } .foot-cta { font-family:var(--f-display); font-size:clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1.1; text-decoration:none; color:var(--c-text); transition:color .2s; } .foot-cta em { color:var(--c-tang); font-style:normal; } .foot-cta:hover { color:var(--c-tang); } .foot-nav { display:flex; gap:2rem; list-style:none; flex-wrap:wrap; padding-top:.5rem; } .foot-nav a { font-size:.95rem; font-weight:500; color:var(--c-muted); text-decoration:none; transition:color .2s; } .foot-nav a:hover { color:var(--c-text); } .foot-bot { padding:1.5rem var(--px); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; } .foot-copy { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--c-muted); } .foot-status { display:flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--c-muted); } .status-dot { width:5px; height:5px; background:var(--c-tang); border-radius:50%; animation:blink 2.5s ease-in-out infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} } /* ── PAGE TRANSITION ── */ main { opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease),transform .4s var(--ease); } main.ready { opacity:1; transform:translateY(0); } /* ── SCROLL REVEAL ── */ .sr { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease); } .sr.in { opacity:1; transform:translateY(0); } .sr.d1{transition-delay:.08s} .sr.d2{transition-delay:.16s} .sr.d3{transition-delay:.24s} .sr.d4{transition-delay:.32s} /* ── EYEBROW / LABEL ── */ .label { font-family:var(--f-mono); font-size:.72rem; /* ↑ .65→.72 */ letter-spacing:.16em; text-transform:uppercase; color:var(--c-muted); display:flex; align-items:center; gap:.65rem; } .label::before { content:''; display:inline-block; width:18px; height:1px; background:var(--c-tang); flex-shrink:0; } .label-tang { color:var(--c-tang); } .label-tang::before { display:none; } /* ── TYPO LAYERING ── */ .t-solid { color:var(--c-text); } .t-out { -webkit-text-stroke:1.5px rgba(240,234,224,.35); color:transparent; } .t-tang { color:var(--c-tang); } .t-muted { color:var(--c-muted); } .t-ital { } /* ── DISPLAY HEADINGS ── */ .d-xl { font-family:var(--f-display); font-weight:800; font-size:clamp(4rem,9vw,9rem); line-height:.88; letter-spacing:-.03em; } .d-lg { font-family:var(--f-display); font-weight:800; font-size:clamp(2.8rem,6vw,6rem); line-height:.9; letter-spacing:-.03em; } .d-md { font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,4vw,4rem); line-height:.95; letter-spacing:-.03em; } .d-sm { font-family:var(--f-display); font-weight:700; font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.1; letter-spacing:-.02em; } /* ── BUTTONS ── */ .btn-primary { display:inline-flex; align-items:center; gap:.7rem; font-family:var(--f-body); font-size:1rem; font-weight:700; text-decoration:none; padding:.9rem 1.85rem; background:var(--c-tang); color:#fff; border:none; border-radius:3px; transition:background .2s,transform .15s; white-space:nowrap; } .btn-primary:hover { background:#ff6e44; transform:translateY(-1px); } .btn-primary svg { fill:currentColor; flex-shrink:0; transition:transform .22s; } .btn-primary:hover svg { transform:translateX(3px); } .btn-ghost { display:inline-flex; align-items:center; gap:.7rem; font-family:var(--f-body); font-size:1rem; font-weight:500; text-decoration:none; padding:.9rem 1.85rem; background:transparent; color:var(--c-muted); border:1px solid var(--c-line-md); border-radius:3px; transition:color .2s,border-color .2s; white-space:nowrap; } .btn-ghost:hover { color:var(--c-text); border-color:var(--c-text); } /* ── GRAIN ── */ .grain { position:fixed; inset:0; pointer-events:none; z-index:800; opacity:.028; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px; } /* ── MARQUEE ── */ .marquee-wrap { overflow:hidden; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:.75rem 0; } .marquee-track { display:flex; gap:2.5rem; width:max-content; white-space:nowrap; animation:marquee 30s linear infinite; } .marquee-track span { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; color:var(--c-muted); text-transform:uppercase; } .marquee-track .mx { color:var(--c-tang); font-size:.5rem; } @keyframes marquee { to { transform:translateX(-50%); } } /* ── LIGHTBOX ── */ .lightbox { position:fixed; inset:0; z-index:2000; background:rgba(10,8,5,.97); display:none; flex-direction:column; align-items:center; justify-content:center; } .lightbox.open { display:flex; } .lb-inner { width:100%; max-width:960px; padding:0 2rem; } .lb-bar { display:flex; justify-content:space-between; align-items:center; padding-bottom:.75rem; border-bottom:1px solid var(--c-line); margin-bottom:1rem; } .lb-title { font-family:var(--f-display); font-size:1rem; font-weight:600; color:var(--c-text); } .lb-close { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; background:none; border:1px solid var(--c-line-md); color:var(--c-muted); padding:.3rem .75rem; transition:color .2s,border-color .2s; } .lb-close:hover { color:var(--c-text); border-color:var(--c-text); } .lb-frame { position:relative; aspect-ratio:16/9; background:#000; } .lb-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:none; } /* ── WORK CARD ── */ .wk-card { position:relative; overflow:hidden; border-radius:4px; background:var(--c-surface); display:block; text-decoration:none; color:var(--c-text); } .wk-card:hover .wk-thumb { transform:scale(1.04); } .wk-thumb { width:100%; display:block; object-fit:cover; transition:transform .7s var(--ease); } .wk-card:not(.vert):not(.wide) .wk-thumb { aspect-ratio:16/10; } .wk-card.vert .wk-thumb { aspect-ratio:9/16; } .wk-card.wide .wk-thumb { aspect-ratio:16/7; } .wk-card.horiz .wk-thumb { aspect-ratio:16/10; } .wk-scrim { position:absolute; inset:0; background:linear-gradient(to top,rgba(15,11,7,.88) 0%,rgba(15,11,7,.12) 50%,transparent 100%); } .wk-overlay { position:absolute; inset:0; background:rgba(255,90,43,.18); opacity:0; transition:opacity .35s; } .wk-card:hover .wk-overlay { opacity:1; } .wk-info { position:absolute; bottom:0; left:0; right:0; padding:1.25rem 1.4rem; } .wk-cat { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; /* ↑ */ color:var(--c-tang); text-transform:uppercase; display:block; margin-bottom:.3rem; } .wk-title { font-family:var(--f-body); font-size:1rem; font-weight:600; line-height:1.3; /* ↑ */ display:block; } .wk-views { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--c-gold); } /* ↑ */ .wk-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); background:rgba(255,90,43,.15); display:flex; align-items:center; justify-content:center; opacity:0; transition:all .3s; } .wk-play svg { fill:#fff; margin-left:3px; } .wk-card:hover .wk-play { opacity:1; transform:translate(-50%,-50%) scale(1.06); } .ig-btn { position:absolute; top:.75rem; right:.75rem; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em; /* ↑ */ color:var(--c-text); background:rgba(27,21,13,.72); border:1px solid rgba(255,255,255,.15); padding:.28rem .7rem; text-decoration:none; transition:background .2s,color .2s; z-index:3; } .ig-btn:hover { background:var(--c-tang); color:#fff; border-color:var(--c-tang); } /* ── CLIENT LOGO STRIP ── */ .client-strip { border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:3rem 0; overflow:hidden; } .client-label { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; /* ↑ */ color:var(--c-muted); text-transform:uppercase; padding:0 var(--px); margin-bottom:2rem; } .logo-track { display:flex; gap:0; width:max-content; animation:marquee 28s linear infinite; } .logo-chip { display:flex; align-items:center; justify-content:center; padding:0 3rem; border-right:1px solid var(--c-line); /* ↑ 간격 */ height:72px; flex-shrink:0; /* ↑ 42→72px */ } .logo-chip img { height:42px; width:auto; max-width:120px; object-fit:contain; /* ↑ 28→42px */ filter:brightness(0) invert(.5); transition:filter .3s; } .logo-chip:hover img { filter:brightness(0) invert(.85); } /* ── PH BLOCK ── */ .ph-block { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; background:var(--c-surface); position:relative; overflow:hidden; } .ph-block::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-50deg,transparent 0,transparent 18px,rgba(255,255,255,.012) 18px,rgba(255,255,255,.012) 19px); } .ph-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.6rem; } .ph-icon-ring { width:42px; height:42px; border-radius:50%; border:1px solid var(--c-line-md); display:flex; align-items:center; justify-content:center; transition:border-color .3s; } .ph-icon-ring svg { fill:none; stroke:var(--c-muted); stroke-width:1.5; transition:stroke .3s; } .ph-label { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; color:var(--c-muted); text-transform:uppercase; } /* ↑ */ /* ── LINK ARROW ── */ .link-arrow { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; /* ↑ */ color:var(--c-muted); text-decoration:none; text-transform:uppercase; border-bottom:1px solid var(--c-line-md); padding-bottom:2px; transition:color .2s,border-color .2s; } .link-arrow:hover { color:var(--c-tang); border-color:var(--c-tang); } .link-arrow svg { fill:currentColor; transition:transform .2s; } .link-arrow:hover svg { transform:translateX(3px); } /* ── SEC-INNER (섹션 내부 여백용) ── */ .sec-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); width: 100%; } .vf-wrap { max-width:var(--max-w); margin:0 auto; padding:0 var(--px); } /* ── RESPONSIVE ── */ @media (max-width:1200px) { :root { --max-w:100%; } /* 창이 max-w보다 작으면 전체 폭 사용 */ } @media (max-width:900px) { :root { --px:1.75rem; } .vf-nav-links, .vf-nav-cta { display:none; } .vf-hbg { display:flex; } .foot-top { flex-direction:column; gap:1.5rem; } .foot-nav { gap:1.25rem; } } @media (max-width:600px) { :root { --px:1.25rem; } .logo-chip { padding:0 2rem; height:60px; } .logo-chip img { height:32px; } }