/* =====================================================
   DELABS Token Claim page
   main.css 의 시각 언어를 그대로 가져온다(새 디자인 언어를 만들지 않는다):
     · 서브페이지 배경  img-bg-subpage.png  — index-libre / index-adpass 의 .nfts 와 동일
     · 유리 패널        rgba(255,255,255,.05) + backdrop blur
                        + ::after 마스크 그라디언트 1px 헤어라인 (.sub-list / .nft-wrap 기법)
     · 헤어라인 디바이더 radial-gradient(50% 50% …, #fff → 투명) — .footer-wrap::before 와 동일
     · CTA             흰 1px 테두리 → hover 시 흰 채움 (.intro .btn-join 과 동일)
     · 토큰            --color-grey100/200/300, --color-rrs-green(#aadd00), Poppins 대문자 헤드라인
   ===================================================== */

.claim-page {
  /* 페이지 지역 토큰 — main.css :root 값을 감싸서 폴백을 한곳에 모아둔다 */
  --panel-bg: rgba(255, 255, 255, 0.05);
  --panel-line: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  --panel-radius: 20px;
  --accent: var(--color-rrs-green, #aadd00);
  --hairline: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0) 100%
  );

  background: #0b0b0b;
  color: var(--color-grey100, #bdc6db);
  font-family: "Noto Sans", "Noto Sans JP", -apple-system, "Apple SD Gothic Neo", sans-serif;
}

/* 서브페이지 배경 — 문서 최상단에 깔고 아래로 서서히 지운다.
   position:absolute 라 스크롤하면 같이 밀려 올라간다(고정이면 하단에서 부자연스럽다). */
.claim-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 900px;
  background: url(/assets/images/renewal/img-bg-subpage.png) 50% 20% no-repeat;
  background-size: cover;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* 인클루드 헤더/푸터가 이 안에 들어온다. 짧은 페이지에서도 푸터를 바닥에 붙인다. */
.claim-page #container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.claim-view {
  flex: 1 0 auto;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  box-sizing: border-box;
  /* 헤더 높이가 vw 기준(4.17vw)이라 고정 px 로는 넓은 화면에서 겹친다 */
  padding: calc(4.17vw + 72px) 20px 120px;
}

/* ── 공통 유리 패널 ────────────────────────
   클래스를 새로 심지 않고 셀렉터 목록으로 묶는다(카드 일부는 claim.js 가 그린다). */
.wallet-card,
.lookup-card,
.alloc-card,
.claim-empty,
.claim-security-note,
.claim-alert {
  position: relative;
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--panel-radius);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}
.wallet-card::after,
.lookup-card::after,
.alloc-card::after,
.claim-empty::after,
.claim-security-note::after,
.claim-alert::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1px;
  background: var(--panel-line);
  /* content-box 와 border-box 를 xor → 안쪽이 뚫려 1px 테두리만 남는다 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  border-radius: inherit;
  pointer-events: none;
}

/* ── hero ─────────────────────────────── */
.claim-hero {
  position: relative;
  text-align: center;
  margin-bottom: 56px;
}
/* 타이틀 뒤 부드러운 광원 — .spec .cover-bg 의 blur 글로우와 같은 성격 */
.claim-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  width: 620px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
}
.claim-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-grey200, #868b98);
}
.claim-title {
  font-family: "Poppins", -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 64px);
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.15;
}
.claim-title span {
  color: var(--color-grey200, #868b98);
}
.claim-desc {
  max-width: 620px;
  margin: 20px auto 0;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.8;
  color: var(--color-grey200, #868b98);
}
.claim-desc strong {
  color: #fff;
  font-weight: 600;
}
.claim-security-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-grey100, #bdc6db);
  text-align: left;
}
.claim-security-note .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 1px rgba(170, 221, 0, 0.6);
  flex: none;
}
.claim-security-note strong {
  color: #fff;
  font-weight: 600;
}

/* ── wallet card ──────────────────────── */
.claim-wallet {
  margin-bottom: 56px;
}
.wallet-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
}
.wallet-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.wallet-label {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-grey200, #868b98);
}
.wallet-address {
  font-family: "Poppins", monospace, sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
  color: #fff;
  word-break: break-all;
}
.wallet-network {
  font-size: 12px;
  color: var(--color-grey200, #868b98);
}
/* wallet-right: 배지 → Connect 버튼 → 힌트 를 세로로 쌓아, 버튼 바로 옆에서 "여기서 청구"
   임을 강조한다. (Connect 냐 Look up 이냐로 혼동해 클레임 버튼을 못 찾은 문제 대응) */
.wallet-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}
.wallet-hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-grey200, #868b98);
  text-align: right;
  max-width: 240px;
}
.wallet-hint strong {
  color: var(--accent);
  font-weight: 600;
}
/* 진입 경로 배지 — Connect(여기서 청구) vs Look up(조회 전용)을 한눈에 구분한다.
   .claim-security-note 의 pill 문법을 그대로 따른다(새 시각 언어를 만들지 않는다). */
