/* ==========================================================================
   (사)한국해양치유협회 — 공공기관형 레이아웃 (레퍼런스: 태안해양치유센터 구조 벤치마킹)
   톤앤매너: 바다/청량/웰니스 (블루 · 틸)
   ========================================================================== */

:root {
    --c-primary: #0a4d8c;      /* 딥 블루 */
    --c-primary-dark: #083d73;
    --c-accent: #1aa5a0;       /* 틸 */
    --c-accent-light: #e4f4f3;
    --c-text: #222;
    --c-text-sub: #666;
    --c-line: #dfe6ec;
    --c-bg-soft: #f4f8fb;
    --c-danger: #c0392b;
    --header-h: 90px;
    --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body { font-family: var(--font); color: var(--c-text); line-height: 1.6; background: #fff; }
img { max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
table { border-collapse: collapse; width: 100%; }

.inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ---------- 접근성 ---------- */
.skip-nav a {
    position: absolute; left: -9999px; top: 0; z-index: 9999;
    padding: 10px 20px; background: var(--c-primary); color: #fff;
}
.skip-nav a:focus { left: 0; }
.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 고정 비율 이미지 컨테이너 (레이아웃 불변 핵심 규칙) ----------
   업로드 이미지는 비율을 유지한 채 중앙정렬로 슬롯을 여백 없이 가득 채움(cover).
   가로로 긴 사진은 세로를, 세로로 긴 사진은 가로를 기준으로 채우고
   슬롯 밖으로 넘치는 부분은 중앙 기준으로 잘려 보이지 않음. */
.ratio { position: relative; width: 100%; overflow: hidden; background: var(--c-bg-soft); }
.ratio > img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.ratio-hero  { aspect-ratio: 21 / 9; }
.ratio-16x9  { aspect-ratio: 16 / 9; }
.ratio-4x3   { aspect-ratio: 4 / 3; }
.ratio-1x1   { aspect-ratio: 1 / 1; }
.ratio-4x5   { aspect-ratio: 4 / 5; }
.ratio-3x4   { aspect-ratio: 3 / 4; }
.ratio-banner{ aspect-ratio: 4 / 1; }

/* 말줄임 */
.clamp-1, .clamp-2, .clamp-3 {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

/* ---------- 플래시 메시지 ---------- */
.flash {
    max-width: 1280px; margin: 12px auto 0; padding: 12px 20px; border-radius: 6px;
    background: var(--c-accent-light); color: var(--c-primary-dark); font-weight: 500;
}
.flash-error { background: #fdecea; color: var(--c-danger); }

/* ==========================================================================
   헤더
   ========================================================================== */
.util-bar { background: var(--c-primary-dark); font-size: 0.82rem; }
.util-bar .inner { display: flex; justify-content: flex-end; }
.util-links { display: flex; align-items: center; }
.util-links li { position: relative; }
.util-links li + li::before { content: ""; display: inline-block; width: 1px; height: 10px; background: rgba(255,255,255,.3); margin: 0 12px; }
.util-links a, .util-links .util-name { color: #dbe7f2; padding: 7px 0; display: inline-block; }
.util-links a:hover { color: #fff; text-decoration: underline; }
.util-admin { color: #ffd97a !important; font-weight: 600; }

.header-main { border-bottom: 1px solid var(--c-line); background: #fff; position: relative; z-index: 100; }
.header-main .inner { display: flex; align-items: center; height: var(--header-h); gap: 40px; }
.logo a { display: flex; align-items: center; gap: 12px; }
.logo img { height: 52px; width: auto; }
.logo-text { font-size: 1.25rem; font-weight: 800; color: var(--c-primary-dark); letter-spacing: -0.5px; }

/* GNB + 전체 펼침 메가메뉴
   — 레퍼런스 방식: 헤더에 마우스를 올리면 흰색 풀폭 패널이 내려오며
     모든 대메뉴의 하위메뉴가 컬럼(세로 구분선)으로 한눈에 열림 */
:root { --mega-h: 300px; }
.gnb { margin: 0 auto; }
.gnb-list { display: flex; }
.gnb-item { position: relative; }
.gnb-link {
    display: flex; align-items: center; height: var(--header-h);
    padding: 0 30px; font-size: 1.06rem; font-weight: 700; color: var(--c-text);
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s, padding .35s ease, letter-spacing .35s ease;
}
.gnb-item:hover .gnb-link, .gnb-item:focus-within .gnb-link, .gnb-item.active .gnb-link {
    color: var(--c-primary); border-bottom-color: var(--c-primary-dark);
}
/* 헤더 호버 시 상위 메뉴 간격이 넓어지며 하위 메뉴가 나타남 */
.header-main:hover .gnb-link,
.header-main:focus-within .gnb-link { padding: 0 40px; letter-spacing: 0.5px; }
@media (max-width: 1360px) {
    .gnb-link { padding: 0 20px; }
    .header-main:hover .gnb-link,
    .header-main:focus-within .gnb-link { padding: 0 25px; letter-spacing: 0; }
    .logo-text { font-size: 1.1rem; }
}

/* 풀폭 배경 패널(높이 0 → 펼침) */
.gnb-backdrop {
    position: absolute; top: 100%; left: 0; right: 0; height: 0;
    background: #fff; border-bottom: 1px solid var(--c-line);
    box-shadow: 0 24px 40px rgba(10, 60, 100, .12);
    overflow: hidden; transition: height .3s ease; z-index: 150;
}
.header-main:hover .gnb-backdrop,
.header-main:focus-within .gnb-backdrop { height: var(--mega-h); }

/* 각 대메뉴 아래 하위메뉴 컬럼(전 메뉴 동시 표시) */
.mega-panel {
    position: absolute; top: 100%; left: 0; min-width: 100%;
    height: var(--mega-h); padding: 24px 10px; z-index: 200;
    border-left: 1px solid var(--c-line);
    opacity: 0; visibility: hidden; transition: opacity .22s ease .08s;
}
.gnb-item:last-child .mega-panel { border-right: 1px solid var(--c-line); }
.header-main:hover .mega-panel,
.header-main:focus-within .mega-panel { opacity: 1; visibility: visible; }
.mega-panel a {
    display: block; padding: 9px 20px; font-size: 0.94rem; color: var(--c-text-sub);
    white-space: nowrap; border-radius: 6px; transition: background .15s, color .15s;
}
.mega-panel a:hover { background: var(--c-accent-light); color: var(--c-primary); font-weight: 600; }

/* ---------- 홈 전용: 투명 헤더가 풀스크린 히어로 위에 겹침 ----------
   기본은 배경 없이 이미지 위에 흰 글자 → 헤더에 마우스를 올리면
   메뉴바 배경이 흰색으로 바뀌며 전체 메뉴가 펼쳐짐 (레퍼런스 방식) */
body.home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 500; }
body.home .util-bar { background: rgba(6, 22, 40, .32); }
body.home .header-main {
    background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .28);
    transition: background .25s ease, border-color .25s ease;
}
body.home .logo-text { color: #fff; text-shadow: 0 1px 10px rgba(0, 25, 50, .45); transition: color .2s; }
body.home .gnb-link { color: #fff; text-shadow: 0 1px 8px rgba(0, 25, 50, .4); }
body.home .gnb-item.active .gnb-link { border-bottom-color: #fff; }
body.home .btn-allmenu span { background: #fff; transition: background .2s; }

body.home .site-header:hover .header-main,
body.home .site-header:focus-within .header-main { background: #fff; border-bottom-color: var(--c-line); }
body.home .site-header:hover .logo-text,
body.home .site-header:focus-within .logo-text { color: var(--c-primary-dark); text-shadow: none; }
body.home .site-header:hover .gnb-link,
body.home .site-header:focus-within .gnb-link { color: var(--c-text); text-shadow: none; }
body.home .site-header:hover .gnb-item.active .gnb-link,
body.home .site-header:focus-within .gnb-item.active .gnb-link { border-bottom-color: var(--c-primary-dark); }
body.home .site-header:hover .gnb-item:hover .gnb-link,
body.home .site-header:focus-within .gnb-item:focus-within .gnb-link { color: var(--c-primary); }
body.home .site-header:hover .btn-allmenu span,
body.home .site-header:focus-within .btn-allmenu span { background: var(--c-primary-dark); }

/* 홈 히어로는 화면 최상단부터 하단까지 뷰포트 전체 */
body.home .hero-track { height: 100vh; height: 100svh; }
body.home .flash { position: relative; z-index: 600; margin: 0 auto; border-radius: 0; }

/* 히어로 켄 번즈 효과 — 슬라이드 이미지가 서서히 줌/이동/회전
   (실제 애니메이션 종류·속도는 main.js 가 슬라이드마다 랜덤 배정) */
.hero-slide .ratio-hero img {
    will-change: transform;
    transform-origin: center;
    animation: kb-zoom 16s ease-in-out infinite alternate; /* JS 미동작 시 기본값 */
}
@keyframes kb-zoom {                                  /* 서서히 줌인 */
    from { transform: scale(1); }
    to   { transform: scale(1.14); }
}
@keyframes kb-pan {                                   /* 줌 + 좌우 팬 */
    from { transform: scale(1.12) translateX(-2.2%); }
    to   { transform: scale(1.05) translateX(2.2%); }
}
@keyframes kb-drift {                                 /* 줌 + 미세 회전 */
    from { transform: scale(1.08) rotate(0.7deg); }
    to   { transform: scale(1.18) rotate(-0.7deg); }
}
@keyframes kb-rise {                                  /* 줌 + 상하 이동 */
    from { transform: scale(1.15) translateY(2%); }
    to   { transform: scale(1.04) translateY(-2%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide .ratio-hero img { animation: none !important; }
}

/* 전체메뉴(햄버거) */
.btn-allmenu {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 8px; background: none; border: 0;
}
.btn-allmenu span { display: block; height: 3px; background: var(--c-primary-dark); border-radius: 2px; }

.allmenu-overlay {
    position: fixed; inset: 0; background: #fff; z-index: 1000; overflow-y: auto;
    display: none;
}
.allmenu-overlay.open { display: block; }
.allmenu-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; background: var(--c-primary); color: #fff; font-size: 1.2rem;
}
.btn-allmenu-close { background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; }
.allmenu-body {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px; padding: 34px 24px; max-width: 1280px; margin: 0 auto;
}
.allmenu-col h3 {
    font-size: 1.05rem; color: var(--c-primary); padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 2px solid var(--c-accent);
}
.allmenu-col li a { display: block; padding: 7px 0; color: var(--c-text-sub); font-size: 0.95rem; }
.allmenu-col li a:hover { color: var(--c-primary); font-weight: 600; }

/* ==========================================================================
   메인(홈)
   ========================================================================== */

/* 1. 히어로 슬라이더 — 풀스크린, Dissolve(크로스페이드) 전환, 단일 중앙 캡션 */
.hero { position: relative; overflow: hidden; background: var(--c-primary-dark); }
.hero-track {
    position: relative;
    height: calc(100vh - 124px);   /* 유틸바(34) + 헤더(90) 제외한 나머지 뷰포트 전체 */
    height: calc(100svh - 124px);
    min-height: 520px;
}
.hero-slide {
    position: absolute; inset: 0; z-index: 1;
    opacity: 0; transition: opacity 1.5s ease;   /* Dissolve */
}
.hero-slide.on { opacity: 1; z-index: 2; }
.hero-slide .ratio-hero { aspect-ratio: auto; height: 100%; background: var(--c-primary-dark); }

/* 단일 캡션 — 이미지와 무관, 화면 정중앙 가운데정렬 */
.hero-caption {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 0 20px; color: #fff;
}
.hero-caption h2 {
    font-size: clamp(1.5rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.3;
    text-shadow: 0 2px 14px rgba(0, 30, 60, .45); margin-bottom: 14px;
}
.hero-caption p {
    font-size: clamp(0.95rem, 1.5vw, 1.25rem); opacity: .95;
    text-shadow: 0 1px 8px rgba(0, 30, 60, .45); margin-bottom: 28px;
}
.hero-btn {
    display: inline-block; padding: 13px 34px; background: var(--c-accent); color: #fff;
    border-radius: 999px; font-weight: 700; font-size: 1rem; transition: background .2s;
    pointer-events: auto;
}
.hero-btn:hover { background: #12817d; }

.hero-controls {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px; z-index: 10;
    background: rgba(0, 20, 40, .35); padding: 8px 16px; border-radius: 999px;
}
.hero-controls button {
    background: none; border: 0; color: #fff; font-size: 1.1rem; line-height: 1;
    width: 28px; height: 28px; opacity: .85;
}
.hero-controls button:hover { opacity: 1; }
.hero-dots { display: flex; gap: 8px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.45); padding: 0; }
.hero-dots button.on { background: #fff; width: 26px; border-radius: 999px; }

/* 공통 섹션 */
.home-section { padding: 72px 0; }
.home-section.alt { background: var(--c-bg-soft); }
.sec-head { text-align: center; margin-bottom: 42px; }
.sec-head .sec-eyebrow { color: var(--c-accent); font-weight: 700; letter-spacing: 2px; font-size: 0.85rem; text-transform: uppercase; }
.sec-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; color: var(--c-primary-dark); margin-top: 6px; }
.sec-head p { color: var(--c-text-sub); margin-top: 10px; }
.sec-more-wrap { text-align: center; margin-top: 36px; }
.btn-more {
    display: inline-block; padding: 11px 32px; border: 1px solid var(--c-primary);
    color: var(--c-primary); border-radius: 999px; font-weight: 600; transition: all .2s;
}
.btn-more:hover { background: var(--c-primary); color: #fff; }

/* 2. 협회 소개 요약 (좌 이미지 / 우 텍스트) */
.about-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-summary .ratio { border-radius: 12px; }
.about-summary-text .sec-eyebrow { color: var(--c-accent); font-weight: 700; letter-spacing: 2px; font-size: 0.85rem; }
.about-summary-text h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--c-primary-dark); margin: 8px 0 18px; line-height: 1.35; }
.about-summary-text p { color: var(--c-text-sub); margin-bottom: 14px; }
.about-summary-text .btn-more { margin-top: 12px; }

/* 3. 교육 프로그램 카드 5개 */
.program-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.card {
    background: #fff; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(10, 60, 100, .13); }
.card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--c-primary-dark); margin-bottom: 8px; }
.card-body p { font-size: 0.88rem; color: var(--c-text-sub); min-height: 2.8em; }
.card-link { margin-top: auto; padding-top: 12px; font-size: 0.85rem; font-weight: 600; color: var(--c-accent); }
.card-link::after { content: " →"; }

/* 4. 활동 미리보기 슬라이더 */
.activity-slider { position: relative; overflow: hidden; }
.activity-track { display: flex; gap: 20px; transition: transform .45s ease; }
.activity-item { flex: 0 0 calc(25% - 15px); }
.activity-item .ratio { border-radius: 10px; }
.activity-item .a-title { margin-top: 10px; font-weight: 600; font-size: 0.95rem; }
.activity-item .a-date { font-size: 0.82rem; color: var(--c-text-sub); }
.slider-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-line);
    background: rgba(255,255,255,.92); color: var(--c-primary); font-size: 1.1rem;
}
.slider-nav:hover { background: var(--c-primary); color: #fff; }
.slider-prev { left: -8px; }
.slider-next { right: -8px; }

/* 5. 공지사항 + 배너 2단 */
.notice-banner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.nb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.nb-head h2 { font-size: 1.35rem; font-weight: 800; color: var(--c-primary-dark); }
.nb-head .nb-more { font-size: 0.85rem; color: var(--c-text-sub); }
.nb-head .nb-more:hover { color: var(--c-primary); }
.notice-list li { border-bottom: 1px solid var(--c-line); }
.notice-list a { display: flex; align-items: center; gap: 12px; padding: 13px 4px; }
.notice-list a:hover .n-title { color: var(--c-primary); text-decoration: underline; }
.n-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-date { font-size: 0.85rem; color: var(--c-text-sub); flex-shrink: 0; }
.badge-new {
    display: inline-block; background: var(--c-danger); color: #fff; font-size: 0.65rem;
    font-weight: 700; border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
.badge-pin {
    display: inline-block; background: var(--c-primary); color: #fff; font-size: 0.65rem;
    font-weight: 700; border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}

/* 배너 슬라이더 */
.banner-slider { position: relative; overflow: hidden; border: 1px solid var(--c-line); border-radius: 10px; }
.banner-track { display: flex; transition: transform .45s ease; }
.banner-item { flex: 0 0 100%; }
.banner-controls { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.banner-controls button {
    width: 30px; height: 30px; border: 1px solid var(--c-line); background: #fff;
    border-radius: 50%; color: var(--c-primary); font-size: 0.85rem;
}
.banner-controls button:hover { background: var(--c-primary); color: #fff; }

/* ==========================================================================
   서브페이지 공통
   ========================================================================== */
.sub-hero {
    background: linear-gradient(120deg, var(--c-primary-dark), var(--c-accent));
    color: #fff; padding: 54px 0 46px; position: relative; overflow: hidden;
}
.sub-hero::after {
    content: ""; position: absolute; right: -60px; top: -80px; width: 340px; height: 340px;
    border-radius: 50%; background: rgba(255,255,255,.07);
}
.sub-hero-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; }
.breadcrumb { display: flex; gap: 8px; margin-top: 12px; font-size: 0.85rem; opacity: .9; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; opacity: .7; }
.breadcrumb .current { font-weight: 700; }

.sub-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 48px; padding-top: 48px; padding-bottom: 80px; }

.sub-side .side-title {
    background: var(--c-primary); color: #fff; padding: 20px 18px;
    border-radius: 10px 10px 0 0; font-size: 1.1rem;
}
.side-menu { border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden; }
.side-menu li + li { border-top: 1px solid var(--c-line); }
.side-menu a { display: block; padding: 13px 18px; font-size: 0.95rem; color: var(--c-text-sub); transition: all .15s; }
.side-menu a:hover { color: var(--c-primary); background: var(--c-bg-soft); }
.side-menu li.active a {
    color: var(--c-primary); font-weight: 700; background: var(--c-accent-light);
    border-left: 3px solid var(--c-accent); padding-left: 15px;
}

.sub-content { min-width: 0; min-height: 480px; }
.content-head { border-bottom: 2px solid var(--c-primary); padding-bottom: 14px; margin-bottom: 30px; }
.content-title { font-size: 1.5rem; font-weight: 800; color: var(--c-primary-dark); }

/* 본문 공통 요소 */
.lead-text { font-size: 1.05rem; color: var(--c-text); margin-bottom: 18px; }
.body-text { color: var(--c-text-sub); margin-bottom: 16px; white-space: pre-line; }
.content-img { border-radius: 12px; margin-bottom: 28px; }
.h4-bar {
    font-size: 1.12rem; font-weight: 700; color: var(--c-primary-dark);
    margin: 34px 0 14px; padding-left: 12px; border-left: 4px solid var(--c-accent);
}

/* 미션/비전 카드 */
.mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.mv-card { background: var(--c-bg-soft); border-radius: 12px; padding: 28px 22px; text-align: center; }
.mv-card .mv-label { color: var(--c-accent); font-weight: 800; letter-spacing: 2px; font-size: 0.8rem; }
.mv-card h4 { color: var(--c-primary-dark); font-size: 1.1rem; margin: 8px 0 10px; }
.mv-card p { font-size: 0.9rem; color: var(--c-text-sub); }

/* 표 */
.tbl { border-top: 2px solid var(--c-primary); margin: 12px 0 28px; }
.tbl th, .tbl td { border-bottom: 1px solid var(--c-line); padding: 12px 14px; font-size: 0.93rem; text-align: left; }
.tbl th { background: var(--c-bg-soft); color: var(--c-primary-dark); width: 160px; }
.tbl thead th { width: auto; text-align: center; }
.tbl td.center, .tbl th.center { text-align: center; }

/* 아코디언(정관) */
.accordion { border-top: 2px solid var(--c-primary); }
.acc-item { border-bottom: 1px solid var(--c-line); }
.acc-head {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 16px 12px; background: none; border: 0; font-size: 1rem; font-weight: 700;
    color: var(--c-primary-dark); text-align: left;
}
.acc-head::after { content: "+"; font-size: 1.3rem; color: var(--c-accent); }
.acc-item.open .acc-head::after { content: "−"; }
.acc-body { display: none; padding: 4px 12px 20px; color: var(--c-text-sub); white-space: pre-line; font-size: 0.93rem; }
.acc-item.open .acc-body { display: block; }

/* 인사말 */
.greeting-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.greeting-photo .ratio { border-radius: 12px; }
.greeting-photo figcaption { text-align: center; margin-top: 10px; color: var(--c-text-sub); font-size: 0.9rem; }
.greeting-sign { margin-top: 30px; text-align: right; font-size: 1.05rem; }
.greeting-sign strong { font-size: 1.2rem; margin-left: 8px; }

/* 그리드(활동/지부 등) */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* 지부 카드 */
.branch-card { border: 1px solid var(--c-line); border-radius: 12px; padding: 24px; }
.branch-card h4 { color: var(--c-primary); font-size: 1.1rem; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--c-line); }
.branch-card dl { font-size: 0.9rem; }
.branch-card dt { float: left; width: 58px; color: var(--c-text-sub); }
.branch-card dd { margin-left: 66px; margin-bottom: 6px; }

/* 도서 카드 */
.book-card { text-align: left; }
.book-card .ratio { border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.book-card h4 { margin: 14px 0 4px; font-size: 1rem; }
.book-card .book-meta { font-size: 0.85rem; color: var(--c-text-sub); }

/* ==========================================================================
   게시판
   ========================================================================== */
.board-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.board-count { font-size: 0.9rem; color: var(--c-text-sub); }
.board-count strong { color: var(--c-primary); }
.board-search { display: flex; gap: 6px; }
.board-search input {
    border: 1px solid var(--c-line); border-radius: 6px; padding: 9px 12px; width: 220px;
}
.btn {
    display: inline-block; padding: 9px 20px; border-radius: 6px; border: 1px solid var(--c-primary);
    background: var(--c-primary); color: #fff; font-weight: 600; font-size: 0.92rem; text-align: center;
}
.btn:hover { background: var(--c-primary-dark); }
.btn-outline { background: #fff; color: var(--c-primary); }
.btn-outline:hover { background: var(--c-bg-soft); }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); }
.btn-sm { padding: 5px 12px; font-size: 0.82rem; }

.board-table { border-top: 2px solid var(--c-primary); }
.board-table th, .board-table td { border-bottom: 1px solid var(--c-line); padding: 13px 10px; font-size: 0.93rem; }
.board-table thead th { background: var(--c-bg-soft); text-align: center; color: var(--c-primary-dark); }
.board-table .col-no { width: 70px; text-align: center; color: var(--c-text-sub); }
.board-table .col-title { text-align: left; }
.board-table .col-title a { display: flex; align-items: center; gap: 8px; }
.board-table .col-title a:hover { color: var(--c-primary); text-decoration: underline; }
.board-table .col-title .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-table .col-author { width: 110px; text-align: center; }
.board-table .col-date { width: 110px; text-align: center; color: var(--c-text-sub); }
.board-table .col-views { width: 80px; text-align: center; color: var(--c-text-sub); }
.board-empty { text-align: center; padding: 60px 0 !important; color: var(--c-text-sub); }

/* 페이지네이션 */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 30px; }
.pagination a, .pagination span {
    min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-line); border-radius: 6px; font-size: 0.9rem; color: var(--c-text-sub); padding: 0 8px;
}
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pagination .cur { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }

/* 게시글 상세 */
.post-view .post-head { border-top: 2px solid var(--c-primary); border-bottom: 1px solid var(--c-line); padding: 20px 10px; }
.post-view .post-head h4 { font-size: 1.25rem; color: var(--c-text); }
.post-meta { display: flex; gap: 18px; margin-top: 10px; font-size: 0.85rem; color: var(--c-text-sub); flex-wrap: wrap; }
.post-body { padding: 30px 10px; min-height: 200px; white-space: pre-line; color: #333; border-bottom: 1px solid var(--c-line); }
.post-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 0 10px 26px; border-bottom: 1px solid var(--c-line); }
.post-images .ratio { border-radius: 8px; cursor: zoom-in; }
.post-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.post-actions .right { display: flex; gap: 8px; }

/* 댓글 */
.comments { margin-top: 36px; }
.comments h5 { font-size: 1.05rem; color: var(--c-primary-dark); margin-bottom: 14px; }
.comment-item { border-bottom: 1px solid var(--c-line); padding: 14px 4px; }
.comment-meta { font-size: 0.83rem; color: var(--c-text-sub); margin-bottom: 6px; display: flex; gap: 12px; align-items: center; }
.comment-meta strong { color: var(--c-text); }
.comment-body { font-size: 0.95rem; white-space: pre-line; }
.comment-form { margin-top: 18px; display: flex; gap: 10px; }
.comment-form textarea {
    flex: 1; border: 1px solid var(--c-line); border-radius: 8px; padding: 12px; min-height: 70px; resize: vertical;
}

/* 갤러리 그리드 */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gallery-card .ratio { border-radius: 10px; cursor: pointer; }
.gallery-card .g-title { margin-top: 10px; font-weight: 600; font-size: 0.95rem; }
.gallery-card .g-date { font-size: 0.82rem; color: var(--c-text-sub); }

/* 라이트박스 */
.lightbox {
    position: fixed; inset: 0; background: rgba(0, 10, 25, .88); z-index: 2000;
    display: none; align-items: center; justify-content: center; padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 8px; }
.lightbox-close {
    position: absolute; top: 20px; right: 28px; background: none; border: 0;
    color: #fff; font-size: 2.4rem; line-height: 1;
}

/* ==========================================================================
   폼(회원/관리자 공용)
   ========================================================================== */
.form-page { max-width: 520px; margin: 60px auto 90px; padding: 0 20px; }
.form-page.wide { max-width: 760px; }
.form-card { border: 1px solid var(--c-line); border-radius: 14px; padding: 40px 36px; box-shadow: 0 8px 26px rgba(10,60,100,.06); }
.form-card > h2 { text-align: center; color: var(--c-primary-dark); margin-bottom: 8px; font-size: 1.45rem; }
.form-card > .form-desc { text-align: center; color: var(--c-text-sub); font-size: 0.9rem; margin-bottom: 28px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--c-primary-dark); }
.form-row .req { color: var(--c-danger); }
.form-row input[type=text], .form-row input[type=password], .form-row input[type=email],
.form-row input[type=tel], .form-row select, .form-row textarea {
    width: 100%; border: 1px solid var(--c-line); border-radius: 8px; padding: 11px 13px;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    outline: 2px solid var(--c-accent); border-color: transparent;
}
.form-hint { font-size: 0.8rem; color: var(--c-text-sub); margin-top: 4px; }
.form-submit { width: 100%; padding: 13px; font-size: 1.02rem; margin-top: 10px; border-radius: 8px; }
.form-foot { text-align: center; margin-top: 18px; font-size: 0.9rem; color: var(--c-text-sub); }
.form-foot a { color: var(--c-primary); font-weight: 600; }
.form-error { background: #fdecea; color: var(--c-danger); border-radius: 8px; padding: 11px 14px; font-size: 0.88rem; margin-bottom: 16px; }

/* 마이페이지 */
.mypage-grade { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.grade-full { background: var(--c-accent-light); color: var(--c-accent); }
.grade-associate { background: #f0f2f5; color: var(--c-text-sub); }

/* ==========================================================================
   푸터
   ========================================================================== */
.site-footer { background: #10222f; color: #9db4c4; font-size: 0.85rem; margin-top: 0; }
.footer-links { border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-links ul { display: flex; gap: 26px; padding: 15px 0; flex-wrap: wrap; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-links .em { color: #7fd8d4; font-weight: 700; }
.footer-info .inner { display: flex; gap: 30px; align-items: center; padding: 30px 20px 36px; }
.footer-logo img { height: 44px; opacity: .85; filter: grayscale(30%); }
.footer-text { flex: 1; }
.footer-text p { margin: 2px 0; }
.footer-text .divider { margin: 0 8px; opacity: .35; }
.f-copy { margin-top: 10px !important; font-size: 0.78rem; opacity: .7; }
.footer-mark .wa-mark {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 72px; height: 72px; border: 1px dashed rgba(255,255,255,.3); border-radius: 10px;
    text-align: center; font-size: 0.9rem; font-weight: 800; color: #7fd8d4; line-height: 1.2;
}
.footer-mark small { font-size: 0.6rem; font-weight: 400; color: #9db4c4; }

/* ==========================================================================
   관리자
   ========================================================================== */
.admin-body { background: #f0f4f8; min-height: 100vh; }
.admin-topbar { background: var(--c-primary-dark); color: #fff; }
.admin-topbar .inner { display: flex; align-items: center; gap: 20px; height: 58px; }
.admin-topbar .a-logo { font-weight: 800; font-size: 1.05rem; color: #fff; }
.admin-topbar .a-logo span { color: #7fd8d4; }
.admin-topbar .a-user { margin-left: auto; font-size: 0.85rem; display: flex; gap: 14px; align-items: center; }
.admin-topbar .a-user a { color: #bcd3e4; }
.admin-topbar .a-user a:hover { color: #fff; }
.admin-role-badge { background: #1aa5a0; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }

.admin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 26px; max-width: 1280px; margin: 26px auto; padding: 0 20px; align-items: start; }
.admin-nav { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(10,60,100,.06); }
.admin-nav a { display: block; padding: 11px 14px; border-radius: 8px; font-size: 0.93rem; color: var(--c-text-sub); }
.admin-nav a:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.admin-nav a.active { background: var(--c-primary); color: #fff; font-weight: 700; }
.admin-main { background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 2px 8px rgba(10,60,100,.06); min-height: 540px; }
.admin-main > h2 { color: var(--c-primary-dark); font-size: 1.3rem; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 2px solid var(--c-primary); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.stat-card { background: var(--c-bg-soft); border-radius: 12px; padding: 20px; }
.stat-card .s-label { font-size: 0.82rem; color: var(--c-text-sub); }
.stat-card .s-value { font-size: 1.7rem; font-weight: 800; color: var(--c-primary); margin-top: 4px; }
.stat-card .s-value small { font-size: 0.85rem; color: var(--c-text-sub); font-weight: 400; }

.admin-table { border-top: 2px solid var(--c-primary); }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--c-line); padding: 10px; font-size: 0.88rem; text-align: center; }
.admin-table thead th { background: var(--c-bg-soft); }
.admin-table td.left { text-align: left; }
.role-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.role-super { background: #ffe3e0; color: #c0392b; }
.role-operator { background: #fff3d6; color: #a76b00; }
.role-none { background: #f0f2f5; color: #888; }
.inline-form { display: inline; }

.admin-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-tabs a { padding: 9px 18px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 0.88rem; color: var(--c-text-sub); }
.admin-tabs a.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.slot-card { border: 1px solid var(--c-line); border-radius: 10px; padding: 14px; }
.slot-card .ratio { border-radius: 6px; margin-bottom: 10px; }
.slot-card .s-name { font-size: 0.85rem; font-weight: 700; color: var(--c-primary-dark); margin-bottom: 8px; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1080px) {
    .gnb { display: none; }               /* 태블릿 이하: GNB → 전체메뉴 버튼 */
    .gnb-backdrop { display: none; }      /* 전체 펼침 메뉴는 데스크톱 전용 */
    .header-main .inner { height: 70px; }
    .hero-track { height: calc(100vh - 104px); height: calc(100svh - 104px); min-height: 440px; }
    .logo img { height: 40px; }
    .logo-text { font-size: 1.05rem; }
    .program-grid { grid-template-columns: repeat(3, 1fr); }
    .activity-item { flex: 0 0 calc(33.333% - 13.4px); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .slot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .sub-wrap { grid-template-columns: 1fr; gap: 26px; }
    .sub-side .side-title { border-radius: 10px 10px 0 0; padding: 14px 18px; }
    .side-menu { display: flex; flex-wrap: wrap; }
    .side-menu li { flex: 1 1 auto; border-top: 0 !important; }
    .side-menu li.active a { border-left: 0; border-bottom: 3px solid var(--c-accent); padding-left: 18px; }
    .about-summary { grid-template-columns: 1fr; gap: 26px; }
    .notice-banner { grid-template-columns: 1fr; gap: 40px; }
    .greeting-wrap { grid-template-columns: 1fr; }
    .greeting-photo { max-width: 300px; margin: 0 auto; }
    .mv-grid, .grid-3 { grid-template-columns: 1fr 1fr; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-nav { display: flex; flex-wrap: wrap; gap: 4px; }
    .footer-info .inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 600px) {
    .program-grid { grid-template-columns: 1fr 1fr; }
    .activity-item { flex: 0 0 calc(50% - 10px); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-4, .mv-grid, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .home-section { padding: 48px 0; }
    .board-table .col-views, .board-table .col-no { display: none; }
    .form-card { padding: 28px 20px; }
    .util-links li + li::before { margin: 0 8px; }
    .hero-track { min-height: 400px; }
    .hero-caption h2 { font-size: 1.5rem; }
    .util-name { display: none; }
}