.recommend-app { width:min(100%,520px); min-height:100vh; margin:0 auto; padding:calc(env(safe-area-inset-top) + 10px) 20px calc(32px + env(safe-area-inset-bottom)); background:linear-gradient(155deg,#fff 0%,#fff8fa 52%,#f4f6fb 100%); color:var(--ink,#182b46); }
.recommend-form { display:grid; gap:14px; }
.recommend-intro { display:grid; place-items:center; container-type:inline-size; aspect-ratio:486 / 78; margin-bottom:15px; background:url("banner-top01.jpg?v=20261023-2") center / 100% 100% no-repeat; }
.recommend-intro .recommend-banner-title { margin:0 0 0 3%; color:#fff; font-size:clamp(12px,4vw,21px); font-size:4.4cqw; line-height:1.25; text-align:center; white-space:nowrap; }
.recommend-card { padding:19px 17px; border:1px solid #f0e4e8; border-radius:15px; background:#fff; box-shadow:0 5px 18px #243c5908; }
.form-section-heading p { margin:4px 0 0; color:#8491a2; font-size:12px; line-height:1.5; }
.recommend-field { display:block; margin-top:16px; }
.recommend-field > span,.recommend-label { display:block; margin-bottom:8px; color:#263a57; font-size:14px; font-weight:800; }
.recommend-field i { color:#d83d70; font-style:normal; }
.recommend-field input:not([type="file"]),.recommend-field textarea { width:100%; border:1.5px solid #e89ab1; border-radius:10px; background:#fff; color:#1d304a; font:inherit; font-size:15px; outline:none; }
.recommend-field input:not([type="file"]) { height:49px; padding:0 13px; }
.recommend-field textarea { min-height:112px; resize:vertical; padding:12px 13px; line-height:1.6; }
.recommend-field input::placeholder,.recommend-field textarea::placeholder { color:#8994a3; opacity:1; }
.recommend-field input:focus,.recommend-field textarea:focus { border-color:#d83d70; }
.recommend-upload { min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 12px; border:1px dashed #e89ab1; border-radius:12px; background:#fff9fb; text-align:center; cursor:pointer; }
.recommend-upload:focus-within { outline:2px solid #d83d70; outline-offset:2px; }
.recommend-upload-mark { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#ffe7ef; color:#e72b6a; font-size:23px; line-height:1; }
.recommend-upload strong { color:#273a55; font-size:14px; font-weight:800; }
.recommend-upload small { color:#8793a3; font-size:12px; line-height:1.45; }
.recommend-upload input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.recommend-file-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.recommend-file-item { max-width:100%; overflow:hidden; padding:5px 9px; border-radius:7px; background:#fff0f4; color:#9c3d5b; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
/* As many photos per row as the width fits (2026-11-13). */ .recommend-photo-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px; margin-top:8px; }
.recommend-photo-list:empty,.recommend-file-list:empty { display:none; }
.recommend-photo-list img { display:block; width:100%; aspect-ratio:1; border:1px solid #f0e4e8; border-radius:8px; object-fit:cover; }
.recommend-photo-list figure { position:relative; margin:0; }
.recommend-photo-remove,.recommend-file-remove { border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.recommend-photo-remove { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; background:#ffffffe6; color:#152b45; font-size:16px; line-height:1; }
.recommend-file-remove { margin-left:6px; padding:0 2px; font-size:15px; line-height:1; }
.recommend-form > .register-button { margin-top:0; }
@media (max-width:370px) { .recommend-app { padding-right:15px; padding-left:15px; } .recommend-card { padding-right:14px; padding-left:14px; } }

/* 원고 정보: 도서 사진 안내와 예시 (2026-11-11). */
.recommend-photo-guide { margin:0 0 12px; color:var(--ink, #152b45); font-size:17px; font-weight:700; line-height:1.5; word-break:keep-all; }
.recommend-photo-examples { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0 0 16px; padding:0; list-style:none; }
.recommend-photo-examples li { display:grid; gap:6px; justify-items:center; color:#68758a; font-size:13px; text-align:center; }
.recommend-photo-examples img, .recommend-photo-sample { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:3 / 4; border:1px solid #f0e4e8; border-radius:8px; object-fit:cover; background:#fffafb; }
.recommend-photo-sample { color:#b8a3ab; font-size:15px; font-weight:700; }
.recommend-field > span small { color:#68758a; font-weight:400; }