@charset "utf-8";

/* ==========================================================================
   Guide Style Sheet (Integrated)
   목차:
   1. 공통 설정 (Common)
   2. 메인 인덱스 페이지 스타일 (Index Page - Curriculum Cards)
   3. 상세 학습 페이지 스타일 (Detail Page - Sidebar Layout)
   4. 다크 모드 통합 (Dark Mode)
   ========================================================================== */

/* ---------------------------------------------------------
   1. 공통 설정 (Common)
   --------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

/* 섹션 이동 시 헤더에 가려짐 방지 */
section {
    scroll-margin-top: 100px;
}

/* 배너 버튼 애니메이션 효과 (이동됨) */
.banner-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}
.banner-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.banner-btn:active {
    transform: scale(0.95);
    box-shadow: none;
}

/* ---------------------------------------------------------
   2. 메인 인덱스 페이지 스타일 (Index Page)
   - 용도: 커리큘럼 카드 목록 보여주는 페이지
   --------------------------------------------------------- */
.curriculum-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1rem 6rem 1rem;
}

/* Hero Section (상단 타이틀) */
.curriculum-hero {
    text-align: center;
    margin-bottom: 4rem;
}

.curriculum-hero .badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 9999px;
    background-color: #dbeafe; /* blue-100 */
    color: #2563eb;            /* blue-600 */
}

/* 챕터 카드 (Chapter Card) */
.chapter-card {
    display: block;
    position: relative;
    padding: 1.5rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    height: 100%;
}

.chapter-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    transition: color 0.2s;
}

.chapter-card p {
    font-size: 0.875rem;
    color: #6b7280;
}

/* 카드 호버 (활성 상태) */
.chapter-card:not(.disabled):hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.chapter-card:not(.disabled):hover h3 {
    color: #2563eb;
}

/* ---------------------------------------------------------
   3. 상세 학습 페이지 스타일 (Detail Page)
   - 용도: 사이드바 + 콘텐츠 (요청하신 부분 통합)
   --------------------------------------------------------- */
.guide-container {
    display: flex;
    gap: 1rem;
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem; /* 여백 추가 */
}

/* 사이드바 (데스크톱) */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 120px;
    height: fit-content;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 1rem;
    border-right: 1px solid #e2e8f0;
}

.sidebar-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #64748b; /* Slate-500 */
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    font-size: 0.95rem;
}

/* [수정] 호버 색상 변경 (보라 -> 파랑) */
.sidebar-menu a:hover {
    background-color: #f0f9ff; /* sky-50 (아주 연한 파랑) */
    color: #2563eb;            /* blue-600 */
}

/* [수정] 활성 링크 색상 변경 (보라 -> 파랑) */
.sidebar-menu a.active {
    border-left-color: #2563eb; /* blue-600 */
    color: #2563eb;             /* blue-600 */
    background-color: #eff6ff;  /* blue-50 */
    font-weight: 600;
}

/* 메인 콘텐츠 영역 */
.main-content {
    flex: 1;
    min-width: 0;
}

/* 유튜브 반응형 컨테이너 */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    background-color: #000;
}

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

/* 상단 목차 박스 (TOC Box) */
.toc-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 3rem;
}

.toc-box ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 1.5rem;
}

