/* ============================================================================
   rk-period.css — (주)마스터 전 보드 공통 [집계기간] 선택 바
   기준 = 자체채널 마케팅 보드(mastercco-ch)의 period-stack / seg-head / periodbar.
   2026-08-01 신설 (마스터 지시: 모든 보드 기간 선택 UI 통일)
   ★보드마다 CSS 변수명이 달라서 값은 전부 하드코딩한다(보드 테마에 영향받지 않게).
   테마: 기본(.rkp) = 남색 헤더 위 / .rkp--light = 흰 배경·카드 위
   ========================================================================== */
.rkp{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  font-family:inherit;letter-spacing:-.01em;
}
.rkp *{box-sizing:border-box}
.rkp-row{display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:start;gap:10px}
.rkp-cap{font-size:12px;color:#9bb4d6;font-weight:700;white-space:nowrap}
.rkp-seg{
  display:inline-flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:3px;box-shadow:none;flex-wrap:wrap;
}
.rkp-seg button{
  border:none;background:none;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:#cdddf3;cursor:pointer;font-family:inherit;transition:.15s;line-height:1.5;
}
.rkp-seg button:hover{color:#fff}
.rkp-seg button.active{background:#fff;color:#16243f;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.rkp-now{
  font-size:12.5px;color:#fff;font-weight:700;background:rgba(255,255,255,.14);
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.rkp-custom{display:grid;grid-template-columns:auto;align-items:center;justify-content:start;gap:10px}
.rkp-custom.rkp-hide{display:none!important}
.rkp-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:8px 10px;box-shadow:none;
}
.rkp-bar .rkp-sep{color:#cdddf3;font-size:12px;font-weight:700}
.rkp-field{
  display:flex;align-items:center;gap:0;min-width:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
  border-radius:11px;padding:4px 6px;
}
.rkp-bar input[type=date],.rkp-bar select{
  border:1px solid #e2e8f0;border-radius:7px;padding:4px 6px;font-size:10.5px;
  font-family:inherit;color:#0f172a;background:#fff;min-width:100px;
}
.rkp-bar input[type=date]:focus,.rkp-bar select:focus{
  outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #dbeafe;
}
.rkp-bar .rkp-apply{
  height:28px;padding:0 10px;border-radius:9px;font-size:10.5px;font-weight:800;
  border:1px solid #2563eb;background:#2563eb;color:#fff;cursor:pointer;font-family:inherit;
}
.rkp-bar .rkp-apply:hover{background:#1d4ed8;border-color:#1d4ed8}

/* ── 밝은 배경(흰 카드) 위에서 쓰는 변형 ─────────────────────────────── */
.rkp--light .rkp-cap{color:#64748b}
.rkp--light .rkp-seg{background:#fff;border:1px solid #e2e8f0;padding:4px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06)}
.rkp--light .rkp-seg button{color:#64748b;padding:7px 16px;font-size:13px}
.rkp--light .rkp-seg button:hover{color:#2563eb}
.rkp--light .rkp-seg button.active{background:#2563eb;color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.35)}
.rkp--light .rkp-now{color:#0f172a;background:#eef2f7}
.rkp--light .rkp-bar{background:#f8fafc;border:1px solid #e2e8f0}
.rkp--light .rkp-bar .rkp-sep{color:#94a3b8}
.rkp--light .rkp-field{background:#fff;border:1px solid #e2e8f0}

/* ── 좁은 화면 ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .rkp{align-items:flex-start;width:100%}
  .rkp-row,.rkp-custom{width:100%}
  .rkp-row{grid-template-columns:auto 1fr}
  .rkp-row .rkp-now{grid-column:2}
  .rkp-custom{grid-template-columns:1fr}
  .rkp-bar{width:100%}
  .rkp-field{flex:1 1 100%;justify-content:space-between}
  .rkp-bar input[type=date]{min-width:0;width:100%}
}
@media(max-width:560px){
  .rkp-row,.rkp-custom{grid-template-columns:1fr}
  .rkp-row .rkp-now{grid-column:auto}
  .rkp-bar .rkp-sep{display:none}
  .rkp-bar .rkp-apply{width:100%}
}