:root{--nav-h:90px;--nav-ink:#35505c;--navy:#123548;--blue:#0649c8;--paper:#fffdf7;--muted:#526d77;--line:#ced5d4;--sweep-teal:#1E93A6;--sweep-violet:#5B4FA6} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:85px} body{margin:0;color:var(--navy);background:var(--paper);font-family:'Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;-moz-user-select:none;user-select:none} input,textarea,select,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text} img{-webkit-user-drag:none;user-drag:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer} button,a,summary{-webkit-tap-highlight-color:transparent} button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ed91a9;outline-offset:6px} img{display:block;max-width:100%} h1,h2,h3,p{margin:0} h2{font-weight:700;font-size:clamp(32px,4.6vw,66px);line-height:1.3;letter-spacing:-.055em;word-break:keep-all} p{font-size:17px;line-height:1.9;word-break:keep-all} h3{font-size:24px;letter-spacing:-.04em} .eyebrow{font:12px/1.5 'Space Mono',monospace;letter-spacing:.12em;display:block} .section{padding:110px max(6vw,24px)} .skip{position:fixed;top:-70px;z-index:100;background:#fff;padding:15px} .skip:focus{top:0} /* ── site nav (실제 사이트 골격, IP 라이트 테마로 재배색) ── */ /* 배경/구분선은 화면 끝까지 채우되, 안쪽 콘텐츠는 다른 5개 페이지(max-width:1180px 중앙정렬)와 동일한 위치에 오도록 padding으로 맞춘다 — PC 와이드 화면에서 로고가 화면 끝에 붙지 않게. */ nav{display:flex;align-items:flex-start;justify-content:space-between;padding:26px max(32px, calc((100% - 1180px) / 2 + 32px));position:relative;z-index:20;background:var(--paper);border-bottom:1px solid #12354816} .logo-block{display:grid;grid-template-columns:auto 1fr;row-gap:1px} .logo{display:contents;text-decoration:none} .logo-c,.logo-name{font-family:'Black Han Sans',sans-serif;font-size:20px;letter-spacing:1px;color:var(--navy);line-height:1;align-self:center} .logo-name{grid-column:2} .logo-tag{grid-column:2;justify-self:center;text-align:center;font-family:'Space Mono','Noto Sans KR',monospace;font-size:10.5px;letter-spacing:.5px;color:var(--muted);text-transform:uppercase} .nav-right{display:flex;align-items:center;gap:16px;padding-top:2px} .lang{display:flex;align-items:center;gap:5px} .lang button{border:none;background:none;padding:11px 4px;margin:-11px -4px;cursor:pointer;color:var(--muted);font-family:'Space Mono','Noto Sans KR',monospace;font-size:12px;font-weight:700;letter-spacing:.5px} .lang button:hover{color:var(--navy)} .lang button.on{color:var(--navy)} .lang .lang-sep{color:#12354840;font-family:'Space Mono','Noto Sans KR',monospace;font-size:12px} .nav-menu{display:flex;gap:24px;list-style:none;margin:0 8px 0 0;padding:0;align-items:center;font-family:'Space Mono','Noto Sans KR',monospace;font-size:12px} /* 메뉴 글자는 해변 그림 위에 얹히므로 본문 보조색(--muted)보다 한 단계 진한 --nav-ink */ .nav-menu a{font-family:'Space Mono','Noto Sans KR',monospace;font-size:12px;letter-spacing:.5px;color:var(--nav-ink);text-decoration:none} .nav-menu a:hover,.nav-menu a.on{color:var(--navy)} /* 메뉴 글자에 자개빛이 한 번 스치는 호버 효과 — 다른 5개 페이지와 같은 구조(site.css 참고)지만, 밝은 배경에 맞춰 옅은 파스텔 대신 중간 명도의 청록·남보라를 쓴다(기존 헤더용 밝은 색 재사용 금지). */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){ .nav-menu a:not([aria-current="page"]) .nav-sweep{ background-image:linear-gradient(90deg, #0867ba 0%, #0867ba 33%, var(--sweep-violet) 40%, #0867ba 47%, var(--sweep-teal) 54%, var(--nav-ink) 67%, var(--nav-ink) 100%); background-size:300% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; color:var(--nav-ink); -webkit-text-fill-color:transparent; transition:background-position .3s ease, color .3s ease; } .nav-menu a:not([aria-current="page"]):hover .nav-sweep{ background-position:0% 0; color:#0867ba; } } .nav-backdrop{position:fixed;inset:0;z-index:49;background:rgba(20,20,10,.25);opacity:0;pointer-events:none;transition:opacity .3s ease} .nav-backdrop.open{opacity:1;pointer-events:auto} .nav-overlay{ position:fixed;top:0;right:0;bottom:0;z-index:50; width:min(420px,46vw);background:#fffdf7f7; display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start; padding:96px 40px 40px;overflow-y:auto; transform:translateX(100%); /* 닫힌 패널 그림자가 밝은 배경에서 오른쪽 회색 띠로 보이던 문제 — 닫히면 숨기고 그림자도 연 뒤에만 */ visibility:hidden;box-shadow:none; transition:transform .38s cubic-bezier(.32,.72,0,1),box-shadow .38s ease,visibility 0s linear .38s; } .nav-overlay.open{transform:translateX(0);visibility:visible;box-shadow:-24px 0 60px rgba(0,0,0,.18);transition:transform .38s cubic-bezier(.32,.72,0,1),box-shadow .38s ease,visibility 0s} .overlay-close{position:absolute;top:22px;right:24px;font-size:20px} /* 헤더용 nav{padding/height} 규칙이 이 안의