/* ══ TICKET-558 나라 고르기 시트(PRD-042/AC-4) ══
   `screens/p2-CountrySheet.html`의 둘째 시트 인라인 스타일을 값 그대로 클래스로 옮기고 색만 토큰 변수로 바꿨다.
   정본은 정지 그림이라 열림 배경(스크롤 영역)과 고른 카드 표시만 더했다. 보스 고르기 시트 위에 겹쳐 열린다. */
/* 바깥 틀(스크림·시트)은 공용 `.board-sheet*`(tone=deep, tier=2, size=tall, pad=country) — TICKET-600. 정본 p2-CountrySheet 바탕은 시트 전체 #0F1528 한 가지. */
/* TICKET-621: 제목 위 간격은 이 줄(12px, 정본 CountrySheet)이 가진다 — 공통 .g2a-title의 14px를 받지 않는다. */
.cs-titlerow .g2a-title { margin-top: 0; }
.cs-titlerow { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
/* 목록 영역 — 시트 배경과 같은 색이라 따로 깔지 않는다(TICKET-574 3-2, 위 주석).
   border-radius 없음(TICKET-578) — 전에 "스크롤 클립 모서리"용으로 16px를 뒀으나, 맨 위 "자동"
   줄(.cs-auto)이 패딩 없이 이 영역에 바로 붙어 있어 그 줄 자체의 12px 모서리가 이 16px 클립
   모서리보다 바깥으로 튀어나오는 지점이 생겨(두 원이 어긋남) 선택 테두리 위쪽 모서리가 살짝 잘려
   보였다(스테이징 스크린샷). 이 radius는 아래쪽에서도 padding-bottom 48px에 가려 실제로 보인 적이
   없어(.cs-scroll 참고) 없애도 잃는 게 없다 — 시트 자체의 둥근 모서리(24px, .cs-sheet)는 이 안쪽
   영역과 멀리 떨어져 있어 무관하다. */
.cs-body { margin-top: 10px; flex: 1; min-height: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.cs-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 2; pointer-events: none; background: linear-gradient(var(--board-sheet-inner-clear), var(--board-sheet-inner)); }
.cs-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 48px; }
.cs-scroll::-webkit-scrollbar { display: none; }

/* "자동 (이 폰)" 줄 — 고르면 하늘 2px 테두리 + ✓(정본), 안 고르면 같은 2px 테두리를 카드 테두리 색으로 */
.cs-auto {
  display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 50px; padding: 0 12px; /* 정본 min-height 46px + 테두리 2px×2(content-box)를 border-box로 */
  border-radius: 12px; border: 2px solid var(--board-surface-border); background: var(--board-country-card-bg);
  box-sizing: border-box; color: var(--board-text); font-family: 'Gothic A1', sans-serif; font-size: 14px; font-weight: 800;
  text-align: left; cursor: pointer;
}
.cs-auto.on { border-color: var(--board-accent); background: transparent; }
.cs-sub { font-family: 'Chakra Petch', sans-serif; font-size: 12px; color: var(--board-text-faint); font-weight: 600; }
.cs-check { color: var(--board-accent); visibility: hidden; }
.cs-auto.on .cs-check { visibility: visible; }

.cs-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-card {
  min-height: 62px; padding: 9px 12px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--board-surface-border);
  background: var(--board-country-card-bg); display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  color: var(--board-text); font-family: 'Gothic A1', sans-serif; text-align: left; cursor: pointer;
}
/* 지금 현지 21:00~06:00 — 톤다운(선택은 가능, 정본 opacity .45) */
.cs-card.is-night { opacity: .45; }
/* 고른 카드 — 정본 그림에 없어 "자동" 줄과 같은 하늘 테두리로(2px처럼 보이게 안쪽 1px를 더해 크기는 그대로) */
.cs-card.on { border-color: var(--board-accent); box-shadow: inset 0 0 0 1px var(--board-accent); }
/* 밤인 나라를 골랐을 때 톤다운(.45)이 고른 표시까지 흐리게 만들지 않도록 고른 카드는 또렷하게 */
.cs-card.is-night.on { opacity: 1; }
.cs-card__name { font-size: 15px; font-weight: 800; color: var(--board-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-card__city { font-weight: 700; color: var(--board-text-faint); }
.cs-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cs-card__time { font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 700; color: var(--board-text-dim); white-space: nowrap; }
.cs-card__gmt { font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 700; color: var(--board-text-soft); white-space: nowrap; }

.cs-hint { font-size: 11px; color: var(--board-text-faint); padding: 8px 0 10px; }
.cs-btns { margin-top: 4px; padding-bottom: 0; /* 아래 여백은 시트 아래 패딩 24(+safe-area)만(정본 v1183) */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn.x.cs-close { color: var(--board-text-dim); } /* .btn.x(0,2,0)에 덮이지 않게 같은 접두 — g2a-close와 같다 */