@font-face {
  font-family: 'YoonChildfundkoreaManSeh';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408@1.0/YoonChildfundkoreaManSeh.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ===== Base / Layout ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --ink: #111;
  --line: #e7e7e7;
}

html, body { width: 100%; min-height: 100vh; }

/* ✅ 전체 폰트 통일 (가장 중요) */
body.page{
  font-family: 'YoonChildfundkoreaManSeh', Arial, sans-serif;
  background: #ffffff;
  color: var(--ink);
  text-align: center;
  overflow-x: hidden;
  padding-top: 52px; /* fixed nav 공간 */
}

/* ✅ 버튼/인풋 등 폼 요소도 폰트 통일 */
button, input, select, textarea{
  font-family: 'YoonChildfundkoreaManSeh', Arial, sans-serif;
}

/* ===== Nav ===== */
.top-nav{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  z-index: 1000;
}

.top-nav ul{
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
}

.top-nav a{
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 10px;
}

.top-nav a:hover{
  background: #f2f6ff;
  color: #0b67c6;
}

/* ===== Ads / Counter ===== */
.ad-container,
.footer-ad-container{
  width: 360px;
  max-width: 100%;
  margin: 10px auto;
}

.counter-badge{
  width: 360px;
  max-width: 360px;
  margin: 8px auto 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
}

/* ===== Main container ===== */
.container.candy{
  width: 360px;
  max-width: 360px;
  margin: 0 auto;
  padding: 10px 0 20px;
}

/* ===== Section display ===== */
article{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.question{ display: none; }
.result{ display: none; }

/* ===== Images ===== */
#img, #img_main{
  width: 500px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* ===== Progress ===== */
.progress{
  width: 100%;
  background-color: #ffffff;
  border: 1px solid var(--line);
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar{
  background-color: #fbffc3;
}

/* ===== Buttons (사이즈/박스 통일) ===== */
/* ✅ 카카오 공유하기 버튼 기준으로 전부 동일 박스 */
.candy-btn{
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  border: 1px solid #000;
  border-radius: 12px;

  /* ✅ 박스 통일 핵심: 높이/패딩/라인하이트 */
  height: 56px;              /* 공유하기 버튼 박스 기준 */
  padding: 0 14px;           /* 좌우만 */
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: #000;
  cursor: pointer;
  background: #fff;
}

.candy-btn:active{ transform: translateY(1px); }

/* 시작 버튼 */
.candy-btn-start{
  background: rgb(251, 255, 195);
}

/* 질문 A/B 버튼은 텍스트가 길어서 높이만 다르게(박스 크게) */
.candy-btn-a,
.candy-btn-b{
  height: 100px;        /* 질문 버튼은 큰 박스 유지 */
  font-size: 14px;
  line-height: 1.25;
  padding: 12px 14px;   /* 긴 문장용 패딩 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

/* 질문 A/B 색상 */
.candy-btn-a{
  background: rgb(238, 255, 249);
  border-color: rgb(83, 255, 196);
}

.candy-btn-b{
  background: rgb(255, 253, 244);
  border-color: rgb(255, 225, 89);
}

/* 공유하기 버튼 */
.candy-btn-share{
  background: #ffe812;
  border-color: #111;
}

/* ✅ 결과 화면의 다시/다른 버튼도 공유하기와 동일 박스로 맞춤
   (현재 HTML이 candy-btn candy-btn-b / candy-btn-a 조합이므로
    여기서는 색만 유지되게 함) */
.result .candy-btn{
  height: 56px;         /* 공유하기와 동일 */
  font-size: 16px;      /* 공유하기와 동일 */
}

/* ===== Coupang ===== */
.coupang_ad{
  width: 320px;
  margin: 0 auto;
}

.coupang_ad img{
  width: 320px;
  height: 100px;
  display: block;
}

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