/* ═══ module-order-form.css ═══ */
/* 상패 주문신청서 모듈 기본 스타일 */
/* 서버 위치: public/css/module-order-form.css */

.order-form { margin:20px 0; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; }

/* 토글 */
.order-form-toggle { padding:14px 16px; background:#f9f9f9; display:flex; align-items:center; gap:12px; border-bottom:1px solid #e0e0e0; }
.order-form-toggle-label { font-size:14px; font-weight:600; color:#333; }
.order-form-toggle-btns { display:flex; gap:8px; }
.order-form-toggle-btns label { display:flex; align-items:center; gap:4px; cursor:pointer; font-size:13px; color:#888; padding:5px 14px; border:1px solid #e0e0e0; border-radius:20px; transition:all .2s; }
.order-form-toggle-btns input[type="radio"] { display:none; }
.order-form-toggle-btns label:has(input:checked) { border-color:#8b5cf6; background:rgba(139,92,246,0.05); color:#8b5cf6; }

/* 본문 */
.order-form-body { padding:16px; display:none; }
.order-form-body.show { display:block; }
.order-form-contact { padding:20px 16px; display:none; text-align:center; color:#888; font-size:14px; line-height:1.8; }
.order-form-contact.show { display:block; }

/* 행/라벨 */
.of-row { margin-bottom:14px; }
.of-label { font-size:13px; font-weight:600; color:#333; margin-bottom:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.of-input { width:100%; padding:9px 12px; border:1px solid #e0e0e0; border-radius:6px; font-size:13px; outline:none; transition:border-color .2s; box-sizing:border-box; }
.of-input:focus { border-color:#8b5cf6; }
.of-textarea { width:100%; padding:9px 12px; border:1px solid #e0e0e0; border-radius:6px; font-size:13px; outline:none; resize:vertical; min-height:80px; transition:border-color .2s; box-sizing:border-box; }
.of-textarea:focus { border-color:#8b5cf6; }

.of-row-inline { display:flex; gap:12px; margin-bottom:14px; }
.of-row-inline .of-row { flex:1; margin-bottom:0; }

/* 파일 업로드 */
.of-file-area { border:2px dashed #e0e0e0; border-radius:8px; padding:16px; text-align:center; cursor:pointer; transition:all .2s; position:relative; }
.of-file-area:hover { border-color:#8b5cf6; background:rgba(139,92,246,0.02); }
.of-file-area input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.of-file-hint { font-size:12px; color:#888; margin-top:4px; }
.of-file-list { margin-top:8px; }
.of-file-item { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:#f9f9f9; border-radius:4px; margin-top:4px; font-size:12px; }
.of-file-item .name { color:#333; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.of-file-item .remove { color:#e74c3c; cursor:pointer; font-size:14px; padding:0 4px; }

/* 날짜 */
.of-date-wrap { display:flex; align-items:center; gap:10px; }
.of-date-wrap input[type="date"] { padding:8px 12px; border:1px solid #e0e0e0; border-radius:6px; font-size:13px; }
.of-check-label { display:flex; align-items:center; gap:5px; font-size:12px; color:#888; cursor:pointer; }

/* 직인 */
.of-seal-option { display:flex; align-items:center; gap:8px; padding:8px 0; }
.of-seal-option label { display:flex; align-items:center; gap:4px; font-size:13px; color:#333; cursor:pointer; }
.of-seal-recommend { font-size:11px; color:#8b5cf6; font-weight:600; }

/* 문구 버튼 */
.of-phrase-btns { display:flex; gap:6px; flex-wrap:wrap; }
.of-phrase-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1px solid #8b5cf6; border-radius:4px; background:transparent; color:#8b5cf6; font-size:12px; cursor:pointer; transition:all .2s; }
.of-phrase-btn:hover { background:#8b5cf6; color:#fff; }
.of-phrase-btn.paste { border-color:#f59e0b; color:#f59e0b; }
.of-phrase-btn.paste:hover { background:#f59e0b; color:#fff; }

/* 카카오톡 클릭 버튼 */
.of-kakao-click-btn {
    display:inline-block; padding:4px 18px; margin-left:6px;
    background:linear-gradient(135deg,#5b9bd5,#7bacd8); color:#fff;
    border-radius:20px; font-size:13px; font-weight:700;
    text-decoration:none; letter-spacing:1px;
    box-shadow:1px 2px 6px rgba(91,155,213,.35);
    transition:all .2s; vertical-align:middle;
}
.of-kakao-click-btn:hover { background:linear-gradient(135deg,#4a8cc7,#6a9cca); color:#fff; transform:translateY(-1px); box-shadow:1px 3px 8px rgba(91,155,213,.5); }

/* 토스트 */
.of-paste-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:#10b981; color:#fff; padding:8px 20px; border-radius:20px; font-size:13px; z-index:99999; display:none; box-shadow:0 4px 12px rgba(0,0,0,.2); }

/* 반응형 */
@media(max-width:768px) {
    .of-row-inline { flex-direction:column; gap:0; }
    .order-form-toggle { flex-direction:column; align-items:flex-start; gap:8px; }
    .of-phrase-btns { flex-direction:column; gap:4px; }
    .of-phrase-btn { font-size:11px; padding:5px 8px; }
    .of-input, .of-textarea { font-size:16px; } /* iOS 자동 확대 방지 */
    .of-date-wrap { flex-direction:column; align-items:flex-start; gap:6px; }
    .of-date-wrap input[type="date"] { width:100%; }
    .of-file-area { padding:12px; }
    .of-label { font-size:12px; }
}