:root{
  --navy:#0a0e1e;
  --navy-2:#0f1b33;
  --navy-3:#0b1328;
  --gold:#D2B440;
  --gold-soft:#E8CD76;
  --text:#F1EDE3;
  --muted:#A8AFBE;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--navy);
  color:var(--text);
  font-family:"Plus Jakarta Sans","Inter","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7; letter-spacing:0.1px;
}
.container{width:min(1140px,92%);margin:0 auto}

/* SPLASH */
.splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 520px at 50% 30%, rgba(210,180,64,.18), transparent),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  cursor:pointer; user-select:none;
  transition: opacity .6s ease, visibility .6s ease;
}
.splash.hidden{opacity:0; visibility:hidden}
.splash h1{
  font-family:"Cinzel","Plus Jakarta Sans","Noto Sans KR",serif;
  font-size:88px; letter-spacing:2.6px; margin:0;
  color:var(--gold);
  text-shadow: 0 0 18px rgba(210,180,64,.40), 0 0 44px rgba(210,180,64,.22);
  animation: flashGlow 2200ms ease-in-out infinite;
}
.splash .sub{margin-top:10px; font-size:16px; color:#F6EDCD; text-align:center; opacity:.9}
.splash .tap{margin-top:16px; font-size:13px; color:var(--muted); border:1px dashed rgba(232,205,118,.45);
             padding:8px 12px; border-radius:10px; display:inline-block}
@keyframes flashGlow{
  0% { text-shadow: 0 0 10px rgba(210,180,64,.35), 0 0 20px rgba(210,180,64,.12); transform: scale(1.00); }
  50% { text-shadow: 0 0 24px rgba(210,180,64,.6),  0 0 60px rgba(210,180,64,.24); transform: scale(1.01); }
  100%{ text-shadow: 0 0 10px rgba(210,180,64,.35), 0 0 20px rgba(210,180,64,.12); transform: scale(1.00); }
}

/* HEADER */
.site-header{position:sticky;top:0;z-index:10;background:rgba(10,14,30,.78);backdrop-filter:blur(8px);
             border-bottom:1px solid rgba(210,180,64,.18);display:none}
.site-header.show{display:block}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold);text-decoration:none;font-weight:700}
.logo{height:44px;width:auto;border-radius:6px;vertical-align:middle}
.nav .nav-link{color:var(--gold);text-decoration:none;margin-left:18px;font-weight:700;opacity:.9}
.nav .nav-link:hover{opacity:1;text-decoration:underline}

/* HERO */
.hero{
  min-height: 54vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: radial-gradient(1200px 520px at 60% -10%, rgba(210,180,64,0.14), transparent),
              linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 100%);
  padding: 76px 0;
}
.hero h1{margin:0 0 12px;font-size:58px;letter-spacing:1.6px;font-family:"Cinzel","Plus Jakarta Sans","Noto Sans KR",serif;color:var(--gold)}
.hero .lead{font-size:18px;color:#F6EDCD;margin:0 0 24px}

/* MENU GRID */
.menu{padding:36px 0 60px}
.grid5{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:18px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(210,180,64,.18);
  border-radius:16px;
  padding:22px;
  text-align:center;
  transition:.2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); border-color: rgba(210,180,64,.28); box-shadow:0 8px 24px rgba(0,0,0,.25)}
.card h3{margin:6px 0 8px; font-family:"Cinzel","Plus Jakarta Sans","Noto Sans KR",serif; color:var(--gold)}
.card p{margin:0; color:var(--muted)}
.card .btn{margin-top:12px}

.section{padding:60px 0}
.section.alt{background:rgba(255,255,255,.02)}
h2{margin:0 0 10px;color:var(--gold);font-family:"Cinzel","Plus Jakarta Sans","Noto Sans KR",serif;letter-spacing:1px}
.muted{color:var(--muted)}
.links{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--gold);color:var(--navy);font-weight:800;text-decoration:none;cursor:pointer;border:none}
.btn:hover{filter:brightness(1.04)}
.btn.outline{background:transparent;color:var(--gold);border:2px solid var(--gold)}
.btn.outline.disabled{opacity:.45;pointer-events:none}

.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}

