@charset "utf-8";

.cpk-store { --bg:#0b1220; --card:#0f172a; --ink:#e5e7eb; --muted:#94a3b8; --brand:#4f46e5; --ok:#10b981; --bad:#ef4444; }
.cpk-store { color:var(--ink); }
.cpk-toolbar{display:flex;justify-content:space-between;align-items:center;margin:10px 0 14px;gap:12px;flex-wrap:wrap}
.cpk-left{display:flex;align-items:center;gap:12px}
.cpk-chip-row{display:flex;gap:8px;overflow:auto;padding-bottom:4px}
.chip{padding:8px 12px;border:1px solid #374151;border-radius:999px;background:#0b1220;color:#cbd5e1;font-size:13px;white-space:nowrap}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.cpk-count-bubble{padding:6px 14px;border-radius:999px;background:var(--brand);color:#fff;font-weight:700}
.cpk-actions{display:flex;gap:8px}
.btn{padding:8px 14px;border-radius:10px;border:1px solid #334155;background:#1f2937;color:#e2e8f0;font-size:13px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.cpk-table-wrap{background:var(--card);border:1px solid #263045;border-radius:14px;overflow:hidden}
.cpk-table{width:100%;border-collapse:separate;border-spacing:0}
.cpk-table thead th{background:#111827;color:#cbd5e1;font-weight:600;text-align:left;padding:12px;border-bottom:1px solid #1f2937;position:sticky;top:0;z-index:1}
.cpk-table tbody td{padding:12px;border-bottom:1px solid #1f2937;font-size:13px;color:#e5e7eb}
.cpk-table tbody tr:hover{background:#0f172a}
.pcno{font-weight:700;color:#fff}
.io-badge{display:inline-block;margin-right:6px}
.io-none{opacity:.5}
.buy .btn{padding:8px 12px;background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.buy .btn.is-sold{background:#374151;border-color:#374151;cursor:not-allowed}
.soldout-tag{display:inline-block;padding:6px 10px;background:#18181b;border:1px solid #3f3f46;border-radius:8px;color:#cbd5e1}
.cpk-empty{padding:22px;text-align:center;color:var(--muted)}
.cpk-notice{margin:10px 2px 0;color:var(--muted);font-size:12px}

/* 모바일 */
@media (max-width: 900px){
  .cpk-table thead{display:none}
  .cpk-table tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px}
  .cpk-table tbody td{border-bottom:none;padding:4px 0}
  .cpk-table tbody td.pcno{grid-column:1/3}
  .buy{grid-column:1/3;margin-top:6px}
}

/* Alert banner */
.cpk-alert{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; margin:8px 0 16px; border-radius:14px;
  background: radial-gradient(120% 180% at 0% 0%, rgba(255,204,0,.18), rgba(255,0,0,.06)) ,
              linear-gradient(180deg, #1b2437, #131b2b);
  border:1px solid rgba(253, 230, 138, .35);
  box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.cpk-alert__icon{ font-size:20px; filter: drop-shadow(0 2px 6px rgba(255,204,0,.4)); }
.cpk-alert__body{ display:flex; flex-direction:column; gap:2px; }
.cpk-alert__body strong{ color:#fff; font-weight:800; letter-spacing:.2px }
.cpk-alert__body span{ color:#e5e7eb; opacity:.85; font-size:12.5px }


.cpk-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cpk-search input{
  appearance:none; width:260px; max-width:72vw;
  padding:9px 12px; border-radius:10px; border:1px solid #334155;
  background:#0b1220; color:#e5e7eb; font-size:13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.cpk-search input::placeholder{ color:#94a3b8; }
#floating-contact {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 9999;
  background-color: #0058a6;
  color: white;
  padding: 10px 16px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  line-height: 1.3;
}

/* ⚡ 구매 가능만 보기 : OFF(기본) 상태 가시성 강화 */
#cpkBuyOnly[data-mode="off"]{
  color:#111;                 /* 글씨 검정 */
  border-color:#111;          /* 테두리도 진하게 */
  background:#fff;            /* 흰 배경일 때 대비 확보(투명이어도 무방) */
}

/* hover / focus 접근성 */
#cpkBuyOnly[data-mode="off"]:hover{
  background:#111;
  color:#fff;
}
#cpkBuyOnly:focus-visible{
  outline:2px solid var(--brand, #4f46e5);
  outline-offset:2px;
}

/* ON일 때는 꽉 찬 버튼(브랜드 컬러)로 유지 */
#cpkBuyOnly[data-mode="on"]{
  background:var(--brand, #4f46e5);
  border-color:var(--brand, #4f46e5);
  color:#fff;
}


/* ===== Mobile: 카드형, 큰 터치타겟, 고정 툴바 ===== */
@media (max-width: 900px){
  /* 상단 경고 배너 간격 축소 + 글자 크게 */
  .cpk-alert{ margin:6px 0 12px; padding:12px; border-radius:12px }
  .cpk-alert__body strong{ font-size:14.5px }
  .cpk-alert__body span{ font-size:12px }

  /* 필터 칩 스크롤 + sticky */
  .cpk-toolbar{ position:sticky; top:0; z-index:2800; padding:8px 4px; margin:0 0 10px;
    backdrop-filter: saturate(120%) blur(6px); background:rgba(11,18,32,.75); border-bottom:1px solid #1e293b }
  .cpk-chip-row{ gap:6px; padding:4px 2px; overflow-x:auto; scrollbar-width:none }
  .cpk-chip-row::-webkit-scrollbar{ display:none }
  .chip{ padding:7px 10px; font-size:12px }

  /* 우측 영역: 검색 입력 크게 */
  .cpk-right{ width:100%; justify-content:space-between }
  .cpk-search input{ width:100%; padding:11px 12px; font-size:14px; border-radius:12px }

  /* 테이블을 '카드'로 변환 */
  .cpk-table thead{ display:none }
  .cpk-table-wrap{ border:none; background:transparent }
  .cpk-table{ border-spacing:0 10px }               /* 카드 간 간격 */
  .cpk-table tbody tr{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    padding:12px; border:1px solid #1f2937; border-radius:14px; background:#0f172a
  }
  .cpk-table tbody td{ border-bottom:none; padding:0; font-size:13px; color:#e7eef9 }
  .cpk-table tbody td[data-th]::before{
    content:attr(data-th);
    display:block; margin-bottom:4px; font-size:11.5px; color:#93a3b8; letter-spacing:.2px
  }
  /* 첫 줄(PC번호/CPU)은 넓게 */
  .cpk-table tbody td.pcno{ grid-column:1/2; font-weight:800; font-size:15px; color:#fff }
  .cpk-table tbody td.cpu{ grid-column:2/3; justify-self:end; text-align:right }
  /* 두 번째 줄: 코어/스레드/GPU */
  .core,.thread,.gpu,.ram,.disk,.io,.fee,.rent{ min-width:0 } /* 줄바꿈 허용 */
  /* 마지막 행: 요약/주문 버튼은 전체 폭 */
  .buy{ grid-column:1/3; margin-top:4px }
  .buy .btn{ width:100%; padding:12px 14px; border-radius:12px; font-size:15px }
  .soldout-tag{ display:block; text-align:center; padding:11px 12px; border-radius:12px }

  /* 빈 상태 */
  .cpk-empty{ padding:18px; border:1px dashed #334155; border-radius:12px; background:#0b1220 }
}

/* =========================
   COMPICK STORE — MOBILE UI
   ========================= */

/* ≤900px: 카드형 + 칩 가로스크롤 + 큰 터치타겟 */
@media (max-width: 900px){

  /* 경고 배너 */
  .cpk-alert{ margin:6px 0 12px; padding:12px; border-radius:12px }
  .cpk-alert__body strong{ font-size:14.5px }
  .cpk-alert__body span{ font-size:12px }

  /* 상단 툴바(살짝 고정 느낌) */
  .cpk-toolbar{
    position:sticky; top:0; z-index:20;
    padding:8px 4px 10px; margin:0 0 10px;
    backdrop-filter: saturate(120%) blur(6px);
    background:rgba(11,18,32,.78); border-bottom:1px solid #1e293b;
  }

  /* 코어 칩: 손가락 가로 스크롤 */
  .cpk-chip-row{
    display:flex; gap:6px; padding:4px 2px;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x; overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .cpk-chip-row::-webkit-scrollbar{ display:none }
  .chip{ padding:6px 9px; font-size:12px }

  /* 검색 입력 크게 */
  .cpk-right{ width:100%; display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap }
  .cpk-search input{ width:100%; padding:11px 12px; font-size:14px; border-radius:12px }

  /* 테이블 → 카드 */
  .cpk-table-wrap{ border:none; background:transparent }
  .cpk-table thead{ display:none }
  .cpk-table{ border-collapse:separate; border-spacing:0 10px }
  .cpk-table tbody tr{
    display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:auto;
    gap:12px 14px; padding:14px; border:1px solid #1f2937;
    border-radius:14px; background:#0f172a;
  }

  /* PC번호 = 카드 제목 */
  .cpk-table tbody td.pcno{
    grid-column:1/3; display:block;
    font-weight:800; font-size:16px; color:#fff; padding-bottom:6px; position:relative;
  }
  .cpk-table tbody td.pcno::before{ content:none }
  .cpk-table tbody td.pcno::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:#1e293b;
  }

  /* 라벨-값 한 줄 */
  .cpk-table tbody td{
    border:0; padding:0; display:flex; align-items:center; justify-content:space-between;
    gap:10px; line-height:1.35; color:#e7eef9;
  }
  .cpk-table tbody td[data-th]::before{
    content:attr(data-th);
    flex:0 0 88px; color:#93a3b8; font-size:12.5px; letter-spacing:.2px;
  }
  .cpk-table tbody td:not(.buy){
    flex:1 1 auto; text-align:right; font-weight:600; word-break:keep-all; overflow-wrap:anywhere;
  }

  /* 좌/우 열 고정 배치 */
  .cpk-table tbody td.cpu,
  .cpk-table tbody td.ram,
  .cpk-table tbody td.gpu,
  .cpk-table tbody td.fee { grid-column:1; }
  .cpk-table tbody td.core,
  .cpk-table tbody td.thread,
  .cpk-table tbody td.disk,
  .cpk-table tbody td.io,
  .cpk-table tbody td.rent { grid-column:2; }

  /* 구매 영역 전체폭 */
  .cpk-table tbody td.buy{ grid-column:1/3; margin-top:2px }
  .buy .btn{ width:100%; padding:12px 14px; border-radius:12px; font-size:15px }
  .soldout-tag{ display:block; text-align:center; padding:11px 12px; border-radius:12px }

  /* 빈 상태 */
  .cpk-empty{ padding:18px; border:1px dashed #334155; border-radius:12px; background:#0b1220 }
}

/* ≤640px: 더 촘촘하게 */
@media (max-width: 640px){
  .chip{ font-size:11.5px; padding:6px 9px }
  .cpk-table tbody tr{ padding:12px 10px; border-radius:12px }
  .cpk-table tbody td.pcno{ font-size:15px }
  .cpk-table tbody td[data-th]::before{ flex-basis:80px; font-size:12px }
}

/* ≤360px: 라벨 폭 최소화 */
@media (max-width: 360px){
  .cpk-table tbody td[data-th]::before{ flex-basis:72px; }
}
/* 모바일: 렌탈 중 라벨을 버튼처럼 전체폭으로 */
@media (max-width: 900px){
  .cpk-table tbody td.buy .soldout-tag{
    display:block;
    width:100%;
    padding:12px 14px;
    text-align:center;
    border-radius:12px;
    background:#1f2937;                 /* 버튼 같은 배경 */
    border:1px solid #374151;
    color:#e5e7eb;
    font-weight:700;
    letter-spacing:.2px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25) inset;
  }
  /* 버튼과 높이/여백 맞추기(선택) */
  .cpk-table tbody td.buy{ grid-column:1/3; margin-top:2px }
}
/* =========================
   COMPICK STORE — LIGHT THEME
   ========================= */
.cpk-store.theme-light{
  --bg:#ffffff;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#111827;          /* 브랜드 톤: 진한 블랙 */
  --ok:#10b981;
  --bad:#ef4444;
  color:var(--ink);
  background:var(--bg);
}

/* 컨테이너/카드 */
.cpk-store.theme-light .cpk-table-wrap{
  background:#fff;
  border:1px solid #e5e7eb;
}
.cpk-store.theme-light .cpk-table thead th{
  background:#f8fafc;
  color:#0f172a;
  border-bottom:1px solid #e5e7eb;
}
.cpk-store.theme-light .cpk-table tbody td{
  color:#111827;
  border-bottom:1px solid #f1f5f9;
}
.cpk-store.theme-light .cpk-table tbody tr:hover{
  background:#f9fafb;
}
.cpk-store.theme-light .pcno{ color:#111827; }

/* 칩/버튼 */
.cpk-store.theme-light .chip{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#111827;
}
.cpk-store.theme-light .chip.is-active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.cpk-store.theme-light .btn{
  background:#fff;
  border:1px solid #e5e7eb;
  color:#111827;
  box-shadow: none;
}
.cpk-store.theme-light .btn:hover{
  background:#f8fafc;
  filter:none;
}
.cpk-store.theme-light .buy .btn{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.cpk-store.theme-light .buy .btn.is-sold{
  background:#e5e7eb;
  border-color:#e5e7eb;
  color:#9ca3af;
}

/* 검색창 */
.cpk-store.theme-light .cpk-search input{
  background:#fff;
  border:1px solid #e5e7eb;
  color:#0f172a;
  box-shadow:none;
}
.cpk-store.theme-light .cpk-search input::placeholder{
  color:#9ca3af;
}

/* 상단 툴바(라이트용 sticky 배경) */
@media (max-width: 900px){
  .cpk-store.theme-light .cpk-toolbar{
    background:rgba(255,255,255,.92);
    border-bottom:1px solid #e5e7eb;
    backdrop-filter:saturate(120%) blur(6px);
  }
}

/* 경고 배너 */
.cpk-store.theme-light .cpk-alert{
  background:linear-gradient(180deg, #fffbea, #fff7cc);
  border:1px solid #fde68a;
  box-shadow: 0 8px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
}
.cpk-store.theme-light .cpk-alert__body strong{ color:#111827; }
.cpk-store.theme-light .cpk-alert__body span{ color:#374151; }

/* 품절/뱃지 */
.cpk-store.theme-light .soldout-tag{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  color:#374151;
}

/* 플로팅 연락처 버튼 */
.cpk-store.theme-light #floating-contact{
  background-color:#111827;
  color:#fff;
}

/* 모바일 카드형(라이트 카드/테두리) */
@media (max-width: 900px){
  .cpk-store.theme-light .cpk-table-wrap{ border:none; background:transparent; }
  .cpk-store.theme-light .cpk-table{ border-spacing:0 10px; }
  .cpk-store.theme-light .cpk-table tbody tr{
    background:#ffffff;
    border:1px solid #e5e7eb;
  }
  .cpk-store.theme-light .cpk-table tbody td{ color:#111827; }
  .cpk-store.theme-light .cpk-table tbody td[data-th]::before{
    color:#6b7280;
  }
  .cpk-store.theme-light .cpk-empty{
    background:#ffffff;
    border:1px dashed #e5e7eb;
    color:#6b7280;
  }
  .cpk-store.theme-light .cpk-table tbody td.buy .soldout-tag{
    background:#f3f4f6;
    border:1px solid #e5e7eb;
    color:#111827;
    box-shadow:none;
  }
}