@charset "utf-8";
/* =============================================================================
 * CMS 연동 스타일 — 디자인 시안(css/style.css)에 없는 화면 · 요소만 담는다.
 *   style.css 는 시안 원본을 그대로 두고(푸터를 공용 프레임으로 옮긴 부분만 수정), 색 · 글꼴은 그 토큰(--navy --gold …)을 쓴다.
 *   · 서브 화면 셸(.page-sub, .sub-main)  · 약관/개인정보 문서  · 게시판 공용 색(.bo 변수) · 게시판 상단
 *   · 메인 인사이트 모달의 '전문 보기'     · 확장 필드 날짜 입력(Zebra_DatePicker)
 * ==========================================================================*/

/* ===== 서브 화면 셸 (frame/layout/sub.html) ===== */
/* 서브 화면은 히어로가 없으므로 헤더를 처음부터 진한 배경으로 둔다 */
.page-sub .v4-header {
    background: rgba(7, 19, 35, 0.96);
    border-color: var(--line-dark);
    backdrop-filter: blur(16px);
}
.sub-main {
    padding-top: 108px; /* 고정 헤더 높이(style.css .v4-header --header-h) */
    min-height: 70vh;
    background: var(--paper);
}
/* 푸터의 위 선은 메인에서 CONTACT 섹션(같은 남색)과 푸터를 가르는 선이다. 서브 화면은 위가 밝은 본문이라
   남색 띠 맨 위에 선만 떠 보이므로 선 대신 위 여백을 둔다 */
.page-sub .site-footer {
    padding-top: 56px;
}
.page-sub .site-footer-inner {
    border-top: 0;
    padding-top: 0;
}
/* 옛 스킨의 reset.css 가 하던 여백 · 목록 초기화를 서브 본문 안에서만 한다.
   회원 · 게시판 스킨이 이 초기화를 전제로 만들어져 있다. :where() 라 각 화면의 스타일이 항상 이긴다 */
:where(.sub-main) :where(*) {
    margin: 0;
    padding: 0;
}
:where(.sub-main) :where(ul, ol, li, dl) {
    list-style: none;
}
:where(.sub-main) :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
}
:where(.sub-main) :where(img, fieldset) {
    border: 0;
}
.sub_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.sub_content {
    padding: 80px 0 110px;
}

/* ===== 약관 · 개인정보처리방침 (service/agreement.html privacy.html) ===== */
.ser_title {
    margin-bottom: 34px;
    color: var(--navy);
    font: 500 clamp(28px, 3vw, 40px) / 1.4 var(--serif);
    letter-spacing: -0.06em;
    text-align: center;
}
.ser_box {
    max-height: 640px;
    overflow-y: auto;
    padding: 30px 32px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85;
}
/* 관리자가 쓴 약관 문서(약관 화면 .ser_box, 회원가입 약관 동의 .agree_box). 옛 문서처럼 띄어쓰기가   로 된 글은
   본문 word-break: keep-all 과 겹치면 한 문단이 끊을 곳 없는 한 덩어리가 되어 상자 밖으로 잘린다 — 넘칠 때만 줄을 나눈다(게시판 본문과 같은 규칙) */
.ser_box,
.agree_box {
    overflow-wrap: break-word;
}

/* ===== 통합검색 결과 (service/search.html — 메뉴에 연결하지 않은 시스템 화면) ===== */
.search-result__title {
    color: var(--navy);
    font: 500 clamp(26px, 3vw, 36px) / 1.45 var(--serif);
    letter-spacing: -0.06em;
}
.search-result__title em {
    font-style: normal;
    color: #9a781f;
}
.search-result__group {
    margin-top: 44px;
}
.search-result__group h3 {
    margin-bottom: 12px;
    color: #9c781d;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.search-result__group ul {
    border-top: 1px solid var(--line);
}
.search-result__group li {
    border-bottom: 1px solid var(--line);
}
.search-result__group a {
    display: block;
    padding: 20px 4px;
    transition: background 0.2s;
}
.search-result__group a:hover,
.search-result__group a:focus-visible {
    background: #fff;
}
.search-result__group strong {
    display: block;
    color: var(--ink);
    font: 500 19px/1.55 var(--serif);
    letter-spacing: -0.06em;
}
.search-result__group span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: break-word;
}
.search-result__empty {
    margin-top: 40px;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    text-align: center;
}

/* ===== 게시판 공용 (board/_common/board.css 의 변수만 사이트 톤으로) ===== */
.sub-main .bo {
    --bo-primary: var(--navy);
    --bo-accent: var(--gold);
    --bo-text: var(--ink);
    --bo-muted: var(--muted);
    --bo-border: var(--line);
    --bo-border-strong: rgba(10, 25, 47, 0.26);
    --bo-bg: #fff;
    --bo-bg-soft: #f1efe9;
    --bo-radius: 0;
    font-family: var(--sans);
}
.sub-main .bo-top__title {
    color: var(--navy);
    font: 500 clamp(28px, 3vw, 40px) / 1.4 var(--serif);
    letter-spacing: -0.06em;
}

/* ===== 게시판 상단 — 글보기 · 글쓰기의 페이지 띠 (board/_top/insight.html) =====
   목록이 아닌 화면에서는 게시판 이름을 제목이 아닌 작은 띠로 두고, 글 제목이 그 화면의 제목이 된다 */
