@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, 메인 비주얼 ~ 대회일정 사이) — 문구 마퀴 무한루프
   스폰서 로고 바와 같은 방식: 동일 시퀀스 8벌 트랙을 -50%(= 4벌 폭, 시퀀스 정수배) 이동 */
.rl-ticker {
    background: #1481c6;
    overflow: hidden;
    padding: 12px 0;
}
.rl-ticker-track {
    display: flex;
    width: max-content;
    /* 마퀴 기준 속도 — 스폰서 로고 바도 index 스크립트가 이 값을 읽어 같은 px/s 로 맞춤 */
    animation: rl-ticker-marquee 40s linear infinite;
}
.rl-ticker-seq {
    display: flex;
    align-items: center;
    gap: 0 28px;
    padding-right: 28px;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}
.rl-ticker-sep { opacity: .7; font-weight: 400; }
/* ROUND LAB 로고 이미지 (main_roundlab_txt.png) — 높이 기준 표시, 티커 텍스트에 맞춰 흰색 이미지 권장 */
.rl-ticker-logo { display: block; height: 15px; width: auto; }
@keyframes rl-ticker-marquee {
    to { transform: translateX(-50%); }
}

/* 코스 안내 섹션 (index_roundlab.php) — 타이틀 + 코스별 탭 + 코스맵 */
.rl-course { position: relative; padding: 0 0 70px; }
/* 타이틀+탭만 감싸는 상단 밴드: 하늘색 그라데이션(CSS) + 좌우 지글 코너 장식(PNG, 시안)
   overflow:hidden 으로 장식이 밴드 밖(코스맵 영역)으로 넘치지 않게 클립 */
.rl-course-head {
    position: relative;
    overflow: hidden;
    padding: 56px 0 44px;
    margin-bottom: 50px;
    background: linear-gradient(180deg, #d6ecfb 0%, #e6f3fe 55%, #f4faff 100%);
}
/* 좌우 지글 코너 장식 (roundlab_course_edge_left/right.png)
   밴드 좌우 가장자리에 상단 기준 배치, 폭 기준 축소. 스트립 폭이 다르면 --rl-course-edge-w 만 조정 */
:root { --rl-course-edge-w: 220px; }
.rl-course-head::before,
.rl-course-head::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--rl-course-edge-w);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: var(--rl-course-edge-w) auto;
    pointer-events: none;
    z-index: 0;
}
.rl-course-head::before { left: 0; background-image: url(../img/roundlab_course_edge_left.png); }
.rl-course-head::after { right: 0; background-image: url(../img/roundlab_course_edge_right.png); }
/* 내용은 장식 위에 표시 */
.rl-course-head .rl-inner,
.rl-course-tabbar { position: relative; z-index: 1; }
.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-tabbar {
    background: transparent;
    margin-bottom: 0;
}
.rl-course-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0 15px;
}
.rl-course-tab {
    padding: 12px 30px;
    font-size: 17px;
    font-weight: 800;
    color: var(--rl-navy);
    background: transparent;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s ease;
}
.rl-course-tab:hover { color: var(--rl-primary); }
.rl-course-tab.active {
    color: #fff;
    background: var(--rl-navy);
    border-color: var(--rl-navy);
    /* 남색 배경 + 안쪽 흰 라인 = 도로 표지판 느낌 (시안) */
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 14px rgba(20, 48, 125, .2);
}
.rl-course-panel { display: none; }
.rl-course-panel.active { display: block; }
/* 코스 설명 영상 (2000×574 와이드, 무음 1회 재생) */
.rl-course-video {
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--rl-radius);
}
/* 코스 풍경 슬라이드 (index) — 타이틀 + 중간선(roundlab_main2_1.png) + Swiper 슬라이더
   1장씩 이동, 가운데 슬라이드만 원래 크기(양옆은 축소), 무한루프 */
