/* =========================================
   망보드 보기 페이지 버튼(목록/수정/삭제/답변/글쓰기) 스타일
   ========================================= */

/* 버튼들을 좀 넓게, 가로 한 줄로 보이게 */
.assoc-board-style .mb-button,
.edu-board-style .mb-button {
    display: inline-block;
    min-width: 80px;              /* 버튼 폭 넓게 */
    padding: 6px 14px;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;          /* 글자가 세로로 안 내려가게 */
    border-radius: 999px;         /* 동그란 캡슐 모양 */
    border: 1px solid #e0d4c3;
    background-color: #fff7ec;
    color: #5a4127;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    text-align: center;
}

/* 협회/교육원 각각 포인트 컬러 살짝 다르게 */
.assoc-board-style .mb-button:hover {
    background-color: var(--assoc-primary);
    color: #ffffff;
    border-color: var(--assoc-primary);
}

.edu-board-style .mb-button:hover {
    background-color: var(--edu-primary);
    color: #ffffff;
    border-color: var(--edu-primary);
}

/* 보기 페이지 등에서 버튼 영역 정렬 & 간격 */
.assoc-board-style .mb-button-area,
.assoc-board-style .mb-view-bottom,
.edu-board-style .mb-button-area,
.edu-board-style .mb-view-bottom {
    text-align: right;
    margin-top: 12px;
}

.assoc-board-style .mb-button + .mb-button,
.edu-board-style .mb-button + .mb-button {
    margin-left: 6px;
}


