/*
 * Dogabit 상세 페이지 레이아웃
 * 모든 규칙은 body.dgb-pl 아래에만 걸린다. JS가 실패하면 body.dgb-pl이 붙지 않아 지금 모습 그대로 남는다.
 * 2단계에서 차일드 테마로 옮길 수 있도록 이 파일은 독립적으로 둔다.
 */

body.dgb-pl {
    --dgb-c: #6b6b6b;
    --dgb-c-hover: #222222;
    --dgb-sep: #c4c4c4;
}
body.dgb-pl.dgb-pl--dark {
    --dgb-c: #a8a8a8;
    --dgb-c-hover: #ffffff;
    --dgb-sep: #5a5a5a;
}

/* 다크 템플릿 배경 통일 (#333 등 무채색 회색 → #141414) */
body.dgb-pl .entry-content > .vc_row.dgb-pl-row.dgb-pl-deep {
    background-color: #141414 !important;
}

/* 헤더를 흰 글자로 바꾼 글(Burberry 등): 제목·크레딧도 다크 템플릿 글자색으로 */
body.dgb-pl.dgb-pl-flip .dgb-pl-text .vc_custom_heading,
body.dgb-pl.dgb-pl-flip .dgb-pl-text .vc_custom_heading * {
    color: #ffffff !important;
}
body.dgb-pl.dgb-pl-flip .dgb-pl-text .vc_custom_heading:first-child,
body.dgb-pl.dgb-pl-flip .dgb-pl-text .vc_custom_heading:first-child * {
    color: #f4f4f4 !important;
}

/* 이전/다음 띠, 푸터 숨김 */
body.dgb-pl .post-nav,
body.dgb-pl #footer {
    display: none !important;
}

/* 영상 행: 화면 높이 강제와 6% 여백 제거 */
body.dgb-pl .entry-content > .vc_row.dgb-pl-row {
    /* 내용이 화면보다 짧아도 행 배경(다크 템플릿의 어두운 색)이 화면 끝까지 차도록, 내용은 위쪽 정렬 */
    min-height: var(--dgb-minh, 0px) !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    padding-top: var(--dgb-top, 114px) !important;
    padding-bottom: 24px !important;
}
body.dgb-pl .entry-content > .vc_row.dgb-pl-row > .wpb_column > .vc_column-inner {
    padding-top: 0 !important;
    justify-content: flex-start !important;
}
body.dgb-pl:not(.dgb-pl-series) .dgb-pl-stage {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
/* 시리즈 글: 영상 칸은 원래 폭 그대로 두고, 크레딧 아래에 이동 버튼만 붙인다 */
body.dgb-pl.dgb-pl-series .dgb-pl-stage {
    width: 100%;
}
body.dgb-pl:not(.dgb-pl-series) .dgb-pl-stage > * {
    margin-bottom: 0 !important;
}
/* 시리즈 글(영상이 세로로 쌓이는 글): 영상 사이를 딱 붙이지 않고 띄운다 */
body.dgb-pl.dgb-pl-series .dgb-pl-stage > .wpb_raw_code {
    margin-bottom: 32px !important;
}
body.dgb-pl .dgb-pl-video {
    width: var(--dgb-vw, 100%);
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
}
/* Vimeo처럼 iframe 크기가 고정된 플레이어는 비율만 유지하며 폭에 맞춘다 */
body.dgb-pl .dgb-pl-video iframe.dgb-pl-frame {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--dgb-ar, 16 / 9);
}

/* 정보 영역: 왼쪽 제목·크레딧, 오른쪽 이동 버튼 */
body.dgb-pl .dgb-pl-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-top: 28px;
}
body.dgb-pl .dgb-pl-text {
    flex: 1 1 auto;
    min-width: 0;
}
body.dgb-pl .dgb-pl-text .vc_custom_heading {
    margin-top: 0 !important;
    overflow-wrap: anywhere;
}
body.dgb-pl .dgb-pl-text .vc_custom_heading:first-child {
    margin-bottom: 10px !important;
}
body.dgb-pl .dgb-pl-text > * {
    margin-bottom: 12px !important;
}
body.dgb-pl .dgb-pl-text > *:last-child {
    margin-bottom: 0 !important;
}
/* 크레딧 아래 추가 설명 글(AI 안내 등)의 문단 위아래 여백을 줄인다 */
body.dgb-pl .dgb-pl-text p:first-child {
    margin-top: 0;
}
body.dgb-pl .dgb-pl-text p:last-child {
    margin-bottom: 0;
}

