@charset "utf-8";

/* =======================================================
   0. Browser Reset (구 reset.css 내용)
   - 브라우저 기본 스타일을 초기화합니다.
======================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body, input, button, select, textarea {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}
        
/* reset.css의 body 설정 (아래에서 덮어씌워질 예정이나 기본값으로 유지) */
body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* =======================================================
   1. 통합 설정 및 변수
   - 색상이나 공통 값을 여기서 한 번에 변경할 수 있습니다.
======================================================= */
:root {
    /* 색상 팔레트 */
    --color-primary: #0078ff;       /* 메인 파란색 */
    --color-primary-light: #f0f7ff; /* 연한 파란색 (배경 등) */
    --color-dark-bg: #030b30;       /* 짙은 남색 배경 */
    --color-text-main: #333333;
    --color-text-sub: #666666;
    --color-white: #ffffff;
    --color-crimson: crimson;

    /* 레이아웃 */
    --max-width: 1100px;
    --border-radius-card: 12px;
    --border-radius-large: 20px;
}

/* =======================================================
   2. 기본 초기화 (Common Base Styles)
   - Reset 이후 사이트 전반에 적용될 기본 스타일
======================================================= */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    padding-top: 80px; /* 네비게이션 공간 확보 */
    background-color: var(--color-white);
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4; /* reset.css의 1을 1.4로 덮어씀 */
    /* font-family: "Malgun Gothic", sans-serif; */
    overflow-x: hidden;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    color: var(--color-text-main);
    font-weight: 700;
}

a {
    color: #333;
    text-decoration: none;
}

ul {
    list-style: none;
}

p {
    font-size: 0.9rem;
}

sup {
    vertical-align: super;
    font-size: smaller;
    color: dodgerblue;
}

strong {
    font-weight: bold;
}

/* 모바일에서 코드가 짤리지 않고 스크롤되도록 설정 */
pre,
code {
    white-space: pre;
    overflow-x: auto;
    max-width: 100%;
}

/* =======================================================
   3. 레이아웃 & 네비게이션
======================================================= */
/* CONTAINER */
#container {
    max-width: var(--max-width);
    margin: 0 auto;
    margin-bottom: 3.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* NAVIGATION */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    height: 60px;
    font-size: 13px;
    z-index: 3;
}

nav > ul {
    display: flex;
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: left;
    /* 반응형 유동 폭 적용 */
    width: 100%;
    max-width: var(--max-width);
}

nav a {
    color: #1a0dab;
    text-decoration: none;
}

nav ul li {
    color: #000;
    list-style: none;
    transition: 0.3s;
}

nav ul img {
    width: 100px;
}

nav > ul > li > a {
    /* font-family: Arial, sans-serif; */
    padding: 15px;
    color: #1a0dab;
}

/* Dropdown Menu Area */
nav ul.menu-area {
    margin-top: 10px;
    padding: 30px 40px 0 40px;
    background: #f2f2f2;
    text-align: left;
    border-top: 1px solid #e7eaed;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    border-top: 1px solid lightgray;
    border-bottom: 2px solid lightgray;
    z-index: 3;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    /* 반응형 유동 폭 적용 */
    width: 100%;
    max-width: var(--max-width);
    top: -9999px;
    left: 0;
}

nav ul li:hover ul.menu-area {
    top: 100%;
}

nav ul.menu-area ul {
    width: 20%;
    margin-bottom: 30px;
    color: #262626;
}

nav ul .menu-area h4 {
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: bold;
}

nav ul .menu-area ul li {
    display: block;
    padding-top: 0.5rem;
    line-height: 1.2rem;
}

nav ul .menu-area ul li a {
    margin-top: 10px;
    color: #000;
}

/* 햄버거 메뉴 버튼 (PC에선 숨김) */
.menu-hidden {
    display: none;
}

.menu-button {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 12px;
    right: 10px;
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    z-index: 10;
    display: none;
}

/* HEADER 이미지 스타일 */
header {
    max-width: var(--max-width);
    height: 140px;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 auto;
    border-radius: 5px;
    margin-bottom: 1rem;
}

#header h2 {
    display: inline-block;
    font-size: 1.1rem;
    padding: 10px;
}

#header p {
    padding: 10px 15px 20px;
    font-size: 0.9rem;
    color: var(--color-text-main);
}

