:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg-primary: #FAFAFA;--bg-card: #FFFFFF;--accent: #FF6B6B;--accent-light: #FFE8E8;--text-primary: #1A1A1A;--text-secondary: #6B6B6B;--text-muted: #9B9B9B;--border: #EBEBEB;--color-성국: #4A90D9;--color-수현: #E85A71}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;min-height:100dvh;display:flex;justify-content:center}#root{width:100%}.password-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:20px;background:var(--bg-primary);width:100%}.password-screen form{display:flex;flex-direction:column;align-items:center;width:100%;max-width:280px}.password-icon{font-size:5rem;margin-bottom:32px}.password-title{font-size:1.2rem;color:var(--text-secondary);margin-bottom:32px;font-weight:500}.password-input{width:100%;padding:16px 20px;font-size:1.8rem;text-align:center;letter-spacing:.4em;border:2px solid var(--border);border-radius:16px;background:var(--bg-card);color:var(--text-primary);margin-bottom:20px;transition:border-color .2s;-webkit-text-fill-color:var(--text-primary)}.password-input:focus{outline:none;border-color:var(--text-primary)}.password-input.error{border-color:var(--accent);animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.password-submit{width:100%;padding:16px;font-size:1.1rem;font-weight:600;color:#fff;background:var(--text-primary);border:none;border-radius:16px;cursor:pointer;transition:transform .2s,opacity .2s}.password-submit:active{transform:scale(.97)}.password-submit:disabled{opacity:.4;cursor:not-allowed}.password-error{margin-top:16px;color:var(--accent);font-size:.9rem}.splash-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-primary);z-index:9999;opacity:1;transition:opacity .5s ease}.splash-screen.fade-out{opacity:0}.splash-emoji{font-size:4rem;margin-bottom:20px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.splash-text{font-size:1.3rem;font-weight:600;color:var(--text-primary);letter-spacing:.1em}.splash-subtext{margin-top:8px;font-size:.9rem;color:var(--text-muted)}.gallery-container{width:100%;max-width:100%;margin:0 auto;padding-bottom:100px}@media(min-width:768px){.gallery-container{max-width:90vw;max-width:min(1200px,90vw);padding:24px;margin-top:24px;background:var(--bg-card);border-radius:24px;box-shadow:0 4px 20px #00000014;margin-bottom:40px;min-height:calc(100vh - 100px)}}.gallery-header{position:sticky;top:0;background:var(--bg-primary);padding:20px 16px 12px;z-index:100}@media(min-width:768px){.gallery-header{background:var(--bg-card);border-radius:16px 16px 0 0;padding:28px 24px 16px}}.gallery-title{font-size:1.6rem;font-weight:700;margin-bottom:20px;color:var(--text-primary)}@media(min-width:768px){.gallery-title{font-size:2rem;text-align:center;margin-bottom:24px}}.filter-section{margin-bottom:12px}.filter-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}@media(min-width:768px){.filter-row{justify-content:center;gap:12px}}.filter-row::-webkit-scrollbar{display:none}.filter-btn{flex-shrink:0;padding:10px 18px;font-size:.9rem;font-weight:600;color:var(--text-secondary);background:var(--bg-card);border:2px solid var(--border);border-radius:24px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000a}.filter-btn:hover{border-color:var(--text-muted)}.filter-btn.active{color:#fff;background:var(--text-primary);border-color:var(--text-primary);box-shadow:0 2px 8px #00000026}.filter-btn.person-성국.active{background:var(--color-성국);border-color:var(--color-성국);box-shadow:0 2px 8px #4a90d94d}.filter-btn.person-수현.active{background:var(--color-수현);border-color:var(--color-수현);box-shadow:0 2px 8px #e85a714d}.date-section{padding:0 16px;margin-bottom:28px}@media(min-width:768px){.date-section{padding:0 8px}}.date-label{font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:14px;padding-left:4px;display:flex;align-items:center;gap:8px}.date-label:before{content:"";display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}@media(min-width:768px){.media-grid{grid-template-columns:repeat(5,1fr);gap:8px}}@media(min-width:1024px){.media-grid{grid-template-columns:repeat(6,1fr);gap:10px}}.media-card{position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;cursor:pointer;transition:transform .2s ease}.media-card:hover{transform:scale(1.02)}.media-card:active{transform:scale(.98)}.media-card img,.media-card video{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}.media-card:hover img,.media-card:hover video{transform:scale(1.05)}.media-card .video-indicator{position:absolute;top:8px;right:8px;width:24px;height:24px;background:#0009;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem}.media-card .person-badge{position:absolute;bottom:6px;left:6px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#fff;border-radius:10px}.person-badge.성국{background:var(--color-성국)}.person-badge.수현{background:var(--color-수현)}.fab-button{position:fixed;bottom:28px;right:20px;width:60px;height:60px;background:linear-gradient(135deg,var(--accent),#FF8E8E);color:#fff;border:none;border-radius:50%;font-size:2.2rem;font-weight:300;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #ff6b6b66;transition:transform .2s ease,box-shadow .2s ease;z-index:50}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 24px #ff6b6b80}.fab-button:active{transform:scale(.95)}@media(min-width:768px){.fab-button{bottom:40px;right:40px;width:68px;height:68px;font-size:2.4rem}}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-end;justify-content:center;z-index:200;opacity:0;animation:fadeIn .2s ease forwards}@media(min-width:768px){.modal-overlay{align-items:center}}@keyframes fadeIn{to{opacity:1}}.modal-content{width:100%;max-height:90vh;background:var(--bg-card);border-radius:20px 20px 0 0;padding:20px;transform:translateY(100%);animation:slideUp .3s ease forwards;overflow-y:auto}@media(min-width:768px){.modal-content{max-width:500px;border-radius:20px;transform:translateY(20px);animation:slideUpPC .3s ease forwards}}@keyframes slideUp{to{transform:translateY(0)}}@keyframes slideUpPC{to{transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-close{width:32px;height:32px;background:var(--bg-primary);border:none;border-radius:50%;font-size:1.2rem;cursor:pointer}.modal-save{padding:8px 20px;font-size:.9rem;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:8px;cursor:pointer}.modal-save:disabled{opacity:.5;cursor:not-allowed}.person-selector{display:flex;gap:12px;margin-bottom:20px}.person-option{flex:1;padding:14px;text-align:center;border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s}.person-option.selected.성국{border-color:var(--color-성국);background:#4a90d91a}.person-option.selected.수현{border-color:var(--color-수현);background:#e85a711a}.person-option .emoji{font-size:2rem;margin-bottom:4px}.person-option .name{font-size:.9rem;font-weight:600}.file-upload-area{border:2px dashed var(--border);border-radius:12px;padding:30px;text-align:center;margin-bottom:20px;cursor:pointer;transition:border-color .2s}.file-upload-area:hover{border-color:var(--text-muted)}.file-upload-area.has-files{border-style:solid;border-color:var(--accent);background:var(--accent-light)}.file-upload-icon{font-size:2.5rem;margin-bottom:8px}.file-upload-text{color:var(--text-secondary);font-size:.9rem}.file-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}.file-preview-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden}.file-preview-item img,.file-preview-item video{width:100%;height:100%;object-fit:cover}.file-preview-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;background:#0009;color:#fff;border:none;border-radius:50%;font-size:.7rem;cursor:pointer}.date-picker-row{display:flex;align-items:center;gap:12px;margin-bottom:20px}.date-picker-label{font-size:1.2rem}.date-picker-input{flex:1;padding:12px;font-size:1rem;border:2px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text-primary);-webkit-text-fill-color:var(--text-primary)}.date-picker-input:focus{outline:none;border-color:var(--accent)}.memo-input{width:100%;padding:14px;font-size:1rem;border:2px solid var(--border);border-radius:12px;background:var(--bg-card);color:var(--text-primary);resize:none;font-family:inherit;-webkit-text-fill-color:var(--text-primary)}.memo-input::placeholder{color:var(--text-muted);-webkit-text-fill-color:var(--text-muted)}.memo-input:focus{outline:none;border-color:var(--accent)}.upload-progress{margin-top:20px;padding:16px;background:var(--bg-primary);border-radius:12px}.upload-progress-bar{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden}.upload-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#FF8E8E);border-radius:4px;transition:width .3s ease}.upload-progress-text{margin-top:10px;font-size:.85rem;color:var(--text-secondary);text-align:center}.viewer-overlay{position:fixed;inset:0;background:#000000f2;display:flex;flex-direction:column;z-index:300}.viewer-header{display:flex;justify-content:space-between;align-items:center;padding:16px;color:#fff}.viewer-close{width:40px;height:40px;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}.viewer-delete{width:40px;height:40px;background:none;border:none;color:var(--accent);font-size:1.2rem;cursor:pointer}.viewer-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}.viewer-content img,.viewer-content video{max-width:100%;max-height:100%;object-fit:contain}.viewer-info{flex-shrink:0;padding:16px 16px 32px;color:#fff;text-align:center;background:linear-gradient(transparent,#000c)}.viewer-info .date{font-size:.9rem;opacity:.7;margin-bottom:4px}.viewer-info .person{font-size:.85rem;padding:4px 12px;border-radius:12px;display:inline-block}.viewer-info .person.성국{background:var(--color-성국)}.viewer-info .person.수현{background:var(--color-수현)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;color:var(--text-muted);min-height:50vh}.empty-state .icon{font-size:5rem;margin-bottom:24px;opacity:.6}.empty-state .text{font-size:1.1rem;font-weight:500}.empty-state .subtext{font-size:.9rem;margin-top:8px;color:var(--text-muted);opacity:.7}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;color:var(--text-muted);min-height:50vh}.loading:before{content:"";width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}