@charset "UTF-8";.mypage-page{display:flex;flex-direction:column;width:100%;min-height:100vh;background:#fff;padding-bottom:80px}.mypage-page .profile-header{padding:20px 20px 0;background:#fff;width:100%}.mypage-page .profile-header .profile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mypage-page .profile-header .profile-top .avatar-area .avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:1px solid #eee}.mypage-page .profile-header .profile-top .avatar-area .avatar.placeholder{background:#f0f0f0;display:flex;align-items:center;justify-content:center;color:#ccc}.mypage-page .profile-header .profile-top .avatar-area .avatar.placeholder span{font-size:40px}.mypage-page .profile-header .profile-top .stats-area{flex:1;display:flex;justify-content:space-around;margin-left:20px}.mypage-page .profile-header .profile-top .stats-area .stat-item{display:flex;flex-direction:column;align-items:center}.mypage-page .profile-header .profile-top .stats-area .stat-item .num{font-size:18px;font-weight:700;color:#111}.mypage-page .profile-header .profile-top .stats-area .stat-item .label{font-size:11px;color:#666}.mypage-page .profile-header .profile-info{margin-bottom:16px}.mypage-page .profile-header .profile-info .username{font-size:16px;font-weight:700;margin-bottom:4px;text-align:left}.mypage-page .profile-header .profile-info .bio{font-size:13px;color:#111;line-height:1.5;white-space:pre-wrap}.mypage-page .profile-header .profile-actions{display:flex;gap:8px;margin-bottom:10px}.mypage-page .profile-header .profile-actions .action-btn{display:flex;align-items:center;justify-content:center;height:36px;border-radius:8px;background:#f0f0f0;color:#111;font-size:13px;font-weight:600;text-decoration:none;transition:opacity .2s}.mypage-page .profile-header .profile-actions .action-btn.primary{flex:1}.mypage-page .profile-header .profile-actions .action-btn.icon-only{width:36px;padding:0}.mypage-page .profile-header .profile-actions .action-btn:active{opacity:.6}.mypage-page .content-area{flex:1;width:100%}.mypage-page .content-area .tabs-sticky{position:sticky;top:0;z-index:10;background:#fffffff2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;border-bottom:1px solid #eee;border-top:1px solid #eee}.mypage-page .content-area .tabs-sticky .tab-btn{flex:1;height:48px;border:none;background:none;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#666;cursor:pointer;position:relative}.mypage-page .content-area .tabs-sticky .tab-btn span{font-weight:600}.mypage-page .content-area .tabs-sticky .tab-btn .material-symbols-outlined{font-size:20px}.mypage-page .content-area .tabs-sticky .tab-btn.active{color:#111}.mypage-page .content-area .tabs-sticky .tab-btn.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:#111}.mypage-page .content-area .grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding-bottom:20px}.mypage-page .content-area .grid-container .grid-item{position:relative;width:100%;aspect-ratio:1;background:#f4f4f4;border:none;padding:0;cursor:pointer;overflow:hidden}.mypage-page .content-area .grid-container .grid-item .img-wrapper{width:100%;height:100%;position:relative}.mypage-page .content-area .grid-container .grid-item .img-wrapper img{width:100%;height:100%;object-fit:cover}.mypage-page .content-area .grid-container .grid-item .img-wrapper .type-badge{position:absolute;top:4px;right:4px;background:#0009;color:#fff;font-size:10px;padding:2px 6px;border-radius:4px}.mypage-page .content-area .grid-container .grid-item .stat-overlay{position:absolute;bottom:4px;left:4px;display:flex;align-items:center;gap:2px;color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}.mypage-page .content-area .grid-container .grid-item .stat-overlay .icon{font-size:16px}.mypage-page .loading-state,.mypage-page .empty-state{padding:60px 20px;text-align:center;color:#666;font-size:14px}.mypage-page .loading-state .empty-icon,.mypage-page .empty-state .empty-icon{font-size:40px;margin-bottom:10px}.mypage-page .sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:2000;display:flex;align-items:flex-end}.mypage-page .sheet-backdrop .bottom-sheet{width:100%;background:#fff;border-radius:20px 20px 0 0;padding:10px 20px 40px;box-shadow:0 -4px 20px #0000001a;display:flex;flex-direction:column;gap:16px}.mypage-page .sheet-backdrop .bottom-sheet .sheet-handle{width:40px;height:4px;background:#ddd;border-radius:2px;margin:0 auto 8px}.mypage-page .sheet-backdrop .bottom-sheet .sheet-header{text-align:center;border-bottom:1px solid #eee;padding-bottom:12px}.mypage-page .sheet-backdrop .bottom-sheet .sheet-header .sheet-title{font-weight:700;font-size:15px;color:#111}.mypage-page .sheet-backdrop .bottom-sheet .sheet-actions{display:flex;flex-direction:column;gap:8px}.mypage-page .sheet-backdrop .bottom-sheet .sheet-actions .sheet-btn{width:100%;padding:14px;display:flex;align-items:center;gap:12px;background:#f9f9f9;border:none;border-radius:12px;font-size:15px;color:#111;font-weight:600;cursor:pointer}.mypage-page .sheet-backdrop .bottom-sheet .sheet-actions .sheet-btn:active{background:#eee}.mypage-page .sheet-backdrop .bottom-sheet .sheet-actions .sheet-btn .material-symbols-outlined{color:#555}.mypage-page .sheet-backdrop .bottom-sheet .sheet-cancel{width:100%;padding:14px;background:#fff;border:1px solid #ddd;border-radius:12px;font-weight:700;font-size:14px;margin-top:8px}
