@charset "UTF-8";
/* =============================================================================
   ROUND LAB 마라톤 전용 테마 CSS  (밝은 블루 계열)
   -----------------------------------------------------------------------------
   - 로드 위치: theme/krf/head.sub.php 에서 $krf_theme='roundlab' 일 때 마지막에 로드
   - 공용 CSS(default.css / wzd_lib/css/layout.css 등) 이후에 로드되므로 오버라이드 우선
   - 이 파일은 라운드랩 페이지에만 로드되므로 기존 3개 대회에는 영향 없음
   - 색상/간격 등은 아래 :root 변수만 바꾸면 전체 톤을 일괄 조정 가능
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 팔레트 (디자인 토큰)
   -------------------------------------------------------------------------- */
:root {
    /* --- 메인 컬러 (브랜드 블루) --- */
    --rl-primary: #1470d6;        /* 메인 컬러: ROUND LAB 시그니처 블루 */
    --rl-primary-strong: #0f57ad; /* 메인 진하게: hover / active / 강조 */
    --rl-primary-soft: #4a9fe8;   /* 메인 밝게: 라이트 액센트, 아이콘 */

    /* --- 서브 컬러 (네이비 / 섹션 배경) --- */
    --rl-navy: #14307d;           /* 서브 컬러: 딥 네이비 (진한 강조 텍스트) */
    --rl-section-blue: #1b4fb0;   /* 대회일정 등 블루 섹션 배경 */

    /* --- 스카이 틴트 (밝은 배경 계열) --- */
    --rl-sky-300: #8fc7f5;        /* 스카이 */
    --rl-sky-200: #bfe0fb;        /* 연한 스카이 */
    --rl-sky-100: #e3f1fd;        /* 아주 연한 배경 틴트 */
    --rl-sky-50:  #f2f9ff;        /* 최상위 밝은 배경 */

    /* --- 뉴트럴 (텍스트 / 라인 / 배경) --- */
    --rl-ink: #16233d;            /* 기본 본문 텍스트 (짙은 남색) */
    --rl-gray: #5b6b82;           /* 보조 텍스트 */
    --rl-line: #d5e3f2;           /* 구분선 / 테두리 */
    --rl-bg: #ffffff;             /* 기본 배경 */
    --rl-white: #ffffff;

    /* --- 상태 컬러 --- */
    --rl-accent: #ff6b3d;         /* 포인트(주의/CTA 보조) — 필요 시 사용 */

    /* --- 시맨틱 토큰 (컴포넌트에서 이 값을 참조) --- */
    --rl-text: var(--rl-ink);
    --rl-link: var(--rl-primary);
    --rl-link-hover: var(--rl-primary-strong);
    --rl-header-text: #ffffff;             /* 메인 헤더 네비 글자색 (일러스트 위 흰색) */
    --rl-header-hover: var(--rl-sky-200);   /* 헤더 네비 hover (연한 스카이) */
    --rl-header-sticky-bg: #1a73d3;         /* 스크롤 고정 헤더 배경 (비주얼과 어울리는 블루) */

    /* --- 버튼 --- */
    --rl-btn-bg: var(--rl-primary);
    --rl-btn-bg-hover: var(--rl-primary-strong);
    --rl-btn-text: #ffffff;

    /* --- 모양/그림자 --- */
    --rl-radius: 10px;
    --rl-radius-pill: 999px;
    --rl-shadow: 0 8px 24px rgba(20, 48, 125, 0.12);
    --rl-shadow-sm: 0 4px 12px rgba(20, 48, 125, 0.10);
}

/* -----------------------------------------------------------------------------
   2. 공통 타이포 / 유틸
   -------------------------------------------------------------------------- */
body {
    color: var(--rl-text);
}

/* 링크 기본 톤 (게시판/서브페이지 등 공용 영역) */
#sub_content a:not(.btn):hover {
    color: var(--rl-link-hover);
}

/* 브랜드 하이라이트 마커 (제목 뒤 연한 블루 배경) */
.rl-mark {
    background: linear-gradient(transparent 55%, var(--rl-sky-200) 55%);
    padding: 0 2px;
}

