/* ══════════════════════════════════════════════════════════════════
   pip! 공통 컴포넌트 스타일 / pip! Shared component styles
   ──────────────────────────────────────────────────────────────────
   ⚠️ 본 파일은 모든 페이지가 공통으로 사용하는 헤더·네비·하단바 스타일의
   "단일 소스 오브 트루스(single source of truth)" 입니다.
   This file is the single source of truth for header / nav / bottom-bar
   styles shared across all pages.

   - .pip-nav         : 헤더 하단 7탭 네비 / 7-tab header nav
   - .pip-header-*    : 상단 헤더 컨테이너 / Top header container
   - .bottom-nav      : 모바일 하단 고정 액션바 / Fixed mobile bottom bar
   - .nb              : NEW 뱃지 / NEW badge

   ⚠️ 기존 인라인 <style>의 정의보다 우선순위가 낮으므로(외부 stylesheet),
   페이지별 추가 변형이 필요하면 페이지의 <style>에서 override 가능.
   Inline page <style> can override these defaults if needed.
   ══════════════════════════════════════════════════════════════════ */

/* ── .pip-header (상단 헤더 컨테이너 / Top header container) ── */
.pip-header{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(102,126,234,.3);
}
.pip-header-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 5px;
}
.pip-header-logo{
  display:flex;align-items:center;gap:6px;
  text-decoration:none;flex-shrink:0;
}
.pip-header-logo img{
  height:22px;width:auto;display:block;flex-shrink:0;
}
.pip-header-sub{
  color:rgba(196,181,253,.85);
  font-size:9px;font-weight:600;white-space:nowrap;
}
.pip-header-actions{
  display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.pip-header-btn{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:rgba(255,255,255,.18);
  color:white;font-size:12px;cursor:pointer;
  border:none;flex-shrink:0;text-decoration:none;
}
.pip-lang-btn{
  padding:5px 10px;background:rgba(255,255,255,.18);
  color:white;border-radius:8px;
  font-size:11px;font-weight:700;text-decoration:none;
}

/* ── .pip-nav (헤더 하단 7탭 네비 / Header bottom 7-tab nav) ── */
.pip-nav{
  display:flex;
  border-top:1px solid rgba(255,255,255,.15);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  font-size:9px;
}
.pip-nav::-webkit-scrollbar{display:none}
.pip-nav a{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
  padding:5px 1px;
  font-weight:600;
  color:rgba(196,181,253,.9);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:all .15s;
  position:relative;
}
.pip-nav a.active{
  color:white;
  border-bottom-color:white;
}
.pip-nav a:hover{color:white}
.pip-nav a i{font-size:12px}
.pip-nav .nb{
  position:absolute;top:4px;right:4px;
  background:#ef4444;color:white;
  font-size:6px;font-weight:900;
  padding:1px 3px;border-radius:3px;
  line-height:1.2;white-space:nowrap;
  border:1px solid white;
}

/* ── .nb (NEW 뱃지 일반형 / Generic NEW badge) ── */
.nb{
  display:inline-block;
  background:#ef4444;color:white;
  font-size:6px;font-weight:900;
  padding:1px 3px;border-radius:3px;
  line-height:1.2;white-space:nowrap;
  border:1px solid white;
}

/* ── .bottom-nav (모바일 하단 고정 액션바 / Fixed mobile bottom bar) ── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:white;
  border-top:1px solid #f0e6ff;
  z-index:100;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(0,0,0,.06);
  height:64px;
}
.bottom-nav a{
  flex:1 1 0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-decoration:none;
  color:#6b7280;
  font-size:10px;
  font-weight:600;
  padding:8px 4px;
  min-width:0;
}
.bottom-nav a.active{color:#8b5cf6}
.bottom-nav a i{font-size:18px;margin-bottom:2px}

/* 데스크탑(≥640px)에서는 480px 모바일 폭으로 중앙 정렬 / Desktop: center as 480px width */
@media(min-width:640px){
  .bottom-nav{
    width:480px !important;
    left:calc(50% - 240px) !important;
    right:auto !important;
  }
}