/* ═══════════════════════════════════════════════════════════════════════════
   말고리즘 — 문의 모달

   styles.css 를 건드리지 않고 별도 파일로 둔다. 랜딩 UI 점검이 끝난 상태에서
   기존 스타일시트를 수정하면 점검 결과가 무효가 되기 때문이다.
   색·간격·라운드는 styles.css 의 토큰(--bg-*, --tx-*, --amber …)을 그대로 쓴다.
   ═══════════════════════════════════════════════════════════════════════════ */

.ct {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--scrim, rgba(7, 8, 12, .72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overscroll-behavior: contain;
}

.ct[hidden] { display: none; }

/* 모달이 열려 있는 동안 뒤 배경이 스크롤되지 않게 한다 */
body.ct-open { overflow: hidden; }

.ct__panel {
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  background: var(--bg-3, #0E0F16);
  border: 1px solid var(--ln-1, rgba(255, 255, 255, .1));
  border-radius: 18px;
  box-shadow: var(--sh-card, 0 40px 90px -30px rgba(0, 0, 0, .8));
  padding: 28px;
  position: relative;
}

.ct__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ln-1, rgba(255, 255, 255, .1));
  border-radius: 50%;
  background: transparent;
  color: var(--tx-6, rgba(255, 255, 255, .6));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ct__close:hover { color: var(--tx, #fff); border-color: var(--ln-2, rgba(255, 255, 255, .18)); }

.ct__title {
  margin: 0 0 6px;
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tx, #fff);
}

.ct__body {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx-6, rgba(255, 255, 255, .6));
}

.ct__field { margin-bottom: 14px; }

.ct__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tx-7, rgba(255, 255, 255, .7));
}

.ct__input,
.ct__select,
.ct__textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--tx, #fff);
  background: var(--ctl-bg, #0C0D12);
  border: 1px solid var(--ln-1, rgba(255, 255, 255, .1));
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}

.ct__textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.ct__input:focus,
.ct__select:focus,
.ct__textarea:focus {
  outline: none;
  border-color: var(--peri, #8B95F2);
  box-shadow: 0 0 0 3px rgba(139, 149, 242, .18);
}

.ct__input::placeholder,
.ct__textarea::placeholder { color: var(--tx-3, rgba(255, 255, 255, .32)); }

.ct__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .ct__row { grid-template-columns: 1fr; } }

.ct__submit {
  width: 100%;
  margin-top: 4px;
  padding: 13px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-amber, #1A1500);
  background: var(--amber, #FFC83D);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.ct__submit:hover:not(:disabled) { filter: brightness(1.06); }
.ct__submit:disabled { opacity: .6; cursor: default; }

.ct__consent {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--tx-4, rgba(255, 255, 255, .4));
}

.ct__msg {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  min-height: 1.2em;
}
.ct__msg.is-ok  { color: var(--pos, #34D399); }
.ct__msg.is-err { color: var(--neg, #FF6060); }

/* 밝은 테마 — styles.css 가 :root[data-theme="light"] 로 토큰을 덮어쓰므로
   여기서는 스크림만 보정한다 */
:root[data-theme="light"] .ct {
  background: rgba(255, 255, 255, .76);
}

@media (prefers-reduced-motion: reduce) {
  .ct__close, .ct__input, .ct__select, .ct__textarea, .ct__submit { transition: none; }
}