#modal{width:min(540px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:32px;border-radius:24px;scrollbar-width:thin;scrollbar-color:#62584f transparent}
#modal .close{width:36px;height:36px;right:14px;top:14px;font-size:26px;z-index:2}
#modal h2{overflow-wrap:anywhere}
#modal:has(.work-preview){width:min(620px,calc(100vw - 32px));padding:22px;overflow:hidden}
#modal:has(.work-preview) #modal-content{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;height:min(720px,calc(100dvh - 78px));min-height:0}
#modal:has(.work-preview) .modal-logo{display:none}
#modal:has(.work-preview) h2{font-size:28px;line-height:1.2;margin:0;padding:0 40px;text-align:center}
#modal .work-preview{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:0;min-width:0;max-width:none;margin:0}
#modal .work-preview>img,#modal .work-preview>video{display:block;width:auto;height:100%;max-height:100%;max-width:100%;object-fit:contain;background:transparent;margin:0;border-radius:8px}
#modal .work-preview .notice{position:absolute;inset:auto 8px 8px;padding:10px;background:#161515e8;border-radius:6px;font-size:13px}
#modal:has(.work-preview) .modal-action{width:100%;min-height:52px;margin:0;padding:12px 18px;font-size:17px;line-height:1.3;border-radius:28px;box-shadow:none}
#modal:has(.work-preview) .modal-action img{flex-shrink:0;width:30px}
@media(max-width:600px){#modal{padding:24px 20px}#modal:has(.work-preview){padding:16px;width:calc(100vw - 20px)}#modal:has(.work-preview) #modal-content{height:calc(100dvh - 68px);gap:12px}#modal:has(.work-preview) h2{font-size:23px;padding:0 34px}#modal:has(.work-preview) .modal-action{font-size:15px;min-height:48px;padding:10px 12px}}
@media(max-height:500px){#modal:has(.work-preview) h2{font-size:22px}#modal:has(.work-preview) #modal-content{gap:10px}#modal:has(.work-preview) .modal-action{min-height:44px;font-size:15px;padding:8px 14px}}