.toc-box a {
    color: #475569;
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

/* [수정] 목차 링크 호버 색상 변경 (보라 -> 파랑) */
.toc-box a:hover {
    color: #2563eb; /* blue-600 */
    text-decoration: underline;
}

.toc-box i {
    width: 24px;
    color: #94a3b8;
}

/* 모바일 대응 (반응형) */
@media (max-width: 1024px) {
    .sidebar { display: none; } /* 모바일에서 사이드바 숨김 */
    .guide-container { display: block; }
    section { scroll-margin-top: 80px; }
}

/* ---------------------------------------------------------
   4. 다크 모드 통합 (Dark Mode)
   --------------------------------------------------------- */
/* Index Page 다크모드 */
body.dark-mode .curriculum-hero .badge { background-color: #1e3a8a; color: #bfdbfe; }
body.dark-mode .chapter-card { background-color: #1f2937; border-color: #374151; }
body.dark-mode .chapter-card h3 { color: #f3f4f6; }
body.dark-mode .chapter-card p { color: #9ca3af; }
body.dark-mode .chapter-card:not(.disabled):hover { border-color: #60a5fa; background-color: #1e293b; }
body.dark-mode .chapter-card:not(.disabled):hover h3 { color: #60a5fa; }
body.dark-mode .chapter-card.disabled { background-color: #111827; border-color: #374151; }

/* Detail Page 다크모드 */
body.dark-mode .sidebar { border-right-color: #334155; }
body.dark-mode .sidebar-menu a { color: #94a3b8; }

/* [수정] 다크모드 사이드바 호버/활성 색상 변경 (보라 -> 파랑) */
body.dark-mode .sidebar-menu a:hover,
body.dark-mode .sidebar-menu a.active { 
    background-color: #1e293b; 
    color: #60a5fa;          /* blue-400 (밝은 파랑) */
    border-left-color: #60a5fa; /* blue-400 */
}

body.dark-mode .toc-box { background-color: #1e293b; border-color: #334155; }
body.dark-mode .toc-box a { color: #cbd5e1; }
/* [수정] 다크모드 목차 호버 색상 변경 (보라 -> 파랑) */
body.dark-mode .toc-box a:hover { color: #60a5fa; /* blue-400 */ }

/* ---------------------------------------------------------
   5. 섹션 번호 배지 (심플 & 모던 스타일)
--------------------------------------------------------- */
.chapter-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0; /* 얇은 구분선 */
}

.chapter-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 사이즈 축소: 3.5rem -> 2.5rem (약 40px) */
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.75rem; /* 간격도 축소 */
    
    font-size: 1.125rem; /* 폰트 크기 적당하게 */
    font-weight: 700;    /* 너무 두껍지 않게 */
    color: #ffffff;
    
    border-radius: 0.6rem; /* 둥근 모서리 비율 조정 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* 그림자 은은하게 */
    background-size: 200% auto;
    transition: all 0.3s ease;
}

/* 색상 테마 (그라디언트로 세련미 추가) - 배지는 구분용이므로 유지하되 너무 튀지 않게 조정 */
.chapter-badge.blue   { background-image: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.chapter-badge.purple { background-image: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); } /* 보라색 유지 (구분용) */
.chapter-badge.teal   { background-image: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }
.chapter-badge.indigo { background-image: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }

/* 다크 모드 구분선 */
body.dark-mode .chapter-header { border-bottom-color: #374151; }

/* =========================================================
   [수정됨] 신규 콘텐츠 (NEW) 배지 스타일 & 애니메이션
========================================================= */

/* 1. 맥박(Pulse) 애니메이션 정의 */
@keyframes pulse-red-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); /* Tailwind red-500 */
    }
    70% {
        transform: scale(1.05); /* 살짝 커짐 */
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); /* 붉은 빛이 퍼지면서 사라짐 */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* 2. 배지 디자인 및 애니메이션 적용 */
.chapter-card.new::after {
    content: "NEW";
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 900;       /* 가장 두껍게 */
    letter-spacing: 0.05em;
    
    /* 디자인 개선: 강렬한 그라디언트 배경 + 흰색 텍스트 */
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* Red-500 -> Red-600 */
    border: none; /* 테두리 제거하고 깔끔하게 */
    
    padding: 3px 9px; /* 약간 더 도톰하게 */
    border-radius: 9999px; /* 완전 둥근 캡슐형 */
    
    /* 애니메이션 적용: 2초 간격으로 무한 반복 */
    animation: pulse-red-glow 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    
    /* 배지 자체에 약간의 입체감 */
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
    z-index: 10; /* 다른 요소보다 위에 표시 */
}

/* 다크 모드 대응 - 그라디언트만 약간 더 깊이감 있게 */
body.dark-mode .chapter-card.new::after {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); /* Red-600 -> Red-700 */
}

/* =========================================================
   [업데이트됨] 상세 페이지 상단 네비게이션 컨트롤 (애니메이션 강화)
   ========================================================= */

/* --- 1. 공통 애니메이션 및 효과 정의 --- */

/* 톡 튀어오르는 탄성 애니메이션 keyframes */
@keyframes elastic-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); } /* 살짝 커졌다가 */
    75% { transform: scale(0.98); } /* 살짝 작아졌다가 */
    100% { transform: scale(1); }   /* 원래대로 */
}

/* 모든 버튼 공통: 클릭 시 살짝 눌리는 느낌 (Tactile Feedback) */
.btn-url-copy:active,
.btn-learning:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}


/* --- 2. URL 복사 버튼 스타일 --- */
.btn-url-copy {
    font-size: 0.875rem;
    color: #9ca3af; /* gray-400 */
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* 부드러운 전환 */
}

.btn-url-copy:hover {
    color: #4b5563; /* gray-600 */
}

/* [상태] 복사 성공 시 (JS가 'copied' 클래스 추가 시 동작) */
.btn-url-copy.copied {
    color: #2563eb; /* blue-600 */
    font-weight: 700;
    /* 애니메이션 적용: 0.4초 동안 탄성 효과 */
    animation: elastic-pop 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


/* --- 3. 학습 상태 버튼 스타일 --- */
.btn-learning {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    /* 배경색, 테두리, 그림자 부드럽게 전환 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 아이콘 공통 스타일 및 전환 효과 */
.btn-learning i {
    margin-right: 0.375rem;
    font-size: 0.75rem;
    /* 아이콘 변경 시 부드럽게 회전하며 나타나기 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* [상태 A] 학습 중 (기본) */
.btn-learning.default {
    background-color: #ffffff;
    border: 1px solid #9ca3af;
    color: #6b7280;
}

.btn-learning.default:hover {
    border-color: #6b7280;
    color: #111827;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 호버 시 살짝 뜨는 느낌 */
}

/* [상태 B] 학습 완료 (활성) */
.btn-learning.completed {
    background-color: #f0fdf4; /* green-50 */
    border: 1px solid #22c55e; /* green-500 */
    color: #16a34a;            /* green-600 */
    font-weight: 700;
    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2); /* 녹색 그림자 추가 */
    
    /* 완료 상태가 될 때 탄성 애니메이션 실행 */
    animation: elastic-pop 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 학습 완료 상태일 때 아이콘 강조 (살짝 커지면서 회전) */
.btn-learning.completed i {
    transform: scale(1.2) rotate(-10deg); 
}


/* --- 다크 모드 대응 --- */
body.dark-mode .btn-url-copy { color: #9ca3af; }
body.dark-mode .btn-url-copy:hover { color: #e5e7eb; }
body.dark-mode .btn-url-copy.copied { color: #60a5fa; }

body.dark-mode .btn-learning.default {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #d1d5db;
}
body.dark-mode .btn-learning.default:hover {
    border-color: #9ca3af;
    color: #ffffff;
}
body.dark-mode .btn-learning.completed {
    background-color: rgba(20, 83, 45, 0.5); /* green-900 opacity */
    border-color: #22c55e;
    color: #4ade80;
    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.1);
}

/* 배너 전용 스타일 */
.premium-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%); /* blue-50 */
    border: 1px solid #dbeafe; /* blue-100 */
}
body.dark-mode .premium-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); /* slate-800 -> slate-900 */
    border-color: #334155; /* slate-600 */
}

/* =========================================================
   6. 코드 블록 & 복사 버튼 스타일 (Code Block Style)
   ========================================================= */

/* 코드 블록 감싸는 컨테이너 (버튼 위치 기준점) */
.code-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden; /* 모서리 둥글게 */
    border: 1px solid #e2e8f0; /* slate-200 */
    background-color: #f8fafc; /* slate-50 */
}

/* 실제 코드가 들어가는 영역 */
.code-wrapper pre {
    margin: 0;
    padding: 1.25rem;
    padding-right: 3rem; /* 버튼 공간 확보 */
    overflow-x: auto;    /* 가로 스크롤 허용 */
    font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.7;
    color: #334155;      /* slate-700 */
}

/* 프롬프트(한 줄 텍스트)용: 줄바꿈 + 스크롤 제거 */
.code-wrapper.wrap pre {
  overflow-x: hidden;          /* 가로 스크롤 제거 */
  white-space: pre-wrap;       /* 화면에서는 줄바꿈 */
  overflow-wrap: anywhere;     /* 긴 URL도 강제 줄바꿈 */
  word-break: break-word;      /* 구형 브라우저 대비 */
}


/* 복사 버튼 스타일 */
.btn-code-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background-color: transparent;
    border: 1px solid transparent;
    color: #94a3b8; /* slate-400 */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 버튼 호버 효과 */
.btn-code-copy:hover {
    background-color: #e2e8f0; /* slate-200 */
    color: #475569;            /* slate-600 */
}

/* 복사 완료 성공 상태 (JS에서 클래스 추가) */
.btn-code-copy.copied {
    color: #2563eb;       /* blue-600 */
    background-color: #eff6ff; /* blue-50 */
    border-color: #bfdbfe; /* blue-200 */
}

/* --- 다크 모드 대응 --- */
body.dark-mode .code-wrapper {
    background-color: #1e293b; /* slate-800 */
    border-color: #334155;     /* slate-600 */
}

body.dark-mode .code-wrapper pre {
    color: #e2e8f0; /* slate-200 */
}

body.dark-mode .btn-code-copy {
    color: #64748b; /* slate-500 */
}

body.dark-mode .btn-code-copy:hover {
    background-color: #334155; /* slate-600 */
    color: #f1f5f9;            /* slate-100 */
}

body.dark-mode .btn-code-copy.copied {
    color: #60a5fa;            /* blue-400 */
    background-color: #172554; /* blue-950 */
    border-color: #1e40af;     /* blue-800 */
}

/* =========================================================
   [긴급 수정] 다크 모드 가독성 강제 보정 (Dark Mode Overrides)
   * HTML의 dark: 클래스가 작동하지 않을 때를 대비해 강제 적용합니다.
   ========================================================= */

/* 1. 기본 배경 및 텍스트 */
body.dark-mode {
    background-color: #0f172a !important; /* slate-900 */
    color: #e2e8f0 !important;            /* slate-200 */
}

/* 2. 섹션 박스 (흰색/회색 배경이었던 것들 어둡게 변경) */
body.dark-mode section,
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-slate-50 {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #334155 !important;     /* slate-600 */
    box-shadow: none !important;
}

/* 3. 제목 텍스트 (검정/진회색 -> 흰색/밝은회색) */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4,
body.dark-mode .font-bold,
body.dark-mode .font-extrabold {
    color: #f1f5f9 !important; /* slate-100 */
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode span {
    color: #cbd5e1 !important; /* slate-300 */
}

/* 4. 경고/안내 박스 (배경 투명도 조절 및 텍스트 밝게) */
/* 빨간색 경고 박스 */
body.dark-mode .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.2) !important; /* red-900 alpha */
    border-color: #7f1d1d !important;
}
body.dark-mode .bg-red-50 .text-red-700,
body.dark-mode .bg-red-50 .text-red-600 {
    color: #fca5a5 !important; /* red-300 (밝은 빨강) */
}
body.dark-mode .fa-exclamation-circle {
    color: #f87171 !important; /* red-400 */
}

/* 노란색 주의 박스 */
body.dark-mode .bg-yellow-50 {
    background-color: rgba(113, 63, 18, 0.2) !important; /* yellow-900 alpha */
    border-color: #713f12 !important;
}
body.dark-mode .bg-yellow-50 .text-yellow-800,
body.dark-mode .bg-yellow-50 .text-yellow-700 {
    color: #fde047 !important; /* yellow-300 (밝은 노랑) */
}
body.dark-mode .fa-globe-asia {
    color: #facc15 !important; /* yellow-400 */
}

/* 파란색/보라색 정보 박스 */
body.dark-mode .bg-blue-50,
body.dark-mode .bg-indigo-50,
body.dark-mode .bg-purple-50 {
    background-color: #334155 !important; /* slate-700 */
    border-color: #475569 !important;     /* slate-600 */
}
body.dark-mode .text-blue-800,
body.dark-mode .text-indigo-800,
body.dark-mode .text-purple-800 {
    color: #93c5fd !important; /* blue-300 */
}

/* 5. 테이블 스타일 */
body.dark-mode table {
    border-color: #475569 !important;
}
body.dark-mode table thead {
    background-color: #0f172a !important; /* 더 어두운 헤더 */
}
body.dark-mode table th {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-bottom-color: #475569 !important;
}
body.dark-mode table td {
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
/* 테이블 내 강조 텍스트 */
body.dark-mode table .text-green-600 { color: #4ade80 !important; } /* 밝은 초록 */
body.dark-mode table .text-red-600 { color: #f87171 !important; }   /* 밝은 빨강 */

/* 6. 아이콘 및 링크 색상 보정 */
body.dark-mode i.fas, 
body.dark-mode i.fab {
    /* 아이콘들이 너무 어둡지 않게 밝은 파란색 계열로 통일 (특수 아이콘 제외) */
}
body.dark-mode .text-blue-700,
body.dark-mode .text-indigo-700 {
    color: #60a5fa !important; /* blue-400 */
}

/* 7. 다운로드 버튼 등 강조 요소 */
body.dark-mode .bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}
body.dark-mode .bg-blue-600:hover {
    background-color: #3b82f6 !important;
}

/* 8. 브레드크럼 (상단 경로) */
body.dark-mode nav .text-gray-500 {
    color: #94a3b8 !important; /* slate-400 */
}


/* =========================================================
   9. [추가] 회색 버튼 (목차로 이동 등) 및 기타 요소 다크모드 보정
   ========================================================= */

/* 배경색: 회색 (bg-gray-100) -> 어두운 남색으로 변경 */
body.dark-mode .bg-gray-100 {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #334155 !important;     /* slate-600 */
    color: #e2e8f0 !important;            /* 텍스트 밝게 (slate-200) */
}

/* 호버 효과: 조금 더 밝은 남색으로 */
body.dark-mode .bg-gray-100:hover {
    background-color: #334155 !important; /* slate-700 */
    border-color: #475569 !important;     /* slate-500 */
}

/* 텍스트 색상: 진한 회색 (text-gray-600, 700) -> 밝은 회색으로 변경 */
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700 {
    color: #cbd5e1 !important; /* slate-300 */
}

/* 테두리 색상: 연한 회색 (border-gray-200, 300) -> 어두운 테두리로 변경 */
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
    border-color: #334155 !important; /* slate-600 */
}


/* 단, 코드 블록과 인풋 창은 복사 가능하게 예외 처리 */
.code-wrapper, 
.code-wrapper pre, 
.code-wrapper code,
input, 
textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    cursor: text;
}

/* =========================================================
   Access Badge (FREE / 구매자전용)
   - FREE: 정보성, 가볍게
   - PREMIUM: 기존 대비 살짝 정제
========================================================= */

.chapter-card.free::before,
.chapter-card.premium::before {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 11;

    display: inline-flex;
    align-items: center;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 9999px;

    line-height: 1;
    white-space: nowrap;
}

/* FREE – 깔끔 / 정보성 */
.chapter-card.free::before {
    content: "FREE";
    color: #16a34a;
    background-color: #ecfdf5;
    border: 1px solid #bbf7d0;
    box-shadow: none;
}

/* 구매자전용 – 여전히 구분은 확실하게 */
.chapter-card.premium::before {
    content: "구매자전용";
    color: #92400e;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    box-shadow: none;
}

/* 다크 모드 */
body.dark-mode .chapter-card.free::before {
    color: #86efac;
    background-color: rgba(22,163,74,0.15);
    border-color: rgba(22,163,74,0.35);
}

body.dark-mode .chapter-card.premium::before {
    color: #fde68a;
    background-color: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.35);
}

/* =========================================================
   Disabled(= last_updated 없음): Coming Soon 배지 제거 + 회색빛 비활성 느낌
   - 클릭 차단은 JS가 담당 (pointer-events는 쓰지 않음)
========================================================= */

/* Coming Soon 마크 제거 */
.chapter-card.disabled::after {
    content: none !important;
    display: none !important;
}

/* 카드 비활성 비주얼 */
.chapter-card.disabled {
    opacity: 0.62;
    filter: grayscale(45%);
    background: #f8fafc;              /* 살짝 회색빛 */
    border-color: #e5e7eb;
    cursor: not-allowed;
}

/* 제목/설명 톤 다운 */
.chapter-card.disabled h3 {
    color: #64748b !important;
}
.chapter-card.disabled p {
    color: #94a3b8 !important;
}

/* 호버 효과 제거(헷갈리지 않게) */
.chapter-card.disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 다크 모드 */
body.dark-mode .chapter-card.disabled {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(148, 163, 184, 0.18);
}
body.dark-mode .chapter-card.disabled h3 {
    color: rgba(226, 232, 240, 0.72) !important;
}
body.dark-mode .chapter-card.disabled p {
    color: rgba(148, 163, 184, 0.72) !important;
}

/* ✅ 준비중 카드(본문) - 회색 톤다운 + hover 무력화 + 배지 표시 */
.chapter-card.is-disabled{
  opacity: .55;
  filter: grayscale(1);
  cursor: default;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.35);
}

/* 기존 hover/애니메이션이 있으면 무력화 */
.chapter-card.is-disabled:hover{
  transform: none !important;
  box-shadow: none !important;
}

/* 우측 상단 '준비중' 배지 */
.chapter-card.is-disabled{
  position: relative;
}
.chapter-card.is-disabled::after{
  content: "준비중";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  color: rgba(100,116,139,.95);
  background: rgba(248,250,252,.85);
}

/* 다크모드 배지 톤 */
.dark .chapter-card.is-disabled::after{
  background: rgba(15,23,42,.65);
  color: rgba(226,232,240,.9);
  border-color: rgba(148,163,184,.35);
}