/* --- Reset & Variables --- */
:root {
    --k-dark: #1a1a1a;
    --k-paper: #fdfbf7;
    --assoc-primary: #2c3e50;
    --assoc-accent: #e67e22;
    --edu-primary: #5d4037;
    --edu-accent: #8c6e64;
    --text-main: #333333;
    --text-light: #666666;
    --white: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--text-main);
    background-color: var(--k-paper);
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
}
a { text-decoration: none; color: inherit; cursor: pointer; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; object-fit: cover; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* --- Utilities --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.flex { display: flex; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.font-serif { font-family: 'Noto Serif KR', serif; }
.font-bold { font-weight: 700; }
.section-padding { padding: 80px 0; }
.md-hidden { display: none !important; }

/* --- Header --- */
header {
    position: absolute; top: 0; width: 100%; z-index: 50; height: 80px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; transition: background 0.3s;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid #f1f1f1;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    color: #333;
}

.header-landing {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.logo-group { cursor: pointer; display: flex; align-items: center; }
.logo-img { height: 50px; width: auto; object-fit: contain; }
.logo-img-edu { height: 45px; width: auto; object-fit: contain; }

.nav-desktop { display: flex; gap: 30px; font-size: 1.15rem; font-weight: 500; }
.nav-desktop a { opacity: 1; color: #555; transition: 0.2s; }
.nav-desktop a:hover { color: var(--assoc-accent); }
.header-edu .nav-desktop a:hover { color: var(--edu-accent); }

.nav-desktop .btn-register { 
    background: var(--assoc-accent); 
    color: white !important; 
    padding: 6px 16px; 
    border-radius: 20px; 
    border: none;
    font-weight: bold;
    font-size: 1rem;
}
.header-edu .btn-register { background: var(--edu-accent); }
.btn-register:hover { opacity: 0.9; }

/* --- Mobile Menu --- */
.mobile-menu-btn { display: none; font-size: 24px; color: #333; }
.mobile-nav {
    position: absolute; top: 80px; left: 0; width: 100%;
    padding: 20px; display: none; flex-direction: column; gap: 15px; z-index: 49;
    background: white; border-top: 1px solid #eee; box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    color: #333;
}
.mobile-nav.show { display: flex; }

/* --- Sub-page Styles --- */
.tab-content { display: none; padding-top: 80px; min-height: 60vh; }
.tab-content.active { display: block; }

.sub-hero { height: 400px; display: flex; align-items: center; justify-content: center; color: white; position: relative; text-align: center; }
.sub-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1; }
.sub-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 0; }

/* --- Footer --- */
.footer { background: #1a1a1a; color: #888; padding: 60px 0; font-size: 0.9rem; margin-top: auto; }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer-info h3 { color: white; margin-bottom: 15px; font-size: 1.1rem; }
.footer-links a { color: #bbb; margin: 0 5px; transition: 0.2s; }
.footer-links a:hover { color: white; text-decoration: underline; }

/* --- Landing Page Design --- */
.landing-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.landing-hero {
    position: relative;
    height: 70vh; 
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: white;
    padding-top: 80px;
}
.landing-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: -2;
}
.landing-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: -1;
}
.hero-text-box { max-width: 800px; padding: 0 20px; animation: fadeInUp 0.8s ease-out; }
.hero-title {
    font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem;
    font-family: 'Noto Serif KR', serif; line-height: 1.2;
    text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.hero-subtitle {
    font-size: 1.125rem; font-weight: 300; margin-bottom: 2.5rem; opacity: 0.9;
    line-height: 1.6;
    word-break: keep-all;
}
.btn-hero-outline {
    display: inline-block; padding: 12px 36px;
    border: 1px solid rgba(255,255,255,0.6); border-radius: 4px;
    color: white; font-size: 0.95rem; transition: 0.3s;
}
.btn-hero-outline:hover { background: white; color: #1a1a1a; border-color: white; }

.landing-bottom {
    flex: 1;
    background-color: #fdfbf7;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 20px;
}
.landing-split {
    display: grid; grid-template-columns: 1fr 1px 1fr;
    width: 100%; max-width: 1000px; gap: 60px; align-items: start;
}
.split-divider { background-color: #d6d3d1; height: 100%; min-height: 150px; }
.split-item { padding: 10px 0; text-align: left; display: flex; flex-direction: column; justify-content: center; }

.split-title { font-size: 2rem; font-weight: 700; font-family: 'Noto Serif KR', serif; margin-bottom: 1rem; color: #1a1a1a; }
.split-desc { font-size: 1.125rem; color: #555; margin-bottom: 2rem; line-height: 1.6; min-height: 3.2em; font-weight: 300; }
.link-arrow {
    font-size: 1.1rem; font-weight: 700; color: #1a1a1a;
    display: inline-flex; align-items: center; transition: 0.3s;
}
.link-arrow span { margin-left: 8px; transition: transform 0.3s; }
.link-arrow:hover { color: var(--assoc-accent); }
.link-arrow:hover span { transform: translateX(5px); }
.edu-link:hover { color: var(--edu-accent); }

/* --- Education Cards --- */
.edu-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #f5f5f4;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    cursor: default;
}

.edu-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.edu-card-hover-line {
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--edu-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.edu-card:hover .edu-card-hover-line {
    transform: scaleY(1);
}

.edu-card-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    background: #fdfbf7;
    color: var(--edu-primary);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.edu-card:hover .edu-card-icon {
    background: var(--edu-primary);
    color: white;
}

/* --- Modals --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 100;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.modal-overlay.active { display: flex; }
.modal-content {
    background: white; padding: 30px; border-radius: 10px;
    width: 90%; max-width: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: fadeInUp 0.3s ease-out;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    header { padding: 0 20px; }
    .md-hidden { display: block !important; }
    .nav-desktop { display: none !important; }
    .mobile-menu-btn { display: block; }
    
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1rem; }
    .landing-split { grid-template-columns: 1fr; gap: 40px; }
    .split-divider { display: none; }
    .split-item { text-align: center; padding: 0; align-items: center; }
    .split-desc { min-height: auto; }
    .link-arrow { justify-content: center; }
    
    .logo-img { height: 40px; }
    .logo-img-edu { height: 35px; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================
   📌 KCADA / 교육원 게시판 통합 스타일
   - 공지 / 갤러리 / 자료실 / 수강신청 모두 적용
   - 협회/교육원 각각 다른 톤 & 카드 스타일
   ========================================================= */

/* ------------------------------
   🔸 공통 레이아웃 래퍼
   ------------------------------ */

/* 교육원 게시판 전체 박스 */
.edu-board-style {
    background-color: #fdf7ec;           /* 따뜻한 베이지 */
    padding: 20px 22px;
    border-radius: 12px;
    border: 1px solid #e4d3b8;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    margin-top: 10px;
}

/* 협회 게시판 전체 박스 */
.assoc-board-style {
    background-color: #f8fbff;           /* 아주 연한 블루 */
    padding: 20px 22px;
    border-radius: 12px;
    border: 1px solid #d9e2f2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    margin-top: 10px;
}

/* ------------------------------
   🔸 게시판 상단(검색·정렬 영역)
   ------------------------------ */
.edu-board-style form,
.assoc-board-style form {
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.9rem;
}

.edu-board-style select,
.edu-board-style input[type="text"],
.assoc-board-style select,
.assoc-board-style input[type="text"] {
    padding: 6px 8px;
    border: 1px solid #d3c3aa;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* ------------------------------
   🔸 게시판 테이블
   ------------------------------ */
.edu-board-style table,
.assoc-board-style table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fffaf2;
    font-size: 0.95rem;
}

/* 상단 굵은 라인 */
.edu-board-style table {
    border-top: 2px solid rgba(93, 64, 55, 0.6);  /* 브라운 라인 */
}
.assoc-board-style table {
    border-top: 2px solid rgba(44, 62, 80, 0.7);  /* 네이비 라인 */
}

.edu-board-style th,
.edu-board-style td,
.assoc-board-style th,
.assoc-board-style td {
    padding: 12px 12px;
    border-bottom: 1px solid #eee2cf;
    text-align: left;
}

.assoc-board-style th,
.assoc-board-style td {
    border-bottom-color: #e1e7f5;
}

/* 테이블 헤더 */
.edu-board-style th {
    font-weight: 600;
    background-color: #f7ecdd;
    color: #5d4037;
}
.assoc-board-style th {
    font-weight: 600;
    background-color: #eef3fb;
    color: #2c3e50;
}

/* hover 행 강조 */
.edu-board-style tbody tr:hover td {
    background-color: rgba(255, 232, 196, 0.3);
}
.assoc-board-style tbody tr:hover td {
    background-color: rgba(225, 238, 255, 0.4);
}

/* '등록된 게시물이 없습니다' */
.edu-board-style td[colspan],
.assoc-board-style td[colspan] {
    text-align: center;
    padding: 30px 10px;
    color: #777;
}

/* ------------------------------
   🔸 글쓰기 버튼 / 페이지 이동 버튼
   ------------------------------ */
.edu-board-style .mb-button,
.assoc-board-style .mb-button {
    display: inline-block;
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid;
    margin-top: 12px;
    cursor: pointer;
    transition: 0.15s ease;
}

/* 교육원 버튼 */
.edu-board-style .mb-button {
    background: #fff7ea;
    border-color: #5d4037;
    color: #5d4037;
}
.edu-board-style .mb-button:hover {
    background: #f2e3cf;
}

/* 협회 버튼 */
.assoc-board-style .mb-button {
    background: #f4f7ff;
    border-color: #2c3e50;
    color: #2c3e50;
}
.assoc-board-style .mb-button:hover {
    background: #e7eefc;
}

/* ------------------------------
   🔸 게시판 제목 숨기기 (기본 타이틀 중복 제거)
   ------------------------------ */
.mb-board-title,
.mb-board-sub {
    display: none !important;
}

/* ------------------------------
   🔸 갤러리형 리스트 가독성 보정
   ------------------------------ */
.edu-board-style .mb-gallery-box,
.assoc-board-style .mb-gallery-box {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    transition: 0.2s ease;
}

.edu-board-style .mb-gallery-box:hover,
.assoc-board-style .mb-gallery-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* =========================================
   글쓰기 버튼 오른쪽 아래 정렬
   ========================================= */
.edu-board-style .mb-button-area,
.edu-board-style .mb-bottom-btn,
.edu-board-style .mb-board-bottom,
.assoc-board-style .mb-button-area,
.assoc-board-style .mb-bottom-btn,
.assoc-board-style .mb-board-bottom {
    text-align: right;
    margin-top: 10px;
}

.edu-board-style .mb-button,
.assoc-board-style .mb-button {
    float: none !important;
    margin-left: 6px;
}

/* ===============================
   망보드 caption(협회 소개 / 교육원 소개) 숨기기
   =============================== */
.edu-board-style table caption,
.assoc-board-style table caption {
    display: none !important;
}

/* =========================================
   협회 공지사항 보기 화면 버튼 스타일 강제 적용
   (목록 / 수정 / 삭제 / 답변 / 글쓰기)
   ========================================= */

/* 버튼 컨테이너 정렬 */
#association_notice_board_box .mb-bottom-btn,
#association_notice_board_box .mb-view-bottom,
#association_notice_board_box .list-btn {
    text-align: right;
    margin-top: 12px;
}

/* 버튼들이 들어있는 테이블을 가로로 펼치기 */
#association_notice_board_box .mb-bottom-btn table,
#association_notice_board_box .mb-view-bottom table,
#association_notice_board_box .list-btn table {
    width: auto;
    margin-left: auto;
    border-collapse: separate;
    border-spacing: 6px 0;
}

/* 각 셀 폭 자동으로 */
#association_notice_board_box .mb-bottom-btn td,
#association_notice_board_box .mb-view-bottom td,
#association_notice_board_box .list-btn td {
    width: auto;
}

/* 실제 버튼(input) 스타일 */
#association_notice_board_box input[type="button"],
#association_notice_board_box .mb-bottom-btn input,
#association_notice_board_box .mb-view-bottom input,
#association_notice_board_box .list-btn input {
    display: inline-block !important;
    min-width: 80px !important;
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;   /* 줄바꿈 방지 */
    border-radius: 999px !important;
    border: 1px solid #e0d4c3 !important;
    background-color: #fff7ec !important;
    color: #5a4127 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    cursor: pointer !important;
}

/* 호버 색상 (협회 컬러) */
#association_notice_board_box input[type="button"]:hover {
    background-color: var(--assoc-primary) !important;
    border-color: var(--assoc-primary) !important;
    color: #ffffff !important;
}

/* =========================================
   협회 공지사항 보기 버튼 디자인 재정의
   (목록 / 수정 / 삭제 / 답변 / 글쓰기)
   ========================================= */

/* 버튼 박스 정렬 */
#association_notice_btn_box {
    text-align: right;
    margin-top: 12px;
}

/* 망보드 기본 float이나 세로 배치 무시 */
#association_notice_btn_box .btn-box-left {
    float: none !important;
}

/* 실제 버튼 스타일 */
#association_notice_btn_box button.btn {
    display: inline-block !important;          /* 가로로 나란히 */
    width: auto !important;
    height: auto !important;
    min-width: 80px !important;
    padding: 6px 14px !important;

    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;           /* 한 글자씩 줄바꿈 방지 */
    writing-mode: horizontal-tb !important;   /* 세로쓰기 강제 해제 */

    margin-left: 6px !important;
    margin-bottom: 0 !important;

    border-radius: 999px !important;          /* 캡슐 모양 */
    border: 1px solid #e0d4c3 !important;
    background-color: #fff7ec !important;
    color: #5a4127 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    cursor: pointer !important;
}

