/* ===================================================
   Customer Front - base.css
   Font: Pretendard
=================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ==================== CSS 변수 ==================== */
:root {
    --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --container-width: 1600px;
    --header-height: 100px;

    /* --- 메인/서브 컬러 --- */
    --color-primary:        #7954C6;
    --color-primary-bg:     #F8F5FF;

    /* --- 상품 리스트 컬러 --- */
    --color-purple:         #7954C6;
    --color-purple-bg:      #F8F5FF;
    --color-blue:           #2BACF4;
    --color-blue-bg:        #F7FBFF;
    --color-red:            #FC5758;
    --color-red-bg:         #FFEAEA;
    --color-green:          #31AD60;
    --color-green-bg:       #EDF9F2;
    --color-gray:           #333333;
    --color-gray-bg:        #F8F8F8;

    /* --- 버튼 컬러 --- */
    --btn-primary:          #7954C6;
    --btn-secondary:        #555555;
    --btn-disabled:         #F1F1F1;
    --btn-disabled-text:    #BBBBBB;

    /* --- 폰트 사이즈 --- */
    --font-h1:  34px;
    --font-h2:  24px;
    --font-h3:  20px;
    --font-h4:  18px;
    --font-h5:  15px;
    --font-b1:  13px;
    --font-b2:  12px;

    /* --- 텍스트/배경 --- */
    --color-text:           #333333;
    --color-bg:             #FFFFFF;
    --color-input-text:     rgba(51, 51, 51, 0.5);
}

/* ==================== Typography ==================== */
.h1         { font-size: var(--font-h1); font-weight: 400; letter-spacing: -0.02em; }
.h1-medium  { font-size: var(--font-h1); font-weight: 500; letter-spacing: -0.02em; }
.h1-bold    { font-size: var(--font-h1); font-weight: 700; letter-spacing: -0.02em; }

.h2         { font-size: var(--font-h2); font-weight: 400; letter-spacing: -0.02em; }
.h2-medium  { font-size: var(--font-h2); font-weight: 500; letter-spacing: -0.02em; }
.h2-bold    { font-size: var(--font-h2); font-weight: 700; letter-spacing: -0.02em; }

.h3         { font-size: var(--font-h3); font-weight: 400; letter-spacing: -0.02em; }
.h3-medium  { font-size: var(--font-h3); font-weight: 500; letter-spacing: -0.02em; }
.h3-bold    { font-size: var(--font-h3); font-weight: 700; letter-spacing: -0.02em; }

.h4         { font-size: var(--font-h4); font-weight: 400; letter-spacing: -0.02em; }
.h4-medium  { font-size: var(--font-h4); font-weight: 500; letter-spacing: -0.02em; }
.h4-bold    { font-size: var(--font-h4); font-weight: 700; letter-spacing: -0.02em; }

.h5         { font-size: var(--font-h5); font-weight: 400; letter-spacing: -0.02em; }
.h5-medium  { font-size: var(--font-h5); font-weight: 500; letter-spacing: -0.02em; }
.h5-bold    { font-size: var(--font-h5); font-weight: 700; letter-spacing: -0.02em; }

.b1         { font-size: var(--font-b1); font-weight: 400; letter-spacing: -0.02em; }
.b1-medium  { font-size: var(--font-b1); font-weight: 500; letter-spacing: -0.02em; }
.b1-bold    { font-size: var(--font-b1); font-weight: 700; letter-spacing: -0.02em; }

.b2         { font-size: var(--font-b2); font-weight: 400; letter-spacing: -0.02em; }
.b2-medium  { font-size: var(--font-b2); font-weight: 500; letter-spacing: -0.02em; }
.b2-bold    { font-size: var(--font-b2); font-weight: 700; letter-spacing: -0.02em; }

/* ==================== Reset ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    overflow-x: hidden;
    background: #FFFFFF;
}

/* 마이페이지만 회색 배경 */
body:has(.mypage-layout) {
    background: #F8F8F8;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { display: block; max-width: 100%; }

/* ==================== Container ==================== */
.container {
    max-width: var(--container-width);
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 145px;
    height: 100%;
}

/* ==================== Header ==================== */
.site-header {
    width: 100%;
    height: var(--header-height);
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #F0F0F0;
}

/* 로고 */
.header-logo {
    width: 170px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 네비게이션 */
.header-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1;
    justify-content: center;
}

.nav-item {
    font-size: 17px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.68px;
    white-space: nowrap;
    transition: color 0.18s ease;
}

/* 모바일 드로어용 아이콘 — PC에서는 숨김 */
.nav-item .nav-icon { display: none; }

.nav-item:hover,
.nav-item.active {
    color: #000000;
    font-weight: 700;
}

/* 프로필 영역 */
.header-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 알림 버튼 */
.btn-bell {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: #F8F8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-bell:hover { background: #F0F0F0; }

/* 알림 빨간 점 */
.bell-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    background: #FC5758;
    border-radius: 50%;
    border: 1.5px solid #FFFFFF;
}

/* 햄버거 버튼 (모바일에서만 표시) */
.header-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.header-hamburger__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: #333333;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.nav-open .header-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .header-hamburger__bar:nth-child(2) {
    opacity: 0;
}
.site-header.nav-open .header-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 프로필 아바타 래퍼 */
.header-avatar-wrap {
    position: relative;
    height: var(--header-height);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* 프로필 아바타 */
.header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #D3D3D3 url('../src/images/woman.png') no-repeat center center / cover;
    overflow: hidden;
    cursor: pointer;
}

/* 프로필 드롭다운 */
.profile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    padding: 0;
    z-index: 200;
    overflow: hidden;
}

.header-avatar-wrap:hover .profile-dropdown {
    display: block;
}

/* 유저 정보 행 */
.profile-dropdown-user {
    display: flex;
    align-items: center;
    gap:8px;
    height: 50px;
    padding:0 16px;
}

.profile-social-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.profile-username {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    letter-spacing: -0.3px;
}

.profile-arrow {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

/* 구분선 */
.profile-dropdown-divider {
    border: none;
    border-top: 1px solid #F0F0F0;
    margin:0;
}

/* 메뉴 리스트 */
.profile-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    height: 50px;
    gap: 10px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 400;
    color: #555555;
    letter-spacing: -0.28px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.profile-menu-item img {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.profile-menu-item:hover {
    background: #F8F5FF;
}

.profile-menu-item--active {
    background: #F8F5FF;
    font-weight: 500;
}


/* ==================== Footer ==================== */
.site-footer {
    width: 100%;
    background: #222222;
}

.footer-inner {
    max-width: var(--container-width);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Row 1: 로고+약관 / SNS */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.footer-logo {
    display: block;
    width: 170px;
    height: 55px;
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(0.53);
}

.footer-terms {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 16px;
}

.footer-terms-link,
.footer-terms-sep {
    font-size: 15px;
    font-weight: 400;
    color: #BBBBBB;
    letter-spacing: -0.6px;
}

.footer-terms-link:hover { color: #FFFFFF; }

/* SNS 아이콘 */
.footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    opacity: 0.8;
    transition: opacity 0.18s ease;
}

.footer-social-link:hover { opacity: 1; }

/* 사업자 정보 */
.footer-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-info-row {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-info-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    letter-spacing: -0.6px;
    color: #FFFFFF;
}

.footer-info-item strong {
    font-weight: 700;
    white-space: nowrap;
}

.footer-info-item span {
    font-weight: 400;
    white-space: nowrap;
}

.footer-biz-confirm {
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: -0.48px;
    text-decoration: underline;
    opacity: 0.7;
}

.footer-biz-confirm:hover { opacity: 1; }

/* 안내 문구 */
.footer-notice {
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: -0.6px;
}

/* 구분선 */
.footer-divider {
    border: none;
    border-top: 1px solid #FFFFFF;
    opacity: 0.15;
    margin: 0;
}

/* 카피라이트 */
.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-copyright,
.footer-disclaimer {
    font-size: 12px;
    font-weight: 400;
    color: #BBBBBB;
    letter-spacing: -0.48px;
    line-height: 1.5;
}


/* =====================================================
   BUTTONS
===================================================== */

/* --- 공통 버튼 기반 --- */
.btn,
.btn-wide,
.btn-sm,
.btn-file,
.btn-wish,
.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-base);
    font-weight: 500;
    letter-spacing: -1px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.btn:hover,
.btn-wide:hover { opacity: 0.88; }

/* =====================================================
   와이드 버튼 (440×50px)
===================================================== */
.btn-wide {
    width: 440px;
    height: 50px;
    font-size: 17px;
    background: var(--btn-primary);
    color: #FFFFFF;
}

/* 비활성화 */
.btn-wide.disabled,
.btn-wide:disabled {
    background: #F1F1F1;
    color: #BBBBBB;
    cursor: default;
    pointer-events: none;
    opacity: 1;
}

/* 화상강의 참여하기 */
.btn-wide--video { background: var(--color-green); }

/* 라이브 참여하기 */
.btn-wide--live  { background: var(--color-red); }

/* 구매완료 / 수강중 (비활성, 보라 연배경) */
.btn-wide--purchased {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    cursor: default;
    pointer-events: none;
}

/* 별점 */
.btn-wide--rating {
    background: #FFFFFF;
    border: 1px solid #FFCC00;
    color: #FFCC00;
}

/* =====================================================
   일반 버튼 (150×50px) — 2가지 타입
===================================================== */
.btn {
    width: 150px;
    height: 50px;
    font-size: 17px;
}

/* Type 1: 아웃라인 (흰 배경 + 보라 테두리) */
.btn--outline {
    background: #FFFFFF;
    border: 1px solid var(--btn-primary);
    color: var(--btn-primary);
}

.btn--outline:hover { background: var(--color-primary-bg); opacity: 1; }

/* Type 2: 필드 (보라 배경) */
.btn--fill {
    background: var(--btn-primary);
    color: #FFFFFF;
}

/* 비활성화 */
.btn.disabled,
.btn:disabled {
    background: #F1F1F1;
    color: #BBBBBB;
    border-color: #F1F1F1;
    cursor: default;
    pointer-events: none;
    opacity: 1;
}

/* =====================================================
   파일선택 버튼 (150×50px, 다크 배경)
===================================================== */
.btn-file {
    width: 150px;
    height: 50px;
    font-size: 17px;
    background: var(--btn-secondary);
    color: #FFFFFF;
}

/* =====================================================
   찜하기 / 공유하기 버튼 (215×50px)
===================================================== */
.btn-wish,
.btn-share {
    width: 215px;
    height: 50px;
    font-size: 17px;
    background: #F8F8F8;
    color: #555555;
    border: 1px solid #EEEEEE;
}

.btn-wish:hover,
.btn-share:hover { border-color: var(--btn-primary); background: var(--color-primary-bg); color: var(--btn-primary); opacity: 1; }

/* =====================================================
   작은 버튼 (70×35px) — 2가지 타입
===================================================== */
.btn-sm {
    width: 70px;
    height: 35px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.26px;
}

/* Type 1: 아웃라인 */
.btn-sm--outline {
    background: #FFFFFF;
    border: 1px solid var(--btn-primary);
    color: var(--btn-primary);
}

.btn-sm--outline:hover { background: var(--color-primary-bg); }

/* Type 2: 필드 */
.btn-sm--fill {
    background: var(--btn-primary);
    color: #FFFFFF;
}

.btn-sm--fill:hover { opacity: 0.88; }

/* 비활성화 */
.btn-sm.disabled,
.btn-sm:disabled {
    background: #F1F1F1;
    color: #BBBBBB;
    border-color: #F1F1F1;
    cursor: default;
    pointer-events: none;
    opacity: 1;
}

/* =====================================================
   더보기 버튼 (100% width, 60px height)
===================================================== */
.btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 60px;
    font-size: 20px;
    font-weight: 600;
    color: #BBBBBB;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: -1px;
    font-family: var(--font-base);
}

.btn-more:hover { background: #F8F8F8; }
.btn-more img { width: 12px; height: auto; }

.load-more-wrap { width: 100%; }

/* =====================================================
   프로필 업데이트 버튼 (180×50px)
===================================================== */
.btn-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 180px;
    height: 50px;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -1px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background: var(--btn-primary);
    color: #FFFFFF;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.btn-profile:hover { opacity: 0.88; }
.btn-profile img { flex-shrink: 0; }

/* =====================================================
   다운로드 / 복사 아웃라인 버튼 (35px height)
===================================================== */
.btn-dl-all,
.btn-dl,
.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 35px;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -1px;
    border-radius: 5px;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid var(--btn-primary);
    color: var(--btn-primary);
    white-space: nowrap;
    transition: background 0.15s ease;
}
.btn-dl-all { width: 130px; }
.btn-dl     { width: 100px; }
.btn-copy   { width: 100px; }
.btn-dl-all:hover,
.btn-dl:hover,
.btn-copy:hover { background: var(--color-primary-bg); }
.btn-dl-all img,
.btn-dl img { flex-shrink: 0; width: 12px; height: 14px; }
.btn-copy img { flex-shrink: 0; width: 13px; height: 13px; aspect-ratio: 1/1; }


/* =====================================================
   BADGE
===================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100px;
    height: 35px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.24px;
    white-space: nowrap;
    border: 1px solid;
}

/* 상품 유형 뱃지 (배경+테두리+텍스트) */
.badge--normal  { background: var(--color-purple-bg); border-color: var(--color-purple); color: var(--color-purple); }
.badge--live    { background: var(--color-red-bg);    border-color: var(--color-red);    color: var(--color-red); }
.badge--digital { background: var(--color-gray-bg);   border-color: var(--color-gray);   color: var(--color-gray); }
.badge--package { background: var(--color-blue-bg);   border-color: var(--color-blue);   color: var(--color-blue); }
.badge--video   { background: var(--color-green-bg);  border-color: var(--color-green);  color: var(--color-green); }
.badge--meet    { background: var(--color-green-bg);  border-color: var(--color-green);  color: var(--color-green); width: 120px; }

/* 상태 뱃지 (55×25px, 알약형) */
.badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 55px;
    height: 25px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.2px;
    white-space: nowrap;
    border: none;
    color: #FFFFFF;
    flex-shrink: 0;
}

.badge-status--live     { background: rgba(252, 87,  88,  0.60); }
.badge-status--upcoming { background: rgba(49,  173, 96,  0.60); }
.badge-status--ended    { background: rgba(51,  51,  51,  0.68); }
.badge-status--closed   { background: rgba(51,  51,  51,  0.68); }

/* 상태 뱃지 앞 동그라미 */
.badge-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-status--live .badge-status__dot     { background: #FF0002; }
.badge-status--upcoming .badge-status__dot { background: #009C3B; }
.badge-status--ended .badge-status__dot    { background: #111111; }

.badge-status img { width: 8px; height: 8px; flex-shrink: 0; }

/* 멤버십 무료 뱃지 (알약형, 핑크) */
.badge--free {
    background: #FFE4F0;
    border-color: #FFE4F0;
    color: #E8408A;
    width: auto;
    padding: 0 12px;
    height: 25px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

/* 필드형 텍스트 뱃지 (알약형, 보라 배경) */
.badge-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 25px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #FFFFFF;
    background: var(--color-purple);
    white-space: nowrap;
    border: none;
    flex-shrink: 0;
}

/* 상품 유형 텍스트 라벨 */
.badge-type {
    color: #BBBBBB;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.6px;
}

/* 플랫폼 아이콘+텍스트 라벨 */
.badge-platform {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #BBBBBB;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.6px;
}


/* =====================================================
   Page Banner (상단 배경 이미지 배너)
===================================================== */
.page-banner {
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
}

.page-banner--course {
    background-image: url('../src/images/top-img-course.png');
}

.page-banner--live {
    background-image: url('../src/images/top-img-live.png');
}
.page-banner--meeting {
    background-image: url('../src/images/top-img-meeting.png');
}
.page-banner--package {
    background-image: url('../src/images/top-img-package.png');
}
.page-banner--digital {
    background-image: url('../src/images/top-img-digital.png');
}

/* 패키지 카드 - 할인 정보 (좌하단 절대위치) */
.course-card__promo {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}
.promo-label {
    font-size: 13px;
    color: #888888;
    font-weight: 500;
}
.promo-percent {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.page-banner__inner {
    max-width: var(--container-width);
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 40px;
}

.page-banner__title {
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}


/* =====================================================
   COURSE LIST
===================================================== */

/* 컨텐츠 영역 */
.course-content {
    max-width: 1440px;
    margin-top: 80px;
    margin-bottom: 150px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 40px;
}
h2 {
    color: #333;

/* H1-Medium */
    font-family: Pretendard;
    font-size: 34px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1.7px;
}


/* 필터 바 */
.course-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0;
}

.filter-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-select {
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    padding: 0 34px 0 14px;
    background: #FFFFFF url('../src/images/arrow-dropdown.svg') no-repeat right 10px center;
    background-size: 7px auto;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    font-family: var(--font-base);
    cursor: pointer;
    letter-spacing: -0.28px;
}

.filter-select:focus { outline: none; border-color: var(--color-primary); }

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    background: var(--color-primary);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.26px;
}

.filter-tag__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    color: #FFFFFF;
    cursor: pointer;
    border: none;
    font-family: var(--font-base);
    line-height: 1;
    padding: 0;
}

.filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    background: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    font-family: var(--font-base);
    cursor: pointer;
    letter-spacing: -0.28px;
    flex-shrink: 0;
}

.filter-reset:hover { background: var(--color-primary-bg); }
.filter-reset img { width: 14px; height: 14px; filter: invert(35%) sepia(60%) saturate(500%) hue-rotate(230deg); }

/* 검색 */
.filter-search {
    display: flex;
    align-items: center;
    width: 460px;
    max-width: 100%;
    height: 40px;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    background: #FFFFFF;
    overflow: hidden;
}

.filter-search__input {
    flex: 1;
    height: 100%;
    padding: 0 14px;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: var(--font-base);
    color: #333333;
    letter-spacing: -0.28px;
    background: transparent;
}

