/* =====================================================================
   HackByte 공용 모달 (hb-modal)
   ---------------------------------------------------------------------
   화면마다 모달을 따로 만들다 보니 폭·모서리·버튼·간격이 제각각이었다.
   여기 한 곳에서 모양을 정의하고, 각 화면은 partials/modal.ejs 로 불러 쓴다.

   구조
     .hb-modal                    바깥(고정 오버레이)
       .hb-modal__backdrop        어두운 배경 (클릭 시 닫힘)
       .hb-modal__card            카드
         .hb-modal__head          아이콘 + 제목 + 설명
         .hb-modal__rows          한 줄씩 나뉜 항목 목록 (글머리 기호 대신 행)
         .hb-modal__note          강조 안내 한 줄
         .hb-modal__body          자유 본문 (약관 등 긴 글)
         .hb-modal__actions       버튼 영역

   변형
     크기  .hb-modal--sm | (기본) | .hb-modal--lg
     톤    .hb-modal--danger | .hb-modal--brand   (아이콘/마커 색)
   ===================================================================== */
.hb-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.hb-modal.active {
  display: flex;
}

.hb-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.hb-modal__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(460px, 92%);
  max-height: calc(100dvh - 48px);
  padding: 26px 24px 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--radius);
  background: var(--surface, #fff);
  box-shadow: var(--shadow, 0 20px 45px rgba(15, 23, 42, 0.18));
  text-align: left;
}

.hb-modal--sm .hb-modal__card { width: min(400px, 92%); }
.hb-modal--lg .hb-modal__card { width: min(720px, 92%); }

/* ── 머리말: 아이콘 + 제목 + 설명 ───────────────────────────────────── */
.hb-modal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.hb-modal__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: rgba(148, 163, 184, 0.14);
  color: var(--text, #0f172a);
}

.hb-modal__icon:empty { display: none; }

.hb-modal__icon svg {
  width: 22px;
  height: 22px;
}

.hb-modal--danger .hb-modal__icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.hb-modal--brand .hb-modal__icon { background: rgba(37, 99, 235, 0.1); color: var(--primary, #2563eb); }

/* 공급자 브랜드 색 — 어느 연동인지 한눈에 보이게 */
.hb-modal__icon[data-provider="google"] { background: rgba(234, 67, 53, 0.1); color: #ea4335; }
.hb-modal__icon[data-provider="naver"] { background: rgba(3, 199, 90, 0.12); color: #03c75a; }
.hb-modal__icon[data-provider="github"] { background: rgba(15, 23, 42, 0.08); color: #0f172a; }
.hb-modal__icon[data-provider="discord"] { background: rgba(88, 101, 242, 0.12); color: #5865f2; }

.hb-modal__head-text { min-width: 0; }

.hb-modal__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text, #0f172a);
}

.hb-modal__lead {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.55;
}

.hb-modal__lead:empty { display: none; }

/* ── 항목 목록: 글머리 기호 대신 구분선으로 나눈 행 ─────────────────── */
.hb-modal__rows {
  display: grid;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.3));
  border-radius: var(--radius);
  overflow: hidden;
}

.hb-modal__rows:empty { display: none; }

.hb-modal__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text, #0f172a);
}

.hb-modal__row + .hb-modal__row {
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.3));
}

.hb-modal__row b { font-weight: 600; }

/* 마커: 여러 줄로 넘어가도 첫 줄에만 붙어 정렬이 흐트러지지 않는다 */
.hb-modal__mark {
  flex: 0 0 auto;
  width: 10px;
  height: 2px;
  margin-top: 9px;
  border-radius: var(--radius);
  background: var(--muted, #94a3b8);
}

.hb-modal--danger .hb-modal__mark { background: #ef4444; }
.hb-modal--brand .hb-modal__mark { background: var(--primary, #2563eb); }

/* 긍정/부정을 함께 보여줄 때 (예: 하는 일 / 안 하는 일) */
.hb-modal__row--ok .hb-modal__mark { background: #22c55e; }
.hb-modal__row--no .hb-modal__mark { background: #ef4444; }

/* ── 강조 안내 ──────────────────────────────────────────────────────── */
.hb-modal__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(37, 99, 235, 0.07);
  color: #1d4ed8;
  font-size: 13px;
  line-height: 1.55;
}

.hb-modal__note:empty { display: none; }

.hb-modal__note::before {
  content: attr(data-icon);
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.4;
}

/* ── 자유 본문 (약관처럼 긴 글) ─────────────────────────────────────── */
.hb-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 4px;
  padding-right: 4px;
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.7;
}

.hb-modal__body:empty { display: none; }

.hb-modal__body h3 {
  margin: 16px 0 6px;
  color: var(--text, #0f172a);
  font-size: 14px;
  font-weight: 700;
}

.hb-modal__body p { margin: 0 0 8px; }

.hb-modal__body ul,
.hb-modal__body ol {
  margin: 0 0 10px;
  padding-left: 20px;
  list-style: disc;
}

.hb-modal__body li { margin-bottom: 4px; }

.hb-modal__version {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, 0.16);
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 600;
}

/* ── 동의 체크 ──────────────────────────────────────────────────────── */
.hb-modal__agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.3));
  border-radius: var(--radius);
  background: rgba(37, 99, 235, 0.04);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.hb-modal__agree input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--primary, #2563eb);
}

/* ── 버튼 영역: 모든 모달이 같은 배치·크기 ──────────────────────────── */
.hb-modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.hb-modal__btn {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hb-modal__btn--ghost {
  border-color: var(--border, rgba(148, 163, 184, 0.3));
  background: transparent;
  color: var(--text, #0f172a);
}

.hb-modal__btn--ghost:hover:not(.is-busy) {
  background: rgba(148, 163, 184, 0.1);
}

.hb-modal__btn--primary {
  background: var(--primary, #2563eb);
  color: #fff;
}

.hb-modal__btn--primary:hover:not(.is-busy) { background: #1d4ed8; }

.hb-modal__btn--danger {
  background: #ef4444;
  color: #fff;
}

.hb-modal__btn--danger:hover:not(.is-busy) { background: #dc2626; }

/* 어두운 버튼 위에서는 로더도 밝게 (is-busy 는 global.css 공통) */
.hb-modal__btn--primary.is-busy::after,
.hb-modal__btn--danger.is-busy::after {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
}

/* 닫기(X) — 본문이 긴 모달에서 머리말 오른쪽에 둔다 */
.hb-modal__close {
  margin-left: auto;
  align-self: flex-start;
  padding: 4px 8px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted, #64748b);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.hb-modal__close:hover { background: rgba(148, 163, 184, 0.14); }

@media (max-width: 480px) {
  .hb-modal__card {
    width: calc(100% - 24px);
    padding: 22px 18px 18px;
  }
  .hb-modal__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .hb-modal__btn { width: 100%; }
}