.page { min-height: 100vh; }

/* ===== Theme Vars (single source) ===== */
:root{
  --bg: #070A12;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.64);
  --line: rgba(255,255,255,0.12);
  --accent: #8A7DFF;
  --accent2: #34D3FF;

  --bad: #ff4d6d;
  --ok: #22c55e;

  /* input glass */
  --glass: rgba(255,255,255,0.06);
  --glass2: rgba(255,255,255,0.10);
  --glassBorder: rgba(255,255,255,0.14);
  --glassBorder2: rgba(255,255,255,0.22);

  /* onchain neon */
  --neon: #39ff14;
}

/* ===== Base ===== */
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(138,125,255,0.35), transparent 55%),
    radial-gradient(1000px 500px at 90% 0%, rgba(52,211,255,0.22), transparent 60%),
    var(--bg);
  color: var(--text);
}

/*
  ===== Layout (Center Consistency) =====
  header / main / footer 모두 동일한 폭 + 중앙정렬
*/
.layout-wrap,
.main-wrap,
.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ===== Common UI ===== */
.hr{
  height:1px;
  background: var(--line);
  margin: 16px 0;
}

.muted{
  color: var(--muted);
  line-height: 1.4;
}

.k{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .2px;
}
.v{ color: var(--text); }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(138,125,255,0.12);
  color: rgba(138,125,255,0.95);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.10);
}

.note{ font-size: 13px; color: var(--muted); }
.note.ok{ color: var(--ok); }
.note.bad{ color: var(--bad); }

/* ===== Cards / Panels ===== */
.card{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  padding: 16px;
}

.panel{
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

/* ===== Typography blocks ===== */
.block-title{
  font-size: 28px;
  letter-spacing: -0.3px;
}
.block-text{
  color: var(--muted);
}

/* ===== Buttons ===== */
.btn{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(138,125,255,0.25), rgba(138,125,255,0.10));
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.btn:hover{
  border-color: rgba(138,125,255,0.55);
  box-shadow: 0 0 0 4px rgba(138,125,255,0.10);
}

/* ===== Onchain (Neon) ===== */
.onchain{
  color: var(--neon) !important;
  text-shadow: 0 0 10px rgba(57,255,20,0.35);
}

/* =========================
   Form / Inputs (single)
   ========================= */
.form-grid,
.form-grid *{
  box-sizing: border-box;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 100%;
}
.form-grid .full{ grid-column: 1 / -1; }
.form-grid > div{ min-width: 0; }

@media (max-width: 860px){
  .form-grid{ grid-template-columns: 1fr; }
}

.input,
select.input,
input.input{
  width:100%;
  max-width:100%;
  height:44px;
  display:block;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--glassBorder);
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.input::placeholder{
  color: rgba(255,255,255,0.35);
}

.input:hover{
  border-color: var(--glassBorder2);
}

.input:focus{
  border-color: rgba(57,255,20,0.55);
  box-shadow:
    0 0 0 3px rgba(57,255,20,0.10),
    0 14px 40px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* select 화살표 + 높이 통일 */
select.input{
  appearance: none;
  line-height: 44px;
  padding-top: 0;
  padding-bottom: 0;

  background-image:
    linear-gradient(180deg, var(--glass2), var(--glass)),
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.55) 50%, transparent 50%);
  background-position:
    0 0,
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size:
    100% 100%,
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
/* =========================
   Profile Form Hotfix Pack
   (inputs overflow + select options + button spacing)
   ========================= */

/* 1) 프레임 밖으로 삐져나감 방지: 전역 box-sizing */
*, *::before, *::after { box-sizing: border-box; }

/* 카드/패널 내부 컨테이너가 줄어들 때 자식이 튀어나오는 현상 방지 */
.card, .panel, .container, .main-wrap, .layout-wrap { min-width: 0; }
.card-inner, .form-grid, .grid2 { min-width: 0; }

/* 2열 그리드 안에서 각 칸이 줄어들 때도 overflow 방지 */
.grid2 > div, .form-grid > div { min-width: 0; }

/* input/select 공통: 폭/높이/패딩 통일 + 프레임 밖 방지 */
.input,
input.input,
select.input,
textarea.input {
  width: 100%;
  max-width: 100%;
  display: block;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
}

/* textarea만 높이 예외 */
textarea.input {
  height: auto;
  min-height: 92px;
  padding: 12px 14px;
  resize: vertical;
}

/* select의 line-height/폰트 차이로 높이가 들쑥날쑥한 현상 방지 */
select.input {
  line-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
}

/* select가 카드 밖으로 밀려나오는 경우(특히 iOS/크롬 일부) 예방 */
select.input { min-width: 0; }

/* 2) 은행 펼침 목록(옵션) 색상: 기본 흰 배경 때문에 글씨 안보이는 문제 해결 */
select.input option {
  background: #0b1020;   /* 어두운 배경 */
  color: rgba(255,255,255,0.92);
}

/* 일부 브라우저에서 optgroup도 필요 */
select.input optgroup {
  background: #0b1020;
  color: rgba(255,255,255,0.80);
}

/* 3) 버튼 유격/높이 통일: 더 세련되게 */
.btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
}

