/* /app/ 광고 랜딩: 섹션 그림(글자 지운 원화) 위에 실제 글자·배지를 비율 좌표로 올린다.
   넓은 창(900px 이상)은 데스크톱 원화, 그 아래는 휴대폰 원화. 글자 크기는 섹션 폭 기준(cqw). */
body.app { background: #fbf3e6; margin: 0; padding-bottom: var(--bar-h); --bar-h: 100px; }
/* 하단 바 아래 안전 영역. 안드로이드 인앱 웹뷰는 값이 부풀려져 0으로 둔다(inapp-safe.js) */
:root { --bar-safe: env(safe-area-inset-bottom, 0px); }
.android-inapp { --bar-safe: 0px; }
.app main { overflow: hidden; }
.lay-m { display: none; }
/* 넓은 화면에서 양옆 여백: 섹션 폭을 1200px로 묶고, 그림 양 끝 3%만 크림 바탕으로 녹인다(거울 띠 없음) */
.lay-d { width: min(100% - 2 * clamp(20px, 4vw, 72px), 1200px); margin-inline: auto; }
.lay-d .s .art { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.2%, #000 96.8%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3.2%, #000 96.8%, transparent 100%); }
/* 문제 카드(KO): 그림 대신 웹 요소로 또렷하게. 그림자 없음 */
.s .pc { position: absolute; box-sizing: border-box; background: #fffaf1; border: max(1px, .11cqw) solid #e4cfb0; border-radius: .95cqw; transform-origin: 50% 50%; }
.lay-m .s .pc { border-width: max(1px, .24cqw); border-radius: 2.2cqw; }
.s .pc .q { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #dc5730; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); line-height: 1; letter-spacing: -.02em; }
.s .pc .pct { position: absolute; inset: 0; margin: 0; }
.s .pc .pct .ln { position: absolute; white-space: nowrap; line-height: 1; }
.s .pct.f-d { font-family: var(--display); }
.s { position: relative; container-type: inline-size; width: 100%; }
.s .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }
.s .t { position: absolute; inset: 0; margin: 0; font-weight: 400; letter-spacing: 0; pointer-events: none; }
.s .t .ln { position: absolute; white-space: nowrap; line-height: 1; pointer-events: auto; }
.s .f-d { font-family: var(--display); }
.s .f-s { font-family: var(--sans); font-weight: 600; }
.s .mk { color: #1d6b35; background: linear-gradient(transparent 58%, #fce77a 58%, #fce77a 96%, transparent 96%); padding: 0 .05em; }
.s .mk-n { color: #fce77a; }
.s .bdg { position: absolute; display: block; }
.s .bdg img { height: 100%; width: auto; display: block; }
.s .bdg:focus-visible { outline: 3px solid #1e6b3a; outline-offset: 3px; border-radius: 10px; }
/* 하단 고정 다운로드 바 */
.dlbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: block; text-decoration: none; color: #fff; }
.dlbar-top { display: none; }
.dlbar-in { display: flex; align-items: center; gap: 16px; background: #1b5c2b; padding: 10px max(24px, calc((100vw - 1200px) / 2)) calc(12px + var(--bar-safe)); min-height: 88px; box-shadow: 0 -6px 20px rgba(40, 30, 10, .14); }
.dlbar-icon { width: 68px; height: 68px; border-radius: 16px; flex: none; }
.dlbar-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dlbar-1 { font-family: var(--sans); font-weight: 800; font-size: 27px; line-height: 1.25; }
.dlbar-2 { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.3; color: #f4e3a0; }
.dlbar-m { display: none; font-family: var(--sans); font-weight: 800; font-size: 21px; }
.dlbar-btn { flex: none; background: #fdf3d8; color: #1f5a2a; font-family: var(--sans); font-weight: 800; font-size: 24px; padding: 14px 40px; border-radius: 999px; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.dlbar:hover .dlbar-btn { background: #fff8e6; }
.dlbar:focus-visible .dlbar-btn { outline: 3px solid #fce77a; outline-offset: 2px; }
@media (max-width: 899px) {
  .lay-d { display: none; }
  .lay-m { display: block; max-width: 600px; margin-inline: auto; }
  body.app { --bar-h: 64px; }
  .dlbar-in { gap: 12px; padding: 8px 16px calc(8px + var(--bar-safe)); min-height: 60px; }
  .dlbar-icon { width: 44px; height: 44px; border-radius: 11px; }
  .dlbar-1, .dlbar-2 { display: none; }
  .dlbar-m { display: block; }
  .dlbar-btn { font-size: 17px; padding: 10px 24px; }
}
@media (min-width: 601px) and (max-width: 899px) {
  .lay-m .art { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
}