/* 인덱스에서 보드로 들어온 사람에게 예시 드릴을 권하는 모달 (user 2026-08-07/08).
   court-view 와 tactics-board 가 같은 파일을 쓴다 — 두 페이지는 스타일시트를 공유하지 않아
   각자 <link> 로 불러온다. 원래 court-view/style.css 안에 있었는데 TB 도 쓰게 되면서 분리했다. */

/* ── 예시 드릴 제안 모달 — 코트뷰 · 전술보드 공용 (board-example.js) ─────────────────────────────────────
   게임의 "드릴 선택" 모달(style.css .movement-start-panel.adj-start-preview)과 같은 디자인 언어.
   코트뷰의 흰 .export-modal 껍데기를 쓰면 같은 서비스인데 다른 제품처럼 보인다.
   토큰은 style.css 에서 그대로 가져왔다 — 값을 바꾸려면 두 곳을 함께 손볼 것:
     패널 rgba(12,12,12,.9) / 반경 22px / 테두리 rgba(255,255,255,.22)
     배지·카드제목 #f4bb44 / 카드 rgba(255,255,255,.06) / 강조 rgba(217,48,37,…)
   테마(라이트/다크)를 타지 않는다: 어두운 패널 자체가 고정 스타일이다. */
.cvex[hidden] { display: none; }

.cvex {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 16px;
}

.cvex__backdrop { position: absolute; inset: 0; background: rgba(6, 9, 14, .62); backdrop-filter: blur(2px); }

.cvex__panel {
  position: relative;
  width: min(500px, 94%);
  max-height: min(92dvh, 760px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: rgba(12, 12, 12, .93);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  color: #fff8ea;
  text-align: center;
}

.cvex__close {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px; line-height: 1;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8);
  font-size: 19px; cursor: pointer;
}
.cvex__close:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.cvex__badge {
  display: inline-block; margin: 0 auto .6rem;
  padding: .28rem 1rem; border-radius: 999px;
  border: 1px solid rgba(197, 146, 52, .8);
  color: #f4bb44; font-weight: 800; letter-spacing: .04em; font-size: .9rem;
}

.cvex__title { font-size: 1.9rem; font-weight: 800; line-height: 1.15; margin: 0; color: #fff; }

.cvex__sub {
  font-size: .96rem; line-height: 1.5;
  margin: .45rem 0 1.1rem;
  color: rgba(255, 255, 255, .78);
}

.cvex__list { display: flex; flex-direction: column; gap: .6rem; }

/* 카드: 아이콘 원 + 본문. 게임의 .adj-start-card 와 같은 배치(좌측 원형 아이콘 + 좌측정렬 텍스트). */
.cvex__item {
  display: flex; gap: .9rem; align-items: flex-start; text-align: left; width: 100%;
  padding: .95rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .06);
  color: inherit; font: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cvex__item:hover:not(:disabled) {
  border-color: rgba(217, 48, 37, .65);
  background: rgba(217, 48, 37, .14);
  transform: translateY(-1px);
}
.cvex__item:disabled { opacity: .5; cursor: default; }

.cvex__ico {
  width: 2.4rem; height: 2.4rem; min-width: 2.4rem;
  border-radius: 999px;
  background: rgba(197, 146, 52, .22);
  color: #f4bb44;
  display: inline-flex; align-items: center; justify-content: center;
}
.cvex__item:hover:not(:disabled) .cvex__ico { background: rgba(217, 48, 37, .28); color: #ffb3ae; }

.cvex__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 auto; }
.cvex__head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.cvex__name { font-size: .95rem; font-weight: 800; color: #f4bb44; line-height: 1.2; }
.cvex__meta { font-size: .72rem; color: rgba(255, 255, 255, .6); white-space: nowrap; }

/* 설명은 두 줄까지 — 드릴마다 길이가 제각각이라 모달 높이가 널뛴다. */
.cvex__desc {
  font-size: .8rem; line-height: 1.4; color: rgba(255, 255, 255, .82);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 경고: 목록을 가리지 않고 아래에 펼쳐 '무엇을 고르다 나온 경고'인지 맥락을 남긴다. */
.cvex__warn {
  margin-top: .8rem; padding: .9rem 1rem; text-align: left;
  border-radius: .9rem;
  border: 1px solid rgba(217, 48, 37, .6);
  background: rgba(217, 48, 37, .15);
}
.cvex__warn-text { margin: 0 0 .7rem; font-size: .82rem; line-height: 1.5; white-space: pre-line; color: rgba(255, 255, 255, .94); }
.cvex__warn-btns { display: flex; gap: .5rem; justify-content: flex-end; }

.cvex__btn {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: #fff8ea;
  padding: .55rem 1rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.cvex__btn:hover { background: rgba(255, 255, 255, .2); }
.cvex__btn--go { background: #d93025; border-color: #d93025; font-weight: 700; }
.cvex__btn--go:hover { background: #c0281e; border-color: #c0281e; }
.cvex__btn--wide { width: 100%; margin-top: .9rem; }

@media (max-width: 520px) {
  .cvex__panel { padding: 18px 16px 14px; }
  .cvex__title { font-size: 1.5rem; }
  .cvex__item { padding: .8rem .9rem; gap: .7rem; }
  .cvex__head { flex-direction: column; align-items: flex-start; gap: .15rem; }
}