body { font-family: 'Noto Sans KR', sans-serif; margin:0; background:#f7f8fa; color:#222; }
.main-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px; padding: 40px 20px; max-width: 1000px; margin: 0 auto; }
.form-wrap, .preview-wrap { flex: 1 1 400px; min-width: 320px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); padding: 28px 20px; }
.form-wrap h2 { font-size: 1.2rem; color: #007bff; margin-bottom: 18px; }
.preview-wrap h2 { font-size: 1.2rem; color: #007bff; margin: 0 0 18px; }
.form-group { margin-bottom: 18px; }
label { font-weight: bold; display: block; margin-bottom: 5px; }
input[type="text"], 
textarea,
select {
  width: 100%; 
  padding: 8px; 
  border: 1px solid #ccc; 
  border-radius: 6px; 
  font-size: 1rem;
  box-sizing: border-box; /* Ensures padding and border don't expand width */
}
textarea { resize: vertical; min-height: 60px; }
input[type="file"] { margin-top: 6px; }

.preview-wrap { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); padding: 28px 20px; min-width: 380px; max-width: 420px; width: 100%; }
.detail-wrap { width: 100%; box-sizing: border-box; background: #f9f9f9; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 24px 14px; }
.main-img { width: 100%; border-radius: 8px; margin-bottom: 18px; }
.title { font-size: 1.6rem; font-weight: bold; margin-bottom: 10px; color: #1a73e8; word-break: break-all; }
.desc { font-size: 1.05rem; margin-bottom: 16px; color: #444; word-break: break-all; }
.features { margin-bottom: 20px; }
.feature-title { font-weight: bold; color: #0056b3; margin-bottom: 6px; font-size:1.05rem;}
.feature { background: #e3f0fd; border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: 0.98rem; word-break: break-all; }
.price { font-size: 1.3rem; font-weight: bold; color: #d9534f; margin-bottom: 20px; }
.cta-button {
  display: inline-block;
  padding: 10px 20px; 
  font-size: 1rem; 
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 8px; 
  transition: background-color 0.2s ease, opacity 0.2s ease;
  margin-top: 10px;
  width: auto; 
}
.btn-row { margin-top: 32px; display: flex; gap: 10px; justify-content: center; }
.save-btn { background: #007bff; color: #fff; border: none; border-radius: 6px; padding: 10px 18px; font-weight: bold; cursor: pointer; font-size: 1rem; }
.save-btn:active { background: #0056b3; }
#youtubeWrap {margin-bottom:18px;}
@media (max-width: 900px) {
  .main-wrap { flex-direction: column; align-items: center; }
  .preview-wrap { margin-top: 24px; }
}