.rl-scene { margin-top: 60px; }
.rl-scene-divider { text-align: center; margin-bottom: 30px; }
.rl-scene-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--rl-navy);
    margin: 0 0 12px;
}
.rl-scene-line { display: block; width: 100%; height: auto; }
.rl-scene-slider {
    display: flex;
    align-items: center;
    gap: 18px;
}
.rl-scene-swiper { flex: 1; min-width: 0; }
.rl-scene-swiper .swiper-slide {
    transform: scale(.88);
    transition: transform .3s ease;
}
.rl-scene-swiper .swiper-slide-active { transform: scale(1); }
/* 풍경 슬라이드 이미지 (roundlab_main4_1~7.png) */
.rl-scene-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--rl-radius);
}
/* 좌우 화살표 (시안: 블루 사각 버튼 + 흰 화살표) */
.rl-scene-nav {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--rl-primary);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: background .2s ease;
}
.rl-scene-nav:hover { background: var(--rl-navy); }

/* 기념품 영상 섹션 (index) — 선물상자 영상(1회 자동재생)을 클릭하면 소개 영상으로 전환
   배경은 영상 배경색과 같은 톤 — 타이틀 밴드와 영상 위쪽 경계에 이음새가 보이면 이 값을 조정 */
.rl-gift {
    background: #C7E8FA;
    padding: 44px 15px 48px;
}
.rl-gift-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    color: var(--rl-navy);
    margin: 0 0 20px;
}
/* 풀폭이면 대형 모니터에서 과하게 커져 최대 폭 제한 (1000px은 너무 작다는 피드백 → 1300px) */
.rl-gift-stage {
    position: relative;
    overflow: hidden;
    max-width: 1300px;
    margin: 0 auto;
}
.rl-gift-video { display: block; width: 100%; }
.rl-gift-video--box { cursor: pointer; }
/* 소개 영상: 평소엔 투명 + 위로 살짝 올라간 상태로 대기 → 클릭 시 아래(↓)로 내려오며 나타남 */
.rl-gift-video--intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(-30px);
    pointer-events: none;
    transition: opacity .7s ease, transform .7s ease;
}
.rl-gift-stage.is-open .rl-gift-video--box {
    opacity: 0;
    transition: opacity .7s ease;
}
.rl-gift-stage.is-open .rl-gift-video--intro {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* 주최/주관/후원·협찬 로고 바 (index_roundlab.php)
   sponsor_1~9.png 은 22~41px 높이의 텍스트형 로고 → 원본 크기 그대로 표시 */
.rl-sponsor {
    padding: 34px 0;
    background: #fff;
    border-top: 1px solid var(--rl-line);
}
/* 마퀴(전광판식) 무한루프: 동일 시퀀스 2벌을 담은 트랙을 -50%(= 시퀀스 1벌 폭)만큼
   이동시키는 애니메이션을 무한 반복 → 이음새 없이 물 흐르듯 흐름 */
.rl-sponsor-marquee { overflow: hidden; }
.rl-sponsor-track {
    display: flex;
    width: max-content;
    /* -50% = 시퀀스 3벌 폭 이동. 40s는 기본값 — index 스크립트가 전광판 티커와
       같은 px/s 가 되도록 트랙 폭 실측 후 duration 을 재계산해 덮어씀 */
    animation: rl-sponsor-marquee 40s linear infinite;
}
.rl-sponsor-marquee:hover .rl-sponsor-track { animation-play-state: paused; }
.rl-sponsor-seq {
    display: flex;
    align-items: center;
    gap: 0 44px;
    /* 시퀀스 끝과 다음 시퀀스 시작 사이 간격 (그룹 간 gap과 동일) */
    padding-right: 44px;
}
@keyframes rl-sponsor-marquee {
    to { transform: translateX(-50%); }
}
.rl-sponsor-group {
    display: flex;
    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) {
    /* 모바일 브레드크럼 바(responsive.css에서 position:absolute 오버레이)를 헤더(80px) 바로 아래에 고정.
       기존 margin-top 방식은 #sub_content의 margin-top(responsive.css 100px)이 부모와 상쇄(collapse)되며
       바 위치가 함께 아래로 밀려 본문 이미지 상단이 바 위로 뚫고 노출되는 문제가 있었음 → top 고정으로 변경 */
    .sub_three_map_wrap.breadcrumbs { margin-top: 0; top: 80px; }
    /* 본문 시작 위치: 헤더 80px + 브레드크럼 바 약 56px + 간격.
       margin-top은 위의 상쇄 문제를 다시 일으키므로 padding으로 처리 (서브페이지 공통 보정) */
    #sub_content { margin-top: 0; padding-top: 150px; }
    /* 공통 보정으로 대체 — 01_01 상단 이미지 개별 보정 해제 */
    section.company.company_02 .ceo-box.data-image { margin-top: 0; }
}

#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);
}
/* 이미지와 본문 사이 중앙 배치형 슬로건 (2026.07 대회소개 3단 구성) */
section.company .about_text h1.rl-intro-title--center {
    text-align: center;
    margin-top: 10px;
}
/* 본문 폭 제한: 전체 폭으로 퍼지면 한 줄이 너무 길어 가독성 저하 → 중앙 블록으로 제한 */
section.company .about_text .text.rl-intro-body {
    max-width: 900px;
    margin: 0 auto;
}
/* 컨텐츠 미수령 페이지 공통 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 2458×1639 가로형):
   박스 비율을 원본 비율에 맞춰(aspect-ratio) 크롭 없이 전체 표시.
   이미지 교체 시 비율 수치만 새 원본 크기로 갱신 */
