@charset "utf-8";

/* ================================================================
   UXC BLOG TIMELINE V2 - 새로운 기준 기반 보정본
   수정 사항:
   1. 카드 내부(.card-info) 배경을 화이트(#ffffff)로 고정
   2. 회원 이름(.author-name) 및 아이콘 색상을 블랙(#212529)으로 고정
   3. 나머지 모든 원본 레이아웃 및 다크모드 변수 유지
   ================================================================ */

/* --- CSS 변수: 라이트 모드 (원본 유지) --- */
.timeline-board-wrap[data-theme="light"] {
    --bg-primary: transparent;
    --bg-secondary: rgba(0, 0, 0, 0.04);
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-primary: #212529;
    --text-secondary: #666e75;
    --text-tertiary: #9ca3af;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --timeline-line: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
    
    --color-prime: #ff9100; /* 보라색 대신 상위의 오렌지색 계열로 변경 */
    --color-prime-hover: #f57c00;
    --color-notice: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-orange: #ff6b35;
    --color-orange-hover: #ff5722;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* --- CSS 변수: 다크 모드 (원본 유지) --- */
.timeline-board-wrap[data-theme="dark"] {
    --bg-primary: transparent;
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --bg-card: rgba(18, 20, 24, 0.9); 
    --text-primary: #ffffff; 
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.08);
    --timeline-line: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    
    --color-prime: #818cf8;
    --color-prime-hover: #6366f1;
    --color-notice: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
    --color-danger: #ef4444;
    --color-warning: #fbbf24;
    --color-orange: #fb923c;
    --color-orange-hover: #f97316;
    
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* 전역 스타일 */
.timeline-board-wrap {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    padding: 60px 0;
}

.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: center; 
    margin-bottom: 100px;
    width: 100%;
    cursor: default;
}

.timeline-node {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    z-index: 100;
}

.timeline-item.left {
    justify-content: flex-end;
    padding-right: calc(50% + 60px);
    padding-left: 20px;
}

.timeline-item.left .timeline-card {
    width: 100%;
    max-width: 520px;
    margin-right: 0 !important;
}

.timeline-item.left .node-date {
    margin-left: 45px;
    position: absolute;
    left: 100%;
}

.timeline-item.right {
    justify-content: flex-start;
    padding-left: calc(50% + 60px);
    padding-right: 20px;
}

.timeline-item.right .timeline-card {
    width: 100%;
    max-width: 520px;
    margin-left: 0 !important;
}

.timeline-item.right .node-date {
    margin-right: 45px;
    position: absolute;
    right: 100%;
}

.node-avatar {
    width: 52px;
    height: 52px;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), var(--shadow-md);
    flex-shrink: 0;
    overflow: hidden;
}

.node-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.node-date {
    font-size: 26px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    transition: all 1.5s ease !important;
    line-height: 1.35 !important; 
    display: block !important;
    text-align: center !important;
    color: rgba(150, 150, 150, 0.25) !important; 
}

.timeline-item:hover .node-date {
    color: rgba(150, 150, 150, 1) !important;
    text-shadow: 0 0 10px rgba(150, 150, 150, 0.2);
}

@media (max-width: 768px) {
    .node-date {
        font-size: 26px !important;
    }
}

.timeline-card {
    position: relative;
    width: 100%;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid var(--border-light);
    overflow: hidden !important; 
    display: flex;
    min-height: 250px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease !important;
    cursor: pointer;
    will-change: transform; 
}

.timeline-card:hover {
    transform: translateY(-4px) scale(1.01) !important; 
    box-shadow: var(--shadow-lg);
    border-color: var(--color-prime);
}

.timeline-card::before {
    display: none !important;
}

.timeline-card.notice {
    background: var(--color-notice);
    color: white;
    border: none;
    backdrop-filter: none;
}

.timeline-card.notice .card-title,
.timeline-card.notice .card-text,
.timeline-card.notice .author-name,
.timeline-card.notice .meta-time,
.timeline-card.notice .stat-item {
    color: rgba(255, 255, 255, 0.95);
}

