/* Page base (editor / quiz / share) */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  background-color: #eff3ff;
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%23bdd7e7' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  line-height: 1.6;
}

/* ---- Public pages (quiz / share) ---- */

.dvz-app {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px 20px;
}

#dvz-loading, #dvz-error {
  text-align: center;
  padding: 80px 20px;
  color: #999;
  font-size: 1rem;
}
#dvz-error { color: #c00; }

.dvz-lead { text-align: center; color: #888; font-size: 0.85rem; margin-bottom: 8px; }

.dvz-result {
  text-align: center;
  margin-top: 24px;
}

.dvz-cta {
  text-align: center;
  margin-top: 24px;
}
.dvz-result .dvz-cta { margin-top: 20px; }
.dvz-cta a, .dvz-cta button {
  display: inline-block;
  padding: 12px 32px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #333;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
}
.dvz-cta a:hover, .dvz-cta button:hover { background: #555; }
.dvz-cta .dvz-btn-secondary { background: #666; margin-left: 8px; }

/* Result share area (quiz page, after reveal) */
.dvz-share-area { margin-top: 12px; }
.dvz-share-title { margin-top: 12px; font-weight: 600; }
.dvz-share-buttons {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.ydi-share-btn {
  display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: #555; background: #f0f0f0; border: 1px solid #ddd; border-radius: 4px;
  cursor: pointer; transition: background 0.2s; text-decoration: none;
}
.ydi-share-btn:hover { background: #e0e0e0; }

.dvz-site-links {
  text-align: center;
  margin-top: 32px;
  padding: 16px 0;
  font-size: 0.8rem;
  color: #999;
}
.dvz-site-links a {
  color: #888;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.dvz-site-links a:hover { color: #555; text-decoration: underline; }
.dvz-site-links span { margin: 0 6px; color: #ccc; }

/* タブレット */
@media (max-width: 768px) {
  .dvz-app { padding: 24px 12px 16px; }
}

/* スマートフォン */
@media (max-width: 480px) {
  .dvz-app { padding: 20px 8px 12px; }
  .dvz-cta a, .dvz-cta button { font-size: 0.9rem; padding: 10px 24px; }
}

/* ---- Embed mode (?embed=1) ---- */
.dvz-embed body {
  background-color: transparent;
  background-image: none;
}
.dvz-embed .dvz-site-links,
.dvz-embed .dvz-share-area {
  display: none;
}
.dvz-embed .dvz-app {
  padding: 16px 12px;
}