/**
 * Joyn LMS 강의 전시 페이지 — fix 디자인
 * fix/lms-course-list.html 기준
 */

/* ── 루트 변수 (아카이브 전용) ── */
.joyn-archive-fix {
    --joyn-p: #4541FF;
    --joyn-pb: #EEECFF;
    --joyn-bg: #F5F6F8;
    --joyn-card: #FFFFFF;
    --joyn-t1: #111827;
    --joyn-t2: #4B5563;
    --joyn-t3: #9CA3AF;
    --joyn-border: #E5E7EB;
    --joyn-border2: #F3F4F6;
    --joyn-success: #16A34A;
    --joyn-danger: #DC2626;
    --joyn-r1: 8px;
    --joyn-r2: 14px;
    --joyn-r3: 99px;
    --joyn-sh: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* 02-joyn-design-guide: 폰트 스택 (Variable 우선 — 데모와 동일한 두께 보장) */
.joyn-archive-fix {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
    background: var(--joyn-bg);
    color: var(--joyn-t1);
    padding-bottom: 16px;
    margin-top: -1px;
}
/* 테마 래퍼 여백 제거: 아카이브 전용 */
.post-type-archive-joyn_course .site-content,
.post-type-archive-joyn_course .content-area,
.post-type-archive-joyn_course .entry-content,
.post-type-archive-joyn_course #content,
.post-type-archive-joyn_course #primary,
.post-type-archive-joyn_course .ast-container,
.post-type-archive-joyn_course main,
.post-type-archive-joyn_course .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.post-type-archive-joyn_course .ast-separate-container .ast-article-single,
.post-type-archive-joyn_course .ast-separate-container .ast-article-post {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.post-type-archive-joyn_course .inside-article,
.post-type-archive-joyn_course .container,
.post-type-archive-joyn_course .page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ── 상단 헤더: Joyn LMS 브랜드 헤드 ── */
#joyn-archive-hero.joyn-archive-hero {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--joyn-card);
    box-sizing: border-box;
}
.joyn-archive-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 16px;
    flex-wrap: nowrap;
}
.joyn-archive-hero__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0%;
    min-width: 0;
    margin-top: 6px;
}
.joyn-archive-hero__logo {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--joyn-p);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.joyn-archive-hero__logo::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 50%);
    pointer-events: none;
}
.joyn-archive-hero__logo i {
    font-size: 20px;
    position: relative;
    z-index: 1;
}
.joyn-archive-hero__brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.joyn-archive-hero__title {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--joyn-t1);
}
.joyn-archive-hero__title a {
    display: block;
    color: var(--joyn-t1);
    text-decoration: none;
}
.joyn-archive-hero__title a:hover,
.joyn-archive-hero__title a:focus {
    color: var(--joyn-p);
}
.joyn-archive-hero__title-accent {
    color: var(--joyn-p);
}
.joyn-archive-hero__tagline {
    display: none; /* 숨김 */
    font-size: 11px;
    color: var(--joyn-t3);
    font-weight: 500;
    margin-top: 0;
    letter-spacing: 0.02em;
}
.joyn-archive-hero__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.joyn-archive-hero__icon {
    width: auto;
    height: auto;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    text-decoration: none;
    border: none;
    border-radius: 0;
    transition: color .15s;
    position: relative;
    font-size: 18px;
    background: none;
    padding: 4px;
}
.joyn-archive-hero__icon:hover,
.joyn-archive-hero__icon:focus {
    color: var(--joyn-p);
    background: none;
}
.joyn-archive-hero__icon i { font-size: 20px; color: #111; }
.joyn-archive-hero__icon:hover i,
.joyn-archive-hero__icon:focus i { color: var(--joyn-p); }
.joyn-archive-hero .joyn-notif-wrap {
    position: relative;
}
.joyn-archive-hero .joyn-notif-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    background: var(--joyn-danger);
    border-radius: 50%;
    border: 2px solid var(--joyn-card);
}
.joyn-archive-hero__myclass-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    background: none;
    border: none;
    border-radius: 0;
    text-decoration: none;
    transition: color .15s;
    cursor: pointer;
}
.joyn-archive-hero__myclass-btn:hover {
    color: var(--joyn-p);
}
.joyn-archive-hero__myclass-btn i {
    font-size: 20px;
    color: #111;
}
.joyn-archive-hero__myclass-btn:hover i {
    color: var(--joyn-p);
}
.joyn-archive-hero__accent-line {
    height: 2px;
    background: linear-gradient(90deg, var(--joyn-p), #6C63FF, #E8A317, var(--joyn-p));
    background-size: 200% 100%;
    animation: joyn-accent-shift 8s ease infinite;
}
@keyframes joyn-accent-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@media (max-width: 768px) {
    .joyn-archive-hero__inner {
        padding: 10px 16px;
        min-height: 52px;
    }
    .joyn-archive-hero__logo { width: 36px; height: 36px; border-radius: 8px; }
    .joyn-archive-hero__logo i { font-size: 17px; }
    .joyn-archive-hero__title { font-size: 24px; }
    .joyn-archive-hero__tagline { font-size: 10px; }
    .joyn-archive-hero__icon i { font-size: 18px; }
    .joyn-archive-hero__myclass-btn { padding: 6px 0; font-size: 12px; }
    .joyn-archive-hero__myclass-btn i { font-size: 18px; }
    .joyn-archive-hero__btn-label { display: none; }
    .joyn-archive-hero .joyn-notif-dot { top: 4px; right: 4px; width: 6px; height: 6px; }
}
@media (max-width: 480px) {
    .joyn-archive-hero__inner {
        padding: 8px 12px;
        min-height: 48px;
        gap: 8px;
    }
    .joyn-archive-hero__logo { width: 32px; height: 32px; }
    .joyn-archive-hero__logo i { font-size: 15px; }
    .joyn-archive-hero__title { font-size: 20px; }
    .joyn-archive-hero__tagline { display: none; }
    .joyn-archive-hero__icon i { font-size: 18px; }
    .joyn-archive-hero__myclass-btn { padding: 6px 0; font-size: 11px; }
    .joyn-archive-hero__myclass-btn i { font-size: 18px; }
    .joyn-archive-hero .joyn-notif-dot { top: 4px; right: 4px; width: 5px; height: 5px; }
}

/* ── 검색 ── */
.joyn-search-section { padding: 22px 16px 22px; }
.joyn-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    background: var(--joyn-border2);
    border: 1.5px solid var(--joyn-border);
    border-radius: var(--joyn-r2);
    padding: 0 14px;
    transition: border-color .18s, box-shadow .18s;
}
.joyn-archive-fix .joyn-search-wrap i { font-size: 20px; color: var(--joyn-t3); flex-shrink: 0; }
.joyn-search-wrap:focus-within { border-color: var(--joyn-p); box-shadow: 0 0 0 3px rgba(69,65,255,.08); }
.joyn-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--joyn-t1);
    background: transparent;
}
.joyn-search-input::placeholder { color: var(--joyn-t3); }
.joyn-search-clear { display: none; color: var(--joyn-t3); cursor: pointer; background: none; border: none; padding: 0; }
.joyn-search-clear.show { display: flex; align-items: center; justify-content: center; }
.joyn-search-clear i { font-size: 20px; }