.timeline-card.notice .info-footer {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.card-media {
    width: 40%;
    min-width: 0;
    background: #000;
    overflow: hidden;
    position: relative;
}

.youtube-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.youtube-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.timeline-card:hover .img-wrapper img {
    transform: scale(1.08);
}

.img-wrapper.no-image {
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-wrapper.no-image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: 0.3;
}

.card-info {
    width: 60%;
    min-width: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff !important; 
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.author-avatar {
    display: block !important;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}

.author-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.author-name {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    white-space: nowrap !important;
    forced-color-adjust: none !important;
    -webkit-text-fill-color: #212529 !important;
}

.author-name a,
.author-name b,
.author-name span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.author-name img {
    display: inline-block !important;
    width: auto !important;
    height: 16px !important;
    margin-right: 8px !important;
    filter: none !important;
    vertical-align: middle;
}

.btn-message {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 5px;
    font-size: 12px;
    border-radius: 8px;
    text-decoration: none !important;
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    color: #495057 !important;
    transition: all 0.2s ease;
}

.btn-message:hover {
    background-color: var(--color-prime) !important;
    border-color: var(--color-prime) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-message:active {
    transform: translateY(0);
    filter: brightness(0.9);
}

.info-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: #212529;
    margin: 0;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.badge-notice {
    display: inline-block;
    padding: 2px 8px;
    font-size: 15px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin-right: 6px;
}

.card-text {
    font-size: 13px;
    line-height: 1.6;
    color: #666e75;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.info-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    gap: 10px;
}

.meta-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #9ca3af;
}

.meta-stats {
    display: flex;
    gap: 12px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #666e75;
}

.timeline-header-tools {
    margin: 0 auto 30px;
    max-width: 1200px;
    padding: 0 20px;
}

.timeline-category-nav {
    margin-bottom: 25px;
}

.timeline-category-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-category-nav li a {
    display: block;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    transition: none !important;
    text-decoration: none;
}

.timeline-category-nav li a:active,
.timeline-category-nav li a#bo_cate_on {
    background: var(--color-prime) !important;
    color: #ffffff !important;
    border-color: var(--color-prime) !important;
    font-weight: 700;
}

.timeline-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text-secondary);
}

.timeline-status-bar strong {
    color: var(--color-prime);
}

.btn-admin-setup {
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 16px;
}

.timeline-pagination-wrap {
    margin: 60px 0 40px;
    text-align: center;
}

.timeline-pagination-wrap .pg {
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.timeline-pagination-wrap .pg_page, 
.timeline-pagination-wrap .pg_current,
.timeline-pagination-wrap .pg_start,
.timeline-pagination-wrap .pg_prev,
.timeline-pagination-wrap .pg_next,
.timeline-pagination-wrap .pg_last {
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}

.timeline-pagination-wrap .pg_page {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.timeline-pagination-wrap .pg_current {
    background: var(--color-prime) !important;
    color: #ffffff !important;
    font-weight: 700;
}

.timeline-pagination-wrap a:hover {
    background: var(--border-color);
}

/* 플로팅 네비게이션 설정 */
.f-nav-container {
    position: fixed !important;
    left: 50% !important;
    bottom: 25px !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: auto !important;
    pointer-events: none !important;
}

.f-btn, .f-search-box, .f-search-trigger {
    pointer-events: auto !important;
}

.f-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 15px !important;
    background: #ff9100 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer !important;
    transition: filter 0.2s ease !important;
}

.f-search-box {
    display: flex !important;
    align-items: center;
    width: 78px;
    height: 32px;
    background: #ff9100;
    border-radius: 6px;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    pointer-events: auto !important;
}

.f-nav-container.active .f-search-box {
    width: 500px;
    background: #fff !important;
    border: 1px solid #ff9100;
}

.f-select {
    display: none;
    width: 95px !important;
    height: 100%;
    background: #ff9100;
    color: #fff;
    border: none !important;
    padding: 0 5px;
    font-size: 11px;
    flex-shrink: 0;
}

.f-input {
    display: none;
    flex: 1 !important;
    border: none !important;
    padding: 0 12px;
    font-size: 13px;
    outline: none !important;
    background: transparent !important;
    color: #000 !important;
}

.f-input::placeholder {
    color: #888 !important;
}

.f-search-trigger {
    position: relative !important;
    z-index: 10 !important;
    width: 78px !important;
    height: 32px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #ff9100 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.f-nav-container.active .f-search-trigger {
    width: 38px !important;
}

.f-search-trigger span {
    display: inline-block;
}

.f-nav-container.active .f-search-trigger span {
    display: none;
}

.f-btn:hover, .f-search-trigger:hover {
    filter: brightness(1.12) !important;
}

.f-nav-container.active .f-select,
.f-nav-container.active .f-input {
    display: block !important;
}

/* 타임라인 세로 라인 보정 (원본 라인 496) */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, 
        rgba(99, 102, 241, 0) 0%, 
        rgba(121, 122, 196, 0.9) 15%, 
        rgba(216, 133, 175, 1.0) 50%, 
        rgba(95, 91, 172, 0.9) 85%, 
        rgba(79, 70, 229, 0) 100%
    );
    transform: translateX(-50%);
    z-index: 0; /* -1에서 0으로 보정 */
}