/* 텍스트/배경 유틸 */
.rl-text-primary { color: var(--rl-primary) !important; }
.rl-text-navy    { color: var(--rl-navy) !important; }
.rl-bg-sky       { background: var(--rl-sky-100) !important; }
.rl-bg-blue      { background: var(--rl-section-blue) !important; color: #fff !important; }

/* -----------------------------------------------------------------------------
   3. 버튼 (라운드랩 공용 버튼 컴포넌트)
   -------------------------------------------------------------------------- */
.rl-btn {
    display: inline-block;
    padding: 14px 34px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: var(--rl-btn-text);
    background: var(--rl-btn-bg);
    border: 2px solid var(--rl-btn-bg);
    border-radius: var(--rl-radius-pill);
    text-decoration: none;
    transition: 0.2s background, 0.2s color, 0.2s border-color, 0.2s transform;
}
.rl-btn:hover,
.rl-btn:focus {
    color: var(--rl-btn-text);
    background: var(--rl-btn-bg-hover);
    border-color: var(--rl-btn-bg-hover);
    transform: translateY(-2px);
}

/* 아웃라인(흰 배경 위 / 블루 배경 위) */
.rl-btn--outline {
    color: var(--rl-primary);
    background: #fff;
    border-color: var(--rl-primary);
}
.rl-btn--outline:hover {
    color: #fff;
    background: var(--rl-primary);
}

/* 블루 섹션 위에서 쓰는 화이트 필 버튼 */
.rl-btn--onblue {
    color: var(--rl-primary);
    background: #fff;
    border-color: #fff;
}
.rl-btn--onblue:hover {
    color: #fff;
    background: transparent;
    border-color: #fff;
}

.rl-btn--lg { padding: 18px 48px; font-size: 20px; }
.rl-btn--sm { padding: 10px 22px; font-size: 15px; }

/* -----------------------------------------------------------------------------
   4. 헤더 & 네비게이션 (밝은 테마)
   - 라운드랩 메인은 밝은 일러스트 위 → 네비 글자를 어두운 남색으로
   -------------------------------------------------------------------------- */

/* 메인 헤더 네비 글자색 (기존 흰색 → 남색) */
.header .gnb a {
    color: var(--rl-header-text);
}
.header .gnb .depth1 > a:hover,
.header .gnb .depth1 > a:focus,
.header .gnb .depth1.on > a:hover,
.header .gnb .depth1.on > a {
    color: var(--rl-header-hover) !important;
}

/* 메인페이지: 헤더에 은은한 밝은 배경(가독성) — 필요 없으면 transparent 유지 */
#header.header.main-page {
    background: rgba(255, 255, 255, 0.0);
}

/* sub 페이지 헤더 하단 액센트 바 색상 (블루 서브헤더와 톤 맞춤)
   ※ 서브헤더 배경/글자 블루화는 아래 '로고' 섹션 뒤 '서브 헤더 블루화' 블록에서 처리 */
#header.sub:before {
    background: var(--rl-primary-strong);
}

/* 햄버거(모바일) 라인 색 — 밝은 테마이므로 어둡게 */
.hiraku-open-btn-line.white,
.hiraku-open-btn-line.black {
    /* 기본 유지, 필요 시 조정 */
}

/* --- 스크롤 고정(sticky) 헤더 : 파란 배경 + 흰색 메뉴/로고 -------------------
   기존 테마는 sticky 시 흰 배경 + 검은 글자라 라운드랩 밝은 테마와 어울리지 않음.
   비주얼 이미지와 어울리는 블루 배경으로 덮고 글자/로고를 흰색으로 반전.
*/
.header.sticky {
    background: var(--rl-header-sticky-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 16px rgba(20, 48, 125, 0.18);
}

/* 메뉴 글자 흰색 */
.header.sticky .gnb a,
.header.sticky .gnb .depth1 > a {
    color: #fff !important;
}
.header.sticky .gnb .depth1 > a:hover,
.header.sticky .gnb .depth1 > a:focus,
.header.sticky .gnb .depth1.on > a {
    color: var(--rl-sky-200) !important;
}

/* 우측 etc 영역(언어선택 등) 흰색 */
.header.sticky .top_wrap .etc {
    color: #fff !important;
}

/* --- 라운드랩 전용 로고 (logo_roundlab.png, 흰색) ---------------------------
   원본 990×64 (비율 ≈ 15.47:1). 폭 370px 기준 contain → 높이 약 24px, 세로 중앙정렬.
   흰색 로고이므로 배경이 어두운/파란 헤더에서 사용.
   (경로: css/ 기준 상대경로이므로 ../img/  — 공용 로고의 ../../img/common 과 다름 주의)
   서브페이지 헤더는 아래 '서브 헤더 블루화'에서 배경을 파랑으로 맞춰 흰 로고가 보이게 함.
*/
.header h1 a,
.header.main-page h1 a,
.header.sub h1 a,
.header.sticky h1 a {
    background: url(../img/logo_roundlab.png) left center / contain no-repeat !important;
    width: 370px !important;
    height: 39px !important;
}

/* --- 서브페이지 헤더 블루화 (흰 로고/메뉴 가독성 확보) ----------------------- */
#header.sub {
    background: var(--rl-header-sticky-bg) !important;
}
.header.sub .gnb .depth1 > a {
    color: #fff !important;
}
.header.sub .gnb .depth1 > a:hover {
    color: var(--rl-sky-200) !important;
}
#header.sub .top_wrap .etc {
    color: #fff !important;
}

