/* =====================================================================
   응모권 플로팅 버튼·패널 — main·mypage 전 사용자 페이지 공통.
   마크업은 static/common/js/wj-ticket-float.js 가 생성한다 (wj-modal.js 와 같은 방식).

   색은 wj-modal.css 의 톤 규칙을 따른다 — 연한 배경 + 같은 계열 진한 글자.
   PC(768px~)는 버튼 위에 뜨는 팝오버, 767px 이하는 바텀시트.
   ===================================================================== */

/* 루트는 화면 전체를 덮되 클릭을 통과시킨다 — 자식(버튼·딤·패널)만 이벤트를 받는다 */
.ticket-float {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}

/* 열렸을 때만 헤더(2000)·드로어 위로 올라온다.
   평상시 900 은 드로어(main #navigation 1000 / mypage 딤 1500)보다 아래라
   드로어가 열리면 버튼이 자동으로 덮인다 — 별도 연동 JS 가 필요 없다.
   8000 은 모든 모달(.mp-modal 9000 / #modalLayout 10000 / .wj_modal 100000)보다 아래라
   패널이 열린 채 안내 모달이 떠도 모달이 정상적으로 위에 온다 */
.ticket-float--open {
    z-index: 8000;
}

/* ---------------------------------------------------------------------
   플로팅 버튼
   --------------------------------------------------------------------- */
.ticket-float__btn {
    position: absolute;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(20px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #0d498c;
    color: #fff;
    box-shadow: 0 6px 18px rgba(13,73,140,.32);
    cursor: pointer;
    pointer-events: auto;
    transition: background .18s ease, transform .18s ease, opacity .18s ease, visibility .18s ease;
}
.ticket-float__btn:hover {
    background: #005c9d;
}
.ticket-float__btn:active {
    transform: scale(.94);
}
.ticket-float__btn i {
    font-size: 26px;
    line-height: 1;
}

/* ---------------------------------------------------------------------
   딤 — 바텀시트일 때만 쓴다 (PC 팝오버는 바깥 클릭으로 닫는다)
   --------------------------------------------------------------------- */
.ticket-float__dim {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

/* ---------------------------------------------------------------------
   패널
   --------------------------------------------------------------------- */
.ticket-float__panel {
    position: absolute;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(88px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    width: 340px;
    max-height: 72vh;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.ticket-float--open .ticket-float__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ticket-float__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #eef1f4;
}
.ticket-float__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}
.ticket-float__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f4f5f6;
    color: #555;
    cursor: pointer;
    transition: background .18s ease;
}
.ticket-float__close:hover {
    background: #e9eaec;
}
.ticket-float__close i {
    font-size: 15px;
    line-height: 1;
}

.ticket-float__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px 16px;
}

/* ---------------------------------------------------------------------
   섹션 공통
   --------------------------------------------------------------------- */
.ticket-float__section + .ticket-float__section,
.ticket-float__about + .ticket-float__section {
    margin-top: 18px;
}
/* 안내 줄이 두 개 이상일 때(기존 회원 전용 줄) — 섹션 간격보다 좁게 붙인다 */
.ticket-float__about + .ticket-float__about {
    margin-top: 10px;
}
.ticket-float__section-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

/* ---------------------------------------------------------------------
   캠페인 안내 줄 — "내 데이터 가치찾기 챌린지란?"
   소개 페이지 주소가 정해지기 전에는 --ready 로 같은 모양의 비활성 줄이 된다
   --------------------------------------------------------------------- */
.ticket-float__about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 17px 16px;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: #f8fbfe;
    color: #0d498c;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.3px;
    transition: background .18s ease, border-color .18s ease;
}
/* 셰브런은 아이콘 태그 없이 폰트 코드로 붙인다 (xi-angle-right) */
.ticket-float__about::after {
    content: "\e93e";
    flex: 0 0 auto;
    font-family: xeicon;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
}
/* base.css 의 `a:link, a:active, a:visited { border: 0 }` 가 (0,1,1) 로 같은 특이도인데
   이 파일보다 뒤에 로드돼 테두리를 지운다 — 패널을 앞에 붙여 (0,2,1) 로 이긴다 */
