/* ========================================================================== UroLink — 사이트 공통 (리셋, 헤더, GNB, 푸터, 폰트 등 전체 공통) 원본: D:\프로젝트\유로링크\ROOT\css\style.css 를 이식. GNB만 원본의 .main-nav(고정 마크업)에서 .gnb > ul(CMS 사이트메뉴 자동 렌더, layout.html의 nav th:replace)로 selector만 교체 — 시각 결과는 동일하다. ========================================================================== */ *, *::before, *::after{ box-sizing:border-box; } :root{ --ink:#12161F; --mist:#6B7280; --line:#E7E8EC; --paper:#FFFFFF; --paper-soft:#F7F8FA; --blue:#2E8FEF; --blue-deep:#123B7A; --pad:clamp(24px, 6vw, 100px); --nav-h:76px; --ease: cubic-bezier(.65,0,.15,1); } /* ONE Mobile Title — https://noonnu.cc/font_page/678 (free commercial use), 포인트 헤딩 전용 */ @font-face{ font-family:'ONE-Mobile-Title'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff'); font-weight:normal; font-display:swap; } /* Pretendard — CDN(jsDelivr, layout.html )에서 로드 */ html{ scroll-behavior:smooth; scrollbar-gutter:stable; } html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif; -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:break-word; } img{ max-width:100%; display:block; } button{ font-family:inherit; } a{ text-decoration:none; color:inherit; } ul, ol{ list-style:none; margin:0; padding:0; } body.resize-no-transition, body.resize-no-transition *{ transition:none !important; } /* 모바일 메뉴가 열려 있는 동안 뒤쪽 페이지 스크롤 방지 */ body.nav-scroll-lock{ overflow:hidden; } /* 접근성: 본문 바로가기(스킨 공통 스캐폴딩) */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--ink); color:#fff; padding:12px 20px; } .skip-link:focus{ left:12px; top:12px; } .wrap{ max-width:1400px; margin:0 auto; } @media (max-width: 1400px){ .wrap{ padding:0 var(--pad); } } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:18px; } .eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; } @media (max-width: 900px){ .eyebrow::before{ width:16px; } } /* ========================================================================== Header (레이아웃만 공통 — 배경/보더는 main.css의 is-dark/is-light 상태전환과 아래 기본 라이트 테마가 각자 정의함. 콘텐츠 서브페이지는 이 기본값 그대로 사용) ========================================================================== */ .site-header{ position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:200; display:flex; align-items:center; padding:0 clamp(20px, 4vw, 60px); border-bottom:1px solid transparent; transition:background .4s ease, border-color .4s ease; /* 콘텐츠 서브페이지 기본값(원본 content.css) — 홈(main.html)에서만 main.css가 .is-dark/.is-light 로 이 배경을 덮어써 섹션별 투명/불투명을 전환한다. */ background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--line); } @media (max-width: 900px){ .site-header{ padding:0 var(--pad); } } .site-header .brand{ display:flex; align-items:center; margin-right:auto; } .site-header .brand img{ height:24px; width:auto; } /* 로고 컬러/화이트 스왑 기본값 — ⚠ 전 페이지 공통(레이아웃 스킨)이라 여기 있어야 한다. main.css(홈 전용)의 .is-dark 상태 오버라이드만으로는 서브페이지에서 이 기본값이 전혀 적용되지 않아 두 로고가 동시에 노출되는 버그가 생긴다. */ .logo-color{ display:block; } .logo-white{ display:none; } /* GNB — sitemenu.html(공유 프래그먼트)이 렌더하는 nav.gnb > ul > li 구조에 원본 .main-nav 스타일을 그대로 적용 */ .gnb > ul{ display:flex; align-items:center; gap:clamp(20px, 2.8vw, 44px); } .gnb > ul > li{ position:relative; } .gnb > ul > li > a, .gnb > ul > li > span{ font-size:16.5px; font-weight:600; letter-spacing:-0.01em; padding:10px 2px; color:var(--ink); display:flex; align-items:center; gap:5px; cursor:pointer; transition:color .25s ease; position:relative; } .gnb > ul > li.active > a, .gnb > ul > li.active > span{ color:var(--blue-deep); } .gnb > ul > li > a::after, .gnb > ul > li > span::after{ content:""; position:absolute; left:0; right:100%; bottom:2px; height:1.5px; background:currentColor; transition:right .3s var(--ease); } .gnb > ul > li > a:hover::after, .gnb > ul > li.active > a::after, .gnb > ul > li.active > span::after{ right:0; } /* 드롭다운 화살표 — 원본(www.urolink.kr/code)은 인라인 SVG(.chev, viewBox 0 0 24 24, path "M6 9l6 6 6-6", stroke-width 2.4), 공유 sitemenu 마크업엔 아이콘 엘리먼트를 추가할 수 없어 같은 SVG를 CSS mask-image로 ::before에 얹어 동일한 모양·회전(0→180deg)을 재현. ⚠ 반드시 .gnb 로 스코프할 것 — .has-dropdown 클래스는 콘텐츠 서브페이지의 hero-location 칩(content.css)도 재사용하므로, 여기서 스코프 없이 선언하면 그쪽까지 침범한다. ⚠ .has-dropdown 클래스가 아니라 구조 선택자(:has(+ ul))로 건다 — .has-dropdown은 body 끝 스크립트가 뒤늦게 붙이는 클래스라, 그 전 짧은 순간 화살표 아이콘이 없는 채로 렌더됐다가(패딩도 없어 텍스트가 오른쪽 끝까지 붙음) 스크립트 실행 후 갑자기 나타나 "화살표가 사라졌다 나타나는" 깜빡임이 새로고침마다 보였다. */ .gnb > ul > li > span:has(+ ul)::after{ display:none; } .gnb > ul > li.active > span:has(+ ul)::after{ display:block; right:0; } .gnb > ul > li > span:has(+ ul){ padding-right:25px; } .gnb > ul > li > span:has(+ ul)::before{ content:""; position:absolute; right:0; top:50%; width:20px; height:20px; margin-top:-10px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transform:rotate(0deg); transition:transform .25s ease; } .gnb > ul > li:hover > span:has(+ ul)::before, .gnb > ul > li:focus-within > span:has(+ ul)::before{ transform:rotate(180deg); } /* ⚠ 기본 숨김은 .has-dropdown(JS가 body 끝 스크립트에서 뒤늦게 부여)이 아니라 구조 선택자(.gnb > ul > li > ul)로 건다. .has-dropdown로 걸면 그 클래스가 실제로 DOM에 붙기 전(JS 실행 전) 짧은 순간 하위