.site-footer{border-top:1px solid rgba(210,180,64,.18);padding:22px 0;text-align:center;color:var(--muted)}

/* Modal */
dialog{border:none;border-radius:18px;padding:0;background:var(--navy-2);color:var(--text);width:min(700px,92%)}
.modal-card header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(210,180,64,.18)}
.modal-card section{padding:16px 18px}
.modal-card footer{padding:14px 18px;border-top:1px solid rgba(210,180,64,.18)}
.roadmap{margin:0; padding-left:18px}

.splash .brand{width:140px;height:auto;}

/* --- Studio brand buttons --- */
.btn-group{display:flex;gap:10px;flex-wrap:wrap}
.btn img.icon{width:18px;height:18px;margin-right:6px;vertical-align:middle}

/* YouTube brand */
.btn.youtube{background:#FF0000;border:1px solid #CC0000;color:#fff}
.btn.youtube:hover{background:#CC0000;border-color:#990000}

/* Twitch brand */
.btn.twitch{background:#9146FF;border:1px solid #772CE8;color:#fff}
.btn.twitch:hover{background:#772CE8;border-color:#5a1dbd}

/* --- 공통 안정화 --- */
* { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; display: block; }
.container { width: min(1100px, 100%); margin: 0 auto; padding: 0 16px; }

/* 헤더 정렬 & 줄바꿈 허용 */
.site-header .container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { display:flex; align-items:center; gap:8px; min-width:0; }
.brand .logo { width: 28px; height: 28px; object-fit: contain; }

/* 네비게이션과 언어 스위치 */
.nav { display:flex; gap: 12px; flex-wrap: wrap; }
.lang-switch { margin-left: auto; display:flex; gap:6px; align-items:center; }
.lang-btn {
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  font:600 12px/1 "Plus Jakarta Sans","Noto Sans KR",system-ui,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji";
}
.lang-btn[aria-pressed="true"]{ background:#fff; color:#111; }
.lang-btn .e { font-size:16px; line-height:1; transform: translateY(1px); } /* 이모지 깔끔 보정 */

/* 히어로 타이포/여백을 뷰포트에 맞춰 자동 조절 */
.hero { padding: clamp(48px, 12vw, 120px) 0; }
.hero h1 { font-family:"Cinzel",serif; font-weight:700; font-size: clamp(28px, 6vw, 56px); }
.hero .lead { font-size: clamp(14px, 2.8vw, 20px); }

/* 카드 그리드(데스크탑 5 → 태블릿 2~3 → 모바일 1) */
.grid5 { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:16px; }
@media (max-width: 1200px){ .grid5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid5 { grid-template-columns: 1fr; } }

.card { padding: 20px; border-radius: 16px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); }

/* 버튼이 너무 작게 보일 때 대비 */
.btn { padding: 10px 14px; border-radius: 10px; }

/* 섹션 제목/본문 크기 자동 조절 */
.section h2 { font-size: clamp(20px, 4.8vw, 28px); }
.section .muted { font-size: clamp(13px, 3.4vw, 16px); }

/* 푸터 글자 줄바꿈 개선 */
.site-footer .biz-info { word-break: keep-all; }

/* --- 모바일 전용 추가 미세조정 --- */
@media (max-width: 720px){
  /* 네비가 길면 한 줄에 다 넣지 말고 자동 줄바꿈 */
  .nav { order: 3; width: 100%; }
  .lang-switch { order: 2; margin-left: 0; }
  .brand { order: 1; }

  /* 언어 버튼: 텍스트 숨기고 국기만 노출(공간 확보) */
  .lang-text { display:none; }
  .lang-btn { padding: 6px 8px; }
  .lang-btn .e { font-size:18px; transform:none; }

  /* 카드 안 버튼 가독성 */
  .btn-group .btn { width: 100%; justify-content: center; }
}

/* 스플래시가 내용 가리는 문제 예방(닫힐 때 완전 숨김) */
.splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(85% 85% at 50% 50%, #0b1020, #05070e 70%, #02040a); color:#fff; cursor:pointer;
  transition: opacity .3s ease, visibility .3s ease;
}
.splash.off { opacity: 0; visibility: hidden; pointer-events: none; }