/* 이동 버튼 (미니멀) */
body.dgb-pl .dgb-pl-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 8px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.14em;
    font-weight: 500;
    white-space: nowrap;
}
body.dgb-pl .dgb-pl-nav a,
body.dgb-pl .dgb-pl-nav .dgb-pl-off {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--dgb-c) !important;
    text-decoration: none !important;
    background: none;
    border: 0;
    box-shadow: none;
}
body.dgb-pl .dgb-pl-nav a:hover,
body.dgb-pl .dgb-pl-nav a:focus-visible {
    color: var(--dgb-c-hover) !important;
}
body.dgb-pl .dgb-pl-nav a:focus-visible {
    outline: 1px solid var(--dgb-c-hover);
    outline-offset: 4px;
}
body.dgb-pl .dgb-pl-nav .dgb-pl-off {
    opacity: 0.35;
    cursor: default;
}
body.dgb-pl .dgb-pl-sep {
    color: var(--dgb-sep);
}
/* 전체 작업 아이콘: 4px 채운 사각 4개 (11px) */
body.dgb-pl .dgb-pl-grid svg {
    width: 11px;
    height: 11px;
    display: block;
}
body.dgb-pl .dgb-pl-grid svg rect {
    fill: currentColor;
    stroke: none;
}

/* 마우스 올림: 작품 제목 말풍선 */
body.dgb-pl .dgb-pl-nav a[data-title]:hover::after,
body.dgb-pl .dgb-pl-nav a[data-title]:focus-visible::after {
    content: attr(data-title);
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 9px;
    border-radius: 4px;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
    font-weight: 400;
    pointer-events: none;
    z-index: 20;
}
body.dgb-pl .dgb-pl-nav .dgb-pl-prev[data-title]:hover::after,
body.dgb-pl .dgb-pl-nav .dgb-pl-prev[data-title]:focus-visible::after {
    right: auto;
    left: 0;
}

/* 영상 끝 "다음 작업" 카드 */
body.dgb-pl .dgb-pl-card {
    position: absolute;
    right: 24px;
    bottom: 72px; /* WO는 24px이지만 Gumlet 재생 막대(약 50px)를 가리지 않게 올림 */
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 48px);
    padding: 12px 40px 12px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}
body.dgb-pl .dgb-pl-card.is-on {
    opacity: 1;
}
body.dgb-pl .dgb-pl-card[hidden] {
    display: none;
}
body.dgb-pl .dgb-pl-card a.dgb-pl-card-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: #fff !important;
    text-decoration: none !important;
}
body.dgb-pl .dgb-pl-card img {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
    display: block;
}
body.dgb-pl .dgb-pl-card-txt {
    min-width: 0;
}
body.dgb-pl .dgb-pl-card-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    opacity: 0.7;
    margin-bottom: 6px;
}
body.dgb-pl .dgb-pl-card-title {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}
body.dgb-pl .dgb-pl-card-arrow {
    font-size: 18px;
    opacity: 0.8;
}
body.dgb-pl .dgb-pl-card-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 18px;
    line-height: 26px;
    cursor: pointer;
    opacity: 0.7;
}
body.dgb-pl .dgb-pl-card-close:hover,
body.dgb-pl .dgb-pl-card-close:focus-visible {
    opacity: 1;
}
body.dgb-pl .dgb-pl-card-auto {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.8;
}
body.dgb-pl .dgb-pl-card-auto button {
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    background: none;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

/* 시리즈 글: 한 화면 맞춤 없이 이동 버튼만 */
body.dgb-pl.dgb-pl-series .dgb-pl-info {
    justify-content: flex-end;
    margin-bottom: 24px;
}

/* 모바일 (768px 미만) */
/* 칼럼이 flex라 width:auto면 내용 폭으로 줄어든다 → 100%로 고정 */
body.dgb-pl.dgb-pl-mobile .dgb-pl-stage {
    width: 100% !important;
}
body.dgb-pl.dgb-pl-mobile .dgb-pl-video {
    width: 100%;
}
/* 세로 영상은 모바일에서 화면 높이의 80%를 넘지 않게 */
body.dgb-pl.dgb-pl-mobile .dgb-pl-video.dgb-pl-tall {
    width: min(100%, calc(80vh * var(--dgb-ar, 0.5625)));
}
body.dgb-pl.dgb-pl-mobile .dgb-pl-info {
    display: block;
}
body.dgb-pl.dgb-pl-mobile .dgb-pl-nav {
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    padding-top: 0;
}
body.dgb-pl.dgb-pl-mobile .dgb-pl-nav a,
body.dgb-pl.dgb-pl-mobile .dgb-pl-nav .dgb-pl-off {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0 8px;
}
body.dgb-pl.dgb-pl-mobile .dgb-pl-nav a[data-title]::after {
    display: none;
}
body.dgb-pl.dgb-pl-mobile .dgb-pl-card {
    position: static;
    max-width: none;
    margin-top: 16px;
}

/* 동작 줄이기 */
@media (prefers-reduced-motion: reduce) {
    body.dgb-pl .dgb-pl-card {
        transition: none;
    }
}