/* =========================================================
   JCC.TV 메인페이지 새 디자인 (Phase 2)
   - style.css / screen.css / responsive-patch.css 는 그대로 둔다.
   - 이 파일은 가장 마지막에 로드되어, 기존 table 레이아웃을
     CSS grid/flex 로 다시 짜고 카드형 디자인을 입힌다.
   - HTML/PHP 의 한글 텍스트, include() 구조는 전혀 건드리지 않는다.
   ========================================================= */

:root {
    --jcc-navy: #003366;
    --jcc-navy-dark: #001f3f;
    --jcc-blue: #1d6fd1;
    --jcc-accent: #ffcc00;
    --jcc-bg: #eef2f7;
    --jcc-card: #ffffff;
    --jcc-line: #e2e8f0;
    --jcc-radius: 14px;
    --jcc-radius-sm: 8px;
    --jcc-shadow: 0 4px 16px rgba(0, 51, 102, 0.10);
    --jcc-font: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

html, body {
    background: var(--jcc-bg);
}
/* 항상 세로 스크롤바 영역 확보 → 내용 길이에 상관없이 페이지마다
   가로 중심이 흔들리지 않음 (스크롤바 점프 방지) */
html {
    overflow-y: scroll;
}

body, td, font, a, div, th {
    font-family: var(--jcc-font);
}

/* ---------------------------------------------------------
   전체 래퍼
   --------------------------------------------------------- */
#page-wrapper {
    max-width: 1060px;
    width: 100%;
    background: var(--jcc-bg);
    border-collapse: separate;
}

#page-wrapper > tbody > tr > td {
    padding: 0;
}

/* ---------------------------------------------------------
   상단 바 (로고 + 언어 선택)
   --------------------------------------------------------- */
#menu-top {
    width: 100% !important;
    max-width: 100%;
    background: linear-gradient(135deg, #003366 0%, #001f3f 100%) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-radius: var(--jcc-radius) var(--jcc-radius) 0 0;
}
#menu-top > tbody,
#menu-top > tbody > tr {
    display: contents;
}
#menu-logo {
    display: flex;
    align-items: center;
}
#menu-logo img {
    max-height: 38px;
    width: auto;
}
#menu-lang {
    text-align: right;
}
#menu-lang table {
    margin-left: auto;
}
#menu-lang a.menu {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    margin: 2px;
    transition: background 0.15s ease;
}
#menu-lang a.menu:hover {
    background: var(--jcc-accent);
    color: var(--jcc-navy-dark);
}

/* ---------------------------------------------------------
   메인 내비게이션 바
   --------------------------------------------------------- */
#menu-nav {
    width: 100% !important;
    max-width: 100%;
    background: linear-gradient(135deg, #d8001f 0%, #9c0014 100%) !important;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 50;
}
#menu-nav > tbody,
#menu-nav > tbody > tr {
    display: contents;
}
#menu-nav-spacer {
    display: none;
}
#menu-nav-links {
    flex: 1 1 auto;
    padding: 12px 18px;
    line-height: 2.1;
}
#menu-nav-links a.menu {
    padding: 4px 2px;
    transition: color 0.15s ease;
}
#menu-nav-phone,
#menu-nav-time {
    flex: 0 0 auto;
    padding: 8px 10px;
    display: flex;
    align-items: center;
}
#menu-nav-phone img,
#menu-nav-time img {
    border-radius: var(--jcc-radius-sm);
    transition: transform 0.15s ease;
}
#menu-nav-phone img:hover,
#menu-nav-time img:hover {
    transform: translateY(-2px);
}

/* 서브메뉴(인사말/예배안내 등) 드롭다운 - 위치만 다시 잡고
   표시/숨김은 기존 자바스크립트(MM_showHideLayers)가 그대로 담당 */
#menu-sublayer {
    width: 100% !important;
    max-width: 100%;
    height: 8px;
    position: relative;
    background: linear-gradient(180deg, #2b2b2b 0%, #000000 100%) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
#menu-sublayer > tbody,
#menu-sublayer > tbody > tr {
    display: contents;
}
#menu-sublayer td {
    background: transparent !important;
    padding: 0 !important;
    height: 8px !important;
    line-height: 0;
}
#Layer1, #Layer2, #Layer3, #Layer4 {
    position: absolute !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    background: linear-gradient(180deg, #2b2b2b 0%, #000000 100%);
    border-radius: 0 0 var(--jcc-radius) var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    padding: 10px 18px;
    box-sizing: border-box;
}
#Layer1 table, #Layer2 table, #Layer3 table, #Layer4 table {
    margin: 0 auto;
}
#Layer1 a.menu, #Layer2 a.menu, #Layer3 a.menu,
#Layer4 a.menu {
    padding: 2px 6px;
}

/* ---------------------------------------------------------
   본문 2단 레이아웃 (왼쪽 사이드바 + 메인 콘텐츠)
   --------------------------------------------------------- */
#main-table {
    width: 100% !important;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
    padding: 18px;
    box-sizing: border-box;
    background: var(--jcc-bg) !important;
}
#main-table > tbody,
#main-table > tbody > tr {
    display: contents;
}
#hero-spacer {
    display: none;
}

/* 좌측 사이드바 - 네이비 카드 하나로 묶고, 내부 위젯은 구분선으로 분리 */
#sidebar {
    flex: 0 0 220px;
    max-width: 220px;
    background: var(--jcc-navy) !important;
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    padding: 16px 12px;
    box-sizing: border-box;
}
#sidebar-stack {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#sidebar-stack > tbody,
#sidebar-stack > tbody > tr {
    display: contents;
}
#sidebar-stack > tbody > tr > td {
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#sidebar-stack > tbody > tr:last-child > td {
    border-bottom: none;
    padding-bottom: 0;
}
#sidebar-stack table {
    width: 100% !important;
    max-width: 100%;
}
#sidebar img {
    max-width: 100%;
    border-radius: var(--jcc-radius-sm);
}
#sidebar .pdf-link {
    color: #ffffff !important;
}
#main-content {
    flex: 1 1 600px;
    min-width: 0;
}

/* 메인 슬라이더 */
#container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--jcc-radius);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 51, 102, 0.22);
    margin: 0 0 16px 0 !important;
}

/* 이번주 예배/방송 안내 배너 */
#schedule-banner {
    width: 100% !important;
    max-width: 100%;
    background: var(--jcc-card);
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    padding: 14px 18px !important;
    margin-bottom: 16px;
    box-sizing: border-box;
}
#schedule-banner td {
    padding: 0 !important;
}

/* ---------------------------------------------------------
   콘텐츠 카드 그리드
   (표지/최신영상/사진+만화+말씀 | 본문/온누리소식)
   --------------------------------------------------------- */
#content-grid {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
    grid-template-areas:
        "cover   newvod"
        "text    ong"
        "side    side";
    gap: 16px;
}
#content-grid > tbody,
#content-grid > tbody > tr {
    display: contents;
}
#grid-spacer-1, #grid-spacer-2, #grid-spacer-3, #grid-spacer-4 {
    display: none;
}

#cover-box,
#newvod-box,
#side-column,
#text-box,
#ong-box {
    background: var(--jcc-card);
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    padding: 14px !important;
    box-sizing: border-box;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

#cover-box { grid-area: cover; }
#newvod-box { grid-area: newvod; }
#side-column { grid-area: side; }
#text-box { grid-area: text; }
#ong-box { grid-area: ong; }

/* 사진/카툰/지혜의 말씀 - 본문 아래 가로로 배치 */
#side-column {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
#side-column br {
    display: none;
}
#side-column > table {
    width: auto !important;
    flex: 1 1 180px;
    min-width: 0;
}

#cover-box table,
#newvod-box table,
#side-column table,
#text-box table,
#ong-box table {
    width: 100% !important;
    background: transparent !important;
}

#side-column table[bgcolor="#cccccc"],
#cover-box table[bgcolor],
#newvod-box table[bgcolor] {
    background: var(--jcc-bg) !important;
    border-radius: var(--jcc-radius-sm);
}

/* 이미지 공통 */
#content-grid img,
#sidebar img {
    border-radius: var(--jcc-radius-sm);
}

/* 카드 안 제목 이미지(타이틀 gif)는 라운드 처리 제외 */
#content-grid img[height="20"],
#content-grid img[height="21"],
#content-grid img[height="17"],
#content-grid img[height="14"],
#content-grid img[height="15"],
#content-grid img[height="12"],
#content-grid img[width="108"] {
    border-radius: 0;
}

/* ---------------------------------------------------------
   반응형
   --------------------------------------------------------- */
@media screen and (max-width: 900px) {
    #content-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "cover   newvod"
            "side    side"
            "text    ong";
    }
}

@media screen and (max-width: 768px) {
    #page-wrapper {
        border-radius: 0;
    }
    #menu-top {
        border-radius: 0;
        flex-wrap: wrap;
    }
    #main-table {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px;
        gap: 14px;
    }
    #page-footer > tbody > tr > td {
        padding: 0 12px 12px 12px;
    }
    #sidebar {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    #sidebar table {
        flex: 1 1 45%;
    }
    #content-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "cover"
            "newvod"
            "side"
            "text"
            "ong" !important;
        gap: 14px;
    }
}

/* ---------------------------------------------------------
   하단 푸터
   --------------------------------------------------------- */
#page-footer,
#page-footer > tbody,
#page-footer > tbody > tr,
#page-footer > tbody > tr > td {
    display: block;
}
#page-footer {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent !important;
    text-align: center;
}
#page-footer > tbody > tr > td {
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 18px 18px 18px;
    margin-top: 18px;
}
#page-footer table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    background: transparent !important;
    border-collapse: collapse;
    border-spacing: 0;
}
#page-footer table td {
    padding: 14px 18px !important;
    text-align: center !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
}
#page-footer table tr:first-child td {
    background: linear-gradient(135deg, #d8001f 0%, #9c0014 100%) !important;
    border-radius: var(--jcc-radius) var(--jcc-radius) 0 0;
    border-bottom: 6px solid #000000;
}
#page-footer table tr:last-child td {
    background: linear-gradient(135deg, #003366 0%, #001f3f 100%) !important;
    border-radius: 0 0 var(--jcc-radius) var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
}
#page-footer a.menu {
    padding: 2px 6px;
    transition: color 0.15s ease;
}
#page-footer font {
    line-height: 1.7;
    font-size: 12px;
}

/* ---------------------------------------------------------
   교회소개 등 서브페이지 공통 (introduce.html)
   --------------------------------------------------------- */
