/* ===============================
   RESET
=============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", "Noto Sans KR", sans-serif;
}

:root{
  --container-max: 1180px;
  --pad-x: 16px;
}

body {
  background: #0b0f1a;
  color: #e5e7eb;
}

/* ===============================
   HEADER
=============================== */
#header {
  background: #020617;
  border-bottom: 1px solid #1e2436;
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.header-logo img {
  height: 36px;
}

.header-wallet {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

/* HEX balance */
#hex-balance {
  font-weight: 600;
  color: #facc15;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hex-icon {
  color: #38bdf8;
  font-size: 16px;
}

/* Wallet button */
#wallet-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

#wallet-btn:hover {
  opacity: 0.9;
}

#wallet-btn.connected {
  background: linear-gradient(135deg, #10b981, #059669);
}

/* ===============================
   MAIN
=============================== */
main {
  max-width: var(--container-max);
  margin: 40px auto;
  padding: 28px var(--pad-x);
  border: 1px solid #1f2937;
  border-radius: 12px;
  background: linear-gradient(180deg, #020617, #020617aa);
}

h2 {
  font-size: 28px;
  margin-bottom: 16px;
}

.desc {
  line-height: 1.6;
  color: #cbd5f5;
  margin-bottom: 40px;
}

/* ===============================
   GAME BUTTONS
=============================== */
.game-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.game-buttons button {
  background: #1e3a8a;
  border: 1px solid #3b82f6;
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.game-buttons button:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

/* ===============================
   FOOTER
=============================== */
#footer {
  margin-top: 100px;
  border-top: 1px solid #1f2937;
  background: #020617;
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #64748b;
  font-size: 14px;
}

.footer-logo {
  height: 28px;
}

.footer-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #38bdf8;
  text-decoration: none;
  font-weight: 500;
}

.footer-link:hover {
  text-decoration: underline;
}

.hexdao-logo {
  height: 18px;
}


.header-logo a {
  display: flex;
  align-items: center;
}

.header-logo a:hover {
  opacity: 0.85;
}

.page { max-width: var(--container-max); margin: 0 auto; padding: 18px var(--pad-x); }
.page-title { font-size: 18px; margin-bottom: 6px; }
.page-desc { opacity: .8; margin-bottom: 14px; line-height: 1.4; }

.header-nav { display: flex; gap: 10px; align-items: center; margin-left: 14px; }
.nav-link { padding: 8px 10px; border-radius: 10px; text-decoration: none; opacity: .9; }
.nav-link:hover { opacity: 1; }

.topbar { display:flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.net-chip { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); opacity: .85; font-size: 12px; }

.tabs { display:flex; gap: 8px; margin: 12px 0 14px; }
.tab { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: transparent; cursor:pointer; opacity: .85; }
.tab.active { opacity: 1; }
.tabpane { display:none; }
.tabpane.show { display:block; }

