/* =========================
   NPKO Vote - Modern Style (CLEAN)
   - admin list button spacing fixed (PC)
   - admin list mobile layout fixed (grid)
   ========================= */

/* ===== Theme ===== */
:root{
  --bg: #f4f7fb;
  --card: rgba(255,255,255,0.92);
  --card2: rgba(255,255,255,0.78);
  --border: rgba(15, 23, 42, 0.08);

  --text: #0f172a;
  --muted: #64748b;

  --primary: #2563eb;
  --primary2: #1d4ed8;

  --success: #16a34a;
  --success2: #0f8a3d;

  --danger: #ef4444;

  --shadow: 0 14px 36px rgba(2, 6, 23, 0.10);
  --shadow2: 0 8px 20px rgba(2, 6, 23, 0.08);

  --radius: 18px;
  --radius2: 14px;

  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
          "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(37,99,235,0.16), transparent 60%),
    radial-gradient(900px 420px at 85% 5%, rgba(16,185,129,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg), #eef3fb 60%, #edf2fa);
}

.wrapper{
  max-width: 980px;
  margin: 40px auto 70px;
  padding: 0 20px;
}

/* =========================
   Top bar
   ========================= */
.top-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);

  backdrop-filter: blur(12px);
  margin-bottom: 22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}

.logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 44px;
}

.logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

.brand-name{
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 30px;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}

/* ===== Login area ===== */
.top-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.label{
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  margin-right: 2px;
}

.input{
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.95);
  outline:none;
  font-size: 14px;
  min-width: 180px;
  box-shadow: 0 1px 0 rgba(2,6,23,0.03);
}
.input:focus{
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

.welcome{
  display:flex;
  align-items:center;
  gap:6px;
  white-space: nowrap;
}
.welcome-title{
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.welcome-sub{
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1;
}

/* =========================
   Buttons (base)
   ========================= */
.btn,
.btn-ghost,
.btn-secondary,
.logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  text-decoration:none;
}

.btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,0.20);
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor:pointer;
  box-shadow: 0 12px 24px rgba(37,99,235,0.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 30px rgba(37,99,235,0.22);
}

.btn-secondary{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.9);
  color: #0f172a;
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(2,6,23,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,0.08);
}

.btn-ghost{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.9);
  color: #0f172a;
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(2,6,23,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,0.08);
}

.btn-danger{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(239,68,68,0.25);
  background: linear-gradient(180deg, #ef4444, #dc2626);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  box-shadow: 0 12px 24px rgba(239,68,68,0.14);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-danger:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 30px rgba(239,68,68,0.18);
}

.logout{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.9);
  color: #0f172a;
  font-weight: 800;
  font-size: 14px;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(2,6,23,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.logout:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,0.08);
}

/* ===== Toggle ===== */
.btn-toggle{
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.75);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}
.btn-toggle:hover{ background: rgba(255,255,255,0.92); }

.btn-cancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* =========================
   Messages
   ========================= */
.notice{
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
}

.error, .success{
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
}
.error{
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.25);
  color: #991b1b;
}
.success{
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.25);
  color: #166534;
}

/* =========================
   List card + rows (common)
   ========================= */
.list-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow:hidden;
  backdrop-filter: blur(10px);
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding: 16px 18px;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.row:first-child{ border-top:none; }

.row:hover{ background: rgba(241,245,249,0.55); }

.row-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.row-sub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* =========================
   Pills
   ========================= */