.ticket-float__panel a.ticket-float__about {
    border: 1px solid #e5eaf0;
    color: #0d498c;
}
.ticket-float__about::after {
    color: #7b93a8;
}
.ticket-float__panel a.ticket-float__about:hover {
    background: #f5f9fc;
    border-color: #d5e3f2;
    color: #0d498c;
}
/* 소개 주소가 정해지기 전 상태 — 링크가 아니라는 것만 톤으로 알리고 대비는 확보한다
   (기존 #8a8a8a 는 흰 배경 대비 3:1 이 안 돼 읽기 어렵다는 지적을 받았다) */
.ticket-float__about--ready {
    color: #3f5568;
    cursor: default;
}

/* ---------------------------------------------------------------------
   지급표
   --------------------------------------------------------------------- */
/* 한 행 = [빈도 배지] + 본문(1행 항목명·장수 / 2행 칩).
   340px 패널에서 긴 항목명과 긴 칩이 한 줄에 들어가지 않아 칩을 아래로 내렸다 */
.ticket-float__guide-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid #f1f3f5;
}
.ticket-float__guide-row:last-child {
    border-bottom: 0;
}
/* 참여 빈도 배지 — 폭을 고정해 행마다 항목명 시작점이 어긋나지 않게 한다 */
.ticket-float__guide-freq {
    flex: 0 0 auto;
    min-width: 42px;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #f4f5f6;
    color: #757575;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.3px;
    text-align: center;
    white-space: nowrap;
}
.ticket-float__guide-freq--once {
    background: #f4f5f6;
    color: #757575;
}
.ticket-float__guide-freq--daily {
    background: #e8f0fa;
    color: #0d498c;
}
.ticket-float__guide-freq--always {
    background: #e9f6ee;
    color: #1f7a45;
}
/* min-width:0 이 없으면 긴 항목명이 배지를 밀어낸다 */
.ticket-float__guide-body {
    flex: 1 1 auto;
    min-width: 0;
}
.ticket-float__guide-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.ticket-float__guide-name {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    letter-spacing: -0.3px;
}
/* 장수는 행 오른쪽 끝으로 밀어 열을 맞춘다 */
.ticket-float__guide-amount {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: #0d498c;
    letter-spacing: -0.3px;
    text-align: right;
}
.ticket-float__guide-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e8f0fa;
    color: #0d498c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.3px;
    white-space: nowrap;
    transition: background .18s ease;
}
.ticket-float__guide-link:hover {
    background: #dbe8f6;
    color: #0d498c;
}
/* 사용자 화면이 아직 없는 사유(퀴즈 등) — 칩 모양은 유지하고 링크만 죽인다 */
.ticket-float__guide-link--ready {
    background: #f4f5f6;
    color: #8a8a8a;
    cursor: default;
}
/* 오늘 몫을 이미 챙긴 사유 — 이동할 곳이 없으므로 완료 표시로 대체한다 */
.ticket-float__guide-link--done {
    background: #e9f6ee;
    color: #1f7a45;
    cursor: default;
}
.ticket-float__guide-link--done i {
    font-size: 13px;
    line-height: 1;
}

/* ---------------------------------------------------------------------
   하단 안내·CTA
   --------------------------------------------------------------------- */
.ticket-float__notice {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f7f8f9;
    font-size: 12px;
    font-weight: 500;
    color: #757575;
    line-height: 1.5;
    letter-spacing: -0.3px;
    text-align: center;
}
.ticket-float__cta {
    display: block;
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: 10px;
    background: #e8f0fa;
    color: #0d498c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    transition: background .18s ease;
}
.ticket-float__cta:hover {
    background: #dbe8f6;
    color: #0d498c;
}

/* 로딩·실패 자리표시 */
.ticket-float__state {
    margin: 0;
    padding: 28px 0;
    font-size: 13px;
    font-weight: 500;
    color: #8a8a8a;
    text-align: center;
    letter-spacing: -0.3px;
}

/* ---------------------------------------------------------------------
   모바일 — 바텀시트 (main·mypage 모바일 브레이크포인트가 둘 다 767px)
   --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .ticket-float--open .ticket-float__dim {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .ticket-float__btn {
        width: 52px;
        height: 52px;
    }
    .ticket-float__btn i {
        font-size: 24px;
    }
    /* 바텀시트가 올라오면 버튼은 시트에 가려지는 자리라 보일 이유가 없다 — 닫기는 X·딤이 맡는다 */
    .ticket-float--open .ticket-float__btn {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    /* 내용이 짧아도 시트가 화면의 7할은 차지하도록 최소 높이를 둔다 */
    .ticket-float__panel {
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        min-height: 70dvh;
        max-height: 88dvh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .ticket-float__body {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}