#header span {
    font-weight: bold;
    color: #a1aaab;
}

.main a {
    text-decoration: none;
}

.main a:hover {
    text-decoration: underline;
}

#counter {
    text-align: right;
    padding-top: 95px;
    padding-right: 15px;
    font-size: 12px;
    color: var(--color-white);
}

/* =======================================================
   4. 메인 콘텐츠 요소 (Slogan, Stats, Partners)
======================================================= */

/* 주요 파트너사 (Partner Logos) */
.main-partners {
    position: relative;
    left: 50%;
    right: 50%;
    margin: 50px -50vw 20px -50vw;
    width: 100vw;
    background: var(--color-dark-bg);
    border: none;
    padding: 50px 0;
    text-align: center;
    box-sizing: border-box;
}

.partners-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 2.5rem;
    letter-spacing: -0.5px;
}

.partners-logos {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px 40px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.partners-logos img,
.more-partners-card {
    width: 160px;
    height: 56px;
    background: #fff;
    border-radius: var(--border-radius-card);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partners-logos img {
    padding: 10px 14px;
    object-fit: contain;
    justify-self: center;
    opacity: 1;
    filter: none;
}

/* 강의 문의 버튼 통합 스타일 */
.more-partners-card {
    justify-self: center;
    align-self: center;
    text-decoration: none;
    /* 인라인 스타일 통합 */
    background-color: var(--color-primary-light);
    border-radius: 12px;
    color: var(--color-text-sub);
    font-weight: 600;
}

.more-partners-card .text {
    /* 인라인 스타일 통합 */
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-primary);
    width: 100%;
    height: 100%;
    
    font-size: 0.9rem;
}

.more-partners-card .text span:first-child {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.5px;
}
.more-partner
s-card .material-icons {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease; /* 애니메이션 속도 설정 */
}

.more-partners-card:hover .material-icons {
    transform: translateX(4px); /* 마우스 오버 시 오른쪽 이동 */
}
.more-partners-card .material-icons {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.more-partners-card:hover {
    border-color: rgba(0, 0, 0, 0.10);
}

/* 강의 문의 Hover 시 밑줄 제거 */
.more-partners-card:hover .text {
    text-decoration: none;
}

/* =======================================================
   5. 컴포넌트 & 유틸리티 (Common)
======================================================= */
/* Buttons */
.btn {
    width: 130px;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 4px;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    display: block;
    transition: 0.4s;
}

.btn:hover {
    background-color: #333;
    color: #fff;
}

.btn.btn--reverse {
    background-color: #333;
    color: #fff;
}

.btn.btn--reverse:hover {
    background-color: transparent;
    color: #333;
}

.btn.btn--brown {
    color: #592b18;
    border-color: #592b18;
}

.btn.btn--brown:hover {
    color: #fff;
    background-color: #592b18;
}

.btn.btn--gold {
    color: #d9aa8a;
    border-color: #d9aa8a;
}

.btn.btn--gold:hover {
    color: #fff;
    background-color: #d9aa8a;
}

.btn.btn--white {
    color: #333;
    border-color: #fff;
}

.btn.btn--white:hover {
    color: #333;
    background-color: #fff;
}

/* Gradient Button & Read More */
.gradient-button {
    margin-left: 10px;
    position: relative;
    top: -3px;
    background: linear-gradient(90deg, #5bb4fc, #6a6aff);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 5px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

.gradient-button svg {
    width: 22px;
    height: 22px;
    fill: white;
    transition: transform 0.2s ease;
}

.gradient-button:hover svg,
.read-more:hover svg {
    transform: translateX(4px);
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #0056b3;
}

.read-more svg {
    width: 18px;
    height: 18px;
    stroke: #0056b3;
    stroke-width: 2;
    fill: none;
}

/* Breadcrumb */

/* 브레드크럼 사라짐 방지 및 줄바꿈 허용 */
.breadcrumb {
    display: flex !important;      /* Flexbox 구조 강제 */
    flex-wrap: wrap !important;    /* 공간 부족 시 줄바꿈 허용 */
    width: 100% !important;        /* 전체 너비 사용 */
    overflow: visible !important;  /* 잘림 방지 */
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    white-space: normal;           /* 긴 텍스트 줄바꿈 허용 */
}

.breadcrumb li + li::before {
    content: ">";
    padding: 0 8px;                /* 기호 좌우 여백 확보 */
}

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
}

ul.breadcrumb li {
    display: inline;
    font-size: 0.9rem;
}

ul.breadcrumb li + li:before {
    padding: 8px;
    content: ">";
}

ul.breadcrumb li a {
    color: #1a0dab;
    text-decoration: none;
}

ul.breadcrumb li a:hover {
    text-decoration: underline;
}

.inner {
    position: relative;
}

/* Notice & Promotion */
.notice .notice-line {
    position: relative;
}

.notice .notice-line .bg-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
}

.notice .notice-line .bg-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
}

.notice .notice-line .inner {
    height: 50px;
    display: flex;
}

.notice .notice-line .inner__left {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
}

.notice .notice-line .inner__left h2 {
    color: #212121;
    width: 80px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-left: 10px;
    margin-right: 20px;
}

.notice .notice-line .inner__left .swiper-container {
    height: 50px;
    flex-grow: 1;
}

.notice .notice-line .inner__left .swiper-slide {
    height: 50px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.notice .notice-line .inner__left .swiper-slide a {
    color: #212121;
}

.notice .notice-line .inner__left .notice-line__more {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice .notice-line .inner__left .notice-line__more .material-icons,
.notice .notice-line .inner__right .toggle-promotion .material-icons {
    font-size: 20px;
}

.notice .notice-line .inner__right {
    width: 40%;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.notice .notice-line .inner__right h2 {
    font-size: 20px;
    color: #212121;
    font-weight: 700;
}

.notice .notice-line .inner__right .toggle-promotion {
    width: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice .promotion {
    height: 250px;
    position: relative;
    transition: height 0.4s;
    overflow: hidden;
}

.notice .promotion.hide {
    height: 0;
}

.notice .promotion .swiper-container {
    width: calc(360px * 3 + 20px);
    height: 250px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: calc((360px * 3 + 20px) / -2);
}

.notice .promotion .swiper-slide {
    opacity: 0.5;
    transition: opacity 1s;
    position: relative;
}

.notice .promotion .swiper-slide-active {
    opacity: 1;
}

/* 인기 동영상 SECTION의 IMG 요소 */
.notice .promotion .swiper-slide img {
    width: 360px;
    border-radius: 12px;
}

.notice .promotion .swiper-slide .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.notice .promotion .swiper-pagination {
    bottom: 0;
    left: 0;
    right: 0;
}

.notice .promotion .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #bdc3c7;
    margin-right: 6px;
    outline: none;
    opacity: 1;
}

.notice .promotion .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--primary-color); /* 메인 파란색 사용 (#0078ff) */
}

.notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0;
}

.notice .promotion .swiper-prev,
.notice .promotion .swiper-next {
    width: 40px;
    height: 40px;
    border: 2px solid #616161;
    border-radius: 50%;
    position: absolute;
    top: 130px;
    z-index: 1;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.notice .promotion .swiper-prev {
    left: 70%;
    margin-left: -460px;
}

.notice .promotion .swiper-next {
    right: 70%;
    margin-right: -460px;
}

.notice .promotion .swiper-prev:hover,
.notice .promotion .swiper-next:hover {
    background-color: #333;
    color: #fff;
}

/* 인기 강의 (Full Width) */
.notice.popular-lec {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background: var(--color-dark-bg);
    padding: 20px 10px 30px;
    box-sizing: border-box;
}

.notice.popular-lec .wrapper2 {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 20px;
    box-sizing: border-box;
}

/* 1. ul 태그 자체에 클래스가 있는 경우 */
.normal_list {
    list-style: none; /* 기본 점 제거 */
    padding: 0;
    margin: 10px 0;   /* 위아래 여백 살짝 추가 */
}

/* 2. 그 안의 li 태그 */
.normal_list li {
    position: relative; /* 가상 요소 위치 기준점 */
    padding-left: 15px; /* 점이 들어갈 공간 확보 */
    margin-bottom: 5px;
    line-height: 1.6;   /* 줄 간격이 너무 좁지 않게 조정 */
}

/* 3. 가상 요소 (점) */
.normal_list li::before {
    content: "•";       
    position: absolute; 
    left: 0;            
    top: 0;             
    color: #217346;     /* 엑셀 초록색 */
    font-weight: bold;
}

/* 평범한 - 표시 불릿 포인트 */
.minus-bullet ul li:before {
    content: '-';
    position: absolute;
    margin-left: -10px;
}

/* Band & Category */
.band,
.band-notice {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto;
    grid-gap: 20px;
    margin-bottom: 20px;
}

.band {
    grid-template-columns: repeat(4, 1fr);
}

.band-notice {
    grid-template-columns: repeat(6, 1fr);
}

.category-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #212121;
    max-width: var(--max-width);
    font-weight: bold;
    padding: 20px 0 15px 0;
    width: 100%;
}

.category-title__left {
    font-size: 1.8rem;
    color: #212121;
    margin: 0;
    padding: 0;
}

.category-title__right {
    padding: 10px 15px 0 0;
    margin: 0;
    max-width: 200px;
    height: 20px;
}

.category-title__right a {
    color: #1a0dab;
}

/* Cards & Posts */
.card,
.card-post {
    background-color: #fff;
    text-decoration: none;
    color: #444;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 8px;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    top: 0;
    transition: 0.2s;
}

.card:hover,
.card-post:hover {
    top: -2px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.thumb {
    padding-bottom: 60%;
    background-size: cover;
    background-position: center center;
}

article {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 0.5rem;
    line-height: 1.2rem;
}

article > h1,
.dynamic-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    line-height: 1.5;
    max-height: 3rem;
    word-break: break-all;
}

.article-desc {
    padding-top: 0.5rem;
    padding: 5px;
    font-size: 13px;
}

.post-category {
    font-weight: bold;
    color: #9e9e9e;
}

.attach {
    color: red;
    font-weight: bold;
}

/* 멤버십 카드 */
.membership-swiper {
    display: none;
}

.membership-container {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: nowrap;
}

.membership-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--color-text-main);
}