/* --- 메가메뉴 펼침(.all) 상태: 상단 메뉴 글자 흰색 유지 --------------------
   기본 테마는 이 상태에서 상단 메뉴를 #333/#666(어두운색)으로 바꾼다.
   라운드랩은 헤더가 파란/일러스트라 흰색을 유지해야 가독성이 좋다.
   (헤더 배경은 위 규칙들로 파랑/투명 유지되므로 흰 글자가 안전)
*/
.header.all .gnb_wrap .gnb a,
.header.all .gnb_wrap .depth1 > a {
    color: #fff !important;
}
.header.all .gnb_wrap .gnb a:hover,
.header.all .gnb_wrap .gnb a:focus,
.header.all .gnb_wrap .depth1 > a:hover,
.header.all .gnb_wrap .depth1 > a:focus {
    color: var(--rl-sky-200) !important;
}

/* --- 메가메뉴 드롭다운 패널 & 서브메뉴 링크 (가독성 개선) -------------------
   기본 테마: 밝은 회색(#f1f1f3) 패널 + 밝은 글자 → 대비가 거의 없어 안 보임.
   → 패널을 밝은 스카이 톤으로, 서브메뉴 글자를 네이비로.
*/
#header.all:before {
    background: var(--rl-sky-50) !important;
    border-top: 1px solid var(--rl-line);
}
.header.all .gnb_wrap .depth2 > li > a {
    color: var(--rl-navy) !important;
    font-weight: 500;
}
.header.all .gnb_wrap .depth2 > li > a:hover,
.header.all .gnb_wrap .depth2 > li > a:focus {
    color: var(--rl-primary) !important;
}
/* 서브메뉴 hover 밑줄 강조색 */
.header.all .gnb_wrap .depth2 > li > a:hover:before {
    background: var(--rl-primary) !important;
}

/* -----------------------------------------------------------------------------
   5. 메인 비주얼 (swiper)
   -------------------------------------------------------------------------- */

/* --- 히어로 높이: 이미지 비율에 맞춰 '잘림 없이' 노출 -------------------------
   기존 테마는 히어로 높이가 72vh 고정 → 16:9 화면에서 노출 영역이 약 2.47:1이
   되어, 2.12:1 일러스트의 상·하단이 잘린다.
   라운드랩은 히어로 높이를 이미지 비율(가로/세로)에 맞춰 폭 기준으로 계산 →
   일반 16:9 모니터에서 전체 일러스트가 잘리지 않는다.
   --rl-hero-ratio: 메인 비주얼 이미지의 (가로 ÷ 세로). 이미지 교체 시 이 값만 수정.
     · 현재 이미지 main_visual_roundlab.jpg = 2000 × 942 → 2000/942 = 2.123
*/
:root { --rl-hero-ratio: 2.123; }

#index_swiper,
#index_swiper.swiper-container,
#index_swiper .swiper-container,
#index_swiper .swiper-wrapper,
#index_swiper .swiper-slide,
#index_swiper .swiper-img {
    height: calc(100vw / var(--rl-hero-ratio)) !important;
    max-height: 92vh !important;  /* 초광폭 모니터 방어(캡 시 약간 크롭될 수 있음) */
    min-height: 360px !important;
}

/* 캡/여백 발생 구간이 검게 보이지 않도록 하늘색 배경 */
#index_swiper { background-color: var(--rl-sky-200) !important; }

/* -----------------------------------------------------------------------------
   6. 인덱스 하단 섹션 (section04: 문의/공지/고객센터 박스)
   -------------------------------------------------------------------------- */
#index_wrap section.section04 {
    background: var(--rl-sky-50);
}

/* box01: 문의 유도 박스 → 브랜드 블루 카드 */
#index_wrap section.section04 .box_wrap .box01 {
    background: var(--rl-section-blue);
    color: #fff;
    border-radius: var(--rl-radius);
    box-shadow: var(--rl-shadow);
}
#index_wrap section.section04 .box_wrap .box01 h1,
#index_wrap section.section04 .box_wrap .box01 h1 span {
    color: #fff;
}

/* box02/box03: 화이트 카드 */
#index_wrap section.section04 .box_wrap .box02,
#index_wrap section.section04 .box_wrap .box03 {
    background: #fff;
    border: 1px solid var(--rl-line);
    border-radius: var(--rl-radius);
    box-shadow: var(--rl-shadow-sm);
}
#index_wrap section.section04 .box_wrap .box h2 {
    color: var(--rl-navy);
}
#index_wrap section.section04 .box_wrap .box h2::before {
    background: var(--rl-primary);
}
#index_wrap section.section04 .box_wrap .box.box03 .tel ul li a {
    color: var(--rl-ink);
}

