/* ========================================================================== */
/* 0) DESIGN TOKENS — colors & type (border/radius는 숫자값 사용)               */
/* ========================================================================== */
:root{
  /* Page width */
  --page-min: 300px;
  --page-max: 500px;
  --gnb-min-height: 140px;

  /* Brand */
  --primary-500: #2299FA;
  --primary-400: #7cc2ff;
  --primary-300: #a8d7ff;
  --primary-200: #cde8ff;
  --primary-100: #e6f4ff;

  --secondary-700: #6b3fa7;
  --secondary-500: #8b5cf6;
  --secondary-300: #c4a8ff;
  --secondary-100: #efe7ff;

  /* Grays (guide) */
  --gray-900:#0b0f14;
  --gray-800:#1a242f;
  --gray-700:#2b3947;
  --gray-600:#3c4d5f;
  --gray-500:#536579;
  --gray-400:#7d8fa3;
  --gray-300:#a7b4c1;
  --gray-200:#e8edf2;
  --gray-100:#f6f8fa;
  --gray-50:#AEB3BE;

  /* Surface */
  --bg-app:#FFFFFF;
  --bg-muted:#F7F9FB;

  /* Typography scale (guide pt 그대로) */
  --fs-h1: 1.5rem;    /* 24px */
  --fs-h2: 1.25rem;   /* 20px */
  --fs-h3: 1.125rem;  /* 18px */
  --fs-b1: 1rem;      /* 16px */
  --fs-b2: 0.875rem;  /* 14px */
  --fs-b3: 0.8125rem;  /* 13px */
  --fs-b4: 0.9375rem;  /* 15px */
  --fs-cap1: 0.75rem; /* 12px */

  --lh-tight: 1.15;
  --lh-head:  1.25;
  --lh-body:  1.45; 

  --fw-bold:   700;
  --fw-medium: 500;
  --fw-light:  300; 
}

/* ========================================================================== */
/* 1) RESET / BASE                                                             */
/* ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Pretendard","Pretendard Variable",system-ui,-apple-system,sans-serif;
  background:var(--bg-app);
  max-width:var(--page-max);
  min-width:var(--page-min);
  margin:0 auto;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

/* 배경 흰색 (가이드 토큰 반영) */
.bg{
  padding-bottom: calc(var(--cta-h, 0px) + env(safe-area-inset-bottom, 0px));
  max-width:var(--page-max);
  min-width:var(--page-min);
  margin:0 auto;
  background-color: #FFFFFF;
}

/* ========================================================================== */
/* 2) UTILITIES — type                                              */
/* ========================================================================== */
.h1{font-size:var(--fs-h1);line-height:var(--lh-head);font-weight:var(--fw-bold)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-head);font-weight:var(--fw-bold)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-head);font-weight:var(--fw-bold)}

