:root{--f-ink:#3d2740;--f-muted:#876f7f;--f-accent:#e5476e;--f-bg:#fff8f8;--f-line:#f3e3e8}*{box-sizing:border-box}body.friend-page{margin:0;background:radial-gradient(ellipse at 14% 0%,#ffe8ed 0%,transparent 38%),radial-gradient(ellipse at 92% 88%,#f0e7ff 0%,transparent 40%),var(--f-bg);color:var(--f-ink);font:15px/1.62 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;word-break:keep-all}button,input,a{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #f69aaa;outline-offset:3px}.friend-frame{max-width:670px;padding:18px 18px 54px;margin:auto}.friend-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 2px 21px}.friend-top a{text-decoration:none;color:#a34662;font-weight:900}.friend-top .backsite{font-size:12px;color:#b38b9b}.friend-sheet{background:#fff;border:1px solid #fff;border-radius:30px;padding:34px;box-shadow:0 20px 60px #9c405016;min-height:450px}.f-kicker{display:inline-flex;background:#fff0f4;color:#bf4b6c;font-size:11px;font-weight:900;letter-spacing:.8px;padding:8px 13px;border-radius:40px}.f-intro-art{text-align:center;padding:28px 0 9px;font-size:105px;filter:drop-shadow(0 12px 17px #d6839c47)}.f-title{font-size:clamp(30px,7vw,43px);line-height:1.25;letter-spacing:-1.4px;margin:14px 0 12px;font-weight:950}.f-title span{color:#dd456e}.f-lead{font-size:15px;color:#806d7e;line-height:1.85}.f-pills{display:flex;gap:8px;flex-wrap:wrap;margin:23px 0}.f-pills span{border-radius:12px;background:#fff1f4;padding:7px 11px;font-size:12px;font-weight:800;color:#b66882}.f-btn{border:0;border-radius:15px;background:#e4486f;color:white;padding:15px 20px;font-size:15px;font-weight:900;cursor:pointer;text-decoration:none;text-align:center;display:inline-block;transition:transform .12s,background .12s}.f-btn:hover{background:#c92f59;transform:translateY(-1px)}.f-btn:disabled{background:#e4b3bf;cursor:not-allowed}.f-btn.light{background:#fff1f4;color:#a44a67}.f-btn.line{border:1px solid #ead5df;background:white;color:#ac496a}.f-btn.wide{width:100%}.f-note{color:#a18e99;font-size:12px;line-height:1.7;margin-top:17px}.f-progress-row{display:flex;justify-content:space-between;align-items:center;color:#bd6b86;font-weight:900;font-size:12px}.f-progress{background:#ffe9f0;border-radius:12px;height:8px;overflow:hidden;margin:9px 0 35px}.f-progress span{display:block;background:linear-gradient(90deg,#ff9cad,#dc426d);height:100%;border-radius:12px;transition:width .2s}.f-qicon{font-size:38px}.f-question{font-size:clamp(20px,5vw,25px);line-height:1.5;margin:13px 0 8px;letter-spacing:-.5px}.f-choices{display:grid;gap:10px;margin-top:25px}.f-choice{display:flex;gap:13px;align-items:center;border:1.5px solid #f2e2e8;border-radius:15px;padding:15px 13px;width:100%;min-height:72px;background:#fff;color:#5e4c5f;font-size:14px;font-weight:700;line-height:1.5;text-align:left;cursor:pointer}.f-choice:hover{background:#fff8fa}.f-choice.sel{border-color:#e5577d;background:#fff0f4;color:#9e3156}.f-letter{display:grid;place-items:center;flex:0 0 29px;height:29px;border-radius:9px;background:#f7edf1;color:#a78c99;font-size:12px;font-weight:900}.f-choice.sel .f-letter{background:#e6557a;color:white}.f-buttons{display:grid;grid-template-columns:100px 1fr;gap:10px;margin-top:25px}.f-buttons.first{grid-template-columns:1fr}.f-result-hero{background:linear-gradient(150deg,#5e264d 0%,#8f285a 57%,#d54f78 100%);color:#fff;border-radius:24px;padding:30px 23px;text-align:center;position:relative;overflow:hidden}.f-result-hero:before{content:'!';font-weight:900;font-size:240px;position:absolute;right:-20px;top:-105px;color:#ffffff12}.f-result-hero>*{position:relative}.f-result-hero .emoji{font-size:72px;margin:7px 0}.f-result-hero h1{font-size:clamp(25px,7vw,32px);margin:8px 0 13px;line-height:1.32}.f-result-hero .quote{font-size:15px;color:#ffe0e9;line-height:1.7;font-weight:700}.f-result-details h3{font-size:17px;margin:25px 0 9px}.f-result-details p{color:#776573;font-size:14px;line-height:1.8;margin:0}.f-speech{background:#fff2f5;border-left:4px solid #e66387;padding:17px 19px;border-radius:12px;color:#834d66;font-size:14px;margin-top:17px}.f-section{padding:22px 0 0}.f-section h2{font-size:21px;letter-spacing:-.5px;margin:0 0 12px}.f-divider{height:1px;background:#f3e2e9;margin:20px 0}.f-input{width:100%;padding:13px 15px;border-radius:13px;border:1px solid #e9d7df;font-size:16px;background:white;color:#573649}.f-form{display:grid;gap:11px;margin-top:18px}.f-label{font-size:12px;color:#97687b;font-weight:900}.f-error{color:#bb375c;font-size:13px;margin-top:10px}.f-success{background:#eafaf2;color:#258359;padding:11px;border-radius:12px;font-size:13px}.f-layout-actions{display:grid;gap:9px;margin-top:24px}.f-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0}.f-key{display:flex;gap:6px;align-items:center;font-size:11px;color:#846d79;font-weight:800}.f-key i{display:inline-block;width:18px;height:4px;border-radius:5px;flex:none}.f-ngraph{width:100%;display:block;overflow:visible;background:radial-gradient(circle at 50% 50%,#fff1f4,transparent 60%);border-radius:22px;margin-top:12px}.f-pair{stroke-width:3.2;stroke-linecap:round;opacity:.78;cursor:pointer;transition:opacity .1s,stroke-width .1s}.f-pair:hover,.f-pair.selected{stroke-width:6;opacity:1}.f-person{cursor:pointer}.f-person text{font-size:12px;font-weight:900;fill:#702f51;pointer-events:none}.f-person circle{fill:#fff;stroke:#eaa9bf;stroke-width:2.7}.f-person.active circle{stroke:#d93c68;stroke-width:4}.f-pair-card{background:#fff5f8;border:1px solid #f4dbe4;border-radius:18px;padding:17px 18px;margin:15px 0}.f-pair-card strong{display:block;font-size:15px}.f-pair-card p{color:#8e6b7e;margin:6px 0 0;font-size:13px;line-height:1.7}.f-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.f-metric{background:#fff6f8;border-radius:16px;padding:16px}.f-metric strong{font-size:20px}.f-metric small{display:block;color:#a27c8c;font-size:12px}.f-ranking{display:grid;gap:10px}.f-rank{border:1px solid #f2e3e9;border-radius:13px;padding:13px;display:flex;align-items:center;gap:10px}.f-rank .rank-emoji{font-size:24px}.f-rank .rank-text{flex:1;font-size:13px}.f-rank .rank-text b{display:block;font-size:14px}.f-rank .rank-score{font-size:17px;font-weight:950}.f-lobby-head{display:flex;justify-content:space-between;align-items:start;gap:10px}.f-lobby-head h1{font-size:25px;margin:0}.f-muted{color:#988394;font-size:12px}.f-pop{background:#fff1f4;border-radius:13px;padding:14px;margin:14px 0;color:#93526b;font-size:13px}.f-count{display:inline-block;background:#ffecf1;color:#be4e6f;border-radius:100px;padding:5px 11px;font-weight:850;font-size:12px}.f-people{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}.f-person-chip{background:#fff5f8;border:1px solid #efdee4;border-radius:100px;padding:7px 12px;font-size:12px;color:#85536a}.f-demo-tag{background:#f8eaff;color:#7656a3;border-radius:100px;padding:4px 10px;font-size:11px;font-weight:850}.f-footer{font-size:11px;text-align:center;color:#b7a1ac;margin:22px 0}@media(max-width:570px){.friend-sheet{padding:24px 19px;border-radius:24px}.friend-frame{padding:12px 13px 30px}.f-legend{grid-template-columns:repeat(2,1fr)}.f-pair-card{padding:13px}.f-rank{padding:10px}.f-metric-grid{grid-template-columns:1fr 1fr}.f-person text{font-size:10px}}