https://prominence.tistory.com/ ko Tue, 22 Sep 2026 23:40:53 +0900 TISTORY 100 love my actor https://prominence.tistory.com/notice/4 <div> <style> /* ===================================================== 기본 ===================================================== */ .tistory-music-wrap, .tistory-music-wrap * { box-sizing:border-box; } .tistory-music-wrap { width:350px; height:720px; margin:30px auto; position:relative; font-family:-apple-system,BlinkMacSystemFont, "Apple SD Gothic Neo","Malgun Gothic",sans-serif; } /* ===================================================== 휴대폰 ===================================================== */ .tistory-phone-screen { position:absolute; top:0; left:0; width:350px; height:720px; background:#fff; color:#17181b; border:7px solid #f8f8f8; border-radius:42px; overflow:hidden; box-shadow:0 25px 55px rgba(0,0,0,.11); display:flex; flex-direction:column; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease; } .tistory-phone-screen.active { opacity:1; visibility:visible; pointer-events:auto; z-index:2; } /* ===================================================== 상태바 ===================================================== */ .tistory-status-bar { height:43px; padding:15px 22px 0; display:flex; justify-content:space-between; font-size:11px; font-weight:600; flex-shrink:0; } .tistory-status-icons { display:flex; gap:6px; font-size:9px; } /* ===================================================== 헤더 ===================================================== */ .tistory-header { height:53px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 20px; flex-shrink:0; } .tistory-header-left { justify-self:start; font-size:21px; font-weight:300; color:#555; cursor:pointer; user-select:none; } .tistory-header-title { font-size:13px; font-weight:600; } .tistory-header-right { justify-self:end; font-size:17px; } /* ===================================================== NOW PLAYING ===================================================== */ .tistory-now-playing { flex:1; padding:22px 26px 0; overflow:hidden; } .tistory-album { width:100%; aspect-ratio:1; border-radius:22px; overflow:hidden; background:#ddd; box-shadow:0 15px 28px rgba(0,0,0,.12); } .tistory-album img { width:100%; height:100%; display:block; object-fit:cover; } .tistory-song-area { position:relative; text-align:center; margin-top:22px; } .tistory-song-title { font-size:25px; line-height:1.1; font-weight:700; letter-spacing:-1px; } .tistory-artist { margin-top:7px; color:#858991; font-size:14px; } .tistory-song-actions { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; } .tistory-song-actions button { border:0; background:transparent; color:#96999e; font-size:19px; cursor:pointer; } /* ===================================================== 재생바 ===================================================== */ .tistory-player { margin-top:25px; } .tistory-progress-bar { width:100%; height:4px; background:#d7d8db; border-radius:10px; position:relative; } .tistory-progress-fill { width:42%; height:100%; background:#202124; border-radius:inherit; position:relative; } .tistory-progress-fill:after { content:""; position:absolute; right:-5px; top:50%; width:10px; height:10px; transform:translateY(-50%); border-radius:50%; background:#202124; } .tistory-time { display:flex; justify-content:space-between; margin-top:7px; color:#858990; font-size:9px; } .tistory-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:16px; } .tistory-control { width:25px; height:25px; border:0; background:transparent; color:#17191d; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; } .tistory-control.small { color:#92959a; font-size:13px; } .tistory-play { width:51px; height:51px; border-radius:50%; background:#17191d; color:#fff; font-size:16px; box-shadow:0 7px 15px rgba(0,0,0,.14); } /* ===================================================== 하단 메뉴 ===================================================== */ .tistory-bottom-nav { height:67px; border-top:1px solid #eeeeef; background:#fff; display:grid; grid-template-columns:repeat(4,1fr); padding:5px 7px 3px; flex-shrink:0; } .tistory-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#96999f; font-size:8px; } .tistory-nav-icon { font-size:17px; line-height:1; } .tistory-nav-item.active { color:#17191d; font-weight:600; } /* ===================================================== PROMISE 앨범 페이지 ===================================================== */ .tistory-album-page { flex:1; padding:20px 19px 0; overflow:hidden; } .tistory-album-header { display:grid; grid-template-columns:112px 1fr; gap:13px; align-items:center; margin-bottom:17px; } .tistory-small-album { width:112px; height:112px; border-radius:17px; overflow:hidden; background:#ddd; } .tistory-small-album img { width:100%; height:100%; object-fit:cover; display:block; } .tistory-album-info { min-width:0; } .tistory-album-type { color:#90949a; font-size:9px; margin-bottom:5px; } .tistory-album-title { font-size:25px; line-height:1; font-weight:700; letter-spacing:-1px; } .tistory-album-artist { margin-top:6px; font-size:12px; color:#858990; } .tistory-click-text { display:block; margin-top:5px; font-size:10px; color:#858990; } .tistory-album-icons { display:flex; gap:14px; margin-top:12px; } .tistory-album-icons button { border:0; background:transparent; padding:0; color:#222; font-size:16px; cursor:pointer; } /* ===================================================== PLAY / SHUFFLE ===================================================== */ .tistory-album-buttons { position:relative; z-index:10; display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:13px; } .tistory-album-buttons button { position:relative; z-index:11; display:block; width:100%; height:40px; border:0; border-radius:11px; font-family:inherit; font-size:11px; font-weight:500; cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent; } .tistory-album-play { background:#181a1f; color:#fff; } .tistory-album-shuffle { background:#f0f1f3; color:#202226; } /* ===================================================== 곡 목록 ===================================================== */ .tistory-track-list { display:flex; flex-direction:column; } .tistory-track { min-height:51px; display:grid; grid-template-columns:31px 1fr 25px; align-items:center; gap:7px; border-bottom:1px solid #f0f0f1; } .tistory-track-number { font-size:10px; color:#72767d; } .tistory-track-info { min-width:0; } .tistory-track-name { font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tistory-track-meta { margin-top:3px; color:#92969c; font-size:8px; } .tistory-track-more { color:#999; font-size:10px; text-align:center; } .tistory-track.current { background:#f5f5f6; border-radius:9px; padding:0 5px; border-bottom:0; } .tistory-track.current .tistory-track-number { color:#17191d; font-weight:600; } /* ===================================================== 미니 플레이어 ===================================================== */ .tistory-mini-player { position:absolute; left:7px; right:7px; bottom:66px; height:57px; background:#181b21; border-radius:17px; color:#fff; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:9px; padding:7px 8px; box-shadow:0 8px 20px rgba(0,0,0,.17); z-index:5; } .tistory-mini-cover { width:42px; height:42px; border-radius:10px; overflow:hidden; background:#555; } .tistory-mini-cover img { width:100%; height:100%; object-fit:cover; } .tistory-mini-info { min-width:0; } .tistory-mini-title { font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tistory-mini-artist { font-size:8px; color:#999; margin-top:3px; } .tistory-mini-buttons { display:flex; align-items:center; gap:10px; } .tistory-mini-heart { font-size:18px; } .tistory-mini-pause { width:37px; height:37px; border-radius:11px; background:#fff; color:#17191d; display:flex; align-items:center; justify-content:center; font-size:12px; } /* ===================================================== 팝업 ===================================================== */ .tistory-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.28); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:.2s; z-index:99999; } .tistory-modal-bg.show { opacity:1; visibility:visible; pointer-events:auto; } .tistory-modal { position:relative; z-index:100000; width:min(390px,100%); background:#fff; border-radius:22px; padding:25px 24px 22px; box-shadow:0 20px 60px rgba(0,0,0,.18); } .tistory-modal-label { font-size:10px; color:#92959a; margin-bottom:7px; } .tistory-modal-title { font-size:22px; font-weight:700; margin-bottom:17px; } .tistory-modal-text { font-size:11px; line-height:1.8; color:#4e5156; white-space:pre-line; } .tistory-modal-close { width:100%; height:39px; border:0; border-radius:11px; background:#f0f1f3; font-family:inherit; font-size:11px; margin-top:21px; cursor:pointer; } /* ===================================================== 모바일 ★ 정확히 315px ===================================================== */ @media(max-width:500px) { .tistory-music-wrap { width:315px !important; min-width:315px !important; max-width:315px !important; height:720px; margin:20px auto !important; left:auto !important; right:auto !important; transform:none !important; } .tistory-phone-screen { width:315px !important; min-width:315px !important; max-width:315px !important; height:720px !important; border:7px solid #f8f8f8; border-radius:42px; box-shadow:0 25px 55px rgba(0,0,0,.11); } } /* ===================================================== 아주 작은 화면 ===================================================== */ @media(max-width:330px) { .tistory-music-wrap { width:315px !important; min-width:315px !important; max-width:315px !important; margin-left:auto !important; margin-right:auto !important; } } </style> </div> <div class="tistory-music-wrap"><!-- ===================================================== MUSIC PLAYER ===================================================== --> <div id="tistoryMusicScreen" class="tistory-phone-screen"> <div class="tistory-status-bar"><span>3:13</span> <div class="tistory-status-icons"><span>▮▮▮</span> <span>⌁</span> <span>▱</span></div> </div> <header class="tistory-header"> <div id="tistoryBackToPlaylist" class="tistory-header-left">&rsaquo;</div> <div class="tistory-header-title">Now Playing</div> <div class="tistory-header-right">♫</div> </header><main class="tistory-now-playing"> <div class="tistory-album"><img src="https://blog.kakaocdn.net/dna/bCpfTy/dJMcadKceVO/AAAAAAAAAAAAAAAAAAAAAH8UB7XANdxX3y4DbpVGfmLOJMRXXPTtmxYXV2XrRZx2/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&amp;expires=1790780399&amp;allow_ip=&amp;allow_referer=&amp;signature=zcW7vQ2AQBGbr30SJcwfxiZYzb8%3D" alt="Album Cover" /></div> <section class="tistory-song-area"> <div class="tistory-song-actions"><button type="button">♡</button> <button type="button">&middot;&middot;&middot;</button></div> <div class="tistory-song-title">ACTOR</div> <div class="tistory-artist">友成空</div> </section> <section class="tistory-player"> <div class="tistory-progress-bar"> <div class="tistory-progress-fill">&nbsp;</div> </div> <div class="tistory-time"><span>1:04</span> <span>3:03</span></div> <div class="tistory-controls"><button class="tistory-control small" type="button"> ⇄ </button> <button class="tistory-control" type="button"> |◀ </button> <button class="tistory-control tistory-play" type="button"> ▶ </button> <button class="tistory-control" type="button"> ▶| </button> <button class="tistory-control small" type="button"> ↻ </button></div> </section> </main><nav class="tistory-bottom-nav"> <div class="tistory-nav-item active"> <div class="tistory-nav-icon">⌂</div> <div>Home</div> </div> <div class="tistory-nav-item"> <div class="tistory-nav-icon">⌕</div> <div>Search</div> </div> <div class="tistory-nav-item"> <div class="tistory-nav-icon">♫</div> <div>Library</div> </div> <div class="tistory-nav-item"> <div class="tistory-nav-icon">♡</div> <div>Playlist</div> </div> </nav></div> <!-- ===================================================== PROMISE ===================================================== --> <div id="tistoryPlaylistScreen" class="tistory-phone-screen active"> <div class="tistory-status-bar"><span>3:13</span> <div class="tistory-status-icons"><span>▮▮▮</span> <span>⌁</span> <span>▱</span></div> </div> <header class="tistory-header"> <div id="tistoryBackToMusic" class="tistory-header-left">&lsaquo;</div> <div>&nbsp;</div> <div class="tistory-header-right">⌕</div> </header><main class="tistory-album-page"> <section class="tistory-album-header"> <div class="tistory-small-album"><img src="https://blog.kakaocdn.net/dna/d2ZeHx/dJMcaiSqcC3/AAAAAAAAAAAAAAAAAAAAAHWXkPfwUoNNzi0tq0iqYAiyPU9yTo_X9QgOaVCfia8U/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&amp;expires=1790780399&amp;allow_ip=&amp;allow_referer=&amp;signature=6WQ5EtWRxACcjbLQZV%2BA%2BCyw5Vs%3D" alt="Album Cover" /></div> <div class="tistory-album-info"> <div class="tistory-album-type">Album &middot; 8 songs &middot; 2026</div> <div class="tistory-album-title">Promise</div> <div class="tistory-click-text">Click to button!</div> <div class="tistory-album-icons"><button type="button">♡</button> <button type="button">⇩</button> <button type="button">&middot;&middot;&middot;</button></div> </div> </section> <!-- ★ PLAY / SHUFFLE --> <div class="tistory-album-buttons"><button id="tistoryPlayButton" class="tistory-album-play" type="button"> ▶ &nbsp; Play </button> <button id="tistoryShuffleButton" class="tistory-album-shuffle" type="button"> ⇄ &nbsp; Shuffle </button></div> <section class="tistory-track-list"> <div class="tistory-track"> <div class="tistory-track-number">01</div> <div class="tistory-track-info"> <div class="tistory-track-name">Set me free</div> <div class="tistory-track-meta">Syndrome &middot; 04:23</div> </div> <div class="tistory-track-more">&middot;&middot;&middot;</div> </div> <div class="tistory-track current"> <div class="tistory-track-number">♪</div> <div class="tistory-track-info"> <div class="tistory-track-name">ACTOR</div> <div class="tistory-track-meta">友成空 &middot; 3:03</div> </div> <div class="tistory-track-more">&middot;&middot;&middot;</div> </div> <div class="tistory-track"> <div class="tistory-track-number">03</div> <div class="tistory-track-info"> <div class="tistory-track-name">Normal</div> <div class="tistory-track-meta">友成空 &middot; 00:00</div> </div> <div class="tistory-track-more">&middot;&middot;&middot;</div> </div> <div class="tistory-track"> <div class="tistory-track-number">04</div> <div class="tistory-track-info"> <div class="tistory-track-name">点描の唄</div> <div class="tistory-track-meta">Mrs. GREEN APPLE &middot; 05:08</div> </div> <div class="tistory-track-more">&middot;&middot;&middot;</div> </div> <div class="tistory-track"> <div class="tistory-track-number">05</div> <div class="tistory-track-info"> <div class="tistory-track-name">夏音</div> <div class="tistory-track-meta">優里 &middot; 03:58</div> </div> <div class="tistory-track-more">&middot;&middot;&middot;</div> </div> <div class="tistory-track"> <div class="tistory-track-number">06</div> <div class="tistory-track-info"> <div class="tistory-track-name">奏</div> <div class="tistory-track-meta">SUKIMASWITCH &middot; 05:44</div> </div> <div class="tistory-track-more">&middot;&middot;&middot;</div> </div> </section> </main><!-- 미니 플레이어 --> <div class="tistory-mini-player"> <div class="tistory-mini-cover"><img src="https://blog.kakaocdn.net/dna/bCpfTy/dJMcadKceVO/AAAAAAAAAAAAAAAAAAAAAH8UB7XANdxX3y4DbpVGfmLOJMRXXPTtmxYXV2XrRZx2/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&amp;expires=1790780399&amp;allow_ip=&amp;allow_referer=&amp;signature=zcW7vQ2AQBGbr30SJcwfxiZYzb8%3D" alt="Album Cover" /></div> <div class="tistory-mini-info"> <div class="tistory-mini-title">ACTOR</div> <div class="tistory-mini-artist">友成空</div> </div> <div class="tistory-mini-buttons"><span class="tistory-mini-heart"> ♡ </span> <div class="tistory-mini-pause">Ⅱ</div> </div> </div> <nav class="tistory-bottom-nav"> <div class="tistory-nav-item"> <div class="tistory-nav-icon">⌂</div> <div>Home</div> </div> <div class="tistory-nav-item"> <div class="tistory-nav-icon">⌕</div> <div>Search</div> </div> <div class="tistory-nav-item active"> <div class="tistory-nav-icon">♫</div> <div>Library</div> </div> <div class="tistory-nav-item"> <div class="tistory-nav-icon">♡</div> <div>Playlist</div> </div> </nav></div> </div> <!-- ===================================================== 팝업 ===================================================== --> <div id="tistoryModalBg" class="tistory-modal-bg"> <div id="tistoryModal" class="tistory-modal"> <div id="tistoryModalLabel" class="tistory-modal-label">PLAY</div> <div id="tistoryModalTitle" class="tistory-modal-title">계정 성향</div> <div id="tistoryModalText" class="tistory-modal-text">&nbsp;</div> <button id="tistoryModalClose" class="tistory-modal-close" type="button"> 닫기 </button></div> </div> <script> (function() { function tistoryShowMusic() { var playlist = document.getElementById("tistoryPlaylistScreen"); var music = document.getElementById("tistoryMusicScreen"); if (!playlist || !music) return; playlist.classList.remove("active"); music.classList.add("active"); } function tistoryShowPlaylist() { var playlist = document.getElementById("tistoryPlaylistScreen"); var music = document.getElementById("tistoryMusicScreen"); if (!playlist || !music) return; music.classList.remove("active"); playlist.classList.add("active"); } function tistoryOpenModal(type) { var bg = document.getElementById("tistoryModalBg"); var label = document.getElementById("tistoryModalLabel"); var title = document.getElementById("tistoryModalTitle"); var text = document.getElementById("tistoryModalText"); if (!bg || !label || !title || !text) return; if (type === "play") { label.innerText = "PLAY"; title.innerText = "계정 성향"; text.innerText = `N (엔) 그 외 편하신 호칭 OK! ARCH SYNDROME ♥ 동담불가 극온리 성향 / 연결 후 성향 무관 1T1D 하고 있으며 저 또한 동일한 배려 바랍니다. 타임라인 내에 다른 신드롬 드림러가 있다면 연결 지양 부탁드립니다.`; } if (type === "shuffle") { label.innerText = "SHUFFLE"; title.innerText = "My lover...♡"; text.innerText = `ARCH - 산타, 밴스, 블루, 셰인, 윈터, 해일 FEALESS - 도브, 던, 제레미, 제스테 SERAPHIX - 에테르, 캐리온 BLUE FAIRY - 직살, 빠삐코 EOC - 베이퍼 @MEOM_MEO - 매그넘, 아르비테르, 에단, 키츠네 @OHNYU - ghnull @SUGAR - 사카이 리츠 ETC - 마사카도, 이공팔 소중한 인연이 있어 더 이상 받지 않습니다.`; } bg.classList.add("show"); } function tistoryCloseModal() { var bg = document.getElementById("tistoryModalBg"); if (!bg) return; bg.classList.remove("show"); } function tistoryInit() { var backToMusic = document.getElementById("tistoryBackToMusic"); var backToPlaylist = document.getElementById("tistoryBackToPlaylist"); var playButton = document.getElementById("tistoryPlayButton"); var shuffleButton = document.getElementById("tistoryShuffleButton"); var modalBg = document.getElementById("tistoryModalBg"); var modalClose = document.getElementById("tistoryModalClose"); /* 화면 이동 */ if (backToMusic) { backToMusic.addEventListener( "click", tistoryShowMusic ); } if (backToPlaylist) { backToPlaylist.addEventListener( "click", tistoryShowPlaylist ); } /* ★ PLAY 버튼 */ if (playButton) { playButton.addEventListener( "click", function(event) { event.preventDefault(); event.stopPropagation(); tistoryOpenModal("play"); } ); } /* ★ SHUFFLE 버튼 */ if (shuffleButton) { shuffleButton.addEventListener( "click", function(event) { event.preventDefault(); event.stopPropagation(); tistoryOpenModal("shuffle"); } ); } /* 팝업 닫기 */ if (modalClose) { modalClose.addEventListener( "click", function(event) { event.preventDefault(); event.stopPropagation(); tistoryCloseModal(); } ); } /* 팝업 바깥 클릭 */ if (modalBg) { modalBg.addEventListener( "click", function(event) { if (event.target === modalBg) { tistoryCloseModal(); } } ); } } /* * Tistory에서 스크립트 실행 시점이 달라지는 경우까지 대응 */ if (document.readyState === "loading") { document.addEventListener( "DOMContentLoaded", tistoryInit ); } else { tistoryInit(); } })(); </script> love my actor https://prominence.tistory.com/notice/4 Sun, 20 Sep 2026 19:03:46 +0900