#intro-card {
    background: var(--jcc-card);
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    padding: 18px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}
#intro-card table {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}
#intro-card img {
    max-width: 100%;
    height: auto;
}

/* 좌측 서브메뉴 */
#intro-menu {
    width: 100% !important;
    max-width: 100%;
}
#intro-menu td[bgcolor="#003366"] {
    background: transparent !important;
}
#intro-menu img {
    max-width: 100%;
}

/* 인사말 (insa.html) */
#insa-table {
    width: 100% !important;
    max-width: 100%;
}
#insa-hero {
    width: 100% !important;
    max-width: 440px;
    margin: 0 auto 18px auto;
}
#insa-hero img {
    width: 100%;
    height: auto;
}
.insa-greeting {
    background: var(--jcc-bg);
    border-radius: var(--jcc-radius);
    padding: 20px !important;
    margin-bottom: 16px;
}
.insa-greeting b {
    font-size: 17px;
    line-height: 1.8;
    color: var(--jcc-navy);
}
.insa-body {
    font-size: 14px;
    line-height: 2;
    color: #333333;
    padding: 4px 4px 16px 4px !important;
}
#insa-gallery {
    width: 100% !important;
    max-width: 440px;
    margin: 4px auto 16px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
#insa-gallery > tbody,
#insa-gallery > tbody > tr {
    display: contents;
}
#insa-gallery td {
    flex: 1 1 90px;
    max-width: 110px;
    padding: 0 !important;
}
#insa-gallery img {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--jcc-radius-sm);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}
#insa-gallery img:hover {
    transform: scale(1.06);
}

#insa-address {
    width: 100% !important;
    max-width: 440px;
    margin: 0 auto;
    border-radius: var(--jcc-radius-sm);
}

/* ── 지교회 안내 (branch1~5.html) ── */
#branch-outer {
    width: 100% !important;
    max-width: 100%;
}

#branch-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    font-size: 13px;
    box-shadow: 0 6px 28px rgba(0, 51, 102, 0.14);
}

/* ── 헤더: 강한 네이비 ── */
#branch-table tr:first-child td {
    background: linear-gradient(135deg, #003366 0%, #002255 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.8px;
    padding: 14px 12px !important;
    text-align: center !important;
    border: none !important;
    white-space: nowrap;
}
#branch-table tr:first-child td b {
    color: #ffffff !important;
}

/* ── 데이터 셀 기본 ── */
#branch-table tr td {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #e8eef6 !important;
    padding: 12px 13px !important;
    vertical-align: middle;
    color: #2c3e50;
    line-height: 1.65;
}

/* 짝수 행 아주 연한 파란 배경 */
#branch-table tr:nth-child(even) td {
    background: #f4f8fe !important;
}

/* 행 hover */
#branch-table tr:not(:first-child):hover td {
    background: #ddeeff !important;
    transition: background 0.13s ease;
}

/* ── 연속행의 첫 번째 셀 (교회명, td 4개 행) — 연한 스타일 ── */
#branch-table tr:not(:first-child) td:first-child {
    background: #edf3fc !important;
    color: #3a5a80 !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-right: 2px solid #c5d8f0 !important;
    white-space: nowrap;
}

/* ── 실제 분류 셀: 행에 td가 5개일 때 첫 번째 = 분류 열 ── */
#branch-table tr:not(:first-child) td:first-child:nth-last-child(5) {
    background: linear-gradient(180deg, #003d80 0%, #002255 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    letter-spacing: 1.5px;
    border-right: 3px solid #4d94d4 !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* ── rowspan 분류 셀 (다중행 지역) — 동일한 네이비 ── */
#branch-table tr td[rowspan] {
    background: linear-gradient(180deg, #003d80 0%, #002255 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    letter-spacing: 1.5px;
    border: none !important;
    border-right: 3px solid #4d94d4 !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* ── 약도/전경 버튼 ── */
#branch-table a img {
    display: none !important;
}
#branch-table a {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff !important;
    padding: 3px 10px;
    margin: 2px 1px;
    border-radius: 4px;
    background: var(--jcc-blue) !important;
    border: none !important;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.13s ease;
    box-shadow: 0 1px 4px rgba(29, 111, 209, 0.3);
}
#branch-table a:hover {
    background: var(--jcc-navy) !important;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.4);
    transform: translateY(-1px);
}

/* ── 페이지 네비게이션 ── */
#branch-nav {
    padding: 20px 0 8px 0 !important;
    text-align: center;
    background: #f8fafd;
    border-top: 2px solid #e0eaf6;
}
#branch-nav a {
    display: inline-block;
    min-width: 34px;
    height: 34px;
    line-height: 32px;
    text-align: center;
    margin: 3px;
    border: 2px solid #c5d4e8;
    border-radius: 8px;
    color: #3d5a80 !important;
    font-size: 13px;
    font-weight: 700;
    background: #fff;
    text-decoration: none !important;
    transition: all 0.13s ease;
}
#branch-nav a:hover {
    background: var(--jcc-blue) !important;
    border-color: var(--jcc-blue) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(29, 111, 209, 0.3);
}
#branch-nav font[color="#cf0000"] {
    display: inline-block;
    min-width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin: 3px;
    background: linear-gradient(135deg, #003366 0%, #002255 100%) !important;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 51, 102, 0.3);
}

/* 예배안내 탭 + 시간표 (seoul/inchun/local/internet.html) */
#worship-tabs {
    width: 100% !important;
    max-width: 535px;
    margin: 0 auto 14px auto;
}
#worship-tabs td {
    padding: 0 4px !important;
}
#worship-tabs img {
    border-radius: var(--jcc-radius-sm);
    transition: transform 0.15s ease;
}
#worship-tabs a:hover img {
    transform: translateY(-2px);
}

#worship-schedule-wrap {
    width: 100% !important;
    max-width: 100%;
    border: none !important;
    border-collapse: separate;
    background: var(--jcc-card);
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    overflow: hidden;
}
#worship-schedule-wrap td {
    border: none !important;
    padding: 16px !important;
    height: auto !important;
}
#worship-schedule {
    width: 100% !important;
    max-width: 100%;
    border: none !important;
    border-collapse: collapse;
}
#worship-schedule td {
    border: 1px solid var(--jcc-line) !important;
    padding: 10px !important;
    text-align: center;
    font-size: 13px;
}
#worship-schedule tr:first-child td {
    background: var(--jcc-navy) !important;
    color: #ffffff !important;
    font-weight: bold;
}
#worship-schedule tr:first-child td b {
    color: #ffffff;
}
#worship-schedule td[rowspan] {
    background: var(--jcc-bg);
    font-weight: bold;
    color: var(--jcc-navy);
}

/* 예배 장소 사진 (seoul.html) - 좌: 외부, 우: 내부 */
#worship-place-photo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 14px 0;
}
#worship-place-photo img {
    flex: 1 1 240px;
    max-width: 240px;
    width: 100%;
    height: auto;
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
}
#insa-address td {
    font-size: 13px;
    line-height: 1.9;
    color: #555555;
    padding: 14px !important;
}

/* ═══ 기도원 (gido.html) ═══ */
#gido-outer {
    width: 100% !important;
    max-width: 960px;
    box-sizing: border-box;
}
#gido-text {
    width: 100% !important;
    background: var(--jcc-card);
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    overflow: hidden;
}
#gido-text td {
    padding: 20px 22px !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    color: #3a3a3a !important;
    vertical-align: top !important;
}
#gido-text p img {
    border-radius: var(--jcc-radius-sm);
    box-shadow: 0 2px 10px rgba(0,51,102,0.13);
    max-width: 100%;
    height: auto;
}
#gido-address {
    display: inline-block;
    background: linear-gradient(135deg, var(--jcc-navy) 0%, var(--jcc-navy-dark) 100%);
    color: #ffffff !important;
    padding: 12px 20px;
    border-radius: var(--jcc-radius-sm);
    font-size: 14px !important;
    line-height: 1.8;
    box-shadow: 0 3px 10px rgba(0,51,102,0.28);
    letter-spacing: 0.02em;
}
#gido-text p a img {
    border: none !important;
    border-radius: var(--jcc-radius-sm);
    transition: opacity 0.2s;
}
#gido-text p a:hover img { opacity: 0.82; }

#gido-photos {
    width: 100% !important;
    border-spacing: 6px !important;
    border-collapse: separate !important;
}
#gido-photos td { padding: 0 !important; }
#gido-photos img {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: var(--jcc-radius-sm);
    box-shadow: 0 2px 8px rgba(0,51,102,0.14);
}

/* ═══ JCM 선교방송 (jcm.html) ═══ */
#jcm-table {
    width: 100% !important;
    max-width: 640px !important;
}
#jcm-table td { padding: 4px 0 !important; }
#jcm-table img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--jcc-radius-sm);
}
.jcm-missions {
    padding: 0 !important;
}
.jcm-missions p {
    background: var(--jcc-card);
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    border-left: 5px solid var(--jcc-blue);
    margin: 8px 0 0 0;
    padding: 18px 22px;
    font-size: 14px;
    line-height: 2.1;
    color: #2a3a50;
}

/* ═══ 헌금 계좌 (ars.html) ═══ */
#ars-outer {
    width: 100% !important;
    max-width: 640px !important;
}
#ars-content td {
    padding: 10px 4px !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
    color: #333 !important;
}
#ars-content img { max-width: 100%; height: auto; }

/* 계좌 테이블 */
#ars-account {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    border-radius: var(--jcc-radius);
    overflow: hidden;
    box-shadow: var(--jcc-shadow);
    margin: 10px 0 !important;
}
#ars-account tr td {
    border: none !important;
    border-bottom: 1px solid #e8eef6 !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
}
#ars-account tr:first-child td {
    background: linear-gradient(135deg, var(--jcc-navy) 0%, var(--jcc-navy-dark) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    padding: 13px 14px !important;
}
#ars-account tr:not(:first-child):nth-child(even) td {
    background: #f4f8fe !important;
}
#ars-account tr:not(:first-child) td {
    background: #ffffff;
}
#ars-account tr:not(:first-child) td:first-child {
    color: var(--jcc-navy) !important;
    font-weight: 600 !important;
}
#ars-account tr:not(:first-child) td:nth-child(2) {
    font-family: monospace;
    letter-spacing: 0.04em;
    color: #2a4070 !important;
}

