/* ChatGPT 실습실 15개 혼자 해보기 UI — 수원AI DESIGN v2 토큰만 사용한다. */
:root {
  --solo-brand-start: #5650FF;
  --solo-brand-end: #AF4BFF;
  --solo-brand-deep: #4536C9;
  --solo-soft: #F0EEFF;
  --solo-ink: #171527;
  --solo-sub: #66647A;
  --solo-line: #E7E5F1;
  --solo-star: #FFC83D;
  --solo-star-empty: #D8D7E2;
}

.cline[contenteditable="plaintext-only"] { outline: none; white-space: pre-wrap; }
.cline[contenteditable="plaintext-only"]:empty::before { content: attr(data-placeholder); color: #8f8f8f; }
.cline[contenteditable="plaintext-only"]:focus { box-shadow: inset 0 -2px 0 #5650FF; }

.solo-goal { position: absolute; z-index: 62; top: 14px; right: 18px; width: min(440px, calc(100% - 36px));
  border: 1px solid var(--solo-line); border-radius: 20px; padding: 18px 20px; color: var(--solo-ink);
  background: rgba(255,255,255,.97); box-shadow: 0 16px 40px rgba(69,54,201,.16); }
.solo-goal.solo-goal-left { right:auto; left:18px; }
.solo-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border-radius: 999px;
  background: var(--solo-soft); color: var(--solo-brand-deep); font-size: 15px; font-weight: 800; }
.solo-goal h2 { margin: 10px 0 5px; font-size: 22px; line-height: 1.35; }
.solo-goal p { margin: 0; color: var(--solo-sub); font-size: 17px; line-height: 1.55; }
.solo-help { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--solo-soft);
  color: var(--solo-ink); font-size: 16px; line-height: 1.55; }
.solo-help ol { margin: 0; padding-left: 22px; }
.solo-help[hidden] { display: none; }
.solo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.solo-actions button { flex: 1 1 150px; min-height: 44px; border-radius: 12px; padding: 9px 12px;
  border: 1px solid #C9C5ED; background: #fff; color: var(--solo-brand-deep); font: 700 15px/1.35 inherit; cursor: pointer; }
.solo-actions button:hover { background: var(--solo-soft); }
.solo-actions button:disabled { opacity: .55; cursor: default; }
.solo-actions .solo-primary { flex-basis: 100%; border: 0; color: #fff;
  background: linear-gradient(135deg, var(--solo-brand-start), var(--solo-brand-end)); }
.solo-actions .solo-primary:hover { filter: brightness(.96); }
.solo-choices { display:grid; gap:8px; margin-top:13px; }
.solo-choices button { min-height:48px; display:flex; align-items:center; gap:10px; padding:10px 13px; text-align:left;
  border:1px solid #D8D4F6; border-radius:13px; background:#FAF9FF; color:var(--solo-ink); font:700 15px/1.45 inherit; cursor:pointer; }
.solo-choices button:hover { border-color:#8E84FF; background:var(--solo-soft); }
.solo-choices button b { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:999px;
  color:#fff; background:linear-gradient(135deg,var(--solo-brand-start),var(--solo-brand-end)); }
.solo-goal button:focus-visible, .solo-result button:focus-visible { outline: 3px solid var(--solo-brand-deep); outline-offset: 2px; }

.sheet .box.solo-result { border-color: #DAD7F5; border-radius: 20px; color: var(--solo-ink);
  box-shadow: 0 16px 40px rgba(69,54,201,.16); }
.sheet .box.solo-result .kicker { background: var(--solo-soft); color: var(--solo-brand-deep); }
.solo-stars { display: flex; justify-content: center; gap: 10px; margin: 20px 0 10px; }
.solo-star { color: var(--solo-star-empty); font-size: 46px; line-height: 1; text-shadow: 0 2px 0 rgba(23,21,39,.08); }
.solo-star.on { color: var(--solo-star); animation: solo-star-in .45s cubic-bezier(.2,.8,.2,1) both; }
.solo-star.on:nth-child(2) { animation-delay: .08s; }
.solo-star.on:nth-child(3) { animation-delay: .16s; }
.solo-result .solo-score { margin-top: 0; text-align: center; color: var(--solo-ink); font-size: 19px; font-weight: 800; }
.solo-result .solo-best { text-align: center; font-size: 16px; }
.solo-result .gobtn { background: linear-gradient(135deg, var(--solo-brand-start), var(--solo-brand-end)); }

@keyframes solo-star-in {
  from { opacity: 0; transform: translateY(8px) scale(.72) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .solo-star.on { animation: none; }
}

@media (max-height: 720px) {
  .solo-goal { top: 8px; padding: 12px 15px; }
  .solo-goal h2 { font-size: 19px; }
  .solo-goal p, .solo-help { font-size: 15px; }
}