/* section04 내 버튼(Q&A / 교통통제) 톤 */
#index_wrap section.section04 .btn.bt_lnk.black {
    background: var(--rl-primary);
    border-color: var(--rl-primary);
    color: #fff;
}
#index_wrap section.section04 .btn.bt_lnk.gray {
    background: var(--rl-sky-100);
    border-color: var(--rl-sky-200);
    color: var(--rl-navy);
}

/* -----------------------------------------------------------------------------
   7. 라운드랩 커스텀 섹션 (신규 마크업용 프레임)
   - index_roundlab.php 를 시안대로 재구성할 때 사용할 공용 컨테이너
   -------------------------------------------------------------------------- */

/* 섹션 공통 */
.rl-section { padding: 80px 0; }
.rl-section .rl-inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* 블루 섹션 (예: '대회 일정') */
.rl-section--blue {
    background: var(--rl-section-blue);
    color: #fff;
}
.rl-section--sky { background: var(--rl-sky-100); }

/* 섹션 타이틀 */
.rl-section-title {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    color: var(--rl-navy);
    margin-bottom: 40px;
}
.rl-section--blue .rl-section-title { color: #fff; }

/* 카드 */
.rl-card {
    background: #fff;
    border-radius: var(--rl-radius);
    box-shadow: var(--rl-shadow-sm);
    padding: 28px;
}

/* 코스 뱃지 (5km / 10km / Half) */
.rl-course-badge {
    display: inline-block;
    padding: 10px 26px;
    margin: 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rl-navy);
    background: #fff;
    border: 2px solid var(--rl-sky-200);
    border-radius: var(--rl-radius-pill);
}

/* 접수 기간 강조 박스 */
.rl-apply-box {
    text-align: center;
    background: #fff;
    border: 3px solid var(--rl-primary);
    border-radius: var(--rl-radius);
    padding: 32px 24px;
    color: var(--rl-navy);
}
.rl-apply-box .rl-apply-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--rl-primary);
    margin-bottom: 12px;
}
.rl-apply-box .rl-apply-date {
    font-size: 18px;
    font-weight: 700;
}

/* 대회 일정 섹션 (index_roundlab.php) — 남색 배너 + 일정 텍스트 리스트 + 참가신청 버튼
   장식 에셋: 좌우 자작나무 roundlab_main1_1_left/right.png(원본 2001×748에서 분리)
   / 하단 눈 언덕 roundlab_main1_2.png(2001×74)
   나무는 화면 폭이 아니라 "섹션 높이" 기준(height 100%)으로 스케일 → 시안 비율 유지.
   DOM 순서(나무 → 눈 → .rl-inner)로 레이어가 쌓여 내용이 항상 맨 위 */
.rl-schedule {
    position: relative;
    overflow: hidden;
    margin-top: 40px;          /* 상단 비주얼 배너와의 여백 */
    padding: 50px 0 110px;     /* 하단은 눈 언덕 띠(폭의 약 3.7%)와 겹치지 않게 여유 */
}
.rl-schedule-tree {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
}
.rl-schedule-tree--left  { left: 0; }
.rl-schedule-tree--right { right: 0; }
.rl-schedule-snow {
    position: absolute;
    left: 0;
    bottom: -1px;              /* 서브픽셀 틈 방지 */
    width: 100%;
    height: auto;
}
.rl-schedule .rl-inner { position: relative; }
.rl-schedule .rl-section-title { margin-bottom: 30px; }
.rl-schedule-list {
    max-width: 740px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.rl-schedule-list li {
    position: relative;
    padding-left: 20px;
    font-size: 21px;
    line-height: 1.7;
    margin-bottom: 12px;
    color: #fff;               /* 공용 CSS의 리스트 색 오버라이드 방지 */
}
.rl-schedule-list li:last-child { margin-bottom: 0; }
.rl-schedule-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
.rl-schedule-list strong { font-weight: 800; }
.rl-schedule-apply {
    text-align: center;
    margin-top: 34px;
}
/* 입체 참가신청 버튼 이미지 (roundlab_main1_3.png 341×137 → 170px 표시, 레티나 2배) */
.rl-schedule-apply img {
    width: 170px;
    height: auto;
    transition: transform 0.2s ease;
}
.rl-schedule-apply a:hover img { transform: translateY(-4px); }

/* 코스 안내 섹션 (index_roundlab.php) — 타이틀 + 코스별 탭 + 코스맵 */
.rl-course { padding: 60px 0 70px; }
.rl-course .rl-section-title { margin-bottom: 8px; }
.rl-course-slogan {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--rl-gray);
    margin-bottom: 34px;
}
.rl-course-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
}
.rl-course-tab {
    padding: 10px 30px;
    font-size: 17px;
    font-weight: 700;
    color: var(--rl-navy);
    background: #fff;
    border: 2px solid var(--rl-sky-200);
    border-radius: var(--rl-radius-pill);
    cursor: pointer;
    transition: all .2s ease;
}
.rl-course-tab:hover {
    color: var(--rl-primary);
    border-color: var(--rl-primary);
}
.rl-course-tab.active {
    color: #fff;
    background: var(--rl-primary);
    border-color: var(--rl-primary);
}
.rl-course-panel { display: none; }
.rl-course-panel.active { display: block; }
.rl-course-panel img {
    display: block;
    width: 100%;
    /* 코스맵이 거의 1:1 비율(1300×1327)이라 900px에서는 세로로 과해 보임 → 720px */
    max-width: 720px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--rl-radius);
    box-shadow: var(--rl-shadow-sm);
}
/* 코스맵 시안 미수령 상태 표시 */
.rl-course-soon {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #b8c2cf;
    padding: 110px 0;
    margin: 0;
}