/* 자동이체 안내 */
#ars-instructions {
    width: 100% !important;
    max-width: 640px !important;
    margin-top: 16px !important;
}
#ars-instructions td {
    background: #fff8e8;
    border-left: 5px solid var(--jcc-accent);
    border-radius: var(--jcc-radius);
    box-shadow: 0 2px 8px rgba(0,51,102,0.07);
    padding: 18px 22px !important;
    font-size: 14px !important;
    line-height: 2.1 !important;
    color: #8b0000 !important;
}

/* ═══ 도서 목록 (book.html) ═══ */
#book-outer {
    width: 100% !important;
    max-width: 640px !important;
}
#book-list {
    width: 100% !important;
}
#book-list > tbody > tr > td > img[src*="book_line"] {
    width: 100% !important;
    height: 2px !important;
    opacity: 0.25;
}
.book-item {
    width: 100% !important;
    background: var(--jcc-card);
    border-radius: var(--jcc-radius);
    box-shadow: var(--jcc-shadow);
    margin: 6px 0 !important;
    overflow: hidden;
}
.book-item td:first-child {
    width: 140px !important;
    padding: 14px 10px 14px 14px !important;
    vertical-align: top !important;
}
.book-item td:first-child img {
    width: 120px !important;
    height: auto !important;
    border-radius: var(--jcc-radius-sm);
    box-shadow: 0 3px 10px rgba(0,51,102,0.18);
    display: block;
}
.book-item td:last-child {
    padding: 16px 16px 16px 8px !important;
    vertical-align: top !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    color: #3a3a3a !important;
}
.book-item td:last-child b font {
    font-size: 15px !important;
    color: var(--jcc-navy) !important;
    font-weight: 700 !important;
}
#book-list td[align=center] {
    padding: 12px 0 !important;
    font-size: 14px !important;
}
#book-list td[align=center] a img {
    vertical-align: middle;
    border-radius: 4px;
}
#book-list tr:last-child td {
    padding: 14px 0 !important;
    font-size: 14px !important;
    color: #c00 !important;
}

/* ═══════════════════════════════════════════════════
   VOD 설교 페이지 (vod2.html, vod90s.html)
   ═══════════════════════════════════════════════════ */

/* ── 전체 레이아웃 (introduce.html의 #main-table과 동일 구조) ── */
#vod-layout-table,
.jcc-layout {
    width: 100% !important;
    max-width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    background: var(--jcc-bg) !important;
}
#vod-layout-table > tbody,
#vod-layout-table > tbody > tr,
.jcc-layout > tbody,
.jcc-layout > tbody > tr {
    display: contents !important;
}
#vod-sidebar-col,
.jcc-side {
    flex: 0 0 190px !important;
    max-width: 190px !important;
    width: 190px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}
#vod-content-col,
.jcc-main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    background: var(--jcc-card) !important;
    border-radius: var(--jcc-radius) !important;
    box-shadow: var(--jcc-shadow) !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
    align-self: flex-start !important;
    text-align: left !important;
}

/* ── 사이드바 메뉴 ── */
#vod-menu-wrap {
    width: 100% !important;
    border-radius: var(--jcc-radius) !important;
    overflow: hidden;
    box-shadow: var(--jcc-shadow);
}
#vod-menu-wrap > tbody > tr:nth-child(3) > td {
    background: var(--jcc-navy) !important;
    padding: 8px 6px 14px !important;
    border-radius: 0 0 var(--jcc-radius) var(--jcc-radius);
}
/* 하단 코너 이미지 행 - 숨기고 네이비 마무리 */
#vod-menu-wrap > tbody > tr:last-child > td {
    background: var(--jcc-navy) !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 0 0 var(--jcc-radius) var(--jcc-radius);
}
#vod-menu-wrap > tbody > tr:last-child img { display: none !important; }
#vod-menu-list { width: 100% !important; }
#vod-menu-list td { padding: 1px 0 !important; }
#vod-menu-list td a.menu {
    color: #cce0ff !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: block;
    padding: 5px 10px !important;
    border-radius: 6px;
    transition: background 0.14s, color 0.14s;
    line-height: 1.4;
}
#vod-menu-list td a.menu:hover {
    background: rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
}
/* 서브 메뉴(교육 하위 항목) */
#vod-menu-list tr td:first-child:empty + td a.menu,
#vod-menu-list tr td:first-child img[src*="jcm_blit"] ~ td a.menu {
    font-size: 12px !important;
    color: #a8c8f8 !important;
    padding-left: 6px !important;
}

/* ── 검색 위젯 ── */
#vod-search-wrap {
    border-radius: var(--jcc-radius-sm) !important;
    overflow: hidden;
    width: 100% !important;
    background: #eef4fc !important;
    border: 1px solid #c0d8f0 !important;
    margin-top: 10px;
}
#vod-search-wrap td,
#vod-search-wrap table td { background: #eef4fc !important; }
#vod-search-wrap input[type=text] {
    border: 1px solid #b0cce8;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 12px;
    width: 75px !important;
    outline: none;
    transition: border 0.15s;
}
#vod-search-wrap input[type=text]:focus {
    border-color: var(--jcc-blue);
    box-shadow: 0 0 0 2px rgba(29,111,209,0.13);
}
#vod-search-wrap font { color: var(--jcc-navy) !important; font-weight: 600; font-size: 12px; }

/* ── VOD 헤더/브레드크럼 ── */
#vod-top { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }
#vod-top > tbody > tr:first-child { display: none; }
#vod-breadcrumb {
    background: linear-gradient(90deg, #e8f1fc 0%, #f5f8ff 100%) !important;
    border-radius: var(--jcc-radius-sm) !important;
    border-left: 4px solid var(--jcc-blue) !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    color: #446 !important;
}
#vod-breadcrumb a { color: var(--jcc-blue) !important; text-decoration: none; }
#vod-breadcrumb a:hover { text-decoration: underline; }
#vod-breadcrumb font[color='#cf0000'] { color: var(--jcc-navy) !important; font-weight: 700; }
/* 타이틀 이미지 행 배경 */
#vod-top > tbody > tr:nth-child(3) td {
    background: linear-gradient(135deg, #eaf1fb 0%, #f7f9fd 100%) !important;
    padding: 10px 6px !important;
    vertical-align: bottom !important;
}
#vod-top > tbody > tr:nth-child(3) img { max-width: 100%; height: auto; }
/* 구분선 행 */
#vod-top > tbody > tr:last-child td { padding: 0 !important; }
#vod-top > tbody > tr:last-child img {
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--jcc-blue), var(--jcc-navy)) !important;
    filter: hue-rotate(0deg) brightness(0.6) saturate(2);
}

/* ── VOD 목록 테이블 ── */
#vod-list-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-radius: var(--jcc-radius) !important;
    overflow: hidden;
    box-shadow: var(--jcc-shadow);
    margin-top: 2px !important;
}
/* 자료수 표시행 */
#vod-list-table > tbody > tr:first-child td {
    background: #f4f8ff !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    color: #667 !important;
    text-align: right !important;
    border-bottom: 1px solid #e0eaf8 !important;
}
/* 타이틀 배경 gif 행 - 숨김 */
#vod-list-table td[background*="board_title_back"],
#vod-list-table td[background*="vod_bbs_top"],
#vod-list-table td[height="13"] { display: none !important; }
/* 헤더 행 */
#vod-list-table tr#vod-list-header td,
#vod-list-table tr[id='vod-list-header'] td {
    background: linear-gradient(135deg, var(--jcc-navy) 0%, #004080 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 13px 10px !important;
    border: none !important;
    white-space: nowrap;
}
/* 구분선(sep) 행 숨김 */
.vod-sep { display: none !important; }
/* 데이터 행 */
.vod-row {
    border-bottom: 1px solid #eef2f9 !important;
    transition: background 0.12s;
    height: auto !important;
}
.vod-row td {
    background: #ffffff !important;
    vertical-align: middle !important;
    border: none !important;
    padding: 11px 9px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}
.vod-row:nth-child(even) td { background: #f7faff !important; }
.vod-row:hover td {
    background: #eaf2fd !important;
    cursor: pointer;
}
/* 번호 칸 */
.vod-row td:first-child {
    color: #99aacc !important;
    font-size: 12px !important;
    text-align: center !important;
    width: 44px !important;
}
/* 제목 칸 */
.vod-row td:nth-child(2) {
    color: #1a2a44 !important;
    font-weight: 500 !important;
    text-align: left !important;
}
.vod-row td:nth-child(2) div {
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-word !important;
    line-height: 1.6 !important;
    padding-bottom: 2px !important;
}
/* 아이콘 화살표 이미지 */
.vod-row td img[src*="icon_board_arrow"] {
    opacity: 0.5;
    vertical-align: middle;
}
/* 설교자 칸 */
.vod-row td:nth-child(3) {
    color: #555 !important;
    font-size: 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
}
/* 재생 버튼 칸 */
.vod-row td:nth-child(4) {
    text-align: center !important;
    white-space: nowrap !important;
}
.vod-row td a img[src*="btn_vod"],
.vod-row td a img[src*="v56k"],
.vod-row td a img[src*="v200k"] {
    border-radius: 3px;
    vertical-align: middle;
    transition: opacity 0.15s;
}
.vod-row td a:hover img { opacity: 0.8; }
/* YouTube 버튼 강조 */
.vod-row td a img[src*="ico_youtube"] {
    border-radius: 4px;
    vertical-align: middle;
    filter: drop-shadow(0 1px 3px rgba(255,0,0,0.25));
}
/* 날짜 칸 */
.vod-row td:last-child,
.vod-row td:nth-child(5) {
    color: #8899bb !important;
    font-size: 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* 하단 배경 gif 행 숨김 */
#vod-list-table td[background*="vod_bbs_bottom"],
#vod-list-table td[height="9"] { display: none !important; }

/* ── 페이지네이션 ── */
#vod-list-table td[align='center'][height='45'],
#vod-list-table td[align='center'][height='30'] {
    background: #f4f8ff !important;
    padding: 14px 8px !important;
    border-top: 1px solid #e0eaf8 !important;
}
#vod-list-table td[align='center'][height='45'] a,
#vod-list-table td[align='center'][height='30'] a {
    display: inline-block !important;
    color: var(--jcc-blue) !important;
    text-decoration: none !important;
    padding: 4px 9px !important;
    border: 1px solid #c0d8f0 !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    margin: 0 2px !important;
    background: #fff !important;
    transition: all 0.14s;
    vertical-align: middle !important;
}
#vod-list-table td[align='center'][height='45'] a:hover,
#vod-list-table td[align='center'][height='30'] a:hover {
    background: var(--jcc-blue) !important;
    color: #fff !important;
    border-color: var(--jcc-blue) !important;
}
/* 현재 페이지 (font color=red) */
#vod-list-table td[align='center'][height='45'] font[color='red'],
#vod-list-table td[align='center'][height='30'] font[color='red'] {
    display: inline-block !important;
    background: var(--jcc-navy) !important;
    color: #ffffff !important;
    padding: 4px 9px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-style: normal !important;
    margin: 0 2px !important;
    vertical-align: middle !important;
}
/* 페이지네이션 gif 버튼 */
#vod-list-table td[align='center'] img[src*="btn_go"],
#vod-list-table td[align='center'] img[src*="left_button"],
#vod-list-table td[align='center'] img[src*="right_button"] {
    border-radius: 4px;
    vertical-align: middle;
    transition: opacity 0.15s;
}
#vod-list-table td[align='center'] a:hover img { opacity: 0.75; }
/* 페이지 카운터 표시 (N/M) */
#vod-list-table td[align='center'] font[style*='color:#666666'] {
    color: #99aacc !important;
    font-size: 11px !important;
    margin-left: 4px;
}
/* 맨처음/맨끝 링크 텍스트 */
#vod-list-table td[align='center'][height='45'] td a {
    font-size: 11px !important;
    padding: 3px 7px !important;
    background: #f0f5fc !important;
    color: #667799 !important;
}
/* 마지막 구분선 행 */
#vod-list-table tr td[height="2"][bgcolor="#9a9a9a"] { display: none !important; }

