@charset "utf-8";

#bo_list, #bo_v {font-family:inherit}
.yt-board {max-width:1200px;margin:35px auto 70px;padding:0 20px;color:#161616;box-sizing:border-box}
.yt-board * {box-sizing:border-box}
.yt-board a {text-decoration:none}
.yt-board-head {display:flex;align-items:center;justify-content:space-between;padding:0 0 24px;border-bottom:1px solid #e8e8e8}
.yt-channel {display:flex;align-items:center;gap:15px}
.yt-channel-thumb {display:block;width:58px;height:58px;overflow:hidden;border:1px solid #e6e6e6;border-radius:50%;background:#f5f5f5}
.yt-channel-thumb img {display:block;width:100%;height:100%;object-fit:cover}
.yt-eyebrow {margin:0 0 4px;color:var(--tc-accent-media);font-size:11px;font-weight:700;letter-spacing:1.4px}
.yt-channel h2 {margin:0;color:#111;font-size:25px;line-height:1.25;font-weight:700}
.yt-channel-meta {margin:6px 0 0;color:#888;font-size:12px}
.yt-channel-meta span:before {content:"";display:inline-block;width:1px;height:10px;margin:0 9px;background:#ddd;vertical-align:-1px}
.yt-admin-link {display:inline-flex;height:38px;padding:0 14px;align-items:center;gap:7px;border:1px solid #ddd;border-radius:5px;color:#555;font-size:12px;background:#fff}
.yt-admin-link:hover {border-color:#999;color:#111}

.yt-toolbar {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 0 20px}
.yt-filter {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yt-filter a {display:inline-flex;height:38px;padding:0 15px;align-items:center;gap:6px;border:1px solid #e3e3e3;border-radius:20px;color:#555;background:#fff;font-size:13px;font-weight:600}
.yt-filter a em {font-style:normal;color:#aaa;font-size:10px;font-weight:400}
.yt-filter a:hover {border-color:#bbb;color:#111}
.yt-filter a.is-active {border-color:#111;background:#111;color:#fff}
.yt-filter a.is-active em {color:#bfbfbf}
.yt-tools {display:flex;align-items:center;gap:7px}
.yt-search-form {display:flex;width:250px;height:38px;border:1px solid #dedede;border-radius:5px;background:#fff;overflow:hidden}
.yt-search-form input {min-width:0;flex:1;height:36px;padding:0 12px;border:0;background:transparent;color:#222;font-family:inherit;font-size:12px;outline:0}
.yt-search-form button {width:40px;border:0;background:transparent;color:#555;font-size:14px;cursor:pointer}
.yt-sort {height:38px;padding:0 31px 0 11px;border:1px solid #dedede;border-radius:5px;background:#fff;color:#555;font-family:inherit;font-size:12px}
.yt-search-result {margin:-4px 0 18px;padding:10px 13px;border-radius:5px;background:#f7f7f7;color:#777;font-size:12px}
.yt-search-result strong {color:#222}
.yt-search-result a {float:right;color:var(--tc-accent-media)}

.yt-card-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 16px}
.yt-card {min-width:0;background:#fff}
.yt-thumb-link {display:block;color:var(--tc-dark-surface)}
.yt-thumb {display:block;position:relative;overflow:hidden;padding-top:56.25%;border-radius:7px;background:#111}
.yt-thumb img {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.yt-card:hover .yt-thumb img {transform:scale(1.025)}
.yt-play {display:flex;position:absolute;left:50%;top:50%;width:46px;height:32px;align-items:center;justify-content:center;transform:translate(-50%,-50%);border-radius:8px;background:var(--tc-accent-media-strong);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2);opacity:.94}
.yt-play i {margin-left:2px;font-size:14px}
.yt-duration {position:absolute;right:7px;bottom:7px;padding:3px 6px;border-radius:3px;background:rgba(0,0,0,.78);color:#fff;font-size:10px;line-height:1.2}
.yt-badge {position:absolute;left:8px;top:8px;padding:5px 8px;border-radius:4px;color:#fff;font-size:10px;font-weight:700}
.yt-badge-recommend {background:var(--tc-accent-media)}
.yt-card-body {padding:11px 2px 0}
.yt-card-flags {height:18px;margin-bottom:3px}
.yt-card-flags span {display:inline-block;margin-right:4px;padding:2px 6px;border-radius:3px;background:#f4f4f4;color:#777;font-size:9px}
.yt-card h3 {display:-webkit-box;overflow:hidden;height:43px;margin:0;color:#181818;font-size:14px;line-height:1.5;font-weight:600;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.yt-card-meta {display:flex;gap:9px;margin-top:8px;color:#999;font-size:10px;white-space:nowrap}
.yt-card-meta i {margin-right:2px;color:#aaa}
.yt-empty {grid-column:1/-1;padding:90px 20px;text-align:center;border:1px solid #eee;border-radius:8px;background:#fafafa;color:#999}
.yt-empty i {display:block;margin-bottom:15px;color:#d3d3d3;font-size:40px}
.yt-empty strong {display:block;color:#555;font-size:15px}
.yt-empty p {margin:7px 0 0;font-size:12px}


/* 상세 */
.yt-view {max-width:1100px;margin:35px auto 70px;padding:0 20px;color:var(--tc-dark-surface);box-sizing:border-box}
.yt-view * {box-sizing:border-box}
.yt-view-head {padding:0 0 22px;border-bottom:1px solid #e7e7e7}
.yt-view-labels {display:flex;gap:5px;margin-bottom:9px}
.yt-view-labels span {display:inline-block;padding:4px 8px;border-radius:4px;background:#f4f4f4;color:#777;font-size:10px;font-weight:600}
.yt-view-labels .is-recommend {background:var(--tc-accent-soft-0);color:var(--tc-accent-text-2)}
.yt-view h1 {margin:0;color:#111;font-size:28px;line-height:1.35;font-weight:700;word-break:keep-all}
.yt-view-meta {display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:11px;color:#888;font-size:12px}
.yt-view-meta span {position:relative}
.yt-view-meta span+span:before {content:"";position:absolute;left:-9px;top:4px;width:1px;height:10px;background:#ddd}
.yt-player-wrap {margin-top:25px}
.yt-player {position:relative;overflow:hidden;padding-top:56.25%;border-radius:9px;background:#000;box-shadow:0 5px 20px rgba(0,0,0,.1)}
.yt-player iframe {position:absolute;left:0;top:0;width:100%;height:100%;border:0}
.yt-view-actions {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid #e7e7e7}
.yt-stat-group,.yt-button-group {display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.yt-stat {display:inline-flex;height:36px;padding:0 12px;align-items:center;gap:6px;border-radius:18px;background:#f6f6f6;color:#555;font-size:12px}
.yt-stat i {color:#888}
.yt-view-btn {display:inline-flex;height:36px;padding:0 12px;align-items:center;gap:6px;border:1px solid #ddd;border-radius:5px;background:#fff;color:#555;font-family:inherit;font-size:12px;cursor:pointer}
.yt-view-btn:hover {border-color:#999;color:#111}
.yt-view-content {padding:26px 0 32px;border-bottom:1px solid #e7e7e7;color:#444;font-size:14px;line-height:1.85;word-break:break-word}
.yt-related {padding-top:30px}
.yt-related-head {display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}
.yt-related-head h2 {margin:0;color:#111;font-size:20px}
.yt-related-head a {color:#777;font-size:11px}
.yt-related-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.yt-related-card {display:block;color:#111}
.yt-related-card .yt-thumb {border-radius:6px}
.yt-related-card h3 {display:-webkit-box;overflow:hidden;margin:8px 0 0;font-size:12px;line-height:1.5;font-weight:600;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.yt-related-card p {margin:5px 0 0;color:#999;font-size:10px}
.yt-view-nav {display:flex;justify-content:space-between;gap:10px;margin-top:25px}
.yt-view-nav a {display:inline-flex;height:38px;padding:0 14px;align-items:center;gap:7px;border:1px solid #ddd;border-radius:5px;color:#555;background:#fff;font-size:12px}

@media (max-width:1024px) {
    .yt-card-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
    .yt-toolbar {align-items:flex-start;flex-direction:column}
    .yt-tools {width:100%}
    .yt-search-form {flex:1;width:auto}
    .yt-related-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px) {
    .yt-board,.yt-view {margin-top:20px;padding:0 14px}
    .yt-card-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
    .yt-channel h2 {font-size:21px}
    .yt-channel-thumb {width:48px;height:48px}
    .yt-admin-link {display:none}
    .yt-tools {align-items:stretch}
    .yt-sort {width:100px}
    .yt-view h1 {font-size:22px}
    .yt-view-actions {align-items:flex-start;flex-direction:column}
    .yt-related-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px) {
    .yt-card-grid {grid-template-columns:1fr}
    .yt-card h3 {height:auto;min-height:42px;font-size:15px}
    .yt-filter {width:100%}
    .yt-filter a {flex:1;justify-content:center;padding:0 8px}
    .yt-search-form {width:100%}
    .yt-tools {flex-wrap:wrap}
    .yt-sort {width:100%}
    .yt-related-grid {grid-template-columns:1fr 1fr}
    .yt-view-nav {flex-direction:column}
    .yt-view-nav a {justify-content:center}
}

/* TubeCar YouTube pagination final override */
.yt-paging {
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 64px 0 78px !important;
    margin: 0 !important;
    text-align: center !important;
}

.yt-paging > nav.pg_wrap,
.yt-paging .pg_wrap {
    clear: both !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}

.yt-paging .pg_wrap > .pg,
.yt-paging .pg {
    float: none !important;
    display: inline-flex !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    vertical-align: top !important;
}

.yt-paging .pg_page,
.yt-paging .pg_current {
    float: none !important;
    display: inline-flex !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 760px) {
    .yt-paging {
        padding: 46px 0 58px !important;
    }
}

/* ==========================================================
   CAR REVIEW - YouTube pagination BLACK / RED theme
   ========================================================== */
.yt-paging .pg_page,
.yt-paging .pg_current{
    border:1px solid #d9dde2!important;
    border-radius:4px!important;
    background:#fff!important;
    color:var(--tc-dark-2)!important;
    font-weight:700!important;
    text-decoration:none!important;
    box-shadow:none!important;
    transition:border-color .15s ease,background .15s ease,color .15s ease!important;
}

.yt-paging .pg_page:hover,
.yt-paging .pg_page:focus{
    border-color:var(--tc-accent)!important;
    background:var(--tc-accent-soft-7)!important;
    color:var(--tc-accent)!important;
}

.yt-paging .pg_current{
    border-color:var(--tc-accent)!important;
    background:var(--tc-accent)!important;
    color:#fff!important;
}

/* 처음 / 이전 / 다음 / 마지막 */
.yt-paging .pg_start,
.yt-paging .pg_prev,
.yt-paging .pg_next,
.yt-paging .pg_end{
    border-color:var(--tc-dark-2)!important;
    background:var(--tc-dark-2)!important;
    color:#fff!important;
}

.yt-paging .pg_start:hover,
.yt-paging .pg_prev:hover,
.yt-paging .pg_next:hover,
.yt-paging .pg_end:hover,
.yt-paging .pg_start:focus,
.yt-paging .pg_prev:focus,
.yt-paging .pg_next:focus,
.yt-paging .pg_end:focus{
    border-color:var(--tc-accent)!important;
    background:var(--tc-accent)!important;
    color:#fff!important;
}

/* 그누보드 기본 페이징 배경아이콘/파란색 강제 제거 */
.yt-paging .pg_page,
.yt-paging .pg_start,
.yt-paging .pg_prev,
.yt-paging .pg_next,
.yt-paging .pg_end{
    background-image:none!important;
}

@media(max-width:760px){
    .yt-paging .pg_page,
    .yt-paging .pg_current{
        min-width:32px!important;
        height:32px!important;
        padding:0 8px!important;
        font-size:11px!important;
    }
}


/* ==========================================================
   YouTube pagination navigation arrow fix
   기본 그누보드 background 이미지 대신 직접 화살표 표시
   ========================================================== */
.yt-paging .pg_start,
.yt-paging .pg_prev,
.yt-paging .pg_next,
.yt-paging .pg_end{
    position:relative!important;
    min-width:34px!important;
    width:34px!important;
    height:34px!important;
    padding:0!important;
    text-indent:0!important;
    overflow:hidden!important;
    font-size:0!important;
    line-height:34px!important;
    text-align:center!important;
}

.yt-paging .pg_start:before,
.yt-paging .pg_prev:before,
.yt-paging .pg_next:before,
.yt-paging .pg_end:before{
    display:block!important;
    position:absolute!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    height:100%!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:20px!important;
    font-weight:700!important;
    line-height:32px!important;
    text-align:center!important;
    text-indent:0!important;
}

.yt-paging .pg_start:before{content:"«"!important;}
.yt-paging .pg_prev:before{content:"‹"!important;}
.yt-paging .pg_next:before{content:"›"!important;}
.yt-paging .pg_end:before{content:"»"!important;}

@media(max-width:760px){
    .yt-paging .pg_start,
    .yt-paging .pg_prev,
    .yt-paging .pg_next,
    .yt-paging .pg_end{
        min-width:32px!important;
        width:32px!important;
        height:32px!important;
        line-height:32px!important;
    }
    .yt-paging .pg_start:before,
    .yt-paging .pg_prev:before,
    .yt-paging .pg_next:before,
    .yt-paging .pg_end:before{
        font-size:19px!important;
        line-height:30px!important;
    }
}


/* Theme sync 2026-09-05 */
.yt-filter a{
    border-color:var(--tc-yt-filter-border)!important;
    color:var(--tc-yt-filter-text)!important;
    background:var(--tc-yt-filter-bg)!important;
}
.yt-filter a em{color:var(--tc-yt-filter-count)!important}
.yt-filter a:hover,
.yt-filter a:focus{
    border-color:var(--tc-yt-filter-hover-border)!important;
    color:var(--tc-yt-filter-hover-text)!important;
}
.yt-filter a.is-active{
    border-color:var(--tc-yt-filter-active-border)!important;
    background:var(--tc-yt-filter-active-bg)!important;
    color:var(--tc-yt-filter-active-text)!important;
}
.yt-filter a.is-active em{color:var(--tc-yt-filter-active-count)!important}


/* ==========================================================
   TubeCar YouTube related cars fix 2026-09-05
   ========================================================== */
.yt-related-cars{
    padding-top:30px;
}
.yt-related-car-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}
.yt-related-car-card{
    display:block;
    min-width:0;
    overflow:hidden;
    border:1px solid #e4e7eb;
    border-radius:7px;
    background:#fff;
    color:#20242b;
    text-decoration:none;
    box-shadow:0 2px 8px rgba(0,0,0,.035);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.yt-related-car-card:hover,
.yt-related-car-card:focus{
    border-color:var(--tc-accent);
    color:#20242b;
    box-shadow:0 7px 20px rgba(0,0,0,.08);
    transform:translateY(-2px);
}
.yt-related-car-image{
    display:block;
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#f1f2f4;
}
.yt-related-car-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .22s ease;
}
.yt-related-car-card:hover .yt-related-car-image img,
.yt-related-car-card:focus .yt-related-car-image img{
    transform:scale(1.025);
}
.yt-related-car-body{
    padding:10px 11px 11px;
}
.yt-related-car-body>strong{
    display:block;
    overflow:hidden;
    color:#20242b;
    font-size:12px;
    font-weight:700;
    line-height:1.45;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.yt-related-car-body>p{
    margin:5px 0 8px;
    overflow:hidden;
    color:#8a9099;
    font-size:10px;
    line-height:1.4;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.yt-related-car-body>div{
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-top:8px;
    border-top:1px solid #eef0f2;
}
.yt-related-car-body b{
    min-width:0;
    overflow:hidden;
    color:var(--tc-accent-text);
    font-size:12px;
    line-height:1.35;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.yt-related-car-body span{
    flex:0 0 auto;
    color:#8b9199;
    font-size:9px;
    line-height:1.35;
    white-space:nowrap;
}
@media (max-width:1024px){
    .yt-related-car-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
    .yt-related-cars{padding-top:24px;}
    .yt-related-car-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .yt-related-car-body{padding:9px 9px 10px;}
}
@media (max-width:480px){
    .yt-related-car-grid{
        display:flex;
        gap:10px;
        overflow-x:auto;
        padding:0 0 5px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }
    .yt-related-car-card{
        flex:0 0 78%;
        max-width:280px;
        scroll-snap-align:start;
    }
}


/* ==========================================================
   TubeCar YouTube detail comment theme sync 2026-09-05
   ========================================================== */
#yt_view .cmt_btn span.total{
    color:var(--tc-accent)!important;
}
#yt_view .cmt_btn span.total:after{
    background:var(--tc-accent)!important;
}
#yt_view .bo_vc_w .btn_submit,
#yt_view #bo_vc_w .btn_submit{
    border:1px solid var(--tc-accent)!important;
    background:var(--tc-accent)!important;
    color:var(--tc-home-accent-contrast)!important;
    box-shadow:none!important;
}
#yt_view .bo_vc_w .btn_submit:hover,
#yt_view .bo_vc_w .btn_submit:focus,
#yt_view #bo_vc_w .btn_submit:hover,
#yt_view #bo_vc_w .btn_submit:focus{
    border-color:var(--tc-accent-hover)!important;
    background:var(--tc-accent-hover)!important;
    color:var(--tc-home-accent-contrast)!important;
}


/* ==========================================================
   TubeCar YouTube detail action bar refinement 2026-09-05
   ========================================================== */
.yt-view-actions{
    display:flex!important;
    min-height:58px!important;
    margin-top:11px!important;
    padding:10px 12px!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    border:1px solid var(--tc-line)!important;
    border-radius:8px!important;
    background:var(--tc-surface-soft)!important;
    box-shadow:0 2px 8px rgba(0,0,0,.025)!important;
}
.yt-view-actions .yt-stat-group,
.yt-view-actions .yt-button-group{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:6px!important;
}
.yt-view-actions .yt-stat{
    display:inline-flex!important;
    height:34px!important;
    padding:0 11px!important;
    align-items:center!important;
    gap:6px!important;
    border:1px solid var(--tc-line)!important;
    border-radius:17px!important;
    background:var(--tc-surface)!important;
    color:#555d68!important;
    font-size:11.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.yt-view-actions .yt-stat i{
    color:var(--tc-accent)!important;
    font-size:12px!important;
}
.yt-view-actions .yt-view-btn{
    display:inline-flex!important;
    height:34px!important;
    min-width:0!important;
    padding:0 11px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    border:1px solid var(--tc-line)!important;
    border-radius:5px!important;
    background:var(--tc-surface)!important;
    color:#4e5661!important;
    font-family:inherit!important;
    font-size:11.5px!important;
    font-weight:600!important;
    line-height:1!important;
    text-decoration:none!important;
    cursor:pointer!important;
    transition:border-color .15s ease,color .15s ease,background .15s ease!important;
}
.yt-view-actions .yt-view-btn i{
    color:var(--tc-accent)!important;
    font-size:12px!important;
}
.yt-view-actions .yt-view-btn:hover,
.yt-view-actions .yt-view-btn:focus{
    border-color:var(--tc-accent)!important;
    background:var(--tc-accent-soft-4)!important;
    color:var(--tc-accent-text)!important;
    outline:0!important;
}
.yt-view-actions .yt-view-youtube i{
    color:#ff0000!important;
}
.yt-view-actions .yt-view-youtube:hover,
.yt-view-actions .yt-view-youtube:focus{
    border-color:#ffb9b9!important;
    background:#fff5f5!important;
    color:#b62020!important;
}
@media(max-width:760px){
    .yt-view-actions{
        min-height:0!important;
        padding:10px!important;
        align-items:stretch!important;
        flex-direction:column!important;
        gap:9px!important;
    }
    .yt-view-actions .yt-stat-group,
    .yt-view-actions .yt-button-group{
        width:100%!important;
    }
    .yt-view-actions .yt-stat-group{
        justify-content:flex-start!important;
    }
    .yt-view-actions .yt-button-group{
        padding-top:9px!important;
        border-top:1px solid var(--tc-line)!important;
        justify-content:flex-end!important;
    }
    .yt-view-actions .yt-stat,
    .yt-view-actions .yt-view-btn{
        height:33px!important;
        font-size:11px!important;
    }
}
@media(max-width:480px){
    .yt-view-actions .yt-button-group{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
    }
    .yt-view-actions .yt-view-btn{
        width:100%!important;
    }
}


/* ==========================================================
   TubeCar YouTube mobile action buttons single row 2026-09-05
   ========================================================== */
@media(max-width:480px){
    .yt-view-actions .yt-button-group{
        display:flex!important;
        width:100%!important;
        flex-wrap:nowrap!important;
        gap:6px!important;
    }
    .yt-view-actions .yt-view-btn{
        width:auto!important;
        min-width:0!important;
        flex:1 1 0!important;
        padding:0 6px!important;
        font-size:10.5px!important;
        white-space:nowrap!important;
    }
}