/* ======================================================================
   🏠 pb-home.css — 폰밴드 홈 · 동호회 목록 · 아래 탭   v0.25.0  2026-10-07
   경로 : /home/orcax/band-server/public/css/pb-home.css
   쓰는 곳 : index.html · clubs.html · shows.html · club.html(아래 탭만)
   v0.27.0: 링크로 만든 버튼(a.ph-btn) 글씨가 주변 색을 따라가던 것 고침
   ====================================================================== */
:root{
  --h-bg:#06070f;--h-card:#10131f;--h-card2:#151a2b;--h-line:#232a40;--h-tx:#eef1ff;--h-sub:#98a1bd;
  --h-pk:#ff4fa3;--h-cy:#3fe0ff;--h-yl:#ffd84a;--h-gr:#3dff9a;--h-vi:#8d5cff;--h-rd:#ff4b5c;
}
body.ph{margin:0;background:var(--h-bg);color:var(--h-tx);font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background-image:radial-gradient(900px 460px at 10% -12%,rgba(255,79,163,.20),transparent 60%),radial-gradient(800px 420px at 105% 0%,rgba(63,224,255,.14),transparent 60%);
  background-attachment:fixed;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
body.ph .wrap{max-width:760px;margin:0 auto;padding:16px 16px 24px}
body.ph a{color:inherit}
body.ph a.ph-btn{color:#0b0b14}body.ph a.ph-btn.ghost{color:var(--h-tx)}   /* v0.27.0 링크 버튼 글씨색 */
.ph-h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:26px 2px 10px;font-size:18px;font-weight:900;letter-spacing:-.3px}
.ph-h2 a,.ph-h2 small{font-size:13px;font-weight:600;color:var(--h-sub);text-decoration:none}
.ph-grad{background:linear-gradient(90deg,var(--h-pk),var(--h-cy));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 아래 탭 (pb-home.js PBH.tabbar) ── */
.ph-tab{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(8,10,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--h-line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.ph-tab .in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.ph-tab a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;text-decoration:none;color:#7f88a6;font-size:11px;font-weight:700;border-radius:12px}
.ph-tab a i{font-style:normal;font-size:21px;line-height:1.1;filter:grayscale(.6);opacity:.8}
.ph-tab a.on{color:#fff}
.ph-tab a.on i{filter:none;opacity:1;text-shadow:0 0 14px rgba(255,79,163,.7)}
.ph-tab a.on::after{content:"";width:18px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--h-pk),var(--h-cy));margin-top:1px}

/* ── 공통 버튼 · 칩 ── */
.ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;padding:12px 16px;font-size:15px;font-weight:900;cursor:pointer;text-decoration:none;color:#0b0b14;
  background:linear-gradient(90deg,var(--h-pk),#ff8a5c);box-shadow:0 6px 22px rgba(255,79,163,.28)}
.ph-btn.cy{background:linear-gradient(90deg,var(--h-cy),#6c8cff);box-shadow:0 6px 22px rgba(63,224,255,.22)}
.ph-btn.ghost{background:var(--h-card2);color:var(--h-tx);border:1px solid var(--h-line);box-shadow:none}
.ph-btn.sm{padding:8px 12px;font-size:13px;border-radius:11px}
.ph-chips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ph-chips::-webkit-scrollbar{display:none}
.ph-chip{flex:none;display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:999px;border:1px solid var(--h-line);background:var(--h-card);color:var(--h-sub);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;user-select:none}
.ph-chip.on{color:#111;background:linear-gradient(90deg,var(--h-yl),#ffb84a);border-color:transparent}
.ph-chip.soon{opacity:.5}
.ph-chip.soon::after{content:"준비중";font-size:10px;padding:1px 5px;border-radius:6px;background:#2a3150;color:#c9d0ea;margin-left:2px}

/* ── LIVE 배지 ── */
.ph-live{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.06em;color:#fff;background:var(--h-rd);box-shadow:0 0 14px rgba(255,75,92,.55)}
.ph-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:phPulse 1.1s infinite}
.ph-live.on2{background:#1d8f5a;box-shadow:0 0 12px rgba(61,255,154,.35)}
@keyframes phPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ── 동호회 줄 (곡 선택식) ── */
.ph-list{display:flex;flex-direction:column;gap:9px}
.ph-row{position:relative;display:flex;align-items:center;gap:12px;padding:11px;border-radius:18px;background:linear-gradient(180deg,var(--h-card2),var(--h-card));border:1px solid var(--h-line);text-decoration:none;color:var(--h-tx);transition:border-color .2s,transform .15s}
.ph-row:hover{border-color:#3a4570}
.ph-row:active{transform:scale(.99)}
.ph-row.live{border-color:rgba(255,75,92,.55);box-shadow:0 0 0 1px rgba(255,75,92,.15),0 8px 30px rgba(255,75,92,.12)}
.ph-thumb{flex:none;width:62px;height:62px;border-radius:15px;display:grid;place-items:center;font-size:30px;background-size:cover;background-position:center;position:relative;overflow:hidden;
  background-color:#1a2036;background-image:linear-gradient(135deg,var(--tc1,#3b2a6b),var(--tc2,#13324a))}
.ph-thumb.photo{font-size:0}
.ph-thumb .eq{position:absolute;left:6px;right:6px;bottom:5px;height:14px;display:flex;gap:2px;align-items:flex-end}
.ph-thumb .eq b{flex:1;background:#fff;border-radius:2px;opacity:.9;animation:phEq .9s infinite ease-in-out}
.ph-thumb .eq b:nth-child(2){animation-delay:.2s}.ph-thumb .eq b:nth-child(3){animation-delay:.45s}.ph-thumb .eq b:nth-child(4){animation-delay:.1s}
/* v1.2.3 사진 위 LIVE — 사진 가리지 않게: 아래 어둡게 깔고 가는 빨간 막대 · 위 모서리 작은 LIVE */
.ph-thumb.photo .eq{left:0;right:0;bottom:0;height:15px;padding:3px 12px 2px;gap:3px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.ph-thumb.photo .eq b{background:#ff4b5c;opacity:1;max-width:5px;box-shadow:0 0 6px rgba(255,75,92,.8)}
.ph-thumb .tlive{position:absolute;top:3px;left:3px;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.04em;color:#fff;background:var(--h-rd);border-radius:6px;padding:1px 5px;box-shadow:0 0 8px rgba(255,75,92,.7);animation:phBlink 1.4s infinite}
/* 🎧 v1.2.5 감상 중 — 초록 */
.ph-thumb .tlive.tlis{background:#1d8f5a;box-shadow:0 0 8px rgba(61,255,154,.6);animation:none}
.ph-thumb .eq.lis b{background:#3dff9a;box-shadow:0 0 6px rgba(61,255,154,.8);animation-duration:1.4s}
.ph-thumb .eq.lis b{max-width:5px}
.ph-thumb:not(.photo) .eq.lis{left:14px;right:14px}
.ph-now .lisTxt{color:#7dffbf}
@keyframes phBlink{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes phEq{0%,100%{height:25%}50%{height:100%}}
.ph-info{flex:1;min-width:0}
.ph-name{font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.ph-name span{overflow:hidden;text-overflow:ellipsis}
.ph-meta{margin-top:3px;font-size:12px;color:var(--h-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-now{margin-top:4px;font-size:12px;font-weight:800;color:#ffb3bc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-tags{margin-top:5px;display:flex;gap:5px;flex-wrap:wrap}
.ph-tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:7px;background:#1c2236;color:#c8cfe8;border:1px solid #262e48}
.ph-tag.rtag{color:#111;border:0;background:var(--rc,#ffd84a)}
.ph-go{flex:none;align-self:center;border:0;border-radius:12px;padding:10px 13px;font-size:13px;font-weight:900;color:#0b0b14;background:linear-gradient(90deg,var(--h-cy),#6c8cff);cursor:pointer;text-decoration:none;white-space:nowrap}
.ph-row.live .ph-go{background:linear-gradient(90deg,var(--h-pk),#ff8a5c)}
.ph-empty{text-align:center;color:var(--h-sub);padding:34px 16px;border:1px dashed var(--h-line);border-radius:18px;background:var(--h-card)}
.ph-empty .big{font-size:42px}

/* ── 검색 ── */
.ph-search{display:flex;align-items:center;gap:8px;background:var(--h-card);border:1px solid var(--h-line);border-radius:16px;padding:4px 6px 4px 14px;margin:6px 0 10px}
.ph-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--h-tx);font-size:15px;padding:10px 0;outline:none}
.ph-search select{border:0;background:#1a2036;color:var(--h-tx);border-radius:11px;padding:9px 8px;font-size:13px;font-weight:700}
.ph-more{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.ph-more input,.ph-more select{width:100%;box-sizing:border-box;background:var(--h-card);border:1px solid var(--h-line);color:var(--h-tx);border-radius:12px;padding:10px;font-size:14px}
.ph-more label.ck{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--h-sub);padding:8px 4px}
@media(max-width:420px){.ph-thumb{width:54px;height:54px;font-size:26px}.ph-name{font-size:15px}.ph-go{padding:9px 10px}}
@media(max-width:700px){body > .top{display:none}}   /* 폰에서는 위 메뉴 대신 아래 탭 */

/* v1.1.1 📷 내가 방장인 동호회 그림 = 눌러서 사진 바꾸기 */
.ph-thumb.mine{cursor:pointer;outline:2px dashed rgba(255,216,74,.55);outline-offset:2px}
.ph-thumb.mine::after{content:"📷";position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:#ffd84a;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ph-thumb.mine{overflow:visible}
.ph-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:90;background:#fff;color:#111;font-weight:800;font-size:14px;padding:10px 16px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
/* v1.1.1 실서버 band.css 의 input·select 모양이 검색 칸을 덮던 것 고침 */
body.ph .ph-search input{display:block;flex:1 1 auto;width:auto!important;min-width:0;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:10px 0!important;color:var(--h-tx)!important;font-size:15px!important}
body.ph .ph-search select{flex:none;width:auto!important;margin:0!important;border:0!important}