.membership-card {
    background-color: #fff;
    border-radius: var(--border-radius-large);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-height: 320px;
    flex: 1 1 calc(33.33% - 23.34px);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.membership-grade {
    text-align: center;
    padding: 20px 0;
    font-size: 1.3rem;
    font-weight: bold;
}

.membership-card.free .membership-grade {
    background-color: #dde2e9;
    color: #222;
}

.membership-card.full .membership-grade {
    background-color: var(--color-primary);
    color: #fff;
}

.membership-card.stats .membership-grade {
    background-color: #e8f0fe;
    color: #222;
}

.price {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: var(--color-text-main);
    margin: 15px 0;
}

.stats-price {
    font-weight: 700;
}

.membership-card.full .price {
    color: var(--color-primary);
}

.feature-list {
    text-align: left;
    margin: 0 20px 30px;
}

.feature,
.feature-basic {
    margin: 10px 0;
    padding-left: 24px;
    text-indent: -24px;
    line-height: 1.5;
}

.feature-basic::before {
    content: "⬅";
    margin-right: 8px;
    color: red;
}

.feature::before {
    content: "✔";
    margin-right: 8px;
    color: #3cb371;
}

.feature.disabled {
    color: darkgray;
}

.feature.disabled::before {
    content: "✘";
    color: #e74c3c;
}

.unit {
    font-size: 1rem;
    font-weight: normal;
    color: var(--color-text-sub);
}

.membership-wrapper2 {
    margin-bottom: 20px;
}

.membership-card.stats .feature-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.membership-card.stats .feature-list .stats-unit {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #222;
    font-weight: normal;
}

.membership-card.stats .stats-price {
    margin: 0;
    padding: 0;
    color: #222;
    font-size: 2rem;
}

/* Youtube & Images */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 20px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.photo_content h1 {
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.youtube-lec .youtube_content {
    height: auto;
}

.youtube_content:hover {
    top: -2px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

.photo_content-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.photo_content-container .post-category {
    display: inline-block;
    border: 1px solid var(--color-white);
    border-radius: 5%;
    text-align: center;
    margin: 5px 10px 0 0;
    padding: 2px 10px;
}

.large-image {
    width: calc(50% - 10px);
    height: auto;
    position: relative;
}

.small-images-container {
    display: flex;
    flex-wrap: wrap;
    width: calc(50% - 10px);
    gap: 10px;
}

.small-image {
    width: calc(50% - 10px);
    height: auto;
    position: relative;
}

.photo_content img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.caption-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
    color: var(--color-white);
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.1));
}

