/* ════════════════════════════════════════════════════════
   eview_v3.css — 에브리뷰 v3.0 신규 개편 전용 스타일

   섹션:
   1. fp3- : 파티찾기 리스트 (findParty)
   2. fpd- : 파티찾기 상세/결제완료 (findParty detail)
   3. mp-  : 파티만들기 (makeParty)    ← 추후 추가
   4. myp- : 내파티 (myParty)          ← 추후 추가
   ════════════════════════════════════════════════════════ */

/* =============================================
   fp3- : 파티찾기 리스트 v7
   (다른 스타일과 충돌 방지: fp3- 프리픽스)
   ============================================= */

/* 컨텐츠 최대 너비 800px */
.fp3-container { padding: 28px 36px; }
.fp3-inner { max-width: 770px; margin: 0 auto; }
.fp3-inner-full { margin: 0 auto; }

/* ── 상단 1줄: 검색 + 자동매칭 ── */
.fp3-toprow1 {
    display: flex; align-items: center; gap: 10px; margin-bottom: 20px; justify-content: space-between;
}
/* 검색창 + 검색버튼 그룹 */
.fp3-search-group {
    display: flex; align-items: center; gap: 0; flex: 0 0 auto;
}
.fp3-search-wrap { position: relative; flex: 0 0 280px; max-width: 280px; }
.fp3-search-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: #aaa; pointer-events: none;
}
.fp3-search-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #dde0eb; border-radius: 10px 0 0 10px;
    border-right: none;
    padding: 9px 14px 9px 36px;
    font-size: 14px; color: #111; background: #fff;
    outline: none; font-family: inherit; transition: border-color 0.15s;
}
.fp3-search-input:focus { border-color: #4169E1; }
.fp3-search-input:focus + .fp3-search-dropdown,
.fp3-search-wrap.fp3-search-open .fp3-search-dropdown,
.fp3-search-input::placeholder { color: #bbb; }

/* 인기 검색어 드롭다운
   ★ 관리 포인트: fp3-popular-list 안의 li 항목을 수정하세요 ★ */
.fp3-search-dropdown {
    display: none; position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1.5px solid #dde0eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(65,105,225,0.10); z-index: 200;
    padding: 12px 0 8px;
}
.fp3-search-wrap.fp3-search-open .fp3-search-dropdown { display: block; }
.fp3-search-dropdown-title {
    font-size: 11px; font-weight: 700; color: #aaa;
    padding: 0 14px 8px; letter-spacing: 0.04em;
}
.fp3-popular-list { list-style: none; margin: 0; padding: 0; }
.fp3-popular-list li a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; font-size: 13px; color: #333;
    text-decoration: none; transition: background 0.1s;
}
.fp3-popular-list li a:hover { background: #f4f6fb; }
.fp3-popular-rank {
    font-size: 11px; font-weight: 700; color: #4169E1;
    width: 14px; flex-shrink: 0; text-align: center;
}

/* 자동매칭 버튼 */
.fp3-quick-btn {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 11px 20px 11px 18px; background: #4169E1; color: #fff; border: none;
    border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit; white-space: nowrap; flex-shrink: 0;
    transition: background 0.12s;
}
.fp3-quick-btn:hover { background: #3058d0; }

/* 검색 버튼 */
.fp3-search-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; background: #737373; color: #fff;
    border: 1px solid #737373; border-radius: 0 10px 10px 0;
    font-size: 14px; font-weight: 500; cursor: pointer;
    font-family: inherit; white-space: nowrap; flex-shrink: 0;
    transition: all 0.12s;
}
.fp3-search-btn:hover { background: #3058d0; border-color: #3058d0; }

/* ── 상단 2줄: 카테고리 칩 ── */
.fp3-toprow2 {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; margin-bottom: 20px;
}
.fp3-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 10px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
    border: 1px solid #dde0eb; background: #fff; color: #666;
    cursor: pointer; transition: all 0.12s; font-family: inherit;
}
.fp3-chip:hover { border-color: #4169E1; color: #4169E1; }
.fp3-chip-on { border-color: #4169E1; background: #eef2ff; color: #4169E1; font-weight: 700; }

/* ── 1단 리스트 ── */
.fp3-list { display: flex; flex-direction: column; gap: 8px; }

/* ── 카드: padding:0, align-items:stretch ── */
.fp3-card {
    background: #fff; border: 1.5px solid #e4e8f4; border-radius: 14px;
    padding: 0; display: flex; align-items: stretch;
    cursor: pointer; text-decoration: none; color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden;
    min-height: 70px;
}
.fp3-card:hover { border-color: #b8c8f8; box-shadow: 0 4px 16px rgba(65,105,225,0.09); }

/* 카드 바디: 패딩을 여기서 */
.fp3-card-body {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    padding: 18px 0 18px 25px;
}

/* ── 좌측: ID + 아이콘 고정 120px ── */
.fp3-card-left {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0; width: 120px; margin-right: 14px;
}
.fp3-party-id {
    font-size: 10px; font-weight: 400; color: #fff;
    border-radius: 20px; background: #333;
    padding: 4px 7px; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.01em;
}
.fp3-party-id-cert { background: #01c8b3; }
.fp3-icons { display: flex; align-items: center; flex: 1; }
.fp3-svc-icon {
    width: 34px; height: 34px; border-radius: 50px; background: #f0f3ff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.fp3-svc-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.fp3-icons-2 .fp3-svc-icon { width: 32px; height: 32px; }
.fp3-icons-2 .fp3-icon-overlap { margin-left: -8px; }
.fp3-icons-3 .fp3-svc-icon { width: 28px; height: 28px; border-radius: 50px; }
.fp3-icons-3 .fp3-icon-overlap { margin-left: -7px; }
.fp3-icon-overlap { margin-left: -10px; }
.fp3-icon-more {
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
    background: #eef2ff; color: #4169E1; border-radius: 6px; flex-shrink: 0;
}

/* ── 중앙 ── */
.fp3-card-center { flex: 1; min-width: 0; margin-right: 16px; }
.fp3-card-title {
    font-size: 17px; font-weight: 700; color: #111;
    line-height: 1.35; margin-bottom: 5px; letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp3-card-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fp3-meta-item {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; color: #666; white-space: nowrap;
}
.fp3-meta-item-green { color: #01c8b3; }

.fp3-meta-cert-icon { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
.fp3-meta-user-icon { width: 12px; height: 12px; object-fit: contain; flex-shrink: 0; opacity: 0.5; }
.fp3-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.fp3-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 20px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.fp3-badge-cert   { background: #eef2ff; color: #3456c0; }
.fp3-badge-free   { background: #edfff5; color: #1a6644; }
.fp3-badge-bundle { background: #f3f0ff; color: #534ab7; }
.fp3-badge-close  { background: #fff0f0; color: #a32d2d; }
.fp3-badge-hot    { background: #fff8e6; color: #854f0b; }

/* ── 금액 ── */
.fp3-card-price { flex-shrink: 0; text-align: right; padding-right: 25px; }
.fp3-price-main { font-size: 17px; font-weight: 800; color: #111; white-space: nowrap; }
.fp3-price-hint { font-size: 12px; color: #999; font-weight: 400; margin-top: 2px; white-space: nowrap; }
.fp3-price-origin { font-size: 12px; color: #999; font-weight: 400; text-decoration: line-through; margin-top: 2px; white-space: nowrap; }

/* ── 슬롯: 카드 전체 높이 채움 ── */
.fp3-card-slots {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; width: 84px;
    background: #f0f4ff; border-left: 1px solid #dce5fb;
    padding: 0 10px;
}
.fp3-slot-dots {
    display: grid; grid-template-columns: repeat(5, 10px); gap: 2px;
    justify-content: center; width: 100%;
}
.fp3-sdot { width: 8px; height: 8px; border-radius: 50%; background: #d0d9f0; }
.fp3-sdot-fill  { background: #4169E1; }
.fp3-sdot-close { background: #e24b4a; }
.fp3-slot-count { font-size: 13px; font-weight: 800; color: #4169E1; white-space: nowrap; line-height: 1; }
.fp3-slot-count-close { color: #a32d2d; }
.fp3-slot-label { font-size: 11px; color: #7890cb; white-space: nowrap; }

/* ── 모바일 ── */
@media (max-width: 768px) {
    .fp3-container { padding: 14px; }
    .fp3-toprow1 { gap: 8px; }
    .fp3-search-group { flex: 1; }
    .fp3-search-wrap { flex: 1; max-width: none; }
    .fp3-quick-btn { padding: 11px 14px; font-size: 13px; }

    /* 카테고리 칩: 가로 플릭 한 줄, 아이콘 숨김 */
    .fp3-toprow2 {
        flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px;
    }
    .fp3-toprow2::-webkit-scrollbar { display: none; }
    .fp3-chip { flex-shrink: 0; padding: 6px 12px; font-size: 12px; }
    .fp3-chip svg { display: none; }

    /* ── 모바일 카드 레이아웃 ──
       HTML 구조: <a.fp3-card> → <div.fp3-card-body> + <div.fp3-card-slots>
       모바일 목표:
         줄1: [파티ID+아이콘(좌)]  [슬롯 숫자(우)]
         줄2: 제목 (100%)
         줄3: 파티장·기간·뱃지 (100%)
         줄4: 금액 (100%)
       전략: card를 column, body를 row+wrap으로 wrap
             slots는 body 밖이므로 order:1로 body 안 right 영역처럼 표시
    */
    .fp3-card {
        flex-direction: column;
        min-height: auto;
        align-items: stretch;
    }

    /* card-body: row+wrap → left + center + price 순서로 쌓임 */
    .fp3-card-body {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 15px;
    }

    /* 줄1 좌: 파티ID + 아이콘 */
    .fp3-card-left {
        flex: 1; width: auto; margin-right: 0;
        order: 1;
    }

    /* 줄2: 제목+메타 (100%) */
    .fp3-card-center {
        flex: none; width: 100%; margin-right: 0;
        padding: 10px 0;
        order: 3;
    }
    .fp3-card-title { font-size: 16px; white-space: normal; margin-bottom: 4px; letter-spacing: -0.01em; }
    .fp3-card-meta { flex-wrap: wrap; }

    /* 줄3: 금액 (100%) */
    .fp3-card-price {
        flex: none; width: 100%;
        padding: 10px 0 4px 0;
        display: flex; align-items: baseline; gap: 8px;
        border-top: 1px solid #f0f2f8; text-align: left;
        order: 4; padding-right: 0;
    }
    .fp3-price-main { font-size: 15px; }
    .fp3-price-hint, .fp3-price-origin { margin-top: 0; }

    /* 줄1 우: 슬롯 — body 밖이지만 card가 column이므로
       body 다음에 오는 slots를 body 안 첫줄 우측에 보이도록
       → card를 relative, slots를 absolute로 card-left 줄 높이에 맞춤 */
    .fp3-card { position: relative; }
    .fp3-card-slots {
        position: absolute;
        top: 13px; right: 0;
        width: 40px;
        background: transparent;
        flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; padding: 0 12px 0 8px;
    }
    .fp3-slot-dots { display: none; }
    .fp3-slot-count { font-size: 13px; font-weight: 800; color: #4169E1; }
    .fp3-slot-count-close { color: #a32d2d; }
    .fp3-slot-label { display: block; font-size: 10px; color: #9aaee0; }
}

@media (max-width: 400px) {
    .fp3-card-title { font-size: 15px; letter-spacing: -0.01em; }
    .fp3-price-main { font-size: 15px; }
}
/* ── 검색 결과 없음 ── */
.fp3-empty {
    text-align: center; padding: 80px 20px 100px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.fp3-empty-icon {
    width: 56px; height: 56px; background: #eef2ff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #4169E1;
}
.fp3-empty-title { font-size: 17px; font-weight: 800; color: #111; }
.fp3-empty-desc { font-size: 13px; color: #888; line-height: 1.7; }
.fp3-empty-btns { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.fp3-empty-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 700;
    cursor: pointer; text-decoration: none; border: none; font-family: inherit;
    transition: all 0.12s;
}
/* 직접 개설: 파란 배경 흰 글씨 */
.fp3-empty-btn-primary {
    background: #4169E1; color: #fff !important;
    border: 1.5px solid #4169E1;
}
.fp3-empty-btn-primary:hover { background: #3058d0; border-color: #3058d0; color: #fff !important; }
/* 개설 요청: 흰 배경 파란 테두리 */
.fp3-empty-btn-secondary { background: #fff; color: #4169E1; border: 1.5px solid #4169E1; }
.fp3-empty-btn-secondary:hover { background: #eef2ff; }

/* ── 리스트 하단 알림 2행 (한 줄 가로 배치) ── */
.fp3-alert-cards {
    display: flex; flex-direction: row;
    gap: 8px;
    margin-top: 20px;
}
.fp3-alert-card {
    display: flex; align-items: center; flex: 1;
    gap: 5px; padding: 11px 16px;
    border-radius: 10px; border: 1.5px solid #e4e8f4;
    background: #fff;
}
.fp3-alert-card-seeker { border-color: #c5d0f8; background: #f7f9ff; }
.fp3-alert-card-maker  { border-color: #f5d08a; background: #fff9f0; }
.fp3-alert-card-icon { font-size: 16px; flex-shrink: 0; }
.fp3-alert-card-body { flex: 1; min-width: 0; }
.fp3-alert-card-title {
    font-size: 13px; font-weight: 600; color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp3-alert-card-desc { display: none; } /* 한 줄 구조에서 설명 숨김 */
.fp3-alert-card-btn {
    padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit; border: none;
    transition: all 0.12s; white-space: nowrap; flex-shrink: 0;
    background: #4169E1; color: #fff;
}
.fp3-alert-card-btn:hover { background: #3058d0; }
.fp3-alert-card-btn-maker { background: #f5a623; }
.fp3-alert-card-btn-maker:hover { background: #e09510; }

@media (max-width: 640px) {
    .fp3-alert-cards { flex-direction: column; }
    .fp3-alert-card-title { font-size: 12px; }
    .fp3-alert-card-btn { font-size: 11px; padding: 7px 12px; }
}
/* ── 파티개설요청 모달 ── */
.fp3-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.45); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.fp3-modal-box {
    background: #fff; border-radius: 16px; padding: 32px 28px;
    max-width: 330px; width: 90%; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; gap: 12px;
}
.fp3-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: #f0f0f0; border: none; border-radius: 50%;
    width: 28px; height: 28px; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.fp3-modal-title { font-size: 17px; font-weight: 800; color: #111; }
.fp3-modal-desc { font-size: 13px; color: #888; line-height: 1.7; }
.fp3-modal-input,
.fp3-modal-select {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid #dde0eb; border-radius: 10px;
    padding: 11px 14px; font-size: 14px; color: #111;
    font-family: inherit; outline: none; transition: border-color 0.15s;
    background: #fff;
}
.fp3-modal-input:focus,
.fp3-modal-select:focus { border-color: #4169E1; }
.fp3-modal-select { cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 36px;
}
.fp3-modal-submit {
    padding: 13px; background: #4169E1; color: #fff; border: none;
    border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: background 0.12s;
}
.fp3-modal-submit:hover { background: #3058d0; }



@media (max-width: 768px) {
    .fp3-search-btn { padding: 9px 14px; font-size: 13px; }
    .fp3-modal-box { padding: 28px 20px; }
}

/* ── 파티개설요청 모달: 모바일 좌우 여백 확보 ── */
@media (max-width: 640px) {
    /* 오버레이 패딩으로 박스가 화면 끝에 닿지 않도록 보장 */
    .fp3-modal-overlay { padding: 0 20px; box-sizing: border-box; }
    .fp3-modal-box { width: 100%; max-width: 340px; }
}


/* ─── fp3 페이징 (PC, 641px↑) ─── */
.fp3-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 20px 0 45px;
}
.fp3-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border: 1.5px solid #e0e5f5;
    border-radius: 8px;
    background: #fff;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1;
}
.fp3-pg-btn:hover:not(:disabled) {
    border-color: #4169E1;
    color: #4169E1;
}
.fp3-pg-btn.fp3-pg-active {
    border-color: #4169E1;
    background: #4169E1;
    color: #fff;
    font-weight: 700;
}
.fp3-pg-btn.fp3-pg-disabled,
.fp3-pg-btn:disabled {
    border-color: #eee;
    color: #ccc;
    cursor: default;
}
.fp3-pg-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    color: #bbb;
    font-size: 14px;
}
@media (max-width: 640px) {
    .fp3-pagination { display: none !important; }
}

/* ─── fp3 무한스크롤 트리거 (모바일, ≤640px) ─── */
.fp3-scroll-trigger {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp3-scroll-spinner {
    display: flex;
    gap: 6px;
    padding: 14px 0;
}
.fp3-spinner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4169E1;
    opacity: 0.25;
    animation: fp3dotPulse 1.1s ease-in-out infinite;
}
.fp3-spinner-dot:nth-child(2) { animation-delay: 0.18s; }
.fp3-spinner-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes fp3dotPulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
    40%           { opacity: 1;   transform: scale(1.1);  }
}
.fp3-scroll-end {
    font-size: 13px;
    color: #aaa;
    padding: 14px 0;
    text-align: center;
}
@media (min-width: 641px) {
    .fp3-scroll-trigger { display: none !important; }
}


/* =============================================
   fpd- : 자율파티 모집공고 상세 v2
   ============================================= */

/* fpd-container 제거 - fpd-page로 대체 */
.fpd-page { max-width: 800px; margin: 0 auto; padding: 0 0 20px; }
.fpd-wrap { display: flex; flex-direction: column; gap: 0; }

/* ════════════════════════════════
   영역 1: 서비스 정보 카드
   ════════════════════════════════ */
.fpd-svc-card {
    background: #fff; border-radius: 18px;
    padding: 40px 40px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    margin-bottom: 20px;
    display: flex; flex-direction: column; gap: 0;
}

/* 상단 행: 아이콘/텍스트(좌) + 참여버튼(우) */
.fpd-svc-top {
    display: flex; gap: 20px; align-items: stretch; /* stretch로 버튼이 좌측 높이 채움 */
    margin-bottom: 0;
}

/* 좌측: 아이콘·서비스명·제목·ID·결제안내 */
.fpd-svc-left { flex: 1; min-width: 0; padding-bottom: 16px; }

/* 서비스 아이콘 가로 나열 */
.fpd-icons-row {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.fpd-svc-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: #f0f3ff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.09); flex-shrink: 0;
}
.fpd-svc-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

/* 서비스명 + 옵션 뱃지 (아이콘 바로 아래) */
.fpd-svc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.fpd-svc-tag {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 20px;
    background: #eef2ff; font-size: 12px; font-weight: 600; color: #4169E1;
}

/* 파티 제목 */
.fpd-party-title {
    font-size: 24px; font-weight: 700; color: #000; letter-spacing: -0.01em;
    line-height: 1.35; margin-bottom: 5px;
}

/* ID + 개설일 */
.fpd-party-meta { font-size: 13px; color: #666; font-weight: 300; }

/* 결제 방식 안내 */
.fpd-pay-notice {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 11px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 400; line-height: 1.55;
    margin-top: 8px; margin-bottom: 0;
}
.fpd-pay-notice-period {
    background: #f0f4ff; color: #3456c0;
    border: 1px solid #4169E1;
}
.fpd-pay-notice-monthly {
    background: #f0fff6; color: #1a6644;
    border: 1px solid #2ecc71;
}
.fpd-pay-notice-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* 핵심 수치 4분할: 카드 하단 전체폭 */
.fpd-stats-row {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 1px; background: #e4e8f4; border-radius: 0 0 18px 18px;
    overflow: hidden; margin: 20px -40px 0;
}
.fpd-stat-item { background: #f7f9ff; padding: 25px 12px; text-align: center; }
.fpd-stat-label { font-size: 12px; color: #888; font-weight: 400; margin-bottom: 7px; }
.fpd-stat-val { font-size: 20px; font-weight: 700; color: #111; line-height: 1.2; }
.fpd-stat-sub { font-size: 12px; color: #4169E1; font-weight: 500; margin-top: 5px; }
.fpd-stat-sub-red { color: #e24b4a; }

/* 우측: 참여 버튼 - 좌측 콘텐츠 전체 높이 채움 */
.fpd-join-btn {
    flex-shrink: 0; width: 120px; height: 140px;
    align-self: stretch;          /* 좌측 높이에 맞춰 늘어남 */
    background: #FF7043; color: #fff; border: none; border-radius: 16px;
    font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; line-height: 1.3; text-align: center;
    transition: background 0.12s;
    box-shadow: 0 4px 16px rgba(255,112,67,0.30);
}
.fpd-join-btn:hover { background: #e8622d; }
.fpd-join-btn-icon { font-size: 24px; }

/* ════════════════════════════════
   영역 2: 모집공고 + 유의사항
   ════════════════════════════════ */
.fpd-section-label {
    font-size: 20px; font-weight: 700; color: #111;
    margin: 20px 0 10px; padding-left: 2px;
}
.fpd-detail-card {
    background: #fff; border-radius: 16px; padding: 26px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    margin-bottom: 24px;
}
.fpd-detail-sub-title {
    font-size: 14px; font-weight: 500; color: #333; margin-bottom: 10px;
}

/* ── 첨부 이미지 갤러리 ── */
.fpd-img-gallery {
    display: flex; gap: 12px; flex-wrap: nowrap;
    margin-bottom: 30px; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fpd-img-gallery::-webkit-scrollbar { display: none; }
.fpd-img-item {
    width: 200px; height: 200px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden; cursor: pointer;
    border: 1.5px solid #e4e8f4;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fpd-img-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.14); }
.fpd-img-item img {
    width: 100%; height: 100%;
    object-fit: cover;  /* 작은 면 기준으로 꽉 채움 */
    display: block;
}

/* ── 라이트박스 ── */
.fpd-lightbox {
    display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.88);
    align-items: center; justify-content: center; cursor: zoom-out;
}
.fpd-lightbox.fpd-lightbox-open { display: flex; }
.fpd-lightbox-img {
    max-width: min(1000px, 92vw);
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.50);
    cursor: default; object-fit: contain;
}
.fpd-lightbox-close {
    position: absolute; top: 18px; right: 22px;
    background: rgba(255,255,255,0.18); border: none; color: #fff;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s; z-index: 1;
}
.fpd-lightbox-close:hover { background: rgba(255,255,255,0.32); }

@media (max-width: 640px) {
    /* 모바일: 좌우 플릭, flex-wrap: nowrap 유지 */
    .fpd-img-gallery { gap: 10px; }
    .fpd-img-item { width: 150px; height: 150px; border-radius: 8px; flex-shrink: 0; }
    .fpd-img-item:hover { transform: none; box-shadow: none; }
}

.fpd-recruit-text {
    background: #f0f4ff; font-size: 16px; color: #000; font-weight: 400; border-radius: 10px;
    line-height: 1.85; margin-bottom: 24px; padding: 20px;
}
.fpd-notice-list { display: flex; flex-direction: column; gap: 8px; }
.fpd-notice-item {
    font-size: 15px; color: #000; font-weight: 400;
    padding: 12px 16px; background: #fff0f0; border-radius: 10px; line-height: 1.5;
}

/* ════════════════════════════════
   영역 3: 파티장 정보
   ════════════════════════════════ */
.fpd-host-card {
    background: #fff; border-radius: 16px; padding: 24px 26px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.fpd-host-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.fpd-host-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: #eef2ff; display: flex; align-items: center;
    justify-content: center; font-size: 26px; flex-shrink: 0;
    overflow: hidden;
}
.fpd-host-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.fpd-host-name { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 3px; }
.fpd-host-meta { font-size: 13px; color: #888; font-weight: 400; }
.fpd-host-stats {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 1px; background: #e4e8f4; border-radius: 12px; overflow: hidden;
}
.fpd-host-stat { background: #f7f9ff; text-align: center; padding: 18px 8px; }

.fpd-host-stat-val { font-size: 18px; font-weight: 700; color: #333; margin-top: 6px; }
.fpd-host-stat-val.fpd-stat-good { color: #416be6; }
.fpd-host-stat-val.fpd-stat-bad { color: #f44336; }

.fpd-host-stat-label { font-size: 12px; color: #888; font-weight: 400; }

/* 참여 확인 모달 */
.fpd-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 9999;
    align-items: center; justify-content: center;
}
.fpd-modal-overlay.fpd-modal-open { display: flex; }
.fpd-modal-box {
    background: #fff; border-radius: 18px;
    width: 300px; padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.20);
}
.fpd-modal-title { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 12px; }
.fpd-modal-desc {
    font-size: 14px; color: #111; font-weight: 400; line-height: 2;
    padding: 14px 16px; background: #fff8f0; border-radius: 10px;
    margin-bottom: 22px;
}
.fpd-modal-btns { display: flex; gap: 10px; }
.fpd-modal-cancel {
    flex: 1; padding: 14px; background: #f5f5f5; color: #666;
    border: none; border-radius: 12px; font-size: 15px; font-weight: 500;
    cursor: pointer; font-family: inherit; transition: background 0.12s;
}
.fpd-modal-cancel:hover { background: #e8e8e8; }
.fpd-modal-agree {
    flex: 1; padding: 14px; background: #FF7043; color: #fff;
    border: none; border-radius: 12px; font-size: 15px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: background 0.12s;
}
.fpd-modal-agree:hover { background: #e8622d; }

/* 모바일 */
/* ── PC 상단 네비 바 ── */
.fpd-nav-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 14px;
}
.fpd-nav-back {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    text-decoration: none; padding: 0; transition: opacity 0.12s;
}
.fpd-nav-back:hover { opacity: 0.65; }
.fpd-nav-back img { width: 88px; height: auto; display: block; }
.fpd-nav-arrows { display: flex; gap: 8px; }
.fpd-nav-arrow {
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.12s;
}
.fpd-nav-arrow:hover { opacity: 0.65; }
.fpd-nav-arrow img { width: 40px; height: 40px; display: block; }

@media (max-width: 640px) {

    .fpd-page { padding: 0 0 40px; }
    .fpd-svc-card { padding: 18px 18px 0; border-radius: 14px; }
    .fpd-svc-top { gap: 12px; }
    .fpd-svc-left { padding-bottom: 0; }
    .fpd-svc-top .fpd-join-btn { display: none; }
    .fpd-join-btn-mobile {
        display: flex !important;
        width: 100%; margin-bottom: 20px;
        padding: 15px; background: #FF7043; color: #fff;
        border: none; border-radius: 12px;
        font-size: 16px; font-weight: 700; justify-content: center;
        cursor: pointer; font-family: inherit; transition: background 0.12s;
    }
    .fpd-join-btn-mobile:hover { background: #e8622d; }
    .fpd-svc-icon { width: 44px; height: 44px; border-radius: 11px; }
    .fpd-party-title { font-size: 18px; }
    .fpd-pay-notice { margin-top: 20px; margin-bottom: 20px; }
    .fpd-stats-row { margin: 0 -18px; border-radius: 0 0 14px 14px; grid-template-columns: repeat(2,1fr); }
    .fpd-stat-val { font-size: 15px; }
    .fpd-detail-card, .fpd-host-card { padding: 18px; border-radius: 14px; }
    .fpd-host-stats { grid-template-columns: repeat(2,1fr); }
}

/* PC: 모바일 전용 버튼 숨김 */
.fpd-join-btn-mobile { display: none; }
pmd- : 내가 참석한 자율파티 상세
============================================= */

.pmd-page-wrap { max-width: 1000px; margin: 0 auto; }
.pmd-wrap { display: flex; flex-direction: column; gap: 14px; }

/* 상단 파티원 카드 */
.pmd-top-card {
    background: #fff; border-radius: 16px; padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
}
.pmd-svc-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pmd-svc-icon-main {
    width: 72px; height: 72px; border-radius: 18px;
    background: #f0f3ff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.pmd-svc-icon-main img { width: 100%; height: 100%; object-fit: cover; }
.pmd-svc-icon-sub-row { display: flex; gap: 4px; }
.pmd-svc-icon-sub {
    width: 26px; height: 26px; border-radius: 7px;
    background: #f0f3ff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.pmd-svc-icon-sub img { width: 100%; height: 100%; object-fit: cover; }
.pmd-svc-name-label { font-size: 12px; font-weight: 700; color: #111; text-align: center; }
.pmd-slots-area { flex: 1; }
.pmd-slots-hint { font-size: 12px; color: #aaa; font-weight: 400; margin-bottom: 12px; }
.pmd-slots-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pmd-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; }
.pmd-slot-card {
    width: 64px; height: 80px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; position: relative;
}
.pmd-slot-card-host { background: #FF7043; box-shadow: 0 3px 12px rgba(255,112,67,0.30); }
.pmd-slot-card-me { background: #fff; border: 2px solid #f5a623; }
.pmd-slot-card-member { background: #fff; border: 1.5px solid #e4e8f4; }
.pmd-slot-card-empty { background: #f5f5f5; border: 2px dashed #ddd; }
.pmd-slot-card-count { position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 700; color: #fff; opacity: 0.85; }
.pmd-slot-card-edit { position: absolute; top: 6px; right: 8px; color: #fff; opacity: 0.85; font-size: 13px; }
.pmd-slot-emoji { font-size: 28px; }
.pmd-slot-lock-icon { font-size: 26px; color: #ccc; }
.pmd-slot-name { font-size: 12px; font-weight: 500; color: #555; text-align: center; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmd-slot-name-host { color: #FF7043; font-weight: 700; }
.pmd-slot-name-me { color: #f5a623; font-weight: 700; }

/* 2열 레이아웃 */
.pmd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pmd-col { display: flex; flex-direction: column; gap: 12px; }

/* 섹션 박스 */
.pmd-box { background: #fff; border-radius: 16px; padding: 22px 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.pmd-box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pmd-box-title { font-size: 17px; font-weight: 700; color: #111; }
.pmd-box-link { font-size: 13px; color: #aaa; font-weight: 400; text-decoration: none; }
.pmd-box-link:hover { color: #4169E1; }

/* 정보 행 */
.pmd-rows { display: flex; flex-direction: column; gap: 8px; }
.pmd-row {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 16px; border-radius: 10px;
    background: #f7f8fc; font-size: 15px;
}
.pmd-row-key { color: #999; font-weight: 400; flex-shrink: 0; width: 80px; }
.pmd-row-val { color: #111; font-weight: 500; flex: 1; }
.pmd-row-val strong { font-weight: 700; }
.pmd-row-val-red { color: #e24b4a; font-weight: 700; }
.pmd-row-val-orange { color: #FF7043; font-weight: 700; }
.pmd-copy-btn {
    padding: 6px 14px; background: #f0f0f0; color: #555;
    border: none; border-radius: 8px; font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: inherit; flex-shrink: 0; transition: all 0.12s;
}
.pmd-copy-btn:hover { background: #4169E1; color: #fff; }
.pmd-chat-btn {
    display: block; width: 100%; padding: 15px;
    background: #FF7043; color: #fff; border: none; border-radius: 12px;
    font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
    text-align: center; transition: background 0.12s; margin-top: 10px;
    box-shadow: 0 3px 14px rgba(255,112,67,0.28);
}
.pmd-chat-btn:hover { background: #e8622d; }

/* 에티켓 */
.pmd-etiquette-list { display: flex; flex-direction: column; gap: 8px; }
.pmd-etiquette-item { padding: 14px 16px; background: #f7f8fc; border-radius: 12px; }
.pmd-etiquette-desc { font-size: 13px; color: #666; font-weight: 400; line-height: 1.5; }

/* 공지사항 */
.pmd-notice-box { background: #fff9f0; border-radius: 12px; padding: 16px 18px; font-size: 14px; color: #555; font-weight: 400; line-height: 1.7; }

/* 유의사항 */
.pmd-caution-list { display: flex; flex-direction: column; gap: 8px; }
.pmd-caution-item { font-size: 14px; color: #555; font-weight: 400; padding: 12px 16px; background: #f7f8fc; border-radius: 10px; line-height: 1.5; }

/* 액션 버튼 */
.pmd-action-btn {
    display: block; width: 100%; padding: 14px;
    border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: center; transition: all 0.12s;
}
.pmd-action-btn-report { background: #fff; color: #e24b4a; border: 1.5px solid #f5c0c0; }
.pmd-action-btn-report:hover { background: #fff0f0; }
.pmd-action-btn-leave { background: #fff; color: #bbb; border: 1.5px solid #e4e4e4; font-size: 14px; font-weight: 500; }
.pmd-action-btn-leave:hover { border-color: #bbb; color: #888; }

@media (max-width: 768px) {
    .pmd-layout { grid-template-columns: 1fr; }
    .pmd-top-card { grid-template-columns: 1fr; gap: 16px; }
    .pmd-svc-block { flex-direction: row; align-items: center; gap: 12px; }
    .pmd-slot-card { width: 54px; height: 68px; border-radius: 12px; }
    .pmd-slot { min-width: 54px; }
    .pmd-slot-emoji { font-size: 24px; }
    .pmd-slot-name { font-size: 11px; }
    .pmd-box { padding: 18px; border-radius: 14px; }
    .pmd-row { font-size: 14px; padding: 12px 14px; }
    .pmd-row-key { width: 70px; }
}
@media (max-width: 400px) {
    .pmd-slot-card { width: 46px; height: 58px; }
    .pmd-slot { min-width: 46px; }
    .pmd-slot-emoji { font-size: 20px; }
}

/* =========================================
   v3 자율파티 STEP3 - 사진 첨부 (v3-img-upload-)
   ========================================= */

/* 섹션 래퍼 */
.v3-img-upload-section {
    margin-top: 0;
}

/* 조건 안내 텍스트 */
.v3-img-upload-cond {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}
.v3-img-upload-cond-dot {
    color: #ccc;
}

/* 사진 선택 버튼 */
.v3-img-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    background: #f7f9ff;
    border: 1.5px dashed #b8c8f8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    text-align: left;
}
.v3-img-upload-btn:hover {
    background: #eef2ff;
    border-color: #4169E1;
}
.v3-img-upload-btn-full {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.v3-img-upload-btn-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.v3-img-upload-btn-text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #4169E1;
}
.v3-img-upload-btn-count {
    font-size: 12px;
    font-weight: 700;
    color: #4169E1;
    background: #dde6fb;
    padding: 2px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* 미리보기 목록 */
.v3-img-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* 미리보기 아이템 */
.v3-img-preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f7f9ff;
    border: 1px solid #dce5fb;
    border-radius: 10px;
    padding: 8px 12px;
}
.v3-img-preview-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid #e0e8fb;
}
.v3-img-preview-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.v3-img-preview-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-img-preview-size {
    font-size: 11px;
    color: #aaa;
    font-weight: 400;
}
.v3-img-preview-del {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #e0e8fb;
    background: #fff;
    color: #bbb;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-family: inherit;
    padding: 0;
}
.v3-img-preview-del:hover {
    background: #ffe5e5;
    border-color: #f5a0a0;
    color: #e53e3e;
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .v3-img-upload-cond {
        font-size: 11px;
        gap: 3px 5px;
    }
    .v3-img-upload-btn {
        padding: 12px 14px;
    }
    .v3-img-upload-btn-text {
        font-size: 13px;
    }
    .v3-img-preview-thumb {
        width: 44px;
        height: 44px;
    }
    .v3-img-preview-name {
        font-size: 12px;
    }
}

/* 사진 선택 버튼 */
.v3-img-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    background: #f7f9ff;
    border: 1.5px dashed #b8c8f8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    box-sizing: border-box;
}
.v3-img-upload-btn-text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #4169E1;
    text-align: left;
}

/* 미리보기 아이템 */
.v3-img-preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f7f9ff;
    border: 1px solid #dce5fb;
    border-radius: 10px;
    padding: 8px 12px;
    box-sizing: border-box;
}
.v3-img-preview-size {
    font-size: 11px;
    color: #aaa;
}
.v3-img-preview-del {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #e0e8fb;
    background: #fff;
    color: #bbb;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-family: inherit;
    padding: 0;
    line-height: 1;
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .v3-img-upload-cond {
        font-size: 11px;
    }
    .v3-img-upload-btn {
        padding: 12px 14px;
    }
    .v3-img-upload-btn-text {
        font-size: 13px;
    }
    .v3-img-preview-thumb {
        width: 44px;
        height: 44px;
    }
    .v3-img-preview-name {
        font-size: 12px;
    }
}

/* =========================================
   자율파티 상세 공통 (fpd- / pld- 공통)
   파티장(partyLeader) + 파티원(partyMember) 공용
   ========================================= */

/* ── 페이지 래퍼 ── */
.fpd-page  { max-width: 800px; margin: 0 auto; }
.fpd-wrap  { display: flex; flex-direction: column; }

.pld-section-top  { margin: 30px 0 10px !important; padding-left: 2px; }
.pld-no-margin    { margin: 0 !important; }

/* ── 섹션 헤더 행 (타이틀 + 우측 버튼) ── */
.pld-section-hrow {
    display: flex; align-items: center; justify-content: space-between;
    margin: 30px 0 10px; padding-left: 2px;
}
.pld-link-btn {
    font-size: 14px; font-weight: 500; color: #666;
    background: none; border: none; cursor: pointer;
    font-family: inherit; padding: 0; margin-right: 10px;
    transition: color 0.12s;
}
.pld-link-btn:hover { color: #2f54c8; }

/* ── 서비스 아이콘 행 ── */
.fpd-icons-row {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 12px;
}

/* ── 파티원 슬롯 공통 ── */
.pld-slots-section { position: relative; padding-bottom: 5px; }
.pld-slots-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pld-slots-scroll::-webkit-scrollbar { display: none; }
.pld-slots-row {
    display: flex; gap: 12px;
    flex-wrap: nowrap; width: max-content;
}
.pld-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.pld-slot-card {
    width: 100px; height: 100px; border-radius: 10px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: relative; gap: 4px;
}
.pld-slot-member { background: #fff; border: 1.5px solid #dde3f5; }
.pld-slot-empty  { background: #fff; border: 1.5px dashed #cdd3ec; }
.pld-slot-emoji  { font-size: 34px; }
.pld-slot-lock   { font-size: 28px; color: #c5cde0; }

/* ── 슬롯 원형 아바타 (이모티콘/사진 공용) ── */
.pld-slot-avatar {
    width: 50px; height: 50px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f0f2fa; border: 1px solid rgb(128 175 255 / 40%);
}
.pld-slot-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ── 슬롯별 모집 ON/OFF 스위치 ── */
.pld-recruit-switch {
    display: inline-flex; align-items: center;
    cursor: pointer; margin-top: 2px;
}
.pld-recruit-switch-input { display: none; }
.pld-recruit-switch-track {
    position: relative; display: inline-block;
    width: 30px; height: 15px; border-radius: 11px;
    background: #084aea; transition: background 0.2s;
}
.pld-recruit-switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: left 0.2s;
}
.pld-recruit-switch-input:checked + .pld-recruit-switch-track { background: #e24b4a; }
.pld-recruit-switch-input:checked + .pld-recruit-switch-track .pld-recruit-switch-thumb { left: 17px; }
.pld-recruit-switch-input:not(:checked) + .pld-recruit-switch-track { background: #c5cde0; }

/* ── 모집 OFF(자리 막힘) 상태 ── */
.pld-slot-card.pld-slot-blocked {
    background: #eceef5; border-style: solid; border-color: #d3d8e8;
}
.pld-slot-card.pld-slot-blocked .pld-slot-lock { color: #9aa3bd; }
.pld-slot-name {
    font-size: 14px; font-weight: 500; color: #333;
    text-align: center; width: 80px;
    word-break: keep-all; overflow-wrap: break-word;
    white-space: normal; line-height: 1.4; max-height: 2.8em;
}
.pld-slot-join   { font-size: 11px; font-weight: 300; color: #333; line-height: 1.4; }
.pld-slot-name-empty { color: #999; font-weight: 400; }

/* 모집완료 슬롯 */
.pld-slot-closed .pld-slot-card { opacity: 0.45; }
.pld-slot-closed .pld-slot-name { color: #bbb; }

/* 화살표 버튼 */
.pld-slot-arrow {
    position: absolute; top: 48%; transform: translateY(-128%);
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; border: 1.5px solid #dde3f5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    font-size: 25px; color: #333; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    z-index: 10; transition: all 0.12s; padding: 0 0 3px 0; line-height: 1;
}
.pld-slot-arrow-left  { left: -14px; }
.pld-slot-arrow-right { right: -14px; }
.pld-slot-arrow.hidden { opacity: 0; pointer-events: none; }

/* ── stats 바 공통 ── */
/*.fpd-stats-row {*/
/*    display: grid; grid-template-columns: repeat(4, 1fr);*/
/*    border-top: 1px solid #eaecf4;*/
/*}*/
/*.fpd-stat-item {*/
/*    display: flex; flex-direction: column; align-items: center;*/
/*    padding: 14px 8px; gap: 3px;*/
/*    border-right: 1px solid #eaecf4;*/
/*}*/
/*.fpd-stat-item:last-child { border-right: none; }*/
/*.fpd-stat-label { font-size: 12px; color: #999; font-weight: 400; }*/
/*.fpd-stat-val   { font-size: 16px; font-weight: 800; color: #111; }*/
/*.fpd-stat-sub   { font-size: 11px; color: #aaa; font-weight: 400; }*/
/*.fpd-stat-sub-red { color: #e24b4a !important; }*/

/* ── 정보 행 (pld-info-row) ── */
.pld-info-rows { display: flex; flex-direction: column; gap: 8px; }
.pld-info-row  {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 10px;
    background: #f7f8fc; font-size: 16px; min-height: 34px;
}
.pld-info-key  { color: #777; font-weight: 400; flex-shrink: 0; min-width: 130px; }
.pld-info-val  { color: #111; font-weight: 500; flex: 1; }
.pld-info-row-last { border-bottom: none !important; }

/* val-row: 값 + 복사버튼 행 */
.pld-info-val-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-width: 0;
}
.pld-info-val-row .pld-info-val { flex: 1; min-width: 0; word-break: break-all; }

/* 버튼 포함 행 */
.pld-info-row-btn { align-items: center !important; flex-direction: row !important; }
.pld-info-row-btn-inner {
    display: flex; flex-direction: row; align-items: center; gap: 14px; flex: 1;
}

/* ── 복사 버튼 ── */
.pld-copy-btn {
    padding: 6px 12px; background: #e1e3ed; color: #555;
    border: none; border-radius: 8px; font-size: 14px; font-weight: 500;
    cursor: pointer; font-family: inherit; flex-shrink: 0; transition: all 0.12s;
}
.pld-copy-btn:hover { background: #4169E1; color: #fff; }
.pld-copy-btn-fixed {
    flex-shrink: 0 !important; width: 52px !important;
    min-width: 52px !important; text-align: center;
}

/* ── 채팅 + 액션 카드 공통 (좌/우 분리 레이아웃) ── */
.pld-chat-card { padding: 18px 22px !important; margin-bottom: 20px; }
.pld-chat-row  { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pld-chat-left { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.pld-chat-right { display: flex; gap: 8px; flex-shrink: 0; }
.pld-chat-btn {
    padding: 13px 20px 13px 24px; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 400; cursor: pointer;
    font-family: inherit; transition: background 0.12s; white-space: nowrap;
}
.pld-chat-primary { background: #4169E1; color: #fff; box-shadow: 0 3px 12px rgba(65,105,225,0.28); }
.pld-chat-primary:hover { background: #2f54c8; }
.pld-chat-dark    { background: #333; color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,0.14); }
.pld-chat-dark:hover { background: #222; }
/* 컬러 modifier: 오렌지 (파티원 페이지용) */
.pld-chat-primary-orange { background: #FF7043; box-shadow: 0 3px 12px rgba(255,112,67,0.28); }
.pld-chat-primary-orange:hover { background: #e8622d; }
/* 우측 보조 버튼 (더 작은 사이즈) */
.pld-chat-sub { padding: 12px 16px; font-size: 14px; }
/* 우측 단독 액션 버튼 (블루 아웃라인, 파티장 화면 "파티 설정") */
.pld-invite-btn {
    padding: 12px 18px; background: #eef2ff; color: #4169E1;
    border: 1.5px solid #c5d3f5; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: all 0.12s; white-space: nowrap;
}
.pld-invite-btn:hover { background: #dde8ff; }

/* ── 파티원 채팅 드롭다운 ── */
.pld-member-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 100;
    min-width: 160px; margin: 6px 0 0; padding: 6px 0;
    list-style: none; background: #fff; border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.15); border: 1px solid #e5e8f0;
}
.pld-member-dropdown li {
    padding: 10px 18px; font-size: 14px; font-weight: 500;
    color: #222; cursor: pointer; white-space: nowrap;
}
.pld-member-dropdown li:hover { background: #f0f4ff; color: #4169E1; }

/* ── 로그인 카드 헤더 공통 ── */
.pld-login-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.pld-login-svc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pld-login-svc-icon {
    width: 30px; height: 30px; border-radius: 8px;
    overflow: hidden; background: #f0f3ff; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e4e8f4;
}
.pld-login-svc-icon img { width: 100%; height: 100%; object-fit: cover; }
.pld-login-svc-name { font-size: 17px; font-weight: 700; color: #111; }
.pld-login-method-badge {
    font-size: 12px; font-weight: 600;
    border-radius: 20px; padding: 3px 10px;
    border: 1px solid transparent;
}
.pld-method-invite { color: #2e7d32; background: #f0fff4; border-color: #a5d6a7; }
.pld-method-etc    { color: #7b5ea7; background: #f5f0ff; border-color: #d1b8f0; }

/* ── 공지사항 텍스트 ── */
.pld-notice-plain { font-size: 16px; color: #333; font-weight: 500; line-height: 1.8; white-space: pre-line; }

/* ── 에티켓 목록 ── */
/*.fpd-notice-list { display: flex; flex-direction: column; gap: 0; }*/
/*.fpd-notice-item {*/
/*    padding: 14px 16px; border-radius: 10px;*/
/*    font-size: 15px; color: #333; line-height: 1.55;*/
/*    margin-bottom: 6px;*/
/*}*/
.pld-etiquette-item  { background: #f7f8fc !important; }
.pld-etiquette-title { font-size: 15px; font-weight: 500; color: #000; margin-bottom: 4px; line-height: 1.4; }
.pld-etiquette-desc  { font-size: 14px; color: #666; font-weight: 400; line-height: 1.5; }
.pmd-etiquette-title { font-size: 15px; font-weight: 500; color: #000; line-height: 1.4; }

/* ── 모달 공통 ── */
.pld-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 9999;
    align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
}
.pld-modal-overlay.open { display: flex; }
.pld-modal-box {
    background: #fff; border-radius: 18px;
    width: 100%; max-width: 400px; padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.20);
    max-height: 90vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
}
.pld-modal-box-narrow  { max-width: 380px !important; }
.pld-modal-box-scroll  { max-height: 85vh; overflow-y: auto; }
.pld-modal-title  { font-size: 19px; font-weight: 800; color: #111; margin-bottom: 6px; }
.pld-modal-field  { font-size: 13px; font-weight: 600; color: #555; margin-top: 15px; margin-bottom: 6px; }
.pld-modal-input, .pld-modal-textarea {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid #e4e4e4; border-radius: 10px;
    padding: 13px 14px; font-size: 15px; font-family: inherit; color: #333;
    background: #fff; outline: none; transition: border-color 0.15s;
}
.pld-modal-input:focus, .pld-modal-textarea:focus { border-color: #4169E1; background: #fff; }
.pld-modal-textarea { resize: vertical; min-height: 100px; }
.pld-modal-btns { display: flex; gap: 10px; margin-top: 8px; }
.pld-modal-cancel {
    flex: 1; padding: 14px; background: #e9e9e9; color: #666;
    border: none; border-radius: 12px; font-size: 16px; font-weight: 500;
    cursor: pointer; font-family: inherit; transition: background 0.12s;
}
.pld-modal-cancel:hover { background: #e8e8e8; }
.pld-modal-confirm {
    flex: 1; padding: 14px; background: #4169E1; color: #fff;
    border: none; border-radius: 12px; font-size: 16px; font-weight: 500;
    cursor: pointer; font-family: inherit; transition: background 0.12s;
}
.pld-modal-confirm:hover         { background: #2f54c8; }
.pld-modal-confirm-green         { background: #2e7d32 !important; }
.pld-modal-confirm-green:hover   { background: #1b5e20 !important; }
.pld-modal-confirm-red           { background: #e24b4a !important; }
.pld-modal-confirm-red:hover     { background: #c0392b !important; }
.pld-modal-field-opt { font-size: 12px; color: #aaa; font-weight: 400; }

/* ── 프로필 수정 모달 ── */
.pld-profile-edit-avatar {
    position: relative; width: 96px; height: 96px;
    margin: 14px auto 4px;
}
.pld-profile-edit-avatar > img {
    width: 96px; height: 96px; border-radius: 50%;
    object-fit: cover; background: #f0f2fa;
    border: 2px solid #eef1fa; display: block;
}
.pld-profile-avatar-btn {
    position: absolute; right: -2px; bottom: -2px;
    width: 32px; height: 32px; border-radius: 50%;
    background: #084aea; color: #fff; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer; padding: 0;
    box-shadow: 0 2px 6px rgba(8,74,234,0.25);
}
.pld-profile-avatar-btn:hover { background: #0640c8; }
.pld-profile-name-count {
    text-align: right; font-size: 12px; color: #999;
    margin-top: 6px; margin-bottom: 8px;
}

/* 로그인 정보 모달 서비스 섹션 */
.pld-modal-svc-section {
    border: 1px solid #e8eef8; border-radius: 12px;
    padding: 16px; margin-bottom: 16px; background: #f8faff;
}
.pld-modal-svc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pld-modal-svc-icon { width: 28px; height: 28px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.pld-modal-svc-icon img { width: 100%; height: 100%; object-fit: cover; }
.pld-modal-svc-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }

/* 알림 선택 모달 */
.pld-noti-select-msg  { font-size: 15px; color: #444; line-height: 1.7; margin: 2px 0 16px; padding: 0; }
.pld-noti-select-btns { display: flex; flex-direction: column; gap: 10px; }
.pld-noti-btn         { width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.12s; }
.pld-noti-btn-gray    { background: #f0f0f0; color: #555; }
.pld-noti-btn-gray:hover { background: #e2e2e2; }
.pld-noti-btn-blue    { background: #4169E1; color: #fff; }
.pld-noti-btn-blue:hover { background: #2f54c8; }

/* 해결완료 확인 모달 */
.pld-resolve-confirm-msg { font-size: 15px; color: #333; line-height: 1.75; margin: 4px 0 8px; padding: 0; }

/* ── 정산/결제내역 테이블 ── */
.pld-stl-table { border: 1px solid #e8eef8; border-radius: 12px; overflow: hidden; margin: 4px 0; }
.pld-stl-head {
    display: grid; grid-template-columns: 80px 1fr 90px;
    background: #f7f8fc; padding: 11px 6px;
    font-size: 13px; font-weight: 700; color: #888;
    border-bottom: 1px solid #e8eef8;
}
.pld-stl-body  { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.pld-stl-row {
    display: grid; grid-template-columns: 80px 1fr 80px;
    padding: 13px 18px; font-size: 14px; color: #333;
    border-bottom: 1px solid #f2f4f8; background: #fff;
}
.pld-stl-row:last-child { border-bottom: none; }
.pld-stl-col-date { }
.pld-stl-col-desc { }
.pld-stl-col-amt  { text-align: right; font-weight: 400; }
.pld-stl-plus     { color: #4169E1; }
.pld-stl-minus    { color: #e24b4a; }
.pld-stl-empty    { text-align: center; padding: 32px 16px; font-size: 14px; color: #bbb; }
.pld-stl-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: #f0f3ff;
    border-top: 1px solid #dde4f8;
    font-size: 15px; font-weight: 700; color: #333;
}
.pld-stl-total-amt { color: #4169E1; font-size: 16px; }
.pld-stl-row-pending { background: #fafbff; }
.pld-stl-row-pending .pld-stl-col-date { color: #999; }
.pld-stl-row-settled { color: #999; }
.pld-stl-row-settled .pld-stl-col-amt { color: #999 !important; }
.pld-val-blue { color: #4169E1; font-weight: 700; }

/* ── 불편신고 공통 ── */
.pld-report-badge-new {
    font-size: 13px; font-weight: 700; color: #e24b4a;
    background: #fff0f0; border: 1px solid #f5c0c0;
    border-radius: 20px; padding: 4px 14px;
}
.pld-report-wrap  { display: flex; flex-direction: column; gap: 10px; padding: 25px !important; }
.pld-report-guide { font-size: 13px; color: #555; font-weight: 400; padding-left: 2px; line-height: 1.5; }
.pld-report-item  { border-radius: 12px; padding: 16px; }
.pld-report-new   { background: #fff5f5; border: 1px solid #f5c0c0; }
.pld-report-done  { background: #f2fbf4; border: 1px solid #a5d6a7; }
.pld-report-body  { display: flex; align-items: flex-start; gap: 14px; }
.pld-report-left  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pld-report-right { flex-shrink: 0; display: flex; align-items: center; }
.pld-report-meta      { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pld-report-meta-item { font-size: 13px; color: #888; }
.pld-report-meta-sep  { font-size: 13px; color: #ccc; }
.pld-report-content   { font-size: 15px; color: #000; line-height: 1.55; }
.pld-report-resolved-at { font-size: 13px; color: #2e7d32; font-weight: 500; }
.pld-resolve-btn {
    font-size: 13px; font-weight: 500; color: #fff;
    background: #e24b4a; border: none; border-radius: 8px;
    padding: 9px 16px; cursor: pointer; font-family: inherit;
    white-space: nowrap; transition: background 0.12s; width:130px;
}
.pld-resolve-btn:hover { background: #c0392b; }
.pld-resolve-ready {
    font-size: 13px; font-weight: 500; color: #b95959;
    background: #f5d6d6; border: none; border-radius: 8px;
    padding: 9px 16px; cursor: default; font-family: inherit;
    white-space: nowrap; width:130px; box-sizing: border-box; text-align: center;
}

.pld-resolved-label {
    font-size: 13px; font-weight: 700; color: #2e7d32;
    background: #e8f5e9; border: 1px solid #a5d6a7;
    border-radius: 8px; padding: 8px 14px; white-space: nowrap;
}
.pld-report-empty {
    font-size: 15px; color: #aaa; text-align: center;
    padding: 30px 16px; background: #f7f8fc;
    border: 1px solid #e4e8f0; border-radius: 12px;
}

/* ── 토스트 ── */
.pld-toast {
    display: none; position: fixed;
    bottom: 32px; left: 50%; transform: translateX(-50%);
    background: #222; color: #fff; border-radius: 14px;
    padding: 14px 26px; font-size: 15px; font-weight: 600; line-height: 1.6;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25); z-index: 9999; text-align: center;
}
.pld-toast.show { display: block; animation: pld-toast-in 0.25s ease; }
.pld-toast span { font-size: 13px; color: #aaa; display: block; font-weight: 400; margin-top: 2px; }
@keyframes pld-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── 모바일 공통 ── */
@media (max-width: 640px) {
    .fpd-section-label { font-size: 18px; }
    .pld-slot-card  { width: 72px; height: 88px; }
    .pld-slot-emoji { font-size: 30px; }
    .pld-slot-name  { width: 72px; font-size: 12px; }
    .pld-slot-arrow { display: flex; }
    .pld-slot-avatar { width: 50px; height: 50px; }
    .pld-recruit-switch-track { width: 36px; height: 20px; border-radius: 10px; }
    .pld-recruit-switch-thumb { width: 16px; height: 16px; }
    .pld-recruit-switch-input:checked + .pld-recruit-switch-track .pld-recruit-switch-thumb { left: 18px; }

    /* 정보 행 세로 스택 */
    .pld-info-row {
        flex-direction: column; align-items: flex-start;
        gap: 8px; padding: 12px 14px;
    }
    .pld-info-row-btn         { flex-direction: row !important; align-items: center !important; }
    .pld-info-row-btn-inner   { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
    .pld-info-key  { font-size: 13px !important; color: #666 !important; font-weight: 400 !important; min-width: unset !important; }
    .pld-info-val  { font-size: 15px !important; font-weight: 500 !important; color: #000 !important; }
    .pld-info-val-row { width: 100%; }

    /* 불편신고 버튼 아래로 */
    .pld-report-body  { flex-direction: column; }
    .pld-report-right { width: 100%; justify-content: flex-end; }
    .pld-resolve-btn  { padding: 10px 20px; }

    /* 채팅 + 액션 카드 (좌/우 한 줄 유지) */
    .pld-chat-row  { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; }
    /* ★★★ [수정:채팅·신고 버튼 동일 규격] START ★★★ */
    /* 좌/우 래퍼를 해제해 버튼들이 한 줄에서 동일 폭으로 분배되도록 */
    .pld-chat-left, .pld-chat-right { display: contents; }
    .pld-chat-row .pld-chat-btn,
    .pld-chat-row .pld-chat-sub {
        flex: 1 1 0; font-size: 13px; padding: 11px 6px;
        text-align: center; white-space: nowrap;
    }
    /* N뱃지 래퍼(position:relative 유지)도 동일 폭 분배 대상 */
    .pmd-report-btn-wrap,
    .pld-chat-dropdown-wrap { flex: 1 1 0; }
    .pmd-report-btn-wrap .pld-chat-btn,
    .pld-chat-dropdown-wrap .pld-chat-btn { width: 100%; }
    /* ★★★ [수정:채팅·신고 버튼 동일 규격] END ★★★ */
    .pld-chat-icon { display: none; }
    .pld-settings-full-text { display: none; }
    .pld-invite-btn { width: auto; flex-shrink: 0; font-size: 13px; padding: 11px 12px; text-align: center; }
}
@media (max-width: 400px) {
    .pld-slot-card  { width: 64px; height: 78px; }
    .pld-slot-emoji { font-size: 26px; }
    .pld-slot-name  { width: 64px; font-size: 11px; }
    .pld-slot-avatar { width: 44px; height: 44px; }
    .pld-notice-plain { font-size: 15px; }
    /* ★★★ [수정:채팅·신고 버튼 동일 규격] START ★★★ */
    .pld-chat-row .pld-chat-btn,
    .pld-chat-row .pld-chat-sub { font-size: 12px; padding: 11px 4px; }
    /* ★★★ [수정:채팅·신고 버튼 동일 규격] END ★★★ */
}

/* =============================================
   mp- : 파티만들기 (makeParty)
   ============================================= */
/* ══════════════════════════════════════════════
       mp- : 파티만들기 전용 CSS
       - mp-intro-* : 첫 페이지 인트로
       - mp-type-*  : 모달 파티 타입 탭 (innerHTML 주입 시 style 무시되므로 여기에)
       - mp-gm-*    : 정산보장형 안내 모달
       ══════════════════════════════════════════════ */

/* ── 첫 페이지 인트로 ── */
.mp-intro-wrap { max-width: 700px; margin: 0 auto; background: #fff; border-radius: 24px; padding: 50px; box-shadow: 0 2px 12px rgba(0,0,0,.06); box-sizing: border-box; }
.mp-intro-header { text-align: center; padding-bottom: 32px; }
.mp-intro-icon { font-size: 44px; margin-bottom: 14px; display: block; }
.mp-intro-title { font-size: 26px; font-weight: 700; color: #111; line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.5px; }
.mp-intro-desc { font-size: 14px; color: #666; line-height: 1.65; margin: 0; letter-spacing: -0.2px; }
.mp-policy-box { max-width: 400px; letter-spacing: -0.2px; background: #f7f8fc; border: 1.5px solid #e8eaf2; border-radius: 16px; padding: 36px; margin: 0 auto; margin-bottom: 40px; }
.mp-policy-title { font-size: 13px; font-weight: 700; color: #084aea; margin: 0 0 14px; letter-spacing: -0.2px; }
.mp-policy-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.mp-policy-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #333; line-height: 1.6; }
.mp-policy-list li strong { color: #111; font-weight: 700; }
.mp-policy-icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.mp-start-wrap { text-align: center; }
.mp-start-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 300px; height: 54px; background: #084aea; color: #fff; font-size: 16px; font-weight: 700; border-radius: 14px; cursor: pointer; letter-spacing: -0.4px; transition: background .15s, transform .12s; box-sizing: border-box; }
.mp-start-btn:hover { background: #0640c8; transform: translateY(-1px); }
.mp-start-btn:active { transform: translateY(0); }

/* ── 파티 타입 탭 (모달 내부, innerHTML 주입 대응) ── */
.mp-type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.mp-type-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 16px 18px; border: 1px solid #e0e0e0; border-radius: 14px; background: #f9f9f9; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; box-sizing: border-box; width: 100%; }
.mp-type-tab:hover { border-color: #bbb; background: #f3f3f3; }
.mp-tab-on { border-color: #084aea !important; background: #fff !important; box-shadow: 0 0 0 1px #084aea; }
.mp-tab-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: #ddd; color: #777; }
.mp-tab-on .mp-tab-badge { background: #084aea; color: #fff; }
.mp-badge-free { background: #084aea; color: #fff; }
.mp-badge-g { background: #FF6142; color: #fff; }
.mp-tab-name { font-size: 18px; font-weight: 700; color: #aaa; letter-spacing: -0.4px; display: block; }
.mp-tab-on .mp-tab-name { color: #084aea; }
.mp-tab-desc { font-size: 12px; font-weight: 500; color: #bbb; letter-spacing: -0.2px; line-height: 1.4; display: block; }
.mp-tab-on .mp-tab-desc { color: #6a81eb; }

/* ── 정산 보장형 안내 모달 (innerHTML 주입 대응) ── */
.mp-gm-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.mp-gm-box { background: #fff; border-radius: 20px; width: 100%; max-width: 400px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.22); display: flex; flex-direction: column; }
.mp-gm-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 0; }
.mp-gm-badge { font-size: 12px; font-weight: 700; color: #FF6142; background: #fff1ed; border: 1px solid #ffc4b4; border-radius: 20px; padding: 4px 12px; }
.mp-gm-close { font-size: 24px; color: #aaa; cursor: pointer; line-height: 1; }
.mp-gm-body { padding: 20px 22px; flex: 1; }
.mp-gm-hero { text-align: center; margin-bottom: 22px; }
.mp-gm-hero-icon { font-size: 25px; }
.mp-gm-title { font-size: 26px; font-weight: 700; color: #111; margin: 0 0 30px; letter-spacing: -0.5px; }
.mp-gm-desc { font-size: 13px; color: #666; line-height: 1.6; margin: 0; letter-spacing: -0.2px; }
.mp-gm-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 18px; }
.mp-gm-list li { display: flex; align-items: flex-start; gap: 12px; }
.mp-gm-chk { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #eef2ff; color: #084aea; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.mp-gm-list li strong { font-size: 16px; font-weight: 700; color: #111; display: block; margin-bottom: 5px; letter-spacing: -0.2px; }
.mp-gm-list li p { font-size: 13px; color: #777; margin: 0; line-height: 1.7; }
.mp-gm-alert { display: flex; justify-content: center; gap: 6px; background: #fff8f2; border: 1.5px solid #ffd4c9; border-radius: 12px; padding: 16px 22px 18px 16px; }
.mp-gm-alert-ico {  }
.mp-gm-alert-title { font-size: 14px; font-weight: 800; color: #d31f1d; letter-spacing: -0.3px; }
.mp-gm-alert-desc { font-size: 12px; color: #555; line-height: 1.6; margin: 0; letter-spacing: -0.2px; }
.mp-gm-alert-desc strong { color: #c0392b; }
.mp-gm-foot { display: flex; gap: 8px; padding: 22px; border-top: 1px solid #f0f0f0; }
.mp-gm-btn { flex: 1; height: 44px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: -0.3px; transition: background .15s; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.mp-gm-btn-cancel { background: #f0f0f0; color: #555; }
.mp-gm-btn-cancel:hover { background: #e5e5e5; }
.mp-gm-btn-go { background: #333; color: #fff; }
.mp-gm-btn-go:hover { background: #000; }
.mp-agree-chk { /* JS 참조용 식별 클래스 */ }

/* ── 반응형 ── */
@media (max-width: 640px) {
    .mp-intro-wrap { padding: 28px 20px; border-radius: 16px; }
    .mp-intro-title { font-size: 19px; }
    .mp-policy-box { padding: 16px; }
    .mp-start-btn { height: 50px; font-size: 15px; }
    .mp-type-tab { padding: 12px 14px; }
    .mp-tab-name { font-size: 17px; }

    .mp-tab-on { background: #f3f6ff !important; }
    .mp-tab-desc { font-size: 11px; }
}

/* =============================================
   fpc- : 파티만들기 완료 (makeParty complete)
   ============================================= */
.fpc-wrap {
    min-height: 70vh;
    background: #f4f6fb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 100px;
    box-sizing: border-box;
}
.fpc-card {
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 12px 48px rgba(65,105,225,0.10);
    max-width: 460px;
    width: 100%;
    padding: 52px 100px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.fpc-icon-wrap {
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #EEF2FF 0%, #DDEAFF 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.fpc-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed #c5d0f8;
    animation: fpc-spin 12s linear infinite;
}
@keyframes fpc-spin { to { transform: rotate(360deg); } }
.fpc-icon {
    font-size: 44px;
    animation: fpc-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
@keyframes fpc-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.fpc-party-id {
    display: inline-block;
    background: #eef2ff;
    color: #4169E1;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
    letter-spacing: 0.03em;
    animation: fpc-up 0.5s ease 0.3s both;
}
.fpc-title {
    font-size: 26px;
    font-weight: 900;
    color: #111;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
    animation: fpc-up 0.5s ease 0.35s both;
}
.fpc-subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 30px;
    animation: fpc-up 0.5s ease 0.45s both;
}
@keyframes fpc-up {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
/* 파티장 필독 안내 카드 */
.fpc-rules {
    background: #f7f9ff;
    border: 1.5px solid #dce5fb;
    border-radius: 16px;
    padding: 4px 20px 8px;
    margin-bottom: 40px;
    text-align: left;
    animation: fpc-up 0.5s ease 0.55s both;
}
.fpc-rules-title {
    font-size: 11px;
    font-weight: 700;
    color: #4169E1;
    letter-spacing: 0.04em;
    padding: 12px 0 10px;
    border-bottom: 1px solid #e8edf8;
    display: flex;
    align-items: center;
    gap: 5px;
}
.fpc-rule-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f8;
}
.fpc-rule-item:last-child { border-bottom: none; }
.fpc-rule-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}
.fpc-rule-icon.blue  { background: #eef2ff; }
.fpc-rule-icon.green { background: #e8f8f0; }
.fpc-rule-icon.amber { background: #fff8e6; }
.fpc-rule-icon.red   { background: #fff0f0; }
.fpc-rule-body { flex: 1; min-width: 0; }
.fpc-rule-head {
    font-size: 14px;
    font-weight: 700;
    color: #4a4f55;
    line-height: 1.4;
    margin-bottom: 2px;
}
.fpc-rule-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}
/* 하단 안내 */
.fpc-notice {
    background: #f0fff8;
    border: 1px solid #b7ebd4;
    border-radius: 12px;
    padding: 12px 16px;
    text-align: left;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fpc-up 0.5s ease 0.65s both;
}
.fpc-notice-icon { font-size: 18px; flex-shrink: 0; }
.fpc-notice-text {
    font-size: 12px;
    color: #2d7a55;
    line-height: 1.65;
    margin: 0;
    font-weight: 500;
}
.fpc-btns {
    display: flex; gap: 10px;
    animation: fpc-up 0.5s ease 0.75s both;
}
.fpc-btn {
    flex: 1; padding: 14px 16px; border-radius: 12px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    border: none; transition: all 0.2s ease;
    text-decoration: none; display: flex;
    align-items: center; justify-content: center;
}
.fpc-btn-secondary { background: #f0f0f0; color: #555; }
.fpc-btn-secondary:hover { background: #e4e4e4; }
.fpc-btn-primary { background: #4169E1; color: #fff !important; }
.fpc-btn-primary:hover { background: #3058d0; }
@media (max-width: 480px) {
    .fpc-card { padding: 40px 20px 32px; }
    .fpc-title { font-size: 22px; }
    .fpc-btns { flex-direction: column; }
}

/* =============================================
   v3-step-page : 파티만들기 페이지 레이아웃
   (모달 방식 → 페이지 방식 전환 대응)
   ============================================= */

/* 페이지 전체 래퍼 */
.v3-step-page-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 960px;
    margin: 60px auto 70px;        /* 위아래 여백 */
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    min-height: 600px;
}

/* 사이드바 */
.v3-step-page-wrap .v3-modal-sidebar {
    min-width: 270px;
    max-width: 270px;
    position: sticky;
    top: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* 콘텐츠 영역 */
.v3-step-page-wrap .v3-modal-content {
    flex: 1;
    min-width: 0;
    overflow: visible;
    background: #f4f6fb;
    display: flex;
    flex-direction: column;
}

/* 스텝 스크롤: 페이지에서는 overflow 해제 */
.v3-step-page-wrap .v3-step-scroll-body {
    overflow-y: visible;
    max-height: none;
    flex: 1;
}

/* footer 버튼 바: sticky 하단 */
.v3-step-page-wrap .v3-modal-footer {
    position: sticky;
    bottom: 0;
    background: #f4f6fb;
    border-top: 1px solid #eee;
    z-index: 10;
    padding: 30px 24px;
}

/* 모바일 */
@media (max-width: 768px) {
    .v3-step-page-wrap {
        flex-direction: column;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        min-height: unset;
        margin: 16px 12px 80px;    /* 모바일 여백 + 하단 footer 공간 */
        width: auto;
    }
    .v3-step-page-wrap .v3-modal-sidebar {
        min-width: unset;
        max-width: unset;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ebebeb;
        padding: 20px 20px 16px;
        position: static;
    }
    .v3-step-page-wrap .v3-modal-content {
        background: #fff;
    }
    .v3-step-page-wrap .v3-modal-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        border-radius: 0;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
        padding: 12px 16px;
    }
    .v3-step-page-wrap .v3-step-scroll-body {
        padding-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .v3-step-page-wrap {
        margin: 14px 14px 75px;
        border-radius: 8px;
    }
}
/* ── v3-so-panel : 서비스 옵션 셀렉터 패널 (v3-ss-panel 동일 구조) ── */
.v3-so-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: -1.5px;
    right: -1.5px;
    background: #fff;
    border: 1.5px solid #4169E1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 999;
    max-height: 240px;
    overflow-y: auto;
}
.v3-ss-open .v3-so-panel {
    display: block;
}

/* 배지 (파티원: 오렌지) */
.pmd-login-method-badge {
    font-size: 12px; font-weight: 600;
    color: var(--pmd-orange); background: var(--pmd-orange-light);
    border: 1px solid var(--pmd-orange-border);
    border-radius: 20px; padding: 3px 10px;
}
.pmd-method-invite { color: #2e7d32; background: #f0fff4; border-color: #a5d6a7; }

/* 배지 (파티장: 블루) */
.pld-login-method-badge { color: #4169E1; background: #eef2ff; border-color: #c5d3f5; }



/* ★★★ [수정:추가 이용 정보 / 공유방식 설명 줄바꿈] START ★★★ */
.pld-info-row.pld-info-row-multi {
    display: block;
}
.pld-info-row.pld-info-row-multi .pld-info-key {
    display: block;
    margin-bottom: 6px;
}
.pld-info-row.pld-info-row-multi .pld-info-val-row {
    display: block;
    width: 100%;
}
.pld-info-row.pld-info-row-multi .pld-info-val {
    display: block;
    width: 100%;
    text-align: left;
    white-space: pre-line;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.6;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 12px;
    color: #333;
}
/* ★★★ [수정:추가 이용 정보 / 공유방식 설명 줄바꿈] END ★★★ */