/* =========================================
   PL Draftmaker AD - Zipple DARK theme
   ✅ scope: ONLY inside .pldmad-page
   ✅ do NOT touch global .btn or theme styles
   ✅ JS/기능 코드 수정 금지 (CSS만)
   ========================================= */

.pldmad-page{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ✅ 플러그인 영역 내부에서만 box-sizing */
.pldmad-page *{
  box-sizing: border-box;
  font-family: inherit;
  font-style: normal;
}

/* 카드(다크 글래스 박스) */
.pldmad-page .pldmad-container{
  max-width: 980px;
  margin: 26px auto;
  padding: 26px 22px 30px;

  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.22);

  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(110,231,183,.14), transparent 55%),
    rgba(11,18,32,.92);

  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  color: #F8FAFC;
}

/* 타이틀/서브타이틀 */
.pldmad-page .pldmad-container h1{
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
  transform: none !important;
}

.pldmad-page .pldmad-subtitle{
  text-align: center;
  font-size: 13px;
  color: rgba(184,196,218,.95);
  margin: 0 0 22px;
  line-height: 1.4;
  transform: none !important;
}

/* 폼 그리드 */
.pldmad-page .pldmad-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.pldmad-page .pldmad-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-column: span 2;
}

.pldmad-page .pldmad-field.half{
  grid-column: span 1;
}

.pldmad-page .pldmad-field label{
  font-size: 13px;
  color: rgba(184,196,218,.95);
}

/* 입력 */
.pldmad-page .pldmad-form input[type="text"],
.pldmad-page .pldmad-form textarea,
.pldmad-page .pldmad-form select{
  width: 100%;
  padding: 12px 14px;

  border: 1px solid rgba(148,163,184,.22);
  border-radius: 12px;

  font-size: 14px;
  background: rgba(255,255,255,.06);
  color: #F8FAFC;

  transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}

.pldmad-page .pldmad-form input[type="text"]::placeholder,
.pldmad-page .pldmad-form textarea::placeholder{
  color: rgba(184,196,218,.65);
}

.pldmad-page .pldmad-form textarea{
  resize: vertical;
  min-height: 110px;
}

.pldmad-page .pldmad-form input[type="text"]:focus,
.pldmad-page .pldmad-form textarea:focus,
.pldmad-page .pldmad-form select:focus{
  outline: none;
  border-color: rgba(96,165,250,.65);
  box-shadow: 0 0 0 3px rgba(96,165,250,.14);
  background: rgba(255,255,255,.07);
}

/* select option (다크 배경에서도 가독성 유지) */
.pldmad-page .pldmad-form select option{
  background: #0B1220;
  color: #F8FAFC;
}

/* 액션 row */
.pldmad-page .pldmad-actions-row{
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* 버튼: 기존 그대로 유지 (우리 클래스만) */
.pldmad-page .pldmad-btn{
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  background: linear-gradient(135deg, #34d399, #60a5fa);
  color: #0b1220;

  box-shadow: 0 4px 10px rgba(0,0,0,.22);
  transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
  transform: none !important;
}

.pldmad-page .pldmad-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  filter: brightness(.98);
}

.pldmad-page .pldmad-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* “목차 생성은 무료” 라벨 */
.pldmad-page .pldmad-points-label{
  font-size: 11px;
  color: rgba(184,196,218,.70);
  line-height: 1.2;
  transform: none !important;
}

/* 스피너 */
.pldmad-page .pldmad-spinner img{
  width: 24px;
  height: 24px;
  display: block;
  opacity: .9;
}

/* 결과 영역 */
.pldmad-page .pldmad-outline-result,
.pldmad-page .pldmad-content-result{
  margin-top: 24px;
}

.pldmad-page .pldmad-outline-result h2,
.pldmad-page .pldmad-content-result h2{
  font-size: 16px;
  font-weight: 700;
  color: #F8FAFC;
  margin: 0 0 10px;
}

/* 편집 박스 */
.pldmad-page .pldmad-editable{
  border: 1px solid rgba(148,163,184,.22);
  padding: 14px;
  border-radius: 12px;

  background: rgba(255,255,255,.05);
  color: #F8FAFC;

  min-height: 140px;
  font-size: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;

  transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}

.pldmad-page .pldmad-editable:focus{
  outline: none;
  border-color: rgba(96,165,250,.65);
  box-shadow: 0 0 0 3px rgba(96,165,250,.14);
  background: rgba(255,255,255,.07);
}

/* 목차 하단 row */
.pldmad-page .pldmad-outline-footer-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.pldmad-page .pldmad-outline-footer-row .pldmad-left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 본문 버튼들 */
.pldmad-page .pldmad-content-buttons{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
}

.pldmad-page .pldmad-content-meta{
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(184,196,218,.85);
}

.pldmad-page .pldmad-content-meta span span{
  font-weight: 600;
  color: #F8FAFC;
}

/* ✅ 모바일 */
@media (max-width: 768px){
  .pldmad-page .pldmad-container{
    margin: 16px 12px;
    padding: 20px 16px 24px;
  }

  .pldmad-page .pldmad-form{
    grid-template-columns: 1fr;
  }

  .pldmad-page .pldmad-field.half,
  .pldmad-page .pldmad-field,
  .pldmad-page .pldmad-actions-row{
    grid-column: span 1;
  }

  .pldmad-page .pldmad-content-buttons{
    flex-direction: column;
  }

  .pldmad-page .pldmad-content-buttons .pldmad-btn{
    width: 100%;
    justify-content: center;
  }

  .pldmad-page .pldmad-content-meta{
    flex-direction: column;
    align-items: flex-start;
  }
}