/* ── 카테고리 칩 ── */
.joyn-category-bar {
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
    gap: 6px;
    padding: 16px 16px 14px;
}
.joyn-category-bar::-webkit-scrollbar { display: none; }
@media (max-width: 480px) {
    .joyn-search-section { padding: 18px 16px 18px; }
    .joyn-search-wrap { height: 40px; padding: 0 12px; gap: 6px; }
    .joyn-archive-fix .joyn-search-wrap i[class^="ri-"] { font-size: 18px; }
    .joyn-search-input { font-size: 13px; }
    .joyn-category-bar { padding: 14px 16px 12px; }
    .joyn-cat-chip { height: 30px; padding: 0 12px; font-size: 12px; }
    .joyn-cat-chip i { font-size: 13px; }
}
.joyn-cat-chip {
    flex-shrink: 0;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--joyn-r3);
    border: 1.5px solid var(--joyn-border);
    background: var(--joyn-card);
    font-size: 13px;
    font-weight: 500;
    color: var(--joyn-t2);
    text-decoration: none;
    white-space: nowrap;
    transition: all .14s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.joyn-cat-chip i { font-size: 14px; }
.joyn-cat-chip.active {
    background: var(--joyn-p);
    border-color: var(--joyn-p);
    color: #fff;
    font-weight: 600;
}
.joyn-cat-chip:hover { color: var(--joyn-t1); }

