/**
 * widgets/ad/adv-view — 광고 글 보기 (첨부 · 본문 · 연락처)
 *
 * 🔴 모든 사이트에서 필고 v7 광고 페이지(v7/post/adv.css)와 똑같이 보인다(2026-10-31 요청).
 *    광고주가 산 지면이라 사이트 변수(--site-*)를 쓰지 않는다. 연락처 카드는 메신저 고유색이다.
 *    그림자·그라데이션·호버 효과도 필고 원본 그대로다 — 일반 UI 규칙(호버 #f1f5f9 등)의 예외다.
 *
 * 🔴 선택자를 `.w-adv-view .…` 로 한 겹 더 감쌌다. 위젯 CSS 는 사이트 CSS 보다 먼저 실리므로,
 *    이렇게 해야 base.css 의 `a:hover { text-decoration: underline }` 같은 전역 규칙에 지지 않는다.
 */
.w-adv-view {
    --w-adv-view-text:   #212529;
    --w-adv-view-max:    792px;   /* 필고 본문 칸 폭 — 사진을 더 넓게 늘리면 흐려진다 */

    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: var(--w-adv-view-max);
    margin-inline: auto;
    color: var(--w-adv-view-text);

    /* 사이트 테마의 글꼴·자간·줄 높이가 스며들지 않게 필고 값으로 고정한다 */
    font-family: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: normal;
}

/* ── 첨부 ───────────────────────────────────────── */
.w-adv-view .w-adv-view__files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.w-adv-view .w-adv-view__image,
.w-adv-view .w-adv-view__video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ── 본문 ───────────────────────────────────────── */
.w-adv-view .w-adv-view__content {
    padding: 0.75rem 0;
    font-size: 0.95rem;
    line-height: 1.7;
    word-break: break-word;
}

/* 광고 사진은 칸을 꽉 채우고 사진끼리 붙는다 */
.w-adv-view .w-adv-view__content img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* 마크다운·에디터가 사진을 <p> 로 감싸며 생기는 여백을 없앤다 */
.w-adv-view .w-adv-view__content p:has(img) {
    margin: 0;
    line-height: 0;
}

/* 빈 단락 — 사진 사이 큰 공백의 주원인 */
.w-adv-view .w-adv-view__content p:empty {
    display: none;
}

.w-adv-view .w-adv-view__content video,
.w-adv-view .w-adv-view__content iframe {
    max-width: 100%;
}

/* 표가 넘칠 때 페이지가 아니라 표만 가로 스크롤한다 */
.w-adv-view .w-adv-view__content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* 숨긴 글 안내 */
.w-adv-view .w-adv-view__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 2.5rem 1rem;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.95rem;
}

