/* ========================================================================== */
/* 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: var(--bg-app);
}

/* ========================================================================== */
/* 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}
   

  /* ===== Copy ===== */
  .hero-copy { padding: 16px 20px 8px; display: flex; flex-direction: column; gap: 12px; }
  .article-title { width: 100%; color: var(--gray-900) }
  .article-title .accent { color: #2299FA; }
  .sec-title {  color: var(--gray-500) }
  .hero-info { display: flex; flex-direction: row; gap: 20px; }
  .hero-info img { width: 60px; height: 60px; }

  /* ===== Grid ===== */
  .grid {
    padding: 20px 20px 88px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    background: linear-gradient(180deg, #FFFFFF 20%, var(--primary-100) 100%);
  }

  /* ===== 원형 출석칩 ===== */
  .day {
    inline-size: min(18vw, 72px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    border: 3px solid var(--primary-200) !important;
    background: #FFFFFF;
    color: var(--gray-300);
    padding: 0; cursor: pointer;
  }
  .day .d { color: #ACC5DE;  }

  /* 완료 상태 */
  .day.done {
    background: var(--primary-500); border-color: transparent; color: #fff; position: relative;
    box-shadow: 0 6px 16px rgba(34,153,250,.22);}

  /* 기본은 숨김 */
  .day .done-wrap { display: none; }

  /* 완료일 때만 보이기 */
  .day.done .done-wrap {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: absolute; inset: 0; gap: 6px;
  }
  .done-wrap img { width: 16px; }
  .day.done .done-txt {  color: #fff; font-size: var(--fs-b3);}
  .day.done .d, .day.done .p { display: none; }
  .p{font-size: var(--fs-b3);}

  /* 보너스 배지 */
  .badge-img {
    grid-column: 2 / span 2;
    display: flex; align-items: center; justify-content: center;
  }
  .badge-img img {
    max-width: 100%; height: auto; display: block; width: min(70%, 260px);
  }

  /* ========== 하단 CTA(고정) ========== */
  .page-cta {
    position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 100%; max-width: 500px; background: #fff; 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;
  }
  .cta-tip {
    margin:0;padding:10px 16px;background:var(--gray-900);color:#fff;
  border-radius:12px;position:relative;
  text-align:center;max-width:100%
  }
  .cta-tip::after {
    content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
    width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid var(--gray-900)
  }
  .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); }
  .btn-cta:disabled { background: var(--gray-200); box-shadow: none; color: var(--gray-300); cursor: default; }

   /* ===== 모달 ===== */
.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; }