/* 수도 맞추기 — 랜딩과 같은 어두운 네온 톤.
   한 화면에 지도·국기·보기 4개가 다 들어가야 해서 세로 스크롤이 안 생기게 잡는다. */
* { box-sizing: border-box; margin: 0; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, #24356e 0%, transparent 60%),
    linear-gradient(#0e1638 0%, #0b1030 45%, #070b22 100%) #0b1030;
  color: #eaf2ff;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  overflow-x: hidden;
}

.wrap {
  min-height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 14px 8px;
  display: flex;
  flex-direction: column;
}

/* ---------- 머리줄 ---------- */
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 8px;
}
.top h1 {
  flex: 1;
  text-align: center;
  font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-shadow: 0 0 18px rgba(90, 150, 255, .55);
}
.home {
  color: #cfe0ff;
  background: rgba(20, 28, 66, .72);
  border: 1px solid #3a4a8f;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.status {
  font-size: .88rem;
  font-weight: 700;
  color: #ffd86b;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 200, 80, .5);
}

/* ---------- 공통 패널 ---------- */
.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.1vh, 12px);
  min-height: 0;             /* 지도가 남는 높이만 쓰도록 */
}
.panel.center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

.big-emoji { font-size: clamp(3.2rem, 14vw, 5rem); filter: drop-shadow(0 8px 18px rgba(60, 140, 255, .45)); }
.panel h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem); font-weight: 900; }

