@charset "UTF-8";

/* =======================
   Font (Pretendard)
======================= */
@font-face{font-family:'Pretendard';src:url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pretendard';src:url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Pretendard';src:url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Pretendard';src:url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}

/* =======================
   Reset & Base
======================= */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:10px}
img{display:block;max-width:100%;height:auto}
li{list-style:none}
a{text-decoration:none;color:inherit}
body{
  font-family:'Pretendard',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans KR',sans-serif;
  color:#0f172a;background:#fff;line-height:1.6;
}
.centerbox{max-width:1200px;margin:0 auto;padding:0 20px}
.pc{display:block}
.mo{display:none}


:root{
  --ink:#0f172a;
  --muted:#64748b;
  --accent:#2563eb;
  --accent-soft:#eef6ff;

  --event-bg:#c8f3ff;
  --card:#fff;
  --radius:20px;

  --grad-a:#dff2ff;
  --grad-b:#9dd0ff;
}

/* Header */
.site-header{
  height:80px;border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:50;
}
.site-header .centerbox{
  height:80px;display:flex;align-items:center;justify-content:space-between;position:relative;
}

/* 로고: 데스크탑 기본 */
.logo img{height:50px}

/* PC 네비 */
.pc-gnb .gnb{display:flex;gap:24px}
.pc-gnb .gnb a{font-size:1.8rem;font-weight:700;color:var(--ink)}
.icons{display:flex;gap:16px;font-size:1.6rem;color:var(--ink)}

/* 햄버거 (모바일 전용) */
.hamburger{display:none;position:absolute;left:20px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:1px solid #0f172a22;border-radius:8px;cursor:pointer}
.hamburger span,
.hamburger span::before,
.hamburger span::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:2px;background:#0f172a;
}
.hamburger span::before{top:-7px}
.hamburger span::after{top:7px}

/* 모바일 드로어 */
.mo-drawer{display:none}
#nav-toggle:checked ~ .site-header .mo-drawer{display:block}

.mo-drawer .drawer-dim{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:19;
}
.mo-drawer .drawer-panel{
  position:fixed;left:0;top:0;height:100vh;width:78%;max-width:360px;background:#fff;
  z-index:20;display:flex;flex-direction:column;
  box-shadow:8px 0 24px rgba(0,0,0,.12);
  transform:translateX(-100%);transition:transform .3s ease;
}
#nav-toggle:checked ~ .site-header .mo-drawer .drawer-panel{transform:translateX(0)}

.drawer-head{
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid #e5e7eb;font-weight:800;
}
.drawer-head .btn-close{cursor:pointer;font-size:2rem;line-height:1}

