/* ==========================================================================
   oppadu-briefing-board v1.2.0
   활성 팝업 배너가 2개 이상일 때 쓰는 "브리핑 보드" 팝업.
   대표 배너 1개(크게) + 나머지 목록(작게)을 한 화면에 함께 보여 도달률을 확보한다.

   핸드오프: design_handoff_popup_briefing_board/
   토큰: 오빠두 디자인 시스템 v3 값을 이 컴포넌트 스코프에만 --obb-* 로 선언한다.
         라이브 테마의 동명이값 토큰(--radius-lg 16px vs v3 8px 등)과 충돌하지 않도록
         var(--radius-*) 를 쓰지 않고 여기서 닫아 둔다.
   ========================================================================== */

.oppadu-briefing-board {
    /* 색 */
    --obb-primary:       #047E57;
    --obb-primary-hover: #036546;
    --obb-ink-900:       #1B1B18;
    --obb-ink-700:       #45453F;
    --obb-ink-500:       #8A8A85;
    --obb-line:          #E6E6E2;
    --obb-fill:          #F0F0ED;
    --obb-hover:         #F6F8F7;
    --obb-scrim:         rgba(17, 20, 18, 0.42);
    --obb-chip:          rgba(17, 20, 18, 0.55);
    /* 형태 */
    --obb-radius-modal:  12px;
    --obb-radius-card:   8px;
    --obb-radius-ui:     6px;
    --obb-shadow:        0 2px 8px rgba(17, 17, 16, 0.06), 0 18px 44px rgba(17, 17, 16, 0.09);
    /* 모션 */
    --obb-motion:        280ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* 타이포 */
    --obb-font-en:       "Inter", "Pretendard Variable", Pretendard, system-ui, sans-serif;

    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--obb-motion), visibility var(--obb-motion);
}

.oppadu-briefing-board.is-visible {
    opacity: 1;
    visibility: visible;
}

.oppadu-briefing-board *,
.oppadu-briefing-board *::before,
.oppadu-briefing-board *::after {
    box-sizing: border-box;
}

/* wp_footer 에 붙어 테마 CSS 사정권 안에 들어간다 — 제목·문단 기본값만 걷어낸다 */
.oppadu-briefing-board h2,
.oppadu-briefing-board h3,
.oppadu-briefing-board p {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-transform: none;
}

.oppadu-briefing-board__scrim {
    position: absolute;
    inset: 0;
    background: var(--obb-scrim);
}

/* --------------------------------------------------------------------------
   모달
   -------------------------------------------------------------------------- */
.oppadu-briefing-board__modal {
    position: relative;
    z-index: 400;
    display: flex;
    flex-direction: column;
    width: min(94vw, 880px);
    max-height: 85vh;
    overflow-y: auto;
    border-radius: var(--obb-radius-modal);
    background: #FFFFFF;
    box-shadow: var(--obb-shadow);
    transform: translateY(8px);
    transition: transform var(--obb-motion);
}

.oppadu-briefing-board.is-visible .oppadu-briefing-board__modal {
    transform: translateY(0);
}

/* 포커스 링은 한 겹만 */
.oppadu-briefing-board :focus-visible {
    outline: 2px solid var(--obb-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   헤더
   -------------------------------------------------------------------------- */
.oppadu-briefing-board__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px 12px;
}

.oppadu-briefing-board__title {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--obb-ink-900);
}

.oppadu-briefing-board__count {
    margin-left: 2px;
    font-family: var(--obb-font-en);
    font-weight: 600;
    color: var(--obb-primary);
}

.oppadu-briefing-board__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--obb-radius-ui);
    background: transparent;
    color: var(--obb-ink-700);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.oppadu-briefing-board__close:hover {
    background: var(--obb-fill);
    color: var(--obb-ink-900);
}

.oppadu-briefing-board__close svg {
    display: block;
}

/* --------------------------------------------------------------------------
   본문 그리드
   -------------------------------------------------------------------------- */
.oppadu-briefing-board__body {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 22px;
    padding: 0 24px 22px;
    min-height: 0;
}

/* --- 좌: 대표 배너 ---------------------------------------------------------
   배너 전부를 슬라이드로 깔아 두고 현재 것만 보여 준다. 화살표로 좌/우 이동. */
.oppadu-briefing-board__featured {
    min-width: 0;
}

.oppadu-briefing-board__slide {
    display: none;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.oppadu-briefing-board__slide.is-current {
    display: flex;
}

.oppadu-briefing-board__media {
    position: relative;
    height: 436px;
    border-radius: var(--obb-radius-card);
    overflow: hidden;
    background: var(--obb-fill);
    /* 스와이프 중 브라우저가 가로 스크롤을 가로채지 않게 */
    touch-action: pan-y;
}

.oppadu-briefing-board__media-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.oppadu-briefing-board__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    -webkit-user-drag: none;
    user-select: none;
}

/* --- 좌/우 이동 -------------------------------------------------------------
   완전 원형은 아바타·dot 전용이므로 버튼과 같은 6px radius 사각형으로 둔다. */
.oppadu-briefing-board__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: var(--obb-radius-ui);
    background: var(--obb-chip);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 150ms ease;
}

.oppadu-briefing-board__nav:hover {
    background: rgba(17, 20, 18, 0.75);
}

.oppadu-briefing-board__nav--prev { left: 10px; }
.oppadu-briefing-board__nav--next { right: 10px; }

.oppadu-briefing-board__nav svg {
    display: block;
}

