/* components.css
   - header/nav/buttons/cards/inputs/accordion
*/
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  backdrop-filter: blur(10px);
  background: rgba(5, 5, 5, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: transform .25s ease, max-height .25s ease;
  will-change: transform;
  overflow: visible;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

@media (max-width: 991.98px){
  .header{
    position: fixed;
        top: 0 !important;
    z-index: 99999 !important;
    left: 0;
    right: 0;
    transform: none !important;
  }
  .header.header--hidden{
    transform: none !important;
  }
    /* backdrop는 헤더보다 위 */
  #menuBackdrop{
    position: fixed !important;
    inset: 0;
    z-index: 99991 !important;
  }

  /* 메뉴는 최상단 */
  #mobileMenu{
    position: fixed !important;
    top: 0;
    z-index: 99992 !important;
  }
}

/* ✅ backdrop/menu가 "닫혀있을 때" 클릭을 먹지 않도록 */
#menuBackdrop{
  pointer-events: none;
}
#menuBackdrop.is-open{
  pointer-events: auto;
}

/* ✅ mobileMenu도 닫혀있으면 클릭을 먹지 않게 */
#mobileMenu{
  pointer-events: none;
}
#mobileMenu.is-open{
  pointer-events: auto;
}


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

.brand__logo {
  width: 48px;
  height: 48px;
}

.brand__name {
  font-weight: 900;
  letter-spacing: .06em;
}

.nav {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 1.3rem;
  background-color: black;
}

.nav__link {
  padding: 10px 10px;
  border-radius: 14px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav__link:hover {
  background: rgba(57, 255, 136, .08);
  transform: translateY(-1px);
}

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

.btn{
  border: 1px solid rgba(255, 243, 230, .12);
  background: rgba(0, 0, 0, .22);
  color: rgba(255, 243, 230, .95);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              filter var(--dur) var(--ease);
  font-weight: 900;
  text-transform: uppercase;
}

.btn:hover {
  transform: translateY(-1px);
}

/* ===== Primary (Connect Wallet) ===== */
.btn--primary {
  border-color: rgba(130, 83, 44, .70);
  background: rgba(20, 12, 7, .35);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.btn--primary:hover {
  border-color: rgba(255, 204, 84, .55);
  background: rgba(255, 204, 84, .08);
  box-shadow:
    0 0 0 1px rgba(255, 204, 84, .10) inset,
    0 10px 28px rgba(0, 0, 0, .42),
    0 0 22px rgba(255, 204, 84, .14);
}

/* ===== CTA (Buy Now / Widget ENDED button style base) ===== */
.btn--cta {
  border-color: rgba(130, 83, 44, .75);
  background: linear-gradient(
    90deg,
    rgba(255, 204, 84, .18),
    rgba(201, 122, 63, .16),
    rgba(130, 83, 44, .10)
  );
  box-shadow:
    0 0 0 1px rgba(255, 204, 84, .08) inset,
    0 10px 26px rgba(0, 0, 0, .38);
}

.btn--cta:hover {
  border-color: rgba(255, 204, 84, .60);
  background: linear-gradient(
    90deg,
    rgba(255, 204, 84, .22),
    rgba(201, 122, 63, .20),
    rgba(130, 83, 44, .12)
  );
  box-shadow:
    0 0 0 1px rgba(255, 204, 84, .12) inset,
    0 14px 34px rgba(0, 0, 0, .45),
    0 0 28px rgba(255, 204, 84, .16);
}

/* ===== Ghost ===== */
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 243, 230, .14);
}

.btn--ghost:hover{
  border-color: rgba(255, 204, 84, .45);
  background: rgba(255, 204, 84, .06);
  box-shadow: 0 0 20px rgba(255, 204, 84, .10);
}

.btn--block {
  width: 100%;
  justify-content: center;
}


.card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.card__pad {
  padding: 18px;
}

.card--solid {
  background: var(--surface);
  border: var(--border);
}

.card--glass {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
}

.card--neon {
  background: radial-gradient(1200px 420px at 10% 0%, rgba(57, 255, 136, .10), transparent 60%),
    radial-gradient(1000px 380px at 90% 10%, rgba(0, 229, 255, .08), transparent 55%),
    rgba(11, 11, 11, .92);
  border: 1px solid rgba(57, 255, 136, .32);
}

.card--neon::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(57, 255, 136, .10);
}

.field {
  margin-top: 14px;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.field__row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  padding: 10px 12px;
}

