/* ============================================================
   figure-request.css — 실물 피규어 제작 신청 (배너 + 모달)

   ⛔ 이 파일은 **자기 클래스(fr-*)만** 정의한다. 기존 셀렉터를 절대 덮어쓰지 않는다.
      getavata.css 는 미디어쿼리 오버라이드가 여러 겹이라, 거기에 끼워 넣으면
      다른 화면까지 흔들린다.

   ⚠️ 배너는 action_figure 스타일일 때만 보인다. 그 외에는 display:none 이라
      DOM 에 있어도 **레이아웃을 전혀 차지하지 않는다.**

   디자인 기준 — getavata 의 기존 모달과 같은 언어를 쓴다:
      골드 액센트 #ffd700 · 보라 그라데이션 #2a1f3d→#3d2e5f · radius 16px
   ============================================================ */


/* ⛔⛔ main.css 전역 button 규칙 차단 — 이걸 빼면 버튼이 통째로 망가진다.
   main.css(HTML5UP 템플릿)가 모든 button 에 이걸 먹인다:
       color:#ffffff !important · line-height:4.75em · letter-spacing:0.25em
       font-size:0.6em · padding:0 3.75em · text-transform:uppercase · border-radius:3em
       height:calc(4.75em + 2px) · border-color:… !important
   증상(2026-08-30 실제 발생): 노란 버튼에 **흰 글씨**(대비 1.7:1, 거의 안 읽힘),
   글자가 아래로 밀림(line-height), "취 소" 처럼 벌어짐(letter-spacing).
   ⚠️ color 는 상대가 !important 라 이쪽도 !important 여야 이긴다.
   ⛔⛔ 이 리셋은 (0,1,1) 이라 **한 클래스짜리 버튼 규칙(.fr-cta, (0,1,0))을 이겨버린다.**
      2026-08-30 에 그 바람에 신청 버튼 배경이 transparent 가 돼 거의 안 보였다.
      → 버튼 규칙은 반드시 부모 클래스를 붙여 (0,2,0) 로 쓴다. `.fr-cta` 로 줄이지 말 것. */
.fr-banner button,
.fr-modal button {
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    font-size: inherit;
    font-weight: 700;
    height: auto;
    padding: 0;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* ── 배너 ─────────────────────────────────────────────────── */
.fr-banner {
    display: none;                 /* ⛔ 기본 숨김 — JS 가 조건을 만족할 때만 켠다 */
    width: 100%;
    max-width: 650px;
    margin: 0.75rem auto 0.2rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
}
.fr-banner.is-visible {
    display: block;
    animation: fr-rise 0.45s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes fr-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 14px;
    /* 페이지 배경 위에 얹히는 유리판 느낌 — 강한 색면을 쓰면 광고처럼 보인다 */
    background:
        linear-gradient(135deg, rgba(255,215,0,0.055) 0%, rgba(255,215,0,0) 55%),
        linear-gradient(135deg, rgba(42,31,61,0.92) 0%, rgba(61,46,95,0.92) 100%);
    border: 1px solid rgba(255,215,0,0.22);
    box-shadow: 0 4px 20px rgba(0,0,0,0.28);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fr-card:hover {
    border-color: rgba(255,215,0,0.45);
    box-shadow: 0 6px 26px rgba(0,0,0,0.36);
    transform: translateY(-1px);
}
.fr-card:active { transform: translateY(0); }

.fr-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #ffd700;
    background: rgba(255,215,0,0.10);
    border: 1px solid rgba(255,215,0,0.22);
}

.fr-text { flex: 1; min-width: 0; }
.fr-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fr-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.52);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fr-sub .fr-dot { color: rgba(255,255,255,0.24); }
.fr-price { color: #ffd700; font-weight: 600; }

.fr-banner .fr-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 9px;
    border: none;
    background: #ffd700;
    color: #2a1f3d !important;      /* ⛔ main.css 의 color:#fff !important 를 이겨야 한다 */
    font-size: 0.83rem !important;
    font-weight: 700;
    letter-spacing: -0.01em !important;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1 !important;
    transition: filter .18s ease;
}
.fr-banner .fr-card:hover .fr-cta { filter: brightness(1.08); }

