/* 개발자센터 — 마이페이지 틀(mypage.css) 위에 더하는 부분. 색은 토큰만 */
.dev-lead { margin: 0 0 14px; color: var(--c-text-muted); line-height: 1.6; }
.dev-lead strong { color: var(--c-text); }
.dev-note { margin: 10px 0 0; font-size: 13px; color: var(--c-text-muted); }

/* 순서 안내 */
.dev-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dev-steps li { position: relative; display: grid; gap: 6px; padding: 18px; border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: var(--c-surface); }
.dev-steps__no { position: absolute; top: 14px; right: 16px; font-size: 13px; font-weight: 800; color: var(--c-text-muted); }
.dev-steps__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-accent-text); background: color-mix(in srgb, var(--c-accent) 16%, transparent); }
.dev-steps__icon svg { width: 22px; height: 22px; }
.dev-steps strong { font-size: 16px; }
.dev-steps small { color: var(--c-text-muted); font-size: 13px; line-height: 1.5; }

/* 상태 표시 */
.dev-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: var(--c-surface-2); color: var(--c-text-muted); }
.dev-pill--ok { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 15%, transparent); }
.dev-pill--warn { color: var(--c-accent-text); background: color-mix(in srgb, var(--c-accent) 15%, transparent); }
.dev-pill--bad { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 15%, transparent); }

/* 내 게임 */
.dev-games { list-style: none; margin: 0; padding: 0; }
.dev-games li { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 64px) auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--c-border); }
.dev-games li:first-child { border-top: 0; }
.dev-games__info { display: grid; gap: 6px; min-width: 0; }
.dev-games__title { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-games__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-games__num { display: grid; text-align: right; font-weight: 800; }
.dev-games__num small { font-size: 11px; font-weight: 600; color: var(--c-text-muted); }

/* 게임 관리 */
.dev-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.dev-overview__main { display: grid; gap: 12px; }
.dev-overview__main .dev-lead { margin: 0; }
.dev-overview__nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 10px; }
.dev-overview__nums li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--c-surface-2); }
.dev-overview__nums small { color: var(--c-text-muted); font-size: 12px; }
.dev-overview__nums strong { font-size: 18px; }
.dev-revs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dev-revs > li { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--c-border); }
.dev-revs__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dev-revs__file { font-weight: 600; overflow-wrap: anywhere; }
.dev-revs__head time { margin-left: auto; font-size: 13px; color: var(--c-text-muted); }
.dev-revs__note { font-size: 14px; line-height: 1.5; }
.dev-revs__errors { margin: 0; padding-left: 18px; color: var(--c-danger); font-size: 13px; }
.dev-table-wrap { overflow-x: auto; }
.dev-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dev-table th, .dev-table td { padding: 10px 8px; text-align: right; border-top: 1px solid var(--c-border); white-space: nowrap; }
.dev-table th:first-child, .dev-table td:first-child { text-align: left; }
.dev-table th { color: var(--c-text-muted); font-weight: 600; border-top: 0; }
.dev-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dev-guide li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.dev-guide svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--c-accent-text); }

/* 입력 */
.dev-form { display: grid; gap: 16px; }
.dev-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.dev-form__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dev-form__actions form { margin: 0; }
.dev-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 14px; }
.dev-field--full { grid-column: 1 / -1; }
.dev-field > span, .dev-field > legend { font-weight: 700; font-size: 14px; padding: 0; }
.dev-field em { font-style: normal; color: var(--c-danger); }
.dev-field small { color: var(--c-text-muted); font-size: 12px; }
.dev-field input[type="text"], .dev-field input[type="number"], .dev-field input[type="file"], .dev-field select, .dev-field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text); font: inherit; }
.dev-field textarea { min-height: 0; resize: vertical; line-height: 1.55; }
.dev-field input:focus-visible, .dev-field select:focus-visible, .dev-field textarea:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.dev-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: var(--c-surface-2); cursor: pointer; font-weight: 600; }
.dev-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-accent); }
.dev-choice:has(input:checked) { border-color: var(--c-accent); color: var(--c-accent-text); }
.dev-choice:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.dev-upload { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.dev-upload .dev-field { flex: 1 1 280px; }

@media (max-width: 900px) {
  .dev-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-overview { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dev-form__grid { grid-template-columns: 1fr; }
  .dev-games li { grid-template-columns: minmax(0, 1fr) repeat(2, 52px); }
  .dev-games li .dev-games__num:nth-of-type(3), .dev-games li > .btn { display: none; }
  .dev-steps { grid-template-columns: 1fr; }
}

/* 조작 방법 입력 도우미 */
.ctl-palette { margin-top: 10px; display: grid; gap: 8px; }
.ctl-palette__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ctl-palette__group { min-width: 44px; font-size: 12px; font-weight: 700; }
.ctl-chip { height: 30px; padding: 0 10px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ctl-palette__help { margin: 2px 0 0; font-size: 12px; line-height: 1.6; }
.ctl-palette__help code { padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.ctl-palette__group, .ctl-palette__help { color: var(--c-text-muted); }
.ctl-chip { border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 -2px 0 var(--c-border); }
.ctl-chip:hover { border-color: var(--c-accent); color: var(--c-accent-text); }
.ctl-palette__help code { background: var(--c-surface-2); }