/* ===== VOD 검색바 ===== */
#vod-search-bar {
    margin: 0 0 14px 0;
}
#vod-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid var(--jcc-blue);
    border-radius: 30px;
    padding: 6px 10px 6px 16px;
    box-shadow: 0 2px 8px rgba(29,111,209,0.10);
}
#vod-kw-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1a2a44;
    background: transparent;
    min-width: 0;
}
#vod-kw-input::placeholder {
    color: #aabbcc;
    font-size: 13px;
}
#vod-search-btn {
    background: var(--jcc-blue);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
#vod-search-btn:hover {
    background: var(--jcc-navy);
}
#vod-search-clear {
    color: #99aacc;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 6px;
    border-radius: 10px;
    transition: background 0.12s, color 0.12s;
}
#vod-search-clear:hover {
    background: #eef2f7;
    color: var(--jcc-blue);
}


/* =========================================================
   찬양마당 (Praise) Page
   ========================================================= */

/* Layout */
#praise-layout-table {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    background: var(--jcc-bg) !important;
}
#praise-layout-table > tbody,
#praise-layout-table > tbody > tr { display: contents !important; }

#praise-sidebar-col {
    flex: 0 0 190px !important;
    max-width: 190px !important;
    width: 190px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}
#praise-content-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    align-self: flex-start !important;
}

/* Sidebar */
#praise-menu-wrap {
    width: 100% !important;
    border-radius: var(--jcc-radius) !important;
    overflow: hidden;
    box-shadow: var(--jcc-shadow);
}
#praise-menu-wrap > tbody > tr:first-child > td {
    background: var(--jcc-navy) !important;
    height: 40px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
}
#praise-menu-wrap > tbody > tr:first-child > td img { display: none !important; }
#praise-menu-wrap > tbody > tr:first-child > td::after {
    content: "JCC \CC2C\C591\B9C8\B2F9";
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
#praise-menu-wrap > tbody > tr:nth-child(2) > td {
    background: var(--jcc-navy) !important;
    padding: 8px 6px 14px !important;
}
#praise-menu-wrap > tbody > tr:last-child > td {
    background: var(--jcc-navy) !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 0 0 var(--jcc-radius) var(--jcc-radius);
}
#praise-menu-wrap > tbody > tr:last-child img { display: none !important; }
#praise-menu-list { width: 100% !important; }
#praise-menu-list td { padding: 1px 0 !important; }
#praise-menu-list td a.menu {
    color: #cce0ff !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: block;
    padding: 5px 10px !important;
    border-radius: 6px;
    transition: background 0.14s, color 0.14s;
    line-height: 1.4;
}
#praise-menu-list td a.menu:hover {
    background: rgba(255,255,255,0.16) !important;
    color: #fff !important;
}

/* Top breadcrumb */
#praise-top-bar {
    width: 100% !important;
    background: transparent !important;
    margin-bottom: 8px !important;
}
#praise-top-bar td[background*="nav_bg"] {
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    color: #cce0ff !important;
}
#praise-top-bar td[background*="nav_bg"] a { color: #8eb8f0 !important; text-decoration: none !important; }
#praise-top-bar td[background*="nav_bg"] a:hover { text-decoration: underline !important; }
#praise-top-bar td[background*="nav_bg"] font { font-weight: 700 !important; }
#praise-top-bar td:not([background*="nav_bg"]) { display: none !important; }

/* Main content card */
#oJesus-wrap {
    width: 100% !important;
    background: var(--jcc-card) !important;
    border-radius: var(--jcc-radius) !important;
    box-shadow: var(--jcc-shadow) !important;
    overflow: hidden;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
}
/* oJesus table renders as normal table rows */
#oJesus-wrap td {
    font-size: 13px !important;
    line-height: 1.85 !important;
    color: #444 !important;
    padding: 6px 4px !important;
    vertical-align: top !important;
}
#oJesus-wrap img[src*="ohJesus_top_img"] {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    display: block !important;
    margin: 12px auto !important;
}

/* Singer tabs */
#praise-singer-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 0 18px !important;
    border-bottom: 2px solid var(--jcc-line) !important;
    margin-bottom: 18px !important;
}
.praise-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    background: #fff !important;
    border: 2px solid var(--jcc-line) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
}
.praise-tab:hover, .praise-tab.active {
    border-color: var(--jcc-blue) !important;
    box-shadow: 0 2px 8px rgba(29,111,209,0.22) !important;
}
.praise-tab img {
    max-height: 28px !important;
    width: auto !important;
    display: block !important;
}

/* Song list area */
#oJesus-song-wrap { display: block !important; padding: 0 !important; }
#oJesus-song-wrap table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }

/* Hide GIF separator/band rows */
#oJesus-song-wrap td[background] { display: none !important; }
#oJesus-song-wrap img[src*="bbs_line"] { display: block !important; width: 100% !important; height: 1px !important; background: var(--jcc-line) !important; overflow: hidden !important; font-size: 0 !important; }
#oJesus-song-wrap tr:has(> td[background]) { display: none !important; }

/* Header row */
#oJesus-song-wrap tr[bgcolor="#FDCBC9"] { background: var(--jcc-navy) !important; }
#oJesus-song-wrap tr[bgcolor="#FDCBC9"] td {
    color: #fff !important;
    font-weight: 600 !important;
    padding: 10px 8px !important;
    border: none !important;
}

/* Alternating data rows */
#oJesus-song-wrap tr[bgcolor="#F6F6F6"] { background: #f8fafc !important; }
#oJesus-song-wrap tr[align="center"]:not([bgcolor="#FDCBC9"]) td {
    padding: 8px 8px !important;
    border-bottom: 1px solid var(--jcc-line) !important;
}
#oJesus-song-wrap tr[align="center"]:not([bgcolor="#FDCBC9"]):hover { background: #ebf3ff !important; }
#oJesus-song-wrap td a {
    color: var(--jcc-blue) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
#oJesus-song-wrap td a:hover {
    color: var(--jcc-navy) !important;
    text-decoration: underline !important;
}


/* ============================================================
   VOD 추가 스타일 (레이아웃·사이드바·본문카드는 위쪽 VOD 블록 사용)
   breadcrumb + 본문 GIF 정리 + 영상목록 — vod2.html / vod_top.html
   ============================================================ */

/* 사이드바 위젯(검색/배너) 폭 고정 + 메뉴 카드 컬럼폭 채움 */
#vod-sidebar-col table, .jcc-side table { max-width: 100% !important; box-sizing: border-box !important; }
#vod-sidebar-col table.jcc-snb, .jcc-side table.jcc-snb { width: 100% !important; }
#vod-sidebar-col > table:not(:first-child), .jcc-side > table:not(:first-child) { width: 100% !important; table-layout: fixed !important; }
#vod-sidebar-col > table:not(:first-child) > tbody > tr > td, .jcc-side > table:not(:first-child) > tbody > tr > td { width: 100% !important; box-sizing: border-box !important; }
#vod-sidebar-col img, .jcc-side img { max-width: 100% !important; height: auto !important; }

/* 상단 breadcrumb (*_top.html) — 그라데이션 바, 제목 GIF 숨김 */
#vod-top-bar, .jcc-top { width: 100% !important; margin-bottom: 8px !important; }
#vod-top-bar > tbody > tr:first-child > td, .jcc-top > tbody > tr:first-child > td { height: 0 !important; padding: 0 !important; }
#vod-top-bar td[background*="nav_bg"], .jcc-top td[background*="nav_bg"] {
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    color: #cce0ff !important;
}
#vod-top-bar td[background*="nav_bg"] a, .jcc-top td[background*="nav_bg"] a { color: #8eb8f0 !important; text-decoration: none !important; }
#vod-top-bar td[background*="nav_bg"] a:hover, .jcc-top td[background*="nav_bg"] a:hover { text-decoration: underline !important; }
#vod-top-bar td[background*="nav_bg"] font, .jcc-top td[background*="nav_bg"] font { font-weight: 700 !important; }
#vod-top-bar > tbody > tr:nth-child(3), #vod-top-bar > tbody > tr:nth-child(4),
.jcc-top > tbody > tr:nth-child(3), .jcc-top > tbody > tr:nth-child(4) { display: none !important; }

/* 게시판/영상 목록 GIF 구분줄 숨김 (vod_list 전용)
   ※ 본문 콘텐츠 이미지(*_sub_title.gif, *_top_img.gif 등)는 숨기지 않음.
      breadcrumb 의 옛 타이틀 GIF 는 .jcc-top/#vod-top-bar 의 행 숨김이 처리. */
#vod-content-col td[background*="board_title_back"], .jcc-main td[background*="board_title_back"],
#vod-content-col td[background*="board_list_back"], .jcc-main td[background*="board_list_back"] { display: none !important; height: 0 !important; font-size: 0 !important; }
#vod-content-col tr:has(> td[background*="board_title_back"]), .jcc-main tr:has(> td[background*="board_title_back"]),
#vod-content-col tr:has(> td[background*="board_list_back"]), .jcc-main tr:has(> td[background*="board_list_back"]) { display: none !important; }

