html,body{margin:0;padding:0;height:100%}.app-wrapper{min-height:100vh;background:#ffe4ec;display:flex;justify-content:center;align-items:center;padding:1.5rem;font-family:Pretendard,sans-serif}.contact-app{background:#fff;border-radius:24px;width:100%;max-width:420px;height:700px;box-shadow:0 4px 15px #0000001a;position:relative;overflow:hidden}.app-header{background-color:#ffbbd7;background-image:radial-gradient(#fff 1.5px,transparent 1.5px),radial-gradient(#fff 1.5px,transparent 1.5px);background-position:0 0,10px 10px;background-size:20px 20px;text-align:center;padding:1.5rem;border-bottom:1px solid #ffbcd4;flex-shrink:0}.app-header h1{font-size:1.6rem;font-weight:700;color:#fff;margin:0;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000}.search-box{padding:1rem;flex-shrink:0}.search-box input{width:90%;padding:.8rem 1rem;border-radius:30px;border:1px solid #ddd;background:#fafafa;outline:none;transition:border .2s ease}.search-box input:focus{border-color:#f9b}.add-btn{position:absolute;bottom:20px;right:20px;display:block;background:#ff66a1;color:#fff;font-size:1.8rem;border:none;border-radius:50%;width:56px;height:56px;box-shadow:0 4px 10px #0003;cursor:pointer;transition:all .2s ease}.add-btn:hover,.add-btn:active{transform:scale(1.1);background:#ff4080}.contact-list{flex:1;padding:1rem;max-height:70vh;overflow-y:auto}.empty-message{text-align:center;padding:4rem 1rem;color:#777}.empty-message .empty-icon{font-size:3rem;margin-bottom:1rem}.empty-message .sub{font-size:.9rem;color:#aaa}.contact-item{display:flex;align-items:center;background:#fff;border-radius:16px;padding:.75rem 1rem;margin-bottom:.6rem;box-shadow:0 1px 3px #00000014;transition:all .2s ease;cursor:pointer}.contact-item:hover{background:#f8f8f8;box-shadow:0 2px 6px #0000001a}.contact-avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0;border:1px solid #ff99bb}.contact-info{flex-grow:1;margin-left:1rem}.contact-info h3{margin:0;font-size:1rem;font-weight:700;color:#333}.contact-info p{margin:.2rem 0 0;font-size:.9rem;color:#777}.edit-icon{color:#ccc;transition:color .2s ease}.contact-item:hover .edit-icon,.contact-item:active .edit-icon{color:#ff66a1}.modal-overlay{position:fixed;inset:0;background:#0000004d;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.contact-form{background:#fff;border-radius:20px;width:90%;max-width:380px;overflow:hidden;box-shadow:0 4px 20px #00000026;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.form-header{background:#ffd6e7;padding:1rem;display:flex;justify-content:space-between;align-items:center}.form-header h2{margin:0;color:#333;font-weight:700}.close-btn{border:none;background:transparent;cursor:pointer;color:#555}.form-body{padding:1.5rem}.avatar-preview{display:flex;justify-content:center;margin-bottom:1rem}.selected-avatar{width:96px;height:96px;border-radius:50%;border:4px solid #ffb6c1}.icon-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:1.2rem}.icon-option{width:48px;height:48px;border-radius:50%;cursor:pointer;border:1px solid gray;transition:all .2s ease}.icon-option:hover{border-color:#f9b;transform:scale(1.05)}.icon-option:hover{transform:scale(1.05)}.icon-option.active{border:3px solid #ff66a1;transform:scale(1.1)}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.9rem;color:#555;margin-bottom:.3rem}.form-group input{width:90%;padding:.6rem 1rem;border-radius:30px;border:1px solid #ccc;outline:none;transition:border .2s ease}.form-group input:focus{border-color:#f9b}.form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:2rem}.delete-btn{background:#eee;border:none;border-radius:50%;padding:.6rem;cursor:pointer;transition:background .2s ease}.delete-btn:hover{background:#ffd7d7}.delete-btn.disabled{opacity:.4;cursor:not-allowed}.save-btn{flex-grow:1;margin-left:.5rem;background:#ff66a1;color:#fff;font-weight:700;border:none;padding:.6rem;border-radius:30px;cursor:pointer;transition:background .2s ease}.save-btn:hover{background:#ff4080}.error-message{color:#ff4d6d;background:#ffe4e9;border-radius:8px;padding:.6rem 1rem;margin:0 0 1rem;font-size:.9rem;text-align:center}.input-error{border:2px solid #ff4d6d!important;background:#fff5f7}