.path-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.path-badge.is-primary {
  color: #d6f26a;
  background: rgba(170, 221, 0, 0.12);
  border: 1px solid rgba(170, 221, 0, 0.45);
}
.path-badge.is-primary .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px rgba(170, 221, 0, 0.6);
  flex: none;
}
.path-badge.is-view {
  color: var(--color-grey200, #868b98);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.lookup-card .path-badge {
  margin-bottom: 13px;
}

/* ── buttons — .intro .btn-join 과 같은 규칙(흰 테두리 → hover 흰 채움) ── */
.btn-claim {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.btn-claim:hover {
  background: #fff;
  color: #000;
}
.btn-claim.primary {
  background: #fff;
  color: #000;
}
.btn-claim.primary:hover {
  background: transparent;
  color: #fff;
}
.btn-claim:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
/* 조회 모드 버튼 — 눌리지 않지만 "왜 회색인지"가 보이도록 라벨을 살려둔다.
   claim.js 가 `primary`(흰 채움) 위에 이 클래스를 얹으므로 채움을 되돌린다
   — 흰 배경에서는 dashed 테두리가 안 보여서 그냥 눌리는 CTA 로 읽힌다. */
.btn-claim.is-viewonly,
.btn-claim.primary.is-viewonly {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
  color: var(--color-grey100, #bdc6db);
  opacity: 0.85;
}
/* 텍스트형 보조 버튼(조회 해제 등) */
.btn-link {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--color-grey200, #868b98);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover {
  color: #fff;
}

/* global alert */
.claim-alert {
  margin-top: 16px;
  padding: 14px 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-grey100, #bdc6db);
  border-radius: 14px;
}
/* 상태색은 헤어라인 대신 실선 테두리로 — 경고는 흐릿하면 안 된다 */
.claim-alert.error,
.claim-alert.ok {
  border: 1px solid transparent;
}
.claim-alert.error::after,
.claim-alert.ok::after {
  padding: 0;
  -webkit-mask: none;
  mask: none;
  background: none;
  border: 1px solid currentColor;
  opacity: 0.75;
}
.claim-alert.error {
  color: #ff8c8e;
  background: rgba(255, 48, 51, 0.08);
}
.claim-alert.ok {
  color: #cdea72;
  background: rgba(170, 221, 0, 0.08);
}

/* ── 주소 조회(조회 전용) ─────────────── */
.lookup-card {
  margin-top: 16px;
  padding: 20px 24px;
}
.lookup-label {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-grey200, #868b98);
  margin-bottom: 13px;
}
.lookup-label strong {
  color: #fff;
  font-weight: 600;
}
.lookup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lookup-input {
  flex: 1 1 320px;
  min-width: 0;
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}
.lookup-input::placeholder {
  color: #5d6270;
}
.lookup-input:focus {
  outline: none;
  border-color: #fff;
}
.lookup-note {
  margin-top: 14px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  color: #cdea72;
  word-break: break-all;
}

/* ── section label ────────────────────── */
.section-label {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 26px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
  padding-top: 22px;
  margin-bottom: 22px;
}
/* .footer-wrap::before 와 같은 radial 헤어라인 */
.section-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--hairline);
}

/* ── allocation cards ─────────────────── */
.allocation-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.alloc-card {
  padding: 26px 28px;
}
.alloc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.alloc-name {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}
.alloc-chain {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-grey100, #bdc6db);
  white-space: nowrap;
}
.alloc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.alloc-stat {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
}
.alloc-stat .stat-label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--color-grey200, #868b98);
  margin-bottom: 7px;
}
.alloc-stat .stat-value {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
  color: #fff;
  word-break: break-all;
}
.alloc-stat .stat-value.accent {
  color: var(--accent);
}

/* progress */
.alloc-progress {
  margin-bottom: 22px;
}
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0%, var(--accent) 100%);
  width: 0%;
  transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-grey200, #868b98);
  margin-top: 9px;
}

