/* ================= ROOT ================= */

:root{
  --bg:#ffffff;
  --card:#ffffff;
  --nt:#111827;
  --muted:#6b7280;
  --text:#111827;
  --border:#e5e7eb;
  --maxw:980px;
}

/* ================= RESET ================= */



/* ================= NAVBAR ================= */

.kr-navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:64px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 20px;
  background:#fff;

  border-bottom:1px solid var(--border);
  z-index:200;
}

.kr-brand{
  font-weight:700;
  letter-spacing:2px;
}

.kr-search-btn{
  background:none;
  border:none;
  cursor:pointer;
}

.kr-search-btn svg{
  width:22px;
  height:22px;
  stroke:hsl(49, 98%, 44%);
  fill:none;
  stroke-width:1.7;
}

/* ================= SEARCH PANEL ================= */

.kundaroma_search_a1{
  position:fixed;
  top:90px;
  left:0;
  right:0;

  display:none;
  justify-content:center;

  padding:12px;
  z-index:180;
}

.kundaroma_search_a1.kr-open{
  display:flex;
  animation:slideDown .2s ease;
}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1}
}

.kundaroma_search_a2{
  width:100%;
  max-width:var(--maxw);

  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;

  padding:16px;

  box-shadow:0 10px 25px rgba(0,0,0,.05);
}

/* ================= HEADER ================= */

.kundaroma_search_a3{
  display:flex;
  gap:12px;
  align-items:center;

  margin-bottom:12px;
}

.kundaroma_search_a4{
  width:46px;
  height:46px;

  border-radius:8px;
  background:var(--nt);

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  font-weight:700;
}

.kundaroma_search_a5{
  font-size:15px;
  font-weight:600;
}

.kr-sub{
  font-size:13px;
  color:var(--muted);
}

/* ================= SEARCH AREA ================= */

.kundaroma_search_a7{
  position:relative;
}

/* INPUT */

.kundaroma_search_a8{
  width:100%;

  padding:12px 50px 12px 14px;

  border-radius:10px;
  border:1px solid var(--border);

  font-size:15px;
  outline:none;
}

.kundaroma_search_a8:focus{
  border-color:var(--nt);
}

/* BUTTON */

.kundaroma_search_a9{
  position:absolute;
  right:6px;
  top:6px;

  height:calc(100% - 12px);
  width:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  background:transparent;
  cursor:pointer;

  color:var(--nt);
  transition:.15s;
}

.kundaroma_search_a9:hover{
  transform:scale(1.1);
}

.kundaroma_search_a9 svg{
  width:20px;
  height:20px;
}

/* ================= DROPDOWN ================= */

.kundaroma_search_a10{
  position:absolute;
  left:0;
  right:0;
  top:115%;

  background:#fff;

  border:1px solid var(--border);
  border-radius:10px;

  padding:6px;

  box-shadow:0 12px 30px rgba(0,0,0,.08);

  display:none;
  z-index:300;
}

.kundaroma_search_a10.kr-show{
  display:block;
}

/* ITEM */

.kundaroma_search_a14{
  padding:10px;
  border-radius:8px;
  cursor:pointer;
}

.kundaroma_search_a14:hover{
  background:#f9fafb;
}

.kundaroma_search_a17{
  font-weight:600;
}

.kundaroma_search_a18{
  font-size:13px;
  color:var(--muted);
}

/* FOOTER */

.kundaroma_search_a21{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){
  :root{--maxw:95%}
}