/* 이미 신청한 건 — 다시 누르지 않도록 조용히 낮춘다 */
.fr-card.is-done { cursor: default; border-color: rgba(255,255,255,0.12); }
.fr-card.is-done:hover { transform: none; box-shadow: 0 4px 20px rgba(0,0,0,0.28); }
.fr-card.is-done .fr-icon { color: #34d399; background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.22); }
.fr-banner .fr-card.is-done .fr-cta { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78) !important; }

@media (max-width: 480px) {
    .fr-card { gap: 11px; padding: 11px 12px; }
    .fr-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 0.92rem; }
    .fr-title { font-size: 0.86rem; }
    .fr-sub   { font-size: 0.71rem; gap: 5px; }
    .fr-banner .fr-cta { padding: 0 12px; font-size: 0.78rem !important; }
}

/* ── 모달 ─────────────────────────────────────────────────── */
.fr-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fr-fade .3s ease-out;
}
.fr-modal.is-open { display: flex; }
@keyframes fr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fr-slide-up {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fr-sheet {
    background: linear-gradient(135deg, #2a1f3d 0%, #3d2e5f 100%);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 30px 30px 26px;
    animation: fr-slide-up .4s cubic-bezier(.22,.9,.3,1) both;
    box-sizing: border-box;
}

.fr-h {
    margin: 0;
    font-size: 1.42rem;
    font-weight: 800;
    color: #ffd700;
    text-align: center;
    letter-spacing: -0.02em;
}
.fr-rule {
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    margin: 14px 0 20px;
}
.fr-lead {
    margin: 0 0 18px;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
}

/* 썸네일 + 조건 요약 */
.fr-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(0,0,0,0.26);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 20px;
}
.fr-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,215,0,0.18);
}
.fr-facts { flex: 1; min-width: 0; display: grid; gap: 6px; }
.fr-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 0.8rem;
}
.fr-fact dt { color: rgba(255,255,255,0.45); white-space: nowrap; }
.fr-fact dd { margin: 0; color: #fff; font-weight: 600; text-align: right; }
.fr-fact dd.fr-accent { color: #ffd700; }

.fr-field { margin-bottom: 14px; }
.fr-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.62);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.fr-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1.5px solid rgba(255,215,0,0.3);
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.95);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.fr-input::placeholder { color: rgba(255,255,255,0.3); }
.fr-input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255,215,0,0.1);
}

/* 동의 — ⚠️ main.css 가 raw checkbox 를 opacity:0/z-index:-1 로 숨긴다.
   label 로 감싸는 형태에선 그 커스텀 컨트롤이 안 걸려 **체크박스가 통째로 사라진다.**
   아래 3줄이 그 복구다. 지우지 말 것. */
.fr-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    margin: 4px 0 6px;
}
.fr-agree input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    opacity: 1;
    z-index: auto;
    position: static;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: #ffd700;
}
.fr-agree-text { font-size: 0.78rem; line-height: 1.55; color: rgba(255,255,255,0.72); }
.fr-agree-text b { color: #fff; font-weight: 600; }
.fr-agree-meta { display: block; margin-top: 3px; color: rgba(255,255,255,0.4); font-size: 0.73rem; }

.fr-note {
    font-size: 0.74rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.42);
    text-align: center;
    margin: 12px 0 0;
}