.hint { font-size: .9rem; font-weight: 600; color: #8fa0d6; line-height: 1.55; }
.hint.best { color: #ffd86b; }

.btn-main {
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  color: #12183a;
  background: linear-gradient(#ffd86b, #ffab2e);
  border: none;
  border-radius: 999px;
  padding: 13px 34px;
  cursor: pointer;
  box-shadow: 0 5px 0 #b96b00, 0 10px 24px rgba(255, 170, 40, .35);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #b96b00, 0 14px 28px rgba(255, 170, 40, .45); }
.btn-main:active { transform: translateY(3px); box-shadow: 0 2px 0 #b96b00; }

.btn-sub {
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  color: #cfe0ff;
  background: rgba(20, 28, 66, .72);
  border: 1px solid #3a4a8f;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
}

/* ---------- 지도 ----------
   국기가 주인공이라 지도는 보조 크기. 힌트 카드가 둘 다 열려도 스크롤이 안 생기게 잡는다 */
.map-box {
  background: #101a44;               /* 상자 자체가 바다 — 지도 비율과 달라도 빈틈이 안 보인다 */
  border: 1.5px solid #33418a;
  border-radius: 12px;
  width: 100%;
  /* 가로는 언제나 다른 카드와 같은 폭으로. 높이는 지도 비율이 정한다 */
  display: flex;
  justify-content: center;
}
.wmap {
  width: 100%;
  height: 100%;
  display: block;
  max-height: inherit;
  border-radius: 12px;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .45));
}
.wmap-sea { fill: none; stroke: none; }   /* 바다는 상자 배경이 대신 그린다 */
.wmap-land {
  fill: #2e4390;
  stroke: #6d86e8;
  stroke-width: .8;
  stroke-linejoin: round;
}
/* 맞힌 나라의 점 — 은은한 초록, 애니메이션 없음. 지금 문제 마커(금색)와 구별된다 */
.wmap-pin {
  fill: #46d178;
  stroke: rgba(18, 50, 28, .85);
  stroke-width: .8;
  opacity: .9;
}
.wmap-cross {
  stroke: rgba(255, 216, 107, .38);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.wmap-dot {
  fill: #ffd86b;
  stroke: #7a3d00;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, .9));
}
.wmap-pulse {
  fill: none;
  stroke: #ffd86b;
  stroke-width: 2;
  animation: wmap-pulse 1.4s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes wmap-pulse {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ---------- 국기 문제 카드 — 처음엔 국기가 주인공 ---------- */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 5vw, 26px);
  background: rgba(20, 28, 66, .72);
  border: 1px solid #3a4a8f;
  border-radius: 18px;
  padding: clamp(6px, 1.1vh, 12px) 16px;
}
.flag {
  font-size: clamp(3.2rem, 15vw, 4.4rem);
  line-height: 1.05;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5));
}
/* 국기 이모지가 안 나오는 브라우저(윈도우 크롬)용 두 글자 배지 */
.flag-badge {
  display: inline-grid;
  place-items: center;
  width: 2.4em;
  height: 1.7em;
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, #3b6fe0, #7a3fd8);
  border: 2px solid #a9c2ff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.hero-ask {
  font-size: clamp(1.05rem, 4.8vw, 1.3rem);
  font-weight: 900;
  color: #eaf2ff;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.continent {
  font-size: .78rem;
  font-weight: 700;
  color: #7dffd0;
  background: rgba(20, 60, 50, .6);
  border: 1px solid #2d8f6f;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* ---------- 보기 ---------- */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.choice {
  font: inherit;
  font-weight: 800;
  font-size: clamp(.95rem, 4.2vw, 1.1rem);
  color: #eaf2ff;
  background: linear-gradient(#232a4d, #171d3d);
  border: 1px solid #3a4a8f;
  border-radius: 14px;
  padding: clamp(9px, 1.6vh, 15px) 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 #0d1230;
  transition: transform .08s ease;
}
.choice:hover { transform: translateY(-2px); border-color: #5ef2ff; }
.choice:disabled { cursor: default; transform: none; }
.choice.right {
  color: #08321a;
  background: linear-gradient(#7dff9e, #35d668);
  border-color: #bfffd2;
  box-shadow: 0 3px 0 #0d1230, 0 0 18px rgba(110, 255, 150, .55);
  animation: choice-pop .35s cubic-bezier(.2, 1.6, .4, 1);
}
.choice.wrong {
  color: #ffd7e4;
  background: linear-gradient(#5c1f36, #43152a);
  border-color: #d84f77;
  animation: choice-shake .3s ease;
}
.choice.dim { opacity: .45; }
@keyframes choice-pop { from { transform: scale(.85); } }
@keyframes choice-shake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------- 결과 칸 ---------- */
.below {
  min-height: clamp(100px, 14vh, 132px);   /* 결과가 나타나도 화면이 안 흔들리게 미리 잡아 둔다 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: verdict-pop .35s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes verdict-pop { from { opacity: 0; transform: translateY(10px); } }
.verdict-line { font-size: clamp(1.05rem, 4.6vw, 1.25rem); font-weight: 900; }
.verdict-line.good { color: #7dff9e; text-shadow: 0 0 14px rgba(110, 255, 150, .5); }
.verdict-line.bad { color: #ff7ae0; text-shadow: 0 0 14px rgba(255, 110, 220, .5); }
.fact {
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: #b9c6ee;
  line-height: 1.5;
}
.btn-next { padding: 10px 30px; font-size: .98rem; margin-top: 2px; }

/* ---------- 결과 화면 ---------- */
.score-line { font-weight: 900; }
.score-line b { font-size: clamp(2.6rem, 12vw, 3.6rem); color: #ffd86b; text-shadow: 0 0 22px rgba(255, 200, 80, .55); }
.score-line span { font-size: 1.3rem; color: #8fa0d6; }
.end-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.foot {
  text-align: center;
  padding-top: 6px;
  font-size: .78rem;
  color: #7b89bd;
}

/* 창이 낮을 때 — 낮은 데스크톱 창이나 가로 모드 */
@media (max-height: 700px) {
  .big-emoji { font-size: 2.6rem; }
  .foot { display: none; }
}

/* ---------- 힌트 — 세로로 쌓인 슬롯 두 개. 닫힘=노란 점선 단추, 열림=파란 카드 ---------- */
.hint-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hint-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
  font-size: clamp(.92rem, 4vw, 1rem);
  font-weight: 800;
  color: #ffe9b0;
  background: rgba(255, 200, 80, .08);
  border: 1px dashed rgba(255, 200, 80, .55);
  border-radius: 14px;
  padding: clamp(9px, 1.5vh, 13px) 14px;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.hint-btn:hover:not(:disabled) { background: rgba(255, 200, 80, .18); transform: translateY(-1px); }
.hint-btn:disabled { opacity: .35; cursor: default; }
.hint-btn .hint-num { color: #ffd86b; white-space: nowrap; }
.hint-btn .hint-label { flex: 1; white-space: nowrap; }
.hint-btn .hint-go {
  font-size: .74rem;
  font-weight: 700;
  color: #ffd86b;
  border: 1px solid rgba(255, 200, 80, .5);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.hint-btn:disabled .hint-go { visibility: hidden; }

.hint-card {
  background: rgba(120, 160, 255, .13);
  border: 1px solid rgba(140, 175, 255, .55);
  border-radius: 14px;
  padding: clamp(8px, 1.4vh, 12px) 14px;
  box-shadow: 0 0 16px rgba(90, 140, 255, .2);
  animation: verdict-pop .3s cubic-bezier(.2, 1.6, .4, 1);
}
.hint-card .hint-num {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #9db4ea;
  margin-bottom: 4px;
}
.hint-body {
  font-size: clamp(1rem, 4.4vw, 1.12rem);
  font-weight: 700;
  color: #eef4ff;
  line-height: 1.55;
}
/* 힌트 1 둘째 줄(나라 소개) — 첫 줄(한국과의 연결)과 톤을 달리해 구분한다 */
.hint-body + .hint-body { margin-top: 5px; }
.hint-line2 { color: #becdf2; font-weight: 600; }
.hint-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hint-name b {
  font-size: clamp(1.15rem, 5.2vw, 1.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.hint-name small { color: #cfe0ff; font-weight: 700; font-size: clamp(.95rem, 4vw, 1.1rem); }

/* 수도를 구글 지도에서 열어 보는 길 */
.maps-link {
  display: inline-block;
  margin-top: 8px;
  font-size: .85rem;
  font-weight: 700;
  color: #bfe0ff;
  text-decoration: none;
  background: rgba(90, 150, 255, .14);
  border: 1px solid rgba(120, 175, 255, .45);
  border-radius: 999px;
  padding: 7px 15px;
}
.maps-link:hover { background: rgba(90, 150, 255, .26); }

/* 마커를 손가락으로 누르기 좋게 넓힌 판 (보이지는 않는다) */
.wmap-hit { fill: transparent; }
/* 지도를 누를 수 있다는 것을 살짝 알린다 */
.map-box { -webkit-tap-highlight-color: rgba(120, 175, 255, .25); }
.wmap-marker { cursor: pointer; }

/* 아직 안 밝혀진 나라 — 국기 자리를 비워 두고 물음표만 둔다.
   크기는 진짜 국기와 같게 잡아야 힌트 2에서 화면이 튀지 않는다. */
.flag-unknown {
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.1em;
  font-size: clamp(3.2rem, 15vw, 4.4rem);
  color: #8592cc;
  font-weight: 900;
  background: rgba(120, 140, 200, .1);
  border: 3px dashed rgba(140, 165, 230, .45);
  border-radius: 14px;
  filter: none;
}

/* ---------- 몇 문제 풀지 고르기 ---------- */
.size-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}
.size-label { font-size: .9rem; color: #a9bbe8; font-weight: 700; }
.size-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.size-btn {
  font: inherit;
  font-weight: 800;
  font-size: .92rem;
  color: #cfe0ff;
  background: rgba(90, 150, 255, .12);
  border: 2px solid rgba(120, 175, 255, .4);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}
.size-btn:hover { background: rgba(90, 150, 255, .24); }
.size-btn[aria-pressed="true"] {
  color: #12183a;
  background: linear-gradient(#ffd86b, #ffab2e);
  border-color: #ffe9a8;
}

/* ---------- 넓은 화면: 지도를 왼쪽에 세우는 2단 배치 ----------
   지도를 폭에 맞춰 키우면 세로가 그만큼 커져 낮은 창에서 넘친다.
   가로가 넉넉한 화면에서는 지도를 옆으로 빼서 세로를 아낀다. */
@media (max-width: 480px) {
  .hint-body { line-height: 1.45; }
  .below { min-height: 0; }
}

@media (min-width: 900px) {
  /* 넓은 화면도 가운데 한 줄 기둥 — 두올링고·Seterra 방식.
     질문과 답이 늘 세로로 이어져 눈이 한 방향으로만 흐른다. */
  .wrap { max-width: 820px; }
  .map-box { height: clamp(200px, 30vh, 300px); }
  .choice { padding-top: 16px; padding-bottom: 16px; font-size: 1.05rem; }
  .hero-ask { font-size: 1.35rem; }
}

.hint-dim { color: #8fa3d8; font-size: .86em; }

/* ---------- 시작 화면 규칙표 ----------
   점수는 색으로 구분한다. 글자 크기가 아니라 색이 먼저 눈에 들어온다. */
.rules {
  list-style: none;
  margin: 2px 0;
  padding: 0;
  display: grid;
  gap: 8px;
  width: min(430px, 90vw);
}
.rules li {
  display: grid;
  grid-template-columns: 4.4em 1fr;   /* 점수 칸을 맞춰 세로로 나란히 서게 한다 */
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(140, 165, 230, .22);
  text-align: left;
}
.rules .pt {
  font-weight: 900;
  font-size: 1.06rem;
  text-align: center;
  padding: 4px 0;
  border-radius: 10px;
}
.rules .txt {
  color: #dbe6ff;
  font-size: clamp(.95rem, 3.6vw, 1.04rem);
}

/* 점수마다 다른 색 — 높을수록 밝고 따뜻하게, 감점은 붉게 */
.rules .r3 .pt { color: #12321c; background: linear-gradient(#8ef0a8, #46d178); }
.rules .r2 .pt { color: #33260a; background: linear-gradient(#ffe08a, #ffc043); }
.rules .r1 .pt { color: #0f2740; background: linear-gradient(#a8d8ff, #5fb0f5); }
.rules .rm .pt { color: #3a0f16; background: linear-gradient(#ffb4bf, #ff6d80); }
.rules .r3 { border-color: rgba(90, 220, 130, .4); }
.rules .rm { border-color: rgba(255, 120, 140, .4); }

/* ---------- 시작 화면을 시원하게 ---------- */
#start.panel {
  gap: clamp(14px, 2.4vh, 22px);
}

/* 시작 화면 장식 지도 — 제목이 주인공이라 살짝 흐리게, 폭도 줄여서 */
.start-map {
  width: min(100%, 420px);
  margin: 0 auto;
  opacity: .75;
  pointer-events: none;      /* 눌러도 아무 일 없게 */
}
.start-map .wmap {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
  /* 높이도 화면에 맞춰 상한 — 시작 화면에 스크롤이 생기면 안 된다 */
  max-height: clamp(88px, 15vh, 150px);
}
#start .big-emoji { font-size: clamp(3.6rem, 13vw, 5.4rem); }
#start h2 {
  font-size: clamp(1.6rem, 6.4vw, 2.4rem);
  letter-spacing: -.02em;
}
#start .hint { font-size: clamp(1rem, 3.8vw, 1.12rem); line-height: 1.7; }
#start .size-label { font-size: 1rem; }
#start .size-btn { font-size: 1rem; padding: 11px 20px; }
#start .btn-main { font-size: 1.25rem; padding: 16px 44px; }

/* ---------- 낮은 폰 화면 (주소창까지 감안한 실제 높이) ----------
   시작 화면이 길어져서 스크롤이 생기지 않게, 높이에 따라 차곡차곡 줄인다. */
@media (max-height: 760px) {
  #start.panel { gap: clamp(8px, 1.6vh, 14px); }
  .start-map { width: min(100%, 320px); }
  #start .big-emoji { font-size: clamp(2.6rem, 9vh, 3.6rem); }
  #start h2 { font-size: clamp(1.3rem, 4.4vh, 1.8rem); }
  #start .hint { font-size: .96rem; line-height: 1.5; }
  .rules { gap: 6px; }
  .rules li { padding: 8px 14px; }
  #start .btn-main { font-size: 1.1rem; padding: 13px 36px; }
}

@media (max-height: 680px) {
  .start-map { width: min(100%, 260px); }
  #start .big-emoji { font-size: 2.4rem; }
  #start h2 { font-size: 1.25rem; }
  #start .hint { font-size: .9rem; }
  #start .hint-dim { display: none; }      /* 지도 안내는 놀이 중에 알게 된다 */
  .rules li { padding: 6px 12px; }
  .rules .pt { font-size: .95rem; padding: 2px 0; }
  .rules .txt { font-size: .9rem; }
  #start .size-btn { font-size: .92rem; padding: 8px 15px; }
  #start .btn-main { font-size: 1.05rem; padding: 11px 32px; }
}

@media (max-height: 600px) {
  .start-map { display: none; }            /* 아주 낮은 화면에선 지도를 접는다 */
  #start .big-emoji { display: none; }     /* 지구본을 접고 규칙을 남긴다 */
  #start h2 { font-size: 1.15rem; }
  .rules li { padding: 5px 11px; }
}

/* ---------- 모바일: 지도를 화면 끝까지 ----------
   카드 폭에 맞추면 지도가 작아 보인다. 좌우 여백을 넘겨 화면을 꽉 채우고,
   늘어난 높이만큼 힌트·보기 쪽 여백을 덜어 스크롤이 생기지 않게 한다. */
@media (max-width: 700px) {
  .map-box {
    height: min(calc((100vw + 28px) / 2.5), 20vh);   /* 그림 높이에 맞추되, 낮은 화면에서는 화면 몫만큼만 */
    width: calc(100% + 28px);
    margin-left: -14px;
    margin-right: -14px;
    border-radius: 0;
    border-left: none;               /* 화면 끝까지 붙으니 옆 테두리는 뺀다 */
    border-right: none;
  }
  .wmap { border-radius: 0; }

  .hint-card, .hint-btn { padding-top: 9px; padding-bottom: 9px; }
  .hint-body { margin: 2px 0; }
  .choice { padding-top: 11px; padding-bottom: 11px; }
  .panel { gap: clamp(5px, 1vh, 10px); }
}

/* 낮은 폰(주소창까지 감안) — 글은 그대로 두고 여백만 더 덜어낸다 */
@media (max-width: 700px) and (max-height: 700px) {
  .hint-body { line-height: 1.4; font-size: .92rem; }
  .hint-num { font-size: .78rem; }
  .hero { padding-top: 8px; padding-bottom: 8px; }
  .hero-ask { font-size: 1rem; line-height: 1.35; }
  .flag, .flag-unknown { font-size: clamp(2.4rem, 11vw, 3rem); }
  .hint-card, .hint-btn { padding-top: 7px; padding-bottom: 7px; }
  .choice { padding-top: 9px; padding-bottom: 9px; }
  .wrap { padding-bottom: 4px; }
}

/* ---------- 진행 막대 ---------- */
.pbar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(140, 165, 230, .25);
  overflow: hidden;
}
.pbar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd86b, #ffab2e);
  transition: width .4s ease;
}

/* ---------- 힌트 영역 ----------
   세로 한 줄. 예전에는 2칸 격자였는데, 하나만 열면 남은 단추가 반쪽만 차지하고
   그 안에서 글자가 세로로 쪼개졌다. 단추도 카드도 늘 전체 폭을 쓴다. */
.hint-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hint-slot { display: block; }
.hint-btn, .hint-card { width: 100%; }

/* ---------- 피드백 띠 (두올링고 방식) ---------- */
.feedback {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.2);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.feedback.show { transform: translateY(0); }
.feedback.good { background: #103a24; border-top: 2px solid #46d178; }
.feedback.bad  { background: #3a1220; border-top: 2px solid #ff6d80; }

.feedback-in {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.feedback-text { flex: 1; min-width: 0; }
.feedback .verdict-line { margin: 0; font-weight: 900; font-size: clamp(1rem, 4vw, 1.15rem); }
.feedback.good .verdict-line { color: #8ef0a8; }
.feedback.bad  .verdict-line { color: #ffb4bf; }
.feedback .fact { margin: 3px 0 0; font-size: .9rem; color: #dbe6ff; }
.feedback .fact[hidden] { display: none; }
.feedback .btn-next { flex: none; margin: 0; }

/* 놀이 중에는 푸터를 치운다 — 피드백 띠 자리이기도 하다 */
body.in-game .foot { display: none; }

/* 띠가 올라오면 그 높이만큼 아래 여백을 만들어 보기가 가려지지 않게 한다 */
body.has-feedback #game { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 700px) and (max-height: 700px) {
  body.has-feedback #game { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.wmap-pin-hit { fill: transparent; }
.wmap-pin-g { cursor: pointer; }