@charset "utf-8";

/**
 * 내용관리 스킨 - Clean Portal (Bootstrap 5)
 *
 * Refined editorial design: 마크다운 타이포그래피 완성, 시각적 계층
 * --gb-* 글로벌 변수 참조, --ctt-* 스킨 전용 변수
 * 접두사: ctt-*
 *
 * @version 20260215-002
 */

/* ============================================
   1. 스킨 전용 변수
   ============================================ */

:root {
    --ctt-accent: var(--gb-primary);
    --ctt-accent-light: rgba(37, 99, 235, 0.06);
    --ctt-border: var(--gb-gray-200);
}

/* ============================================
   2. 애니메이션
   ============================================ */

@keyframes ctt-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   3. 래퍼
   ============================================ */

.ctt-wrapper {
    animation: ctt-fadeInUp 0.4s ease-out;
}

/* ============================================
   4. 관리자 버튼 (콘텐츠 하단 중앙)
   ============================================ */

.ctt-admin-area {
    text-align: center;
    margin-top: var(--gb-space-8);
    padding-top: var(--gb-space-6);
    border-top: 1px dashed var(--gb-gray-200);
}

.ctt-admin-btn {
    padding: var(--gb-space-2) var(--gb-space-6);
    font-size: var(--gb-font-sm);
    border-radius: var(--gb-radius);
    transition: all var(--gb-transition);
}

.ctt-admin-btn:hover {
    border-color: var(--gb-primary);
    color: var(--gb-primary);
    box-shadow: var(--gb-shadow-sm);
}

/* ============================================
   5. 본문 콘텐츠
   ============================================ */

#ctt_con {
    line-height: var(--gb-leading-relaxed);
    word-break: keep-all;
    color: var(--gb-gray-700);
}

#ctt_con img {
    max-width: 100%;
    height: auto;
    border-radius: var(--gb-radius);
}

/* 본문 내 제목 */
#ctt_con h2 {
    font-size: var(--gb-font-lg);
    font-weight: var(--gb-font-bold);
    color: var(--gb-gray-800);
    margin-top: var(--gb-space-6);
    margin-bottom: var(--gb-space-3);
    padding-bottom: var(--gb-space-2);
    border-bottom: 1px solid var(--ctt-border);
}

#ctt_con h3 {
    font-size: var(--gb-font-base);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-800);
    margin-top: var(--gb-space-5);
    margin-bottom: var(--gb-space-2);
}

#ctt_con h4,
#ctt_con h5,
#ctt_con h6 {
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-700);
    margin-top: var(--gb-space-4);
    margin-bottom: var(--gb-space-2);
}

/* 본문 내 링크 */
#ctt_con a {
    color: var(--ctt-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--gb-transition);
}

#ctt_con a:hover {
    color: var(--gb-primary-dark, #1d4ed8);
}

/* 본문 내 인용 */
#ctt_con blockquote {
    border-left: 3px solid var(--ctt-accent);
    background-color: var(--ctt-accent-light);
    padding: var(--gb-space-3) var(--gb-space-4);
    margin: var(--gb-space-4) 0;
    border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
    color: var(--gb-gray-600);
    font-style: italic;
}

/* 본문 내 리스트 */
#ctt_con ul,
#ctt_con ol {
    padding-left: 1.5em;
    margin: var(--gb-space-3) 0;
}

#ctt_con li {
    margin-bottom: var(--gb-space-1);
    line-height: var(--gb-leading-relaxed);
}

/* 본문 내 테이블 */
#ctt_con table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--gb-space-4) 0;
    font-size: var(--gb-font-sm);
}

#ctt_con table th,
#ctt_con table td {
    padding: var(--gb-space-2) var(--gb-space-3);
    border: 1px solid var(--ctt-border);
}

#ctt_con table th {
    background-color: var(--gb-gray-50);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-700);
}

#ctt_con table tr:hover td {
    background-color: rgba(37, 99, 235, 0.02);
}

/* 본문 내 코드 (인라인) */
#ctt_con code {
    background-color: var(--gb-gray-100);
    color: var(--gb-danger);
    padding: 0.15em 0.4em;
    border-radius: var(--gb-radius-sm);
    font-size: 0.9em;
}

/* 수평선 */
#ctt_con hr {
    border: none;
    border-top: 1px solid var(--ctt-border);
    margin: var(--gb-space-5) 0;
}

/* ============================================
   6. 아티클 목록 (article-list.skin)
   ============================================ */

.ctt-list-tag-header {
    margin-bottom: var(--gb-space-4);
}

.ctt-list-tag-header h4 {
    font-size: var(--gb-font-lg);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-text-primary);
}

.ctt-list-card {
    border: 1px solid var(--gb-border-default);
    border-radius: var(--gb-radius-lg);
    overflow: hidden;
    background: var(--gb-surface-card);
    transition: box-shadow var(--gb-transition), transform var(--gb-transition);
}

.ctt-list-card:hover {
    box-shadow: var(--gb-shadow-md);
    transform: translateY(-2px);
}

.ctt-list-card-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    display: block;
}

.ctt-list-card-body {
    padding: var(--gb-space-4);
}

.ctt-list-card-title {
    font-size: var(--gb-font-base);
    font-weight: var(--gb-font-semibold);
    line-height: var(--gb-leading-tight);
    margin-bottom: var(--gb-space-2);
}

.ctt-list-card-title a {
    color: var(--gb-text-primary);
    text-decoration: none;
    transition: color var(--gb-transition);
}

.ctt-list-card-title a:hover {
    color: var(--gb-primary);
}

.ctt-list-card-excerpt {
    font-size: var(--gb-font-sm);
    color: var(--gb-text-secondary);
    margin-bottom: var(--gb-space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ctt-list-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gb-space-1);
    margin-top: var(--gb-space-2);
}

.ctt-list-card-tag {
    font-size: var(--gb-font-xs);
    color: var(--gb-text-secondary);
    background: var(--gb-surface-raised);
    border: 1px solid var(--gb-border-subtle);
    padding: 0.125rem 0.5rem;
    border-radius: var(--gb-radius-sm);
    text-decoration: none;
    transition: all var(--gb-transition);
}

.ctt-list-card-tag:hover {
    color: var(--gb-primary);
    border-color: var(--gb-primary);
    background: var(--gb-primary-light);
    text-decoration: none;
}

.ctt-list-card-footer {
    padding: var(--gb-space-3) var(--gb-space-4);
    border-top: 1px solid var(--gb-border-subtle);
    font-size: var(--gb-font-xs);
    color: var(--gb-text-tertiary);
}

/* ============================================
   7. 반응형
   ============================================ */

@media (max-width: 768px) {
    #ctt_con table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 576px) {
    #ctt_con blockquote {
        padding: var(--gb-space-2) var(--gb-space-3);
    }
}

/* ============================================
   8. 모션 감소
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .ctt-wrapper {
        animation: none;
    }

    #ctt_con a {
        transition: none;
    }
}