.filter-search__input::placeholder { color: #BBBBBB; }

.filter-search__btn {
    width: 42px;
    height: 100%;
    background: transparent;
    border: none;
    border-left: 1px solid #EEEEEE;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.filter-search__btn:hover { background: #F8F8F8; }
.filter-search__btn img { width: 18px; height: 18px; }

/* 카드 그리드 */
.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* 카드 */
.course-card {
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

/* 썸네일 */
.course-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #E8E8E8;
}

.course-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 찜하기 */
.course-card__heart {
    position: absolute;
    top: 20px;
    right: 20px;
    width: auto;
    height: auto;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.course-card__heart:hover { opacity: 0.75; }
.course-card__heart img { width: 15px; height: 13px; }

/* LIVE 배지 (썸네일 좌상단) */
.course-card__live {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 30px;
    padding: 0 15px;
    background: var(--color-red);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
    gap: 5px;
}
.course-card__live::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #FF0002;
    border:1px solid #FFFFFF;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 마감 배지 */
.course-card__closed {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 26px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    letter-spacing: -0.22px;
    backdrop-filter: blur(2px);
}

.badge--free {
    width: auto;
    height: auto;
    padding: 5px 8px;
    border-radius: 10px;
    border: 1px solid #FC5758;
    background: #FFF6F6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: -0.18px;
    line-height: 130%;
}
.badge--free b {
    background: linear-gradient(92deg, #7954C6, #FC5758);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-style: normal;
}

/* 카드 본문 */
.course-card__body {
    position: relative;
    flex: 1;
    padding: 14px 16px 80px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 제목 */
.course-card__title {
    font-size: 15px;
    font-weight: 500;
    color: #222222;
    line-height: 1.3;
    letter-spacing: -0.3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 뱃지 행 (body 안) */
.course-card__badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.course-card__badges .badge {
    width: auto;
    padding: 0 30px;
    height: 35px;
    font-size: 11px;
}

/* 정보 행 */
.course-card__info {
    display: flex;
    flex-direction: column;
    gap:8px;
}

.course-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.course-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.24px;
    white-space: nowrap;
}

.course-info-item img {
    width: 13px;
    height: 13px;
    opacity: 0.55;
    flex-shrink: 0;
}

/* 별점 */
.course-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-star { font-size: 13px; color: #FFCC00; }
.rating-score { font-size: 13px; font-weight: 700; color: #333333; }
.rating-count { font-size: 12px; font-weight: 400; color: #888888; }

/* 가격 */
.course-card__price {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.price-original {
    font-size: 12px;
    font-weight: 400;
    color: #AAAAAA;
    text-decoration: line-through;
    letter-spacing: -0.24px;
}

.price-row {
    display: flex;
    align-items:flex-end;
    gap: 6px;
}

.price-discount {
    font-size:30px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.36px;
}

.price-final {
    font-size: 24px;
    font-weight: 700;
    color: #222222;
    letter-spacing: -0.36px;
}

.price-label {
    font-size: 12px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.24px;
}


/* =====================================================
   COURSE DETAIL
===================================================== */

/* 2컬럼 레이아웃 */
.detail-layout {
    max-width: 1440px;
    margin: 80px auto 150px;
    padding: 0 40px;
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

/* 좌측 */
.detail-main {
    flex: 1;
    min-width: 0;
}

.detail-main__thumb {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
}

.detail-main__thumb img {
    width: 100%;
    display: block;
}

/* 섹션 네비게이션 */
.detail-tabs {
    display: flex;
    border-bottom: 2px solid #EEEEEE;
    position: sticky;
    top: var(--header-height);
    background: #FFFFFF;
    z-index: 10;
}

.detail-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    font-size: 18px;
    font-weight: 500;
    color: #888888;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -1px;
}

.detail-section:hover {
    color: var(--color-primary);
}

.detail-section.active {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom-color: var(--color-primary);
}

/* 섹션 콘텐츠 간격 */
.detail-section-content {
    padding: 50px 0 0 0;
}

/* 커리큘럼 상단 */
.curriculum-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.curriculum-top__info {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.curriculum-top__title {
    font-size: 24px;
    font-weight: 700;
    color: #222222;
    letter-spacing: -0.96px;
}

.curriculum-top__meta {
    font-size: 13px;
    color: #888888;
}

.curriculum-top__time {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-red);
}

.curriculum-toggle-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 128px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #DFE0E3;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 13px;
    color: #222;
    cursor: pointer;
    font-family: var(--font-base);
}

.curriculum-toggle-all__ico {
    width: 10px;
    height: 10px;
    transition: transform 0.2s;
    transform: rotate(180deg);
}

.curriculum-toggle-all__ico.open {
    transform: rotate(180deg);
}

/* 커리큘럼 아코디언 래퍼 */
.curriculum-accordion-wrap {
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    padding: 20px;
}

/* 커리큘럼 아코디언 */
.curriculum-accordion {
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
}

.curriculum-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height:50px;
    line-height:50px;
    padding: 0 24px;
    background: var(--color-primary-bg);
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    text-align: left;
    gap: 12px;
}

.curriculum-accordion__title {
    font-size: 17px;
    font-weight: 700;
    color: #555555;
    flex: 1;
    letter-spacing: -0.32px;
}

.curriculum-accordion__arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.25s;
    transform: rotate(0deg);
}

.curriculum-accordion.open .curriculum-accordion__arrow {
    transform: rotate(180deg);
}

.curriculum-accordion__body {
    display: none;
    padding: 0;
    background: #FFFFFF;
}

.curriculum-accordion.open .curriculum-accordion__body {
    display: block;
}

.curriculum-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #F5F5F5;
    font-size: 13px;
    color: #444444;
}

.curriculum-item:last-child { border-bottom: none; }

.curriculum-item > img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.curriculum-item__preview {
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: underline;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 12px;
}

.curriculum-item__time {
    font-size: 13px;
    color: #888888;
    white-space: nowrap;
}

.curriculum-item__preview ~ .curriculum-item__time {
    margin-left: 0;
}

.curriculum-item:not(:has(.curriculum-item__preview)) .curriculum-item__time {
    margin-left: auto;
}

/* 리뷰 */
/* 리뷰 작성 박스 */
.review-write {
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}
.review-write__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.review-write__name {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
}
.review-write__stars {
    display: flex;
    gap: 2px;
}
.review-write__stars img {
    width: 16px;
    height: 16px;
}
.review-write__textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 13px;
    color: #AAAAAA;
    min-height: 24px;
    font-family: var(--font-base);
    background: transparent;
    line-height: 1.6;
}
.review-write__footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #EEEEEE;
    padding-top: 12px;
    margin-top: 8px;
}
.review-write__submit {
    height: 35px;
    padding: 0 20px;
    background: #f1f1f1;
    color: #BBB;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--font-base);
    cursor: pointer;
}

.review-item {
    padding: 20px 0;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    margin-bottom:20px;
}

.review-item__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E0E0E0;
    flex-shrink: 0;
    overflow: hidden;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-item__meta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.review-item__info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 18px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: -0.18px;
    flex-shrink: 0;
}

.review-badge--learner    { background: #F7FBFF; color: #2BACF4; }
.review-badge--instructor { background: #F8F5FF; color: #7954C6; }
.review-badge--admin      { background: #FFEAEA; color: #FC5758; }

.review-item__name {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
}

.review-item__stars {
    display: flex;
    gap: 2px;
}

.review-item__stars img {
    width: 16px;
    height: 16px;
}

.review-item__stars img.star-empty {
    filter: brightness(0) invert(0.93);
}

.review-item__time {
    font-size: 12px;
    color: #AAAAAA;
}

.review-item__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.review-item__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}

.review-item__btn--reply img {
    width: 14px;
    height: 14px;
}

.review-item__btn--dot img {
    width: 12px;
    height: 12px;
}

.review-item__text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    padding-left: 52px;
}

/* 리뷰 수정 영역 */
.review-edit {
    margin-top: 12px;
    padding-left: 52px;
}

.review-edit__textarea {
    width: 100%;
    background: #F8F8F8;
    border:1px solid #F8F8F8;
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 13px;
    font-family: var(--font-base);
    color: #333333;
    line-height: 1.4;
    resize: none;
    outline: none;
    min-height: 60px;
}

.review-edit__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.review-edit__cancel {
    height: 36px;
    padding: 0 20px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--color-primary);
    font-size: 13px;
    font-family: var(--font-base);
    font-weight: 500;
    cursor: pointer;
}

.review-edit__submit {
    height: 36px;
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 13px;
    font-family: var(--font-base);
    font-weight: 500;
    cursor: pointer;
}

/* 리뷰 답글 */
.review-reply {
    margin-top: 16px;
    background: #F8F8F8;
    border-radius: 8px;
    padding: 16px;
}

.review-reply__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.review-reply__logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.review-reply__logo img { width: 100%; height: 100%; object-fit: cover; }

.review-reply__name {
    font-size: 13px;
    font-weight: 600;
    color: #333333;
}

.review-reply__date {
    font-size: 12px;
    color: #AAAAAA;
    margin-left: auto;
}

.review-reply__text {
    font-size: 14px;
    color: #555555;
    line-height: 1.7;
}

/* 문의하기 */
.qna-item {
    border-bottom: 1px solid #EEEEEE;
}

.qna-item__q {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    cursor: pointer;
    font-size: 14px;
    color: #333333;
}

.qna-item__badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qna-item__a {
    background: #F8F8F8;
    padding: 16px 20px;
    font-size: 14px;
    color: #555555;
    line-height: 1.7;
    border-radius: 0 0 6px 6px;
    margin-bottom: 8px;
}

/* 우측 사이드바 */
.detail-sidebar {
    width: 500px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-height) + 20px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-sidebar__box {
    border: 1px solid #EEEEEE;
    border-radius: 12px;
    padding: 28px 24px;
    background: #FFFFFF;
}

/* 뱃지 행 */
.sidebar-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.sidebar-badges .badge {
    width: auto;
    padding: 0 16px;
    height: 32px;
    font-size: 12px;
}

.sidebar-badge-public {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    background: var(--color-primary);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
}

.sidebar-badge-public img { width: 14px; height: 14px; }

/* 제목 */
.detail-sidebar__title {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    line-height: 1.4;
    margin-bottom: 12px;
    letter-spacing: -0.36px;
}

/* 별점 */
.detail-sidebar__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

/* 가격 */
.detail-sidebar__price {
    text-align: right;
    margin-bottom: 20px;
}

.detail-sidebar__original {
    font-size: 13px;
    color: #AAAAAA;
    text-decoration: line-through;
    margin-bottom: 4px;
}

.detail-sidebar__price-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}

.detail-sidebar__discount {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-primary);
}

.detail-sidebar__final {
    font-size: 30px;
    font-weight: 700;
    color: #222222;
}

/* 구매하기 버튼 */
.sidebar-btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    background: var(--color-primary);
    border-radius: 8px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    transition: opacity 0.15s;
}

.sidebar-btn-buy:hover { opacity: 0.88; }
.sidebar-btn-buy img { width: 20px; height: 15.556px; flex-shrink: 0; filter: brightness(0) invert(1); }

/* 찜하기 / 공유하기 */
.sidebar-btn-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.sidebar-btn-sub {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
    transition: background 0.15s;
}

.sidebar-btn-sub:hover { background: #F8F8F8; }
.sidebar-btn-sub img { width: 16px; height: 16px; }

/* 멤버십 FREE */
.sidebar-membership {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #F8F5FF;
    border-radius: 8px;
    margin-bottom: 20px;
}

.sidebar-membership__badge {
    flex-shrink: 0;
    height: 28px;
    padding: 0 12px;
    background: var(--color-primary);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

.sidebar-membership__text {
    font-size: 13px;
    color: #555555;
}

/* 정보 목록 */
.sidebar-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #F5F5F5;
    font-size: 14px;
}

.sidebar-info-item:last-child { border-bottom: none; }

.sidebar-info-item img {
    width: 16px;
    height: 16px;
    opacity: 0.5;
    flex-shrink: 0;
}

.sidebar-info-item__label {
    color: #888888;
    width: 70px;
    flex-shrink: 0;
}

.sidebar-info-item__value {
    color: #333333;
    font-weight: 400;
}

/* 쿠폰 박스 */
.sidebar-coupon-box {
    border: 1px solid #EEEEEE;
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
}

.sidebar-coupon-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #F0F0F0;
}

.sidebar-coupon-item:last-child { border-bottom: none; }

.sidebar-coupon-item__ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.sidebar-coupon-item__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.sidebar-coupon-item__min {
    font-size: 11px;
    color: #AAAAAA;
}

.sidebar-coupon-item__name {
    font-size: 15px;
    font-weight: 600;
    color: #222222;
}

.sidebar-coupon-item__amount {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
    white-space: nowrap;
}

.sidebar-coupon-item__dl {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.sidebar-coupon-item__dl:hover { opacity: 0.85; }
.sidebar-coupon-item__dl img { width: 16px; height: 16px; filter: brightness(0) invert(1); }

/* =====================================================
   RESTRICT PAGE — 서비스 이용 제한
===================================================== */
.restrict-page {
    min-height: calc(100vh - 360px);
    background: linear-gradient(135deg, #EDE9FF 0%, #FFE9E9 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 40px 60px;
    gap: 48px;
}

.restrict-content {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 960px;
    width: 100%;
}

.restrict-illust {
    flex-shrink: 0;
}

.restrict-img {
    width: 340px;
    height: auto;
}

.restrict-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.restrict-title {
    font-size: 30px;
    color: var(--color-gray);
    line-height: 1.5;
    letter-spacing: -0.5px;
}

.restrict-title strong {
    font-weight: 700;
}

.restrict-desc {
    font-size: 30px;
    color: var(--color-gray);
    line-height: 1.5;
    letter-spacing: -0.5px;
}

.restrict-notice {
    font-size: var(--font-b2);
    color: #AAAAAA;
    text-align: center;
}

/* =====================================================
   AUTH PAGE — 회원가입 / 로그인
===================================================== */
.auth-body {
    background: #F2F2F2;
    min-height: 100vh;
}

.auth-breadcrumb {
    position: fixed;
    top: 16px;
    left: 20px;
    font-size: var(--font-b2);
    color: #AAAAAA;
}

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 16px 160px;
}

.auth-card {
    width: 640px;
    background: #FFFFFF;
    border-radius: 30px;
    padding: 50px 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.06);
}

.auth-logo {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.auth-logo img {
    width: 114px;
    height: 20px;
}

.auth-title {
    font-size: var(--font-h2);
    font-weight: 500;
    color: var(--color-gray);
    letter-spacing: -0.96px;
    line-height: 1.5;
    text-align: center;
    align-self: stretch;
    margin: 0;
}

.auth-google-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-social-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: var(--font-h5);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    letter-spacing: -0.2px;
    overflow: hidden;
}

.auth-btn-ico {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 20px;
}

.auth-btn--google {
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    color: #333333;
}

.auth-btn--kakao {
    background: #FEF124;
    color: #191919;
}

.auth-btn--naver {
    background: #03C75A;
    color: #FFFFFF;
}

.auth-btn--apple {
    background: #000000;
    color: #FFFFFF;
}

.auth-btn--facebook {
    background: #0866FF;
    color: #FFFFFF;
}

.auth-recent-badge {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.auth-recent-badge__nub {
    width: 6px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

.auth-recent-badge__text {
    display: flex;
    padding: 5px 12px;
    align-items: center;
    border-radius: 3px;
    background: #7954C6;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.24px;
    line-height: 1.5;
    white-space: nowrap;
}

.auth-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-b2);
    font-weight: 500;
    color: #888888;
    line-height: 1.5;
    letter-spacing: -0.48px;
}

.auth-info-ico {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* =====================================================
   AUTH AGREEMENT PAGE — 약관 동의
===================================================== */
.agree-section {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.agree-checkbox {
    width: 20px;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid #CCCCCC;
    border-radius: 4px;
    background: #FFFFFF;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.agree-checkbox:checked {
    background: #FFFFFF;
    border-color: #CCCCCC;
}

.agree-checkbox:checked::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 10px;
    border-right: 2px solid #555555;
    border-bottom: 2px solid #555555;
    transform: translate(-50%, -50%) rotate(45deg);
}

.agree-all {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    border-bottom: 1px solid #EEEEEE;
    cursor: pointer;
}

.agree-all-text {
    font-size: var(--font-h5);
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.6px;
    line-height: 1.5;
}

.agree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

.agree-item--last { border-bottom: none; }

.agree-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    height: 100%;
    cursor: pointer;
}

.agree-badge {
    display: flex;
    width: 45px;
    height: 25px;
    padding: 3.5px 11px 3.5px 13px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    font-size: var(--font-b2);
    font-weight: 500;
    color: #FFFFFF;
    flex-shrink: 0;
}

.agree-badge--required { background: #FC5758; }
.agree-badge--optional { background: #2BACF4; }

.agree-label {
    font-size: var(--font-h5);
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.6px;
    line-height: 1.5;
}

.agree-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 0 5px 5px;
    flex-shrink: 0;
}

.agree-submit-btn {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 5px;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: -1px;
    transition: opacity 0.15s ease;
}

.agree-submit-btn:hover { opacity: 0.88; }

.agree-submit-ico {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1);
}