/* ================================================================
   [정밀 타격] 모바일 레이아웃 최적화 (V67 기반 원본 복구)
   ================================================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
    }

    .timeline-line {
        display: none !important;
    }

    .timeline-board-wrap {
        width: 100% !important;
        padding: 40px 0 !important;
        overflow-x: hidden !important;
    }

    .timeline-container {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .timeline-item,
    .timeline-item.left,
    .timeline-item.right {
        display: block !important;
        width: 100% !important;
        padding: 0 15px !important;
        margin-bottom: 60px !important;
        box-sizing: border-box !important;
        left: 0 !important;
        transform: none !important;
    }

    .timeline-node {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    .node-avatar {
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .node-date {
        position: relative !important;
        display: inline-block !important;
        margin-left: 12px !important;
        font-size: 28px !important;
        font-weight: 900 !important;
        color: #bbbbbb !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        left: auto !important;
        right: auto !important;
    }

    .timeline-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    }

    .card-media {
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        flex: none !important;
    }

    .card-info {
        width: 100% !important;
        padding: 22px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
    }

    /* ------------------------------------------------------------
       [모바일 전용] 플로팅 메뉴 정밀 교정 (크기 대칭 + 위치 상승)
       ------------------------------------------------------------ */
    .f-nav-container {
        bottom: 20px !important; /* 평상시 위치 */
        width: 94% !important;   
        gap: 8px !important;     
        transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 위로 올라가는 애니메이션 */
    }

    /* [정밀 타격] 검색창 활성화(active) 시 위로 슥 올라가서 간섭 방지 */
    .f-nav-container.active {
        bottom: 85px !important; 
    }

    /* 글쓰기 버튼과 검색 버튼 닫혔을 때 크기 완벽 일치 */
    .f-btn, 
    .f-search-trigger {
        height: 34px !important;
        min-width: 75px !important; /* 두 버튼의 너비를 동일하게 고정 */
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* 검색창 박스 기본 설정 */
    .f-search-box {
        height: 34px !important;
        width: 75px !important; /* 닫혔을 때 글쓰기 버튼과 대칭 */
        transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 검색창 확장 시 너비 확보 */
    .f-nav-container.active .f-search-box {
        width: auto !important;
        flex: 1 !important;
        max-width: calc(100vw - 110px) !important;
    }

    /* 확장 상태에서 검색 아이콘 버튼만 작게 축소 */
    .f-nav-container.active .f-search-trigger {
        min-width: 38px !important;
        width: 38px !important;
    }
}
/* EOF */

/* reaction CSS → board.css 전역으로 이동 (uxc_reaction 모듈) */

/* ================================================================
   ADMIN BTN — board.css .boardListWrap 스코프를 timeline으로 재매핑
   ================================================================ */
#timeline_skin_wrap .admBtn {display:flex; justify-content:space-between; align-items:center; padding:16px 0; margin-top:8px;}
#timeline_skin_wrap .admBtn .buttonWrap {display:flex; gap:8px;}
#timeline_skin_wrap .admBtn .buttonWrap button {display:flex; align-items:center; justify-content:center; padding:10px; border:1px solid var(--board-gray-300); border-radius:var(--board-radius-lg,8px); background:var(--board-white,#fff); color:var(--board-gray-600,#555); font-size:14px; cursor:pointer; transition:all .15s;}
#timeline_skin_wrap .admBtn .buttonWrap button i {font-size:18px;}
#timeline_skin_wrap .admBtn .buttonWrap button:hover {border-color:var(--color-prime); color:var(--color-prime);}
#timeline_skin_wrap .admBtn .buttonWrap button.warning {border-color:var(--board-danger,#e74c3c); color:var(--board-danger,#e74c3c);}
#timeline_skin_wrap .admBtn .buttonWrap button.warning:hover {background:var(--board-danger,#e74c3c); color:#fff; border-color:var(--board-danger,#e74c3c);}
#timeline_skin_wrap .admBtn .buttonWrap button.prime {border-color:var(--color-prime); color:var(--color-prime);}
#timeline_skin_wrap .admBtn .buttonWrap button.prime:hover {background:var(--color-prime); color:#fff;}
#timeline_skin_wrap .admBtn .levelWrap {display:flex; flex-wrap:wrap; gap:8px;}
#timeline_skin_wrap .admBtn .levelWrap dl {display:flex; align-items:center; padding:4px 8px; border:1px solid var(--board-gray-300,#dee2e6); border-radius:16px; background:var(--board-white,#fff); font-size:12px; gap:4px;}
#timeline_skin_wrap .admBtn .levelWrap dl dt {color:var(--board-gray-500,#adb5bd);}
#timeline_skin_wrap .admBtn .levelWrap dl dd {color:var(--color-prime); font-weight:600;}

/* ================================================================
   SEARCH RESULT BANNER
   ================================================================ */
#timeline_skin_wrap .boardViewWrap .searchResult {display:flex; align-items:center; gap:12px; padding:16px 20px; margin-bottom:20px; border-radius:12px; color:var(--board-gray-900,#111);}
#timeline_skin_wrap .boardViewWrap .searchResult i {font-size:22px; color:var(--color-prime);}
#timeline_skin_wrap .boardViewWrap .searchResult p {margin:0; font-size:14px;}
#timeline_skin_wrap .boardViewWrap .searchResult strong {color:var(--color-prime); font-weight:600;}

/* ================================================================
   RESPONSIVE — admBtn
   ================================================================ */
@media (max-width: 767px) {
    #timeline_skin_wrap .admBtn {flex-direction:column; gap:16px; align-items:stretch; overflow:auto;}
    #timeline_skin_wrap .admBtn .levelWrap {justify-content:center;}
    #timeline_skin_wrap .admBtn .levelWrap dl dt {white-space:nowrap;}
    #timeline_skin_wrap .admBtn .buttonWrap {justify-content:center;}
}