.alloc-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.alloc-msg {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-grey200, #868b98);
}
.alloc-msg a {
  color: var(--color-grey100, #bdc6db);
  text-decoration: underline;
}
.alloc-msg.error {
  color: #ff8c8e;
}
.alloc-msg.ok {
  color: #cdea72;
}
/* 공개 노드 한 곳만 응답해서 금액을 대조하지 못한 상태. 청구 자체는 안전하므로(수령인·금액을
   컨트랙트가 고정) error 의 빨강이 아니라 ms-status.warn 과 같은 호박색을 쓴다. */
.alloc-msg.warn {
  color: #e8d48b;
}
/* 온체인 상태 로드 실패 시 연결 모드 카드의 msg 안에 인라인으로 붙는 "다시 시도" 링크. */
.alloc-msg .alloc-retry {
  margin-left: 8px;
  padding: 0 2px;
}

/* ── 멀티시그 실행 패널 (조회 모드) ──────
   유리 패널 안에 유리 패널을 겹치면 탁해진다 → 안쪽은 어둡게 파낸다. */
.alloc-multisig {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.4);
}
.ms-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin-bottom: 8px;
}
.ms-desc {
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-grey200, #868b98);
  margin-bottom: 14px;
}
/* 온체인 확인 결과 한 줄. calldata 본문(.ms-body)은 이 확인이 끝나야 열린다 —
   정지·청구액 0·무결성 실패 상태에서 실행 가능한 트랜잭션처럼 보이면 안 되기 때문. */
.ms-status {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-grey200, #868b98);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.ms-status.warn {
  color: #e8d48b;
  background: rgba(232, 212, 139, 0.08);
}
.ms-status.error {
  color: #ff8c8e;
  background: rgba(255, 140, 142, 0.08);
}
/* 온체인 확인에 실패했을 때만 나오는 "그래도 보기" 버튼. 기본으로 펼치지 않는 이유는
   msPanelState 의 "warn" 주석 참조 — 확인 못 한 calldata 를 확인된 것처럼 보이게 하지
   않으면서, RPC 장애 때 Safe 수혜자의 손을 묶지도 않기 위한 의도적 1클릭이다. */
.ms-reveal {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
}
.ms-reveal:disabled {
  opacity: 0.4;
  cursor: default;
}
.ms-body {
  margin-top: 4px;
}
.ms-body[hidden] {
  display: none;
}
.ms-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ms-row.error {
  grid-template-columns: 1fr;
  border-top: 0;
  font-size: 13px;
  color: #ff8c8e;
}
.ms-label {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-grey200, #868b98);
  padding-top: 2px;
}
.ms-value {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-grey100, #bdc6db);
  word-break: break-all;
}
.ms-value.mono {
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0;
  max-height: 128px;
  overflow-y: auto;
}
.ms-copy {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--color-grey100, #bdc6db);
  cursor: pointer;
  white-space: nowrap;
}
.ms-copy:hover {
  border-color: #fff;
  color: #fff;
}
/* execCommand 폴백용 임시 textarea — 보이지 않지만 포커스는 받아야 한다 */
.ms-copy-sink {
  position: fixed;
  top: -1000px;
  left: -1000px;
  opacity: 0;
}

/* ── empty / info ─────────────────────── */
.claim-empty {
  text-align: center;
  padding: 64px 24px;
  margin-bottom: 56px;
}
.empty-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin-bottom: 12px;
}
.empty-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-grey200, #868b98);
}
.empty-desc a {
  color: var(--color-grey100, #bdc6db);
  text-decoration: underline;
}

.claim-info {
  margin-top: 72px;
}
.info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-grey200, #868b98);
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 32px;
}
.info-list strong {
  color: #fff;
  font-weight: 600;
}
.contract-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.contract-links:empty {
  display: none;
}
.contract-links .contract-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--color-grey200, #868b98);
}
.contract-links a {
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--color-grey100, #bdc6db);
  text-decoration: underline;
  word-break: break-all;
}

/* ── responsive ───────────────────────── */
@media screen and (max-width: 1024px) {
  .alloc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  /* 모바일 헤더는 52px 고정(vw 아님) */
  .claim-view {
    padding: 104px 16px 80px;
  }
  .claim-page::before {
    height: 620px;
  }
  .claim-hero {
    margin-bottom: 40px;
  }
  .claim-security-note {
    display: flex;
    border-radius: 16px;
    align-items: flex-start;
  }
  .claim-security-note .dot {
    margin-top: 6px;
  }
  .claim-wallet {
    margin-bottom: 40px;
  }
  .wallet-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 22px 20px;
  }
  .wallet-address {
    font-size: 15px;
  }
  /* 모바일에선 wallet-card 가 세로 스택이므로 배지·버튼·힌트도 가운데 정렬한다 */
  .wallet-right {
    align-items: center;
  }
  .wallet-hint {
    text-align: center;
    max-width: none;
  }
  .alloc-card {
    padding: 22px 20px;
  }
  .alloc-head {
    flex-direction: column;
    align-items: flex-start;
  }
  /* 좁은 화면에서 120px 라벨 열을 유지하면 hex 값이 3~4자씩 끊긴다 → 세로로 쌓는다 */
  .ms-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ms-copy {
    justify-self: start;
    margin-top: 6px;
  }
  .lookup-input {
    flex: 1 1 100%;
  }
  .lookup-row .btn-claim {
    flex: 1 1 auto;
  }
  .claim-info {
    margin-top: 56px;
  }
}