/* 버튼이 여러 개 붙는 줄: gap 적용 */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.row-between {
  justify-content: space-between;
}

/* 버튼 그룹이 오른쪽에 모일 때 보기 좋게 */
.btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 모바일에서 버튼이 너무 빽빽하면 줄바꿈 허용 */
@media (max-width: 520px){
  .row { gap: 10px; }
  .btn { width: 100%; }
  .btn-group { width: 100%; }
}

/* 입력 섹션(구분선 아래) 간격 살짝 고급스럽게 */
.section-gap { margin-top: 14px; }
.hr { margin: 18px 0; }

/* 보조 텍스트 가독성 */
.hint, .note, .muted { line-height: 1.5; }
/* ===== 지갑주소/어카운트 말줄임 + 프레임 밖 튐 방지 ===== */
.wallet-pill, .account-pill, .hdr-account, #walletAddr, #account, .wallet-addr{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 지갑주소 텍스트가 span으로 분리되어 있으면 이걸 추가 */
.wallet-pill span, .account-pill span, .hdr-account span, .wallet-addr span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* ===== 모바일 우측 밀림(가로 스크롤) 방지 기본셋 ===== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden; /* 가장 강력 */
}

*, *::before, *::after{
  box-sizing:border-box;
}

img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

/* 페이지 루트도 가로 넘침 방지 */
.page, .main-wrap, .top-header, .footer-wrap{
  max-width:100%;
}

/* 헤더: 드롭다운(대시보드/모바일메뉴)이 페이지 콘텐츠 위에 떠야 함 */
.top-header{
  position: relative;
  z-index: 100;
}

/* flex 안에서 내용이 길어질 때 부모 밖으로 튀는 현상 방지 */
.hdr-row, .hdr-left, .hdr-right,
.footer-top, .footer-left, .footer-links{
  min-width:0;
}

/* ===================================================
   P2P Exchange Components (광고/주문/메시지/결제수단)
   =================================================== */

/* 탭 바 */
.tab-bar{
  display:flex; gap:4px;
  background:rgba(255,255,255,0.04);
  border-radius:12px; padding:4px;
  border:1px solid var(--line);
}
.tab-bar .tab{
  padding:6px 18px; border-radius:8px;
  border:none; background:transparent;
  color:var(--muted); font-size:13px; cursor:pointer;
  transition:all .15s;
}
.tab-bar .tab.active{
  background:rgba(138,125,255,0.22);
  color:var(--text); font-weight:600;
}

/* 필터 바 */
.filter-bar{
  display:flex; align-items:center;
  gap:10px; flex-wrap:wrap; margin-bottom:14px;
}

/* 광고 카드 */
.ad-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px; align-items:center;
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--line);
  border-radius:16px; padding:16px;
  margin-bottom:10px;
  transition:border-color .15s, transform .1s;
}
.ad-card:hover{ border-color:rgba(138,125,255,0.35); }
.ad-price-big{
  font-size:22px; font-weight:700; color:var(--text);
  letter-spacing:-0.3px;
}
.ad-badge{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:600;
  background:rgba(138,125,255,0.12);
  color:rgba(138,125,255,0.9);
  border:1px solid rgba(138,125,255,0.2);
}
.ad-badge.kr{ background:rgba(52,211,255,0.10); color:rgba(52,211,255,0.9); border-color:rgba(52,211,255,0.2); }
.ad-badge.vn{ background:rgba(251,146,60,0.10); color:rgba(251,146,60,0.9); border-color:rgba(251,146,60,0.2); }
@media(max-width:600px){
  .ad-card{ grid-template-columns:1fr; }
}

