/* public_html/css/font.css */
/* 예시: 2번 폰트(Alatsi), 3번 폰트(Bangers)를 400 두께 뒤에 붙일 때 */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400&family=Handlee&family=Prosto+One&family=Zen+Dots&family=Alatsi&family=Momo+Trust+Display&family=Bubblegum+Sans&family=Righteous&family=Oleo+Script+Swash+Caps:wght@400&family=Abril+Fatface&family=Fugaz+One&family=Archivo+Black&family=Russo+One&family=Archivo+Black&family=Racing+Sans+One&family=Alfa+Slab+One&family=Ultra&family=Titan+One&family=Bungee&family=Changa+One&family=Spicy+Rice&family=Ranchers&family=Oswald&family=Anton&family=Oswald+Semibold&family=Squada+One&family=Monoton&family=Wallpoet&family=Black+Ops+One&family=Stardos+Stencil&family=Allerta+Stencil&display=swap');
/* -------------------------------------------------------------
[방 배달] 드롭박스 일련번호와 구글 폰트 매칭
------------------------------------------------------------- */
.f-style-1 { font-family: 'Zilla Slab', sans-serif !important; }
.f-style-2 { font-family: 'Handlee', sans-serif !important; }
.f-style-3 { font-family: 'Prosto One', sans-serif !important; }
.f-style-4 { font-family: 'Zen Dots', sans-serif !important; }
.f-style-5 { font-family: 'Alatsi', sans-serif !important; }
.f-style-6 { font-family: 'Momo Trust Display', sans-serif !important; }
.f-style-7 { font-family: 'Bubblegum Sans', sans-serif !important; }
.f-style-8 { font-family: 'Righteous', sans-serif !important; }
.f-style-9 { font-family: 'Oleo Script Swash Caps', sans-serif !important; }
.f-style-10 { font-family: 'Abril Fatface', sans-serif !important; }
.f-style-11 { font-family: 'Fugaz One', sans-serif !important; }
.f-style-12 { font-family: 'Archivo Black', sans-serif !important; }
.f-style-13 { font-family: 'Russo One', sans-serif !important; }
.f-style-14 { font-family: 'Racing Sans One', sans-serif !important; }
.f-style-15 { font-family: 'Alfa Slab One', sans-serif !important; }
.f-style-16 { font-family: 'Ultra', sans-serif !important; }
.f-style-17 { font-family: 'Titan One', sans-serif !important; }
.f-style-18 { font-family: 'Bungee', sans-serif !important; }
.f-style-19 { font-family: 'Changa One', sans-serif !important; }
.f-style-20 { font-family: 'Spicy Rice', sans-serif !important; }
.f-style-21 { font-family: 'Ranchers', sans-serif !important; }
.f-style-22 { font-family: 'Oswald', sans-serif !important; }
.f-style-23 { font-family: 'Anton', sans-serif !important; }
.f-style-24 { font-family: 'Oswald Semibold', sans-serif !important; }
.f-style-25 { font-family: 'Squada One', sans-serif !important; }
.f-style-26 { font-family: 'Monoton', sans-serif !important; }
.f-style-27 { font-family: 'Wallpoet', sans-serif !important; }
.f-style-28 { font-family: 'Black Ops One', sans-serif !important; }
.f-style-29 { font-family: 'Stardos Stencil', sans-serif !important; }
.f-style-30 { font-family: 'Allerta Stencil', sans-serif !important; }
/* 화면 레이아웃 (일자형 구조) */
.box-container { max-width: 800px; margin: 20px auto; background: #ffffff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.title { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 25px; color: #111; }
.form-item { margin-bottom: 20px; }
.form-item label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 8px; color: #555; }
select, input[type="text"] { width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; background: #fff; box-sizing: border-box; }
/* 📸 파크님이 원하시는 고정 배경 이미지 창 */
.view-panel {
background-image: url('/img/font4_bg.jpg') !important; /* 👈 점을 빼고 다이렉트로 img 폴더 소환 */
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 10px;
/* 🚀 [교정] 앞의 80px를 120px~150px 정도로 키우면 글자가 밑으로 내려옵니다! */
padding: 105px 20px 80px 50px !important; /* 위 오른쪽 아래 왼쪽 순서 */
text-align: center;
margin-top: 15px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
}
/* 💥 반응형 글자 크기 및 글자 그림자 (가독성 확보) */
#preview-text {
display: inline-block;
color: #ffffff !important;
font-size: clamp(50px, 7vw, 80px);
line-height: 1.2;
word-break: break-all;
text-shadow: 2px 2px 10px rgba(0,0,0,0.9), -1px -1px 0 rgba(0,0,0,0.5);
}
.notice { background: #fff7ed; padding: 15px; border-radius: 8px; font-size: 14px; color: #7c2d12; line-height: 1.5; margin-top: 25px; }