.body1-b{font-size:var(--fs-b1);line-height:var(--lh-body);font-weight:var(--fw-bold)}
.body1-m{font-size:var(--fs-b1);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.body1-l{font-size:var(--fs-b1);line-height:var(--lh-body);font-weight:var(--fw-light)}

.body2-b{font-size:var(--fs-b2);line-height:var(--lh-body);font-weight:var(--fw-bold)}
.body2-m{font-size:var(--fs-b1);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.body2-l{font-size:var(--fs-b2);line-height:var(--lh-body);font-weight:var(--fw-light)}
.body2-2{font-size:var(--fs-b3);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.body2-3{font-size:var(--fs-b4);line-height:var(--lh-body);font-weight:var(--fw-bold)}

.cap1-b{font-size:var(--fs-cap1);line-height:var(--lh-tight);font-weight:var(--fw-bold)}
.cap1-m{font-size:var(--fs-cap1);line-height:var(--lh-tight);font-weight:var(--fw-medium)}
.cap1-l{font-size:var(--fs-cap1);line-height:var(--lh-tight);font-weight:var(--fw-light)}

/* ========================================================================== */
/* 3) COMPONENTS                                                               */
/* ========================================================================== */

/* Header */
.sub-header{
  position:sticky; top:0; z-index:10; height:52px;
  padding:10px 20px; background:#fff;
  display:flex; align-items:center;
}
.hdr-back{
  padding:0;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center
}
.hdr-back img{width:24px;height:24px;display:block}
.hdr-title{
  flex:1;text-align:center;
  color:var(--gray-900);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}
.hdr-spacer{width:24px}
   
  /* ===== Hero/Copy ===== */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 40px 20px 0px;
  }
  .hero-icon {
    width: 60px;
    height: 60px;
  }
  .hero-title {
    color: var(--gray-900);
    text-align: center;
  }

  /* ===== Code card ===== */
  .code-card {
    padding: 20px;
    background: var(--primary-100);
    border-radius: 12px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .code-label {
    color: var(--gray-500)
  }
  .code-input {
    width: 100%;
    height: 58px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    letter-spacing: 6px;
    text-align: center;
    color: var(--gray-900);
    outline: none;
  }
  .code-input::placeholder {
    color: var(--gray-300);
    letter-spacing: 0;
    text-align: center;
    padding-left: 20px;
    font-size: var(--fs-b1);
    font-weight: 500;
  }

  /* ===== Prize list ===== */
  .section {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sec-title {color:var(--gray-500);}
  .prize-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .prize {
    background: var(--gray-100);
    border-radius: 8px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .prize .badge {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }
  .prize-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .prize .rank {
    color: var(--gray-900)
  }
  .prize .desc {
    color: var(--gray-600)
  }

  /* ========== 하단 CTA(고정) ========== */
  .page-cta {
    position:fixed;left:50%;bottom:0;transform:translateX(-50%);
    width:100%;max-width:var(--page-max);
    background:var(--bg-app);border:0;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;align-items:center;gap:12px;
    z-index:1200
  }
  .btn-cta {
    width:100%;padding:16px 0;border:0;border-radius:12px;
    background:var(--primary-500);color:#fff;cursor:pointer
  }
  .btn-cta:active {
    transform: translateY(1px);
  }
  

  /* Helper */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

     /* ===== 모달 ===== */
.modal-wrap {
  position: fixed;
  inset: 0;
  display: none;        /* 기본 숨김 */
  z-index: 3000;        /* CTA(1200)보다 위 */
}

.modal-wrap.show {
  display: block;       /* 열릴 때 즉시 표시 */
}

.modal-dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45); /* 바로 적용, 트랜지션 없음 */
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 420px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
  padding: 20px;
  text-align: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* 콘텐츠 */
.mdl-coin {
  width: 72px; height: 72px;
  object-fit: contain;
  margin: 8px auto 10px;
  display: block;
  max-width: 100%;
}
.mdl-title { margin: 0;  color : var(--gray-900)  }
.mdl-desc  { margin: 10px 0 24px;color: var(--gray-600); font-weight: 400; }
.mdl-mycoin {color: var(--gray-800); border-radius: 8px;background: var(--gray-100);padding: 16px;margin-bottom: 20px;}
.mdl-coin .mdl-em{ font-weight: var(--fw-bold)}

.mdl-ok{width:100%;padding:16px 0;border:0;border-radius:12px;
  background:var(--primary-500);color:#fff;cursor:pointer}


/* 바디 튐 방지(모달 오픈 중 외부 스크롤 차단 시 안정) */
html, body { overscroll-behavior: contain; }

/* Article */
.article-section{width:100%;display:flex;flex-direction:column}
.article-head{
  padding:24px 20px 36px;display:flex;flex-direction:column;gap:10px;background:#fff}
.article-title{margin:0;color:var(--gray-900)}
.article-title .accent{color:var(--primary-500)}
.note-badge{
  display:inline-flex;align-self:flex-start;max-width:100%;
  padding:4px 6px 2px; border-radius:4px;
  color:var(--primary-500);background:var(--primary-100)
}
.article-lead{margin:0;color:var(--gray-700)}


/* ===== 검색바 ===== */
.search-bar{
  width:100%; padding:12px 0; border-bottom:1px solid var(--gray-700);
  display:flex; align-items:center; gap:8px; margin: 0 20px;
}
.search-ico{ width:24px; height:24px; flex:0 0 auto; }
.search-input{
  flex:1 1 0; font-size:15px; line-height:22px;
  border:0; outline:0; background:transparent; color:var(--gray-900);
}
.search-clear{
  flex:0 0 auto; border:0; background:transparent; cursor:pointer;
  font-size:24px; line-height:1; color:var(--gray-500); padding:4px 6px; font-weight: var(--fw-light);
}

.search-input::placeholder {
  color: var(--gray-300);
  opacity: 1;          
}


/* WebKit(크롬/사파리/엣지) 기본 검색 'X' 버튼 숨김 */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* 파이어폭스 등 일관성: 기본 모양 제거 */
.search-input{
  -webkit-appearance: none;
  appearance: none;
}