*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{color:#1a1a1a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#e5f0ed;width:100vw;height:100dvh;font-family:Noto Serif KR,serif;position:fixed;top:0;left:0;overflow:hidden}.page{justify-content:center;align-items:center;min-height:100dvh;display:flex}.container{text-align:center;width:100%;max-width:400px;padding:2rem 1.5rem}.label{color:#008876;margin-bottom:2vw;font-family:Gowun Batang,serif;font-size:2.58vw;font-weight:800}.label--player{text-align:left}.display{color:#008876;letter-spacing:.27vw;text-align:center;margin-bottom:2.67vw;font-family:Gowun Batang,serif;font-size:4.45vw;font-weight:700;line-height:1.45}.subtitle{color:#008876;letter-spacing:.13vw;text-align:center;word-break:keep-all;font-family:Gowun Batang,serif;font-size:3.55vw;font-weight:700;line-height:1.45}.divider{background:#0000001a;width:8.53vw;height:1px;margin:0 auto 8.53vw}.list{flex-direction:column;display:flex}.list__item{color:#008876;border-bottom:1px solid #00000014;align-items:center;gap:4.27vw;padding:4.27vw 1.07vw;text-decoration:none;transition:color .2s;display:flex}.list__item:first-child{border-top:1px solid #00000014}.list__item:active,.list__item:hover{color:#065}.list__num{color:#008876;opacity:.5;font-variant-numeric:tabular-nums;text-align:left;width:6.4vw;font-family:Nanum Gothic,sans-serif;font-size:1.87vw;font-weight:400}.list__title{text-align:left;letter-spacing:.01em;opacity:.6;flex:1;font-family:Nanum Gothic,sans-serif;font-size:2.4vw;font-weight:400}.list__sub{color:#008876;text-align:right;font-family:Gowun Batang,serif;font-size:3vw;font-weight:700}.list__arrow{color:#008876;opacity:.4;font-size:2.93vw;transition:color .2s,transform .2s}.list__item:hover .list__arrow,.list__item:active .list__arrow{opacity:.7;transform:translate(.53vw)}.container--player{text-align:center;flex-direction:column;max-width:none;height:100dvh;padding:min(30.4vw,15vh) 9.6vw 0 10.93vw;display:flex;overflow:hidden}.player-top{flex-shrink:0}.player-top .label{margin-bottom:9.6vw}.player-top .display{margin-bottom:1.07vw}.player-middle{flex-direction:column;flex:1;justify-content:center;align-items:center;padding-bottom:18vw;display:flex}.player-bottom{flex-shrink:0;padding-bottom:min(14.4vw,6vh)}.player{width:15.47vw;height:15.47vw;margin:0 auto;position:relative}.player__glow{pointer-events:none;background:radial-gradient(circle,#00000005 0%,#0000 70%);width:32vw;height:32vw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.progress-ring{width:15.47vw;height:15.47vw;position:absolute;inset:0;transform:rotate(-90deg)}.progress-ring__bg{fill:none;stroke:#d9d9d9;stroke-width:2px}.progress-ring__fill{fill:none;stroke:#008876;stroke-width:2px;stroke-linecap:round;stroke-dasharray:339.292;stroke-dashoffset:339.292px;transition:stroke-dashoffset .3s}.play-btn{color:#008876;cursor:pointer;-webkit-appearance:none;background:0 0;border:1px solid #d9d9d9;border-radius:50%;outline:none;justify-content:center;align-items:center;width:15.47vw;height:15.47vw;transition:border-color .3s,transform .15s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.play-btn:active{transform:translate(-50%,-50%)scale(.95)}@media (hover:hover){.play-btn:hover{border-color:#008876}}.play-icon{width:5.33vw;height:5.33vw}#icon-play{position:relative;left:.27vw}.time{color:#008876;opacity:.5;letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-top:3.2vw;font-family:-apple-system,sans-serif;font-size:2.77vw;font-weight:300}.music-credit{color:#008371;text-align:right;margin-bottom:3.47vw;padding-right:2vw;font-family:Gowun Batang,serif;font-size:1.96vw;font-weight:700}.description{color:#5e5e5e;text-align:left;word-break:keep-all;font-family:Noto Serif KR,serif;font-size:2.05vw;font-weight:500;line-height:3.91vw}.back{color:#008876;opacity:.5;margin-top:8.53vw;font-size:2vw;font-weight:300;text-decoration:none;transition:opacity .2s;display:inline-block}.back:hover{opacity:.8}@media (min-width:768px){body{background:#f0f0f0;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:static;overflow:hidden}.page{width:375px;height:730px;transform:scale(min(1.3, calc(85vh / 730)));transform-origin:50%;background:#e5f0ed;border-radius:40px;position:relative;overflow:hidden;box-shadow:0 20px 60px #0000001f;min-height:0!important}.label{margin-bottom:8px;font-size:12px}.display{letter-spacing:1px;margin-bottom:10px;font-size:16.67px}.page .container{margin-top:-60px}.subtitle{letter-spacing:.5px;font-size:13.33px}.music-credit{margin-bottom:13px;font-size:7.33px}.description{font-size:7.67px;line-height:14.67px}.time{margin-top:12px;font-size:10.4px}.container--player{height:100%;padding:80px 30px 0 35px}.player-top .label{margin-bottom:28px}.player-top .display{margin-bottom:3px}.player,.progress-ring,.play-btn{width:58px;height:58px}.play-icon{width:20px;height:20px}#icon-play{left:1px}.player__glow{width:120px;height:120px}.player-middle{padding-bottom:12%}.player-bottom{padding-bottom:70px}.back{margin-top:32px;font-size:7.5px}.container{max-width:390px}.list__num{width:24px;font-size:7px}.list__title{font-size:9px}.list__sub{font-size:10px}.list__arrow{font-size:11px}.list__item{gap:16px;padding:16px 4px}.divider{width:32px;margin:0 auto 32px}}