: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{--primary: #3CBBB1;--primary-light: #E8F8F6;--primary-dark: #2A9D93;--secondary: #EE4266;--secondary-light: #FDEAEF;--bg-primary: #F8FAFA;--bg-card: #FFFFFF;--text-primary: #1F2937;--text-secondary: #6B7280;--text-muted: #9CA3AF;--border: #E5E7EB;--border-light: #F3F4F6;--color-성국: #3CBBB1;--color-수현: #EE4266;--accent: var(--primary);--accent-light: var(--primary-light)}*{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:linear-gradient(180deg,var(--bg-primary) 0%,var(--primary-light) 100%);width:100%}.password-screen form{display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px;padding:32px;background:var(--bg-card);border-radius:24px;box-shadow:0 8px 32px #3cbbb11f}.password-icon{font-size:4rem;margin-bottom:24px}.password-title{font-size:1.1rem;color:var(--text-secondary);margin-bottom:28px;font-weight:500}.password-input{width:100%;padding:16px 20px;font-size:1.6rem;text-align:center;letter-spacing:.4em;border:2px solid var(--border);border-radius:16px;background:var(--bg-primary);color:var(--text-primary);margin-bottom:16px;transition:border-color .2s,box-shadow .2s;-webkit-text-fill-color:var(--text-primary)}.password-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}.password-input.error{border-color:var(--secondary);animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.password-submit{width:100%;padding:16px;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border:none;border-radius:14px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px #3cbbb14d}.password-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3cbbb166}.password-submit:active{transform:translateY(0)}.password-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}.password-error{margin-top:16px;color:var(--secondary);font-size:.9rem;font-weight:500}.splash-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--bg-primary) 0%,var(--primary-light) 100%);z-index:9999;opacity:1;transition:opacity .5s ease}.splash-screen.fade-out{opacity:0}.splash-emoji{font-size:4rem;margin-bottom:20px;animation:bounce 1.5s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.splash-text{font-size:1.4rem;font-weight:700;color:var(--text-primary);letter-spacing:.05em}.splash-subtext{margin-top:8px;font-size:.9rem;color:var(--primary);font-weight:500}.gallery-container{width:100%;max-width:100%;margin:0 auto;padding-bottom:100px}@media(min-width:768px){.gallery-container{max-width:min(1200px,90vw);padding:28px;margin-top:28px;background:var(--bg-card);border-radius:28px;box-shadow:0 4px 24px #0000000f;margin-bottom:40px;min-height:calc(100vh - 100px)}}.gallery-header{position:sticky;top:0;background:var(--bg-primary);padding:20px 16px 16px;z-index:100}@media(min-width:768px){.gallery-header{background:var(--bg-card);border-radius:20px 20px 0 0;padding:28px 24px 20px}}.gallery-title{font-size:1.5rem;font-weight:800;margin-bottom:20px;color:var(--text-primary);display:flex;align-items:center;gap:10px}.gallery-title:before{content:"💑";font-size:1.3rem}@media(min-width:768px){.gallery-title{font-size:1.8rem;justify-content:center;margin-bottom:24px}}.filter-section{margin-bottom:14px}.filter-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}@media(min-width:768px){.filter-row{justify-content:center;gap:10px}}.filter-row::-webkit-scrollbar{display:none}.filter-btn{flex-shrink:0;padding:10px 20px;font-size:.85rem;font-weight:600;color:var(--text-secondary);background:var(--bg-card);border:2px solid var(--border);border-radius:100px;cursor:pointer;transition:all .2s ease}.filter-btn:hover{border-color:var(--primary);color:var(--primary)}.filter-btn.active{color:#fff;background:var(--text-primary);border-color:var(--text-primary);box-shadow:0 2px 8px #1f293733}.filter-btn.person-성국.active{background:var(--color-성국);border-color:var(--color-성국);box-shadow:0 3px 12px #3cbbb159}.filter-btn.person-수현.active{background:var(--color-수현);border-color:var(--color-수현);box-shadow:0 3px 12px #ee426659}.date-section{padding:0 16px;margin-bottom:32px}@media(min-width:768px){.date-section{padding:0 8px}}.date-label{font-size:.85rem;font-weight:700;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:6px;height:6px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:50%}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}@media(min-width:768px){.media-grid{grid-template-columns:repeat(5,1fr);gap:10px}}@media(min-width:1024px){.media-grid{grid-template-columns:repeat(6,1fr);gap:12px}}.media-card{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;background:var(--border-light)}.media-card:hover{transform:scale(1.03);box-shadow:0 8px 24px #0000001f}.media-card:active{transform:scale(.98)}.media-card img,.media-card video{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.media-card:hover img,.media-card:hover video{transform:scale(1.08)}.media-card .video-indicator{position:absolute;top:8px;right:8px;width:26px;height:26px;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.65rem}.media-card .person-badge{position:absolute;bottom:8px;left:8px;padding:4px 10px;font-size:.65rem;font-weight:700;color:#fff;border-radius:100px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.person-badge.성국{background:linear-gradient(135deg,var(--color-성국),#2A9D93)}.person-badge.수현{background:linear-gradient(135deg,var(--color-수현),#D63A5A)}.fab-button{position:fixed;bottom:28px;right:20px;width:62px;height:62px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:none;border-radius:50%;font-size:2rem;font-weight:300;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 24px #3cbbb166;transition:transform .2s ease,box-shadow .2s ease;z-index:50}.fab-button:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 8px 32px #3cbbb180}.fab-button:active{transform:scale(.95)}@media(min-width:768px){.fab-button{bottom:40px;right:40px;width:68px;height:68px;font-size:2.2rem}}.modal-overlay{position:fixed;inset:0;background:#1f293766;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);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:24px 24px 0 0;padding:24px;transform:translateY(100%);animation:slideUp .3s ease forwards;overflow-y:auto}@media(min-width:768px){.modal-content{max-width:480px;border-radius:24px;transform:translateY(20px);animation:slideUpPC .3s ease forwards;box-shadow:0 24px 48px #00000026}}@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:24px}.modal-close{width:36px;height:36px;background:var(--border-light);border:none;border-radius:50%;font-size:1.1rem;cursor:pointer;transition:background .2s;color:var(--text-secondary)}.modal-close:hover{background:var(--border)}.modal-save{padding:10px 24px;font-size:.9rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;border-radius:100px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #3cbbb14d}.modal-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px #3cbbb166}.modal-save:disabled{opacity:.5;cursor:not-allowed;transform:none}.person-selector{display:flex;gap:12px;margin-bottom:24px}.person-option{flex:1;padding:16px;text-align:center;border:2px solid var(--border);border-radius:16px;cursor:pointer;transition:all .2s;background:var(--bg-card)}.person-option:hover{border-color:var(--text-muted)}.person-option.selected.성국{border-color:var(--color-성국);background:var(--primary-light);box-shadow:0 4px 16px #3cbbb126}.person-option.selected.수현{border-color:var(--color-수현);background:var(--secondary-light);box-shadow:0 4px 16px #ee426626}.person-option .emoji{font-size:2.2rem;margin-bottom:6px}.person-option .name{font-size:.95rem;font-weight:700;color:var(--text-primary)}.file-upload-area{border:2px dashed var(--border);border-radius:16px;padding:36px;text-align:center;margin-bottom:20px;cursor:pointer;transition:all .2s;background:var(--bg-primary)}.file-upload-area:hover{border-color:var(--primary);background:var(--primary-light)}.file-upload-area.has-files{border-style:solid;border-color:var(--primary);background:var(--primary-light)}.file-upload-icon{font-size:2.5rem;margin-bottom:10px}.file-upload-text{color:var(--text-secondary);font-size:.9rem;font-weight:500}.file-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.file-preview-item{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--border-light)}.file-preview-item img,.file-preview-item video{width:100%;height:100%;object-fit:cover}.file-preview-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;background:#0009;color:#fff;border:none;border-radius:50%;font-size:.7rem;cursor:pointer;transition:background .2s}.file-preview-remove:hover{background:var(--secondary)}.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:14px;font-size:1rem;border:2px solid var(--border);border-radius:12px;background:var(--bg-primary);color:var(--text-primary);-webkit-text-fill-color:var(--text-primary);transition:border-color .2s,box-shadow .2s}.date-picker-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}.memo-input{width:100%;padding:14px;font-size:1rem;border:2px solid var(--border);border-radius:12px;background:var(--bg-primary);color:var(--text-primary);resize:none;font-family:inherit;-webkit-text-fill-color:var(--text-primary);transition:border-color .2s,box-shadow .2s}.memo-input::placeholder{color:var(--text-muted);-webkit-text-fill-color:var(--text-muted)}.memo-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}.upload-progress{margin-top:20px;padding:16px;background:var(--primary-light);border-radius:12px}.upload-progress-bar{width:100%;height:8px;background:#3cbbb133;border-radius:100px;overflow:hidden}.upload-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-dark));border-radius:100px;transition:width .3s ease}.upload-progress-text{margin-top:10px;font-size:.85rem;color:var(--primary-dark);text-align:center;font-weight:500}.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:44px;height:44px;background:#ffffff1a;border:none;border-radius:50%;color:#fff;font-size:1.4rem;cursor:pointer;transition:background .2s}.viewer-close:hover{background:#fff3}.viewer-delete{width:44px;height:44px;background:#ee426633;border:none;border-radius:50%;color:var(--secondary);font-size:1.1rem;cursor:pointer;transition:background .2s}.viewer-delete:hover{background:#ee42664d}.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;border-radius:8px}.viewer-info{flex-shrink:0;padding:20px 20px 36px;color:#fff;text-align:center;background:linear-gradient(transparent,#000000e6)}.viewer-info .date{font-size:.9rem;opacity:.6;margin-bottom:8px}.viewer-info .person{font-size:.85rem;padding:6px 16px;border-radius:100px;display:inline-block;font-weight:600}.viewer-info .person.성국{background:linear-gradient(135deg,var(--color-성국),#2A9D93)}.viewer-info .person.수현{background:linear-gradient(135deg,var(--color-수현),#D63A5A)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;min-height:50vh}.empty-state .icon{font-size:5rem;margin-bottom:24px}.empty-state .text{font-size:1.1rem;font-weight:600;color:var(--text-secondary)}.empty-state .subtext{font-size:.9rem;margin-top:10px;color:var(--primary);font-weight:500}.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:44px;height:44px;border:3px solid var(--primary-light);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.group-upload-option{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:20px;background:var(--bg-primary);border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s}.group-upload-option:hover{border-color:var(--primary)}.group-upload-option input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary);cursor:pointer}.group-upload-option span{font-size:.9rem;color:var(--text-secondary);font-weight:500}.compression-section{padding:16px;margin-bottom:20px;background:#fef3c7;border:2px solid #FCD34D;border-radius:12px;text-align:center}.compression-warning{font-size:.9rem;color:#92400e;margin-bottom:12px;font-weight:500}.compress-btn{padding:10px 24px;font-size:.9rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:100px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #f59e0b4d}.compress-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px #f59e0b66}.compress-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.file-size-warning{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:#f59e0be6;color:#fff;font-size:.65rem;font-weight:600;text-align:center}.file-size-warning .compressing,.file-size-warning .needs-compress{color:#fff}.file-size-compressed{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:#10b981f2;color:#fff;font-size:.65rem;font-weight:600;text-align:center;display:flex;flex-direction:column;gap:2px}.file-size-compressed.format-mp4{background:#10b981f2}.file-size-compressed.format-webm{background:#f59e0bf2}.file-size-compressed .format-badge{font-size:.7rem;font-weight:700}.file-size-compressed .size-info{font-size:.55rem;opacity:.9}.file-size-error{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:#ef4444f2;color:#fff;font-size:.65rem;font-weight:600;text-align:center}.media-card .group-count{position:absolute;bottom:8px;right:8px;padding:4px 10px;font-size:.7rem;font-weight:700;color:#fff;background:#0009;border-radius:100px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.media-card.grouped{box-shadow:0 4px 16px #00000026}.media-card.grouped:after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.25);border-radius:12px;pointer-events:none}.viewer-group-layout{flex:1;display:flex;min-height:0;gap:0}.viewer-thumbnail-list{width:80px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:12px;overflow-y:auto;background:#0006}@media(min-width:768px){.viewer-thumbnail-list{width:100px;padding:16px;gap:10px}}.thumbnail-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.5;transition:all .2s ease;flex-shrink:0}.thumbnail-item:hover{opacity:.75}.thumbnail-item.active{opacity:1;border-color:var(--primary);box-shadow:0 0 16px #3cbbb180}.thumbnail-item img,.thumbnail-item video{width:100%;height:100%;object-fit:cover}.thumbnail-video-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22px;height:22px;background:#0009;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.5rem}.viewer-main-content{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}.viewer-main-content img,.viewer-main-content video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}.viewer-counter{font-size:.9rem;color:#fff9;font-weight:600;background:#ffffff1a;padding:6px 14px;border-radius:100px}