/* =========================
   HOT6 THEME – CLEAN BUILD
   ========================= */

/* 1) 토큰 */
:root{
  --bg:#000;          /* 배경 */
  --panel:#0b0b0b;    /* 카드 */
  --line:#1f1f1f;     /* 경계선 */
  --text:#eaeaea;     /* 본문 */
  --muted:#a9a9a9;    /* 보조 */
  --red:#ff3b3b;      /* HOT6 레드 */
  --blue:#2d5fff;     /* 캔 블루 */
  --accent-2:#7fff8a; /* 추가 포인트 (선택) */
}
*{box-sizing:border-box}
html,body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR",Pretendard,Roboto,sans-serif;
  line-height:1.6;
}

/* 2) 레이아웃 유틸 */
.container{max-width:1200px;margin:0 auto;padding:10px 20px}
.wrap{max-width:1100px;margin:0 auto;padding:28px 20px 60px}

/* 3) 버튼 */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;
     font-weight:700;text-decoration:none;transition:.15s}
.btn-primary{background:var(--red);color:#fff}
.btn-ghost{border:1px solid #333;color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-accent{background:var(--accent-2);color:#063b12}
.btn:hover{filter:brightness(1.05)}

/* 4) 헤더/네비 (데스크톱 기본) */
.site-header{position:sticky;top:0;z-index:9999;background:#000;border-bottom:1px solid var(--line)}
.header-inner{
  max-width:1200px;margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:16px;min-height:56px;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800}
.logo,.logo-text{color:#fff}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:18px;padding:8px;cursor:pointer}

/* 5) 카드/그리드/배지/필 */
.grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}

.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.badge{background:#111;border:1px solid #222;border-radius:12px;padding:14px;text-align:center;font-weight:700}
.badge i{color:var(--red);margin-right:6px}

.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-block;padding:8px 14px;border-radius:9999px;background:#111;border:1px solid #222;color:#ddd}
.pill.hot{border-color:var(--red);color:#fff}

/* 6) 섹션/타이포 */
.section{padding:36px 0;border-top:1px solid var(--line)}
h1,h2,h3{color:#fff}
.muted{color:var(--muted)}
.accent{color:var(--red)}

/* 7) 탭형 상단바(선택) */
.top-tabs{
  display:flex;justify-content:center;gap:12px;padding:10px 12px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#000
}
.top-tabs .tab{padding:10px 18px;border:1px solid #222;border-radius:9999px;color:#ddd;text-decoration:none}
.top-tabs .tab:hover{border-color:#333;color:#fff}
.top-tabs .tab.active{background:var(--red);border-color:var(--red);color:#fff}


/* ===========================
   BRAND HERO + TOP TABS
   =========================== */
.brand-title{ font-size:clamp(64px, 6vw, 128px); }
.brand-hero{
  background:#000;
  padding:32px 0 18px;
  border-bottom:1px solid var(--line);
}
.brand-hero__row{
  max-width:1100px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:center; gap:28px;
}
.brand-hero__can{
  width: clamp(130px, 12vw, 180px);
  height:auto;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.55));
}
/* 글자 자체에 주고 싶으면 h1에 직접 적용 권장 */
.brand-hero__text h1{
  margin:0;
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  font-size: clamp(42px, 7vw, 96px); /* ← 화면 크기에 따라 42~96px로 유연하게 */
}
.brand-hero__text .brand{
  background: linear-gradient(90deg, #ff3b3b 0%, #ff7a00 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.brand-hero__text .service{ color:#fff; }
.brand-hero__text .tagline{
  margin-top:10px; color:var(--muted);
  font-size: clamp(16px, 1.8vw, 36px);
}

/* 상단 탭 메뉴 */
.top-tabs{
  max-width:1100px; margin:16px auto 0; padding:0 20px;
  display:flex; justify-content:center; gap:12px;
}
.top-tabs .tab{
  display:inline-block; padding:10px 18px;
  border:1px solid #222; border-radius:9999px;
  color:#ddd; text-decoration:none; font-weight:700;
  background:#0b0b0b;
  transition: .15s ease;
}
.top-tabs .tab:hover{ color:#fff; border-color:#333; }
.top-tabs .tab.active{ background:var(--red); border-color:var(--red); color:#fff; }

/* 모바일 스택 */
@media (max-width:768px){
  .brand-hero__row{ flex-direction:column; text-align:center; gap:14px; }
}

/* 공통: 중앙 좁은 컨테이너 */
.narrow-center{
  max-width: 820px;     /* 섹션 폭 */
  margin: 0 auto;       /* 가운데 정렬 */
  padding: 0 16px;      /* 모바일 여백 */
}

/* 제목만 가운데 */
.narrow-center > h2{
  text-align: center;
  margin-bottom: 16px;
}

/* 본문(FAQ/목록)은 가독성을 위해 왼쪽 정렬 유지 */
.narrow-center .faq,
.narrow-center .notice-list{
  text-align: left;
  margin: 10px auto;
}

/* FAQ 요약 스타일(선택) */
.narrow-center details summary{
  cursor: pointer;
  font-weight: 700;
  padding: 10px 0;
}

/* ▼ 공통 메뉴 */
.menu{list-style:none;margin:0;padding:0;display:flex;gap:20px;align-items:center}
.menu>li{position:relative}
.menu a{color:#ddd;text-decoration:none;padding:10px 6px;display:block;transition:color .15s}
.menu a:hover,.menu a.active{color:var(--red)}

/* ▼ 서브메뉴(데스크톱 기본) */
.submenu{
  display:none;                 /* 기본 숨김 */
  position:absolute; left:0; top:100%;
  background:#0b0b0b; border:1px solid var(--line); border-radius:12px;
  min-width:200px; box-shadow:0 8px 24px rgba(0,0,0,.35);
  padding:8px 0; margin:0; list-style:none;
  z-index:10001;                /* 클릭 보장 */
}
.submenu li{list-style:none;margin:0;padding:0}
.submenu a{display:block;padding:10px 14px;color:#ddd;white-space:nowrap;text-decoration:none}
.submenu a:hover{background:#111;color:#fff}

/* 데스크톱: hover 로 열기 */
.menu>li:hover>.submenu{display:block}

/* ▼ 모바일(≤1024px): 클릭으로 열기 */
@media (max-width:1024px){
  .nav-toggle{display:block;margin-left:auto}
  .menu{
    display:none; position:absolute; right:20px; top:60px;
    flex-direction:column; gap:10px; background:#000;
    border:1px solid var(--line); border-radius:12px; padding:12px;
    z-index:10000;
  }
  .menu.open{display:flex}
  .menu>li:hover>.submenu{display:none}     /* 모바일에서 hover 비활성 */

  .submenu{
    position:static; display:none;          /* JS가 .open 붙이면 보임 */
    border:none; box-shadow:none; background:#111; border-radius:8px;
    margin-left:6px;
  }
  .submenu.open{display:block}
}

/* --- Hard fix: ensure submenu opens on mobile --- */
@media (max-width:1024px){
  /* 혹시 다른 곳에서 display를 덮어써도 강제로 열리게 */
  .submenu { display: none !important; }
  .submenu.open { display: block !important; }

  /* 터치 디바이스에서 상단 메뉴가 다른 요소에 가려지는 현상 방지 */
  .menu { z-index: 10000; }
  .submenu { z-index: 10001; }
}
/* 헤더 드롭다운 기준점 */
.header-inner { position: relative; }

/* 모바일(≤1024px)에서 서브메뉴 토글 확실히 보이게 */
@media (max-width:1024px){
  .menu{ 
    position: absolute; right:20px; top:60px;
    z-index: 10000;  /* 다른 요소에 안 가리게 */
  }
  .submenu{ 
    position: static; display: none;
    background:#111; border:none; box-shadow:none; border-radius:8px; margin-left:6px;
  }
  .submenu.open{ display: block !important; } /* ← 핵심 */
}
/* 헤더 안 요소들이 위에 떠있도록 */
.header-inner { position: relative; }

/* 모바일(≤1024px): 드롭다운 확실히 보이게 */
@media (max-width:1024px){
  #global-menu{
    position: absolute; right:20px; top:60px;
    z-index: 10000; /* 다른 요소에 가리지 않게 */
  }
  .submenu{ 
    position: static; display: none;
    background:#111; border:none; box-shadow:none; border-radius:8px; margin-left:6px;
  }
  .submenu.open{ display:block !important; } /* ← 핵심 */
}

/* 최소 16px ~ 최대 18px 범위에서 반응형 스케일 */
body { font-size: clamp(18px, 1.1vw, 20px); }

.menu a { font-size: clamp(16px, 1.1vw, 17px); }
.btn    { font-size: clamp(15px, 1.1vw, 17px); }
.pill   { font-size: clamp(14px, 1vw, 16px); }

.brand-hero__text h1 { font-size: clamp(48px, 8vw, 112px); }
h2 { font-size: clamp(22px, 2.4vw, 30px); }
h3 { font-size: clamp(18px, 2vw, 24px); }

.notice-list li, #busan-why li, #busan-recommend li { margin: 6px 0; }
@media (max-width:1024px){
  #global-menu.menu { z-index: 10000; }
}