.pill{
  min-width: 90px;
  text-align:center;
  font-weight: 900;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 10px 18px rgba(2,6,23,0.06);
  user-select:none;

  /* ✅ 버튼들과 높이/정렬 통일 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
}

.pill.on{
  background: linear-gradient(180deg, var(--success), var(--success2));
  color: #fff;
  border-color: rgba(22,163,74,0.25);
}
.pill.off{
  background: rgba(148,163,184,0.20);
  color: #334155;
}
.pill.end{
  background: rgba(199, 11, 4, 0.85);
  color: #fff;
  border-color: rgba(199, 11, 4, 0.25);
}

/* =========================
   Poll page (poll.php) (kept)
   ========================= */
.poll-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 22px;
  backdrop-filter: blur(10px);
}
.poll-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 20px;
}
.poll-title{
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.poll-sub{
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.poll-badge{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.poll-options{
  margin-top: 14px;
  display:grid;
  gap:10px;
}
.option-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.65);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
.option-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 18px rgba(2,6,23,0.06);
}
.option-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.option-text{
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.01em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poll-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}
.pill.warn{
  background: rgba(245,158,11,0.14);
  color: #92400e;
  border-color: rgba(245,158,11,0.25);
  box-shadow: 0 10px 18px rgba(2,6,23,0.06);
}

/* =========================
   Toast (kept)
   ========================= */
.toast{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  min-width: 300px;
  max-width: 420px;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 30px 60px rgba(2,6,23,0.25);
  backdrop-filter: blur(12px);
  display: none;
  z-index: 9999;
  text-align: center;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show{
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.toast-title{
  font-weight: 900;
  font-size: 17px;
  margin: 0 0 6px 0;
}
.toast-msg{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.toast.success{ border-color: rgba(22,163,74,0.35); }
.toast.success .toast-title{ color: #166534; }
.toast.error{ border-color: rgba(239,68,68,0.35); }
.toast.error .toast-title{ color: #991b1b; }

/* =========================
   Admin page
   ========================= */
.admin-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.admin-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 22px;
  backdrop-filter: blur(10px);
}

.admin-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
}

/* ✅ title row (inline style 제거용) */
.admin-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.admin-sub{
  margin: 0 0 18px 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* create form */
.form-grid{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 12px 14px;
  align-items: center;
}

.form-grid .label2{
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
}

.control{
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.95);
  outline:none;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(2,6,23,0.03);
  width: 100%;
}
.control:focus{
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.control.textarea{
  height: auto;
  padding: 12px;
  min-height: 140px;
  resize: vertical;
}

.radio-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.radio-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.7);
  font-weight: 900;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
  user-select:none;
}
.radio-pill input{ transform: translateY(1px); }

.admin-actions{
  display:flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* time range */
.time-range{
  display: flex;
  align-items: center;
  gap: 10px;
}
.time-range .control{
  flex: 1;
  min-width: 0;
}
.time-sep{
  font-weight: 900;
  color: var(--muted);
}

/* admin list row padding */
.admin-list .row{ padding: 18px; }

/* ===== ✅ Admin list: NEW layout classes ===== */
.admin-row-left{
  min-width: 0;
}

.admin-muted{
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
}

/* ✅ PC: 모든 버튼/상태를 동일 gap으로 정렬 */
.admin-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;               /* ← 숨김-삭제 간격처럼 전부 동일 */
  flex-wrap:nowrap;       /* PC에서는 한 줄 유지 */
}

.admin-row-actions form{ margin:0; }

/* 버튼 폭 튀는 것 방지 (텍스트 줄바꿈 방지) */
.admin-row-actions .btn,
.admin-row-actions .btn-ghost,
.admin-row-actions .btn-secondary,
.admin-row-actions .btn-danger{
  white-space: nowrap;
}

/* =========================
   Poll Results (kept)
   ========================= */
.rs-card{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 55px rgba(2,6,23,0.08);
  margin-top: 14px;
}
.rs-head{
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}
.rs-title{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.6px;
  line-height: 1.25;
}
.rs-period{
  margin-top: 10px;
  font-weight: 700;
  color: var(--muted);
}
.rs-summary{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.rs-summary-item{
  background: rgba(241,245,249,0.55);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 14px;
}
.rs-summary-label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.rs-summary-value{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 900;
}
.rs-list{ margin-top: 16px; }
.rs-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.72);
  margin-bottom: 10px;
}
.rs-left{ flex: 1; min-width: 0; }
.rs-option{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.rs-no{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.22);
  flex: 0 0 auto;
}
.rs-text{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-bar{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.22);
  overflow:hidden;
}
.rs-bar-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,0.68), rgba(16,185,129,0.68));
}
.rs-right{
  min-width: 92px;
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  gap: 4px;
}
.rs-count{
  font-weight: 900;
  font-size: 15px;
}
.rs-pct{
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
}
.rs-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 14px;
}
.rs-note{
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* =========================
   Responsive (mobile)
   ========================= */
@media (max-width: 720px){
  .top-card{
    flex-direction: column;
    align-items: stretch;
  }
  .brand{
    justify-content: center;
    min-width: 0;
  }
  .top-right{
    justify-content: flex-start;
  }
  .input{ min-width: 0; width: 100%; }
  .btn,.logout{ width: 100%; }

  /* default row stacks */
  .row{
    flex-direction: column;
    align-items: flex-start;
  }

  /* poll page */
  .poll-head{ flex-direction: column; }
  .poll-badge{ justify-content:flex-start; }
  .poll-actions{ justify-content: stretch; }
  .poll-actions .btn,
  .poll-actions .btn-secondary{ width: 100%; }
  .option-text{ white-space: normal; }

  /* time range stacks */
  .time-range{
    flex-direction: column;
    align-items: stretch;
  }
  .time-sep{ display:none; }

  /* results page */
  .rs-title{ font-size: 20px; }
  .rs-summary{ grid-template-columns: 1fr; }
  .rs-right{ min-width: 74px; }


  /* ✅ admin list: mobile layout (깔끔 정렬) */
  .admin-row-actions{
    width:100%;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
    justify-content:stretch;
    align-items:stretch;
    flex-wrap:initial;
  }

  /* 상태 pill은 1줄 전체폭 */
  .admin-row-actions .pill{
    grid-column: 1 / -1;
    width:100%;
  }

  /* 버튼/폼도 전체폭 */
  .admin-row-actions > *{ width:100%; }
  .admin-row-actions form{ width:100%; }
  .admin-row-actions button,
  .admin-row-actions a{
    width:100%;
    height:44px; /* 터치 친화 */
  }
}