/* 버튼 변형 */
.btn.primary{
  background:linear-gradient(135deg, var(--accent), #6d62e8);
  border-color:rgba(138,125,255,0.5);
  color:#fff; font-weight:600;
}
.btn.primary:hover{ background:linear-gradient(135deg,#9b8fff,#7a6df0); }
.btn.danger{
  background:linear-gradient(180deg,rgba(255,77,109,0.25),rgba(255,77,109,0.10));
  border-color:rgba(255,77,109,0.35); color:var(--bad);
}
.btn.secondary{
  background:rgba(255,255,255,0.06); border-color:var(--line); color:var(--muted);
}
.btn.success{
  background:linear-gradient(135deg,rgba(34,197,94,0.28),rgba(34,197,94,0.12));
  border-color:rgba(34,197,94,0.35); color:var(--ok); font-weight:600;
}
.btn:disabled{ opacity:.4; pointer-events:none; }

/* 거래 단계 바 */
.step-bar{
  display:flex; align-items:flex-start;
  gap:0; padding:12px 0; overflow-x:auto;
}
.step-item{
  display:flex; flex-direction:column;
  align-items:center; gap:5px;
  flex:1; position:relative; min-width:64px;
}
.step-item:not(:last-child)::after{
  content:'';
  position:absolute; top:13px; left:50%;
  width:100%; height:2px;
  background:var(--line); z-index:0;
}
.step-item.done::after{ background:var(--ok); }
.step-dot{
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--line); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--muted); z-index:1;
}
.step-item.done .step-dot{
  border-color:var(--ok); background:rgba(34,197,94,0.14); color:var(--ok);
}
.step-item.current .step-dot{
  border-color:var(--accent); background:rgba(138,125,255,0.14);
  color:var(--accent); box-shadow:0 0 0 4px rgba(138,125,255,0.12);
}
.step-label{
  font-size:10px; color:var(--muted);
  text-align:center; white-space:nowrap;
}
.step-item.current .step-label{ color:var(--accent); font-weight:600; }
.step-item.done .step-label{ color:var(--ok); }

/* 타이머 */
.timer-box{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:12px;
  background:rgba(138,125,255,0.07);
  border:1px solid rgba(138,125,255,0.18);
  font-size:13px; margin-bottom:10px;
}
.timer-box.warn{
  background:rgba(251,146,60,0.07);
  border-color:rgba(251,146,60,0.25); color:#fb923c;
}
.timer-box.danger{
  background:rgba(255,77,109,0.07);
  border-color:rgba(255,77,109,0.25); color:var(--bad);
}
.timer-count{ font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }

/* 메시지 */
.msg-list{
  display:flex; flex-direction:column; gap:8px;
  max-height:300px; overflow-y:auto;
  padding:12px; scroll-behavior:smooth;
  background:rgba(0,0,0,0.18);
  border-radius:12px; border:1px solid var(--line);
}
.msg-bubble{
  max-width:76%; padding:8px 12px;
  border-radius:12px; font-size:13px;
  line-height:1.45; word-break:break-word;
}
.msg-bubble.mine{
  align-self:flex-end;
  background:rgba(138,125,255,0.20);
  border:1px solid rgba(138,125,255,0.25);
  border-bottom-right-radius:3px;
}
.msg-bubble.other{
  align-self:flex-start;
  background:rgba(255,255,255,0.07);
  border:1px solid var(--line);
  border-bottom-left-radius:3px;
}
.msg-bubble.system{
  align-self:center; max-width:100%;
  background:transparent; border:none;
  color:var(--muted); font-size:11px; font-style:italic;
}
.msg-time{ font-size:10px; color:var(--muted); margin-top:3px; }
.msg-input-row{
  display:flex; gap:8px; margin-top:8px; align-items:center;
}

/* 입금증 */
.proof-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.proof-thumb{
  width:80px; height:80px; border-radius:10px;
  object-fit:cover; border:1px solid var(--line);
  cursor:pointer; transition:transform .1s;
}
.proof-thumb:hover{ transform:scale(1.06); }

/* 결제수단 카드 */
.pm-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line); border-radius:12px;
  margin-bottom:8px;
}
.pm-icon{
  width:38px; height:38px; border-radius:10px;
  background:rgba(138,125,255,0.14);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.pm-name{ font-size:14px; font-weight:600; }
.pm-account{ font-size:13px; color:var(--muted); font-family:monospace; }

/* 판매자 정보 바 */
.seller-info-bar{
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--line); margin-bottom:12px;
  flex-wrap:wrap;
}
.seller-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
}
.completion-badge{
  padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:600;
  background:rgba(34,197,94,0.12); color:var(--ok);
  border:1px solid rgba(34,197,94,0.2);
}

/* 지갑바 */
.walletbar{
  display:flex; flex-wrap:wrap; gap:8px; padding:10px 0;
}

/* 패널 내부 패딩 */
.panel-top{
  display:flex; justify-content:space-between;
  align-items:flex-start; gap:12px; flex-wrap:wrap;
  padding:16px;
}
.panel-body{ padding:0 16px 16px; }

/* hero */
.hero{ padding:20px 0 8px; }

/* kv 그리드 */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kv{ display:flex; flex-direction:column; gap:3px; }
@media(max-width:600px){ .grid{ grid-template-columns:1fr; } }

/* 신고 버튼 */
.report-link{
  color:var(--muted); font-size:12px; cursor:pointer;
  text-decoration:underline; background:none; border:none; padding:0;
}
.report-link:hover{ color:var(--bad); }