.drawer-nav{padding:12px 16px}
.drawer-nav .gnb{display:flex;flex-direction:column}
.drawer-nav .gnb li + li{border-top:1px solid #f1f5f9}
.drawer-nav .gnb a{display:block;padding:16px 6px;font-size:1.8rem;font-weight:700}

.drawer-icons{
  margin-top:auto;padding:16px;border-top:1px solid #e5e7eb;display:grid;grid-template-columns:repeat(3,1fr);gap:8px
}
.drawer-icons a{
  display:flex;align-items:center;justify-content:center;height:44px;border:1px solid #e5e7eb;border-radius:10px;
  font-size:1.5rem;font-weight:700;background:#fff;
}


/* Hero */
.hero{
  background:url("../images/popup.png") center/cover no-repeat;
  min-height:460px;display:flex;align-items:center;padding:60px 0;
}
.hero .hero-text{max-width:700px}
.hero .season{
  display:inline-block;background:#e6f0ff;color:#007bff;font-weight:800;
  padding:6px 14px;border-radius:999px;font-size:1.8rem;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}

/* 목적지는 놀이동산 (타이포) */
.namebox{display:flex;gap:6px;margin:16px 0 6px;line-height:1}
.namebox > div{
  font-family:'Pretendard',sans-serif;font-weight:900;letter-spacing:-0.02em
}
.name1{font-size:7.2rem;color:#2c9bbd}
.name2{font-size:6.4rem;color:#2c9bbd}
.name3{font-size:5.6rem;color:#2c9bbd}
.name4{font-size:4.8rem;color:#fff}
.name5{font-size:4.8rem;color:#FFDD00}
.name6{font-size:5.6rem;color:#FFDD00}
.name7{font-size:6.4rem;color:#FFDD00}
.name8{font-size:7.2rem;color:#FFDD00}

.subtitle{
  display:inline-block;margin-top:10px;background:#007bff;color:#fff;
  padding:8px 14px;border-radius:999px;font-weight:800;font-size:2rem;
}
.date{margin-top:8px;color:#ac7000;font-weight:800;font-size:2rem;margin-left: 10px;}

/* 등장 애니메이션 */
.namebox > div{opacity:0;animation:fadeUp .5s ease-out forwards}
.name1{animation-delay:.1s}.name2{animation-delay:.2s}.name3{animation-delay:.3s}.name4{animation-delay:.4s}
.name5{animation-delay:.5s}.name6{animation-delay:.6s}.name7{animation-delay:.7s}.name8{animation-delay:.8s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Event section */
.event-section{
  position:relative;background:var(--event-bg) url("../images/bg1.png") center/1915px repeat;
  padding:72px 0 56px;margin-top:200px;overflow:hidden;height: 610px;
}
.event-head{text-align:center;margin-bottom:20px}
.event-head .eyebrow{
  display:inline-block;font-weight:800;padding:6px 12px;border-radius:999px;
  background:#ffffffb0;font-size:1.6rem;
}
.event-head h2{margin:10px 0 6px;font-size:2.2rem;font-weight:900}
.event-head .date{color:var(--muted);font-size:1.6rem}
.event-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px;
}
.card{
  background:var(--card);border-radius:var(--radius);padding:14px 14px 16px;
  box-shadow:0 10px 20px rgba(15,23,42,.08);transition:transform .2s, box-shadow .2s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 28px rgba(15,23,42,.12)}
.card .thumb{aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.card .label{margin-top:12px;font-size:1.8rem;font-weight:800;text-align:center}
.event-footer{display:flex;justify-content:flex-end;margin-top:18px}
.more{
  display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;
  background:#ffffffb0;font-weight:800;color:#0ea5b6;font-size:1.4rem;
}


/* Status */
.status-head{text-align:center;margin:200px 0 16px}
.status-head h2{font-size:2.2rem;font-weight:900}
.status-head .sub{color:var(--muted);font-size:1.6rem}

.status-card{
  position:relative;max-width:980px;margin:0 auto;border-radius:26px;
  background:linear-gradient(160deg,var(--grad-a),var(--grad-b));
  padding:24px;box-shadow:0 14px 28px rgba(15,23,42,.08);overflow:hidden;
}
.status-card .deco{
  position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:#ffffff88;
  box-shadow:8px 8px 0 #ffffff55 inset;transform:translateY(-50%);
}
.deco--left{left:14px;transform:translateY(-50%) rotate(-15deg)}
.deco--right{right:14px;transform:translateY(-50%) rotate(15deg)}

.status-body{display:flex;align-items:center;gap:24px}
.status .info{flex:1 1 auto}
.info .row{margin:0 0 8px;font-size:1.8rem}
.info .row strong{font-weight:900}
.notes{margin-top:10px;font-size:1.5rem}
.notes li + li{margin-top:6px}

.media{
  flex:0 0 360px;margin:0;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 8px 16px rgba(15,23,42,.12)
}
.media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.status-card .badge{
  position:absolute;bottom:10px;font-size:1.2rem;font-weight:900;color:#fff;background:#2b60d6;
  padding:6px 10px;border-radius:14px
}
.badge--left{left:10px}
.badge--right{right:10px;background:#111827}

 /* Guide */
.section-title{
  margin:200px 0 16px;text-align:center;font-size:2.2rem;font-weight:900;border-bottom:1px solid #e5e7eb;padding-bottom:12px
}
.tab-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.tab{
  height:40px;padding:0 16px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;
  font-weight:800;cursor:pointer;font-size:1.6rem;
}
.tab.is-active{background:var(--accent-soft);border-color:#bfdbfe;color:var(--accent)}

.lead{text-align:center;margin:8px 0 10px}
.lead .headline{margin:0;font-weight:900;color:#0ea5b6;font-size:2rem}
.lead .sub{margin:4px 0 0;color:#0ea5b6;font-weight:900;font-size:2rem}

.map-figure{margin:14px auto 0;max-width:820px;filter:drop-shadow(0 12px 18px rgba(15,23,42,.08))}
.map-figure img{width:100%}

.cta{display:flex;justify-content:center;margin:18px 0 36px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;font-weight:900;
  color:#fff;background:#2563eb;border-radius:999px;box-shadow:0 6px 12px rgba(59,130,246,.25);
  font-size:1.6rem
}
.btn.ghost{background:transparent;color:#2563eb;border:1px solid #bfdbfe;box-shadow:none}


.wayto{background:var(--event-bg);padding:26px 0 40px;border-top:1px solid #f1f5f9}
.address-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px
}
.place{display:flex;align-items:center;gap:10px}
.place .pin{width:22px;height:22px}
.place-name{font-size:1.8rem;font-weight:900}
.place-addr{color:var(--muted);font-size:1.4rem}

.grid{
  display:grid;gap:14px;grid-template-columns:repeat(3,1fr)
}
.grid .card{
  background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 20px rgba(15,23,42,.06);min-height:120px
}
.card-title{margin:0 0 12px;font-size:1.8rem;font-weight:900}
.link{color:#2563eb;font-weight:800}

.metro .station,.bus .nember{font-size:1.5rem}
.wayto .badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:22px;padding:0 8px;
  border-radius:999px;color:#fff;font-size:1.4rem;font-weight:900;margin-right:6px
}
.line2{background:#3cb44a;margin-bottom:10px}
.line8{background:#e85d9a;margin-bottom:10px}
.bus-blue{background:#2563eb;margin-bottom:10px}
.bus-green{background:#16a34a;margin-bottom:10px}
.bus-red{background:#ef4444;margin-bottom:10px}
.bus-air{background:#0ea5b6;margin-bottom:10px}

/* footer */
.site-footer{padding:24px 0 36px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:10px}
.foot-links a{color:#475569;font-size:1.4rem}
.foot-links a.emph{color:#111827;font-weight:900}
.copy{text-align:center;color:#94a3b8;font-size:1.2rem}

/* Responsive */

/* <= 1200px : 넓은 태블릿 */
@media (max-width:1200px){
  .event-grid{grid-template-columns:repeat(2,1fr)}
}

/* <= 990px : 모바일 전환 (Luminote 패턴 그대로) */
@media (max-width:990px){
  .pc{display:none}
  .mo{display:block}

  .site-header{height:60px}
  .site-header .centerbox{height:60px}

  /* 로고 중앙 고정 */
  .logo{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    z-index:2;
  }
  .logo img{height:36px}

  .hamburger{display:block}

  .hero{padding:44px 0;min-height:360px;text-align:center}
  .name1{font-size:5.6rem}.name2{font-size:5rem}.name3{font-size:4.4rem}.name4{font-size:4rem}
  .name5{font-size:4rem}.name6{font-size:4.4rem}.name7{font-size:5rem}.name8{font-size:5.6rem}

  .event-grid{grid-template-columns:1fr}
  .status-body{flex-direction:column}
  .media{width:100%;flex:0 1 auto}
  .section-title{margin-top:80px}
  .grid{grid-template-columns:1fr}
  .btn{width:100%}
}

/* <= 560px : 소형 모바일 */
@media (max-width:560px){
  .centerbox{padding:0 16px}
  .event-section{padding:56px 0 40px}
  .status-card{padding:20px}
  .tab{font-size:1.5rem;height:38px}
  .subtitle,.date{font-size:1.8rem}
}




/*sub*/
/* 기본 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Malgun Gothic', sans-serif;
}

/* Header */
.header {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1000;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    width: 80px;
    height: 50px;
}

.logo-castle {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    border-radius: 50% 50% 0 50%;
    position: relative;
}

.logo-castle::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #ff6b6b;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s;
}

.nav-menu li a:hover {
    color: #00a8e6;
}

.header-icons {
    display: flex;
    gap: 15px;
}

.header-icon {
    width: 24px;
    height: 24px;
    background: #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.header-icon:hover {
    background: #00a8e6;
}

/* Hero Section */
.hero-section {
    height: 600px;
    background: url('../images/sub_img.png');
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero-content h1 {
    font-size: 48px;
    color: #4e4d4d;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 18px;
    color:  #000;
    margin-bottom: 40px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Booking Form */
.booking-section {
    background: linear-gradient(135deg, #00a8e6, #1DBBD9);
    padding: 40px 0;
    position: relative;
    margin-top: -100px;
    z-index: 100;
}

.booking-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.booking-form {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.form-title {
    color: white;
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: 500;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    background: white;
    color: #333;
    outline: none;
    transition: all 0.3s;
}

.form-group input:focus, .form-group select:focus {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.search-btn {
    background: white;
    color: #00a8e6;
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}

.search-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.help-icon {
    display: inline-block;
    margin-left: 10px;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    
    .hero-content h1 {
        font-size: 32px;
    }
    
    .form-row {
        flex-direction: column;
        align-items: center;
    }
    
    .form-group {
        width: 100%;
        max-width: 300px;
    }
}

/* 섹션2 - 놀이기구 소개 스타일 */

.attractions-section {
    padding: 40px 0;
    background-color: #f8f9fa;
}

.attractions-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 상단 안내 바 */
.info-banner {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mascot-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.info-text {
    color: #333;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.info-text strong {
    color: #1976d2;
    font-weight: 600;
}

/* 놀이기구 그리드 */
.attractions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.attraction-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.attraction-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.attraction-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.attraction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.attraction-card:hover .attraction-image img {
    transform: scale(1.05);
}

.attraction-info {
    padding: 16px;
}

.attraction-category {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.attraction-category:contains("매직아일랜드") {
    background: #fff3e0;
    color: #f57c00;
}

.attraction-category:contains("특별체험존") {
    background: #f3e5f5;
    color: #7b1fa2;
}

.attraction-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.3;
}

/* 카테고리별 색상 */
.attraction-card:nth-child(4n+1) .attraction-category {
    background: #e8f5e8;
    color: #2e7d32;
}

.attraction-card:nth-child(4n+2) .attraction-category {
    background: #fff3e0;
    color: #f57c00;
}

.attraction-card:nth-child(4n+3) .attraction-category {
    background: #fce4ec;
    color: #c2185b;
}

.attraction-card:nth-child(4n+4) .attraction-category {
    background: #e3f2fd;
    color: #1976d2;
}

/* 로딩 애니메이션 */
.attraction-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.attraction-card:nth-child(1) { animation-delay: 0.1s; }
.attraction-card:nth-child(2) { animation-delay: 0.2s; }
.attraction-card:nth-child(3) { animation-delay: 0.3s; }
.attraction-card:nth-child(4) { animation-delay: 0.4s; }
.attraction-card:nth-child(5) { animation-delay: 0.5s; }
.attraction-card:nth-child(6) { animation-delay: 0.6s; }
.attraction-card:nth-child(7) { animation-delay: 0.7s; }
.attraction-card:nth-child(8) { animation-delay: 0.8s; }
.attraction-card:nth-child(9) { animation-delay: 0.9s; }
.attraction-card:nth-child(10) { animation-delay: 1.0s; }
.attraction-card:nth-child(11) { animation-delay: 1.1s; }
.attraction-card:nth-child(12) { animation-delay: 1.2s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .attractions-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .attractions-section {
        padding: 20px 0;
    }
    
    .attractions-container {
        padding: 0 16px;
    }
    
    .attractions-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
    
    .info-banner {
        padding: 12px 16px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .info-text {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .attractions-grid {
        grid-template-columns: 1fr;
    }
    
    .attraction-card {
        max-width: 100%;
    }
}