/* =====================================================
   AUTH AGREEMENT MODAL — 약관 상세 모달
===================================================== */
.modal-overlay {
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.agreement-modal {
    width: 640px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.agreement-modal__header {
    display: flex;
    padding: 30px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.agreement-modal__title {
    font-size: 20px;
    font-weight: 500;
    color: #323232;
    letter-spacing: -0.8px;
    line-height: 1.5;
    margin: 0;
}

.agreement-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.agreement-modal__close img {
    width: 17px;
    height: 17px;
}

.agreement-modal__body {
    display: flex;
    padding: 0 30px 30px 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.agreement-modal__content {
    height: 400px;
    padding: 20px;
    border-radius: 5px;
    background: #F8F8F8;
    overflow-y: auto;
    align-self: stretch;
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    line-height: 1.8;
    letter-spacing: -0.26px;
}

.agreement-modal__content p {
    margin-bottom: 14px;
}

.agreement-modal__content strong {
    font-weight: 600;
    display: block;
    margin-top: 20px;
    margin-bottom: 6px;
}

.agreement-modal__agree {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 5px;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: -1px;
    transition: opacity 0.15s ease;
}

.agreement-modal__agree:hover { opacity: 0.88; }

.agreement-modal__agree-ico {
    width: 14px;
    height: 10px;
}


/* =====================================================
   COMMUNITY PAGE
===================================================== */

.page-banner--community {
    background-image: url('../src/images/community-index-banner.png');
}

.page-banner--notice {
    background-image: url('../src/images/notice-index-banner.png');
}

.page-banner--faq {
    background-image: url('../src/images/top-img-faq.png');
}

.page-banner--board {
    background-image: url('../src/images/board-index-banner.png');
}

.community-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.community-post-lock {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.community-post-title--locked {
    display: flex;
    align-items: center;
    gap: 6px;
}

.community-content {
    max-width: 1440px;
    width: 100%;
    margin: 80px auto 150px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.community-title {
    font-size: var(--font-h1);
    font-weight: 500;
    color: #333333;
    line-height: 150%;
    letter-spacing: -1.7px;
}

.community-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 카드 */
.community-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 50px;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    padding: 30px;
}

/* 왼쪽 컬럼 */
.community-card__left {
    flex: 0 0 460px;
    width: 460px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 썸네일 */
.community-card__thumb {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #D8D8D8;
}

.community-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.community-card__thumb-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 20px;
    font-size: 18px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.72px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 구독중 배지 (썸네일 내부 절대 위치) */
.community-badge--active {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 25px;
    background: #31AD60;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.39px;
    z-index: 1;
}

/* 구독 시작하기 버튼 */
.community-btn--subscribe {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-primary);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: -1px;
    transition: opacity 0.15s ease;
}

.community-btn--subscribe:hover { opacity: 0.88; }

.community-btn--subscribe img {
    width: 15px;
    height: 15px;
}

/* 바로가기 버튼 */
.community-btn--goto {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-primary);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.64px;
    transition: opacity 0.15s ease;
}

.community-btn--goto:hover { opacity: 0.88; }

.community-btn--goto img {
    width: 10px;
    height: 9px;
    filter: brightness(0) invert(1);
}

/* 구독 정보 */
.community-sub-info {
    display: flex;
    flex-direction: column;
}

.community-sub-row {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 10px;
    border-bottom: 1px solid #EEEEEE;
}

.community-sub-row:last-child {
    border-bottom: none;
}

.community-sub-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.community-sub-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.community-sub-label {
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.52px;
    flex: 1;
}

.community-sub-value {
    font-size: 13px;
    font-weight: 700;
    color: #BBBBBB;
    letter-spacing: -0.26px;
    line-height: 150%;
    flex-shrink: 0;
}

.community-sub-value--primary {
    color: var(--color-primary);
}

.community-sub-value--alert {
    color: #FC5758;
}

/* 오른쪽 컬럼 래퍼 */
.community-card__right-col {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 50px;
    min-width: 0;
}

/* 정보 박스 (테두리) */
.community-card__right {
    display: flex;
    padding: 50px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 20px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
    flex: 1;
}

/* 카테고리 */
.community-card__category {
    font-size: 15px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.6px;
}

/* 타이틀 + 가격 행 */
.community-card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEEEEE;
}

/* 상품명 */
.community-card__name {
    font-size: var(--font-h1);
    font-weight: 700;
    color: #333333;
    letter-spacing: -1.36px;
}

/* 가격 */
.community-card__price {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.96px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 설명 */
.community-card__desc {
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.26px;
    line-height: 1.65;
    width: 100%;
}

/* 혜택 섹션 */
.community-benefits-section {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.community-benefits-heading {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #EEEEEE;
    font-size: var(--font-h2);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.96px;
    width: 100%;
    box-sizing: border-box;
}

.community-benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 20px 0;
}

.community-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.community-benefit__icon {
    width: 25px;
    height: 25px;
    border-radius: 50px;
    border: 1px solid #FC5758;
    background: #FFF6F6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
}

.community-benefit__icon img {
    width: 15px;
    height: 15px;
    display: block;
    flex-shrink: 0;
}

.community-benefit__text {
    font-size: 15px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.6px;
}


/* =====================================================
   COMMUNITY LIST PAGE
===================================================== */

.community-list-content {
    max-width: 1440px;
    width: 100%;
    margin: 80px auto 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

/* 구독정보 바 */
.community-list-sub-bar {
    width: 100%;
    height: 80px;
    padding: 0 20px 0 40px;
    border-radius: 10px;
    background: #F8F8F8;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.community-list-sub-bar__inner {
    display: flex;
    align-items: center;
    gap: 100px;
    width: 100%;
}

.community-list-sub-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.community-list-sub-label img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.community-list-sub-label__text {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.8px;
    line-height: 150%;
    white-space: nowrap;
}

.community-list-sub-name {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: -0.8px;
    line-height: 150%;
    white-space: nowrap;
    margin-left: 10px;
}

.community-list-sub-items {
    display: flex;
    align-items: center;
    gap: 50px;
}

.community-list-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.community-list-sub-badge {
    display: flex;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    height: 30px;
    border-radius: 30px;
    background: #555555;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: -0.6px;
}

.community-list-sub-badge--primary {
    background: var(--color-primary);
}

.community-list-sub-value {
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    letter-spacing: -0.8px;
    line-height: 150%;
    white-space: nowrap;
}

/* 필터/검색 바 */
.community-list-filter {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.community-list-sort {
    position: relative;
    width: 130px;
    height: 40px;
    flex-shrink: 0;
}

.community-list-sort-select {
    width: 100%;
    height: 100%;
    padding: 0 32px 0 14px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    background: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #333333;
    letter-spacing: -0.48px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.community-list-sort-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 12px;
    height: 8px;
}

.community-list-search {
    display: flex;
    align-items: center;
    gap: 10px;
}

.community-list-search-input {
    width: 419px;
    height: 40px;
    padding: 0 26px 0 20px;
    border: 1px solid #EEEEEE;
    border-right: none;
    border-radius: 0;
    background-color: #FEFDFE;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='40'><path d='M20 0A20 20 0 0 0 20 40z' fill='white'/><path d='M20 0A20 20 0 0 0 20 40' stroke='rgb(238,238,238)' stroke-width='1' fill='none'/></svg>");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 20px 40px;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    letter-spacing: -0.24px;
    outline: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.community-list-search-input::placeholder {
    color: #BBBBBB;
}

.community-list-search-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #EEEEEE;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.community-list-search-btn img {
    width: 24px;
    height: 23px;
}

/* 게시글 목록 */
.community-post-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.community-post-item {
    width: 100%;
    padding: 30px;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
    cursor: pointer;
    transition: background-color 0.15s;
}

.community-post-item:hover {
    background-color: #F8F8F8;
}

/* 게시글 메타 */
.community-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.community-post-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.community-post-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.community-post-role {
    width: 40px;
    height: 18px;
    padding: 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    color: #2BACF4;
    line-height: 150%;
    letter-spacing: -0.18px;
    text-align: center;
    white-space: nowrap;
    background: #F7FBFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.community-post-role--teacher {
    background: #F8F5FF;
    color: #7954C6;
}

.community-post-role--operator {
    background: #FFF0F5;
    color: #E91E8C;
}

.community-post-role--admin {
    background: #FFEDF9;
    color: #EE53B5;
}

.community-post-author {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
}

.community-post-time {
    font-size: 12px;
    font-weight: 400;
    color: #6A697C;
    letter-spacing: -0.48px;
    line-height: 150%;
}

.community-post-stats {
    display: flex;
    align-items: center;
    gap: 20px;
}

.community-post-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    line-height: 20px;
    letter-spacing: -0.65px;
}

.community-post-stat img {
    width: 14px;
    height: 14px;
}

/* 게시글 콘텐츠 */
.community-post-content {
    display: flex;
    align-items: flex-start;
    gap: 100px;
}

.community-post-text {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.community-post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.8px;
    line-height: 150%;
    align-items: flex-start;
    gap: 8px;
}

.community-post-title--pinned {
    display: flex;
    align-items: center;
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.community-post-pin {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.community-post-body {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    letter-spacing: -0.26px;
    line-height: 150%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-post-thumb {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: lightgray 50% / cover no-repeat;
}

.community-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 더보기 버튼 */
.community-load-more-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 50px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    color: #BBBBBB;
    letter-spacing: -1px;
    line-height: normal;
    box-sizing: border-box;
}

.community-load-more-btn img {
    width: 12px;
    height: 8px;
}

/* 글쓰기 버튼 행 */
.community-write-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
}

.community-write-btn {
    display: flex;
    width: 150px;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 5px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.68px;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
}

.community-write-btn img {
    width: 14px;
    height: 14px;
}


/* =====================================================
   COMMON BUTTONS
===================================================== */

/* 공통 기본 버튼 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 150px;
    height: 50px;
    padding: 5px;
    border-radius: 5px;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.68px;
    line-height: normal;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    border: none;
}

/* Primary — 보라 채움 (저장하기, 글쓰기 등) */
.btn--primary {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* Outline — 보라 테두리 (바로가기, 더보기, 이전 등) */
.btn--outline {
    background: #FFFFFF;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

/* Dark — 어두운 채움 (파일선택 등) */
.btn--dark {
    background: #555555;
    color: #FFFFFF;
}

.btn img {
    flex-shrink: 0;
}


/* =====================================================
   COMMUNITY ADD PAGE (글쓰기)
===================================================== */

.community-add-content {
    max-width: 1440px;
    width: 100%;
    margin: 80px auto 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    box-sizing: border-box;
}

/* 에디터 전체 래퍼 */
.write-editor-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-self: stretch;
}

/* 제목 행 */
.write-title-row {
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    box-sizing: border-box;
}

/* 위지윅 에디터 박스 (툴바 + 본문) */
.write-editor-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.write-title-label {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.8px;
    line-height: 150%;
    flex-shrink: 0;
    cursor: default;
    white-space: nowrap;
}

.write-title-input {
    flex: 1 0 0;
    height: 50px;
    border: 0.6px solid #EEEEEE;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: var(--font-base);
    font-size: 15px;
    color: #333333;
    letter-spacing: -0.3px;
    padding: 0 20px;
    outline: none;
    box-sizing: border-box;
}

/* 비밀글 토글 */
.write-secret-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}

.write-secret-toggle input[type="checkbox"] {
    display: none;
}

.write-secret-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: #DDDDDD;
    border-radius: 12px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.write-secret-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: left 0.2s;
}

.write-secret-toggle input[type="checkbox"]:checked + .write-secret-slider {
    background: var(--color-primary);
}

.write-secret-toggle input[type="checkbox"]:checked + .write-secret-slider::after {
    left: 23px;
}

.write-secret-text {
    font-size: 15px;
    color: #555555;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.write-title-input::placeholder {
    color: #333333;
    opacity: 0.5;
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.52px;
}

/* 위지윅 툴바 */
.write-toolbar {
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    background: #F8F8F8;
    border: 1px solid #EEEEEE;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.write-tb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 14px;
    color: #555555;
    flex-shrink: 0;
    padding: 0;
}

.write-tb-btn:hover {
    background: #EEEEEE;
}

.write-tb-btn--b { font-weight: 700; }
.write-tb-btn--i { font-style: italic; font-family: Georgia, serif; }
.write-tb-btn--u { text-decoration: underline; }
.write-tb-btn--s { text-decoration: line-through; }
.write-tb-btn--tx { font-size: 12px; font-weight: 500; }

.write-tb-sep {
    width: 1px;
    height: 20px;
    background: #DDDDDD;
    flex-shrink: 0;
    margin: 0 4px;
}

/* 에디터 내용 영역 */
.write-editor-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 100px;
    padding: 30px;
    min-height: 280px;
    align-self: stretch;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
    box-sizing: border-box;
}

.write-editor-placeholder p {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #BBBBBB;
    letter-spacing: -0.26px;
    line-height: 1.65;
}

.write-preview-btn {
    align-self: center;
    flex-shrink: 0;
    display: flex;
    height: 50px;
    padding: 0 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    background: #FFFFFF;
    color: var(--color-primary);
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.3px;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.write-preview-btn img {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.write-usage {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.26px;
}

.write-usage__used {
    color: #212121;
}

.write-usage__total {
    color: #BDBDBD;
}

/* 파일 등록 섹션 */
.write-file-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

.write-file-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.write-file-label {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.8px;
    line-height: 150%;
}

.write-file-btn {
    display: flex;
    width: 150px;
    height: 50px;
    padding: 5px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #555555;
    border: none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.3px;
    cursor: pointer;
    box-sizing: border-box;
}

.write-file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.write-file-item {
    display: flex;
    width: 360px;
    height: 50px;
    padding: 0 20px;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.write-file-ico {
    width: 13px;
    height: 16px;
    flex-shrink: 0;
}

.write-file-name {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: normal;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.write-file-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    margin-left: auto;
}

.write-file-remove img {
    width: 32px;
    height: 32px;
}

.write-file-preview {
    max-width: 360px;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    font-size: 13px;
    color: #888888;
    letter-spacing: -0.26px;
    box-sizing: border-box;
}

/* 저장하기 행 */
.write-submit-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
}

.write-submit-btn {
    display: flex;
    width: 150px;
    height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 5px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.68px;
    cursor: pointer;
}


/* =====================================================
   COMMUNITY DETAIL PAGE
===================================================== */

.community-detail-content {
    max-width: 1440px;
    width: 100%;
    margin: 80px auto 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.community-detail-content .community-title {
    margin-bottom: 30px;
}

/* 제목 행 */
.community-detail-title-row {
    display: flex;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}

.community-detail-title-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.community-detail-pinned-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.community-detail-pin {
    width: 7px;
    height: 10px;
    flex-shrink: 0;
}

.community-detail-pinned {
    color: var(--color-primary);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.52px;
    white-space: nowrap;
    flex-shrink: 0;
}

.community-detail-title {
    color: #333333;
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.96px;
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-detail-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.community-detail-menu-btn img {
    width: 12px;
    height: 12px;
}

/* 작성자 행 */
.community-detail-author-row {
    display: flex;
    align-items: center;
    padding: 20px 0;
    gap: 10px;
    align-self: stretch;
}

.community-detail-meta-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.community-detail-meta {
    color: #555555;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.65px;
}

/* 본문 */
.community-detail-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 0;
    min-height: 400px;
    width: 100%;
    border-bottom: 1px solid #EEEEEE;
    box-sizing: border-box;
}

.community-detail-body-text {
    color: #333333;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.26px;
    margin: 0;
}

/* 첨부파일 */
.community-detail-attachments {
    margin-top: 50px;
    width: 100%;
}

.community-detail-attachments-title {
    color: #333333;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.8px;
    margin: 0 0 20px;
}

.community-detail-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.community-detail-attachment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding: 0 20px;
    background: #F8F8F8;
    height: 50px;
    box-sizing: border-box;
}

.community-detail-attachment-file {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.community-detail-attachment-file img {
    width: 13px;
    height: 16px;
    flex-shrink: 0;
}

.community-detail-attachment-name {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    letter-spacing: -0.32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-detail-attachment-download {
    font-size: 12px;
    font-weight: 500;
    color: #7954C6;
    letter-spacing: -0.48px;
    line-height: 150%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.community-detail-attachment-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.community-detail-attachment-btn img {
    width: 12px;
    height: 13px;
}


/* 댓글 섹션 */
.community-detail-comments {
    margin-top: 50px;
    width: 100%;
}

.community-detail-comments-title {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.96px;
    margin: 0 0 20px;
}

/* 댓글 입력 박스 */
.community-detail-comment-input {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
    margin: 0 10px 20px;
    box-sizing: border-box;
}

.community-detail-comment-input-header {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.community-detail-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.community-detail-star {
    width: 14px;
    height: 14px;
}

.community-detail-star--empty {
    filter: grayscale(1) opacity(0.3);
}

.community-detail-comment-textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #EEEEEE;
    background: transparent;
    resize: none;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    letter-spacing: -0.65px;
    outline: none;
    height: 35px;
    padding-bottom: 20px;
    box-sizing: content-box;
    align-self: stretch;
}

.community-detail-comment-textarea::placeholder {
    color: #888888;
}

.community-detail-comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.community-detail-add-image-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.community-detail-add-image-btn img {
    width: 20px;
    height: 20px;
}

.board-detail-comment-actions .community-detail-add-image-btn,
.board-detail-edit-actions .community-detail-add-image-btn,
.board-detail-reply-actions .community-detail-add-image-btn {
    margin-right: auto;
}

.comment-mention {
    color: #7954C6;
    font-size: 13px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.26px;
}

.community-detail-submit-btn {
    display: flex;
    width: 70px;
    height: 35px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 5px;
    background: #F1F1F1;
    color: #BBBBBB;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.26px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 댓글 목록 */
.community-detail-comment-list {
    display: flex;
    flex-direction: column;
}

.community-detail-comment-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 10px;
    border-top: 1px solid #EEEEEE;
    align-self: stretch;
}

.community-detail-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.community-detail-comment-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.community-detail-comment-rating {
    color: #333333;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.65px;
}

.community-detail-comment-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.community-detail-comment-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 13px;
    color: #555555;
    padding: 0;
    letter-spacing: -0.26px;
}

.community-detail-comment-dots {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
}

.community-detail-comment-dots img {
    width: 12px;
    height: 12px;
}

/* 댓글 이미지 첨부 */
.community-detail-comment-media {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.community-detail-comment-thumb {
    width: 160px;
    border-radius: 5px;
    overflow: hidden;
}

.community-detail-comment-thumb img {
    width: 100%;
    display: block;
}

.community-detail-comment-link {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.26px;
    text-decoration: none;
}

/* 댓글 본문 */
.community-detail-comment-body {
    color: #333333;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.65px;
    margin: 0;
}

.community-detail-comment-more {
    color: #555555;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.65px;
    text-decoration: underline;
    margin-left: 4px;
}

/* 답글 토글 */
.community-detail-reply-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-primary);
    padding: 0;
    line-height: 20px;
    letter-spacing: -0.65px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 답글 목록 */
.community-detail-reply-list {
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    border-top: 1px solid #EEEEEE;
    padding-top: 20px;
}

.community-detail-reply-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px 20px;
    border-top: 1px solid #EEEEEE;
    padding-top: 20px;
}

.community-detail-reply-item:first-child {
    border-top: none;
    padding-top: 0;
}

/* 답글 입력 박스 */
.community-detail-reply-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0 20px 30px;
    border-radius: 5px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    margin: 20px 5px;
    box-sizing: border-box;
    align-self: stretch;
}

/* 댓글 수정 박스 */
.community-detail-edit-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-radius: 5px;
    background: #F8F8F8;
    margin: 0 5px;
    box-sizing: border-box;
    align-self: stretch;
}

.community-detail-reply-textarea,
.community-detail-edit-textarea {
    width: 100%;
    border: none;
    background: transparent;
    resize: none;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    line-height: 150%;
    letter-spacing: -0.26px;
    outline: none;
    min-height: 60px;
    align-self: stretch;
    box-sizing: border-box;
}

.community-detail-reply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.community-detail-edit-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
}

.community-detail-reply-btns {
    display: flex;
    gap: 10px;
    align-items: center;
}

.community-detail-cancel-btn {
    display: flex;
    width: 70px;
    height: 35px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid var(--color-primary);
    background: #FFFFFF;
    color: var(--color-primary);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.65px;
    cursor: pointer;
    white-space: nowrap;
}

.community-detail-save-btn {
    display: flex;
    width: 70px;
    height: 35px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: none;
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.65px;
    cursor: pointer;
    white-space: nowrap;
}


/* =====================================================
   RESPONSIVE — 태블릿 (max-width: 1024px)
===================================================== */
@media (max-width: 1024px) {

    /* Header */
    :root { --header-height: 70px; }

    .container { gap: 30px; padding: 0 24px; }

    .header-nav { gap: 18px; }
    .nav-item { font-size: 14px; }

    .header-logo { width: 130px; height: 42px; }

    /* Footer */
    .footer-inner { padding: 48px 24px; }

    .footer-info-row { flex-wrap: wrap; gap: 12px; }

    /* Page Banner */
    .page-banner { height: 160px; }
    .page-banner__inner { padding: 0 24px; }

    /* Course */
    .course-content { margin: 60px auto 100px; padding: 0 24px; }

    .course-filter { flex-wrap: wrap; gap: 12px; }
    .filter-search { width: 100%; }

    .course-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Community Add */
    .community-add-content { margin: 60px auto 100px; padding: 0 24px; }
    .write-title-label { font-size: 17px; }

    /* Community Detail */
    .community-detail-content { margin: 60px auto 100px; padding: 0 24px; }
    .community-detail-title { font-size: 20px; }
    .community-detail-attachment-list { width: 100%; }

    /* Community Index */
    .community-content { margin: 60px auto 100px; padding: 0 24px; }
    .community-card { gap: 30px; padding: 24px; }
    .community-card__left { flex: 0 0 320px; width: 320px; }
    .community-card__thumb { height: 190px; }
    .community-card__right { padding: 30px; }
    .community-card__right-col { gap: 30px; }

    /* Community List */
    .community-list-content { margin: 60px auto 100px; padding: 0 24px; }
    .community-list-sub-bar { padding: 0 20px; }
    .community-list-sub-bar__inner { gap: 40px; }
    .community-list-sub-label__text,
    .community-list-sub-name,
    .community-list-sub-value { font-size: 15px; letter-spacing: -0.6px; }
    .community-list-sub-items { gap: 24px; }
}


/* =====================================================
   RESPONSIVE — 모바일 (max-width: 768px)
===================================================== */
@media (max-width: 768px) {

    /* Header */
    :root { --header-height: 60px; }

    /* position:fixed로 전환 → iOS Safari에서 input focus 스크롤 시 header 위로 겹치는 현상 방지 */
    .site-header { position: fixed; top: 0; left: 0; right: 0; }
    body { padding-top: 60px; }

    .container { padding: 0 16px; gap: 12px; }

    .header-nav { display: none; }
    .page-banner { display: none; }

    .header-logo { width: 110px; height: 36px; }

    /* Footer */
    .footer-inner { padding: 40px 16px; gap: 28px; }

    .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }

    .footer-brand { flex-direction: column; align-items: flex-start; gap: 12px; }

    .footer-info-row { flex-direction: column; gap: 8px; }

    .footer-info-item { font-size: 13px; }

    .footer-terms-link,
    .footer-terms-sep { font-size: 13px; }

    .footer-copyright,
    .footer-disclaimer { font-size: 11px; }

    /* Page Banner */
    .page-banner { height: 120px; }
    .page-banner__inner { padding: 0 16px; }

    .page-banner__title { font-size: 20px; }

    /* Course */
    .course-content { margin: 40px auto 80px; padding: 0 16px; }

    h2 { font-size: 22px; letter-spacing: -0.8px; }

    .course-filter { flex-direction: column; align-items: stretch; gap: 10px; }

    .filter-left { flex-wrap: wrap; gap: 8px; }

    .filter-select { flex: 1; min-width: 120px; }

    .filter-search { width: 100%; }

    .course-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* 카드 */
    .course-card__body { padding: 14px 16px 16px; gap: 8px; }

    .price-discount,
    .price-final { font-size: 16px; }

    /* Restrict Page */
    .restrict-content { flex-direction: column; gap: 32px; text-align: center; }
    .restrict-img { width: 220px; }
    .restrict-title, .restrict-desc { font-size: 20px; }

    /* Auth Page */
    .auth-card { width: 100%; padding: 40px 24px; border-radius: 20px; }

    /* Community Add */
    .community-add-content { margin: 40px auto 80px; padding: 0 16px; gap: 20px; }
    .write-title-label { font-size: 15px; }
    .write-editor-body { min-height: 220px; padding: 20px; }

    /* Community Detail */
    .community-detail-content { margin: 40px auto 80px; padding: 0 16px; }
    .community-detail-title { font-size: 18px; letter-spacing: -0.72px; }
    .community-detail-comment-input { margin: 0 0 20px; }
    .community-detail-reply-list { padding-left: 20px; }
    .write-preview-btn { bottom: 20px; padding: 8px 20px; font-size: 14px; }
    .write-usage { bottom: 20px; right: 20px; }
    .write-toolbar { gap: 2px; }
    .write-tb-btn { width: 26px; height: 26px; font-size: 13px; }
    .write-file-item,
    .write-file-preview { max-width: 100%; }
    .write-submit-btn { width: 140px; height: 46px; font-size: 15px; }

    /* Community Index */
    .community-content { margin: 40px auto 80px; padding: 0 16px; }

    .community-card {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .community-card__left {
        flex: none;
        width: 100%;
    }

    .community-card__thumb { height: 200px; }

    .community-card__right-col {
        width: 100%;
        gap: 20px;
    }

    .community-card__right {
        padding: 20px;
        gap: 14px;
    }

    .community-card__title-row { flex-direction: column; gap: 8px; }

    .community-card__name { font-size: 22px; }

    .community-card__price { font-size: 18px; }

    /* Community List */
    .community-list-content { margin: 40px auto 80px; padding: 0 16px; gap: 16px; }

    .community-list-sub-bar {
        height: auto;
        padding: 16px;
    }

    .community-list-sub-bar__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .community-list-sub-label__text,
    .community-list-sub-name { font-size: 14px; letter-spacing: -0.56px; white-space: normal; }

    .community-list-sub-name { margin-left: 6px; }

    .community-list-sub-items { flex-wrap: wrap; gap: 8px 16px; }

    .community-list-sub-value { font-size: 14px; letter-spacing: -0.56px; }

    .community-list-sub-badge { font-size: 11px; padding: 0 8px; height: 22px; }

    .community-list-filter { flex-direction: column; gap: 10px; }

    .community-list-sort { width: 100%; }

    .filter-search { width: 100%; }

    .community-load-more-btn { font-size: 15px; }

    .community-write-row { margin-top: 0; }

    .community-post-content { gap: 5px; }
    .community-post-thumb { width: 72px; height: 72px; }

    /* ── 내 게시글 필터 ── */
    .posting-filter {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .posting-filter-left { flex-wrap: wrap; }

    .posting-search {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .posting-search-input {
        font-size: 13px;
        min-width: 0;
        width: 0;
    }

    /* ── 내 게시글 리스트 헤더 모바일 ── */
    .posting-item__head {
        flex-direction: column;
        height: auto;
        gap: 6px;
        align-items: flex-start;
    }

    .posting-item__category-title {
        width: 100%;
        overflow: hidden;
    }

    .posting-item__meta {
        justify-content: flex-start;
        gap: 10px;
    }

    .posting-item__body-wrap {
        gap: 16px;
    }

    .posting-item__thumb {
        width: 80px;
        height: 80px;
    }

    /* ── 공통 드로어 백드롭 ── */
    .drawer-backdrop {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background: rgba(0, 0, 0, 0.45);
        z-index: 295;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.26s ease, visibility 0s linear 0.26s;
        pointer-events: none;
    }

    .drawer-backdrop.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.26s ease, visibility 0s linear 0s;
        pointer-events: auto;
    }

    /* site-header는 z-index 유지 (모바일 드로어는 body 직속이므로 stacking context 무관) */
    .site-header { z-index: 310; }

    /* ── 햄버거 / 모바일 Nav 드로어 ── */
    .header-hamburger { display: flex; }

    /* PC용 header-nav는 모바일에서 숨김 — 드로어는 .mobile-nav-drawer 가 담당 */
    .header-nav { display: none; }

    .mobile-nav-drawer {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        position: fixed;
        top: 60px;
        right: 0;
        width: 60%;
        max-width: 240px;
        height: calc(100vh - 60px);
        background: #ffffff;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.10);
        z-index: 300;
        gap: 0;
        padding: 8px 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.26s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .mobile-nav-drawer.nav-visible {
        transform: translateX(0);
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 20px;
        font-size: 15px;
        border-bottom: 1px solid #f5f5f5;
        width: 100%;
        box-sizing: border-box;
        transition: background 0.15s ease, color 0.15s ease;
        color: #333333;
    }

    .nav-item:hover,
    .nav-item.active {
        background: var(--color-primary);
        color: #ffffff;
        font-weight: 500;
    }

    .nav-item .nav-icon {
        display: inline-flex;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.6;
    }

    /* ── 마이페이지 사이드바 모바일 (인라인 드롭다운) ── */
    .sidebar-mobile-toggle { display: none !important; }
    .sidebar-close-btn { display: none !important; }

    .mypage-layout {
        flex-direction: column;
        margin: 20px auto 60px;
        padding: 0 16px;
        gap: 0;
    }

    .left-sidebar {
        display: flex !important;
        flex-direction: column;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        z-index: auto;
        box-shadow: none;
        border-radius: 12px;
        border: 1px solid #eeeeee;
        padding: 0;
        margin-bottom: 20px;
        overflow: hidden;
        gap: 0;
        transition: none;
        background: #ffffff;
    }

    /* 프로필 바 - 항상 표시, 클릭 가능 */
    .left-sidebar__profile {
        height: 56px;
        padding: 0 14px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .left-sidebar__avatar { width: 34px; height: 34px; }
    .left-sidebar__email { display: none; }

    /* 펼침 영역: 기본 숨김 */
    .left-sidebar__divider,
    .left-sidebar__memberships,
    .left-sidebar__stats,
    .left-sidebar__nav {
        display: none !important;
    }

    /* 펼친 상태 */
    .left-sidebar.sidebar-expanded .left-sidebar__divider {
        display: block !important;
    }
    .left-sidebar.sidebar-expanded .left-sidebar__memberships {
        display: flex !important;
        padding: 10px 14px 6px;
    }
    .left-sidebar.sidebar-expanded .left-sidebar__stats {
        display: flex !important;
        padding: 0 14px 12px;
        margin-top: 0;
    }
    .left-sidebar.sidebar-expanded .left-sidebar__nav {
        display: flex !important;
        border-top: 1px solid #eeeeee;
        padding: 4px 0 6px;
    }

    .left-sidebar__nav-group-label { height: 32px; padding: 0 16px; }
    .left-sidebar__nav-item { height: 44px; }

    /* 화살표 (JS 주입) — 모바일에서만 표시 */
    .sidebar-profile-toggle {
        display: flex !important;
        align-items: center;
        margin-left: auto;
        padding: 6px;
        flex-shrink: 0;
        transition: transform 0.22s ease;
    }
    .left-sidebar.sidebar-expanded .sidebar-profile-toggle {
        transform: rotate(180deg);
    }

    .mypage-content { width: 100%; }

    .mypage-inner {
        padding: 20px 16px;
        gap: 16px;
        border-radius: 12px;
    }
}


/* =====================================================
   EMPTY STATE — 빈 목록 안내
===================================================== */

/* 전체형 (중앙 정렬, 아이콘 원 + 제목 + 설명) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 108px 0;
    gap: 20px;
    width: 100%;
}

.empty-state__icon {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: #F2F2F7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.empty-state__icon img {
    max-width: 90px;
    max-height: 90px;
}

/* free-icon-box-x.svg는 200×200 원이 SVG 내장 — 컨테이너 꽉 채움 */
.empty-state__icon img[src*="free-icon-box-x"] {
    width: 200px;
    height: 200px;
    max-width: none;
    max-height: none;
}

.empty-state__title {
    font-size: 34px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -1.36px;
    line-height: 150%;
    text-align: center;
}

.empty-state__desc {
    font-size: 24px;
    font-weight: 400;
    color: #555555;
    letter-spacing: -0.96px;
    line-height: 150%;
    text-align: center;
}

/* 인라인형 (아이콘 + 텍스트 가로 배치) */
.empty-inline {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 40px;
    border-radius: 10px;
    background: #F8F8F8;
}

.empty-inline__icon {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 25px;
}

.empty-inline__icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.empty-inline__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.empty-inline__title {
    font-size: 24px;
    font-weight: 700;
    color: #555555;
    letter-spacing: -0.96px;
    line-height: 150%;
}

.empty-inline__text {
    font-size: 18px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.72px;
    line-height: 150%;
}


/* =====================================================
   POPUP MODAL — 팝업 모달
===================================================== */
.popup-modal {
    width: 640px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.popup-modal__header {
    display: flex;
    padding: 30px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.popup-modal__title {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.8px;
    line-height: 150%;
}

.popup-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
}

.popup-modal__close img {
    width: 15px;
    height: 15px;
}

.popup-modal__body {
    padding: 0 30px;
}

.popup-modal__content {
    padding: 20px;
    border-radius: 10px;
    background: #F8F8F8;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    align-self: stretch;
    flex: 1 0 0;
}

.popup-modal__text {
    font-size: 13px;
    font-weight: 400;
    color: #555555;
    letter-spacing: -0.26px;
    line-height: 150%;
    flex: 1 0 0;
    margin: 0;
}

.popup-modal__footer {
    padding: 20px 30px 30px;
    display: flex;
    gap: 10px;
    align-self: stretch;
}

.popup-modal__btn {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 5px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -1px;
    border: none;
    cursor: pointer;
    line-height: normal;
}

.popup-modal__btn--cancel {
    background: #FFFFFF;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

/* =====================================================
   PACKAGE PRODUCT LIST MODAL
===================================================== */
.package-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.popup-modal--package-list {
    width: 1110px;
    max-width: 100%;
    max-height: 700px;
}

.popup-modal--package-list .popup-modal__body {
    padding: 0 30px 30px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.popup-modal__btn img {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.popup-modal__btn--confirm img {
    width: 14px;
    height: 10px;
}

/* =====================================================
   DIGITAL PRODUCT LIST MODAL
===================================================== */
.digital-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.popup-modal--digital-list {
    width: 980px;
    max-width: 100%;
    max-height: 700px;
}

.digital-list-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 30px 10px;
    align-self: stretch;
}

.digital-list-top__count {
    font-size: 15px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.6px;
    line-height: 150%;
}

.digital-list-top__count strong {
    font-weight: 700;
    color: #555555;
}

.btn-select-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 35px;
    padding: 0 14px;
    background: #FFFFFF;
    color: var(--btn-primary);
    border: 1px solid var(--btn-primary);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.52px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-select-dl img {
    width: 12px;
    height: 14px;
    flex-shrink: 0;
}

.btn-select-dl:hover { background: var(--color-primary-bg); }

.popup-modal--digital-list .popup-modal__body {
    padding: 0 30px 30px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.digital-list {
    border-top: 1px solid #EEEEEE;
}

.digital-list__row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #EEEEEE;
    box-sizing: border-box;
}

.digital-list__checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--btn-primary);
    cursor: pointer;
}

.digital-list__icon {
    width: 15px;
    height: 15px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
}

.digital-list__filename {
    flex: 1 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.52px;
    line-height: 150%;
}

.digital-list__row--gray .digital-list__filename { color: #BBBBBB; }
.digital-list__row--active .digital-list__filename { color: #333333; }

.digital-list__select-label {
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.52px;
    line-height: 150%;
}

.digital-list__count {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.52px;
    line-height: 150%;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.digital-list__count-num { color: #333333; }
.digital-list__count-total { color: #888888; }

.digital-list__row--gray .digital-list__count-num,
.digital-list__row--gray .digital-list__count-total { color: #BBBBBB; }

.btn-dl--gray {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100px;
    height: 35px;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
    background: #FFFFFF;
    color: #BBBBBB;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.52px;
    flex-shrink: 0;
    cursor: default;
}

.btn-dl--gray img {
    width: 12px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.45;
}

/* =====================================================
   TOAST POPUP — 토스트 팝업
===================================================== */
.toast-popup {
    display: flex;
    padding: 20px;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 1px dashed var(--color-primary);
    background: var(--color-primary-bg);
    align-self: stretch;
}

.toast-popup__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.toast-popup__text {
    flex: 1 0 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: -0.6px;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toast-popup__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.toast-popup__close img {
    width: 11px;
    height: 11px;
}


/* =====================================================
   PAYMENT BADGE — 결제 상태 배지
===================================================== */
.badge-payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.48px;
    white-space: nowrap;
    border: none;
}

.badge-payment--complete    { background: #F8F5FF; color: #7954C6; }
.badge-payment--cancel      { background: #F1F1F1; color: #888888; }
.badge-payment--fail        { background: #FFEAEA; color: #FC5758; }
.badge-payment--defer       { background: #FFF2CF; color: #FDBE1D; }
.badge-payment--unpaid      { background: #FFEAD2; color: #EA9635; }
.badge-payment--expired     { background: #F1F1F1; color: #888888; }
.badge-payment--card-cancel { background: #F1F1F1; color: #888888; }
.badge-payment--link        { background: none; color: #BBBBBB; text-decoration: underline; cursor: pointer; }


/* =====================================================
   COURSE CARD RIBBON — 상품 카드 리본 배지 (좌상단 삼각형)
   SVG path: M30.493 0L0 30.493V73L73 0H30.493Z → clip-path polygon
===================================================== */
.course-card__ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 73px;
    height: 73px;
    pointer-events: none;
    z-index: 1;
}

.course-card__ribbon::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(41.77% 0%, 0% 41.77%, 0% 100%, 100% 0%);
    opacity: 0.6;
}

.course-card__ribbon--normal::before  { background: #7954C6; }
.course-card__ribbon--live::before    { background: #FC5758; }
.course-card__ribbon--package::before { background: #2BACF4; }
.course-card__ribbon--digital::before { background: #555555; }
.course-card__ribbon--video::before   { background: #31AD60; }

.course-card__ribbon::after {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat, no-repeat;
    background-position: 66.6px 0, 0 67px;
    background-size: 6px 6px, 6px 6px;
}

.course-card__ribbon--normal::after  { background-image: linear-gradient(135deg, transparent 50%, rgba(94,63,159,0.6) 50%),  linear-gradient(135deg, transparent 50%, rgba(94,63,159,0.6) 50%); }
.course-card__ribbon--live::after    { background-image: linear-gradient(135deg, transparent 50%, rgba(212,66,67,0.6) 50%),  linear-gradient(135deg, transparent 50%, rgba(212,66,67,0.6) 50%); }
.course-card__ribbon--package::after { background-image: linear-gradient(135deg, transparent 50%, rgba(5,128,196,0.6) 50%),  linear-gradient(135deg, transparent 50%, rgba(5,128,196,0.6) 50%); }
.course-card__ribbon--digital::after { background-image: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.6) 50%),      linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.6) 50%); }
.course-card__ribbon--video::after   { background-image: linear-gradient(135deg, transparent 50%, rgba(26,120,62,0.6) 50%),  linear-gradient(135deg, transparent 50%, rgba(26,120,62,0.6) 50%); }

.course-card__ribbon span {
    display: block;
    position: absolute;
    width: 52px;
    top: 18px;
    left: 0px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 150%;
    letter-spacing: -0.24px;
    transform: rotate(-45deg);
    white-space: nowrap;
}


/* =====================================================
   DROPDOWN — 커스텀 드롭다운
===================================================== */
.dropdown {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

.dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 130px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    background: #FFFFFF;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.48px;
    cursor: pointer;
    white-space: nowrap;
}

.dropdown__trigger img {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.dropdown.open .dropdown__trigger img {
    transform: rotate(180deg);
}

.dropdown__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 8px;
    z-index: 50;
    overflow: hidden;
}

.dropdown.open .dropdown__trigger {
    border-color: var(--color-primary);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.dropdown.open .dropdown__panel {
    display: block;
    border-color: var(--color-primary);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: none;
}

.dropdown__item {
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.48px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.dropdown__item:hover {
    background: var(--color-primary-bg);
}

.dropdown__item.active {
    color: var(--color-primary);
    font-weight: 700;
    background: var(--color-primary-bg);
}

.dropdown--fit .dropdown__trigger { width: auto; min-width: 0; }

/* Context action panel — 수정/삭제 등 단순 액션 (standalone 표시용) */
.dropdown--ctx-panel {
    width: 120px;
    background: #FFF;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 단독 삭제 variant — 1:1문의 등 삭제 단독 표시 시 */
.dropdown--ctx-panel--solo {
    background: #F8F5FF;
    border-color: #7954C6;
}

.dropdown--ctx-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.6px;
    line-height: 150%;
    border-bottom: 1px solid #EEEEEE;
    cursor: pointer;
    transition: background 0.15s;
}

.dropdown--ctx-item:first-child {
    border-radius: 5px 5px 0 0;
}

.dropdown--ctx-item:last-child {
    border-bottom: none;
    border-radius: 0 0 5px 5px;
}

.dropdown--ctx-item:only-child {
    border-radius: 5px;
}

.dropdown--ctx-item--delete {
    color: #888888;
}

button.dropdown--ctx-item {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-bottom: 1px solid #DDDDDD;
    background: none;
    width: 100%;
}

.dropdown--ctx-item:hover {
    background: #F8F5FF;
    color: #7954C6;
    box-shadow: inset 0 0 0 1px #7954C6;
}

.dropdown--ctx-item.active {
    color: #7954C6;
    background: #F8F5FF;
    box-shadow: inset 0 0 0 1px #7954C6;
}

.inquiry-more__panel .dropdown--ctx-item {
    color: #7954C6;
}

.dropdown--ctx-panel--solo .dropdown--ctx-item {
    color: var(--color-primary);
}


/* =====================================================
   LEFT SIDEBAR — 좌측 프로필/네비게이션 메뉴
===================================================== */
.left-sidebar {
    display: flex;
    width: 300px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 10px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    overflow: hidden;
}

/* 프로필 영역 */
.left-sidebar__profile {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.left-sidebar__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #E0E0E0;
}

.left-sidebar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.left-sidebar__user {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 12px;
}

.left-sidebar__user-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.left-sidebar__role {
    display: flex;
    width: 50px;
    height: 24px;
    padding: 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    background: #F7FBFF;
    font-size: 9px;
    font-weight: 700;
    color: #2BACF4;
    letter-spacing: -0.18px;
    text-align: center;
    flex-shrink: 0;
}

.left-sidebar__name {
    font-size: 15px;
    font-weight: 700;
    color: #222222;
    letter-spacing: -0.3px;
}

.left-sidebar__email {
    font-size: 12px;
    color: #888888;
    letter-spacing: -0.24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.left-sidebar__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
}

.left-sidebar__logout img { width: 15px; height: 15px; }

/* 구분선 */
.left-sidebar__divider {
    align-self: stretch;
    height: 1px;
    background: #EEEEEE;
    flex-shrink: 0;
}

/* 멤버십/커뮤니티 바 */
.left-sidebar__memberships {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: stretch;
}

.left-sidebar__mem-bar {
    display: flex;
    height: 40px;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid #7954C6;
    background: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.left-sidebar__mem-bar:hover { background: var(--color-primary-bg); }

.left-sidebar__mem-name {
    font-size: 12px;
    font-weight: 500;
    color: #7954C6;
    letter-spacing: -0.48px;
}

.left-sidebar__mem-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #7954C6;
    letter-spacing: -0.48px;
}

.left-sidebar__mem-status img {
    width: 6px;
    height: 9px;
    flex-shrink: 0;
}

.left-sidebar__mem-bar--community { border-color: #CFA16D; }
.left-sidebar__mem-bar--community .left-sidebar__mem-name,
.left-sidebar__mem-bar--community .left-sidebar__mem-status { color: #CFA16D; }
.left-sidebar__mem-bar--community .left-sidebar__mem-status img {
    filter: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(650%) hue-rotate(357deg) brightness(95%) contrast(88%);
}

/* 통계 박스 */
.left-sidebar__stats {
    display: flex;
    align-self: stretch;
    gap: 5px;
    margin-top: -5px;
}

.left-sidebar__stat {
    flex: 1 0 0;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
}

.left-sidebar__stat-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.24px;
}

.left-sidebar__stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.96px;
    line-height: normal;
}

.left-sidebar__stat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: #FC5758;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: normal;
}

/* 내비게이션 */
.left-sidebar__nav {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.left-sidebar__nav-divider {
    height: 1px;
    background: #EEEEEE;
    align-self: stretch;
}

.left-sidebar__nav-group-label {
    display: flex;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    color: #888888;
    letter-spacing: -0.52px;
}

.left-sidebar__nav-item {
    display: flex;
    height: 50px;
    padding: 0 20px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.64px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.left-sidebar__nav-item:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.left-sidebar__nav-item.active {
    background: var(--color-primary-bg);
}

.left-sidebar__nav-item img {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.left-sidebar__nav-item img[src*="ico-lm-wish"] {
    width: 15px;
    height: 13px;
}

.left-sidebar__nav-item img[src*="ico-lm-coupon"] {
    width: 16px;
    height: 13px;
}

.left-sidebar__nav-item.active img {
    filter: brightness(0) saturate(100%) invert(34%) sepia(84%) saturate(364%) hue-rotate(226deg) brightness(90%) contrast(90%);
}


/* =====================================================
   CONTEXT ACTIONS — 수정/삭제 버튼 쌍
===================================================== */
.ctx-actions {
    display: flex;
    gap: 4px;
}

.ctx-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 32px;
    border-radius: 4px;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.26px;
    cursor: pointer;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
    color: #555555;
    transition: border-color 0.15s, color 0.15s;
}

.ctx-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.ctx-btn--active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #FFFFFF;
}


/* =====================================================
   GOODS LIST CARD — 마이페이지 상품 카드
===================================================== */
.goods-list {
    display: grid;
    grid-template-columns: repeat(3, 337px);
    gap: 20px;
}

.goods-card {
    display: flex;
    flex-direction: column;
    width: 337px;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}

/* --- Thumbnail --- */
.goods-card__thumb {
    position: relative;
    height: 190px;
    padding: 20px 20px 20px 20px;
    padding-top: 45px; /* 20px 기본 + 25px badge 영역 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #F2F2F2;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.goods-card__thumb-text {
    /* TEXT 프레임(125px) 내 수직 중앙 정렬 — margin-top 제거 */
}

.goods-card__thumb-title {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    line-height: 150%;
    letter-spacing: -0.6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.goods-card__thumb-desc {
    font-size: 15px;
    font-weight: 500;
    color: #888888;
    line-height: 150%;
    letter-spacing: -0.6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* --- Info (고정 높이 306px = padding 40px + content 266px) --- */
.goods-card__info {
    height: 306px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    flex-shrink: 0;
}

.goods-card__type {
    font-size: 15px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.3px;
    line-height: 150%;
}

.goods-card__title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-self: stretch;
    margin-bottom: 5px;
}

/* --- Meta 영역 (고정 높이 104px, 상단 정렬) --- */
.goods-card__meta {
    height: 104px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-self: stretch;
    overflow: hidden;
}

.goods-card__meta-row {
    display: flex;
    align-items: center;
}

.goods-card__meta-key {
    display: flex;
    width: 100px;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.goods-card__meta-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.goods-card__meta-label {
    font-size: 13px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.65px;
    white-space: nowrap;
}

.goods-card__meta-value {
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.65px;
}

/* --- 진도율 바 --- */
.goods-card__progress-track {
    flex: 1;
    height: 20px;
    border-radius: 100px;
    background: #F8F5FF;
    overflow: hidden;
}

.goods-card__progress-fill {
    height: 100%;
    border-radius: 100px;
    background: #7954C6;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 8px;
    min-width: 44px;
}

.goods-card__progress-pct {
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.22px;
    white-space: nowrap;
}

/* ============================================================
   MYPAGE
   ============================================================ */

.mypage-layout {
    max-width: 1440px;
    width: 100%;
    margin: 80px auto 150px;
    display: flex;
    align-items: stretch;
    gap: 30px;
}

.mypage-content {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mypage-inner {
    display: flex;
    flex: 1 0 0;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
}

.mypage-title {
    font-size: var(--font-h1);
    font-weight: 500;
    color: #333333;
    line-height: 150%;
    letter-spacing: -1.7px;
}

/* 마이페이지 사이드바 모바일 전용 요소 — PC에서 숨김 */
.sidebar-mobile-toggle {
    display: none;
}

/* JS가 주입하는 프로필 드롭다운 화살표 — 모바일 전용, PC에서 숨김 */
.sidebar-profile-toggle {
    display: none;
}

/* 사이드바 닫기 버튼 (JS 삽입) */
.sidebar-close-btn {
    display: none;
}

/* 내 게시글 탭 */
.posting-tabs {
    display: flex;
    align-self: stretch;
    border-bottom: 1px solid #EEEEEE;
}

.posting-tab {
    flex: 1 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    height: 60px;
    font-family: var(--font-base);
    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    color: #888888;
    letter-spacing: -1px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.posting-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* 필터 */
.posting-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.posting-filter-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.posting-filter-select-wrap {
    display: flex;
    width: 128px;
    height: 40px;
    padding: 0 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
}

.posting-filter-select {
    flex: 1;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.52px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}

.posting-filter-select-arrow {
    pointer-events: none;
    width: 12px;
    height: 8px;
    flex-shrink: 0;
}

.posting-reset-btn {
    display: flex;
    width: 100px;
    height: 40px;
    padding: 0 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #7954C6;
    background: #FFFFFF;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.52px;
    cursor: pointer;
}

.posting-search {
    display: flex;
    align-items: center;
    height: 40px;
    min-width: 360px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    overflow: hidden;
}

.posting-search-input {
    flex: 1;
    height: 100%;
    padding: 0 20px;
    border: none;
    outline: none;
    font-family: var(--font-base);
    font-size: 13px;
    color: #555555;
    letter-spacing: -0.52px;
}

.posting-search-input::placeholder { color: #BBBBBB; }

.posting-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    border: none;
    background: none;
    border-left: 1px solid #EEEEEE;
    cursor: pointer;
    flex-shrink: 0;
}

/* 게시글 목록 */
.posting-list {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 20px;
}

.posting-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
}

.posting-item__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    height: 40px;
}

.posting-item__category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.posting-item__category {
    overflow: hidden;
    color: #BBBBBB;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.6px;
    flex-shrink: 0;
}

.posting-item__title-text {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.posting-item__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.posting-item__date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    color: #555555;
    line-height: 20px;
    letter-spacing: -0.65px;
}

.posting-item__stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    color: #555555;
    line-height: 20px;
    letter-spacing: -0.65px;
}

.posting-item__stat img { width: 14px; height: 14px; }

.posting-item__body-wrap {
    display: flex;
    align-items: flex-start;
    gap: 100px;
    align-self: stretch;
}

.posting-item__body {
    flex: 1;
    font-size: 13px;
    font-weight: 400;
    color: #555555;
    line-height: 150%;
    letter-spacing: -0.26px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.posting-item__thumb {
    width: 100px;
    height: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.posting-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 게시글 목록 모바일 재정의 (PC 스타일 cascade 순서 보정) ── */
@media (max-width: 768px) {
    .posting-item__head {
        flex-direction: column !important;
        height: auto !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .posting-item__category-title {
        width: 100%;
        overflow: visible;
    }

    .posting-item__meta {
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .posting-search {
        min-width: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    .posting-search-input {
        min-width: 0 !important;
        width: 0;
        flex: 1;
    }

    .posting-item__body {
        min-width: 0;
    }

    .posting-item__body-wrap {
        gap: 12px !important;
    }

    .posting-item__thumb {
        width: 72px !important;
        height: 72px !important;
    }
}

@media (max-width: 1150px) {
    .goods-list { grid-template-columns: 1fr; }
    .goods-card { width: 100%; }
    .goods-card__info { height: auto; min-height: 306px; }
    .goods-card__meta { height: auto; min-height: 104px; }
}

/* =====================================================
   INQUIRY (1:1 문의내역)
   ===================================================== */

.inquiry-status-row {
    display: flex;
    gap: 10px;
    align-self: stretch;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #EEEEEE;
    background: #FFF;
}

.inquiry-status-card {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.inquiry-status-icon {
    display: flex;
    width: 80px;
    height: 80px;
    padding: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    background: #F8F8F8;
    flex-shrink: 0;
}

.inquiry-status-icon img {
    width: 30px;
    height: 30px;
}

.inquiry-status-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inquiry-status-label {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.inquiry-status-count {
    font-size: 24px;
    font-weight: 700;
    color: #888888;
    letter-spacing: -0.96px;
    line-height: 150%;
}

.inquiry-status-count--active {
    color: var(--color-primary, #7954C6);
}

.inquiry-search-wrap {
    display: flex;
    height: 40px;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
}

.inquiry-empty {
    display: flex;
    padding: 50px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
    min-height: 479px;
    border-radius: 10px;
    background: #F8F8F8;
}

.inquiry-empty__row {
    display: flex;
    align-items: center;
    gap: 30px;
}

.inquiry-empty__icon-wrap {
    display: flex;
    width: 100px;
    height: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #FFF;
    flex-shrink: 0;
}

.inquiry-empty__texts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inquiry-empty__title {
    font-size: 24px;
    font-weight: 700;
    color: #323232;
    letter-spacing: -0.96px;
    line-height: 150%;
}

.inquiry-empty__desc {
    font-size: 18px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.72px;
    line-height: 150%;
    margin-top: 4px;
}

/* ===== 문의 목록 ===== */
.inquiry-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.inquiry-status-count--pending {
    color: #FDBE1D;
}

.inquiry-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
}

.inquiry-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #EEEEEE;
    background: #FFF;
}

.inquiry-item__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inquiry-item__badge {
    display: flex;
    width: 60px;
    height: 30px;
    padding: 5px 15px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.48px;
    white-space: nowrap;
    flex-shrink: 0;
}

.inquiry-item__badge--pending {
    background: #FFF4D5;
    color: #FDBE1D;
}

.inquiry-item__badge--progress {
    background: #F8F5FF;
    color: #7954C6;
}

.inquiry-item__badge--done {
    background: #BBBBBB;
    color: #FFFFFF;
}

.inquiry-more {
    position: relative;
    margin-left: auto;
}

.inquiry-more__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.inquiry-more__panel {
    display: none;
    position: absolute;
    left: calc(100% + 2px);
    top: 0;
    z-index: 10;
    width: 120px;
    background: #F8F5FF;
    border: 1px solid #7954C6;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.inquiry-more.open .inquiry-more__panel {
    display: block;
}

.inquiry-item__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inquiry-item__title {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inquiry-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.inquiry-item__date,
.inquiry-item__count {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #555555;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.26px;
    line-height: 150%;
    white-space: nowrap;
}

.inquiry-item__body {
    color: #555555;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.65px;
    line-height: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .inquiry-status-row {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .inquiry-status-card {
        gap: 12px;
    }

    .inquiry-status-icon {
        width: 56px;
        height: 56px;
        padding: 10px;
        border-radius: 14px;
    }

    .inquiry-status-icon img {
        width: 36px;
        height: 36px;
    }

    .inquiry-status-label {
        font-size: 15px;
    }

    .inquiry-status-count {
        font-size: 20px;
    }

    .inquiry-search-wrap {
        height: auto;
    }

    .inquiry-empty {
        padding: 40px 0;
    }

    .inquiry-empty__row {
        gap: 20px;
        padding: 0 20px;
    }

    .inquiry-empty__icon-wrap {
        width: 80px;
        height: 80px;
    }

    .inquiry-empty__title {
        font-size: 16px;
    }

    .inquiry-empty__desc {
        font-size: 15px;
    }

    .inquiry-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .inquiry-item {
        padding: 20px;
        gap: 14px;
    }

    .inquiry-item__title-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .inquiry-item__title {
        font-size: 15px;
        white-space: normal;
    }

    .inquiry-item__meta {
        gap: 8px;
        flex-basis: 100%;
    }

    .inquiry-item__date,
    .inquiry-item__count {
        font-size: 13px;
    }

    .inquiry-item__body {
        font-size: 14px;
    }
}


/* =====================================================
   INQUIRY ADD FORM — 1:1 문의하기 폼
===================================================== */

.inquiry-add-form {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.inquiry-add-form__row {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 12px 0;
    border-bottom: 1px solid #EEEEEE;
}

.inquiry-add-form__row:first-child {
    border-top: 1px solid #EEEEEE;
}

.inquiry-add-form__label {
    width: 130px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.inquiry-add-form__field {
    flex: 1 0 0;
    display: flex;
    align-items: center;
}

/* 라디오 그룹 */
.inquiry-type-group {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 48px;
}

.inquiry-type-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.6px;
    user-select: none;
}

.inquiry-type-label input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #CCCCCC;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s;
}

.inquiry-type-label input[type="radio"]:checked {
    border-color: #7954C6;
}

.inquiry-type-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7954C6;
}

/* 경로 텍스트 */
.inquiry-add-form__path {
    font-size: 15px;
    font-weight: 400;
    color: #555;
    letter-spacing: -0.6px;
    line-height: 150%;
}

/* 제목 인풋 */
.inquiry-add-form__input {
    flex: 1 0 0;
    height: 50px;
    padding: 0 20px;
    border-radius: 8px;
    border: 0.6px solid #EEEEEE;
    background: #FFF;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    color: #333;
    letter-spacing: -0.6px;
    outline: none;
    box-sizing: border-box;
}

.inquiry-add-form__input::placeholder {
    color: #BBBBBB;
    font-weight: 400;
}

/* 이메일 텍스트 */
.inquiry-add-form__email {
    font-size: 15px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.6px;
}

/* 문의하기 버튼 행 */
.inquiry-add-submit {
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
}

/* 버튼 화살표 아이콘 */
.inquiry-submit-arrow {
    width: 9px;
    height: 8px;
    flex-shrink: 0;
}

/* 비활성(회색) 상태 */
.inquiry-submit-btn--inactive {
    background: var(--btn-disabled) !important;
    color: var(--btn-disabled-text) !important;
    cursor: not-allowed;
    pointer-events: none;
}

.inquiry-submit-arrow--gray { display: none; }
.inquiry-submit-btn--inactive .inquiry-submit-arrow--violet { display: none; }
.inquiry-submit-btn--inactive .inquiry-submit-arrow--gray { display: inline-block; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .inquiry-add-form__label {
        width: 90px;
        font-size: 15px;
        letter-spacing: -0.6px;
    }

    .inquiry-type-group {
        gap: 14px;
        flex-wrap: wrap;
        height: auto;
        padding: 8px 0;
    }

    .inquiry-type-label {
        font-size: 14px;
    }

    .inquiry-add-form__input {
        height: 44px;
        font-size: 14px;
    }

    .inquiry-add-form__path,
    .inquiry-add-form__email {
        font-size: 14px;
    }
}


/* =====================================================
   PROFILE PAGE
   ===================================================== */

/* 섹션 공통 */
.profile-section {
    width: 100%;
    margin-bottom: 50px;
}
.profile-section:last-of-type {
    margin-bottom: 0;
}

.profile-section__header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 20px;
}

.profile-section__title {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.8px;
    white-space: nowrap;
}

.profile-section__subtitle {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    letter-spacing: -0.52px;
}

/* ===== 아바타 영역 ===== */
.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 10px 0;
    margin-bottom: 20px;
}

.profile-avatar-wrap {
    position: relative;
    width: 118px;
    height: 118px;
    flex-shrink: 0;
}

.profile-avatar-wrap > img {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-camera-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #7954C6;
    border: 5px solid #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.profile-setup-btn {
    width: 180px;
    height: 50px;
    background: #7954C6;
    border: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #FFF;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: -0.4px;
}

/* ===== 입력 폼 ===== */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-form__row {
    display: grid;
    grid-template-columns: 60px 1fr 150px;
    align-items: center;
    gap: 20px;
}

.profile-form__row--no-btn {
    grid-template-columns: 60px 1fr;
}

.profile-form__label {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.72px;
    white-space: nowrap;
}

.profile-form__input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    height: 50px;
    border: 0.6px solid #EEEEEE;
    border-radius: 8px;
    background: #F8F8F8;
}

.profile-form__input-wrap:focus-within {
    border-color: #7954C6;
}

.profile-form__input-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.profile-form__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0;
    background: transparent;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: var(--color-input-text);
    letter-spacing: -0.72px;
}
.profile-form__input::placeholder {
    color: var(--color-input-text);
}

.profile-form__input--readonly {
    color: #888;
    pointer-events: none;
}

/* 계정탈퇴 비활성 버튼 */
.btn--account-del {
    width: 150px;
    height: 50px;
    background: #EEEEEE;
    border: none;
    border-radius: 5px;
    color: #AAAAAA;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 500;
    cursor: default;
    flex-shrink: 0;
}

/* ===== 연동된 SNS ===== */
.profile-sns-list {
    display: flex;
    padding: 20px 0;
}

.profile-sns-item {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
}

.profile-sns-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #F1F1F1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-sns-icon--google   { background: #FFFFFF; border: 1px solid #DDDDDD; }
.profile-sns-icon--kakao    { background: #FEF124; }
.profile-sns-icon--naver    { background: #03C75A; }
.profile-sns-icon--apple    { background: #000000; }
.profile-sns-icon--facebook { background: #0866FF; }
.profile-sns-img--off { filter: grayscale(1) opacity(0.4); }

.profile-sns-icon img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.profile-sns-icon--facebook img,
.profile-sns-icon--facebook-off img {
    width: 30px;
    height: 30px;
}

.profile-sns-label {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.6px;
    line-height: 150%;
    text-align: center;
}

.profile-sns-label--primary {
    color: #7954C6;
    font-weight: 700;
}

.profile-sns-connected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.profile-sns-date {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    letter-spacing: -0.52px;
}

.profile-sns-unlink {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    letter-spacing: -0.52px;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* ===== 선택 정보 ===== */
.profile-marketing {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.profile-marketing__check-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-marketing__checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #7954C6;
}

.profile-marketing__title {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.72px;
    cursor: pointer;
}

.profile-marketing__desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 28px;
}

.profile-marketing__desc p {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888;
    letter-spacing: -0.26px;
    line-height: 1.5;
}

/* ===== 저장하기 버튼 영역 ===== */
.profile-submit {
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
    padding: 20px 0 30px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .profile-form__row {
        grid-template-columns: 56px 1fr 130px;
        gap: 14px;
    }
    .profile-sns-list {
        flex-wrap: wrap;
        gap: 10px;
    }
    .profile-sns-item {
        flex: 0 0 calc(33.333% - 10px);
    }
}

@media (max-width: 768px) {
    .profile-avatar-row {
        gap: 24px;
    }
    .profile-form__row {
        grid-template-columns: 52px 1fr;
        gap: 10px;
    }
    .profile-form__row .btn,
    .profile-form__row .btn--account-del {
        grid-column: 2;
    }
    .profile-sns-item {
        flex: 0 0 calc(50% - 10px);
    }
}


/* =====================================================
   PROFILE MODAL
   ===================================================== */

.modal-demo-overlay {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 40px;
    background: rgba(0, 0, 0, 0.4);
    min-height: 100%;
    flex-wrap: wrap;
}

.profile-modal__body {
    padding: 0 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.profile-modal__upload-area {
    flex: 1;
    border-radius: 10px;
    background: #F8F8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 220px;
}

.profile-modal__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-modal__desc {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    color: #888;
    letter-spacing: -0.6px;
    line-height: 150%;
    width: 540px;
    margin: 0;
}

.profile-modal__register-btn {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 5px;
    background: #F1F1F1;
    color: #BBBBBB;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1px;
    border: none;
    cursor: default;
}

.profile-modal__register-btn--active {
    background: #7954C6;
    color: #FFF;
    cursor: pointer;
}

.profile-modal__register-btn img {
    width: 10px;
    height: 9px;
    flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .profile-modal__desc {
        width: 100%;
    }
}


/* =====================================================
   NICKNAME MODAL
   ===================================================== */

.nickname-modal__body {
    padding: 0 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.nickname-modal__input {
    height: 50px;
    padding: 0 20px;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    color: var(--color-text);
    letter-spacing: -0.72px;
    outline: none;
}

.nickname-modal__input::placeholder {
    color: #BBBBBB;
}


/* =====================================================
   DEL ACCOUNT MODAL
   ===================================================== */

.del-account-modal__body {
    padding: 0 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.del-account-modal__warning-title {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.72px;
    color: #555555;
    margin: 0;
}

.del-account-modal__warning-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.del-account-modal__warning-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 540px;
    height: 40px;
}

.del-account-modal__warning-item img {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.del-account-modal__warning-item span {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.26px;
    color: #888888;
}

.del-account-modal__select-wrap {
    position: relative;
    width: 100%;
}

.del-account-modal__select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.6px;
    color: #888888;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.del-account-modal__select-trigger img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.del-account-modal__select-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #7954C6;
    background: #FFFFFF;
    z-index: 10;
    overflow: hidden;
}

.del-account-modal__select-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 40px;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.6px;
    color: #333333;
    cursor: pointer;
}

.del-account-modal__select-item--active {
    color: #7954C6;
}

.del-account-modal__textarea {
    height: 150px;
    padding: 20px;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid #F1F1F1;
    background: #FFFFFF;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.26px;
    color: var(--color-text);
    outline: none;
    resize: none;
    box-sizing: border-box;
    width: 100%;
}

.del-account-modal__textarea::placeholder {
    color: #BBBBBB;
}


/* =====================================================
   CONFIRM DIALOG — 재확인 다이얼로그
   ===================================================== */

.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.confirm-dialog {
    width: 500px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px 30px;
    gap: 20px;
}

.confirm-dialog__icon {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
}

.confirm-dialog__text {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
    text-align: center;
    margin: 0;
}

.confirm-dialog__footer {
    display: flex;
    gap: 10px;
    align-self: stretch;
}


/* =====================================================
   TOAST SNACK — 하단 토스트 (블루)
   ===================================================== */

.toast-snack {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 30px;
    background: var(--color-blue);
    z-index: 2000;
}

.toast-snack__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast-snack__text {
    flex: 1 0 0;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: -0.6px;
    line-height: 150%;
}

.toast-snack__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1;
    width: 24px;
    height: 24px;
}

/* 정적 표시용 (디자인 페이지·스타일가이드) */
.toast-snack--static {
    position: relative;
    border-radius: 10px;
}

/* 토스트 알림 데모 섹션 */
.toast-snack-demo {
    padding: 60px 0 80px;
    border-top: 1px solid #EEEEEE;
    margin-top: 60px;
}
.toast-snack-demo__title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    letter-spacing: -0.72px;
    margin-bottom: 30px;
}
.toast-snack-demo__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.toast-snack-demo__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast-snack-demo__label {
    font-size: 12px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.48px;
}


/* =====================================================
   FAQ PAGE
   ===================================================== */


.faq-list {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-top: 1px solid #EEEEEE;
}

.faq-item {
    border-bottom: 1px solid #EEEEEE;
}

.faq-item__question {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    min-height: 60px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.faq-item__q {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #555555;
    letter-spacing: -0.72px;
    line-height: 150%;
    flex-shrink: 0;
}

.faq-item__text {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.72px;
    line-height: 150%;
    flex: 1;
}

.faq-item__chevron {
    width: 11px;
    height: 6px;
    flex-shrink: 0;
}
.faq-item__chevron--open {
    display: none;
}

.faq-item__answer {
    display: none;
    height: 200px;
    padding: 20px;
    background: #F8F8F8;
    gap: 10px;
    box-sizing: border-box;
    align-items: flex-start;
}

.faq-item__a {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #555555;
    letter-spacing: -0.72px;
    line-height: 150%;
    flex-shrink: 0;
}

.faq-item__answer-text {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.6px;
    line-height: 150%;
    margin: 0;
}

/* 열림 상태 */
.faq-item--open .faq-item__q {
    color: #7954C6;
}

.faq-item--open .faq-item__text {
    color: #7954C6;
}

.faq-item--open .faq-item__chevron--closed {
    display: none;
}
.faq-item--open .faq-item__chevron--open {
    display: block;
}

.faq-item--open .faq-item__answer {
    display: flex;
}

.faq-page__more {
    align-self: stretch;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .faq-page__title { font-size: 28px; }
}

@media (max-width: 768px) {
    .faq-page__header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .faq-page__title { font-size: 24px; }
    .faq-item__question { padding: 0 14px; min-height: 52px; }
    .faq-item__q,
    .faq-item__text { font-size: 15px; }
    .faq-item__answer { height: auto; min-height: 120px; }
    .faq-item__a { font-size: 15px; }
}


/* ===================================================
   MEMBERSHIP PAGE
=================================================== */

.mem-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 80px 0;
}

.mem-content {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
}

/* ---- Left List ---- */
.mem-list {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #EEEEEE;
}

.mem-list__item {
    display: flex;
    padding: 22px 20px 22px 30px;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid #EEEEEE;
    background: #FFFFFF;
    min-height: 120px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    transition: background 0.15s;
}

.mem-list__item:hover {
    background: #F8F5FF;
}

.mem-list__item:last-child {
    border-bottom: none;
}

.mem-list__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #BBB;
}

.mem-list__item--active {
    background: #F8F5FF;
}

.mem-list__item--active::before {
    background: #7954C6;
}

.mem-list__item--private {
    background: #F8F8F8;
}

.mem-list__item--private:hover {
    background: #F0F0F0;
}

.mem-list__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.mem-list__name {
    font-size: 24px;
    font-weight: 500;
    color: #BBB;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.96px;
    line-height: 150%;
    min-width: 0;
}

.mem-list__item--active .mem-list__name {
    font-weight: 700;
    color: #7954C6;
}

.mem-list__badge {
    display: flex;
    width: 50px;
    min-width: 50px;
    height: 25px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: #FFFFFF;
}

.mem-list__badge--subscribed {
    background: #7954C6;
}

.mem-list__badge--private {
    background: #838383;
}

.mem-list__price {
    font-size: 20px;
    font-weight: 500;
    color: #BBB;
    letter-spacing: -0.8px;
    line-height: 150%;
}

.mem-list__item--active .mem-list__price {
    font-weight: 700;
    color: #7954C6;
}

/* ---- Right Detail ---- */
.mem-detail {
    flex: 1;
    display: flex;
    padding: 30px 30px 30px 0;
    flex-direction: column;
    gap: 50px;
    min-width: 0;
}

/* Card */
.mem-card {
    display: flex;
    padding: 50px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 20px;
    background: #F8F5FF;
}

.mem-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.mem-card__title {
    width: 450px;
    font-size: 34px;
    font-weight: 700;
    color: #7954C6;
    line-height: 150%;
    letter-spacing: -1.36px;
}

.mem-card__header-right {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-shrink: 0;
}

.mem-card__price {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    letter-spacing: -0.96px;
    line-height: 150%;
    white-space: nowrap;
}

.mem-card__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mem-card__btn-subscribe {
    display: flex;
    width: 200px;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: #7954C6;
    color: #FFF;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.68px;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.mem-card__btn-subscribed {
    display: flex;
    width: 200px;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: #F1F1F1;
    color: #BBB;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.68px;
    cursor: default;
    border: none;
    font-family: inherit;
}

.mem-card__btn-subscribed img {
    filter: brightness(0.73);
}

.mem-card__desc {
    font-size: 13px;
    font-weight: 400;
    color: #888;
    line-height: 150%;
    letter-spacing: -0.26px;
}

/* 혜택 */
.mem-benefit {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
}

.mem-benefit__title {
    font-size: 24px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.96px;
    line-height: 150%;
    padding-bottom: 15px;
    border-bottom: 1px solid #EEEEEE;
    align-self: stretch;
}

.mem-benefit__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mem-benefit__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mem-benefit__icon-wrap {
    display: flex;
    padding: 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid #FC5758;
    background: #FFF6F6;
    flex-shrink: 0;
}

.mem-benefit__icon {
    width: 15px;
    height: 15px;
    display: block;
}

.mem-benefit__item span {
    font-size: 15px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.6px;
    line-height: 150%;
}

/* 무제한 이용가능 카테고리 */
.mem-unlimited {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.mem-unlimited__header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.mem-unlimited__title {
    font-size: 24px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.96px;
    line-height: 150%;
    white-space: nowrap;
}

.mem-unlimited__desc {
    font-size: 13px;
    font-weight: 400;
    color: #888;
    letter-spacing: -0.26px;
    line-height: 150%;
}

.mem-unlimited__divider {
    border: none;
    border-top: 1px solid #EEEEEE;
    margin: 0 0 20px 0;
}

.mem-unlimited__items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mem-unlimited__item {
    display: flex;
    width: 180px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: #F8F8F8;
}

.mem-unlimited__icon {
    width: 20px;
    height: 12px;
    flex-shrink: 0;
}

.mem-unlimited__item span {
    font-size: 15px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.6px;
    line-height: 150%;
    white-space: nowrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .mem-card__title { width: auto; font-size: 28px; }
    .mem-card__header { flex-direction: column; gap: 20px; }
    .mem-card__header-right { gap: 20px; }
    .mem-unlimited__header { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .mem-wrap { padding: 40px 0; gap: 20px; }
    .mem-content { flex-direction: column; gap: 0; }
    .mem-list { width: 100%; }
    .mem-list__item { padding: 16px 16px 16px 20px; min-height: 90px; }
    .mem-list__item--active { padding-left: 17px; }
    .mem-list__name { font-size: 18px; }
    .mem-list__price { font-size: 16px; }
    .mem-detail { padding: 24px 0; gap: 30px; }
    .mem-card { padding: 24px; gap: 16px; }
    .mem-card__header { flex-direction: column; gap: 16px; }
    .mem-card__title { font-size: 22px; width: auto; }
    .mem-card__header-right { gap: 16px; }
    .mem-card__price { font-size: 18px; }
    .mem-card__btn-subscribe,
    .mem-card__btn-subscribed { width: 130px; height: 44px; font-size: 15px; }
    .mem-benefit__title { font-size: 20px; }
    .mem-unlimited__header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mem-unlimited__title { font-size: 20px; }
    .mem-unlimited__item { width: calc(50% - 5px); }
}


/* =====================================================
   INQUIRY DETAIL — 1:1 문의내역 상세페이지
===================================================== */

.inquiry-detail-post {
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 32px;
    margin-bottom: 32px;
}

.inquiry-detail-title-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}

.inquiry-detail-title {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    letter-spacing: -0.8px;
    line-height: 150%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.inquiry-detail-info-row {
    display: flex;
    align-items: center;
    padding: 20px 0;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.6px;
    line-height: 150%;
}

.inquiry-detail-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 0;
}

.inquiry-detail-comments-title {
    color: #333;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.8px;
    margin-bottom: 20px;
}

.inquiry-detail-comments-title strong {
    font-weight: 500;
}

.inquiry-detail-comment-thread {
    display: flex;
    flex-direction: column;
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    overflow: hidden;
}

.inquiry-detail-comment-item {
    padding: 20px;
    border-bottom: 1px solid #F2F2F2;
}

.inquiry-detail-comment-item:last-child {
    border-bottom: none;
}

.inquiry-detail-comment-item--reply {
    padding-left: 60px;
}

.inquiry-detail-reply-input {
    padding: 20px 20px 20px 60px;
    border-bottom: 1px solid #F2F2F2;
}

.inquiry-detail-reply-input:last-child {
    border-bottom: none;
}

.inquiry-detail-mention {
    color: #7954C6;
    font-weight: 700;
    letter-spacing: -0.26px;
}


/* =====================================================
   BOARD DETAIL PAGE — 자유게시판 상세페이지
===================================================== */

/* 비밀글 배지 (제목 행) */
.board-detail-secret-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.board-detail-secret-badge img {
    width: 16px;
    height: 20px;
}
.board-detail-secret-label {
    color: #7954C6;
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.52px;
    white-space: nowrap;
}

/* 본문/댓글 3-dot 팝업 (수정/삭제 세로 or 신고 단독) */
.board-detail-more {
    position: relative;
    flex-shrink: 0;
}
.board-detail-more__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.board-detail-more__panel {
    display: none;
    position: absolute;
    left: calc(100% + 2px);
    top: 0;
    z-index: 20;
    width: 120px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.board-detail-more.open .board-detail-more__panel {
    display: block;
}
.board-detail-more__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.6px;
    line-height: 150%;
    background: none;
    border: none;
    border-bottom: 1px solid #EEEEEE;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.board-detail-more__item:last-child {
    border-bottom: none;
}
.board-detail-more__item:hover {
    background: #F8F5FF;
    color: var(--color-primary);
}

/* 댓글 3-dot (inquiry-more 패턴 재사용) */
.board-detail-comment-more {
    position: relative;
}
.board-detail-comment-more__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.board-detail-comment-more__panel {
    display: none;
    position: absolute;
    left: calc(100% + 2px);
    top: 0;
    z-index: 10;
}
.board-detail-comment-more.open .board-detail-comment-more__panel {
    display: block;
}

/* 비밀글 토글 스위치 */
.board-detail-secret-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.board-detail-secret-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.board-detail-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: #CCCCCC;
    border-radius: 12px;
    flex-shrink: 0;
    transition: background 0.2s;
}
.board-detail-toggle-track::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.board-detail-secret-toggle input:checked + .board-detail-toggle-track {
    background: var(--color-primary);
}
.board-detail-secret-toggle input:checked + .board-detail-toggle-track::after {
    transform: translateX(20px);
}
.board-detail-secret-text {
    color: #555555;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.52px;
    line-height: 150%;
}

/* 댓글 섹션 */
.board-detail-comments {
    margin-top: 50px;
    width: 100%;
}
.board-detail-comments-title {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.96px;
    margin: 0 0 20px;
}

/* 댓글 입력 박스 */
.board-detail-comment-input {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.board-detail-comment-input-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.board-detail-comment-textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #EEEEEE;
    background: transparent;
    resize: none;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    letter-spacing: -0.65px;
    outline: none;
    height: 35px;
    padding-bottom: 20px;
    box-sizing: content-box;
    overflow: hidden;
}
.board-detail-comment-textarea::placeholder {
    color: #888888;
}
.board-detail-comment-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.board-detail-submit-btn {
    display: flex;
    width: 80px;
    height: 35px;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    background: #F1F1F1;
    color: #BBBBBB;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.26px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.board-detail-submit-btn--active {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* 댓글 그룹 (댓글+답글 묶음, 외곽선) */
.board-detail-comment-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.board-detail-comment-group {
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}
.board-detail-comment-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}
.board-detail-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.board-detail-comment-user {
    display: flex;
    align-items: center;
    gap: 8px;
}
.board-detail-comment-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.board-detail-reply-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 13px;
    color: #555555;
    padding: 0;
    letter-spacing: -0.26px;
}

/* 비밀 댓글 표시 */
.board-detail-secret-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #777777;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.3px;
    padding: 4px 0;
}
.board-detail-secret-msg img {
    width: 16px;
    height: 20px;
    flex-shrink: 0;
}

/* 답글 토글 버튼 */
.board-detail-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-primary);
    padding: 0;
    letter-spacing: -0.26px;
    align-self: flex-start;
}
.board-detail-reply-toggle img {
    width: 12px;
    height: 12px;
}

/* 답글 목록 */
.board-detail-reply-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #EEEEEE;
}
.board-detail-reply-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 20px 20px 60px;
}

/* 답글 입력 박스 */
.board-detail-reply-input {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 20px 20px 60px;
    box-sizing: border-box;
    border-top: 1px solid #EEEEEE;
}
.board-detail-reply-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* 댓글 수정 박스 */
.board-detail-edit-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.board-detail-edit-box {
    padding: 20px;
    background: #F8F8F8;
    border-radius: 5px;
}
.board-detail-edit-textarea {
    width: 100%;
    border: none;
    background: transparent;
    resize: none;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    letter-spacing: -0.65px;
    outline: none;
    min-height: 80px;
    box-sizing: border-box;
    align-self: stretch;
}
.board-detail-edit-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.board-detail-cancel-btn {
    display: flex;
    width: 70px;
    height: 35px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid var(--color-primary);
    background: #FFFFFF;
    color: var(--color-primary);
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.26px;
    cursor: pointer;
}
.board-detail-save-btn {
    display: flex;
    width: 80px;
    height: 35px;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    background: #F1F1F1;
    color: #BBBBBB;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.26px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.board-detail-save-btn--active {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* 답글 더보기/숨기기 */
.board-detail-reply-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px 14px 60px;
    border-top: 1px solid #EEEEEE;
}
.board-detail-reply-more-btn,
.board-detail-reply-hide-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-primary);
    padding: 0;
    letter-spacing: -0.26px;
    line-height: 20px;
}
.board-detail-reply-more-btn img,
.board-detail-reply-hide-btn img {
    width: 12px;
    height: 12px;
}

/* ===== REVIEW POSTING (마이페이지 - 내 게시글 - 상품후기) ===== */
.review-posting-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.review-posting-box {
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    overflow: hidden;
}

.review-posting-item {
    padding: 20px;
}

.review-posting-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.review-posting-head .posting-item__category-title {
    flex: 1;
    min-width: 0;
}

.review-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.review-head-reply-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    padding: 4px 6px;
    letter-spacing: -0.52px;
    line-height: normal;
}

.review-head-reply-btn:hover {
    color: var(--color-primary);
}

.review-posting-star-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.review-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary);
    padding: 0;
    letter-spacing: -0.52px;
    line-height: normal;
}

.review-comment-toggle img {
    width: 12px;
    height: 8px;
    transition: transform 0.2s;
}

.review-comment-toggle.open img {
    transform: rotate(180deg);
}

.review-posting-comment-section {
    border-top: 1px solid #EEEEEE;
}

.review-comment-list {
    display: flex;
    flex-direction: column;
}

.review-comment-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 16px 50px;
}

.review-comment-list .board-detail-reply-input {
    padding: 16px 20px 16px 50px;
}

/* ===== CARD INFO (마이페이지 - 결제정보) ===== */
.card-info-empty-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    align-self: stretch;
    background: #F8F8F8;
    border-radius: 16px;
}

.card-info-empty {
    display: flex;
    align-items: center;
    gap: 30px;
}

.card-info-icon {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 25px;
}

.card-info-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.card-info-texts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-info-empty-title {
    font-size: 24px;
    font-weight: 700;
    color: #555555;
    letter-spacing: -0.96px;
    line-height: 150%;
}

.card-info-empty-desc {
    font-size: 18px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.coupon-section-title {
    font-size: 20px;
    font-weight: 500;
    color: #555555;
    line-height: 150%;
    letter-spacing: -0.8px;
}

.coupon-empty-box {
    display: flex;
    padding: 50px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 10px;
    background: #F8F8F8;
}

.coupon-empty-box .card-info-empty {
    justify-content: center;
}

.coupon-empty-box .card-info-icon img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

/* ===== COUPON CARD (마이페이지 - 쿠폰 목록) ===== */
.coupon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
    width: 100%;
}

.coupon-card {
    display: grid;
    grid-template-columns: 65% 35%;
    background-image: url('../src/images/coupon-bg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    overflow: visible;
}

.coupon-card__body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.coupon-card__date {
    font-size: 12px;
    color: #AAAAAA;
    line-height: 1.5;
    padding-left: 10px;
}

.coupon-card__name {
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    margin-top: 6px;
    padding-left: 10px;
}

.coupon-card__discount {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin: 8px 0 6px;
    white-space: nowrap;
    text-align: center;
}

.coupon-card__min {
    font-size: 12px;
    color: #AAAAAA;
    padding-left: 10px;
}

.coupon-card__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 0;
    cursor: pointer;
}

.coupon-card__action-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.coupon-card__dl-icon {
    width: 16px;
    height: 16px;
    filter: invert(33%) sepia(70%) saturate(600%) hue-rotate(240deg) brightness(90%);
}

.coupon-card__action-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    text-align: center;
}

.coupon-card--received .coupon-card__dl-icon {
    filter: none;
    opacity: 0.5;
}

.coupon-card--received .coupon-card__action-label {
    color: #AAAAAA;
    cursor: default;
}

.card-register-btn {
    display: flex;
    width: 400px;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: normal;
    border: none;
    cursor: pointer;
}

/* ===== CARD LIST (마이페이지 - 결제정보 목록) ===== */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.card-list-item {
    display: flex;
    padding: 20px;
    align-items: center;
    gap: 50px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
}

.card-list-item__left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
    min-width: 0;
}

.card-list-item__thumb {
    width: 200px;
    height: 117px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.card-list-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-list-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-list-item__name {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-list-item__meta {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 6px 30px;
}

.card-list-item__meta-label,
.card-list-item__meta-value {
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.52px;
    line-height: 150%;
}

.card-list-item__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.card-add-btn {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: normal;
    border: none;
    cursor: pointer;
}

/* =====================================================
   PAYMENT LIST — 결제내역
===================================================== */

/* 상단 서머리 */
.payment-summary {
    display: flex;
    padding: 30px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 20px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
    box-sizing: border-box;
}

.payment-summary__item {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    padding: 0 20px;
}

.payment-summary__item:first-child { padding-left: 0; }
.payment-summary__item:last-child  { padding-right: 0; }

.payment-summary__item + .payment-summary__item {
    border-left: 1px solid #EEEEEE;
}

.payment-summary__icon-box {
    display: flex;
    width: 80px;
    height: 80px;
    padding: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #F8F8F8;
    flex-shrink: 0;
}

.payment-summary__icon-box img {
    width: 30px;
    height: 30px;
}

.payment-summary__texts {
    display: flex;
    flex-direction: column;
    gap: 3.5px;
    align-self: stretch;
    justify-content: center;
}

.payment-summary__label {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.payment-summary__value {
    font-size: 24px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.96px;
    line-height: 150%;
}

.payment-summary__count {
    font-size: 24px;
    font-weight: 700;
    color: #888888;
    letter-spacing: -0.96px;
    line-height: 150%;
}

/* 리스트 */
.payment-list { width: 100%; }

.payment-list__header {
    display: flex;
    align-items: center;
    height: 40px;
    border-radius: 5px;
    background: #F8F8F8;
}

.payment-list__col {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.52px;
}

.payment-list__col--order  { width: 150px; flex-shrink: 0; }
.payment-list__col--product { width: 450px; flex-shrink: 0; justify-content: center; }
.payment-list__col--status { width: 150px; flex-shrink: 0; }
.payment-list__col--date   { width: 150px; flex-shrink: 0; }
.payment-list__col--amount { width: 150px; flex-shrink: 0; }

.payment-list__row {
    display: flex;
    align-items: center;
    min-height: 100px;
    border-bottom: 1px solid #EEEEEE;
    position: relative;
}

.payment-list__order-no {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px 7px;
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.52px;
    text-align: center;
    word-break: break-all;
}

.payment-list__product {
    width: 450px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px 10px 0;
    min-width: 0;
    align-self: stretch;
}

.payment-list__thumb {
    width: 141px;
    height: 80px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #F8F8F8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-list__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.payment-list__thumb--membership { border-radius: 8px; }

.payment-list__thumb-text {
    position: relative;
    z-index: 1;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #888888;
    text-overflow: ellipsis;
    font-family: Pretendard;
    font-size: 7px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.28px;
    padding: 0 8px;
    text-align: center;
}

.payment-list__thumb-label {
    position: relative;
    z-index: 1;
    color: #FFFFFF;
    font-family: Pretendard;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.48px;
    white-space: nowrap;
}

.payment-list__product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 0;
}

.payment-list__product-type {
    font-size: 15px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.6px;
    line-height: 150%;
    white-space: nowrap;
}

.payment-list__product-title {
    font-size: 12px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.48px;
    line-height: 150%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.payment-list__status {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.payment-list__date {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.52px;
    text-align: center;
    padding: 0 8px;
    word-break: break-all;
}

.payment-list__amount {
    width: 150px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.payment-list__price {
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.26px;
    line-height: 150%;
}

/* 3점 컨텍스트 더보기 */
.payment-more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.payment-more__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.payment-more__trigger img { width: 18px; height: 18px; }

.payment-more .dropdown--ctx-panel {
    display: none;
    position: absolute;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.payment-more.open .dropdown--ctx-panel { display: block; }


/* ============================================================
   BOOKMARK LIST
   ============================================================ */

/* ===== COURSE LIST PAGE ===== */
.course-list-banner { width: 100%; }
.course-list-banner img { width: 100%; height: 200px; object-fit: cover; display: block; }

.course-list-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 0 100px;
    box-sizing: border-box;
}

.course-list-page__title {
    font-size: 30px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -1.5px;
    margin: 0 0 30px;
}

.course-card-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.course-card-list .bookmark-card {
    width: 100%;
}

/* ===== BOOKMARK LIST ===== */
.bookmark-list {
    display: grid;
    grid-template-columns: repeat(3, 336px);
    gap: 20px;
}

.bookmark-card {
    display: flex;
    flex-direction: column;
    width: 336px;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}

.bookmark-card__thumb {
    position: relative;
    min-height: 195px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: url('../src/images/bookmark-card-bg.png') center / cover no-repeat;
}

.bookmark-card__thumb-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 25px;
    flex-shrink: 0;
    align-self: stretch;
}

.bookmark-card__thumb-body {
    flex: 1 0 0;
    display: flex;
    align-items: center;
}

.bookmark-card__heart {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.bookmark-card__heart img {
    width: 15px;
    height: 13px;
    display: block;
}

.bookmark-card__title {
    font-size: 18px;
    font-weight: 500;
    color: #888888;
    line-height: 150%;
    letter-spacing: -0.72px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.bookmark-card__info {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    background: #FFFFFF;
    border-top: 3px solid #EEEEEE;
}

.bookmark-card__info--normal  { border-top-color: #7954C6; }
.bookmark-card__info--live    { border-top-color: #FC5758; }
.bookmark-card__info--video   { border-top-color: #31AD60; }
.bookmark-card__info--digital { border-top-color: #555555; }
.bookmark-card__info--package { border-top-color: #2BACF4; }

.bookmark-card__type {
    font-size: 15px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.6px;
    line-height: 150%;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bookmark-card__type-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bookmark-card__type-sep {
    display: block;
    width: 1px;
    height: 20px;
    background-color: #DDDDDD;
    flex-shrink: 0;
    margin: 0 9px;
}

.bookmark-card__desc {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    line-height: 150%;
    letter-spacing: -0.6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    align-self: stretch;
    margin-top: -10px;
}

.bookmark-card__meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bookmark-card__meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.bookmark-card__meta-text + .bookmark-card__meta-icon {
    margin-left: 10px;
}

.bookmark-card__meta-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.bookmark-card__meta-text {
    font-size: 12px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.48px;
    line-height: 150%;
}

.bookmark-card__price-area {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    margin-top: auto;
    min-height: 68px;
}
.bookmark-card__info--package .bookmark-card__price-area {
    min-height: 91px;
}

.bookmark-card__price-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bookmark-card__discount-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.bookmark-card__discount-rate {
    font-size: 21px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.84px;
}

.bookmark-card__original-price {
    font-size: 14px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.42px;
    text-decoration: line-through;
}

.bookmark-card__comparison {
    font-size: 14px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.56px;
    line-height: 150%;
}

.bookmark-card__final-price {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.96px;
    line-height: 150%;
}

.bookmark-card__final-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.bookmark-card__price-note {
    font-size: 13px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.26px;
    line-height: 150%;
    padding-bottom: 2px;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .course-list-page { padding: 40px 24px 80px; }
    .course-card-list { grid-template-columns: repeat(2, 1fr); }
    .bookmark-list { grid-template-columns: repeat(2, 1fr); }
    .bookmark-card { width: 100%; }
}
@media (max-width: 768px) {
    .course-list-page { padding: 30px 20px 60px; }
    .course-list-page__title { font-size: 22px; letter-spacing: -1.1px; }
    .course-card-list { grid-template-columns: 1fr; }
    .bookmark-list { grid-template-columns: 1fr; }
    .bookmark-card__thumb { height: 130px; }
    .bookmark-card__final-price { font-size: 17px; }
}


/* =====================================================
   CERTIFICATE LIST
===================================================== */

.cert-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cert-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}

.cert-card__thumb {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    background: url('../src/images/bookmark-card-bg.png') center / cover no-repeat;
    box-sizing: border-box;
}

.cert-card__thumb::after {
    content: '';
    display: block;
    height: 24px;
    flex-shrink: 0;
}

.cert-card__thumb-title {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.6px;
    line-height: 150%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-card__thumb-desc {
    font-size: 15px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.6px;
    line-height: 150%;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.cert-card__info {
    flex: 1 0 0;
    min-height: 306px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
}

.cert-card__type {
    font-size: 15px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.6px;
    line-height: 150%;
}

.cert-card__title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    align-self: stretch;
}

.cert-card__date-row {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    margin-top: 5px;
    align-self: stretch;
}

.cert-card__date-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.cert-card__date-label {
    font-size: 13px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.65px;
    line-height: 150%;
    min-width: 83px;
}

.cert-card__date-value {
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.65px;
    line-height: 150%;
    width: 64px;
}

.cert-card__btn {
    width: 100%;
    margin-top: auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .cert-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cert-list { grid-template-columns: 1fr; }
    .cert-card__thumb { min-height: 130px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .board-detail-reply-item { padding-left: 40px; }
    .board-detail-reply-input { padding-left: 40px; }
    .board-detail-reply-footer { padding-left: 40px; }
    .inquiry-detail-comment-item--reply { padding-left: 40px; }
    .inquiry-detail-reply-input { padding-left: 40px; }
    .review-comment-list .board-detail-reply-input { padding: 14px 16px; }
    .card-list-item { gap: 24px; }
    .card-list-item__left { gap: 16px; }
    .card-list-item__thumb { width: 160px; height: 94px; }
}
@media (max-width: 768px) {
    .board-detail-reply-item { padding-left: 20px; }
    .board-detail-reply-input { padding-left: 20px; }
    .board-detail-reply-footer { padding-left: 20px; }
    .board-detail-more__panel { width: 120px; }
    .board-detail-more__item { font-size: 14px; height: 44px; }
    .board-detail-comment-textarea { height: 30px; }
    .inquiry-detail-title-row { flex-wrap: wrap; }
    .inquiry-detail-comment-item--reply { padding-left: 20px; }
    .inquiry-detail-reply-input { padding-left: 20px; }
    .review-posting-head { gap: 8px; }
    .review-comment-item { padding: 14px 16px 14px 46px; }
    .review-comment-list .board-detail-reply-input { padding: 14px 16px 14px 46px; }
    .card-info-empty { gap: 20px; }
    .card-register-btn { width: 100%; max-width: 400px; }
    .card-list-item { flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px; }
    .card-list-item__left { width: 100%; }
    .card-list-item__thumb { width: 100%; height: auto; aspect-ratio: 200 / 117; }
    .card-list-item__actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 768px) {
    .card-info-empty { flex-direction: column; text-align: center; gap: 16px; }
    .card-register-btn { width: 100%; }
}
@media (max-width: 1024px) {
    .coupon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .coupon-grid { grid-template-columns: 1fr; }
    .coupon-card__discount { font-size: 18px; }
    .coupon-section-title { font-size: 16px; }
}
@media (max-width: 1024px) {
    .payment-summary { flex-direction: column; align-items: stretch; }
    .payment-summary__item { padding: 0; }
    .payment-summary__item + .payment-summary__item { border-left: none; border-top: 1px solid #EEEEEE; padding-top: 20px; }
    .payment-list__col--date { display: none; }
    .payment-list__date { display: none; }
    .payment-list__col--order { width: 110px; }
    .payment-list__order-no { width: 110px; }
    .payment-list__col--amount { width: 120px; }
    .payment-list__amount { width: 120px; }
    .payment-list__col--status { width: 90px; }
    .payment-list__status { width: 90px; }
}
@media (max-width: 768px) {
    .payment-list__header { display: none; }
    .payment-list__row {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding: 16px 0;
        gap: 12px;
    }
    .payment-list__order-no { width: 100%; padding: 0; justify-content: flex-start; font-size: 12px; color: #AAAAAA; }
    .payment-list__product { width: 100%; padding: 0; align-self: auto; }
    .payment-list__status { width: 100%; align-self: auto; align-items: flex-start; }
    .payment-list__date { display: flex; width: 100%; justify-content: flex-start; padding: 0; font-size: 12px; color: #AAAAAA; }
    .payment-list__amount { width: 100%; align-self: auto; align-items: flex-start; }
    .payment-more { width: 40px; height: 40px; }
    .payment-summary__label { font-size: 15px; }
    .payment-summary__value { font-size: 20px; }
    .payment-summary__count { font-size: 20px; }
}

/* =====================================================
   PRODUCT LIST
===================================================== */

.product-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}

.product-card__thumb {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    background: url('../src/images/bookmark-card-bg.png') center / cover no-repeat;
    box-sizing: border-box;
}

.product-card__thumb::after {
    content: '';
    display: block;
    height: 24px;
    flex-shrink: 0;
}

.product-card__thumb-title {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.6px;
    line-height: 150%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__thumb-desc {
    font-size: 15px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.6px;
    line-height: 150%;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.product-card__info {
    flex: 1 0 0;
    min-height: 306px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
}

.product-card__type {
    font-size: 15px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.6px;
    line-height: 150%;
}

.product-card__title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    align-self: stretch;
}

.product-card__meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    margin-top: 5px;
    align-self: stretch;
}

.product-card__meta-row + .product-card__meta-row {
    margin-top: 0;
}

.product-card__meta-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.product-card__meta-label {
    font-size: 13px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.65px;
    line-height: 150%;
    min-width: 83px;
    flex-shrink: 0;
}

.product-card__meta-value {
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.65px;
    line-height: 150%;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__progress-track {
    flex: 1;
    height: 20px;
    border-radius: 100px;
    background: #F8F5FF;
    overflow: hidden;
}

.product-card__progress-fill {
    height: 100%;
    background: #7954C6;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 36px;
}

.product-card__progress-fill--22 { width: 22%; }

.product-card__progress-text {
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.24px;
    line-height: 150%;
    white-space: nowrap;
}

.product-card__btn {
    width: 100%;
    margin-top: auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .product-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .product-list { grid-template-columns: 1fr; }
    .product-card__thumb { min-height: 130px; }
}

/* =====================================================
   MEMBERSHIP LIST — 마이페이지 구독관리 목록
===================================================== */

/* 섹션 타이틀 (border-bottom 라인 포함) */
.coupon-section-title--bordered {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEEEEE;
}

/* 카드 래퍼 */
.membership-item-wrap {
    width: 100%;
}

/* 썸네일 중앙 라벨 (흰색 굵은 텍스트) */
.community-card__thumb-label {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    letter-spacing: -0.88px;
}

/* 카드 우측 박스: 이름 + 더보기 버튼 행 */
.membership-card__name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* mypage-inner의 align-items:flex-start 상쇄 — 카드 전체 너비 확보 */
.mypage-content .community-list {
    width: 100%;
}

/* 마이페이지 컨텍스트 — community-card 치수 조정 */
.mypage-content .community-card {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px;
    gap: 30px;
}
.mypage-content .community-card__left {
    flex: 0 0 386px;
    width: 386px;
}
.mypage-content .community-card__thumb {
    height: 218px;
}
.mypage-content .community-card__right {
    padding: 30px;
    border-radius: 10px;
}
.mypage-content .community-card__right-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .mypage-content .community-card { flex-direction: column; gap: 20px; }
    .mypage-content .community-card__left { flex: none; width: 100%; }
}
@media (max-width: 768px) {
    .community-card__thumb-label { font-size: 18px; }
}

/* =====================================================
   MEMBERSHIP CANCEL MODAL — 구독 취소 모달
===================================================== */

.cancel-sub-modal__body {
    padding: 0 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #EEEEEE;
}

.cancel-sub-modal__info-box {
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    padding: 20px;
    background: #F8F8F8;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cancel-sub-modal__info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cancel-sub-modal__info-label {
    font-size: 18px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.cancel-sub-modal__info-label--lg {
    font-size: 18px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.cancel-sub-modal__info-value {
    font-size: 15px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.6px;
    line-height: 150%;
}

.cancel-sub-modal__info-value--date {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.72px;
    line-height: 150%;
}

.cancel-sub-modal__text-box {
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cancel-sub-modal__desc {
    font-size: 15px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.6px;
    line-height: 150%;
}

.cancel-sub-modal__question {
    font-size: 18px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.cancel-sub-modal__btn {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    width: 100%;
    border-radius: 5px;
    border: none;
    background: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.6px;
    line-height: 150%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.cancel-sub-modal__btn:hover {
    opacity: 0.9;
}

.cancel-sub-modal__btn img {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1);
}

/* =====================================================
   PAYMENT PAGE — 결제하기
===================================================== */
.payment-page {
    background: #F8F8F8;
}

.payment-layout {
    max-width: 1520px;
    margin: 0 auto;
    padding: 80px 40px;
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.payment-left {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.payment-right {
    width: 500px;
    flex-shrink: 0;
    position: sticky;
    top: 120px;
    align-self: flex-start;
}

.payment-block {
    padding: 30px;
    border-radius: 20px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
}

.payment-block__title {
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.96px;
    line-height: 150%;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEEEEE;
    margin: 0;
}

/* --- 상품정보 (일반/패키지) --- */
.payment-product {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.payment-product__thumb {
    width: 386px;
    height: 218px;
    flex-shrink: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background: url('../src/images/bookmark-card-bg.png') center / cover no-repeat;
    box-sizing: border-box;
}

.payment-product__thumb-text {
    font-size: 18px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.72px;
    line-height: 150%;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
}

/* --- 상품정보 (멤버십/커뮤니티) --- */
.payment-product__thumb--membership {
    width: 386px;
    height: 218px;
    padding: 30px;
    border-radius: 10px;
    background: url('../src/images/membership-black-bg.png') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    min-height: unset;
}

.payment-product__thumb--community {
    background-image: url('../src/images/premium-community-thumb.png');
}

.payment-product__thumb-label {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.96px;
    line-height: 150%;
    text-align: center;
}

.payment-product__body {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}

.payment-product__name {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.8px;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.payment-product__desc {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.8px;
    line-height: 150%;
    margin: 0;
}

/* --- 멤버십/커뮤니티 상품명 + 정보 rows --- */
.payment-product__sub-name {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
    margin: 0;
}

.payment-info-table {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.payment-info-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.payment-info-row__label {
    font-size: 13px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.52px;
    line-height: 150%;
    min-width: 60px;
    flex-shrink: 0;
}

.payment-info-row__value {
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.52px;
    line-height: 150%;
}

/* --- 구매자 정보 --- */
.payment-verify-btns {
    display: flex;
    gap: 10px;
}

.payment-verify-note {
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.52px;
    line-height: 150%;
    margin: 0;
}

.payment-verify-note strong {
    color: #7954C6;
    font-weight: 500;
}

.payment-buyer-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- 쿠폰 --- */
.payment-coupon-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.payment-coupon-available {
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.52px;
    line-height: 150%;
}

.payment-coupon-available strong {
    color: #7954C6;
    font-weight: 500;
}

.payment-applied-coupon {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    background: #F8F8F8;
    border-radius: 5px;
    gap: 10px;
    box-sizing: border-box;
}

.payment-applied-coupon__label {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
    flex-shrink: 0;
    margin-right: 10px;
}

.payment-applied-coupon__name {
    font-size: 15px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.6px;
    line-height: 150%;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-applied-coupon__price {
    font-size: 18px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.72px;
    line-height: 150%;
    flex-shrink: 0;
}

.btn-coupon-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.payment-applied-coupon__remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #BBBBBB;
    line-height: 1;
    padding: 4px;
    flex-shrink: 0;
    font-family: inherit;
}

/* --- 결제정보 카드 목록 --- */
.payment-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-card-row {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.payment-card-row input[type="radio"] {
    width: 15px;
    height: 15px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    accent-color: #7954C6;
    cursor: pointer;
}

.payment-card-img {
    width: 132px;
    height: 75px;
    aspect-ratio: 44/25;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.payment-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-card-name {
    font-size: 18px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.72px;
    line-height: 150%;
    margin: 0;
}

.payment-card-number {
    font-size: 18px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.72px;
    line-height: 150%;
    margin: 0;
}

/* --- 결제정보 빈 상태 --- */
.payment-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 0;
}

.payment-empty__icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.payment-empty__text {
    font-size: 20px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.8px;
    line-height: 150%;
}

/* --- 전체 너비 버튼 --- */
.btn-full {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: var(--btn-primary);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.68px;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    box-sizing: border-box;
}

.btn-full:hover { opacity: 0.88; }

.btn-full img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-full--disabled {
    background: #F1F1F1;
    color: #BBBBBB;
    cursor: default;
}

.btn-full--disabled:hover { opacity: 1; }

.btn-full--disabled img {
    opacity: 0.4;
}

/* --- 결제금액 우측 패널 --- */
.payment-amount-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-amount-label {
    font-size: 18px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.payment-amount-value {
    font-size: 18px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.72px;
    line-height: 150%;
    text-align: right;
}

.payment-amount-value--coupon {
    font-size: 18px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.72px;
}

.payment-amount-divider {
    border: none;
    border-top: 1px solid #EEEEEE;
    margin: 0;
}

.payment-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-total-label {
    font-size: 24px;
    font-weight: 500;
    color: #7954C6;
    letter-spacing: -0.96px;
    line-height: 150%;
}

.payment-total-value {
    font-size: 24px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.96px;
    line-height: 150%;
    text-align: right;
}

.payment-vat {
    font-size: 12px;
    font-weight: 400;
    color: #BBBBBB;
    text-align: right;
    margin: -20px 0 0;
}

.payment-agree-box {
    padding: 20px;
    border-radius: 10px;
    background: #F8F8F8;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.payment-agree-intro {
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.52px;
    line-height: 150%;
    margin: 0;
}

.payment-agree-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.payment-agree-item + .payment-agree-item {
    margin-top: -10px;
}

.payment-agree-item__text {
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.52px;
    line-height: 150%;
}

.payment-agree-item__arrow {
    width: 6px;
    height: 10px;
    flex-shrink: 0;
}

/* ===== PAYMENT SUCCESS ===== */
.payment-success-page {
    width: 100%;
    background: #F8F8F8;
}

.payment-success-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    padding: 80px 0 150px;
    box-sizing: border-box;
}

.payment-success-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.payment-success-icon {
    width: 50px;
    height: 50px;
}

.payment-success-title {
    font-size: 34px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -1.7px;
    line-height: 150%;
    text-align: center;
    margin: 0;
}

.payment-success-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 800px;
    padding: 50px;
    border-radius: 20px;
    border: 1px solid #EEEEEE;
    background: #FFFFFF;
    box-sizing: border-box;
    margin-top: -30px;
}

.payment-success-row {
    display: flex;
    align-items: flex-start;
}

.payment-success-label {
    min-width: 100px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.payment-success-value {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.payment-success-value--order {
    font-weight: 700;
    color: #7954C6;
}

.payment-success-btns {
    display: flex;
    gap: 20px;
    width: 800px;
    margin-top: -50px;
}

.payment-success-btns .btn-full {
    flex: 1 0 0;
    width: auto;
}

.btn-full--outline {
    background: #FFFFFF;
    color: #7954C6;
    border: 1px solid #7954C6;
}

.btn-full--outline:hover { opacity: 0.88; }

.payment-success-value--fail {
    font-weight: 700;
    color: #FC5758;
}

.payment-fail-notice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 800px;
    padding-top: 10px;
    margin-top: -50px;
}

.payment-fail-notice__text {
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.26px;
    line-height: 150%;
    text-align: center;
    margin: 0;
}

/* ===== AGREE MODAL ===== */
.agree-modal-page {
    width: 100%;
    background: #EBEBEB;
}

.agree-modal-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0 150px;
}

.popup-modal--agree {
    width: 640px;
}

.popup-modal--agree .popup-modal__body {
    padding-bottom: 0;
}

.popup-modal--agree .popup-modal__content {
    min-height: 420px;
    max-height: 420px;
    overflow-y: auto;
    align-items: flex-start;
}

/* ===== COUPON SELECTION MODAL ===== */
.coupon-modal-page {
    width: 100%;
    background: #EBEBEB;
}

.coupon-modal-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 80px 0 150px;
}

.popup-modal--coupon .popup-modal__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coupon-no-select {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 0 20px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 400;
    color: #888888;
    cursor: pointer;
    background: #FFFFFF;
    box-sizing: border-box;
}

.coupon-no-select--selected {
    border-color: #7954C6;
    color: #7954C6;
    font-weight: 500;
}

.coupon-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 20px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    cursor: pointer;
    background: #FFFFFF;
    box-sizing: border-box;
}

.coupon-item__expires {
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.26px;
    line-height: 150%;
}

.coupon-item__name {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.6px;
    line-height: 150%;
}

.coupon-item__discount {
    font-size: 18px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.72px;
    line-height: 150%;
}

.coupon-item__min {
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.26px;
    line-height: 150%;
}

.coupon-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 0;
}

.coupon-empty__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.coupon-empty__text {
    font-size: 15px;
    font-weight: 400;
    color: #888888;
    letter-spacing: -0.6px;
    line-height: 150%;
}

/* ===== RESPONSIVE — PAYMENT ===== */
@media (max-width: 1024px) {
    .payment-layout { flex-direction: column; gap: 30px; padding: 40px 24px; }
    .payment-right { width: 100%; position: static; }
    .payment-product__thumb--membership,
    .payment-product__thumb--community { width: 260px; height: 160px; }
    .payment-success-wrap { padding: 60px 40px 100px; gap: 50px; }
    .agree-modal-wrap { padding: 60px 40px 100px; }
    .popup-modal--agree { width: 100%; max-width: 640px; }
    .coupon-modal-wrap { padding: 60px 40px 100px; }
    .popup-modal--coupon { width: 100%; max-width: 640px; }
}
@media (max-width: 768px) {
    .payment-layout { padding: 24px 16px; gap: 20px; }
    .payment-product { flex-direction: column; }
    .payment-product__thumb { width: 100%; min-height: 160px; }
    .payment-product__thumb--membership,
    .payment-product__thumb--community { width: 100%; }
    .payment-card-img { width: 120px; height: 75px; }
    .payment-success-wrap { padding: 40px 20px 80px; gap: 40px; }
    .payment-success-title { font-size: 24px; letter-spacing: -1.2px; }
    .payment-success-info { padding: 30px 20px; gap: 20px; }
    .payment-success-label { min-width: 80px; font-size: 15px; }
    .payment-success-value { font-size: 15px; }
    .payment-success-btns { flex-direction: column; }
    .agree-modal-wrap { padding: 40px 20px 80px; }
    .popup-modal--agree .popup-modal__content { min-height: 300px; max-height: 300px; }
    .coupon-modal-wrap { padding: 40px 20px 80px; gap: 40px; }
    .coupon-item__name { font-size: 14px; }
    .coupon-item__discount { font-size: 16px; }
}

/* =====================================================
   COURSE DETAIL PAGE
   ===================================================== */

.course-detail-wrap {
    display: flex;
    gap: 10px;
    max-width: 1440px;
    margin: 80px auto 0;
    padding: 0 20px 100px;
    align-items: flex-start;
}

/* 좌측 컬럼 */
.course-detail-left {
    width: 890px;
    flex-shrink: 0;
    min-width: 0;
}

/* 플레이어 썸네일 */
.course-detail-player {
    width: 890px;
    height: 503px;
    border-radius: 10px;
    background: url('../src/images/player-thum.png') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.course-detail-player-text {
    align-self: stretch;
}

.course-detail-player-title,
.course-detail-player-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.72px;
    color: #888888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 탭 네비게이션 */
.course-detail-tab-nav {
    display: flex;
    border-bottom: 1px solid #EEEEEE;
    margin-top: 0;
    position: sticky;
    top: 0;
    z-index: 50;
    background: #FFFFFF;
}

.course-detail-tab-btn {
    flex: 1;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 500;
    color: #BBBBBB;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    letter-spacing: -0.68px;
    transition: color 0.15s;
}

.course-detail-tab-btn.is-active {
    color: #7954C6;
    font-weight: 700;
    border-bottom-color: #7954C6;
}

/* 섹션 (항상 표시) */
.course-detail-section {
    display: block;
}

/* 탭 공통 섹션 타이틀 */
.course-detail-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.88px;
    margin-bottom: 20px;
}

/* ─── 상품소개 탭 ─── */
.course-detail-intro {
    padding: 50px 20px;
    font-size: 15px;
    font-weight: 400;
    color: #333333;
    line-height: 170%;
    letter-spacing: -0.6px;
}

.course-detail-intro h2 {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.72px;
    margin: 30px 0 8px;
}

.course-detail-intro h2:first-child {
    margin-top: 0;
}

.course-detail-intro p {
    margin-bottom: 10px;
}

/* ─── 커리큘럼 탭 ─── */
.course-detail-curriculum-wrap {
    padding: 50px 0 20px;
}

.course-detail-curriculum-header {
    display: flex;
    width: 890px;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.course-detail-curriculum-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.8px;
}

.course-detail-curriculum-total {
    font-size: 14px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.56px;
}

.course-detail-curriculum-time {
    font-size: 14px;
    font-weight: 700;
    color: #FC5758;
    letter-spacing: -0.56px;
}

.course-detail-curriculum-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.course-detail-ctrl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #555555;
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: -0.56px;
}

.course-detail-ctrl-btn img {
    width: 14px;
    height: 14px;
}

/* 챕터 목록 */
.course-detail-chapters {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px 20px;
}

.course-detail-chapter {
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
}

.course-detail-chapter-header {
    display: flex;
    height: 50px;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #F8F5FF;
    cursor: pointer;
    border-radius: 10px;
}

.course-detail-chapter.is-collapsed .course-detail-chapter-header {
    border-radius: 10px;
}

.course-detail-chapter.is-collapsed .course-detail-lessons {
    display: none;
}

.course-detail-chapter-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.course-detail-chapter.is-collapsed .course-detail-chapter-arrow {
    transform: rotate(-90deg);
}

.course-detail-chapter-name {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.6px;
}

.course-detail-chapter-meta {
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.52px;
    white-space: nowrap;
}

/* 강의 항목 */
.course-detail-lesson {
    display: flex;
    height: 50px;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EEEEEE;
    background: #FFFFFF;
}

.course-detail-lesson:last-child {
    border-bottom: none;
}

.course-detail-lesson-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.course-detail-lesson-num {
    font-size: 14px;
    color: #888888;
    letter-spacing: -0.56px;
    min-width: 22px;
}

.course-detail-lesson-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.course-detail-lesson-title {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-detail-lesson-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.course-detail-lesson-preview {
    font-size: 13px;
    font-weight: 500;
    color: #7954C6;
    letter-spacing: -0.52px;
    text-decoration: none;
}

.course-detail-lesson-preview:hover {
    text-decoration: underline;
}

.course-detail-lesson-time {
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.52px;
}

/* ─── 상품후기 / 문의하기 탭 ─── */
.course-detail-review-wrap {
    padding: 30px 20px 50px;
}

.course-detail-star-input {
    display: flex;
    gap: 2px;
    margin-left: 4px;
}

.course-detail-star-empty {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.course-detail-review-stars {
    display: flex;
    gap: 2px;
    margin-left: 4px;
}

.course-detail-review-stars img {
    width: 16px;
    height: 16px;
}

.course-detail-star-dim {
    opacity: 0.2;
}

.course-detail-review-score {
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.52px;
    margin-left: 2px;
}

/* ─── 우측 구매 박스 ─── */
.course-detail-buy-box {
    width: 500px;
    flex-shrink: 0;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 20px;
    border: 1px solid #EEEEEE;
    align-self: flex-start;
    position: sticky;
    top: 68px;
}

/* 타입 + 공개 버튼 행 */
.course-detail-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course-detail-type-label {
    font-size: 15px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.6px;
}

.course-detail-visibility-btns {
    display: flex;
    gap: 8px;
}

.course-detail-visibility-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100px;
    height: 35px;
    border-radius: 50px;
    border: 1px solid #DDDDDD;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    cursor: pointer;
    letter-spacing: -0.52px;
}

.course-detail-visibility-btn img {
    width: 14px;
    height: 14px;
}

.course-detail-visibility-btn--open {
    border-color: #FC5758;
    background: #FFF6F6;
    color: #FC5758;
}

.course-detail-visibility-btn--private {
    border-color: #BBBBBB;
    background: #F8F8F8;
    color: #888888;
}

/* 제목 + 별점 + 가격 */
.course-detail-product-info {
    display: flex;
    flex-direction: column;
}

.course-detail-product-title {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    line-height: 150%;
    letter-spacing: -0.8px;
    margin-bottom: 20px;
}

.course-detail-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.course-detail-stars {
    display: flex;
    gap: 2px;
}

.course-detail-star-icon {
    width: 16px;
    height: 16px;
}

.course-detail-rating-score {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.56px;
}

.course-detail-rating-count {
    font-size: 14px;
    font-weight: 400;
    color: #BBBBBB;
    letter-spacing: -0.56px;
}

.course-detail-discount-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.course-detail-discount-rate {
    font-size: 18px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.72px;
}

.course-detail-original-price {
    font-size: 14px;
    font-weight: 500;
    color: #BBBBBB;
    letter-spacing: -0.56px;
    text-decoration: line-through;
}

.course-detail-final-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-detail-final-price {
    font-size: 28px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -1.12px;
}

/* 버튼 그룹 */
.course-detail-btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.course-detail-btn-group .btn-wide {
    width: 100%;
}

.course-detail-btn-row {
    display: flex;
    gap: 10px;
}

.course-detail-btn-row .btn-wish,
.course-detail-btn-row .btn-share {
    flex: 1;
    width: auto;
}


/* 상품 정보 테이블 */
.course-detail-info-table {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.course-detail-info-row {
    display: flex;
    align-items: flex-start;
}

.course-detail-info-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 95px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    letter-spacing: -0.52px;
}

.course-detail-info-label img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.course-detail-info-value {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    letter-spacing: -0.52px;
    line-height: 160%;
}

/* 쿠폰 섹션 */
.course-detail-coupon-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: -10px;
}

.course-detail-coupon-note {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #888888;
    letter-spacing: -0.48px;
}

.course-detail-coupon-note img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.course-detail-coupon-box {
    width: 100%;
    height: 150px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    display: flex;
    overflow: hidden;
}

.course-detail-coupon-left {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.course-detail-coupon-date {
    font-size: 11px;
    color: #888888;
    letter-spacing: -0.44px;
}

.course-detail-coupon-name {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    letter-spacing: -0.6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-detail-coupon-minimum {
    font-size: 11px;
    color: #888888;
    letter-spacing: -0.44px;
}

.course-detail-coupon-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: #7954C6;
    letter-spacing: -0.8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.course-detail-coupon-download {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    border-left: 1px solid #EEEEEE;
    background: #FFFFFF;
    cursor: pointer;
}

.course-detail-coupon-download img {
    width: 22px;
    height: 22px;
}

.course-detail-coupon-download span {
    font-size: 13px;
    font-weight: 500;
    color: #7954C6;
    letter-spacing: -0.52px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .course-detail-wrap { gap: 20px; padding: 0 20px 80px; margin-top: 60px; }
    .course-detail-left { width: 100%; }
    .course-detail-player { width: 100%; height: auto; aspect-ratio: 16/9; }
    .course-detail-buy-box { width: 420px; padding: 24px; }
    .course-detail-curriculum-header { width: 100%; }
}

@media (max-width: 768px) {
    .course-detail-wrap { flex-direction: column; gap: 0; padding: 0 16px 60px; margin-top: 40px; }
    .course-detail-left { width: 100%; }
    .course-detail-player { width: 100%; height: auto; aspect-ratio: 16/9; }
    .course-detail-tab-btn { font-size: 14px; height: 52px; }
    .course-detail-intro { padding: 30px 12px; }
    .course-detail-curriculum-header { width: 100%; flex-wrap: wrap; height: auto; gap: 8px; }
    .course-detail-chapters { padding: 0 0 20px; }
    .course-detail-curriculum-wrap { padding: 30px 0 20px; }
    .course-detail-buy-box { width: 100%; position: static; margin-top: 30px; padding: 20px; }
    .course-detail-product-title { font-size: 18px; }
    .course-detail-final-price { font-size: 22px; }
    .course-detail-coupon-box { height: auto; min-height: 120px; }
    .course-detail-coupon-amount { font-size: 16px; padding: 15px 8px; }
    .course-detail-review-wrap { padding: 20px 0 40px; }
}

/* ==============================
   MYCOURSE DASHBOARD (마이페이지 - 일반강의실 대시보드)
   ============================== */
.mycourse-dashboard {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 50px;
    min-height: 100vh;
    background: #F8F8F8;
}

.mycourse-main {
    width: 1190px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ── 상단 박스 ── */
.mycourse-topbox {
    display: flex;
    gap: 30px;
    align-items: stretch;
    padding: 30px;
    border-radius: 30px;
    background: #FFFFFF;
}

.mycourse-topbox-thumb {
    width: 340px;
    flex-shrink: 0;
    border-radius: 20px;
    background: #F1F1F4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.mycourse-topbox-thumb p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.6px;
    color: #6A697C;
    text-align: center;
}

.mycourse-topbox-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mycourse-topbox-category {
    font-size: 13px;
    font-weight: 400;
    color: #6A697C;
    letter-spacing: -0.26px;
}

.mycourse-topbox-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.8px;
    color: #333333;
}

.mycourse-topbox .course-detail-info-table {
    margin-top: 4px;
}

/* ── 통계 박스 3종 ── */
.mycourse-stats {
    display: flex;
    gap: 30px;
}

.mycourse-statbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 260px;
    padding: 30px;
    border-radius: 30px;
    background: #FFFFFF;
}

.mycourse-statbox--progress {
    flex: 1 0 0;
    min-width: 260px;
    justify-content: space-between;
}

.mycourse-statbox--time {
    flex: 1 0 0;
    justify-content: center;
    gap: 70px;
}

.mycourse-statbox--cert {
    width: 377px;
    flex-shrink: 0;
    justify-content: center;
    gap: 30px;
}

.mycourse-statbox-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.96px;
    color: #333333;
    text-align: center;
}

.mycourse-statbox--time .mycourse-statbox-title,
.mycourse-statbox--cert .mycourse-statbox-title {
    align-self: stretch;
}

/* 진도율 게이지 */
.mycourse-gauge {
    position: relative;
    width: 200px;
    margin-top: 4px;
}

.mycourse-gauge-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mycourse-gauge-track,
.mycourse-gauge-value {
    fill: none;
    stroke-width: 20;
    stroke-linecap: round;
}

.mycourse-gauge-track {
    stroke: #F8F5FF;
}

.mycourse-gauge-value {
    stroke: #7954C6;
    stroke-dasharray: 62.2 282.7;
}

.mycourse-gauge-percent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.36px;
    color: #333333;
}

.mycourse-gauge-percent span {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.96px;
}

.mycourse-gauge-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.mycourse-gauge-legend-item {
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.26px;
    color: #333333;
}

.mycourse-gauge-legend-item b {
    font-weight: 700;
}

.mycourse-gauge-legend-item .is-total {
    color: #7954C6;
}

.mycourse-gauge-legend-item .is-done {
    color: #31AD60;
}

/* 총 학습 시간 */
.mycourse-time-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 34px;
    font-weight: 700;
    line-height: 51px;
    letter-spacing: -1.36px;
    color: #333333;
}

.mycourse-time-value img {
    width: 30px;
    height: 30px;
}

/* 수료 */
.mycourse-cert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    border-radius: 10px;
    background: #F0F0F0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #BBBBBB;
}

/* ── 상품후기 박스 ── */
.mycourse-review {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border-radius: 30px;
    background: #FFFFFF;
}

.mycourse-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.mycourse-review-header .course-detail-section-title {
    margin-bottom: 0;
}

.mycourse-review-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #7954C6;
    background: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.6px;
    color: #7954C6;
    cursor: pointer;
}

.mycourse-review-more img {
    width: 14px;
    height: 14px;
    filter: brightness(0) saturate(100%) invert(34%) sepia(52%) saturate(1000%) hue-rotate(230deg) brightness(90%) contrast(90%);
}

.mycourse-review-list {
    display: flex;
    flex-direction: column;
}

.mycourse-review-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid #EEEEEE;
}

.mycourse-review-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mycourse-review-write {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 10px;
    background: #7954C6;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #FFFFFF;
    cursor: pointer;
}

.mycourse-review-write img {
    width: 18px;
    height: 18px;
}

.mycourse-review-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    border: 1px solid #FFC107;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: #333333;
}

.mycourse-review-rating img {
    width: 18px;
    height: 18px;
}

/* ── 우측 리스트 박스 ── */
.mycourse-side {
    position: relative;
    width: 600px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px;
    border-radius: 30px;
    background: #FFFFFF;
}

.mycourse-side-handle {
    position: absolute;
    top: 60px;
    left: -18px;
    width: 24px;
    height: 48px;
    border: none;
    border-radius: 8px 0 0 8px;
    background: #7954C6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mycourse-side-handle img {
    width: 17px;
    height: 17px;
}

.mycourse-side-logo img {
    height: 34px;
    display: block;
    object-fit: contain;
}

.mycourse-side-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mycourse-side-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mycourse-side-dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 32px;
    border: none;
    border-radius: 10px;
    background: #7954C6;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #FFFFFF;
    cursor: pointer;
}

.mycourse-side-dashboard img {
    width: 17px;
    height: 17px;
}

/* 탭 */
.mycourse-tabs {
    display: flex;
    border-bottom: 1px solid #7954C6;
}

.mycourse-tab {
    flex: 1 0 0;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px 10px 0 0;
    background: #F8F8F8;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.72px;
    color: #BBBBBB;
    cursor: pointer;
}

.mycourse-tab.is-active {
    background: #FFFFFF;
    border: 1px solid #7954C6;
    border-bottom: 1px solid #FFFFFF;
    margin-bottom: -1px;
    font-weight: 500;
    color: #7954C6;
}

/* 전체 진도율 바 */
.mycourse-side-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mycourse-side-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mycourse-side-progress-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.6px;
    color: #333333;
}

.mycourse-side-progress-label img {
    width: 18px;
    height: 18px;
}

.mycourse-side-progress-count {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: #7954C6;
}

.mycourse-side-progress-bar {
    height: 20px;
    border-radius: 100px;
    background: #F8F5FF;
    overflow: hidden;
}

.mycourse-side-progress-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 100px;
    background: #7954C6;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
}

/* 커리큘럼 리스트 */
.mycourse-curriculum {
    display: flex;
    flex-direction: column;
}

.mycourse-chapter {
    display: flex;
    flex-direction: column;
}

.mycourse-chapter-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid #EEEEEE;
}

.mycourse-chapter-toggle {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.mycourse-chapter-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.6px;
    color: #333333;
}

.mycourse-chapter-meta {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.26px;
    color: #888888;
    white-space: nowrap;
}

.mycourse-lesson {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #F4F4F4;
}

.mycourse-lesson-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mycourse-lesson-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    color: #333333;
}

.mycourse-lesson-time {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.26px;
    color: #888888;
}

.mycourse-lesson-status {
    flex-shrink: 0;
    width: 56px;
    text-align: right;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.26px;
    color: #888888;
}

.mycourse-lesson--done {
    opacity: 0.5;
}

.mycourse-lesson--current .mycourse-lesson-title {
    color: #7954C6;
    font-weight: 500;
}

.mycourse-lesson--current .mycourse-lesson-status {
    color: #7954C6;
    font-weight: 500;
}

/* ===== RESPONSIVE =====
   Figma는 1920px 고정 2단 디자인. 태블릿 구간에서는 2단을 유지하고
   (좁은 화면은 가로 스크롤), 모바일(768px)에서만 세로로 전환한다. */
@media (max-width: 768px) {
    .mycourse-dashboard { flex-direction: column; padding: 16px; gap: 16px; }
    .mycourse-main { width: 100%; }
    .mycourse-side { width: 100%; padding: 20px; }
    .mycourse-side-handle { display: none; }
    .mycourse-topbox { flex-direction: column; padding: 20px; }
    .mycourse-topbox-thumb { width: 100%; }
    .mycourse-stats { flex-direction: column; }
    .mycourse-statbox,
    .mycourse-statbox--cert { width: 100%; }
    .mycourse-review { padding: 20px; }
    .mycourse-review-header { flex-direction: column; gap: 12px; }
    .mycourse-side-user { flex-direction: column; align-items: flex-start; }
    .mycourse-side-dashboard { width: 100%; }
    .mycourse-tab { font-size: 15px; }
    .mycourse-chapter-head { flex-wrap: wrap; }
}