/* base */
.kkf{--kkf-b:#e5e7eb; --kkf-bg:#fff; --kkf-gap:.6em; --kkf-pad-y:.5em; --kkf-pad-x:.8em; --kkf-font:1rem}
.kkf{border:1px solid var(--kkf-b); background:var(--kkf-bg); border-radius:12px; padding:12px; margin:10px 0; font-size:var(--kkf-font)}
.kkf-head-compact{display:flex; align-items:center; justify-content:space-between; gap:.6em; margin-top:.6em}
.kkf-head-left{display:flex; gap:.6em; align-items:center}
.kkf-head-right{display:flex; gap:.8em; align-items:center}
.kkf-row{display:flex; align-items:center; gap:.8em; justify-content:space-between; flex-wrap:wrap}
.kkf-group{border:1px dashed var(--kkf-b); border-radius:10px; padding:.6em; margin-top:.6em}
.kkf-group-h{font-weight:600; white-space:nowrap; flex:0 0 auto}
.kkf-chips{display:flex; flex-wrap:wrap; gap:var(--kkf-gap); align-items:center; position:relative}
.kkf-chip{border:1px solid var(--kkf-b); background:#f3f4f6; border-radius:999px; padding:var(--kkf-pad-y) var(--kkf-pad-x); cursor:pointer; font-size:1em; transition:all .15s; white-space:nowrap}
.kkf-chip.active{background:#d60000; color:#fff; border-color:#d60000}
.kkf-chip.ex{background:#fff; color:#d60000; border-color:#d60000}
.kkf-chip.kkf-hidden{display:none}
.kkf-chip.kkf-more{background:#fff; border-style:dashed}
.kkf-apply-main{background:#111; color:#fff; border:none; border-radius:8px; padding:.7em 1em; cursor:pointer}
.kkf-reset{background:#fff; color:#111; border:1px solid var(--kkf-b); border-radius:8px; padding:.7em 1em; cursor:pointer}
.kkf-stock{display:flex; align-items:center; gap:.4em}
@media (max-width:640px){
  .kkf-row{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding-bottom:.5em}
  .kkf-chips{flex-wrap:nowrap}
  .kkf-row::-webkit-scrollbar{height:6px}
  .kkf-row::-webkit-scrollbar-track{background:#eef1f4; border-radius:6px}
  .kkf-row::-webkit-scrollbar-thumb{background:#cfd4da; border-radius:6px}
  .kkf-row:hover::-webkit-scrollbar-thumb{background:#b8bec6}
  .kkf-row{scrollbar-width:thin; scrollbar-color:#cfd4da #eef1f4}
  .kkf-row::before, .kkf-row::after{content:""; position:absolute; top:0; bottom:0; width:24px; pointer-events:none}
  .kkf-row{position:relative}
  .kkf-row::before{left:0; background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0))}
  .kkf-row::after{right:0; background:linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0))}
}

/* Accordion */
.kkf-accordion{border:1px solid var(--kkf-b); border-radius:12px; background:#fff; margin:10px 0; padding:0 !important;}
.kkf-acc-sum{display:flex; align-items:center; gap:.6em; cursor:pointer; padding:10px 12px; list-style:none}
.kkf-acc-sum::-webkit-details-marker{display:none}
.kkf-acc-ic{opacity:.8; flex:0 0 auto}
.kkf-acc-body{padding:0 !important;}
.kkf-hide{display:none !important}
.kkf-accordion[open] .kkf-acc-sum{border-bottom:1px dashed var(--kkf-b)}
.kkf-accordion .kkf{ padding:0 !important; }