@charset "utf-8";
/* ============================================================================
한국반려동물자격검정협회 — 리뉴얼 오버레이 스타일
----------------------------------------------------------------------------
파일 위치 : /common/css/site/renewal.css
적용 방법 : common/include/head.asp CSS 링크 맨 마지막에 1줄 추가
롤백 방법 : 위 1줄 삭제 → 즉시 원상복구
★ 설계 원칙 — 레이아웃 불변
허용 : color / background-color / border-color / font-family / font-weight
금지 : width / height / position / float / display / margin / padding
→ 기존 CSS의 레이아웃 규칙을 그대로 두고 "색과 서체"만 덮어씀
(로그인·시험접수·자격증발급 등 기능 페이지 안전)
★ v2.0 — 실제 렌더링 마크업을 분석해 적용 중인 선택자로 교정
기존 사이트 실사용 팔레트
#9faf63 페이지 제목 배경 (밝은 연두) → Petrol 로 교체
#626d46 좌측메뉴 헤더 (올리브) → Petrol Dark 로 교체
#413C39 표 대제목 (다크 브라운) → Petrol 로 교체
#746661 섹션 제목 (타우프) → 유지 (브랜드와 조화)
#4b5e6c 강조 텍스트 (블루그레이) → Gold 로 교체
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
:root{
--rn-petrol: #1F4E4A;
--rn-petrol-dark: #173B38;
--rn-ink: #16211F;
--rn-gold: #B8871F;
--rn-gold-light: #D4A94A;
--rn-taupe: #746661;
--rn-serif: 'Gowun Batang', serif;
}
/* ==========================================================================
1. 서브 페이지 제목 — 밝은 연두(#9faf63) → Petrol + 세리프
가장 눈에 띄는 변화. 전 서브페이지 상단 제목 띠
========================================================================== */
.sub-con .content h3{
background-color: var(--rn-petrol) !important;
color: #fff !important;
font-family: var(--rn-serif) !important;
font-weight: 700;
}
/* ==========================================================================
2. 좌측 메뉴(LNB) — 올리브(#626d46) → Petrol Dark
========================================================================== */
.sub-con .lnb h2{
background-color: var(--rn-petrol-dark) !important;
color: #fff !important;
font-family: var(--rn-serif) !important;
}
.sub-con .lnb .license-dep-2 li:nth-child(4),
.sub-con .lnb .license-dep-2 li:nth-child(8){
border-bottom-color: var(--rn-gold-light) !important;
}
.sub-con .lnb ul li a:hover,
.sub-con .lnb ul li.on a{
color: var(--rn-petrol) !important;
font-weight: 600;
}
/* ==========================================================================
3. 섹션 제목 h4 / h5 — 세리프 적용 (색은 기존 타우프 유지)
========================================================================== */
.sub-con .content h4,
.sub-con .content h5{
font-family: var(--rn-serif) !important;
color: var(--rn-taupe);
}
.sub-con .content h5.line::before{
background-color: var(--rn-gold) !important;
}
/* ==========================================================================
4. 표(table) — 대제목 브라운(#413C39) → Petrol / 강조 골드
========================================================================== */
.content .price table tr th.bigtitle{
background: var(--rn-petrol) !important;
color: #fff !important;
}
.content .price table tr th{
background: #EDF1EE !important;
color: #46524E !important;
}
.content .price table tr td.point,
.content .price table td .point{
color: var(--rn-gold) !important;
font-weight: 600;
}
/* ==========================================================================
5. 서브 상단 내비게이션(.sub-nav)
========================================================================== */
.sub-nav ul li a:hover,
.sub-nav ul li.on a{
color: var(--rn-petrol) !important;
}
/* ==========================================================================
5-1. 검정기준 다이어그램 / 라벨 / 탭 — 오렌지(#f5a600) → 브랜드 골드
자격안내 전 페이지 상단에 노출되는 01~05 동그라미
========================================================================== */
.diagram-list li .num{
color: var(--rn-gold) !important;
}
.diagram-list li{
background-color: #FBF6EA !important; /* #fdf7ea 유지 계열, 살짝 정돈 */
}
.tabs li.on,
.cl-orange{
color: var(--rn-gold) !important;
}
.main-section .certi .btn:hover,
.vis .btn:hover{
background-color: var(--rn-gold) !important;
border-color: var(--rn-gold) !important;
}
/* Certificate 라벨 (#a19091 회보라 → Petrol) */
.label-list li .label,
.label-list li .label.conf_label{
background-color: var(--rn-petrol) !important;
color: #fff !important;
font-family: var(--rn-serif) !important;
}
/* 탭 비활성 텍스트 (#8595a0) */
#tapTitle > ul > li a{
color: #6B7671 !important;
}
/* GNB · 모바일 좌측메뉴 제목 (#b09b71 → 브랜드 골드로 통일) */
.nav .dep > li > a{
color: #3E4642 !important;
}
#leftNav .left-menu .lm1 > li h2{
color: var(--rn-gold) !important;
font-family: var(--rn-serif) !important;
}
/* ==========================================================================
5-2. 회차별 커리큘럼 블록(.choux-ad) — 자격안내 페이지 하단
제목 띠가 페이지 제목과 같은 #9faf63 라서 함께 교체해야 톤이 맞음
========================================================================== */
.choux-ad > li:nth-child(1){
background: var(--rn-petrol) !important;
}
.choux-ad > li:nth-child(6){
background: var(--rn-gold-light) !important; /* 구분선 #b9ab92 → 골드 */
}
.sub-con .content .choux-ad > li h4,
.choux-ad > li h4{
font-family: var(--rn-serif) !important;
color: #fff !important;
}
.cooking-special-recipe > li span.num{
color: var(--rn-petrol) !important;
font-weight: 600;
}
/* ==========================================================================
6. 메인 페이지 — 퀵메뉴 다크 밴드 / 섹션 제목
========================================================================== */
.quick-list{
background-color: var(--rn-petrol-dark) !important;
}
.main-section h2,
.quick-list h2,
.board-area .item h3{
font-family: var(--rn-serif) !important;
color: var(--rn-ink);
}
.board-area .consulte strong{
color: var(--rn-petrol) !important;
}
.m-banner .item:hover .i-arrow{
border-color: var(--rn-gold) !important;
}
/* ==========================================================================
6-2. 탭 / 규정 페이지
========================================================================== */
#tapTitle > ul > li.on,
#tapTitle > ul > li.on a{
background: var(--rn-petrol) !important;
color: #fff !important;
}
#regulation > ul > li h6{
color: var(--rn-petrol) !important;
font-family: var(--rn-serif) !important;
}
#regulation > ul > li > ul > li > p strong{
color: var(--rn-petrol) !important;
}
#examSchedule.selec-section ul li .search-ico-btn:hover{
background-color: var(--rn-petrol) !important;
}
.con-body-join .clause-box .clause-list li .agree-txt em span{
color: var(--rn-petrol) !important;
}
/* ==========================================================================
7. 헤더 / 글로벌 내비게이션
========================================================================== */
.nav .dep > li:hover > a{
color: var(--rn-gold) !important;
}
.nav .dep-2 > li a:hover,
.nav .dep-3 > li a:hover{
color: var(--rn-gold) !important;
}
.header .header-inner ul.member li.login a,
.header .header-inner ul.member li.logout a{
color: var(--rn-petrol) !important;
}
/* ==========================================================================
8. 푸터 + 소비자 알림 법정 고지
========================================================================== */
.footer .f-links a:hover{
color: var(--rn-gold) !important;
}
/* 고지 문구 — footer.asp 에 아래 마크업 추가 시 적용 (Phase 1-2)
본 자격은 … 공인자격이 아닙니다. 소비자 알림
*/
.rn-notice{
border-top: 1px solid #DDE3E0;
border-bottom: 1px solid #DDE3E0;
color: #5A6560;
font-size: 11.5px;
line-height: 1.7;
text-align: center; /* 푸터 주소 영역과 동일하게 가운데 정렬 */
padding: 12px 20px;
}
.rn-notice a{
color: var(--rn-petrol);
font-weight: 500;
text-decoration: underline;
}
.rn-notice a:hover{ color: var(--rn-gold); }
/* ==========================================================================
8-2. 푸터 링크 줄바꿈 대응
원본 .f-links a 가 width:25% (4개 기준) + height:40px + overflow:hidden 이라
링크가 5개 이상이면 두 번째 줄이 잘림 → 가변폭으로 전환
※ 모바일(750px 이하)은 원본 규칙(세로 나열) 그대로 유지
========================================================================== */
@media all and (min-width:751px){
.footer .f-links{
height: auto !important;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.footer .f-links a{
float: none !important;
width: auto !important;
padding: 10px 18px !important;
}
}
/* ==========================================================================
9. 자격 등급 색상 유틸리티 (Phase 2 콘텐츠 페이지용)
========================================================================== */
.rn-lv3{ color:#6E8E77 !important; } /* 3급 Sage */
.rn-lv2{ color:#1F4E4A !important; } /* 2급 Petrol */
.rn-lv1{ color:#16211F !important; } /* 1급 Ink */
.rn-lvm{ color:#B8871F !important; } /* 마스터 Gold */
/* ==========================================================================
10. 인쇄 보호 — 수험표·자격증 출력물은 원래 스타일 유지
========================================================================== */
@media print{
.sub-con .content h3,
.sub-con .lnb h2,
.choux-ad > li:nth-child(1),
.content .price table tr th.bigtitle{
background-color: #626d46 !important;
font-family: inherit !important;
}
.choux-ad > li:nth-child(6){ background: #b9ab92 !important; }
.content .price table tr th{ background: #f5f5f5 !important; color: #888 !important; }
#printLicenseProof *{ font-family: inherit !important; }
}