.caption-container .sub-caption {
    font-weight: normal;
    color: white;
    font-size: 0.8rem;
}

.caption-container .caption {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.large-image .caption {
    font-size: 1.5rem;
    font-weight: bold;
    white-space: normal;
}

.large-image .sub-caption {
    font-size: 1rem;
}

.small-image .caption {
    font-size: 1rem;
    font-weight: bold;
    white-space: normal;
}

.small-images-container .caption {
    font-weight: bold;
}

/* Misc Components */
.scrollUp {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    background-color: crimson;
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 42px;
    width: 42px;
    border-radius: 10px;
    z-index: 9;
}

.scrollUp i {
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: center;
}

.scrollUp.active {
    bottom: 20px;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(-15px);
}

.xi-layout-snb,
.xi-volume-up,
.xi-paper-o .xi-bars {
    font-size: 12px;
}

.xi-layout-snb,
.xi-volume-up {
    color: red;
    padding-right: 10px;
}

.xi-paper-o {
    padding-right: 5px;
}

.xi-bars {
    padding-right: 3px;
}

/* Links & Footer */
.links {
    background: #f2f2f2;
    color: #616161;
    font-size: 12px;
    padding: 30px 0;
}

.links-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    align-items: flex-start;
    justify-content: center;
}

.links li {
    line-height: 2.2;
    text-decoration: none;
}