.card { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.hr { height: 1px; background: rgba(255,255,255,.10); margin: 12px 0; }

.row { display:flex; justify-content: space-between; align-items:center; gap: 10px; padding: 7px 0; }
.k { opacity: .75; }
.v { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.btn-row { display:flex; gap: 8px; flex-wrap: wrap; }
.btn { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; background: transparent; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; }
.btn.primary { background: rgba(255, 190, 0, .92); color: #111; border-color: rgba(255,190,0,.92); }
.btn.danger { border-color: rgba(255, 80, 80, .65); }
.btn.small { padding: 8px 10px; border-radius: 10px; }

.hint { margin-top: 10px; opacity: .75; font-size: 12px; line-height: 1.4; }

.block-title { font-size: 14px; opacity: .95; }
.block-desc { margin-top: 6px; opacity: .75; font-size: 12px; line-height: 1.4; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }

.field label { display:block; opacity: .8; font-size: 12px; margin-bottom: 6px; }
.field input { width:100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.15); color: inherit; outline: none; }
.field button { margin-top: 8px; width: 100%; }

.mini-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 820px) { .mini-grid { grid-template-columns: 1fr; } }
.mini { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px; }
.mini .k { font-size: 12px; margin-bottom: 6px; }
.mini .v { font-size: 12px; text-align:left; opacity: .9; }

.mission .mission-head { display:flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.mission-title { font-size: 14px; }
.mission-sub { opacity:.75; font-size: 12px; margin-top: 4px; }
.mission-actions { display:flex; gap: 8px; flex-wrap: wrap; }
/* ===== Mobile-safe message box ===== */
.msgbox {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #222;
  background: rgba(255,255,255,0.04);
  font-size: 13px;
  line-height: 1.5;
  color: #fff;

  /* 핵심: 긴 문자열(주소/해시) 줄바꿈 */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.msgbox--ok {
  border-color: rgba(0,255,0,0.25);
}

.msgbox--err {
  border-color: rgba(255,0,0,0.25);
}

.msgbox .msg-title {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 6px;
}

.msgbox details {
  margin-top: 8px;
}

.msgbox summary {
  cursor: pointer;
  opacity: 0.85;
}
/* Buttons: prefer explicit classes. Removed aggressive global white override to keep dark theme intact. */

.btn,
button.btn {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 14px;
  background: transparent;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

.btn:hover { opacity: 0.95; }

.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ===== Mobile-safe message box (no overflow) ===== */
.msgbox {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #222;
  background: rgba(255,255,255,0.04);
  font-size: 13px;
  line-height: 1.5;
  color: #fff;

  /* 핵심: 긴 문자열 줄바꿈 */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;

  /* 혹시라도 내부 폭 넘치면 강제로 숨김 처리 */
  max-width: 100%;
  overflow: hidden;
}

.msgbox--ok { border-color: rgba(0,255,0,0.28); }
.msgbox--err { border-color: rgba(255,0,0,0.28); }

.msgbox .msg-title {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 6px;
}

.msgbox details { margin-top: 8px; }
.msgbox summary { cursor: pointer; opacity: 0.85; }


/* /assets/css/a2e.css */

/* 공통 */
:root{
  --bg: #0b0f14;
  --card: #111823;
  --line: rgba(255,255,255,0.08);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --ok: #37d67a;
  --warn: #ffcc00;
  --bad: #ff5a5a;
  --pill: rgba(255,255,255,0.10);
}

main.a2e-wrap{
  padding: 18px 14px 80px;
  max-width: 980px;
  margin: 0 auto;
  color: var(--text);
}

.h1{
  font-size: 22px;
  line-height: 1.2;
  margin: 8px 0 6px;
}
.sub{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 860px){
  .grid.two{
    grid-template-columns: 1fr 1fr;
  }
}

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}
.card .title{
  font-size: 15px;
  margin-bottom: 8px;
}
.row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
}
.kv{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 10px;
  margin-top: 8px;
  font-size: 13px;
}
.kv .k{ color: var(--muted); }
.kv .v{ color: var(--text); word-break: break-word; }

/* 버튼: 무조건 흰색 */
.btn{
  appearance:none;
  border: 1px solid rgba(0,0,0,0.20);
  background:#fff;
  color:#111;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height: 40px;
}
.btn:disabled{
  opacity: .55;
  cursor:not-allowed;
}
.btn.ghost{
  background: transparent;
  color: #fff;
  border: 1px solid var(--line);
}
.btn.small{
  padding: 8px 10px;
  border-radius: 10px;
  min-height: 34px;
  font-size: 13px;
}

/* 입력 */
.inp, .txt{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.15);
  color: var(--text);
  outline: none;
}
.txt{
  min-height: 86px;
  resize: vertical;
}
.inp::placeholder,.txt::placeholder{ color: rgba(255,255,255,0.45); }

/* 배지 */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--pill);
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--line);
}
.badge.ok{ border-color: rgba(55,214,122,0.5); }
.badge.warn{ border-color: rgba(255,204,0,0.45); }
.badge.bad{ border-color: rgba(255,90,90,0.45); }

/* 토스트/에러 박스: 모바일에서 밖으로 안 나가게 */
.toast{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  background: rgba(15,22,32,0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px;
  color: var(--text);
  z-index: 9999;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  display:none;

  /* 핵심 */
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.toast.show{ display:block; }
.toast .t{ font-weight:800; margin-bottom: 6px; font-size: 13px; }
.toast .m{ font-size: 12px; color: var(--muted); }

/* 미션 카드 */
.mission{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.mission .meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap: wrap;
}
.mission .desc{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.mission .box{
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* ===============================
   HEADER NAV (FINAL)
   - HTML 구조 그대로 사용:
     <nav class="header-nav"><a ...>...</a></nav>
   - 버튼형 네비 + 현재페이지 active 지원
=============================== */

#header {
  background: linear-gradient(90deg, #0f1220, #14172a);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.header-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.header-nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;

  /* 버튼 느낌 */
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);

  /* 글자 */
  color: rgba(255,255,255,0.88);

  transition: transform .15s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}

.header-nav a:hover {
  color: #fff;
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(79,107,255,0.85), rgba(111,140,255,0.85));
  border-color: rgba(111,140,255,0.65);
  box-shadow: 0 0 0 1px rgba(111,140,255,0.35), 0 10px 22px rgba(79,107,255,0.25);
}

/* 현재 페이지 강조(아래 JS가 active 붙임) */
.header-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(111,140,255,0.95), rgba(143,162,255,0.95));
  border-color: rgba(143,162,255,0.85);
  box-shadow: 0 0 0 1px rgba(143,162,255,0.40), 0 12px 26px rgba(143,162,255,0.25);
}

/* 모바일에서 헤더 요소들이 줄바꿈 자연스럽게 */
@media (max-width: 860px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .header-wallet {
    width: 100%;
    justify-content: space-between;
  }
}