/* utility-contact.css — 작성 전용 문의 화면 */
.ucontact,
.ucontact-admin,
.ucontact-admin-list {
  width: min(100%, 860px);
  margin: var(--sp-6) auto var(--sp-8);
}

.ucontact-head {
  margin-bottom: var(--sp-6);
  text-align: center;
}

.ucontact-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ucontact-head h1,
.ucontact-admin-head h1 {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.25;
  letter-spacing: -.035em;
}

.ucontact-head p {
  margin: 14px auto 0;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

.ucontact-card,
.ucontact-admin {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.ucontact-card { overflow: hidden; }

.ucontact-notice {
  padding: 20px 28px;
  border-bottom: 1px solid #dbeafe;
  background: var(--color-primary-soft);
  color: #1e3a8a;
}

.ucontact-notice strong { display: block; margin-bottom: 8px; font-size: 15px; }
.ucontact-notice ul { margin: 0;  font-size: 14px; line-height: 1.65; }
.ucontact-notice li + li { margin-top: 3px; }

.ucontact-form { padding: 30px 28px 32px; }
.ucontact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ucontact-field { min-width: 0; margin-bottom: 22px; }
.ucontact-field-full { width: 100%; }
.ucontact-field label,
.ucontact-label-row label {
  display: inline-block;
  margin-bottom: 9px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
}
.ucontact-field label span,
.ucontact-label-row label span { color: var(--color-error); }

.ucontact-form input[type="text"],
.ucontact-form input[type="email"],
.ucontact-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ucontact-form input[type="text"],
.ucontact-form input[type="email"] { height: 50px; padding: 0 14px; }
.ucontact-form textarea { min-height: 190px; padding: 14px; line-height: 1.65; resize: vertical; }
.ucontact-form input:focus,
.ucontact-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.ucontact-form input::placeholder,
.ucontact-form textarea::placeholder { color: #98a2b3; }

.ucontact-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ucontact-count,
.ucontact-help { color: var(--color-text-secondary); font-size: 13px; }
.ucontact-help { margin: 7px 0 0; line-height: 1.5; }

.ucontact-consent {
  margin-top: 2px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-soft);
}
.ucontact-consent-copy strong { display: block; margin-bottom: 7px; font-size: 15px; }
.ucontact-consent-copy p { margin: 3px 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.6; }
.ucontact-consent-copy a { color: var(--color-primary); text-underline-offset: 3px; }
.ucontact-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; cursor: pointer; font-size: 14px; font-weight: 700; }
.ucontact-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-primary); }

.ucontact-captcha { margin-top: 22px; }
.ucontact-captcha #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ucontact-captcha #captcha_key { height: 46px; border: 1px solid var(--color-border); border-radius: var(--radius-input); }
.ucontact-actions { display: flex; justify-content: center; margin-top: 26px; }
.ucontact-submit { min-width: 180px; min-height: 50px; border: 0; cursor: pointer; font-size: 16px; font-weight: 700; }
.ucontact-submit:disabled { cursor: wait; opacity: .65; }

.ucontact-success {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: var(--sp-5);
  padding: 18px 20px;
  border: 1px solid #abefc6;
  border-radius: 12px;
  background: var(--color-success-soft);
  color: var(--color-success);
}
.ucontact-success-icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  font-weight: 800;
}
.ucontact-success strong { display: block; margin-bottom: 4px; }
.ucontact-success p { margin: 0; color: #067647; font-size: 14px; line-height: 1.55; }

/* 관리자 문의 상세 */
.ucontact-admin { box-sizing: border-box; padding: 32px; }
.ucontact-admin-head { padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
.ucontact-admin-head h1 { margin-top: 10px; font-size: 30px; }
.ucontact-admin-head p { margin: 8px 0 0; color: var(--color-text-secondary); }
.ucontact-admin-badge { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 13px; font-weight: 700; }
.ucontact-admin-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.ucontact-admin-meta div { padding: 16px 18px; }
.ucontact-admin-meta div + div { border-left: 1px solid var(--color-border); }
.ucontact-admin-meta dt { margin-bottom: 6px; color: var(--color-text-secondary); font-size: 13px; }
.ucontact-admin-meta dd { margin: 0; color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; }
.ucontact-admin-meta a { color: var(--color-primary); }
.ucontact-admin-content { min-height: 180px; padding: 22px; border-radius: 12px; background: var(--color-surface-soft); color: var(--color-text); line-height: 1.75; }
.ucontact-admin-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.ucontact-delete { border: 1px solid #FDA29B; background: #fff; color: #B42318; }
.ucontact-delete:hover,
.ucontact-delete:focus-visible { border-color: #D92D20; background: #FEF3F2; color: #912018; }

/* 관리자 문의 목록 */
.ucontact-admin-list { color: var(--color-text); }
.ucontact-admin-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--sp-5);
}
.ucontact-admin-list-head h1 { margin: 0; font-size: 34px; line-height: 1.3; }
.ucontact-admin-list-head p { max-width: 620px; margin: 10px 0 0; color: var(--color-text-secondary); line-height: 1.65; }
.ucontact-admin-count { flex: 0 0 auto; color: var(--color-text-secondary); font-size: 14px; }
.ucontact-admin-list-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ucontact-admin-list-items li { margin: 0; }
.ucontact-admin-list-items a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.ucontact-admin-list-items a:hover,
.ucontact-admin-list-items a:focus-visible { border-color: #93C5FD; background: #F8FBFF; }
.ucontact-admin-list-items strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ucontact-admin-list-items time { color: var(--color-text-secondary); font-size: 13px; }
.ucontact-admin-list-badge { padding: 4px 8px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 12px; font-weight: 700; }
.ucontact-admin-empty { padding: 72px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text-secondary); text-align: center; box-shadow: var(--shadow-card); }

@media (max-width: 767px) {
  .ucontact,
  .ucontact-admin,
  .ucontact-admin-list { margin: var(--sp-5) 0 var(--sp-8); }
  .ucontact-head { text-align: left; }
  .ucontact-head p { margin-left: 0; }
  .ucontact-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ucontact-notice { padding: 18px; }
  .ucontact-form,
  .ucontact-admin { padding: 22px 18px; }
  .ucontact-admin-meta { grid-template-columns: minmax(0, 1fr); }
  .ucontact-admin-meta div + div { border-top: 1px solid var(--color-border); border-left: 0; }
  .ucontact-admin-actions { flex-direction: column-reverse; }
  .ucontact-admin-actions .ucalc-btn { justify-content: center; width: 100%; box-sizing: border-box; }
  .ucontact-admin-list-head { align-items: flex-start; flex-direction: column; }
  .ucontact-admin-list-items a { grid-template-columns: auto minmax(0, 1fr); }
  .ucontact-admin-list-items time { grid-column: 2; }
}

@media (max-width: 480px) {
  .ucontact-head h1 { font-size: 30px; }
  .ucontact-notice ul { padding-left: 18px; }
  .ucontact-captcha #captcha { align-items: flex-start; }
  .ucontact-submit { width: 100%; }
}