.links li > a {
    display: block;
}

.links-inner h3 {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px;
}

.bullet_main,
.category-title__left {
    margin-left: 15px;
}

.sns {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fa {
    font-size: 20px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    opacity: 0.7;
}

.fa:hover {
    opacity: 1;
}

.fa-naver:before {
    font-family: Arial;
    font-weight: 900;
    font-style: normal;
    color: #212121;
    content: "N";
}

footer {
    background: #f2f2f2;
    color: #616161;
    font-size: 12px;
    padding-bottom: 1.8rem;
}

footer .inner {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

footer .inner .menu {
    display: flex;
    align-items: center;
}

footer .inner .menu li {
    position: relative;
    padding: 0 20px;
}

footer .inner .menu li:first-child {
    font-weight: 700;
}

footer .inner .copyright {
    margin-right: 10px;
    font-size: 0.8rem;
}

#to-top {
    width: 42px;
    height: 42px;
    background-color: #333;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9;
}

.tag {
    color: crimson;
    background-color: lightgrey;
    padding: 2px;
    font-size: 0.9rem;
}

.member-tag {
    display: inline-block;
    vertical-align: text-bottom; /* 텍스트 아랫선에 맞춤 */
    line-height: 1;              /* 태그 자체의 줄 간격을 최소화 */
    margin-right: 5px;
    padding: 3px 5px;            /* 안쪽 여백을 조금 더 줘서 가독성 확보 */
    border-radius: 4px;
    background-color: crimson;   /* 기존 색상 유지 */
    color: white;
    font-size: 0.8rem;          /* 0.8rem보다 살짝 작아야 밸런스가 좋음 */
    font-weight: normal;
    text-align: center;
}

.hashtag {
    margin-top: 20px;
}

.mid-dot::after {
    content: "\00B7";
    margin: 0 5px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#myInput {
    display: block;
    width: 95%;
    margin: 0 auto 20px auto;
    border-radius: 24px;
    border: 1px solid #dfe1e5;
    padding: 12px 20px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

#myInput:hover,
#myInput:focus {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: transparent;
    outline: none;
}

.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 0.9rem;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
}

.chip img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

/* 1. 부모 요소(li) 설정 */
.minus-bullet ul li {
    position: relative; /* 가상 요소(:before)의 위치 기준점 */
    margin-left: 20px;
    padding-left: 15px;
    list-style: none;   /* 기본 점(bullet) 제거 */
}

/* 2. 가상 요소(기호) 설정 */
.minus-bullet ul li:before {
    content: "-";
    position: absolute; /* 절대 위치 지정 */
    left: 0;            /* li의 가장 왼쪽(0px) 지점에 고정 */
    top: 0;             /* 필요 시 높이 미세 조정 */
}

.page-desc {
    padding-bottom: 10px;
}

.text_box {
    padding: 10px 20px;
    border: 1px solid lightgrey;
    background-color: #f3f3f3;
}

.text_box p {
    font-size: 0.9rem;
}

.cont_img img {
    width: 90%;
    max-width: 800px;
}

.notice_content {
    border-radius: 1%;
}

