/* =========================
   공통(접근성/잠금/기본 UI)
   ========================= */

/* 접근성: 원본 숨김 */
.select-origin-hidden { position:absolute !important; inset:auto auto auto -9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }

/* 시트 오픈 시 배경 스크롤/탄성 차단 */
html.wb-sheet-open { overscroll-behavior:none; position:fixed; top:0; left:0; right:0; width:100%; }
body.wb-noanchor { overflow-anchor:none;  }


/* 트리거(Select & Multi 공통) */
.wb-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; border:1px solid #cbd5e1; background:#fff; color:#0f172a; border-radius:.5rem; font-size:1rem !important; line-height:1; cursor:pointer; transition: box-shadow .2s ease, border-color .2s ease; overflow:hidden; }
.wb-trigger:focus-visible { outline:none; box-shadow:0 0 0 4px rgba(59,130,246,.25); border-color:#93c5fd; }
.wb-trigger .label { flex:1 1 auto; width:auto; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1rem !important; color:var(--fg) !important;}
.wb-trigger .placeholder { color:#94a3b8; }
.wb-trigger .chevron { inline-size:1.25rem; block-size:1.25rem; flex:0 0 auto; transition:transform .2s; }

.wb-trigger[aria-expanded="true"] .chevron { transform:rotate(180deg); }
.wb-trigger:focus-visible { outline:none; box-shadow:0 0 0 4px rgba(59,130,246,.25); border-color:#93c5fd; }
.wb-trigger:before { content:''; position:absolute; top:0;left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.3s ease;}
.wb-trigger:hover:before,
.wb-trigger[aria-expanded="true"]:before { left:100%; }

.filter-wrap.dd-filter { display:none; position:absolute; top:100%; left:0; right:0; border:1px solid #e2e8f0; border-bottom:none; border-radius:.5rem .5rem 0 0; background:#161f3a; border-color:#6592e7; z-index:40; height:100%; overflow:hidden; }
.filter-wrap.dd-filter input { width:100%; border:none; background:#161f3a; position:absolute; left:0; top:0; right:0; bottom:0; height:auto; border-radius:0; color:var(--fg); padding:1rem 1.25rem; }
.wb-select.is-open:not(.is-sheet) .dd-filter { display:block; } 

/* 약한 하이라이트 */
.wb-list { position:absolute; left:0; right:0; top:calc(100% + .2rem); z-index:40; margin:0; list-style:none; background:#fff; border:1px solid #e2e8f0; border-radius:.5rem; box-shadow:0 .75rem 2rem rgba(2,6,23,.12); max-height:20rem; overflow:auto; display:none; }
.wb-select.is-open:not(.is-sheet) .wb-list { display:block; }
.wb-select .wb-list { position:absolute; top:100%; left:0; right:0;}
.wb-select.has-dd-filter .wb-list { top:200%; border-radius:0 0 .5rem .5rem; margin-top:-1px }
.wb-select.drop-up .wb-list { top:auto; bottom:100%;}
.wb-select.has-dd-filter.drop-up .wb-list { bottom:200%; border-radius:.5rem .5rem 0 0;}

.wb-select.drop-up .filter-wrap.dd-filter { top:auto; bottom:100%; border-radius:0 0 .5rem .5rem; border-bottom:1px solid #e2e8f0; border-top:none; }


.wb-option { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem;  cursor:pointer; font-size:1rem; color:#0f172a; transition:background .2s; }
.wb-option[aria-selected="true"] { background:#eef2ff; }
.wb-option:hover, .wb-option:focus { background:#f1f5f9; outline:none; }
.wb-option.is-disabled { opacity:.45; pointer-events:none; }
.wb-option .check { margin-left:auto; opacity:0; width:1rem; height:1rem; }
.wb-option[aria-selected="true"] .check { opacity:1; }

.wb-empty { padding:2rem 0; text-align:center; color:var(--muted)}


.wb-backdrop { position:fixed; inset:0; z-index:1009 !important; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.wb-backdrop.is-open { opacity:1; pointer-events: auto;}
.wb-select.is-open.is-sheet .wb-backdrop { display:block; }
.wb-sheet { position:fixed; left:0; right:0; bottom:0; z-index:1010 !important; background:#fff; border-radius:0; pointer-events: none; box-shadow: none; max-height:calc( min(100dvh, var(--vvh, 100vh)) - 0px ); padding-bottom: env(safe-area-inset-bottom); display:flex; flex-direction:column; }
.wb-sheet .sheet-panel{ transform: translateY(100%); transition: transform .25s ease; display:flex; flex-direction:column;  max-height:inherit; padding-bottom:calc(var(--wb-kb, 0px));}
.wb-sheet.is-open {  pointer-events: auto;  }
.wb-sheet.is-open .sheet-panel { transform: translateY(0) translateZ(0); }
.wb-sheet .sheet-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 1rem; border-bottom:1px solid #e2e8f0; }
.wb-sheet .sheet-title { font-weight:700; font-size:1.1rem; color:var(--fg);}
.wb-sheet .btn-close { border:0; background:none; color:var(--fg);  padding:.5rem 1rem; font-size:1.1rem; }
.wb-sheet .filter-wrap { padding:10px 12px; border-bottom:1px solid #e2e8f0; }
.wb-sheet .filter { width:100%; padding:12px 12px; border:1px solid #cbd5e1; border-radius:10px; font-size:14px; }
.wb-sheet .sheet-list { flex:1 1 auto; overflow:auto; padding:8px; -webkit-overflow-scrolling:touch; touch-action: pan-y;  overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom) + 8px);}

.wb-select:not(.is-sheet) .wb-sheet { display: none; }
.wb-select.is-sheet .wb-sheet { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(100%); 	box-shadow: none;  transition: transform .25s ease, opacity .2s ease, visibility 0s .25s; display:none;}
.wb-select.is-open.is-sheet .wb-sheet { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); box-shadow: 0 -.75rem 2rem rgba(2,6,23,.2); transition: transform .25s ease, opacity .2s ease; }
.wb-select.is-sheet .wb-backdrop { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.wb-select.is-open.is-sheet .wb-backdrop { opacity: 1; pointer-events: auto; }
.wb-select:not(.is-sheet) .wb-sheet,
.wb-select:not(.is-sheet) .wb-backdrop { display: none; }

html.wb-sheet-open { overscroll-behavior:none; position:fixed; top:0; left:0; right:0; width:100%; }
body.wb-noanchor { overflow-anchor:none;  }
.wb-backdrop, .wb-sheet { touch-action:none; }

@media (prefers-color-scheme: dark) {
	
	.wb-trigger { background:none; color:var(--ad-point14); border-color:var(--ad-point14); }
	.wb-list { background:#161f3a; border-color:#6592e7; }
	.wb-option { color:#e2e8f0; }
	.wb-option:hover, .wb-option:focus { background:#1f304f; }
	.wb-option[aria-selected="true"] { background:#0c1423; }
	.wb-backdrop { background:rgba(0,0,0,.5); }
	.wb-sheet { background:#0c1321; }
	.wb-sheet .sheet-head { border-color:#443867; }
	.wb-sheet .filter { background:#0b1220; color:#e2e8f0; border-color:#443867; }
}


/* =========================
   Multi
   ========================= */



.wb-multi-wrap { position:relative; display:inline-block; width:100%; }
.wb-multi-wrap.is-disabled { opacity:.55; pointer-events:none; }

/* PC 드롭다운 패널 */
.wb-multi-wrap .wb-multi-panel {
  position:absolute; left:0; right:0; top:calc(100% + .2rem); z-index:40;
  margin:0; padding:.75rem; background:#fff; border:1px solid #e2e8f0; border-radius:.5rem;
  box-shadow:0 .75rem 2rem rgba(2,6,23,.12); max-height:28rem; overflow:auto; display:none;
}
.wb-multi-wrap.is-open:not(.is-sheet) .wb-multi-panel { display:block; }
/* 자동 드롭업 */
.wb-multi-wrap.drop-up .wb-multi-panel { top:auto; bottom:calc(100% + .2rem); }

/* 숫자 그리드 */
.wb-grid { display:grid; grid-template-columns:repeat(9, 1fr); gap:.5rem; }
.wb-num {
  width:3rem; height:3rem; display:flex; align-items:center; justify-content:center;
  border:1px solid #cbd5e1; border-radius:999px; cursor:pointer; user-select:none;
  transition:background .15s, border-color .15s;
}
.wb-num:hover { background:#f1f5f9; }
.wb-num[aria-selected="true"] { background:#ca60fa; border-color:#ca60fa; }
.wb-num.is-disabled { background:#555; color:#999; border-color:#333; box-shadow:inset .2rem .2rem .2rem rgba(0,0,0,.5); }
.wb-num.is-disabled:hover { background:#555; color:#999; border-color:#333; }

@media (prefers-color-scheme: dark) {
  .wb-multi-wrap .wb-multi-panel { background:#161f3a; border-color:#6592e7; }
  .wb-num { border-color:#443867; color:#e2e8f0; }
  .wb-num:hover { background:radial-gradient(farthest-corner at 40% 38%, #486291 0%, #0d121c 50%); }
  .wb-num[aria-selected="true"] { background:radial-gradient(farthest-corner at 40% 38%, #6d89bd 0%, #18223c 50%); border-color: #6592e7; }
}

/* 모바일 시트 표시(Multi) */
.wb-multi-wrap .wb-backdrop { z-index:60; background:rgba(2,6,23,.4); }
.wb-multi-wrap .wb-sheet    { z-index:70;  }
.wb-multi-wrap:not(.is-sheet) .wb-sheet { display:none; }
.wb-multi-wrap.is-sheet .wb-backdrop { opacity:0; pointer-events:none; transition:opacity .2s; }
.wb-multi-wrap.is-sheet .wb-sheet { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(100%); box-shadow:none; display:none;}
.wb-multi-wrap.is-open.is-sheet .wb-backdrop { opacity:1; pointer-events:auto; }
.wb-multi-wrap.is-open.is-sheet .wb-sheet    { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); box-shadow:0 -.75rem 2rem rgba(2,6,23,.2); }

/* =========================
   멀티 그리드 반응형
   ========================= */
@media (max-width:1200px){
	.wb-grid { grid-template-columns:repeat(8, 1fr); gap:.5rem; }
	.wb-num { width:100%; height:0; padding-top:calc(50% - 1px); padding-bottom:calc(50% - 1px); }
}
@media (max-width:1024px){
	.wb-grid { grid-template-columns:repeat(7, 1fr); }
}
@media (max-width:900px){
	.wb-grid { grid-template-columns:repeat(13, 1fr); }
}
@media (max-width:830px){
	.wb-grid { grid-template-columns:repeat(12, 1fr); }
}
@media (max-width:760px){
	.wb-grid { grid-template-columns:repeat(11, 1fr); }
}
@media (max-width:730px){
	.wb-grid { grid-template-columns:repeat(10, 1fr); }
}
@media (max-width:690px){
	.wb-grid { border-left:1px solid #ca60fa; border-top:1px solid #ca60fa; border-radius: .5rem .5rem 0 .5rem; gap:0; }
	.wb-num { border-radius:0;  border:none; border-right:1px solid #ca60fa; border-bottom:1px solid #ca60fa; }
	.wb-grid .wb-num:nth-child(1) { border-radius:.5rem 0 0 0 }
	.wb-grid .wb-num:nth-child(10) { border-radius:0 .5rem 0 0;}
	.wb-grid .wb-num:nth-child(40) { border-radius:0 0 .5rem 0;}
	.wb-grid .wb-num:nth-child(41) { border-radius:0 0 0 .5rem;}
	.wb-grid .wb-num:nth-child(45) { border-radius:0 0 .5rem 0;}

}
@media (max-width:640px){
	.wb-grid { grid-template-columns:repeat(9, 1fr); }
	.wb-grid .wb-num:nth-child(9) { border-radius:0 .5rem 0 0; }
	.wb-grid .wb-num:nth-child(10) { border-radius:0;}
	.wb-grid .wb-num:nth-child(37) { border-radius:0 0 0 .5rem;}
	.wb-grid .wb-num:nth-child(40) { border-radius:0;}
	.wb-grid .wb-num:nth-child(41) { border-radius:0;}
}
@media (max-width:600px){
	.wb-num[aria-selected="true"] { background:var(--number-select-rect); }
	.wb-grid { grid-template-columns:repeat(8, 1fr); }
	.wb-grid .wb-num:nth-child(8) { border-radius:0 .5rem 0 0; }
	.wb-grid .wb-num:nth-child(9) { border-radius:0;}
	.wb-grid .wb-num:nth-child(37) { border-radius:0;}
	.wb-grid .wb-num:nth-child(40) { border-radius:0 0 .5rem 0;}
	.wb-grid .wb-num:nth-child(41) { border-radius:0 0 0 .5rem;}
}
@media (max-width:540px){
	.wb-grid { grid-template-columns:repeat(7, 1fr); }
	
	.wb-grid .wb-num:nth-child(7) { border-radius:0 .5rem 0 0; }
	.wb-grid .wb-num:nth-child(8) { border-radius:0;}
	.wb-grid .wb-num:nth-child(40) { border-radius:0;}
	.wb-grid .wb-num:nth-child(41) { border-radius:0;}
	.wb-grid .wb-num:nth-child(42) { border-radius:0 0 .5rem 0;}
	.wb-grid .wb-num:nth-child(43) { border-radius:0 0 0 .5rem;}
}