@charset "utf-8";
/*
섹션 헤더/푸터 공통 CSS — 이슈 #51 (섹션별 헤더 메뉴 이미지 제거 + 통일 + 반응형)
섹션 CSS(towninfo.css / radio.css / community.css …)를 로드한 뒤 이어서 로드해서
캐스케이드로 오버라이드한다. 래퍼(header.php / *_gnu_header.php)의 순서 주의.
하는 일
1. 스프라이트 이미지 메뉴를 텍스트로 (폭과 무관하게 항상)
2. .logo 스프라이트가 [사이트로고 + 섹션명] 합본이라 둘로 분리
사이트로고는 단색 SVG mask(색은 CSS), 섹션명은 숨김텍스트(.ht) 복원
3. 1300px 이하에서 섹션 메뉴를 햄버거 드롭다운으로 접음
4. 900px 이하에서 상단 GNV를 햄버거로 접음
텍스트는 전부 top_menu.php의 …에 이미 들어 있다.
그래서 top_menu.php는 수정하지 않는다(rakotel 검색폼 분리만 예외).
컨테이너 id가 섹션마다 두 가지다 - 하이픈 #header-box(community/towninfo/radio/tv/
obituaries/rakotel)와 언더스코어 #header_box(market/homeshopping/travel/uslife/
uslife2). 그래서 모든 규칙에 두 셀렉터를 함께 적는다. news만 또 다른 구조라 아래 5절 참고.
※ common_responsive.css와 헤더 규칙이 일부 중복된다. 그 파일은 본문(#contents/#footer/
#con1250)까지 함께 다루는 반응형 파일럿(community/ads.php, 카드뉴스) 전용이라 그대로 뒀다.
본문 반응형이 끝나면 두 파일을 통합할 것.
*/
/*
섹션별 전경색. 기본은 흰색이고, 배경이 밝은 섹션은 해당 섹션 CSS에서
`#header { --rk-header-fg: #333; }` 한 줄로 덮는다.
#header(특이도 100)가 :root(10)보다 높아 CSS 로드 순서와 무관하게 섹션 쪽이 이긴다.
현재 덮고 있는 곳 - obituaries(#f2f2f2), rakotel(#fed436), news의 #logo-line(흰 배경)
*/
:root {
--rk-header-fg: #fff;
--rk-header-line: rgba(255, 255, 255, .35);
--rk-header-hover: rgba(0, 0, 0, .12);
}
/* ==================================================================
1. 컨테이너 유동화
================================================================== */
#gnv_box {
width: 100%;
min-width: 0;
max-width: 1250px;
padding: 0 15px;
box-sizing: border-box;
}
#header {
height: auto;
}
/*
height 대신 min-height + overflow:hidden(BFC).
고정 height면 메뉴가 폭을 넘겨 둘째 줄로 밀렸을 때 바 밖(흰 배경)으로 나가
흰 글자가 안 보이는 채로 조용히 사라진다. 이렇게 두면 바가 늘어나 눈에 띈다.
*/
#header-box,
#header_box {
width: 100%;
min-width: 0;
max-width: 1250px;
min-height: 70px;
height: auto;
overflow: hidden;
margin: 0 auto;
box-sizing: border-box;
}
/* ==================================================================
2. 로고 분리 - 사이트로고(mask) + 섹션명(텍스트)
================================================================== */
#header-box h1,
#header_box h1 {
float: left;
width: auto;
height: 70px;
}
#header-box h1 a,
#header_box h1 a {
display: flex;
align-items: center;
gap: 12px;
height: 70px;
text-decoration: none;
}
#header-box h1 a:hover,
#header_box h1 a:hover {
text-decoration: none;
}
/*
사이트 로고. 단색 SVG를 mask로 깔고 색은 background-color로 준다.
viewBox 0 0 731.03 151.7 (비율 4.82:1) 이므로 높이 31px = 폭 149px.
*/
#header-box h1 a::before,
#header_box h1 a::before {
content: "";
display: block;
flex: none;
width: 149px;
height: 31px;
background-color: var(--rk-header-fg);
-webkit-mask: url('https://rk-asset.s3.amazonaws.com/www/images/logo/rk_logo_white.svg') no-repeat center / contain;
mask: url('https://rk-asset.s3.amazonaws.com/www/images/logo/rk_logo_white.svg') no-repeat center / contain;
}
/* 섹션명. .ht(접근성 숨김)를 되살리고 스프라이트를 끈다. */
#header-box .logo,
#header_box .logo {
position: static;
width: auto !important;
height: auto !important;
overflow: visible;
line-height: normal;
text-indent: 0;
background: none !important;
font-family: 'Noto Sans KR', AppleSDGothicNeo-Regular, 'Malgun Gothic', sans-serif;
font-size: 31px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--rk-header-fg);
white-space: nowrap;
}
/* ==================================================================
3. 메뉴 텍스트화 (폭과 무관하게 항상)
================================================================== */
#header-box .menu,
#header_box .menu {
float: left;
width: auto;
height: 70px;
margin-left: 16px;
background: none;
}
#header-box .menu ul,
#header_box .menu ul {
height: 70px;
background: none;
}
#header-box .menu ul li,
#header_box .menu ul li {
float: left;
width: auto;
height: 70px;
}
/*
섹션 CSS는 `#header-box .menu ul li a.market`처럼 클래스로 한 번 더 좁혀서
특이도가 이 규칙보다 높다(123 vs 113). 스프라이트와 고정폭을 확실히 끄기 위해
충돌하는 세 속성만 !important로 덮는다. common_responsive.css의 선례와 같다.
:has(.ht)로 좁힌 이유 - uslife/uslife2는 메뉴가 원래부터 텍스트라
(이민법, .ht 스팬 없음) 자체 padding/line-height를 이미 갖고 있다.
여기서 box 값을 덮으면 오히려 정렬이 깨진다. 숨김텍스트 라벨을 가진 링크,
즉 스프라이트 메뉴에만 적용한다.
*/
/* 글자 스타일은 모든 섹션에 동일하게 (uslife/uslife2처럼 원래 텍스트인 메뉴 포함) */
#header-box .menu ul li a,
#header_box .menu ul li a {
font-family: 'Noto Sans KR', AppleSDGothicNeo-Regular, 'Malgun Gothic', sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--rk-header-fg);
}
/*
uslife/uslife2의 .ios-menu(맥에서만 붙는 클래스)는 상하 패딩이 28.8/22.4로 비대칭이라
글자가 li 중앙보다 3.3px 아래에 놓인다. 그러면 li 중앙에 그리는 구분선만 위로 뜬 것처럼 보인다.
상하를 맞춰 글자를 세로 중앙에 두면 구분선과 정렬되고, 윈도우 렌더(1.6rem 대칭)와도 같아진다.
(70 - 글자 19) / 2 = 25.5px
*/
#header-box .menu ul li a.ios-menu,
#header_box .menu ul li a.ios-menu {
padding-top: 25.5px !important;
padding-bottom: 25.5px !important;
/* 좌우도 다른 섹션과 같은 비율로 25% 확대 (11.2px -> 14px) */
padding-left: 14px !important;
padding-right: 14px !important;
}
/* 박스 값은 스프라이트 메뉴에만. uslife/uslife2는 자체 padding/line-height가 있어 덮으면 깨진다. */
#header-box .menu ul li a:has(.ht),
#header_box .menu ul li a:has(.ht) {
float: left;
display: block;
white-space: nowrap;
width: auto !important;
height: 70px !important;
line-height: 70px;
padding: 0 12.5px; /* 항목 사이 간격 20px -> 25px (25% 확대) */
/* 스프라이트 시절 항목별 여백(obituaries a.ads의 margin-left:50px 등)이 남아 있어
간격이 들쭉날쭉해진다. 간격은 위 padding 하나로만 결정되게 한다. */
margin: 0 !important;
background: none !important;
}
#header-box .menu ul li a .ht,
#header_box .menu ul li a .ht {
position: static;
width: auto;
height: auto;
overflow: visible;
line-height: inherit;
text-indent: 0;
}
/*
메뉴 사이 구분선. 원본은