/* 영상/게시판 목록 표 — 컬럼 전체폭, 링크 색 */
#vod-content-col form, .jcc-main form { display: block !important; }
#vod-content-col form > table, .jcc-main form > table { width: 100% !important; }
#vod-content-col tr[bgcolor="#f6f6f6"] td, .jcc-main tr[bgcolor="#f6f6f6"] td { color: #333 !important; }
#vod-content-col td a, .jcc-main td a { color: var(--jcc-blue) !important; text-decoration: none !important; }
#vod-content-col td a:hover, .jcc-main td a:hover { color: var(--jcc-navy) !important; text-decoration: underline !important; }


/* ============================================================
   PHOTO GALLERY -- html/photo.html
   ============================================================ */

/* -- Layout (same pattern as vod/praise) -- */
#photo-layout-table {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    background: var(--jcc-bg) !important;
}
#photo-layout-table > tbody,
#photo-layout-table > tbody > tr { display: contents !important; }
#photo-sidebar-col {
    flex: 0 0 190px !important;
    max-width: 190px !important;
    width: 190px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}
#photo-content-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    align-self: flex-start !important;
}

/* FIX: 사이드바 위젯(통합검색/배너) 표가 내용폭까지 늘어나
   190px 컬럼을 넘어 본문과 겹치던 문제 — 컬럼폭에 고정 */
#photo-sidebar-col table {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
#photo-sidebar-col > table:not(:first-child) {
    width: 100% !important;
    table-layout: fixed !important;
}
#photo-sidebar-col > table:not(:first-child) > tbody > tr > td {
    width: 100% !important;
    box-sizing: border-box !important;
}
#photo-sidebar-col img { max-width: 100% !important; height: auto !important; }

/* -- Sidebar nav -- */
#photo-nav-wrap {
    width: 100% !important;
    border-radius: var(--jcc-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--jcc-shadow) !important;
}
#photo-nav-wrap > tbody > tr:first-child > td { height: 0 !important; padding: 0 !important; }
#photo-nav-wrap > tbody > tr:nth-child(2) > td {
    background: var(--jcc-navy) !important;
    height: 40px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
}
#photo-nav-wrap > tbody > tr:nth-child(2) > td img { display: none !important; }
#photo-nav-wrap > tbody > tr:nth-child(2) > td::after {
    content: "\C0AC\C9C4\AC24\B7EC\B9AC";
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
#photo-nav-wrap > tbody > tr:nth-child(3) > td {
    background: var(--jcc-navy) !important;
    padding: 8px 6px 14px !important;
}
#photo-nav-wrap > tbody > tr:nth-child(3) > td > table { width: 100% !important; }
#photo-nav-wrap > tbody > tr:nth-child(3) > td > table td { padding: 1px 0 !important; }
#photo-nav-wrap td img[src*="introduce_menu_blit"] { display: none !important; }
#photo-nav-wrap td a.menu {
    display: block !important;
    padding: 6px 14px !important;
    color: #b0caff !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    transition: background 0.15s, color 0.15s !important;
}
#photo-nav-wrap td a.menu:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; }
#photo-nav-wrap > tbody > tr:last-child > td {
    background: var(--jcc-navy) !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 0 0 var(--jcc-radius) var(--jcc-radius) !important;
}
#photo-nav-wrap > tbody > tr:last-child img { display: none !important; }

/* -- Top bar -- */
#photo-top-bar { width: 100% !important; margin-bottom: 8px !important; }
#photo-top-bar > tbody > tr:first-child > td { height: 0 !important; padding: 0 !important; }
#photo-top-bar td[background*="nav_bg"] {
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    color: #cce0ff !important;
}
#photo-top-bar td[background*="nav_bg"] a { color: #8eb8f0 !important; text-decoration: none !important; }
#photo-top-bar td[background*="nav_bg"] font { font-weight: 700 !important; }
#photo-top-bar > tbody > tr:nth-child(3),
#photo-top-bar > tbody > tr:nth-child(4) { display: none !important; }

/* -- Album picker -- */
#photo-album-picker { width: 100% !important; margin-bottom: 14px !important; }
#photo-album-picker td { text-align: right !important; padding: 6px 0 !important; }
#photo-album-picker select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 1.5px solid var(--jcc-line) !important;
    border-radius: 6px !important;
    padding: 7px 28px 7px 12px !important;
    font-size: 13px !important;
    color: var(--jcc-text) !important;
    background: #fff !important;
    cursor: pointer !important;
    min-width: 260px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    transition: border-color 0.15s !important;
}
#photo-album-picker select:hover { border-color: var(--jcc-blue) !important; }
#photo-album-picker select:focus {
    outline: none !important;
    border-color: var(--jcc-blue) !important;
    box-shadow: 0 0 0 3px rgba(29,111,209,0.15) !important;
}

/* -- Hide GIF frame images -- */
#photo-content-col img[src*="photo_window"],
#photo-content-col img[src*="photo_script_top"],
#photo-content-col img[src*="photo_script_bottom"],
#photo-content-col img[src*="photo_sum_top"],
#photo-content-col img[src*="photo_sum_bottom"],
#photo-content-col img[src*="photo_title_left"],
#photo-content-col img[src*="photo_title_right"],
#photo-content-col img[src*="introduce_top_line"],
#photo-content-col img[src*="photo_top_title"],
#photo-content-col img[src*="photo_top_img"] { display: none !important; }

/* -- Main photo display -- */
#photo-content-col td[align="center"][bgcolor="#000000"] {
    background: #0d1117 !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 12px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
#photo-content-col td[align="center"][bgcolor="#000000"] img {
    border-radius: 6px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* -- Caption area (photo_script_middle.gif replaced) -- */
#photo-content-col td[background*="photo_script_middle"] {
    background: var(--jcc-navy) !important;
    padding: 10px 16px !important;
    border-radius: 0 0 10px 10px !important;
}
#photo-content-col td[background*="photo_script_middle"] font,
#photo-content-col td[background*="photo_script_middle"] span {
    color: #cce0ff !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}
/* 설명(캡션)이 비었을 때 빈 남색 막대 숨김.
   썸네일에 마우스를 올려 #imgScript 가 채워지면 자동으로 다시 표시됨. */
#photo-content-col td[background*="photo_script_middle"]:has(#imgScript:empty) {
    display: none !important;
}

/* -- Album title bar (photo_title_bg.gif replaced) -- */
#photo-content-col td[background*="photo_title_bg"] {
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    text-align: center !important;
}
#photo-content-col td[background*="photo_title_bg"] font {
    color: #ffe680 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* -- Thumbnail grid (photo_sum_bg.gif replaced) -- */
#photo-content-col td[background*="photo_sum_bg"] {
    background: #f0f4f8 !important;
    padding: 12px 8px !important;
    border-radius: 8px !important;
    border: 1px solid var(--jcc-line) !important;
}
#photo-content-col td[background*="photo_sum_bg"] td {
    padding: 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
#photo-content-col td[background*="photo_sum_bg"] img {
    border-radius: 6px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
    display: block !important;
    margin: 0 auto !important;
}
#photo-content-col td[background*="photo_sum_bg"] img:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* -- Pagination -- */
#photo-content-col a[href*="photo.html"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 6px !important;
    margin: 2px 1px !important;
    border: 1px solid var(--jcc-line) !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    color: var(--jcc-text) !important;
    text-decoration: none !important;
    background: #fff !important;
    transition: background 0.15s, color 0.15s !important;
}
#photo-content-col a[href*="photo.html"]:hover {
    background: var(--jcc-blue) !important;
    color: #fff !important;
    border-color: var(--jcc-blue) !important;
}

/* ============================================================
   FIX: 포토갤러리 본문을 컬럼 전체폭으로 채움 (우측 여백 제거)
   내부 고정폭(width=450/550/367) 표들을 풀어 큰 사진·타이틀·
   썸네일이 컬럼을 꽉 채우도록. (페이지네이션은 가운데 유지)
   ============================================================ */
#photo-content-col table:not([align="center"]) {
    width: 100% !important;
    max-width: 100% !important;
}
/* 큰 사진 — 고정 영역 안에 비율 유지로 표시 (가로/세로 사진 모두
   같은 크기 박스에 맞춰 들어가 레이아웃이 흔들리거나 겹치지 않음) */
#photo-content-col td[align="center"][bgcolor="#000000"] {
    height: 480px !important;
    vertical-align: middle !important;
}
#photo-content-col td[align="center"][bgcolor="#000000"] img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 456px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}
/* 썸네일 — 5칸 균등 분할로 크게 */
#photo-content-col td[background*="photo_sum_bg"] > table {
    table-layout: fixed !important;
}
#photo-content-col td[background*="photo_sum_bg"] td {
    width: 20% !important;
}
#photo-content-col td[background*="photo_sum_bg"] img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}


/* ============================================================
   PAPER / NEWSLETTER -- html/paper.html
   ============================================================ */

/* -- Layout -- */
#paper-layout-table {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    background: var(--jcc-bg) !important;
}
#paper-layout-table > tbody,
#paper-layout-table > tbody > tr { display: contents !important; }
#paper-sidebar-col {
    flex: 0 0 190px !important;
    max-width: 190px !important;
    width: 190px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}
#paper-content-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    align-self: flex-start !important;
    text-align: left !important;
}
#paper-content-col > table {
    width: 100% !important;
    max-width: 100% !important;
}

/* -- Sidebar nav (paper_menu.html outer table) -- */
#paper-sidebar-col > table:first-child {
    width: 100% !important;
    border-radius: var(--jcc-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--jcc-shadow) !important;
}
#paper-sidebar-col > table:first-child > tbody > tr:first-child > td {
    height: 0 !important; padding: 0 !important;
}
/* Title row: hide GIF, show CSS text */
#paper-sidebar-col > table:first-child > tbody > tr:nth-child(2) > td {
    background: var(--jcc-navy) !important;
    height: 40px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
}
#paper-sidebar-col > table:first-child > tbody > tr:nth-child(2) img { display: none !important; }
#paper-sidebar-col > table:first-child > tbody > tr:nth-child(2) > td::after {
    content: "\AD50\D68C\C18C\C2DD\C9C0";
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
/* Menu row */
#paper-sidebar-col > table:first-child > tbody > tr:nth-child(3) > td {
    background: var(--jcc-navy) !important;
    padding: 8px 6px 14px !important;
}
#paper-sidebar-col > table:first-child > tbody > tr:nth-child(3) > td > table { width: 100% !important; }
#paper-sidebar-col > table:first-child > tbody > tr:nth-child(3) > td > table td { padding: 1px 0 !important; }
#paper-sidebar-col td img[src*="sub_paper_blit"] { display: none !important; }
#paper-sidebar-col td a.menu {
    display: block !important;
    padding: 6px 14px !important;
    color: #b0caff !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    transition: background 0.15s, color 0.15s !important;
}
#paper-sidebar-col td a.menu:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
/* Bottom corner row */
#paper-sidebar-col > table:first-child > tbody > tr:last-child > td {
    background: var(--jcc-navy) !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 0 0 var(--jcc-radius) var(--jcc-radius) !important;
}
#paper-sidebar-col > table:first-child > tbody > tr:last-child img { display: none !important; }

