/* client/public/css/adminsearch.css */
/* 대시보드 전체에 영향 안 주게 .op-page 이하로만 적용 */

.op-page{
  --bg:#020617;
  --panel:#0b1220;
  --panel2:#0f172a;
  --line:#1f2937;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#38bdf8;
  --good:#22c55e;
  --warn:#f59e0b;

  /* 성능용: 그림자 단계 단순화 */
  --shadow: 0 10px 22px rgba(0,0,0,.22);
  --radius: 16px;
  --radius2: 22px;

  color: var(--text);

  /* ✅ 흰색 비침 방지(투명 제거) */
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 700px at 20% 10%, rgba(56,189,248,.10), transparent 55%),
    radial-gradient(1000px 650px at 90% 20%, rgba(34,197,94,.07), transparent 55%);
  background-repeat: no-repeat;

  /* ✅ 원래 레이아웃 감성 유지(너 코드에서 빠져있었음) */
  padding: 14px;
  border-radius: 18px;

  /* ✅ 최소 화면 높이 커버 */
  min-height: 100vh;
}

.op-page .op-side::before,
.op-page .op-side::after{
  content: none !important;
}

.op-page *{ box-sizing:border-box; }

/* =======================
   Topbar
======================= */
.op-topbar{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding: 14px 16px;

  border:1px solid rgba(31,41,55,.9);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(11,18,32,.70));
  box-shadow: var(--shadow);

  /* 성능 이슈 유발 가능 요소 제거 */
  /* backdrop-filter: blur(10px); */
}

.op-brand{ display:flex; gap:12px; align-items:center; }
.op-logo{
  width:52px;height:52px;
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(34,197,94,.12));
  border: 1px solid rgba(56,189,248,.22);
  font-weight:900;
}
.op-h1{
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
}
.op-sub{ margin-top:2px; color:var(--muted); font-size:12px; }

.op-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.op-chip{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,.9);
  background: rgba(2,6,23,.35);
  font-size: 12px;
  width: fit-content;
}
.op-time{
  font-size:18px;
  font-weight:900;
  letter-spacing:.5px;
  font-variant-numeric: tabular-nums;
}
.op-muted{ color:var(--muted); font-size:12px; }

/* =======================
   Layout
======================= */
.op-content{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:16px;
  margin-top: 14px;
}

.op-panel{
  border:1px solid rgba(31,41,55,.9);
  border-radius: var(--radius2);
  background: rgba(11,18,32,.65);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.op-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(31,41,55,.9);
  background: rgba(15,23,42,.45);
}
.op-panel-title{ font-weight:900; font-size:14px; }
.op-panel-actions{ display:flex; gap:10px; align-items:center; }

/* =======================
   Search / Button
======================= */
.op-search{
  width: 220px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(31,41,55,.9);
  background: rgba(2,6,23,.45);
  color: var(--text);
  outline: none;

  /* 가벼운 전환만 */
  transition: border-color .12s ease, box-shadow .12s ease;
}
.op-search:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 3px rgba(56,189,248,.10);
}

.op-btn{
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(56,189,248,.35);
  background: rgba(56,189,248,.10);
  color: var(--text);
  cursor:pointer;
  font-weight:900;

  /* transform만 (프레임 안정) */
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.op-btn:hover{
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.45);
  transform: translateY(-1px);
}
.op-btn:active{ transform: translateY(0); }

/* =======================
   Holiday banner
======================= */
.op-holiday-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  margin: 12px 14px 0 14px;
  border-radius: 16px;
  border:1px solid rgba(245,158,11,.35);
  background: rgba(245,158,11,.08);
}
.op-holiday-badge{
  font-weight:900;
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.15);
  border:1px solid rgba(245,158,11,.35);
}
.op-holiday-text{ font-weight:900; }

/* =======================
   Cards grid (비율 개선)
======================= */
.op-grid{
  padding: 12px 14px 16px 14px;
  display:grid;

  /* 카드가 너무 가로로 길어지지 않게: 큰 화면에서 3열 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.op-card{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.9);
  background: linear-gradient(180deg, rgba(15,23,42,.50), rgba(2,6,23,.30));
  cursor:pointer;

  /* 세로 비율 보강 */
  min-height: 128px;

  /* 성능: 가벼운 인터랙션만 */
  transition: transform .12s ease, border-color .12s ease;
}
.op-card:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.35);
}
.op-card.active{
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 0 3px rgba(34,197,94,.10);
}

.op-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.op-who{ display:flex; align-items:center; gap:12px; }

.op-avatar{
  width:44px;height:44px;
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(148,163,184,.18);
}
.op-name{ font-weight:900; letter-spacing:.3px; }
.op-badge{ margin-top:4px; font-size:12px; color: var(--muted); }

/* =======================
   Status (애니메이션 제거)
======================= */
.op-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:900;
  font-size: 12px;
  border:1px solid rgba(31,41,55,.9);
  background: rgba(2,6,23,.35);
}
.op-dot{
  width:10px;height:10px;
  border-radius:999px;
  background: #64748b;
  box-shadow: 0 0 0 3px rgba(100,116,139,.14);
}

/* 온라인 강조는 정적 */
.op-status.online{
  border-color: rgba(34,197,94,.40);
  background: rgba(34,197,94,.08);
}
.op-status.online .op-dot{
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(34,197,94,.16);
}

.op-meta2{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(31,41,55,.7);
  display:grid;
  gap:6px;
}
.op-kv{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
}
.op-kv b{ color: var(--text); font-weight:900; }

/* =======================
   Side panels (흰색 비침 방지)
======================= */

/* ✅ op-page가 오른쪽을 감싸지 않는 구조여도 흰색 안 비치게 안전장치 */
.op-side{
  display:flex;
  flex-direction:column;
  gap:16px;
  background: var(--bg); /* 핵심 */
  border-radius: var(--radius2);
}

.op-detail, .op-tips{
  border:1px solid rgba(31,41,55,.9);
  border-radius: var(--radius2);

  /* 뒤 흰색 비침 방지: 확실히 색 고정 */
  background: rgba(11,18,32,.78);

  box-shadow: var(--shadow);
  overflow:hidden;
}

.op-detail-head, .op-tips-title{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(31,41,55,.9);
  background: rgba(15,23,42,.50);
}
.op-detail-title{ font-weight:900; }
.op-detail-sub{ color: var(--muted); font-size:12px; margin-top:4px; }

.op-detail-body{ padding: 12px 14px 14px 14px; }

.op-empty{ text-align:center; color:var(--muted); padding: 16px 8px; }
.op-empty-icon{ font-size:30px; }
.op-empty-title{ margin-top:8px; font-weight:900; color: var(--text); }
.op-empty-sub{ margin-top:4px; font-size:12px; }

.op-detail-card{
  border:1px solid rgba(31,41,55,.9);
  background: rgba(2,6,23,.35);
  border-radius: 18px;
  padding: 14px;
  display:grid;
  gap:10px;
}

.op-hr{ height:1px; background: rgba(31,41,55,.8); }

.op-tips-list{
  margin:0;
  padding: 12px 14px 14px 30px;
  color: var(--muted);
  font-size: 13px;
}
.op-tips-list b{ color: var(--text); }

/* =======================
   Responsive
======================= */
@media (max-width: 1240px){
  /* 조금 좁아지면 2열 */
  .op-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px){
  .op-content{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .op-grid{ grid-template-columns: 1fr; }
  .op-search{ width: 160px; }
}