/* ==== Player ============================================================== */
.ag-play{max-width:820px;margin:22px auto; padding:0 16px}
.ag-toast{background:#ecfdf5cc; border:1px solid #a7f3d0; border-radius:12px; padding:10px 12px; text-align:center; font-weight:900; margin-bottom:10px}
.ag-player{padding:20px}
.ag-cover{width:160px;height:160px;border-radius:50%;padding:10px;margin:6px auto 12px;background:linear-gradient(135deg,#fff,#eef2ff);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.ag-cover img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ag-ttl{font-size:22px;font-weight:900;text-align:center}
.ag-meta{color:#6b7280;text-align:center;margin-top:6px}
.ag-vu{height:18px;display:flex;gap:3px;align-items:flex-end;justify-content:center;margin:10px 0}
.ag-vu span{width:4px;height:6px;border-radius:2px;background:linear-gradient(180deg,#94a3b8,#94a3b822);animation:vu 1.2s ease-in-out infinite}
.ag-vu span:nth-child(2){animation-delay:.1s} .ag-vu span:nth-child(3){animation-delay:.2s} .ag-vu span:nth-child(4){animation-delay:.3s} .ag-vu span:nth-child(5){animation-delay:.4s}
@keyframes vu{0%,100%{height:6px}50%{height:16px}}

.ag-bar{height:8px;background:#eef2f7;border-radius:8px;overflow:hidden;margin:12px 0 4px;cursor:pointer}
.ag-bar .in{height:100%;width:0;background:linear-gradient(90deg,#60a5fa,#22d3ee,#86efac)}
.ag-time{display:flex;justify-content:space-between;color:#94a3b8;font-size:12px}

.ag-ctrl{display:flex;justify-content:center;gap:18px;margin:12px 0}
.ag-ctrl .btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f5f7fb;border:1px solid #eef1f5;color:#64748b;cursor:pointer;transition:.12s}
.ag-ctrl .btn:hover{transform:translateY(-1px)}
.ag-ctrl .play{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#ff6b8b,#ffa3ba);color:#fff;border:none;box-shadow:0 14px 36px rgba(255,107,139,.35)}
.ag-sub{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eef2f7;padding-top:12px}
.ag-vol{display:flex;align-items:center;gap:10px}
.ag-vol input[type=range]{width:200px;height:4px;background:#e8edf5;border-radius:3px;outline:none;-webkit-appearance:none}
.ag-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#ff6b8b}

/* donate */
.ag-donate{margin-top:16px;padding:16px}
.ag-dhd{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900;color:#e11d48;margin-bottom:8px}
.ag-mine{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #ffe1ea;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.ag-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.ag-chip-btn{border:1px solid #ffd7e1;border-radius:12px;padding:10px;text-align:center;font-weight:900;background:#fff;cursor:pointer}
.ag-chip-btn.on{background:linear-gradient(135deg,#ffeff3,#fff);border-color:#ff9fba;color:#d81b60;box-shadow:0 10px 24px rgba(216,27,96,.08)}
.ag-chip-btn.ghost{background:#ff6b8b1a;border:1px dashed #ff9fba;color:#d81b60}
.ag-num{position:relative;margin-bottom:10px}
.ag-num input{width:100%;padding:12px 36px 12px 12px;border:1px solid #ffd7e1;border-radius:12px;background:#fff}
.ag-num .u{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#d81b60;font-weight:900}
.ag-submit{width:100%;border:none;border-radius:12px;color:#fff;background:linear-gradient(135deg,#ff6b8b,#ffa3ba);padding:14px 16px;font-weight:900;box-shadow:0 16px 40px rgba(255,107,139,.35)}
.ag-foot{margin-top:8px;text-align:center;color:#a1a8b3;font-size:12px;display:flex;flex-direction:column;gap:4px}
.ag-foot span{color:#ef3f6b;font-weight:900}



/* ===== One-line header overrides ===== */
.ag-header .row{
  display:flex; align-items:center; justify-content:flex-start;
  gap:12px; flex-wrap:nowrap;            /* 줄바꿈 금지 */
}

/* 로고는 고정폭, 메뉴는 유연, 검색은 고정+유연 */
.ag-logo{ flex:0 0 auto; }
.ag-nav{  flex:1 1 auto; min-width:0; overflow:hidden; }
.ag-search{ flex:0 1 420px; min-width:280px; display:flex; align-items:center; gap:8px; }

/* 메뉴가 넘치면 가로 스크롤로 처리(줄바꿈 X) */
.ag-nav-inner{ display:flex; gap:14px; white-space:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.ag-nav-inner::-webkit-scrollbar{ display:none; }

.ag-search .ag-input{ flex:1 1 auto; min-width:0; height:42px; padding:10px 14px; }
.ag-search .ag-btn{ flex:0 0 auto; padding:10px 16px; }

/* 살짝 더 조밀한 모드 (옵션) */
.ag-header.ag-compact{ padding:10px 0; }
.ag-header.ag-compact .ag-search{ flex-basis:360px; }

/* 반응형: 폭이 아주 좁아지면 검색 폭만 줄이고 한 줄 유지 */
@media (max-width: 1100px){ .ag-search{ flex-basis:340px; } }
@media (max-width: 980px){  .ag-search{ flex-basis:300px; } }
@media (max-width: 880px){  .ag-search{ flex-basis:260px; } }