section.company.company_02 .ceo-box.data-image {
    background-size: cover;
    background-position: center;
    aspect-ratio: 2458 / 1639;
    height: auto;
    margin-bottom: 50px;
    background-color: #cfe3f6;
}
/* 서브페이지 본문 이미지 표준 (01_02 대회개요, 01_03 코스, 01_04 기념품 등):
   페이지 컨테이너 폭에 맞춰 타이틀과 좌우가 정렬됨.
   sub.css의 .img_wrap_full(뷰포트 전체 폭, 최대 1800px)은 화면을 벗어나 라운드랩에서는 사용하지 않음.
   앞으로 서브페이지에 이미지를 추가할 때는 이 클래스를 사용할 것 */
.rl-content-img {
    display: block;
    width: 100%;
    margin: 0 auto;
}
/* 대회개요(01_02) 이미지 확대: 원본 jpg의 내부 흰 여백(좌우 약 12%/11%, 상하 약 9%/16%)을 크롭해
   콘텐츠가 페이지 타이틀(대회개요) 폭 기준으로 크게 보이도록 함.
   측정 기준: 원본 2001×1113, 콘텐츠 영역 x237~1778, y99~939 — 이미지 교체 시 수치 재계산 필요 */
.rl-overview-crop { overflow: hidden; }
.rl-overview-crop .rl-content-img {
    width: 129.9%;
    max-width: none;
    margin-left: -15.4%;
    margin-top: -6.4%;
    margin-bottom: -11.3%;
}

/* 보험 안내 이미지 (01_05.php, 원본 2001×888): 이미지 내부의 상하좌 여백을 크롭하고
   이미지 속 타이틀이 본문 제목(h1 24px)과 비슷한 크기가 되도록 1000px 폭으로 축소 표시.
   이미지 교체 시(확정본 표) 여백 비율 재측정 필요 */
.rl-insurance-crop {
    max-width: 1000px;
    overflow: hidden;
    margin: 30px 0 10px;
}
.rl-insurance-crop .rl-content-img {
    width: 107%;
    max-width: none;
    margin-left: -6%;
    margin-top: -3%;
    margin-bottom: -7%;
}

/* -----------------------------------------------------------------------------
   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> 내부, 시안: 2단 구성) ------------------
   상단(.rl-foot, #DBE2E7): 공지사항 + 불릿 안내 링크 4개 + 게시판 버튼 3개
   하단(.rl-foot-dark, 검정): 문의 안내 + 고객센터 연락처 */
