/* aimusiclist.com — 사이트 만들기·개발자·회원·관리 화면 전용 (2-D). 메인 첫 화면 무게를 줄이려고 main.css 에서 나눴다.
   layout.php 가 이 화면들에서만 불러오고, 재생 중 화면 이동(app.js)도 필요하면 이 파일을 붙인다. 색·크기 변수는 main.css 의 :root. */

.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-inline-start: 6px; background: var(--bg-3); color: var(--ink-2); vertical-align: 2px; }
.badge-active { color: var(--up); } .badge-pending { color: var(--warn); } .badge-hidden, .badge-suspended { color: var(--down); }
.prod-hero { text-align: center; display: grid; justify-items: center; gap: 16px; padding: 64px 0 32px; }
.prod-hero .t-lead { max-width: 34em; }
.pill-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--bg-2); color: var(--accent); font-size: 13px; font-weight: 600; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 1080px; margin: 0 auto; }
.feature.flip > :first-child { order: 2; }
.feature-txt { display: grid; gap: 12px; }
.feature-ic { color: var(--accent); }
.feature-ic .ic { width: 32px; height: 32px; }
.media { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--bg-3); box-shadow: var(--shadow-art); }
.media video, .media > img { width: 100%; height: 100%; object-fit: cover; }
.media-art { position: absolute; inset: -18% -12%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; transform: rotate(-8deg); align-content: center; }
.media-art img { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.dev-what { margin: 8px 0 0; padding-inline-start: 1.3em; display: grid; gap: 6px; color: var(--ink-2); text-align: start; max-width: 640px; }
.panel { background: var(--bg-2); border-radius: 16px; padding: 24px; }
.band-2 .panel { background: var(--bg); }
.panel h2 { margin-bottom: 6px; }
.panel + .panel { margin-top: 20px; }
.dev-files { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.dev-files li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.band-2 .dev-files li { background: var(--bg-2); }
.dev-prompts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dev-prompts li, .dev-ref li { display: grid; gap: 10px; align-content: start; justify-items: start; }
.dev-prompts textarea { width: 100%; resize: vertical; padding: 12px; border-radius: 12px; border: 0; background: var(--bg-2); line-height: 1.45; font-size: 12px; }
.dev-ref { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dev-result { margin: 12px 0 24px; border-inline-start: 4px solid var(--ink-3); }
.dev-result-pass { border-color: var(--up); } .dev-result-warn { border-color: var(--warn); } .dev-result-error { border-color: var(--down); }
.dev-result h2 { font-size: 17px; }
.dev-icon { font-weight: 700; }
.chk-status, .chk-where { white-space: nowrap; }
.chk-pass .chk-status { color: var(--up); } .chk-warn .chk-status { color: var(--warn); } .chk-error .chk-status { color: var(--down); font-weight: 700; }
.chk-error { background: color-mix(in srgb, var(--down) 6%, transparent); } .chk-warn { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.dev-checks td { overflow-wrap: anywhere; }
.dev-api th { white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.dev-api-box { margin: 24px 0; }
.dev-api-box summary { cursor: pointer; font-weight: 600; }
.dev-api-box pre { white-space: pre-wrap; word-break: break-all; margin: 10px 0 0; }
.dev-check-form { max-width: 640px; display: grid; gap: 8px; margin: 12px 0 6px; }
.dev-check-row { display: flex; gap: 8px; }
.dev-check-row input { flex: 1; min-width: 0; }
.form .dev-check-opt { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.form .dev-check-opt input { width: auto; height: auto; accent-color: var(--accent-fill); }
.auth { max-width: 440px; margin: 32px auto; padding: 32px; border-radius: 16px; background: var(--bg-2); display: grid; gap: 14px; }
.auth h1 { font-size: 28px; font-weight: 700; letter-spacing: calc(-.015em * var(--ls)); }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea, .admin-act input[type=text], .admin-act select, .admin-search input {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 15px; font-weight: 400; color: var(--ink); }
.form textarea { min-height: 120px; line-height: 1.45; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.form .btn { justify-self: start; }
.auth .form .btn { justify-self: stretch; height: 44px; }
.alert ul { margin: 0; padding-inline-start: 1.2em; }
.dev-result, .card-box, .site-admin, .admin-item, .form-card, .local-pl, .old-register, .dev-api-box, .secret-box, .report-track { background: var(--bg-2); border-radius: 16px; padding: 18px 20px; }
.site-admin-list, .admin-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.site-admin-head, .admin-item-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: start; }
.site-admin-head a { color: var(--ink-2); }
.site-admin-actions, .admin-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: start; }
.site-admin-facts { display: grid; gap: 4px; margin: 12px 0 0; }
.site-admin-facts div { display: flex; gap: 8px; flex-wrap: wrap; }
.site-admin-facts dt { color: var(--ink-2); min-width: 9em; }
.site-admin-facts dd { margin: 0; }
.site-admin-msg:not(:empty) { margin-top: 10px; }
.admin-item.is-overdue { box-shadow: inset 4px 0 0 var(--warn); }
.admin-tabs, .admin-sub { margin: 0 0 16px; }
.admin-act { display: flex; gap: 6px; align-items: center; margin: 0; }
.admin-act input[type=text], .admin-act select { width: 11em; min-height: 30px; padding: 4px 10px; font-size: 13px; }
.admin-reports { margin: 12px 0 0; padding-inline-start: 1.2em; display: grid; gap: 10px; }
.admin-desc { margin: 4px 0; overflow-wrap: anywhere; }
.admin-evidence { word-break: break-all; }
.admin-search { display: flex; gap: 8px; margin: 0 0 12px; max-width: 420px; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: start; vertical-align: top; border-top: 1px solid var(--line); }
.admin-table thead th { border-top: 0; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.admin-table .num { text-align: end; }
.report-track { display: grid; gap: 2px; padding: 12px 14px; background: var(--bg); }
.old-register summary { cursor: pointer; color: var(--ink-2); }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature.flip > :first-child { order: 0; }
}
@media (max-width: 733px) {
  .auth { padding: 24px 20px; margin: 8px auto; }
  .dev-check-row { flex-direction: column; }
  .admin-table thead { display: none; }
  .admin-table tr { display: grid; padding: 8px 0; border-top: 1px solid var(--line); }
  .admin-table td { border: 0; padding: 4px 12px; }
  .admin-table .num { text-align: start; }
}

/* (2-D) 관리 화면 사이트 상태 자리 */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.status-grid div { background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.status-grid dd { margin: 4px 0 0; }
/* (2-9) 순위 방법 공개 페이지 (/charts/methodology): 띠 안의 짧은 목록 */
.method-list { list-style: none; margin: 32px auto 0; padding: 0; max-width: 720px; display: grid; gap: 14px; font-size: 17px; line-height: calc(1.5 + var(--lh)); color: var(--ink-2); }
.method-list strong { color: var(--ink); font-weight: 600; }