.oppadu-briefing-board__counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: var(--obb-radius-ui);
    background: var(--obb-chip);
    color: #FFFFFF;
    font-family: var(--obb-font-en);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.oppadu-briefing-board__chip {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 10px;
    border-radius: var(--obb-radius-ui);
    background: var(--obb-chip);
    color: #FFFFFF;
    font-family: var(--obb-font-en);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.oppadu-briefing-board__featured-copy {
    min-width: 0;
}

.oppadu-briefing-board__featured-title {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--obb-ink-900);
}

.oppadu-briefing-board__featured-desc {
    margin: 5px 0 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--obb-ink-700);
}

.oppadu-briefing-board__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border-radius: var(--obb-radius-ui);
    background: var(--obb-primary);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition: background 180ms ease;
}

.oppadu-briefing-board__cta:hover,
.oppadu-briefing-board__cta:focus {
    background: var(--obb-primary-hover);
    color: #FFFFFF;
}

/* --- 우: 나머지 배너 목록 --------------------------------------------------- */
.oppadu-briefing-board__list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* 배너가 늘어나도 이 영역만 스크롤된다 — 모달 높이는 대표 배너 쪽이 정한다.
   max-height 는 대표 이미지 높이(376px)와 맞춰 둔다: 목록 열이 대표 열보다
   길어질 수 없으므로 배너가 몇 개든 모달 크기가 흔들리지 않는다. */
.oppadu-briefing-board__rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 436px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #D5D5D0 transparent;
}

.oppadu-briefing-board__rows::-webkit-scrollbar {
    width: 6px;
}

.oppadu-briefing-board__rows::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #D5D5D0;
}

/* 행은 <button> 이다 — 링크가 아니라 "대표 자리로 올리기".
   폼 컨트롤 기본값(테두리·배경·폰트·가운데 정렬)을 걷어내야 행처럼 보인다. */
.oppadu-briefing-board__row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: var(--obb-radius-card);
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.oppadu-briefing-board__row:hover {
    background: var(--obb-hover);
}

/* 지금 대표 자리에 크게 떠 있는 배너는 목록에서 뺀다 — 목록은 항상
   "지금 크게 안 보이는 것들". 나머지 행의 원래 순서는 그대로 유지된다. */
.oppadu-briefing-board__row.is-current {
    display: none;
}

.oppadu-briefing-board__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: var(--obb-radius-ui);
    object-fit: cover;
    object-position: top;
    background: var(--obb-fill);
}

.oppadu-briefing-board__row-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.oppadu-briefing-board__row-title {
    display: block;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--obb-ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oppadu-briefing-board__row-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--obb-ink-700);
    overflow: hidden;
}

.oppadu-briefing-board__row-chevron {
    flex: 0 0 auto;
    color: var(--obb-ink-500);
}

.oppadu-briefing-board__more {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--obb-line);
}

.oppadu-briefing-board__more a {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--obb-primary);
    text-decoration: none;
}

.oppadu-briefing-board__more a:hover {
    color: var(--obb-primary-hover);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   푸터
   -------------------------------------------------------------------------- */
.oppadu-briefing-board__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--obb-line);
}

/* 「N일간 보지 않기」는 체크박스가 아니라 곧바로 닫는 버튼이다.
   푸터의 두 버튼은 형태를 맞추고 글자색으로만 위계를 준다(보조 ↔ 기본). */
.oppadu-briefing-board__hide,
.oppadu-briefing-board__dismiss {
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--obb-radius-ui);
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.oppadu-briefing-board__hide {
    color: var(--obb-ink-700);
}

.oppadu-briefing-board__hide:hover {
    background: var(--obb-fill);
    color: var(--obb-ink-900);
}

.oppadu-briefing-board__dismiss {
    color: var(--obb-ink-900);
}

.oppadu-briefing-board__dismiss:hover {
    background: var(--obb-fill);
}

/* --------------------------------------------------------------------------
   화면이 낮은 노트북(768p 급) — 모달이 85vh 를 넘어 안에서 스크롤되지 않게
   대표 이미지 높이만 줄인다. 폰트는 건드리지 않는다.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 860px) {
    .oppadu-briefing-board__media {
        height: 340px;
    }

    .oppadu-briefing-board__rows {
        max-height: 340px;
    }
}

/* --------------------------------------------------------------------------
   모바일
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .oppadu-briefing-board__modal {
        width: calc(100vw - 32px);
    }

    .oppadu-briefing-board__body {
        grid-template-columns: 1fr;
    }

    /* 원본비(431:438) 유지 — 세로 고정 높이를 풀어 준다 */
    .oppadu-briefing-board__media {
        height: auto;
        aspect-ratio: 431 / 438;
    }

    /* 모달 전체가 스크롤되므로 목록 자체 스크롤은 끈다 */
    .oppadu-briefing-board__rows {
        overflow-y: visible;
        min-height: auto;
        max-height: none;
    }

    /* 터치 타깃 44px 확보 */
    .oppadu-briefing-board__hide,
    .oppadu-briefing-board__dismiss {
        min-height: 44px;
        padding: 8px 12px;
    }

    .oppadu-briefing-board__nav {
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oppadu-briefing-board,
    .oppadu-briefing-board__modal,
    .oppadu-briefing-board__cta,
    .oppadu-briefing-board__row,
    .oppadu-briefing-board__close,
    .oppadu-briefing-board__hide,
    .oppadu-briefing-board__dismiss,
    .oppadu-briefing-board__nav {
        transition-duration: 0ms;
    }
}