/*
    파일 고르는 상자 — 공용 (includes/upload_box.php · assets/js/upload-box.js)

    ⚠️ 이 모양은 관상 화면(`fortune/face.php`)의 `.pf-drop` 을 본으로 삼았다.
       거기 것이 이미 손님에게 익은 모양이라, 새 상자가 다르게 생기면
       같은 사이트에서 두 가지 모양이 보인다.

    ⚠️ 이름을 `.ub-` 로 둔다. `.pf-drop` 을 그대로 쓰면 관상 화면의 규칙과
       겹쳐서 서로를 덮는다 — 오늘 `.pd__*` 에서 그 일을 겪었다.
*/

.ub__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;

    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg, 14px);
    padding: var(--space-4);
    background: var(--color-surface);

    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

/* 끌어다 놓는 중 — 여기 놓으면 된다는 것을 눈으로 알려준다 */
.ub__drop:hover,
.ub__drop.is-over {
    border-color: var(--tarot-lavender, #7C6AE8);
    background: var(--color-primary-light, rgba(124,106,232,.06));
}

/* ⚠️ 기본 파일 단추를 숨긴다. 안 숨기면 상자 안에 브라우저 단추가 또 뜬다 */
.ub__drop input[type="file"] { display: none; }

.ub__icon { color: var(--color-text-tertiary, #999); }
.ub__lead { font-weight: var(--font-semibold, 600); font-size: var(--text-sm); }
.ub__note { font-size: var(--text-xs); color: var(--color-text-tertiary, #999); line-height: 1.5; }

/* 고른 것 미리보기 */
.ub__preview { margin-top: var(--space-2); text-align: center; }
.ub__preview[hidden] { display: none; }
.ub__preview img {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--radius-md, 10px);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
/* ⚠️ 그림이 아닌 파일(PDF 등)이면 <img> 가 깨진 아이콘으로 남는다. 그때는 숨긴다 */
.ub__preview img[src=""],
.ub__preview img:not([src]) { display: none; }

.ub__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary, #999);
}
.ub__clear {
    border: 0;
    background: none;
    padding: 0;
    color: var(--tarot-lavender, #7C6AE8);
    font-size: var(--text-xs);
    cursor: pointer;
    text-decoration: underline;
}

/*
    ── 화면마다 따로 만들던 드롭존을 여기로 모은다 ────────────────────

    같은 상자를 네 가지 이름으로 만들고 있었다:
      `.pf-drop`(관상·손금·반려동물 관상) · `.fm-drop`(관상 궁합) ·
      `.fd-drop`(피드 관상) · `.pn-drop`(반려동물 작명)
    값도 거의 같았다 — 여백만 조금씩 달랐다.

    ⚠️ **이름은 안 바꾼다.** 각 화면의 스크립트가 그 이름으로 상자를 찾고,
       10MB 검사·동의 연동 같은 제 일을 하고 있다. 이름을 바꾸면 그 스크립트가
       조용히 멈춘다 — 돈 받는 화면들이다.
       그래서 **모양만** 여기로 모으고 동작은 화면에 둔다.

    ⚠️ `display: flex` 로 둔다. `label` 은 기본이 inline 이라 안에 블록을 넣으면
       점선 테두리가 **줄마다 조각나서** 왼쪽으로 삐져나온다(피드 화면에서 겪음).
*/
.pf-drop,
.fm-drop,
.fd-drop,
.pn-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;

    min-height: 150px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg, 14px);
    padding: var(--space-5) var(--space-4);
    background: var(--color-surface);

    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.pf-drop:hover, .pf-drop.is-over,
.fm-drop:hover, .fm-drop.is-over,
.fd-drop:hover, .fd-drop.is-over,
.pn-drop:hover, .pn-drop.is-over {
    border-color: var(--tarot-lavender, #7C6AE8);
    background: var(--color-primary-light, rgba(124,106,232,.06));
}

.pf-drop input[type="file"],
.fm-drop input[type="file"],
.fd-drop input[type="file"],
.pn-drop input[type="file"] { display: none; }

/* 안쪽 글 — 이름이 화면마다 달라 다 적는다 */
.pf-drop__icon, .fm-drop__icon, .pn-drop__icon, .fd-drop__ico {
    color: var(--color-text-tertiary, #999);
}
.pf-drop__lead, .pn-drop__lead, .fd-drop__main {
    font-weight: var(--font-semibold, 600);
    font-size: var(--text-sm);
}
.pf-drop__note, .fm-drop__note, .pn-drop__note, .fd-drop__sub {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary, #999);
    line-height: 1.5;
}