/* =========================================================
   Regentec Global CSS (site.css)
   - Header/Nav/Drawer/Cart/Footer (GLOBAL)
   - Keep HOME styles in home_v1.css / rg-home-mobile.css
========================================================= */

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.rg-body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  background: #050b15;
  color: #e5e7eb;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

:root{
  --rg-max: 1280px;
  --rg-pad: 20px;

  --rg-bg0:#050b15;
  --rg-bg1:#0b1322;
  --rg-bg2:#0d1625;
  --rg-card:#0f1a2b;

  --rg-text:#e5e7eb;
  --rg-muted:#9aa5b1;
  --rg-line: rgba(148,163,184,.18);

  --rg-c1:#0dcaf0;
  --rg-c2:#0a58ca;

  --rg-radius: 14px;
}

/* ---- Layout helpers ---- */
.rg-main{
  /* announcement + header 높이만큼 */
  padding-top: 98px;
  min-height: 60vh;
}

/* =========================
   Announcement
========================= */
.rg-announce{
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(90deg, #0b1630, #101a33);
  border-bottom: 1px solid var(--rg-line);
}
.rg-announce__inner{
  max-width: var(--rg-max);
  margin: 0 auto;
  padding: 10px var(--rg-pad);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #cbd5e1;
}
.rg-dot{ opacity:.55; padding:0 6px; }
.rg-link{
  color: var(--rg-c1);
  font-weight: 800;
}
.rg-muted{ color: var(--rg-muted); }
.rg-mt-8{ margin-top: 8px; }

/* =========================
   Header / Nav
========================= */
.rg-header{
  position: sticky;
  top: 41px; /* announce bar 높이 */
  z-index: 70;
  background: rgba(5,11,21,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rg-line);
}
.rg-header__inner{
  max-width: var(--rg-max);
  margin: 0 auto;
  padding: 12px var(--rg-pad);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

/* Brand */
.rg-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 150px;
}
.rg-brand__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--rg-c1), var(--rg-c2));
  color:#001018;
  font-weight: 900;
  font-size: 12px;
}
.rg-brand__text{
  font-weight: 900;
  letter-spacing: .02em;
  color: #e2e8f0;
}

/* Desktop nav */
.rg-nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}
.rg-nav__item{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  color:#cbd5e1;
  font-weight: 800;
  font-size: 14px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.rg-nav__item:hover{
  background: rgba(13,202,240,.10);
  color: #e5f9ff;
  transform: translateY(-1px);
}
.rg-nav__item--cta{
  background: rgba(13,202,240,.14);
  border: 1px solid rgba(13,202,240,.35);
  color: var(--rg-c1);
}
.rg-nav__item--cta:hover{
  background: rgba(13,202,240,.18);
}

/* Dropdown */
.rg-nav__dd{ position: relative; }
.rg-nav__btn{
  background: transparent;
  border: 0;
  cursor: pointer;
}
.rg-caret{ opacity:.8; font-size: 12px; }
.rg-dd{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 170px;
  background: #0b1425;
  border: 1px solid var(--rg-line);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  display:none;
}
.rg-dd__item{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  color:#cbd5e1;
  font-weight: 800;
  font-size: 13px;
}
.rg-dd__item:hover{
  background: rgba(13,202,240,.10);
  color:#e5f9ff;
}
.rg-nav__dd:hover .rg-dd{ display:block; }

/* Right controls */
.rg-header__right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Search */
.rg-search{
  display:flex;
  align-items:center;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--rg-line);
  border-radius: 999px;
  padding: 6px 10px;
}
.rg-search__input{
  width: 220px;
  border: 0;
  outline: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 14px;
}
.rg-search__input::placeholder{ color: rgba(203,213,225,.55); }
.rg-search__btn{
  border:0;
  background: transparent;
  color: rgba(229,231,235,.85);
  cursor:pointer;
  font-size: 14px;
}

/* Icon buttons */
.rg-iconbtn{
  border: 1px solid var(--rg-line);
  background: rgba(255,255,255,.03);
  color: #e5e7eb;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
}
.rg-iconbtn:hover{
  background: rgba(13,202,240,.10);
  border-color: rgba(13,202,240,.35);
}
.rg-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(13,202,240,.20);
  color: var(--rg-c1);
  font-size: 12px;
  font-weight: 900;
}