/* -- Left column section cards -- */
#paper-left-col > table {
    width: 100% !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: var(--jcc-shadow) !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
}
/* Section title (커버스토리, 권일선교 etc.) */
#paper-left-col td[colspan="2"] > font[color="#cf0000"],
#paper-left-col td[colspan="2"] > font[color="#CF0000"] {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--jcc-blue) !important;
    display: block !important;
    padding: 10px 8px 4px !important;
}
/* Article title */
#paper-left-col td[colspan="2"] > font[color="#333399"],
#paper-left-col td[colspan="2"] > font[color="#333399"] b {
    color: var(--jcc-navy) !important;
    font-size: 13px !important;
}
/* Hide divider GIFs */
#paper-left-col img[src*="paper_main_line"] { display: none !important; }
/* Article text links */
#paper-left-col a.cover,
#paper-left-col a.text,
#paper-left-col a.ong {
    color: #555 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}
#paper-left-col a.cover:hover,
#paper-left-col a.text:hover,
#paper-left-col a.ong:hover { color: var(--jcc-blue) !important; }
/* Article thumbnail image */
#paper-left-col td > img[src^=".."] {
    border-radius: 4px !important;
    max-width: 90px !important;
    height: auto !important;
}

/* -- Right column panels -- */
/* Outer gray-border table → CSS card */
#paper-right-col > table[bgcolor="#999999"] {
    background: transparent !important;
    border-radius: 10px !important;
    box-shadow: var(--jcc-shadow) !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
    border: none !important;
}
#paper-right-col table[bgcolor="#999999"] > tbody > tr > td {
    padding: 0 !important;
}
/* Inner white table */
#paper-right-col table[bgcolor="#ffffff"] {
    background: #fff !important;
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
/* Panel header (paper_main_right_bg.gif replaced) */
#paper-right-col td[background*="paper_main_right_bg"] {
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    color: #ddeeff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    height: auto !important;
    border-radius: 0 !important;
}
/* Panel content padding */
#paper-right-col table[bgcolor="#999999"] td[height] > table {
    padding: 8px 4px !important;
}
/* Links in right panel */
#paper-right-col a.wiz,
#paper-right-col a[href*="paper.html"] {
    color: var(--jcc-blue) !important;
    text-decoration: none !important;
    font-size: 12px !important;
}
#paper-right-col a.wiz:hover,
#paper-right-col a[href*="paper.html"]:hover {
    text-decoration: underline !important;
}
#paper-right-col a.cart {
    color: var(--jcc-navy) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
/* 기타 (other links) bullet - hide dash, style links */
#paper-right-col td a[href*="paper.html?sec"] {
    display: block !important;
    padding: 3px 0 !important;
    color: var(--jcc-text) !important;
    font-size: 12px !important;
}
#paper-right-col td a[href*="paper.html?sec"]:hover { color: var(--jcc-blue) !important; }
/* Small thumbnail in 기타 panel */
#paper-right-col table[bgcolor="#cccccc"] img {
    border-radius: 4px !important;
    display: block !important;
}


/* ============================================================
   PAPER VIEWS -- paper_top / paper_contents_new / paper_list
   ============================================================ */

/* -- Top breadcrumb (paper_top.html) -- */
#paper-top-bar { width: 100% !important; margin-bottom: 8px !important; }
#paper-top-bar > tbody > tr:first-child > td { height: 0 !important; padding: 0 !important; }
#paper-top-bar td[background*="nav_bg"] {
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    color: #cce0ff !important;
}
#paper-top-bar td[background*="nav_bg"] a { color: #8eb8f0 !important; text-decoration: none !important; }
#paper-top-bar td[background*="nav_bg"] a:hover { text-decoration: underline !important; }
#paper-top-bar td[background*="nav_bg"] font { font-weight: 700 !important; }

/* -- Article header (paper_contents_new.html + paper_list.html title) -- */
#paper-article-header,
#paper-list-title {
    width: 100% !important;
    background: #fff !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: var(--jcc-shadow) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}
#paper-article-header td[height="70"],
#paper-list-title td[height="70"] {
    padding: 20px 24px 10px !important;
    height: auto !important;
    vertical-align: bottom !important;
}
#paper-article-header font[color="#0000cc"],
#paper-article-header font[color="#0000CC"] {
    color: var(--jcc-navy) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
#paper-list-title font[color="#336633"],
#paper-list-title font[color="#336633"] {
    color: var(--jcc-navy) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}
/* Hide decorative GIFs in header */
#paper-article-header img[src*="sub_paper_mark"],
#paper-article-header img[src*="sub_paper_line"],
#paper-list-title img[src*="sub_paper_mark"],
#paper-list-title img[src*="sub_paper_line"] { display: none !important; }
#paper-article-header td[colspan],
#paper-list-title td[colspan] { border-bottom: 2px solid var(--jcc-blue) !important; }

/* -- Article body (regular sections, ear, boong) -- */
#paper-article-body {
    width: 100% !important;
    background: #fff !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: var(--jcc-shadow) !important;
    margin-top: 0 !important;
    overflow: hidden !important;
}
#paper-article-body > tbody > tr > td {
    padding: 24px 28px !important;
}
/* Article text content */
#paper-article-body font.free,
#paper-article-body #font {
    font-size: 14px !important;
    line-height: 1.9 !important;
    color: #333 !important;
}
/* Images in article */
#paper-article-body img[src^=".."],
#paper-article-body img[src^="/"] {
    border-radius: 8px !important;
    max-width: 100% !important;
    height: auto !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12) !important;
    margin: 8px !important;
}
/* Cartoon images */
#paper-article-body table[bgcolor="#cccccc"] {
    background: #e8ecf0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 auto 14px !important;
}
#paper-article-body table[bgcolor="#cccccc"] img {
    border-radius: 4px !important;
}
/* Hide old font-resize buttons (IE-only feature) */
#paper-article-body script + * { }
/* YouTube embed */
#paper-article-body iframe {
    width: 100% !important;
    max-width: 560px !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 0 auto 16px !important;
}

/* -- List view (paper_list.html) -- */
#paper-list-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: var(--jcc-shadow) !important;
    overflow: hidden !important;
}
/* Hide top/bottom GIF backgrounds */
#paper-list-table td[background*="paper_list_top_bg"],
#paper-list-table td[background*="paper_list_bottom_bg"] {
    display: none !important;
}
/* Header row */
#paper-list-table tr[bgcolor="#D8F1D5"] td,
#paper-list-table tr[bgcolor="#d8f1d5"] td {
    background: var(--jcc-navy) !important;
    color: #fff !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-bottom: 2px solid var(--jcc-blue) !important;
}
/* Data rows */
#paper-list-table tr[align="center"] td {
    padding: 9px 8px !important;
    font-size: 13px !important;
    border-bottom: 1px solid #eef0f2 !important;
    color: var(--jcc-text) !important;
    transition: background 0.12s !important;
}
#paper-list-table tr[align="center"]:hover td {
    background: #f0f5ff !important;
}
/* Hide divider GIFs between rows */
#paper-list-table img[src*="ohJesus_bbs_line"] { display: none !important; }
#paper-list-table tr:has(img[src*="ohJesus_bbs_line"]) { display: none !important; }
/* List links */
#paper-list-table td[align="left"] a {
    color: var(--jcc-blue) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
#paper-list-table td[align="left"] a:hover { text-decoration: underline !important; }
/* Pagination row */
#paper-list-table td[colspan="4"][align="center"] {
    padding: 14px 0 !important;
    background: #f8fafc !important;
}
#paper-list-table td[colspan="4"][align="center"] a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 6px !important;
    margin: 2px 1px !important;
    border: 1px solid var(--jcc-line) !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    color: var(--jcc-text) !important;
    text-decoration: none !important;
    background: #fff !important;
    transition: background 0.15s, color 0.15s !important;
}
#paper-list-table td[colspan="4"][align="center"] a:hover {
    background: var(--jcc-blue) !important;
    color: #fff !important;
    border-color: var(--jcc-blue) !important;
}


/* ============================================================
   FLOATING FONT-SIZE CONTROL (paper article pages)
   ============================================================ */
#paper-font-ctrl {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid rgba(0, 51, 102, 0.18);
    border-radius: 16px;
    padding: 14px 10px;
    box-shadow: 0 6px 28px rgba(0, 51, 102, 0.18), 0 1px 4px rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.2s;
}
#paper-font-ctrl:hover { opacity: 1; }

/* label */
#paper-font-lbl {
    font-size: 11px;
    color: #888;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    line-height: 1;
}

/* A- / A+ buttons */
#paper-font-ctrl button {
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(0, 51, 102, 0.15);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--jcc-font);
    background: #eef2f7;
    color: var(--jcc-navy);
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    user-select: none;
    -webkit-user-select: none;
}
#paper-font-ctrl button:hover {
    background: var(--jcc-navy);
    color: #fff;
    border-color: var(--jcc-navy);
}
#paper-font-ctrl button:active {
    transform: scale(0.90);
}

/* divider between buttons */
#paper-font-ctrl button + button {
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-top: -6px;
}
#paper-font-ctrl button:first-of-type {
    border-radius: 10px 10px 0 0;
    border-bottom: 1px dashed rgba(0,51,102,0.15);
}


/* ============================================================
   PAPER MAIN — dynamic menu-driven card grid (paper.html)
   ============================================================ */
#paper-main-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 4px 0 8px !important;
    box-sizing: border-box !important;
}

.paper-card {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid var(--jcc-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--jcc-shadow) !important;
    padding: 18px 18px 16px !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.paper-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(0, 51, 102, 0.16) !important;
    border-color: var(--jcc-blue) !important;
}