.notice_content:hover {
    border-radius: 1%;
}

.post,
.notice,
.youtube-lec {
    margin-top: 15px;
}

.youtube-lec {
    margin-bottom: 40px;
}

.xi-angle-right-min {
    font-size: 1rem;
    font-weight: bold;
}

.category-title__right a:hover p {
    position: relative;
}

.category-title__right a:hover i {
    position: relative;
    left: 10px;
    transition: left 0.3s ease;
}

.search {
    position: relative;
    top: 5px;
    right: 0;
    width: 400px;
}

.inner__left {
    margin: 0;
    padding: 0;
}

input.gsc-input,
input.gsc-input:focus {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

@media (prefers-color-scheme: dark) {
    input.gsc-input {
        background-color: transparent !important;
        color: #ccc !important;
    }
}

.it-info-btn {
    margin-left: 20px;
    background-color: inherit;
    border: 1px solid #ddd;
    font-size: 1.2rem;
    color: silver;
}

.it-info-btn:hover {
    cursor: pointer;
    border: 1px solid gray;
    color: gray;
}

.membership-btn {
    width: 100px;
    background-color: var(--color-crimson);
    border: none;
    color: var(--color-white);
    margin: auto 0;
    margin-left: 20px;
    font-size: 0.8rem;
    border-radius: 15px;
}

.membership-btn:hover,
.subscribe-link:hover {
    cursor: pointer;
    background-color: red;
}

.membership-btn p {
    font-size: 0.8rem;
    color: white;
    text-align: center;
    padding: 3px;
}

.catetory-title-and-membership {
    max-width: 600px;
    display: flex;
}

.catetory-title-and-membership .it-info {
    font-size: 1.1rem;
    margin-left: 20px;
    color: silver;
    border-radius: 5px;
    padding: 0 10px;
    opacity: 0.6;
}

.it-info:hover {
    opacity: 1;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

.unique-visitors-for-mobile {
    display: none;
}

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px auto 10px;
    max-width: 500px;
    height: 2px;
    background: linear-gradient(to right, transparent, #ddd 30%, #ddd 70%, transparent);
}

.fixed-sidebar {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 999;
}

.fixed-sidebar a {
    width: 65px;
    height: 65px;
    background-color: #033042;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.fixed-sidebar a i {
    font-size: 20px;
    padding: 0;
    margin-bottom: 4px;
}

.fixed-sidebar a:hover {
    background-color: #076d9c;
}

#scrollTopBtn {
    display: none;
}

#scrollTopBtn.show {
    display: flex;
}

/* "최근 포스트" 관련 서식 지정 시작 */
.enlarge2, .enlarge2 img {
    border-radius: 0 !important;
}
.enlarge2, .enlarge2 img {
    border-radius: 10px !important;
}

/* 1. 테두리선 제거 및 여백 초기화 */
.photo_content.enlarge2 {
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 3%;
    overflow: hidden;
    background: none;
}

/* 2. 이미지를 부모 박스에 꽉 채우기 */
.enlarge2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

/* 3. 링크(a) 태그가 있는 경우 영역 확보 */
.enlarge2 a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.photo_content.enlarge2 {
    transition: all 0.3s ease;
    cursor: pointer;
}

