/* =========================================================
   DRAWER
   ========================================================= */
.drawer-overlay{
  position: fixed;
  inset: 0;
  z-index: 19998;
  display: none;
  background: rgba(2,6,23,.45);
}
.drawer-overlay.show{ display:block; }

#drawer.drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(340px, 86vw);
  z-index: 19999;

  background: rgba(255,255,255,.94);
  border-right: 1px solid var(--hairline);
  box-shadow: 0 8px 24px rgba(15,35,68,.14);

  transform: translateX(-105%);
  transition: transform .22s ease;

  pointer-events: none;
  display:flex;
  flex-direction: column;
}
#drawer.drawer.open{
  transform: translateX(0) !important;
  pointer-events: auto;
}

.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255,255,255,.70);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.drawer-title{ font-weight: 800; letter-spacing: -.02em; }
.drawer-close{
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  border-radius: var(--ui-radius);
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,.90);
  box-shadow: 0 8px 24px rgba(15,35,68,.14);
  cursor:pointer;
}
.drawer-body{ padding: 12px 14px 18px; overflow:auto; flex: 1; }
.drawer-group{ margin: 14px 0; }
.drawer-group-title{ font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }

.drawer a{ display:block; padding: 12px 12px; border-radius: var(--ui-radius); }
.drawer a:hover{ background: rgba(59,130,246,.08); }

.drawer-footer{ padding: 12px 14px; border-top: 1px solid var(--hairline); }
.drawer-logout{
  display:block;
  text-align:center;
  padding: 12px 10px;
  border-radius: var(--ui-radius);
  background: rgba(59,130,246,.10);
  font-weight: 600;
}
body.drawer-lock{
  overflow:hidden;
  overscroll-behavior:none;
}

/* =========================================================
   MODAL (confirm 등)
   ========================================================= */



.modal-card{
  width: min(420px, calc(100% - 24px));
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--ui-radius);
  box-shadow: 0 8px 24px rgba(15,35,68,.14);
  overflow: hidden;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.modal-title{ font-weight: 800; letter-spacing: -.02em; }
.modal-body{
  padding: 14px;
  color: rgba(15,23,42,.92);
  font-weight: 600;
}
.modal-actions{
  display:flex;
  gap: 10px;
  padding: 12px 14px 14px;
  justify-content:flex-end;
}

/* =========================================================
   POSTCODE LAYER (your existing structure)
   ========================================================= */
#postcodeLayer{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.45);
}
#postcodeLayer[aria-hidden="false"]{ display: flex; }
#postcodeLayer[style*="display:block"],
#postcodeLayer[style*="display: block"]{ display:flex !important; }

#postcodeCard{
  width: min(520px, calc(100% - 24px));
  height: min(720px, calc(100vh - 24px));
  background: #fff;
  border-radius: var(--ui-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15,35,68,.14);
  display: flex;
  flex-direction: column;
}
#postcodeHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}
#postcodeTitle{ font-weight: 600; font-size: 14px; }
#postcodeWrap{ flex: 1; width: 100%; }
@media (max-width: 520px){
  #postcodeCard{ height: 75vh; }
}
body            { font-weight: 400; }
.kv-v           { font-weight: 400; }
.kv-k           { font-weight: 500; }
.card-title     { font-weight: 600; }
.btn, .badge    { font-weight: 600; }
.topbar h1      { font-weight: 700; }