/* 꼬꼬링 팝업 배너 — 모든 클래스는 .kp- 접두사 */
.kp {
  --kp-main: #ed5c23;
  --kp-ink: #2d2d2d;
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55);
  font-family: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
  word-break: keep-all;
}
.kp[hidden] { display: none; }
.kp *, .kp *::before, .kp *::after { box-sizing: border-box; }
 
/* 팝업 크기: 화면 폭의 88% (최대 400px). 안의 모든 크기는 em이라 팝업 폭에 비례해서 같이 줄고 늘어요 */
.kp-wrap { --kp-w: min(88vw, 400px); width: var(--kp-w); font-size: calc(var(--kp-w) / 20); display: flex; flex-direction: column; align-items: center; }
 
.kp-card {
  position: relative; width: 100%; aspect-ratio: 1535 / 1625;   /* background.png 의 가로 / 세로 */
  border-radius: .88em; overflow: hidden;                        /* 이미지 모서리(약 4.4%)와 맞춤 */
  background: #ffe5cd url('/img/panel/background.png') center / cover no-repeat;
}
 
/* 닫기 버튼 */
.kp-close { position: absolute; top: 3.5%; right: 3.7%; z-index: 3; width: 8.8%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: #d3d3d3; font: inherit; cursor: pointer; }
.kp-close::before, .kp-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 46%; height: .16em; border-radius: 1em; background: #fff; }
.kp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.kp-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.kp-close:focus-visible { outline: none; }

/* 장식 이미지: 위치(left/top)와 크기(width)는 팝업 기준 % — 숫자를 바꿔서 조절 */
.kp-img { position: absolute; display: block; height: auto; pointer-events: none; }
.kp-goose { left: 0%;  top: 0%;  width: 35%; z-index: 1; }
.kp-egg1  { left: 92%; top: 27.5%; width: 8%; }
.kp-egg2  { left: 3%;    top: 43%; width: 23%; }
.kp-coins { left: 75%;   top: 69.5%; width: 25%; z-index: 2; }
 
/* 글자 */
.kp-title {
  position: absolute; left: 0; right: 0; top: 19.5%; margin: 0; text-align: center;
  font-family: 'PartialSansKR', 'GmarketSansBold', 'Pretendard', sans-serif;
  font-size: 3.1em; font-weight: 300; line-height: 1.02; letter-spacing: -.03em; color: var(--kp-ink); z-index: 2
}
.kp-desc { position: absolute; left: 0; right: 0; top: 57%; margin: 0; text-align: center; font-size: 1em; font-weight: 800; line-height: 1.55; color: var(--kp-ink); }
.kp-desc em { font-style: normal; color: var(--kp-main); }
 
/* 아래 오렌지 버튼 */
.kp-cta {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16.3%;
  display: flex; align-items: center; justify-content: center;
  background: var(--kp-main); color: #fff; font-size: 1.1em; font-weight: 600; text-decoration: none; transition: background .2s;
}
.kp-cta:hover, .kp-cta:focus, .kp-cta:active, .kp-cta:visited { color: #fff; }
.kp-cta:hover { background: #d24a10; }
.kp-cta:focus-visible { outline: 3px solid var(--kp-ink); outline-offset: -3px; }
 
/* 다시 보지 않기 */
.kp-skip { display: inline-flex; align-items: center; gap: .5em; margin-top: .8em; padding: .55em 1.1em .55em .9em; border-radius: 999px; background: rgba(40, 40, 40, .88); color: #dad9d9; font-size: max(10px, .7em); cursor: pointer; }
.kp-skip input { appearance: none; -webkit-appearance: none; flex: none; width: 1.35em; height: 1.35em; margin: 0; border: 2px solid #dad9d9; border-radius: .3em; background: transparent; cursor: pointer; }
.kp-skip input:checked { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fcfbfb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.kp-skip input:focus-visible { outline: 2px solid #dddddd; outline-offset: 2px; }