.input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
}

.field__suffix {
  font-weight: 800;
  opacity: .9;
}

.field__hint {
  margin-top: 8px;
  font-size: 13px;
  opacity: .9;
}

.tabs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.tab {
  flex: 1;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
}

.tab.is-active {
  border-color: rgba(57, 255, 136, .55);
  background: rgba(57, 255, 136, .10);
}

.progress {
  margin-top: 14px;
}

.progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  opacity: .92;
}

.progress__bar {
  margin-top: 8px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--neon), var(--cyan), var(--pink));
}

.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 520px) {
  .cta-row {
    grid-template-columns: 1fr;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(57, 255, 136, .30);
  background: rgba(57, 255, 136, .06);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  letter-spacing: .04em;
  width: fit-content;
}

.pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--neon);
  box-shadow: 0 0 16px rgba(57, 255, 136, .55);
}

.checklist {
  margin: 14px 0 0;
  padding-left: 18px;
}

.checklist li {
  margin: 8px 0;
}

.platforms {
  display: flex;
  justify-content: center;
  /* ✅ 박스 기준 가운데 */
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
  width: 100%;
}

/* 아이콘 버튼 강화 */
.platform {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}

.platform:hover {
  transform: translateY(-2px) scale(1.06);
  background: rgba(57, 255, 136, .06);
  box-shadow: 0 0 20px rgba(57, 255, 136, .12);
}

/* 아이콘 크기 조금 키우기 */
.platform img {
  width: 22px;
  height: 22px;
  opacity: .95;
}

.tok-icon{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

/* ✅ Estimated 박스: Amount 입력칸과 같은 크기 + 강조 배경 */
.field__row--estimate {
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;

  background: linear-gradient(90deg,
      rgba(57, 255, 136, .14),
      rgba(0, 229, 255, .12),
      rgba(255, 59, 255, .10));

  border: 1px solid rgba(57, 255, 136, .25);
  box-shadow: 0 0 26px rgba(57, 255, 136, .10);
}

/* 왼쪽 라벨 */
.estimate__label {
  font-weight: 900;
  letter-spacing: .04em;
  opacity: .92;
}

/* 오른쪽 값 */
.estimate__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 950;
}

.estimate__unit {
  font-size: 13px;
  font-weight: 900;
  opacity: .9;
  letter-spacing: .06em;
}



.lang {
  position: relative;
}

.lang__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(11, 11, 11, .95);
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
}

.lang.is-open .lang__menu {
  display: block;
}

.lang__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.lang__item:hover {
  background: rgba(57, 255, 136, .08);
}

.lang__flag {
  width: 18px;
  height: 18px;
}

.hamburger {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  display: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, .85);
  margin: 4px auto;
  border-radius: 999px;
}

/* Mobile menu drawer + backdrop */
.menu-backdrop{
  display:none;
}

.mobile-menu{
  display:none;
}

@media (max-width: 1116px) {
  /* Mobile header: show ONLY language + hamburger */
  .header__actions > .btn--primary,
  .header__actions > .btn--cta{ display:none; }

  .menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease;
    z-index: var(--z-ticker);
  }

  .menu-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }

  .mobile-menu{
    display:block;
    position:fixed;
    top:0;
    right:0;
    height: 100dvh;
    width: min(88vw, 380px);
    background: rgba(5,5,5,.96);
    border-left: 1px solid rgba(255,255,255,.08);
    transform: translateX(110%);
    transition: transform .22s ease;
    z-index: var(--z-dropdown);
    padding: 14px;
    overflow:auto;
  }

  .mobile-menu.is-open{
    transform: translateX(0);
  }

  .mobile-menu__panel{
    display:flex;
    flex-direction:column;
    gap: 14px;
    min-height: calc(100dvh - 28px);
  }

  .mobile-menu__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 6px 4px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .mobile-menu__title{
    font-weight: 900;
    letter-spacing: .3px;
    text-transform: uppercase;
  }

  .mobile-menu__close{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--text);
    cursor:pointer;
  }

  .mobile-menu__links{
    display:grid;
    gap: 6px;
    padding-top: 4px;
  }

  .mobile-menu__link{
    display:block;
    padding: 12px 10px;
    border-radius: 16px;
  }

  .mobile-menu__link:hover{
    background: rgba(57, 255, 136, .08);
  }

  .mobile-menu__card{
    margin-top: auto;
    display:flex;
    flex-direction:column;
    gap: 10px;
    border-radius: 20px;
    border: 1px solid rgba(57,255,136,.28);
    background: rgba(10,10,10,.72);
    box-shadow: 0 0 22px rgba(57,255,136,.10);
    padding: 14px;
  }

  .mobile-menu__cardTitle{
    font-weight: 900;
    margin-bottom: 10px;
    opacity: .92;
  }

  .mobile-menu__btn{
    display:flex;
    width:100%;
    justify-content:center;
    margin-top: 0;
    align-items: center;
  }

  .mobile-menu__btn + .mobile-menu__btn{
    margin-top: 10px;
  }

  .mobile-menu__hint{
    margin-top: 10px;
    opacity: .72;
    font-size: 13px;
    line-height: 1.4;
  }
}

