*{box-sizing:border-box}
:root{font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:#fff;background:#15111e}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#49336c 0,#21182f 42%,#120f18 100%)}
button,input{font:inherit}
.container{width:min(980px,100%);margin:auto;padding:28px 18px 60px}
.hero{text-align:center;padding:36px 12px}
.hero h1{font-size:clamp(38px,8vw,66px);margin:12px 0 8px}
.hero p{color:#ddd1ef;font-size:18px}
.badge{display:inline-block;padding:9px 14px;border-radius:999px;background:#ffcf70;color:#2a1e14;font-weight:800}
.card{margin:18px 0;padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:rgba(255,255,255,.08);box-shadow:0 16px 45px rgba(0,0,0,.24);backdrop-filter:blur(12px)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.upload-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px;border:2px dashed rgba(255,255,255,.25);border-radius:18px;cursor:pointer;text-align:center}
.upload-box input{max-width:100%}
.upload-box span{color:#cfc4df;font-size:14px}
.photo-preview{width:min(100%,360px);max-height:420px;object-fit:contain;margin-top:10px;border-radius:16px;background:rgba(0,0,0,.2);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.photo-file-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffdc91!important}
.question{margin:16px 0;padding:18px;border-radius:16px;background:rgba(255,255,255,.055)}
.question-title{margin-bottom:12px;font-weight:800;line-height:1.5}
.option{display:block;padding:9px 4px;line-height:1.45;cursor:pointer}
.button{border:0;border-radius:13px;padding:12px 18px;font-weight:800;cursor:pointer}
.primary{background:#ffc65c;color:#23170d}
.secondary{background:#7566ff;color:white}
.full{width:100%;margin-top:12px;padding:16px}
.hidden{display:none!important}
.loading{text-align:center;font-weight:800}
.result-card{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:24px}
.result-card img{width:100%;border-radius:18px;background:white}
.result-card h3{font-size:28px;margin-top:0}
.ratios,.keywords,.actions{display:flex;gap:10px;flex-wrap:wrap}
.ratios span,.keywords span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.1)}
.keywords span{border:1px solid rgba(255,207,112,.4)}
.story{line-height:1.85;color:#f3edf9}
.invite{padding:13px;border-radius:12px;background:rgba(255,198,92,.12)}
.actions{margin-top:18px}
.friend-form{display:flex;gap:10px}
.friend-form input{flex:1;min-width:0;border:0;border-radius:12px;padding:13px}
.friend-result{margin-top:16px;line-height:1.7}
footer{text-align:center;color:#a99db8;padding:20px}
@media(max-width:720px){
  .result-card{grid-template-columns:1fr}
  .section-head,.friend-form{align-items:stretch;flex-direction:column}
  .button{width:100%}
}