/* 주최/주관/후원·협찬 로고 바 (index_roundlab.php)
   sponsor_1~9.png 은 22~41px 높이의 텍스트형 로고 → 원본 크기 그대로 표시 */
.rl-sponsor {
    padding: 34px 0;
    background: #fff;
    border-top: 1px solid var(--rl-line);
}
.rl-sponsor .rl-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 44px;
}
.rl-sponsor-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 22px;
}
.rl-sponsor-label {
    font-size: 16px;
    font-weight: 800;
    color: var(--rl-ink);
    margin-right: 4px;
}
.rl-sponsor-group img {
    width: auto;
    height: auto;
    max-width: 100%;
    zoom: 0.75; /* 원본 대비 균일 축소, 라벨 텍스트와 비슷한 크기로 (로고별 원본 높이가 달라 height 일괄 지정 불가) */
}

/* 참가신청 열기구 float 버튼 (index_roundlab.php 메인 전용)
   roundlab_float_btn.webp 420×1208 (애니메이션, gif 폴백) → 폭 210px 축소 표시 (높이 약 604px) */
.rl-float {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
    z-index: 90;
}
.rl-float img {
    display: block;
    width: 100%;
    height: auto;
}
/* 닫기 버튼 (이미지 오른쪽 상단, 시안: 파란 원 + 흰 X + 흰 테두리)
   클릭 시 JS로 .rl-float 숨김 — 새로고침하면 다시 표시 */
.rl-float-close {
    position: absolute;
    top: -6px;
    right: 14px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--rl-primary);
    color: #fff;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.rl-float-close:hover { background: var(--rl-navy); }
/* 이미지 내 버튼 영역 오버레이 링크 (원본 939×2700 픽셀 좌표 → % 변환)
   참가신청 x118-819/y1660-2062, Q&A x189-749/y2170-2304, 교환·환불 x189-749/y2424-2558 */
.rl-float-link {
    position: absolute;
    display: block;
}
.rl-float-link--apply  { left: 12.5%; top: 61.5%; width: 74.7%; height: 14.9%; }
.rl-float-link--qa     { left: 20%;   top: 80.4%; width: 59.6%; height: 5%; }
.rl-float-link--refund { left: 20%;   top: 89.8%; width: 59.6%; height: 5%; }

/* -----------------------------------------------------------------------------
   8. 서브페이지 브레드크럼 (서브 배너는 2026.07 제거 - head_roundlab.php 참고)
   -------------------------------------------------------------------------- */
/* 배너(.s_visual_wrap) 제거에 따른 상단 헤더 겹침 보정.
   #header는 absolute 오버레이(기본 97px, 1300px 이하 80px)라 배너가 그 아래
   간격(margin-top:100px) 또는 자기 높이로 겹침을 흡수하고 있었음.
   배너 제거 후 첫 요소(브레드크럼)가 헤더에 가려지지 않게 간격 부여 */
#nav_center.breadcrumbs { margin-top: 100px; }              /* PC (992px~): 데스크탑 브레드크럼 */
@media (max-width: 1300px) {
    #nav_center.breadcrumbs { margin-top: 80px; }           /* 헤더 높이 80px 구간 */
}
@media (max-width: 991px) {
    .sub_three_map_wrap.breadcrumbs { margin-top: 80px; }   /* 모바일 브레드크럼 */
    /* 대회소개 상단 이미지: 모바일 브레드크럼 바가 absolute 오버레이라 파란 박스
       상단이 바 위로 비쳐 보임 → 바 아래에서 시작하도록 여백 부여 */
    section.company.company_02 .ceo-box.data-image { margin-top: 80px; }
}