.paper-card-cat {
    align-self: flex-start !important;
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    margin-bottom: 11px !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
}

.paper-card-title {
    display: block !important;
    color: var(--jcc-navy) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 11px !important;
}

.paper-card-thumb {
    display: block !important;
    margin-bottom: 11px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f0f4f8 !important;
}
.paper-card-thumb img {
    width: 100% !important;
    height: 155px !important;
    object-fit: cover !important;
    display: block !important;
    border: 0 !important;
}

.paper-card-excerpt {
    display: block !important;
    color: #555 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    flex: 1 1 auto !important;
    margin-bottom: 13px !important;
}

.paper-card-more {
    display: block !important;
    color: var(--jcc-blue) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    margin-top: auto !important;
}
.paper-card:hover .paper-card-more { text-decoration: underline !important; }

/* single-card / narrow fallback */
@media (max-width: 560px) {
    #paper-main-grid { grid-template-columns: 1fr !important; }
}


/* ============================================================
   PAPER MAIN — featured (cover / text / boong) hero cards
   ============================================================ */
#paper-featured {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 4px 0 6px !important;
    box-sizing: border-box !important;
}

.paper-feat {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: #fff !important;
    border: 1px solid var(--jcc-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 20px rgba(0, 51, 102, 0.10) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}
.paper-feat:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 34px rgba(0, 51, 102, 0.18) !important;
    border-color: var(--jcc-blue) !important;
}

.paper-feat-thumb {
    flex: 0 0 210px !important;
    max-width: 210px !important;
    background: #eef2f7 !important;
    overflow: hidden !important;
    display: block !important;
}
.paper-feat-thumb img {
    width: 100% !important;
    height: 100% !important;
    min-height: 168px !important;
    object-fit: cover !important;
    display: block !important;
    border: 0 !important;
}

.paper-feat-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 22px !important;
    box-sizing: border-box !important;
}

.paper-feat-title {
    display: block !important;
    color: var(--jcc-navy) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    margin: 9px 0 11px !important;
}
.paper-feat-excerpt {
    display: block !important;
    color: #555 !important;
    font-size: 13.5px !important;
    line-height: 1.78 !important;
    flex: 1 1 auto !important;
    margin-bottom: 13px !important;
}

/* "그 밖의 소식" divider heading */
.paper-rest-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--jcc-navy) !important;
    margin: 22px 0 14px !important;
    letter-spacing: 0.3px !important;
}
.paper-rest-head::after {
    content: "" !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: var(--jcc-line) !important;
}

/* rest grid sits right after the heading */
.paper-rest-head + #paper-main-grid { margin-top: 0 !important; }

/* responsive: stack featured thumb on top in narrow column */
@media (max-width: 600px) {
    .paper-feat { flex-direction: column !important; }
    .paper-feat-thumb {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: 100% !important;
    }
    .paper-feat-thumb img { height: 180px !important; min-height: 0 !important; }
}


/* ============================================================
   PAPER ARCHIVE — 지난호(호수별) 보기 sidebar widget (paper_old.html)
   ============================================================ */
#paper-archive {
    width: 100% !important;
    background: #fff !important;
    border: 1px solid var(--jcc-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--jcc-shadow) !important;
    overflow: hidden !important;
    margin: 14px auto 4px !important;
    box-sizing: border-box !important;
}
.paper-archive-head {
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 9px 14px !important;
    letter-spacing: 0.3px !important;
}
.paper-archive-body {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}
#paper-archive select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1.5px solid var(--jcc-line) !important;
    border-radius: 7px !important;
    padding: 8px 30px 8px 11px !important;
    font-size: 13px !important;
    font-family: var(--jcc-font) !important;
    color: var(--jcc-text) !important;
    cursor: pointer !important;
    background-color: #fff !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--jcc-navy) 50%),
        linear-gradient(135deg, var(--jcc-navy) 50%, transparent 50%) !important;
    background-position: right 14px center, right 9px center !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
#paper-archive select:hover { border-color: var(--jcc-blue) !important; }
#paper-archive select:focus {
    outline: none !important;
    border-color: var(--jcc-blue) !important;
    box-shadow: 0 0 0 3px rgba(29, 111, 209, 0.15) !important;
}


/* ============================================================
   JCC 통합검색 widget (search_w.html)
   ============================================================ */
#jcc-search {
    width: 100% !important;
    background: #fff !important;
    border: 1px solid var(--jcc-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--jcc-shadow) !important;
    overflow: hidden !important;
    margin: 0 auto 4px !important;
    box-sizing: border-box !important;
}
#jcc-search form { margin: 0 !important; padding: 0 !important; }
.jcc-search-head {
    background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 9px 14px !important;
    letter-spacing: 0.3px !important;
}
.jcc-search-body {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.jcc-search-row { display: flex !important; gap: 6px !important; }
.jcc-search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: 1.5px solid var(--jcc-line) !important;
    border-radius: 7px !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
    font-family: var(--jcc-font) !important;
    color: var(--jcc-text) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.jcc-search-input:focus {
    outline: none !important;
    border-color: var(--jcc-blue) !important;
    box-shadow: 0 0 0 3px rgba(29, 111, 209, 0.15) !important;
}
.jcc-search-btn {
    flex: 0 0 auto !important;
    border: 0 !important;
    border-radius: 7px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: var(--jcc-font) !important;
    color: #fff !important;
    background: var(--jcc-blue) !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.jcc-search-btn:hover { background: var(--jcc-navy) !important; }
.jcc-search-types {
    display: flex !important;
    gap: 16px !important;
    padding-left: 2px !important;
}
.jcc-search-type {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    color: var(--jcc-text) !important;
    cursor: pointer !important;
}
.jcc-search-type input { accent-color: var(--jcc-blue) !important; cursor: pointer !important; }


/* ============================================================
   FIX: 사이드바 위젯(통합검색 / 지난호 보기 / 배너)이
   190px 컬럼을 넘어 본문과 겹치는 문제 해결.
   래퍼 테이블이 내용 최대폭까지 늘어나던 것을 컬럼폭에 고정.
   ============================================================ */
#paper-sidebar-col table {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
#paper-sidebar-col > table:not(:first-child) {
    width: 100% !important;
    table-layout: fixed !important;
}
#paper-sidebar-col > table:not(:first-child) > tbody > tr > td {
    width: 100% !important;
    box-sizing: border-box !important;
}
#paper-sidebar-col img {
    max-width: 100% !important;
    height: auto !important;
}


/* ============================================================
   INSA (greeting) page  -- introduce.html?sec=insa / insa.html
   Grand + modern redesign. Scoped to .insa-page only.
   ============================================================ */