/* =========================
   Buttons (global)
========================= */
.rg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.rg-btn--primary{
  background: linear-gradient(90deg, var(--rg-c1), var(--rg-c2));
  color: #001018;
  box-shadow: 0 10px 25px rgba(13,202,240,.25);
}
.rg-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(13,202,240,.35);
}
.rg-btn--outline{
  background: transparent;
  border-color: rgba(13,202,240,.45);
  color: var(--rg-c1);
}
.rg-btn--outline:hover{
  background: rgba(13,202,240,.12);
  border-color: rgba(13,202,240,.70);
  transform: translateY(-1px);
}
.rg-btn--full{
  width: 100%;
  justify-content: center;
}

/* =========================
   Drawer (mobile menu)
========================= */
.rg-drawer{
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.rg-drawer__panel{
  position:absolute;
  top:0; right:0;
  height: 100%;
  width: min(360px, 92vw);
  background: #0b1425;
  border-left: 1px solid var(--rg-line);
  transform: translateX(110%);
  transition: transform .25s ease;
  padding: 16px;
  overflow:auto;
}
.rg-drawer__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 12px;
  color:#e5e7eb;
}
.rg-drawer__item{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color:#cbd5e1;
  font-weight: 900;
  border: 1px solid transparent;
}
.rg-drawer__item:hover{
  background: rgba(13,202,240,.10);
  border-color: rgba(13,202,240,.18);
  color:#e5f9ff;
}
.rg-drawer__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .25s ease;
}

/* aria-hidden 토글 기반 */
.rg-drawer[aria-hidden="false"]{
  pointer-events: auto;
}
.rg-drawer[aria-hidden="false"] .rg-drawer__panel{
  transform: translateX(0);
}
.rg-drawer[aria-hidden="false"] .rg-drawer__backdrop{
  opacity: 1;
}

/* =========================
   Cart drawer
========================= */
.rg-cart{
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
}
.rg-cart__panel{
  position:absolute;
  top:0; right:0;
  height: 100%;
  width: min(380px, 92vw);
  background: #0b1425;
  border-left: 1px solid var(--rg-line);
  transform: translateX(110%);
  transition: transform .25s ease;
  padding: 16px;
  overflow:auto;
}
.rg-cart__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rg-cart__empty{
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--rg-line);
  color: #cbd5e1;
}
.rg-cart__bottom{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rg-line);
}
.rg-cart__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 12px;
  color:#cbd5e1;
}
.rg-cart__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .25s ease;
}

.rg-cart[aria-hidden="false"]{
  pointer-events: auto;
}
.rg-cart[aria-hidden="false"] .rg-cart__panel{
  transform: translateX(0);
}
.rg-cart[aria-hidden="false"] .rg-cart__backdrop{
  opacity: 1;
}

/* =========================
   Footer
========================= */
.rg-footer{
  border-top: 1px solid var(--rg-line);
  background: #050b15;
  padding: 40px 0;
}
.rg-footer__inner{
  max-width: var(--rg-max);
  margin: 0 auto;
  padding: 0 var(--rg-pad);
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.rg-footer__title{
  font-weight: 900;
  margin-bottom: 10px;
  color: #e5e7eb;
}
.rg-footer__link{
  display:block;
  padding: 6px 0;
  color: #cbd5e1;
  font-weight: 700;
}
.rg-footer__link:hover{ color: var(--rg-c1); }

/* =========================
   Responsive
========================= */
.rg-mobile-only{ display: none; }

@media (max-width: 1024px){
  .rg-search__input{ width: 160px; }
}

@media (max-width: 768px){
  :root{ --rg-pad: 16px; }
  .rg-main{ padding-top: 98px; } /* 유지 */

  .rg-nav{ display:none; }
  .rg-mobile-only{ display: inline-flex; }

  .rg-search{ display:none; } /* 모바일 상단 단순화 */
  .rg-footer__inner{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px){
  .rg-announce__inner{ flex-direction: column; align-items:flex-start; }
}

.rg-nav__item.is-active {
    color: #1ec7ff;
    font-weight: 600;
}

.rg-nav__item.is-active::after {
    content: "";
    display: block;
    height: 2px;
    background: #1ec7ff;
    margin-top: 4px;
}