.fr-actions { display: flex; gap: 10px; margin-top: 20px; }
.fr-modal .fr-btn {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    font-size: 0.92rem !important;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    /* 글자를 세로 정중앙에 — line-height 대신 flex 로 맞춘다(높이가 바뀌어도 안 틀어진다) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    padding: 0 14px;
    transition: filter .18s ease, opacity .18s ease;
}
.fr-modal .fr-btn-ghost {
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    color: rgba(255,255,255,0.88) !important;
}
/* ⚠️ 노란 배경 위 글자색 — 흰색(#fff)은 대비 1.7:1 로 읽히지 않는다.
   짙은 보라(#2a1f3d)는 11:1 로 WCAG AAA 를 넘는다. 흰색으로 되돌리지 말 것. */
.fr-modal .fr-btn-primary { background: #ffd700; color: #2a1f3d !important; }
.fr-modal .fr-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.fr-modal .fr-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.fr-error {
    display: none;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(251,113,133,0.12);
    border: 1px solid rgba(251,113,133,0.3);
    color: #fda4af;
    font-size: 0.8rem;
    text-align: center;
}
.fr-error.is-shown { display: block; }

/* 완료 화면 */
.fr-done { text-align: center; padding: 6px 0 2px; }
.fr-done-mark {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #34d399;
    background: rgba(52,211,153,0.12);
    border: 1px solid rgba(52,211,153,0.3);
}

@media (max-width: 480px) {
    .fr-sheet { padding: 24px 20px 20px; }
    .fr-h { font-size: 1.24rem; }
}

/* ── 저작현황 (진행 단계) ─────────────────────────────────────
   접수중 → 승인중 → 저작중 → 배송중 → 배송완료
   ⚠️ 단계 목록은 백엔드 FIGURE_STATUSES · CMS 드롭다운과 같아야 한다. */
.fr-steps {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}
.fr-step {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    position: relative;
    padding-bottom: 18px;
}
.fr-step:last-child { padding-bottom: 0; }
/* 단계를 잇는 세로선 — 마지막 단계엔 그리지 않는다 */
.fr-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 2px;
    width: 2px;
    background: rgba(255,255,255,0.10);
}
.fr-step.is-past:not(:last-child)::before { background: rgba(255,215,0,0.38); }

.fr-step-dot {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    z-index: 1;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.32);
}
.fr-step.is-past .fr-step-dot {
    background: rgba(255,215,0,0.16);
    border-color: rgba(255,215,0,0.5);
    color: #ffd700;
}
/* 현재 단계만 채워서 눈이 바로 간다 */
.fr-step.is-now .fr-step-dot {
    background: #ffd700;
    border-color: #ffd700;
    color: #2a1f3d;
    box-shadow: 0 0 0 5px rgba(255,215,0,0.14);
}
.fr-step-body { flex: 1; min-width: 0; padding-top: 3px; }
.fr-step-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.36);
    letter-spacing: -0.01em;
}
.fr-step.is-past .fr-step-name { color: rgba(255,255,255,0.62); }
.fr-step.is-now  .fr-step-name { color: #fff; }
.fr-step-desc {
    font-size: 0.76rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.36);
    margin-top: 2px;
    display: none;                 /* 현재 단계에서만 설명을 보여준다 — 목록이 조용해진다 */
}
.fr-step.is-now .fr-step-desc { display: block; color: rgba(255,255,255,0.55); }

/* 취소된 건 — 단계 대신 한 줄로 */
.fr-canceled {
    text-align: center;
    padding: 18px 14px;
    border-radius: 12px;
    background: rgba(148,163,184,0.10);
    border: 1px solid rgba(148,163,184,0.24);
    color: rgba(255,255,255,0.62);
    font-size: 0.86rem;
    line-height: 1.6;
}
.fr-updated {
    text-align: center;
    font-size: 0.73rem;
    color: rgba(255,255,255,0.3);
    margin: 16px 0 0;
}

/* 배너가 "진행중" 상태일 때 — 골드 대신 차분한 파랑 계열 */
.fr-card.is-tracking .fr-icon {
    color: #93c5fd;
    background: rgba(147,197,253,0.10);
    border-color: rgba(147,197,253,0.24);
}
.fr-banner .fr-card.is-tracking .fr-cta {
    background: rgba(255,255,255,0.11);
    color: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(255,255,255,0.16);
}
.fr-card.is-tracking { border-color: rgba(147,197,253,0.22); }
.fr-card.is-tracking:hover { border-color: rgba(147,197,253,0.42); }
.fr-stage { color: #93c5fd; font-weight: 600; }