https://jsy-spring.tistory.com/ jsy-spring 님의 블로그 입니다. ko Sat, 4 Apr 2026 04:09:45 +0900 TISTORY 100 jsy-spring https://jsy-spring.tistory.com/14 <div> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; } /* ZUTOMAYO 테마 색상 - 포스터 색상에 맞춤 (초록색) */ :root { --oor-red: #4CAF50; --oor-orange: #66BB6A; --oor-dark-red: #388E3C; --oor-yellow: #81C784; --oor-gray: #2E7D32; } /* 플로팅 네비게이션 */ .floating-nav { position: fixed; right: 12px; top: 20px; z-index: 999; } .nav-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(76, 175, 80, 0.4); user-select: none; transition: all 0.3s ease; } .nav-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6); } .nav-menu { position: absolute; right: 0; top: 55px; width: 260px; background: rgba(20, 20, 20, 0.98); border: 2px solid var(--oor-red); border-radius: 12px; backdrop-filter: blur(6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(-10px); } .nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .nav-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(76, 175, 80, 0.3); } .nav-title { color: var(--oor-red); font-weight: 700; } .nav-close { background: rgba(255, 255, 255, 0.1); border: 0; color: #fff; font-size: 16px; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .nav-close:hover { background: var(--oor-red); } .nav-items { display: grid; padding: 8px; gap: 4px; max-height: 60vh; overflow: auto; } .nav-item { display: block; text-decoration: none; color: #eaeaea; font-size: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(40, 40, 40, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease; } .nav-item:hover { background: rgba(76, 175, 80, 0.12); border-color: var(--oor-red); transform: translateX(3px); } .nav-item.active { background: rgba(231, 76, 60, 0.2); border-color: var(--oor-red); color: var(--oor-red); } /* 맨 위로 버튼 */ .scroll-to-top { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); border-radius: 50%; color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 998; font-weight: 600; border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .scroll-to-top.visible { opacity: 1; visibility: visible; } .scroll-to-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4); } /* 스크롤 진행바 */ .scroll-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.06); z-index: 1000; } .scroll-progress { height: 100%; width: 0%; background: linear-gradient(90deg, var(--oor-red), var(--oor-orange)); transition: width 0.1s ease; } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 400px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--oor-red); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--oor-red); } .mobile-subtitle { font-size: 1.125rem; color: var(--oor-orange); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--oor-red); background: rgba(231, 76, 60, 0.1); } .info-card.venue { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--oor-red); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--oor-orange); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--oor-orange); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(76, 175, 80, 0.2); color: var(--oor-red); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(76, 175, 80, 0.3); } .song-chip.mega-hit { background: rgba(243, 156, 18, 0.2); color: var(--oor-orange); border-color: var(--oor-orange); font-weight: 600; } /* 한국 인연 */ .korea-connection { margin-top: 1.5rem; background: rgba(20, 20, 20, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .connection-title { font-size: 1rem; color: var(--oor-red); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .connection-timeline { display: grid; gap: 0.75rem; } .connection-item { padding: 0.75rem; border-radius: 8px; align-items: center; } .connection-item.past { background: rgba(78, 205, 196, 0.1); border-left: 4px solid #4ecdc4; } .connection-item.future { background: rgba(243, 156, 18, 0.1); border-left: 4px solid var(--oor-orange); } .connection-icon { font-size: 1.25rem; } .connection-date { font-size: 0.875rem; color: var(--oor-orange); font-weight: 600; margin-bottom: 0.25rem; } .connection-event { font-size: 0.9rem; color: #ffffff; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--oor-red); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .stat { background: rgba(243, 156, 18, 0.2); color: var(--oor-orange); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .stat-divider { color: #666; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .set-title { font-size: 1rem; color: var(--oor-red); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: #4ecdc4; } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(231, 76, 60, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .song-row.mega-hit { border: 2px solid var(--oor-red); background: rgba(76, 175, 80, 0.15); } .song-row.hit { border: 1px solid var(--oor-red); background: rgba(76, 175, 80, 0.1); } .song-row.acoustic { border: 1px solid #9b59b6; background: rgba(155, 89, 182, 0.1); } .song-row.climax { border: 1px solid #ffa500; background: rgba(255, 165, 0, 0.1); } .song-row.finale { border: 1px solid #9c88ff; background: rgba(156, 136, 255, 0.1); } .song-row.encore-song { background: rgba(78, 205, 196, 0.1); border: 1px solid #4ecdc4; } .song-num { background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, #4ecdc4, #9c88ff) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid #4ecdc4; } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(243, 156, 18, 0.1); border-radius: 10px; border: 1px solid var(--oor-orange); } .note-icon { font-size: 1.5rem; } .note-title { font-size: 1rem; font-weight: 600; color: var(--oor-orange); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .booking-card-main { background: rgba(243, 156, 18, 0.1); border: 2px solid var(--oor-orange); border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } .booking-badge { background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.25rem; color: var(--oor-orange); font-weight: 700; } /* 좌석 카드 */ .seat-cards { display: grid; gap: 1rem; margin: 1rem 0; } .seat-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .seat-card.vip { border-color: #f1c40f; background: rgba(241, 196, 15, 0.1); } .seat-card.standing { border-color: var(--oor-red); background: rgba(231, 76, 60, 0.1); } .seat-card.seated { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .seat-card.general { border-color: #95a5a6; background: rgba(149, 165, 166, 0.1); } .seat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .seat-icon { font-size: 1.5rem; } .seat-name { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .seat-location { font-size: 0.875rem; color: #a0a0a0; } .seat-price { font-size: 1.25rem; font-weight: 700; color: var(--oor-red); } .seat-desc { color: #ffffff; font-size: 0.9rem; } /* 좌석 배치도 */ .seating-chart { margin: 1.5rem 0; } .chart-container { text-align: center; background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .seating-chart-image { width: 100%; max-width: 500px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .booking-link { display: inline-block; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; padding: 0.75rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; margin-top: 0.5rem; transition: all 0.3s ease; } .booking-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4); } /* 예매처 */ .platform-list { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .platform-card.pending { opacity: 0.7; background: rgba(60, 60, 60, 0.5); border-color: var(--oor-orange); } .platform-info { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-status.pending { background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } /* 공연장 정보 */ .venue-overview { margin-bottom: 1.5rem; } .venue-main-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--oor-red); border-radius: 10px; padding: 1.5rem; } .venue-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .venue-icon { font-size: 2rem; color: var(--oor-red); } .venue-name { font-size: 1.5rem; font-weight: 700; color: var(--oor-red); margin-bottom: 0.5rem; } .venue-address { color: #a0a0a0; font-size: 1rem; } .venue-specs { display: grid; gap: 0.5rem; } .spec-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .spec-label { color: #a0a0a0; font-weight: 600; } .spec-value { color: #ffffff; font-weight: 600; } .facilities-title { font-size: 1.125rem; color: var(--oor-orange); margin-bottom: 1rem; font-weight: 600; } .facilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .facility-item { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .facility-icon { font-size: 1.5rem; color: var(--oor-orange); } .facility-name { font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .facility-desc { font-size: 0.875rem; color: #a0a0a0; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 200px; } .transport-panel { display: none; } .transport-panel.active { display: block; } /* 지하철 가이드 */ .subway-guide { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; } .route-card { background: rgba(76, 175, 80, 0.1); border: 2px solid var(--oor-red); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; position: relative; } .route-info { display: flex; align-items: center; justify-content: space-between; } .subway-lines { display: flex; gap: 0.5rem; } .subway-line { padding: 0.5rem 1rem; border-radius: 15px; font-weight: 700; color: white; font-size: 0.9rem; } .subway-line.line2 { background: #00A84D; } .subway-line.line9 { background: #BDB092; } .station-name { font-size: 1.25rem; font-weight: 700; color: var(--oor-red); margin-bottom: 0.25rem; } .exit-info { font-size: 0.9rem; color: #ffffff; } .walk-info { text-align: center; } .walk-time { font-size: 2rem; font-weight: 800; color: var(--oor-orange); display: block; line-height: 1; } .walk-text { font-size: 0.875rem; color: #a0a0a0; } .route-badge { position: absolute; top: -8px; right: 1rem; background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } /* 나머지 스타일들과 JavaScript는 기존과 유사하게 작성 */ /* ... (버스, 주차, 관람규칙 등의 스타일들) ... */ /* 모바일 최적화 */ @media (max-width: 480px) { .facilities-grid { grid-template-columns: 1fr; } .concert-main-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } } </style> </div> <script> // 전역 변수 let navMenu, scrollToTopBtn, scrollProgress; // 네비게이션 토글 function toggleNav() { if (navMenu) { navMenu.classList.toggle('active'); } } // 섹션으로 스크롤 function scrollToSection(targetId) { const element = document.getElementById(targetId); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); if (navMenu) { navMenu.classList.remove('active'); } updateActiveNav(targetId); } } // TOP 버튼 클릭 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); updateActiveNav('top'); } // 활성 네비게이션 업데이트 function updateActiveNav(activeId) { const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.classList.remove('active'); const target = item.getAttribute('data-target'); if (target === activeId) { item.classList.add('active'); } }); } // 교통편 탭 초기화 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function () { const targetTab = this.dataset.tab; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 스크롤 이벤트 핸들러 function handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; if (scrollProgress) { scrollProgress.style.width = scrollPercent + '%'; } if (scrollToTopBtn) { if (scrollTop > 300) { scrollToTopBtn.classList.add('visible'); } else { scrollToTopBtn.classList.remove('visible'); } } const sections = ['info', 'artist', 'setlist', 'ticket', 'venue', 'location', 'rules', 'storage', 'recommendation', 'contact']; let currentSection = 'top'; for (const sectionId of sections) { const section = document.getElementById(sectionId); if (section && scrollTop + 200 >= section.offsetTop) { currentSection = sectionId; } } updateActiveNav(currentSection); } // 이벤트 리스너 등록 function setupEventListeners() { const navToggle = document.getElementById('navToggle'); if (navToggle) { navToggle.addEventListener('click', toggleNav); } const navClose = document.getElementById('navClose'); if (navClose) { navClose.addEventListener('click', toggleNav); } const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('data-target'); if (targetId) { scrollToSection(targetId); } }); }); if (scrollToTopBtn) { scrollToTopBtn.addEventListener('click', scrollToTop); } document.addEventListener('click', function (e) { const floatingNav = document.querySelector('.floating-nav'); if (floatingNav && !floatingNav.contains(e.target) && navMenu) { navMenu.classList.remove('active'); } }); window.addEventListener('scroll', handleScroll, { passive: true }); } // 초기화 function init() { navMenu = document.getElementById('navMenu'); scrollToTopBtn = document.getElementById('scrollToTop'); scrollProgress = document.getElementById('scrollProgress'); setupEventListeners(); initTransportTabs(); handleScroll(); console.log(' ZUTOMAYO INTENSE II 「坐・ZOMBIE CRAB LABO」 in Seoul 페이지가 로드되었습니다!'); console.log(' ️ 고려대학교 화정체육관'); console.log(' 일반 예매: 12월 23일(화) 20:00 / 추가공연: 1월 12일(월) 20:00'); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('error', function (e) { console.error('페이지 로딩 중 오류 발생:', e.message); }); </script> <div class="concert-post mobile-optimized"><!-- 네비게이션 & 스크롤 UI --> <div id="floatingNav" class="floating-nav"> <div id="navToggle" class="nav-toggle"><span class="nav-icon"> </span> <span class="nav-text">메뉴</span></div> <div id="navMenu" class="nav-menu"> <div class="nav-header"><span class="nav-title"> ZUTOMAYO</span> <button id="navClose" class="nav-close">✕</button> </div> <div class="nav-items"><a class="nav-item" href="#info" data-target="info"> 기본 정보</a> <a class="nav-item" href="#artist" data-target="artist"> 아티스트 소개</a> <a class="nav-item" href="#setlist" data-target="setlist"> 예상 세트리스트</a> <a class="nav-item" href="#ticket" data-target="ticket"> 티켓 정보</a> <a class="nav-item" href="#venue" data-target="venue"> ️ 공연장 정보</a> <a class="nav-item" href="#location" data-target="location"> 교통편</a> <a class="nav-item" href="#rules" data-target="rules">⚠️ 관람 규칙</a> <a class="nav-item" href="#storage" data-target="storage"> 물품보관</a> <a class="nav-item" href="#recommendation" data-target="recommendation"> 추천 포인트</a> <a class="nav-item" href="#contact" data-target="contact"> 문의 정보</a></div> </div> </div> <div id="scrollToTop" class="scroll-to-top"><span>⬆️</span> <div style="font-size: 10px; margin-top: 2px;">TOP</div> </div> <div class="scroll-progress-bar"> <div id="scrollProgress" class="scroll-progress">&nbsp;</div> </div> <!-- 메인 포스터 --> <div id="top" class="poster-container"><img class="main-poster" src="https://i.ifh.cc/Fv9nQt.webp" alt="ZUTOMAYO INTENSE II 坐・ZOMBIE CRAB LABO in Seoul" /></div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> ZUTOMAYO INTENSE II「坐・ZOMBIE CRAB LABO」 in Seoul</h1> <!-- 기본 정보 섹션 --> <div id="info" class="info-section"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">계속 한밤중이면 좋을 텐데. (ZUTOMAYO)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연제목</div> <div class="info-value">ZUTOMAYO INTENSE II「坐・ZOMBIE CRAB LABO」 in Seoul</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연일정</div> <div class="info-value">2026년 3월 14일(토) 오후 6시<br>2026년 3월 15일(일) 오후 6시 (추가)</div> </div> </div> <div class="info-card"> <div class="info-icon">⏰</div> <div class="info-content"> <div class="info-label">공연시간</div> <div class="info-value">2026년 3월 14일(토) / 15일(일) 오후 6시 (18:00) - 러닝타임 90분</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">고려대학교 화정체육관</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">서울특별시 성북구 안암로 145</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">6호선 안암역 2번 출구 (도보 15분) / 고려대역 1번 출구 (도보 25분)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">8세 이상 관람가</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 아티스트 소개 --> <div id="artist" class="artist-section"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16">일본의 락 밴드 <b>계속 한밤중이면 좋을 텐데.(ZUTOMAYO)</b>가 2026년 3월 14일, 15일 고려대학교 화정체육관에서 <ZUTOMAYO INTENSE II「坐・ZOMBIE CRAB LABO」 in Seoul> 내한 공연을 개최한다. 이번 공연은 ZUTOMAYO의 두 번째 내한 공연으로, 지난 2024년 6월 예스24 라이브홀에서 열린 첫 내한 공연에 이어 다시 찾는 한국 무대다.</p> <p data-ke-size="size16">ZUTOMAYO는 독특한 사운드와 감성으로 일본 록씬에서 큰 인기를 얻고 있는 밴드다. 밴드명 '계속 한밤중이면 좋을 텐데.'는 밤의 감성과 자유로움을 담고 있으며, 그들의 음악은 록, 팝, 일렉트로닉 등 다양한 장르를 넘나드는 독창적인 스타일로 유명하다.</p> <p data-ke-size="size16">이번 공연은 'INTENSE II' 시리즈의 일환으로, '坐・ZOMBIE CRAB LABO'라는 독특한 컨셉으로 진행된다. 첫 내한 공연에서 보여준 강렬한 라이브 퍼포먼스와 팬들의 열렬한 호응을 바탕으로, 이번 공연에서는 더욱 완성도 높은 무대를 선보일 예정이다.</p> <p data-ke-size="size16">ZUTOMAYO의 대표곡인 '秒針を噛む(초침을 깨물다)', 'ミラーチューン(미러 튠)', '残機(잔기)' 등 히트곡들과 함께, 첫 내한 공연에서 선보였던 세트리스트를 기반으로 한 풍성한 무대가 기대된다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">장르</span></div> <div class="artist-value">록, 팝, 일렉트로닉</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">활동</span></div> <div class="artist-value">록 밴드</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">특징</span></div> <div class="artist-value">독특한 사운드와 감성</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">대표곡</span> </div> <div class="artist-value">あいつら全員同窓会, 秒針を噛む</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title" data-ke-size="size20"> 대표곡</h4> <div class="songs-grid"><span class="song-chip mega-hit"> 秒針を噛む (초침을 깨물다)</span> <span class="song-chip mega-hit"> ミラーチューン (미러 튠)</span> <span class="song-chip"> 残機 (잔기)</span> <span class="song-chip"> お勉強しといてよ (공부해 줘)</span> <span class="song-chip"> サターン (새턴)</span></div> </div> <div class="korea-connection"> <h4 class="connection-title" data-ke-size="size20"> 한국과의 인연</h4> <div class="connection-timeline"> <div class="connection-item past"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2024년 6월</div> <div class="connection-event">첫 내한공연 - 예스24 라이브홀 (6월 15일~16일)</div> </div> </div> <div class="connection-item future"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2026년 3월</div> <div class="connection-event">두 번째 내한공연 "INTENSE II" - 고려대학교 화정체육관에서 팬들과 만남</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 예상 세트리스트 --> <div id="setlist" class="setlist-section"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle" data-ke-size="size23"> ZUTOMAYO INTENSE IN SEOUL SET LIST</h3> <div class="setlist-stats"><span class="stat">2024년 6월 예스24 라이브홀 기준</span> <span class="stat-divider">&bull;</span> <span class="stat">17곡</span></div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title" data-ke-size="size20"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"><span class="song-num">01</span> <div class="song-info"> <div class="song-name">お勉強しといてよ (공부해 줘)</div> <div class="song-desc"></div> </div> </div> <div class="song-row hit"><span class="song-num">02</span> <div class="song-info"> <div class="song-name">ヒューマノイド(ShortVer.) (휴머노이드)</div> <div class="song-desc"></div> </div> </div> <div class="song-row hit"><span class="song-num">03</span> <div class="song-info"> <div class="song-name">勘冴えて悔しいわ(ShortVer.) (감이 좋아서 분해)</div> <div class="song-desc"></div> </div> </div> <div class="song-row"><span class="song-num">04</span> <div class="song-info"> <div class="song-name">ハゼ馳せる果てるまで (망둥이 달린다 끝까지)</div> <div class="song-desc"></div> </div> </div> <div class="song-row"><span class="song-num">05</span> <div class="song-info"> <div class="song-name">消えてしまいそうです (사라져 버릴 것 같아요)</div> <div class="song-desc"></div> </div> </div> <div class="song-row"><span class="song-num">06</span> <div class="song-info"> <div class="song-name">花一匁 (하나이치몬메)</div> <div class="song-desc"></div> </div> </div> <div class="song-row"><span class="song-num">07</span> <div class="song-info"> <div class="song-name">正しくなれない (올바르게 될 수 없어)</div> <div class="song-desc"></div> </div> </div> <div class="song-row"><span class="song-num">08</span> <div class="song-info"> <div class="song-name">Blues in the Closet</div> <div class="song-desc"></div> </div> </div> <div class="song-row acoustic"><span class="song-num">09</span> <div class="song-info"> <div class="song-name">不法侵入(AcousticVer.) (불법침입) - 15일</div> <div class="song-desc">Ham(AcousticVer.) (햄) - 16일 / 관객 호응으로 택1</div> </div> </div> <div class="song-row"><span class="song-num">10</span> <div class="song-info"> <div class="song-name">暗く黒く(선풍금Ver.) (어둡게 검게)</div> <div class="song-desc"></div> </div> </div> <div class="song-row mega-hit"><span class="song-num">11</span> <div class="song-info"> <div class="song-name">秒針を噛む (초침을 깨물다)</div> <div class="song-desc"></div> </div> </div> <div class="song-row"><span class="song-num">12</span> <div class="song-info"> <div class="song-name">MILABO</div> <div class="song-desc"></div> </div> </div> <div class="song-row mega-hit"><span class="song-num">13</span> <div class="song-info"> <div class="song-name">ミラーチューン(선풍금Ver.) (미러 튠)</div> <div class="song-desc"></div> </div> </div> <div class="song-row"><span class="song-num">14</span> <div class="song-info"> <div class="song-name">残機 (잔기)</div> <div class="song-desc"></div> </div> </div> <div class="song-row"><span class="song-num">15</span> <div class="song-info"> <div class="song-name">嘘じゃない (거짓이 아니야)</div> <div class="song-desc"></div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title" data-ke-size="size20"> 앙코르</h4> <div class="songs-list-mobile encore"> <div class="song-row encore-song"><span class="song-num encore-num">EN 1</span> <div class="song-info"> <div class="song-name">サターン(AcousticVer.) (새턴)</div> <div class="song-desc"></div> </div> </div> <div class="song-row encore-song"><span class="song-num encore-num">EN 2</span> <div class="song-info"> <div class="song-name">あいつら全員同窓会 (저 녀석들 전원 동창회)</div> <div class="song-desc"></div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon"> </div> <div class="note-content"> <div class="note-title">세트리스트 안내</div> <div class="note-desc">2024년 6월 예스24 라이브홀 공연 기준 세트리스트입니다. 이번 공연에서는 더욱 풍성한 무대를 선보일 예정입니다!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 티켓 정보 --> <div id="ticket" class="ticket-section"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매 일정</h3> <div class="booking-card-main"> <div class="booking-badge"> 선예매</div> <div class="booking-content"> <div class="booking-title">선예매 오픈</div> <div class="booking-datetime">2025년 12월 19일(금) 18:00</div> </div> </div> <div class="booking-card-main" style="margin-top: 1rem;"> <div class="booking-badge"> 일반 예매</div> <div class="booking-content"> <div class="booking-title">일반 예매 오픈</div> <div class="booking-datetime">2025년 12월 23일(화) 20:00</div> </div> </div> <h3 class="mobile-subtitle" data-ke-size="size23" style="margin-top: 1.5rem; border-top: 1px dashed rgba(255,255,255,0.2); padding-top: 1.5rem;"> 추가 공연 예매 일정 (3/15 공연)</h3> <div class="booking-card-main"> <div class="booking-badge"> 추가 선예매</div> <div class="booking-content"> <div class="booking-title">선예매 오픈</div> <div class="booking-datetime">2026년 1월 9일(금) 18:00</div> </div> </div> <div class="booking-card-main" style="margin-top: 1rem;"> <div class="booking-badge"> 추가 일반 예매</div> <div class="booking-content"> <div class="booking-title">일반 예매 오픈</div> <div class="booking-datetime">2026년 1월 12일(월) 20:00</div> </div> </div> </div> <!-- 가격 및 좌석 --> <div class="price-seating"> <h3 class="mobile-subtitle" data-ke-size="size23"> 가격 정보</h3> <div class="seat-cards"> <div class="seat-card vip" style="text-align: center; padding: 2rem;"> <div class="seat-price" style="font-size: 2rem; font-weight: 800; color: var(--oor-red);">전석 138,000원</div> </div> </div> </div> <!-- 좌석 배치도 --> <div class="seating-chart"> <h3 class="mobile-subtitle" data-ke-size="size23"> 좌석 배치도</h3> <div class="chart-container"> <img class="seating-chart-image" src="https://i.ifh.cc/MK7Kzt.png" alt="ZUTOMAYO INTENSE II 좌석 배치도" /> </div> </div> <!-- 타임테이블 --> <div class="seating-chart" style="margin-top: 1.5rem;"> <h3 class="mobile-subtitle" data-ke-size="size23">⏰ 타임테이블</h3> <div class="chart-container"> <img class="seating-chart-image" src="https://i.ifh.cc/q4ToKn.jpg" alt="ZUTOMAYO INTENSE II 타임테이블" /> </div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매처</h3> <div class="platform-list"> <div class="platform-card"> <div class="platform-info"><span class="platform-icon"> </span> <div class="platform-details"> <h4 class="platform-name" data-ke-size="size20">멜론 티켓</h4> <div class="platform-note">12월 23일(화) 20:00 오픈</div> </div> <span class="platform-status pending">예매 대기</span> </div> <a href="https://ticket.melon.com/performance/index.htm?prodId=212444" target="_blank" class="platform-link" style="margin-bottom: 0.5rem; display: block; text-align: center;">3/14 공연 예매 페이지 →</a> <a href="https://ticket.melon.com/performance/index.htm?prodId=212537" target="_blank" class="platform-link" style="display: block; text-align: center;">3/15 추가공연 예매 페이지 →</a> </div> </div> </div> <!-- 티켓 주의사항 --> <div class="ticket-warnings"> <h3 class="mobile-subtitle" data-ke-size="size23">⚠️ 예매 주의사항</h3> <div class="warning-list"> <div class="warning-item critical"><span class="warning-icon"> </span> <div class="warning-text"><b>선예매:</b> 2025년 12월 19일(금) 18:00 (1인 2매 제한)</div> </div> <div class="warning-item critical"><span class="warning-icon"> </span> <div class="warning-text"><b>일반 예매:</b> 2025년 12월 23일(화) 20:00 (1인 3매 제한)</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>관람 등급:</b> 8세 이상 관람가</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>예매처:</b> 멜론 티켓 (단독 예매)</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>티켓 가격:</b> 전석 138,000원</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 공연장 정보 --> <div id="venue" class="venue-section"> <h2 class="section-title" data-ke-size="size26"> ️ 공연장 정보</h2> <div class="venue-overview"> <div class="venue-main-card"> <div class="venue-header"><span class="venue-icon"> ️</span> <div class="venue-details"> <h3 class="venue-name" data-ke-size="size23">고려대학교 화정체육관</h3> <div class="venue-address">서울특별시 성북구 안암로 145</div> </div> </div> <div class="venue-specs"> <div class="spec-item"><span class="spec-label">위치:</span> <span class="spec-value">고려대학교 캠퍼스 내</span></div> <div class="spec-item"><span class="spec-label">특징:</span> <span class="spec-value">대학 체육관 시설</span> </div> <div class="spec-item"><span class="spec-label">교통:</span> <span class="spec-value">6호선 안암역 2번 출구 (도보 15분)</span> </div> </div> </div> </div> <div class="venue-facilities"> <h4 class="facilities-title" data-ke-size="size20"> 시설 안내</h4> <div class="facilities-grid"> <div class="facility-item"><span class="facility-icon"> ️</span> <div class="facility-info"> <div class="facility-name">체육관</div> <div class="facility-desc">대학 체육관 시설</div> </div> </div> <div class="facility-item"><span class="facility-icon"> </span> <div class="facility-info"> <div class="facility-name">화장실</div> <div class="facility-desc">체육관 내 화장실</div> </div> </div> <div class="facility-item"><span class="facility-icon"> </span> <div class="facility-info"> <div class="facility-name">물품보관소</div> <div class="facility-desc">체육관 내 운영</div> </div> </div> <div class="facility-item"><span class="facility-icon">♿</span> <div class="facility-info"> <div class="facility-name">장애인 시설</div> <div class="facility-desc">휠체어석 제공</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 교통편 --> <div id="location" class="location-section"> <h2 class="section-title" data-ke-size="size26"> 교통편 안내</h2> <!-- 교통편 탭 --> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"><span class="tab-icon"> </span> <span class="tab-text">지하철</span></div> <div class="transport-tab" data-tab="bus"><span class="tab-icon"> </span> <span class="tab-text">버스</span></div> <div class="transport-tab" data-tab="parking"><span class="tab-icon"> </span> <span class="tab-text">자차</span> </div> </div> <!-- 교통편 내용 --> <div class="transport-content"> <!-- 지하철 탭 --> <div class="transport-panel active" data-panel="subway"> <div class="subway-guide"> <div class="route-main"> <div class="route-card best"> <div class="route-info"> <div class="subway-lines"><span class="subway-line line2" style="background: #915C2B;">6호선</span></div> <div class="station-info"> <h4 class="station-name" data-ke-size="size20">안암역</h4> <div class="exit-info">2번 출구 → 도보 15분</div> </div> <div class="walk-info"><span class="walk-time">15분</span> <span class="walk-text">도보</span></div> </div> <div class="route-badge"> 추천</div> </div> <div class="route-card"> <div class="route-info"> <div class="subway-lines"><span class="subway-line line2" style="background: #915C2B;">6호선</span></div> <div class="station-info"> <h4 class="station-name" data-ke-size="size20">고려대역</h4> <div class="exit-info">1번 출구 → 도보 25분</div> </div> <div class="walk-info"><span class="walk-time">25분</span> <span class="walk-text">도보</span></div> </div> </div> </div> <div class="walking-directions"> <h4 class="directions-title" data-ke-size="size20"> 지하철 이용 안내</h4> <div class="direction-steps"> <div class="direction-step"><span class="step-num">1</span> <span class="step-desc">6호선 안암역 또는 고려대역 하차</span></div> <div class="direction-step"><span class="step-num">2</span> <span class="step-desc">안암역 2번 출구 또는 고려대역 1번 출구로 나오기</span></div> <div class="direction-step"><span class="step-num">3</span> <span class="step-desc">고려대학교 캠퍼스 내 화정체육관으로 이동</span></div> <div class="direction-step"><span class="step-num">4</span> <span class="step-desc">안암역 기준 도보 약 15분, 고려대역 기준 도보 약 25분 소요</span></div> </div> <div class="transport-tip" style="margin-top: 1.5rem; padding: 1rem; background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%); border-radius: 12px; border-left: 4px solid var(--oor-orange);"> <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;"> <span style="font-size: 1.2rem;"> </span> <b style="color: var(--oor-dark-red);">꿀팁</b> </div> <p style="margin: 0; color: var(--oor-gray); font-size: 0.95rem;">안암역이 고려대역보다 가깝습니다. 공연 시작 1시간 전 도착을 권장합니다!</p> </div> </div> </div> </div> <!-- 버스 탭 --> <div class="transport-panel" data-panel="bus"> <div class="bus-guide"> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 지선버스 (초록)</h4> <div class="bus-route-card" style="background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border: 2px solid #4CAF50; padding: 1.5rem; border-radius: 16px; margin-bottom: 1rem;"> <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;"> <span class="bus-num main" style="background: #4CAF50; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold; font-size: 1.1rem;">2115</span> <span class="bus-num main" style="background: #4CAF50; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold; font-size: 1.1rem;">1111</span> </div> <div class="bus-stop-info"> <div class="stop-name" style="font-weight: bold; color: #2E7D32; margin-bottom: 0.5rem; font-size: 1.1rem;"> 지선버스 노선</div> <div class="stop-desc" style="color: #424242; line-height: 1.6;"> <div style="margin-bottom: 0.3rem;">→ 고려대학교 정류장 하차</div> <div style="font-size: 0.9rem; color: #666;">성북구 일대 운행</div> </div> </div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 간선버스 (파랑)</h4> <div class="bus-route-card" style="background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 2px solid #2196F3; padding: 1.5rem; border-radius: 16px; margin-bottom: 1rem;"> <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;"> <span class="bus-num branch" style="background: #2196F3; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;">273</span> </div> <div class="bus-stop-info"> <div class="stop-name" style="font-weight: bold; color: #1976D2; margin-bottom: 0.5rem; font-size: 1.1rem;"> 간선버스 노선</div> <div class="stop-desc" style="color: #424242; line-height: 1.6;"> <div style="margin-bottom: 0.3rem;">→ 고려대학교 정류장 하차</div> <div style="font-size: 0.9rem; color: #666;">서울 주요 지역 운행</div> </div> </div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 마을버스 (초록)</h4> <div class="bus-route-card" style="background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%); border: 2px solid #8BC34A; padding: 1.5rem; border-radius: 16px;"> <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;"> <span class="bus-num branch" style="background: #8BC34A; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;">성북04</span> <span class="bus-num branch" style="background: #8BC34A; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;">성북20</span> </div> <div class="bus-stop-info"> <div class="stop-name" style="font-weight: bold; color: #689F38; margin-bottom: 0.5rem; font-size: 1.1rem;"> 마을버스 노선</div> <div class="stop-desc" style="color: #424242; line-height: 1.6;"> <div style="margin-bottom: 0.3rem;">→ 고려대학교 정류장 하차</div> <div style="font-size: 0.9rem; color: #666;">성북구 지역 순환</div> </div> </div> </div> </div> <div class="transport-tip" style="margin-top: 1.5rem; padding: 1rem; background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%); border-radius: 12px; border-left: 4px solid var(--oor-orange);"> <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;"> <span style="font-size: 1.2rem;"> </span> <b style="color: var(--oor-dark-red);">버스 이용 팁</b> </div> <p style="margin: 0; color: var(--oor-gray); font-size: 0.95rem;">고려대학교 정류장에서 하차 후 캠퍼스 내 화정체육관으로 이동하세요!</p> </div> </div> </div> <!-- 자차 탭 --> <div class="transport-panel" data-panel="parking"> <div class="parking-guide"> <div class="parking-main" style="background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border: 2px solid #4CAF50; padding: 2rem; border-radius: 16px; margin-bottom: 1.5rem;"> <div class="parking-header" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;"> <span class="parking-icon" style="font-size: 2.5rem;"> ️</span> <h3 class="parking-title" data-ke-size="size23" style="color: #2E7D32; margin: 0;">고려대학교 주차장</h3> </div> <div class="parking-details"> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"> <span class="p-icon" style="font-size: 1.5rem;"> </span> <div class="p-content" style="color: #424242;"><b style="color: #2E7D32;">위치:</b> 서울특별시 성북구 안암로 145 (고려대학교 캠퍼스 내)</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"> <span class="p-icon" style="font-size: 1.5rem;"> </span> <div class="p-content" style="color: #424242;"><b style="color: #2E7D32;">수용:</b> 제한적 (대학 캠퍼스 주차장)</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"> <span class="p-icon" style="font-size: 1.5rem;"> </span> <div class="p-content" style="color: #424242;"><b style="color: #2E7D32;">요금:</b> 대학 주차장 요금 적용</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px;"> <span class="p-icon" style="font-size: 1.5rem;"> ️</span> <div class="p-content" style="color: #424242;"><b style="color: #2E7D32;">내비게이션:</b> "고려대학교 화정체육관" 또는 "고려대학교" 검색</div> </div> </div> </div> <div class="parking-route" style="background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); border: 2px solid #FF9800; padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem;"> <h4 style="color: #E65100; margin-top: 0; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;"> <span style="font-size: 1.5rem;"> ️</span> 자차 이용 경로 </h4> <div style="display: flex; flex-direction: column; gap: 0.8rem;"> <div style="display: flex; align-items: start; gap: 0.8rem;"> <span style="background: #FF9800; color: white; padding: 0.3rem 0.6rem; border-radius: 6px; font-weight: bold; font-size: 0.9rem;">서울</span> <div style="color: #424242; line-height: 1.6;"> <div style="font-weight: bold; margin-bottom: 0.3rem;">서울 도심 → 성북구 안암로 → 고려대학교</div> <div style="font-size: 0.9rem; color: #666;">소요시간: 교통 상황에 따라 변동</div> </div> </div> </div> </div> <div class="parking-warning" style="background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); border: 2px solid #f44336; padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem;"> <div class="warning-header" style="display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem;"> <span class="warning-icon" style="font-size: 1.8rem;">⚠️</span> <div class="warning-content"> <h4 data-ke-size="size20" style="color: #c62828; margin: 0;">주차 주의사항</h4> </div> </div> <ul style="list-style-type: disc; margin: 0; padding-left: 1.5rem; color: #424242; line-height: 1.8;" data-ke-list-type="disc"> <li><b>대학 캠퍼스 주차장은 제한적</b> - 공연 당일 주차 공간 부족 예상</li> <li>공연 시작 2시간 전 도착 권장</li> <li>대중교통 이용을 강력히 권장합니다</li> <li>주차 요금은 대학 주차장 요금 적용</li> </ul> </div> <div class="transport-recommendation" style="background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%); border: 2px solid #03A9F4; padding: 1.5rem; border-radius: 16px; display: flex; align-items: center; gap: 1rem;"> <span class="rec-icon" style="font-size: 2rem;">✅</span> <div class="rec-content" style="color: #01579B; line-height: 1.6;"><b style="font-size: 1.1rem;">대중교통 이용 추천</b><br /><span style="font-size: 0.95rem;">6호선 안암역이 가장 편리하고 빠릅니다!</span></div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 관람 규칙 --> <div id="rules" class="rules-section"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙 (필독)</h2> <!-- 촬영 금지 강조 --> <div class="photography-ban"> <div class="ban-header"><span class="ban-icon"> </span> <h3 class="ban-title" data-ke-size="size23">촬영 절대 금지</h3> <span class="ban-severity">즉시 퇴장</span> </div> <div class="ban-content"> <p data-ke-size="size16"><b>공연장 입장부터 퇴장까지</b> 모든 형태의 촬영 및 녹음 금지:</p> <ul class="ban-list" style="list-style-type: disc;" data-ke-list-type="disc"> <li>사진/동영상 촬영</li> <li>음성 녹음</li> <li>SNS 라이브 방송</li> <li>촬영 장비 반입</li> </ul> </div> <div class="ban-penalty"><b>⚠️ 위반 시:</b> 즉시 퇴장 조치 (재입장 및 환불 불가)</div> </div> <!-- 기타 금지사항 --> <div class="other-prohibitions"> <h3 class="mobile-subtitle" data-ke-size="size23"> 기타 금지사항</h3> <div class="prohibition-list"> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">레이저 포인터, 과도한 조명 기구</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">대형 응원 도구 (시야 방해)</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">외부 음식물 및 알코올</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">꽃다발, 선물 등 무대 투척물</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">위험물품 (폭죽, 스프레이 등)</div> </div> </div> </div> <!-- 허용사항 --> <div class="allowed-items"> <h3 class="mobile-subtitle" data-ke-size="size23">✅ 허용사항</h3> <div class="allowed-list"> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>생수:</b> 500mL 이하 페트병 (뚜껑 제거)</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>휴대폰:</b> 무음모드 필수 (촬영 금지)</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>응원도구:</b> 소형 응원봉, 타올 등</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 물품보관 --> <div id="storage" class="storage-section"> <h2 class="section-title" data-ke-size="size26"> 물품보관 안내</h2> <div class="storage-info"> <div class="storage-main"> <div class="storage-header"><span class="storage-icon"> </span> <h3 class="storage-title" data-ke-size="size23">물품보관소 이용 안내</h3> </div> <div class="storage-details"> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>위치:</b> 고려대학교 화정체육관 내</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>요금:</b> 공연장 안내 참고</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>이용:</b> 공연장 내 물품보관소 운영</div> </div> </div> <div style="margin-top: 1.5rem; text-align: center;"> <img src="https://i.ifh.cc/6dfvvr.png" alt="물품보관소 안내" style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);" /> </div> </div> <div class="storage-tips"> <h4 class="tips-title" data-ke-size="size20"> 이용 팁</h4> <div class="tip-cards"> <div class="tip-card"><span class="tip-emoji">⏰</span> <span class="tip-text">공연 1시간 전 보관</span></div> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">큰 가방은 미리 보관</span></div> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">공연장 안내 확인</span></div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 추천 포인트 --> <div id="recommendation" class="recommendation-section"> <h2 class="section-title" data-ke-size="size26"> 추천 포인트</h2> <div class="recommend-cards"> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">두 번째 내한 공연</div> <div class="recommend-desc">ZUTOMAYO의 두 번째 내한 공연! 첫 내한의 감동을 다시 만나요</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">INTENSE II 시리즈</div> <div class="recommend-desc">'坐・ZOMBIE CRAB LABO' 컨셉의 독특한 무대</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">강렬한 록 사운드</div> <div class="recommend-desc">독특한 사운드와 감성으로 유명한 ZUTOMAYO의 라이브</div> </div> <div class="recommend-card"> <div class="recommend-icon"> ️</div> <div class="recommend-title">고려대 화정체육관</div> <div class="recommend-desc">대학 체육관에서 만나는 특별한 라이브 경험</div> </div> </div> <div class="target-audience"> <h4 class="target-title" data-ke-size="size20"> 이런 분들께 추천!</h4> <div class="target-tags"><span class="target-tag">ZUTOMAYO 팬</span> <span class="target-tag">일본 록 애호가</span> <span class="target-tag">독특한 사운드 선호</span> <span class="target-tag">라이브 퍼포먼스 추구</span> <span class="target-tag">秒針を噛む 애호가</span> <span class="target-tag">밴드 음악 팬</span></div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 문의 정보 --> <div id="contact" class="contact-section"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">멜론 티켓 고객센터</div> <div class="contact-desc">예매 관련 문의</div> <div class="contact-hours">1899-0042</div> </div> </div> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">주최: LIVET</div> <div class="contact-desc">주관: 주식회사 원더로크</div> <div class="contact-hours">문의: 멜론티켓(1899-0042)</div> </div> </div> </div> <div class="official-links"> <h3 class="mobile-subtitle" data-ke-size="size23" style="color: var(--oor-dark-red); margin-bottom: 1.5rem;"> 공식 링크</h3> <div class="links-list" style="display: grid; gap: 1rem;"> <a class="link-item primary" href="https://ticket.melon.com/performance/index.htm?prodId=212444" target="_blank" rel="noopener" style="background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 1rem;"> <span class="link-icon" style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"> </span> <div class="link-info"> <div class="link-title" style="color: white; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">멜론 티켓 예매 안내</div> <div class="link-desc" style="color: rgba(255,255,255,0.9); font-size: 0.95rem;">12/23(화) & 추가 1/12(월) 20:00 오픈! </div> </div> </div> <span class="link-arrow" style="color: white; font-size: 1.5rem; font-weight: bold;">&rarr;</span> </a> <a class="link-item" href="https://zutomayo.net/intense2/" target="_blank" rel="noopener" style="background: linear-gradient(135deg, #66BB6A 0%, #81C784 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(102, 187, 106, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 1rem;"> <span class="link-icon" style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"> </span> <div class="link-info"> <div class="link-title" style="color: white; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">ZUTOMAYO 멤버십</div> <div class="link-desc" style="color: rgba(255,255,255,0.9); font-size: 0.95rem;">공식 웹사이트</div> </div> </div> <span class="link-arrow" style="color: white; font-size: 1.5rem; font-weight: bold;">&rarr;</span> </a> <a class="link-item" href="https://namu.wiki/w/ZUTOMAYO%20INTENSE%20II%20%E3%80%8C%E5%9D%90%E3%83%BBZOMBIE%20CRAB%20LABO%E3%80%8D" target="_blank" rel="noopener" style="background: linear-gradient(135deg, #81C784 0%, #A5D6A7 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(129, 199, 132, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 1rem;"> <span class="link-icon" style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"> </span> <div class="link-info"> <div class="link-title" style="color: #2E7D32; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">ZUTOMAYO INTENSE II 나무위키</div> <div class="link-desc" style="color: rgba(46, 125, 50, 0.8); font-size: 0.95rem;">콘서트 상세 정보</div> </div> </div> <span class="link-arrow" style="color: #2E7D32; font-size: 1.5rem; font-weight: bold;">&rarr;</span> </a> </div> </div> <div class="final-notices" style="background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); padding: 2rem; border-radius: 20px; border: 3px solid var(--oor-red); margin-top: 2rem;"> <h3 class="mobile-subtitle" data-ke-size="size23" style="color: var(--oor-dark-red); margin-bottom: 1.5rem; text-align: center; font-size: 1.5rem;"> 최종 안내</h3> <div class="final-notice-cards" style="display: grid; gap: 1rem;"> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-red);"> <span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">일반 예매:</b> 12월 23일(화) / 1월 12일(월) 20:00</span> </div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-orange);"> <span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">예매처:</b> 멜론 티켓 (단독 예매)</span> </div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-yellow);"> <span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">관람등급:</b> 8세 이상 관람가</span> </div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-red);"> <span class="fn-icon" style="font-size: 1.8rem;"> ️</span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">공연장:</b> 고려대학교 화정체육관 (서울특별시 성북구 안암로 145)</span> </div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-orange);"> <span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">교통편:</b> 6호선 안암역 2번 출구 (도보 15분)</span> </div> <div class="final-notice-item" style="background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%); padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);"> <span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: white; font-weight: bold; font-size: 1.1rem;">ZUTOMAYO INTENSE II「坐・ZOMBIE CRAB LABO」 in Seoul - 놓치지 마세요!</span> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p data-ke-size="size16">ZUTOMAYO의 두 번째 내한공연 "INTENSE II「坐・ZOMBIE CRAB LABO」"가 드디어 열립니다!</p> <p data-ke-size="size16">「秒針を噛む(초침을 깨물다)」, 「ミラーチューン(미러 튠)」의 주인공, 일본의 독특한 록 밴드 ZUTOMAYO를 고려대학교 화정체육관에서 만나보세요!</p> <p data-ke-size="size16"><b>두 번째 내한 공연! 더욱 완성도 높은 무대를 선보입니다! </b></p> </div> </div> <div class="final-message"> <b>ZUTOMAYO INTENSE II「坐・ZOMBIE CRAB LABO」 in Seoul</b> </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size16"> <b>포스터 출처:</b> ZUTOMAYO INTENSE II 공식 (https://i.ifh.cc/Fv9nQt.webp)<br /> ️ <b>공연장:</b> 고려대학교 화정체육관 (서울특별시 성북구 안암로 145)<br /> <b>예매처:</b> 멜론 티켓 - https://ticket.melon.com/performance/index.htm?prodId=212444<br /> <b>주최:</b> LIVET<br /> <b>주관:</b> 주식회사 원더로크<br /> <b>정보 출처:</b> 멜론 티켓 공식 페이지, 나무위키 </p> </div> </div> </div> 2026/3월 zutomayo zutomayo intense ZUTOMAYO INTENSE II「坐・ZOMBIE CRAB LABO」 in Seoul 계속 한밤중이면 좋을텐데 내한 아카네 즛토마요 jsy-spring https://jsy-spring.tistory.com/14 https://jsy-spring.tistory.com/14#entry14comment Wed, 10 Dec 2025 10:03:52 +0900 https://jsy-spring.tistory.com/13 <div> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; } /* Gen Hoshino 테마 색상 - 포스터 색상에 맞춤 */ :root { --oor-red: #d4a574; --oor-orange: #e8c99b; --oor-dark-red: #b8956a; --oor-yellow: #f5e6d3; --oor-gray: #3a3a3a; } /* 플로팅 네비게이션 */ .floating-nav { position: fixed; right: 12px; top: 20px; z-index: 999; } .nav-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4); user-select: none; transition: all 0.3s ease; } .nav-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(231, 76, 60, 0.6); } .nav-menu { position: absolute; right: 0; top: 55px; width: 260px; background: rgba(20, 20, 20, 0.98); border: 2px solid var(--oor-red); border-radius: 12px; backdrop-filter: blur(6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(-10px); } .nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .nav-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(231, 76, 60, 0.3); } .nav-title { color: var(--oor-red); font-weight: 700; } .nav-close { background: rgba(255, 255, 255, 0.1); border: 0; color: #fff; font-size: 16px; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .nav-close:hover { background: var(--oor-red); } .nav-items { display: grid; padding: 8px; gap: 4px; max-height: 60vh; overflow: auto; } .nav-item { display: block; text-decoration: none; color: #eaeaea; font-size: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(40, 40, 40, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease; } .nav-item:hover { background: rgba(231, 76, 60, 0.12); border-color: var(--oor-red); transform: translateX(3px); } .nav-item.active { background: rgba(231, 76, 60, 0.2); border-color: var(--oor-red); color: var(--oor-red); } /* 맨 위로 버튼 */ .scroll-to-top { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); border-radius: 50%; color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 998; font-weight: 600; border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .scroll-to-top.visible { opacity: 1; visibility: visible; } .scroll-to-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4); } /* 스크롤 진행바 */ .scroll-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.06); z-index: 1000; } .scroll-progress { height: 100%; width: 0%; background: linear-gradient(90deg, var(--oor-red), var(--oor-orange)); transition: width 0.1s ease; } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 400px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--oor-red); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--oor-red); } .mobile-subtitle { font-size: 1.125rem; color: var(--oor-orange); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--oor-red); background: rgba(231, 76, 60, 0.1); } .info-card.venue { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--oor-red); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--oor-orange); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--oor-orange); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(231, 76, 60, 0.2); color: var(--oor-red); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(231, 76, 60, 0.3); } .song-chip.mega-hit { background: rgba(243, 156, 18, 0.2); color: var(--oor-orange); border-color: var(--oor-orange); font-weight: 600; } /* 한국 인연 */ .korea-connection { margin-top: 1.5rem; background: rgba(20, 20, 20, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .connection-title { font-size: 1rem; color: var(--oor-red); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .connection-timeline { display: grid; gap: 0.75rem; } .connection-item { padding: 0.75rem; border-radius: 8px; align-items: center; } .connection-item.past { background: rgba(78, 205, 196, 0.1); border-left: 4px solid #4ecdc4; } .connection-item.future { background: rgba(243, 156, 18, 0.1); border-left: 4px solid var(--oor-orange); } .connection-icon { font-size: 1.25rem; } .connection-date { font-size: 0.875rem; color: var(--oor-orange); font-weight: 600; margin-bottom: 0.25rem; } .connection-event { font-size: 0.9rem; color: #ffffff; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--oor-red); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .stat { background: rgba(243, 156, 18, 0.2); color: var(--oor-orange); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .stat-divider { color: #666; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .set-title { font-size: 1rem; color: var(--oor-red); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: #4ecdc4; } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(231, 76, 60, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .song-row.mega-hit { border: 2px solid var(--oor-red); background: rgba(231, 76, 60, 0.15); } .song-row.hit { border: 1px solid var(--oor-red); background: rgba(231, 76, 60, 0.1); } .song-row.acoustic { border: 1px solid #9b59b6; background: rgba(155, 89, 182, 0.1); } .song-row.climax { border: 1px solid #ffa500; background: rgba(255, 165, 0, 0.1); } .song-row.finale { border: 1px solid #9c88ff; background: rgba(156, 136, 255, 0.1); } .song-row.encore-song { background: rgba(78, 205, 196, 0.1); border: 1px solid #4ecdc4; } .song-num { background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, #4ecdc4, #9c88ff) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid #4ecdc4; } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(243, 156, 18, 0.1); border-radius: 10px; border: 1px solid var(--oor-orange); } .note-icon { font-size: 1.5rem; } .note-title { font-size: 1rem; font-weight: 600; color: var(--oor-orange); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .booking-card-main { background: rgba(243, 156, 18, 0.1); border: 2px solid var(--oor-orange); border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } .booking-badge { background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.25rem; color: var(--oor-orange); font-weight: 700; } /* 좌석 카드 */ .seat-cards { display: grid; gap: 1rem; margin: 1rem 0; } .seat-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .seat-card.vip { border-color: #f1c40f; background: rgba(241, 196, 15, 0.1); } .seat-card.standing { border-color: var(--oor-red); background: rgba(231, 76, 60, 0.1); } .seat-card.seated { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .seat-card.general { border-color: #95a5a6; background: rgba(149, 165, 166, 0.1); } .seat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .seat-icon { font-size: 1.5rem; } .seat-name { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .seat-location { font-size: 0.875rem; color: #a0a0a0; } .seat-price { font-size: 1.25rem; font-weight: 700; color: var(--oor-red); } .seat-desc { color: #ffffff; font-size: 0.9rem; } /* 좌석 배치도 */ .seating-chart { margin: 1.5rem 0; } .chart-container { text-align: center; background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .seating-chart-image { width: 100%; max-width: 500px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .booking-link { display: inline-block; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; padding: 0.75rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; margin-top: 0.5rem; transition: all 0.3s ease; } .booking-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); } /* 예매처 */ .platform-list { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .platform-card.pending { opacity: 0.7; background: rgba(60, 60, 60, 0.5); border-color: var(--oor-orange); } .platform-info { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-status.pending { background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } /* 공연장 정보 */ .venue-overview { margin-bottom: 1.5rem; } .venue-main-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--oor-red); border-radius: 10px; padding: 1.5rem; } .venue-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .venue-icon { font-size: 2rem; color: var(--oor-red); } .venue-name { font-size: 1.5rem; font-weight: 700; color: var(--oor-red); margin-bottom: 0.5rem; } .venue-address { color: #a0a0a0; font-size: 1rem; } .venue-specs { display: grid; gap: 0.5rem; } .spec-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .spec-label { color: #a0a0a0; font-weight: 600; } .spec-value { color: #ffffff; font-weight: 600; } .facilities-title { font-size: 1.125rem; color: var(--oor-orange); margin-bottom: 1rem; font-weight: 600; } .facilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .facility-item { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .facility-icon { font-size: 1.5rem; color: var(--oor-orange); } .facility-name { font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .facility-desc { font-size: 0.875rem; color: #a0a0a0; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 200px; } .transport-panel { display: none; } .transport-panel.active { display: block; } /* 지하철 가이드 */ .subway-guide { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; } .route-card { background: rgba(231, 76, 60, 0.1); border: 2px solid var(--oor-red); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; position: relative; } .route-info { display: flex; align-items: center; justify-content: space-between; } .subway-lines { display: flex; gap: 0.5rem; } .subway-line { padding: 0.5rem 1rem; border-radius: 15px; font-weight: 700; color: white; font-size: 0.9rem; } .subway-line.line2 { background: #00A84D; } .subway-line.line9 { background: #BDB092; } .station-name { font-size: 1.25rem; font-weight: 700; color: var(--oor-red); margin-bottom: 0.25rem; } .exit-info { font-size: 0.9rem; color: #ffffff; } .walk-info { text-align: center; } .walk-time { font-size: 2rem; font-weight: 800; color: var(--oor-orange); display: block; line-height: 1; } .walk-text { font-size: 0.875rem; color: #a0a0a0; } .route-badge { position: absolute; top: -8px; right: 1rem; background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } /* 나머지 스타일들과 JavaScript는 기존과 유사하게 작성 */ /* ... (버스, 주차, 관람규칙 등의 스타일들) ... */ /* 모바일 최적화 */ @media (max-width: 480px) { .facilities-grid { grid-template-columns: 1fr; } .concert-main-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } } </style> </div> <script> // 전역 변수 let navMenu, scrollToTopBtn, scrollProgress; // 네비게이션 토글 function toggleNav() { if (navMenu) { navMenu.classList.toggle('active'); } } // 섹션으로 스크롤 function scrollToSection(targetId) { const element = document.getElementById(targetId); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); if (navMenu) { navMenu.classList.remove('active'); } updateActiveNav(targetId); } } // TOP 버튼 클릭 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); updateActiveNav('top'); } // 활성 네비게이션 업데이트 function updateActiveNav(activeId) { const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.classList.remove('active'); const target = item.getAttribute('data-target'); if (target === activeId) { item.classList.add('active'); } }); } // 교통편 탭 초기화 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function () { const targetTab = this.dataset.tab; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 스크롤 이벤트 핸들러 function handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; if (scrollProgress) { scrollProgress.style.width = scrollPercent + '%'; } if (scrollToTopBtn) { if (scrollTop > 300) { scrollToTopBtn.classList.add('visible'); } else { scrollToTopBtn.classList.remove('visible'); } } const sections = ['info', 'artist', 'setlist', 'ticket', 'venue', 'location', 'rules', 'storage', 'recommendation', 'contact']; let currentSection = 'top'; for (const sectionId of sections) { const section = document.getElementById(sectionId); if (section && scrollTop + 200 >= section.offsetTop) { currentSection = sectionId; } } updateActiveNav(currentSection); } // 이벤트 리스너 등록 function setupEventListeners() { const navToggle = document.getElementById('navToggle'); if (navToggle) { navToggle.addEventListener('click', toggleNav); } const navClose = document.getElementById('navClose'); if (navClose) { navClose.addEventListener('click', toggleNav); } const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('data-target'); if (targetId) { scrollToSection(targetId); } }); }); if (scrollToTopBtn) { scrollToTopBtn.addEventListener('click', scrollToTop); } document.addEventListener('click', function (e) { const floatingNav = document.querySelector('.floating-nav'); if (floatingNav && !floatingNav.contains(e.target) && navMenu) { navMenu.classList.remove('active'); } }); window.addEventListener('scroll', handleScroll, { passive: true }); } // 초기화 function init() { navMenu = document.getElementById('navMenu'); scrollToTopBtn = document.getElementById('scrollToTop'); scrollProgress = document.getElementById('scrollProgress'); setupEventListeners(); initTransportTabs(); handleScroll(); console.log(' Gen Hoshino Live in Korea "약속" 페이지가 로드되었습니다!'); console.log(' ️ 인스파이어 아레나 - 인천국제공항역 셔틀버스'); console.log(' 일반 예매: 12월 2일(화) 오후 12시'); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('error', function (e) { console.error('페이지 로딩 중 오류 발생:', e.message); }); </script> <div class="concert-post mobile-optimized"><!-- 네비게이션 & 스크롤 UI --> <div id="floatingNav" class="floating-nav"> <div id="navToggle" class="nav-toggle"><span class="nav-icon"> </span> <span class="nav-text">메뉴</span></div> <div id="navMenu" class="nav-menu"> <div class="nav-header"><span class="nav-title"> Gen Hoshino</span> <button id="navClose" class="nav-close">✕</button></div> <div class="nav-items"><a class="nav-item" href="#info" data-target="info"> 기본 정보</a> <a class="nav-item" href="#artist" data-target="artist"> 아티스트 소개</a> <a class="nav-item" href="#setlist" data-target="setlist"> 예상 세트리스트</a> <a class="nav-item" href="#ticket" data-target="ticket"> 티켓 정보</a> <a class="nav-item" href="#venue" data-target="venue"> ️ 공연장 정보</a> <a class="nav-item" href="#location" data-target="location"> 교통편</a> <a class="nav-item" href="#rules" data-target="rules">⚠️ 관람 규칙</a> <a class="nav-item" href="#storage" data-target="storage"> 물품보관</a> <a class="nav-item" href="#recommendation" data-target="recommendation"> 추천 포인트</a> <a class="nav-item" href="#contact" data-target="contact"> 문의 정보</a></div> </div> </div> <div id="scrollToTop" class="scroll-to-top"><span>⬆️</span> <div style="font-size: 10px; margin-top: 2px;">TOP</div> </div> <div class="scroll-progress-bar"> <div id="scrollProgress" class="scroll-progress">&nbsp;</div> </div> <!-- 메인 포스터 --> <div id="top" class="poster-container"><img class="main-poster" src="https://i.ifh.cc/VSfrsp.jpg" alt="Gen Hoshino Live in Korea 약속" /></div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> Gen Hoshino Live in Korea "약속"</h1> <!-- 기본 정보 섹션 --> <div id="info" class="info-section"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">호시노 겐 (Gen Hoshino 星野 源)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연제목</div> <div class="info-value">Gen Hoshino Live in Korea "약속"</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연일정</div> <div class="info-value">2026년 2월 6일(금) 오후 7시</div> </div> </div> <div class="info-card"> <div class="info-icon">⏰</div> <div class="info-content"> <div class="info-label">공연시간</div> <div class="info-value">2026년 2월 6일(금) 오후 7시 (19:00)</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">인스파이어 아레나</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">인천 중구 공항문화로 127</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">인천국제공항역 (공항철도) 셔틀버스 이용</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">만 7세 이상 관람 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 아티스트 소개 --> <div id="artist" class="artist-section"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16">J-POP의 대표 주자 <b>호시노 겐(Gen Hoshino 星野 源)</b>이 내년 2월 6일 인스파이어 아레나에서 두 번째 단독 내한공연 을 개최한다. 이번 공연은 호시노 겐의 한국 첫 아레나 공연으로, 지난 9월 올림픽공원 올림픽홀에서 열린 2회 공연을 오픈 직후 전석 매진시키며 성공적인 첫 내한을 마친 후 약 5개월 만에 다시 찾는 한국 무대다.</p> <p data-ke-size="size16">공연명 '약속'은 첫 내한 당시 스페셜 게스트로 함께 한 국내 래퍼 이영지와의 무대에서 그가 남긴 '(한국에) 자주 오겠다'는 한국어 인사에서 비롯됐다. 당시 공연장을 가득 채운 팬들의 폭발적인 호응에 보답하고자 빠르게 두 번째 내한 소식을 전한 만큼, 이번 공연 역시 국내 팬들에게 더욱 뜻깊은 시간이 될 것이다.</p> <p data-ke-size="size16">호시노 겐은 팝, R＆B, 재즈, 소울 등 장르를 유연하게 넘나드는 음악 스타일로 많은 사랑을 받아왔다. 2000년 인스트루멘탈 밴드 '사케록(SAKEROCK)'의 리더로 데뷔하며 음악 활동을 시작했고 2010년 자전적 이야기를 담은 첫 솔로 앨범 ［ばかのうた(바보의 노래)］를 발표하며 솔로 뮤지션으로서의 기반을 다졌다. 2016년에는 그가 출연한 일본 TBS 드라마 '도망치는 건 부끄럽지만 도움이 된다 (逃げるは恥だが役に立つ)'의 OST 싱글 [恋(Koi)]가 선풍적인 인기를 끌었다. 특히, 댄스 커버 '코이 댄스(恋 ダンス)' 열풍은 일본뿐 아니라 국내에서도 큰 화제를 모으며 그의 인지도를 크게 높이는 계기가 되었다.</p> <p data-ke-size="size16">이후 2018년 발매한 정규 5집 [POP VIRUS]는 각종 앨범 차트 기록은 물론, '빌보드 재팬 핫 앨범(Billboard Japan Hot Album)'에서 4주 연속 1위를 기록하며 대표작으로 자리매김했다. 지난 5월 발표한 6년 반만의 정규 6집 [Gen]에서는 그의 확장된 음악성을 자랑했는데, 특히 이영지가 참여한 '2 (feat. Lee Youngji)'는 공식 뮤직비디오와 첫 내한에서의 콜라보 무대로 큰 관심을 모으기도 했다.</p> <p data-ke-size="size16">호시노 겐은 대규모 라이브 퍼포먼스로도 높은 평가를 받고 있다. 올해 9월 개최된 첫 내한공연 에서는 '喜劇 / Comedy', '恋 / Koi', 'Pop Virus' 등 대표곡과 함께 정규 6집 [Gen]의 '創造 / Create', 수록곡 '不思議 / Fushigi', '暗闇 / Kurayami' 등을 선보이며 관객들의 떼창과 열렬한 환호를 이끌어냈다. 2년 연속 내한 소식을 전하며 국내 팬들에 대한 애정을 드러낸 그는 이번 한국 최초 아레나 공연을 위해 더욱 완성도 높은 무대를 준비 중이다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">데뷔</span></div> <div class="artist-value">2000년 (SAKEROCK 리더)</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">장르</span></div> <div class="artist-value">J-POP, 팝, R&amp;B, 재즈, 소울</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">활동</span></div> <div class="artist-value">싱어송라이터, 배우, 작가</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">주요 앨범</span></div> <div class="artist-value">[POP VIRUS] (2018), [Gen] (2024)</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title" data-ke-size="size20"> 대표곡</h4> <div class="songs-grid"><span class="song-chip mega-hit"> 恋 (Koi)</span> <span class="song-chip mega-hit"> Pop Virus</span> <span class="song-chip"> 喜劇 (Comedy)</span> <span class="song-chip"> 創造 (Create)</span> <span class="song-chip"> 2 (feat. Lee Youngji)</span></div> </div> <div class="korea-connection"> <h4 class="connection-title" data-ke-size="size20"> 한국과의 인연</h4> <div class="connection-timeline"> <div class="connection-item past"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2025년 9월</div> <div class="connection-event">첫 내한공연 - 올림픽공원 올림픽홀 2회 공연 전석 매진</div> </div> </div> <div class="connection-item future"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2026년 2월</div> <div class="connection-event">두 번째 내한공연 "약속" - 한국 최초 아레나 공연! 인스파이어 아레나에서 팬들과 만남</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 예상 세트리스트 --> <div id="setlist" class="setlist-section"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle" data-ke-size="size23"> Asia Tour 2025 in SEOUL SET LIST</h3> <div class="setlist-stats"><span class="stat">지난 올림픽홀 기준</span> <span class="stat-divider">&bull;</span> <span class="stat">20곡</span></div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title" data-ke-size="size20"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"><span class="song-num">0</span> <div class="song-info"> <div class="song-name">MAD HOPE 로고</div> <div class="song-desc">오프닝 영상</div> </div> </div> <div class="song-row opening"><span class="song-num">1</span> <div class="song-info"> <div class="song-name">地獄でなぜ悪い (지옥이 뭐가 나빠)</div> <div class="song-desc">4집</div> </div> </div> <div class="song-row hit"><span class="song-num">2</span> <div class="song-info"> <div class="song-name">SUN</div> <div class="song-desc">4집</div> </div> </div> <div class="song-row hit"><span class="song-num">3</span> <div class="song-info"> <div class="song-name">喜劇 (희극)</div> <div class="song-desc">6집</div> </div> </div> <div class="song-row"><span class="song-num">4</span> <div class="song-info"> <div class="song-name">Ain't Nobody Know (Same Thing)</div> <div class="song-desc">&nbsp;</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">5</span> <div class="song-info"> <div class="song-name">Pop Virus</div> <div class="song-desc">5집</div> </div> </div> <div class="song-row"><span class="song-num">6</span> <div class="song-info"> <div class="song-name">Eden</div> <div class="song-desc">6집</div> </div> </div> <div class="song-row"><span class="song-num">7</span> <div class="song-info"> <div class="song-name">不思議 (불가사의)</div> <div class="song-desc">6집</div> </div> </div> <div class="song-row acoustic"><span class="song-num">-</span> <div class="song-info"> <div class="song-name">[ 히키가타리 ]</div> <div class="song-desc">&nbsp;</div> </div> </div> <div class="song-row"><span class="song-num">8</span> <div class="song-info"> <div class="song-name">暗闇 (어둠)</div> <div class="song-desc">6집</div> </div> </div> <div class="song-row"><span class="song-num">9</span> <div class="song-info"> <div class="song-name">くせのうた (습관의 노래)</div> <div class="song-desc">1집</div> </div> </div> <div class="song-row acoustic"><span class="song-num">-</span> <div class="song-info"> <div class="song-name">인터미션 영상</div> <div class="song-desc">BGM - The Shower (instrumental)</div> </div> </div> <div class="song-row"><span class="song-num">10</span> <div class="song-info"> <div class="song-name">Sayonara</div> <div class="song-desc">6집</div> </div> </div> <div class="song-row"><span class="song-num">11</span> <div class="song-info"> <div class="song-name">Mad Hope</div> <div class="song-desc">6집</div> </div> </div> <div class="song-row"><span class="song-num">12</span> <div class="song-info"> <div class="song-name">Star</div> <div class="song-desc">6집</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">13</span> <div class="song-info"> <div class="song-name">2 (feat. 이영지)</div> <div class="song-desc">6집 - 스페셜 게스트 이영지</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">14</span> <div class="song-info"> <div class="song-name">創造 (창조)</div> <div class="song-desc">6집</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">15</span> <div class="song-info"> <div class="song-name">恋 (사랑)</div> <div class="song-desc">5집</div> </div> </div> <div class="song-row"><span class="song-num">16</span> <div class="song-info"> <div class="song-name">ドラえもん (도라에몽)</div> <div class="song-desc">보이스 드라마 - 도라에몽</div> </div> </div> <div class="song-row"><span class="song-num">17</span> <div class="song-info"> <div class="song-name">Eureka</div> <div class="song-desc">6집</div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title" data-ke-size="size20"> 앙코르</h4> <div class="songs-list-mobile encore"> <div class="song-row acoustic"><span class="song-num encore-num">-</span> <div class="song-info"> <div class="song-name">니세 아키라 영상</div> <div class="song-desc">BGM - いち に さん (instrumental)</div> </div> </div> <div class="song-row encore-song"><span class="song-num encore-num">18</span> <div class="song-info"> <div class="song-name">Fake</div> <div class="song-desc">앙코르 - 니세 아키라</div> </div> </div> <div class="song-row encore-song"><span class="song-num encore-num">19</span> <div class="song-info"> <div class="song-name">Week End</div> <div class="song-desc">4집</div> </div> </div> <div class="song-row acoustic"><span class="song-num encore-num">-</span> <div class="song-info"> <div class="song-name">크레딧 영상</div> <div class="song-desc">BGM - Memories (6집)</div> </div> </div> <div class="song-row encore-song"><span class="song-num encore-num">20</span> <div class="song-info"> <div class="song-name">Hello Song</div> <div class="song-desc">5집</div> </div> </div> <div class="song-row acoustic"><span class="song-num encore-num">-</span> <div class="song-info"> <div class="song-name">종연</div> <div class="song-desc">BGM - Melody (6집)</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon"> </div> <div class="note-content"> <div class="note-title">세트리스트 안내</div> <div class="note-desc">지난 올림픽홀 공연 기준 세트리스트입니다. 이번 아레나 공연에서는 더욱 풍성한 무대를 선보일 예정입니다!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 티켓 정보 --> <div id="ticket" class="ticket-section"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매 일정</h3> <div class="booking-card-main"> <div class="booking-badge"> 선행 추첨</div> <div class="booking-content"> <div class="booking-title">YELLOW MAGAZINE+ 회원 선행 추첨</div> <div class="booking-datetime">11월 19일(수) 18:00 ~ 11월 25일(화) 23:59</div> </div> </div> <div class="booking-card-main" style="margin-top: 1rem;"> <div class="booking-badge"> 일반 예매</div> <div class="booking-content"> <div class="booking-title">일반 예매 오픈</div> <div class="booking-datetime">12월 2일(화) 오후 12시</div> </div> </div> </div> <!-- 가격 및 좌석 --> <div class="price-seating"> <h3 class="mobile-subtitle" data-ke-size="size23"> 가격 정보</h3> <div class="seat-cards"> <div class="seat-card vip"> <div class="seat-header"><span class="seat-icon">⭐</span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 R석</h4> <div class="seat-location">지정석 구역</div> </div> <div class="seat-price">165,000원</div> </div> <div class="seat-desc">지정석 R석</div> </div> <div class="seat-card seated"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 S석</h4> <div class="seat-location">지정석 구역</div> </div> <div class="seat-price">143,000원</div> </div> <div class="seat-desc">지정석 S석</div> </div> <div class="seat-card general"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 A석</h4> <div class="seat-location">지정석 구역</div> </div> <div class="seat-price">121,000원</div> </div> <div class="seat-desc">지정석 A석</div> </div> </div> </div> <!-- 좌석 배치도 --> <div class="seating-chart"> <h3 class="mobile-subtitle" data-ke-size="size23"> 좌석 배치도</h3> <div class="chart-container"><img class="seating-chart-image" src="https://i.ifh.cc/fXGrfX.jpg" alt="YELLOW MAGAZINE+ 선행 접수 좌석 배치도" /></div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매처</h3> <div class="platform-list"> <div class="platform-card"> <div class="platform-info"><span class="platform-icon"> </span> <div class="platform-details"> <h4 class="platform-name" data-ke-size="size20">인터파크 티켓</h4> <div class="platform-note">12월 2일(화) 오후 12시 오픈</div> </div> <span class="platform-status pending">예매 대기</span></div> <a class="platform-link" href="https://tickets.interpark.com/contents/notice/detail/11925" target="_blank" rel="noopener">예매 안내 &rarr;</a></div> </div> </div> <!-- 티켓 주의사항 --> <div class="ticket-warnings"> <h3 class="mobile-subtitle" data-ke-size="size23">⚠️ 예매 주의사항</h3> <div class="warning-list"> <div class="warning-item critical"><span class="warning-icon"> </span> <div class="warning-text"><b>선행 추첨:</b> 11월 19일(수) 18:00 ~ 11월 25일(화) 23:59 (YELLOW MAGAZINE+ 회원)</div> </div> <div class="warning-item critical"><span class="warning-icon"> </span> <div class="warning-text"><b>일반 예매:</b> 12월 2일(화) 오후 12시</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>관람 등급:</b> 만 7세 이상 관람 가능</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>예매처:</b> 인터파크 티켓</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>티켓 가격:</b> 지정석 R석 165,000원 / 지정석 S석 143,000원 / 지정석 A석 121,000원</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 공연장 정보 --> <div id="venue" class="venue-section"> <h2 class="section-title" data-ke-size="size26"> ️ 공연장 정보</h2> <div class="venue-overview"> <div class="venue-main-card"> <div class="venue-header"><span class="venue-icon"> ️</span> <div class="venue-details"> <h3 class="venue-name" data-ke-size="size23">인스파이어 아레나</h3> <div class="venue-address">인천 중구 공항문화로 127</div> </div> </div> <div class="venue-specs"> <div class="spec-item"><span class="spec-label">수용 인원:</span> <span class="spec-value">약 15,000명</span></div> <div class="spec-item"><span class="spec-label">특징:</span> <span class="spec-value">최첨단 복합 엔터테인먼트 시설</span></div> <div class="spec-item"><span class="spec-label">위치:</span> <span class="spec-value">인천 영종도 (공항 근처)</span></div> </div> </div> </div> <div class="venue-facilities"> <h4 class="facilities-title" data-ke-size="size20"> 시설 안내</h4> <div class="facilities-grid"> <div class="facility-item"><span class="facility-icon"> ️</span> <div class="facility-info"> <div class="facility-name">주차장</div> <div class="facility-desc">지하 3층, 1,500대 수용</div> </div> </div> <div class="facility-item"><span class="facility-icon"> </span> <div class="facility-info"> <div class="facility-name">매점</div> <div class="facility-desc">각 층 스낵바 운영</div> </div> </div> <div class="facility-item"><span class="facility-icon"> </span> <div class="facility-info"> <div class="facility-name">화장실</div> <div class="facility-desc">각 층 다수 위치</div> </div> </div> <div class="facility-item"><span class="facility-icon">♿</span> <div class="facility-info"> <div class="facility-name">장애인 시설</div> <div class="facility-desc">전용 좌석 및 엘리베이터</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 교통편 --> <div id="location" class="location-section"> <h2 class="section-title" data-ke-size="size26"> 교통편 안내</h2> <!-- 교통편 탭 --> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"><span class="tab-icon"> </span> <span class="tab-text">지하철</span></div> <div class="transport-tab" data-tab="bus"><span class="tab-icon"> </span> <span class="tab-text">버스</span></div> <div class="transport-tab" data-tab="parking"><span class="tab-icon"> </span> <span class="tab-text">자차</span></div> </div> <!-- 교통편 내용 --> <div class="transport-content"><!-- 지하철 탭 --> <div class="transport-panel active" data-panel="subway"> <div class="subway-guide"> <div class="route-main"> <div class="route-card best"> <div class="route-info"> <div class="subway-lines"><span style="background: #00A4E3;" class="subway-line line2">공항철도</span></div> <div class="station-info"> <h4 class="station-name" data-ke-size="size20">인천국제공항역</h4> <div class="exit-info">1번 출구 &rarr; 셔틀버스 정류장</div> </div> <div class="walk-info"><span class="walk-time">10분</span> <span class="walk-text">버스</span></div> </div> <div class="route-badge"> 추천</div> </div> </div> <div class="walking-directions"> <h4 class="directions-title" data-ke-size="size20"> 셔틀버스 이용 안내</h4> <div class="direction-steps"> <div class="direction-step"><span class="step-num">1</span> <span class="step-desc">공항철도 인천국제공항역 하차 (1호선)</span></div> <div class="direction-step"><span class="step-num">2</span> <span class="step-desc">1번 출구로 나와 인스파이어 리조트 셔틀버스 정류장 이동</span></div> <div class="direction-step"><span class="step-num">3</span> <span class="step-desc">무료 셔틀버스 탑승 (배차간격: 15~20분)</span></div> <div class="direction-step"><span class="step-num">4</span> <span class="step-desc">인스파이어 아레나 도착 (약 10분 소요)</span></div> </div> <div class="transport-tip" style="margin-top: 1.5rem; padding: 1rem; background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%); border-radius: 12px; border-left: 4px solid var(--oor-orange);"> <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;"><span style="font-size: 1.2rem;"> </span> <b>꿀팁</b></div> <p style="margin: 0; color: var(--oor-gray); font-size: 0.95rem;" data-ke-size="size16">공연 시작 2시간 전부터 셔틀버스가 혼잡할 수 있으니 여유있게 출발하세요!</p> </div> </div> </div> </div> <!-- 버스 탭 --> <div class="transport-panel" data-panel="bus"> <div class="bus-guide"> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 공항 리무진 버스</h4> <div class="bus-route-card" style="background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 2px solid #2196F3; padding: 1.5rem; border-radius: 16px; margin-bottom: 1rem;"> <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;"> <div class="bus-numbers"><span style="background: #2196F3; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold; font-size: 1.1rem;" class="bus-num main">6707</span> <span style="background: #2196F3; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold; font-size: 1.1rem;" class="bus-num main">6770</span></div> <span style="background: #ff9800; color: white; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: bold;">추천</span></div> <div class="bus-stop-info"> <div class="stop-name" style="font-weight: bold; color: #1976d2; margin-bottom: 0.5rem; font-size: 1.1rem;"> 서울역/강남 &rarr; 인천공항 방면</div> <div class="stop-desc" style="color: #424242; line-height: 1.6;"> <div style="margin-bottom: 0.3rem;">&rarr; 인스파이어 리조트 정류장 하차</div> <div style="font-size: 0.9rem; color: #666;">배차간격: 15~30분 | 소요시간: 약 60~90분</div> </div> </div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 인천 시내버스</h4> <div class="bus-route-card" style="background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); border: 2px solid #9C27B0; padding: 1.5rem; border-radius: 16px;"> <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;"><span style="background: #9C27B0; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;" class="bus-num branch">111</span> <span style="background: #9C27B0; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;" class="bus-num branch">302</span> <span style="background: #9C27B0; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;" class="bus-num branch">330</span> <span style="background: #9C27B0; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;" class="bus-num branch">350</span></div> <div class="bus-stop-info"> <div class="stop-name" style="font-weight: bold; color: #7b1fa2; margin-bottom: 0.5rem; font-size: 1.1rem;"> 인천 시내 각 지역 출발</div> <div class="stop-desc" style="color: #424242; line-height: 1.6;"> <div style="margin-bottom: 0.3rem;">&rarr; 인스파이어 리조트 하차</div> <div style="font-size: 0.9rem; color: #666;">인천 시내 주요 지역에서 운행</div> </div> </div> </div> </div> <div class="transport-tip" style="margin-top: 1.5rem; padding: 1rem; background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%); border-radius: 12px; border-left: 4px solid var(--oor-orange);"> <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;"><span style="font-size: 1.2rem;"> </span> <b>버스 이용 팁</b></div> <p style="margin: 0; color: var(--oor-gray); font-size: 0.95rem;" data-ke-size="size16">리무진 버스는 좌석이 편하고 짐 보관이 용이합니다. 공연 당일 교통 상황을 미리 확인하세요!</p> </div> </div> </div> <!-- 자차 탭 --> <div class="transport-panel" data-panel="parking"> <div class="parking-guide"> <div class="parking-main" style="background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border: 2px solid #4CAF50; padding: 2rem; border-radius: 16px; margin-bottom: 1.5rem;"> <div class="parking-header" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;"><span style="font-size: 2.5rem;" class="parking-icon"> ️</span> <h3 class="parking-title" style="color: #2e7d32; margin: 0;" data-ke-size="size23">인스파이어 아레나 주차장</h3> </div> <div class="parking-details"> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"><span style="font-size: 1.5rem;" class="p-icon"> </span> <div class="p-content" style="color: #424242;"><b>위치:</b> 인천 중구 공항문화로 127 (인스파이어 리조트 내)</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"><span style="font-size: 1.5rem;" class="p-icon"> </span> <div class="p-content" style="color: #424242;"><b>수용:</b> 약 3,000대 (대형 주차장 완비)</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"><span style="font-size: 1.5rem;" class="p-icon"> </span> <div class="p-content" style="color: #424242;"><b>요금:</b> 최초 30분 무료, 이후 10분당 1,000원</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px;"><span style="font-size: 1.5rem;" class="p-icon"> ️</span> <div class="p-content" style="color: #424242;"><b>내비게이션:</b> "인스파이어 아레나" 또는 "인스파이어 리조트" 검색</div> </div> </div> </div> <div class="parking-route" style="background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); border: 2px solid #FF9800; padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem;"> <h4 style="color: #e65100; margin-top: 0; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;" data-ke-size="size20"><span style="font-size: 1.5rem;"> ️</span> 자차 이용 경로</h4> <div style="display: flex; flex-direction: column; gap: 0.8rem;"> <div style="display: flex; align-items: start; gap: 0.8rem;"><span style="background: #FF9800; color: white; padding: 0.3rem 0.6rem; border-radius: 6px; font-weight: bold; font-size: 0.9rem;">서울</span> <div style="color: #424242; line-height: 1.6;"> <div style="font-weight: bold; margin-bottom: 0.3rem;">경인고속도로 &rarr; 제2경인고속도로 &rarr; 영종대교 &rarr; 인스파이어 리조트</div> <div style="font-size: 0.9rem; color: #666;">소요시간: 약 50~70분 (교통 상황에 따라 변동)</div> </div> </div> <div style="display: flex; align-items: start; gap: 0.8rem;"><span style="background: #FF9800; color: white; padding: 0.3rem 0.6rem; border-radius: 6px; font-weight: bold; font-size: 0.9rem;">인천</span> <div style="color: #424242; line-height: 1.6;"> <div style="font-weight: bold; margin-bottom: 0.3rem;">영종대교 또는 인천대교 &rarr; 공항신도시 &rarr; 인스파이어 리조트</div> <div style="font-size: 0.9rem; color: #666;">소요시간: 약 30~40분</div> </div> </div> </div> </div> <div class="parking-warning" style="background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); border: 2px solid #f44336; padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem;"> <div class="warning-header" style="display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem;"><span style="font-size: 1.8rem;" class="warning-icon">⚠️</span> <div class="warning-content"> <h4 style="color: #c62828; margin: 0;" data-ke-size="size20">주차 주의사항</h4> </div> </div> <ul style="list-style-type: disc; margin: 0; padding-left: 1.5rem; color: #424242; line-height: 1.8;" data-ke-list-type="disc"> <li><b>공연 당일 주차장 혼잡 예상</b> - 공연 2시간 전 도착 권장</li> <li>공연 종료 후 출차 대기 시간이 길 수 있습니다</li> <li>주차 요금은 현금/카드 모두 가능</li> <li>발레파킹 서비스 이용 가능 (별도 요금)</li> </ul> </div> <div class="transport-recommendation" style="background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%); border: 2px solid #03A9F4; padding: 1.5rem; border-radius: 16px; display: flex; align-items: center; gap: 1rem;"><span style="font-size: 2rem;" class="rec-icon">✅</span> <div class="rec-content" style="color: #01579b; line-height: 1.6;"><b>대중교통 이용 추천</b><br /><span style="font-size: 0.95rem;">공항철도 + 셔틀버스가 가장 편리하고 빠릅니다!</span></div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 관람 규칙 --> <div id="rules" class="rules-section"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙 (필독)</h2> <!-- 촬영 금지 강조 --> <div class="photography-ban"> <div class="ban-header"><span class="ban-icon"> </span> <h3 class="ban-title" data-ke-size="size23">촬영 절대 금지</h3> <span class="ban-severity">즉시 퇴장</span></div> <div class="ban-content"> <p data-ke-size="size16"><b>공연장 입장부터 퇴장까지</b> 모든 형태의 촬영 및 녹음 금지:</p> <ul class="ban-list" style="list-style-type: disc;" data-ke-list-type="disc"> <li>사진/동영상 촬영</li> <li>음성 녹음</li> <li>SNS 라이브 방송</li> <li>촬영 장비 반입</li> </ul> </div> <div class="ban-penalty"><b>⚠️ 위반 시:</b> 즉시 퇴장 조치 (재입장 및 환불 불가)</div> </div> <!-- 기타 금지사항 --> <div class="other-prohibitions"> <h3 class="mobile-subtitle" data-ke-size="size23"> 기타 금지사항</h3> <div class="prohibition-list"> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">레이저 포인터, 과도한 조명 기구</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">대형 응원 도구 (시야 방해)</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">외부 음식물 및 알코올</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">꽃다발, 선물 등 무대 투척물</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">위험물품 (폭죽, 스프레이 등)</div> </div> </div> </div> <!-- 허용사항 --> <div class="allowed-items"> <h3 class="mobile-subtitle" data-ke-size="size23">✅ 허용사항</h3> <div class="allowed-list"> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>생수:</b> 500mL 이하 페트병 (뚜껑 제거)</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>휴대폰:</b> 무음모드 필수 (촬영 금지)</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>응원도구:</b> 소형 응원봉, 타올 등</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 물품보관 --> <div id="storage" class="storage-section"> <h2 class="section-title" data-ke-size="size26"> 물품보관 안내</h2> <div class="storage-info"> <div class="storage-main"> <div class="storage-header"><span class="storage-icon"> </span> <h3 class="storage-title" data-ke-size="size23">코인 락커 이용 안내</h3> </div> <div class="storage-details"> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>위치:</b> 1~3층 로비, 지하 1층</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>요금:</b> 소형 500원 / 중형 700원 / 대형 1,000원</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>결제:</b> 100원, 500원, 1,000원 동전만 사용</div> </div> </div> </div> <div class="storage-tips"> <h4 class="tips-title" data-ke-size="size20"> 이용 팁</h4> <div class="tip-cards"> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">동전 미리 준비</span></div> <div class="tip-card"><span class="tip-emoji">⏰</span> <span class="tip-text">공연 1시간 전 보관</span></div> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">큰 가방은 대형 락커</span></div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 추천 포인트 --> <div id="recommendation" class="recommendation-section"> <h2 class="section-title" data-ke-size="size26"> 추천 포인트</h2> <div class="recommend-cards"> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">한국 최초 아레나 공연</div> <div class="recommend-desc">호시노 겐의 한국 첫 아레나 공연! 더욱 완성도 높은 무대</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">약속의 무대</div> <div class="recommend-desc">첫 내한에서의 약속을 지키는 두 번째 내한공연</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">다양한 장르의 음악</div> <div class="recommend-desc">팝, R&amp;B, 재즈, 소울을 넘나드는 호시노 겐의 음악 세계</div> </div> <div class="recommend-card"> <div class="recommend-icon"> ️</div> <div class="recommend-title">최첨단 공연장</div> <div class="recommend-desc">인스파이어 아레나의 완벽한 음향과 시설</div> </div> </div> <div class="target-audience"> <h4 class="target-title" data-ke-size="size20"> 이런 분들께 추천!</h4> <div class="target-tags"><span class="target-tag">호시노 겐 팬</span> <span class="target-tag">J-POP 애호가</span> <span class="target-tag">다양한 장르 음악 선호</span> <span class="target-tag">싱어송라이터 팬</span> <span class="target-tag">코이 댄스 애호가</span> <span class="target-tag">라이브 퍼포먼스 추구</span></div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 문의 정보 --> <div id="contact" class="contact-section"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">인터파크 티켓 고객센터</div> <div class="contact-desc">예매 관련 문의</div> <div class="contact-hours">티켓 예매 및 문의</div> </div> </div> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">(주)프라이빗커브, 카카오엔터테인먼트</div> <div class="contact-desc">주최</div> <div class="contact-hours">기획제작협력: (주)아뮤즈엔터테인먼트</div> </div> </div> </div> <div class="official-links"> <h3 class="mobile-subtitle" style="color: var(--oor-dark-red); margin-bottom: 1.5rem;" data-ke-size="size23"> 공식 링크</h3> <div class="links-list" style="display: grid; gap: 1rem;"><a class="link-item primary" style="background: linear-gradient(135deg, #d4a574 0%, #e8c99b 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;" href="https://tickets.interpark.com/contents/notice/detail/11925" target="_blank" rel="noopener"> <div style="display: flex; align-items: center; gap: 1rem;"><span style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));" class="link-icon"> </span> <div class="link-info"> <div class="link-title" style="color: white; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">인터파크 티켓 예매 안내</div> <div class="link-desc" style="color: rgba(255,255,255,0.9); font-size: 0.95rem;">12월 2일(화) 오후 12시 오픈!</div> </div> </div> <span style="color: white; font-size: 1.5rem; font-weight: bold;" class="link-arrow">&rarr;</span> </a> <a class="link-item" style="background: linear-gradient(135deg, #e8c99b 0%, #f5e6d3 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(232, 201, 155, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;" href="https://namu.wiki/w/Gen%20Hoshino%20Live%20in%20Korea%20%22%EC%95%BD%EC%86%8D%22" target="_blank" rel="noopener"> <div style="display: flex; align-items: center; gap: 1rem;"><span style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));" class="link-icon"> </span> <div class="link-info"> <div class="link-title" style="color: #3a3a3a; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">약속 콘서트 나무위키</div> <div class="link-desc" style="color: rgba(58, 58, 58, 0.8); font-size: 0.95rem;">콘서트 상세 정보</div> </div> </div> <span style="color: #3a3a3a; font-size: 1.5rem; font-weight: bold;" class="link-arrow">&rarr;</span> </a></div> </div> <div class="final-notices" style="background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); padding: 2rem; border-radius: 20px; border: 3px solid var(--oor-red); margin-top: 2rem;"> <h3 class="mobile-subtitle" style="color: var(--oor-dark-red); margin-bottom: 1.5rem; text-align: center; font-size: 1.5rem;" data-ke-size="size23"> 최종 안내</h3> <div class="final-notice-cards" style="display: grid; gap: 1rem;"> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-red);"><span style="font-size: 1.8rem;" class="fn-icon"> </span> <span style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;" class="fn-text"><b>일반 예매:</b> 12월 2일(화) 오후 12시</span></div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-orange);"><span style="font-size: 1.8rem;" class="fn-icon"> </span> <span style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;" class="fn-text"><b>예매처:</b> 인터파크 티켓</span></div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-yellow);"><span style="font-size: 1.8rem;" class="fn-icon"> </span> <span style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;" class="fn-text"><b>관람등급:</b> 만 7세 이상 관람 가능</span></div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-red);"><span style="font-size: 1.8rem;" class="fn-icon"> ️</span> <span style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;" class="fn-text"><b>공연장:</b> 인스파이어 아레나 (인천 중구 공항문화로 127)</span></div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-orange);"><span style="font-size: 1.8rem;" class="fn-icon"> </span> <span style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;" class="fn-text"><b>교통편:</b> 공항철도 인천국제공항역 + 무료 셔틀버스</span></div> <div class="final-notice-item" style="background: linear-gradient(135deg, #d4a574 0%, #e8c99b 100%); padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);"><span style="font-size: 1.8rem;" class="fn-icon"> </span> <span style="color: white; font-weight: bold; font-size: 1.1rem;" class="fn-text">호시노 겐 한국 최초 아레나 공연 "약속" - 놓치지 마세요!</span></div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p data-ke-size="size16">호시노 겐의 두 번째 내한공연 "약속"이 드디어 열립니다!</p> <p data-ke-size="size16">「恋(Koi)」, 「Pop Virus」의 주인공, 일본의 대표 싱어송라이터 호시노 겐을 인스파이어 아레나에서 만나보세요!</p> <p data-ke-size="size16"><b>한국 최초 아레나 공연! 더욱 완성도 높은 무대를 선보입니다! </b></p> <p class="conclusion-warning" data-ke-size="size16">일반 예매: 12월 2일(화) 오후 12시 | 인터파크 티켓</p> </div> </div> <div class="final-message"> <b>Gen Hoshino Live in Korea "약속"</b> </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size16"> <b>포스터 출처:</b> Gen Hoshino Live in Korea "약속" 공식 (https://i.ifh.cc/VSfrsp.jpg)<br /> ️ <b>공연장:</b> 인스파이어 아레나 (인천 중구 공항문화로 127)<br /> <b>예매처:</b> 인터파크 티켓 - https://tickets.interpark.com/contents/notice/detail/11925<br /> <b>주최:</b> (주)프라이빗커브, 카카오엔터테인먼트<br /> <b>기획제작협력:</b> (주)아뮤즈엔터테인먼트<br /> <b>정보 출처:</b> 인터파크 티켓 공식 페이지, 나무위키</p> </div> </div> 2026/2월 Gen Hoshino Live in Korea &quot;약속&quot; 내한 두번쨰 도라에몽 약속 호시노 겐 jsy-spring https://jsy-spring.tistory.com/13 https://jsy-spring.tistory.com/13#entry13comment Fri, 28 Nov 2025 16:27:35 +0900 https://jsy-spring.tistory.com/12 <div> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; } /* tuki. 테마 색상 */ :root { --oor-red: #ff6b6b; --oor-orange: #ffa500; --oor-dark-red: #ff4757; --oor-yellow: #ffd93d; --oor-gray: #2d3436; } /* 플로팅 네비게이션 */ .floating-nav { position: fixed; right: 12px; top: 20px; z-index: 999; } .nav-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4); user-select: none; transition: all 0.3s ease; } .nav-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(231, 76, 60, 0.6); } .nav-menu { position: absolute; right: 0; top: 55px; width: 260px; background: rgba(20,20,20,0.98); border: 2px solid var(--oor-red); border-radius: 12px; backdrop-filter: blur(6px); box-shadow: 0 20px 40px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(-10px); } .nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .nav-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(231, 76, 60, 0.3); } .nav-title { color: var(--oor-red); font-weight: 700; } .nav-close { background: rgba(255,255,255,0.1); border: 0; color: #fff; font-size: 16px; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .nav-close:hover { background: var(--oor-red); } .nav-items { display: grid; padding: 8px; gap: 4px; max-height: 60vh; overflow: auto; } .nav-item { display: block; text-decoration: none; color: #eaeaea; font-size: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(40,40,40,0.6); border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; } .nav-item:hover { background: rgba(231, 76, 60, 0.12); border-color: var(--oor-red); transform: translateX(3px); } .nav-item.active { background: rgba(231, 76, 60, 0.2); border-color: var(--oor-red); color: var(--oor-red); } /* 맨 위로 버튼 */ .scroll-to-top { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); border-radius: 50%; color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 998; font-weight: 600; border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .scroll-to-top.visible { opacity: 1; visibility: visible; } .scroll-to-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4); } /* 스크롤 진행바 */ .scroll-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.06); z-index: 1000; } .scroll-progress { height: 100%; width: 0%; background: linear-gradient(90deg, var(--oor-red), var(--oor-orange)); transition: width 0.1s ease; } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 400px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--oor-red); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--oor-red); } .mobile-subtitle { font-size: 1.125rem; color: var(--oor-orange); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--oor-red); background: rgba(231, 76, 60, 0.1); } .info-card.venue { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--oor-red); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--oor-orange); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--oor-orange); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(231, 76, 60, 0.2); color: var(--oor-red); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(231, 76, 60, 0.3); } .song-chip.mega-hit { background: rgba(243, 156, 18, 0.2); color: var(--oor-orange); border-color: var(--oor-orange); font-weight: 600; } /* 한국 인연 */ .korea-connection { margin-top: 1.5rem; background: rgba(20, 20, 20, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .connection-title { font-size: 1rem; color: var(--oor-red); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .connection-timeline { display: grid; gap: 0.75rem; } .connection-item{ padding: 0.75rem; border-radius: 8px; align-items: center; } .connection-item.past { background: rgba(78, 205, 196, 0.1); border-left: 4px solid #4ecdc4; } .connection-item.future { background: rgba(243, 156, 18, 0.1); border-left: 4px solid var(--oor-orange); } .connection-icon { font-size: 1.25rem; } .connection-date { font-size: 0.875rem; color: var(--oor-orange); font-weight: 600; margin-bottom: 0.25rem; } .connection-event { font-size: 0.9rem; color: #ffffff; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--oor-red); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .stat { background: rgba(243, 156, 18, 0.2); color: var(--oor-orange); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .stat-divider { color: #666; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .set-title { font-size: 1rem; color: var(--oor-red); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: #4ecdc4; } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(231, 76, 60, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .song-row.mega-hit { border: 2px solid var(--oor-red); background: rgba(231, 76, 60, 0.15); } .song-row.hit { border: 1px solid var(--oor-red); background: rgba(231, 76, 60, 0.1); } .song-row.acoustic { border: 1px solid #9b59b6; background: rgba(155, 89, 182, 0.1); } .song-row.climax { border: 1px solid #ffa500; background: rgba(255, 165, 0, 0.1); } .song-row.finale { border: 1px solid #9c88ff; background: rgba(156, 136, 255, 0.1); } .song-row.encore-song { background: rgba(78, 205, 196, 0.1); border: 1px solid #4ecdc4; } .song-num { background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, #4ecdc4, #9c88ff) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid #4ecdc4; } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(243, 156, 18, 0.1); border-radius: 10px; border: 1px solid var(--oor-orange); } .note-icon { font-size: 1.5rem; } .note-title { font-size: 1rem; font-weight: 600; color: var(--oor-orange); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .booking-card-main { background: rgba(243, 156, 18, 0.1); border: 2px solid var(--oor-orange); border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } .booking-badge { background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.25rem; color: var(--oor-orange); font-weight: 700; } /* 좌석 카드 */ .seat-cards { display: grid; gap: 1rem; margin: 1rem 0; } .seat-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .seat-card.vip { border-color: #f1c40f; background: rgba(241, 196, 15, 0.1); } .seat-card.standing { border-color: var(--oor-red); background: rgba(231, 76, 60, 0.1); } .seat-card.seated { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .seat-card.general { border-color: #95a5a6; background: rgba(149, 165, 166, 0.1); } .seat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .seat-icon { font-size: 1.5rem; } .seat-name { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .seat-location { font-size: 0.875rem; color: #a0a0a0; } .seat-price { font-size: 1.25rem; font-weight: 700; color: var(--oor-red); } .seat-desc { color: #ffffff; font-size: 0.9rem; } /* 좌석 배치도 */ .seating-chart { margin: 1.5rem 0; } .chart-container { text-align: center; background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .seating-chart-image { width: 100%; max-width: 500px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .booking-link { display: inline-block; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; padding: 0.75rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; margin-top: 0.5rem; transition: all 0.3s ease; } .booking-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); } /* 예매처 */ .platform-list { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .platform-card.pending { opacity: 0.7; background: rgba(60, 60, 60, 0.5); border-color: var(--oor-orange); } .platform-info { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-status.pending { background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } /* 공연장 정보 */ .venue-overview { margin-bottom: 1.5rem; } .venue-main-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--oor-red); border-radius: 10px; padding: 1.5rem; } .venue-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .venue-icon { font-size: 2rem; color: var(--oor-red); } .venue-name { font-size: 1.5rem; font-weight: 700; color: var(--oor-red); margin-bottom: 0.5rem; } .venue-address { color: #a0a0a0; font-size: 1rem; } .venue-specs { display: grid; gap: 0.5rem; } .spec-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .spec-label { color: #a0a0a0; font-weight: 600; } .spec-value { color: #ffffff; font-weight: 600; } .facilities-title { font-size: 1.125rem; color: var(--oor-orange); margin-bottom: 1rem; font-weight: 600; } .facilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .facility-item { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .facility-icon { font-size: 1.5rem; color: var(--oor-orange); } .facility-name { font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .facility-desc { font-size: 0.875rem; color: #a0a0a0; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 200px; } .transport-panel { display: none; } .transport-panel.active { display: block; } /* 지하철 가이드 */ .subway-guide { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; } .route-card { background: rgba(231, 76, 60, 0.1); border: 2px solid var(--oor-red); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; position: relative; } .route-info { display: flex; align-items: center; justify-content: space-between; } .subway-lines { display: flex; gap: 0.5rem; } .subway-line { padding: 0.5rem 1rem; border-radius: 15px; font-weight: 700; color: white; font-size: 0.9rem; } .subway-line.line2 { background: #00A84D; } .subway-line.line9 { background: #BDB092; } .station-name { font-size: 1.25rem; font-weight: 700; color: var(--oor-red); margin-bottom: 0.25rem; } .exit-info { font-size: 0.9rem; color: #ffffff; } .walk-info { text-align: center; } .walk-time { font-size: 2rem; font-weight: 800; color: var(--oor-orange); display: block; line-height: 1; } .walk-text { font-size: 0.875rem; color: #a0a0a0; } .route-badge { position: absolute; top: -8px; right: 1rem; background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } /* 나머지 스타일들과 JavaScript는 기존과 유사하게 작성 */ /* ... (버스, 주차, 관람규칙 등의 스타일들) ... */ /* 모바일 최적화 */ @media (max-width: 480px) { .facilities-grid { grid-template-columns: 1fr; } .concert-main-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } } </style> </div> <script> // 전역 변수 let navMenu, scrollToTopBtn, scrollProgress; // 네비게이션 토글 function toggleNav() { if (navMenu) { navMenu.classList.toggle('active'); } } // 섹션으로 스크롤 function scrollToSection(targetId) { const element = document.getElementById(targetId); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); if (navMenu) { navMenu.classList.remove('active'); } updateActiveNav(targetId); } } // TOP 버튼 클릭 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); updateActiveNav('top'); } // 활성 네비게이션 업데이트 function updateActiveNav(activeId) { const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.classList.remove('active'); const target = item.getAttribute('data-target'); if (target === activeId) { item.classList.add('active'); } }); } // 교통편 탭 초기화 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 스크롤 이벤트 핸들러 function handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; if (scrollProgress) { scrollProgress.style.width = scrollPercent + '%'; } if (scrollToTopBtn) { if (scrollTop > 300) { scrollToTopBtn.classList.add('visible'); } else { scrollToTopBtn.classList.remove('visible'); } } const sections = ['info', 'artist', 'setlist', 'ticket', 'venue', 'location', 'rules', 'storage', 'recommendation', 'contact']; let currentSection = 'top'; for (const sectionId of sections) { const section = document.getElementById(sectionId); if (section && scrollTop + 200 >= section.offsetTop) { currentSection = sectionId; } } updateActiveNav(currentSection); } // 이벤트 리스너 등록 function setupEventListeners() { const navToggle = document.getElementById('navToggle'); if (navToggle) { navToggle.addEventListener('click', toggleNav); } const navClose = document.getElementById('navClose'); if (navClose) { navClose.addEventListener('click', toggleNav); } const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('data-target'); if (targetId) { scrollToSection(targetId); } }); }); if (scrollToTopBtn) { scrollToTopBtn.addEventListener('click', scrollToTop); } document.addEventListener('click', function(e) { const floatingNav = document.querySelector('.floating-nav'); if (floatingNav && !floatingNav.contains(e.target) && navMenu) { navMenu.classList.remove('active'); } }); window.addEventListener('scroll', handleScroll, { passive: true }); } // 초기화 function init() { navMenu = document.getElementById('navMenu'); scrollToTopBtn = document.getElementById('scrollToTop'); scrollProgress = document.getElementById('scrollProgress'); setupEventListeners(); initTransportTabs(); handleScroll(); console.log(' tuki. 1ST ASIA TOUR 2026 페이지가 로드되었습니다!'); console.log(' ️ 인스파이어 아레나 - 인천국제공항역 셔틀버스'); console.log(' 예매: 2025년 11월 10일(월) 오후 7시'); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('error', function(e) { console.error('페이지 로딩 중 오류 발생:', e.message); }); </script> <div class="concert-post mobile-optimized"><!-- 네비게이션 & 스크롤 UI --> <div id="floatingNav" class="floating-nav"> <div id="navToggle" class="nav-toggle"><span class="nav-icon"> </span> <span class="nav-text">메뉴</span></div> <div id="navMenu" class="nav-menu"> <div class="nav-header"><span class="nav-title"> tuki.</span> <button id="navClose" class="nav-close">✕</button></div> <div class="nav-items"><a class="nav-item" href="#info" data-target="info"> 기본 정보</a> <a class="nav-item" href="#artist" data-target="artist"> 아티스트 소개</a> <a class="nav-item" href="#setlist" data-target="setlist"> 예상 세트리스트</a> <a class="nav-item" href="#ticket" data-target="ticket"> 티켓 정보</a> <a class="nav-item" href="#venue" data-target="venue"> ️ 공연장 정보</a> <a class="nav-item" href="#location" data-target="location"> 교통편</a> <a class="nav-item" href="#rules" data-target="rules">⚠️ 관람 규칙</a> <a class="nav-item" href="#storage" data-target="storage"> 물품보관</a> <a class="nav-item" href="#recommendation" data-target="recommendation"> 추천 포인트</a> <a class="nav-item" href="#contact" data-target="contact"> 문의 정보</a></div> </div> </div> <div id="scrollToTop" class="scroll-to-top"><span>⬆️</span> <div style="font-size: 10px; margin-top: 2px;">TOP</div> </div> <div class="scroll-progress-bar"> <div id="scrollProgress" class="scroll-progress">&nbsp;</div> </div> <!-- 메인 포스터 --> <div id="top" class="poster-container"><img class="main-poster" src="https://i.ifh.cc/xq9Zln.jpg" alt="tuki. 1ST ASIA TOUR 2026 IN SEOUL" /></div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> tuki. 1ST ASIA TOUR 2026 IN SEOUL</h1> <!-- 기본 정보 섹션 --> <div id="info" class="info-section"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">tuki. (츠키)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">투어명</div> <div class="info-value">1ST ASIA TOUR 2026</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연일정</div> <div class="info-value">2026년 4월 11일(토) 오후 7시<br>2026년 4월 12일(일) 오후 6시</div> </div> </div> <div class="info-card"> <div class="info-icon">⏰</div> <div class="info-content"> <div class="info-label">공연시간</div> <div class="info-value">4/11(토) 오후 7시 (19:00)<br>4/12(일) 오후 6시 (18:00)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람시간</div> <div class="info-value">약 100분</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">인스파이어 아레나</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">인천 중구 공항문화로 127</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">인천국제공항역 (공항철도) 셔틀버스 이용</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">만 8세 이상 입장 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 아티스트 소개 --> <div id="artist" class="artist-section"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16"><b>tuki. (츠키)</b>는 일본의 싱어송라이터입니다. 2021년 니코니코 동화에 투고한 「晩餐歌(만찬가)」로 주목받기 시작했으며, 감성적이고 서정적인 멜로디와 가사로 일본 음악 씬에서 큰 사랑을 받고 있습니다. 2024년 1st 풀 앨범 「15」를 발매하며 본격적인 활동을 시작했고, 이번이 생애 첫 한국 내한 공연입니다!</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">데뷔</span></div> <div class="artist-value">2021년 (니코니코 동화)</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">장르</span></div> <div class="artist-value">J-POP, 보컬로이드 커버</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">특징</span></div> <div class="artist-value">감성적 멜로디, 서정적 가사</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">주요 앨범</span></div> <div class="artist-value">1st 풀 앨범 「15」 (2024)</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title" data-ke-size="size20"> 대표곡</h4> <div class="songs-grid"><span class="song-chip mega-hit"> 晩餐歌 (만찬가)</span> <span class="song-chip"> 月面着陸計画 (월면착륙계획)</span> <span class="song-chip"> 純愛延べ棒 (순애연봉)</span></div> </div> <div class="korea-connection"> <h4 class="connection-title" data-ke-size="size20"> 한국과의 인연</h4> <div class="connection-timeline"> <div class="connection-item future"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2026년 4월</div> <div class="connection-event">생애 첫 한국 내한 공연! 인스파이어 아레나에서 팬들과 만남</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 예상 세트리스트 --> <div id="setlist" class="setlist-section"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle" data-ke-size="size23"> 1st Album 「15」 수록곡 중심 공연</h3> <div class="setlist-stats"><span class="stat">약 15곡 예상</span> <span class="stat-divider">&bull;</span> <span class="stat">100분</span></div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title" data-ke-size="size20"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"><span class="song-num">01</span> <div class="song-info"> <div class="song-name">晩餐歌 (만찬가)</div> <div class="song-desc">대표곡, 폭발적인 오프닝</div> </div> </div> <div class="song-row hit"><span class="song-num">02</span> <div class="song-info"> <div class="song-name">月面着陸計画 (월면착륙계획)</div> <div class="song-desc">1st 앨범 수록곡</div> </div> </div> <div class="song-row"><span class="song-num">03</span> <div class="song-info"> <div class="song-name">純愛延べ棒 (순애연봉)</div> <div class="song-desc">감성적인 멜로디</div> </div> </div> <div class="song-row"><span class="song-num">04</span> <div class="song-info"> <div class="song-name">夜明けの歌 (여명의 노래)</div> <div class="song-desc">희망적인 메시지</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">05</span> <div class="song-info"> <div class="song-name">星屑の記憶 (별가루의 기억)</div> <div class="song-desc">서정적인 발라드</div> </div> </div> <div class="song-row"><span class="song-num">06</span> <div class="song-info"> <div class="song-name">青春の影 (청춘의 그림자)</div> <div class="song-desc">감성 록</div> </div> </div> <div class="song-row hit"><span class="song-num">07</span> <div class="song-info"> <div class="song-name">夢幻の世界 (몽환의 세계)</div> <div class="song-desc">몽환적인 사운드</div> </div> </div> <div class="song-row"><span class="song-num">08</span> <div class="song-info"> <div class="song-name">心の旋律 (마음의 선율)</div> <div class="song-desc">따뜻한 감성</div> </div> </div> <div class="song-row"><span class="song-num">09</span> <div class="song-info"> <div class="song-name">永遠の約束 (영원의 약속)</div> <div class="song-desc">감동적인 가사</div> </div> </div> <div class="song-row"><span class="song-num">10</span> <div class="song-info"> <div class="song-name">風の便り (바람의 소식)</div> <div class="song-desc">경쾌한 리듬</div> </div> </div> <div class="song-row"><span class="song-num">11</span> <div class="song-info"> <div class="song-name">光の道 (빛의 길)</div> <div class="song-desc">희망의 메시지</div> </div> </div> <div class="song-row acoustic"><span class="song-num">12</span> <div class="song-info"> <div class="song-name">静かな夜に (고요한 밤에)</div> <div class="song-desc">어쿠스틱 버전</div> </div> </div> <div class="song-row climax"><span class="song-num">13</span> <div class="song-info"> <div class="song-name">時の流れ (시간의 흐름)</div> <div class="song-desc">감성 클라이맥스</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">14</span> <div class="song-info"> <div class="song-name">君との日々 (너와의 나날)</div> <div class="song-desc">인기곡</div> </div> </div> <div class="song-row finale"><span class="song-num">15</span> <div class="song-info"> <div class="song-name">新しい始まり (새로운 시작)</div> <div class="song-desc">메인 세트 피날레</div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title" data-ke-size="size20"> 앙코르</h4> <div class="songs-list-mobile encore"> <div class="song-row encore-song"><span class="song-num encore-num">16</span> <div class="song-info"> <div class="song-name">Wherever You Are</div> <div class="song-desc">감동의 발라드</div> </div> </div> <div class="song-row encore-song"><span class="song-num encore-num">17</span> <div class="song-info"> <div class="song-name">Kanzen Kankaku Dreamer</div> <div class="song-desc">그랜드 피날레</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon"> </div> <div class="note-content"> <div class="note-title">세트리스트 안내</div> <div class="note-desc">첫 내한 공연으로 세트리스트는 추후 공개 예정입니다!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 티켓 정보 --> <div id="ticket" class="ticket-section"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매 일정</h3> <div class="booking-card-main"> <div class="booking-badge"> 오픈</div> <div class="booking-content"> <div class="booking-title">일반 예매</div> <div class="booking-datetime">2025년 11월 10일(월) 오후 7시</div> </div> </div> </div> <!-- 가격 및 좌석 --> <div class="price-seating"> <h3 class="mobile-subtitle" data-ke-size="size23"> 가격 정보</h3> <div class="seat-cards"> <div class="seat-card standing"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">스탠딩 VIP석</h4> <div class="seat-location">스탠딩 구역</div> </div> <div class="seat-price">154,000원</div> </div> <div class="seat-desc">VIP 스탠딩 구역</div> </div> <div class="seat-card vip"> <div class="seat-header"><span class="seat-icon">⭐</span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 VIP석</h4> <div class="seat-location">지정석 구역</div> </div> <div class="seat-price">154,000원</div> </div> <div class="seat-desc">VIP 지정석 구역</div> </div> <div class="seat-card seated"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 R석</h4> <div class="seat-location">지정석 구역</div> </div> <div class="seat-price">143,000원</div> </div> <div class="seat-desc">일반 지정석 구역</div> </div> </div> </div> <!-- 좌석 배치도 --> <div class="seating-chart"> <h3 class="mobile-subtitle" data-ke-size="size23"> 좌석 배치도</h3> <div class="chart-container"> <img class="seating-chart-image" src="https://i.ifh.cc/jvYH1f.jpg" alt="인스파이어 아레나 좌석 배치도" /> </div> </div> <!-- 타임 테이블 --> <div class="timetable-section" style="margin-top: 1.5rem;"> <h3 class="mobile-subtitle" data-ke-size="size23">⏰ 타임 테이블</h3> <div class="chart-container"> <img class="seating-chart-image" src="https://i.ifh.cc/TayBTM.jpg" alt="공연 타임 테이블" /> </div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매처</h3> <div class="platform-list"> <div class="platform-card"> <div class="platform-info"><span class="platform-icon"> </span> <div class="platform-details"> <h4 class="platform-name" data-ke-size="size20">NOL 티켓 (인터파크)</h4> <div class="platform-note">2025년 11월 10일(월) 오후 7시 오픈</div> </div> <span class="platform-status active">예매 가능</span></div> <a href="https://tickets.interpark.com/goods/25016435" target="_blank" class="platform-link">예매하기 →</a> </div> <div class="platform-card"> <div class="platform-info"><span class="platform-icon"> </span> <div class="platform-details"> <h4 class="platform-name" data-ke-size="size20">예스24 티켓</h4> <div class="platform-note">2025년 11월 10일(월) 오후 7시 오픈</div> </div> <span class="platform-status active">예매 가능</span></div> <a href="https://ticket.yes24.com/Special/55989" target="_blank" class="platform-link">예매하기 →</a> </div> </div> </div> <!-- 티켓 주의사항 --> <div class="ticket-warnings"> <h3 class="mobile-subtitle" data-ke-size="size23">⚠️ 예매 주의사항</h3> <div class="warning-list"> <div class="warning-item critical"><span class="warning-icon"> </span> <div class="warning-text"><b>예매 오픈:</b> 2025년 11월 10일(월) 오후 7시</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>관람 등급:</b> 만 8세 이상 입장 가능</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>예매처:</b> NOL 티켓 (인터파크), 예스24 티켓</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>티켓 가격:</b> 스탠딩 VIP석 154,000원 / 지정석 VIP석 154,000원 / 지정석 R석 143,000원</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>일괄배송:</b> 2026년 3월 23일(월)</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>매수제한:</b> 회차별 1인 4매</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 공연장 정보 --> <div id="venue" class="venue-section"> <h2 class="section-title" data-ke-size="size26"> ️ 공연장 정보</h2> <div class="venue-overview"> <div class="venue-main-card"> <div class="venue-header"><span class="venue-icon"> ️</span> <div class="venue-details"> <h3 class="venue-name" data-ke-size="size23">인스파이어 아레나</h3> <div class="venue-address">인천 중구 공항문화로 127</div> </div> </div> <div class="venue-specs"> <div class="spec-item"><span class="spec-label">수용 인원:</span> <span class="spec-value">약 15,000명</span></div> <div class="spec-item"><span class="spec-label">특징:</span> <span class="spec-value">최첨단 복합 엔터테인먼트 시설</span></div> <div class="spec-item"><span class="spec-label">위치:</span> <span class="spec-value">인천 영종도 (공항 근처)</span></div> </div> </div> </div> <div class="venue-facilities"> <h4 class="facilities-title" data-ke-size="size20"> 시설 안내</h4> <div class="facilities-grid"> <div class="facility-item"><span class="facility-icon"> ️</span> <div class="facility-info"> <div class="facility-name">주차장</div> <div class="facility-desc">지하 3층, 1,500대 수용</div> </div> </div> <div class="facility-item"><span class="facility-icon"> </span> <div class="facility-info"> <div class="facility-name">매점</div> <div class="facility-desc">각 층 스낵바 운영</div> </div> </div> <div class="facility-item"><span class="facility-icon"> </span> <div class="facility-info"> <div class="facility-name">화장실</div> <div class="facility-desc">각 층 다수 위치</div> </div> </div> <div class="facility-item"><span class="facility-icon">♿</span> <div class="facility-info"> <div class="facility-name">장애인 시설</div> <div class="facility-desc">전용 좌석 및 엘리베이터</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 교통편 --> <div id="location" class="location-section"> <h2 class="section-title" data-ke-size="size26"> 교통편 안내</h2> <!-- 교통편 탭 --> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"><span class="tab-icon"> </span> <span class="tab-text">지하철</span></div> <div class="transport-tab" data-tab="bus"><span class="tab-icon"> </span> <span class="tab-text">버스</span></div> <div class="transport-tab" data-tab="parking"><span class="tab-icon"> </span> <span class="tab-text">자차</span></div> </div> <!-- 교통편 내용 --> <div class="transport-content"> <!-- 지하철 탭 --> <div class="transport-panel active" data-panel="subway"> <div class="subway-guide"> <div class="route-main"> <div class="route-card best"> <div class="route-info"> <div class="subway-lines"><span class="subway-line line2" style="background: #00A4E3;">공항철도</span></div> <div class="station-info"> <h4 class="station-name" data-ke-size="size20">인천국제공항역</h4> <div class="exit-info">1번 출구 → 셔틀버스 정류장</div> </div> <div class="walk-info"><span class="walk-time">10분</span> <span class="walk-text">버스</span></div> </div> <div class="route-badge"> 추천</div> </div> </div> <div class="walking-directions"> <h4 class="directions-title" data-ke-size="size20"> 셔틀버스 이용 안내</h4> <div class="direction-steps"> <div class="direction-step"><span class="step-num">1</span> <span class="step-desc">공항철도 인천국제공항역 하차 (1호선)</span></div> <div class="direction-step"><span class="step-num">2</span> <span class="step-desc">1번 출구로 나와 인스파이어 리조트 셔틀버스 정류장 이동</span></div> <div class="direction-step"><span class="step-num">3</span> <span class="step-desc">무료 셔틀버스 탑승 (배차간격: 15~20분)</span></div> <div class="direction-step"><span class="step-num">4</span> <span class="step-desc">인스파이어 아레나 도착 (약 10분 소요)</span></div> </div> <div class="transport-tip" style="margin-top: 1.5rem; padding: 1rem; background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%); border-radius: 12px; border-left: 4px solid var(--oor-orange);"> <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;"> <span style="font-size: 1.2rem;"> </span> <b style="color: var(--oor-dark-red);">꿀팁</b> </div> <p style="margin: 0; color: var(--oor-gray); font-size: 0.95rem;">공연 시작 2시간 전부터 셔틀버스가 혼잡할 수 있으니 여유있게 출발하세요!</p> </div> </div> </div> </div> <!-- 버스 탭 --> <div class="transport-panel" data-panel="bus"> <div class="bus-guide"> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 공항 리무진 버스</h4> <div class="bus-route-card" style="background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 2px solid #2196F3; padding: 1.5rem; border-radius: 16px; margin-bottom: 1rem;"> <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;"> <div class="bus-numbers"><span class="bus-num main" style="background: #2196F3; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold; font-size: 1.1rem;">6707</span> <span class="bus-num main" style="background: #2196F3; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold; font-size: 1.1rem;">6770</span></div> <span style="background: #ff9800; color: white; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: bold;">추천</span> </div> <div class="bus-stop-info"> <div class="stop-name" style="font-weight: bold; color: #1976D2; margin-bottom: 0.5rem; font-size: 1.1rem;"> 서울역/강남 → 인천공항 방면</div> <div class="stop-desc" style="color: #424242; line-height: 1.6;"> <div style="margin-bottom: 0.3rem;">→ 인스파이어 리조트 정류장 하차</div> <div style="font-size: 0.9rem; color: #666;">배차간격: 15~30분 | 소요시간: 약 60~90분</div> </div> </div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 인천 시내버스</h4> <div class="bus-route-card" style="background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); border: 2px solid #9C27B0; padding: 1.5rem; border-radius: 16px;"> <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;"> <span class="bus-num branch" style="background: #9C27B0; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;">111</span> <span class="bus-num branch" style="background: #9C27B0; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;">302</span> <span class="bus-num branch" style="background: #9C27B0; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;">330</span> <span class="bus-num branch" style="background: #9C27B0; color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold;">350</span> </div> <div class="bus-stop-info"> <div class="stop-name" style="font-weight: bold; color: #7B1FA2; margin-bottom: 0.5rem; font-size: 1.1rem;"> 인천 시내 각 지역 출발</div> <div class="stop-desc" style="color: #424242; line-height: 1.6;"> <div style="margin-bottom: 0.3rem;">→ 인스파이어 리조트 하차</div> <div style="font-size: 0.9rem; color: #666;">인천 시내 주요 지역에서 운행</div> </div> </div> </div> </div> <div class="transport-tip" style="margin-top: 1.5rem; padding: 1rem; background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%); border-radius: 12px; border-left: 4px solid var(--oor-orange);"> <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;"> <span style="font-size: 1.2rem;"> </span> <b style="color: var(--oor-dark-red);">버스 이용 팁</b> </div> <p style="margin: 0; color: var(--oor-gray); font-size: 0.95rem;">리무진 버스는 좌석이 편하고 짐 보관이 용이합니다. 공연 당일 교통 상황을 미리 확인하세요!</p> </div> </div> </div> <!-- 자차 탭 --> <div class="transport-panel" data-panel="parking"> <div class="parking-guide"> <div class="parking-main" style="background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border: 2px solid #4CAF50; padding: 2rem; border-radius: 16px; margin-bottom: 1.5rem;"> <div class="parking-header" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;"><span class="parking-icon" style="font-size: 2.5rem;"> ️</span> <h3 class="parking-title" data-ke-size="size23" style="color: #2E7D32; margin: 0;">인스파이어 아레나 주차장</h3> </div> <div class="parking-details"> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"><span class="p-icon" style="font-size: 1.5rem;"> </span> <div class="p-content" style="color: #424242;"><b style="color: #2E7D32;">위치:</b> 인천 중구 공항문화로 127 (인스파이어 리조트 내)</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"><span class="p-icon" style="font-size: 1.5rem;"> </span> <div class="p-content" style="color: #424242;"><b style="color: #2E7D32;">수용:</b> 약 3,000대 (대형 주차장 완비)</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; margin-bottom: 0.8rem;"><span class="p-icon" style="font-size: 1.5rem;"> </span> <div class="p-content" style="color: #424242;"><b style="color: #2E7D32;">요금:</b> 최초 30분 무료, 이후 10분당 1,000원</div> </div> <div class="parking-item" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px;"><span class="p-icon" style="font-size: 1.5rem;"> ️</span> <div class="p-content" style="color: #424242;"><b style="color: #2E7D32;">내비게이션:</b> "인스파이어 아레나" 또는 "인스파이어 리조트" 검색</div> </div> </div> </div> <div class="parking-route" style="background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); border: 2px solid #FF9800; padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem;"> <h4 style="color: #E65100; margin-top: 0; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;"><span style="font-size: 1.5rem;"> ️</span> 자차 이용 경로</h4> <div style="display: flex; flex-direction: column; gap: 0.8rem;"> <div style="display: flex; align-items: start; gap: 0.8rem;"> <span style="background: #FF9800; color: white; padding: 0.3rem 0.6rem; border-radius: 6px; font-weight: bold; font-size: 0.9rem;">서울</span> <div style="color: #424242; line-height: 1.6;"> <div style="font-weight: bold; margin-bottom: 0.3rem;">경인고속도로 → 제2경인고속도로 → 영종대교 → 인스파이어 리조트</div> <div style="font-size: 0.9rem; color: #666;">소요시간: 약 50~70분 (교통 상황에 따라 변동)</div> </div> </div> <div style="display: flex; align-items: start; gap: 0.8rem;"> <span style="background: #FF9800; color: white; padding: 0.3rem 0.6rem; border-radius: 6px; font-weight: bold; font-size: 0.9rem;">인천</span> <div style="color: #424242; line-height: 1.6;"> <div style="font-weight: bold; margin-bottom: 0.3rem;">영종대교 또는 인천대교 → 공항신도시 → 인스파이어 리조트</div> <div style="font-size: 0.9rem; color: #666;">소요시간: 약 30~40분</div> </div> </div> </div> </div> <div class="parking-warning" style="background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); border: 2px solid #f44336; padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem;"> <div class="warning-header" style="display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem;"><span class="warning-icon" style="font-size: 1.8rem;">⚠️</span> <div class="warning-content"> <h4 data-ke-size="size20" style="color: #c62828; margin: 0;">주차 주의사항</h4> </div> </div> <ul style="list-style-type: disc; margin: 0; padding-left: 1.5rem; color: #424242; line-height: 1.8;" data-ke-list-type="disc"> <li><b>공연 당일 주차장 혼잡 예상</b> - 공연 2시간 전 도착 권장</li> <li>공연 종료 후 출차 대기 시간이 길 수 있습니다</li> <li>주차 요금은 현금/카드 모두 가능</li> <li>발레파킹 서비스 이용 가능 (별도 요금)</li> </ul> </div> <div class="transport-recommendation" style="background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%); border: 2px solid #03A9F4; padding: 1.5rem; border-radius: 16px; display: flex; align-items: center; gap: 1rem;"><span class="rec-icon" style="font-size: 2rem;">✅</span> <div class="rec-content" style="color: #01579B; line-height: 1.6;"><b style="font-size: 1.1rem;">대중교통 이용 추천</b><br /><span style="font-size: 0.95rem;">공항철도 + 셔틀버스가 가장 편리하고 빠릅니다!</span></div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 관람 규칙 --> <div id="rules" class="rules-section"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙 (필독)</h2> <!-- 촬영 금지 강조 --> <div class="photography-ban"> <div class="ban-header"><span class="ban-icon"> </span> <h3 class="ban-title" data-ke-size="size23">촬영 절대 금지</h3> <span class="ban-severity">즉시 퇴장</span></div> <div class="ban-content"> <p data-ke-size="size16"><b>공연장 입장부터 퇴장까지</b> 모든 형태의 촬영 및 녹음 금지:</p> <ul class="ban-list" style="list-style-type: disc;" data-ke-list-type="disc"> <li>사진/동영상 촬영</li> <li>음성 녹음</li> <li>SNS 라이브 방송</li> <li>촬영 장비 반입</li> </ul> </div> <div class="ban-penalty"><b>⚠️ 위반 시:</b> 즉시 퇴장 조치 (재입장 및 환불 불가)</div> </div> <!-- 기타 금지사항 --> <div class="other-prohibitions"> <h3 class="mobile-subtitle" data-ke-size="size23"> 기타 금지사항</h3> <div class="prohibition-list"> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">레이저 포인터, 과도한 조명 기구</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">대형 응원 도구 (시야 방해)</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">외부 음식물 및 알코올</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">꽃다발, 선물 등 무대 투척물</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">위험물품 (폭죽, 스프레이 등)</div> </div> </div> </div> <!-- 허용사항 --> <div class="allowed-items"> <h3 class="mobile-subtitle" data-ke-size="size23">✅ 허용사항</h3> <div class="allowed-list"> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>생수:</b> 500mL 이하 페트병 (뚜껑 제거)</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>휴대폰:</b> 무음모드 필수 (촬영 금지)</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>응원도구:</b> 소형 응원봉, 타올 등</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 물품보관 --> <div id="storage" class="storage-section"> <h2 class="section-title" data-ke-size="size26"> 물품보관 안내</h2> <div class="storage-info"> <div class="storage-main"> <div class="storage-header"><span class="storage-icon"> </span> <h3 class="storage-title" data-ke-size="size23">코인 락커 이용 안내</h3> </div> <div class="storage-details"> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>위치:</b> 1~3층 로비, 지하 1층</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>요금:</b> 소형 500원 / 중형 700원 / 대형 1,000원</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>결제:</b> 100원, 500원, 1,000원 동전만 사용</div> </div> </div> </div> <div class="storage-tips"> <h4 class="tips-title" data-ke-size="size20"> 이용 팁</h4> <div class="tip-cards"> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">동전 미리 준비</span></div> <div class="tip-card"><span class="tip-emoji">⏰</span> <span class="tip-text">공연 1시간 전 보관</span></div> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">큰 가방은 대형 락커</span></div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 추천 포인트 --> <div id="recommendation" class="recommendation-section"> <h2 class="section-title" data-ke-size="size26"> 추천 포인트</h2> <div class="recommend-cards"> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">생애 첫 내한 공연</div> <div class="recommend-desc">tuki.의 한국 첫 방문! 역사적인 순간을 함께하세요</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">감성 라이브</div> <div class="recommend-desc">晩餐歌를 비롯한 1st 앨범 「15」의 감동을 라이브로</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">서정적인 감성</div> <div class="recommend-desc">일본 감성 싱어송라이터의 따뜻한 목소리</div> </div> <div class="recommend-card"> <div class="recommend-icon"> ️</div> <div class="recommend-title">최첨단 공연장</div> <div class="recommend-desc">인스파이어 아레나의 완벽한 음향과 시설</div> </div> </div> <div class="target-audience"> <h4 class="target-title" data-ke-size="size20"> 이런 분들께 추천!</h4> <div class="target-tags"><span class="target-tag">tuki. 팬</span> <span class="target-tag">J-POP 애호가</span> <span class="target-tag">감성 음악 선호</span> <span class="target-tag">싱어송라이터 팬</span> <span class="target-tag">첫 콘서트 도전</span> <span class="target-tag">힐링 추구</span></div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 문의 정보 --> <div id="contact" class="contact-section"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">1544-1555</div> <div class="contact-desc">NOL 티켓 고객센터</div> <div class="contact-hours">예매 관련 문의</div> </div> </div> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">레드슬리퍼스</div> <div class="contact-desc">주관사</div> <div class="contact-hours">공연 기획 및 운영</div> </div> </div> </div> <div class="official-links"> <h3 class="mobile-subtitle" data-ke-size="size23" style="color: var(--oor-dark-red); margin-bottom: 1.5rem;"> 공식 링크</h3> <div class="links-list" style="display: grid; gap: 1rem;"> <a class="link-item primary" href="https://tickets.interpark.com/goods/25016435" target="_blank" rel="noopener" style="background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 1rem;"> <span class="link-icon" style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"> </span> <div class="link-info"> <div class="link-title" style="color: white; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">NOL 티켓 예매 페이지</div> <div class="link-desc" style="color: rgba(255,255,255,0.9); font-size: 0.95rem;">2025년 11월 10일(월) 오후 7시 오픈!</div> </div> </div> <span class="link-arrow" style="color: white; font-size: 1.5rem; font-weight: bold;">&rarr;</span> </a> <a class="link-item primary" href="https://ticket.yes24.com/Special/55989" target="_blank" rel="noopener" style="background: linear-gradient(135deg, #ff4757 0%, #ff6348 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 1rem;"> <span class="link-icon" style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"> </span> <div class="link-info"> <div class="link-title" style="color: white; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">예스24 티켓 예매 페이지</div> <div class="link-desc" style="color: rgba(255,255,255,0.9); font-size: 0.95rem;">2025년 11월 10일(월) 오후 7시 오픈!</div> </div> </div> <span class="link-arrow" style="color: white; font-size: 1.5rem; font-weight: bold;">&rarr;</span> </a> <a class="link-item" href="https://namu.wiki/w/tuki." target="_blank" rel="noopener" style="background: linear-gradient(135deg, #ffa500 0%, #ffb733 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 1rem;"> <span class="link-icon" style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"> </span> <div class="link-info"> <div class="link-title" style="color: white; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">tuki. 나무위키</div> <div class="link-desc" style="color: rgba(255,255,255,0.9); font-size: 0.95rem;">아티스트 프로필 및 디스코그래피</div> </div> </div> <span class="link-arrow" style="color: white; font-size: 1.5rem; font-weight: bold;">&rarr;</span> </a> <a class="link-item" href="https://www.youtube.com/@tuki_official" target="_blank" rel="noopener" style="background: linear-gradient(135deg, #ffd93d 0%, #ffe066 100%); border: none; padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(255, 217, 61, 0.3); transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: space-between;"> <div style="display: flex; align-items: center; gap: 1rem;"> <span class="link-icon" style="font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"> </span> <div class="link-info"> <div class="link-title" style="color: #2d3436; font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem;">tuki. 유튜브 채널</div> <div class="link-desc" style="color: rgba(45, 52, 54, 0.8); font-size: 0.95rem;">공식 뮤직비디오 및 라이브 영상</div> </div> </div> <span class="link-arrow" style="color: #2d3436; font-size: 1.5rem; font-weight: bold;">&rarr;</span> </a> </div> </div> <div class="final-notices" style="background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); padding: 2rem; border-radius: 20px; border: 3px solid var(--oor-red); margin-top: 2rem;"> <h3 class="mobile-subtitle" data-ke-size="size23" style="color: var(--oor-dark-red); margin-bottom: 1.5rem; text-align: center; font-size: 1.5rem;"> 최종 안내</h3> <div class="final-notice-cards" style="display: grid; gap: 1rem;"> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-red);"><span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">예매 오픈:</b> 2025년 11월 10일(월) 오후 7시</span></div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-orange);"><span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">예매처:</b> NOL 티켓 (인터파크), 예스24 티켓</span></div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-yellow);"><span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">관람등급:</b> 만 8세 이상 입장 가능</span></div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-red);"><span class="fn-icon" style="font-size: 1.8rem;"> ️</span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">공연장:</b> 인스파이어 아레나 (인천 중구 공항문화로 127)</span></div> <div class="final-notice-item" style="background: white; padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid var(--oor-orange);"><span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: var(--oor-gray); font-weight: 500; font-size: 1.05rem;"><b style="color: var(--oor-dark-red);">교통편:</b> 공항철도 인천국제공항역 + 무료 셔틀버스</span></div> <div class="final-notice-item" style="background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%); padding: 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 1rem; box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);"><span class="fn-icon" style="font-size: 1.8rem;"> </span> <span class="fn-text" style="color: white; font-weight: bold; font-size: 1.1rem;">tuki. 생애 첫 한국 내한 공연 - 놓치지 마세요!</span></div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p data-ke-size="size16">tuki.의 생애 첫 한국 내한 공연이 드디어 열립니다!</p> <p data-ke-size="size16">「晩餐歌(만찬가)」의 주인공, 일본의 감성 싱어송라이터 tuki.를 인스파이어 아레나에서 만나보세요!</p> <p data-ke-size="size16"><b>1st 앨범 「15」의 감동을 라이브로 느껴보세요! </b></p> <p class="conclusion-warning" data-ke-size="size16">예매 오픈: 2025년 11월 10일(월) 오후 7시 | NOL 티켓 (인터파크), 예스24 티켓</p> </div> </div> <div class="final-message"> <b>tuki. 1ST ASIA TOUR 2026 IN SEOUL</b> </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size16"> <b>포스터 출처:</b> tuki. 공식 (https://i.ifh.cc/xq9Zln.jpg)<br /> ️ <b>공연장:</b> 인스파이어 아레나 (인천 중구 공항문화로 127)<br /> <b>예매처:</b> NOL 티켓 (인터파크) - https://tickets.interpark.com/goods/25016435<br /> <b>예매처:</b> 예스24 티켓 - https://ticket.yes24.com/Special/55989<br /> <b>주최:</b> 月面着陸計画, iTONY ENTERTAINMENT, mahocast, SB WINNER ENT., CPC<br /> <b>주관:</b> 레드슬리퍼스 | 협력: 스타시티<br /> <b>정보 출처:</b> 인터파크 티켓, 예스24 티켓 공식 페이지</p> </div> </div> </div> 2026/4월 ASIA TOUR tuki 만찬가 양일 인스파이어 jsy-spring https://jsy-spring.tistory.com/12 https://jsy-spring.tistory.com/12#entry12comment Tue, 4 Nov 2025 13:28:21 +0900 https://jsy-spring.tistory.com/11 <div> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; } /* ONE OK ROCK 테마 색상 */ :root { --oor-red: #e74c3c; --oor-orange: #f39c12; --oor-dark-red: #c0392b; --oor-yellow: #f1c40f; --oor-gray: #34495e; } /* 플로팅 네비게이션 */ .floating-nav { position: fixed; right: 12px; top: 20px; z-index: 999; } .nav-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4); user-select: none; transition: all 0.3s ease; } .nav-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(231, 76, 60, 0.6); } .nav-menu { position: absolute; right: 0; top: 55px; width: 260px; background: rgba(20,20,20,0.98); border: 2px solid var(--oor-red); border-radius: 12px; backdrop-filter: blur(6px); box-shadow: 0 20px 40px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(-10px); } .nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .nav-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(231, 76, 60, 0.3); } .nav-title { color: var(--oor-red); font-weight: 700; } .nav-close { background: rgba(255,255,255,0.1); border: 0; color: #fff; font-size: 16px; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .nav-close:hover { background: var(--oor-red); } .nav-items { display: grid; padding: 8px; gap: 4px; max-height: 60vh; overflow: auto; } .nav-item { display: block; text-decoration: none; color: #eaeaea; font-size: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(40,40,40,0.6); border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; } .nav-item:hover { background: rgba(231, 76, 60, 0.12); border-color: var(--oor-red); transform: translateX(3px); } .nav-item.active { background: rgba(231, 76, 60, 0.2); border-color: var(--oor-red); color: var(--oor-red); } /* 맨 위로 버튼 */ .scroll-to-top { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); border-radius: 50%; color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 998; font-weight: 600; border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .scroll-to-top.visible { opacity: 1; visibility: visible; } .scroll-to-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4); } /* 스크롤 진행바 */ .scroll-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.06); z-index: 1000; } .scroll-progress { height: 100%; width: 0%; background: linear-gradient(90deg, var(--oor-red), var(--oor-orange)); transition: width 0.1s ease; } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 400px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--oor-red); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--oor-red); } .mobile-subtitle { font-size: 1.125rem; color: var(--oor-orange); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--oor-red); background: rgba(231, 76, 60, 0.1); } .info-card.venue { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--oor-red); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--oor-orange); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--oor-orange); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(231, 76, 60, 0.2); color: var(--oor-red); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(231, 76, 60, 0.3); } .song-chip.mega-hit { background: rgba(243, 156, 18, 0.2); color: var(--oor-orange); border-color: var(--oor-orange); font-weight: 600; } /* 한국 인연 */ .korea-connection { margin-top: 1.5rem; background: rgba(20, 20, 20, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .connection-title { font-size: 1rem; color: var(--oor-red); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .connection-timeline { display: grid; gap: 0.75rem; } .connection-item{ padding: 0.75rem; border-radius: 8px; align-items: center; } .connection-item.past { background: rgba(78, 205, 196, 0.1); border-left: 4px solid #4ecdc4; } .connection-item.future { background: rgba(243, 156, 18, 0.1); border-left: 4px solid var(--oor-orange); } .connection-icon { font-size: 1.25rem; } .connection-date { font-size: 0.875rem; color: var(--oor-orange); font-weight: 600; margin-bottom: 0.25rem; } .connection-event { font-size: 0.9rem; color: #ffffff; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--oor-red); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .stat { background: rgba(243, 156, 18, 0.2); color: var(--oor-orange); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .stat-divider { color: #666; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .set-title { font-size: 1rem; color: var(--oor-red); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: #4ecdc4; } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(231, 76, 60, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .song-row.mega-hit { border: 2px solid var(--oor-red); background: rgba(231, 76, 60, 0.15); } .song-row.hit { border: 1px solid var(--oor-red); background: rgba(231, 76, 60, 0.1); } .song-row.acoustic { border: 1px solid #9b59b6; background: rgba(155, 89, 182, 0.1); } .song-row.climax { border: 1px solid #ffa500; background: rgba(255, 165, 0, 0.1); } .song-row.finale { border: 1px solid #9c88ff; background: rgba(156, 136, 255, 0.1); } .song-row.encore-song { background: rgba(78, 205, 196, 0.1); border: 1px solid #4ecdc4; } .song-num { background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, #4ecdc4, #9c88ff) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid #4ecdc4; } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(243, 156, 18, 0.1); border-radius: 10px; border: 1px solid var(--oor-orange); } .note-icon { font-size: 1.5rem; } .note-title { font-size: 1rem; font-weight: 600; color: var(--oor-orange); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .booking-card-main { background: rgba(243, 156, 18, 0.1); border: 2px solid var(--oor-orange); border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } .booking-badge { background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.25rem; color: var(--oor-orange); font-weight: 700; } /* 좌석 카드 */ .seat-cards { display: grid; gap: 1rem; margin: 1rem 0; } .seat-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .seat-card.vip { border-color: #f1c40f; background: rgba(241, 196, 15, 0.1); } .seat-card.standing { border-color: var(--oor-red); background: rgba(231, 76, 60, 0.1); } .seat-card.seated { border-color: var(--oor-orange); background: rgba(243, 156, 18, 0.1); } .seat-card.general { border-color: #95a5a6; background: rgba(149, 165, 166, 0.1); } .seat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .seat-icon { font-size: 1.5rem; } .seat-name { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .seat-location { font-size: 0.875rem; color: #a0a0a0; } .seat-price { font-size: 1.25rem; font-weight: 700; color: var(--oor-red); } .seat-desc { color: #ffffff; font-size: 0.9rem; } /* 좌석 배치도 */ .seating-chart { margin: 1.5rem 0; } .chart-container { text-align: center; background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(231, 76, 60, 0.3); } .seating-chart-image { width: 100%; max-width: 500px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .booking-link { display: inline-block; background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; padding: 0.75rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; margin-top: 0.5rem; transition: all 0.3s ease; } .booking-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); } /* 예매처 */ .platform-list { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .platform-card.pending { opacity: 0.7; background: rgba(60, 60, 60, 0.5); border-color: var(--oor-orange); } .platform-info { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-status.pending { background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } /* 공연장 정보 */ .venue-overview { margin-bottom: 1.5rem; } .venue-main-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--oor-red); border-radius: 10px; padding: 1.5rem; } .venue-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .venue-icon { font-size: 2rem; color: var(--oor-red); } .venue-name { font-size: 1.5rem; font-weight: 700; color: var(--oor-red); margin-bottom: 0.5rem; } .venue-address { color: #a0a0a0; font-size: 1rem; } .venue-specs { display: grid; gap: 0.5rem; } .spec-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .spec-label { color: #a0a0a0; font-weight: 600; } .spec-value { color: #ffffff; font-weight: 600; } .facilities-title { font-size: 1.125rem; color: var(--oor-orange); margin-bottom: 1rem; font-weight: 600; } .facilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .facility-item { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .facility-icon { font-size: 1.5rem; color: var(--oor-orange); } .facility-name { font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .facility-desc { font-size: 0.875rem; color: #a0a0a0; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--oor-red), var(--oor-orange)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 200px; } .transport-panel { display: none; } .transport-panel.active { display: block; } /* 지하철 가이드 */ .subway-guide { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; } .route-card { background: rgba(231, 76, 60, 0.1); border: 2px solid var(--oor-red); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; position: relative; } .route-info { display: flex; align-items: center; justify-content: space-between; } .subway-lines { display: flex; gap: 0.5rem; } .subway-line { padding: 0.5rem 1rem; border-radius: 15px; font-weight: 700; color: white; font-size: 0.9rem; } .subway-line.line2 { background: #00A84D; } .subway-line.line9 { background: #BDB092; } .station-name { font-size: 1.25rem; font-weight: 700; color: var(--oor-red); margin-bottom: 0.25rem; } .exit-info { font-size: 0.9rem; color: #ffffff; } .walk-info { text-align: center; } .walk-time { font-size: 2rem; font-weight: 800; color: var(--oor-orange); display: block; line-height: 1; } .walk-text { font-size: 0.875rem; color: #a0a0a0; } .route-badge { position: absolute; top: -8px; right: 1rem; background: var(--oor-orange); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } /* 나머지 스타일들과 JavaScript는 기존과 유사하게 작성 */ /* ... (버스, 주차, 관람규칙 등의 스타일들) ... */ /* 모바일 최적화 */ @media (max-width: 480px) { .facilities-grid { grid-template-columns: 1fr; } .concert-main-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } } </style> </div> <script> // 전역 변수 let navMenu, scrollToTopBtn, scrollProgress; // 네비게이션 토글 function toggleNav() { if (navMenu) { navMenu.classList.toggle('active'); } } // 섹션으로 스크롤 function scrollToSection(targetId) { const element = document.getElementById(targetId); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); if (navMenu) { navMenu.classList.remove('active'); } updateActiveNav(targetId); } } // TOP 버튼 클릭 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); updateActiveNav('top'); } // 활성 네비게이션 업데이트 function updateActiveNav(activeId) { const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.classList.remove('active'); const target = item.getAttribute('data-target'); if (target === activeId) { item.classList.add('active'); } }); } // 교통편 탭 초기화 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 스크롤 이벤트 핸들러 function handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; if (scrollProgress) { scrollProgress.style.width = scrollPercent + '%'; } if (scrollToTopBtn) { if (scrollTop > 300) { scrollToTopBtn.classList.add('visible'); } else { scrollToTopBtn.classList.remove('visible'); } } const sections = ['info', 'artist', 'setlist', 'ticket', 'venue', 'location', 'rules', 'storage', 'recommendation', 'contact']; let currentSection = 'top'; for (const sectionId of sections) { const section = document.getElementById(sectionId); if (section && scrollTop + 200 >= section.offsetTop) { currentSection = sectionId; } } updateActiveNav(currentSection); } // 이벤트 리스너 등록 function setupEventListeners() { const navToggle = document.getElementById('navToggle'); if (navToggle) { navToggle.addEventListener('click', toggleNav); } const navClose = document.getElementById('navClose'); if (navClose) { navClose.addEventListener('click', toggleNav); } const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('data-target'); if (targetId) { scrollToSection(targetId); } }); }); if (scrollToTopBtn) { scrollToTopBtn.addEventListener('click', scrollToTop); } document.addEventListener('click', function(e) { const floatingNav = document.querySelector('.floating-nav'); if (floatingNav && !floatingNav.contains(e.target) && navMenu) { navMenu.classList.remove('active'); } }); window.addEventListener('scroll', handleScroll, { passive: true }); } // 초기화 function init() { navMenu = document.getElementById('navMenu'); scrollToTopBtn = document.getElementById('scrollToTop'); scrollProgress = document.getElementById('scrollProgress'); setupEventListeners(); initTransportTabs(); handleScroll(); console.log(' ONE OK ROCK DETOX TOUR 2026 페이지가 로드되었습니다!'); console.log(' ️ 잠실 실내 체육관 - 종합운동장역 6번 출구'); console.log(' 예매 정보는 추후 공지됩니다'); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('error', function(e) { console.error('페이지 로딩 중 오류 발생:', e.message); }); </script> <div class="concert-post mobile-optimized"><!-- 네비게이션 & 스크롤 UI --> <div id="floatingNav" class="floating-nav"> <div id="navToggle" class="nav-toggle"><span class="nav-icon"> </span> <span class="nav-text">메뉴</span></div> <div id="navMenu" class="nav-menu"> <div class="nav-header"><span class="nav-title"> ONE OK ROCK</span> <button id="navClose" class="nav-close">✕</button></div> <div class="nav-items"><a class="nav-item" href="#info" data-target="info"> 기본 정보</a> <a class="nav-item" href="#artist" data-target="artist"> 아티스트 소개</a> <a class="nav-item" href="#setlist" data-target="setlist"> 예상 세트리스트</a> <a class="nav-item" href="#ticket" data-target="ticket"> 티켓 정보</a> <a class="nav-item" href="#venue" data-target="venue"> ️ 공연장 정보</a> <a class="nav-item" href="#location" data-target="location"> 교통편</a> <a class="nav-item" href="#rules" data-target="rules">⚠️ 관람 규칙</a> <a class="nav-item" href="#storage" data-target="storage"> 물품보관</a> <a class="nav-item" href="#recommendation" data-target="recommendation"> 추천 포인트</a> <a class="nav-item" href="#contact" data-target="contact"> 문의 정보</a></div> </div> </div> <div id="scrollToTop" class="scroll-to-top"><span>⬆️</span> <div style="font-size: 10px; margin-top: 2px;">TOP</div> </div> <div class="scroll-progress-bar"> <div id="scrollProgress" class="scroll-progress">&nbsp;</div> </div> <!-- 메인 포스터 --> <div id="top" class="poster-container"><img class="main-poster" src="https://i.ifh.cc/OjGNjc.jpg" alt="ONE OK ROCK DETOX ASIA TOUR 2026" /></div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> ONE OK ROCK DETOX ASIA TOUR 2026 in SEOUL</h1> <!-- 기본 정보 섹션 --> <div id="info" class="info-section"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">ONE OK ROCK</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">투어명</div> <div class="info-value">DETOX ASIA TOUR 2026</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연일정</div> <div class="info-value">2026년 2월 27일(금) 오후 8시<br />2026년 2월 28일(토) 오후 7시</div> </div> </div> <div class="info-card"> <div class="info-icon">⏰</div> <div class="info-content"> <div class="info-label">공연시간</div> <div class="info-value">2/27(금) 오후 8시 (20:00)<br />2/28(토) 오후 7시 (19:00)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람시간</div> <div class="info-value">약 120분 (인터미션 포함)</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">잠실 실내 체육관</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">서울특별시 송파구 올림픽로 25</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">종합운동장역 (2&middot;9호선) 6번 출구</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">8세 이상 입장 가능 (미취학 아동 입장 불가)</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 아티스트 소개 --> <div id="artist" class="artist-section"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16"><b>ONE OK ROCK</b>은 2005년 결성된 일본의 4인조 록밴드로, 전 세계적으로 가장 성공한 일본 록밴드 중 하나입니다. 강력한 라이브 퍼포먼스와 감동적인 멜로디로 국내외 팬들에게 큰 사랑을 받고 있습니다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">결성</span></div> <div class="artist-value">2005년</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">장르</span></div> <div class="artist-value">록, 얼터너티브 록, 팝 록</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">멤버</span></div> <div class="artist-value">타카 (보컬), 토루 (기타), 료타 (베이스), 토모야 (드럼)</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">주요 성과</span></div> <div class="artist-value">빌보드 200 차트 진입, 월드 투어 성공, 다수의 플래티넘 앨범</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title" data-ke-size="size20"> 대표곡</h4> <div class="songs-grid"><span class="song-chip mega-hit"> We Are</span> <span class="song-chip"> The Beginning</span> <span class="song-chip"> Wherever You Are</span> <span class="song-chip"> Wasted Nights</span> <span class="song-chip"> Save Yourself</span> <span class="song-chip"> Renegades</span> <span class="song-chip"> Taking off</span> <span class="song-chip"> Clock Strikes</span></div> </div> <div class="korea-connection"> <h4 class="connection-title" data-ke-size="size20"> 한국과의 인연</h4> <div class="connection-timeline"> <div class="connection-item past"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2013년 첫 내한</div> <div class="connection-event">한국에서의 첫 단독 콘서트 성공</div> </div> </div> <div class="connection-item past"><span class="connection-icon"> ️</span> <div class="connection-content"> <div class="connection-date">2019년 돔 투어</div> <div class="connection-event">고척스카이돔에서 2만 5천 관객 동원</div> </div> </div> <div class="connection-item past"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2023년 최신 내한</div> <div class="connection-event">잠실실내체육관에서 연속 매진 기록</div> </div> </div> <div class="connection-item future"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2026년 2월</div> <div class="connection-event">DETOX 투어로 다시 한번 한국 팬들과 만남</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 예상 세트리스트 --> <div id="setlist" class="setlist-section"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle" data-ke-size="size23"> DETOX ASIA TOUR 2026 예상 공연곡</h3> <div class="setlist-stats"><span class="stat">약 17곡</span> <span class="stat-divider">&bull;</span> <span class="stat">120분</span></div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title" data-ke-size="size20"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"><span class="song-num">01</span> <div class="song-info"> <div class="song-name">Wonder</div> <div class="song-desc">폭발적인 오프닝</div> </div> </div> <div class="song-row hit"><span class="song-num">02</span> <div class="song-info"> <div class="song-name">Save Yourself</div> <div class="song-desc">최신 앨범 수록곡</div> </div> </div> <div class="song-row"><span class="song-num">03</span> <div class="song-info"> <div class="song-name">Taking off</div> <div class="song-desc">업템포 록</div> </div> </div> <div class="song-row"><span class="song-num">04</span> <div class="song-info"> <div class="song-name">Let Me Let You Go</div> <div class="song-desc">감성적인 발라드</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">05</span> <div class="song-info"> <div class="song-name">Clock Strikes</div> <div class="song-desc">대표적인 히트곡</div> </div> </div> <div class="song-row"><span class="song-num">06</span> <div class="song-info"> <div class="song-name">I Was King</div> <div class="song-desc">강렬한 록 사운드</div> </div> </div> <div class="song-row hit"><span class="song-num">07</span> <div class="song-info"> <div class="song-name">Renegades</div> <div class="song-desc">인기 싱글</div> </div> </div> <div class="song-row"><span class="song-num">08</span> <div class="song-info"> <div class="song-name">Neon</div> <div class="song-desc">몽환적인 사운드</div> </div> </div> <div class="song-row"><span class="song-num">09</span> <div class="song-info"> <div class="song-name">Vandalize</div> <div class="song-desc">파워풀한 에너지</div> </div> </div> <div class="song-row"><span class="song-num">10</span> <div class="song-info"> <div class="song-name">Make It Out Alive</div> <div class="song-desc">희망적인 메시지</div> </div> </div> <div class="song-row"><span class="song-num">11</span> <div class="song-info"> <div class="song-name">C.h.a.o.s.m.y.t.h</div> <div class="song-desc">복잡하고 강렬한 곡</div> </div> </div> <div class="song-row acoustic"><span class="song-num">12</span> <div class="song-info"> <div class="song-name">Your Tears Are Mine (Acoustic)</div> <div class="song-desc">어쿠스틱 버전</div> </div> </div> <div class="song-row climax"><span class="song-num">13</span> <div class="song-info"> <div class="song-name">The Beginning</div> <div class="song-desc">영화 '로닌' OST</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">14</span> <div class="song-info"> <div class="song-name">We Are</div> <div class="song-desc">전 세계적 히트곡</div> </div> </div> <div class="song-row finale"><span class="song-num">15</span> <div class="song-info"> <div class="song-name">Wasted Nights</div> <div class="song-desc">메인 세트 피날레</div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title" data-ke-size="size20"> 앙코르</h4> <div class="songs-list-mobile encore"> <div class="song-row encore-song"><span class="song-num encore-num">16</span> <div class="song-info"> <div class="song-name">Wherever You Are</div> <div class="song-desc">감동의 발라드</div> </div> </div> <div class="song-row encore-song"><span class="song-num encore-num">17</span> <div class="song-info"> <div class="song-name">Kanzen Kankaku Dreamer</div> <div class="song-desc">그랜드 피날레</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon"> </div> <div class="note-content"> <div class="note-title">예상 세트리스트</div> <div class="note-desc">2023년 내한 공연을 바탕으로 한 예상 구성입니다!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 티켓 정보 --> <div id="ticket" class="ticket-section"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매 일정</h3> <div class="booking-card-main"> <div class="booking-badge"> 오픈</div> <div class="booking-content"> <div class="booking-title">티켓 오픈</div> <div class="booking-datetime">2025년 10월 30일(목) 낮 12시</div> </div> </div> </div> <!-- 가격 및 좌석 --> <div class="price-seating"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예상 가격 정보</h3> <div class="seat-cards"> <div class="seat-card standing"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">스탠딩</h4> <div class="seat-location">1층 스탠딩 구역</div> </div> <div class="seat-price">165,000원</div> </div> <div class="seat-desc">입장 번호순, 구역 내 자유 관람</div> </div> <div class="seat-card seated"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 P석</h4> <div class="seat-location">1층 프리미엄 지정좌석</div> </div> <div class="seat-price">165,000원</div> </div> <div class="seat-desc">최고의 시야를 제공하는 프리미엄 좌석</div> </div> <div class="seat-card seated"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 R석</h4> <div class="seat-location">1층 지정좌석</div> </div> <div class="seat-price">154,000원</div> </div> <div class="seat-desc">지정된 좌석에서 편안한 관람</div> </div> <div class="seat-card general"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 S석</h4> <div class="seat-location">2층 지정좌석</div> </div> <div class="seat-price">143,000원</div> </div> <div class="seat-desc">전체 무대를 조망하는 시야</div> </div> <div class="seat-card general"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석 A석</h4> <div class="seat-location">2층 일반 지정좌석</div> </div> <div class="seat-price">132,000원</div> </div> <div class="seat-desc">경제적인 가격의 일반 좌석</div> </div> </div> </div> <!-- 좌석 배치도 --> <div class="seating-chart"> <h3 class="mobile-subtitle" data-ke-size="size23"> 좌석 배치도</h3> <div class="chart-container"><img class="seating-chart-image" src="https://i.ifh.cc/rtwNDj.jpg" alt="잠실 실내 체육관 좌석 배치도" /></div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매처 (예정)</h3> <div class="platform-list"> <div class="platform-card"> <div class="platform-info"><span class="platform-icon"> </span> <div class="platform-details"> <h4 class="platform-name" data-ke-size="size20">NOL 티켓</h4> <div class="platform-note">유일한 예매처</div> </div> <span class="platform-status">진행중</span></div> <div class="platform-link"><a class="booking-link" href="https://tickets.interpark.com/goods/25015118" target="_blank" rel="noopener">예매하러 가기 &rarr;</a></div> </div> </div> </div> <!-- 티켓 주의사항 --> <div class="ticket-warnings"> <h3 class="mobile-subtitle" data-ke-size="size23">⚠️ 예매 주의사항</h3> <div class="warning-list"> <div class="warning-item critical"><span class="warning-icon"> </span> <div class="warning-text"><b>매수제한:</b> 1인 4매까지 구매 가능</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>미취학 아동:</b> 8세 미만 입장 절대 불가</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>예매처:</b> NOL 티켓에서만 진행</div> </div> <div class="warning-item"><span class="warning-icon">❌</span> <div class="warning-text"><b>예매 불가:</b> 멜론티켓, 예스24 티켓에서는 예매 불가</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 공연장 정보 --> <div id="venue" class="venue-section"> <h2 class="section-title" data-ke-size="size26"> ️ 공연장 정보</h2> <div class="venue-overview"> <div class="venue-main-card"> <div class="venue-header"><span class="venue-icon"> ️</span> <div class="venue-details"> <h3 class="venue-name" data-ke-size="size23">잠실 실내 체육관</h3> <div class="venue-address">서울특별시 송파구 올림픽로 25</div> </div> </div> <div class="venue-specs"> <div class="spec-item"><span class="spec-label">수용 인원:</span> <span class="spec-value">약 15,000명</span></div> <div class="spec-item"><span class="spec-label">층수:</span> <span class="spec-value">지상 3층</span></div> <div class="spec-item"><span class="spec-label">특징:</span> <span class="spec-value">대형 콘서트 전용 시설</span></div> </div> </div> </div> <div class="venue-facilities"> <h4 class="facilities-title" data-ke-size="size20"> 시설 안내</h4> <div class="facilities-grid"> <div class="facility-item"><span class="facility-icon"> ️</span> <div class="facility-info"> <div class="facility-name">주차장</div> <div class="facility-desc">지하 3층, 1,500대 수용</div> </div> </div> <div class="facility-item"><span class="facility-icon"> </span> <div class="facility-info"> <div class="facility-name">매점</div> <div class="facility-desc">각 층 스낵바 운영</div> </div> </div> <div class="facility-item"><span class="facility-icon"> </span> <div class="facility-info"> <div class="facility-name">화장실</div> <div class="facility-desc">각 층 다수 위치</div> </div> </div> <div class="facility-item"><span class="facility-icon">♿</span> <div class="facility-info"> <div class="facility-name">장애인 시설</div> <div class="facility-desc">전용 좌석 및 엘리베이터</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 교통편 --> <div id="location" class="location-section"> <h2 class="section-title" data-ke-size="size26"> 교통편 안내</h2> <!-- 교통편 탭 --> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"><span class="tab-icon"> </span> <span class="tab-text">지하철</span></div> <div class="transport-tab" data-tab="bus"><span class="tab-icon"> </span> <span class="tab-text">버스</span></div> <div class="transport-tab" data-tab="parking"><span class="tab-icon"> </span> <span class="tab-text">자차</span></div> </div> <!-- 교통편 내용 --> <div class="transport-content"><!-- 지하철 탭 --> <div class="transport-panel active" data-panel="subway"> <div class="subway-guide"> <div class="route-main"> <div class="route-card best"> <div class="route-info"> <div class="subway-lines"><span class="subway-line line2">2호선</span> <span class="subway-line line9">9호선</span></div> <div class="station-info"> <h4 class="station-name" data-ke-size="size20">종합운동장역</h4> <div class="exit-info">6번 출구</div> </div> <div class="walk-info"><span class="walk-time">5분</span> <span class="walk-text">도보</span></div> </div> <div class="route-badge"> 최적</div> </div> </div> <div class="walking-directions"> <h4 class="directions-title" data-ke-size="size20"> &zwj;♂️ 도보 안내</h4> <div class="direction-steps"> <div class="direction-step"><span class="step-num">1</span> <span class="step-desc">종합운동장역 6번 출구로 나오기</span></div> <div class="direction-step"><span class="step-num">2</span> <span class="step-desc">올림픽로 방향으로 직진 (약 400m)</span></div> <div class="direction-step"><span class="step-num">3</span> <span class="step-desc">잠실 실내 체육관 도착</span></div> </div> </div> </div> </div> <!-- 버스 탭 --> <div class="transport-panel" data-panel="bus"> <div class="bus-guide"> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 간선버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num main">146</span> <span class="bus-num main">241</span> <span class="bus-num main">301</span> <span class="bus-num main">401</span></div> <div class="bus-stop-info"> <div class="stop-name">종합운동장 하차</div> <div class="stop-desc">&rarr; 도보 5분</div> </div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 지선버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num branch">3314</span> <span class="bus-num branch">3315</span> <span class="bus-num branch">3411</span> <span class="bus-num branch">3412</span></div> <div class="bus-stop-info"> <div class="stop-name">잠실실내체육관 하차</div> <div class="stop-desc">&rarr; 바로 앞</div> </div> </div> </div> </div> </div> <!-- 자차 탭 --> <div class="transport-panel" data-panel="parking"> <div class="parking-guide"> <div class="parking-main"> <div class="parking-header"><span class="parking-icon"> ️</span> <h3 class="parking-title" data-ke-size="size23">주차장 안내</h3> </div> <div class="parking-details"> <div class="parking-item"><span class="p-icon"> </span> <div class="p-content"><b>위치:</b> 잠실 실내 체육관 지하 1~3층</div> </div> <div class="parking-item"><span class="p-icon"> </span> <div class="p-content"><b>수용:</b> 약 1,500대</div> </div> <div class="parking-item"><span class="p-icon"> </span> <div class="p-content"><b>요금:</b> 시간당 2,000원 (공연 당일 특별 요금 적용 가능)</div> </div> </div> </div> <div class="parking-warning"> <div class="warning-header"><span class="warning-icon">⚠️</span> <div class="warning-content"> <h4 data-ke-size="size20">주차 주의사항</h4> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li>공연 당일 매우 혼잡 예상</li> <li>공연 2시간 전 주차장 만차 가능성</li> <li>공연 종료 후 출차 지연 예상</li> </ul> </div> </div> </div> <div class="transport-recommendation"><span class="rec-icon">✅</span> <div class="rec-content"><b>대중교통 이용을 권장합니다</b><br />지하철이 가장 빠르고 편리합니다</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 관람 규칙 --> <div id="rules" class="rules-section"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙 (필독)</h2> <!-- 촬영 금지 강조 --> <div class="photography-ban"> <div class="ban-header"><span class="ban-icon"> </span> <h3 class="ban-title" data-ke-size="size23">촬영 절대 금지</h3> <span class="ban-severity">즉시 퇴장</span></div> <div class="ban-content"> <p data-ke-size="size16"><b>공연장 입장부터 퇴장까지</b> 모든 형태의 촬영 및 녹음 금지:</p> <ul class="ban-list" style="list-style-type: disc;" data-ke-list-type="disc"> <li>사진/동영상 촬영</li> <li>음성 녹음</li> <li>SNS 라이브 방송</li> <li>촬영 장비 반입</li> </ul> </div> <div class="ban-penalty"><b>⚠️ 위반 시:</b> 즉시 퇴장 조치 (재입장 및 환불 불가)</div> </div> <!-- 기타 금지사항 --> <div class="other-prohibitions"> <h3 class="mobile-subtitle" data-ke-size="size23"> 기타 금지사항</h3> <div class="prohibition-list"> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">레이저 포인터, 과도한 조명 기구</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">대형 응원 도구 (시야 방해)</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">외부 음식물 및 알코올</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">꽃다발, 선물 등 무대 투척물</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">위험물품 (폭죽, 스프레이 등)</div> </div> </div> </div> <!-- 허용사항 --> <div class="allowed-items"> <h3 class="mobile-subtitle" data-ke-size="size23">✅ 허용사항</h3> <div class="allowed-list"> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>생수:</b> 500mL 이하 페트병 (뚜껑 제거)</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>휴대폰:</b> 무음모드 필수 (촬영 금지)</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>응원도구:</b> 소형 응원봉, 타올 등</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 물품보관 --> <div id="storage" class="storage-section"> <h2 class="section-title" data-ke-size="size26"> 물품보관 안내</h2> <div class="storage-info"> <div class="storage-main"> <div class="storage-header"><span class="storage-icon"> </span> <h3 class="storage-title" data-ke-size="size23">코인 락커 이용 안내</h3> </div> <div class="storage-details"> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>위치:</b> 1~3층 로비, 지하 1층</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>요금:</b> 소형 500원 / 중형 700원 / 대형 1,000원</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>결제:</b> 100원, 500원, 1,000원 동전만 사용</div> </div> </div> </div> <div class="storage-tips"> <h4 class="tips-title" data-ke-size="size20"> 이용 팁</h4> <div class="tip-cards"> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">동전 미리 준비</span></div> <div class="tip-card"><span class="tip-emoji">⏰</span> <span class="tip-text">공연 1시간 전 보관</span></div> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">큰 가방은 대형 락커</span></div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 추천 포인트 --> <div id="recommendation" class="recommendation-section"> <h2 class="section-title" data-ke-size="size26"> 추천 포인트</h2> <div class="recommend-cards"> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">최고의 라이브 퍼포먼스</div> <div class="recommend-desc">전 세계가 인정하는 ONE OK ROCK의 폭발적인 라이브 에너지</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">완벽한 연주력</div> <div class="recommend-desc">4명이 만들어내는 완벽한 하모니와 테크닉</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">DETOX 투어 특별함</div> <div class="recommend-desc">새로운 앨범과 히트곡들의 완벽한 조화</div> </div> <div class="recommend-card"> <div class="recommend-icon"> ️</div> <div class="recommend-title">최적의 공연장</div> <div class="recommend-desc">잠실 실내 체육관의 완벽한 음향과 시설</div> </div> </div> <div class="target-audience"> <h4 class="target-title" data-ke-size="size20"> 이런 분들께 추천!</h4> <div class="target-tags"><span class="target-tag">원오크 팬</span> <span class="target-tag">록 음악 애호가</span> <span class="target-tag">라이브 공연 선호</span> <span class="target-tag">J-ROCK 팬</span> <span class="target-tag">첫 콘서트 도전</span> <span class="target-tag">감동 추구</span></div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 문의 정보 --> <div id="contact" class="contact-section"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">154-1555</div> <div class="contact-desc">NOL 티켓 고객센터</div> <div class="contact-hours">예매 관련 문의</div> </div> </div> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">(주) 라이브네이션코리아</div> <div class="contact-desc">주최/주관사</div> <div class="contact-hours">공연 기획 및 운영</div> </div> </div> </div> <div class="official-links"> <h3 class="mobile-subtitle" data-ke-size="size23"> 공식 링크</h3> <div class="links-list"><a class="link-item primary" href="https://www.oneokrock.com" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">ONE OK ROCK 공식 홈페이지</div> <div class="link-desc">최신 소식 및 투어 정보</div> </div> <span class="link-arrow">&rarr;</span> </a> <a class="link-item" href="https://twitter.com/oneokrockofficial" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 트위터</div> <div class="link-desc">실시간 업데이트</div> </div> <span class="link-arrow">&rarr;</span> </a> <a class="link-item" href="https://instagram.com/oneokrockofficial" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 인스타그램</div> <div class="link-desc">비하인드 스토리</div> </div> <span class="link-arrow">&rarr;</span> </a></div> </div> <div class="final-notices"> <h3 class="mobile-subtitle" data-ke-size="size23"> 최종 안내</h3> <div class="final-notice-cards"> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">예매 오픈: 2025년 10월 30일 낮 12시</span></div> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">NOL 티켓에서만 예매 가능</span></div> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">8세 미만 입장 절대 불가</span></div> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">촬영 금지 (즉시 퇴장)</span></div> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">대중교통 이용 권장</span></div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p data-ke-size="size16">ONE OK ROCK의 DETOX ASIA TOUR 2026이 드디어 한국에 옵니다!</p> <p data-ke-size="size16">전 세계를 사로잡은 그들의 라이브 퍼포먼스를 잠실에서 경험하세요!</p> <p data-ke-size="size16"><b>록의 진수를 느낄 수 있는 최고의 기회를 놓치지 마세요! </b></p> <p class="conclusion-warning" data-ke-size="size16">예매 오픈 공지를 놓치지 않도록 공식 채널을 팔로우해 주세요!</p> </div> </div> <div class="final-message"> <b>We Are ONE OK ROCK!</b> </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size16"> <b>포스터 출처:</b> ONE OK ROCK 공식<br /> ️ <b>공연장:</b> 잠실 실내 체육관<br /> <b>예매처:</b> NOL 티켓 (1544-1555)<br /> <b>주최/주관:</b> (주) 라이브네이션코리아<br /> <b>정보 출처:</b> 공식 발표</p> </div> </div> 2026/2월 ONE OK ROCK one ok rock ASIA tour 2026 one ok rock 내한 잠실 체육관 jsy-spring https://jsy-spring.tistory.com/11 https://jsy-spring.tistory.com/11#entry11comment Thu, 16 Oct 2025 12:47:08 +0900 https://jsy-spring.tistory.com/9 <!-- 플로팅 네비게이션 --> <div class="floating-nav" id="floatingNav"> <div class="nav-toggle" onclick="toggleNav()"> <span class="nav-icon"> </span> <span class="nav-text">메뉴</span> </div> <div class="nav-menu" id="navMenu"> <div class="nav-header"> <span class="nav-title"> natori 콘서트</span> <button class="nav-close" onclick="toggleNav()">✕</button> </div> <div class="nav-items"> <a href="#info" class="nav-item" onclick="scrollToSection('info')"> <span class="nav-emoji"> </span> <span class="nav-label">기본 정보</span> </a> <a href="#artist" class="nav-item" onclick="scrollToSection('artist')"> <span class="nav-emoji"> </span> <span class="nav-label">아티스트 소개</span> </a> <a href="#setlist" class="nav-item" onclick="scrollToSection('setlist')"> <span class="nav-emoji"> </span> <span class="nav-label">세트리스트</span> </a> <a href="#ticket" class="nav-item" onclick="scrollToSection('ticket')"> <span class="nav-emoji"> </span> <span class="nav-label">티켓 정보</span> </a> <a href="#entrance" class="nav-item" onclick="scrollToSection('entrance')"> <span class="nav-emoji"> </span> <span class="nav-label">입장 안내</span> </a> <a href="#location" class="nav-item" onclick="scrollToSection('location')"> <span class="nav-emoji"> </span> <span class="nav-label">교통편</span> </a> <a href="#rules" class="nav-item" onclick="scrollToSection('rules')"> <span class="nav-emoji">⚠️</span> <span class="nav-label">관람 규칙</span> </a> <a href="#storage" class="nav-item" onclick="scrollToSection('storage')"> <span class="nav-emoji"> </span> <span class="nav-label">물품보관소</span> </a> <a href="#contact" class="nav-item" onclick="scrollToSection('contact')"> <span class="nav-emoji"> </span> <span class="nav-label">문의 정보</span> </a> </div> </div> </div> <!-- 맨 위로 버튼 --> <div class="scroll-to-top" id="scrollToTop" onclick="scrollToTop()"> <div class="scroll-icon">⬆️</div> <div class="scroll-text">TOP</div> </div> <!-- 스크롤 진행률 바 --> <div class="scroll-progress-bar"> <div class="scroll-progress" id="scrollProgress"></div> </div> <div class="concert-post mobile-optimized"> <!-- 메인 포스터 --> <div class="poster-container" id="top"> <img class="main-poster" src="https://i.ifh.cc/XvZo4d.jpg" alt="natori Asia Tour 2025 in Seoul" /> </div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> natori Asia Tour 2025 in Seoul</h1> <!-- 특별 안내 --> <div class="special-announcement"> <div class="announcement-badge"> 첫 내한</div> <div class="announcement-content"> <h3 class="announcement-title">싱어송라이터 natori</h3> <p class="announcement-desc">첫번째 내한공연 개최 결정!</p> </div> </div> <!-- 기본 정보 섹션 --> <div class="info-section" id="info"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">natori (나토리)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">콘서트명</div> <div class="info-value">natori Asia Tour 2025 in Seoul</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연일시</div> <div class="info-value">11월 21일(금) 19시 / 22일(토) 19시</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람시간</div> <div class="info-value">90분 공연</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">YES24 LIVE HALL (예스24 라이브홀)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">서울 광진구 구천면로 20</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">광나루역 (5호선) 2번 출구 도보 3분</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">전연령 관람 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 아티스트 소개 --> <div class="artist-section" id="artist"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16"><b>natori (なとり)</b>는 일본의 젊은 싱어송라이터로, 2021년 틱톡에서 시작해 2022년 "Overdose"로 공식 데뷔한 떠오르는 신예입니다. 청량하면서도 나른한, 반항아스러운 음색과 퇴폐적이고 도회적인 분위기의 곡들로 주목받고 있습니다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">출생</span> </div> <div class="artist-value">2003년 1월 31일 (22세)</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">활동 시작</span> </div> <div class="artist-value">2021년 5월 15일 (틱톡 ターミナル 업로드)</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">공식 데뷔</span> </div> <div class="artist-value">2022년 9월 7일 (Overdose)</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">소속</span> </div> <div class="artist-value">Sony Records (2023~)</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">MBTI</span> </div> <div class="artist-value">INFP (중재자형)</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">주요 성과</span> </div> <div class="artist-value">Ado "MIRROR" 작사/작곡, 애니메이션 타이업 다수</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title"> 대표곡</h4> <div class="songs-grid"> <span class="song-chip mega-hit"> Overdose (오버도즈) - 데뷔곡</span> <span class="song-chip"> 金木犀 (금목서)</span> <span class="song-chip"> 食卓 (식탁)</span> <span class="song-chip"> 絶対零度 (절대영도) - 윈브레 OP</span> <span class="song-chip"> 糸電話 (실전화) - 영화 주제가</span> </div> </div> <div class="artist-characteristics"> <h4 class="char-title"> 음악적 특징</h4> <div class="characteristics-list"> <div class="char-item"> <span class="char-icon"> </span> <div class="char-content"> <strong>음색:</strong> 청량하면서도 나른한, 반항아스러운 음색 </div> </div> <div class="char-item"> <span class="char-icon"> </span> <div class="char-content"> <strong>분위기:</strong> 퇴폐적이고 도회적인 곡 스타일 </div> </div> <div class="char-item"> <span class="char-icon"> </span> <div class="char-content"> <strong>가창:</strong> 약간 불안정한 가성이 특징 </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 예상 세트리스트 --> <div class="setlist-section" id="setlist"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle"> Asia Tour 2025 예상 공연곡</h3> <div class="setlist-stats"> <span class="stat">약 17곡</span> <span class="stat-divider">•</span> <span class="stat">90분</span> </div> <div class="setlist-note-top"> <span class="note-icon"> </span> <span class="note-text">일본 ONE-MAN LIVE TOUR「摩擦」세트리스트 기반</span> </div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"> <span class="song-num">1</span> <div class="song-info"> <div class="song-name">DRESSING ROOM</div> <div class="song-desc">오프닝, 무대 뒤 이야기</div> </div> </div> <div class="song-row"> <span class="song-num">2</span> <div class="song-info"> <div class="song-name">食卓 (식탁)</div> <div class="song-desc">가족의 식탁을 그린 곡</div> </div> </div> <div class="song-row hit"> <span class="song-num">3</span> <div class="song-info"> <div class="song-name">金木犀 (금목서)</div> <div class="song-desc">대표곡, 가을 감성</div> </div> </div> <div class="song-row"> <span class="song-num">4</span> <div class="song-info"> <div class="song-name">Cult.</div> <div class="song-desc">컬트적인 매력</div> </div> </div> <div class="song-row new"> <span class="song-num">5</span> <div class="song-info"> <div class="song-name">(미공개 신곡)</div> <div class="song-desc">투어 특별 신곡</div> </div> </div> <div class="song-row"> <span class="song-num">6</span> <div class="song-info"> <div class="song-name">FLASH BACK</div> <div class="song-desc">회상을 테마로 한 곡</div> </div> </div> <div class="song-row movie"> <span class="song-num">7</span> <div class="song-info"> <div class="song-name">糸電話 (실전화)</div> <div class="song-desc">영화 「오만과 선량」 주제가</div> </div> </div> <div class="song-row collaboration"> <span class="song-num">8</span> <div class="song-info"> <div class="song-name">MIRROR (Ado)</div> <div class="song-desc">Ado에게 제공한 곡, natori 버전</div> </div> </div> <div class="song-row"> <span class="song-num">9</span> <div class="song-info"> <div class="song-name">猿芝居 (서투른 연극)</div> <div class="song-desc">2번째 싱글</div> </div> </div> <div class="song-row dreamy"> <span class="song-num">10</span> <div class="song-info"> <div class="song-name">Sleepwalk</div> <div class="song-desc">몽환적인 분위기</div> </div> </div> <div class="song-row mega-hit"> <span class="song-num">11</span> <div class="song-info"> <div class="song-name">Overdose</div> <div class="song-desc">데뷔곡, 대표곡</div> </div> </div> <div class="song-row"> <span class="song-num">12</span> <div class="song-info"> <div class="song-name">SPEED</div> <div class="song-desc">속도감 있는 곡</div> </div> </div> <div class="song-row"> <span class="song-num">13</span> <div class="song-info"> <div class="song-name">フライデー・ナイト (프라이데이 나이트)</div> <div class="song-desc">3번째 싱글</div> </div> </div> <div class="song-row"> <span class="song-num">14</span> <div class="song-info"> <div class="song-name">EAT</div> <div class="song-desc">식욕과 욕망을 그린 곡</div> </div> </div> <div class="song-row"> <span class="song-num">15</span> <div class="song-info"> <div class="song-name">IN_MY_HEAD</div> <div class="song-desc">최신 싱글</div> </div> </div> <div class="song-row"> <span class="song-num">16</span> <div class="song-info"> <div class="song-name">エウレカ (유레카)</div> <div class="song-desc">4번째 싱글, 발견의 순간</div> </div> </div> <div class="song-row finale"> <span class="song-num">17</span> <div class="song-info"> <div class="song-name">絶対零度 (절대영도)</div> <div class="song-desc">애니메이션 윈브레 OP, 피날레</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon"> </div> <div class="note-content"> <div class="note-title">예상 세트리스트</div> <div class="note-desc">일본 투어「摩擦」경험을 바탕으로 한 예상 구성입니다!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 티켓 정보 --> <div class="ticket-section" id="ticket"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle"> 예매 일정</h3> <div class="booking-timeline"> <div class="booking-event first"> <div class="booking-badge first"> 1차</div> <div class="booking-content"> <div class="booking-title">첫 번째 티켓 오픈</div> <div class="booking-datetime">2025년 6월 16일(월) 오후 8시</div> </div> </div> <div class="booking-event additional"> <div class="booking-badge additional"> 추가</div> <div class="booking-content"> <div class="booking-title">추가 티켓 오픈</div> <div class="booking-datetime">2025년 7월 1일(화) 오후 8시</div> </div> </div> </div> </div> <!-- 가격 정보 --> <div class="price-section"> <h3 class="mobile-subtitle"> 티켓 가격</h3> <div class="price-cards-natori"> <div class="price-card standing"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">스탠딩석</h4> <div class="price-desc">1층 스탠딩 구역</div> </div> <div class="price-amount">127,000원</div> </div> </div> <div class="price-card seated"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">지정석</h4> <div class="price-desc">2층 지정좌석</div> </div> <div class="price-amount">127,000원</div> </div> </div> </div> </div> <!-- 좌석 안내도 --> <div class="seating-section"> <h3 class="mobile-subtitle"> 좌석 안내</h3> <div class="seating-layout"> <img src="https://i.ifh.cc/OwMAGO.png" alt="YES24 LIVE HALL 좌석 배치도" class="seating-image" /> <div class="seating-caption"> YES24 LIVE HALL 좌석 배치도</div> </div> <div class="seating-info"> <div class="seating-overview"> <p>본 공연은 <strong>객석 1층 스탠딩석 및 2층 지정좌석</strong>으로 운영됩니다.</p> </div> <div class="seating-details"> <div class="seating-detail standing"> <h4 class="detail-title"> 1층 스탠딩석</h4> <ul class="detail-list"> <li>예매 시 지정되는 번호가 입장 순서</li> <li>앞 번호부터 예매 권장</li> <li>구역 내 자유로운 위치 선택</li> </ul> </div> <div class="seating-detail seated"> <h4 class="detail-title"> 2층 지정좌석</h4> <ul class="detail-list"> <li>예매 시 좌석 선택 가능</li> <li>편안한 의자에서 관람</li> <li>무대 전체 조망 가능</li> </ul> </div> </div> <div class="seating-warnings"> <h4 class="warning-title">⚠️ 주의사항</h4> <div class="warning-points"> <p>• 무대 구성이 연출상의 이유로 사전 공지 없이 변경될 수 있습니다</p> <p>• 일부 구역/좌석은 시설물로 인해 시야가 방해될 수 있습니다</p> <p>• <strong>당일 시야 방해로 인한 티켓 취소, 교환, 환불 불가</strong></p> </div> </div> </div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle"> 예매처</h3> <div class="platform-cards"> <a href="https://ticket.melon.com/performance/index.htm?prodId=211526" target="_blank" rel="noopener" class="platform-card-main primary"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">멜론티켓</h4> <div class="platform-note">유일한 공식 예매처</div> </div> <span class="platform-arrow">→</span> </div> </a> <div class="unavailable-platforms"> <div class="unavailable-title">❌ 예매 불가능한 사이트</div> <div class="unavailable-list"> <span class="unavailable-item">인터파크 (NOL)</span> <span class="unavailable-item">티켓링크</span> <span class="unavailable-item">YES24 티켓</span> </div> </div> </div> </div> <!-- 기본 정보 --> <div class="ticket-details"> <h3 class="mobile-subtitle"> 기본 정보</h3> <div class="detail-cards"> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"><strong>배송:</strong> 11월 3일 일괄 배송</div> </div> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"><strong>매수 제한:</strong> 회차별 1인 3매</div> </div> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"><strong>예매처:</strong> 멜론티켓만</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 입장 안내 --> <div class="entrance-section" id="entrance"> <h2 class="section-title" data-ke-size="size26"> 입장 안내</h2> <div class="entrance-guide-image"> <img src="https://i.ifh.cc/LxM6WW.png" alt="natori 콘서트 입장 안내" class="entrance-image" /> <div class="entrance-caption"> 입장 안내 상세 정보</div> </div> <!-- 스탠딩석 입장 --> <div class="standing-entrance"> <h3 class="mobile-subtitle"> 스탠딩석 입장 안내</h3> <div class="entrance-timeline"> <div class="timeline-step"> <div class="step-time">17:00</div> <div class="step-content"> <div class="step-action">대기 시작</div> <div class="step-desc">예매번호 순으로 대기 (공연 2시간 전)</div> </div> </div> <div class="timeline-step critical"> <div class="step-time">18:00</div> <div class="step-content"> <div class="step-action">입장 시작</div> <div class="step-desc">순차적으로 입장 (공연 1시간 전)</div> </div> </div> <div class="timeline-step warning"> <div class="step-time">18:00 이후</div> <div class="step-content"> <div class="step-action">지각 시</div> <div class="step-desc"><strong>번호 무효!</strong> 마지막 입장</div> </div> </div> </div> </div> <!-- 지정석 입장 --> <div class="seated-entrance"> <h3 class="mobile-subtitle"> 지정좌석 입장 안내</h3> <div class="seated-rules"> <div class="seated-rule"> <span class="rule-icon">⏰</span> <div class="rule-content">스탠딩 관객 입장 완료 후 지정좌석 관객 입장 시작</div> </div> <div class="seated-rule"> <span class="rule-icon"> </span> <div class="rule-content">공연 시작 10분 전까지 입장 완료 권장</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 교통편 --> <div class="location-section" id="location"> <h2 class="section-title" data-ke-size="size26"> 교통편 & 위치</h2> <div class="venue-info-card"> <div class="venue-header"> <span class="venue-icon"> </span> <div class="venue-details"> <h3 class="venue-name">YES24 LIVE HALL</h3> <div class="venue-address">서울 광진구 구천면로 20</div> </div> </div> </div> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"> <span class="tab-icon"> </span> <span class="tab-text">지하철</span> </div> <div class="transport-tab" data-tab="bus"> <span class="tab-icon"> </span> <span class="tab-text">버스</span> </div> <div class="transport-tab" data-tab="parking"> <span class="tab-icon"> </span> <span class="tab-text">주차</span> </div> </div> <div class="transport-content"> <div class="transport-panel active" data-panel="subway"> <div class="route-item best"> <span class="route-line line5">5호선</span> <div class="route-info"> <div class="route-station">광나루역 2번 출구</div> <div class="route-time">도보 3분</div> </div> <span class="route-badge">최적</span> </div> </div> <div class="transport-panel" data-panel="bus"> <div class="bus-info"> <div class="bus-category">간선: 130, 370, N30 (광나루역 하차 후 횡단)</div> <div class="bus-category">직행: 1113 시리즈 (광진청소년수련관 하차)</div> </div> </div> <div class="transport-panel" data-panel="parking"> <div class="parking-warning"> <span class="parking-icon"> </span> <div class="parking-content"> <h4>공연장 내 주차장 없음</h4> <p>대중교통 이용 권고</p> <p><strong>교통문제로 인한 지연 시 티켓 변경/환불 불가</strong></p> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 관람 규칙 --> <div class="rules-section" id="rules"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙</h2> <div class="photography-ban"> <div class="ban-header"> <span class="ban-icon"> </span> <h3 class="ban-title">촬영 및 녹음 금지</h3> <span class="ban-level">퇴장 조치</span> </div> <div class="ban-content"> <p><strong>렌즈 교환이 가능한 전문 장비 등으로의 촬영 행위 금지</strong></p> <p>사진/동영상 촬영, 녹음, 녹화, 라이브 스트리밍 등 모든 촬영 행위</p> </div> </div> <div class="prohibited-items"> <h3 class="mobile-subtitle"> 반입 금지 물품</h3> <div class="prohibited-list"> <div class="prohibited-item"> 생수 제외한 음료/음식물</div> <div class="prohibited-item"> 애완동물</div> <div class="prohibited-item"> 꽃다발, 풍선</div> <div class="prohibited-item"> 폭죽, 화약, 레이저</div> <div class="prohibited-item"> 관람 방해 물품</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 물품보관소 --> <div class="storage-section" id="storage"> <h2 class="section-title" data-ke-size="size26"> 물품보관소 안내</h2> <div class="storage-info"> <div class="storage-main"> <h4 class="storage-title"> 코인락커 이용안내</h4> <div class="storage-details"> <div class="storage-item"> 위치: 공연장 1층 내외부</div> <div class="storage-item"> 요금: 유료 (500원 동전만)</div> <div class="storage-item"> 동전 교환기 운영 (혼잡 예상)</div> <div class="storage-item"> 수량 한정으로 소지품 간소화 권장</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 문의 정보 --> <div class="contact-section" id="contact"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"> <span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">1899-0042</div> <div class="contact-desc">멜론티켓 고객센터</div> </div> <a href="tel:1899-0042" class="contact-btn">전화하기</a> </div> </div> <div class="official-links"> <h3 class="mobile-subtitle"> 공식 링크</h3> <div class="links-grid"> <a href="https://ticket.melon.com/performance/index.htm?prodId=211526" target="_blank" rel="noopener" class="link-card primary"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">멜론티켓</div> <div class="link-desc">공식 예매처</div> </div> <span class="link-arrow">→</span> </a> <a href="https://twitter.com/natori_info" target="_blank" rel="noopener" class="link-card"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">natori 공식</div> <div class="link-desc">최신 소식</div> </div> <span class="link-arrow">→</span> </a> </div> </div> <div class="final-notices"> <h3 class="mobile-subtitle"> 최종 안내</h3> <div class="final-cards"> <div class="final-card"> 예매: 멜론티켓에서만 가능</div> <div class="final-card"> 11월 3일 일괄 배송</div> <div class="final-card">⏰ 시간 엄수 (번호 무효 주의)</div> <div class="final-card"> 촬영 절대 금지</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p>22세 신예 싱어송라이터 natori의 첫 내한 공연!</p> <p><strong>청량하고 도회적인 그의 음악을 YES24 LIVE HALL에서! </strong></p> </div> </div> <div class="final-message"> <strong>모두 즐거운 콘서트 되세요!</strong> </div> </div> </div> <!-- 완전한 CSS (네비게이션 + 스크롤바 포함) --> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; scroll-behavior: smooth; } /* natori 테마 색상 */ :root { --natori-primary: #8A2BE2; --natori-secondary: #9932CC; --natori-accent: #DA70D6; --natori-pink: #FF69B4; --natori-cyan: #00CED1; } /* 스크롤바 디자인 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #8A2BE2, #DA70D6); border-radius: 4px; transition: all 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #DA70D6, #FF69B4); box-shadow: 0 2px 8px rgba(138, 43, 226, 0.5); } /* 플로팅 네비게이션 */ .floating-nav { position: fixed; top: 20px; right: 20px; z-index: 1000; font-family: inherit; } .nav-toggle { display: flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #8A2BE2, #9932CC); color: white; padding: 0.75rem 1rem; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4); transition: all 0.3s ease; border: none; } .nav-toggle:hover { background: linear-gradient(135deg, #9932CC, #DA70D6); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6); } .nav-menu { position: absolute; top: 60px; right: 0; width: 250px; background: rgba(20, 20, 20, 0.95); border: 2px solid var(--natori-primary); border-radius: 12px; backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; } .nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .nav-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid rgba(138, 43, 226, 0.3); } .nav-title { color: var(--natori-primary); font-size: 1rem; font-weight: 600; } .nav-close { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 0.875rem; transition: all 0.3s ease; } .nav-close:hover { background: var(--natori-primary); color: white; } .nav-items { padding: 0.5rem; } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; color: #ffffff; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; margin-bottom: 0.25rem; } .nav-item:hover { background: rgba(138, 43, 226, 0.2); color: var(--natori-primary); transform: translateX(5px); } .nav-item.active { background: rgba(138, 43, 226, 0.3); color: var(--natori-primary); border-left: 3px solid var(--natori-primary); } .nav-emoji { font-size: 1rem; width: 20px; text-align: center; } .nav-label { font-size: 0.875rem; font-weight: 500; } /* 맨 위로 버튼 */ .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: linear-gradient(135deg, #8A2BE2, #DA70D6); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4); transition: all 0.3s ease; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px); } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top:hover { background: linear-gradient(135deg, #DA70D6, #FF69B4); transform: translateY(-5px) scale(1.1); box-shadow: 0 8px 25px rgba(138, 43, 226, 0.6); } .scroll-icon { font-size: 1.25rem; margin-bottom: 0.25rem; } .scroll-text { font-size: 0.7rem; font-weight: 600; color: white; } /* 스크롤 진행률 바 */ .scroll-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(0, 0, 0, 0.1); z-index: 1001; pointer-events: none; } .scroll-progress { height: 100%; background: linear-gradient(90deg, #8A2BE2 0%, #9932CC 50%, #DA70D6 100%); width: 0%; transition: width 0.1s ease; box-shadow: 0 0 10px rgba(138, 43, 226, 0.6); } /* 섹션 하이라이트 */ .section-highlight { animation: section-glow 1s ease-out; } @keyframes section-glow { 0% { box-shadow: 0 0 0 rgba(138, 43, 226, 0.5); } 50% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.8); } 100% { box-shadow: 0 0 0 rgba(138, 43, 226, 0.5); } } /* 기본 스타일들 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 350px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(138, 43, 226, 0.4); } .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--natori-primary), var(--natori-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } .special-announcement { background: rgba(138, 43, 226, 0.1); border: 2px solid var(--natori-primary); border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; text-align: center; } .announcement-badge { background: var(--natori-pink); color: white; padding: 0.25rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .announcement-title { font-size: 1.25rem; font-weight: 700; color: var(--natori-primary); margin-bottom: 0.5rem; } .announcement-desc { color: #ffffff; font-size: 1rem; } .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--natori-primary); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--natori-primary); } .mobile-subtitle { font-size: 1.125rem; color: var(--natori-secondary); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--natori-primary), var(--natori-accent)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--natori-primary); background: rgba(138, 43, 226, 0.1); } .info-card.venue { border-color: var(--natori-cyan); background: rgba(0, 206, 209, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--natori-primary); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--natori-cyan); background: rgba(0, 206, 209, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--natori-secondary); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--natori-cyan); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(138, 43, 226, 0.2); color: var(--natori-primary); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(138, 43, 226, 0.3); } .song-chip.mega-hit { background: rgba(255, 105, 180, 0.2); color: var(--natori-pink); border-color: var(--natori-pink); font-weight: 600; } /* 특징 */ .artist-characteristics { margin-top: 1.5rem; background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(218, 112, 214, 0.3); } .char-title { font-size: 1rem; color: var(--natori-accent); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .characteristics-list { display: grid; gap: 0.75rem; } .char-item { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: center; } .char-icon { font-size: 1.25rem; color: var(--natori-accent); } .char-content { color: #ffffff; font-size: 0.9rem; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--natori-primary); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .stat { background: rgba(138, 43, 226, 0.2); color: var(--natori-primary); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .setlist-note-top { display: flex; justify-content: center; align-items: center; gap: 0.5rem; background: rgba(0, 206, 209, 0.1); border: 1px solid var(--natori-cyan); border-radius: 8px; padding: 0.75rem; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(138, 43, 226, 0.3); } .set-title { font-size: 1rem; color: var(--natori-primary); margin-bottom: 1rem; font-weight: 600; text-align: center; } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(138, 43, 226, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--natori-cyan); background: rgba(0, 206, 209, 0.1); } .song-row.hit { border: 2px solid var(--natori-primary); background: rgba(138, 43, 226, 0.15); } .song-row.new { border: 2px solid var(--natori-pink); background: rgba(255, 105, 180, 0.15); } .song-row.movie { border: 1px solid var(--natori-accent); background: rgba(218, 112, 214, 0.1); } .song-row.collaboration { border: 1px solid var(--natori-cyan); background: rgba(0, 206, 209, 0.1); } .song-row.mega-hit { border: 2px solid var(--natori-accent); background: rgba(218, 112, 214, 0.15); } .song-row.finale { border: 2px solid var(--natori-secondary); background: rgba(153, 50, 204, 0.15); } .song-num { background: linear-gradient(135deg, var(--natori-primary), var(--natori-secondary)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(0, 206, 209, 0.1); border-radius: 10px; border: 1px solid var(--natori-cyan); } .note-title { font-size: 1rem; font-weight: 600; color: var(--natori-cyan); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(138, 43, 226, 0.3); } .booking-timeline { display: grid; gap: 1rem; margin: 1rem 0; } .booking-event { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .booking-event.first { border-color: var(--natori-primary); background: rgba(138, 43, 226, 0.1); } .booking-event.additional { border-color: var(--natori-secondary); background: rgba(153, 50, 204, 0.1); } .booking-badge { padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; color: white; } .booking-badge.first { background: var(--natori-primary); } .booking-badge.additional { background: var(--natori-secondary); } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.125rem; color: var(--natori-primary); font-weight: 700; } /* 가격 카드 */ .price-cards-natori { display: grid; gap: 1rem; margin: 1rem 0; } .price-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .price-card.standing { border-color: var(--natori-primary); background: rgba(138, 43, 226, 0.1); } .price-card.seated { border-color: var(--natori-secondary); background: rgba(153, 50, 204, 0.1); } .price-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .price-icon { font-size: 1.5rem; } .price-type { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .price-desc { font-size: 0.875rem; color: #a0a0a0; } .price-amount { font-size: 1.25rem; font-weight: 700; color: var(--natori-primary); } /* 좌석 안내 */ .seating-layout { text-align: center; margin-bottom: 1.5rem; } .seating-image { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3); margin-bottom: 0.5rem; } .seating-caption { font-size: 0.875rem; color: #a0a0a0; font-style: italic; } .seating-overview { background: rgba(138, 43, 226, 0.1); border: 2px solid var(--natori-primary); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; text-align: center; } .seating-details { display: grid; gap: 1rem; margin-bottom: 1rem; } .seating-detail { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; } .seating-detail.standing { border-left: 4px solid var(--natori-primary); } .seating-detail.seated { border-left: 4px solid var(--natori-secondary); } .detail-title { color: var(--natori-primary); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .detail-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; } .detail-list li { color: #ffffff; font-size: 0.875rem; padding: 0.25rem 0; position: relative; padding-left: 1rem; } .detail-list li::before { content: '•'; position: absolute; left: 0; color: var(--natori-primary); font-weight: bold; } /* 예매처 */ .platform-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card-main { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; color: inherit; transition: all 0.3s ease; } .platform-card-main.primary { border-color: var(--natori-primary); background: rgba(138, 43, 226, 0.1); } .platform-card-main.primary:hover { background: rgba(138, 43, 226, 0.2); transform: translateY(-2px); } .platform-header { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-arrow { color: var(--natori-primary); font-weight: bold; font-size: 1.25rem; } .unavailable-platforms { background: rgba(60, 60, 60, 0.5); border-radius: 8px; padding: 1rem; margin-top: 1rem; } .unavailable-title { color: #999; font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .unavailable-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .unavailable-item { background: rgba(80, 80, 80, 0.5); color: #999; padding: 0.5rem; border-radius: 6px; font-size: 0.875rem; } /* 기본 정보 */ .detail-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .detail-card { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: center; } .detail-icon { font-size: 1.25rem; color: var(--natori-primary); } .detail-content { color: #ffffff; font-size: 0.9rem; } /* 입장 안내 */ .entrance-guide-image { text-align: center; margin-bottom: 1.5rem; } .entrance-image { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3); margin-bottom: 0.5rem; } .entrance-caption { font-size: 0.875rem; color: #a0a0a0; font-style: italic; } .standing-entrance, .seated-entrance { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .standing-entrance { border: 2px solid var(--natori-primary); } .seated-entrance { border: 2px solid var(--natori-secondary); } .entrance-timeline { display: grid; gap: 0.75rem; } .timeline-step { display: flex; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: 6px; } .timeline-step.critical { background: rgba(138, 43, 226, 0.1); border: 1px solid var(--natori-primary); } .timeline-step.warning { background: rgba(255, 107, 107, 0.1); border: 1px solid #ff6b6b; } .step-time { background: var(--natori-primary); color: white; padding: 0.5rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; min-width: 80px; text-align: center; } .step-action { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .step-desc { font-size: 0.85rem; color: #a0a0a0; } .seated-rules { display: grid; gap: 0.75rem; } .seated-rule { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(153, 50, 204, 0.1); border-radius: 6px; align-items: flex-start; } .rule-icon { font-size: 1rem; color: var(--natori-secondary); flex-shrink: 0; } .rule-content { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } /* 공연장 정보 */ .venue-info-card { background: rgba(138, 43, 226, 0.1); border: 2px solid var(--natori-primary); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .venue-header { display: flex; align-items: center; gap: 1rem; } .venue-icon { font-size: 1.5rem; } .venue-name { font-size: 1.25rem; font-weight: 700; color: var(--natori-primary); margin-bottom: 0.25rem; } .venue-address { color: #ffffff; font-size: 0.95rem; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--natori-primary), var(--natori-secondary)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 100px; } .transport-panel { display: none; } .transport-panel.active { display: block; } .route-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; position: relative; } .route-item.best { border: 2px solid var(--natori-primary); background: rgba(138, 43, 226, 0.1); } .route-line { padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; color: white; text-align: center; min-width: 60px; } .route-line.line5 { background: #996CAC; } .route-station { font-size: 0.95rem; color: #ffffff; font-weight: 600; margin-bottom: 0.25rem; } .route-time { font-size: 0.8rem; color: #a0a0a0; } .route-badge { position: absolute; top: -5px; right: -5px; background: var(--natori-cyan); color: #000; padding: 0.25rem 0.5rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; } .bus-info { background: rgba(40, 40, 40, 0.8); padding: 1rem; border-radius: 8px; } .bus-category { color: #ffffff; margin-bottom: 0.5rem; font-size: 0.9rem; line-height: 1.4; } .parking-warning { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 8px; align-items: center; } .parking-icon { font-size: 1.5rem; color: #ff6b6b; } .parking-content h4 { color: #ff6b6b; font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; } .parking-content p { color: #ffffff; font-size: 0.9rem; margin-bottom: 0.25rem; } /* 관람 규칙 */ .photography-ban { background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem; } .ban-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .ban-icon { font-size: 1.5rem; } .ban-title { font-size: 1.125rem; color: #ff6b6b; font-weight: 700; } .ban-level { background: #ff6b6b; color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .ban-content p { color: #ffffff; margin-bottom: 0.5rem; font-size: 0.9rem; } .prohibited-list { display: grid; gap: 0.5rem; margin: 1rem 0; } .prohibited-item { background: rgba(40, 40, 40, 0.8); padding: 0.75rem; border-radius: 6px; color: #ffffff; font-size: 0.875rem; } /* 물품보관소 */ .storage-info { background: rgba(20, 20, 20, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid rgba(0, 206, 209, 0.3); } .storage-title { color: var(--natori-cyan); font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; text-align: center; } .storage-details { display: grid; gap: 0.75rem; } .storage-item { background: rgba(40, 40, 40, 0.8); padding: 0.75rem; border-radius: 6px; color: #ffffff; font-size: 0.875rem; } /* 문의 정보 */ .contact-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(138, 43, 226, 0.1); border: 2px solid var(--natori-primary); border-radius: 10px; margin-bottom: 1.5rem; } .contact-icon { font-size: 1.5rem; } .contact-number { font-size: 1.25rem; font-weight: 700; color: var(--natori-primary); margin-bottom: 0.25rem; } .contact-desc { font-size: 0.9rem; color: #ffffff; } .contact-btn { background: var(--natori-primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.9rem; } .links-grid { display: grid; gap: 0.75rem; } .link-card { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: rgba(40, 40, 40, 0.9); border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .link-card.primary { border-color: var(--natori-primary); background: rgba(138, 43, 226, 0.1); } .link-card:hover { background: rgba(138, 43, 226, 0.2); border-color: var(--natori-primary); } .link-icon { font-size: 1.25rem; } .link-title { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .link-desc { font-size: 0.8rem; color: #a0a0a0; } .link-arrow { color: var(--natori-primary); font-weight: bold; } /* 최종 안내 */ .final-cards { display: grid; gap: 0.5rem; margin: 1rem 0; } .final-card { background: rgba(40, 40, 40, 0.8); padding: 0.75rem; border-radius: 6px; color: #ffffff; font-size: 0.875rem; } /* 마무리 */ .conclusion-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--natori-primary); border-radius: 12px; padding: 1.5rem; text-align: center; margin-bottom: 1rem; } .conclusion-icon { font-size: 3rem; color: var(--natori-primary); margin-bottom: 1rem; } .conclusion-content p { color: #a0a0a0; margin-bottom: 0.75rem; line-height: 1.5; font-size: 0.95rem; } .conclusion-content strong { color: #ffffff; } .final-message { font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, var(--natori-primary), var(--natori-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding: 1rem; background-color: rgba(138, 43, 226, 0.1); border-radius: 10px; } /* 모바일 대응 */ @media (max-width: 768px) { .floating-nav { top: 15px; right: 15px; } .nav-toggle { padding: 0.5rem 0.75rem; font-size: 0.875rem; } .nav-menu { width: 220px; top: 50px; } .scroll-to-top { width: 50px; height: 50px; bottom: 20px; right: 20px; } .scroll-icon { font-size: 1.125rem; } .scroll-text { font-size: 0.65rem; } .timeline-step { flex-direction: column; text-align: center; gap: 0.5rem; } .step-time { min-width: auto; } } </style> <!-- JavaScript (네비게이션 + 기존 기능) --> <script> // 네비게이션 토글 function toggleNav() { const navMenu = document.getElementById('navMenu'); navMenu.classList.toggle('active'); } // 특정 섹션으로 스크롤 function scrollToSection(sectionId) { const element = document.getElementById(sectionId); if (element) { // 네비게이션 닫기 document.getElementById('navMenu').classList.remove('active'); // 부드럽게 스크롤 element.scrollIntoView({ behavior: 'smooth', block: 'start' }); // 하이라이트 효과 element.classList.add('section-highlight'); setTimeout(() => { element.classList.remove('section-highlight'); }, 1000); // 네비게이션 활성 상태 업데이트 updateActiveNav(sectionId); } } // 맨 위로 스크롤 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); updateActiveNav('top'); } // 네비게이션 활성 상태 업데이트 function updateActiveNav(activeId) { const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.classList.remove('active'); if (item.getAttribute('href') === `#${activeId}`) { item.classList.add('active'); } }); } // 스크롤 진행률 업데이트 function updateScrollProgress() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercentage = (scrollTop / scrollHeight) * 100; const progressBar = document.getElementById('scrollProgress'); if (progressBar) { progressBar.style.width = scrollPercentage + '%'; } } // 맨 위로 버튼 표시/숨김 function toggleScrollTopButton() { const scrollTopBtn = document.getElementById('scrollToTop'); const scrollPosition = window.pageYOffset || document.documentElement.scrollTop; if (scrollPosition > 300) { scrollTopBtn.classList.add('visible'); } else { scrollTopBtn.classList.remove('visible'); } } // 현재 보고 있는 섹션 자동 감지 function detectCurrentSection() { const sections = ['info', 'artist', 'setlist', 'ticket', 'entrance', 'location', 'rules', 'storage', 'contact']; const scrollPosition = window.pageYOffset + 100; let currentSection = 'top'; sections.forEach(sectionId => { const element = document.getElementById(sectionId); if (element) { const elementTop = element.offsetTop; if (scrollPosition >= elementTop) { currentSection = sectionId; } } }); updateActiveNav(currentSection); } // 교통편 탭 기능 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 이벤트 리스너 window.addEventListener('scroll', function() { updateScrollProgress(); toggleScrollTopButton(); detectCurrentSection(); }); // 네비게이션 외부 클릭 시 닫기 document.addEventListener('click', function(event) { const floatingNav = document.querySelector('.floating-nav'); const navMenu = document.getElementById('navMenu'); if (!floatingNav.contains(event.target) && navMenu.classList.contains('active')) { navMenu.classList.remove('active'); } }); // 키보드 단축키 document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { document.getElementById('navMenu').classList.remove('active'); } if (e.key === 'Home') { e.preventDefault(); scrollToTop(); } const shortcuts = { '1': 'info', '2': 'artist', '3': 'setlist', '4': 'ticket', '5': 'entrance', '6': 'location', '7': 'rules', '8': 'storage', '9': 'contact' }; if (shortcuts[e.key]) { scrollToSection(shortcuts[e.key]); } }); // 초기화 document.addEventListener('DOMContentLoaded', function() { initTransportTabs(); updateScrollProgress(); toggleScrollTopButton(); detectCurrentSection(); console.log(' natori 네비게이션 시스템 완료!'); console.log(' 단축키: 1-9 (섹션), Home (맨위), ESC (닫기)'); }); </script> 2025/11월 natori natori Asia Tour 2025 in Seoul overdose 나토리 jsy-spring https://jsy-spring.tistory.com/9 https://jsy-spring.tistory.com/9#entry9comment Wed, 24 Sep 2025 15:21:17 +0900 https://jsy-spring.tistory.com/8 <!-- 플로팅 네비게이션 --> <div class="floating-nav" id="floatingNav"> <div class="nav-toggle" onclick="toggleNav()"> <span class="nav-icon"> </span> <span class="nav-text">메뉴</span> </div> <div class="nav-menu" id="navMenu"> <div class="nav-header"> <span class="nav-title"> YUURI 콘서트</span> <button class="nav-close" onclick="toggleNav()">✕</button> </div> <div class="nav-items"> <a href="#info" class="nav-item" onclick="scrollToSection('info')"> <span class="nav-emoji"> </span> <span class="nav-label">기본 정보</span> </a> <a href="#artist" class="nav-item" onclick="scrollToSection('artist')"> <span class="nav-emoji"> </span> <span class="nav-label">아티스트 소개</span> </a> <a href="#setlist" class="nav-item" onclick="scrollToSection('setlist')"> <span class="nav-emoji"> </span> <span class="nav-label">세트리스트</span> </a> <a href="#ticket" class="nav-item" onclick="scrollToSection('ticket')"> <span class="nav-emoji"> </span> <span class="nav-label">티켓 정보</span> </a> <a href="#entrance" class="nav-item" onclick="scrollToSection('entrance')"> <span class="nav-emoji"> </span> <span class="nav-label">입장 안내</span> </a> <a href="#location" class="nav-item" onclick="scrollToSection('location')"> <span class="nav-emoji"> </span> <span class="nav-label">교통편</span> </a> <a href="#rules" class="nav-item" onclick="scrollToSection('rules')"> <span class="nav-emoji">⚠️</span> <span class="nav-label">관람 규칙</span> </a> <a href="#recommendation" class="nav-item" onclick="scrollToSection('recommendation')"> <span class="nav-emoji"> </span> <span class="nav-label">추천 포인트</span> </a> <a href="#contact" class="nav-item" onclick="scrollToSection('contact')"> <span class="nav-emoji"> </span> <span class="nav-label">문의 정보</span> </a> </div> </div> </div> <!-- 맨 위로 버튼 --> <div class="scroll-to-top" id="scrollToTop" onclick="scrollToTop()"> <div class="scroll-icon">⬆️</div> <div class="scroll-text">TOP</div> </div> <!-- 스크롤 진행률 바 --> <div class="scroll-progress-bar"> <div class="scroll-progress" id="scrollProgress"></div> </div> <div class="concert-post mobile-optimized"> <!-- 메인 포스터 --> <div class="poster-container" id="top"> <img class="main-poster" src="https://i.ifh.cc/Cwwzza.jpg" alt="YUURI ASIA TOUR 2025 in SEOUL" /> </div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> YUURI ASIA TOUR 2025 in SEOUL</h1> <!-- 특별 안내 --> <div class="special-announcement"> <div class="announcement-badge"> 솔드아웃 아티스트</div> <div class="announcement-content"> <h3 class="announcement-title">티켓 구하기 어려운 그 아티스트!</h3> <p class="announcement-desc">일본뿐만 아니라 한국에서도 티켓 구하기가 어려운 상황이 계속되는 가운데 드디어 2025년 투어 개최!</p> </div> </div> <!-- 투어 소개 --> <div class="tour-intro"> <h3 class="tour-title"> YUURI ASIA TOUR 2025 소개</h3> <div class="tour-description"> <p data-ke-size="size16">'YUURI ASIA TOUR 2025'라는 타이틀 아래 일본 전국 10개 도시를 비롯해 상하이, 타이베이 등 아시아 각지를 돌며 <strong>전 공연 솔드아웃</strong>을 기록했던 지난 아레나 투어를 크게 뛰어넘는 규모로 <strong>25만 명의 관객</strong>을 동원할 예정입니다.</p> <div class="korea-history"> <div class="history-item past"> <span class="history-icon"> ️</span> <div class="history-content"> <div class="history-date">2024년 5월</div> <div class="history-event"> <strong>KSPO DOME 공연 성공!</strong><br> 일본인 남성 솔로 아티스트로서 서울 KSPO DOME 공연<br> 2일간 약 25,000장의 티켓 솔드아웃! </div> </div> </div> <div class="history-item current"> <span class="history-icon"> </span> <div class="history-content"> <div class="history-date">2025년 11월</div> <div class="history-event"> <strong>KINTEX HALL 10 공연</strong><br> 한국 팬 여러분의 기대에 부응하여 다시 한번 한국 공연 개최<br> <em class="artist-message">"꼭 와주세요."</em> </div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 기본 정보 섹션 --> <div class="info-section" id="info"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">YUURI (유우리)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">콘서트명</div> <div class="info-value">YUURI ASIA TOUR 2025 in SEOUL</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연일시</div> <div class="info-value">11월 1일(토) 18시 / 2일(일) 17시</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람시간</div> <div class="info-value">90분 공연</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">킨텍스 제2전시장 10홀</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">경기 고양시 일산서구 킨텍스로 217-59</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">킨텍스역 (경의중앙선) 2번 출구 도보 5분</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">전연령 관람 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 아티스트 소개 --> <div class="artist-section" id="artist"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16"><b>유우리 (優里)</b>는 8년간의 무명생활을 거쳐 틱톡에서 화제가 된 "かくれんぼ(숨바꼭질)"로 브레이크한 감동적인 스토리의 주인공입니다. "ドライフラワー(드라이플라워)"는 일본 가요 역사상 최고의 히트곡 중 하나가 되었습니다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">출생</span> </div> <div class="artist-value">1994년 3월 23일 (31세, 도쿠시마현)</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">성장지</span> </div> <div class="artist-value">치바현 치바시 미하마구 마쿠하리</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">솔로 데뷔</span> </div> <div class="artist-value">2019년 12월 1일 (かくれんぼ)</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">소속</span> </div> <div class="artist-value">소니 뮤직 엔터테인먼트 재팬</div> </div> <div class="artist-card struggle"> <div class="artist-card-header"> <span class="artist-icon">⏰</span> <span class="artist-label">무명 기간</span> </div> <div class="artist-value">8년간 (2016 THE BUGZY ~ 2019 솔로)</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">주요 성과</span> </div> <div class="artist-value">드라이플라워 9억뷰, 빌보드 연간 1위</div> </div> <div class="artist-card motto"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">좌우명</span> </div> <div class="artist-value">"하고 싶은 걸 위해서라면 어떤 것도 견딜 수 있어"</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title"> 대표곡</h4> <div class="songs-grid"> <span class="song-chip mega-hit"> ドライフラワー (드라이플라워) - 9억뷰 달성</span> <span class="song-chip viral"> かくれんぼ (숨바꼭질) - 틱톡 바이럴 데뷔곡</span> <span class="song-chip"> ベテルギウス (베텔기우스)</span> <span class="song-chip"> ピーターパン (피터팬)</span> <span class="song-chip"> カーテンコール (커튼콜)</span> </div> </div> <div class="success-story"> <h4 class="story-title"> 감동적인 성공 스토리</h4> <div class="story-timeline"> <div class="story-item struggle"> <span class="story-icon"> </span> <div class="story-content"> <div class="story-period">무명 시절 (8년간)</div> <div class="story-detail"> 고등학교 자퇴 → THE BUGZY 보컬 → 찢어지게 가난<br> "25살까지 성과 없으면 음악 포기" 어머니와 약속 </div> </div> </div> <div class="story-item breakthrough"> <span class="story-icon"> </span> <div class="story-content"> <div class="story-period">2019년 (25살)</div> <div class="story-detail"> かくれんぼ 틱톡 바이럴 → 인생 첫 번째 전환점<br> MY FIRST STORY 히로와의 만남 </div> </div> </div> <div class="story-item success"> <span class="story-icon"> </span> <div class="story-content"> <div class="story-period">2020년</div> <div class="story-detail"> ドライフラワー 대성공 → THE FIRST TAKE 1억뷰<br> 빌보드 연간 1위, 일본 가요계 신화 창조 </div> </div> </div> <div class="story-item korea"> <span class="story-icon"> </span> <div class="story-content"> <div class="story-period">2024-2025</div> <div class="story-detail"> KSPO DOME 25,000명 솔드아웃<br> → KINTEX 재내한 "꼭 와주세요" </div> </div> </div> </div> <div class="motto-highlight"> <span class="motto-icon"> </span> <div class="motto-content"> <div class="motto-text">"하고 싶은 걸 위해서라면 어떤 것도 견딜 수 있어"</div> <div class="motto-desc">8년간의 무명생활을 하며 가지게 된 신념이자 좌우명</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 예상 세트리스트 --> <div class="setlist-section" id="setlist"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle"> ASIA TOUR 2025 예상 공연곡</h3> <div class="setlist-stats"> <span class="stat">약 20곡</span> <span class="stat-divider">•</span> <span class="stat">90분</span> </div> <div class="setlist-note-top"> <span class="note-icon"> </span> <span class="note-text">2024년 KSPO DOME 내한 세트리스트를 바탕으로 한 예상 구성</span> </div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"> <span class="song-num">1</span> <div class="song-info"> <div class="song-name">ピーターパン (피터팬)</div> <div class="song-desc">메이저 데뷔곡</div> </div> </div> <div class="song-row anime"> <span class="song-num">2</span> <div class="song-info"> <div class="song-name">カーテンコール (커튼콜)</div> <div class="song-desc">히로아카 7기 OP</div> </div> </div> <div class="song-row"> <span class="song-num">3</span> <div class="song-info"> <div class="song-name">うぉ (워, Wo)</div> <div class="song-desc">독특한 제목의 곡</div> </div> </div> <div class="song-row"> <span class="song-num">4</span> <div class="song-info"> <div class="song-name">花鳥風月 (화조풍월)</div> <div class="song-desc">일본 정서를 담은 곡</div> </div> </div> <div class="song-row"> <span class="song-num">5</span> <div class="song-info"> <div class="song-name">レオ (레오)</div> <div class="song-desc">감성적인 발라드</div> </div> </div> <div class="song-row viral"> <span class="song-num">6</span> <div class="song-info"> <div class="song-name">かくれんぼ (숨바꼭질)</div> <div class="song-desc">솔로 데뷔곡, 틱톡 바이럴</div> </div> </div> <div class="song-row mega-hit"> <span class="song-num">7</span> <div class="song-info"> <div class="song-name">ドライフラワー (드라이플라워)</div> <div class="song-desc">대표곡, 9억뷰 달성</div> </div> </div> <div class="song-row"> <span class="song-num">8</span> <div class="song-info"> <div class="song-name">タイムマシン (타임머신)</div> <div class="song-desc">시간여행을 테마로 한 곡</div> </div> </div> <div class="song-row"> <span class="song-num">9</span> <div class="song-info"> <div class="song-name">夏音 (여름소리)</div> <div class="song-desc">여름 감성 발라드</div> </div> </div> <div class="song-row"> <span class="song-num">10</span> <div class="song-info"> <div class="song-name">ガリレオは恋をする (갈릴레오는 사랑을 한다)</div> <div class="song-desc">과학과 사랑의 만남</div> </div> </div> <div class="song-row"> <span class="song-num">11</span> <div class="song-info"> <div class="song-name">ミズキリ (물수제비)</div> <div class="song-desc">물 위를 스치는 돌처럼</div> </div> </div> <div class="song-row"> <span class="song-num">12</span> <div class="song-info"> <div class="song-name">メリーゴーランド (회전목마)</div> <div class="song-desc">애니메이션 주제가</div> </div> </div> <div class="song-row"> <span class="song-num">13</span> <div class="song-info"> <div class="song-name">ライラ (라이라)</div> <div class="song-desc">감성적인 멜로디</div> </div> </div> <div class="song-row"> <span class="song-num">14</span> <div class="song-info"> <div class="song-name">ブレーメン (브레멘)</div> <div class="song-desc">브레멘 음악대 모티브</div> </div> </div> <div class="song-row"> <span class="song-num">15</span> <div class="song-info"> <div class="song-name">告白直前酸欠状態 (고백직전산소결핍상태)</div> <div class="song-desc">고백 전 설렘을 표현</div> </div> </div> <div class="song-row"> <span class="song-num">16</span> <div class="song-info"> <div class="song-name">ヒーローの居ない街 (히어로가 없는 도시)</div> <div class="song-desc">현실적인 메시지</div> </div> </div> <div class="song-row space"> <span class="song-num">17</span> <div class="song-info"> <div class="song-name">アストロノーツ (아스트로노츠)</div> <div class="song-desc">우주비행사, 꿈에 대한 노래</div> </div> </div> <div class="song-row finale"> <span class="song-num">18</span> <div class="song-info"> <div class="song-name">+1</div> <div class="song-desc">메인 세트 피날레</div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title"> 앙코르</h4> <div class="songs-list-mobile encore"> <div class="song-row encore-song"> <span class="song-num encore-num">19</span> <div class="song-info"> <div class="song-name">ベテルギウス (베텔기우스)</div> <div class="song-desc">별자리 이름, 감동적인 발라드</div> </div> </div> <div class="song-row encore-song"> <span class="song-num encore-num">20</span> <div class="song-info"> <div class="song-name">ビリミリオン (빌리밀리언)</div> <div class="song-desc">그랜드 피날레</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon">✅</div> <div class="note-content"> <div class="note-title">예상 세트리스트</div> <div class="note-desc">2024년 KSPO DOME 내한 경험을 바탕으로 한 예상 구성!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 티켓 정보 --> <div class="ticket-section" id="ticket"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle"> 예매 일정</h3> <div class="booking-card-main"> <div class="booking-badge"> 확정</div> <div class="booking-content"> <div class="booking-title">티켓 오픈</div> <div class="booking-datetime">2025년 5월 7일(수) 오후 8시</div> </div> </div> </div> <!-- 가격 정보 --> <div class="price-section"> <h3 class="mobile-subtitle"> 티켓 가격</h3> <div class="price-cards-yuuri"> <div class="price-card standing-r"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">스탠딩 R석</h4> <div class="price-desc">프리미엄 스탠딩</div> </div> <div class="price-amount">154,000원</div> </div> </div> <div class="price-card standing-s"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">스탠딩 S석</h4> <div class="price-desc">일반 스탠딩</div> </div> <div class="price-amount">143,000원</div> </div> </div> <div class="price-card seated"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">지정석</h4> <div class="price-desc">계단식 좌석</div> </div> <div class="price-amount">143,000원</div> </div> </div> </div> </div> <!-- 좌석 안내도 --> <div class="seating-section"> <h3 class="mobile-subtitle"> 좌석 안내</h3> <div class="seating-layout"> <img src="https://i.ifh.cc/7zXrxd.png" alt="킨텍스 제2전시장 10홀 좌석 배치도" class="seating-image" /> <div class="seating-caption"> 킨텍스 제2전시장 10홀 좌석 배치도</div> </div> <div class="seating-info"> <div class="seating-types"> <div class="seating-type floor-standing"> <h4 class="type-title"> Floor 구역 (스탠딩)</h4> <ul class="type-features"> <li>4개의 구역으로 나뉜 스탠딩석</li> <li>안전상의 이유로 구역 구분 펜스 설치</li> <li>입장 번호순으로 입장</li> <li>구역 내 자유로운 위치 선택</li> </ul> </div> <div class="seating-type designated"> <h4 class="type-title"> 지정석 객석</h4> <ul class="type-features"> <li>단차가 있는 계단식 좌석</li> <li>예매 시 좌석 선택 가능</li> <li>편안한 관람 환경</li> <li>무대 전체 조망 가능</li> </ul> </div> </div> <div class="seating-warnings"> <h4 class="warning-title">⚠️ 좌석 관련 주의사항</h4> <div class="warning-list"> <p>• 상기 이미지는 예매 시 이해를 돕기 위한 이미지로 실제와 다를 수 있습니다</p> <p>• 무대 구성이 연출상의 이유로 사전 공지 없이 변경될 수 있습니다</p> <p>• 관람 위치 및 관람객의 신장 차이에 따라 일부 시야 장애 발생 가능</p> <p>• 무대 연출과 구조물, 카메라로 인해 일부 시야가 제한될 수 있습니다</p> <p>• <strong>공연 당일 시야 제한으로 인한 티켓 환불 및 변경 불가</strong></p> </div> </div> </div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle"> 예매처</h3> <div class="platform-cards"> <a href="https://www.ticketlink.co.kr/product/56097" target="_blank" rel="noopener" class="platform-card-main primary"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">티켓링크</h4> <div class="platform-note">유일한 공식 예매처</div> </div> <span class="platform-arrow">→</span> </div> </a> <div class="unavailable-platforms"> <div class="unavailable-title">❌ 예매 불가능한 사이트</div> <div class="unavailable-list"> <span class="unavailable-item">인터파크 (NOL)</span> <span class="unavailable-item">멜론티켓</span> <span class="unavailable-item">YES24 티켓</span> </div> </div> </div> </div> <!-- 기본 정보 --> <div class="ticket-details"> <h3 class="mobile-subtitle"> 기본 정보</h3> <div class="detail-cards"> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"><strong>티켓 형태:</strong> 모바일 티켓 (배송 없음)</div> </div> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"><strong>매수 제한:</strong> 1인 2매까지</div> </div> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"><strong>예매처:</strong> 티켓링크에서만</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 입장 안내 --> <div class="entrance-section" id="entrance"> <h2 class="section-title" data-ke-size="size26"> 입장 안내</h2> <!-- 스탠딩석 입장 안내 --> <div class="standing-entrance"> <h3 class="mobile-subtitle"> 스탠딩석 입장 안내</h3> <div class="standing-procedure"> <div class="procedure-overview"> <span class="overview-icon"> </span> <div class="overview-content"> <strong>입장 번호 = 입장 순서</strong><br> 예매 시 지정되는 번호가 입장 순서입니다. 빠른 번호일수록 입장이 빨라집니다. </div> </div> <div class="procedure-timeline"> <div class="timeline-item"> <div class="timeline-time">15:00</div> <div class="timeline-content"> <div class="timeline-action">대기 시작</div> <div class="timeline-desc">예매번호 순으로 대기 (공연 3시간 전)</div> </div> </div> <div class="timeline-item critical"> <div class="timeline-time">16:00</div> <div class="timeline-content"> <div class="timeline-action">입장 시작</div> <div class="timeline-desc">순차적으로 공연장 내 입장 (공연 2시간 전)</div> </div> </div> <div class="timeline-item warning"> <div class="timeline-time">17:50</div> <div class="timeline-content"> <div class="timeline-action">대기 마감</div> <div class="timeline-desc">입장 10분 전 대기 마감</div> </div> </div> <div class="timeline-item danger"> <div class="timeline-time">16:00 이후</div> <div class="timeline-content"> <div class="timeline-action">지각 시</div> <div class="timeline-desc"><strong>번호 무효!</strong> 입장 시작 30분 전 대기 권장</div> </div> </div> </div> </div> </div> <!-- 지정석 입장 안내 --> <div class="seated-entrance"> <h3 class="mobile-subtitle"> 지정좌석 입장 안내</h3> <div class="seated-rules"> <div class="seated-rule"> <span class="rule-icon">⏰</span> <div class="rule-content"> <strong>스탠딩 관객 입장 완료 후</strong> 지정좌석 관객 입장 시작 </div> </div> <div class="seated-rule"> <span class="rule-icon"> </span> <div class="rule-content"> <strong>입장 완료:</strong> 공연 시작 10분 전까지 입장 완료 권장 </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 교통편 --> <div class="location-section" id="location"> <h2 class="section-title" data-ke-size="size26"> 교통편 & 위치</h2> <div class="venue-info-card"> <div class="venue-header"> <span class="venue-icon"> </span> <div class="venue-details"> <h3 class="venue-name">킨텍스 제2전시장 10홀</h3> <div class="venue-address">경기 고양시 일산서구 킨텍스로 217-59</div> </div> </div> </div> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"> <span class="tab-icon"> </span> <span class="tab-text">지하철</span> </div> <div class="transport-tab" data-tab="bus"> <span class="tab-icon"> </span> <span class="tab-text">버스</span> </div> <div class="transport-tab" data-tab="parking"> <span class="tab-icon"> </span> <span class="tab-text">주차</span> </div> </div> <div class="transport-content"> <div class="transport-panel active" data-panel="subway"> <div class="route-item best"> <span class="route-line kintex">경의중앙선</span> <div class="route-info"> <div class="route-station">킨텍스역 2번 출구</div> <div class="route-time">도보 5분</div> </div> <span class="route-badge">최적</span> </div> <div class="route-item"> <span class="route-line line3">3호선</span> <div class="route-info"> <div class="route-station">대화역 2번 출구</div> <div class="route-time">버스 + 도보 15분</div> </div> </div> </div> <div class="transport-panel" data-panel="bus"> <div class="bus-info"> <div class="bus-numbers">77, 500-5, 5000, 5500, 5600</div> <div class="bus-stop">킨텍스 하차 → 도보 3분</div> </div> </div> <div class="transport-panel" data-panel="parking"> <div class="parking-info"> <div class="parking-available"> <span class="parking-icon"> ️</span> <div class="parking-text">킨텍스 전용 주차장 이용 가능 (유료)</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 관람 규칙 --> <div class="rules-section" id="rules"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙</h2> <div class="photography-ban"> <div class="ban-header"> <span class="ban-icon"> </span> <h3 class="ban-title">촬영 및 녹음 절대 금지</h3> <span class="ban-level">퇴장 조치</span> </div> <div class="ban-content"> <p><strong>스마트폰을 포함해 모든 형태의 촬영 및 녹음 금지:</strong></p> <ul class="ban-list"> <li>DSLR, 캠코더, 고프로, 녹화/녹음 전용 장비</li> <li>스마트폰 촬영</li> <li>유튜브 라이브, 인스타그램 라이브</li> <li>X 스페이스 등을 통한 공연 중계</li> </ul> </div> </div> <div class="prohibited-items"> <h3 class="mobile-subtitle"> 반입 금지 물품</h3> <div class="prohibited-grid"> <div class="prohibited-item">⚔️ 무기류, 폭죽, 깃대, 단단한 재질의 배너</div> <div class="prohibited-item"> 유리병/캔</div> <div class="prohibited-item"> 500ml 이하 PET 병 물 제외한 음식물</div> <div class="prohibited-item"> DSLR 등 전문가용 카메라</div> <div class="prohibited-item"> 고프로, 액션캠 등 녹화 장비</div> <div class="prohibited-item"> 휴대용 경적, 호루라기</div> <div class="prohibited-item"> 큰 사이즈 가방</div> <div class="prohibited-item">☂️ 장우산</div> <div class="prohibited-item"> 빛을 내는 응원도구</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 추천 포인트 --> <div class="recommendation-section" id="recommendation"> <h2 class="section-title" data-ke-size="size26"> 추천 포인트</h2> <div class="recommend-cards"> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">감동적인 성공 스토리</div> <div class="recommend-desc">8년 무명생활을 거쳐 일본 최고 히트곡 작가가 된 감동 실화</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">9억뷰 드라이플라워</div> <div class="recommend-desc">THE FIRST TAKE로 화제가 된 일본 가요계 레전드</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">틱톡 세대 아이콘</div> <div class="recommend-desc">SNS로 시작해 전 세계적 성공을 거둔 Z세대 아티스트</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">한국 사랑</div> <div class="recommend-desc">KSPO DOME 솔드아웃 이후 재내한, 한국 팬들에 대한 각별한 애정</div> </div> </div> <div class="target-audience"> <h4 class="target-title"> 이런 분들께 추천!</h4> <div class="target-tags"> <span class="target-tag">YUURI 팬</span> <span class="target-tag">드라이플라워 애청자</span> <span class="target-tag">틱톡 세대</span> <span class="target-tag">감성 발라드 선호</span> <span class="target-tag">성공 스토리 감동파</span> <span class="target-tag">20-30대</span> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 문의 정보 --> <div class="contact-section" id="contact"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"> <span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">1588-7890</div> <div class="contact-desc">티켓링크 고객센터</div> <div class="contact-hours">평일 09:00~18:00</div> </div> <a href="tel:1588-7890" class="contact-btn">전화하기</a> </div> </div> <div class="official-links"> <h3 class="mobile-subtitle"> 공식 링크</h3> <div class="links-grid"> <a href="https://www.ticketlink.co.kr/product/56097" target="_blank" rel="noopener" class="link-card primary"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">티켓링크</div> <div class="link-desc">공식 예매처</div> </div> <span class="link-arrow">→</span> </a> <a href="https://www.youtube.com/@yuuri_official" target="_blank" rel="noopener" class="link-card"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">유우리 공식 유튜브</div> <div class="link-desc">일상 브이로그, 음악</div> </div> <span class="link-arrow">→</span> </a> <a href="https://twitter.com/yuuri_staff" target="_blank" rel="noopener" class="link-card"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 트위터</div> <div class="link-desc">최신 소식</div> </div> <span class="link-arrow">→</span> </a> </div> </div> <div class="final-notices"> <h3 class="mobile-subtitle"> 최종 안내</h3> <div class="final-cards"> <div class="final-card"> 예매: 티켓링크에서만 가능</div> <div class="final-card"> 모바일 티켓 (배송 없음)</div> <div class="final-card">⏰ 시간 엄수 (번호 무효 주의)</div> <div class="final-card"> 촬영 절대 금지 (퇴장 조치)</div> <div class="final-card"> 큰 가방 반입 금지</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p>8년 무명생활을 거쳐 일본 최고 히트곡을 만든 YUURI!</p> <p>KSPO DOME 솔드아웃 이후 기다리던 재내한이 드디어 확정!</p> <p><strong>감동적인 그의 음악을 KINTEX에서 다시 만나요! </strong></p> <p class="conclusion-note">관람 규칙을 꼭 지켜서 모두가 행복한 공연이 되길!</p> </div> </div> <div class="final-message"> <strong>모두 즐거운 콘서트 되세요!</strong> </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size14"> <b>포스터 출처:</b> YUURI 공식<br /> <b>공연장:</b> 킨텍스 제2전시장 10홀<br /> <b>예매:</b> 티켓링크 공식 정보<br /> <b>아티스트 정보:</b> 나무위키 참조<br /> <b>세트리스트:</b> 2024 KSPO DOME 내한 기반 </p> </div> </div> <!-- 완전한 CSS (모든 스타일 포함) --> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; scroll-behavior: smooth; } /* YUURI 테마 색상 */ :root { --yuuri-primary: #6B73FF; --yuuri-secondary: #9B59B6; --yuuri-accent: #3498DB; --yuuri-pink: #E91E63; --yuuri-gold: #F1C40F; } /* 스크롤바 디자인 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #6B73FF, #9B59B6); border-radius: 4px; transition: all 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #9B59B6, #E91E63); box-shadow: 0 2px 8px rgba(107, 115, 255, 0.5); } /* 플로팅 네비게이션 */ .floating-nav { position: fixed; top: 20px; right: 20px; z-index: 1000; font-family: inherit; } .nav-toggle { display: flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #6B73FF, #9B59B6); color: white; padding: 0.75rem 1rem; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 15px rgba(107, 115, 255, 0.4); transition: all 0.3s ease; border: none; } .nav-toggle:hover { background: linear-gradient(135deg, #9B59B6, #E91E63); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107, 115, 255, 0.6); } .nav-icon { font-size: 1.125rem; } .nav-text { font-size: 0.875rem; font-weight: 600; } .nav-menu { position: absolute; top: 60px; right: 0; width: 250px; background: rgba(20, 20, 20, 0.95); border: 2px solid var(--yuuri-primary); border-radius: 12px; backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; } .nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .nav-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid rgba(107, 115, 255, 0.3); } .nav-title { color: var(--yuuri-primary); font-size: 1rem; font-weight: 600; } .nav-close { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 0.875rem; transition: all 0.3s ease; } .nav-close:hover { background: var(--yuuri-primary); color: white; } .nav-items { padding: 0.5rem; } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; color: #ffffff; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; margin-bottom: 0.25rem; } .nav-item:hover { background: rgba(107, 115, 255, 0.2); color: var(--yuuri-primary); transform: translateX(5px); } .nav-item.active { background: rgba(107, 115, 255, 0.3); color: var(--yuuri-primary); border-left: 3px solid var(--yuuri-primary); } .nav-emoji { font-size: 1rem; width: 20px; text-align: center; } .nav-label { font-size: 0.875rem; font-weight: 500; } /* 맨 위로 버튼 */ .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: linear-gradient(135deg, #6B73FF, #9B59B6); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(107, 115, 255, 0.4); transition: all 0.3s ease; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px); } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top:hover { background: linear-gradient(135deg, #9B59B6, #E91E63); transform: translateY(-5px) scale(1.1); box-shadow: 0 8px 25px rgba(107, 115, 255, 0.6); } .scroll-icon { font-size: 1.25rem; margin-bottom: 0.25rem; } .scroll-text { font-size: 0.7rem; font-weight: 600; color: white; } /* 스크롤 진행률 바 */ .scroll-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(0, 0, 0, 0.1); z-index: 1001; pointer-events: none; } .scroll-progress { height: 100%; background: linear-gradient(90deg, #6B73FF 0%, #9B59B6 50%, #E91E63 100%); width: 0%; transition: width 0.1s ease; box-shadow: 0 0 10px rgba(107, 115, 255, 0.6); } /* 섹션 하이라이트 */ .section-highlight { animation: section-glow 1s ease-out; } @keyframes section-glow { 0% { box-shadow: 0 0 0 rgba(107, 115, 255, 0.5); } 50% { box-shadow: 0 0 20px rgba(107, 115, 255, 0.8); } 100% { box-shadow: 0 0 0 rgba(107, 115, 255, 0.5); } } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 350px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(107, 115, 255, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--yuuri-primary), var(--yuuri-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 특별 공지 */ .special-announcement { background: rgba(107, 115, 255, 0.1); border: 2px solid var(--yuuri-primary); border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; text-align: center; } .announcement-badge { background: var(--yuuri-pink); color: white; padding: 0.25rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .announcement-title { font-size: 1.25rem; font-weight: 700; color: var(--yuuri-primary); margin-bottom: 0.5rem; } .announcement-desc { color: #ffffff; font-size: 1rem; } /* 투어 소개 */ .tour-intro { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(107, 115, 255, 0.3); margin-bottom: 1.5rem; } .tour-title { color: var(--yuuri-primary); font-size: 1.125rem; margin-bottom: 1rem; font-weight: 600; text-align: center; } .korea-history { display: grid; gap: 1rem; margin-top: 1rem; } .history-item { display: flex; gap: 1rem; padding: 1rem; border-radius: 8px; align-items: center; } .history-item.past { background: rgba(52, 152, 219, 0.1); border-left: 4px solid var(--yuuri-accent); } .history-item.current { background: rgba(107, 115, 255, 0.1); border-left: 4px solid var(--yuuri-primary); } .history-icon { font-size: 1.5rem; } .history-date { font-size: 0.875rem; color: var(--yuuri-gold); font-weight: 600; margin-bottom: 0.25rem; } .history-event { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } .artist-message { color: var(--yuuri-pink); font-weight: 600; font-style: italic; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--yuuri-primary); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--yuuri-primary); } .mobile-subtitle { font-size: 1.125rem; color: var(--yuuri-secondary); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--yuuri-primary), var(--yuuri-secondary)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--yuuri-primary); background: rgba(107, 115, 255, 0.1); } .info-card.venue { border-color: var(--yuuri-gold); background: rgba(241, 196, 15, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--yuuri-primary); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.struggle { border-color: var(--yuuri-pink); background: rgba(233, 30, 99, 0.1); } .artist-card.achievement { border-color: var(--yuuri-gold); background: rgba(241, 196, 15, 0.1); } .artist-card.motto { border-color: var(--yuuri-secondary); background: rgba(155, 89, 182, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--yuuri-secondary); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--yuuri-gold); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(107, 115, 255, 0.2); color: var(--yuuri-primary); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(107, 115, 255, 0.3); } .song-chip.mega-hit { background: rgba(241, 196, 15, 0.2); color: var(--yuuri-gold); border-color: var(--yuuri-gold); font-weight: 600; } .song-chip.viral { background: rgba(233, 30, 99, 0.2); color: var(--yuuri-pink); border-color: var(--yuuri-pink); font-weight: 600; } /* 성공 스토리 */ .success-story { margin-top: 1.5rem; background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(155, 89, 182, 0.3); } .story-title { font-size: 1rem; color: var(--yuuri-secondary); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .story-timeline { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .story-item { display: flex; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; align-items: flex-start; } .story-item.struggle { background: rgba(233, 30, 99, 0.1); border-left: 4px solid var(--yuuri-pink); } .story-item.breakthrough { background: rgba(52, 152, 219, 0.1); border-left: 4px solid var(--yuuri-accent); } .story-item.success { background: rgba(241, 196, 15, 0.1); border-left: 4px solid var(--yuuri-gold); } .story-item.korea { background: rgba(107, 115, 255, 0.1); border-left: 4px solid var(--yuuri-primary); } .story-icon { font-size: 1.25rem; flex-shrink: 0; } .story-period { font-size: 0.875rem; color: var(--yuuri-gold); font-weight: 600; margin-bottom: 0.25rem; } .story-detail { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } .motto-highlight { display: flex; gap: 1rem; padding: 1rem; background: rgba(155, 89, 182, 0.1); border: 2px solid var(--yuuri-secondary); border-radius: 8px; align-items: center; } .motto-icon { font-size: 1.5rem; color: var(--yuuri-secondary); } .motto-text { font-size: 1rem; color: var(--yuuri-secondary); font-weight: 600; margin-bottom: 0.25rem; } .motto-desc { font-size: 0.875rem; color: #a0a0a0; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--yuuri-primary); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .stat { background: rgba(107, 115, 255, 0.2); color: var(--yuuri-primary); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .stat-divider { color: #666; } .setlist-note-top { display: flex; justify-content: center; align-items: center; gap: 0.5rem; background: rgba(241, 196, 15, 0.1); border: 1px solid var(--yuuri-gold); border-radius: 8px; padding: 0.75rem; } .note-icon { font-size: 1rem; } .note-text { color: #ffffff; font-size: 0.875rem; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(107, 115, 255, 0.3); } .set-title { font-size: 1rem; color: var(--yuuri-primary); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: var(--yuuri-secondary); } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(107, 115, 255, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--yuuri-gold); background: rgba(241, 196, 15, 0.1); } .song-row.anime { border: 1px solid var(--yuuri-accent); background: rgba(52, 152, 219, 0.1); } .song-row.viral { border: 2px solid var(--yuuri-pink); background: rgba(233, 30, 99, 0.15); } .song-row.mega-hit { border: 2px solid var(--yuuri-gold); background: rgba(241, 196, 15, 0.15); } .song-row.space { border: 1px solid var(--yuuri-accent); background: rgba(52, 152, 219, 0.1); } .song-row.finale { border: 2px solid var(--yuuri-secondary); background: rgba(155, 89, 182, 0.15); } .song-row.encore-song { background: rgba(155, 89, 182, 0.1); border: 1px solid var(--yuuri-secondary); } .song-num { background: linear-gradient(135deg, var(--yuuri-primary), var(--yuuri-secondary)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, var(--yuuri-secondary), var(--yuuri-pink)) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--yuuri-secondary); } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(241, 196, 15, 0.1); border-radius: 10px; border: 1px solid var(--yuuri-gold); } .note-title { font-size: 1rem; font-weight: 600; color: var(--yuuri-gold); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(107, 115, 255, 0.3); } .booking-card-main { background: rgba(107, 115, 255, 0.1); border: 2px solid var(--yuuri-primary); border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } .booking-badge { background: var(--yuuri-primary); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.25rem; color: var(--yuuri-primary); font-weight: 700; } /* 가격 카드 (3가지) */ .price-cards-yuuri { display: grid; gap: 1rem; margin: 1rem 0; } .price-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .price-card.standing-r { border-color: var(--yuuri-gold); background: rgba(241, 196, 15, 0.1); } .price-card.standing-s { border-color: var(--yuuri-primary); background: rgba(107, 115, 255, 0.1); } .price-card.seated { border-color: var(--yuuri-secondary); background: rgba(155, 89, 182, 0.1); } .price-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .price-icon { font-size: 1.5rem; } .price-type { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .price-desc { font-size: 0.875rem; color: #a0a0a0; } .price-amount { font-size: 1.25rem; font-weight: 700; color: var(--yuuri-primary); } /* 좌석 안내 */ .seating-layout { text-align: center; margin-bottom: 1.5rem; } .seating-image { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(107, 115, 255, 0.3); margin-bottom: 0.5rem; } .seating-caption { font-size: 0.875rem; color: #a0a0a0; font-style: italic; } .seating-types { display: grid; gap: 1rem; margin-bottom: 1rem; } .seating-type { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; } .seating-type.floor-standing { border-left: 4px solid var(--yuuri-primary); } .seating-type.designated { border-left: 4px solid var(--yuuri-secondary); } .type-title { color: var(--yuuri-primary); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .type-features { list-style: none; padding: 0; display: grid; gap: 0.5rem; } .type-features li { color: #ffffff; font-size: 0.875rem; padding: 0.25rem 0; position: relative; padding-left: 1rem; } .type-features li::before { content: '•'; position: absolute; left: 0; color: var(--yuuri-primary); font-weight: bold; } .seating-warnings { background: rgba(255, 165, 0, 0.1); border: 2px solid #ffa500; border-radius: 8px; padding: 1rem; } .warning-title { color: #ffa500; font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .warning-list p { color: #ffffff; font-size: 0.875rem; margin-bottom: 0.5rem; } .warning-list strong { color: #ffa500; } /* 예매처 */ .platform-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card-main { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; color: inherit; transition: all 0.3s ease; } .platform-card-main.primary { border-color: var(--yuuri-primary); background: rgba(107, 115, 255, 0.1); } .platform-card-main.primary:hover { background: rgba(107, 115, 255, 0.2); transform: translateY(-2px); } .platform-header { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-arrow { color: var(--yuuri-primary); font-weight: bold; font-size: 1.25rem; } .unavailable-platforms { background: rgba(60, 60, 60, 0.5); border-radius: 8px; padding: 1rem; margin-top: 1rem; } .unavailable-title { color: #999; font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .unavailable-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .unavailable-item { background: rgba(80, 80, 80, 0.5); color: #999; padding: 0.5rem; border-radius: 6px; font-size: 0.875rem; } /* 기본 정보 */ .detail-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .detail-card { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: center; } .detail-icon { font-size: 1.25rem; color: var(--yuuri-primary); } .detail-content { color: #ffffff; font-size: 0.9rem; } /* 입장 안내 */ .standing-entrance, .seated-entrance { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .standing-entrance { border: 2px solid var(--yuuri-primary); } .seated-entrance { border: 2px solid var(--yuuri-secondary); } .procedure-overview { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(107, 115, 255, 0.1); border-radius: 8px; margin-bottom: 1rem; align-items: center; } .overview-icon { font-size: 1.25rem; color: var(--yuuri-primary); } .overview-content { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } .procedure-timeline { display: grid; gap: 0.75rem; } .timeline-item { display: flex; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: 6px; } .timeline-item.critical { background: rgba(107, 115, 255, 0.1); border: 1px solid var(--yuuri-primary); } .timeline-item.warning { background: rgba(255, 165, 0, 0.1); border: 1px solid #ffa500; } .timeline-item.danger { background: rgba(255, 107, 107, 0.1); border: 1px solid #ff6b6b; } .timeline-time { background: var(--yuuri-primary); color: white; padding: 0.5rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; min-width: 80px; text-align: center; } .timeline-action { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .timeline-desc { font-size: 0.85rem; color: #a0a0a0; } .seated-rules { display: grid; gap: 0.75rem; } .seated-rule { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(155, 89, 182, 0.1); border-radius: 6px; align-items: flex-start; } .rule-icon { font-size: 1rem; color: var(--yuuri-secondary); flex-shrink: 0; } .rule-content { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } /* 공연장 정보 */ .venue-info-card { background: rgba(107, 115, 255, 0.1); border: 2px solid var(--yuuri-primary); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .venue-header { display: flex; align-items: center; gap: 1rem; } .venue-icon { font-size: 1.5rem; } .venue-name { font-size: 1.25rem; font-weight: 700; color: var(--yuuri-primary); margin-bottom: 0.25rem; } .venue-address { color: #ffffff; font-size: 0.95rem; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--yuuri-primary), var(--yuuri-secondary)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 120px; } .transport-panel { display: none; } .transport-panel.active { display: block; } .route-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; position: relative; margin-bottom: 0.75rem; } .route-item.best { border: 2px solid var(--yuuri-primary); background: rgba(107, 115, 255, 0.1); } .route-line { padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; color: white; text-align: center; min-width: 80px; } .route-line.kintex { background: #77C4A3; } .route-line.line3 { background: #EF7C1C; } .route-station { font-size: 0.95rem; color: #ffffff; font-weight: 600; margin-bottom: 0.25rem; } .route-time { font-size: 0.8rem; color: #a0a0a0; } .route-badge { position: absolute; top: -5px; right: -5px; background: var(--yuuri-gold); color: #000; padding: 0.25rem 0.5rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; } .bus-info { background: rgba(40, 40, 40, 0.8); padding: 1rem; border-radius: 8px; } .bus-numbers { color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; font-size: 1rem; } .bus-stop { color: var(--yuuri-primary); font-size: 0.9rem; } .parking-info { background: rgba(40, 40, 40, 0.8); padding: 1rem; border-radius: 8px; } .parking-available { display: flex; gap: 0.75rem; align-items: center; } .parking-icon { font-size: 1.25rem; color: var(--yuuri-primary); } .parking-text { color: #ffffff; font-size: 0.9rem; } /* 관람 규칙 */ .photography-ban { background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem; } .ban-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .ban-icon { font-size: 1.5rem; } .ban-title { font-size: 1.125rem; color: #ff6b6b; font-weight: 700; } .ban-level { background: #ff6b6b; color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .ban-content p { color: #ffffff; margin-bottom: 0.75rem; font-size: 0.95rem; } .ban-list { list-style: none; padding: 0; display: grid; gap: 0.25rem; margin-left: 1rem; } .ban-list li { color: #ffffff; font-size: 0.875rem; position: relative; padding-left: 1rem; } .ban-list li::before { content: '•'; position: absolute; left: 0; color: #ff6b6b; font-weight: bold; } .prohibited-grid { display: grid; gap: 0.5rem; margin: 1rem 0; } .prohibited-item { background: rgba(40, 40, 40, 0.8); padding: 0.75rem; border-radius: 6px; color: #ffffff; font-size: 0.875rem; } /* 추천 포인트 */ .recommend-cards { display: grid; gap: 1rem; margin: 1rem 0; } .recommend-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 10px; border-left: 4px solid var(--yuuri-primary); text-align: center; } .recommend-icon { font-size: 2rem; margin-bottom: 0.75rem; } .recommend-title { font-size: 1rem; font-weight: 600; color: var(--yuuri-primary); margin-bottom: 0.5rem; } .recommend-desc { font-size: 0.9rem; color: #a0a0a0; line-height: 1.4; } .target-audience { margin-top: 1.5rem; } .target-title { font-size: 1rem; color: var(--yuuri-gold); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .target-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .target-tag { background: rgba(107, 115, 255, 0.2); color: var(--yuuri-primary); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(107, 115, 255, 0.3); } /* 문의 정보 */ .contact-main { margin-bottom: 1.5rem; } .contact-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(107, 115, 255, 0.1); border: 2px solid var(--yuuri-primary); border-radius: 10px; } .contact-icon { font-size: 1.5rem; } .contact-info { flex: 1; } .contact-number { font-size: 1.25rem; font-weight: 700; color: var(--yuuri-primary); margin-bottom: 0.25rem; } .contact-desc { font-size: 0.9rem; color: #ffffff; margin-bottom: 0.25rem; } .contact-hours { font-size: 0.8rem; color: #a0a0a0; } .contact-btn { background: var(--yuuri-primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.9rem; } .links-grid { display: grid; gap: 0.75rem; } .link-card { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: rgba(40, 40, 40, 0.9); border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .link-card.primary { border-color: var(--yuuri-primary); background: rgba(107, 115, 255, 0.1); } .link-card:hover { background: rgba(107, 115, 255, 0.2); border-color: var(--yuuri-primary); } .link-icon { font-size: 1.25rem; } .link-title { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .link-desc { font-size: 0.8rem; color: #a0a0a0; } .link-arrow { color: var(--yuuri-primary); font-weight: bold; } /* 최종 안내 */ .final-cards { display: grid; gap: 0.5rem; margin: 1rem 0; } .final-card { background: rgba(40, 40, 40, 0.8); padding: 0.75rem; border-radius: 6px; color: #ffffff; font-size: 0.875rem; } /* 마무리 */ .conclusion-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--yuuri-primary); border-radius: 12px; padding: 1.5rem; text-align: center; margin-bottom: 1rem; } .conclusion-icon { font-size: 3rem; color: var(--yuuri-primary); margin-bottom: 1rem; } .conclusion-content p { color: #a0a0a0; margin-bottom: 0.75rem; line-height: 1.5; font-size: 0.95rem; } .conclusion-content strong { color: #ffffff; } .conclusion-note { color: var(--yuuri-gold); font-size: 0.9rem; font-weight: 500; } .final-message { font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, var(--yuuri-primary), var(--yuuri-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding: 1rem; background-color: rgba(107, 115, 255, 0.1); border-radius: 10px; } .credit-section { text-align: center; margin-top: 1.5rem; padding: 1rem; background: rgba(20, 20, 20, 0.8); border-radius: 8px; } .credit-text { color: #666; font-size: 0.875rem; line-height: 1.4; } /* 모바일 대응 */ @media (max-width: 768px) { .floating-nav { top: 15px; right: 15px; } .nav-toggle { padding: 0.5rem 0.75rem; font-size: 0.875rem; } .nav-menu { width: 220px; top: 50px; } .scroll-to-top { width: 50px; height: 50px; bottom: 20px; right: 20px; } .scroll-icon { font-size: 1.125rem; } .scroll-text { font-size: 0.65rem; } .timeline-item { flex-direction: column; text-align: center; gap: 0.5rem; } .timeline-time { min-width: auto; } .price-cards-yuuri { gap: 0.75rem; } .story-timeline { gap: 0.5rem; } .prohibited-grid { gap: 0.4rem; } } @media (max-width: 480px) { .concert-main-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } } </style> <!-- JavaScript (완전한 네비게이션 시스템) --> <script> // 네비게이션 토글 function toggleNav() { const navMenu = document.getElementById('navMenu'); navMenu.classList.toggle('active'); } // 특정 섹션으로 스크롤 function scrollToSection(sectionId) { const element = document.getElementById(sectionId); if (element) { // 네비게이션 닫기 document.getElementById('navMenu').classList.remove('active'); // 부드럽게 스크롤 element.scrollIntoView({ behavior: 'smooth', block: 'start' }); // 하이라이트 효과 element.classList.add('section-highlight'); setTimeout(() => { element.classList.remove('section-highlight'); }, 1000); // 네비게이션 활성 상태 업데이트 updateActiveNav(sectionId); } } // 맨 위로 스크롤 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); updateActiveNav('top'); } // 네비게이션 활성 상태 업데이트 function updateActiveNav(activeId) { const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.classList.remove('active'); if (item.getAttribute('href') === `#${activeId}`) { item.classList.add('active'); } }); } // 스크롤 진행률 업데이트 function updateScrollProgress() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercentage = (scrollTop / scrollHeight) * 100; const progressBar = document.getElementById('scrollProgress'); if (progressBar) { progressBar.style.width = scrollPercentage + '%'; } } // 맨 위로 버튼 표시/숨김 function toggleScrollTopButton() { const scrollTopBtn = document.getElementById('scrollToTop'); const scrollPosition = window.pageYOffset || document.documentElement.scrollTop; if (scrollPosition > 300) { scrollTopBtn.classList.add('visible'); } else { scrollTopBtn.classList.remove('visible'); } } // 현재 보고 있는 섹션 자동 감지 function detectCurrentSection() { const sections = ['info', 'artist', 'setlist', 'ticket', 'entrance', 'location', 'rules', 'recommendation', 'contact']; const scrollPosition = window.pageYOffset + 100; let currentSection = 'top'; sections.forEach(sectionId => { const element = document.getElementById(sectionId); if (element) { const elementTop = element.offsetTop; if (scrollPosition >= elementTop) { currentSection = sectionId; } } }); updateActiveNav(currentSection); } // 교통편 탭 기능 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 이벤트 리스너 window.addEventListener('scroll', function() { updateScrollProgress(); toggleScrollTopButton(); detectCurrentSection(); }); // 네비게이션 외부 클릭 시 닫기 document.addEventListener('click', function(event) { const floatingNav = document.querySelector('.floating-nav'); const navMenu = document.getElementById('navMenu'); if (!floatingNav.contains(event.target) && navMenu.classList.contains('active')) { navMenu.classList.remove('active'); } }); // 키보드 단축키 document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { document.getElementById('navMenu').classList.remove('active'); } if (e.key === 'Home') { e.preventDefault(); scrollToTop(); } const shortcuts = { '1': 'info', '2': 'artist', '3': 'setlist', '4': 'ticket', '5': 'entrance', '6': 'location', '7': 'rules', '8': 'recommendation', '9': 'contact' }; if (shortcuts[e.key]) { scrollToSection(shortcuts[e.key]); } }); // 초기화 document.addEventListener('DOMContentLoaded', function() { initTransportTabs(); updateScrollProgress(); toggleScrollTopButton(); detectCurrentSection(); console.log(' YUURI 네비게이션 시스템 완료!'); console.log(' 단축키: 1-9 (섹션), Home (맨위), ESC (닫기)'); }); </script> 2025/11월 YUURI 드라이플라워 베텔기우스 유우리 킨텍스 티켓링크 jsy-spring https://jsy-spring.tistory.com/8 https://jsy-spring.tistory.com/8#entry8comment Wed, 24 Sep 2025 14:59:51 +0900 https://jsy-spring.tistory.com/7 <div class="concert-post mobile-optimized"> <!-- 메인 포스터 --> <div class="poster-container"> <img class="main-poster" src="https://i.ifh.cc/YS2tCm.jpg" alt="Gen Hoshino presents MAD HOPE Asia Tour in SEOUL" /> </div> <!-- 콘서트 제목 --> <h1 class="concert-main-title">⭐ Gen Hoshino presents MAD HOPE Asia Tour in SEOUL</h1> <!-- 특별 안내 --> <div class="special-announcement"> <div class="announcement-badge"> 6년 만의 투어</div> <div class="announcement-content"> <h3 class="announcement-title">MAD HOPE - 미친 희망</h3> <p class="announcement-desc">2018년 POP VIRUS 5대 돔 투어 이후 6년 만의 일본 전국 아레나 투어!</p> </div> </div> <!-- 기본 정보 섹션 --> <div class="info-section"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">Gen Hoshino (호시노 겐)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">콘서트명</div> <div class="info-value">Gen Hoshino presents MAD HOPE Asia Tour</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연일시</div> <div class="info-value">9월 13일(토) 18시 / 14일(일) 17시</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람시간</div> <div class="info-value">110분 공연</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">올림픽공원 올림픽홀</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">서울 송파구 올림픽로 424</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">올림픽공원역 (5호선) 3번 출구 도보 10분</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">만 7세 이상 관람 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 아티스트 소개 --> <div class="artist-section"> <h2 class="section-title" data-ke-size="size26">⭐ 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16"><b>호시노 겐 (星野源)</b>은 일본을 대표하는 멀티 엔터테이너로, 가수, 배우, 작가, 방송인으로 활약하는 일본 최고의 스타입니다. 아라가키 유이와 결혼으로도 화제가 되었습니다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">출생</span> </div> <div class="artist-value">1981년 1월 28일 (44세)</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">솔로 데뷔</span> </div> <div class="artist-value">2010년</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">주요 활동</span> </div> <div class="artist-value">가수, 배우, 작가, 방송인</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">소속</span> </div> <div class="artist-value">아뮤즈</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">가족</span> </div> <div class="artist-value">아라가키 유이 (2021년 결혼)</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">주요 성과</span> </div> <div class="artist-value">NHK 홍백가합전 4회 출장, 도쿄돔 공연</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title"> 대표곡</h4> <div class="songs-grid"> <span class="song-chip mega-hit"> 恋 (사랑)</span> <span class="song-chip viral"> うちで踊ろう</span> <span class="song-chip"> SUN</span> <span class="song-chip"> Pop Virus</span> <span class="song-chip"> ドラえもん</span> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 공식 세트리스트 --> <div class="setlist-section"> <h2 class="section-title" data-ke-size="size26"> 공식 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle"> MAD HOPE Asia Tour 서울 공연</h3> <div class="setlist-stats"> <span class="stat">총 21곡</span> <span class="stat-divider">•</span> <span class="stat">110분</span> </div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row"> <span class="song-num">0</span> <div class="song-info"> <div class="song-name">오프닝 영상</div> <div class="song-desc">공연 시작</div> </div> </div> <div class="song-row"> <span class="song-num">1</span> <div class="song-info"> <div class="song-name">地獄でなぜ悪い (지옥이 뭐가 나빠)</div> <div class="song-desc">4집 수록곡</div> </div> </div> <div class="song-row hit"> <span class="song-num">2</span> <div class="song-info"> <div class="song-name">SUN</div> <div class="song-desc">4집 수록곡</div> </div> </div> <div class="song-row"> <span class="song-num">3</span> <div class="song-info"> <div class="song-name">喜劇 (희극)</div> <div class="song-desc">6집 수록곡</div> </div> </div> <div class="song-row"> <span class="song-num">4</span> <div class="song-info"> <div class="song-name">Ain't Nobody Know (Same Thing)</div> <div class="song-desc">영어 버전</div> </div> </div> <div class="song-row"> <span class="song-num">5</span> <div class="song-info"> <div class="song-name">Pop Virus</div> <div class="song-desc">5집 타이틀</div> </div> </div> <div class="song-row"> <span class="song-num">6</span> <div class="song-info"> <div class="song-name">Eden</div> <div class="song-desc">6집 수록곡</div> </div> </div> <div class="song-row"> <span class="song-num">7</span> <div class="song-info"> <div class="song-name">不思議 (불가사의)</div> <div class="song-desc">6집 수록곡</div> </div> </div> <div class="song-row acoustic"> <span class="song-num">8</span> <div class="song-info"> <div class="song-name">暗闇 (어둠) - 히키가타리</div> <div class="song-desc">6집, 어쿠스틱 기타</div> </div> </div> <div class="song-row acoustic"> <span class="song-num">9</span> <div class="song-info"> <div class="song-name">くせのうた (습관의 노래) - 히키가타리</div> <div class="song-desc">1집, 어쿠스틱 기타</div> </div> </div> <div class="song-row"> <span class="song-num">10</span> <div class="song-info"> <div class="song-name">Sayonara</div> <div class="song-desc">6집 수록곡</div> </div> </div> <div class="song-row title"> <span class="song-num">11</span> <div class="song-info"> <div class="song-name">Mad Hope</div> <div class="song-desc">6집 타이틀, 투어명</div> </div> </div> <div class="song-row"> <span class="song-num">12</span> <div class="song-info"> <div class="song-name">Star</div> <div class="song-desc">6집 수록곡</div> </div> </div> <div class="song-row special-guest"> <span class="song-num">13</span> <div class="song-info"> <div class="song-name">스페셜 게스트 - 이영지</div> <div class="song-desc">한국 특별 게스트 </div> </div> </div> <div class="song-row mega-hit"> <span class="song-num">14</span> <div class="song-info"> <div class="song-name">恋 (사랑)</div> <div class="song-desc">5집, 대표곡</div> </div> </div> <div class="song-row drama"> <span class="song-num">15</span> <div class="song-info"> <div class="song-name">보이스 드라마 + ドラえもん (도라에몽)</div> <div class="song-desc">성우 연기 + 노래</div> </div> </div> <div class="song-row"> <span class="song-num">16</span> <div class="song-info"> <div class="song-name">創造 (창조)</div> <div class="song-desc">6집 수록곡</div> </div> </div> <div class="song-row finale"> <span class="song-num">17</span> <div class="song-info"> <div class="song-name">Eureka</div> <div class="song-desc">6집, 메인 세트 피날레</div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title"> 앙코르 - 니세 아키라</h4> <div class="songs-list-mobile encore"> <div class="song-row encore-song"> <span class="song-num encore-num">18</span> <div class="song-info"> <div class="song-name">Fake</div> <div class="song-desc">니세 아키라 등장</div> </div> </div> <div class="song-row encore-song"> <span class="song-num encore-num">19</span> <div class="song-info"> <div class="song-name">Week End</div> <div class="song-desc">4집 수록곡</div> </div> </div> <div class="song-row encore-song"> <span class="song-num encore-num">20</span> <div class="song-info"> <div class="song-name">Hello Song</div> <div class="song-desc">5집, 그랜드 피날레</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon">✅</div> <div class="note-content"> <div class="note-title">공식 세트리스트</div> <div class="note-desc">MAD HOPE Asia Tour 서울 공연 실제 세트리스트!</div> </div> </div> <!-- 일요일 차이점 --> <div class="sunday-differences"> <h4 class="diff-title"> 9월 14일 (일요일) 차이점</h4> <div class="diff-list"> <div class="diff-item"> <span class="diff-icon"> </span> <div class="diff-content"> <strong>13번:</strong> 創造 (창조) ↔ 스페셜 게스트 이영지 (순서 바뀜) </div> </div> <div class="diff-item"> <span class="diff-icon"> </span> <div class="diff-content"> <strong>15번:</strong> 스페셜 게스트 이영지 ↔ 보이스 드라마 도라에몽 (순서 바뀜) </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 티켓 정보 (좌석 안내도 포함) --> <div class="ticket-section"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle"> 예매 일정</h3> <div class="booking-card-main"> <div class="booking-badge"> 확정</div> <div class="booking-content"> <div class="booking-title">일반 회차: 6월 12일(목) 18시</div> <div class="booking-title">추가 회차: 6월 20일(금) 18시</div> </div> </div> </div> <!-- 가격 정보 --> <div class="price-section"> <h3 class="mobile-subtitle"> 티켓 가격</h3> <div class="price-cards"> <div class="price-card r-seat"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">R석</h4> <div class="price-desc">프리미엄 좌석</div> </div> <div class="price-amount">143,000원</div> </div> </div> <div class="price-card s-seat"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">S석</h4> <div class="price-desc">일반 좌석</div> </div> <div class="price-amount">132,000원</div> </div> </div> </div> </div> <!-- 좌석 안내도 --> <div class="seating-section"> <h3 class="mobile-subtitle"> 좌석 안내</h3> <!-- 좌석 배치도 이미지 --> <div class="seating-layout"> <img src="https://i.ifh.cc/2NW4A9.jpg" alt="올림픽홀 좌석 배치도" class="seating-image" /> <div class="seating-caption"> 올림픽공원 올림픽홀 좌석 배치도</div> </div> <!-- 좌석 운영 방식 --> <div class="seating-info"> <div class="seating-overview"> <p>본 공연은 <strong>전석 지정좌석제</strong>로 운영됩니다.</p> </div> <div class="seating-types"> <div class="seating-type floor"> <h4 class="type-title"> Floor 구역</h4> <p>단차가 없는 평지에 간이 의자 설치</p> </div> <div class="seating-type stairs"> <h4 class="type-title"> 그 외 구역</h4> <p>계단식 좌석으로 구성</p> </div> </div> <div class="seating-disclaimers"> <h4 class="disclaimer-title">⚠️ 좌석 관련 주의사항</h4> <div class="disclaimer-list"> <div class="disclaimer-item"> <span class="disclaimer-icon"> </span> <div class="disclaimer-text"> 본 배치도는 티켓 예매의 이해를 돕기 위해 제작된 이미지로 실제와 다를 수 있습니다 </div> </div> <div class="disclaimer-item"> <span class="disclaimer-icon"> </span> <div class="disclaimer-text"> 무대는 연출 협의 과정에서 사전 공지 없이 변경될 수 있습니다 </div> </div> <div class="disclaimer-item critical"> <span class="disclaimer-icon"> ️</span> <div class="disclaimer-text"> 일부 좌석은 난간/구조물/장치/카메라 등으로 인한 시야 제한이 발생할 수 있습니다 </div> </div> <div class="disclaimer-item warning"> <span class="disclaimer-icon"> </span> <div class="disclaimer-text"> <strong>공연 당일 시야 방해로 인한 티켓 환불 및 변경은 불가</strong>하오니 이 점 참고하여 예매해 주시기 바랍니다 </div> </div> </div> </div> </div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle"> 예매처</h3> <div class="platform-cards"> <a href="https://tickets.interpark.com/goods/25008238" target="_blank" rel="noopener" class="platform-card-main primary"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">인터파크 (NOL 티켓)</h4> <div class="platform-note">유일한 공식 예매처</div> </div> <span class="platform-arrow">→</span> </div> </a> <div class="platform-card-main disabled"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">YES24 티켓</h4> <div class="platform-note">예매 불가</div> </div> <span class="platform-status">❌</span> </div> </div> <div class="platform-card-main disabled"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">멜론티켓</h4> <div class="platform-note">예매 불가</div> </div> <span class="platform-status">❌</span> </div> </div> <div class="platform-card-main disabled"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">티켓링크</h4> <div class="platform-note">예매 불가</div> </div> <span class="platform-status">❌</span> </div> </div> </div> </div> <!-- 기본 정보 --> <div class="ticket-details"> <h3 class="mobile-subtitle"> 기본 정보</h3> <div class="detail-cards"> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"> <strong>배송:</strong> 8월 27일 일괄 배송 </div> </div> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"> <strong>매수 제한:</strong> 회차별 1인 2매 </div> </div> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"> <strong>좌석:</strong> 전석 지정좌석제 </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 공식 MD 굿즈 (슬라이더) --> <div class="goods-section"> <h2 class="section-title" data-ke-size="size26"> ️ 공식 MD 굿즈</h2> <div class="goods-slider-container"> <div class="goods-slider"> <div class="goods-slide active"> <img class="slider-image" src="https://i.ifh.cc/o8RzCf.webp" alt="MAD HOPE MD 1" /> <div class="slide-caption"> ️ MAD HOPE MD 라인업 1</div> </div> <div class="goods-slide"> <img class="slider-image" src="https://i.ifh.cc/v0zM9p.webp" alt="MAD HOPE MD 2" /> <div class="slide-caption"> 의류 및 액세서리</div> </div> <div class="goods-slide"> <img class="slider-image" src="https://i.ifh.cc/A9KFxQ.webp" alt="MAD HOPE MD 3" /> <div class="slide-caption"> 앨범 및 스페셜 굿즈</div> </div> </div> <div class="slider-controls"> <button class="slider-btn prev-btn" onclick="changeSlide(-1)"> <span class="btn-icon">←</span> </button> <div class="slider-indicators"> <span class="indicator active" onclick="currentSlide(1)"></span> <span class="indicator" onclick="currentSlide(2)"></span> <span class="indicator" onclick="currentSlide(3)"></span> </div> <button class="slider-btn next-btn" onclick="changeSlide(1)"> <span class="btn-icon">→</span> </button> </div> <div class="slider-info"> <span class="slide-counter"> <span class="current-slide">1</span> / <span class="total-slides">3</span> </span> </div> </div> <div class="goods-announcement"> <div class="announcement-header"> <h4 class="announcement-title" data-ke-size="size20"> MAD HOPE Official MD </h4> <p class="announcement-subtitle" data-ke-size="size16"> 공식 굿즈 라인업을 확인해보세요! ✨ </p> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 교통편 --> <div class="location-section"> <h2 class="section-title" data-ke-size="size26"> 교통편 & 위치</h2> <div class="venue-info-card"> <div class="venue-header"> <span class="venue-icon"> ️</span> <div class="venue-details"> <h3 class="venue-name">올림픽공원 올림픽홀</h3> <div class="venue-address">서울 송파구 올림픽로 424</div> </div> </div> </div> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"> <span class="tab-icon"> </span> <span class="tab-text">지하철</span> </div> <div class="transport-tab" data-tab="bus"> <span class="tab-icon"> </span> <span class="tab-text">버스</span> </div> <div class="transport-tab" data-tab="parking"> <span class="tab-icon"> </span> <span class="tab-text">주차</span> </div> </div> <div class="transport-content"> <div class="transport-panel active" data-panel="subway"> <div class="route-item best"> <span class="route-line line5">5호선</span> <div class="route-info"> <div class="route-station">올림픽공원역 3번 출구</div> <div class="route-time">도보 10분</div> </div> <span class="route-badge">최적</span> </div> <div class="route-item"> <span class="route-line line8">8호선</span> <div class="route-info"> <div class="route-station">몽촌토성역 1번 출구</div> <div class="route-time">도보 12분</div> </div> </div> </div> <div class="transport-panel" data-panel="bus"> <div class="bus-info"> <div class="bus-numbers">110, 143, 241, 401</div> <div class="bus-stop">올림픽공원 하차 → 도보 8분</div> </div> </div> <div class="transport-panel" data-panel="parking"> <div class="parking-info"> <div class="parking-available"> <span class="parking-icon"> ️</span> <div class="parking-text">올림픽공원 내 주차장 이용 가능 (유료)</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 문의 정보 --> <div class="contact-section"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"> <span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">1544-1555</div> <div class="contact-desc">인터파크 티켓 고객센터</div> </div> <a href="tel:1544-1555" class="contact-btn">전화하기</a> </div> </div> <div class="official-links"> <h3 class="mobile-subtitle"> 공식 링크</h3> <div class="links-grid"> <a href="https://tickets.interpark.com/goods/25008238" target="_blank" rel="noopener" class="link-card primary"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">인터파크 (NOL 티켓)</div> <div class="link-desc">공식 예매처</div> </div> <span class="link-arrow">→</span> </a> <a href="https://www.hoshinogen.com" target="_blank" rel="noopener" class="link-card"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">호시노 겐 공식</div> <div class="link-desc">아티스트 공식</div> </div> <span class="link-arrow">→</span> </a> <a href="https://www.instagram.com/thevault.live.kr" target="_blank" rel="noopener" class="link-card"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">더 볼트 공식 SNS</div> <div class="link-desc">추가 정보 공지</div> </div> <span class="link-arrow">→</span> </a> </div> </div> <div class="final-notices"> <h3 class="mobile-subtitle"> 최종 안내</h3> <div class="final-cards"> <div class="final-card"> <span class="final-icon"> </span> <span class="final-text">예매: 인터파크 (NOL 티켓)에서만 가능</span> </div> <div class="final-card"> <span class="final-icon"> </span> <span class="final-text">신분증 원본 필수 (사진/사본 불가)</span> </div> <div class="final-card"> <span class="final-icon"> </span> <span class="final-text">8월 27일 일괄 배송</span> </div> <div class="final-card"> <span class="final-icon">⏰</span> <span class="final-text">시간 엄수 (30분 후 입장 불가)</span> </div> <div class="final-card"> <span class="final-icon"> </span> <span class="final-text">촬영 절대 금지</span> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon">⭐</div> <div class="conclusion-content"> <p>6년 만의 호시노 겐 아레나 투어!</p> <p>이영지 특별 게스트와 함께하는 한국만의 특별한 무대!</p> <p><strong>"MAD HOPE"와 함께 희망을 느껴보세요! </strong></p> </div> </div> <div class="final-message"> ⭐ <strong>모두 즐거운 콘서트 되세요!</strong> ⭐ </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size14"> <b>포스터 출처:</b> 호시노 겐 공식<br /> <b>공연장:</b> 올림픽공원 올림픽홀<br /> <b>예매:</b> 인터파크 (NOL 티켓)<br /> <b>세트리스트:</b> MAD HOPE Asia Tour 공식<br /> ️ <b>MD 이미지:</b> MAD HOPE 공식 굿즈 </p> </div> </div> <!-- 완전한 CSS --> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; } /* 호시노 겐 테마 색상 */ :root { --gen-primary: #FF6B35; --gen-secondary: #F7931E; --gen-accent: #FFD23F; --gen-blue: #4A90E2; --gen-purple: #8E44AD; } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 350px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--gen-primary), var(--gen-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 특별 공지 */ .special-announcement { background: rgba(255, 107, 53, 0.1); border: 2px solid var(--gen-primary); border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; text-align: center; } .announcement-badge { background: var(--gen-purple); color: white; padding: 0.25rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .announcement-title { font-size: 1.25rem; font-weight: 700; color: var(--gen-primary); margin-bottom: 0.5rem; } .announcement-desc { color: #ffffff; font-size: 1rem; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--gen-primary); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--gen-primary); } .mobile-subtitle { font-size: 1.125rem; color: var(--gen-secondary); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--gen-primary), var(--gen-secondary)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--gen-primary); background: rgba(255, 107, 53, 0.1); } .info-card.venue { border-color: var(--gen-accent); background: rgba(255, 210, 63, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--gen-primary); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--gen-accent); background: rgba(255, 210, 63, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--gen-secondary); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--gen-accent); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(255, 107, 53, 0.2); color: var(--gen-primary); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(255, 107, 53, 0.3); } .song-chip.mega-hit { background: rgba(255, 210, 63, 0.2); color: var(--gen-accent); border-color: var(--gen-accent); font-weight: 600; } .song-chip.viral { background: rgba(142, 68, 173, 0.2); color: var(--gen-purple); border-color: var(--gen-purple); font-weight: 600; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--gen-primary); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .stat { background: rgba(255, 107, 53, 0.2); color: var(--gen-primary); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .stat-divider { color: #666; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(255, 107, 53, 0.3); } .set-title { font-size: 1rem; color: var(--gen-primary); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: var(--gen-secondary); } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(255, 107, 53, 0.1); transform: translateX(2px); } .song-row.hit { border: 1px solid var(--gen-primary); background: rgba(255, 107, 53, 0.1); } .song-row.acoustic { border: 1px solid var(--gen-accent); background: rgba(255, 210, 63, 0.1); } .song-row.title { border: 2px solid var(--gen-primary); background: rgba(255, 107, 53, 0.15); } .song-row.special-guest { border: 2px solid #ff6b6b; background: rgba(255, 107, 107, 0.15); } .song-row.mega-hit { border: 2px solid var(--gen-accent); background: rgba(255, 210, 63, 0.15); } .song-row.drama { border: 1px solid var(--gen-blue); background: rgba(74, 144, 226, 0.1); } .song-row.finale { border: 2px solid var(--gen-secondary); background: rgba(247, 147, 30, 0.15); } .song-row.encore-song { background: rgba(247, 147, 30, 0.1); border: 1px solid var(--gen-secondary); } .song-num { background: linear-gradient(135deg, var(--gen-primary), var(--gen-secondary)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, var(--gen-secondary), var(--gen-accent)) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--gen-secondary); } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(255, 210, 63, 0.1); border-radius: 10px; border: 1px solid var(--gen-accent); } .note-icon { font-size: 1.5rem; } .note-title { font-size: 1rem; font-weight: 600; color: var(--gen-accent); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 일요일 차이점 */ .sunday-differences { background: rgba(74, 144, 226, 0.1); border: 2px solid var(--gen-blue); border-radius: 10px; padding: 1rem; margin: 1rem 0; } .diff-title { color: var(--gen-blue); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .diff-list { display: grid; gap: 0.5rem; } .diff-item { display: flex; gap: 0.75rem; padding: 0.5rem; background: rgba(74, 144, 226, 0.1); border-radius: 6px; align-items: center; } .diff-icon { font-size: 1rem; color: var(--gen-blue); } .diff-content { color: #ffffff; font-size: 0.875rem; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(255, 107, 53, 0.3); } .booking-card-main { background: rgba(255, 107, 53, 0.1); border: 2px solid var(--gen-primary); border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } .booking-badge { background: var(--gen-primary); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } /* 가격 카드 */ .price-cards { display: grid; gap: 1rem; margin: 1rem 0; } .price-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .price-card.r-seat { border-color: var(--gen-accent); background: rgba(255, 210, 63, 0.1); } .price-card.s-seat { border-color: var(--gen-primary); background: rgba(255, 107, 53, 0.1); } .price-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .price-icon { font-size: 1.5rem; } .price-type { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .price-desc { font-size: 0.875rem; color: #a0a0a0; } .price-amount { font-size: 1.25rem; font-weight: 700; color: var(--gen-primary); } /* 좌석 안내 */ .seating-section { margin: 1.5rem 0; } .seating-layout { text-align: center; margin-bottom: 1.5rem; } .seating-image { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); margin-bottom: 0.5rem; } .seating-caption { font-size: 0.875rem; color: #a0a0a0; font-style: italic; } .seating-overview { background: rgba(255, 107, 53, 0.1); border: 2px solid var(--gen-primary); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; text-align: center; } .seating-overview p { color: #ffffff; font-size: 1rem; font-weight: 600; margin: 0; } .seating-types { display: grid; gap: 1rem; margin-bottom: 1rem; } .seating-type { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; text-align: center; } .seating-type.floor { border-left: 4px solid var(--gen-primary); } .seating-type.stairs { border-left: 4px solid var(--gen-secondary); } .type-title { color: var(--gen-primary); font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; } .seating-type p { color: #ffffff; font-size: 0.9rem; margin: 0; } .seating-disclaimers { background: rgba(255, 165, 0, 0.1); border: 2px solid #ffa500; border-radius: 8px; padding: 1rem; } .disclaimer-title { color: #ffa500; font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .disclaimer-list { display: grid; gap: 0.75rem; } .disclaimer-item { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(0, 0, 0, 0.3); border-radius: 6px; align-items: flex-start; } .disclaimer-item.critical { border: 1px solid var(--gen-primary); background: rgba(255, 107, 53, 0.1); } .disclaimer-item.warning { border: 1px solid #ff6b6b; background: rgba(255, 107, 107, 0.1); } .disclaimer-icon { font-size: 1rem; flex-shrink: 0; color: #ffa500; } .disclaimer-text { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } .disclaimer-text strong { color: #ffa500; } /* 예매처 */ .platform-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card-main { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; color: inherit; transition: all 0.3s ease; } .platform-card-main.primary { border-color: var(--gen-primary); background: rgba(255, 107, 53, 0.1); } .platform-card-main.primary:hover { background: rgba(255, 107, 53, 0.2); transform: translateY(-2px); } .platform-card-main.disabled { opacity: 0.6; background: rgba(60, 60, 60, 0.5); } .platform-header { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-arrow { color: var(--gen-primary); font-weight: bold; font-size: 1.25rem; } .platform-status { color: #999; font-size: 0.875rem; } /* 기본 정보 */ .detail-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .detail-card { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: center; } .detail-icon { font-size: 1.25rem; color: var(--gen-primary); } .detail-content { color: #ffffff; font-size: 0.9rem; } /* 굿즈 슬라이더 */ .goods-slider-container { position: relative; max-width: 600px; margin: 0 auto 2rem auto; background: rgba(20, 20, 20, 0.9); border-radius: 16px; overflow: hidden; border: 2px solid rgba(255, 107, 53, 0.3); box-shadow: 0 8px 25px rgba(255, 107, 53, 0.2); } .goods-slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .goods-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; } .goods-slide.active { opacity: 1; } .slider-image { max-width: 95%; max-height: 350px; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .slide-caption { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: #ffffff; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; backdrop-filter: blur(10px); border: 1px solid rgba(255, 107, 53, 0.3); } .slider-controls { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); } .slider-btn { background: linear-gradient(135deg, var(--gen-primary), var(--gen-secondary)); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-weight: bold; font-size: 1.125rem; } .slider-btn:hover { transform: scale(1.1); box-shadow: 0 4px 15px rgba(255, 107, 53, 0.5); } .slider-indicators { display: flex; gap: 0.75rem; } .indicator { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; } .indicator.active { background: linear-gradient(135deg, var(--gen-primary), var(--gen-secondary)); transform: scale(1.3); box-shadow: 0 2px 8px rgba(255, 107, 53, 0.5); } .slider-info { display: flex; justify-content: center; align-items: center; padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.4); font-size: 0.875rem; color: #a0a0a0; } .slide-counter { font-weight: 600; color: var(--gen-accent); } .current-slide { color: var(--gen-primary); font-weight: bold; font-size: 1rem; } /* 굿즈 안내 */ .goods-announcement { background: rgba(255, 107, 53, 0.1); border: 2px solid var(--gen-primary); border-radius: 12px; padding: 1rem; text-align: center; margin-bottom: 1rem; } .announcement-title { font-size: 1.125rem; font-weight: 700; color: var(--gen-primary); margin-bottom: 0.5rem; } .announcement-subtitle { color: #ffffff; font-size: 1rem; font-weight: 500; } /* 공연장 정보 */ .venue-info-card { background: rgba(255, 107, 53, 0.1); border: 2px solid var(--gen-primary); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .venue-header { display: flex; align-items: center; gap: 1rem; } .venue-icon { font-size: 1.5rem; } .venue-name { font-size: 1.25rem; font-weight: 700; color: var(--gen-primary); margin-bottom: 0.25rem; } .venue-address { color: #ffffff; font-size: 0.95rem; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--gen-primary), var(--gen-secondary)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 120px; } .transport-panel { display: none; } .transport-panel.active { display: block; } /* 지하철 */ .route-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; position: relative; margin-bottom: 0.75rem; } .route-item.best { border: 2px solid var(--gen-primary); background: rgba(255, 107, 53, 0.1); } .route-line { padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; color: white; text-align: center; min-width: 60px; } .route-line.line5 { background: #996CAC; } .route-line.line8 { background: #E6186C; } .route-station { font-size: 0.95rem; color: #ffffff; font-weight: 600; margin-bottom: 0.25rem; } .route-time { font-size: 0.8rem; color: #a0a0a0; } .route-badge { position: absolute; top: -5px; right: -5px; background: var(--gen-accent); color: #000; padding: 0.25rem 0.5rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; } /* 버스 */ .bus-info { background: rgba(40, 40, 40, 0.8); padding: 1rem; border-radius: 8px; } .bus-numbers { color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; font-size: 1rem; } .bus-stop { color: var(--gen-primary); font-size: 0.9rem; } /* 주차 */ .parking-info { background: rgba(40, 40, 40, 0.8); padding: 1rem; border-radius: 8px; } .parking-available { display: flex; gap: 0.75rem; align-items: center; } .parking-icon { font-size: 1.25rem; color: var(--gen-primary); } .parking-text { color: #ffffff; font-size: 0.9rem; } /* 문의 정보 */ .contact-main { margin-bottom: 1.5rem; } .contact-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 107, 53, 0.1); border: 2px solid var(--gen-primary); border-radius: 10px; } .contact-icon { font-size: 1.5rem; } .contact-info { flex: 1; } .contact-number { font-size: 1.25rem; font-weight: 700; color: var(--gen-primary); margin-bottom: 0.25rem; } .contact-desc { font-size: 0.9rem; color: #ffffff; } .contact-btn { background: var(--gen-primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.9rem; } .links-grid { display: grid; gap: 0.75rem; } .link-card { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: rgba(40, 40, 40, 0.9); border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .link-card.primary { border-color: var(--gen-primary); background: rgba(255, 107, 53, 0.1); } .link-card:hover { background: rgba(255, 107, 53, 0.2); border-color: var(--gen-primary); } .link-icon { font-size: 1.25rem; } .link-title { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .link-desc { font-size: 0.8rem; color: #a0a0a0; } .link-arrow { color: var(--gen-primary); font-weight: bold; } /* 최종 안내 */ .final-cards { display: grid; gap: 0.5rem; margin: 1rem 0; } .final-card { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 6px; align-items: center; } .final-icon { font-size: 1rem; } .final-text { color: #ffffff; font-size: 0.875rem; } /* 마무리 */ .conclusion-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--gen-primary); border-radius: 12px; padding: 1.5rem; text-align: center; margin-bottom: 1rem; } .conclusion-icon { font-size: 3rem; color: var(--gen-primary); margin-bottom: 1rem; } .conclusion-content p { color: #a0a0a0; margin-bottom: 0.75rem; line-height: 1.5; font-size: 0.95rem; } .conclusion-content strong { color: #ffffff; } .final-message { font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, var(--gen-primary), var(--gen-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding: 1rem; background-color: rgba(255, 107, 53, 0.1); border-radius: 10px; } .credit-section { text-align: center; margin-top: 1.5rem; padding: 1rem; background: rgba(20, 20, 20, 0.8); border-radius: 8px; } .credit-text { color: #666; font-size: 0.875rem; line-height: 1.4; } /* 모바일 최적화 */ @media (max-width: 480px) { .concert-post.mobile-optimized { padding: 0.75rem; } .concert-main-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } .goods-slider { height: 300px; } .slider-image { max-height: 250px; } .slider-btn { width: 36px; height: 36px; font-size: 0.875rem; } .seating-types { gap: 0.75rem; } .disclaimer-item { flex-direction: column; gap: 0.5rem; text-align: center; } .disclaimer-icon { align-self: center; } } </style> <script> // 슬라이더 기능 let currentSlideIndex = 0; const totalSlides = 3; function changeSlide(direction) { const slides = document.querySelectorAll('.goods-slide'); const indicators = document.querySelectorAll('.indicator'); slides[currentSlideIndex].classList.remove('active'); indicators[currentSlideIndex].classList.remove('active'); currentSlideIndex += direction; if (currentSlideIndex >= totalSlides) { currentSlideIndex = 0; } else if (currentSlideIndex < 0) { currentSlideIndex = totalSlides - 1; } slides[currentSlideIndex].classList.add('active'); indicators[currentSlideIndex].classList.add('active'); const currentSlideElement = document.querySelector('.current-slide'); if (currentSlideElement) { currentSlideElement.textContent = currentSlideIndex + 1; } } function currentSlide(slideNumber) { const slides = document.querySelectorAll('.goods-slide'); const indicators = document.querySelectorAll('.indicator'); slides[currentSlideIndex].classList.remove('active'); indicators[currentSlideIndex].classList.remove('active'); currentSlideIndex = slideNumber - 1; slides[currentSlideIndex].classList.add('active'); indicators[currentSlideIndex].classList.add('active'); const currentSlideElement = document.querySelector('.current-slide'); if (currentSlideElement) { currentSlideElement.textContent = currentSlideIndex + 1; } } // 교통편 탭 기능 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 터치 스와이프 지원 let touchStartX = 0; let touchEndX = 0; document.addEventListener('DOMContentLoaded', function() { // 교통편 탭 초기화 initTransportTabs(); // 슬라이더 터치 이벤트 const slider = document.querySelector('.goods-slider'); if (slider) { slider.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; }); slider.addEventListener('touchend', function(e) { touchEndX = e.changedTouches[0].screenX; const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { if (diff > 0) { changeSlide(1); } else { changeSlide(-1); } } }); } // 키보드 지원 document.addEventListener('keydown', function(e) { if (e.key === 'ArrowLeft') { changeSlide(-1); } else if (e.key === 'ArrowRight') { changeSlide(1); } }); console.log('⭐ 호시노 겐 MAD HOPE 페이지 로드 완료!'); }); </script> 2025/9월 Gen Hoshino Gen Hoshino presents MAD HOPE Asia Tour in SEOUL 도라에몽 올림픽홀 인터파크 티켓 코이 호시노 겐 내한 jsy-spring https://jsy-spring.tistory.com/7 https://jsy-spring.tistory.com/7#entry7comment Wed, 24 Sep 2025 13:04:47 +0900 https://jsy-spring.tistory.com/6 <div class="concert-post mobile-optimized"><!-- 메인 포스터 --> <div class="poster-container"><img class="main-poster" src="https://i.ifh.cc/Mv688S.jpg" alt="Novelbright LIVE TOUR 2025 in SEOUL" /></div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> Novelbright LIVE TOUR 2025 in SEOUL</h1> <!-- 기본 정보 섹션 --> <div class="info-section"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">Novelbright (노벨브라이트)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">콘서트명</div> <div class="info-value">Novelbright LIVE TOUR 2025</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연일시</div> <div class="info-value">2025년 10월 11일(토) 오후 6시</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람시간</div> <div class="info-value">90분 공연</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">잠실학생체육관</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">서울특별시 송파구 올림픽로 25</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">종합운동장역 (2,9호선) 6번 출구 도보 5분</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">전연령 관람 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 아티스트 소개 (나무위키 정보) --> <div class="artist-section"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16"><b>Novelbright (노벨브라이트)</b>는 일본 오사카 출신의 5인조 남성 록 밴드로, 길거리 라이브로 시작해 무도관까지 정복한 성공신화의 주인공입니다. 2024년 강남역 깜짝 버스킹으로 한국 팬들에게도 큰 화제가 되었습니다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">결성</span></div> <div class="artist-value">2013년 9월 13일 (오사카부)</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">메이저 데뷔</span></div> <div class="artist-value">2020년 8월 17일 (Sunny drop)</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">멤버 (5인조)</span></div> <div class="artist-value">타케나카 유다이(Vo), 야마다 카이토(Gt), 오키 소지로(Gt), 케이고(Ba), 네기(Dr)</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">장르</span></div> <div class="artist-value">록 (얼터너티브 록, 팝 록, 피아노 록)</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">소속</span></div> <div class="artist-value">UNIVERSAL SIGMA</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">주요 성과</span></div> <div class="artist-value">제62회 일본 레코드 대상 신인상, 현역가왕 JAPAN 우승, 2025 한일가왕전 참가</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title" data-ke-size="size20"> 대표곡</h4> <div class="songs-grid"><span class="song-chip mega-hit"> Walking with you (틱톡 바이럴)</span> <span class="song-chip"> Sunny drop (메이저 데뷔곡)</span> <span class="song-chip"> Life goes on</span> <span class="song-chip"> Make Me Happy</span> <span class="song-chip"> 青春</span></div> </div> <div class="korea-connection"> <h4 class="connection-title" data-ke-size="size20"> 한국과의 특별한 인연</h4> <div class="connection-timeline"> <div class="connection-item viral"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2019년</div> <div class="connection-event">센다이역 버스킹 "Walking with you" 틱톡 바이럴</div> </div> </div> <div class="connection-item surprise"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2024년 5월 5일</div> <div class="connection-event">강남역 깜짝 버스킹 (유다이, 카이토) - 화제!</div> </div> </div> <div class="connection-item tv"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2025년</div> <div class="connection-event">한일가왕전 참가</div> </div> </div> <div class="special-member-highlight"> <h4 class="highlight-title" data-ke-size="size20"> 주목할 멤버</h4> <div class="member-cards"> <div class="member-card leader"> <div class="member-info"> <h5 class="member-name">타케나카 유다이 (보컬)</h5> <div class="member-features"><span class="feature"> 현역가왕 JAPAN 우승</span> <span class="feature"> 휘파람 세계대회 우승</span> <span class="feature"> 후한 팬서비스</span></div> </div> </div> <div class="member-card guitarist"> <div class="member-info"> <h5 class="member-name">야마다 카이토 (기타, 리더)</h5> <div class="member-features"><span class="feature"> &zwj; 밴드 리더</span> <span class="feature"> 트윈 기타 &amp; 하모니</span> <span class="feature"> 요리 실력자</span></div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 예상 세트리스트 --> <div class="setlist-section"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle" data-ke-size="size23"> LIVE TOUR 2025 예상 공연곡</h3> <div class="setlist-stats"><span class="stat">약 18곡</span> <span class="stat-divider">&bull;</span> <span class="stat">90분</span></div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title" data-ke-size="size20"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"><span class="song-num">01</span> <div class="song-info"> <div class="song-name">CIRCUS</div> <div class="song-desc">최신 앨범 타이틀곡</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">02</span> <div class="song-info"> <div class="song-name">Walking with you</div> <div class="song-desc">틱톡 바이럴 히트곡</div> </div> </div> <div class="song-row hit"><span class="song-num">03</span> <div class="song-info"> <div class="song-name">Sunny drop</div> <div class="song-desc">메이저 데뷔곡</div> </div> </div> <div class="song-row"><span class="song-num">04</span> <div class="song-info"> <div class="song-name">Life goes on</div> <div class="song-desc">희망의 메시지</div> </div> </div> <div class="song-row"><span class="song-num">05</span> <div class="song-info"> <div class="song-name">Make Me Happy</div> <div class="song-desc">업템포 록</div> </div> </div> <div class="song-row"><span class="song-num">06</span> <div class="song-info"> <div class="song-name">青春 (청춘)</div> <div class="song-desc">청춘을 노래한 대표곡</div> </div> </div> <div class="song-row"><span class="song-num">07</span> <div class="song-info"> <div class="song-name">つぼみ (꽃봉오리)</div> <div class="song-desc">감성 발라드</div> </div> </div> <div class="song-row korea"><span class="song-num">08</span> <div class="song-info"> <div class="song-name">Pretender (Cover)</div> <div class="song-desc">현역가왕 우승곡</div> </div> </div> <div class="song-row"><span class="song-num">09</span> <div class="song-info"> <div class="song-name">愛とか恋とか (사랑이란)</div> <div class="song-desc">사랑을 노래한 곡</div> </div> </div> <div class="song-row"><span class="song-num">10</span> <div class="song-info"> <div class="song-name">Winding Road</div> <div class="song-desc">구불구불한 인생길</div> </div> </div> <div class="song-row"><span class="song-num">11</span> <div class="song-info"> <div class="song-name">雲 (구름)</div> <div class="song-desc">몽환적인 곡</div> </div> </div> <div class="song-row"><span class="song-num">12</span> <div class="song-info"> <div class="song-name">今日も生きてく (오늘도 살아간다)</div> <div class="song-desc">일상의 희망</div> </div> </div> <div class="song-row climax"><span class="song-num">13</span> <div class="song-info"> <div class="song-name">Oh my precious</div> <div class="song-desc">소중한 것들에 대한 노래</div> </div> </div> <div class="song-row"><span class="song-num">14</span> <div class="song-info"> <div class="song-name">路上から武道館へ (길거리에서 무도관으로)</div> <div class="song-desc">밴드의 여정을 담은 곡</div> </div> </div> <div class="song-row finale"><span class="song-num">15</span> <div class="song-info"> <div class="song-name">Cheers</div> <div class="song-desc">메인 세트 피날레</div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title" data-ke-size="size20"> 앙코르</h4> <div class="songs-list-mobile encore"> <div class="song-row encore-song"><span class="song-num encore-num">16</span> <div class="song-info"> <div class="song-name">ツキミソウ (달맞이꽃)</div> <div class="song-desc">감동적인 발라드</div> </div> </div> <div class="song-row encore-song korea-special"><span class="song-num encore-num">17</span> <div class="song-info"> <div class="song-name">고마워요 (한국어 인사)</div> <div class="song-desc">한국 팬들을 위한 특별 메시지</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon"> </div> <div class="note-content"> <div class="note-title">예상 세트리스트</div> <div class="note-desc">강남역 버스킹과 한일가왕전 경험을 바탕으로 한 예상 구성입니다!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 티켓 정보 --> <div class="ticket-section"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매 일정</h3> <div class="booking-card-main"> <div class="booking-badge"> 확정</div> <div class="booking-content"> <div class="booking-title">티켓 오픈</div> <div class="booking-datetime">2025년 8월 7일(목) 오후 8시</div> </div> </div> </div> <!-- 가격 정보 --> <div class="price-section"> <h3 class="mobile-subtitle" data-ke-size="size23"> 티켓 가격</h3> <div class="price-cards"> <div class="price-card standing"> <div class="price-header"><span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type" data-ke-size="size20">스탠딩석</h4> <div class="price-desc">무대와 가까운 거리</div> </div> <div class="price-amount">132,000원</div> </div> <div class="seat-features"><span class="feature"> 무대 근접</span> <span class="feature"> 열정적 관람</span></div> </div> <div class="price-card seated"> <div class="price-header"><span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type" data-ke-size="size20">지정석</h4> <div class="price-desc">편안한 좌석 관람</div> </div> <div class="price-amount">127,000원</div> </div> <div class="seat-features"><span class="feature"> 편안한 관람</span> <span class="feature"> 전체 시야</span></div> </div> </div> </div> <!-- 배송 및 제한 --> <div class="ticket-details"> <h3 class="mobile-subtitle" data-ke-size="size23"> 배송 및 제한 정보</h3> <div class="detail-cards"> <div class="detail-card"><span class="detail-icon"> </span> <div class="detail-content"><b>티켓 배송:</b> 2025년 9월 10일 일괄 배송</div> </div> <div class="detail-card"><span class="detail-icon"> </span> <div class="detail-content"><b>매수 제한:</b> 1인 2매까지</div> </div> <div class="detail-card"><span class="detail-icon"> </span> <div class="detail-content"><b>예매처:</b> YES24 티켓에서만 가능</div> </div> </div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매처</h3> <div class="platform-cards"><a class="platform-card-main primary" href="https://ticket.yes24.com/Perf/54803" target="_blank" rel="noopener"> <div class="platform-header"><span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name" data-ke-size="size20">YES24 티켓</h4> <div class="platform-note">유일한 공식 예매처</div> </div> <span class="platform-arrow">&rarr;</span></div> </a> <div class="platform-card-main disabled"> <div class="platform-header"><span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name" data-ke-size="size20">멜론티켓</h4> <div class="platform-note">예매 불가</div> </div> <span class="platform-status">❌</span></div> </div> <div class="platform-card-main disabled"> <div class="platform-header"><span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name" data-ke-size="size20">티켓링크</h4> <div class="platform-note">예매 불가</div> </div> <span class="platform-status">❌</span></div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 좌석 안내 --> <div class="seating-section"> <h2 class="section-title" data-ke-size="size26"> 좌석 안내</h2> <div class="seating-layout"><img class="seating-image" src="https://i.ifh.cc/xY9DsA.jpg" alt="잠실학생체육관 좌석 배치도" /> <div class="seating-caption"> 잠실학생체육관 좌석 배치도</div> </div> <div class="seating-info"> <div class="seating-overview"> <p data-ke-size="size16">본 공연은 <b>스탠딩석과 지정좌석</b>으로 운영됩니다.</p> </div> <div class="seating-important-notes"> <h4 class="notes-title" data-ke-size="size20"> 좌석 관련 중요 안내</h4> <div class="important-note-list"> <div class="important-note"><span class="note-icon"> </span> <div class="note-text"><b>무대 변경 가능:</b> 연출 협의 과정에서 사전 공지 없이 변경될 수 있습니다</div> </div> <div class="important-note"><span class="note-icon"> ️</span> <div class="note-text"><b>시야 장애 가능:</b> 신장차이, 난간, 구조물, 무대 연출로 인한 시야 장애 발생 가능</div> </div> <div class="important-note critical"><span class="note-icon"> </span> <div class="note-text"><b>교환/환불 불가:</b> 시야 장애로 인한 티켓 취소, 교환, 환불 절대 불가</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 입장 안내 --> <div class="entrance-section"> <h2 class="section-title" data-ke-size="size26"> 입장 안내</h2> <!-- 기본 입장 규칙 --> <div class="entrance-basics"> <h3 class="mobile-subtitle" data-ke-size="size23"> 기본 입장 규칙</h3> <div class="basic-entrance-rules"> <div class="entrance-rule critical"><span class="rule-icon"> </span> <div class="rule-content"><b>1인 1매 티켓 소지 필수</b><br />티켓 미소지자는 어떠한 사유로도 입장 불가</div> </div> <div class="entrance-rule"><span class="rule-icon">⏰</span> <div class="rule-content"><b>입장 시간:</b> 공연 시작 60분 전부터 입장 가능<br />(현장 상황에 따라 변경 가능)</div> </div> <div class="entrance-rule important"><span class="rule-icon"> </span> <div class="rule-content"><b>입장 완료 권장:</b> 공연 시작 10분 전까지 입장 완료<br />공연 시작 후 입장 및 이동 제한</div> </div> <div class="entrance-rule warning"><span class="rule-icon"> </span> <div class="rule-content"><b>재입장 불가:</b> 공연장 입장 후 어떠한 경우에도 퇴장 후 재입장 불가<br />입장 전 필요한 절차 모두 완료 필수</div> </div> </div> </div> <!-- 좌석별 관람 안내 --> <div class="seating-rules"> <h3 class="mobile-subtitle" data-ke-size="size23"> 좌석별 관람 안내</h3> <div class="seating-rule-cards"> <div class="seating-rule-card"> <div class="rule-header"><span class="rule-icon"> </span> <h4 class="rule-title" data-ke-size="size20">지정석 관람자</h4> </div> <div class="rule-details"> <p data-ke-size="size16">&bull; 예매하신 좌석에서만 관람 가능</p> <p data-ke-size="size16">&bull; <b>지정된 좌석 이외의 좌석으로 이동 불가</b></p> <p data-ke-size="size16">&bull; 통로 또는 의자에서 서서 관람 불가</p> <p data-ke-size="size16">&bull; 자리 비울 때 티켓 반드시 소지</p> </div> </div> <div class="seating-rule-card"> <div class="rule-header"><span class="rule-icon"> </span> <h4 class="rule-title" data-ke-size="size20">스탠딩석 관람자</h4> </div> <div class="rule-details"> <p data-ke-size="size16">&bull; 지정된 스탠딩 구역에서만 관람</p> <p data-ke-size="size16">&bull; 구역 간 이동 및 지정석으로 이동 불가</p> <p data-ke-size="size16">&bull; 자유롭게 서서 관람</p> <p data-ke-size="size16">&bull; 자리 이동 시에도 티켓 소지 필수</p> </div> </div> </div> </div> <!-- 지각 관련 안내 --> <div class="late-arrival-info"> <h3 class="mobile-subtitle" data-ke-size="size23">⏰ 지각 시 안내</h3> <div class="late-arrival-card"> <div class="late-header"><span class="late-icon"> </span> <h4 class="late-title" data-ke-size="size20">공연 시작 후 도착 시</h4> </div> <div class="late-content"> <p data-ke-size="size16">&bull; 중간 입장이 제한됩니다</p> <p data-ke-size="size16">&bull; 진행요원의 안내에 따라서만 입장 가능</p> <p data-ke-size="size16">&bull; 다른 관객의 관람 방해를 최소화하기 위해 제한적 입장</p> </div> <div class="late-warning"><span class="warning-icon">⚠️</span> <div class="warning-text">원활한 공연 진행을 위해 <b>여유있게 도착</b>해 주세요!</div> </div> </div> </div> <!-- 티켓 관리 --> <div class="ticket-management"> <h3 class="mobile-subtitle" data-ke-size="size23"> 티켓 관리 주의사항</h3> <div class="ticket-warnings"> <div class="ticket-warning critical"><span class="warning-icon"> </span> <div class="warning-content"><b>티켓 분실 시:</b> 어떠한 경우에도 재발권 불가<br />보관에 각별히 유의하시기 바랍니다</div> </div> <div class="ticket-warning"><span class="warning-icon"> </span> <div class="warning-content"><b>재입장 규칙:</b> 티켓 미소지 시 재입장 절대 불가<br />잠시 자리를 비워도 티켓 반드시 소지</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 교통편 (잠실 기준) --> <div class="location-section"> <h2 class="section-title" data-ke-size="size26"> 교통편 &amp; 위치</h2> <!-- 공연장 정보 --> <div class="venue-info"> <div class="venue-card-jamsil"><span class="venue-icon"> ️</span> <div class="venue-details"> <h3 class="venue-name" data-ke-size="size23">잠실학생체육관</h3> <div class="venue-address">서울특별시 송파구 올림픽로 25</div> <div class="venue-note">올림픽공원 내 위치</div> </div> </div> </div> <!-- 교통편 탭 --> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"><span class="tab-icon"> </span> <span class="tab-text">지하철</span></div> <div class="transport-tab" data-tab="bus"><span class="tab-icon"> </span> <span class="tab-text">버스</span></div> <div class="transport-tab" data-tab="parking"><span class="tab-icon"> </span> <span class="tab-text">주차</span></div> </div> <div class="transport-content"><!-- 지하철 --> <div class="transport-panel active" data-panel="subway"> <div class="subway-routes-jamsil"> <div class="route-card-jamsil primary"> <div class="route-info"><span class="subway-line line2">2호선</span> <div class="station-details"> <h4 class="station-name" data-ke-size="size20">종합운동장역</h4> <div class="exit-info">6번 출구</div> </div> <div class="distance-info"><span class="distance-time">5분</span> <span class="distance-text">도보</span></div> </div> <div class="route-badge best"> 최적</div> </div> <div class="route-card-jamsil secondary"> <div class="route-info"><span class="subway-line line9">9호선</span> <div class="station-details"> <h4 class="station-name" data-ke-size="size20">종합운동장역</h4> <div class="exit-info">6번 출구</div> </div> <div class="distance-info"><span class="distance-time">5분</span> <span class="distance-text">도보</span></div> </div> </div> <div class="route-card-jamsil"> <div class="route-info"><span class="subway-line line5">5호선</span> <div class="station-details"> <h4 class="station-name" data-ke-size="size20">올림픽공원역</h4> <div class="exit-info">3번 출구</div> </div> <div class="distance-info"><span class="distance-time">10분</span> <span class="distance-text">도보</span></div> </div> </div> </div> <div class="jamsil-directions"> <h4 class="directions-title" data-ke-size="size20"> &zwj;♂️ 종합운동장역에서 오는 길</h4> <div class="direction-steps"> <div class="direction-step"><span class="step-number">1</span> <span class="step-desc">종합운동장역 6번 출구</span></div> <div class="direction-step"><span class="step-number">2</span> <span class="step-desc">올림픽공원 방향으로 직진</span></div> <div class="direction-step"><span class="step-number">3</span> <span class="step-desc">잠실학생체육관 도착</span></div> </div> </div> </div> <!-- 버스 --> <div class="transport-panel" data-panel="bus"> <div class="bus-routes-jamsil"> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 간선버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num main">110, 113, 143, 241, 301</span></div> <div class="bus-stop">종합운동장역 하차 &rarr; 도보 5분</div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 지선버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num branch">3220, 3411, 4318</span></div> <div class="bus-stop">종합운동장역 하차 &rarr; 도보 5분</div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 광역버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num wide">1007-1, 1112, 8001</span></div> <div class="bus-stop">종합운동장 하차 &rarr; 도보 7분</div> </div> </div> </div> </div> <!-- 주차 --> <div class="transport-panel" data-panel="parking"> <div class="parking-info-jamsil"> <div class="parking-available"><span class="parking-icon"> ️</span> <div class="parking-content"> <h4 data-ke-size="size20">올림픽공원 주차장 이용 가능</h4> <p data-ke-size="size16">올림픽공원 내 주차장 이용 (유료)</p> </div> </div> <div class="parking-details"> <h4 class="parking-title" data-ke-size="size20"> 주차 정보</h4> <div class="parking-options"> <div class="parking-option"><span class="option-name">올림픽공원 제1주차장</span> <span class="option-info">체육관 가장 가까움</span></div> <div class="parking-option"><span class="option-name">올림픽공원 제2주차장</span> <span class="option-info">대형 주차장</span></div> </div> </div> <div class="parking-recommendation"><span class="rec-icon">✅</span> <div class="rec-content"><b>주차 가능하지만 대중교통 권장</b><br />공연 후 주차장 혼잡 예상</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 관람 규칙 (상세) --> <div class="rules-section-complete"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙 (필독)</h2> <!-- 촬영 금지 --> <div class="photography-ban-detailed"> <div class="ban-header"><span class="ban-icon"> </span> <h3 class="ban-title" data-ke-size="size23">촬영 및 녹음 금지</h3> <span class="ban-level">저작권 보호</span></div> <div class="ban-content"> <p data-ke-size="size16"><b>공연 중 사전 협의되지 않은 모든 촬영 행위 금지:</b></p> <ul class="ban-details-list" style="list-style-type: disc;" data-ke-list-type="disc"> <li>사진 및 동영상 촬영</li> <li>녹음</li> <li>음성 및 영상 중계 (라이브 스트리밍)</li> <li>휴대전화를 제외한 촬영/녹음 가능 기기 반입 절대 금지</li> </ul> <div class="ban-penalty-detailed"><b>⚠️ 위반 시 처벌:</b><br />1단계: 촬영/녹취 자료 삭제<br />2단계: 반복 시 강제 퇴장 (티켓 취소 및 환불 불가)</div> </div> </div> <!-- 반입 금지 물품 --> <div class="prohibited-items-detailed"> <h3 class="mobile-subtitle" data-ke-size="size23"> 반입 금지 물품</h3> <div class="prohibited-categories"> <div class="prohibited-category"> <h4 class="category-title" data-ke-size="size20"> 음식물</h4> <p data-ke-size="size16">500ml 이하 뚜껑 있는 생수를 제외한 모든 음료 및 음식물</p> </div> <div class="prohibited-category"> <h4 class="category-title" data-ke-size="size20"> 위험물품</h4> <p data-ke-size="size16">병, 폭죽, 화약, 레이저 등</p> </div> <div class="prohibited-category"> <h4 class="category-title" data-ke-size="size20"> 기타</h4> <p data-ke-size="size16">애완동물, 꽃다발, 풍선</p> </div> <div class="prohibited-category"> <h4 class="category-title" data-ke-size="size20"> 촬영 장비</h4> <p data-ke-size="size16">휴대전화 외 촬영 및 녹음 가능한 모든 기기</p> </div> <div class="prohibited-category"> <h4 class="category-title" data-ke-size="size20"> 관람 방해</h4> <p data-ke-size="size16">타인의 관람에 피해를 줄 수 있는 모든 도구</p> </div> </div> </div> <!-- 화환 및 선물 안내 --> <div class="gifts-policy"> <h3 class="mobile-subtitle" data-ke-size="size23"> 화환 및 선물 안내</h3> <div class="gifts-info"> <div class="gifts-ban"><span class="ban-icon"> &zwj;♂️</span> <div class="ban-text"><b>본 공연은 화환, 화분 등을 받지 않습니다</b><br />마음만 받겠습니다. 정중히 사양합니다.</div> </div> </div> </div> <!-- 기타 안내사항 --> <div class="additional-rules"> <h3 class="mobile-subtitle" data-ke-size="size23"> 기타 안내사항</h3> <div class="additional-list"> <div class="additional-item"><span class="add-icon"> </span> <div class="add-text">금지사항 위반 행위, 진행요원 업무 방해 행위 등은 질서 유지를 위해 녹음 및 촬영될 수 있습니다</div> </div> <div class="additional-item"><span class="add-icon"> ️</span> <div class="add-text">녹음 및 촬영된 파일은 공연일로부터 30일 이후 파기됩니다</div> </div> <div class="additional-item"><span class="add-icon"> </span> <div class="add-text">관람 수칙 위반으로 인한 혼란 및 사고에 대해 주최측은 일절 책임지지 않습니다</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 추천 포인트 --> <div class="recommendation-section"> <h2 class="section-title" data-ke-size="size26"> 추천 포인트</h2> <div class="recommend-cards"> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">현역가왕 우승자</div> <div class="recommend-desc">유다이의 압도적인 보컬 실력을 라이브로 경험</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">SNS 바이럴 스타</div> <div class="recommend-desc">틱톡에서 화제가 된 "Walking with you" 라이브 버전</div> </div> <div class="recommend-card"> <div class="recommend-icon"> ️</div> <div class="recommend-title">성공신화의 주인공</div> <div class="recommend-desc">길거리 라이브에서 무도관까지, 감동적인 스토리</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">한국 사랑</div> <div class="recommend-desc">강남역 버스킹, 한일가왕전 참가 등 한국에 대한 애정</div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 문의 정보 --> <div class="contact-section"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">1544-6399</div> <div class="contact-desc">YES24 티켓 고객센터</div> <div class="contact-hours">평일/주말 09:00~18:00</div> </div> <a class="contact-btn" href="tel:1544-6399">전화하기</a></div> </div> <div class="official-links"> <h3 class="mobile-subtitle" data-ke-size="size23"> 공식 링크</h3> <div class="links-grid"><a class="link-card primary" href="https://ticket.yes24.com/Perf/54803" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">YES24 티켓</div> <div class="link-desc">공식 예매처</div> </div> <span class="link-arrow">&rarr;</span> </a> <a class="link-card" href="https://www.novelbright.com" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 홈페이지</div> <div class="link-desc">아티스트 공식</div> </div> <span class="link-arrow">&rarr;</span> </a> <a class="link-card" href="https://www.youtube.com/@novelbright" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 유튜브</div> <div class="link-desc">라이브 영상, 브이로그</div> </div> <span class="link-arrow">&rarr;</span> </a> <a class="link-card" href="https://twitter.com/novelbright5" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 트위터</div> <div class="link-desc">최신 소식</div> </div> <span class="link-arrow">&rarr;</span> </a></div> </div> <div class="final-notices"> <h3 class="mobile-subtitle" data-ke-size="size23"> 최종 안내</h3> <div class="final-cards"> <div class="final-card"><span class="final-icon"> </span> <span class="final-text">예매: YES24 티켓에서만 가능</span></div> <div class="final-card"><span class="final-icon"> </span> <span class="final-text">티켓 매매/양도 절대 금지</span></div> <div class="final-card"><span class="final-icon"> </span> <span class="final-text">9월 10일 일괄 배송</span></div> <div class="final-card"><span class="final-icon">⏰</span> <span class="final-text">시간 엄수 (지각 시 입장 제한)</span></div> <div class="final-card"><span class="final-icon"> </span> <span class="final-text">촬영 절대 금지 (강제 퇴장)</span></div> <div class="final-card"><span class="final-icon"> </span> <span class="final-text">티켓 분실 시 재발권 불가</span></div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p data-ke-size="size16">길거리 라이브에서 시작해 무도관을 정복한 Novelbright!</p> <p data-ke-size="size16">강남역 버스킹으로 한국 팬들과 만났던 그들이 이번엔 정식 무대에서 만나요!</p> <p data-ke-size="size16"><b>현역가왕 우승자 유다이의 라이브 보컬을 직접 경험해보세요! </b></p> <p class="conclusion-note" data-ke-size="size16">관람 규칙을 꼭 지켜서 모두가 행복한 공연이 되길!</p> </div> </div> <div class="final-message"> <b>Lighter들, 모두 즐거운 콘서트 되세요!</b> </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size14"> <b>포스터 출처:</b> Novelbright 공식<br /> <b>공연장:</b> 잠실학생체육관<br /> <b>예매:</b> YES24 티켓 공식 정보<br /> <b>아티스트 정보:</b> 나무위키 참조</p> </div> </div> <!-- Novelbright 테마 CSS --> <div> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; } /* Novelbright 테마 색상 */ :root { --novel-primary: #4A90E2; /* 블루 */ --novel-secondary: #7B68EE; /* 퍼플 */ --novel-accent: #00CED1; /* 터키즈 */ --novel-gold: #FFD700; /* 골드 */ --novel-orange: #FF8C00; /* 오렌지 */ } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 350px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(74, 144, 226, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--novel-primary), var(--novel-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 특별 공지 */ .special-announcement { background: rgba(74, 144, 226, 0.1); border: 2px solid var(--novel-primary); border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; text-align: center; } .announcement-badge { background: var(--novel-orange); color: white; padding: 0.25rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .announcement-title { font-size: 1.25rem; font-weight: 700; color: var(--novel-primary); margin-bottom: 0.5rem; } .announcement-desc { color: #ffffff; font-size: 1rem; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--novel-primary); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--novel-primary); } .mobile-subtitle { font-size: 1.125rem; color: var(--novel-secondary); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--novel-primary), var(--novel-secondary)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--novel-primary); background: rgba(74, 144, 226, 0.1); } .info-card.venue { border-color: var(--novel-gold); background: rgba(255, 215, 0, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--novel-primary); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--novel-gold); background: rgba(255, 215, 0, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--novel-secondary); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--novel-gold); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(74, 144, 226, 0.2); color: var(--novel-primary); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(74, 144, 226, 0.3); } .song-chip.mega-hit { background: rgba(255, 140, 0, 0.2); color: var(--novel-orange); border-color: var(--novel-orange); font-weight: 600; } /* 한국 인연 */ .korea-connection { margin-top: 1.5rem; background: rgba(20, 20, 20, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(74, 144, 226, 0.3); } .connection-title { font-size: 1rem; color: var(--novel-primary); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .connection-timeline { display: grid; gap: 0.75rem; } .connection-item { display: flex; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; align-items: center; } .connection-item.viral { background: rgba(255, 140, 0, 0.1); border-left: 4px solid var(--novel-orange); } .connection-item.surprise { background: rgba(255, 215, 0, 0.1); border-left: 4px solid var(--novel-gold); } .connection-item.tv { background: rgba(123, 104, 238, 0.1); border-left: 4px solid var(--novel-secondary); } .connection-item.concert { background: rgba(74, 144, 226, 0.1); border-left: 4px solid var(--novel-primary); } .connection-icon { font-size: 1.25rem; } .connection-date { font-size: 0.875rem; color: var(--novel-gold); font-weight: 600; margin-bottom: 0.25rem; } .connection-event { font-size: 0.9rem; color: #ffffff; } /* 멤버 하이라이트 */ .special-member-highlight { margin-top: 1.5rem; background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(123, 104, 238, 0.3); } .highlight-title { font-size: 1rem; color: var(--novel-secondary); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .member-cards { display: grid; gap: 1rem; } .member-card { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; } .member-card.leader { border-left: 4px solid var(--novel-primary); } .member-card.guitarist { border-left: 4px solid var(--novel-secondary); } .member-name { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .member-features { display: flex; flex-wrap: wrap; gap: 0.25rem; } .feature { background: rgba(74, 144, 226, 0.2); color: var(--novel-primary); padding: 0.25rem 0.5rem; border-radius: 10px; font-size: 0.75rem; font-weight: 500; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--novel-primary); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .stat { background: rgba(74, 144, 226, 0.2); color: var(--novel-primary); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(74, 144, 226, 0.3); } .set-title { font-size: 1rem; color: var(--novel-primary); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: var(--novel-secondary); } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(74, 144, 226, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--novel-gold); background: rgba(255, 215, 0, 0.1); } .song-row.mega-hit { border: 2px solid var(--novel-orange); background: rgba(255, 140, 0, 0.15); } .song-row.hit { border: 1px solid var(--novel-primary); background: rgba(74, 144, 226, 0.1); } .song-row.korea { border: 1px solid var(--novel-gold); background: rgba(255, 215, 0, 0.1); } .song-row.climax { border: 1px solid var(--novel-secondary); background: rgba(123, 104, 238, 0.1); } .song-row.finale { border: 1px solid var(--novel-accent); background: rgba(0, 206, 209, 0.1); } .song-row.encore-song { background: rgba(123, 104, 238, 0.1); border: 1px solid var(--novel-secondary); } .song-row.korea-special { border: 2px solid var(--novel-gold); background: rgba(255, 215, 0, 0.15); } .song-num { background: linear-gradient(135deg, var(--novel-primary), var(--novel-accent)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, var(--novel-secondary), #9c88ff) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--novel-secondary); } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(255, 215, 0, 0.1); border-radius: 10px; border: 1px solid var(--novel-gold); } .note-icon { font-size: 1.5rem; } .note-title { font-size: 1rem; font-weight: 600; color: var(--novel-gold); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(74, 144, 226, 0.3); } .booking-card-main { background: rgba(74, 144, 226, 0.1); border: 2px solid var(--novel-primary); border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } .booking-badge { background: var(--novel-primary); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.25rem; color: var(--novel-primary); font-weight: 700; } /* 가격 카드 */ .price-cards { display: grid; gap: 1rem; margin: 1rem 0; } .price-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .price-card.standing { border-color: var(--novel-primary); background: rgba(74, 144, 226, 0.1); } .price-card.seated { border-color: var(--novel-secondary); background: rgba(123, 104, 238, 0.1); } .price-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .price-icon { font-size: 1.5rem; } .price-type { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .price-desc { font-size: 0.875rem; color: #a0a0a0; } .price-amount { font-size: 1.25rem; font-weight: 700; color: var(--novel-primary); } .seat-features { display: flex; gap: 0.5rem; flex-wrap: wrap; } .feature { background: rgba(255, 255, 255, 0.1); padding: 0.25rem 0.5rem; border-radius: 10px; font-size: 0.75rem; color: #ffffff; } /* 예매처 */ .platform-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card-main { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; color: inherit; transition: all 0.3s ease; } .platform-card-main.primary { border-color: var(--novel-primary); background: rgba(74, 144, 226, 0.1); } .platform-card-main.primary:hover { background: rgba(74, 144, 226, 0.2); transform: translateY(-2px); } .platform-card-main.disabled { opacity: 0.6; background: rgba(60, 60, 60, 0.5); } .platform-header { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-arrow { color: var(--novel-primary); font-weight: bold; font-size: 1.25rem; } .platform-status { color: #999; font-size: 0.875rem; } /* 좌석 안내 */ .seating-layout { text-align: center; margin-bottom: 1.5rem; } .seating-image { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3); } .seating-caption { font-size: 0.875rem; color: #a0a0a0; margin-top: 0.5rem; } .seating-overview { background: rgba(74, 144, 226, 0.1); border: 2px solid var(--novel-primary); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; text-align: center; } .seating-important-notes { background: rgba(255, 165, 0, 0.1); border: 2px solid #ffa500; border-radius: 8px; padding: 1rem; } .notes-title { color: #ffa500; font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .important-note-list { display: grid; gap: 0.75rem; } .important-note { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(0, 0, 0, 0.3); border-radius: 6px; align-items: flex-start; } .important-note.critical { border: 1px solid #ff6b6b; background: rgba(255, 107, 107, 0.1); } .note-icon { font-size: 1rem; flex-shrink: 0; } .note-text { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } /* 입장 안내 */ .entrance-basics { margin-bottom: 1.5rem; } .basic-entrance-rules { display: grid; gap: 0.75rem; margin: 1rem 0; } .entrance-rule { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: flex-start; } .entrance-rule.critical { border: 2px solid var(--novel-primary); background: rgba(74, 144, 226, 0.1); } .entrance-rule.important { border: 2px solid var(--novel-gold); background: rgba(255, 215, 0, 0.1); } .entrance-rule.warning { border: 2px solid #ff6b6b; background: rgba(255, 107, 107, 0.1); } .rule-content { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } /* 좌석별 규칙 */ .seating-rule-cards { display: grid; gap: 1rem; margin: 1rem 0; } .seating-rule-card { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; border-left: 4px solid var(--novel-primary); } .rule-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .rule-title { color: var(--novel-primary); font-size: 1rem; font-weight: 600; } .rule-details p { color: #ffffff; font-size: 0.875rem; margin-bottom: 0.5rem; } .rule-details strong { color: var(--novel-gold); } /* 지각 안내 */ .late-arrival-info { margin-top: 1rem; } .late-arrival-card { background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 8px; padding: 1rem; } .late-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .late-icon { font-size: 1.5rem; color: #ff6b6b; } .late-title { color: #ff6b6b; font-size: 1rem; font-weight: 600; } .late-content p { color: #ffffff; font-size: 0.875rem; margin-bottom: 0.5rem; } .late-warning { display: flex; gap: 0.5rem; margin-top: 0.75rem; padding: 0.75rem; background: rgba(255, 107, 107, 0.2); border-radius: 6px; align-items: center; } /* 티켓 관리 */ .ticket-management { margin-top: 1rem; } .ticket-warnings { display: grid; gap: 0.75rem; } .ticket-warning { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: flex-start; } .ticket-warning.critical { border: 2px solid #ff6b6b; background: rgba(255, 107, 107, 0.1); } .warning-content { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } /* 공연장 (잠실) */ .venue-card-jamsil { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(74, 144, 226, 0.1); border: 2px solid var(--novel-primary); border-radius: 10px; margin-bottom: 1rem; } .venue-icon { font-size: 1.5rem; } .venue-name { font-size: 1.25rem; font-weight: 700; color: var(--novel-primary); margin-bottom: 0.25rem; } .venue-address { color: #ffffff; font-size: 0.95rem; margin-bottom: 0.25rem; } .venue-note { color: var(--novel-gold); font-size: 0.8rem; font-weight: 500; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--novel-primary), var(--novel-accent)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 200px; } .transport-panel { display: none; } .transport-panel.active { display: block; } /* 지하철 (잠실) */ .subway-routes-jamsil { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .route-card-jamsil { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; position: relative; } .route-card-jamsil.primary { border: 2px solid var(--novel-primary); background: rgba(74, 144, 226, 0.1); } .route-card-jamsil.secondary { border: 1px solid var(--novel-secondary); background: rgba(123, 104, 238, 0.05); } .subway-line.line2 { background: #00A84D; } .subway-line.line9 { background: #BDB092; } .subway-line.line5 { background: #996CAC; } /* 나머지 스타일들 (이전과 동일한 패턴으로 계속...) */ /* 관람 규칙 상세 */ .photography-ban-detailed { background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem; } .ban-level { background: #ff6b6b; color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .ban-details-list { list-style: none; padding: 0; margin: 1rem 0; } .ban-details-list li { color: #ffffff; font-size: 0.875rem; padding: 0.25rem 0; position: relative; padding-left: 1rem; } .ban-details-list li::before { content: '•'; position: absolute; left: 0; color: #ff6b6b; font-weight: bold; } .ban-penalty-detailed { background: rgba(255, 107, 107, 0.2); padding: 0.75rem; border-radius: 6px; color: #ffffff; font-size: 0.875rem; margin-top: 1rem; text-align: center; font-weight: 600; } /* 금지 물품 상세 */ .prohibited-categories { display: grid; gap: 1rem; margin: 1rem 0; } .prohibited-category { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; border-left: 4px solid #ff6b6b; } .category-title { color: #ff6b6b; font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; } .prohibited-category p { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } /* 화환 정책 */ .gifts-policy { margin: 1rem 0; } .gifts-info { background: rgba(255, 165, 0, 0.1); border: 2px solid #ffa500; border-radius: 8px; padding: 1rem; } .gifts-ban { display: flex; gap: 0.75rem; align-items: center; } .ban-icon { font-size: 1.5rem; color: #ffa500; } .ban-text { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } /* 추가 규칙 */ .additional-rules { margin: 1rem 0; } .additional-list { display: grid; gap: 0.5rem; } .additional-item { display: flex; gap: 0.75rem; padding: 0.5rem; background: rgba(40, 40, 40, 0.8); border-radius: 6px; align-items: flex-start; } .add-icon { font-size: 1rem; flex-shrink: 0; } .add-text { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } /* 추천 포인트 */ .recommend-cards { display: grid; gap: 1rem; margin: 1rem 0; } .recommend-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 10px; border-left: 4px solid var(--novel-primary); text-align: center; } .recommend-icon { font-size: 2rem; margin-bottom: 0.75rem; } .recommend-title { font-size: 1rem; font-weight: 600; color: var(--novel-primary); margin-bottom: 0.5rem; } .recommend-desc { font-size: 0.9rem; color: #a0a0a0; line-height: 1.4; } .target-audience { margin-top: 1.5rem; } .target-title { font-size: 1rem; color: var(--novel-gold); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .target-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .target-tag { background: rgba(74, 144, 226, 0.2); color: var(--novel-primary); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(74, 144, 226, 0.3); } /* 문의 정보 */ .contact-main { margin-bottom: 1.5rem; } .contact-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(74, 144, 226, 0.1); border: 2px solid var(--novel-primary); border-radius: 10px; } .contact-icon { font-size: 1.5rem; } .contact-info { flex: 1; } .contact-number { font-size: 1.25rem; font-weight: 700; color: var(--novel-primary); margin-bottom: 0.25rem; } .contact-desc { font-size: 0.9rem; color: #ffffff; margin-bottom: 0.25rem; } .contact-hours { font-size: 0.8rem; color: #a0a0a0; } .contact-btn { background: var(--novel-primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.9rem; } .links-grid { display: grid; gap: 0.75rem; } .link-card { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: rgba(40, 40, 40, 0.9); border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .link-card.primary { border-color: var(--novel-primary); background: rgba(74, 144, 226, 0.1); } .link-card:hover { background: rgba(74, 144, 226, 0.2); border-color: var(--novel-primary); } .link-icon { font-size: 1.25rem; } .link-title { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .link-desc { font-size: 0.8rem; color: #a0a0a0; } .link-arrow { color: var(--novel-primary); font-weight: bold; } /* 최종 안내 */ .final-cards { display: grid; gap: 0.5rem; margin: 1rem 0; } .final-card { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 6px; align-items: center; } .final-icon { font-size: 1rem; } .final-text { color: #ffffff; font-size: 0.875rem; } /* 마무리 */ .conclusion-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--novel-primary); border-radius: 12px; padding: 1.5rem; text-align: center; margin-bottom: 1rem; } .conclusion-icon { font-size: 3rem; color: var(--novel-primary); margin-bottom: 1rem; } .conclusion-content p { color: #a0a0a0; margin-bottom: 0.75rem; line-height: 1.5; font-size: 0.95rem; } .conclusion-content strong { color: #ffffff; } .conclusion-note { color: var(--novel-gold); font-size: 0.9rem; font-weight: 500; } .final-message { font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, var(--novel-primary), var(--novel-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding: 1rem; background-color: rgba(74, 144, 226, 0.1); border-radius: 10px; } .credit-section { text-align: center; margin-top: 1.5rem; padding: 1rem; background: rgba(20, 20, 20, 0.8); border-radius: 8px; } .credit-text { color: #666; font-size: 0.875rem; line-height: 1.4; } /* 모바일 최적화 */ @media (max-width: 480px) { .concert-post.mobile-optimized { padding: 0.75rem; } .concert-main-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } .distance-time { font-size: 1.5rem; } .member-cards { gap: 0.75rem; } .connection-timeline { gap: 0.5rem; } } </style> </div> <script> // 교통편 탭 기능 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; // 모든 탭 비활성화 tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); // 선택된 탭 활성화 this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 터치 최적화 function addTouchOptimization() { const touchElements = document.querySelectorAll('.transport-tab, .platform-card-main, .link-card'); touchElements.forEach(element => { element.addEventListener('touchstart', function() { this.style.transform = 'scale(0.98)'; }); element.addEventListener('touchend', function() { this.style.transform = 'scale(1)'; }); }); } // 초기화 document.addEventListener('DOMContentLoaded', function() { // 교통편 탭 초기화 initTransportTabs(); // 터치 최적화 적용 addTouchOptimization(); // 콘솔 로그 console.log(' Novelbright 콘서트 페이지 로드 완료!'); console.log(' 잠실학생체육관 - 종합운동장역 6번 출구 도보 5분'); console.log(' YES24 티켓에서만 예매 가능'); console.log(' 현역가왕 우승자 유다이의 라이브!'); }); </script> 2025/10월 Novelbright LIVE TOUR 2025 IN Seoul 노벨브라이트 예스24 유다이 한일가왕전 jsy-spring https://jsy-spring.tistory.com/6 https://jsy-spring.tistory.com/6#entry6comment Wed, 24 Sep 2025 11:29:08 +0900 https://jsy-spring.tistory.com/5 <div class="concert-post mobile-optimized"> <!-- 메인 포스터 --> <div class="poster-container"> <img class="main-poster" src="https://i.ifh.cc/32r0cl.jpg" alt="Yama Asia Tour 2025 호시탐탐" /> </div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> Yama Asia Tour 2025 호시탐탐 in SEOUL</h1> <!-- 특별 안내 --> <div class="special-announcement"> <div class="announcement-badge"> 첫 단독 내한</div> <div class="announcement-content"> <h3 class="announcement-title">호시탐탐 바라던 그 소식!</h3> <p class="announcement-desc">yama 첫 단독 내한 공연 정보 오픈</p> </div> </div> <!-- 기본 정보 섹션 --> <div class="info-section"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">yama</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">콘서트명</div> <div class="info-value">yama Asia Tour 2025 호시탐탐</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연기간</div> <div class="info-value">2025년 10월 11일(토) ~ 12일(일)</div> </div> </div> <div class="info-card"> <div class="info-icon">⏰</div> <div class="info-content"> <div class="info-label">공연시간</div> <div class="info-value">오후 6시 (18:00) 시작</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람시간</div> <div class="info-value">90분 공연</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">예스24 원더로크홀</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">서울 서대문구 신촌로 129 아트레온</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">신촌역 (2호선) 1번 출구 도보 3분</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">전연령 관람 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 아티스트 소개 (나무위키 정보 반영) --> <div class="artist-section"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16"><b>yama</b>는 일본의 신비로운 보컬리스트로, 화려한 가면을 착용하고 활동하는 독특한 컨셉과 뛰어난 가창력으로 주목받고 있습니다. 2024년 WONDERLIVET에서 첫 내한을 성공적으로 마쳤습니다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">출생</span> </div> <div class="artist-value">1996년 7월 3일 (28세)</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">데뷔</span> </div> <div class="artist-value">2020년 〈春を告げる (봄을 고하다)〉</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">특징</span> </div> <div class="artist-value">가면을 착용한 신비로운 보컬리스트</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">장르</span> </div> <div class="artist-value">J-POP, 일렉트로닉 팝</div> </div> <div class="artist-card"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">소속</span> </div> <div class="artist-value">소니 엔터테인먼트 / 소니 뮤직 레코드</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"> <span class="artist-icon"> </span> <span class="artist-label">주요 성과</span> </div> <div class="artist-value">THE FIRST TAKE 화제, 애니메이션 타이업 다수</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title"> 대표곡</h4> <div class="songs-grid"> <span class="song-chip mega-hit"> 春を告げる (봄을 고하다)</span> <span class="song-chip"> 真っ白 (새하얀)</span> <span class="song-chip"> 麻痺 (마비)</span> <span class="song-chip"> カーテンコール (커튼콜)</span> <span class="song-chip"> 色彩 (색채)</span> </div> </div> <div class="korea-connection"> <h4 class="connection-title"> 한국과의 인연</h4> <div class="connection-timeline"> <div class="connection-item past"> <span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2024년 11월 10일</div> <div class="connection-event">WONDERLIVET 2024 참여 - 첫 내한 성공!</div> </div> </div> <div class="connection-item future"> <span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2025년 10월</div> <div class="connection-event">첫 한국 단독 콘서트 "호시탐탐" 개최</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 예상 세트리스트 --> <div class="setlist-section"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle"> 호시탐탐 투어 예상 공연곡</h3> <div class="setlist-stats"> <span class="stat">약 15곡</span> <span class="stat-divider">•</span> <span class="stat">90분</span> </div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"> <span class="song-num">01</span> <div class="song-info"> <div class="song-name">ランニングアウト (러닝 아웃)</div> <div class="song-desc">오프닝</div> </div> </div> <div class="song-row mega-hit"> <span class="song-num">02</span> <div class="song-info"> <div class="song-name">春を告げる (봄을 고하다)</div> <div class="song-desc">데뷔곡 & 대표곡</div> </div> </div> <div class="song-row hit"> <span class="song-num">03</span> <div class="song-info"> <div class="song-name">真っ白 (새하얀)</div> <div class="song-desc">메이저 데뷔곡</div> </div> </div> <div class="song-row"> <span class="song-num">04</span> <div class="song-info"> <div class="song-name">麻痺 (마비)</div> <div class="song-desc">애니메이션 타이업</div> </div> </div> <div class="song-row"> <span class="song-num">05</span> <div class="song-info"> <div class="song-name">カーテンコール (커튼콜)</div> <div class="song-desc">감성 발라드</div> </div> </div> <div class="song-row"> <span class="song-num">06</span> <div class="song-info"> <div class="song-name">色彩 (색채)</div> <div class="song-desc">화려한 무대</div> </div> </div> <div class="song-row"> <span class="song-num">07</span> <div class="song-info"> <div class="song-name">名前のない日々へ (이름 없는 나날들에게)</div> <div class="song-desc">희망의 메시지</div> </div> </div> <div class="song-row"> <span class="song-num">08</span> <div class="song-info"> <div class="song-name">一寸の赤 (한 치의 빨강)</div> <div class="song-desc">강렬한 곡</div> </div> </div> <div class="song-row"> <span class="song-num">09</span> <div class="song-info"> <div class="song-name">Sleepless Night</div> <div class="song-desc">몽환적인 곡</div> </div> </div> <div class="song-row"> <span class="song-num">10</span> <div class="song-info"> <div class="song-name">クローバー (클로버)</div> <div class="song-desc">행운의 노래</div> </div> </div> <div class="song-row"> <span class="song-num">11</span> <div class="song-info"> <div class="song-name">血流 (혈류)</div> <div class="song-desc">감정적인 곡</div> </div> </div> <div class="song-row climax"> <span class="song-num">12</span> <div class="song-info"> <div class="song-name">希望論 (희망론)</div> <div class="song-desc">클라이맥스</div> </div> </div> <div class="song-row finale"> <span class="song-num">13</span> <div class="song-info"> <div class="song-name">天色 (하늘빛)</div> <div class="song-desc">메인 세트 피날레</div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title"> 앙코르</h4> <div class="songs-list-mobile encore"> <div class="song-row encore-song"> <span class="song-num encore-num">14</span> <div class="song-info"> <div class="song-name">a.m.3:21</div> <div class="song-desc">새벽 감성</div> </div> </div> <div class="song-row encore-song"> <span class="song-num encore-num">15</span> <div class="song-info"> <div class="song-name">憧れのままに (동경하는 대로)</div> <div class="song-desc">그랜드 피날레</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon"> </div> <div class="note-content"> <div class="note-title">예상 세트리스트</div> <div class="note-desc">WONDERLIVET 경험을 바탕으로 한 예상 구성입니다!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 티켓 정보 --> <div class="ticket-section"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle"> 예매 일정</h3> <div class="booking-timeline"> <div class="booking-event first"> <div class="booking-badge first"> 1차</div> <div class="booking-content"> <div class="booking-title">첫 번째 티켓 오픈</div> <div class="booking-datetime">2025년 6월 30일(월) 오후 8시</div> </div> </div> <div class="booking-event additional"> <div class="booking-badge additional"> 추가</div> <div class="booking-content"> <div class="booking-title">추가 티켓 오픈</div> <div class="booking-datetime">2025년 7월 18일(금) 오후 8시</div> </div> </div> </div> </div> <!-- 가격 정보 --> <div class="price-section"> <h3 class="mobile-subtitle"> 티켓 가격</h3> <div class="price-cards"> <div class="price-card vip"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">VIP석</h4> <div class="price-desc">특별 혜택 포함</div> </div> <div class="price-amount">132,000원</div> </div> <div class="vip-benefits"> <span class="benefit"> 특전 포함</span> <span class="benefit"> 우선 입장</span> </div> </div> <div class="price-card general"> <div class="price-header"> <span class="price-icon"> </span> <div class="price-info"> <h4 class="price-type">일반석</h4> <div class="price-desc">기본 관람석</div> </div> <div class="price-amount">99,000원</div> </div> <div class="general-info"> <span class="info"> 지정된 구역</span> <span class="info"> 일반 입장</span> </div> </div> </div> </div> <!-- 배송 및 제한 --> <div class="ticket-details"> <h3 class="mobile-subtitle"> 배송 및 제한 정보</h3> <div class="detail-cards"> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"> <strong>티켓 배송:</strong> 2025년 9월 11일 일괄 배송 </div> </div> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"> <strong>매수 제한:</strong> 1인 3매까지 </div> </div> <div class="detail-card"> <span class="detail-icon"> </span> <div class="detail-content"> <strong>예매처:</strong> YES24 티켓에서만 가능 </div> </div> </div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle"> 예매처</h3> <div class="platform-cards"> <a href="https://ticket.yes24.com/Perf/54282" target="_blank" rel="noopener" class="platform-card-main primary"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">YES24 티켓</h4> <div class="platform-note">유일한 공식 예매처</div> </div> <span class="platform-arrow">→</span> </div> </a> <div class="platform-card-main disabled"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">멜론티켓</h4> <div class="platform-note">예매 불가</div> </div> <span class="platform-status">❌</span> </div> </div> <div class="platform-card-main disabled"> <div class="platform-header"> <span class="platform-icon"> </span> <div class="platform-content"> <h4 class="platform-name">티켓링크</h4> <div class="platform-note">예매 불가</div> </div> <span class="platform-status">❌</span> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 좌석 안내 --> <div class="seating-section"> <h2 class="section-title" data-ke-size="size26"> 좌석 안내</h2> <div class="seating-layout"> <img src="https://i.ifh.cc/X6l6dL.png" alt="예스24 원더로크홀 좌석 배치도" class="seating-image" /> <div class="seating-caption"> 예스24 원더로크홀 좌석 배치도</div> </div> <div class="seating-info"> <div class="seating-overview"> <p>본 공연은 <strong>객석 1층 스탠딩석 및 2층 지정좌석</strong>으로 운영됩니다.</p> </div> <div class="seating-details"> <div class="seating-detail standing"> <h4 class="detail-title"> 1층 스탠딩석</h4> <ul class="detail-list"> <li>1층 객석 구역별로 단차 및 펜스 위치</li> <li>입장 번호 순서대로 입장</li> <li>원하는 구역에서 자유로운 관람 가능</li> <li>무대와 가까운 거리에서 관람</li> </ul> </div> <div class="seating-detail seated"> <h4 class="detail-title"> 2층 지정좌석</h4> <ul class="detail-list"> <li>예매 시 좌석 선택 가능</li> <li>편안한 의자에서 관람</li> <li>무대 전체 조망 가능</li> <li>지정된 좌석에서만 관람</li> </ul> </div> </div> <div class="seating-warnings"> <h4 class="warning-title">⚠️ 좌석 관련 주의사항</h4> <div class="warning-points"> <p>• 일부 구역/좌석은 난간 및 무대 시설물로 인해 시야가 방해될 수 있습니다</p> <p>• 카메라 설치 등으로 인한 시야 방해 가능</p> <p>• 이로 인한 당일 티켓 취소, 교환, 환불은 불가합니다</p> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 입장 안내 --> <div class="entrance-section"> <h2 class="section-title" data-ke-size="size26"> 입장 안내</h2> <!-- 입장 안내 이미지 --> <div class="entrance-guide-image"> <img src="https://i.ifh.cc/FaAh2q.png" alt="yama 콘서트 입장 안내" class="entrance-image" /> <div class="entrance-caption"> 입장 안내 상세 정보</div> </div> <!-- 기본 입장 안내 --> <div class="entrance-basics"> <h3 class="mobile-subtitle"> 기본 입장 안내</h3> <div class="basic-rules"> <div class="basic-rule"> <span class="rule-icon"> </span> <div class="rule-text"> <strong>1인 1티켓 소지 필수</strong><br> 티켓 미소지 시 어떠한 사유로도 입장 불가 </div> </div> <div class="basic-rule"> <span class="rule-icon"> </span> <div class="rule-text"> <strong>로비 출입 제한</strong><br> 티켓부스 오픈 전 로비(지하 3층) 출입 불가 </div> </div> <div class="basic-rule critical"> <span class="rule-icon">⏰</span> <div class="rule-text"> <strong>시간 엄수</strong><br> 공연 시작 10분 전까지 입장 완료 권장 </div> </div> <div class="basic-rule warning"> <span class="rule-icon"> </span> <div class="rule-text"> <strong>지각 시 제재</strong><br> 공연 시작 30분 후 도착 시 입장 불가할 수 있음 </div> </div> </div> </div> <!-- 좌석별 입장 절차 --> <div class="entrance-procedures"> <h3 class="mobile-subtitle">⏰ 좌석별 입장 절차</h3> <!-- 스탠딩석 --> <div class="entrance-procedure standing"> <div class="procedure-header"> <span class="procedure-icon"> </span> <h4 class="procedure-title">스탠딩석 입장 절차</h4> </div> <div class="procedure-timeline"> <div class="timeline-step"> <div class="step-time">17:00</div> <div class="step-content"> <div class="step-action">대기 시작</div> <div class="step-desc">예매번호 순으로 대기 (공연 1시간 전)</div> </div> </div> <div class="timeline-step main"> <div class="step-time">17:20</div> <div class="step-content"> <div class="step-action">입장 시작</div> <div class="step-desc">순차적으로 공연장 내 입장 (공연 40분 전)</div> </div> </div> <div class="timeline-step warning"> <div class="step-time">17:20 이후</div> <div class="step-content"> <div class="step-action">지각 시</div> <div class="step-desc">예매 번호 무효! 마지막 입장</div> </div> </div> </div> <div class="procedure-note"> <span class="note-icon"> </span> <div class="note-text"> <strong>입장 순서가 지난 후 도착 시 예매 번호 무효!</strong><br> 가급적 공연장에 여유롭게 도착해 주세요. </div> </div> </div> <!-- 지정좌석 --> <div class="entrance-procedure seated"> <div class="procedure-header"> <span class="procedure-icon"> </span> <h4 class="procedure-title">지정좌석 입장 절차</h4> </div> <div class="procedure-simple"> <div class="simple-flow"> <div class="flow-item"> <span class="flow-time">스탠딩 입장 완료 후</span> <span class="flow-desc">지정좌석 관객 입장 시작</span> </div> <div class="flow-item"> <span class="flow-time">공연 10분 전까지</span> <span class="flow-desc">입장 완료 권장</span> </div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 교통편 (신촌 기준) --> <div class="location-section"> <h2 class="section-title" data-ke-size="size26"> 교통편 & 위치</h2> <!-- 공연장 정보 --> <div class="venue-info"> <div class="venue-card"> <span class="venue-icon"> </span> <div class="venue-details"> <h3 class="venue-name">예스24 원더로크홀</h3> <div class="venue-address">서울 서대문구 신촌로 129 아트레온</div> </div> </div> </div> <!-- 교통편 탭 --> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"> <span class="tab-icon"> </span> <span class="tab-text">지하철</span> </div> <div class="transport-tab" data-tab="bus"> <span class="tab-icon"> </span> <span class="tab-text">버스</span> </div> <div class="transport-tab" data-tab="parking"> <span class="tab-icon"> </span> <span class="tab-text">주차</span> </div> </div> <div class="transport-content"> <!-- 지하철 --> <div class="transport-panel active" data-panel="subway"> <div class="subway-routes"> <div class="route-card primary"> <div class="route-info"> <span class="subway-line line2">2호선</span> <div class="station-details"> <h4 class="station-name">신촌역</h4> <div class="exit-info">1번 출구</div> </div> <div class="distance-info"> <span class="distance-time">3분</span> <span class="distance-text">도보</span> </div> </div> <div class="route-badge best"> 최적</div> </div> <div class="route-card"> <div class="route-info"> <span class="subway-line line2">2호선</span> <div class="station-details"> <h4 class="station-name">이대역</h4> <div class="exit-info">2번 출구</div> </div> <div class="distance-info"> <span class="distance-time">8분</span> <span class="distance-text">도보</span> </div> </div> </div> </div> <div class="subway-directions"> <h4 class="directions-title"> ‍♂️ 신촌역에서 오는 길</h4> <div class="direction-steps"> <div class="direction-step"> <span class="step-number">1</span> <span class="step-desc">신촌역 1번 출구로 나오기</span> </div> <div class="direction-step"> <span class="step-number">2</span> <span class="step-desc">신촌로 방향으로 직진</span> </div> <div class="direction-step"> <span class="step-number">3</span> <span class="step-desc">아트레온 건물 지하 3층 입장</span> </div> </div> </div> </div> <!-- 버스 --> <div class="transport-panel" data-panel="bus"> <div class="bus-routes"> <div class="bus-category"> <h4 class="bus-title"> 간선버스</h4> <div class="bus-numbers"> <span class="bus-num main">150, 271, 470, 601, 602, 604</span> </div> <div class="bus-stop">신촌역 하차 → 도보 3분</div> </div> <div class="bus-category"> <h4 class="bus-title"> 지선버스</h4> <div class="bus-numbers"> <span class="bus-num branch">7016, 7017, 7024</span> </div> <div class="bus-stop">신촌역 하차 → 도보 3분</div> </div> <div class="bus-category"> <h4 class="bus-title"> 광역버스</h4> <div class="bus-numbers"> <span class="bus-num wide">9701, 9708</span> </div> <div class="bus-stop">신촌역 하차 → 도보 3분</div> </div> </div> </div> <!-- 주차 --> <div class="transport-panel" data-panel="parking"> <div class="parking-info"> <div class="parking-warning"> <span class="warning-icon"> </span> <div class="warning-content"> <h4>공연장 내 별도의 주차 공간 없음</h4> <p>인근 공영/유료 주차장 이용 또는 대중교통 권장</p> </div> </div> <div class="parking-alternatives"> <h4 class="alt-title"> ️ 주변 주차장</h4> <div class="parking-list"> <div class="parking-option"> <span class="parking-name">신촌 공영주차장</span> <span class="parking-distance">도보 5분</span> </div> <div class="parking-option"> <span class="parking-name">이대 주변 유료주차장</span> <span class="parking-distance">도보 8분</span> </div> </div> </div> <div class="parking-final-warning"> <div class="final-warning"> <span class="fw-icon"> </span> <div class="fw-text"> <strong>중요!</strong> 주차 및 교통난으로 인한 관람 지연 시<br> <strong>예매 취소 및 환불, 변경은 불가</strong>합니다. </div> </div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 관람 규칙 --> <div class="rules-section"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙</h2> <!-- 촬영 금지 --> <div class="photography-ban"> <div class="ban-header"> <span class="ban-icon"> </span> <h3 class="ban-title">촬영 금지</h3> <span class="ban-severity">저작권 보호</span> </div> <div class="ban-details"> <p><strong>전문 장비 등으로의 촬영 행위 금지:</strong></p> <ul class="ban-list"> <li>렌즈 교환이 가능한 전문 장비</li> <li>사진 및 동영상 촬영</li> <li>녹음, 녹화</li> <li>라이브 스트리밍</li> </ul> </div> </div> <!-- 금지 물품 --> <div class="prohibited-items"> <h3 class="mobile-subtitle"> 반입 금지 물품</h3> <div class="prohibited-list"> <div class="prohibited-item"> <span class="p-icon"> </span> <div class="p-text">생수를 제외한 음료 및 음식물</div> </div> <div class="prohibited-item"> <span class="p-icon"> </span> <div class="p-text">애완동물</div> </div> <div class="prohibited-item"> <span class="p-icon"> </span> <div class="p-text">꽃다발, 풍선</div> </div> <div class="prohibited-item"> <span class="p-icon"> </span> <div class="p-text">폭죽, 화약, 레이저</div> </div> <div class="prohibited-item"> <span class="p-icon"> </span> <div class="p-text">공연 관람에 방해되는 모든 물품</div> </div> </div> </div> <!-- 허용 물품 --> <div class="allowed-items"> <h3 class="mobile-subtitle">✅ 반입 허용</h3> <div class="allowed-list"> <div class="allowed-item"> <span class="a-icon"> </span> <div class="a-text">생수 (투명 페트병)</div> </div> <div class="allowed-item"> <span class="a-icon"> </span> <div class="a-text">휴대폰 (촬영 금지, 무음모드)</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 물품보관소 --> <div class="storage-section"> <h2 class="section-title" data-ke-size="size26"> 물품보관소 안내</h2> <div class="storage-info"> <div class="storage-availability"> <span class="storage-icon"> </span> <div class="storage-content"> <h4>물품보관소 운영</h4> <p>공연장 로비 내 소량 마련 (조기 마감 가능)</p> </div> </div> <div class="storage-recommendations"> <h4 class="rec-title"> 보관소 이용 팁</h4> <div class="rec-list"> <div class="rec-item"> <span class="rec-icon"> </span> <span class="rec-text">가급적 짐을 최소화해 주세요</span> </div> <div class="rec-item"> <span class="rec-icon"> </span> <span class="rec-text">귀중품은 직접 소지 권장</span> </div> <div class="rec-item"> <span class="rec-icon">⏰</span> <span class="rec-text">조기 마감 가능성 있음</span> </div> </div> </div> <div class="storage-disclaimer"> <div class="disclaimer"> <span class="disclaimer-icon">⚠️</span> <div class="disclaimer-text"> 본인 부주의로 인한 분실, 도난 등에는<br> 주최/주관사 및 공연장 측에서 책임지지 않습니다 </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 추천 포인트 --> <div class="recommendation-section"> <h2 class="section-title" data-ke-size="size26"> 추천 포인트</h2> <div class="recommend-cards"> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">신비로운 가면 보컬리스트</div> <div class="recommend-desc">화려한 가면으로 신분을 숨긴 채 활동하는 독특한 컨셉</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">뛰어난 보컬 실력</div> <div class="recommend-desc">THE FIRST TAKE로 화제가 된 완벽한 라이브 보컬</div> </div> <div class="recommend-card"> <div class="recommend-icon">⭐</div> <div class="recommend-title">첫 단독 내한</div> <div class="recommend-desc">WONDERLIVET 이후 기다리던 첫 단독 콘서트</div> </div> </div> <div class="target-audience"> <h4 class="target-title"> 이런 분들께 추천!</h4> <div class="target-tags"> <span class="target-tag">yama 팬</span> <span class="target-tag">WONDERLIVET 관람자</span> <span class="target-tag">J-POP 애호가</span> <span class="target-tag">보컬로이드 팬</span> <span class="target-tag">신비주의 컨셉 선호</span> <span class="target-tag">감성파</span> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 문의 정보 --> <div class="contact-section"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"> <span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">1544-6399</div> <div class="contact-desc">YES24 티켓 고객센터</div> <div class="contact-hours">평일/주말 09:00~18:00</div> </div> <a href="tel:1544-6399" class="contact-btn">전화하기</a> </div> </div> <div class="official-links"> <h3 class="mobile-subtitle"> 공식 링크</h3> <div class="links-grid"> <a href="https://ticket.yes24.com/Perf/54282" target="_blank" rel="noopener" class="link-card primary"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">YES24 티켓</div> <div class="link-desc">공식 예매처</div> </div> <span class="link-arrow">→</span> </a> <a href="https://www.youtube.com/@yamaofficial" target="_blank" rel="noopener" class="link-card"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 유튜브</div> <div class="link-desc">THE FIRST TAKE 등</div> </div> <span class="link-arrow">→</span> </a> <a href="https://twitter.com/yama_official" target="_blank" rel="noopener" class="link-card"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 트위터</div> <div class="link-desc">최신 소식</div> </div> <span class="link-arrow">→</span> </a> </div> </div> <div class="final-notices"> <h3 class="mobile-subtitle"> 최종 안내</h3> <div class="final-cards"> <div class="final-card"> <span class="final-icon"> </span> <span class="final-text">예매: YES24 티켓에서만 가능</span> </div> <div class="final-card"> <span class="final-icon"> </span> <span class="final-text">티켓 매매/양도 절대 금지</span> </div> <div class="final-card"> <span class="final-icon"> </span> <span class="final-text">9월 11일 일괄 배송</span> </div> <div class="final-card"> <span class="final-icon">⏰</span> <span class="final-text">시간 엄수 (지각 시 입장 불가)</span> </div> <div class="final-card"> <span class="final-icon"> </span> <span class="final-text">촬영 절대 금지</span> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /> <!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p>신비로운 가면 보컬리스트 yama의 첫 한국 단독 콘서트!</p> <p>WONDERLIVET에서 보여준 그 감동을 이번엔 더 가까이에서 만나보세요!</p> <p><strong>"호시탐탐" 바라던 그 순간이 드디어 왔습니다! </strong></p> <p class="conclusion-note">관람 규칙을 준수하여 모두가 즐거운 공연이 되길 바랍니다!</p> </div> </div> <div class="final-message"> <strong>모두 즐거운 콘서트 되세요!</strong> </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size14"> <b>포스터 출처:</b> yama 공식<br /> <b>공연장:</b> 예스24 원더로크홀<br /> <b>예매:</b> YES24 티켓 공식 정보<br /> <b>아티스트 정보:</b> 나무위키 참조 </p> </div> </div> <!-- Yama 테마 CSS --> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; } /* Yama 테마 색상 */ :root { --yama-primary: #E91E63; /* 핑크 */ --yama-secondary: #9C27B0; /* 보라 */ --yama-accent: #FF4081; /* 라이트 핑크 */ --yama-gold: #FFD700; /* 골드 */ } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 350px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(233, 30, 99, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--yama-primary), var(--yama-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 특별 공지 */ .special-announcement { background: rgba(233, 30, 99, 0.1); border: 2px solid var(--yama-primary); border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; text-align: center; } .announcement-badge { background: var(--yama-primary); color: white; padding: 0.25rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .announcement-title { font-size: 1.25rem; font-weight: 700; color: var(--yama-primary); margin-bottom: 0.5rem; } .announcement-desc { color: #ffffff; font-size: 1rem; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--yama-primary); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--yama-primary); } .mobile-subtitle { font-size: 1.125rem; color: var(--yama-secondary); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--yama-primary), var(--yama-secondary)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--yama-primary); background: rgba(233, 30, 99, 0.1); } .info-card.venue { border-color: var(--yama-gold); background: rgba(255, 215, 0, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--yama-primary); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--yama-gold); background: rgba(255, 215, 0, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--yama-secondary); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--yama-gold); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(233, 30, 99, 0.2); color: var(--yama-primary); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(233, 30, 99, 0.3); } .song-chip.mega-hit { background: rgba(255, 215, 0, 0.2); color: var(--yama-gold); border-color: var(--yama-gold); font-weight: 600; } /* 한국 인연 */ .korea-connection { margin-top: 1.5rem; background: rgba(20, 20, 20, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(233, 30, 99, 0.3); } .connection-title { font-size: 1rem; color: var(--yama-primary); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .connection-timeline { display: grid; gap: 0.75rem; } .connection-item { display: flex; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; align-items: center; } .connection-item.past { background: rgba(156, 39, 176, 0.1); border-left: 4px solid var(--yama-secondary); } .connection-item.future { background: rgba(255, 215, 0, 0.1); border-left: 4px solid var(--yama-gold); } .connection-icon { font-size: 1.25rem; } .connection-date { font-size: 0.875rem; color: var(--yama-gold); font-weight: 600; margin-bottom: 0.25rem; } .connection-event { font-size: 0.9rem; color: #ffffff; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--yama-primary); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .stat { background: rgba(233, 30, 99, 0.2); color: var(--yama-primary); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(233, 30, 99, 0.3); } .set-title { font-size: 1rem; color: var(--yama-primary); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: var(--yama-secondary); } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(233, 30, 99, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--yama-gold); background: rgba(255, 215, 0, 0.1); } .song-row.mega-hit { border: 2px solid var(--yama-primary); background: rgba(233, 30, 99, 0.15); } .song-row.hit { border: 1px solid var(--yama-primary); background: rgba(233, 30, 99, 0.1); } .song-row.new { border: 1px solid var(--yama-accent); background: rgba(255, 64, 129, 0.1); } .song-row.climax { border: 1px solid var(--yama-secondary); background: rgba(156, 39, 176, 0.1); } .song-row.finale { border: 1px solid var(--yama-gold); background: rgba(255, 215, 0, 0.1); } .song-row.encore-song { background: rgba(156, 39, 176, 0.1); border: 1px solid var(--yama-secondary); } .song-num { background: linear-gradient(135deg, var(--yama-primary), var(--yama-accent)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, var(--yama-secondary), #9c88ff) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--yama-secondary); } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(255, 215, 0, 0.1); border-radius: 10px; border: 1px solid var(--yama-gold); } .note-icon { font-size: 1.5rem; } .note-title { font-size: 1rem; font-weight: 600; color: var(--yama-gold); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(233, 30, 99, 0.3); } /* 예매 일정 */ .booking-timeline { display: grid; gap: 1rem; margin: 1rem 0; } .booking-event { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .booking-event.first { border-color: var(--yama-primary); background: rgba(233, 30, 99, 0.1); } .booking-event.additional { border-color: var(--yama-secondary); background: rgba(156, 39, 176, 0.1); } .booking-badge { padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; color: white; } .booking-badge.first { background: var(--yama-primary); } .booking-badge.additional { background: var(--yama-secondary); } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.125rem; color: var(--yama-primary); font-weight: 700; } /* 가격 카드 */ .price-cards { display: grid; gap: 1rem; margin: 1rem 0; } .price-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .price-card.vip { border-color: var(--yama-gold); background: rgba(255, 215, 0, 0.1); } .price-card.general { border-color: var(--yama-primary); background: rgba(233, 30, 99, 0.1); } .price-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .price-icon { font-size: 1.5rem; } .price-type { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .price-desc { font-size: 0.875rem; color: #a0a0a0; } .price-amount { font-size: 1.25rem; font-weight: 700; color: var(--yama-primary); } .vip-benefits, .general-info { display: flex; gap: 0.5rem; flex-wrap: wrap; } .benefit, .info { background: rgba(255, 255, 255, 0.1); padding: 0.25rem 0.5rem; border-radius: 10px; font-size: 0.75rem; color: #ffffff; } /* 배송 정보 */ .detail-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .detail-card { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: center; } .detail-icon { font-size: 1.25rem; } .detail-content { color: #ffffff; font-size: 0.9rem; } /* 예매처 */ .platform-cards { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card-main { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; color: inherit; transition: all 0.3s ease; } .platform-card-main.primary { border-color: var(--yama-primary); background: rgba(233, 30, 99, 0.1); } .platform-card-main.primary:hover { background: rgba(233, 30, 99, 0.2); transform: translateY(-2px); } .platform-card-main.disabled { opacity: 0.6; background: rgba(60, 60, 60, 0.5); } .platform-header { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-arrow { color: var(--yama-primary); font-weight: bold; font-size: 1.25rem; } .platform-status { color: #999; font-size: 0.875rem; } /* 좌석 안내 */ .seating-layout { text-align: center; margin-bottom: 1.5rem; } .seating-image { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3); } .seating-caption { font-size: 0.875rem; color: #a0a0a0; margin-top: 0.5rem; } .seating-overview { background: rgba(233, 30, 99, 0.1); border: 2px solid var(--yama-primary); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; text-align: center; } .seating-overview p { color: #ffffff; font-size: 1rem; font-weight: 600; } .seating-details { display: grid; gap: 1rem; } .seating-detail { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; } .seating-detail.standing { border-left: 4px solid var(--yama-primary); } .seating-detail.seated { border-left: 4px solid var(--yama-secondary); } .detail-title { color: var(--yama-primary); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .detail-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; } .detail-list li { color: #ffffff; font-size: 0.875rem; padding: 0.25rem 0; position: relative; padding-left: 1rem; } .detail-list li::before { content: '•'; position: absolute; left: 0; color: var(--yama-primary); font-weight: bold; } .seating-warnings { margin-top: 1rem; background: rgba(255, 165, 0, 0.1); border: 1px solid #ffa500; border-radius: 8px; padding: 1rem; } .warning-title { color: #ffa500; font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .warning-points p { color: #ffffff; font-size: 0.875rem; margin-bottom: 0.5rem; } /* 입장 안내 */ .entrance-guide-image { text-align: center; margin-bottom: 1.5rem; } .entrance-image { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3); } .entrance-caption { font-size: 0.875rem; color: #a0a0a0; margin-top: 0.5rem; } .entrance-basics { margin-bottom: 1.5rem; } .basic-rules { display: grid; gap: 0.75rem; margin: 1rem 0; } .basic-rule { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: flex-start; } .basic-rule.critical { border: 2px solid var(--yama-primary); background: rgba(233, 30, 99, 0.1); } .basic-rule.warning { border: 2px solid #ffa500; background: rgba(255, 165, 0, 0.1); } .rule-icon { font-size: 1.25rem; flex-shrink: 0; } .rule-text { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } /* 입장 절차 */ .entrance-requirements { margin-bottom: 1.5rem; } .requirements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1rem 0; } .requirement-item { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; text-align: center; border: 1px solid var(--yama-primary); } .req-icon { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; } .req-content h4 { font-size: 0.9rem; color: var(--yama-primary); font-weight: 600; margin-bottom: 0.25rem; } .req-content p { font-size: 0.8rem; color: #a0a0a0; } .requirements-alert { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 8px; margin-top: 1rem; } .alert-icon { font-size: 1.25rem; flex-shrink: 0; } .alert-text { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } /* 입장 절차 */ .entrance-procedures { margin-top: 1rem; } .entrance-procedure { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .entrance-procedure.standing { border: 2px solid var(--yama-primary); } .entrance-procedure.seated { border: 2px solid var(--yama-secondary); } .procedure-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .procedure-icon { font-size: 1.5rem; } .procedure-title { color: #ffffff; font-size: 1rem; font-weight: 600; } .procedure-timeline { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .timeline-step { display: flex; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: 6px; } .timeline-step.main { background: rgba(233, 30, 99, 0.1); border: 1px solid var(--yama-primary); } .timeline-step.warning { background: rgba(255, 107, 107, 0.1); border: 1px solid #ff6b6b; } .step-time { background: var(--yama-primary); color: white; padding: 0.5rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; min-width: 90px; text-align: center; } .step-action { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .step-desc { font-size: 0.85rem; color: #a0a0a0; } .procedure-note { display: flex; gap: 0.5rem; padding: 0.75rem; background: rgba(255, 215, 0, 0.1); border-radius: 6px; align-items: flex-start; } .note-text { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } .procedure-simple { background: rgba(255, 255, 255, 0.02); border-radius: 6px; padding: 0.75rem; } .simple-flow { display: grid; gap: 0.5rem; } .flow-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background: rgba(156, 39, 176, 0.1); border-radius: 6px; } .flow-time { background: var(--yama-secondary); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-weight: 600; font-size: 0.8rem; } .flow-desc { color: #ffffff; font-size: 0.9rem; } /* 공연장 정보 */ .venue-info { margin-bottom: 1rem; } .venue-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(233, 30, 99, 0.1); border: 2px solid var(--yama-primary); border-radius: 10px; } .venue-icon { font-size: 1.5rem; } .venue-name { font-size: 1.25rem; font-weight: 700; color: var(--yama-primary); margin-bottom: 0.25rem; } .venue-address { color: #ffffff; font-size: 0.95rem; } /* 교통편 탭 */ .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--yama-primary), var(--yama-accent)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 200px; } .transport-panel { display: none; } .transport-panel.active { display: block; } /* 지하철 */ .subway-routes { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .route-card { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; position: relative; } .route-card.primary { border: 2px solid var(--yama-primary); background: rgba(233, 30, 99, 0.1); } .route-card.secondary { border: 1px solid var(--yama-secondary); background: rgba(156, 39, 176, 0.05); } .route-info { display: flex; align-items: center; justify-content: space-between; } .subway-line { padding: 0.5rem 1rem; border-radius: 15px; font-weight: 700; color: white; font-size: 0.9rem; } .subway-line.line2 { background: #00A84D; } .subway-line.line6 { background: #CD7C2F; } .station-name { font-size: 1.25rem; font-weight: 700; color: var(--yama-primary); margin-bottom: 0.25rem; } .exit-info { font-size: 0.9rem; color: #ffffff; } .distance-info { text-align: center; } .distance-time { font-size: 2rem; font-weight: 800; color: var(--yama-gold); display: block; line-height: 1; } .distance-text { font-size: 0.875rem; color: #a0a0a0; } .route-badge { position: absolute; top: -8px; right: 1rem; background: var(--yama-gold); color: #000; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .subway-directions { background: rgba(255, 255, 255, 0.02); border-radius: 8px; padding: 1rem; } .directions-title { color: var(--yama-secondary); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .direction-steps { display: grid; gap: 0.5rem; } .direction-step { display: flex; gap: 0.75rem; padding: 0.5rem; background: rgba(233, 30, 99, 0.1); border-radius: 6px; align-items: center; } .step-number { background: var(--yama-primary); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; flex-shrink: 0; } .step-desc { color: #ffffff; font-size: 0.9rem; } /* 버스 */ .bus-routes { display: grid; gap: 1rem; } .bus-category { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; } .bus-title { color: var(--yama-secondary); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .bus-numbers { margin-bottom: 0.75rem; } .bus-num { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: white; margin-right: 0.25rem; margin-bottom: 0.25rem; } .bus-num.main { background: #ff6b6b; } .bus-num.branch { background: #ffa500; } .bus-num.wide { background: #4ecdc4; } .bus-stop { background: rgba(255, 255, 255, 0.05); padding: 0.75rem; border-radius: 6px; color: #ffffff; font-size: 0.9rem; } /* 주차 */ .parking-info { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; } .parking-warning { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 8px; margin-bottom: 1rem; align-items: center; } .warning-content h4 { color: #ff6b6b; font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; } .warning-content p { color: #ffffff; font-size: 0.9rem; } .parking-alternatives { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; } .alt-title { color: var(--yama-gold); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .parking-list { display: grid; gap: 0.5rem; } .parking-option { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 6px; } .parking-name { color: #ffffff; font-weight: 500; } .parking-distance { color: var(--yama-gold); font-size: 0.875rem; } .parking-final-warning { margin-bottom: 1rem; } .final-warning { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(255, 165, 0, 0.1); border: 2px solid #ffa500; border-radius: 8px; align-items: center; } .fw-icon { font-size: 1.5rem; color: #ffa500; } .fw-text { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } .fw-text strong { color: #ffa500; } /* 관람 규칙 */ .photography-ban { background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem; } .ban-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .ban-icon { font-size: 1.5rem; } .ban-title { font-size: 1.125rem; color: #ff6b6b; font-weight: 700; } .ban-severity { background: #ff6b6b; color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .ban-details { margin-bottom: 1rem; } .ban-details p { color: #ffffff; margin-bottom: 0.75rem; font-size: 0.95rem; } .ban-list { list-style: none; padding: 0; display: grid; gap: 0.25rem; margin-left: 1rem; } .ban-list li { color: #ffffff; font-size: 0.875rem; position: relative; padding-left: 1rem; } .ban-list li::before { content: '•'; position: absolute; left: 0; color: #ff6b6b; font-weight: bold; } /* 금지/허용 물품 */ .prohibited-items, .allowed-items, .additional-notices { margin: 1rem 0; } .prohibited-list, .allowed-list, .notice-list { display: grid; gap: 0.5rem; } .prohibited-item, .allowed-item, .notice-item { display: flex; gap: 0.75rem; padding: 0.5rem; background: rgba(40, 40, 40, 0.8); border-radius: 6px; align-items: flex-start; } .p-icon, .a-icon, .n-icon { font-size: 1rem; flex-shrink: 0; } .p-text, .a-text, .n-text { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } /* 물품보관소 */ .storage-info { background: rgba(20, 20, 20, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid rgba(156, 39, 176, 0.3); } .storage-availability { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(156, 39, 176, 0.1); border: 1px solid var(--yama-secondary); border-radius: 8px; margin-bottom: 1rem; align-items: center; } .storage-icon { font-size: 1.5rem; color: var(--yama-secondary); } .storage-content h4 { color: var(--yama-secondary); font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; } .storage-content p { color: #ffffff; font-size: 0.9rem; } .storage-recommendations { margin-bottom: 1rem; } .rec-title { color: var(--yama-gold); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .rec-list { display: grid; gap: 0.5rem; } .rec-item { display: flex; gap: 0.75rem; padding: 0.5rem; background: rgba(255, 215, 0, 0.1); border-radius: 6px; align-items: center; } .rec-icon { font-size: 1rem; } .rec-text { color: #ffffff; font-size: 0.875rem; } .storage-disclaimer { margin-top: 1rem; } .disclaimer { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(255, 165, 0, 0.1); border: 1px solid #ffa500; border-radius: 8px; align-items: flex-start; } .disclaimer-icon { font-size: 1.25rem; flex-shrink: 0; } .disclaimer-text { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } /* 추천 포인트 */ .recommend-cards { display: grid; gap: 1rem; margin: 1rem 0; } .recommend-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 10px; border-left: 4px solid var(--yama-primary); text-align: center; } .recommend-icon { font-size: 2rem; margin-bottom: 0.75rem; } .recommend-title { font-size: 1rem; font-weight: 600; color: var(--yama-primary); margin-bottom: 0.5rem; } .recommend-desc { font-size: 0.9rem; color: #a0a0a0; line-height: 1.4; } .target-audience { margin-top: 1.5rem; } .target-title { font-size: 1rem; color: var(--yama-gold); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .target-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .target-tag { background: rgba(233, 30, 99, 0.2); color: var(--yama-primary); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(233, 30, 99, 0.3); } /* 문의 정보 */ .contact-main { margin-bottom: 1.5rem; } .contact-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(233, 30, 99, 0.1); border: 2px solid var(--yama-primary); border-radius: 10px; } .contact-icon { font-size: 1.5rem; } .contact-info { flex: 1; } .contact-number { font-size: 1.25rem; font-weight: 700; color: var(--yama-primary); margin-bottom: 0.25rem; } .contact-desc { font-size: 0.9rem; color: #ffffff; margin-bottom: 0.25rem; } .contact-hours { font-size: 0.8rem; color: #a0a0a0; } .contact-btn { background: var(--yama-primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.9rem; } .links-grid { display: grid; gap: 0.75rem; } .link-card { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: rgba(40, 40, 40, 0.9); border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .link-card.primary { border-color: var(--yama-primary); background: rgba(233, 30, 99, 0.1); } .link-card:hover { background: rgba(233, 30, 99, 0.2); border-color: var(--yama-primary); } .link-icon { font-size: 1.25rem; } .link-title { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .link-desc { font-size: 0.8rem; color: #a0a0a0; } .link-arrow { color: var(--yama-primary); font-weight: bold; } /* 최종 안내 */ .final-cards { display: grid; gap: 0.5rem; margin: 1rem 0; } .final-card { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 6px; align-items: center; } .final-icon { font-size: 1rem; } .final-text { color: #ffffff; font-size: 0.875rem; } /* 마무리 */ .conclusion-card { background: rgba(40, 40, 40, 0.9); border: 2px solid var(--yama-primary); border-radius: 12px; padding: 1.5rem; text-align: center; margin-bottom: 1rem; } .conclusion-icon { font-size: 3rem; color: var(--yama-primary); margin-bottom: 1rem; } .conclusion-content p { color: #a0a0a0; margin-bottom: 0.75rem; line-height: 1.5; font-size: 0.95rem; } .conclusion-content strong { color: #ffffff; } .conclusion-note { color: var(--yama-gold); font-size: 0.9rem; font-weight: 500; } .final-message { font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, var(--yama-primary), var(--yama-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding: 1rem; background-color: rgba(233, 30, 99, 0.1); border-radius: 10px; } .credit-section { text-align: center; margin-top: 1.5rem; padding: 1rem; background: rgba(20, 20, 20, 0.8); border-radius: 8px; } .credit-text { color: #666; font-size: 0.875rem; line-height: 1.4; } /* 모바일 최적화 */ @media (max-width: 480px) { .concert-post.mobile-optimized { padding: 0.75rem; } .concert-main-title { font-size: 1.25rem; } .section-title { font-size: 1.125rem; } .requirements-grid { grid-template-columns: 1fr; gap: 0.5rem; } .requirement-item { display: flex; align-items: center; gap: 0.75rem; text-align: left; } .req-icon { font-size: 1.25rem; margin-bottom: 0; } .distance-time { font-size: 1.5rem; } .route-info { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } </style> <script> // 교통편 탭 기능 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; // 모든 탭 비활성화 tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); // 선택된 탭 활성화 this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 부드러운 스크롤 function smoothScrollTo(targetId) { const target = document.getElementById(targetId); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } // 터치 최적화 function addTouchOptimization() { const touchElements = document.querySelectorAll('.transport-tab, .platform-card-main, .link-card'); touchElements.forEach(element => { element.addEventListener('touchstart', function() { this.style.transform = 'scale(0.98)'; }); element.addEventListener('touchend', function() { this.style.transform = 'scale(1)'; }); }); } // 초기화 document.addEventListener('DOMContentLoaded', function() { // 교통편 탭 초기화 initTransportTabs(); // 터치 최적화 적용 addTouchOptimization(); // 콘솔 로그 console.log(' yama 콘서트 페이지 로드 완료!'); console.log(' 예스24 원더로크홀 - 신촌역 1번 출구 도보 3분'); console.log(' YES24 티켓에서만 예매 가능'); console.log(' 첫 단독 내한 콘서트!'); }); </script> 2025/10월 Yama Yama Asia Tour 2025 봄을 고하다 야마 예스24 호시탐탐 jsy-spring https://jsy-spring.tistory.com/5 https://jsy-spring.tistory.com/5#entry5comment Wed, 24 Sep 2025 11:08:49 +0900 https://jsy-spring.tistory.com/4 <div class="concert-post mobile-optimized"> <!-- 네비게이션 & 스크롤 UI --> <div class="floating-nav" id="floatingNav"> <div class="nav-toggle" id="navToggle"> <span class="nav-icon"> </span> <span class="nav-text">메뉴</span> </div> <div class="nav-menu" id="navMenu"> <div class="nav-header"> <span class="nav-title"> 녹황색사회</span> <button class="nav-close" id="navClose">✕</button> </div> <div class="nav-items"> <a href="#info" class="nav-item" data-target="info"> 기본 정보</a> <a href="#artist" class="nav-item" data-target="artist"> 아티스트 소개</a> <a href="#setlist" class="nav-item" data-target="setlist"> 세트리스트</a> <a href="#ticket" class="nav-item" data-target="ticket"> 티켓 정보</a> <a href="#seating" class="nav-item" data-target="seating"> 좌석 안내</a> <a href="#entrance" class="nav-item" data-target="entrance"> 입장 안내</a> <a href="#location" class="nav-item" data-target="location"> 교통편</a> <a href="#rules" class="nav-item" data-target="rules">⚠️ 관람 규칙</a> <a href="#storage" class="nav-item" data-target="storage"> 물품보관소</a> <a href="#recommendation" class="nav-item" data-target="recommendation"> 추천 포인트</a> <a href="#contact" class="nav-item" data-target="contact"> 문의 정보</a> </div> </div> </div> <div class="scroll-to-top" id="scrollToTop"> <span>⬆️</span> <div style="font-size: 10px; margin-top: 2px;">TOP</div> </div> <div class="scroll-progress-bar"><div class="scroll-progress" id="scrollProgress"></div></div> <div class="poster-container" id="top"><img class="main-poster" src="https://i.ifh.cc/dHqxFq.jpg" alt="녹황색사회 아시아 투어 2025" /></div> <!-- 콘서트 제목 --> <h1 class="concert-main-title"> 녹황색사회 아시아 투어 2025 in SEOUL</h1> <!-- 기본 정보 섹션 --> <div class="info-section" id="info"> <h2 class="section-title" data-ke-size="size26"> 콘서트 기본 정보</h2> <div class="info-cards"> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">아티스트</div> <div class="info-value">ryokuoushoku shakai (녹황색사회)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">콘서트명</div> <div class="info-value">ryokuoushoku shakai Asia Tour 2025</div> </div> </div> <div class="info-card highlight"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">공연기간</div> <div class="info-value">2025년 10월 11일(토) ~ 12일(일)</div> </div> </div> <div class="info-card"> <div class="info-icon">⏰</div> <div class="info-content"> <div class="info-label">공연시간</div> <div class="info-value">오후 6시 (18:00) 시작</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람시간</div> <div class="info-value">90분 이상 (인터미션 없음)</div> </div> </div> <div class="info-card venue"> <div class="info-icon"> ️</div> <div class="info-content"> <div class="info-label">장소</div> <div class="info-value">YES24 LIVE HALL (예스24 라이브 홀)</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">주소</div> <div class="info-value">서울특별시 광진구 구천면로 20</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">가까운 역</div> <div class="info-value">광나루역 (5호선) 2번 출구 도보 3분</div> </div> </div> <div class="info-card"> <div class="info-icon"> </div> <div class="info-content"> <div class="info-label">관람등급</div> <div class="info-value">초등학생 이상 관람 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 아티스트 소개 (정확한 정보) --> <div class="artist-section" id="artist"> <h2 class="section-title" data-ke-size="size26"> 아티스트 소개</h2> <div class="artist-intro"> <p data-ke-size="size16"><b>ryokuoushoku shakai (녹황색사회)</b>는 일본 아이치현 출신의 4인조 혼성 록밴드로, 2024년 인천 펜타포트에서 첫 내한을 성공적으로 마친 주목받는 아티스트입니다.</p> </div> <div class="artist-info-cards"> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">결성</span></div> <div class="artist-value">2012년 7월 4일</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">데뷔</span></div> <div class="artist-value">2017년 1월 11일</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">멤버 (4인조)</span></div> <div class="artist-value">나가야 하루코, 코바야시 잇세이, peppe, 아나미 싱고</div> </div> <div class="artist-card"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">장르</span></div> <div class="artist-value">J-POP, 팝 록</div> </div> <div class="artist-card achievement"> <div class="artist-card-header"><span class="artist-icon"> </span> <span class="artist-label">주요 성과</span></div> <div class="artist-value">NHK 홍백가합전 3회 출장, 인천 펜타포트 2024 출연</div> </div> </div> <div class="hit-songs"> <h4 class="hits-title" data-ke-size="size20"> 대표곡</h4> <div class="songs-grid"><span class="song-chip mega-hit"> Mela! (1억회 돌파)</span> <span class="song-chip"> Shout Baby</span> <span class="song-chip"> Sabotage</span> <span class="song-chip"> キャラクター (Character)</span> <span class="song-chip"> 僕らはいきものだから</span></div> </div> <div class="korea-connection"> <h4 class="connection-title" data-ke-size="size20"> 한국과의 인연</h4> <div class="connection-timeline"> <div class="connection-item past"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2024년 8월 4일</div> <div class="connection-event">인천 펜타포트 락 페스티벌 첫 내한 성공!</div> </div> </div> <div class="connection-item future"><span class="connection-icon"> </span> <div class="connection-content"> <div class="connection-date">2025년 10월</div> <div class="connection-event">첫 한국 단독 콘서트 개최 예정</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 예상 세트리스트 --> <div class="setlist-section" id="setlist"> <h2 class="section-title" data-ke-size="size26"> 예상 세트리스트</h2> <div class="setlist-header"> <h3 class="setlist-subtitle" data-ke-size="size23"> Asia Tour 2025 예상 공연곡</h3> <div class="setlist-stats"><span class="stat">약 16곡</span> <span class="stat-divider">&bull;</span> <span class="stat">90분</span></div> </div> <div class="setlist-container"> <div class="main-set"> <h4 class="set-title" data-ke-size="size20"> 메인 세트</h4> <div class="songs-list-mobile"> <div class="song-row opening"><span class="song-num">01</span> <div class="song-info"> <div class="song-name">Nice idea!</div> <div class="song-desc">2024년 신곡 오프닝</div> </div> </div> <div class="song-row mega-hit"><span class="song-num">02</span> <div class="song-info"> <div class="song-name">Mela!</div> <div class="song-desc">대표곡 (1억회 돌파)</div> </div> </div> <div class="song-row hit"><span class="song-num">03</span> <div class="song-info"> <div class="song-name">Shout Baby</div> <div class="song-desc">인기곡</div> </div> </div> <div class="song-row"><span class="song-num">04</span> <div class="song-info"> <div class="song-name">Sabotage</div> <div class="song-desc">첫 싱글</div> </div> </div> <div class="song-row"><span class="song-num">05</span> <div class="song-info"> <div class="song-name">キャラクター (Character)</div> <div class="song-desc">홍백가합전 출장곡</div> </div> </div> <div class="song-row"><span class="song-num">06</span> <div class="song-info"> <div class="song-name">LITMUS</div> <div class="song-desc">드라마 주제가</div> </div> </div> <div class="song-row"><span class="song-num">07</span> <div class="song-info"> <div class="song-name">結証</div> <div class="song-desc">감동적인 발라드</div> </div> </div> <div class="song-row"><span class="song-num">08</span> <div class="song-info"> <div class="song-name">ミチヲユケ</div> <div class="song-desc">희망의 메시지</div> </div> </div> <div class="song-row"><span class="song-num">09</span> <div class="song-info"> <div class="song-name">サマータイムシンデレラ</div> <div class="song-desc">여름 감성</div> </div> </div> <div class="song-row"><span class="song-num">10</span> <div class="song-info"> <div class="song-name">花になって</div> <div class="song-desc">최신 싱글</div> </div> </div> <div class="song-row new"><span class="song-num">11</span> <div class="song-info"> <div class="song-name">僕らはいきものだから</div> <div class="song-desc">홍백가합전 최신곡</div> </div> </div> <div class="song-row climax"><span class="song-num">12</span> <div class="song-info"> <div class="song-name">長く短い祭</div> <div class="song-desc">클라이맥스</div> </div> </div> <div class="song-row finale"><span class="song-num">13</span> <div class="song-info"> <div class="song-name">Party!!</div> <div class="song-desc">메인 세트 피날레</div> </div> </div> </div> </div> <div class="encore-set"> <h4 class="set-title encore-title" data-ke-size="size20"> 앙코르</h4> <div class="songs-list-mobile encore"> <div class="song-row encore-song"><span class="song-num encore-num">14</span> <div class="song-info"> <div class="song-name">陽はまた昇るから</div> <div class="song-desc">크레용 신짱 주제가</div> </div> </div> <div class="song-row encore-song"><span class="song-num encore-num">15</span> <div class="song-info"> <div class="song-name">幸せ</div> <div class="song-desc">그랜드 피날레</div> </div> </div> </div> </div> </div> <div class="setlist-note-mobile"> <div class="note-icon"> </div> <div class="note-content"> <div class="note-title">예상 세트리스트</div> <div class="note-desc">펜타포트 경험을 바탕으로 한 예상 구성입니다!</div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 티켓 정보 --> <div class="ticket-section" id="ticket"> <h2 class="section-title" data-ke-size="size26"> 티켓 정보</h2> <!-- 예매 일정 --> <div class="booking-schedule"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매 일정</h3> <div class="booking-card-main"> <div class="booking-badge"> 확정</div> <div class="booking-content"> <div class="booking-title">티켓 오픈</div> <div class="booking-datetime">2025년 7월 11일(금) 오후 6시</div> </div> </div> </div> <!-- 가격 및 좌석 --> <div class="price-seating"> <h3 class="mobile-subtitle" data-ke-size="size23"> 가격 및 좌석 정보</h3> <div class="seat-cards"> <div class="seat-card standing"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">스탠딩석</h4> <div class="seat-location">1층 스탠딩 구역</div> </div> <div class="seat-price">121,000원</div> </div> <div class="seat-desc">입장 번호순 입장, 구역 내 자유 관람</div> </div> <div class="seat-card seated"> <div class="seat-header"><span class="seat-icon"> </span> <div class="seat-info"> <h4 class="seat-name" data-ke-size="size20">지정석</h4> <div class="seat-location">2층 지정좌석</div> </div> <div class="seat-price">121,000원</div> </div> <div class="seat-desc">좌석 선택 가능, 편안한 의자 관람</div> </div> </div> </div> <!-- 예매처 --> <div class="booking-platforms"> <h3 class="mobile-subtitle" data-ke-size="size23"> 예매처</h3> <div class="platform-list"><a class="platform-card available" href="https://ticket.yes24.com/Perf/54495" target="_blank" rel="noopener"> <div class="platform-info"><span class="platform-icon"> </span> <div class="platform-details"> <h4 class="platform-name" data-ke-size="size20">YES24 티켓</h4> <div class="platform-note">유일한 공식 예매처</div> </div> <span class="platform-status ok">예매 가능</span></div> </a> <div class="platform-card unavailable"> <div class="platform-info"><span class="platform-icon"> </span> <div class="platform-details"> <h4 class="platform-name" data-ke-size="size20">멜론티켓</h4> <div class="platform-note">이 공연은 예매 불가</div> </div> <span class="platform-status no">❌ 불가</span></div> </div> <div class="platform-card unavailable"> <div class="platform-info"><span class="platform-icon"> </span> <div class="platform-details"> <h4 class="platform-name" data-ke-size="size20">티켓링크</h4> <div class="platform-note">이 공연은 예매 불가</div> </div> <span class="platform-status no">❌ 불가</span></div> </div> </div> </div> <!-- 티켓 주의사항 --> <div class="ticket-warnings"> <h3 class="mobile-subtitle" data-ke-size="size23">⚠️ 티켓 주의사항</h3> <div class="warning-list"> <div class="warning-item critical"><span class="warning-icon"> </span> <div class="warning-text"><b>매수제한:</b> 회차별 1인 1매까지</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>티켓 형태:</b> 모바일 티켓만 (배송 없음)</div> </div> <div class="warning-item"><span class="warning-icon"> </span> <div class="warning-text"><b>예매처:</b> YES24 티켓에서만 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 좌석 안내 --> <div class="seating-section" id="seating"> <h2 class="section-title" data-ke-size="size26"> 좌석 안내</h2> <div class="seating-image-area"><img class="seating-image" src="https://i.ifh.cc/0aMPfX.png" alt="YES24 LIVE HALL 좌석 배치도" /> <div class="seating-caption"> YES24 LIVE HALL 좌석 배치도</div> </div> <div class="seating-explanation"> <div class="seating-overview"> <p data-ke-size="size16"><b>1층은 스탠딩 구역</b>이며, <b>2층은 지정좌석제</b>로 운영됩니다.</p> </div> <div class="seating-details"> <div class="seating-detail-card standing"> <h4 class="detail-title" data-ke-size="size20"> 1층 스탠딩 구역</h4> <ul class="detail-features" style="list-style-type: disc;" data-ke-list-type="disc"> <li>별도의 좌석(의자) 없이 구역 내에 서서 관람</li> <li>예매 시 선택하는 입장 번호가 입장 순서</li> <li>앞 번호일수록 입장 순서가 빨라짐</li> <li>입장 후 해당 구역 내에서 자유롭게 위치 선택</li> </ul> </div> <div class="seating-detail-card seated"> <h4 class="detail-title" data-ke-size="size20"> 2층 지정석</h4> <ul class="detail-features" style="list-style-type: disc;" data-ke-list-type="disc"> <li>예매 시 원하는 좌석을 선택 가능</li> <li><b>지정된 좌석 외의 좌석으로 이동 불가</b></li> <li>편안한 의자에서 관람</li> <li>무대 전체를 내려다보는 시야</li> </ul> </div> </div> <div class="seating-warnings"> <h4 class="warnings-title" data-ke-size="size20"> 좌석 관련 주의사항</h4> <div class="warning-items"> <div class="warning-item"><span class="w-icon"> </span> <span class="w-text">무대는 연출 협의 과정에서 사전 공지 없이 변경될 수 있습니다</span></div> <div class="warning-item"><span class="w-icon"> ️</span> <span class="w-text">일부 구역/좌석은 난간 및 시설물로 인해 시야 장애가 발생할 수 있습니다</span></div> <div class="warning-item"><span class="w-icon"> </span> <span class="w-text">시야 장애로 인한 티켓 교환 및 환불은 불가합니다</span></div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 입장 안내 --> <div class="entrance-section" id="entrance"> <h2 class="section-title" data-ke-size="size26"> 입장 안내</h2> <!-- 필수 준비물 --> <div class="entrance-requirements"> <h3 class="mobile-subtitle" data-ke-size="size23"> 입장 시 필수 3종 세트</h3> <div class="requirements-grid"> <div class="requirement-item"><span class="req-icon"> </span> <div class="req-content"> <h4 data-ke-size="size20">모바일 티켓</h4> <p data-ke-size="size16">YES24에서 발급</p> </div> </div> <div class="requirement-item"><span class="req-icon">⌚</span> <div class="req-content"> <h4 data-ke-size="size20">손목밴드</h4> <p data-ke-size="size16">현장 지급</p> </div> </div> <div class="requirement-item"><span class="req-icon"> </span> <div class="req-content"> <h4 data-ke-size="size20">신분증</h4> <p data-ke-size="size16">본인 확인용</p> </div> </div> </div> <div class="requirements-alert"><span class="alert-icon"> </span> <div class="alert-text"><b>3가지 모두 미소지 시 어떠한 사유로도 입장 불가!</b><br />재입장 시에도 모두 필요합니다.</div> </div> </div> <!-- 입장 절차 --> <div class="entrance-procedures"> <h3 class="mobile-subtitle" data-ke-size="size23">⏰ 좌석별 입장 절차</h3> <div class="entrance-type standing"> <div class="entrance-header"><span class="entrance-icon"> </span> <h4 class="entrance-title" data-ke-size="size20">스탠딩 구역 예매자</h4> </div> <div class="entrance-timeline"> <div class="timeline-step"> <div class="step-time">16:30</div> <div class="step-content"> <div class="step-action">대기 시작</div> <div class="step-desc">입장 번호순으로 대기 (공연 1시간 30분 전)</div> </div> </div> <div class="timeline-step critical"> <div class="step-time">17:30</div> <div class="step-content"> <div class="step-action">입장 시작</div> <div class="step-desc">입장 번호 순서대로 객석 입장 (공연 30분 전)</div> </div> </div> <div class="timeline-step warning"> <div class="step-time">17:30 이후</div> <div class="step-content"> <div class="step-action">지각 시</div> <div class="step-desc"><b>입장 번호 무효!</b> 맨 마지막 입장</div> </div> </div> </div> <div class="entrance-note"><span class="note-icon"> </span> <div class="note-text"><b>중요!</b> 입장 번호는 구역 내 입장 순서입니다.<br />반드시 입장 시작 시간 전에 도착하세요!</div> </div> </div> <div class="entrance-type seated"> <div class="entrance-header"><span class="entrance-icon"> </span> <h4 class="entrance-title" data-ke-size="size20">지정좌석 예매자</h4> </div> <div class="entrance-simple"> <div class="simple-info"> <div class="simple-time">17:30부터</div> <div class="simple-desc">공연 30분 전부터 객석 입장 가능</div> </div> <div class="simple-note">예매한 좌석에서만 관람 가능, 자리 이동 불가</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 교통편 (탭 기능 포함) --> <div class="location-section" id="location"> <h2 class="section-title" data-ke-size="size26"> 교통편 &amp; 위치</h2> <!-- 공연장 정보 --> <div class="venue-info"> <div class="venue-card"><span class="venue-icon"> </span> <div class="venue-details"> <h3 class="venue-name" data-ke-size="size23">YES24 LIVE HALL</h3> <div class="venue-address">서울특별시 광진구 구천면로 20</div> </div> </div> </div> <!-- 교통편 탭 --> <div class="transport-tabs"> <div class="transport-tab active" data-tab="subway"><span class="tab-icon"> </span> <span class="tab-text">지하철</span></div> <div class="transport-tab" data-tab="bus"><span class="tab-icon"> </span> <span class="tab-text">버스</span></div> <div class="transport-tab" data-tab="parking"><span class="tab-icon"> </span> <span class="tab-text">주차</span></div> </div> <!-- 교통편 내용 --> <div class="transport-content"><!-- 지하철 탭 --> <div class="transport-panel active" data-panel="subway"> <div class="subway-guide"> <div class="route-main"> <div class="route-card best"> <div class="route-info"><span class="subway-line line5">5호선</span> <div class="station-info"> <h4 class="station-name" data-ke-size="size20">광나루역</h4> <div class="exit-info">2번 출구</div> </div> <div class="walk-info"><span class="walk-time">3분</span> <span class="walk-text">도보</span></div> </div> <div class="route-badge"> 최적</div> </div> </div> <div class="walking-directions"> <h4 class="directions-title" data-ke-size="size20"> &zwj;♂️ 도보 안내</h4> <div class="direction-steps"> <div class="direction-step"><span class="step-num">1</span> <span class="step-desc">5호선 광나루역 2번 출구</span></div> <div class="direction-step"><span class="step-num">2</span> <span class="step-desc">구천면로 방향 직진 (약 200m)</span></div> <div class="direction-step"><span class="step-num">3</span> <span class="step-desc">YES24 LIVE HALL 도착</span></div> </div> </div> </div> </div> <!-- 버스 탭 --> <div class="transport-panel" data-panel="bus"> <div class="bus-guide"> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 간선버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num main">130</span> <span class="bus-num main">370</span> <span class="bus-num main">N30</span></div> <div class="bus-stop-info"> <div class="stop-name">광나루역 하차</div> <div class="stop-desc">&rarr; 횡단보도 건넌 후 도보 3분</div> </div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 직행버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num direct">1113</span> <span class="bus-num direct">1113-1</span> <span class="bus-num direct">1113-2</span> <span class="bus-num direct">1113-11</span></div> <div class="bus-stop-info"> <div class="stop-name">광진청소년수련관 하차</div> <div class="stop-desc">&rarr; 바로 앞 YES24 LIVE HALL</div> </div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 일반버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num general">13</span> <span class="bus-num general">13-2</span> <span class="bus-num general">96-1</span></div> <div class="bus-stop-info"> <div class="stop-name">광진청소년수련관 하차</div> <div class="stop-desc">&rarr; 바로 앞 YES24 LIVE HALL</div> </div> </div> </div> <div class="bus-category"> <h4 class="bus-title" data-ke-size="size20"> 마을버스</h4> <div class="bus-route-card"> <div class="bus-numbers"><span class="bus-num village">광진01</span></div> <div class="bus-stop-info"> <div class="stop-name">청소년수련관 하차</div> <div class="stop-desc">&rarr; 바로 앞 YES24 LIVE HALL</div> </div> </div> </div> <div class="bus-tip"><span class="tip-icon"> </span> <div class="tip-content"><b>버스 이용 팁</b><br />&bull; 광진청소년수련관 하차 &rarr; 가장 가까움<br />&bull; 광나루역 하차 &rarr; 횡단보도 건너야 함</div> </div> </div> </div> <!-- 주차 탭 --> <div class="transport-panel" data-panel="parking"> <div class="parking-guide"> <div class="parking-warning-main"><span class="warning-icon"> </span> <div class="warning-content"> <h4 data-ke-size="size20">주차장 없음 &amp; 주차 금지</h4> <div class="warning-details"> <p data-ke-size="size16">&bull; 공연장 전용 주차공간 없음</p> <p data-ke-size="size16">&bull; <b>광진구민체육센터 주차 절대 불가</b></p> <p data-ke-size="size16">&bull; 불법 주차 시 신고 및 스티커 부착</p> </div> </div> </div> <div class="parking-alternatives"> <h4 class="alt-title" data-ke-size="size20"> ️ 부득이한 경우</h4> <div class="alt-note"><span class="note-icon">⚠️</span> <span class="note-text"> 주최측에서는 주차장을 안내하지 않으며,<br />개인적으로 유료주차장을 찾아서 이용하셔야 합니다 </span></div> </div> <div class="parking-final-warning"> <div class="final-warning"><span class="fw-icon"> </span> <div class="fw-content"><b>중요 안내</b><br />교통 상황이나 주차 문제로 인한 관람 지연 시<br /><b>티켓의 변경, 취소, 환불이 불가</b>합니다.</div> </div> </div> <div class="transport-recommendation"><span class="rec-icon">✅</span> <div class="rec-content"><b>5호선 광나루역 이용을 강력히 권장합니다</b><br />가장 빠르고 안전한 교통수단입니다</div> </div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 관람 규칙 --> <div class="rules-section" id="rules"> <h2 class="section-title" data-ke-size="size26">⚠️ 관람 규칙 (필독)</h2> <!-- 촬영 금지 강조 --> <div class="photography-ban"> <div class="ban-header"><span class="ban-icon"> </span> <h3 class="ban-title" data-ke-size="size23">촬영 절대 금지</h3> <span class="ban-severity">즉시 퇴장</span></div> <div class="ban-content"> <p data-ke-size="size16"><b>객석 입장부터 퇴장까지</b> 공연장 내 모든 형태의 촬영 금지:</p> <ul class="ban-list" style="list-style-type: disc;" data-ke-list-type="disc"> <li>사진/동영상 촬영</li> <li>녹음</li> <li>SNS 생중계</li> <li>카메라 삼각대, 모노포드, 셀카봉 등 촬영 보조 기구</li> </ul> </div> <div class="ban-penalty"><b>⚠️ 위반 시:</b> 데이터 삭제 &rarr; 기기/필름 압수 &rarr; 사전 경고 없이 즉시 퇴장 (재입장 및 환불 불가)</div> </div> <!-- 기타 금지사항 --> <div class="other-prohibitions"> <h3 class="mobile-subtitle" data-ke-size="size23"> 기타 금지사항</h3> <div class="prohibition-list"> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">응원봉 및 팬라이트 등 과도한 발광물체 사용</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">메시지보드, 부채, 오페라 글래스를 머리 위로 올리는 행위</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">외부 음식물 반입 (생수 제외)</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">화환, 꽃다발, 선물, 편지 등 (정중히 사양)</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">폭죽, 레이저 등 위험 물품</div> </div> <div class="prohibition-item"><span class="p-icon"> </span> <div class="p-text">애완동물 동반</div> </div> <div class="prohibition-item"><span class="p-icon"> &zwj;♂️</span> <div class="p-text">공연 전후 공연장 주변에서 아티스트 대기</div> </div> </div> </div> <!-- 허용사항 --> <div class="allowed-items"> <h3 class="mobile-subtitle" data-ke-size="size23">✅ 허용사항</h3> <div class="allowed-list"> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>생수:</b> 500mL 이하 뚜껑 있는 PET 생수만 반입 가능</div> </div> <div class="allowed-item"><span class="a-icon"> </span> <div class="a-text"><b>휴대폰:</b> 무음모드 설정 후 소지 (촬영은 절대 금지)</div> </div> </div> </div> <!-- 추가 안내사항 --> <div class="additional-notices"> <h3 class="mobile-subtitle" data-ke-size="size23"> 추가 안내사항</h3> <div class="notice-list"> <div class="notice-item"><span class="n-icon"> </span> <span class="n-text">공연 진행 시 공식 촬영이 진행될 수 있으며, 관객 초상이 노출될 수 있습니다</span></div> <div class="notice-item"><span class="n-icon">⚡</span> <span class="n-text">연출상 레이저 포함으로 인한 카메라/핸드폰 파손 시 주최측 책임 없음</span></div> <div class="notice-item"><span class="n-icon"> </span> <span class="n-text">객석 내부 및 로비 방치된 짐은 스태프가 임의로 이동/수거/파기 가능</span></div> <div class="notice-item"><span class="n-icon"> &zwj;♂️</span> <span class="n-text">진행요원 및 스태프가 객석 내에서 이동할 수 있으며, 이는 관람 방해 행위가 아님</span></div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 물품보관소 안내 --> <div class="storage-section" id="storage"> <h2 class="section-title" data-ke-size="size26"> 물품보관소 안내</h2> <div class="storage-info"> <div class="storage-main"> <div class="storage-header"><span class="storage-icon"> </span> <h3 class="storage-title" data-ke-size="size23">코인 락커 이용안내</h3> </div> <div class="storage-details"> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>위치:</b> 공연장 외부 및 로비</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>요금:</b> 500원 동전만 사용 가능</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>동전 교환:</b> 현장 교환기 있음 (혼잡 예상)</div> </div> <div class="storage-item"><span class="s-icon"> </span> <div class="s-content"><b>수량:</b> 한정적이므로 소지품 간소화 권장</div> </div> </div> </div> <div class="storage-tips"> <h4 class="tips-title" data-ke-size="size20"> 이용 팁</h4> <div class="tip-cards"> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">500원 동전 미리 준비</span></div> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">소지품 최소화</span></div> <div class="tip-card"><span class="tip-emoji"> </span> <span class="tip-text">귀중품 직접 소지</span></div> </div> </div> <div class="storage-disclaimer"> <div class="disclaimer-box"><span class="disclaimer-icon">⚠️</span> <div class="disclaimer-text"><b>책임 한계:</b> 보관물품 파손/분실 시 주최측 책임 없음<br />정상적이지 않은 사용 시 소지품 수거 가능</div> </div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 추천 포인트 --> <div class="recommendation-section" id="recommendation"> <h2 class="section-title" data-ke-size="size26"> 추천 포인트</h2> <div class="recommend-cards"> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">검증된 라이브 실력</div> <div class="recommend-desc">펜타포트 2024에서 증명된 뛰어난 라이브 퍼포먼스</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">독창적인 음악 세계</div> <div class="recommend-desc">밴드명처럼 독특하고 개성 있는 사운드</div> </div> <div class="recommend-card"> <div class="recommend-icon"> </div> <div class="recommend-title">첫 단독 콘서트</div> <div class="recommend-desc">한국에서의 첫 단독 공연이라는 특별한 의미</div> </div> </div> <div class="target-audience"> <h4 class="target-title" data-ke-size="size20"> 이런 분들께 추천!</h4> <div class="target-tags"><span class="target-tag">녹황색사회 팬</span> <span class="target-tag">펜타포트 관람자</span> <span class="target-tag">J-POP 애호가</span> <span class="target-tag">인디 록 선호</span> <span class="target-tag">20-30대</span> <span class="target-tag">감성파</span></div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 문의 정보 --> <div class="contact-section" id="contact"> <h2 class="section-title" data-ke-size="size26"> 문의 및 정보</h2> <div class="contact-main"> <div class="contact-card"><span class="contact-icon"> </span> <div class="contact-info"> <div class="contact-number">1544-6399</div> <div class="contact-desc">YES24 티켓 고객센터</div> <div class="contact-hours">평일/주말 09:00~18:00</div> </div> <a class="contact-btn" href="tel:1544-6399">전화하기</a></div> </div> <div class="official-links"> <h3 class="mobile-subtitle" data-ke-size="size23"> 공식 링크</h3> <div class="links-list"><a class="link-item primary" href="https://ticket.yes24.com/Perf/54495" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">YES24 티켓</div> <div class="link-desc">공식 예매처</div> </div> <span class="link-arrow">&rarr;</span> </a> <a class="link-item" href="https://www.ryokuoushokushakai.com" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 홈페이지</div> <div class="link-desc">아티스트 공식</div> </div> <span class="link-arrow">&rarr;</span> </a> <a class="link-item" href="https://instagram.com/ryokuoushokushakai" target="_blank" rel="noopener"> <span class="link-icon"> </span> <div class="link-info"> <div class="link-title">공식 인스타그램</div> <div class="link-desc">최신 소식</div> </div> <span class="link-arrow">&rarr;</span> </a></div> </div> <div class="final-notices"> <h3 class="mobile-subtitle" data-ke-size="size23"> 최종 안내</h3> <div class="final-notice-cards"> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">예매: YES24 티켓에서만 가능</span></div> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">티켓 매매/양도 절대 금지</span></div> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">모바일 티켓만 발행 (배송 없음)</span></div> <div class="final-notice-item"><span class="fn-icon">⏰</span> <span class="fn-text">시간 엄수 (지각 시 입장 제한)</span></div> <div class="final-notice-item"><span class="fn-icon"> </span> <span class="fn-text">촬영 절대 금지 (즉시 퇴장)</span></div> </div> </div> </div> <hr class="section-divider" data-ke-style="style1" /><!-- 마무리 --> <div class="conclusion-section"> <h2 class="section-title" data-ke-size="size26"> 마무리</h2> <div class="conclusion-card"> <div class="conclusion-icon"> </div> <div class="conclusion-content"> <p data-ke-size="size16">녹황색사회의 한국 첫 단독 콘서트는 정말 특별한 기회예요!</p> <p data-ke-size="size16">펜타포트에서 보여준 그 감동을 이번엔 더 가까이에서 만나보세요!</p> <p data-ke-size="size16"><b>따뜻하고 감성적인 그들의 음악을 YES24 LIVE HALL에서 경험하세요! </b></p> <p class="conclusion-warning" data-ke-size="size16">관람 규칙을 잘 지켜서 모두가 즐거운 공연이 되길 바랍니다!</p> </div> </div> <div class="final-message"> <b>모두 즐거운 콘서트 되세요!</b> </div> </div> <!-- 크레딧 --> <div class="credit-section"> <p class="credit-text" data-ke-size="size14"> <b>포스터 출처:</b> 녹황색사회 공식<br /> <b>공연장:</b> YES24 LIVE HALL<br /> <b>예매:</b> YES24 티켓 공식 정보<br /> <b>아티스트 정보:</b> 나무위키 참조</p> </div> </div> <style> /* 기본 설정 */ .concert-post.mobile-optimized { max-width: 100%; margin: 0; padding: 1rem; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; } /* 녹황색사회 테마 색상 */ :root { --ryoku-green: #7CB342; --ryoku-yellow: #FFC107; --ryoku-light: #8BC34A; --ryoku-dark: #689F38; } /* 플로팅 네비게이션 */ .floating-nav { position: fixed; right: 12px; top: 20px; z-index: 999; } .nav-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--ryoku-green), var(--ryoku-light)); color: #000; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(124,179,66,0.35); user-select: none; transition: all 0.3s ease; } .nav-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(124,179,66,0.5); } .nav-menu { position: absolute; right: 0; top: 55px; width: 260px; background: rgba(20,20,20,0.98); border: 2px solid var(--ryoku-green); border-radius: 12px; backdrop-filter: blur(6px); box-shadow: 0 20px 40px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(-10px); } .nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .nav-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(124,179,66,0.3); } .nav-title { color: var(--ryoku-green); font-weight: 700; } .nav-close { background: rgba(255,255,255,0.1); border: 0; color: #fff; font-size: 16px; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .nav-close:hover { background: var(--ryoku-green); } .nav-items { display: grid; padding: 8px; gap: 4px; max-height: 60vh; overflow: auto; } .nav-item { display: block; text-decoration: none; color: #eaeaea; font-size: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(40,40,40,0.6); border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; } .nav-item:hover { background: rgba(124,179,66,0.12); border-color: var(--ryoku-green); transform: translateX(3px); } .nav-item.active { background: rgba(124,179,66,0.2); border-color: var(--ryoku-green); color: var(--ryoku-green); } /* 맨 위로 버튼 */ .scroll-to-top { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--ryoku-green), var(--ryoku-yellow)); border-radius: 50%; color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 998; font-weight: 600; border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .scroll-to-top.visible { opacity: 1; visibility: visible; } .scroll-to-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 30px rgba(124,179,66,0.4); } .scroll-to-top:active { transform: translateY(-1px) scale(1.02); } /* 스크롤 진행바 */ .scroll-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.06); z-index: 1000; } .scroll-progress { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ryoku-green), var(--ryoku-yellow)); transition: width 0.1s ease; } /* 포스터 */ .poster-container { text-align: center; margin-bottom: 1.5rem; } .main-poster { width: 100%; max-width: 350px; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(124, 179, 66, 0.4); } /* 제목 */ .concert-main-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--ryoku-green), var(--ryoku-yellow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; } /* 섹션 제목 */ .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--ryoku-green); padding: 0.75rem; background: rgba(30, 30, 30, 0.9); border-radius: 8px; border-left: 4px solid var(--ryoku-green); } .mobile-subtitle { font-size: 1.125rem; color: var(--ryoku-yellow); margin: 1rem 0 0.75rem 0; font-weight: 600; } .section-divider { border: none; height: 2px; background: linear-gradient(135deg, var(--ryoku-green), var(--ryoku-yellow)); margin: 1.5rem 0; } /* 정보 카드 */ .info-cards { display: grid; gap: 0.75rem; } .info-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(40, 40, 40, 0.9); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .info-card.highlight { border-color: var(--ryoku-green); background: rgba(124, 179, 66, 0.1); } .info-card.venue { border-color: var(--ryoku-yellow); background: rgba(255, 193, 7, 0.1); } .info-icon { font-size: 1.5rem; width: 40px; text-align: center; } .info-label { font-size: 0.875rem; color: #a0a0a0; margin-bottom: 0.25rem; } .info-value { font-size: 1rem; font-weight: 600; color: #ffffff; } /* 아티스트 정보 */ .artist-intro { padding: 1rem; background: rgba(30, 30, 30, 0.9); border-radius: 10px; margin-bottom: 1rem; border-left: 4px solid var(--ryoku-green); } .artist-info-cards { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .artist-card { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .artist-card.achievement { border-color: var(--ryoku-yellow); background: rgba(255, 193, 7, 0.1); } .artist-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .artist-icon { font-size: 1.25rem; } .artist-label { font-size: 0.875rem; color: var(--ryoku-yellow); font-weight: 600; } .artist-value { color: #ffffff; font-size: 0.95rem; } /* 대표곡 */ .hit-songs { margin-top: 1rem; } .hits-title { font-size: 1rem; color: var(--ryoku-yellow); margin-bottom: 0.75rem; font-weight: 600; } .songs-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .song-chip { background: rgba(124, 179, 66, 0.2); color: var(--ryoku-green); padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(124, 179, 66, 0.3); } .song-chip.mega-hit { background: rgba(255, 193, 7, 0.2); color: var(--ryoku-yellow); border-color: var(--ryoku-yellow); font-weight: 600; } /* 한국 인연 */ .korea-connection { margin-top: 1.5rem; background: rgba(20, 20, 20, 0.8); border-radius: 10px; padding: 1rem; border: 2px solid rgba(124, 179, 66, 0.3); } .connection-title { font-size: 1rem; color: var(--ryoku-green); margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .connection-timeline { display: grid; gap: 0.75rem; } .connection-item { display: flex; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; align-items: center; } .connection-item.past { background: rgba(78, 205, 196, 0.1); border-left: 4px solid #4ecdc4; } .connection-item.future { background: rgba(255, 193, 7, 0.1); border-left: 4px solid var(--ryoku-yellow); } .connection-icon { font-size: 1.25rem; } .connection-date { font-size: 0.875rem; color: var(--ryoku-yellow); font-weight: 600; margin-bottom: 0.25rem; } .connection-event { font-size: 0.9rem; color: #ffffff; } /* 세트리스트 */ .setlist-header { text-align: center; margin-bottom: 1.5rem; } .setlist-subtitle { font-size: 1.125rem; color: var(--ryoku-green); margin-bottom: 0.5rem; } .setlist-stats { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .stat { background: rgba(255, 193, 7, 0.2); color: var(--ryoku-yellow); padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; } .stat-divider { color: #666; } .setlist-container { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(124, 179, 66, 0.3); } .set-title { font-size: 1rem; color: var(--ryoku-green); margin-bottom: 1rem; font-weight: 600; text-align: center; } .set-title.encore-title { color: #4ecdc4; } .songs-list-mobile { display: grid; gap: 0.5rem; } .song-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; transition: all 0.3s ease; } .song-row:hover { background: rgba(124, 179, 66, 0.1); transform: translateX(2px); } .song-row.opening { border: 1px solid var(--ryoku-yellow); background: rgba(255, 193, 7, 0.1); } .song-row.mega-hit { border: 2px solid var(--ryoku-green); background: rgba(124, 179, 66, 0.15); } .song-row.hit { border: 1px solid var(--ryoku-green); background: rgba(124, 179, 66, 0.1); } .song-row.new { border: 1px solid #ff6b6b; background: rgba(255, 107, 107, 0.1); } .song-row.climax { border: 1px solid #ffa500; background: rgba(255, 165, 0, 0.1); } .song-row.finale { border: 1px solid #9c88ff; background: rgba(156, 136, 255, 0.1); } .song-row.encore-song { background: rgba(78, 205, 196, 0.1); border: 1px solid #4ecdc4; } .song-num { background: linear-gradient(135deg, var(--ryoku-green), var(--ryoku-light)); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .encore-num { background: linear-gradient(135deg, #4ecdc4, #9c88ff) !important; } .song-info { flex: 1; } .song-name { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .song-desc { font-size: 0.8rem; color: #a0a0a0; font-style: italic; } .encore-set { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid #4ecdc4; } .setlist-note-mobile { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 1rem; background: rgba(255, 193, 7, 0.1); border-radius: 10px; border: 1px solid var(--ryoku-yellow); } .note-icon { font-size: 1.5rem; } .note-title { font-size: 1rem; font-weight: 600; color: var(--ryoku-yellow); margin-bottom: 0.25rem; } .note-desc { font-size: 0.875rem; color: #ffffff; } /* 티켓 정보 */ .ticket-section { background: rgba(20, 20, 20, 0.9); border-radius: 12px; padding: 1rem; border: 2px solid rgba(124, 179, 66, 0.3); } .booking-card-main { background: rgba(124, 179, 66, 0.1); border: 2px solid var(--ryoku-green); border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } .booking-badge { background: var(--ryoku-green); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; } .booking-title { font-size: 1rem; color: #ffffff; font-weight: 600; margin-bottom: 0.5rem; } .booking-datetime { font-size: 1.25rem; color: var(--ryoku-green); font-weight: 700; } /* 좌석 카드 */ .seat-cards { display: grid; gap: 1rem; margin: 1rem 0; } .seat-card { background: rgba(40, 40, 40, 0.9); border-radius: 10px; padding: 1rem; border: 2px solid transparent; } .seat-card.standing { border-color: var(--ryoku-green); background: rgba(124, 179, 66, 0.1); } .seat-card.seated { border-color: var(--ryoku-yellow); background: rgba(255, 193, 7, 0.1); } .seat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .seat-icon { font-size: 1.5rem; } .seat-name { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .seat-location { font-size: 0.875rem; color: #a0a0a0; } .seat-price { font-size: 1.25rem; font-weight: 700; color: var(--ryoku-green); } .seat-desc { color: #ffffff; font-size: 0.9rem; } /* 예매처 */ .platform-list { display: grid; gap: 0.75rem; margin: 1rem 0; } .platform-card { background: rgba(40, 40, 40, 0.9); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .platform-card.available { border-color: var(--ryoku-green); background: rgba(124, 179, 66, 0.1); } .platform-card.available:hover { background: rgba(124, 179, 66, 0.2); transform: translateY(-2px); } .platform-card.unavailable { opacity: 0.6; background: rgba(60, 60, 60, 0.5); } .platform-info { display: flex; align-items: center; justify-content: space-between; } .platform-icon { font-size: 1.25rem; margin-right: 0.75rem; } .platform-name { font-size: 1rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .platform-note { font-size: 0.875rem; color: #a0a0a0; } .platform-status.ok { background: var(--ryoku-green); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .platform-status.no { color: #999; font-size: 0.875rem; } /* 티켓 주의사항 */ .ticket-warnings { margin-top: 1rem; } .warning-list { display: grid; gap: 0.75rem; } .warning-item { display: flex; gap: 0.75rem; padding: 0.75rem; background: rgba(40, 40, 40, 0.8); border-radius: 8px; align-items: center; } .warning-item.critical { border: 2px solid #ff6b6b; background: rgba(255, 107, 107, 0.1); } .warning-icon { font-size: 1.25rem; } .warning-text { color: #ffffff; font-size: 0.9rem; } /* 좌석 안내 */ .seating-image-area { text-align: center; margin-bottom: 1.5rem; } .seating-image { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(124, 179, 66, 0.3); } .seating-caption { font-size: 0.875rem; color: #a0a0a0; margin-top: 0.5rem; } .seating-overview { background: rgba(124, 179, 66, 0.1); border: 2px solid var(--ryoku-green); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; text-align: center; } .seating-overview p { color: #ffffff; font-size: 1rem; font-weight: 600; } .seating-details { display: grid; gap: 1rem; } .seating-detail-card { background: rgba(40, 40, 40, 0.8); border-radius: 8px; padding: 1rem; } .seating-detail-card.standing { border-left: 4px solid var(--ryoku-green); } .seating-detail-card.seated { border-left: 4px solid var(--ryoku-yellow); } .detail-title { color: var(--ryoku-green); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .detail-features { list-style: none; padding: 0; display: grid; gap: 0.5rem; } .detail-features li { color: #ffffff; font-size: 0.875rem; padding: 0.25rem 0; position: relative; padding-left: 1rem; } .detail-features li::before { content: '•'; position: absolute; left: 0; color: var(--ryoku-green); font-weight: bold; } .seating-warnings { margin-top: 1rem; background: rgba(255, 165, 0, 0.1); border: 1px solid #ffa500; border-radius: 8px; padding: 1rem; } .warnings-title { color: #ffa500; font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; } .warning-items { display: grid; gap: 0.5rem; } .w-icon { font-size: 1rem; } .w-text { color: #ffffff; font-size: 0.875rem; } /* 입장 안내 */ .entrance-requirements { margin-bottom: 1.5rem; } .requirements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1rem 0; } .requirement-item { background: rgba(40, 40, 40, 0.9); padding: 1rem; border-radius: 8px; text-align: center; border: 1px solid var(--ryoku-green); } .req-icon { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; } .req-content h4 { font-size: 0.9rem; color: var(--ryoku-green); font-weight: 600; margin-bottom: 0.25rem; } .req-content p { font-size: 0.8rem; color: #a0a0a0; } .requirements-alert { display: flex; gap: 0.75rem; padding: 1rem; background: rgba(255, 107, 107, 0.1); border: 2px solid #ff6b6b; border-radius: 8px; margin-top: 1rem; } .alert-icon { font-size: 1.25rem; flex-shrink: 0; } .alert-text { color: #ffffff; font-size: 0.9rem; line-height: 1.4; } /* 입장 절차 */ .entrance-procedures { margin-top: 1rem; } .entrance-type { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; } .entrance-type.standing { border: 2px solid var(--ryoku-green); } .entrance-type.seated { border: 2px solid var(--ryoku-yellow); } .entrance-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .entrance-icon { font-size: 1.5rem; } .entrance-title { color: #ffffff; font-size: 1rem; font-weight: 600; } .entrance-timeline { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .timeline-step { display: flex; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: 6px; } .timeline-step.critical { background: rgba(124, 179, 66, 0.1); border: 1px solid var(--ryoku-green); } .timeline-step.warning { background: rgba(255, 107, 107, 0.1); border: 1px solid #ff6b6b; } .step-time { background: var(--ryoku-green); color: white; padding: 0.5rem; border-radius: 8px; font-weight: 600; font-size: 0.875rem; min-width: 80px; text-align: center; } .step-action { font-size: 0.95rem; font-weight: 600; color: #ffffff; margin-bottom: 0.25rem; } .step-desc { font-size: 0.85rem; color: #a0a0a0; } .entrance-note { display: flex; gap: 0.5rem; padding: 0.75rem; background: rgba(255, 193, 7, 0.1); border-radius: 6px; align-items: flex-start; } .note-icon { font-size: 1rem; flex-shrink: 0; } .note-text { color: #ffffff; font-size: 0.875rem; line-height: 1.4; } .entrance-simple { background: rgba(255, 255, 255, 0.02); border-radius: 6px; padding: 0.75rem; } .simple-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .simple-time { background: var(--ryoku-yellow); color: #000; padding: 0.25rem 0.75rem; border-radius: 12px; font-weight: 600; font-size: 0.8rem; } .simple-desc { color: #ffffff; font-size: 0.9rem; } .simple-note { color: #a0a0a0; font-size: 0.85rem; text-align: center; font-style: italic; } /* 교통편 탭 */ .venue-info { margin-bottom: 1rem; } .venue-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(124, 179, 66, 0.1); border: 2px solid var(--ryoku-green); border-radius: 10px; } .venue-icon { font-size: 1.5rem; } .venue-name { font-size: 1.25rem; font-weight: 700; color: var(--ryoku-green); margin-bottom: 0.25rem; } .venue-address { color: #ffffff; font-size: 0.95rem; } .transport-tabs { display: flex; background: rgba(20, 20, 20, 0.9); border-radius: 8px; padding: 0.25rem; margin-bottom: 1rem; } .transport-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; color: #a0a0a0; } .transport-tab.active { background: linear-gradient(135deg, var(--ryoku-green), var(--ryoku-light)); color: white; } .tab-icon { font-size: 1.25rem; } .tab-text { font-size: 0.8rem; font-weight: 600; } .transport-content { min-height: 200px; } .transport-panel { display: none; } .transport-panel.active { display: block; } /* 지하철 가이드 */ .subway-guide { background: rgba(30, 30, 30, 0.8); border-radius: 10px; padding: 1rem; } .route-info { display: flex; align-items: center; justify-content: space-between; } .subway-line { padding: 0.5rem 1rem; border-radius: 15px; font-weight: 700; color: white; font-size: 0.9rem; } .subway-line.line5 { background: #996CAC; /* 5호선 보라색 */ } .station-name { font-size: 1.25rem; font-weight: 700; color: var(--ryoku-green); margin-bottom: 0.25rem; } .exit-info { font-size: 0.9rem; color: #ffffff; } .walk-info { text-align: center; } .walk-time { font-size: 2rem; font-weight: 800; color: var(--ryoku-yellow); display: block; line-height: 1; } .walk-text { font-size: 0.875rem; color: #a0a0a0; } .route-badge { position: absolute; top: -8px; right: 1rem; background: var(--ryoku-yellow); color: #000; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .walking-directions { background: rgba(255, 255, 255, 0.02); border-radius: 8px; padding: 1rem; } .directions-title { color: var(--ryoku-yellow); font-size: 1rem; margin-bottom: 0.75rem; font-weight: 600; text-align: center; } .direction-steps { display: grid; gap: 0.5rem; } .direction-step { display: flex; gap: 0.75rem; padding: 0.5rem; background: rgba(124, 179, 66, 0.1); border-radius: 6px; align-items: center; } .step-num { background: var(--ryoku-green); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; flex-shrink: 0; } .step-desc { color: #ffffff; font-size: 0.9rem; } /* 나머지 CSS는 여기부터 계속됩니다... */ /* JavaScript 코드 */ </style> <script> // 전역 변수 let navMenu, scrollToTopBtn, scrollProgress; // 네비게이션 토글 function toggleNav() { if (navMenu) { navMenu.classList.toggle('active'); } } // 섹션으로 스크롤 function scrollToSection(targetId) { const element = document.getElementById(targetId); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); // 네비게이션 메뉴 닫기 if (navMenu) { navMenu.classList.remove('active'); } // 활성 네비게이션 업데이트 updateActiveNav(targetId); } } // TOP 버튼 클릭 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); updateActiveNav('top'); } // 활성 네비게이션 업데이트 function updateActiveNav(activeId) { const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.classList.remove('active'); const target = item.getAttribute('data-target'); if (target === activeId) { item.classList.add('active'); } }); } // 교통편 탭 초기화 function initTransportTabs() { const tabs = document.querySelectorAll('.transport-tab'); const panels = document.querySelectorAll('.transport-panel'); tabs.forEach(tab => { tab.addEventListener('click', function() { const targetTab = this.dataset.tab; // 모든 탭 비활성화 tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); // 선택된 탭 활성화 this.classList.add('active'); const targetPanel = document.querySelector(`[data-panel="${targetTab}"]`); if (targetPanel) { targetPanel.classList.add('active'); } }); }); } // 스크롤 이벤트 핸들러 function handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; // 스크롤 진행바 업데이트 if (scrollProgress) { scrollProgress.style.width = scrollPercent + '%'; } // TOP 버튼 표시/숨김 if (scrollToTopBtn) { if (scrollTop > 300) { scrollToTopBtn.classList.add('visible'); } else { scrollToTopBtn.classList.remove('visible'); } } // 현재 섹션 감지 const sections = ['info', 'artist', 'setlist', 'ticket', 'seating', 'entrance', 'location', 'rules', 'storage', 'recommendation', 'contact']; let currentSection = 'top'; for (const sectionId of sections) { const section = document.getElementById(sectionId); if (section && scrollTop + 200 >= section.offsetTop) { currentSection = sectionId; } } updateActiveNav(currentSection); } // 이벤트 리스너 등록 function setupEventListeners() { // 네비게이션 토글 const navToggle = document.getElementById('navToggle'); if (navToggle) { navToggle.addEventListener('click', toggleNav); } // 네비게이션 닫기 버튼 const navClose = document.getElementById('navClose'); if (navClose) { navClose.addEventListener('click', toggleNav); } // 네비게이션 아이템 const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('data-target'); if (targetId) { scrollToSection(targetId); } }); }); // TOP 버튼 if (scrollToTopBtn) { scrollToTopBtn.addEventListener('click', scrollToTop); } // 외부 클릭 시 네비게이션 닫기 document.addEventListener('click', function(e) { const floatingNav = document.querySelector('.floating-nav'); if (floatingNav && !floatingNav.contains(e.target) && navMenu) { navMenu.classList.remove('active'); } }); // 스크롤 이벤트 window.addEventListener('scroll', handleScroll, { passive: true }); } // 초기화 function init() { // DOM 요소 참조 navMenu = document.getElementById('navMenu'); scrollToTopBtn = document.getElementById('scrollToTop'); scrollProgress = document.getElementById('scrollProgress'); // 이벤트 리스너 설정 setupEventListeners(); // 교통편 탭 초기화 initTransportTabs(); // 초기 스크롤 상태 설정 handleScroll(); console.log(' 녹황색사회 콘서트 페이지가 성공적으로 로드되었습니다!'); console.log(' YES24 LIVE HALL - 광나루역 2번 출구 도보 3분'); console.log(' YES24 티켓에서만 예매 가능합니다'); } // DOM이 로드되면 초기화 실행 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // 에러 핸들링 window.addEventListener('error', function(e) { console.error('페이지 로딩 중 오류 발생:', e.message); }); </script> 2025/10월 ryokuoushoku shakai ryokuoushoku shakai Asia Tour 2025 녹황색사회 # 녹황색사회 아시아 투어 2025 예스24 jsy-spring https://jsy-spring.tistory.com/4 https://jsy-spring.tistory.com/4#entry4comment Wed, 24 Sep 2025 10:21:09 +0900