/* ============================================================
   개인정보 수집 동의 체크박스(원형, 핑크-레드) + 상세보기 모달
   — metahoop_arena_index.html / ax_dx_robot_index.html /
     xrvpstudio_index.html 문의 모달 3곳이 공용으로 사용.
   base.html 에서 블록 밖(공통)으로 로드되므로 모든 homepage 페이지에
   적용되지만, 대상 엘리먼트가 없는 페이지에서는 아무 효과가 없다.
   ============================================================ */

:root {
  --pc-accent: #F0356E;
  --pc-gray:   #C6C6CE;
}

.pc-row {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             6px;
  flex-wrap:       wrap;
  margin:          10px 0 0;
}

.pc-check {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  user-select: none;
  font-size:   .82rem;
  color:       #444;
}

.pc-check input[type="checkbox"] {
  display: none;   /* frontend/templates/homepage/metahoop/metahoop_arena_reservation.html
                       .consent-checkbox-input 과 동일한 hidden-input 기법 */
}

.pc-check__mark {
  position:      relative;
  flex-shrink:   0;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  border:        2px solid var(--pc-gray);
  background:    transparent;
  transition:    background .15s ease, border-color .15s ease;
}

.pc-check__mark::after {
  content:    "";
  position:   absolute;
  left:       50%;
  top:        46%;
  width:      5px;
  height:     9px;
  border:     solid #fff;
  border-width: 0 2px 2px 0;
  transform:  translate(-50%, -50%) rotate(45deg);
  opacity:    0;
  transition: opacity .15s ease;
}

.pc-check input[type="checkbox"]:checked + .pc-check__mark {
  background:   var(--pc-accent);
  border-color: var(--pc-accent);
}
.pc-check input[type="checkbox"]:checked + .pc-check__mark::after {
  opacity: 1;
}

/* 필수 미체크 상태로 제출 시도 시 표시 */
.pc-check.pc-check--error .pc-check__mark {
  border-color: var(--pc-accent);
  box-shadow:   0 0 0 3px rgba(240, 53, 110, .14);
}

.pc-check__text { line-height: 1.3; }

.pc-check__view {
  background:      none;
  border:          none;
  padding:         0;
  font-size:       .82rem;
  color:           #888;
  text-decoration: underline;
  cursor:          pointer;
}
.pc-check__view:hover { color: var(--pc-accent); }

/* ── 상세보기 모달(문의 모달 위에 겹쳐 뜸) ──────────────────── */
.pc-modal {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         6000;   /* .xrv-m-box(z-index:5000)보다 위 */
  align-items:     center;
  justify-content: center;
  padding:         20px;
}
.pc-modal.is-open { display: flex; }

.pc-modal__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, .5);
}

.pc-modal__box {
  position:        relative;
  background:      #fff;
  border-radius:   14px;
  width:           min(480px, 100%);
  max-height:      80vh;
  display:         flex;
  flex-direction:  column;
  box-shadow:      0 12px 48px rgba(0, 0, 0, .28);
  overflow:        hidden;
}

.pc-modal__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 20px;
  border-bottom:   1px solid #eee;
  flex-shrink:     0;
}
.pc-modal__head h4 {
  margin:      0;
  font-size:   1rem;
  font-weight: 700;
  color:       #1a1a1a;
}
.pc-modal__close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  padding:         0;
  background:      none;
  border:          none;
  color:           #999;
  cursor:          pointer;
}
.pc-modal__close svg { width: 16px; height: 16px; }
.pc-modal__close:hover { color: #333; }

.pc-modal__body {
  padding:    18px 20px;
  overflow-y: auto;
  font-size:  .86rem;
  line-height: 1.65;
  color:      #555;
}
.pc-modal__body p {
  white-space: pre-line;   /* 원문의 줄바꿈/빈 줄 구조를 그대로 보존 */
  margin:      0 0 14px;
}
.pc-modal__body p:last-child { margin-bottom: 0; }

.pc-modal__foot {
  padding:       14px 20px;
  border-top:    1px solid #eee;
  text-align:    right;
  flex-shrink:   0;
}
.pc-modal__ok {
  padding:       9px 20px;
  background:    var(--pc-accent);
  color:         #fff;
  border:        none;
  border-radius: 8px;
  font-size:     .86rem;
  font-weight:   600;
  cursor:        pointer;
}
.pc-modal__ok:hover { opacity: .9; }