/* ============================== [UTILS] divider / section header ============================== */
/*구분선/디바이더 & 섹션 헤더*/
.jw-divider { display:block; width:100%; height:1px; background:#eaeaea; margin:10px 0; }
.jw-section-header { display:flex; align-items:center; gap:10px; margin:16px 0; }
.jw-section-header .title { font-weight:700; }
.jw-section-header .sub { font-size:12px; color:#999; }

/* ============================== [ICONS] ============================== */
.ic-close { position:relative; width:24px; height:24px; cursor:pointer; display:flex; justify-content:center; align-items:center; transition-duration:.5s; }
.ic-close::after { content:""; position:absolute; width:var(--line,2px); height:100%; background:var(--color,#222); transform:rotate(45deg); }
.ic-close::before { content:""; position:absolute; width:var(--line,2px); height:100%; background:var(--color,#222); transform:rotate(-45deg); }
.ic-close:hover { transform:rotate(360deg); }

.ic-hamberg { position:relative; width:var(--s,30px); height:var(--s,25px); cursor:pointer; }
.ic-hamberg > i { position:absolute; width:20px; height:2px; background:var(--color,#ccc); left:50%; transform:translate(-50%,-50%); transition:all .2s ease; }
.ic-hamberg > i:nth-child(1) { top:calc(0% + 5px); }
.ic-hamberg > i:nth-child(2) { top:50%; }
.ic-hamberg > i:nth-child(3) { top:calc(100% - 5px); }
.ic-hamberg.on > i:first-child { top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); }
.ic-hamberg.on > i:nth-child(2) { top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; } /* fixed */
.ic-hamberg.on > i:last-child { top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); }

.ic-arrow { position:relative; width:10px; height:10px; cursor:pointer; transform:rotate(0deg); }
.ic-arrow[data-dir="left"] { transform:rotate(180deg); }
.ic-arrow::after, .ic-arrow::before { content:""; position:absolute; left:0; right:0; margin:auto; width:100%; height:2px; background:var(--bg); border-radius:2px; }
.ic-arrow::after { top:-2px; transform:rotate(45deg); }
.ic-arrow::before { top:2px; transform:rotate(-45deg); }

/* ============================== [BUTTON] ============================== */
.jw-button {
	position:relative; display:flex; justify-content:center; align-items:center; gap:10px; cursor:pointer; user-select:none;
	transition:background 0.2s, border-color 0.2s, color 0.2s;
	--jw-btn-h:35px;
	--jw-btn-px:10px;
	--jw-btn-r:5px;
	--jw-btn-bg:#222;
	--jw-btn-border:#000;
	--jw-btn-color:#FFFFFF;
	--jw-btn-bg-hover:#4d4d4d;
	--jw-btn-border-hover:#ccc;
	height:var(--jw-btn-h);
	padding:0 var(--jw-btn-px);
	border-radius:var(--jw-btn-r);
	background:var(--jw-btn-bg);
	border:1px solid var(--jw-btn-border);
	color:var(--jw-btn-color);
}

.jw-confirm:disabled { opacity: 0.1; cursor: not-allowed; }
.jw-button:hover { background:var(--jw-btn-bg-hover); border-color:var(--jw-btn-border-hover); }
.jw-button:disabled { cursor:not-allowed; pointer-events:none; background:#EAEAEA; border-color:#EAEAEA; color:#B0B0B0; }
.jw-button.typeA { --jw-btn-bg:#F9FAFB; --jw-btn-border:#D1D5DB; --jw-btn-color:#111827; --jw-btn-bg-hover:#E5E7EB; --jw-btn-border-hover:#9CA3AF; }
.jw-button.typeB { --jw-btn-bg:#f4f6f8; --jw-btn-border:#f4f6f8; --jw-btn-color:#111827; --jw-btn-bg-hover:#e9edf1; --jw-btn-border-hover:#e9edf1; }
.jw-button.typeC { --jw-btn-bg:#f4f6f8; --jw-btn-border:#D4D4D4; --jw-btn-color:#666; --jw-btn-bg-hover:#f4f6f8; --jw-btn-border-hover:#1677FF; }
.jw-button.typeD { --jw-btn-bg:#222; --jw-btn-border:transparent; --jw-btn-color:#fff; --jw-btn-bg-hover:#383838; --jw-btn-border-hover:#000; }
.jw-button.typeG { --jw-btn-bg:transparent; --jw-btn-border:transparent; --jw-btn-color:#222; --jw-btn-bg-hover:#E5E7EB; --jw-btn-border-hover:#9CA3AF; }

.jw-button.is-block { width:100%; }
.jw-button.is-icon { width:40px; padding:0; }

.jw-button.is-hover { background:var(--jw-btn-bg-hover); border-color:var(--jw-btn-border-hover); }
.jw-button.is-active { transform:translateY(1px); background:var(--jw-btn-bg-hover); border-color:var(--jw-btn-border-hover); }

.jw-button.is-loading { pointer-events:none; opacity:.9; }
.jw-button.is-loading::after { content:""; width:14px; height:14px; border:2px solid rgba(255,255,255, .45); border-top-color:currentColor; border-radius:50%; animation:jw-spin 1s linear infinite; }


/* ============================== [FORM] checkbox / radio ============================== */
.jw-checkbox { position: relative; display:inline-flex; align-items:center; --border-color:#222; cursor:pointer; }
.jw-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.jw-checkbox i { position:relative; width:20px; height:20px; border:1px solid var(--border-color); border-radius:3px; transition:background .1s ease; }
.jw-checkbox i::after { content:""; position:absolute; top:0; left:7px; width:6px; height:16px; border-right:2px solid var(--border-color); border-bottom:2px solid var(--border-color); transform:rotate(45deg) scale(0); opacity:0; transition:transform .2s ease,opacity .2s ease; }
.jw-checkbox input:checked + i::after { opacity:1; transform:rotate(45deg) scale(1); }
.jw-checkbox input:focus-visible + i { outline:2px solid #222; outline-offset:2px; }
.jw-checkbox span { margin-left:10px; color:#222; }


.jw-radio { position: relative; display:flex; align-items:center; cursor:pointer; }
.jw-radio input { position: absolute; opacity: 0; width: 0; height: 0; z-index:-1; }
.jw-radio .icon { position:relative; width:16px; height:16px; border:1px solid #CBCCD4; border-radius:50%; transition:border-color .1s ease; }
.jw-radio .icon::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:#3F51B5; opacity:0; transition:opacity .2s ease; }
.jw-radio input:checked + .icon { border-color:#3F51B5; }
.jw-radio input:checked + .icon::after { opacity:1; }
.jw-radio input:focus-visible + .icon { outline:2px solid #222; outline-offset:2px; }
.jw-radio .text { margin-left:10px; color:#666; }
.jw-radio.is-accent input:checked + .icon { border-color:#ff0000; }
.jw-radio.is-accent .icon::after { background:#ff0000; }


.jw-tag-btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border:1px solid #e5e7eb; background:#fff; border-radius:999px; cursor:pointer; }
.jw-tag-btn:hover { background:#f4f6f8; }
.jw-tag-btn .x { width:14px; height:14px; position:relative; display:inline-block; opacity:.7; }
.jw-tag-btn .x:before, .jw-tag-btn .x:after { content:""; position:absolute; left:50%; top:50%; width:2px; height:14px; background:#111; transform-origin:center; }
.jw-tag-btn .x:before { transform:translate(-50%,-50%) rotate(45deg); }
.jw-tag-btn .x:after { transform:translate(-50%,-50%) rotate(-45deg); }


/* ============================== [TABLE] ============================== */
.jw-tableA { width:100%; table-layout:fixed; border-collapse:collapse; }
.jw-tableA th { height:40px; background:#f4f6f8; border-top:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; }
.jw-tableA td { height:40px; }
.jw-tableA td { border-bottom:1px solid #ccc; }
.jw-tableA tr.hover:hover td { background:#F9F9F9; }
.jw-tableA .center { place-items:center; text-align:center; }

.jw-tableB { width: 100%; }
.jw-tableB tr:last-child td, .jw-tableB tr:last-child th { border-bottom:1px solid #000; }
.jw-tableB tr:first-child td, .jw-tableB tr:first-child th { border-top:1px solid #000; }
.jw-tableB td { padding:3px 10px; height:45px; border-bottom:1px solid #E9E9E9; }
.jw-tableB th { background:#F5F5F5; text-align:center; color:#1D1D1D; border-bottom:1px solid #E9E9E9; }

.jw-table-header { display:flex; align-items:center; justify-content:space-between; }


/* ============================== [PAGINATION] ============================== */
/* ========= pagination (improved override) ========= */
.jw-pagebox { margin-top:20px; display:flex; align-items:center; justify-content:center; gap:10px; }
.jw-pagebox > .info { flex:1; font-size:12px; font-weight:300; color:#666; min-width:90px; }
.jw-pagebox > .info.right { display:flex; justify-content:flex-end; }
.jw-pagebox > .contents { flex:0 0 auto; display:flex; justify-content:center; align-items:center; gap:6px; }
.jw-pagebox > .contents > div { position:relative; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.jw-pagebox > .contents > div.btn { width:32px; height:32px; }
.jw-pagebox > .contents > div.btn > button { width:100%; height:100%; border-radius:10px; }

.jw-pagebox > .contents > div.btn.off { display:flex; opacity:.35; cursor:default; }
.jw-pagebox > .contents > div.btn.off > button { pointer-events:none; }
.jw-pagebox > .contents > .page { display:flex; justify-content:center; align-items:center; gap:4px; }
.jw-pagebox > .contents > .page > .p { width:32px; height:32px; display:flex; justify-content:center; align-items:center; cursor:pointer; border-radius:10px; }
.jw-pagebox > .contents > .page > .p:hover { background:#f3f4f6; }
.jw-pagebox > .contents > .page > .p.show { color:#4d7cff; font-weight:800; background:rgba(77,124,255, .10); }
.jw-pagebox > .contents > .page > .p.ellipsis { cursor:default; color:#9ca3af; }
.jw-pagebox > .contents > .page > .p.ellipsis:hover { background:transparent; }

@media (max-width:560px) {
	.jw-pagebox { gap:6px; }
	.jw-pagebox > .info { display:none; }
	.jw-pagebox > .info.right { display:none; }
	.jw-pagebox > .contents > div.btn { width:30px; height:30px; }
	.jw-pagebox > .contents > .page > .p { width:30px; height:30px; }
}

.jw-ico { width:16px; height:16px; display:block; fill:currentColor; }
.jw-pagebox .btn > button { display:flex; justify-content:center; align-items:center; color:#111; }
.jw-pagebox .btn.off > button { color:#9ca3af; }


/* ============================== [TOOLTIP] ============================== */
/* 툴팁 (JS 없이 data-attr) */
[jw-tooltip] { position:relative; }
[jw-tooltip]:hover::after { content:attr(jw-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:6px 8px; font-size:12px; background:#222; color:#fff; border-radius:4px; white-space:nowrap; z-index:100; }
[jw-tooltip]:hover::before { content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#222; }

/* ========= tooltip (positions) ========= */
[jw-tooltip][jw-tooltip-pos="top"]:hover::after,[jw-tooltip]:hover::after { bottom:calc(100% + 8px); top:auto; left:50%; right:auto; transform:translateX(-50%); }
[jw-tooltip][jw-tooltip-pos="top"]:hover::before,[jw-tooltip]:hover::before { bottom:100%; top:auto; left:50%; right:auto; transform:translateX(-50%); border:6px solid transparent; border-top-color:#222; border-bottom-color:transparent; }

[jw-tooltip][jw-tooltip-pos="bottom"]:hover::after { top:calc(100% + 8px); bottom:auto; left:50%; transform:translateX(-50%); }
[jw-tooltip][jw-tooltip-pos="bottom"]:hover::before { top:100%; bottom:auto; left:50%; transform:translateX(-50%); border:6px solid transparent; border-bottom-color:#222; border-top-color:transparent; }

[jw-tooltip][jw-tooltip-pos="left"]:hover::after { left:auto; right:calc(100% + 8px); top:50%; bottom:auto; transform:translateY(-50%); }
[jw-tooltip][jw-tooltip-pos="left"]:hover::before { left:auto; right:100%; top:50%; bottom:auto; transform:translateY(-50%); border:6px solid transparent; border-left-color:#222; border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent; }

[jw-tooltip][jw-tooltip-pos="right"]:hover::after { left:calc(100% + 8px); right:auto; top:50%; bottom:auto; transform:translateY(-50%); }
[jw-tooltip][jw-tooltip-pos="right"]:hover::before { left:100%; right:auto; top:50%; bottom:auto; transform:translateY(-50%); border:6px solid transparent; border-right-color:#222; border-top-color:transparent; border-left-color:transparent; border-bottom-color:transparent; }


/* ============================== [MODAL] dialog base ============================== */
/* ========= dialog ========= */
dialog { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:15px; border:1px solid #ccc; border-radius:10px; background:#fff; box-shadow:0 4px 8px rgba(0,0,0, .2); width:300px; overflow:hidden; outline: none !important; }
dialog:focus, dialog:focus-visible { outline: none !important; }
dialog::-moz-focus-inner { border: 0; }

dialog .dialog-container { width:100%; height:100%; display:flex; flex-direction:column; }
dialog h1 { padding-left:10px; font-size:16px; font-weight:bold; height:30px; display:flex; align-items:center; }
dialog .dialog-content { flex:1; padding:10px; }
dialog .dialog-controls { display:flex; justify-content:flex-end; gap:10px; }
dialog .dialog-controls button { height:30px; }
dialog:focus-visible { outline:2px solid #222; }

dialog.jw-modal { width:min(520px, calc(100vw - 32px)); padding:0; border:0; border-radius:14px; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0, .25); }
dialog.jw-modal::backdrop { background:rgba(0,0,0, .45); backdrop-filter:blur(2px); }

.jw-modal-head { height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid #eee; background:#fff; }
.jw-modal-title { font-size:14px; font-weight:800; color:#111; }
.jw-modal-close { width:32px; height:32px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.jw-modal-close:hover { background:#f4f6f8; }

.jw-modal-body { padding:14px; background:#fff; }
.jw-modal-desc { font-size:13px; color:#333; line-height:1.5; }
.jw-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:12px 14px 14px 14px; background:#fff; border-top:1px solid #eee; }

@keyframes jw-modal-in { from { transform:translate(-50%,-46%) scale(.98); opacity:0; } to { transform:translate(-50%,-50%) scale(1); opacity:1; } }
dialog.jw-modal[open] { animation:jw-modal-in .18s ease-out both; }



/* ========= scroll top button ========= */
.jw-topbtn{ position:fixed; right:clamp(10px, calc(10px + (190 * ((100vw - 500px) / 1420))), 200px); bottom:18px; width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255, .12); background:rgba(20,22,26, .92); box-shadow:0 10px 30px rgba(0,0,0, .55); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:500; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; color:rgba(255,255,255, .92); }

.jw-topbtn.is-show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.jw-topbtn:hover{ background:rgba(34,36,42, .95); border-color:rgba(255,255,255, .18); }
.jw-topbtn .jw-ico{ width:18px; height:18px; fill:currentColor; }



mark { background: rgba(255, 230, 120, .8); color: inherit; padding: 0 .2em; border-radius: .25em; }
del { color: rgba(0, 0, 0, .55); text-decoration: line-through; text-decoration-thickness: .12em; text-decoration-color: rgba(0, 0, 0, .35); }
em { font-style: italic; font-weight: 600; color: inherit; }

.required { display: inline-block; margin-left: 4px; color: #e53935; font-weight: 700; line-height: 1; vertical-align: middle; }

.jw-input { position:relative; display:flex; align-items:center; gap:8px; --jw-in-h:40px; --jw-in-px:12px; --jw-in-r:10px; --jw-in-bg:#fff; --jw-in-bd:#d1d5db; --jw-in-tx:#111827; --jw-in-ph:#9ca3af; --jw-in-focus:#111827; height:var(--jw-in-h); padding:0 var(--jw-in-px); border-radius:var(--jw-in-r); border:1px solid var(--jw-in-bd); background:var(--jw-in-bg); color:var(--jw-in-tx); }
.jw-input.v-default { --jw-in-bg:#fff; --jw-in-bd:#d1d5db; }
.jw-input.v-filled { --jw-in-bg:#f4f6f8; --jw-in-bd:#e5e7eb; }

.jw-input.v-underline { border:0; border-bottom:1px solid #d1d5db; border-radius:0; padding:0; box-shadow:none; }
.jw-input.v-underline:focus-within { border:0; border-bottom:1px solid var(--jw-in-focus); box-shadow:none; }
.jw-input.v-underline.is-focus { border:0; border-bottom:1px solid var(--jw-in-focus); box-shadow:none; }
.jw-input.v-underline.is-error { border:0; border-bottom:1px solid #d32f2f; box-shadow:none; }
.jw-input.v-underline.is-valid { border:0; border-bottom:1px solid #2e7d32; box-shadow:none; }

.jw-input.is-error { border-color:#d32f2f; box-shadow:0 0 0 3px rgba(211,47,47,.10); }
.jw-input.is-valid { border-color:#2e7d32; box-shadow:0 0 0 3px rgba(46,125,50,.10); }
.jw-input.is-disabled { background:#f3f3f3; border-color:#e5e7eb; color:#999; }
.jw-input.is-disabled .jw-input-control { cursor:not-allowed; }
.jw-input.is-block { width:100%; }

.jw-input.v-underline-float { position:relative; border:0; border-bottom:1px solid #d1d5db; border-radius:0; padding:0; box-shadow:none; }
.jw-input.v-underline-float .jw-input-control { padding:12px 0 6px 0; }
.jw-input.v-underline-float .jw-float { position:absolute; left:0; top:50%; transform:translateY(-50%); color:#999; pointer-events:none; user-select:none; transition:all .25s ease; }
.jw-input.v-underline-float:focus-within .jw-float,
.jw-input.v-underline-float.on .jw-float { top:0; font-size:12px; color:#111; }
.jw-input.v-underline-float .jw-uline { position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#eee; overflow:hidden; }
.jw-input.v-underline-float .jw-uline > div { width:0%; height:100%; background:#111827; transition:width .25s ease; }
.jw-input.v-underline-float:focus-within .jw-uline > div { width:100%; }
.jw-input.v-underline-float.is-error { border:0; border-bottom:1px solid #d32f2f; box-shadow:none; }
.jw-input.v-underline-float.is-error .jw-uline > div { background:#d32f2f; }
.jw-input.v-underline-float.is-valid { border:0; border-bottom:1px solid #2e7d32; box-shadow:none; }
.jw-input.v-underline-float.is-valid .jw-uline > div { background:#2e7d32; }