/* ── 이어 학습하기 ── */
.joyn-enrolled-wrap { padding: 24px 0 20px; }
.joyn-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 14px;
}
.joyn-section-hd-title { font-size: 15px; font-weight: 800; }
.joyn-section-hd-more {
    font-size: 12px;
    color: var(--joyn-t3);
    display: inline-flex;
    align-items: center;
    gap: 1px;
    text-decoration: none;
}
.joyn-section-hd-more:hover { color: var(--joyn-t2); }
.joyn-section-hd-more i[class^="ri-"] { font-size: 15px; }
.joyn-enrolled-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
    gap: 10px;
    padding: 0 16px 2px;
}
.joyn-enrolled-scroll::-webkit-scrollbar { display: none; }
.joyn-enrolled-card {
    flex-shrink: 0;
    width: 160px;
    background: var(--joyn-card);
    border: 1px solid var(--joyn-border);
    border-radius: var(--joyn-r2);
    padding: 11px;
    text-decoration: none;
    color: inherit;
    transition: transform .14s;
    display: block;
}
.joyn-enrolled-card:active { transform: scale(.97); }
.joyn-en-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--joyn-r1);
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.joyn-en-thumb i { font-size: 22px; color: var(--joyn-t3); }
.joyn-en-thumb .joyn-en-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.joyn-en-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 7px;
    color: var(--joyn-t1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.joyn-en-prog-row { display: flex; align-items: center; gap: 5px; }
.joyn-en-bar { flex: 1; height: 3px; background: var(--joyn-border2); border-radius: 99px; overflow: hidden; }
.joyn-en-fill { height: 100%; background: var(--joyn-p); border-radius: 99px; transition: width .2s; }
.joyn-en-pct { font-size: 10px; font-weight: 700; color: var(--joyn-t3); }

/* 데스크톱: 통계·둘러보기와 동일 1180px 중앙 + 카드 그리드 (모바일 가로 스크롤 유지) */
@media (min-width: 768px) {
    .joyn-archive-fix .joyn-enrolled-wrap {
        width: 100%;
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    .joyn-archive-fix .joyn-enrolled-wrap .joyn-section-hd,
    .joyn-archive-fix .joyn-enrolled-wrap .joyn-enrolled-scroll {
        padding-left: 0;
        padding-right: 0;
    }
    .joyn-archive-fix .joyn-enrolled-wrap .joyn-section-hd {
        padding-bottom: clamp(14px, 2vw, 20px);
    }
    .joyn-archive-fix .joyn-enrolled-wrap .joyn-section-hd-title {
        font-size: clamp(19px, 2.6vw, 22px);
        font-weight: 800;
        letter-spacing: -.03em;
    }
}

@media (min-width: 920px) {
    .joyn-archive-fix .joyn-enrolled-scroll {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
        overflow-x: visible;
    }
    .joyn-archive-fix .joyn-enrolled-card {
        width: auto;
        flex-shrink: 1;
    }
}

/* 썸네일 색상 변형 */
.joyn-archive-fix .ct-blue   { background: #EFF3FF; }
.joyn-archive-fix .ct-blue   .joyn-thumb-icon, .joyn-archive-fix .ct-blue i { color: #6B86C4; }
.joyn-archive-fix .ct-green  { background: #F0FBF4; }
.joyn-archive-fix .ct-green  .joyn-thumb-icon, .joyn-archive-fix .ct-green i { color: #4CAF7D; }
.joyn-archive-fix .ct-amber  { background: #FFFBF0; }
.joyn-archive-fix .ct-amber  .joyn-thumb-icon, .joyn-archive-fix .ct-amber i { color: #C8963A; }
.joyn-archive-fix .ct-rose   { background: #FFF0F3; }
.joyn-archive-fix .ct-rose   .joyn-thumb-icon, .joyn-archive-fix .ct-rose i { color: #C4617A; }
.joyn-archive-fix .ct-purple { background: #F4F0FF; }
.joyn-archive-fix .ct-purple .joyn-thumb-icon, .joyn-archive-fix .ct-purple i { color: #8B68D4; }
.joyn-archive-fix .ct-teal   { background: #F0FAFB; }
.joyn-archive-fix .ct-teal   .joyn-thumb-icon, .joyn-archive-fix .ct-teal i { color: #4AADBA; }

/* ── 이번 주 추천 — 전폭 흰 밴드, 콘텐츠 1200px, 위·아래 회색 여백(margin) ── */
.joyn-featured-section {
    --joyn-featured-inner: 1200px;
    width: 100%;
    max-width: none;
    margin: clamp(28px, 4vw, 44px) 0;
    padding: clamp(28px, 4vw, 44px) 0 clamp(24px, 3vw, 36px);
    background: var(--joyn-card, #fff);
    box-sizing: border-box;
}
.joyn-featured-section .joyn-section-head {
    max-width: var(--joyn-featured-inner);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--joyn-border);
    box-sizing: border-box;
}
.joyn-featured-section .joyn-featured-grid {
    max-width: var(--joyn-featured-inner);
    margin-left: auto;
    margin-right: auto;
    padding: 4px 16px 8px;
    box-sizing: border-box;
}
.joyn-featured-section__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 4px;
    font-size: 15px;
    font-weight: 800;
    color: var(--joyn-t1);
    line-height: 1.3;
}
.joyn-featured-section__title i[class^="ri-"] {
    font-size: 18px;
    color: var(--joyn-p);
}
.joyn-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    box-sizing: border-box;
}
.joyn-featured-grid .joyn-course-card {
    box-shadow: var(--joyn-sh);
}
.joyn-featured-grid .joyn-card-title {
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.joyn-featured-grid .joyn-card-meta {
    font-size: 10px;
}
.joyn-featured-grid .joyn-card-body {
    padding: 8px 8px 10px;
}
.joyn-featured-grid .joyn-price-main,
.joyn-featured-grid .joyn-price-free {
    font-size: 12px;
}
.joyn-featured-grid .joyn-price-orig,
.joyn-featured-grid .joyn-price-disc {
    font-size: 10px;
}
.joyn-featured-grid .joyn-fav-btn {
    width: 26px;
    height: 26px;
    font-size: 14px;
}
.joyn-featured-grid .joyn-badge {
    font-size: 8px;
    padding: 1px 4px;
}
.joyn-price-free { color: var(--joyn-success); }

/* ── 툴바 ── */
.joyn-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 16px;
}
.joyn-result-info { font-size: 13px; color: var(--joyn-t2); }
.joyn-result-info b { color: var(--joyn-t1); font-weight: 700; }
.joyn-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.joyn-toolbar-dropdown-wrap { position: relative; }
.joyn-toolbar-dropdown-btn,
.joyn-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 12px;
    border: 1.5px solid var(--joyn-p);
    border-radius: var(--joyn-r1);
    background: var(--joyn-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--joyn-t1);
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.joyn-toolbar-dropdown-btn:hover,
.joyn-sort-btn:hover {
    background: var(--joyn-pb);
    color: var(--joyn-p);
}
.joyn-toolbar-dropdown-btn[aria-expanded="true"],
.joyn-toolbar-dropdown-btn.is-open,
.joyn-sort-btn[aria-expanded="true"] {
    background: var(--joyn-pb);
    color: var(--joyn-p);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.joyn-toolbar-dropdown-btn i[class^="ri-"]:not(.joyn-dropdown-caret),
.joyn-sort-btn i[class^="ri-"]:not(.joyn-dropdown-caret) { font-size: 16px; color: var(--joyn-p); }
.joyn-dropdown-caret { font-size: 16px; color: var(--joyn-t3); transition: transform .18s; }
.joyn-toolbar-dropdown-btn[aria-expanded="true"] .joyn-dropdown-caret,
.joyn-sort-btn[aria-expanded="true"] .joyn-dropdown-caret { transform: rotate(180deg); }
.joyn-toolbar-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    z-index: 200;
    background: var(--joyn-card);
    border: 1px solid var(--joyn-border);
    border-radius: var(--joyn-r2);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
    padding: 6px 0;
    animation: joyn-dropdown-in .16s ease-out;
}
.joyn-toolbar-dropdown[hidden] { display: none !important; }
@keyframes joyn-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.joyn-toolbar-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    text-decoration: none;
    color: inherit;
    transition: background .1s;
}
.joyn-toolbar-dropdown-option:hover { background: var(--joyn-border2); }
.joyn-toolbar-dropdown-option i:first-child { font-size: 18px; color: var(--joyn-t3); flex-shrink: 0; }
.joyn-toolbar-dropdown-option-label { flex: 1; font-size: 14px; }
.joyn-toolbar-dropdown-option .check-icon { font-size: 18px; color: var(--joyn-p); display: none; margin-left: auto; }
.joyn-toolbar-dropdown-option.selected .check-icon { display: block; }
.joyn-toolbar-dropdown-option.selected .joyn-toolbar-dropdown-option-label { font-weight: 600; color: var(--joyn-t1); }
.joyn-view-toggle {
    display: flex;
    background: var(--joyn-card);
    border-radius: var(--joyn-r1);
    overflow: hidden;
    border: 1.5px solid var(--joyn-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.joyn-view-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111827;
    transition: all .14s;
    border: none;
    background: transparent;
}
.joyn-view-btn i[class^="ri-"] {
    font-size: 18px;
    color: #111827;
    line-height: 1;
}
.joyn-view-btn:hover {
    color: #111827;
    background: var(--joyn-border2);
}
.joyn-view-btn:hover i[class^="ri-"] { color: #111827; }
.joyn-view-btn.active {
    background: var(--joyn-p);
    color: #fff;
}
.joyn-view-btn.active i[class^="ri-"] { color: #fff; }

/* ── 필터 칩 ── */
.joyn-filter-bar {
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
    gap: 6px;
    padding: 0 16px 18px;
}
.joyn-filter-bar::-webkit-scrollbar { display: none; }
.joyn-filter-chip {
    flex-shrink: 0;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--joyn-r3);
    border: 1.5px solid var(--joyn-border);
    background: var(--joyn-card);
    font-size: 12px;
    font-weight: 500;
    color: var(--joyn-t2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: all .14s;
}
.joyn-filter-chip.active {
    background: var(--joyn-pb);
    border-color: var(--joyn-p);
    color: var(--joyn-p);
    font-weight: 600;
}
.joyn-filter-chip:hover { color: var(--joyn-t1); }

/* ── 강의 그리드 ──
   모바일: 2열(각 50%, minmax로 균등) → 썸네일 면적 최대화.
   태블릿·데스크톱에서만 3·4열 전환 (기존 430px 3열은 썸네일 과소화되어 조정) */
.joyn-course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 24px;
    box-sizing: border-box;
}

/* 그리드 카드 */
.joyn-course-card {
    background: var(--joyn-card);
    border: 1px solid var(--joyn-border);
    border-radius: var(--joyn-r2);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
    box-shadow: var(--joyn-sh);
    position: relative;
    text-decoration: none;
    color: inherit;
    display: block;
}
.joyn-course-card:active { transform: scale(.975); }
.joyn-course-card-wrap {
    position: relative;
    display: block;
}
.joyn-course-card-wrap > .joyn-fav-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
}
.joyn-card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--joyn-border2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.joyn-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.joyn-thumb-icon { font-size: 28px; color: var(--joyn-t3); }
.joyn-thumb-icon.ri { font-size: 30px; }
.joyn-card-badges {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 3px;
}
.joyn-badge { font-size: 9px; font-weight: 800; letter-spacing: .4px; padding: 2px 5px; border-radius: 4px; }
.joyn-badge-best { background: #15803D; color: #fff; }
.joyn-badge-new { background: var(--joyn-p); color: #fff; }
.joyn-badge-free { background: #D97706; color: #fff; }
.joyn-badge-oneday { background: #4541FF; color: #fff; }
.joyn-course-badge--oneday { background: #4541FF; color: #fff; }
.joyn-course-subject { font-size: 12px; color: var(--joyn-muted, #7a8893); margin-top: 4px; font-weight: 600; }
.joyn-fav-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    padding: 0;
}
.joyn-fav-btn i { font-size: 14px; color: var(--joyn-t3); transition: color .15s; }
.joyn-fav-btn.on i { color: var(--joyn-danger); }
.joyn-free-ribbon { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--joyn-success); }
.joyn-card-body { padding: 10px 10px 12px; }
.joyn-card-meta { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--joyn-t3); margin-bottom: 4px; }
.joyn-dot-sep { width: 2px; height: 2px; background: var(--joyn-t3); border-radius: 50%; flex-shrink: 0; }
.joyn-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--joyn-t1);
    line-height: 1.45;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.joyn-card-rating { display: flex; align-items: center; gap: 3px; margin-bottom: 7px; }
.joyn-star { color: #F59E0B; font-size: 11px; line-height: 1; }
.joyn-rating-num { font-size: 11px; font-weight: 700; color: var(--joyn-t2); }
.joyn-rating-cnt { font-size: 10px; color: var(--joyn-t3); }
.joyn-card-price-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.joyn-price-main { font-size: 14px; font-weight: 900; color: var(--joyn-t1); }
.joyn-price-orig { font-size: 10.5px; color: var(--joyn-t3); text-decoration: line-through; }
.joyn-price-free { font-size: 13px; font-weight: 800; color: var(--joyn-success); }
.joyn-price-disc { font-size: 10px; font-weight: 700; color: var(--joyn-danger); margin-left: auto; }

/* ── 리스트 뷰 ── */
.joyn-course-list { flex-direction: column; gap: 0; padding: 0 16px; }
.joyn-list-card {
    background: var(--joyn-card);
    border: 1px solid var(--joyn-border);
    border-radius: var(--joyn-r2);
    overflow: hidden;
    transition: transform .15s;
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    box-shadow: var(--joyn-sh);
    text-decoration: none;
    color: inherit;
}
.joyn-list-card:active { transform: scale(.99); }
.joyn-list-thumb {
    width: 110px;
    flex-shrink: 0;
    background: var(--joyn-border2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.joyn-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.joyn-list-thumb .joyn-thumb-icon { font-size: 28px; color: var(--joyn-t3); }
.joyn-list-badges { position: absolute; top: 6px; left: 6px; display: flex; gap: 3px; flex-direction: column; }
.joyn-list-body { flex: 1; padding: 12px; min-width: 0; }
.joyn-list-meta { font-size: 10px; color: var(--joyn-t3); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.joyn-list-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.joyn-list-rating { display: flex; align-items: center; gap: 3px; margin-bottom: 8px; }
.joyn-list-price-row { display: flex; align-items: center; gap: 6px; }
.joyn-list-fav {
    flex-shrink: 0;
    width: 28px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 12px;
    padding-right: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
}
.joyn-list-fav i { font-size: 18px; color: var(--joyn-t3); }
.joyn-list-fav.on i { color: var(--joyn-danger); }

/* ── 빈 상태 ── */
.joyn-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 32px;
    text-align: center;
}
.joyn-empty-state i { font-size: 52px; color: var(--joyn-border); margin-bottom: 14px; }
.joyn-empty-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.joyn-empty-sub { font-size: 13px; color: var(--joyn-t3); margin-bottom: 12px; }
.joyn-btn-reset {
    display: inline-block;
    padding: 10px 20px;
    background: var(--joyn-p);
    color: #fff;
    border-radius: var(--joyn-r1);
    font-weight: 600;
    text-decoration: none;
}
.joyn-btn-reset:hover { opacity: .9; color: #fff; }

/* ── 페이지네이션 ── */
.joyn-pagination-wrap {
    padding: 16px;
    text-align: center;
}
.joyn-pagination-wrap .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.joyn-pagination-wrap .page-numbers a,
.joyn-pagination-wrap .page-numbers span {
    padding: 8px 12px;
    border: 1px solid var(--joyn-border);
    border-radius: var(--joyn-r1);
    text-decoration: none;
    color: var(--joyn-t2);
}
.joyn-pagination-wrap .page-numbers .current { background: var(--joyn-p); color: #fff; border-color: var(--joyn-p); }

/* ── 반응형 ── */
@media (min-width: 768px) {
    .joyn-course-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        padding: 0 16px 24px;
    }
    .joyn-list-thumb { width: 140px; }
}
@media (min-width: 1024px) {
    .joyn-course-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
}

/* =====================================================================
   REFORM — 데모(joyn-lms-demo) 디자인 반영 (v1.4.0)
   기존 규칙 뒤에 위치하여 동일 특이도 규칙을 덮어씁니다.
   ===================================================================== */

/* ── 썸네일: 선명한 그라데이션 + 데코 링 + 흰색 아이콘 ── */
.joyn-archive-fix .joyn-card-thumb,
.joyn-archive-fix .joyn-list-thumb { position: relative; isolation: isolate; }
.joyn-archive-fix .ct-blue   { background: linear-gradient(135deg,#4541FF,#7d79ff); }
.joyn-archive-fix .ct-green  { background: linear-gradient(135deg,#0e9f6e,#3ddc97); }
.joyn-archive-fix .ct-amber  { background: linear-gradient(135deg,#f5a623,#ffcd5b); }
.joyn-archive-fix .ct-rose   { background: linear-gradient(135deg,#e0457b,#ff7eb0); }
.joyn-archive-fix .ct-purple { background: linear-gradient(135deg,#7c3aed,#b794ff); }
.joyn-archive-fix .ct-teal   { background: linear-gradient(135deg,#0891b2,#4dd5e8); }
.joyn-archive-fix .ct-blue   .joyn-thumb-icon, .joyn-archive-fix .ct-blue   i.joyn-thumb-icon,
.joyn-archive-fix .ct-green  .joyn-thumb-icon, .joyn-archive-fix .ct-green  i.joyn-thumb-icon,
.joyn-archive-fix .ct-amber  .joyn-thumb-icon, .joyn-archive-fix .ct-amber  i.joyn-thumb-icon,
.joyn-archive-fix .ct-rose   .joyn-thumb-icon, .joyn-archive-fix .ct-rose   i.joyn-thumb-icon,
.joyn-archive-fix .ct-purple .joyn-thumb-icon, .joyn-archive-fix .ct-purple i.joyn-thumb-icon,
.joyn-archive-fix .ct-teal   .joyn-thumb-icon, .joyn-archive-fix .ct-teal   i.joyn-thumb-icon { color: rgba(255,255,255,.95); }
.joyn-archive-fix .joyn-thumb-icon.ri { font-size: clamp(38px, 6vw, 54px); position: relative; z-index: 1; }
.joyn-thumb-ring { position: absolute; border: 2px solid rgba(255,255,255,.22); border-radius: 50%; z-index: 0; pointer-events: none; }
.joyn-card-thumb .joyn-thumb-ring--a { width: 150px; height: 150px; top: -50px; right: -40px; }
.joyn-card-thumb .joyn-thumb-ring--b { width: 90px;  height: 90px;  bottom: -34px; left: -26px; }
.joyn-list-thumb .joyn-thumb-ring--a { width: 110px; height: 110px; top: -40px; right: -30px; }
.joyn-list-thumb .joyn-thumb-ring--b { width: 70px;  height: 70px;  bottom: -28px; left: -20px; }
.joyn-archive-fix .joyn-card-thumb img,
.joyn-archive-fix .joyn-list-thumb img { position: relative; z-index: 2; }

/* 썸네일 레벨 배지 (좌하단) */
.joyn-thumb-level {
    position: absolute; z-index: 3; bottom: 9px; left: 9px;
    font-size: 10.5px; font-weight: 700; padding: 3px 8px;
    border-radius: 6px; color: #fff; background: rgba(17,24,39,.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* 배지 / 찜 버튼 리프레시 */
.joyn-archive-fix .joyn-card-badges { top: 10px; left: 10px; gap: 4px; z-index: 3; }
.joyn-archive-fix .joyn-badge { font-size: 10px; padding: 3px 7px; border-radius: 6px; }
.joyn-archive-fix .joyn-badge-best { background: var(--joyn-success); }
.joyn-archive-fix .joyn-badge-free { background: #D97706; }
.joyn-archive-fix .joyn-fav-btn {
    top: 9px; right: 9px; width: 32px; height: 32px; border-radius: 9px;
    background: rgba(255,255,255,.92); z-index: 3; transition: transform .15s;
}
.joyn-archive-fix .joyn-fav-btn i { font-size: 16px; }
.joyn-archive-fix .joyn-fav-btn:hover { transform: scale(1.08); }
.joyn-archive-fix .joyn-fav-btn:hover i { color: var(--joyn-danger); }

/* ── 그리드 카드: 리치 레이아웃 ── */
.joyn-archive-fix .joyn-course-card {
    border-radius: var(--joyn-r2);
    display: flex; flex-direction: column;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.joyn-archive-fix .joyn-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(45,43,160,.13), 0 6px 16px rgba(17,24,39,.06);
    border-color: #dcdcf5;
}
.joyn-archive-fix .joyn-course-card:active { transform: translateY(-2px); }
.joyn-archive-fix .joyn-card-body { padding: 15px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.joyn-card-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.joyn-archive-fix .joyn-card-meta {
    font-size: 12px; font-weight: 700; color: var(--joyn-p); margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.joyn-card-rating { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.joyn-card-rating .joyn-star { color: #f5a623; font-size: 13px; }
.joyn-card-rating .joyn-rating-num { font-size: 12.5px; font-weight: 700; color: var(--joyn-t1); }
.joyn-card-rating .joyn-rating-cnt { font-size: 11.5px; color: var(--joyn-t3); font-weight: 500; }
.joyn-archive-fix .joyn-card-title {
    font-size: clamp(14.5px, 1.6vw, 16.5px); font-weight: 700; line-height: 1.42;
    margin: 9px 0 0; min-height: 2.6em;
}

/* 강사 행 */
.joyn-card-inst { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.joyn-inst-av {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 12px;
}
.joyn-inst-name { font-size: 13px; color: var(--joyn-t2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-amber  { background: linear-gradient(135deg,#f5a623,#ff8a3d); }
.av-indigo { background: linear-gradient(135deg,#4541FF,#7d79ff); }
.av-green  { background: linear-gradient(135deg,#0e9f6e,#3ddc97); }
.av-rose   { background: linear-gradient(135deg,#e0457b,#ff7eb0); }
.av-purple { background: linear-gradient(135deg,#7c3aed,#b794ff); }
.av-teal   { background: linear-gradient(135deg,#0891b2,#4dd5e8); }

/* 메타 통계 (강의수/기간/수강생) */
.joyn-card-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.joyn-card-stats span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--joyn-t2); }
.joyn-card-stats i { font-size: 14px; color: var(--joyn-t3); }

/* 풋터: 가격 + CTA */
.joyn-card-foot {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--joyn-border2);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.joyn-archive-fix .joyn-card-foot { margin-top: 15px; }
.joyn-archive-fix .joyn-card-price-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.joyn-price-line { display: inline-flex; align-items: baseline; gap: 7px; }
.joyn-archive-fix .joyn-price-orig { font-size: 12px; }
.joyn-archive-fix .joyn-price-disc { font-size: 13.5px; font-weight: 800; color: var(--joyn-danger); margin: 0; }
.joyn-archive-fix .joyn-price-main { font-size: clamp(16px, 1.8vw, 19px); font-weight: 800; }
.joyn-archive-fix .joyn-price-free { font-size: 17px; font-weight: 800; color: var(--joyn-success); }
.joyn-card-cta {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: var(--joyn-pb); color: var(--joyn-p);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    transition: background .2s, color .2s;
}
.joyn-course-card:hover .joyn-card-cta { background: var(--joyn-p); color: #fff; }

/* ── 그리드 컬럼: 리치 카드용 (모바일 1 → 560 2 → 920 3) ── */
.joyn-archive-fix .joyn-course-grid { grid-template-columns: 1fr; gap: 16px; padding: 0; }
.joyn-archive-fix .joyn-featured-grid { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) {
    .joyn-archive-fix .joyn-course-grid,
    .joyn-archive-fix .joyn-featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 920px) {
    .joyn-archive-fix .joyn-course-grid,
    .joyn-archive-fix .joyn-featured-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
}
/* 추천 그리드 카드 글자 크기 정상화(기존 축소 규칙 무력화) */
.joyn-archive-fix .joyn-featured-grid .joyn-card-title { font-size: clamp(14.5px,1.6vw,16.5px); }
.joyn-archive-fix .joyn-featured-grid .joyn-card-meta { font-size: 12px; }
.joyn-archive-fix .joyn-featured-grid .joyn-card-body { padding: 15px 15px 16px; }
.joyn-archive-fix .joyn-featured-grid .joyn-price-main,
.joyn-archive-fix .joyn-featured-grid .joyn-price-free { font-size: clamp(16px,1.8vw,19px); }
.joyn-archive-fix .joyn-featured-grid .joyn-price-orig,
.joyn-archive-fix .joyn-featured-grid .joyn-price-disc { font-size: 12px; }
.joyn-archive-fix .joyn-featured-grid .joyn-fav-btn { width: 32px; height: 32px; font-size: 16px; }
.joyn-archive-fix .joyn-featured-grid .joyn-badge { font-size: 10px; padding: 3px 7px; }

/* ── 리스트 카드 리치화 ── */
.joyn-archive-fix .joyn-course-list { padding: 0; }
.joyn-archive-fix .joyn-list-card {
    border-radius: var(--joyn-r2); margin-bottom: 14px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.joyn-archive-fix .joyn-list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(45,43,160,.1);
    border-color: #dcdcf5;
}
.joyn-archive-fix .joyn-list-thumb { width: clamp(120px, 30vw, 200px); aspect-ratio: 16/10; }
.joyn-archive-fix .joyn-list-body { padding: 14px 16px; display: flex; flex-direction: column; }
.joyn-archive-fix .joyn-list-meta { font-size: 12px; font-weight: 700; color: var(--joyn-p); }
.joyn-archive-fix .joyn-list-title { font-size: clamp(14px,2vw,16.5px); margin: 7px 0 0; }
.joyn-archive-fix .joyn-list-body .joyn-card-inst { margin-top: 9px; }
.joyn-archive-fix .joyn-list-body .joyn-card-stats { margin-top: 9px; }
.joyn-archive-fix .joyn-list-price-row { margin-top: 12px; display: flex; align-items: baseline; gap: 7px; }
.joyn-archive-fix .joyn-list-fav { width: 40px; }
.joyn-archive-fix .joyn-list-fav i { font-size: 19px; }

/* ── 히어로 밴드 ── */
.joyn-hero-band {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 420px at 92% -10%, rgba(111,107,255,.16), transparent 60%),
        radial-gradient(700px 380px at -5% 30%, rgba(69,65,255,.10), transparent 55%),
        linear-gradient(180deg,#fdfdff,var(--joyn-bg));
    border-bottom: 1px solid var(--joyn-border2);
}
.joyn-hero-band__deco {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(69,65,255,.07) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg,#000 30%,transparent);
    mask-image: linear-gradient(180deg,#000 30%,transparent);
    opacity: .55;
}
.joyn-hero-band__inner { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(28px,5vw,56px) 16px clamp(24px,4vw,40px); }
.joyn-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: #2a27b0;
    background: #fff; border: 1px solid var(--joyn-border); border-radius: 999px;
    padding: 7px 13px; box-shadow: var(--joyn-sh); margin-bottom: 18px;
}
.joyn-hero-eyebrow i { font-size: 15px; color: var(--joyn-p); }
.joyn-hero-headline { margin: 0; font-size: clamp(26px,4.6vw,46px); line-height: 1.16; font-weight: 800; letter-spacing: -.035em; color: var(--joyn-t1); }
.joyn-hero-grad { background: linear-gradient(120deg,var(--joyn-p),#8a86ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.joyn-hero-sub { margin: 16px 0 0; font-size: clamp(14px,1.7vw,17px); color: var(--joyn-t2); line-height: 1.7; max-width: 32em; }
.joyn-hero-search {
    margin-top: 24px; display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--joyn-border); border-radius: 16px;
    padding: 7px 7px 7px 16px; box-shadow: 0 6px 22px rgba(17,24,39,.07);
    max-width: 540px;
}
.joyn-hero-search > i { font-size: 20px; color: var(--joyn-t3); flex-shrink: 0; }
.joyn-hero-search .joyn-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 16px; color: var(--joyn-t1); padding: 11px 4px; min-width: 0;
}
.joyn-hero-search .joyn-search-input::placeholder { color: var(--joyn-t3); }
.joyn-hero-search__go {
    flex-shrink: 0; background: var(--joyn-p); color: #fff; border: none;
    font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 11px;
    cursor: pointer; transition: background .2s;
}
.joyn-hero-search__go:hover { background: #3531d6; }
.joyn-hero-tags { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.joyn-hero-tags__label { font-size: 13px; color: var(--joyn-t3); }
.joyn-hero-tags a {
    font-size: 13px; font-weight: 600; color: var(--joyn-p);
    background: var(--joyn-pb); padding: 5px 11px; border-radius: 999px;
    text-decoration: none; transition: background .2s;
}
.joyn-hero-tags a:hover { background: #e0e2ff; }

/* ── 통계 스트립 ── */
.joyn-stats-strip {
    max-width: 1180px; margin: clamp(-18px,-2vw,-10px) auto 0; position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
    background: var(--joyn-border); border: 1px solid var(--joyn-border);
    border-radius: var(--joyn-r2); overflow: hidden; box-shadow: var(--joyn-sh);
}
@media (min-width: 700px) { .joyn-stats-strip { grid-template-columns: repeat(4,1fr); } }
.joyn-stat-cell { background: #fff; padding: 22px 16px; text-align: center; }
.joyn-stat-num { font-size: clamp(22px,3.2vw,32px); font-weight: 800; letter-spacing: -.04em; color: var(--joyn-t1); }
.joyn-stat-unit { font-size: .55em; color: var(--joyn-p); margin-left: 2px; font-weight: 800; }
.joyn-stat-label { font-size: 13px; color: var(--joyn-t2); margin-top: 4px; }

/* ── 섹션 헤딩 (추천/둘러보기 공통) ── */
.joyn-section-head { max-width: 1180px; margin: 0 auto clamp(16px,2vw,24px); padding: 0 16px; }
.joyn-section-head__ttl { display: flex; align-items: flex-start; gap: 10px; }
.joyn-section-head__ttl > i { font-size: 22px; color: var(--joyn-p); line-height: 1.2; margin-top: 2px; }
.joyn-section-head__title { margin: 0; font-size: clamp(19px,2.6vw,26px); font-weight: 800; letter-spacing: -.03em; color: var(--joyn-t1); }
.joyn-section-head__sub { margin: 5px 0 0; font-size: 13.5px; color: var(--joyn-t2); }

/* 섹션 래퍼 폭/여백 정렬 */
.joyn-browse-section { max-width: 1180px; margin: 0 auto; padding: clamp(28px,4vw,44px) 0 0; }
.joyn-archive-fix .joyn-course-grid { padding-left: 16px; padding-right: 16px; padding-bottom: 8px; }
.joyn-browse-section .joyn-category-bar,
.joyn-browse-section .joyn-toolbar,
.joyn-browse-section .joyn-filter-bar { padding-left: 16px; padding-right: 16px; }
.joyn-browse-section .joyn-toolbar {
    border-bottom: 1px solid var(--joyn-border);
    margin-bottom: 16px;
    padding-bottom: 16px;
}
.joyn-browse-section .joyn-course-grid {
    padding-top: 4px;
}

/* ── Why 섹션 ── */
.joyn-why-section {
    margin-top: clamp(36px,5vw,60px); padding: clamp(34px,5vw,56px) 16px;
    background: linear-gradient(180deg,#fff,#f6f6ff);
    border-top: 1px solid var(--joyn-border2); border-bottom: 1px solid var(--joyn-border2);
}
.joyn-why-head { text-align: center; max-width: 1180px; margin: 0 auto clamp(22px,3vw,34px); }
.joyn-why-title { margin: 0; font-size: clamp(20px,3vw,28px); font-weight: 800; letter-spacing: -.03em; color: var(--joyn-t1); }
.joyn-why-sub { margin: 8px 0 0; font-size: 14px; color: var(--joyn-t2); }
.joyn-why-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .joyn-why-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 920px) { .joyn-why-grid { grid-template-columns: repeat(4,1fr); } }
.joyn-why-card {
    background: #fff; border: 1px solid var(--joyn-border); border-radius: var(--joyn-r2);
    padding: 26px 22px; box-shadow: var(--joyn-sh); transition: transform .2s, box-shadow .2s;
}
.joyn-why-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(17,24,39,.08); }
.joyn-why-ic {
    width: 52px; height: 52px; border-radius: 14px; color: #fff; font-size: 25px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.why-indigo { background: linear-gradient(135deg,#4541FF,#7d79ff); }
.why-green  { background: linear-gradient(135deg,#0e9f6e,#3ddc97); }
.why-rose   { background: linear-gradient(135deg,#e0457b,#ff7eb0); }
.why-purple { background: linear-gradient(135deg,#7c3aed,#b794ff); }
.joyn-why-card__title { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; color: var(--joyn-t1); }
.joyn-why-card__desc { margin: 9px 0 0; font-size: 13.5px; color: var(--joyn-t2); line-height: 1.62; }

/* ── CTA 배너 ── */
.joyn-cta-section { max-width: 1180px; margin: clamp(36px,5vw,60px) auto 0; padding: 0 16px clamp(28px,4vw,44px); }
.joyn-cta-banner {
    position: relative; overflow: hidden; border-radius: 24px; text-align: center; color: #fff;
    padding: clamp(34px,5vw,58px) 22px;
    background:
        radial-gradient(640px 380px at 85% -20%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(120deg,#2a27b0,#4541FF 60%,#6f6bff);
    box-shadow: 0 18px 50px rgba(45,43,160,.28);
}
.joyn-cta-deco { position: absolute; border: 2px solid rgba(255,255,255,.16); border-radius: 50%; pointer-events: none; }
.joyn-cta-deco--a { width: 280px; height: 280px; top: -120px; left: -60px; }
.joyn-cta-deco--b { width: 200px; height: 200px; bottom: -110px; right: 30px; }
.joyn-cta-title { position: relative; margin: 0; font-size: clamp(21px,3.4vw,34px); font-weight: 800; letter-spacing: -.03em; }
.joyn-cta-sub { position: relative; margin: 12px 0 0; font-size: clamp(14px,1.8vw,17px); opacity: .92; }
.joyn-cta-actions { position: relative; margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.joyn-cta-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 13px; text-decoration: none; transition: transform .15s, background .2s; }
.joyn-cta-btn i { font-size: 18px; }
.joyn-cta-btn--white { background: #fff; color: var(--joyn-p); }
.joyn-cta-btn--white:hover { transform: translateY(-2px); color: var(--joyn-p); }
.joyn-cta-btn--line { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.joyn-cta-btn--line:hover { background: rgba(255,255,255,.22); color: #fff; }

/* 데스크톱에서 본문 좌우 패딩 정리 */
@media (min-width: 1212px) {
    .joyn-archive-fix .joyn-course-grid,
    .joyn-browse-section .joyn-category-bar,
    .joyn-browse-section .joyn-toolbar,
    .joyn-browse-section .joyn-filter-bar,
    .joyn-browse-section .joyn-section-head,
    .joyn-hero-band__inner { padding-left: 0; padding-right: 0; }
    .joyn-browse-section { padding-left: 16px; padding-right: 16px; }
    .joyn-archive-fix .joyn-enrolled-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
    .joyn-featured-section .joyn-section-head,
    .joyn-featured-section .joyn-featured-grid {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ── 히어로 비주얼: 떠 있는 카드 묶음 (데스크톱 전용) ── */
.joyn-hero-grid { display: block; }
.joyn-hero-visual { display: none; }
@media (min-width: 1024px) {
    .joyn-hero-grid {
        display: grid; grid-template-columns: 1.12fr .88fr;
        gap: 44px; align-items: center;
    }
    .joyn-hero-visual { display: block; position: relative; min-height: 400px; }
}
.joyn-hv-card {
    position: absolute; top: 10px; right: 8px; width: 300px;
    background: #fff; border: 1px solid var(--joyn-border); border-radius: 18px;
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 22px 54px rgba(45,43,160,.16), 0 6px 16px rgba(17,24,39,.06);
    animation: joyn-floaty 6s ease-in-out infinite;
}
.joyn-hv-thumb {
    position: relative; height: 150px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; isolation: isolate;
}
.joyn-hv-thumb i { font-size: 50px; color: #fff; position: relative; z-index: 1; }
.joyn-hv-thumb .joyn-thumb-ring--a { width: 160px; height: 160px; top: -40px; right: -40px; }
.joyn-hv-thumb .joyn-thumb-ring--b { width: 90px;  height: 90px;  bottom: -30px; left: -20px; }
.joyn-hv-body { padding: 15px 16px 17px; }
.joyn-hv-cat { font-size: 12px; font-weight: 700; color: var(--joyn-p); }
.joyn-hv-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.joyn-hv-meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--joyn-t2); }
.joyn-hv-star { display: inline-flex; align-items: center; gap: 3px; color: #f5a623; font-weight: 700; }
.joyn-hv-star i { font-size: 13px; }
.joyn-hv-prog { margin-top: 13px; }
.joyn-hv-bar { height: 7px; background: var(--joyn-pb); border-radius: 99px; overflow: hidden; }
.joyn-hv-bar span { display: block; height: 100%; width: 72%; border-radius: 99px; background: linear-gradient(90deg,var(--joyn-p),#7d79ff); }
.joyn-hv-prog-lbl { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--joyn-t3); }

.joyn-hv-badge {
    position: absolute; display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid var(--joyn-border); border-radius: 14px;
    padding: 12px 15px; box-shadow: 0 18px 44px rgba(45,43,160,.16), 0 6px 14px rgba(17,24,39,.05);
}
.joyn-hv-badge--a { top: 0; left: 14px; animation: joyn-floaty 7s ease-in-out infinite .3s; }
.joyn-hv-badge--b { bottom: 40px; left: -8px; animation: joyn-floaty 5s ease-in-out infinite .6s; }
.joyn-hv-badge-ic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
.joyn-hv-ic-rose  { background: linear-gradient(135deg,#e0457b,#ff7eb0); }
.joyn-hv-ic-green { background: linear-gradient(135deg,#0e9f6e,#3ddc97); }
.joyn-hv-badge-t1 { font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: var(--joyn-t1); line-height: 1.2; }
.joyn-hv-badge-t2 { font-size: 12px; color: var(--joyn-t2); margin-top: 1px; }

@keyframes joyn-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
    .joyn-hv-card, .joyn-hv-badge--a, .joyn-hv-badge--b { animation: none; }
}

/* 폼 요소도 동일 폰트 상속 (검색창·버튼이 시스템 폰트로 얇아지는 것 방지) */
.joyn-archive-fix input,
.joyn-archive-fix button,
.joyn-archive-fix select,
.joyn-archive-fix textarea { font-family: inherit; }

/* ── 상단 헤더 가로 네비 (데스크톱 전용 — 모바일은 하단 네비 사용) ── */
.joyn-archive-hero__nav { display: none; }
@media (min-width: 900px) {
    .joyn-archive-hero__inner { gap: 18px; }
    .joyn-archive-hero__brand { flex: 0 0 auto; }
    .joyn-archive-hero__nav {
        display: flex; align-items: center; gap: 4px;
        flex: 1 1 auto; justify-content: center;
    }
    .joyn-hero-navitem {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 12px; border-radius: 11px;
        font-size: 14px; font-weight: 600; color: var(--joyn-t2);
        text-decoration: none; white-space: nowrap;
        transition: background .18s, color .18s;
    }
    .joyn-hero-navitem i { font-size: 18px; line-height: 1; }
    .joyn-hero-navitem:hover { background: var(--joyn-pb); color: var(--joyn-p); }
    .joyn-hero-navitem.active { color: var(--joyn-p); font-weight: 700; }
    .joyn-hero-navitem.active i { color: var(--joyn-p); }
    .joyn-archive-hero__actions { flex: 0 0 auto; }
}

/* ── Astra(테마) 링크 색상 오버라이드 방어 — CTA 버튼 글자/아이콘 강제 색상 ── */
.joyn-archive-fix .joyn-cta-btn--white,
.joyn-archive-fix .joyn-cta-btn--white:link,
.joyn-archive-fix .joyn-cta-btn--white:visited,
.joyn-archive-fix .joyn-cta-btn--white:hover,
.joyn-archive-fix .joyn-cta-btn--white:focus,
.joyn-archive-fix .joyn-cta-btn--white:active,
.joyn-archive-fix .joyn-cta-btn--white i { color: var(--joyn-p) !important; }
.joyn-archive-fix .joyn-cta-btn--line,
.joyn-archive-fix .joyn-cta-btn--line:link,
.joyn-archive-fix .joyn-cta-btn--line:visited,
.joyn-archive-fix .joyn-cta-btn--line:hover,
.joyn-archive-fix .joyn-cta-btn--line:focus,
.joyn-archive-fix .joyn-cta-btn--line:active,
.joyn-archive-fix .joyn-cta-btn--line i { color: #fff !important; }
.joyn-archive-fix .joyn-cta-title,
.joyn-archive-fix .joyn-cta-sub { color: #fff !important; }
/* 테마가 a에 밑줄/그림자를 넣는 경우 제거 */
.joyn-archive-fix .joyn-cta-btn { text-decoration: none !important; box-shadow: none; }
/* 히어로 검색 버튼도 동일 방어 (흰 글자 보장) */
.joyn-archive-fix .joyn-hero-search__go,
.joyn-archive-fix .joyn-hero-search__go:hover,
.joyn-archive-fix .joyn-hero-search__go:focus { color: #fff !important; }

/* ── 테마 body·래퍼 배경 — acts-match (acts-match-route-active) 패턴 ──
   body.joyn-lms-course-display + 인라인 layout CSS( class-joyn-lms.php ) */
body.joyn-lms-course-display,
body.post-type-archive-joyn_course,
body.tax-joyn_course_category,
body.tax-joyn_course_level {
    --joyn-lms-page-bg: #F5F6F8;
    background: var(--joyn-lms-page-bg) !important;
}

html:has(body.joyn-lms-course-display),
body.joyn-lms-course-display {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    width: 100%;
    max-width: 100%;
}

body.joyn-lms-course-display #page,
body.joyn-lms-course-display #main,
body.joyn-lms-course-display .site,
body.joyn-lms-course-display .site-content,
body.joyn-lms-course-display #content,
body.joyn-lms-course-display .entry-content,
body.joyn-lms-course-display .mainpage-wrapper {
    overflow-x: hidden;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: var(--joyn-lms-page-bg);
}

body.joyn-lms-course-display .entry-content > .wp-block-shortcode,
body.joyn-lms-course-display .entry-content > .alignleft,
body.joyn-lms-course-display .entry-content > .wp-block-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* 플러그인 루트 — acts-match .am-board-list { background: var(--hcjm-bg) } 와 동일 */
body.joyn-lms-course-display .joyn-archive-fix,
body.joyn-lms-course-display .joyn-lms.joyn-archive-fix {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: var(--joyn-bg);
}

body.joyn-lms-course-display .site-content > .ast-container,
body.joyn-lms-course-display #primary,
body.joyn-lms-course-display #content.site-content,
body.joyn-lms-course-display .ast-article-single,
body.joyn-lms-course-display .ast-article-post,
body.joyn-lms-course-display .inside-article,
body.joyn-lms-course-display .page-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

@media (min-width: 1024px) {
    body.joyn-lms-course-display .joyn-archive-fix {
        max-width: 100%;
    }
}

/* 상단 헤더 내용은 콘텐츠 폭(1180)에 맞춰 가운데 정렬 */
.joyn-archive-fix .joyn-archive-hero__inner {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}