body{font-family:Arial,sans-serif;margin:0;padding:0;box-sizing:border-box}h1,p,button{margin:0;padding:0}header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;background-color:#fff}.nav-container{display:flex;align-items:center;justify-content:center;padding:0 20px;width:100%}.search-bar{max-width:300px;width:100%;font-size:1em;border:0px solid #ffffff;position:absolute;left:16.5%}.nav-buttons{display:flex;gap:15px;justify-content:center;margin:0;position:relative}header{position:fixed;top:0;width:100%;background-color:#fff;box-shadow:0 2px 5px #0000;z-index:1000;padding:10px 20px;display:flex;flex-direction:column;align-items:center}.title{font-size:2em;text-align:center;margin-bottom:20px}.navigation{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;width:66%}button{padding:10px 15px;border:none;background-color:#fff;color:#000;cursor:pointer;border-radius:5px}.api-text{font-style:italic;padding:10px;color:#d3d3d3}.magazines{display:flex;flex-wrap:wrap;justify-content:center;margin:20px auto;width:66.6%;gap:2%}.magazine{width:23.5%;text-align:center;cursor:pointer}.magazine img{width:100%;border-radius:0;margin-bottom:10px}.magazine p{font-size:1em}.search-results{display:flex;justify-content:center;margin-top:20px}@font-face{font-family:ex1;src:url(/assets/NanumGothicExtraBold-D1mCiS3e.otf) format("woff2");font-weight:400;font-style:normal}.font-bold{font-family:ex1;font-size:1.1em}.font-bold:hover{background-color:#555}#live-status-container{margin-top:10px;text-align:center}#live-status{font-size:18px;font-weight:700;color:#fff;padding:8px 12px;border-radius:5px;background-color:#f44336;display:inline-block}#live-status.live{background-color:#4caf50}.banner{position:relative;width:66vw;height:40vh;overflow:hidden;margin:12% auto -2%;border:0px solid #ccc}.banner-slider{display:flex;transition:transform .5s ease-in-out;width:300%}.banner-item{position:relative;width:66vw;height:40vh;cursor:pointer}.banner-item img{width:100%;height:100%;object-fit:contain}.banner-item.no-link{cursor:default}.side-banner{position:fixed;top:30%;right:8%;width:120px;height:60vh;background-color:#fff;border:0px solid #ccc;box-shadow:0 0 #0003;z-index:1000;display:flex;flex-direction:column;justify-content:space-between;align-items:center;overflow:hidden;padding:10px 0}.side-banner img{width:100%;height:auto}.side-banner a{text-decoration:none}#scroll-to-top{margin-top:auto;padding:10px 15px;background-color:#fff;color:#000;border:none;border-radius:0;font-size:14px;cursor:pointer;text-align:center;width:50%}#scroll-to-top:hover{background-color:#b9b9b9}.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:#000000b3;justify-content:center;align-items:center}.modal-content{position:relative;display:flex;align-items:flex-start;background-color:#fff;padding:30px;border-radius:10px;width:92%;max-width:1035px;box-shadow:0 4px 10px #0000004d}.modal-content img{max-width:46%;height:auto;border-radius:10px;margin-right:20px}.modal-text{display:flex;flex-direction:column;justify-content:flex-start;font-size:1.1rem;line-height:1.6}.modal-text h2{margin:0 0 15px;font-size:1.5rem}.modal-text p{margin:0 0 20px;font-size:1rem;line-height:1.5}#view-magazine{padding:12px 25px;font-size:1.1rem;color:#fff;background-color:#007bff;border:none;border-radius:5px;cursor:pointer}#view-magazine:hover{background-color:#0056b3}.close{position:absolute;top:10px;right:10px;font-size:24px;font-weight:700;color:#333;cursor:pointer}.close:hover{color:#000}.play-audio,.play-audio:hover{background-color:#fff}.play-audio:disabled{cursor:not-allowed}