@media (max-width: 1116px) {
  .nav {
    display: none;
  }

  .hamburger {
    display: block;
  }
}

.accordion {
  display: grid;
  gap: 12px;
}

.acc {
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}

.acc__sum {
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 800;
}

.acc__sum::-webkit-details-marker {
  display: none;
}

.acc__body {
  padding: 0 14px 14px;
}

.iconbtn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
}

.iconbtn img {
  width: 20px;
  height: 20px;
}



/* ===== Meme-coin styling layer (playful but clean) ===== */
.card,
.btn,
.platform,
.capsule,
.acc,
.lang__btn,
.hamburger,
.iconbtn {
  outline: 2px solid rgba(255, 255, 255, 0.08);
  outline-offset: -2px;
}

.card {
  box-shadow: 0 14px 44px rgba(0, 0, 0, .62);
}



.btn--cta {
  position: relative;
  overflow: hidden;
}

.btn--cta::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .18), transparent 55%);
  transform: translateX(-35%);
  transition: transform 500ms var(--ease);
  pointer-events: none;
}

.btn--cta:hover::after {
  transform: translateX(35%);
}

.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(57, 255, 136, .35);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  width: fit-content;
}

/* Marquee (moving platforms) */
.marquee {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  gap: 18px;
  padding: 16px;
  width: max-content;
  animation: marquee 30s linear infinite;
  will-change: transform;
}

.marquee__item img {
  width: auto;
  opacity: .92;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* components.css - 업데이트된 부분 */

/* ===== 1. <li>와 <p> 텍스트 가독성 개선 ===== */
.checklist,
.checklist li {
  color: rgba(255, 255, 255, .92);
  /* 기존보다 더 밝은 흰색으로 변경 */
}

p,
.card__pad p,
.phase-card p {
  color: rgba(255, 255, 255, .88);
  /* 본문 텍스트도 밝게 */
}

/* ===== 4. 모든 카드/박스에 네온 테두리 효과 추가 ===== */
.card,
.phase-card,
.roadcard,
.acc {
  position: relative;
  border: 1px solid rgba(57, 255, 136, .25);
  /* 네온 그린 테두리 */
  box-shadow: 0 0 0 1px rgba(57, 255, 136, .08) inset,
    0 0 20px rgba(57, 255, 136, .10),
    0 16px 44px rgba(0, 0, 0, .62);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.card:hover,
.phase-card:hover,
.roadcard:hover,
.acc:hover {
  border-color: rgba(57, 255, 136, .45);
  box-shadow: 0 0 0 1px rgba(57, 255, 136, .15) inset,
    0 0 35px rgba(57, 255, 136, .20),
    0 0 55px rgba(0, 229, 255, .12),
    0 20px 60px rgba(0, 0, 0, .70);
}

/* Phase cards 특별 강조 */
.phase-card {
  border-color: rgba(0, 229, 255, .28);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .10) inset,
    0 0 25px rgba(0, 229, 255, .12),
    0 18px 50px rgba(0, 0, 0, .65);
}

.phase-card:hover {
  border-color: rgba(0, 229, 255, .50);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .18) inset,
    0 0 40px rgba(0, 229, 255, .22),
    0 0 65px rgba(57, 255, 136, .15),
    0 22px 70px rgba(0, 0, 0, .75);
}

/* Utility/Feature 카드들 */
.card--glass,
.card--solid {
  border-color: rgba(255, 59, 255, .25);
  box-shadow: 0 0 0 1px rgba(255, 59, 255, .08) inset,
    0 0 22px rgba(255, 59, 255, .10),
    0 16px 44px rgba(0, 0, 0, .62);
}