/* 첫 번째 버튼은 왼쪽 여백 제거 */
#association_notice_btn_box button.btn:first-child {
    margin-left: 0 !important;
}

/* hover 색상 (협회 메인 컬러) */
#association_notice_btn_box button.btn:hover {
    background-color: var(--assoc-primary) !important;
    border-color: var(--assoc-primary) !important;
    color: #ffffff !important;
}

/* =========================================
   협회 공지사항 보기 버튼 스타일 재정의
   ========================================= */

/* 버튼 박스 전체 정렬 */
.assoc-board-style #association_notice_btn_box {
    text-align: right;
    margin-top: 12px;
}

/* 기본 float 제거 */
.assoc-board-style #association_notice_btn_box .btn-box-left {
    float: none !important;
}

/* 세로 버튼을 가로 캡슐 버튼으로 변경 */
.assoc-board-style #association_notice_btn_box button.btn {
    display: inline-block !important;      /* 세로열 → 가로로 나열 */
    width: auto !important;
    min-width: 80px !important;

    padding: 6px 14px !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    word-wrap: normal !important;          /* 한 글자씩 줄바꿈 막기 */
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;

    border-radius: 999px !important;
    border: 1px solid #e0d4c3 !important;
    background-color: #fff7ec !important;
    color: #5a4127 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    cursor: pointer !important;
}

