.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:#fff;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-wrapper{width:100%;height:100%;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-stage{position:relative;width:100%;height:100%;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:#fff;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-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#000;overflow:hidden}.nav-arrow-container{background:#fff;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:#fff;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:#fff;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}