@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==============================
   RESET & BASE
   Matching DaonTheme Pro02 typography
   ============================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    overflow-x: hidden;
    word-break: keep-all;
}
a { color: inherit; text-decoration: none; transition: color .3s; }
a:hover { color: #005CB6; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
.blind, .sound_only { position: absolute; overflow: hidden; clip: rect(0,0,0,0); width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; }
.container {
    max-width: 1500px;
    margin: 0 auto;
    /* padding: 0 30px; */
}
.clearfix::after { content: ''; display: table; clear: both; }

/* ==============================
   TOP BAR (side_title style)
   Transparent over hero, NOT black bg
   ============================== */
.top-bar {
    background: #fff;
    color: #000;
    height: 110px;
    line-height: 110px;
    font-size: 15px;
    position: relative;
    z-index: 1002;
    border-bottom: 1px solid #e5e7eb;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    padding: 0 40px;
}
.top-bar-left {
    display: flex;
    align-items: center;
    gap: 24px;
    font-weight: 400;
    line-height: 1.3;
    max-width: 65%;
}
.top-bar-left .tb-main {
    font-size: 19px;
    font-weight: 700;
    color: #0d1b2a;
    white-space: nowrap;
}
.top-bar-left .tb-main i { margin-right: 8px; font-size: 20px; vertical-align: middle; }
.top-bar-left .tb-main strong { color: #c83838; font-weight: 800; }
.tb-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-sub-list li {
    font-size: 14.5px;
    color: #555;
    line-height: 1.35;
    white-space: nowrap;
}
.tb-sub-list li strong { color: #0d1b2a; font-weight: 600; margin-right: 2px; }
@media (max-width: 1199px) {
    .top-bar-left { gap: 14px; max-width: 60%; }
    .top-bar-left .tb-main { font-size: 15px; }
    .tb-sub-list li { font-size: 11px; }
}
.top-bar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.top-bar-center .logo-inline {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    letter-spacing: 1px;
}
.top-bar-center .logo-inline em {
    color: #c53428;
    font-style: normal;
    font-weight: 800;
}
.top-bar-logo-img {
    height: 80px;
    width: auto;
    vertical-align: middle;
    /* 컬러 로고 그대로 표시 (필터 제거) */
}
.top-bar-center .logo-sub {
    display: block;
    font-size: 11px;
    font-weight: 300;
    color: #666;
    text-align: center;
    line-height: 1;
    margin-top: -2px;
    letter-spacing: 1px;
}
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}
.top-bar-right a { color: #000; font-size: 14px; transition: color .3s; }
.top-bar-right a:hover { color: #005CB6; }
.top-bar-right a i { margin-right: 5px; }

/* 신 관리자 표시 — 작은 사각형 박스 */
.top-bar-right .tb-admin-link {
    display: inline-flex; align-items: center; gap: 4px;
    background: #1a365d;
    color: #fff !important;
    padding: 3px 9px;
    height: 24px; line-height: 18px;
    border-radius: 4px;
    font-size: 12px; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.top-bar-right .tb-admin-link i { margin-right: 2px; width: 13px; height: 13px; }
.top-bar-right .tb-admin-link:hover {
    color: #fff !important;
    background: #2563eb;
}
.top-bar-right .tb-logout-link { color: #dc2626 !important; font-weight: 600; }
.top-bar-right .tb-logout-link:hover { color: #b91c1c !important; }

/* Language Selector */
.lang-selector {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 15px;
    border-left: 1px solid #d1d5db;
    padding-left: 15px;
    height: 80px;
    line-height: 80px;
    overflow: hidden;
}
.lang-selector a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
    color: #6b7280;
    border-radius: 3px;
    transition: all .3s;
    font-weight: 500;
}
.lang-selector a:hover,
.lang-selector a.active {
    color: #fff;
    background: #005CB6;
}

/* ==============================
   HEADER / NAVIGATION — 솔리드 흰색, hero 위에 오버레이 X
   ============================== */
#hd {
    background: #fff;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    transition: all .3s;
    border-bottom: 1px solid #e5e7eb;
}
#hd.scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
#hd .gnb-ul > li > a { color: #000; }
#hd .gnb-ul > li > a:hover { color: #005CB6; }
#hd .hd-logo .logo-text { color: #000; }
#hd .hd-logo .logo-text span { color: #555; }
.mobile-toggle span { background: #333 !important; }

#hd .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    position: relative;
}

/* GNB 옆 보조 로고 — 데스크톱·모바일 전부 숨김 (top-bar 메인 로고만 사용) */
.hd-logo { display: none; }
.hd-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0;
}
.hd-logo .logo-text {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}
.hd-logo .logo-text span {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #666;
    letter-spacing: 1px;
}
.hd-logo-img {
    height: 50px;
    transition: filter .4s;
}
#hd.scrolled .hd-logo-img {
    filter: none;
}

/* Navigation - center aligned, evenly spaced, white text on hero */
.gnb { display: flex; align-items: center; }
.gnb-ul {
    display: flex;
    align-items: center;
    gap: 0;
    width: 1280px;
    max-width: 100%;
}
.gnb-ul > li {
    position: relative;
    flex: 1;
    text-align: center;
    min-width: 0;
}
.gnb-ul > li > a {
    display: block;
    padding: 0 8px;
    height: 66px;
    line-height: 66px;
    font-size: 19px;
    font-weight: 500;
    color: #000;
    transition: color .25s;
    white-space: nowrap;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.gnb-ul > li:hover > a { color: #005CB6; }

/* Per-menu Dropdown - hidden on PC (mega menu used instead) */
.gnb-sub {
    display: none;
}

/* ==============================
   MEGA MENU (full-width dropdown)
   ============================== */
.gnb-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 3px solid #005CB6;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    padding: 30px 0;
    z-index: 999;
}
/* Header hover시 mega menu 표시 (배경은 항상 흰색이라 색 전환 불필요) */
#hd:hover .gnb-mega {
    opacity: 1;
    visibility: visible;
}
#hd:hover .gnb-ul > li:hover > a {
    color: #005CB6;
    border-bottom: 3px solid #005CB6;
}

.gnb-mega-inner {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}
.gnb-mega-col {
    flex: 1;
    text-align: center;
    padding: 0 12px;
    min-width: 0;
}
.gnb-mega-col a {
    display: block;
    padding: 9px 0;
    font-size: 16px;
    font-weight: 400;
    color: #555;
    transition: all .25s;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
    line-height: 1.5;
}
.gnb-mega-col a:hover {
    color: #005CB6;
}

/* Mega menu - hide when scrolled (use existing white bg behavior) */
.gnb-dropdown-bg { display: none; }

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    position: absolute;
    right: 30px;
    width: 28px;
    height: 22px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
}
.mobile-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all .3s;
}

/* ==============================
   HERO SLIDER
   Full viewport height like DaonTheme
   ============================== */
.hero-section {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px + 85px);
    min-height: 735px;
    max-height: 985px;
}
.hero-slider-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.hero-slider-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.hero-slide {
    position: relative;
    min-width: 100%;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}
.hero-slide .slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
}
.hero-slide .slide-bg-mo { display: none; }
@media (max-width: 768px) {
    .hero-slide .slide-bg-pc { display: none; }
    .hero-slide .slide-bg-mo { display: block; }
}
.hero-slide .slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,20,60,.6) 0%, rgba(0,20,60,.6) 85%, rgba(0,20,60,.95) 100%);
}
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    width: 90%;
    max-width: 900px;
}
.hero-content .hero-label {
    display: none; /* Hide label badge to match sample clean look */
}
.hero-content h2 {
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 25px;
    text-shadow: none;
    font-family: 'Noto Sans KR', sans-serif;
}
.hero-content p {
    font-size: 18px;
    color: rgba(255,255,255,.85);
    margin-bottom: 40px;
    font-weight: 400;
    line-height: 1.8;
    font-family: 'Noto Sans KR', sans-serif;
}
.hero-btn {
    display: inline-block;
    padding: 18px 50px;
    background: rgba(0,163,224,.85);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    border-radius: 3px;
    transition: all .3s;
    border: none;
    letter-spacing: .5px;
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
}
.hero-btn:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

/* Hero Navigation */
.hero-nav {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}
.hero-nav .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    cursor: pointer;
    transition: all .3s;
    border: 2px solid transparent;
}
.hero-nav .dot.active {
    background: #fff;
    border-color: #fff;
}
.hero-arrows {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}
.hero-arrows button {
    width: 55px;
    height: 55px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all .3s;
    pointer-events: all;
}
.hero-arrows button:hover {
    background: rgba(255,255,255,.25);
}

/* ==============================
   QUICK CONSULTATION FORM (간편예약/빠른상담)
   Matches DaonTheme dark form bar
   ============================== */