/* ── 연락처 ─────────────────────────────────────── */
.w-adv-view .w-adv-view__contacts {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.w-adv-view .w-adv-view__card {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: var(--w-adv-view-card-bg);
    color: var(--w-adv-view-card-fg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 지나가는 빛 */
.w-adv-view .w-adv-view__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.w-adv-view .w-adv-view__card:hover {
    background: var(--w-adv-view-card-bg-hover);
    color: var(--w-adv-view-card-fg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transform: translateY(-5px) scale(1.02);
}

.w-adv-view .w-adv-view__card:hover::before {
    transform: translateX(100%);
}

.w-adv-view .w-adv-view__card:active {
    transform: translateY(-2px) scale(0.98);
    transition: transform 0.1s ease;
}

.w-adv-view .w-adv-view__card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* 아이콘 */
.w-adv-view .w-adv-view__icon {
    display: flex;
    flex: 0 0 85px;
    align-items: center;
    justify-content: center;
    margin-right: 1.25rem;
}

.w-adv-view .w-adv-view__icon i {
    font-size: 3.25rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.w-adv-view .w-adv-view__card:hover .w-adv-view__icon i {
    transform: rotate(var(--w-adv-view-card-tilt)) scale(1.1);
}

/* 글자 */
.w-adv-view .w-adv-view__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.w-adv-view .w-adv-view__title {
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.5;
    opacity: 0.85;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.w-adv-view .w-adv-view__id {
    margin-bottom: 0.375rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    transition: all 0.3s ease;
}

.w-adv-view .w-adv-view__desc {
    font-size: 0.9375rem;
    line-height: 1.4;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.w-adv-view .w-adv-view__card:hover .w-adv-view__title,
.w-adv-view .w-adv-view__card:hover .w-adv-view__desc {
    opacity: 1;
}

.w-adv-view .w-adv-view__card:hover .w-adv-view__id {
    transform: translateX(3px);
}

/* 메신저 고유색 */
.w-adv-view .is-kakao {
    --w-adv-view-card-fg: #3c1e1e;
    --w-adv-view-card-bg: linear-gradient(135deg, #f7c815 0%, #f9d71c 100%);
    --w-adv-view-card-bg-hover: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    --w-adv-view-card-tilt: 15deg;
}

.w-adv-view .is-telegram {
    --w-adv-view-card-fg: #fff;
    --w-adv-view-card-bg: linear-gradient(135deg, #0077b5 0%, #0088cc 100%);
    --w-adv-view-card-bg-hover: linear-gradient(135deg, #0066a0 0%, #0077b5 100%);
    --w-adv-view-card-tilt: -15deg;
}

.w-adv-view .is-phone {
    --w-adv-view-card-fg: #343a40;
    --w-adv-view-card-bg: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    --w-adv-view-card-bg-hover: linear-gradient(135deg, #dee2e6 0%, #ced4da 100%);
    --w-adv-view-card-tilt: 10deg;
    border: 1px solid #ced4da;
}

.w-adv-view .is-phone:hover {
    border-color: #0071ec;   /* 필고의 대표색 — 사이트 대표색을 따라가지 않게 값으로 둔다 */
}

.w-adv-view .is-wechat {
    --w-adv-view-card-fg: #fff;
    --w-adv-view-card-bg: linear-gradient(135deg, #07c160 0%, #09b05c 100%);
    --w-adv-view-card-bg-hover: linear-gradient(135deg, #06a852 0%, #089e50 100%);
    --w-adv-view-card-tilt: 15deg;
}

.w-adv-view .is-line {
    --w-adv-view-card-fg: #fff;
    --w-adv-view-card-bg: linear-gradient(135deg, #00b900 0%, #00c300 100%);
    --w-adv-view-card-bg-hover: linear-gradient(135deg, #00a000 0%, #00b000 100%);
    --w-adv-view-card-tilt: -15deg;
}

.w-adv-view .is-messenger {
    --w-adv-view-card-fg: #fff;
    --w-adv-view-card-bg: linear-gradient(135deg, #0084ff 0%, #0099ff 100%);
    --w-adv-view-card-bg-hover: linear-gradient(135deg, #0073e6 0%, #0088e6 100%);
    --w-adv-view-card-tilt: 10deg;
}

/* 위챗 QR — 카드 오른쪽을 위아래로 꽉 채운다.
   🔴 칸을 정사각형으로 고정한다. 폭을 사진 원본 크기에 맡기면 사진을 불러오기 전에는 폭이 0 이고, 큰 사진은 글자를 덮는다. */
.w-adv-view .w-adv-view__card.has-qr {
    padding-right: 145px;
}

.w-adv-view .w-adv-view__qr {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0 16px 16px 0;
}

.w-adv-view .w-adv-view__qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* 좁은 화면 */
@media (max-width: 576px) {
    .w-adv-view .w-adv-view__card {
        padding: 1rem 1.25rem;
    }

    .w-adv-view .w-adv-view__icon {
        flex-basis: 75px;
        margin-right: 1rem;
    }

    .w-adv-view .w-adv-view__icon i {
        font-size: 2.75rem;
    }

    .w-adv-view .w-adv-view__id {
        font-size: 1.5rem;
    }

    .w-adv-view .w-adv-view__title,
    .w-adv-view .w-adv-view__desc {
        font-size: 0.875rem;
    }

    .w-adv-view .w-adv-view__card.has-qr {
        padding-right: 90px;
    }

    .w-adv-view .w-adv-view__qr {
        width: 80px;
        aspect-ratio: auto;
    }
}