/* 첫 버튼만 왼쪽 여백 제거 */
.assoc-board-style #association_notice_btn_box button.btn:first-child {
    margin-left: 0 !important;
}

/* hover 색상 (협회 포인트 컬러) */
.assoc-board-style #association_notice_btn_box button.btn:hover {
    background-color: var(--assoc-primary) !important;
    border-color: var(--assoc-primary) !important;
    color: #ffffff !important;
}

/* 공지사항 상세 페이지 버튼 위치 아래로 내리기 */
.assoc-main-style .view-btn {
    position: static !important;   /* 기존 absolute, relative 무효화 */
    clear: both !important;
    margin-top: 24px;
}

/* 오른쪽으로 떠있는 박스 정리 */
.assoc-main-style .view-btn .btn-box-right {
    float: none !important;        /* float:right 무효화 */
    text-align: right;             /* 정렬 원하는대로: left / center / right */
}

/* 버튼은 가로로 한 줄에 */
.assoc-main-style #association_notice_btn_box button.btn {
    display: inline-block !important;
}
/* 공지사항 상세 - 버튼을 글 아래로 내리기 */

/* 버튼 전체 박스(오른쪽에 붙어있는 박스) 재정렬 */
#association_notice_btn_box.btn-box-right {
    position: static !important;      /* absolute / relative 등 모두 무효화 */
    float: none !important;           /* float:right 무효화 */
    clear: both !important;
    display: block !important;
    width: 100% !important;
    text-align: right;                /* 원하면 left/center 로 변경 */
    margin: 24px 0 0 !important;
}

