/* 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; }
.auth .gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid #747775; border-radius: 22px; background: #fff; color: #1f1f1f; font: 500 14px/20px Roboto, Arial, sans-serif; text-decoration: none; }
.gbtn:hover { background: #f8f9fa; }
.gbtn svg { width: 18px; height: 18px; flex: none; }
.auth .or { text-align: center; font-size: 13px; }
.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; }
/* (2-H) 관리 화면 허브 탭 */
.hub-new { flex-wrap: wrap; margin-bottom: 24px; }
.admin-act input.hub-limit, .hub-new input { min-height: 30px; padding: 4px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.admin-act input.hub-limit { width: 6.5em; }
.hub-key { margin-bottom: 20px; }
.hub-h { margin: 28px 0 10px; }
.hub-key input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }
/* (2-R) 관리 화면 가져가기 지표 표 (최근 7일). 휴대폰: 날짜 한 줄 + 칸 이름·값 2열 */
.fetch-h { margin: 16px 0 6px; font-weight: 600; }
.fetch-table th, .fetch-table td { padding: 8px 10px; white-space: nowrap; }
@media (max-width: 733px) {
  .fetch-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .fetch-table td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .fetch-table td[data-label] { display: flex; justify-content: space-between; gap: 8px; white-space: normal; }
  .fetch-table td[data-label]::before { content: attr(data-label); color: var(--ink-2); }
}
/* (2-S) 관리 통계 탭: 그래프는 서버가 그린 SVG, 색은 기존 토큰만 */
.st-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:10px 0 16px}
.st-card{background:var(--bg-2);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink-2)}
.st-card b{display:block;margin:2px 0;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.st-2{display:grid;gap:12px 24px}
.st-h{margin:32px 0 6px}
.st-svg{display:block;width:100%;height:150px;background:var(--bg-2);border-radius:12px}
.st-ax{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);margin:2px 4px 12px}
.st-t{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px}
.st-t th,.st-t td{padding:6px 8px;border-top:1px solid var(--line);text-align:start;overflow-wrap:anywhere}
.st-t th{border:0;font-size:12px;color:var(--ink-2);font-weight:600}
.st-t .num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.sbar{display:block;height:6px;margin-top:4px;border-radius:3px;background:var(--accent);width:var(--w);min-width:2px}
.st-lg i{display:inline-block;width:10px;height:3px;margin:0 4px 2px 10px;background:var(--accent)}
@media(min-width:900px){.st-2{grid-template-columns:1fr 1fr}}
/* (2-X) 모든 곡 순위 한 줄 (아티스트·앨범 곡 줄) */
.tr-ar{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}