#nav_center.breadcrumbs .sub_three_nav .depth2 > a {
    color: var(--rl-navy);
}
.breadcrumbs .sub_three_nav .depth2 > a:hover {
    color: var(--rl-primary);
}

/* 서브 페이지 헤더 타이틀 */
#sub_content .page-header h1 {
    color: var(--rl-navy);
}

/* --- 대회소개(01_01) 타이틀: 영문 슬로건(블루) + 한글 부제 2단 구성 ----------
   sub.css의 h1 span 노란 형광펜(::before)은 여러 줄 span에서 첫 줄에만 걸려 깨져 보이고
   라운드랩 블루 톤과도 안 맞아 제거, 슬로건을 브랜드 컬러로 강조 */
section.company .about_text h1.rl-intro-title {
    line-height: 1.25;
    margin-bottom: 45px;
}
section.company .about_text h1.rl-intro-title span { position: static; }
section.company .about_text h1.rl-intro-title span::before { display: none; }
.rl-intro-title .rl-intro-en {
    display: block;
    color: var(--rl-primary);
}
.rl-intro-title .rl-intro-kr {
    display: block;
    margin-top: 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--rl-navy);
}
/* 컨텐츠 미수령 페이지 공통 Coming Soon (01_04 기념품 / 01_06 시상금 / 01_07 주차장 등) */
.rl-coming-soon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
    padding: 80px 20px;
}
.rl-coming-soon p {
    font-size: 120px;
    color: #999;
    font-weight: 300;
    margin: 0;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 3px;
}
/* 대회소개 상단 이미지 미수령 플레이스홀더 (01_01_roundlab.png 없을 때) */
.rl-img-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 340px;
    margin-bottom: 50px;
    border: 1px dashed #c9ccd3;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #9aa0aa;
}
/* 대회소개 상단 이미지 (01_01_roundlab.png): 세로형 원본이라 contain 대신 cover 크롭으로
   제품 라인업 밴드만 와이드하게 표시. 가로형 이미지 수령 시 이 블록 제거 */
section.company.company_02 .ceo-box.data-image {
    background-size: cover;
    background-position: center 65%;
    height: 480px;
    margin-bottom: 50px;
    background-color: #cfe3f6;
}

/* -----------------------------------------------------------------------------
   9. 게시판/폼 액센트 (공용 컴포넌트 톤 맞춤)
   -------------------------------------------------------------------------- */
.pg_page.pg_current,
.pagination > .active > a,
.pagination > .active > span {
    background: var(--rl-primary) !important;
    border-color: var(--rl-primary) !important;
    color: #fff !important;
}
.btn.btn_submit,
button.btn_submit,
input.btn_submit {
    background: var(--rl-primary);
    border-color: var(--rl-primary);
}
.btn.btn_submit:hover,
button.btn_submit:hover,
input.btn_submit:hover {
    background: var(--rl-primary-strong);
    border-color: var(--rl-primary-strong);
}

/* -----------------------------------------------------------------------------
   10. 푸터 액센트
   -------------------------------------------------------------------------- */
#footer a:hover { color: var(--rl-primary); }

/* --- 푸터 문의 블록 (tail_roundlab.php <footer> 내부, 시안: 3컬럼) ---------- */
.rl-foot { padding: 28px 0 32px; }
.rl-foot .rl-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    gap: 50px;
}
.rl-foot-col { flex: 1; min-width: 0; }

/* 왼쪽: 운영사무국 문의 (시안: 진한 네이비 블루 + 최대 굵기) */
.rl-foot-intro h2 {
    margin: 0 0 12px;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--rl-navy);
}
.rl-foot-slogan {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    /* layout.css 의 `footer p { color: #979ba3 !important }` 를 이기기 위해 !important 필요 */
    color: var(--rl-ink) !important;
    margin: 0;
}

