/* ==========================================================================
   모바일 디자인 보강 레이어 (2026-09-21)

   목적: 폰 크기에서 사이트가 데스크톱·태블릿과 "같은 브랜드"로 느껴지게 한다.
         (데스크톱은 세부 비치 사진 + 컬러풀한 카드인데, 폰은 흰/회색 + 파랑 하나여서 이질감이 있었음)

   구조: mobile.css(기본 모바일 레이아웃) 위에 덮어쓰는 별도 파일이다.
         → header.php 에서 이 파일 링크 한 줄만 빼면 이전 모습으로 즉시 돌아간다.
   범위: 전부 max-width:1100px 안에만 적용 — 데스크톱은 영향 없음.

   브랜드 색 (데스크톱 배지·로고와 동일 계열)
     바다 #0aa6c7 → #2563eb / 노을 #f97316 / 핑크 #db2777 / 보라 #7c3aed
   ========================================================================== */

@keyframes pdcRise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pdcPop   { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes pdcSheet { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes pdcFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdcWave  { from { background-position-x: 0; } to { background-position-x: -320px; } }

@media (max-width: 1100px) {

    /* ---------- 바탕: 위쪽이 하늘색으로 은은하게 시작 ---------- */
    body.page {
        background: linear-gradient(180deg, #dff3fa 0, #f5f8fb 360px) no-repeat, #f5f8fb !important;
    }

    /* ---------- 헤더: 반투명 유리 + 브랜드 색 실선 + 스크롤 시 그림자 ---------- */
    .pdc-mobile-header {
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: saturate(1.5) blur(12px);
        backdrop-filter: saturate(1.5) blur(12px);
        border-bottom-color: transparent;
        transition: box-shadow .2s ease;
    }
    .pdc-mobile-header::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, #0aa6c7, #2563eb 38%, #7c3aed 68%, #f97316);
    }
    .pdc-mobile-header.is-scrolled { box-shadow: 0 8px 24px rgba(23, 46, 67, .12); }

    /* ---------- 상단 배너: 데스크톱과 같은 비치 사진 + 파도 ---------- */
    .pdc-discovery-intro {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        margin: 0 0 18px;
        padding: 26px 22px 46px;
        border-radius: 26px;
        background:
            linear-gradient(180deg, rgba(5, 38, 68, .58) 0%, rgba(6, 58, 96, .36) 52%, rgba(10, 166, 199, .28) 100%),
            url("../images/hero-mobile.jpg") center 58% / cover;
        box-shadow: 0 16px 36px -10px rgba(11, 79, 138, .45);
    }
    .pdc-discovery-intro > * { position: relative; z-index: 1; }
    .pdc-discovery-intro::before {                /* 노을빛 해 */
        content: "";
        position: absolute;
        z-index: 0;
        right: -34px; top: -34px;
        width: 170px; height: 170px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 205, 110, .75), rgba(255, 205, 110, 0) 68%);
    }
    .pdc-discovery-intro::after {                 /* 아래에서 천천히 흐르는 파도 */
        content: "";
        position: absolute;
        z-index: 1;
        left: 0; right: 0; bottom: -1px;
        height: 28px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14C53 3 107 3 160 14S267 25 320 14V28H0Z' fill='%23f2f8fb'/%3E%3C/svg%3E") repeat-x;
        background-size: 320px 28px;
        animation: pdcWave 16s linear infinite;
    }
    .pdc-discovery-intro__eyebrow { color: #ffd07a !important; text-shadow: 0 1px 8px rgba(0, 30, 60, .35); }
    .pdc-discovery-intro h1 { color: #fff; text-shadow: 0 2px 16px rgba(0, 30, 60, .38); }
    .pdc-discovery-intro p  { color: rgba(255, 255, 255, .93); text-shadow: 0 1px 10px rgba(0, 30, 60, .3); }

    /* ---------- 검색창: 바다색 포커스 + 그라데이션 버튼 ---------- */
    .hero .search, .hero--compact .search {
        border-color: #b9e2ee;
        box-shadow: 0 10px 26px -10px rgba(11, 79, 138, .32);
        transition: box-shadow .2s ease, border-color .2s ease;
    }
    .hero .search:focus-within { border-color: #0aa6c7; box-shadow: 0 0 0 4px rgba(10, 166, 199, .18); }
    .search__btn,
    .auth-form__submit,
    .comment-form__submit,
    .board__write-btn {
        background: linear-gradient(135deg, #0aa6c7, #2563eb) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px -8px rgba(37, 99, 235, .6) !important;
    }
    .search__btn:active, .auth-form__submit:active, .board__write-btn:active { transform: scale(.97); }

    /* ---------- 카테고리 칩: 아이콘 + 카테고리별 색 ---------- */
    .pdc-category-tabs { gap: 8px; margin-bottom: 22px; }
    .pdc-category-tabs a {
        flex-direction: column;
        gap: 6px;
        min-height: 70px;
        padding: 11px 4px 9px;
        border: 1px solid transparent;
        border-radius: 18px;
        background: var(--chip-soft, #fff);
        color: #3a4f5f;
        font-size: 11.5px;
        letter-spacing: -.02em;
        transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
    }
    .pdc-category-tabs a svg { width: 23px; height: 23px; color: var(--chip, #0868ce); transition: transform .2s ease; }
    .pdc-category-tabs a:active { transform: scale(.95); }
    .pdc-category-tabs a[aria-current] {
        border-color: transparent;
        background: var(--chip, #0868ce);
        color: #fff;
        box-shadow: 0 12px 20px -10px var(--chip, #0868ce);
    }
    .pdc-category-tabs a[aria-current] svg { color: #fff; transform: translateY(-1px) scale(1.1); }

    /* ---------- 업체 카드 ---------- */
    .pdc-directory__count { color: #244a63; }
    .pdc-place {
        border: 0;
        border-radius: 22px;
        box-shadow: 0 10px 28px -12px rgba(23, 46, 67, .28);
        animation: pdcRise .55s cubic-bezier(.2, .8, .2, 1) both;
        animation-delay: calc(var(--i, 0) * 55ms);
        transition: transform .18s ease, box-shadow .18s ease;
    }
    .pdc-place:active { transform: scale(.985); }

    /* 사진이 없을 때: 업체 대표색 그라데이션 + 카테고리 아이콘 */
    .pdc-place__art {
        position: relative;
        overflow: hidden;
        color: #fff;
        border-radius: 18px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 18px -10px var(--tile, #0868ce);
    }
    .pdc-place__art::before {                     /* 언덕 같은 부드러운 하이라이트 */
        content: "";
        position: absolute;
        left: -25%; right: -25%; bottom: -34%;
        height: 72%;
        border-radius: 50%;
        background: rgba(255, 255, 255, .2);
    }
    .pdc-place__art svg { position: relative; width: 32px; height: 32px; stroke-width: 1.6; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .22)); }

    .pdc-place__top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
    .pdc-place__top .pdc-place__category { margin: 0; }
    .pdc-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1.55; color: #fff; }
    .pdc-star { color: #f5b301; }
    .pdc-place__actions { border-top-color: #eef3f7; }
    .pdc-place__actions .is-active { animation: pdcPop .4s ease; }

    /* 사진이 있을 때: 큰 커버 사진 카드 (사진 업로드 기능과 연결됨) */
    .pdc-place--photo .pdc-place__open { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 14px; }
    .pdc-place--photo .pdc-place__art { grid-column: 1 / -1; width: 100%; height: 172px; border-radius: 0; box-shadow: none; background: #cfe3ee; }
    .pdc-place--photo .pdc-place__art img { border-radius: 0; }
    .pdc-place--photo .pdc-place__art::before { display: none; }
    .pdc-place--photo .pdc-place__art::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 55%;
        background: linear-gradient(180deg, transparent, rgba(8, 30, 52, .55));
    }
    .pdc-place--photo .pdc-place__art .pdc-badge { position: absolute; z-index: 2; top: 12px; left: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
    .pdc-place--photo .pdc-place__info { padding: 14px 18px 0; }
    .pdc-place--photo .pdc-place__desc { padding: 8px 18px 0; }

    /* ---------- 하단 탭 / 메뉴 ---------- */
    .pdc-bottom-nav { border-top-color: transparent; box-shadow: 0 -10px 30px rgba(23, 46, 67, .09); }
    .pdc-bottom-nav a, .pdc-bottom-nav button { transition: background .2s ease, color .2s ease; }
    .pdc-bottom-nav [aria-current], .pdc-bottom-nav .is-active { background: linear-gradient(160deg, #e2f6fb, #e8f0ff); color: #0868ce; }
    .pdc-bottom-nav [aria-current] svg, .pdc-bottom-nav .is-active svg { transform: translateY(-1px) scale(1.1); }
    .pdc-bottom-nav svg { transition: transform .2s ease; }

    /* 메뉴가 하단 탭 뒤 화면 끝까지 덮게 한다 (예전엔 탭 위에서 끝나서 뒤 페이지가 띠처럼 비쳤다) */
    .pdc-mobile-menu:not([hidden]) {
        animation: pdcFade .2s ease;
        background: linear-gradient(180deg, #ffffff 0, #f3fafd 100%);
        inset: 64px 0 0;
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
    .pdc-mobile-menu a[style*="--dot"] { justify-content: flex-start; }
    .pdc-mobile-menu a[style*="--dot"]::before {
        content: "";
        flex: none;
        width: 11px; height: 11px;
        margin-right: 14px;
        border-radius: 50%;
        background: var(--dot);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent);
    }
    .pdc-mobile-menu a[style*="--dot"] span { margin-left: auto; }

    /* ---------- 상세 시트 ---------- */
    .detail-modal-overlay.is-open .detail-modal { animation: pdcSheet .32s cubic-bezier(.2, .85, .25, 1) both; }
    .detail-modal__handle { width: 44px; height: 5px; border-radius: 3px; background: #cbd8e2; }
    .modal-section__title { display: flex; align-items: center; gap: 9px; }
    .modal-section__title::before { content: ""; width: 4px; height: 17px; border-radius: 3px; background: linear-gradient(180deg, #0aa6c7, #2563eb); }

    /* ---------- 로그인·회원가입·후기·검색·찜목록: 같은 브랜드 배너 + 통일된 카드 ---------- */
    .auth-hero::before, .hero--board::before {
        content: "FALL IN CEBU";
        display: flex;
        align-items: flex-end;
        height: 92px;
        margin: 0 0 14px;
        padding: 0 20px 14px;
        border-radius: 22px;
        background:
            linear-gradient(180deg, rgba(5, 38, 68, .12), rgba(5, 38, 68, .66)),
            url("../images/hero-mobile.jpg") center 60% / cover;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .22em;
        box-shadow: 0 14px 30px -12px rgba(11, 79, 138, .5);
    }
    .board, .board--narrow, .board--wide, .auth-card {
        border: 0;
        border-radius: 22px;
        box-shadow: 0 14px 34px -14px rgba(23, 46, 67, .3);
    }
    .board__page-title, .auth-card__title { display: flex; align-items: center; gap: 10px; }
    .board__page-title::before, .auth-card__title::before {
        content: ""; flex: none; width: 5px; height: 24px; border-radius: 3px;
        background: linear-gradient(180deg, #0aa6c7, #2563eb);
    }
    .board__tab--active { background: linear-gradient(135deg, #0aa6c7, #2563eb); color: #fff; }
    .auth-form__input:focus, .auth-form__select:focus, .comment-form__textarea:focus {
        outline: 0; border-color: #0aa6c7; box-shadow: 0 0 0 4px rgba(10, 166, 199, .17);
    }
    .signup-type__option input:checked + .signup-type__box { border-color: #0aa6c7; background: #e8f8fc; }
    .listing-card { border: 0; border-radius: 20px; box-shadow: 0 10px 26px -14px rgba(23, 46, 67, .3); }
    .listing-card__img { position: relative; overflow: hidden; }
    .listing-card__img::before {
        content: ""; position: absolute; left: -25%; right: -25%; bottom: -36%; height: 70%;
        border-radius: 50%; background: rgba(255, 255, 255, .18);
    }
    .listing-card__img-label { position: relative; text-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
    .board__item-link:active, .listing-card:active { transform: scale(.99); }
}

/* 움직임을 줄여달라는 기기 설정(멀미·접근성)을 존중한다 */
@media (prefers-reduced-motion: reduce) {
    .pdc-place, .pdc-discovery-intro::after, .pdc-place__actions .is-active,
    .detail-modal-overlay.is-open .detail-modal, .pdc-mobile-menu:not([hidden]) { animation: none !important; }
}