@charset "UTF-8";
/* ============================================================
   intro_sys — 제도 소개(우선구매 / 정기공연·전시) 공통 스타일
   intro_sys_tab1.jsp 인라인 <style> 및 인라인 style 속성 추출
   ============================================================ */

/* ----- Layout ----- */
.container.sys-wide { max-width: 1440px; }
.sys-content-wrap { margin-bottom: 150px; }
.sys-section { margin-top: 80px; }
.sys-content-wrap .sys-section:first-child { margin-top: 0; }

/* ----- Titles ----- */
.sys-title-v2 { font-size: 30px; font-weight: 700; color: #000; padding-bottom: 16px; border-bottom: 2px solid #000; margin-bottom: 24px; }
.sys-sub-title { font-size: 24px; font-weight: 700; color: #000; margin-bottom: 24px; display: block; }
.sys-line-title { border-bottom: 1px solid #000; padding-bottom: 16px; margin-bottom: 16px; }

/* ----- Gray Box / Banner ----- */
.sys-box-gray { background: #eaeef3; padding: 24px; border-radius: 4px; }
.sys-box-gray.p-40 { padding: 40px; }
.sys-box-gray p { font-size: 18px; color: #000; line-height: 1.6; margin: 0; word-break: keep-all; }

/* ----- Related Basis Grid ----- */
.basis-card-wrap { display: flex; gap: 24px; margin-top: 24px; }
.basis-card { flex: 1; background: #eaeef3; border-top: 1px solid #000; padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 220px; }
.basis-card .txt { font-size: 18px; line-height: 1.6; color: #313131; margin-bottom: 24px; height: 52px; display: flex; align-items: center; justify-content: center; }
.btn-sys-down { display: flex; align-items: center; justify-content: center; width: 150px; height: 48px; background: #fff; border: 1px solid #000; color: #000; font-size: 16px; font-weight: 500; text-decoration: none; border-radius: 2px; }
.btn-sys-down:hover { background: #000; color: #fff;}

/* ----- Table ----- */
.sys-table-v2 { width: 100%; border-collapse: collapse; margin-top: 16px; border-top: 1px solid #000; }
.sys-table-v2 th, .sys-table-v2 td { border: 1px solid #d3d3d3; padding: 16px; font-size: 18px; vertical-align: middle; }
.sys-table-v2 th { background: #eaeef3; font-weight: 700; color: #000; text-align: center; line-height: 1.5;}
.sys-table-v2 td { background: #fff; color: #313131; text-align: center; }
.sys-table-v2 td.al { text-align: left; line-height: 1.5; }
.sys-table-v2 .sub-th { font-size: 16px; }
.sys-table-v2 col.col-eq { width: 14.28%; }
.sys-table-v2 col.col-eq-last { width: 14.32%; }
.sys-table-v2 col.col-240 { width: 240px; }
.sys-table-v2 .sys-subtotal { background: #f9f9f9; font-weight: 700; }
.sys-table-v2 .th-note { font-weight: 400; font-size: 16px; }

/* ----- Detail List Area ----- */
.sys-info-summary { font-size: 18px; line-height: 1.6; text-align: center; margin-bottom: 40px; }
.sys-info-summary strong { font-weight: 700; }
.sys-unit-info { text-align: right; font-size: 18px; color: #666; margin-bottom: 16px; }
.sys-list-disc { list-style: disc; padding-left: 27px; margin: 24px 0; }
.sys-list-disc li { font-size: 18px; line-height: 1.6; color: #313131; margin-bottom: 8px; }
.sys-list-disc li:last-child { margin-bottom: 0; }
.sys-caption { font-size: 18px; color: #666; margin-top: 16px; text-align: right; }

/* ----- Manual Section Banner ----- */
.manual-banner { background: #eaeef3; padding: 24px; margin: 40px 0; border-radius: 4px; display: flex; align-items: center; }
.btn-manual-v2 { background: #fff; border: 1px solid #000; padding: 12px 24px; font-size: 18px; font-weight: 500; text-decoration: none; color: #000; border-radius: 2px; }

/* ----- Flow Step Graph (ol/li) ----- */
.flow-step-container { margin-top: 40px; }
.flow-step-title { font-size: 18px; font-weight: 400; margin-bottom: 24px; }
.flow-step-wrap { display: flex; align-items: stretch; gap: 16px; list-style: none; margin: 0; padding: 0; }
.flow-step-wrap.narrow { max-width: 600px; }
.flow-box { position: relative; flex: 1; border: 1px solid #d3d3d3; background: #fff; padding: 40px; min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; }
.flow-box .flow-no { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; border-radius: 50%; background: #113856; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; }
.flow-box-txt { font-size: 18px; line-height: 1.4; color: #000; }

/* ----- Link Button (tab2) ----- */
.btn-sys-link { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background: #fff; border: 1px solid #000; color: #000; font-size: 16px; font-weight: 500; text-decoration: none; border-radius: 2px; margin-top: 24px; }
.btn-sys-link:hover { background: #000; color: #fff; }

/* ----- Marker List (tab2) — 비순차 ◎ 목록 ----- */
.sys-list-v2 { list-style: none; padding: 0; margin-top: 20px; }
.sys-list-v2 li { font-size: 18px; line-height: 1.6; color: #000; margin-bottom: 8px; position: relative; padding-left: 24px; }
.sys-list-v2 li::before { content: '◎'; position: absolute; left: 0; top: 0; color: #000; font-size: 16px; }

/* ----- Ordered List (tab2) — 접근성 <ol> + counter로 원문자 표기 ----- */
@counter-style sys-circled {
    system: fixed;
    symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";
    suffix: "";
}
.sys-olist { list-style: none; padding: 0; margin-top: 20px; counter-reset: sysol; }
.sys-olist > li { font-size: 18px; line-height: 1.6; color: #000; margin-bottom: 8px; position: relative; padding-left: 24px; counter-increment: sysol; }
.sys-olist > li::before { content: counter(sysol, sys-circled); position: absolute; left: 0; top: -1px; color: #000; font-size: 18px; }
.sys-list-v2 + .sys-olist { margin-top: 8px; }

.sys-olist-num { list-style: none; padding: 0; margin-top: 8px; counter-reset: sysoln; }
.sys-olist-num > li { font-size: 16px; line-height: 1.6; color: #000; margin-bottom: 8px; position: relative; padding-left: 24px; counter-increment: sysoln; }
.sys-olist-num > li::before { content: counter(sysoln) ". "; position: absolute; left: 0; top: 0; color: #000; font-size: 16px; }

/* ----- Ratio & Logic Boxes ----- */
.logic-formula-box { background: #eaeef3; padding: 24px; text-align: center; margin-top: 24px; border-radius: 4px; border-left: 4px solid #442c93; }
.logic-formula-box p { font-size: 18px; }

/* ----- Tab wrap override ----- */
.intro-tab-wrap.al-left { justify-content: flex-start; }

/* ----- Text leads (본문 문단) ----- */
.sys-para { font-size: 18px; line-height: 1.5; }
.sys-para-b { font-size: 20px; font-weight: 700; line-height: 1.5;}
.sys-h4 { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.sys-box-gray p.mb-16 { margin-bottom: 16px; }
.sys-box-gray p.fs-16 { font-size: 16px; }

/* ----- Spacing overrides (기존 컴포넌트 마진 재정의) ----- */
.sys-caption.mt-24 { margin-top: 24px; }
.sys-sub-title.mb-0 { margin-bottom: 0; }
.flow-step-container.mt-60 { margin-top: 60px; }
.sys-list-disc.m-0 { margin: 0; }

/* ----- Spacing utilities (일반 요소용) ----- */
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }
.mb-30 { margin-bottom: 30px; }

/* ============================================================
   반응형 (태블릿 1024 / 모바일 768·480)
   ============================================================ */

/* 넓은 표는 좁은 화면에서 가로 스크롤 처리 — 셀 내용 잘림 방지 (JSP에서 table을 이 div로 감쌈) */
.sys-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 장르별 정의 표(2열): 스크롤 래퍼 없이 table-layout 고정으로 표 폭을 항상 컨테이너 100%에 맞춤
   → 내용은 셀 안에서 줄바꿈되고, 화면폭과 무관하게 가로 스크롤이 절대 생기지 않음 (JSP에서 wrapper 미사용) */
.sys-table-flex { table-layout: fixed; width: 100%; max-width: 100%; }
.sys-table-flex th, .sys-table-flex td { word-break: keep-all; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
    .sys-content-wrap { margin-bottom: 100px; }
    /* intro.css의 margin-bottom:120px가 모바일에서도 유지돼 여백 과함 → 축소 */
    .sys-section { margin-top: 60px; margin-bottom: 72px; }

    /* 관련 근거: 가로 3열 카드 → 세로 스택 */
    .basis-card-wrap { flex-direction: column; gap: 16px; }
    .basis-card { padding: 32px 24px; min-height: 0; }
    .basis-card .txt { height: auto; margin-bottom: 20px; }

    /* 우선구매 방법: 가로 플로우 박스 → 세로 스택 */
    .flow-step-wrap { flex-direction: column; }
    .flow-step-wrap.narrow { max-width: none; }
    .flow-box { min-height: 0; padding: 28px 24px; }

    /* 스크롤 래퍼 안의 넓은 표(기관수 7열)만 폭 유지 — 장르 표는 sys-table-flex라 여기서 제외됨 */
    .sys-table-scroll .sys-table-v2:not(.sys-table-flex) { min-width: 680px; }

    /* 장르별 정의 표: 첫 열(구분 th)을 좁혀 내용 열에 공간 확보 */
    .sys-table-flex col.col-240 { width: 160px; }
}

@media (max-width: 768px) {
    .sys-title-v2 { font-size: 24px; margin-bottom: 20px; }
    .sys-sub-title { font-size: 20px; margin-bottom: 20px; }

    .sys-box-gray { padding: 20px; }
    .sys-box-gray.p-40 { padding: 24px; }
    .sys-box-gray p { font-size: 16px; }

    .sys-table-v2 th, .sys-table-v2 td { padding: 12px; font-size: 14px; }
    .sys-table-flex col.col-240 { width: 120px; }
    .sys-table-flex th { word-break: keep-all; }

    .sys-info-summary,
    .sys-unit-info,
    .sys-caption,
    .sys-list-disc li,
    .sys-para,
    .sys-list-v2 li,
    .sys-olist > li,
    .flow-box-txt,
    .flow-step-title { font-size: 15px; }
    .sys-para-b,
    .sys-h4 { font-size: 16px; }

    .logic-formula-box { padding: 20px; }
    .logic-formula-box p { font-size: 16px; word-break: keep-all; }

    .manual-banner { padding: 20px; }
    .btn-manual-v2 { font-size: 16px; padding: 12px 20px; }

    .sys-unit-info,
    .sys-caption { text-align: left; }
    .sys-unit-info { margin-bottom: 0; }
}

@media (max-width: 480px) {
    /* 장르별 정의 표: 가장 좁은 화면에서 구분 열을 더 축소해 스크롤 없이 표기 */
    .sys-table-flex col.col-240 { width: 88px; }
    .sys-table-flex th, .sys-table-flex td { padding: 10px 8px; }
    .sys-table-flex td.al { word-break: keep-all; }
}