/* 버튼 영역을 감싸는 view-btn 자체도 “위치 고정” 풀기 */
.view-btn {
    position: static !important;
    float: none !important;
    width: 100% !important;
}

/* 혹시 flex 레이아웃일 때 깨지는 걸 방지 */
.assoc-tion_notice_btn_box {
    display: block !important;
}

/* 버튼은 가로로 한 줄 정렬 */
#association_notice_btn_box button.btn {
    display: inline-block !important;
}

/* 공지사항 상세: flex 때문에 버튼이 오른쪽에 붙는 문제 해결 */
#assoc-board-style form#post {
    display: block !important;      /* flex 레이아웃 해제 */
}
/* 망보드 글보기 폼 레이아웃 세로 정렬 */
#association_notice_form_board_view {
    display: flex !important;
    flex-direction: column !important;  /* 가로 → 세로 */
}
/* ✅ 공지사항 목록 페이지 - 글쓰기 버튼을 목록 아래로 내리기 */

/* 목록 폼 레이아웃을 세로로 */
#board_list {
    display: flex !important;
    flex-direction: column !important;  /* 가로 → 세로 */
}

/* 버튼 줄 컨테이너 정리 */
#board_list .list-btn {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: 16px !important;
}

/* 오른쪽 정렬 (원하면 center/left 로 변경 가능) */
#board_list .list-btn .btn-box-right {
    float: none !important;
    text-align: right !important;
}

/* 글쓰기 버튼은 가로 한 줄 */
#board_list .btn-box-right button.btn {
    display: inline-block !important;
}
/* 망보드 기본 flex 레이아웃 해제 (목록/상세 공통) */
.mb-board form {
    display: block !important;   /* 원래 display:flex 였던 걸 모두 해제 */
}

/* 버튼 줄을 항상 아래쪽에 세로 배치 */
.mb-board .view-btn,
.mb-board .list-btn {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: 20px !important;
}

/* 버튼 묶음 정렬 */
.mb-board .view-btn .btn-box-right,
.mb-board .list-btn .btn-box-right {
    float: none !important;
    text-align: right !important;    /* 필요하면 left / center 로 바꿔도 됨 */
}

/* 버튼은 가로 한 줄 */
.mb-board .btn-box-right button.btn {
    display: inline-block !important;
}