.rl-foot { padding: 34px 0 40px; }
.rl-foot .rl-inner,
.rl-foot-dark .rl-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 2행: 공지사항 타이틀 + 불릿 링크 (한 줄 좌우 분배) */
.rl-foot-row {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 24px;
}
.rl-foot-row-title { font-size: 19px; font-weight: 900; }
footer .rl-foot-row-title a,
footer .rl-foot-row-title a:link,
footer .rl-foot-row-title a:visited { color: var(--rl-navy) !important; }
footer .rl-foot-row-title a:hover { color: var(--rl-primary) !important; }
.rl-foot-row li + li::before {
    content: "\2022";   /* • */
    margin-right: 8px;
    font-weight: 700;
    color: #111;
}
/* link/visited 상태 포함 강제 (layout.css 푸터 링크색에 지지 않도록) */
footer .rl-foot-row li a,
footer .rl-foot-row li a:link,
footer .rl-foot-row li a:visited {
    font-size: 15px;
    font-weight: 700;
    color: #111 !important;
}
footer .rl-foot-row li a:hover { color: var(--rl-primary) !important; }

/* 1행: 게시판 버튼 3개 (시안: 진한 블루 필 버튼, 좌우로 분배) */
.rl-foot-btns {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
/* 레이아웃 속성은 :link/:visited 없이 선언 — pseudo-class를 붙이면 특이도가 높아져
   모바일 미디어쿼리의 flex:none 오버라이드가 지고, column 축에서 flex-basis 280px가
   버튼 '높이' 280px로 적용되는 버그가 생김. 색상만 pseudo-class로 강제 */
footer .rl-foot-btn {
    flex: 0 1 280px;
    padding: 11px 10px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    background: var(--rl-section-blue);
    transition: background .2s ease;
}
footer .rl-foot-btn,
footer .rl-foot-btn:link,
footer .rl-foot-btn:visited { color: #fff !important; }
footer .rl-foot-btn:hover { background: var(--rl-navy); color: #fff !important; }

/* 하단 검정 밴드: 문의 안내 + 연락처 */
.rl-foot-dark { background: #0d0d0d; padding: 30px 0; }
.rl-foot-dark .rl-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 30px;
}
.rl-foot-dark h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}
/* layout.css 의 `footer p { color: #979ba3 !important }` 를 이기기 위해 !important 필요 */
footer .rl-foot-contact {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #fff !important;
}
.rl-foot-contact .rl-foot-cs-label { font-size: 13px; font-weight: 700; color: #b7b7b7; }
.rl-foot-contact .rl-foot-bar { color: #555; }
footer .rl-foot-contact a,
footer .rl-foot-contact a:link,
footer .rl-foot-contact a:visited { color: #fff !important; }
footer .rl-foot-contact a:hover { color: var(--rl-primary) !important; }

/* --- 푸터 전체 배경: 시안 상단 톤(#DBE2E7) --------------------------------- */
footer,
footer .footer-menu {
    background-color: #dbe2e7 !important;   /* 시안 상단 배경색 */
}
footer { padding-bottom: 0 !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); }
/* 상단 링크줄(개인정보보호정책/유의사항/관리자)을 아래 공지사항 줄(.rl-inner 1200px)과 왼쪽 정렬:
   부트스트랩 .container(1170px) + .breadcrumb/링크 자체 왼쪽 패딩 때문에 시작 위치가 어긋남 */
@media (min-width: 992px) {
    footer .footer-menu .container { width: auto; max-width: 1200px; padding: 0 15px; }
    footer .footer-menu .breadcrumb { padding-left: 0; }
    footer .footer-menu ul li:first-child a { padding-left: 0; }
}

/* 스폰서/후원 로고 바 배경 (필요 시 사용) */
.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, 1100×1197)
       인라인 배경보다 우선하도록 !important. 히어로 비율도 이미지 원본 비율에 맞춤(안 맞으면 cover가 좌우를 자름).
       ⚠️ 이미지 URL에 ?v 붙임: 같은 파일명으로 이미지를 교체하면 브라우저가 옛 이미지를 캐시함 → 이미지 바꿀 때마다 ?v 숫자를 올릴 것 */
    :root { --rl-hero-ratio: 0.919; } /* 1100 / 1197 */
    #index_swiper .swiper-slide {
        background-image: url(../img/main_visual_roundlab_m.jpg?v=20260803) !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: 0 0 50px; }
    .rl-course-head { padding: 38px 0 30px; margin-bottom: 34px; }
    .rl-course-head::before,
    .rl-course-head::after { display: none; }
    .rl-course-tabs { gap: 8px; }
    .rl-course-tab { padding: 8px 14px; font-size: 14px; border-radius: 9px; }
    /* 코스 풍경 슬라이드 축소 */
    .rl-scene { margin-top: 40px; }
    .rl-scene-slider { gap: 10px; }
    /* 모바일은 1장씩 표시(Swiper breakpoints) → 슬라이드가 전체 폭이라 높이 여유 있게 */
    .rl-scene-swiper .swiper-slide img { height: 180px; }
    .rl-scene-nav { width: 32px; height: 32px; font-size: 18px; border-radius: 6px; }
    /* 기념품 영상 섹션 축소 */
    .rl-gift { padding: 30px 15px 32px; }
    .rl-gift-title { font-size: 19px; margin-bottom: 14px; }

    /* 전광판 티커 축소 */
    .rl-ticker { padding: 9px 0; }
    .rl-ticker-seq { font-size: 14px; gap: 0 18px; padding-right: 18px; }
    .rl-ticker-logo { height: 12px; }

    /* 스폰서 로고 바(마퀴): 간격/로고 축소만, 한 줄 흐름은 유지 */
    .rl-sponsor { padding: 26px 0 30px; }
    .rl-sponsor-seq { gap: 0 24px; padding-right: 24px; }
    .rl-sponsor-group { gap: 8px 14px; }
    .rl-sponsor-group img { zoom: 0.5; } /* 모바일: 로고 추가 축소 */

    /* 참가신청 열기구 float 버튼: 모바일에서도 표시하되 작게 (오버레이 링크는 %라 자동 스케일) */
    .rl-float { left: 10px; width: 92px; }
    .rl-float-close { width: 22px; height: 22px; top: -4px; right: 8px; font-size: 14px; line-height: 18px; }

    /* 컨텐츠 미수령 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;
    }
    /* 대회소개 상단 이미지: 데스크톱과 동일하게 원본 비율(aspect-ratio) 유지 — 높이 고정 불필요 */
    section.company.company_02 .ceo-box.data-image {
        margin-bottom: 30px;
    }
    section.company .about_text h1.rl-intro-title { margin-bottom: 30px; }
    /* 영문 카피는 화면 폭에 맞춰 축소해 항상 한 줄 유지 (sub.css h1 28px 고정 → 좁은 화면에서 줄바꿈 방지) */
    .rl-intro-title--center .rl-intro-en {
        font-size: clamp(15px, 5vw, 28px);
        white-space: nowrap;
    }
    .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-row {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 18px;
    }
    .rl-foot-btns {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    footer .rl-foot-btn { flex: none; width: 100%; max-width: 320px; }
    .rl-foot-dark { padding: 22px 0; }
    .rl-foot-dark .rl-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .rl-foot-dark h2 { font-size: 20px; }
    footer .rl-foot-contact { justify-content: center; }
    .rl-foot-contact .rl-foot-bar { display: none; }
    /* 마퀴 한 줄 흐름 유지를 위해 라벨 줄바꿈(flex-basis 100%) 제거, 크기만 축소 */
    .rl-sponsor-label { font-size: 14px; }
    .rl-course-badge { margin-bottom: 8px; }
}