.photo_content.enlarge2:hover {
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* "최근 포스트" 관련 서식 지정 끝 */

/* =======================================================
   6. 반응형 미디어 쿼리 (통합)
======================================================= */

/* PC/Tablet 공통 (~992px) */
@media screen and (max-width: 992px) {
    nav,
    .inner__left h2,
    .inner__left .swiper-container,
    .notice-line__more .material-icons {
        display: none;
    }

    nav .main-logo {
        display: block;
    }

    .notice .notice-line .inner__left {
        background-color: #fff;
    }

    .menu-button {
        display: block;
        position: absolute;
        right: 10px;
    }

    .menu-button:hover {
        opacity: 0.5;
    }

    .menu-hidden {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        background-color: #f2f2f2;
        width: 50%;
        height: 100%;
        border-right: #ccc 1px solid;
        opacity: 0.9;
        padding: 30px;
        transform: translateX(-500px);
        transition: transform 0.5s ease-in-out;
    }

    #header {
        display: block;
        text-align: center;
    }

    .menu-hidden li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
    }

    .menu-hidden li:last-child {
        border-bottom: 0;
    }

    .menu-hidden.show {
        transform: translateX(-20px);
    }

    .category-title,
    .notice .inner__right h2 {
        padding-left: 10px;
    }

    .band {
        grid-template-columns: repeat(2, 1fr);
        width: 95%;
    }

    .band-notice {
        grid-template-columns: repeat(3, 1fr);
        width: 95%;
    }

    .links .links-inner {
        grid-template-columns: repeat(3, 1fr);
    }

    .category-title__right,
    .xi-angle-right-min {
        display: none;
    }

    footer .inner,
    footer .inner .menu {
        flex: wrap;
    }

    /* TOP_MENU 강제 호출 스타일 */
    .iexceller-slogan {
        margin-top: 40px;
    }

    .iexceller-nav {
        display: block !important;
        height: 64px !important;
        background-color: #0078ff !important;
        z-index: 999999 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .iexceller-nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;
        width: 100% !important;
        padding: 0 20px !important;
    }

    .iexceller-logo-area a {
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    .iexceller-logo-text {
        display: block !important;
        color: #ffffff !important;
        font-size: 20px !important;
        font-weight: bold !important;
        /* font-family: "Malgun Gothic", sans-serif !important; */
    }

    .iexceller-top-menu {
        display: none !important;
    }

    div.menu-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed !important;
        top: 12px !important;
        right: 20px !important;
        width: 40px !important;
        height: 40px !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: #fff !important;
        font-size: 24px !important;
        cursor: pointer !important;
        z-index: 2000000 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    div.menu-button i {
        display: block !important;
        visibility: visible !important;
        color: #fff !important;
    }

    body {
        padding-top: 64px !important;
    }

    .space-wider {
        padding-top: 20px;
    }
}

/* 중간 화면 (Tablet: ~768px) - 상세 조정 */
@media (max-width: 768px) {
    .photo_content-container {
        gap: 5px;
    }

    .it-info-btn {
        display: none;
    }

    .search {
        max-width: 250px;
    }

    .large-image {
        width: 100%;
    }

    .small-images-container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .small-image {
        width: 100%;
        height: auto;
    }

    .partners-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 16px;
        justify-items: stretch;
        align-items: center;
    }

    .partners-logos img,
    .more-partners-card {
        width: 100%;
        height: 56px;
        max-width: 220px;
        margin: 0 auto;
    }

    .partners-logos img {
        height: 56px;
        padding: 8px 12px;
    }
}

/* 좁은 화면 (Mobile: ~600px) */
@media (max-width: 600px) {
    footer .copyright_left,
    .n_tag {
        display: none;
    }

    #recent-post {
        font-size: 1.2rem;
    }

    header {
        display: none;
    }

    .links .links-inner {
        grid-template-columns: 1fr 1fr;
    }

    /* 모바일 설정 */
    .category-title.excel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .category-title__left {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .unique-visitors-for-mobile {
        display: inline-flex;
        align-items: center;
        font-size: 0.85rem;
        color: var(--color-text-main);
        margin-left: auto;
    }

    .unique-visitors-for-mobile .user-icon {
        margin-left: 6px;
        color: var(--color-primary);
    }

    .unique-visitors-for-mobile .unique-count {
        font-weight: bold;
        margin: 0 2px;
    }

    .inner__left {
        display: none;
    }

    .membership-container {
        display: none;
    }

    .membership-swiper {
        display: block;
    }

    .membership-card {
        width: 90%;
        margin-bottom: 20px;
    }

    .membership-card.stats .membership-grade {
        display: none;
    }

    .membership-card.stats {
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .stats-wrapper {
        flex-wrap: wrap;
        border-radius: 15px;
        padding: 15px;
        width: 90%;
    }

    .stat-divider {
        display: none;
    }

    .stat-item {
        flex: 1 1 100%;
        margin-bottom: 15px;
    }

    .stat-item:last-of-type {
        border-bottom: none;
    }

    .stat-label {
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    .stat-value {
        font-size: 1.1rem;
    }

    .work-period {
        font-size: 1.2rem;
    }

    .partners-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 14px;
        justify-items: stretch;
        align-items: center;
    }

    .partners-logos img,
    .more-partners-card {
        width: 100%;
        height: 64px;
        max-width: 260px;
        margin: 0 auto;
    }

    .partners-logos img {
        height: 64px;
        padding: 10px 14px;
    }
}