.insa-page { max-width: 780px !important; margin: 0 auto !important; font-family: var(--jcc-font) !important; color: #2a3340 !important; }
.insa-page * { box-sizing: border-box !important; }

/* Hero band */
.insa-hero {
    text-align: center !important;
    background: linear-gradient(160deg, #00264d 0%, #003a73 55%, #0a4f96 100%) !important;
    border-radius: 18px !important;
    padding: 50px 28px 46px !important;
    margin: 4px 0 40px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 18px 44px rgba(0,40,90,0.28) !important;
}
.insa-hero::after {
    content: "" !important; position: absolute !important; inset: 0 !important;
    background: radial-gradient(120% 80% at 50% -10%, rgba(255,210,120,0.20), transparent 60%) !important;
    pointer-events: none !important;
}
.insa-hero-eyebrow { display: inline-block !important; letter-spacing: 0.34em !important; font-size: 12px !important; font-weight: 700 !important; color: #ffd27a !important; margin-bottom: 14px !important; padding-left: 0.34em !important; }
.insa-hero-hal { display: block !important; font-size: 20px !important; font-weight: 600 !important; color: #bcd8ff !important; margin-bottom: 12px !important; letter-spacing: 0.04em !important; }
.insa-hero-title { margin: 0 !important; font-size: 31px !important; line-height: 1.5 !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -0.01em !important; position: relative !important; }

/* Lead */
.insa-lead { text-align: center !important; font-size: 19px !important; font-weight: 800 !important; color: var(--jcc-navy) !important; margin: 0 0 22px !important; }

/* 5 characteristics */
.insa-points { list-style: none !important; margin: 0 auto 42px !important; padding: 0 !important; max-width: 640px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.insa-points li { display: flex !important; align-items: center !important; gap: 16px !important; background: #f6f9fd !important; border: 1px solid #e3ecf6 !important; border-left: 4px solid var(--jcc-blue) !important; border-radius: 12px !important; padding: 15px 20px !important; transition: transform .15s, box-shadow .15s !important; }
.insa-points li:hover { transform: translateX(4px) !important; box-shadow: 0 6px 18px rgba(0,60,120,0.10) !important; }
.insa-num { flex: 0 0 auto !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--jcc-navy), var(--jcc-blue)) !important; color: #ffd27a !important; font-weight: 800 !important; font-size: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 10px rgba(0,40,90,0.25) !important; }
.insa-text { font-size: 15.5px !important; line-height: 1.5 !important; color: #2a3340 !important; font-weight: 500 !important; }

/* Blessing */
.insa-bless { text-align: center !important; font-size: 17px !important; line-height: 2.0 !important; color: #3a4656 !important; margin: 0 auto 42px !important; max-width: 580px !important; padding: 30px 24px 26px !important; border-top: 1px solid #e3ecf6 !important; border-bottom: 1px solid #e3ecf6 !important; position: relative !important; font-weight: 500 !important; }
.insa-bless::before { content: "\201C" !important; font-family: Georgia, serif !important; font-size: 66px !important; color: rgba(29,111,209,0.18) !important; position: absolute !important; top: 4px !important; left: 50% !important; transform: translateX(-50%) !important; line-height: 1 !important; }

/* Contact card */
.insa-contact { background: #fff !important; border: 1px solid #e3ecf6 !important; border-radius: 14px !important; box-shadow: 0 8px 22px rgba(0,40,90,0.08) !important; padding: 20px 24px !important; max-width: 640px !important; margin: 0 auto !important; }
.insa-contact-row { display: flex !important; align-items: center !important; gap: 14px !important; padding: 10px 0 !important; border-bottom: 1px dashed #e6edf5 !important; font-size: 14px !important; line-height: 1.5 !important; }
.insa-contact-row:last-child { border-bottom: 0 !important; }
.insa-contact-label { flex: 0 0 78px !important; font-weight: 700 !important; color: #fff !important; font-size: 12px !important; text-align: center !important; background: linear-gradient(135deg, var(--jcc-navy), var(--jcc-blue)) !important; border-radius: 6px !important; padding: 5px 0 !important; }
.insa-contact-val { color: #39424f !important; }

/* Responsive */
@media (max-width: 560px) {
    .insa-hero { padding: 38px 18px 34px !important; }
    .insa-hero-title { font-size: 24px !important; }
}


/* INSA images -- calligraphy artwork + sermon photo gallery (preserve originals) */
.insa-art { margin: 4px auto 40px !important; text-align: center !important; max-width: 460px !important; }
.insa-art img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; box-shadow: 0 16px 40px rgba(0,30,70,0.22) !important; display: block !important; margin: 0 auto !important; }
.insa-art figcaption { margin-top: 14px !important; font-size: 13px !important; color: #6b7787 !important; letter-spacing: 0.04em !important; }

.insa-gallery-wrap { max-width: 640px !important; margin: 0 auto 42px !important; }
.insa-gallery-title { text-align: center !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; color: var(--jcc-navy) !important; margin-bottom: 16px !important; position: relative !important; }
.insa-gallery-title::after { content: "" !important; display: block !important; width: 42px !important; height: 3px !important; margin: 10px auto 0 !important; border-radius: 2px !important; background: linear-gradient(90deg, var(--jcc-navy), var(--jcc-blue)) !important; }
.insa-gallery { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; align-items: start !important; }
.insa-gallery img { width: 100% !important; height: auto !important; border-radius: 10px !important; border: 1px solid #e3ecf6 !important; box-shadow: 0 4px 12px rgba(0,40,90,0.12) !important; transition: transform .18s, box-shadow .18s !important; cursor: pointer !important; display: block !important; }
.insa-gallery img:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 10px 24px rgba(0,40,90,0.22) !important; }

@media (max-width: 560px) {
    .insa-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}


/* INSA worship/venue photos (above location info) */
.insa-venue { max-width: 640px !important; margin: 0 auto 28px !important; }
.insa-venue-photos { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.insa-venue-photos img { width: 100% !important; height: auto !important; border-radius: 14px !important; border: 1px solid #e3ecf6 !important; box-shadow: 0 10px 28px rgba(0,40,90,0.16) !important; display: block !important; }


/* worship.html (yebae annae) -- fill content to full card width */
.worship-page { width: 100% !important; max-width: 100% !important; }
.worship-page > tbody > tr > td > table { width: 100% !important; }
#worship-tabs { max-width: 535px !important; }
#worship-place-photo img { flex: 1 1 320px !important; max-width: 430px !important; }


/* worship page -- larger fonts (60s readability) + photos side-by-side + hover */
.worship-page { font-size: 17px !important; line-height: 1.75 !important; }
.worship-page td, .worship-page p, .worship-page font, .worship-page b { font-size: 17px !important; }
.worship-page p { line-height: 1.7 !important; }
#worship-schedule td { font-size: 16px !important; padding: 14px 12px !important; }
#worship-schedule tr:first-child td, #worship-schedule tr:first-child td b { font-size: 17px !important; }
#worship-schedule td[rowspan] { font-size: 17px !important; }

#worship-place-photo { flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-start !important; gap: 16px !important; }
#worship-place-photo img { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; width: 100% !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; cursor: pointer !important; }
#worship-place-photo img:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 14px 30px rgba(0,40,90,0.28) !important; }


/* worship tabs -- replace GIF buttons with themed pill buttons */
#worship-tabs { border-collapse: separate !important; border-spacing: 8px 0 !important; max-width: 580px !important; margin: 0 auto 18px !important; }
#worship-tabs img { display: none !important; }
#worship-tabs td:nth-child(5) { display: none !important; }
#worship-tabs td:nth-child(-n+4) {
    position: relative !important;
    padding: 11px 6px !important;
    border-radius: 999px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: #e9f1fb !important;
    color: #003366 !important;
    border: 1.5px solid #cadef5 !important;
    transition: background .15s, transform .15s, box-shadow .15s !important;
    cursor: pointer !important;
}
#worship-tabs td:nth-child(1)::after { content: "\C11C\C6B8\AD50\D68C" !important; }
#worship-tabs td:nth-child(2)::after { content: "\C778\CC9C\AD50\D68C" !important; }
#worship-tabs td:nth-child(3)::after { content: "\C9C0\BC29\AD50\D68C" !important; }
#worship-tabs td:nth-child(4)::after { content: "\C778\D130\B137\C608\BC30" !important; }
#worship-tabs td > a { position: absolute !important; inset: 0 !important; z-index: 2 !important; border-radius: 999px !important; }
#worship-tabs td:has(> a):hover { background: #d4e6fb !important; transform: translateY(-2px) !important; box-shadow: 0 5px 14px rgba(0,40,90,0.18) !important; }
#worship-tabs td:nth-child(-n+4):not(:has(> a)) {
    background: linear-gradient(135deg, #003366, #1d6fd1) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(0,40,90,0.32) !important;
}

/* active tab robust detection via _on.gif (works regardless of link markup) */
#worship-tabs td:has(img[src*="_on."]) {
    background: linear-gradient(135deg, #003366, #1d6fd1) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(0,40,90,0.32) !important;
}


/* ============================================================
   LEFT MENU redesign -- red header + red hover (all pages)
   Matches the red top navigation. Body stays navy.
   Covers .jcc-snb (introduce/vod/conference) + praise/paper/photo.
   ============================================================ */
/* header bar -> red gradient */
table.jcc-snb > tbody > tr:nth-child(2) > td,
#praise-menu-wrap > tbody > tr:first-child > td,
#photo-nav-wrap > tbody > tr:nth-child(2) > td,
#paper-sidebar-col > table:first-child > tbody > tr:nth-child(2) > td {
    background: linear-gradient(135deg, #d8001f 0%, #9c0014 100%) !important;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18) !important;
}
/* a thin red accent line on top of the menu card */
table.jcc-snb,
#praise-menu-wrap,
#photo-nav-wrap,
#paper-sidebar-col > table:first-child {
    border-top: 3px solid #d8001f !important;
}
/* link hover -> red fill + slight indent (motion) */
table.jcc-snb a.menu,
#praise-menu-list td a.menu,
#photo-nav-wrap td a.menu,
#paper-sidebar-col td a.menu {
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
}
table.jcc-snb a.menu:hover,
#praise-menu-list td a.menu:hover,
#photo-nav-wrap td a.menu:hover,
#paper-sidebar-col td a.menu:hover {
    background: linear-gradient(135deg, #d8001f, #9c0014) !important;
    color: #ffffff !important;
    padding-left: 20px !important;
}


/* ============================================================
   search_result.html -- integrated search results table
   ============================================================ */
/* gif separator bands / lines -> hidden (clean rows w/ borders) */
.jcc-main td[background*="vod_bbs_top"],
.jcc-main td[background*="paper_list_top"],
.jcc-main td[background*="paper_list_bottom"] { display: none !important; }
.jcc-main tr:has(> td[background*="vod_bbs_top"]),
.jcc-main tr:has(> td[background*="paper_list_top"]),
.jcc-main tr:has(> td[background*="paper_list_bottom"]),
.jcc-main tr:has(img[src*="ohJesus_bbs_line"]) { display: none !important; }

/* search keyword caption row */
.jcc-main td[colspan][align="right"] { font-size: 14px !important; color: #667 !important; padding: 2px 4px 14px !important; }

/* header row (vod=#C9D9FD, paper=#D8F1D5) -> navy */
.jcc-main tr[bgcolor="#C9D9FD"], .jcc-main tr[bgcolor="#D8F1D5"] {
    background: linear-gradient(135deg, #003366, #1d6fd1) !important;
}
.jcc-main tr[bgcolor="#C9D9FD"] td, .jcc-main tr[bgcolor="#D8F1D5"] td {
    color: #ffffff !important; font-weight: 700 !important; font-size: 14px !important;
    padding: 12px 8px !important; border: none !important;
}
/* data rows */
.jcc-main tr[align="center"]:not([bgcolor]) td {
    font-size: 14px !important; padding: 11px 6px !important;
    border-bottom: 1px solid var(--jcc-line) !important;
}
.jcc-main tr[align="center"]:not([bgcolor]):hover { background: #eef4ff !important; }
.jcc-main tr[align="center"]:not([bgcolor]) a { color: var(--jcc-blue) !important; text-decoration: none !important; font-weight: 500 !important; }
.jcc-main tr[align="center"]:not([bgcolor]) a:hover { color: var(--jcc-navy) !important; text-decoration: underline !important; }
/* keep the red search-term highlight (matches red theme) */
.jcc-main font[color="red"] { font-weight: 700 !important; }


/* paper article view -- hide the empty legacy IE font-button table that
   becomes an empty white card on regular text articles (unify to single
   title card, matching boong/other articles). Cartoon/ear bodies (which
   contain real content: img/font/table) are kept. */
#paper-article-body:not(:has(img)):not(:has(font)):not(:has(table)):not(:has(iframe)) {
    display: none !important;
}


/* paper article images -- responsive auto-resize + main photo fills width.
   Upload hi-res; the browser scales it DOWN to the column width = sharp.
   (img[hspace="8"] is the template main photo; all imgs are capped to 100%.) */
#paper-content-col img { max-width: 100% !important; height: auto !important; }
#paper-content-col img[hspace="8"] {
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 16px auto !important;
    border-radius: 8px !important;
}


/* text / boong sections: main photo stays small, floated left (text wraps
   to the right) -- overrides the full-width rule for these two sections. */
#paper-content-col.paper-sec-text img[hspace="8"],
#paper-content-col.paper-sec-boong img[hspace="8"] {
    width: auto !important;
    max-width: 300px !important;
    float: left !important;
    display: inline !important;
    margin: 6px 22px 12px 0 !important;
}


/* branch pagination: hide the stray [ ] bracket text around the styled
   buttons (brackets are bare text nodes; zero the container font, restore
   on the actual button elements). No HTML change needed. */
#branch-nav { font-size: 0 !important; }
#branch-nav a, #branch-nav font { font-size: 13px !important; }


/* robust bracket-hide for branch pagination: zero the container AND any
   non-active <font> wrapper, restore only the real buttons. Covers brackets
   sitting as bare text OR inside a wrapper <font>. */
#branch-nav { font-size: 0 !important; }
#branch-nav font:not([color="#cf0000"]) { font-size: 0 !important; }
#branch-nav a { font-size: 13px !important; }