.quick-form-section {
    background: #3c3f45;
    padding: 30px 0;
    position: relative;
    z-index: 10;
    margin-top: 0;
}
.quick-form-section .container {
    max-width: 100%;
    padding: 0 15%;
}
.quick-form {
    padding: 0;
}
.quick-form-title {
    display: inline-block;
    vertical-align: top;
    padding-right: 30px;
    padding-top: 5px;
    min-width: 180px;
}
.quick-form-title em {
    display: block;
    font-style: italic;
    color: #00a3e0;
    font-size: 19px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    margin-bottom: 5px;
}
.quick-form-title span {
    display: block;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
}
.quick-form-row1 {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: stretch;
}
.quick-form-row2 {
    display: flex;
    gap: 10px;
    align-items: center;
}
.qf-select {
    flex: 0 0 200px;
    padding: 12px 15px;
    border: none;
    border-radius: 3px;
    font-size: 15px;
    color: #333;
    background: #fff;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    appearance: auto;
}
.qf-input {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 3px;
    font-size: 15px;
    color: #333;
    background: #fff;
    font-family: 'Noto Sans KR', sans-serif;
}
.qf-input::placeholder, .qf-textarea::placeholder { color: #999; }
.qf-submit {
    flex: 0 0 160px;
    padding: 12px 20px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 5px;
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background .3s;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 1px;
}
.qf-submit:hover { background: #005CB6; border-color: #005CB6; color: #fff; }
.qf-textarea {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 3px;
    font-size: 15px;
    color: #333;
    background: #fff;
    font-family: 'Noto Sans KR', sans-serif;
    resize: none;
    height: 45px;
}
.qf-agree {
    flex: 0 0 auto;
    color: #ccc;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.qf-agree input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.qf-agree a { color: #999; font-size: 13px; margin-left: 3px; }
.qf-agree a:hover { color: #fff; }

/* Form layout: title + fields side by side */
@media (min-width: 992px) {
    .quick-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .quick-form-title {
        flex: 0 0 200px;
        padding-top: 10px;
    }
    .quick-form-row1,
    .quick-form-row2 {
        flex: 1;
    }
    .quick-form-row1 { margin-bottom: 10px; }
    .quick-form-row2 { flex-basis: calc(100% - 200px); margin-left: 200px; }
}

/* ==============================
   3-CARD FEATURES (m_bnr)
   3 equal cards, full width
   ============================== */
.feature-cards-wrap {
    background: #f0f2f5;
    padding: 60px 0;
}
.feature-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    max-width: 92%;
    margin: 0 auto;
}
.feature-card {
    position: relative;
    height: 600px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 5px;
}
/* Use background colors instead of images */
.feature-card:nth-child(1) { background: url('../img/edu_bg01.jpg') center/cover no-repeat; }
.feature-card:nth-child(2) { background: url('../img/edu_bg02.jpg') center/cover no-repeat; }
.feature-card:nth-child(3) { background: url('../img/edu_bg01.jpg') center/cover no-repeat; }
.feature-card:nth-child(4) { background: url('../img/edu_bg02.jpg') center/cover no-repeat; }
.feature-card:nth-child(5) { background: linear-gradient(135deg, #312e81, #4338ca); }
.feature-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
}
.feature-card:hover img {
    transform: scale(1.08);
}
.feature-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 25px 30px;
    transition: all .4s;
}
.feature-card:hover .feature-card-overlay {
    background: rgba(0,92,182,.6);
}
.feature-card-overlay .label {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 400;
}
.feature-card-overlay .title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.feature-card-overlay .desc {
    font-size: 14px;
    color: rgba(255,255,255,.75);
    margin-bottom: 18px;
    line-height: 1.5;
}
.feature-card-overlay .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    transition: all .3s;
}
.feature-card:hover .arrow {
    background: #fff;
    color: #005CB6;
    border-color: #fff;
}

/* Feature card poster image (replaces icon) */
.feature-card-poster {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px -28px;
    overflow: hidden;
    border-radius: 0;
}
.feature-card-poster img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    border-radius: 0;
}

/* Feature card 2-button layout */
.feature-card-btns {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    justify-content: center;
}
.fc-btn {
    display: inline-block;
    padding: 10px 35px;
    background: transparent;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 3px;
    transition: all .3s;
    text-align: center;
}
.fc-btn:hover {
    background: #005CB6;
    border-color: #005CB6;
    color: #fff !important;
}

/* Feature card overlay - adjust for poster layout */
.feature-card-overlay {
    display: flex;
    flex-direction: column;
}
.feature-card .feature-card-bg {
    display: none;
}

/* ==============================
   BOOK SLIDER (3rd card)
   ============================== */
.feature-card-book {
    background: url('../img/edu_bg03.jpg') center/cover no-repeat !important;
    overflow: hidden;
}
.feature-card-book .feature-card-overlay { display: none; }
.feature-card-book::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 0;
}
.book-slider {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 20px;
    z-index: 1;
}
.book-title-area {
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}
.book-label {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: 'Poppins', sans-serif;
}
.book-main-title {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
}
.book-track {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.book-item {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .5s;
}
.book-item.active { opacity: 1; }
.book-img {
    flex: 0 0 auto;
    width: 140px;
}
.book-img img {
    width: 100%;
    height: auto;
    box-shadow: 3px 5px 15px rgba(0,0,0,.2);
}
.book-info {
    text-align: center;
}
.book-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -0.5px;
    word-break: keep-all;
    overflow-wrap: break-word;
    padding: 0 12px;
}
.book-subtitle-mini {
    font-size: 13px;
    color: rgba(255,255,255,.75);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -0.3px;
    word-break: keep-all;
    overflow-wrap: break-word;
    padding: 0 12px;
}
.book-author {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.85);
    font-family: 'Noto Sans KR', sans-serif;
    margin-bottom: 4px;
    word-break: keep-all;
    overflow-wrap: break-word;
    padding: 0 12px;
}
.book-desc {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
    overflow-wrap: break-word;
    padding: 0 12px;
}
.book-controls {
    display: flex;
    gap: 0;
    margin-top: 12px;
    border: 1px solid #bbb;
    border-radius: 3px;
    overflow: hidden;
}
.book-controls button {
    width: 40px;
    height: 35px;
    background: rgba(255,255,255,.15);
    border: none;
    border-right: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-controls button:last-child { border-right: none; }
.book-controls button:hover { background: rgba(255,255,255,.3); }
.book-controls {
    border-color: rgba(255,255,255,.35);
}

/* ==============================
   SECTION COMMON
   ============================== */
.section { padding: 80px 0; }
.section-title {
    text-align: center;
    margin-bottom: 50px;
}
.section-title h3 {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
}
.section-title h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #005CB6;
    margin: 18px auto 0;
}
.section-title p {
    font-size: 16px;
    color: #888;
    margin-top: 15px;
}

/* ==============================
   CLINIC / DEPARTMENTS (clinic_wrap)
   2x2 grid of cards with bg colors
   ============================== */
.clinic-section { padding: 80px 0; background: #fff; }
.clinic-section .section-title { margin-bottom: 40px; }
.clinic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 80%;
    margin: 0 auto;
}
.clinic-card {
    position: relative;
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 30px 35px;
    transition: all .4s;
}
/* Default clinic card backgrounds (배경이미지 추후 교체 가능) */
.clinic-card-1 { background: url('../img/eduy01.jpg') center/cover no-repeat; }
.clinic-card-2 { background: url('../img/eduy02.jpg') center/cover no-repeat; }
.clinic-card-3 { background: url('../img/eduy03.jpg') center/cover no-repeat; }
.clinic-card-4 { background: url('../img/eduy04.jpg') center/cover no-repeat; }
/* 배경이미지가 있으면 아래처럼 교체:
.clinic-card-1 { background: url('../img/clinic_bg01.jpg') center/cover no-repeat; }
*/
.clinic-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.3);
    transition: background .4s;
}
.clinic-card-2::after,
.clinic-card-3::after { background: rgba(255,255,255,.1); }
.clinic-card:hover::after { background: rgba(0,0,0,.15); }
.clinic-card-2:hover::after,
.clinic-card-3:hover::after { background: rgba(255,255,255,.05); }
.clinic-card-content {
    position: relative;
    z-index: 1;
    color: #fff;
}
.clinic-card-2 .clinic-card-content,
.clinic-card-3 .clinic-card-content { color: #333; }
.clinic-card-content h4 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    font-family: 'Noto Sans KR', sans-serif;
}
.clinic-card-content p {
    font-size: 14px;
    opacity: .8;
    margin-bottom: 15px;
    line-height: 1.7;
}
.clinic-card-content .view-link {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,.4);
    padding-top: 10px;
    margin-top: 10px;
}
.clinic-card-2 .clinic-card-content .view-link,
.clinic-card-3 .clinic-card-content .view-link {
    color: #333;
    border-top-color: rgba(0,0,0,.2);
}

/* ==============================
   COUNTER / STATS (counter_wrap)
   ============================== */
.counter-section {
    background: linear-gradient(135deg, #002864 0%, #005CB6 100%);
    padding: 70px 0;
    color: #fff;
}
.counter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    text-align: center;
}
.counter-item {
    padding: 20px 30px;
    border-right: 1px solid rgba(255,255,255,.15);
}
.counter-item:last-child { border-right: none; }
.counter-item .count {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}
.counter-item .count span {
    font-size: 20px;
    font-weight: 400;
}
.counter-item .label {
    font-size: 14px;
    opacity: .75;
    font-weight: 300;
    line-height: 1.6;
}

/* ==============================
   NEWS / COMMUNITY SECTION
   Left: board listing + gallery thumbs
   Right: contact, 1:1 consult, video
   ============================== */