/* 가운데: 공지사항 헤딩 + 대표 공지 한 줄 + 안내 링크 리스트 (시안: 네이비 굵은 글씨) */
.rl-foot-notice h2 { margin: 0 0 6px; font-size: 18px; font-weight: 900; }
footer .rl-foot-notice h2 a,
footer .rl-foot-notice h2 a:link,
footer .rl-foot-notice h2 a:visited { color: var(--rl-navy) !important; }
footer .rl-foot-notice h2 a:hover { color: var(--rl-primary) !important; }
footer .rl-foot-notice-hot { margin: 0 0 16px; font-size: 14px; font-weight: 800; }
footer .rl-foot-notice-hot a,
footer .rl-foot-notice-hot a:link,
footer .rl-foot-notice-hot a:visited { color: var(--rl-navy) !important; }
footer .rl-foot-notice-hot a:hover { color: var(--rl-primary) !important; }
.rl-foot-links { margin: 0; padding: 0; list-style: none; }
.rl-foot-links li { margin-bottom: 8px; }
.rl-foot-links li::before {
    content: "◦";
    margin-right: 7px;
    font-weight: 700;
    color: var(--rl-navy) !important;
}
/* link/visited 상태 포함 강제 네이비 (다른 어떤 규칙에도 지지 않도록) */
footer .rl-foot-links li a,
footer .rl-foot-links li a:link,
footer .rl-foot-links li a:visited {
    font-size: 14px;
    font-weight: 700;
    color: var(--rl-navy) !important;
}
footer .rl-foot-links li a:hover { color: var(--rl-primary) !important; }

