*{margin:0;padding:0;box-sizing:border-box}input,textarea,button,select{font:inherit}ul,ol{list-style:none}a{text-decoration:none;color:inherit}button{border:none;background:none;font:inherit;cursor:pointer}img{display:block;max-width:100%}input{border:none;outline:none}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2) format("woff2");font-weight:100;font-display:swap}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2) format("woff2");font-weight:200;font-display:swap}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2) format("woff2");font-weight:300;font-display:swap}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}@font-face{font-family:Pretendard;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2) format("woff2");font-weight:900;font-display:swap}:root{--color-bg-outside: rgb(58, 58, 58);--color-bg-app: #f2f2ee;--color-text-primary: #3f5f73;--color-text-secondary: #b7aea6;--color-primary: #3f5f73;--color-pantone-primary: #6969ad;--layout-x: 25px}body{background:var(--color-bg-outside);font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans KR,Apple SD Gothic Neo,Malgun Gothic,sans-serif;font-size:12px;font-weight:400;color:var(--color-text-primary)}.app{--app-header-height: 84px;--app-tabs-height: 0px;--app-bottom-fixed-height: 75px;--app-main-top-gap: 12px;--app-main-bottom-gap: 12px;--app-main-top: calc(var(--app-header-height) + var(--app-tabs-height) + var(--app-main-top-gap));--app-main-bottom: calc(var(--app-bottom-fixed-height) + var(--app-main-bottom-gap));max-width:402px;width:100%;min-height:100vh;margin:0 auto;background:var(--color-bg-app);display:flex;flex-direction:column}.app.layout-auth{--app-header-height: 0px;--app-bottom-fixed-height: 0px;--app-main-top-gap: 0px;--app-main-bottom-gap: 0px}.app.has-tabs{--app-tabs-height: 34px}.app.has-mini{--app-bottom-fixed-height: 160px}.app main{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding-left:var(--layout-x);padding-right:var(--layout-x);padding-top:var(--app-main-top);padding-bottom:var(--app-main-bottom)}.header,.tabs,.bottom-nav{position:fixed;left:50%;transform:translate(-50%);width:100%;max-width:402px;z-index:1000}.header{top:0;padding:25px var(--layout-x);display:grid;align-items:center;column-gap:12px;background:var(--color-bg-app)}.header--logo{grid-template-columns:auto 1fr 34px}.header--back{grid-template-columns:34px 1fr 34px}.header__left-btn,.header__right-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center}.header__left-btn--logo{width:auto;height:34px}.header__left-btn--logo img{width:34px;height:34px}.header__left-btn--back{justify-content:flex-start}.header__left-btn--back img{width:20px;height:20px}.header__title{font-size:18px;font-weight:700;line-height:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header__title-spacer{width:100%;height:1px}.header .avatar{width:34px;height:34px;background-color:var(--color-pantone-primary);border-radius:999px}.tabs{top:84px;display:flex;justify-content:space-between;align-items:center;padding:0px var(--layout-x) 10px;font-size:16px;font-weight:700;color:var(--color-text-secondary);background:var(--color-bg-app);z-index:999}.tabs .tab{border-bottom:2px solid transparent;padding:2px 0}.tabs .tab.is-active,.tabs .tab.router-link-active{color:var(--color-text-primary);border-bottom:2px solid var(--color-text-primary)}.bottom-nav{bottom:0;width:100%;display:flex;padding:25px var(--layout-x);justify-content:space-between;background:#fff;z-index:1002}.bottom-nav .nav-item img{display:none;width:25px;height:25px}.bottom-nav .nav-item img:first-child{display:block}.bottom-nav .nav-item.is-active img:first-child{display:none}.bottom-nav .nav-item.is-active img:last-child{display:block}.form-input-box{width:100%;height:50px;display:flex;align-items:center;gap:10px;background-color:#fff;color:var(--color-text-primary);border-radius:15px;padding:0 20px;box-shadow:0 0 1px #00000040}.form-input-box input{flex:1;min-width:0;color:var(--color-text-primary)}.form-submit-box{width:100%;padding:20px;display:flex;justify-content:center;align-items:center;background-color:var(--color-primary);color:#fff;border-radius:15px;font-size:16px;font-weight:700;box-shadow:0 0 1px #00000040}:root{--modal-color-primary: #3f5f73}.popup-test-area{display:flex;flex-direction:column;gap:10px;width:100%}.test-btn{width:100%;background:#fff;color:var(--modal-color-primary);border:1px solid rgba(63,95,115,.15);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;box-shadow:0 0 2px #00000026;transition:opacity .2s}.test-btn:active{opacity:.8}.modal-overlay{position:fixed;inset:0;width:100%;height:100%;padding:20px;background:#000000a6;display:none;justify-content:center;align-items:center;box-sizing:border-box;z-index:9999}.modal-overlay.active{display:flex}.modal-container{background-color:#f2f2ee;width:85%;max-width:320px;padding:25px 20px;border-radius:25px;text-align:center;box-shadow:0 10px 30px #00000026;box-sizing:border-box}.modal-header{font-size:1.2rem;font-weight:800;color:var(--modal-color-primary);margin-bottom:15px}.modal-content-card{background:#fff;border-radius:17px 17px 0 0;padding:25px 15px;margin-bottom:20px;box-shadow:0 0 2px #00000040}.modal-content-card p{font-size:16px;line-height:1.5;font-weight:600}.modal-content-card p .highlight{color:var(--modal-color-primary);text-decoration:underline;font-weight:700}.modal-body-text{font-size:1rem;line-height:1.5;color:#333;margin:0}.highlight{color:var(--modal-color-primary);text-decoration:underline;font-weight:700}.profile-main-circle{width:110px;height:110px;background-color:#b7aea6;border-radius:50%;margin:0 auto 15px;display:flex;justify-content:center;align-items:center;color:#fff;font-size:3.5rem;font-weight:300;border:4px solid #fff;box-shadow:0 4px 10px #0000001a}.helper-text{font-size:.85rem;color:var(--modal-color-primary);font-weight:600;margin-bottom:10px}.color-picker-container{display:flex;justify-content:center;gap:10px;padding:5px 0}.color-circle{width:38px;height:38px;border-radius:50%;cursor:pointer;transition:transform .2s,border .2s;border:2px solid transparent;padding:0;appearance:none}.color-circle.selected{border-color:var(--modal-color-primary);transform:scale(1.1)}.color-pink{background-color:#ffb3ba}.color-purple{background-color:#bae1ff}.color-blue{background-color:#b2e2f2}.color-orange{background-color:#ffdfba}.color-green{background-color:#d4f1e9}.modal-confirm-btn{background-color:var(--modal-color-primary);color:#fff;border:none;padding:7px 30px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s}.modal-confirm-btn:active{opacity:.8}.test-btn:focus-visible,.modal-confirm-btn:focus-visible,.color-circle:focus-visible{outline:2px solid var(--modal-color-primary);outline-offset:2px}