.card--glass:hover,
.card--solid:hover {
  border-color: rgba(255, 59, 255, .45);
  box-shadow: 0 0 0 1px rgba(255, 59, 255, .15) inset,
    0 0 38px rgba(255, 59, 255, .20),
    0 0 58px rgba(0, 229, 255, .12),
    0 20px 60px rgba(0, 0, 0, .70);
}

/* distribution-colored-bars.css
   ✅ Distribution Strategy 프로그레스 바를 처음부터 컬러풀하게
   ✅ 기존 스타일에 추가로 적용
*/

/* ===== Progress Bar - 처음부터 컬러풀하게 ===== */
.tok-wpBar span {
  transition: box-shadow .3s ease, filter .3s ease !important;
}

/* 각 Row의 프로그레스 바 색상 - 처음부터 활성화 */
.tok-wpRow:nth-child(1) .tok-wpBar span {
  background: linear-gradient(90deg, rgba(57, 255, 136, .85), rgba(0, 229, 255, .75)) !important;
  box-shadow: 0 0 15px rgba(57, 255, 136, .30) !important;
}

.tok-wpRow:nth-child(2) .tok-wpBar span {
  background: linear-gradient(90deg, rgba(0, 229, 255, .85), rgba(57, 255, 136, .75)) !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, .30) !important;
}

.tok-wpRow:nth-child(3) .tok-wpBar span {
  background: linear-gradient(90deg, rgba(255, 59, 255, .85), rgba(147, 51, 234, .75)) !important;
  box-shadow: 0 0 15px rgba(255, 59, 255, .30) !important;
}

.tok-wpRow:nth-child(4) .tok-wpBar span {
  background: linear-gradient(90deg, rgba(255, 214, 102, .85), rgba(255, 165, 0, .75)) !important;
  box-shadow: 0 0 15px rgba(255, 214, 102, .35) !important;
}

.tok-wpRow:nth-child(5) .tok-wpBar span {
  background: linear-gradient(90deg, rgba(147, 51, 234, .85), rgba(168, 85, 247, .75)) !important;
  box-shadow: 0 0 15px rgba(147, 51, 234, .35) !important;
}

/* 호버 시 글로우 더 강하게 */
.tok-wpRow:hover .tok-wpBar span {
  filter: brightness(1.15);
}

.tok-wpRow:nth-child(1):hover .tok-wpBar span {
  box-shadow: 0 0 25px rgba(57, 255, 136, .45) !important;
}

.tok-wpRow:nth-child(2):hover .tok-wpBar span {
  box-shadow: 0 0 25px rgba(0, 229, 255, .45) !important;
}

.tok-wpRow:nth-child(3):hover .tok-wpBar span {
  box-shadow: 0 0 25px rgba(255, 59, 255, .45) !important;
}

.tok-wpRow:nth-child(4):hover .tok-wpBar span {
  box-shadow: 0 0 25px rgba(255, 214, 102, .50) !important;
}

.tok-wpRow:nth-child(5):hover .tok-wpBar span {
  box-shadow: 0 0 25px rgba(147, 51, 234, .50) !important;
}

/* components.css 또는 관련 CSS 파일에 추가 */

.howtoStep {
  color: #ffffff; /* 또는 color: #ffffff; */
  text-align: left;   /* 버튼 태그 특성상 텍스트 정렬이 틀어질 수 있으므로 명시 */
}

/* 뱃지나 타이틀 등 내부 요소가 상속받도록 확인 */
.howtoStep span {
  color: inherit; 
}

/* =========================
   BUY (Purple Neon)
========================= */
.btn--buy-purple{
  border-color: rgba(170, 100, 255, .75) !important;
  box-shadow:
    0 0 0 1px rgba(170, 100, 255, .55) inset,
    0 0 22px rgba(170, 100, 255, .25),
    0 0 44px rgba(170, 100, 255, .14);
  background:
    radial-gradient(120% 140% at 20% 15%, rgba(200, 140, 255, .28), rgba(10,10,14,0) 60%),
    linear-gradient(180deg, rgba(120, 60, 220, .35), rgba(20, 10, 30, .15));
}
.btn--buy-purple:hover{
  box-shadow:
    0 0 0 1px rgba(200, 140, 255, .75) inset,
    0 0 28px rgba(170, 100, 255, .35),
    0 0 56px rgba(170, 100, 255, .18);
}
.btn--buy-purple:disabled{
  opacity: .6;
  filter: grayscale(.05);
}