/* 오른쪽: 고객센터 */
.rl-foot-cs h2 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 900;
    color: var(--rl-navy);
}
.rl-foot-tel { margin: 0 0 8px; padding: 0; list-style: none; }
/* 시안: 전화번호는 진한 검정 굵은 숫자 */
.rl-foot-tel li {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 3px;
}
.rl-foot-tel li::before { content: "◦"; font-weight: 700; margin-right: 7px; }
.rl-foot-tel li span {
    font-size: 13px;
    font-weight: 800;
    margin-right: 8px;
}
.rl-foot-tel li a,
.rl-foot-tel li a:link,
.rl-foot-tel li a:visited { color: #111; }
.rl-foot-tel li a:hover { color: var(--rl-primary); }
/* 불릿 안내줄 — .rl-foot-links 링크와 동일 스타일로 통일
   (layout.css `footer p` 의 !important 회색을 이기기 위해 !important 필요) */
.rl-foot-time {
    font-size: 14px;
    font-weight: 700;
    color: #000 !important;
    margin: 0 0 14px;
}
.rl-foot-time::before { content: "◦"; font-weight: 700; margin-right: 7px; }
.rl-foot-btns { display: flex; gap: 10px; }
.rl-foot-btn {
    display: inline-block;
    padding: 9px 26px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: center;
    transition: all .2s ease;
}
.rl-foot-btn--fill {
    background: var(--rl-section-blue);
    border-color: var(--rl-section-blue);
    color: #fff;
}
.rl-foot-btn--fill:hover { background: var(--rl-navy); border-color: var(--rl-navy); color: #fff; }
.rl-foot-btn--line {
    background: #fff;
    border-color: var(--rl-section-blue);   /* 시안: 흰 배경 + 네이비 테두리 */
    color: var(--rl-section-blue);
}
.rl-foot-btn--line:hover { background: var(--rl-sky-100); color: var(--rl-navy); }

/* --- 푸터 전체를 시안 라이트 스카이 블루 톤으로 오버라이드 -------------------- */
footer,
footer .footer-menu {
    background-color: var(--rl-sky-200) !important;   /* 시안의 라이트 스카이 블루 */
}
footer { padding-bottom: 8px !important; }
footer .footer-menu {
    border-bottom: 1px solid rgba(20, 48, 125, .18);
    padding-top: 4px;
    padding-bottom: 4px;
}
footer .footer-menu ul { padding-top: 10px; padding-bottom: 4px; }
footer .footer-menu ul li a { color: var(--rl-navy); font-weight: 700; }
footer .footer-menu ul li a.blue { color: var(--rl-navy); }
footer .footer-menu ul li a:hover { color: var(--rl-primary); }
footer .footer-menu ul li:before { color: rgba(20, 48, 125, .3); }

/* 카피라이트 (기존 문구 유지, 중앙 정렬) */
footer p.rl-foot-copy {
    margin: 0;
    padding: 0 0 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--rl-ink) !important;
}
footer p.rl-foot-copy strong { color: var(--rl-navy); }

/* 스폰서/후원 로고 바 배경 (필요 시 사용) */
.rl-sponsor-bar {
    background: #fff;
    border-top: 1px solid var(--rl-line);
    border-bottom: 1px solid var(--rl-line);
    padding: 24px 0;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   11. 오프캔버스 사이드바 (모바일 햄버거 메뉴)
   -------------------------------------------------------------------------- */
/* 사이드바 로고 (logo_roundlab2.png, 392×29) 크기 정리 */
#sidebar .title_wrap h3 img {
    width: auto;
    max-width: 210px;
    height: auto;
}

/* -----------------------------------------------------------------------------
   12. 반응형
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    /* 모바일 메인 비주얼: 세로형 이미지로 교체 (main_visual_roundlab_m.jpg, 1170×1800)
       인라인 배경보다 우선하도록 !important. 히어로 비율도 세로형에 맞춤. */
    :root { --rl-hero-ratio: 0.65; } /* 1170 / 1800 */
    #index_swiper .swiper-slide {
        background-image: url(../img/main_visual_roundlab_m.jpg) !important;
        background-position: center center !important;
    }

    .rl-section { padding: 50px 0; }
    .rl-section-title { font-size: 26px; margin-bottom: 26px; }
    .rl-btn { padding: 12px 26px; font-size: 16px; }

    /* 대회 일정: 텍스트 축소, 자작나무는 좁은 화면에서 텍스트를 가려 숨김 */
    .rl-schedule {
        margin-top: 25px;
        padding: 40px 0 55px;
    }
    .rl-schedule-tree { display: none; }
    .rl-schedule-list li {
        font-size: 14px;
        padding-left: 14px;
        margin-bottom: 8px;
    }
    /* 출발 시간의 코스 순서 괄호는 모바일에서 줄바꿈 (PC는 인라인 유지) */
    .rl-schedule-list .rl-schedule-detail { display: block; }
    .rl-schedule-apply { margin-top: 26px; }
    .rl-schedule-apply img { width: 140px; }

    /* 코스 안내: 탭/문구 축소 */
    .rl-course { padding: 45px 0 50px; }
    .rl-course-tabs { gap: 8px; margin-bottom: 26px; }
    .rl-course-tab { padding: 8px 18px; font-size: 15px; }
    .rl-course-soon { font-size: 20px; padding: 70px 0; }

    /* 스폰서 로고 바: 구분(주최/주관/후원)별 세로 스택, 라벨은 로고 위 중앙 */
    .rl-sponsor { padding: 26px 0 30px; }
    .rl-sponsor .rl-inner {
        flex-direction: column;
        gap: 20px;
    }
    .rl-sponsor-group { gap: 8px 14px; }
    .rl-sponsor-group img { zoom: 0.5; } /* 모바일: 로고 추가 축소 */

    /* 참가신청 열기구 float 버튼: 좁은 화면에서는 본문을 가려 숨김 */
    .rl-float { display: none; }

    /* 컨텐츠 미수령 Coming Soon 축소 */
    .rl-coming-soon {
        min-height: 300px;
        padding: 50px 20px;
    }
    .rl-coming-soon p { font-size: 52px; }

    /* 대회소개(01_01) 타이틀: 부제 축소 / 이미지 플레이스홀더 축소 */
    .rl-img-soon {
        height: 180px;
        margin-bottom: 30px;
        font-size: 16px;
    }
    /* 대회소개 상단 이미지: 모바일은 세로 비율이 박스와 비슷해 거의 전체 표시됨 */
    section.company.company_02 .ceo-box.data-image {
        height: 380px;
        margin-bottom: 30px;
        background-position: center 60%;
    }
    section.company .about_text h1.rl-intro-title { margin-bottom: 30px; }
    .rl-intro-title .rl-intro-kr {
        margin-top: 10px;
        font-size: 17px;
    }

    /* 푸터 상단 링크 바: 축소 + 4개 링크 한 줄 고정 */
    footer .footer-menu ul {
        padding-top: 6px;
        padding-bottom: 2px;
        white-space: nowrap;
    }
    footer .footer-menu ul li a {
        font-size: 12px;
        padding-left: 4px;
        padding-right: 4px;
    }
    footer .breadcrumb > li + li:before { padding: 0 2px; }

    /* 푸터 문의 블록: 세로 스택 + 중앙 정렬 */
    .rl-foot { padding: 24px 0 28px; }
    .rl-foot .rl-inner {
        flex-direction: column;
        gap: 24px;
    }
    .rl-foot-col { text-align: center; }
    .rl-foot-notice { display: none; }  /* 모바일: 안내 링크 3개 숨김 (높이 절약) */
    .rl-foot-intro h2 { font-size: 22px; margin-bottom: 8px; }
    /* 불릿 목록은 좌측 정렬을 유지한 채 블록만 중앙 배치 */
    .rl-foot-links,
    .rl-foot-tel {
        display: inline-block;
        text-align: left;
    }
    .rl-foot-btns { justify-content: center; flex-wrap: wrap; }
    .rl-foot-btn { flex: 1; min-width: 130px; max-width: 220px; }
    footer p.rl-foot-copy { font-size: 12px; }
    .rl-sponsor-label {
        flex-basis: 100%;
        text-align: center;
        font-size: 14px;
        margin-right: 0;
    }
    .rl-course-badge { margin-bottom: 8px; }
}