.sub-main .bo-pagebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 56px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.bo-pagebar__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    color: var(--ink);
    font: 500 16px/1.4 var(--serif);
    letter-spacing: -0.04em;
}
.bo-pagebar__name span {
    color: #9a781f;
    font: 700 10px/1 var(--sans);
    letter-spacing: 0.18em;
}
.bo-pagebar__back {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: color 0.2s;
}
.bo-pagebar__back:hover,
.bo-pagebar__back:focus-visible {
    color: var(--navy);
}

/* ===== 메인 INSIGHTS 카드 — 글 수에 따라 =====
   시안은 카드 3장을 전제로 카드 사이 틈을 목록 배경색(선 색)으로 칠한다. 글이 1~2개면 빈 칸이 그 색 덩어리로 남으므로
   마지막 카드가 남은 칸을 채운다 (3장 이상이면 시안 그대로) */
@media (min-width: 1181px) {
    .insight-cards article:first-child:last-child {
        grid-column: 1 / -1;
    }
    .insight-cards article:nth-child(2):last-child {
        grid-column: 2 / -1;
    }
}
@media (min-width: 761px) and (max-width: 1180px) {
    .insight-cards article:nth-child(2):last-child {
        grid-column: 1 / -1;
    }
}

/* ===== 메인 인사이트 모달 — 게시판 글보기로 가는 '전문 보기' (main.html data-insight-modal-link) ===== */
.insight-more {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 12px;
    margin: 6px 0 22px;
    color: #9a781f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color 0.2s;
}
.insight-more[hidden] {
    display: none;
}
.insight-more:hover,
.insight-more:focus-visible {
    color: var(--navy);
}
.insight-more b {
    font-weight: 400;
}

/* ===== 확장 필드 날짜 입력 (.calendar → common/js/master.js 의 Zebra_DatePicker, js/zebra_datepicker.js) ===== */
.calendar { width: 180px; background: url("../images/ico_cal.png") no-repeat right 5px center; padding-right: 25px !important; font-size: 15px; border: 1px solid #eee; padding: 5px 10px; }
.Zebra_DatePicker * { margin: 0; padding: 0; color: #666; z-index: 9999; }
.Zebra_DatePicker { position: absolute; background: #373737; border: 3px solid #373737; border-radius: 4px; display: none; z-index: 100; font-size: 14px; }
.Zebra_DatePicker table { border-collapse: collapse; border-spacing: 0; }
.Zebra_DatePicker td, .Zebra_DatePicker th { text-align: center; padding: 5px 0; }
.Zebra_DatePicker td { cursor: pointer; }
.Zebra_DatePicker .dp_daypicker, .Zebra_DatePicker .dp_monthpicker, .Zebra_DatePicker .dp_yearpicker { margin-top: 3px; }
.Zebra_DatePicker .dp_daypicker td, .Zebra_DatePicker .dp_daypicker th, .Zebra_DatePicker .dp_monthpicker td, .Zebra_DatePicker .dp_yearpicker td { width: 30px; border: 1px solid #bbb; background: #dedede url("../images/default-date.png") repeat-x top; color: #666; }
.Zebra_DatePicker .dp_header td { color: #e0e0e0; background: #373737; }
.Zebra_DatePicker .dp_header .dp_previous, .Zebra_DatePicker .dp_header .dp_next { width: 30px; }
.Zebra_DatePicker .dp_header .dp_caption { font-weight: bold; }
.Zebra_DatePicker .dp_header .dp_hover { background: #222; color: #fff; border-radius: 10px; }
.Zebra_DatePicker .dp_header .dp_blocked { color: #888; cursor: default; }
.Zebra_DatePicker td.dp_week_number, .Zebra_DatePicker .dp_daypicker th { background: #f1f1f1; font-size: 11px; padding-top: 7px; }
.Zebra_DatePicker td.dp_weekend_disabled, .Zebra_DatePicker td.dp_not_in_month { background: #ececec url("../images/disabled-date.png"); color: #e0e0e0; cursor: default; }
.Zebra_DatePicker td.dp_weekend { background: #dedede url("../images/default-date.png") repeat-x top; color: #666; }
.Zebra_DatePicker td.dp_selected { background: #e26262; color: #e0e0e0 !important; }
.Zebra_DatePicker .dp_monthpicker td, .Zebra_DatePicker .dp_yearpicker td { width: 33%; }
.Zebra_DatePicker td.dp_current { color: #e26261; }
.Zebra_DatePicker td.dp_disabled_current { color: #e38585; }
.Zebra_DatePicker td.dp_hover { background: #67aabb url("../images/selected-date.png") repeat-x top; color: #e0e0e0; }
.Zebra_DatePicker td.dp_disabled { background: #ececec url("../images/disabled-date.png") repeat-x top; color: #ddd; cursor: default; }

/* ===== 760px 이하 (모바일) ===== */
@media (max-width: 760px) {
    .sub-main {
        padding-top: 88px; /* style.css 모바일 --header-h */
    }
    .sub_content {
        padding: 56px 0 80px;
    }
    .page-sub .site-footer {
        padding-top: 44px;
    }
    .sub-main .bo-pagebar {
        margin-bottom: 40px;
    }
    .ser_box {
        padding: 22px 18px;
    }
}