.gallery-container{padding:100px 20px 20px;display:flex;flex-direction:column;align-items:center;min-height:100vh;max-width:1020px;margin:0 auto}.gallery-header{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;width:90%;margin:0 auto 20px}.gallery-header h1{font-size:20px;font-weight:700;margin:0}.gallery-header p{font-size:12px;color:rgba(0,0,0,.5);margin:0}.gallery-subtitle{font-size:12px;color:rgba(0,0,0,.5);margin-top:6px}.header-line{width:100%;justify-self:stretch;height:1px;background-color:#ccc;margin-top:15px}@media (min-width:768px){.gallery-header h1{font-size:25px}}@media (min-width:1024px){.gallery-header h1{font-size:30px}}.search-wrapper{position:relative;flex-shrink:0}.filter-section{justify-content:left;margin-bottom:20px;gap:10px;width:90%;max-width:1020px;overflow:visible}.filter-section,.search-bar{display:flex;align-items:center}.search-bar{border:1px solid #ccc;border-radius:20px;padding:5px 10px;width:300px;flex-shrink:0;box-sizing:border-box}.search-icon{width:18px;height:18px;margin-right:6px;flex-shrink:0;opacity:.5}.search-clear{background:none;border:none;cursor:pointer;color:#999;font-size:12px;padding:0 2px;flex-shrink:0;line-height:1}.search-clear:hover{color:#333}.search-suggestions{position:absolute;top:calc(100% + 6px);left:0;width:100%;background:white;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.12);list-style:none;margin:0;padding:6px 0;z-index:100;overflow:hidden}.suggestion-item{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;cursor:pointer;gap:8px;transition:background .15s}.suggestion-item:hover{background:#f5f5f5}.suggestion-title{font-size:.88rem;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.suggestion-tag{font-size:.75rem;color:#888;background:#f0f0f0;border-radius:10px;padding:2px 8px;white-space:nowrap;flex-shrink:0}.search-bar input{border:none;outline:none;width:100%;font-size:14px}.tags{display:flex;flex-wrap:wrap;gap:10px;width:100%}.tags-scroll-wrapper{position:relative}.tags-measure{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;height:0;overflow:hidden;width:max-content;flex-wrap:nowrap}.tag-button{padding:5px 15px;border:1px solid rgba(0,0,0,.01);border-radius:20px;background:transparent;cursor:pointer;font-size:.9rem;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.08);transition:all .3s cubic-bezier(.4,0,.2,1);height:32px;min-height:32px;line-height:1;display:flex;align-items:center;justify-content:center;white-space:nowrap}.tag-button:hover{background:rgba(0,0,0,.3);color:#fff;transform:scale(1.05);box-shadow:0 4px 16px rgba(0,0,0,.2),0 0 8px rgba(0,0,0,.1)}.tag-button.active{background:linear-gradient(135deg,rgba(44,44,44,.9),rgba(26,26,26,.9));font-weight:600;transform:scale(1.02);color:#fff;border:1px solid rgba(0,0,0,.01);box-shadow:0 3px 12px rgba(0,0,0,.25),0 0 6px rgba(0,0,0,.15)}@media (min-width:769px){.tags-scroll-wrapper{flex:1;min-width:0;overflow:hidden;padding-right:4px}.tags{flex-wrap:nowrap;gap:10px;width:max-content;padding:8px 4px}.tag-button{flex-shrink:0}}@media (max-width:768px){.gallery-container{padding-top:80px}.filter-section{flex-direction:column}.search-wrapper{width:100%}.search-bar{width:100%;box-sizing:border-box}.search-bar input{font-size:16px}.tags-scroll-wrapper{width:100%;overflow:hidden;max-height:90px}.tags{max-width:100%;align-content:flex-start;padding:8px 4px}}.gallery{display:grid;gap:5px;width:90%;grid-template-columns:repeat(2,1fr)}@media (min-width:768px){.gallery{grid-template-columns:repeat(3,1fr)}}.gallery .post{width:100%;aspect-ratio:1/1;overflow:hidden;position:relative;cursor:pointer;background-color:#e8e8e8}.gallery .post:focus-visible{outline:2px solid #111;outline-offset:2px}.gallery .post .thumbnail{width:100%;height:100%;object-fit:cover;transition:transform .1s ease}.gallery .post:hover .thumbnail{transform:scale(1.05)}.post-overlay{position:absolute;bottom:0;left:0;right:0;padding:28px 10px 10px;background:linear-gradient(0deg,rgba(0,0,0,.72) 0,transparent);display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .25s ease;pointer-events:none}.gallery .post:hover .post-overlay{opacity:1}.post-overlay-num{font-size:.68rem;font-weight:500;color:rgba(255,255,255,.6);letter-spacing:.08em}.post-overlay-title{font-size:.82rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.post-overlay-date{font-size:.68rem;color:rgba(255,255,255,.5);letter-spacing:.04em}@media (max-width:768px){.post-overlay{opacity:1;padding:20px 8px 8px}.post-overlay-title{font-size:.75rem}.post-overlay-date,.post-overlay-num{font-size:.62rem}}.image-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,.8);z-index:2;pointer-events:none}.gallery-skeleton{display:grid;gap:5px;width:90%;grid-template-columns:repeat(2,1fr)}@media (min-width:768px){.gallery-skeleton{grid-template-columns:repeat(3,1fr)}}.skeleton-item{width:100%;aspect-ratio:1/1;border-radius:2px;background:linear-gradient(90deg,#e8e8e8 25%,#d0d0d0 50%,#e8e8e8 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.modal-image-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,.8);border-radius:10px;padding:20px;z-index:1001}.modal-loading-spinner{width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-top-color:#666;border-radius:50%;animation:modalSpin 1s linear infinite}@keyframes modalSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spinner{width:20px;height:20px;border:2px solid rgba(0,0,0,.1);border-top-color:#333;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.gallery-sentinel{width:100%;height:40px}.modal{top:0;left:0;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1010;padding:20px;box-sizing:border-box}.modal,body.modal-open{position:fixed;width:100%;height:100%}body.modal-open{overflow:hidden}@media (max-width:768px){.modal{top:60px;height:calc(100% - 60px);padding:0;align-items:flex-start}}@media (min-width:769px){.modal{padding:100px 40px 40px}.modal-content{max-width:90vw;max-height:90vh;display:flex;flex-direction:column;background:white;border-radius:10px;overflow:hidden}}.modal-content{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:rgba(0,0,0,.5);border-radius:0;overflow:hidden}.image-container{flex:1;min-height:0;background:rgba(0,0,0,.4);padding:10px}.image-container,.modal-image-wrapper{display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.modal-image-stage,.modal-image-wrapper{width:100%;height:100%}.modal-image-stage{position:relative;overflow:hidden}.modal-image-stage.embla{touch-action:pan-y pinch-zoom}.modal-image-track{display:flex;height:100%;width:100%}.modal-image-slide{flex:0 0 100%;min-width:0;height:100%}.modal-image-layer,.modal-image-slide{display:flex;align-items:center;justify-content:center}.modal-image-layer{position:absolute;inset:0;will-change:transform,opacity;backface-visibility:hidden}.modal-image-layer.is-incoming{z-index:2}.modal-image-layer.is-outgoing{z-index:1}.modal-image{max-width:100%;max-height:100%;object-fit:contain}@media (min-width:769px){.modal-image{max-width:80vw;max-height:70vh}}.title-area{background:white;padding:15px 20px;border-top:1px solid #eee;min-height:60px}.title-area,.title-container{display:flex;justify-content:space-between;align-items:center;gap:15px}.title-container{flex:1;min-width:0}.modal-title{font-size:18px;font-weight:600;color:#333;margin:0;flex:1;word-break:break-word;line-height:1.4}.modal-meta{display:flex;align-items:center;gap:10px}.image-counter{font-size:14px;color:#666;white-space:nowrap}.modal-date{font-size:13px;color:#999;white-space:nowrap}@media (max-width:768px){.modal-title{font-size:16px}.image-counter{font-size:12px}.modal-date{font-size:11px}.title-container{gap:10px}.title-area{padding:12px 20px;min-height:50px}.title-container{flex-direction:column;align-items:flex-start;gap:5px}.modal-content{border-radius:0}.nav-arrow-container{padding:12px 20px;border-top:1px solid #eee}.post-number{font-size:12px}.nav-arrow-group .nav-arrow{width:35px;height:35px;border-width:2px}}.modal-image-wrapper{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.modal-image-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#000;overflow:hidden}.nav-arrow-container{background:white;padding:15px 20px;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center;min-height:60px}.post-number{font-size:14px;color:#999;font-weight:500;position:relative;padding-left:20px}.post-number:before{left:0;width:12px;height:12px;background:#ddd}.post-number:after,.post-number:before{content:"";position:absolute;top:50%;transform:translateY(-50%);border-radius:50%}.post-number:after{left:3px;width:6px;height:6px;background:#999}.nav-arrow-group{display:flex;gap:15px;align-items:center}.nav-arrow-group .nav-arrow{width:40px;height:40px;border:2px solid #ddd;border-radius:50%;background:white;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s ease;position:relative}@media (min-width:769px){.nav-arrow-group .nav-arrow:hover:not(:disabled){border-color:#333;background:#f8f8f8;transform:scale(1.05)}}.nav-arrow-group .nav-arrow:active:not(:disabled){transform:scale(.95);background:#f0f0f0}.nav-arrow-group .nav-arrow.left:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-55%,-50%);width:0;height:0;border-color:transparent #666 transparent transparent;border-style:solid;border-width:6px 8px 6px 0}.nav-arrow-group .nav-arrow.right:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-45%,-50%);width:0;height:0;border-color:transparent transparent transparent #666;border-style:solid;border-width:6px 0 6px 8px}.nav-arrow-group .nav-arrow:disabled{opacity:.3;cursor:not-allowed;border-color:#f0f0f0}.close-button{width:40px;height:40px;border:none;border-radius:50%;background:#e05555;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:600;color:white;line-height:1;padding:0;flex-shrink:0;transition:all .3s ease}@media (max-width:768px){.close-button{width:35px;height:35px;font-size:14px}}@media (min-width:769px){.close-button:hover{background:#d03030;transform:scale(1.05)}}.close-button:active{transform:scale(.92);background:#c02020}.swipe-guide-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:1002;animation:swipeGuideAppear .3s ease-out}@keyframes swipeGuideAppear{0%{opacity:0}to{opacity:1}}.swipe-guide-gif{position:relative;width:200px;height:150px;background:white;border-radius:10px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.3)}.swipe-guide-gif:before{content:"👆";font-size:40px;margin-bottom:10px;animation:swipeAnimation 2s ease-in-out infinite}@keyframes swipeAnimation{0%,to{transform:translateX(0)}25%{transform:translateX(-20px)}75%{transform:translateX(20px)}}.swipe-guide-gif img{width:100%;height:auto;max-height:80px;object-fit:contain;border-radius:5px}.swipe-guide-text{margin-top:15px;font-size:14px;color:#333;text-align:center;line-height:1.4;font-weight:500}