.news-section { background: #f5f7fa; padding: 60px 0; }
.community-wrap {
    display: grid;
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    gap: 0;
}
/* Left column */
.comm-left {
    padding-right: 40px;
}
.comm-left .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #111;
}
.comm-left .section-header h4 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
}
.comm-left .section-header h4 i { font-size: 22px; }
.comm-left .section-header a {
    font-size: 13px;
    color: #005CB6;
    font-weight: 500;
}
/* Gallery thumbnails grid */
.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}
.gallery-thumb {
    width: 100%;
    height: 130px;
    border-radius: 5px;
    overflow: hidden;
    background: #ddd;
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.gallery-thumb:hover img { transform: scale(1.1); }

/* Right column - stacked info boxes */
.comm-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.info-box {
    padding: 28px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all .3s;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.info-box:last-child { border-bottom: none; }
.info-box.contact-box {
    background: #005CB6;
    color: #fff;
    border-radius: 8px 8px 0 0;
}
.info-box.consult-box {
    background: #1a2a4a;
    color: #fff;
}
.info-box.video-box {
    background: #2d3748;
    color: #fff;
    border-radius: 0 0 8px 8px;
}
.info-box i {
    font-size: 20px;
    opacity: .8;
    min-width: 40px;
    text-align: center;
}
.info-box .info-text h5 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
}
.info-box .info-text p {
    font-size: 13px;
    opacity: .8;
    line-height: 1.5;
}
.info-box .info-text .tel {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    opacity: 1;
}

/* news list */
.news-list li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.news-list li:last-child { border-bottom: none; }
.news-list li a {
    font-size: 17px;
    color: #333;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 15px;
}
.news-list li a:hover { color: #005CB6; }
.news-list li .date {
    font-size: 17px;
    color: #999;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}
.news-list li .badge-new {
    display: inline-block;
    padding: 1px 6px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: 600;
    vertical-align: middle;
}

/* ==============================
   SECOND COMMUNITY ROW
   ============================== */
.community-wrap-2 {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0;
    margin-top: 40px;
}

/* ==============================
   SCHEDULE SECTION (교육일정 + 연락처)
   ============================== */
.schedule-section {
    background: #f5f7fa;
    padding: 60px 0;
}

/* ==============================
   COMMUNITY SECTION (커뮤니티)
   ============================== */
.community-section {
    background: #fff;
    padding: 70px 0;
    overflow: hidden;
}
.community-section .container { max-width: 1500px; }
.photo-gallery-row { width: 100%; box-sizing: border-box; }

/* Photo Gallery Row */
.photo-gallery-row { margin-bottom: 80px; }
.photo-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #111;
}
.photo-gallery-header h4 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
}
.photo-gallery-header h4 i { margin-right: 8px; color: #005CB6; font-size: 22px; }
.photo-gallery-header a { font-size: 13px; color: #005CB6; font-weight: 500; }
.photo-gallery-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}
.photo-item {
    display: block;
    transition: transform .3s;
    min-width: 0;
    overflow: hidden;
}
.photo-item:hover { transform: translateY(-5px); }
.photo-img {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    margin-bottom: 10px;
}
.photo-title {
    font-size: 17px;
    color: #333;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Community Boards (공지사항 + Q&A) */
.community-boards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
}
.comm-board-box {
    background: #fff;
}
.comm-board-box .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #111;
}
.comm-board-box .section-header h4 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
}
.comm-board-box .section-header h4 i { margin-right: 8px; color: #005CB6; font-size: 22px; }
.comm-board-box .section-header a { font-size: 13px; color: #005CB6; font-weight: 500; }

/* Responsive */
@media (max-width: 991px) {
    .photo-gallery-list { grid-template-columns: repeat(2, 1fr); }
    .community-boards { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 480px) {
    .photo-gallery-list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .photo-img { height: 130px; }
}

/* ==============================
   FOOTER
   ============================== */
#ft {
    background: #1a1a1a;
    color: #999;
}
.ft-top {
    background: #222;
    padding: 15px 0;
    border-bottom: 1px solid #333;
}
.ft-top-links {
    display: flex;
    gap: 25px;
    align-items: center;
}
.ft-top-links a {
    color: #bbb;
    font-size: 14px;
    font-weight: 500;
    transition: color .3s;
}
.ft-top-links a:hover { color: #fff; }
.ft-top-links a.privacy {
    color: #fff;
    font-weight: 700;
}
.ft-main { padding: 40px 0; }
.ft-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 40px;
    align-items: start;
}
.ft-logo .logo-text-ft {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}
.ft-logo .logo-sub { font-size: 12px; color: #666; }
.ft-logo-img { height: 70px; filter: brightness(0) invert(1); }
.ft-info { padding-left: 30px; }
.ft-info p { font-size: 13px; line-height: 2; color: #888; }
.ft-info span { margin-right: 20px; }
.ft-info .ft-mo-br { display: none; }
.ft-info .ft-pc-sep { display: inline; }
.ft-info .ft-mo-only { display: none; }
.ft-contact .ft-tel {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
    display: none;
}
.ft-contact .ft-tel-list {
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 14px;
    font-weight: 500;
    letter-spacing: -0.3px;
}
/* PC 전용 푸터 전화 블록 (헤더 .tb-main 스타일과 유사) */
.ft-contact .ft-tel-block {
    margin-bottom: 18px;
}
.ft-contact .ft-tel-main {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}
.ft-contact .ft-tel-main i {
    width: 22px; height: 22px;
    margin-right: 8px;
    vertical-align: middle;
}
.ft-contact .ft-tel-main strong {
    color: #c83838;
    font-weight: 800;
}
.ft-contact .ft-tel-sub {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ft-contact .ft-tel-sub li {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.7;
    letter-spacing: -0.3px;
}
.ft-contact .ft-tel-sub li strong {
    color: #fff;
    font-weight: 600;
    margin-right: 4px;
}
.ft-contact p,
.ft-contact .ft-hours { font-size: 13px; color: #888; line-height: 1.8; }
@media (max-width: 768px) {
    .ft-contact .ft-tel-block { display: none; }
}
.ft-copyright {
    background: #111;
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: #666;
}
.ft-copyright .container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ft-admin-login {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #333;
    border-radius: 4px;
    color: #999;
    font-size: 12px;
    text-decoration: none;
    transition: all .2s;
}
.ft-admin-login:hover {
    background: #1a365d;
    border-color: #1a365d;
    color: #fff;
}
.ft-admin-login .ic {
    width: 14px;
    height: 14px;
}
@media (max-width: 480px) {
    .ft-admin-login span { display: none; }
    .ft-admin-login { padding: 4px 8px; }
}

/* ==============================
   FLOATING BUTTONS
   ============================== */
.floating-btns {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.floating-btn {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    transition: all .25s;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: #1a365d;
    line-height: 1.1;
    padding: 6px 4px;
}
.floating-btn i { font-size: 20px; margin-bottom: 4px; }
.floating-btn .floating-label {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: #fff;
    word-break: keep-all;
    text-align: center;
    line-height: 1.1;
}
.floating-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.floating-btn.btn-inquiry { background: #c83838; }
.floating-btn.btn-schedule { background: #1a365d; }
.floating-btn.btn-qna { background: #2563eb; }
.floating-btn.btn-gallery { background: #16a085; }
.floating-btn.btn-top { background: #444; width: 64px; height: 44px; border-radius: 10px; }
.floating-btn.btn-top i { margin-bottom: 0; font-size: 16px; }
/* legacy */
.floating-btn.btn-consult { background: #005CB6; }

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 1200px) {
    .gnb-ul { width: auto; }
    .gnb-ul > li > a { padding: 0 22px; font-size: 15px; }
    .hero-content h2 { font-size: 46px; }
    .clinic-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
    .top-bar { position: relative; background: #fff; height: 80px; line-height: 80px; border-bottom: 1px solid #e5e7eb; }
    .top-bar .container { padding: 0 15px; height: 80px; flex-wrap: wrap; }
    .top-bar-left { display: none; }
    .top-bar-center { display: block; position: static; transform: none; margin: 0 auto; } /* 모바일에서도 메인 로고 표시 */
    .top-bar-logo-img { height: 56px; }
    .top-bar-right { font-size: 13px; }
    .lang-selector { margin-left: 10px; padding-left: 10px; height: 40px; line-height: 40px; }
    #hd { position: relative; top: 0; background: #fff; border-bottom: 1px solid #eee; }
    #hd .container { justify-content: center; padding: 0 15px; position: relative; }
    #hd .gnb-ul > li > a { color: #333; }
    .gnb { display: none; }
    .gnb.open {
        display: block;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,.1);
        z-index: 999;
    }
    .gnb-ul { flex-direction: column; width: 100%; align-items: stretch; }
    .gnb-ul > li { flex: none; text-align: left; }
    .gnb-ul > li > a { height: auto; line-height: 50px; padding: 0 20px; border-bottom: 1px solid #f0f0f0; color: #333 !important; font-size: 15px; }
    .gnb-mega { display: none !important; }
    .gnb-dropdown-bg { display: none !important; }
    #hd:hover { background: #fff !important; }
    #hd:hover .gnb-ul > li > a { color: #333; }
    .gnb-sub {
        display: none !important;
        position: static;
        background: #f8f9fc;
        padding: 5px 0;
        box-shadow: none;
        border-top: none;
        border-radius: 0;
    }
    .gnb-sub.open { display: block !important; }
    .gnb-sub li a { display: block; padding: 10px 40px; font-size: 14px; color: #555 !important; background: transparent !important; }
    .mobile-toggle { display: flex !important; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
    .mobile-toggle span { background: #333 !important; }
    /* Quick form mobile */
    .quick-form-section .container { padding: 0 20px; }
    .quick-form { display: block !important; }
    .quick-form-title { display: block; margin-bottom: 15px; min-width: auto; }
    .quick-form-title span { font-size: 18px; }
    .quick-form-row1 { flex-wrap: wrap; }
    .quick-form-row1 .qf-select { flex: 1 1 100%; }
    .quick-form-row1 .qf-input { flex: 1 1 45%; }
    .quick-form-row1 .qf-submit { flex: 1 1 100%; }
    .quick-form-row2 { flex-wrap: wrap; margin-left: 0 !important; flex-basis: auto !important; }
    .quick-form-row2 .qf-textarea { flex: 1 1 100%; }
    .quick-form-row2 .qf-agree { flex: 1 1 100%; margin-top: 5px; }
    .hero-section { height: 500px; min-height: 400px; }
    .hero-content h2 { font-size: 30px; }
    .hero-content p { font-size: 15px; }
    .hero-btn { padding: 14px 30px; font-size: 15px; }
    /* 모바일: 콘텐츠 좌우 패딩 통일 (카드 섹션과 동일하게) */
    .container { padding: 0 15px; box-sizing: border-box; }
    .schedule-section .container,
    .community-section .container,
    .clinic-section .container { padding: 0 15px; box-sizing: border-box; }
    /* Grid item overflow 방지 (nowrap 콘텐츠가 grid를 확장하는 것 차단) */
    .community-wrap, .community-wrap-2, .community-boards { min-width: 0; }
    .community-wrap > *,
    .community-wrap-2 > *,
    .community-boards > * { min-width: 0; }
    .comm-left, .comm-right, .comm-board-box { min-width: 0; }
    .news-list { min-width: 0; }
    .news-list li { min-width: 0; }
    .news-list li a { font-size: 14px; min-width: 0; }
    .news-list li .date { font-size: 12px; }
    .feature-cards { grid-template-columns: 1fr; max-width: 100%; gap: 15px; }
    .feature-cards-wrap { padding: 30px 15px; }
    .feature-card { height: 320px; }
    /* 전문도서 카드 모바일: 책 이미지 완벽하게 보이도록 충분한 높이 + 이미지 크기 조정 */
    .feature-card.feature-card-book { height: 480px; padding: 24px 16px; }
    .feature-card-book .book-track { padding: 6px 0; }
    .feature-card-book .book-item {
        flex-direction: column;
        gap: 22px;
        padding: 0 10px;
    }
    .feature-card-book .book-img { width: 150px; }
    .feature-card-book .book-img img { width: 100%; height: auto; max-height: 230px; object-fit: contain; }
    .feature-card-book .book-info { padding: 0 8px; }
    .feature-card-book .book-name { font-size: 16px; line-height: 1.35; }
    .feature-card-book .book-author { font-size: 13px; }
    .feature-card-book .book-desc { font-size: 12px; }
    .clinic-grid { grid-template-columns: 1fr; max-width: 100%; }
    .clinic-card { height: 220px; }
    .counter-grid { grid-template-columns: repeat(3, 1fr); }
    .community-wrap, .community-wrap-2 { grid-template-columns: 1fr; }
    .comm-left { padding-right: 0; margin-bottom: 30px; }
    .ft-grid { grid-template-columns: 1fr; gap: 25px; }
    .ft-info { padding-left: 15px; }
    .ft-contact { padding-left: 15px; }
    /* 푸터 모바일: 대표 전화번호 키우고 줄바꿈 표시, "/" 제거 */
    .ft-info p span { color: #fff; }
    .ft-info .ft-rep-line {
        display: inline-block;
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        margin-top: 4px;
    }
    .ft-info .ft-rep-line strong {
        color: #c83838;
        font-weight: 800;
    }
    .ft-info .ft-pc-sep { display: none; }
    .ft-info .ft-mo-br { display: inline; }
    .ft-info .ft-mo-only { display: inline; }
    .ft-info span.ft-mo-only { display: inline-block; }
    .top-bar-left { display: none; }
}
@media (min-width: 769px) and (max-width: 1199px) {
    .feature-cards { grid-template-columns: repeat(2, 1fr); max-width: 92%; gap: 18px; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
    .feature-cards { grid-template-columns: repeat(3, 1fr); max-width: 92%; gap: 18px; }
}
@media (max-width: 768px) {
    .top-bar { height: 50px; line-height: 50px; }
    .top-bar .container { padding: 0 15px; }
    .top-bar-center .logo-inline { font-size: 16px; }
    .section { padding: 50px 0; }
    .section-title h3 { font-size: 24px; }
    .hero-section { height: 420px; min-height: 350px; }
    .hero-content h2 { font-size: 24px; }
    .hero-content p { font-size: 14px; margin-bottom: 20px; }
    .hero-btn { padding: 12px 25px; font-size: 14px; }
    .hero-arrows button { width: 40px; height: 40px; font-size: 14px; }
    .quick-links .container { flex-wrap: wrap; }
    .quick-link-item { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; padding: 18px 10px; }
    .quick-link-item i { font-size: 22px; }
    .counter-grid { grid-template-columns: 1fr 1fr 1fr; }
    .counter-item .count { font-size: 32px; }
    .counter-item .label { font-size: 12px; }
    .gallery-thumbs { grid-template-columns: repeat(2, 1fr); }
    .ft-contact .ft-tel { font-size: 20px; }
    .feature-card-overlay .title { font-size: 22px; }
    .clinic-card-content h4 { font-size: 20px; }
    .floating-btns { right: 4px; bottom: 80px; gap: 8px; }
    .floating-btn { width: 50px; height: 50px; font-size: 15px; border-radius: 8px; padding: 4px 2px; }
    .floating-btn i { font-size: 16px; margin-bottom: 2px; }
    .floating-btn .floating-label { font-size: 9.5px; line-height: 1.05; letter-spacing: -0.5px; }
    .floating-btn.btn-top { width: 50px; height: 50px; border-radius: 8px; }
    .floating-btn.btn-top i { font-size: 16px; }
}
@media (max-width: 480px) {
    .top-bar-center .logo-inline { font-size: 14px; }
    .top-bar-right { gap: 8px; }
    .top-bar-right a { font-size: 12px; }
    .lang-selector { margin-left: 8px; padding-left: 8px; }
    .lang-selector a { font-size: 11px; padding: 2px 6px; }
    .hero-section { height: 380px; min-height: 300px; }
    .hero-content h2 { font-size: 20px; }
    .hero-content p { font-size: 13px; }
    .hero-btn { padding: 10px 20px; font-size: 13px; }
    .quick-link-item { flex: 1 1 100%; font-size: 13px; padding: 15px 10px; }
    .counter-item { padding: 15px 10px; }
    .counter-item .count { font-size: 26px; }
}

/* ==============================
   SUB PAGE - 헤더는 메인과 동일 (솔리드 흰색)
   .page-sub 오버라이드 제거됨 — 별도 룰 필요 없음
   ============================== */

/* ==============================
   SUB PAGES
   ============================== */
#container { min-height: 400px; }
.sub-content { padding: 60px 0; }

/* Sub Visual - 배경이미지 영역 (헤더가 더 이상 오버레이 안 함 — padding-top 제거) */
.sub-visual {
    height: 280px;
    padding-top: 0;
    background: url('../img/sub_visual_bg.jpg') center center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    margin-top: 0;
}
.page-edu .sub-visual { background: url('../img/sub_visual_bg2.jpg') center center/cover no-repeat; }
.page-prof .sub-visual { background: url('../img/sub_visual_bg3.jpg') center center/cover no-repeat; }
.page-support .sub-visual { background: url('../img/sub_visual_bg4.jpg') center center/cover no-repeat; }
.page-curriculum .sub-visual { background: url('../img/sub_visual_bg5.jpg') center center/cover no-repeat; }
.page-about .sub-visual { background: url('../img/sub_visual_bg6.jpg') center center/cover no-repeat; }
.sub-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,20,50,.5);
}
.sub-visual-content {
    position: relative;
    z-index: 1;
}
.sub-visual h2 {
    font-size: 42px;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    text-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* Sub Navigation Bar (브레드크럼 + 드롭다운) */
.sub-nav-bar {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 0;
    height: 55px;
}
.sub-nav-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 55px;
}
.sub-nav-left {
    display: flex;
    align-items: center;
    height: 100%;
}
.sub-nav-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background: #333;
    color: #fff;
    font-size: 18px;
}
.sub-nav-home:hover { background: #005CB6; color: #fff; }
.sub-nav-select {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 25px;
    height: 55px;
    border-right: 1px solid #ddd;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
}
.sub-nav-select { position: relative; cursor: pointer; min-width: 250px; }
.sub-nav-select i { font-size: 11px; color: #999; transition: transform .3s; }
.sub-nav-select.open i { transform: rotate(180deg); }
/* 열린 상태: 검정 배경 + 흰 글씨 */
.sub-nav-select.open {
    background: #111;
    color: #fff;
}
.sub-nav-select.open span { color: #fff; }
.sub-nav-select.open i { color: #fff; }
.sub-nav-dropdown {
    position: absolute;
    top: 55px;
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    display: none;
    z-index: 100;
    list-style: none;
    padding: 5px 0;
}
.sub-nav-select.open .sub-nav-dropdown { display: block; }
.sub-nav-dropdown li a {
    display: block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    transition: all .2s;
}
.sub-nav-dropdown li a:hover {
    background: #111;
    color: #fff;
}
.sub-nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #999;
}
.sub-nav-right a { color: #999; }
.sub-nav-right a:hover { color: #005CB6; }
.sub-nav-right span { color: #bbb; }
.sub-nav-right strong { color: #333; font-weight: 600; }

/* Sub Page Title */
.sub-page-title {
    text-align: center;
    padding: 50px 0 30px;
}
.sub-page-title h2 {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    font-family: 'Noto Sans KR', sans-serif;
    margin-bottom: 10px;
}
.sub-page-title p {
    font-size: 16px;
    color: #888;
    font-family: 'Noto Sans KR', sans-serif;
}

/* ==============================
   GREETING PAGE (원장 인사말)
   ============================== */
.greeting-banner {
    margin-bottom: 50px;
}
.greeting-banner-bg {
    background: linear-gradient(135deg, #0f1f3d, #1a365d);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 280px;
    position: relative;
}
.greeting-banner-text {
    flex: 1;
    padding: 50px 60px;
    color: #fff;
    position: relative;
    text-align: center;
}
.greeting-quote {
    font-size: 70px;
    font-weight: 700;
    color: rgba(255,255,255,.15);
    font-family: Georgia, serif;
    line-height: 1;
    margin-bottom: 5px;
}
.greeting-banner-text h2 {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 20px;
    font-family: 'Noto Sans KR', sans-serif;
}
.greeting-banner-text h2 strong {
    font-weight: 700;
}
.greeting-banner-text h2 em {
    font-style: normal;
    color: #4db8ff;
    font-weight: 700;
}
.greeting-line {
    width: 40px;
    height: 3px;
    background: rgba(255,255,255,.4);
    margin: 0 auto 15px;
}
.greeting-banner-text p {
    font-size: 16px;
    color: rgba(255,255,255,.7);
    font-family: 'Noto Sans KR', sans-serif;
}
.greeting-banner-photo {
    flex: 0 0 250px;
    height: 280px;
    overflow: hidden;
    margin-right: 30px;
}
.greeting-banner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 5px;
}

/* 인사말 본문 (좌: 사진, 우: 글) */
.greeting-body-wrap {
    display: flex;
    gap: 50px;
    padding: 50px 0 60px;
    align-items: flex-start;
}
.greeting-photo {
    flex: 0 0 300px;
    position: sticky;
    top: 100px;
}
.greeting-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.greeting-body {
    flex: 1;
}
.greeting-body p {
    font-size: 17px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 25px;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 서명 */
.greeting-sign {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.greeting-sign-title {
    font-size: 18px;
    color: #333;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
}
.greeting-sign-img {
    height: 50px;
    width: auto;
}

/* 인증 문구 */
.greeting-cert {
    margin-top: 50px;
    text-align: right;
    font-size: 16px;
    color: #555;
    font-family: 'Noto Sans KR', sans-serif;
}
.greeting-cert strong {
    color: #8EC242;
    font-weight: 600;
}

/* Greeting responsive */
@media (max-width: 768px) {
    .greeting-banner-bg { flex-direction: column; }
    .greeting-banner-text { padding: 30px; }
    .greeting-banner-text h2 { font-size: 22px; }
    .greeting-banner-photo { flex: 0 0 auto; width: 100%; height: 200px; }
    .greeting-quote { font-size: 50px; }
    .greeting-body-wrap { flex-direction: column; gap: 30px; }
    .greeting-photo { flex: 0 0 auto; position: static; max-width: 250px; margin: 0 auto; }
    .greeting-body p { font-size: 15px; }
}

/* ==============================
   INTRO PAGE (한국산업기술원 소개)
   ============================== */
.intro-body { max-width: 100%; }
.intro-highlight {
    background: #f0f5ff;
    border-left: 4px solid #005CB6;
    padding: 25px 30px;
    margin-bottom: 40px;
    border-radius: 0 8px 8px 0;
}
.intro-highlight h3 {
    font-size: 28px;
    font-weight: 700;
    color: #005CB6;
    margin-bottom: 8px;
    font-family: 'Noto Sans KR', sans-serif;
}
.intro-highlight h3 i { margin-right: 8px; }
.intro-highlight p {
    font-size: 20px;
    color: #555;
    font-family: 'Noto Sans KR', sans-serif;
}
.intro-section {
    margin-bottom: 50px;
}
.intro-section h4 {
    font-size: 25px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    font-family: 'Noto Sans KR', sans-serif;
}
.intro-section h4 i { margin-right: 8px; color: #005CB6; }
/* Numbered title bar (01, 02, 03...) */
.intro-num-title {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    background: #f8f9fc;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
}
.intro-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-height: 55px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    flex-shrink: 0;
}
.intro-num-text {
    flex: 1;
    padding: 15px 25px;
    font-size: 23px;
    font-weight: 700;
    color: #222;
    font-family: 'Noto Sans KR', sans-serif;
}

@media (max-width: 768px) {
    .intro-num { width: 45px; min-height: 45px; font-size: 16px; }
    .intro-num-text { padding: 12px 15px; font-size: 17px; }
}

.intro-img-wrap {
    margin-bottom: 25px;
}
.intro-img-wrap img {
    width: 80%;
    height: auto;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
}
.intro-text p {
    font-size: 17px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 20px;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
}
.intro-text p strong {
    color: #111;
    font-size: 18px;
}
.intro-promise {
    background: #fafbfd;
    border: 1px solid #e5e8ee;
    border-radius: 10px;
    padding: 40px;
    margin-top: 50px;
}
.intro-promise h4 {
    font-size: 20px;
    font-weight: 700;
    color: #005CB6;
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Noto Sans KR', sans-serif;
}
.intro-promise ul {
    list-style: none;
    padding: 0;
}
.intro-promise li {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
    padding-left: 0;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
}
.intro-promise li strong { color: #111; }
.intro-promise-sign {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}
.intro-promise-sign p {
    font-size: 18px;
    color: #333;
    font-family: 'Noto Sans KR', sans-serif;
}
.intro-note {
    text-align: right;
    color: #e74c3c;
    font-size: 17px;
    font-weight: 600;
    margin-top: 20px;
    font-family: 'Noto Sans KR', sans-serif;
}

/* ==============================
   EDU_OVERSEAS PAGE (공무 국외출장 과정)
   ============================== */
.overseas-info-box {
    background: #fff;
    border: 1px solid #e5e8ee;
    border-radius: 8px;
    padding: 25px 30px;
}
.overseas-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.overseas-list li {
    font-size: 17px;
    line-height: 1.9;
    color: #333;
    padding: 8px 0 8px 22px;
    position: relative;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
}
.overseas-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 8px;
    height: 8px;
    background: #005CB6;
    border-radius: 50%;
}
.overseas-list li strong {
    color: #005CB6;
    font-size: 17px;
}
.overseas-promise-desc {
    font-size: 17px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 25px;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
    text-align: center;
}
.overseas-contact {
    font-size: 18px;
    color: #333;
    font-family: 'Noto Sans KR', sans-serif;
}
.overseas-contact i {
    color: #005CB6;
    margin-right: 5px;
}
.overseas-contact a {
    color: #005CB6;
    text-decoration: none;
    font-weight: 600;
}
.overseas-contact a:hover {
    text-decoration: underline;
}

.overseas-cta {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 20px;
}
.overseas-cta-btn {
    display: inline-block;
    padding: 20px 60px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #005CB6, #0078e8);
    border-radius: 10px;
    text-decoration: none;
    font-family: 'Noto Sans KR', sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 92, 182, 0.3);
}
.overseas-cta-btn:hover {
    background: linear-gradient(135deg, #004a94, #0066cc);
    box-shadow: 0 6px 20px rgba(0, 92, 182, 0.45);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}
.overseas-cta-btn i {
    margin-right: 10px;
}

@media (max-width: 768px) {
    .overseas-info-box { padding: 20px; }
    .overseas-list li { font-size: 15px; }
    .overseas-promise-desc { font-size: 15px; }
    .overseas-cta-btn { padding: 16px 40px; font-size: 18px; }
}

/* History Timeline */
.history-timeline {
    position: relative;
    padding-left: 30px;
    border-left: 3px solid #e0e4ea;
    margin-left: 15px;
}
.history-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 14px 0;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}
.history-item:last-child { border-bottom: none; }
.history-item::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #6366f1;
    z-index: 1;
}
.history-year {
    flex: 0 0 100px;
    font-size: 17px;
    font-weight: 700;
    color: #005CB6;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}
.history-desc {
    flex: 1;
    font-size: 17px;
    line-height: 1.6;
    color: #444;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
}
.history-highlight {
    background: #f0f5ff;
    border-radius: 5px;
    padding: 14px 15px !important;
    margin: 5px 0;
}
.history-highlight .history-year { color: #c53428; }
.history-highlight .history-desc { color: #333; font-weight: 500; }
.history-founding {
    background: #f5f0ff;
    border-radius: 5px;
    padding: 14px 15px !important;
    margin: 5px 0;
}
.history-founding::before { border-color: #c53428; background: #c53428; }
.history-founding .history-year { color: #c53428; font-size: 19px; }
.history-founding .history-desc { color: #111; font-weight: 700; }

/* Establishment Table */
.estab-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #333;
    margin-top: 10px;
}
.estab-table th {
    width: 150px;
    padding: 20px;
    background: #f8f9fc;
    font-size: 17px;
    font-weight: 700;
    color: #333;
    text-align: center;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
    font-family: 'Noto Sans KR', sans-serif;
}
.estab-table td {
    padding: 20px 25px;
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    border-bottom: 1px solid #ddd;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
}
.estab-table em {
    font-style: normal;
    font-size: 14px;
    color: #666;
}

@media (max-width: 768px) {
    .intro-highlight { padding: 20px; }
    .intro-highlight h3 { font-size: 18px; }
    .intro-promise { padding: 25px; }
    .history-timeline { padding-left: 30px; margin-left: 0; border-left: 0; }
    .history-year { flex: 0 0 80px; font-size: 15px; }
    .history-desc { font-size: 14px; }
    .estab-table th { width: 100px; padding: 15px 10px; font-size: 14px; }
    .estab-table td { padding: 15px; font-size: 14px; }
}

/* ==============================
   DIRECTOR PAGE (소장 인사말 & 프로필)
   ============================== */
.director-banner { margin-bottom: 40px; }
.director-banner-bg {
    background: linear-gradient(135deg, #2a628e, #3a7ab5);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 300px;
}
.director-photo {
    flex: 0 0 250px;
    text-align: center;
    padding: 30px;
}
.director-photo img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.2);
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.director-name {
    color: #fff;
    font-size: 18px;
    margin-top: 12px;
    font-family: 'Noto Sans KR', sans-serif;
}
.director-name strong { font-size: 22px; }
.director-banner-text {
    flex: 1;
    padding: 40px;
    color: #fff;
}
.director-quote {
    font-size: 60px;
    font-weight: 700;
    color: rgba(255,255,255,.12);
    font-family: Georgia, serif;
    line-height: 1;
    margin-bottom: 5px;
}
.director-banner-text h2 {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 15px;
    font-family: 'Noto Sans KR', sans-serif;
}
.director-banner-text h2 strong { font-weight: 700; }

/* 소장 인사말 본문 */
.director-body {
    max-width: 100%;
    padding: 20px 0 40px;
}
.director-body p {
    font-size: 17px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 20px;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
}

/* 프로필 카드 그리드 */
.director-profile { margin-top: 30px; }
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 20px;
}
.profile-card {
    background: #f8f9fc;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    padding: 30px;
}
.profile-card:first-child {
    grid-column: 1 / -1;
}
.profile-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #005CB6;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #005CB6;
    font-family: 'Noto Sans KR', sans-serif;
}
.profile-card h4 i { margin-right: 8px; }
.profile-card ul {
    list-style: none;
    padding: 0;
}
.profile-card li {
    font-size: 17px;
    line-height: 1.7;
    color: #444;
    padding: 6px 0;
    padding-left: 18px;
    position: relative;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
}
.profile-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
}

@media (max-width: 768px) {
    .director-banner-bg { flex-direction: column; }
    .director-photo { flex: 0 0 auto; padding: 25px 20px 10px; }
    .director-photo img { width: 150px; height: 150px; }
    .director-banner-text { padding: 20px 25px 30px; text-align: center; }
    .director-banner-text h2 { font-size: 22px; }
    .director-quote { font-size: 40px; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-card:first-child { grid-column: auto; }
}

/* ==============================
   LOCATION PAGE (오시는 길)
   ============================== */
.location-body { max-width: 100%; }
.location-addr-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 25px;
    background: #f0f5ff;
    border-left: 4px solid #005CB6;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
    font-family: 'Noto Sans KR', sans-serif;
}
.location-addr-bar i { font-size: 22px; color: #005CB6; }
.location-map {
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}
/* 연락처 카드 */
.location-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}
.location-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    background: #f8f9fc;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
}
.location-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #005CB6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.location-card-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    font-family: 'Noto Sans KR', sans-serif;
}
.location-card-info p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    font-family: 'Noto Sans KR', sans-serif;
}
.location-card-info strong { color: #111; }
/* 대중교통 */
.location-transport { margin-top: 20px; }
.location-notice {
    font-size: 17px;
    color: #555;
    margin: 20px 0 30px;
    padding: 15px 20px;
    background: #fff8f0;
    border-left: 4px solid #f59e0b;
    border-radius: 0 5px 5px 0;
    font-family: 'Noto Sans KR', sans-serif;
}
.transport-section {
    margin-bottom: 35px;
}
.transport-section h4 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-family: 'Noto Sans KR', sans-serif;
}
.transport-section h4 i { margin-right: 8px; color: #005CB6; }
.transport-section > ul {
    list-style: none;
    padding: 0;
}
.transport-section > ul > li {
    font-size: 17px;
    line-height: 1.7;
    color: #333;
    padding: 8px 0;
    font-family: 'Noto Sans KR', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
}
.transport-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.badge-line9 { background: #aa9872; }
.badge-line5 { background: #8b50a4; }
/* 버스 정류장 */
.bus-stop {
    background: #f8f9fc;
    border: 1px solid #e8ecf1;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 15px;
}
.bus-stop h5 {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
    font-family: 'Noto Sans KR', sans-serif;
}
.bus-stop h5 i { margin-right: 6px; color: #e74c3c; }
.bus-lines p {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 5px;
    font-family: 'Noto Sans KR', sans-serif;
}
.bus-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-right: 8px;
    min-width: 45px;
    text-align: center;
}
.bus-blue { background: #3b82f6; }
.bus-green { background: #22c55e; }
.bus-red { background: #ef4444; }
.bus-seat { background: #6366f1; }

@media (max-width: 768px) {
    .location-contact-grid { grid-template-columns: 1fr; }
    .location-addr-bar { font-size: 15px; padding: 15px 18px; }
    .transport-section > ul > li { flex-wrap: wrap; font-size: 15px; }
    .bus-lines p { font-size: 14px; }
    .bus-stop { padding: 15px; }
}

.board-wrap { margin-top: 30px; }

/* Responsive sub page */
@media (max-width: 991px) {
    .sub-visual { height: 200px; margin-top: 0; padding-top: 0; }
    .sub-visual h2 { font-size: 30px; }
    .sub-nav-right { display: none; }
    .sub-nav-left { flex-wrap: nowrap; overflow: hidden; width: 100%; }
    .sub-nav-select { padding: 0 15px !important; font-size: 14px !important; min-width: 0 !important; flex: 1 !important; }
    .sub-nav-bar .container { overflow: hidden; padding: 0; }
    .sub-nav-bar { overflow: hidden; }
}
@media (max-width: 768px) {
    .sub-visual { height: 200px; }
    .sub-visual h2 { font-size: 24px; }
}
#hd_wrapper { background: none; }
#hd_login_msg { display: none; }

/* Animations */
.fade-up { opacity: 0; transform: translateY(30px); transition: all .8s cubic-bezier(.4,0,.2,1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-left { opacity: 0; transform: translateX(-30px); transition: all .8s cubic-bezier(.4,0,.2,1); }
.fade-left.visible { opacity: 1; transform: translateX(0); }
.fade-right { opacity: 0; transform: translateX(30px); transition: all .8s cubic-bezier(.4,0,.2,1); }
.fade-right.visible { opacity: 1; transform: translateX(0); }
.lt-wrap { margin-bottom: 0 !important; }

/* ==============================
   LUCIDE ICONS (모던 라인 아이콘 통일 스타일)
   ============================== */
i[data-lucide], svg.lucide {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.18em;
    stroke-width: 1.75;
    flex-shrink: 0;
}
/* 변환되기 전 placeholder 깜빡임 방지 */
i[data-lucide]:not(:has(svg)) { width: 1.1em; height: 1.1em; }

/* 섹션 타이틀 옆 아이콘 (h4 안의) — 약간 더 크게 */
.section-header h4 svg.lucide,
.photo-gallery-header h4 svg.lucide,
.book-title-area svg.lucide {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
    stroke-width: 2;
}

/* Floating quick btn 아이콘 — 기존 fa 사이즈 보존 */
.floating-btn svg.lucide { width: 22px; height: 22px; stroke-width: 1.8; }
.floating-btn.btn-top svg.lucide { width: 18px; height: 18px; }

/* Hero 화살표 — 동일 크기 보존 */
.hero-arrows button svg.lucide,
.book-controls button svg.lucide { width: 1em; height: 1em; }

/* 상단바 / GNB / 서브내비 */
.top-bar svg.lucide { stroke-width: 1.8; }
.sub-nav-bar svg.lucide { stroke-width: 1.8; }

/* info-box 큰 원형 아이콘 */
.info-box svg.lucide { width: 32px; height: 32px; stroke-width: 1.6; }


/* ==============================
   BOARD (kiti_post 기반 자체 렌더러)
   ============================== */
.board-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:30px 0 20px}
.board-title{margin:0;font-size:24px;color:#1a365d;font-weight:700}
.board-total{color:#9ca3af;font-size:15px;font-weight:400;margin-left:6px}
.board-search{display:flex;align-items:center;gap:6px}
.board-search input{padding:9px 14px;border:1px solid #d1d5db;border-radius:6px;font-size:13.5px;width:240px}
.board-search input:focus{outline:0;border-color:#005CB6;box-shadow:0 0 0 3px rgba(0,92,182,.12)}
.board-search button{background:#005CB6;color:#fff;border:0;padding:9px 16px;border-radius:6px;cursor:pointer}
.board-empty{padding:80px 0;text-align:center;color:#9ca3af;font-size:15px}

/* 관리자 모드 버튼 (kiti_admin_token 인증된 경우만 노출) */
.board-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-admin-write{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:#1a365d;color:#fff;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s}
.btn-admin-write:hover{background:#0f1f3d;color:#fff;text-decoration:none}
.btn-admin-write i{color:#fff}
.btn-admin-edit,.btn-admin-del{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:all .15s}
/* post-nav 내부에서도 우선 — .post-nav a 보다 specificity 높임 */
.post-nav .btn-admin-edit, a.btn-admin-edit{background:#0ea5e9;color:#fff !important;border-color:#0ea5e9}
.post-nav .btn-admin-edit:hover, a.btn-admin-edit:hover{background:#0284c7 !important;color:#fff !important;border-color:#0284c7;text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 8px rgba(14,165,233,.3)}
.post-nav .btn-admin-del, a.btn-admin-del{background:#fff;color:#dc2626 !important;border-color:#dc2626;margin-left:auto}
.post-nav .btn-admin-del:hover, a.btn-admin-del:hover{background:#dc2626 !important;color:#fff !important;border-color:#dc2626;text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 8px rgba(220,38,38,.3)}
.admin-badge{margin:8px 0 18px;padding:9px 14px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;font-size:13px;color:#1e3a8a;display:flex;align-items:center;gap:8px}
.admin-badge i{color:#1d4ed8}
.admin-badge a{color:#1d4ed8;font-weight:600}

/* 리스트 행/카드별 관리 버튼 (관리자 전용) */
.col-admin{width:90px;text-align:center;white-space:nowrap}
.row-edit,.row-del{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:5px;font-size:13px;text-decoration:none;border:1px solid;margin:0 1px;transition:all .15s}
.row-edit{color:#1a365d;border-color:#cbd5e1;background:#fff}
.row-edit:hover{background:#1a365d;color:#fff;text-decoration:none;border-color:#1a365d}
.row-del{color:#c83838;border-color:#fecaca;background:#fff}
.row-del:hover{background:#fee2e2;color:#991b1b;text-decoration:none}

/* 갤러리 카드 + 관리자 오버레이 */
.gallery-card-wrap{position:relative}
.gallery-card-admin{
    position:absolute;top:8px;right:8px;display:flex;gap:4px;
    opacity:0;transition:opacity .2s;z-index:5;
}
.gallery-card-wrap:hover .gallery-card-admin{opacity:1}
.gallery-card-admin .row-edit,
.gallery-card-admin .row-del{
    width:32px;height:32px;background:rgba(255,255,255,.95);
    box-shadow:0 2px 6px rgba(0,0,0,.2);font-size:12px;
}

/* ==============================
   KITI WRITE FORM (공개 사이트 톤)
   ============================== */
.kiti-write-wrap{max-width:980px;margin:30px auto 60px;padding:0}
.kiti-write-head{padding:24px 0 18px;border-bottom:2px solid #1a365d;margin-bottom:30px}
.kiti-write-title{margin:0 0 6px;font-size:26px;color:#1a365d;font-weight:700;letter-spacing:-0.3px}
.kiti-write-cat{display:inline-block;margin-left:10px;padding:3px 12px;background:#1a365d;color:#fff;border-radius:14px;font-size:13px;font-weight:500;vertical-align:middle}
.kiti-write-sub{margin:0;color:#6b7280;font-size:13px}

.kiti-alert{padding:12px 18px;border-radius:6px;margin-bottom:20px;font-size:14px}
.kiti-alert--error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.kiti-alert--ok{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}

.kiti-form{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:32px}
.kiti-field{margin-bottom:22px}
.kiti-field__label{display:block;font-size:14px;font-weight:600;color:#1a365d;margin-bottom:8px}
.kiti-field__label .kiti-field__req{color:#c83838;margin-left:3px;font-weight:700}
.kiti-field__label .kiti-field__hint{margin-left:8px;color:#9ca3af;font-weight:400;font-size:12.5px}
.kiti-input,.kiti-textarea{
    width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;
    font-size:15px;color:#1f2937;font-family:inherit;background:#fff;
    transition:border-color .15s,box-shadow .15s;box-sizing:border-box;
}
.kiti-input:focus,.kiti-textarea:focus{
    outline:0;border-color:#005CB6;box-shadow:0 0 0 3px rgba(0,92,182,.12);
}
.kiti-textarea{
    font-family:'D2Coding','Menlo',Consolas,monospace;font-size:14px;
    line-height:1.7;resize:vertical;min-height:300px;
}
.kiti-file{
    width:100%;padding:8px;border:1px dashed #cbd5e1;border-radius:6px;
    font-size:13px;background:#f9fafb;cursor:pointer;
}
.kiti-file::file-selector-button{
    background:#1a365d;color:#fff;border:0;padding:7px 14px;border-radius:5px;
    font-size:13px;font-weight:600;cursor:pointer;margin-right:10px;
}
/* 파일 슬롯 */
.kiti-file-slots{display:flex;flex-direction:column;gap:10px}
.kiti-file-slot{display:flex;align-items:center;gap:10px}
.kiti-file-slot__num{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#1a365d;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;letter-spacing:0}
.kiti-file-slot .kiti-file{flex:1;margin:0}
/* 링크 슬롯 */
.kiti-link-slots{display:flex;flex-direction:column;gap:10px}
.kiti-link-slot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kiti-link-slot__num{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#b8a164;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.kiti-link-slot__url{flex:2 1 320px;min-width:240px}
.kiti-link-slot__title{flex:1 1 200px;min-width:160px}
/* 슬롯 제거 (×) 버튼 */
.kiti-slot-remove{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;color:#9ca3af;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;padding:0}
.kiti-slot-remove:hover{background:#fee2e2;border-color:#fca5a5;color:#c83838}
/* + 슬롯 추가 버튼 */
.kiti-slot-add{margin-top:10px;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;background:#fff;border:1.5px dashed #cbd5e1;border-radius:6px;color:#475569;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;font-family:inherit}
.kiti-slot-add:hover{background:#f8fafc;border-color:#94a3b8;border-style:solid;color:#1e293b}
.kiti-slot-add--file:hover{border-color:#1a365d;color:#1a365d}
.kiti-slot-add--link:hover{border-color:#b8a164;color:#8c7949}
.kiti-slot-add i{font-size:11px}
@media (max-width: 600px){
    .kiti-link-slot{flex-direction:column;align-items:stretch}
    .kiti-link-slot__num{align-self:flex-start}
    .kiti-link-slot .kiti-slot-remove{align-self:flex-end;margin-top:-32px}
}

.kiti-field-row{display:flex;gap:20px;align-items:end;flex-wrap:wrap;margin-bottom:22px}
.kiti-field-row .kiti-field{margin-bottom:0;flex:1;min-width:200px}
.kiti-field--check{flex:0 0 auto !important}
.kiti-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#374151;font-weight:500;padding:10px 16px;border:1px solid #d1d5db;border-radius:6px;background:#fff}
.kiti-checkbox input{margin:0;width:16px;height:16px;cursor:pointer}
.kiti-field-readonly{padding:10px 14px;color:#6b7280;font-size:13px;background:#f9fafb;border-radius:6px}
.kiti-field-readonly strong{color:#1a365d;font-weight:600}

.kiti-files{list-style:none;padding:0;margin:0;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden}
.kiti-files__item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #f3f4f6}
.kiti-files__item:last-child{border-bottom:0}
.kiti-files__thumb{flex:0 0 auto;width:42px;height:42px;border-radius:5px;overflow:hidden;background:#f3f4f6}
.kiti-files__thumb img{width:100%;height:100%;object-fit:cover}
.kiti-files__icon{flex:0 0 auto;width:42px;height:42px;border-radius:5px;background:#1a365d;color:#fff;display:flex;align-items:center;justify-content:center}
.kiti-files__name{flex:1;font-size:13.5px;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kiti-files__size{flex:0 0 auto;font-size:12px;color:#9ca3af;font-variant-numeric:tabular-nums}
.kiti-files__view,.kiti-files__del{flex:0 0 auto;font-size:12.5px;padding:5px 11px;border-radius:4px;text-decoration:none;font-weight:500;border:1px solid;cursor:pointer}
.kiti-files__view{color:#005CB6;border-color:#bfdbfe;background:#fff}
.kiti-files__view:hover{background:#eff6ff;text-decoration:none}
.kiti-files__del{color:#c83838;border-color:#fecaca;background:#fff}
.kiti-files__del:hover{background:#fee2e2}

.kiti-write-foot{display:flex;gap:8px;margin-top:30px;padding-top:24px;border-top:1px solid #e5e7eb;flex-wrap:wrap}
.kiti-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 24px;border-radius:6px;font-size:14.5px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:all .15s;font-family:inherit}
.kiti-btn--primary{background:#1a365d;color:#fff;border-color:#1a365d}
.kiti-btn--primary:hover{background:#0f1f3d;color:#fff;text-decoration:none}
.kiti-btn--ghost{background:#fff;color:#374151;border-color:#d1d5db}
.kiti-btn--ghost:hover{background:#f9fafb;color:#0f172a;text-decoration:none}
.kiti-btn--danger{background:#fff;color:#c83838;border-color:#fecaca;margin-left:auto}
.kiti-btn--danger:hover{background:#fee2e2;color:#991b1b;text-decoration:none}

@media (max-width:700px){
    .kiti-form{padding:18px}
    .kiti-field-row{gap:12px}
    .kiti-write-foot{flex-direction:column}
    .kiti-btn{width:100%}
    .kiti-btn--danger{margin-left:0}
}

/* 갤러리 그리드 */
.board-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px}
.gallery-card{display:block;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;transition:all .25s}
.gallery-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.08);text-decoration:none}
.gallery-thumb{aspect-ratio:4/3;background:#f3f4f6 center/cover no-repeat}
.gallery-thumb-empty{display:flex;align-items:center;justify-content:center;color:#cbd5e1;font-size:40px;background:linear-gradient(135deg,#1a365d,#2563eb)}
.gallery-thumb-empty i{color:rgba(255,255,255,.5)}
.gallery-info{padding:14px}
.gallery-title{margin:0 0 6px;font-size:14px;color:#1a365d;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gallery-meta{margin:0;font-size:12px;color:#9ca3af}

/* 일반 리스트 */
.board-list{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}
.board-list thead th{background:#f9fafb;padding:14px 16px;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;font-size:13px}
.board-list tbody td{padding:14px 16px;border-bottom:1px solid #f3f4f6;color:#1f2937}
.board-list tbody tr:hover td{background:#fafbfc}
.board-list tbody tr:last-child td{border-bottom:0}
.board-list .num{text-align:right;font-variant-numeric:tabular-nums;width:80px}
.board-list a{color:#1a365d;font-weight:500}
.board-list a:hover{color:#005CB6}
@media (max-width: 700px) {
    .board-list .hide-sm { display:none }
    .board-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
    .gallery-card { min-width: 0 }
    .gallery-info { padding: 10px }
    .gallery-title { font-size: 13px; word-break: keep-all; overflow-wrap: anywhere }
    .gallery-meta { font-size: 11px; word-break: keep-all; overflow-wrap: anywhere }
    .board-list .num { text-align: center; font-variant-numeric: tabular-nums; width: 50px }
    .board-list tbody td { padding: 14px 2px }
}

/* 페이지네이션 */
.board-pagination{display:flex;justify-content:center;gap:6px;margin:30px 0 50px;flex-wrap:wrap}
.board-pagination a{padding:8px 13px;border:1px solid #d1d5db;border-radius:5px;color:#374151;font-size:13px;min-width:38px;text-align:center}
.board-pagination a:hover{background:#f3f4f6;text-decoration:none}
.board-pagination a.active{background:#1a365d;color:#fff;border-color:#1a365d}

/* 단일 글 보기 */
.post-view{padding:30px 0 60px;max-width:980px;margin:0 auto}
.post-title{font-size:28px;color:#1a365d;font-weight:700;margin:30px 0 14px;line-height:1.4;word-break:keep-all}
.post-meta{display:flex;flex-wrap:wrap;gap:16px;color:#6b7280;font-size:13px;padding-bottom:20px;border-bottom:2px solid #e5e7eb;margin-bottom:30px}
.post-meta i{margin-right:4px;color:#9ca3af}
.post-files{margin-bottom:30px}
.post-image{margin-bottom:14px;text-align:center}
.post-image img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.post-content{font-size:16px;line-height:1.85;color:#1f2937;padding:10px 0 30px;word-break:keep-all}
.post-content img{max-width:100%;height:auto;border-radius:6px;margin:8px 0}
.post-content p{margin:0 0 14px;min-height:1em}
/* CKEditor 본문 — prose 스타일 (관리자가 에디터로 작성한 HTML) */
.post-content h1{font-size:28px;font-weight:700;color:#0f172a;margin:32px 0 14px;line-height:1.3}
.post-content h2{font-size:24px;font-weight:700;color:#0f172a;margin:28px 0 12px;line-height:1.35}
.post-content h3{font-size:20px;font-weight:600;color:#1e293b;margin:24px 0 10px;line-height:1.4}
.post-content h4{font-size:17px;font-weight:600;color:#1e293b;margin:20px 0 8px}
.post-content h5,.post-content h6{font-size:15px;font-weight:600;margin:16px 0 6px}
.post-content strong,.post-content b{font-weight:700;color:#0f172a}
.post-content em,.post-content i{font-style:italic}
.post-content u{text-decoration:underline}
.post-content s,.post-content strike,.post-content del{text-decoration:line-through;color:#94a3b8}
.post-content a{color:#005CB6;text-decoration:underline}
.post-content a:hover{color:#003c7a;text-decoration:none}
.post-content ul,.post-content ol{margin:14px 0 14px 24px;padding-left:8px}
.post-content ul li,.post-content ol li{margin:6px 0;line-height:1.7}
.post-content ul{list-style:disc}
.post-content ol{list-style:decimal}
.post-content blockquote{margin:18px 0;padding:14px 20px;border-left:4px solid #1a365d;background:#f8fafc;color:#475569;font-style:italic}
.post-content blockquote p{margin:0}
.post-content pre{margin:14px 0;padding:14px 16px;background:#0f172a;color:#e2e8f0;border-radius:6px;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.6}
.post-content code{padding:2px 6px;background:#f1f5f9;color:#be185d;border-radius:3px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em}
.post-content pre code{padding:0;background:transparent;color:inherit}
.post-content hr{margin:24px 0;border:0;border-top:1px solid #e5e7eb}
.post-content table{border-collapse:collapse;margin:14px 0;width:100%;font-size:14.5px}
.post-content table th,.post-content table td{border:1px solid #e5e7eb;padding:8px 12px;text-align:left;vertical-align:top}
.post-content table th{background:#f8fafc;font-weight:600;color:#0f172a}
.post-content figure{margin:14px 0;text-align:center}
.post-content figure img{margin:0 auto}
.post-content figcaption{margin-top:8px;font-size:13px;color:#64748b;font-style:italic}
.post-content iframe,.post-content video{max-width:100%;border:0;border-radius:6px;margin:8px 0}
/* CKEditor 컬러 보존 (font color, background) */
.post-content [style*="color"]{}
.post-content [style*="background"]{}
@media (max-width:720px){
  .post-content{font-size:15px;line-height:1.8}
  .post-content h1{font-size:22px}
  .post-content h2{font-size:19px}
  .post-content h3{font-size:17px}
  .post-content table{font-size:13px;display:block;overflow-x:auto}
  .post-content pre{font-size:12.5px;padding:12px}
}
.post-attachments{margin-top:30px;padding:20px;background:#f9fafb;border-radius:8px}
.post-attachments h4{margin:0 0 12px;font-size:14px;color:#374151}
.post-attachments h4 i{color:#005CB6;margin-right:6px}
.post-attachments ul{list-style:none;padding:0;margin:0}
.post-attachments li{margin:6px 0}
.post-attachments li a{color:#1a365d;font-size:14px}
.attach-size{color:#9ca3af;font-size:12px;margin-left:6px}

.post-nav{display:flex;gap:8px;margin-top:40px;padding-top:24px;border-top:1px solid #e5e7eb;flex-wrap:wrap}
.post-nav a{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:1px solid #d1d5db;border-radius:6px;color:#374151;font-size:14px}
.post-nav a:hover{background:#f3f4f6;text-decoration:none}
.post-nav .btn-list{background:#1a365d;color:#fff;border-color:#1a365d}
.post-nav .btn-list:hover{background:#0f1f3d;color:#fff}
.post-nav .btn-nav-next{margin-left:auto}

/* ==============================
   HERO COMPOSED SLIDE — 레이어 분리 (배경/휠/텍스트) 자동 반응형
   ============================== */
.hero-composed {
    position: relative;
    overflow: hidden;
    background: #1B2441;  /* 원본 정확한 네이비 */
    text-decoration: none !important;
    cursor: default;
}
.hero-composed * { box-sizing: border-box; }

/* Layer 1: 배경 — 솔리드 컬러 (원본 그대로) */
.composed-bg {
    position: absolute;
    inset: 0;
    background: #1B2441;
    z-index: 0;
}

/* Layer 2: 콘텐츠 그리드 (휠 좌측, 통계 우측) */
.composed-content {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    /* 헤더가 더 이상 오버레이 안 함 — 일반 패딩만 */
    padding: clamp(40px, 6vh, 80px) clamp(20px, 4vw, 80px);
}
.composed-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(30px, 4vw, 80px);
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    align-items: center;
}

/* WHEEL — 통이미지 */
.composed-wheel {
    width: 100%;
    aspect-ratio: 1;
    max-width: clamp(260px, 38vw, 600px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.composed-wheel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* 배경이 동일 #1B2441이므로 클립 불필요 — 자연스럽게 블렌드 */
}

/* STATS (우측 HTML 텍스트 — 모두 편집 가능) */
.composed-stats {
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
    min-width: 0;
}
.stat-kicker {
    font-size: clamp(15px, 1.5vw, 26px);
    color: #e8c97a;
    margin: 0 0 clamp(0px, 0.2vw, 3px);    /* kicker → No.1 사이 거의 없음 */
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.1;
}
.stat-headline {
    font-family: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
    font-size: clamp(56px, 8.5vw, 140px);
    font-weight: 900;
    background: linear-gradient(180deg, #fbe88c 0%, #e8c14a 45%, #b08720 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 0.92;
    margin: 0 0 clamp(4px, 0.6vw, 10px);   /* No.1 → BEST 사이 더 타이트 */
    text-shadow: 0 4px 24px rgba(212,175,68,.25);
    letter-spacing: -2px;
}

.stat-list {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(4px, 0.6vw, 10px);   /* stat-list → pills 사이 더 타이트 */
}
.stat-list li {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 20px);
    margin-bottom: clamp(3px, 0.4vw, 7px); /* 행간 더 줄임 */
}
.stat-icon {
    flex: 0 0 auto;
    width: clamp(56px, 5.5vw, 92px);
    height: clamp(56px, 5.5vw, 92px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.stat-body strong {
    display: block;
    color: #ffeab8;
    font-weight: 700;
    font-size: clamp(15px, 1.55vw, 25px);
    line-height: 1.15;         /* 줄간격 더 압축 */
    word-break: keep-all;
}
.stat-body small { margin-top: 1px; }
.stat-body strong .globe-mini {
    width: 0.85em;
    height: 0.85em;
    color: #b8b8d4;
    vertical-align: -0.15em;
    margin-left: 4px;
    stroke-width: 1.5;
}
.stat-body small {
    display: block;
    color: #b6b9d6;
    font-size: clamp(11px, 0.95vw, 14px);
    margin-top: 2px;
    font-weight: 400;
}

/* PILLS — 5개 사관학교 */
.academy-pills {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(5px, 0.5vw, 10px);
    max-width: clamp(420px, 36vw, 620px); /* 폭 제한 — 너무 넓게 안 퍼지도록 */
}
.pill {
    background: linear-gradient(180deg, #f8d669 0%, #e0b13e 50%, #b88a26 100%);
    color: #1a1a3e;
    border-radius: clamp(7px, 0.7vw, 12px);
    padding: clamp(8px, 0.9vw, 14px) clamp(3px, 0.4vw, 8px);
    text-align: center;
    font-size: clamp(9px, 0.75vw, 12px);
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
    word-break: keep-all;
    border: 1px solid rgba(255,255,255,.3);
    min-width: 0;
}

/* 작은 화면 — 휠과 텍스트 세로 적층 */
@media (max-width: 900px) {
    .composed-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .composed-wheel { max-width: 320px; }
    .stat-headline { font-size: clamp(48px, 12vw, 80px); }
    .academy-pills { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .composed-content { padding: 12px 16px; }
    .academy-pills { grid-template-columns: repeat(2, 1fr); }
    .stat-list li { gap: 10px; }
    .stat-icon { width: 38px; height: 38px; }
}

/* ==============================
   HERO SLIDER - CLEAN (디자인 배너 그대로 표출)
   ============================== */
.hero-section.hero-section-clean {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    max-height: 90vh;
}
.hero-section-clean .hero-slide {
    display: block;
    text-decoration: none;
}
.hero-section-clean .hero-slide .slide-bg::after {
    display: none;
    content: none;
}
.hero-section-clean .slide-bg {
    background-size: cover;
    background-position: center;
}
.hero-section-clean .hero-nav {
    bottom: 28px;
}
@media (max-width: 768px) {
    .hero-section.hero-section-clean {
        aspect-ratio: 27 / 40;
        max-height: none;
    }
    .hero-section-clean .hero-nav { bottom: 18px; }
}

/* ==============================
   HERO SLIDER - BANNER (5개 배경 + 텍스트 오버레이)
   ============================== */
.hero-section.hero-section-banner {
    height: 100vh;
    min-height: 720px;
    max-height: 980px;
}
.hero-section-banner .hero-slide { display: block; }
.hero-section-banner .slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0; left: 0;
}
.hero-section-banner .slide-bg::after { display: none; content: none; }
.hero-section-banner .slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 29, 59, 0.75) 0%, rgba(24, 54, 91, 0.55) 50%, rgba(40, 101, 84, 0.35) 100%);
    z-index: 1;
}
.hero-section-banner .slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.hero-section-banner .slide-content .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    color: #fff;
    text-align: center;
}
.hero-section-banner .slide-title {
    font-family: 'Noto Sans KR', 'Noto Serif KR', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #fff;
    margin: 0 auto 26px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    max-width: 1100px;
}
.hero-section-banner .slide-sub {
    font-size: 19.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0 auto 40px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    max-width: 1100px;
    white-space: nowrap;
}
.hero-section-banner .slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 40px;
    background: linear-gradient(135deg, #d4ba73 0%, #b8a164 100%);
    color: #0d1b2a;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    letter-spacing: -0.3px;
    box-shadow: 0 18px 36px -16px rgba(212, 186, 115, 0.7);
    transition: all .3s ease;
}
.hero-section-banner .slide-cta:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #e2cb87 0%, #c9b272 100%);
    box-shadow: 0 24px 42px -16px rgba(212, 186, 115, 0.85);
    color: #0d1b2a;
}
.hero-section-banner .slide-cta i.ic { width: 18px; height: 18px; stroke-width: 2.5; }
.hero-section-banner .mo-br { display: none; }
@media (max-width: 768px) {
    .hero-section-banner .mo-br { display: inline; }
}

@media (max-width: 1023px) {
    .hero-section.hero-section-banner { min-height: 640px; max-height: 820px; }
    .hero-section-banner .slide-title { font-size: 36px; }
    .hero-section-banner .slide-sub { font-size: 17px; }
}
@media (max-width: 768px) {
    .hero-section.hero-section-banner {
        height: auto;
        min-height: 640px;
        max-height: none;
        aspect-ratio: auto;
    }
    .hero-section-banner .slide-content .container { padding: 0 24px; text-align: left; }
    .hero-section-banner .slide-title { margin-left: 0; margin-right: 0; }
    .hero-section-banner .slide-sub { margin-left: 0; margin-right: 0; }
    .hero-section-banner .slide-title {
        font-size: 26px;
        line-height: 1.4;
        margin-bottom: 18px;
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
    }
    .hero-section-banner .slide-sub {
        font-size: 14.5px;
        line-height: 1.6;
        margin-bottom: 28px;
        white-space: normal;
    }
    .hero-section-banner .slide-cta {
        padding: 14px 30px;
        font-size: 14.5px;
    }
    .hero-section-banner .slide-overlay {
        background: linear-gradient(180deg, rgba(7, 29, 59, 0.65) 0%, rgba(24, 54, 91, 0.7) 100%);
    }
}

/* ==============================
   온라인 문의 모달
   ============================== */
.kiti-inquiry-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.kiti-inquiry-backdrop {
    position: absolute; inset: 0;
    background: rgba(7, 29, 59, 0.65);
    backdrop-filter: blur(3px);
}
.kiti-inquiry-box {
    position: relative; z-index: 1;
    width: 100%; max-width: 500px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 30px 70px -20px rgba(7, 29, 59, 0.4);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.kiti-inquiry-close {
    position: absolute; top: 14px; right: 16px;
    width: 36px; height: 36px;
    background: transparent; border: 0;
    font-size: 26px; line-height: 1; color: #fff;
    cursor: pointer;
    z-index: 2;
}
.kiti-inquiry-header {
    background: linear-gradient(135deg, #286554 0%, #18365b 55%, #071d3b 100%);
    color: #fff;
    padding: 30px 32px 26px;
    text-align: center;
}
.kiti-inquiry-header em {
    font-style: normal;
    font-size: 12px;
    letter-spacing: 4px;
    color: #d4ba73;
    font-weight: 600;
    text-transform: uppercase;
}
.kiti-inquiry-header h3 {
    font-size: 24px; font-weight: 700;
    margin: 6px 0 10px;
    letter-spacing: -0.5px;
    color: #fff;
}
.kiti-inquiry-header p {
    font-size: 13.5px;
    color: rgba(255,255,255,.85);
    line-height: 1.6;
    margin: 0;
}
.kiti-inquiry-form {
    padding: 24px 32px 28px;
}
.kif-row { margin-bottom: 14px; }
.kif-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2a3a4a;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.kif-row label span {
    color: #dc2626;
    margin-left: 2px;
}
.kif-row select,
.kif-row input[type="text"],
.kif-row input[type="email"],
.kif-row textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Noto Sans KR', sans-serif;
    color: #1f2937;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.kif-row select:focus,
.kif-row input:focus,
.kif-row textarea:focus {
    outline: none;
    border-color: #286554;
    box-shadow: 0 0 0 3px rgba(40, 101, 84, 0.12);
}
.kif-row textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.kif-row-agree label {
    display: flex; align-items: center; gap: 8px;
    font-weight: 500; color: #4b5563; font-size: 13px;
    cursor: pointer;
    margin-bottom: 0;
}
.kif-row-agree input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #286554;
    cursor: pointer;
}
.kif-actions {
    display: flex; gap: 10px;
    margin-top: 22px;
}
.kif-btn {
    flex: 1;
    padding: 13px 16px;
    border-radius: 6px;
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    border: 0;
    letter-spacing: -0.3px;
    font-family: 'Noto Sans KR', sans-serif;
}
.kif-btn-cancel {
    background: #f3f4f6;
    color: #4b5563;
}
.kif-btn-cancel:hover { background: #e5e7eb; }
.kif-btn-submit {
    background: linear-gradient(135deg, #286554 0%, #18365b 100%);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(7, 29, 59, 0.45);
}
.kif-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(7, 29, 59, 0.55);
}
.kif-btn-submit:disabled {
    opacity: 0.7; cursor: wait;
}
@media (max-width: 480px) {
    .kiti-inquiry-modal { padding: 12px; }
    .kiti-inquiry-header { padding: 26px 22px 22px; }
    .kiti-inquiry-header h3 { font-size: 21px; }
    .kiti-inquiry-form { padding: 20px 22px 24px; }
}