main { display:flex; justify-content:center; padding:100px 0; }
main > .container { width:100%; max-width:1280px; }

main .container > h1 { margin-top:60px; display:flex; align-items:center; }
main .container > h1 span { position:relative; font-size:40px; font-weight:500; }
main .container > h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }

.jw-app-nav { display:flex; align-items:center; gap:10px; }
.jw-app-nav a { background:#fff; height:25px; font-size:12px; border: 1px solid #ccc; border-radius:5px; padding:0 10px; display:flex; justify-content:center; align-items:center; }
.jw-app-nav a.on { background:#FE8130; color:#fff; border: 1px solid #FE8130; }


.jw-section-header { display:flex; align-items:flex-end; gap:10px; margin:16px 0; }
.jw-section-header .title { font-size:25px; font-weight:700; }
.jw-section-header .sub { color:#999; font-size:12px; }


.jw-demo-card { background:#fff; padding:16px; }
.jw-demo-title { font-weight:700; margin-bottom:12px; }
.jw-demo-sub { font-size:12px; color:#888; margin-bottom:10px; }
.jw-demo-row { display:flex; flex-wrap:wrap; gap:10px; }
.jw-demo-col { display:flex; flex-direction:column; gap:10px; }

/* ============================== [UTILS] grid / demo card ============================== */
.jw-grid { display:grid; gap:18px; }
.jw-grid.jw-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }


/* ============================== [PROFILE] profile card ============================== */
.jw-profile-card { background: #fff; border-radius: 14px; padding: 16px; }
.jw-profile-card.jw-profile-compact { padding: 14px; }
.jw-profile-card .jw-profile-top { display: flex; align-items: center; gap: 12px; }
.jw-profile-card .jw-profile-main { flex: 1; min-width: 0; }
.jw-profile-card .jw-profile-name { display: flex; align-items: center; gap: 8px; }
.jw-profile-card .jw-profile-name b { font-size: 15px; color: #111; }
.jw-profile-card .jw-profile-role { font-size: 12px; color: #222; margin-top: 2px; }
.jw-profile-card .jw-profile-sub { font-size: 12px; color: #777; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jw-profile-card .jw-profile-avatar { width: 80px; height: 80px; }
.jw-profile-card .jw-profile-status { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: #cbd5e1; }
.jw-profile-card .jw-profile-status.on { background: #22c55e; }
.jw-profile-card .jw-profile-status.off { background: #cbd5e1; }
.jw-profile-card .jw-profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jw-profile-card .jw-profile-meta { margin-top: 12px; display: grid; gap: 8px; }
.jw-profile-card .jw-profile-meta .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #f4f6f8; }
.jw-profile-card .jw-profile-meta .k { font-size: 12px; color: #888; }
.jw-profile-card .jw-profile-meta .v { font-size: 12px; color: #222; }
.jw-profile-card .jw-profile-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jw-profile-card .jw-profile-stats .stat { background: #f4f6f8; border-radius: 10px; padding: 10px 8px; text-align: center; }
.jw-profile-card .jw-profile-stats .n { font-size: 14px; font-weight: 700; color: #111; }
.jw-profile-card .jw-profile-stats .t { font-size: 11px; color: #888; margin-top: 2px; }
.jw-profile-card .jw-profile-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.jw-profile-card .jw-profile-actions .jw-button { height: 36px; padding: 0 18px; }

.jw-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }


/* ========= simple layouts & menus (kept) ========= */
.jw-layout-3col { display:grid; grid-template-columns:1fr 2fr 1fr; gap:16px; padding:16px; }
.jw-layout-3col .left-column,.jw-layout-3col .center-column,.jw-layout-3col .right-column { padding:16px; background:#f0f0f0; border:1px solid #ddd; border-radius:8px; text-align:center; }

.jw-layout-2col { display:grid; grid-template-columns:1fr 3fr; gap:16px; padding:16px; }
.jw-layout-2col .sidebar { background:#79a06b; color:#fff; padding:16px; border-radius:8px; }
.jw-layout-2col .content { background:#f0f0f0; padding:16px; border:1px solid #ddd; border-radius:8px; }

.jw-layout-header-sidebar { display:grid; grid-template-areas:"header header" "sidebar main"; grid-template-columns:200px 1fr; grid-template-rows:auto 1fr; height:300px; gap:10px; }
.jw-layout-header-sidebar .header { grid-area:header; background:#007BFF; color:#fff; padding:16px; text-align:center; }
.jw-layout-header-sidebar .sidebar { grid-area:sidebar; background:#f4f4f4; padding:16px; }
.jw-layout-header-sidebar .main { grid-area:main; background:#fff; padding:16px; border:1px solid #ddd; border-radius:8px; }

.jw-layout-center { display:flex; justify-content:center; align-items:center; height:300px; background:#f8f9fa; }
.jw-layout-center .content { padding:16px; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,.1); }

.jw-layout-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:16px; padding:16px; }
.jw-layout-grid .card { background:#fff; padding:16px; border:1px solid #ddd; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,.1); text-align:center; }

.jw-menu-horizontal { background:#007BFF; padding:10px; }
.jw-menu-horizontal .menu-list { display:flex; list-style:none; margin:0; padding:0; }
.jw-menu-horizontal .menu-item { margin-right:20px; }
.jw-menu-horizontal .menu-item:last-child { margin-right:0; }
.jw-menu-horizontal .menu-item a { color:#fff; text-decoration:none; font-weight:bold; padding:5px 10px; transition:background .3s; }
.jw-menu-horizontal .menu-item a:hover { background:#0056b3; border-radius:4px; }

.jw-menu-vertical { background:#f8f9fa; padding:10px; border:1px solid #ddd; border-radius:8px; width:200px; }
.jw-menu-vertical .menu-list { list-style:none; margin:0; padding:0; }
.jw-menu-vertical .menu-item { margin-bottom:10px; }
.jw-menu-vertical .menu-item:last-child { margin-bottom:0; }
.jw-menu-vertical .menu-item a { color:#333; text-decoration:none; font-weight:bold; padding:5px 10px; display:block; border-radius:4px; transition:background .3s,color .3s; }
.jw-menu-vertical .menu-item a:hover { background:#007BFF; color:#fff; }

.jw-menu-dropdown { background:#f8f9fa; padding:10px; border:1px solid #ddd; border-radius:8px; }
.jw-menu-dropdown .menu-list { list-style:none; margin:0; padding:0; position:relative; display:flex; align-items:center; }
.jw-menu-dropdown .menu-item { position:relative; }
.jw-menu-dropdown .menu-item > a { color:#333; text-decoration:none; font-weight:bold; padding:5px 10px; display:block; transition:background .3s; }
.jw-menu-dropdown .menu-item:hover > a { background:#007BFF; color:#fff; border-radius:4px; }
.jw-menu-dropdown .submenu { list-style:none; margin:0; padding:0; position:absolute; top:100%; left:0; display:none; background:#fff; border:1px solid #ddd; border-radius:4px; box-shadow:0 4px 8px rgba(0,0,0,.1); min-width:150px; z-index:100; }
.jw-menu-dropdown .menu-item:hover .submenu { display:block; }
.jw-menu-dropdown .submenu li a { display:block; padding:8px 12px; color:#333; text-decoration:none; transition:background .3s; }
.jw-menu-dropdown .submenu li a:hover { background:#007BFF; color:#fff; border-radius:4px; }




.jw-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.jw-label { font-size:12px; color:#666; }
.jw-help { font-size:12px; margin-top:8px; color:#888; }
.jw-help.is-error { color:#d32f2f; }
.jw-help.is-valid { color:#2e7d32; }

.jw-variants-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 14px; }
.jw-variants-grid .jw-field { margin-bottom:0; }
.jw-variants-grid .jw-input { width:100%; }

@media (max-width: 640px) {
  .jw-variants-grid { grid-template-columns:1fr; }
}



.jw-radio-group { display:flex; gap:12px; flex-wrap:wrap; }
.jw-radio-group.is-row { flex-direction:row; }
.jw-radio-group.is-col { flex-direction:column; align-items:flex-start; }

.jw-radio.is-disabled, .jw-radio-desc.is-disabled { opacity:.55; pointer-events:none; }

.jw-radio-desc { position:relative; display:flex; align-items:flex-start; gap:10px; padding:12px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.jw-radio-desc input { position:absolute; opacity:0; }
.jw-radio-desc .icon { position:relative; width:16px; height:16px; border:1px solid #CBCCD4; border-radius:50%; margin-top:2px; }
.jw-radio-desc .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-desc input:checked + .icon { border-color:#3F51B5; }
.jw-radio-desc input:checked + .icon::after { opacity:1; }
.jw-radio-desc .body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.jw-radio-desc .title { font-size:13px; color:#111; font-weight:700; }
.jw-radio-desc .desc { font-size:12px; color:#888; }
.jw-radio-desc:has(input:checked) { border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(17,24,39,.06); }


.jw-check-group { display:flex; gap:12px; flex-wrap:wrap; }
.jw-check-group.is-row { flex-direction:row; }
.jw-check-group.is-col { flex-direction:column; align-items:flex-start; }

.jw-checkbox.is-disabled, .jw-check-desc.is-disabled { opacity:.55; pointer-events:none; }

/* desc style */
.jw-check-desc { position:relative; display:flex; align-items:flex-start; gap:10px; padding:12px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.jw-check-desc input { position:absolute; opacity:0; }
.jw-check-desc .icon { position:relative; width:20px; height:20px; border:1px solid #222; border-radius:5px; margin-top:1px; transition:background .1s ease; }
.jw-check-desc .icon::after { content:""; position:absolute; top:-3px; left:7px; width:6px; height:16px; border-right:2px solid #222; border-bottom:2px solid #222; transform:rotate(45deg) scale(0); opacity:0; transition:transform .2s ease, opacity .2s ease; }
.jw-check-desc input:checked + .icon::after { opacity:1; transform:rotate(45deg) scale(1); }
.jw-check-desc .body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.jw-check-desc .title { font-size:13px; color:#111; font-weight:700; }
.jw-check-desc .desc { font-size:12px; color:#888; }
.jw-check-desc:has(input:checked) { border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(17,24,39,.06); }



.jw-slider{ --accent:#4d7cff; --pct:0%; --minPct:0%; --maxPct:100%; width:100%; }
.jw-slider-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.jw-slider-head .jw-label{ font-size:12px; color:#666; }
.jw-slider-head .jw-slider-value{ font-size:12px; color:#111; font-weight:700; }

.jw-slider-wrap{ position:relative; height:38px; overflow:visible; }
.jw-slider-bar{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:6px; border-radius:999px; }
.jw-slider-bar .rail{ position:absolute; inset:0; background:#e5e7eb; border-radius:999px; }
.jw-slider-bar .fill{ position:absolute; top:0; bottom:0; left:0; width:var(--pct); background:var(--accent); border-radius:999px; }

.jw-slider-input{ position:absolute; left:0; top:0; width:100%; height:100%; margin:0; background:transparent; -webkit-appearance:none; appearance:none; z-index:2; }

#sub0203 select.jw-select{ width:100%; min-height:var(--select-height,36px); padding:0 10px; border:1px solid #d9dce1; border-radius:6px; background:#fff; color:#222; font:inherit; }
#sub0203 select.jw-select:focus{ border-color:var(--accent); outline:2px solid rgba(47,123,255,.16); outline-offset:1px; }
#sub0203 select.jw-select:disabled{ background:#f3f4f6; color:#9ca3af; cursor:not-allowed; }
#sub0203 select.jw-select[multiple]{ height:auto; min-height:112px; padding:5px; }
#sub0203 select.jw-select[multiple] option{ padding:4px 6px; }

/* jongwonweb.com 공통 컴포넌트 중 local 공통 CSS에 없는 Component 전용 규칙 */
.jw-divider { display:block; width:100%; height:1px; background:#eaeaea; margin:10px 0; }
.jw-btn-group { display:flex; flex-wrap:wrap; gap:10px; }
.jw-btn-seg { display:inline-flex; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff; }
#sub0203 .jw-button.typeCard-1, #sub0203 .jw-button.v-primary { --jwbutton-bg:#111827; --jwbutton-color:#fff; --jwbutton-bghover:#0b1220; border-color:#111827; border-radius:10px; }
#sub0203 .jw-button.typeCard-2, #sub0203 .jw-button.v-secondary { --jwbutton-bg:#f4f6f8; --jwbutton-color:#111827; --jwbutton-bghover:#e9edf1; border-color:#e5e7eb; border-radius:10px; }
#sub0203 .jw-button.typeCard-3, #sub0203 .jw-button.v-outline { --jwbutton-bg:#fff; --jwbutton-color:#111827; --jwbutton-bghover:#f9fafb; border-color:#d1d5db; border-radius:10px; }
#sub0203 .jw-button.v-ghost { --jwbutton-bg:transparent; --jwbutton-color:#111827; --jwbutton-bghover:#f4f6f8; border-color:transparent; border-radius:10px; }
#sub0203 .jw-button.v-danger { --jwbutton-bg:#d32f2f; --jwbutton-color:#fff; --jwbutton-bghover:#b71c1c; border-color:#d32f2f; border-radius:10px; }
#sub0203 .jw-button.typeCard-1, #sub0203 .jw-button.typeCard-2, #sub0203 .jw-button.typeCard-3 { height:36px; padding:0 18px; }
#sub0203 .jw-button.is-block { width:100%; }
#sub0203 .jw-button.is-icon { width:40px; padding:0; }
#sub0203 .jw-button.is-hover, #sub0203 .jw-button.is-active { background:var(--jwbutton-bghover); }
#sub0203 .jw-button.is-active { transform:translateY(1px); }
#sub0203 .jw-button.is-loading { pointer-events:none; opacity:.9; }
#sub0203 .jw-button.is-loading::after { width:14px; height:14px; border:2px solid rgba(255,255,255,.45); border-top-color:currentColor; border-radius:50%; content:""; animation:jw-spin 1s linear infinite; }
.jw-btn-seg .jw-button.is-active { --jwbutton-bg:#111827; --jwbutton-color:#fff; --jwbutton-bghover:#0b1220; border-color:#111827; background:var(--jwbutton-bg); color:var(--jwbutton-color); }
@keyframes jw-spin { to { transform:rotate(360deg); } }
.jw-hover-wrap { position:relative; display:inline-flex; }
.jw-hover-wrap::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%) scale(0); opacity:0; background:rgba(0,0,0,.08); transition:transform .35s ease, opacity .2s ease; pointer-events:none; }
.jw-hover-wrap:hover::after { transform:translate(-50%,-50%) scale(4); opacity:1; }
.jw-hover-wrap:active::after { transform:translate(-50%,-50%) scale(6); opacity:.55; }
.jw-hover-wrap > .jw-button { position:relative; z-index:1; }

.jw-avatar { position:relative; display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; overflow:hidden; border-radius:50%; background:#eee; color:#666; font-size:14px; }
.jw-avatar img { width:100%; height:100%; object-fit:cover; }
.jw-profile-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }

.jw-input-group { display:flex; align-items:stretch; gap:8px; }
.jw-input-addon { display:inline-flex; height:40px; align-items:center; justify-content:center; padding:0 10px; border:1px solid #e5e7eb; border-radius:10px; background:#f4f6f8; color:#444; font-size:12px; }
.jw-input:has(.jw-input-control) { --jw-in-px:0; }
.jw-input .jw-input-control { width:100%; height:100%; padding:0 10px; border:0; outline:0; background:transparent; color:inherit; font-size:13px; }
.jw-input .jw-input-control:focus { border:0; outline:0; box-shadow:none; }
.jw-input .jw-input-control::placeholder { color:var(--jw-in-ph); }
.jw-input.is-disabled .jw-input-control { cursor:not-allowed; }
.jw-input.is-textarea .jw-input-control { height:110px; resize:vertical; }
.jw-input.v-float .jw-input-control { padding-top:12px; }
.jw-input.v-underline-float .jw-input-control { padding:12px 0 6px; }
.jw-input .jw-input-icon { position:absolute; top:50%; left:12px; display:flex; color:#6b7280; transform:translateY(-50%); }
.jw-input .jw-input-clear { position:absolute; top:50%; right:10px; display:flex; width:28px; height:28px; align-items:center; justify-content:center; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; transform:translateY(-50%); }
.jw-input .jw-input-clear:hover { background:#f4f6f8; }
.jw-input.v-float .jw-float { position:absolute; top:50%; left:12px; padding:0 5px; background:transparent; color:#999; pointer-events:none; transform:translateY(-50%); transition:all .25s ease; user-select:none; }
.jw-input.v-float:focus-within .jw-float, .jw-input.v-float.on .jw-float { top:0; background:#fff; color:#111; font-size:12px; }
.jw-input.v-underline-float .jw-float { position:absolute; top:50%; left:0; color:#999; pointer-events:none; transform:translateY(-50%); transition:all .25s ease; user-select:none; }
.jw-input.v-underline-float:focus-within .jw-float, .jw-input.v-underline-float.on .jw-float { top:0; color:#111; font-size:12px; }
.jw-input.v-underline-float .jw-uline { position:absolute; right:0; bottom:-1px; left:0; height:1px; overflow:hidden; background:#eee; }
.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-range-star { --star-size:28px; --gap:2px; --pct:0%; --w:calc((var(--star-size) + var(--gap)) * var(--count)); display:inline-block; width:var(--w); height:40px; }
.jw-range-star > div { display:flex; align-items:center; }
.jw-range-star > div > div { display:flex; width:var(--w); gap:var(--gap); }
.jw-range-star > div > div > i { display:flex; width:var(--star-size); height:var(--star-size); align-items:center; justify-content:center; font-size:var(--star-size); line-height:1; }
.jw-range-star > .base > div > i { color:#e5e7eb; }
.jw-range-star > .range { width:var(--pct); }
.jw-range-star > .range > div > i { color:var(--bg-star); }
.jw-range-star input { position:absolute; inset:0; margin:0; cursor:pointer; }
.jw-range-star input[type=range]::-webkit-slider-thumb { width:1px; height:1px; opacity:0; -webkit-appearance:none; }
.jw-range-star input[type=range]::-moz-range-thumb { width:1px; height:1px; border:0; opacity:0; }

.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 { height:45px; padding:3px 10px; border-bottom:1px solid #e9e9e9; }
.jw-tableB th { border-bottom:1px solid #e9e9e9; background:#f5f5f5; color:#1d1d1d; text-align:center; }
.jw-tableB col.th { width:150px; }
.jw-tableB col.td { width:calc((100% - 300px) / 2); }
.jw-tableB input, .jw-tableB select, .jw-tableB textarea { width:100%; }

.jw-timeline { --tl-accent:#111827; --tl-line:#e5e7eb; --tl-dot:#111827; --tl-dot-bd:#fff; position:relative; display:flex; flex-direction:column; gap:14px; padding-left:26px; }
.jw-timeline::before { position:absolute; top:6px; bottom:6px; left:10px; width:2px; border-radius:999px; background:var(--tl-line); content:""; }
.jw-timeline-item { position:relative; display:flex; gap:12px; }
.jw-timeline-dot { position:absolute; top:6px; left:-26px; width:18px; height:18px; border-radius:50%; background:var(--tl-dot); box-shadow:0 0 0 3px var(--tl-dot-bd); }
.jw-timeline-dot::after { position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.9); content:""; transform:translate(-50%,-50%); }
.jw-timeline-body { min-width:0; flex:1; }
.jw-timeline-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.jw-timeline-time, .jw-timeline-meta { color:#888; font-size:12px; }
.jw-timeline-title { color:#111; font-size:13px; font-weight:800; }
.jw-timeline-desc { margin-top:6px; color:#555; font-size:12px; line-height:1.5; }
.jw-timeline-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.jw-timeline-item.is-active .jw-timeline-dot { background:var(--tl-accent); }
.jw-timeline-item.is-active .jw-timeline-title { color:var(--tl-accent); }
.jw-timeline-item.is-done .jw-timeline-dot { background:#2e7d32; }
.jw-timeline-item.is-warn .jw-timeline-dot { background:#ed6c02; }
.jw-timeline-item.is-error .jw-timeline-dot { background:#d32f2f; }
.jw-timeline-item.is-gray .jw-timeline-dot { background:#6b7280; }

dialog.jw-modal { width:min(520px, calc(100vw - 32px)); padding:0; overflow:hidden; border:0; border-radius:14px; 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 { display:flex; height:46px; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid #eee; background:#fff; }
.jw-modal-title { color:#111; font-size:14px; font-weight:800; }
.jw-modal-close { display:flex; width:32px; height:32px; align-items:center; justify-content:center; border:1px solid #e5e7eb; border-radius:10px; background:#fff; cursor:pointer; }
.jw-modal-close:hover { background:#f4f6f8; }
.jw-modal-body { padding:14px; background:#fff; }
.jw-modal-desc { color:#333; font-size:13px; line-height:1.5; }
.jw-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:12px 14px 14px; border-top:1px solid #eee; background:#fff; }
dialog.jw-modal[open] { animation:jw-modal-in .18s ease-out both; }
@keyframes jw-modal-in { from { opacity:0; transform:translate(-50%,-46%) scale(.98); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }

.jw-ripple-button { position:relative; overflow:hidden; transition:background .3s; }
.jw-ripple-button:hover { background:#0056b3; }
.jw-ripple-button .ripple { position:absolute; width:100px; height:100px; border-radius:50%; background:rgba(255,255,255,.6); pointer-events:none; transform:scale(0); animation:ripple-animation .6s ease-out; }
@keyframes ripple-animation { to { opacity:0; transform:scale(4); } }

.jw-snippet { overflow:hidden; border:1px solid #e5e7eb; border-radius:12px; background:#0b1220; }
.jw-snippet-head { display:flex; height:40px; align-items:center; justify-content:space-between; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.08); background:#0f172a; }
.jw-snippet-title { color:rgba(255,255,255,.75); font-size:12px; }
.jw-snippet-copy { display:flex; height:28px; align-items:center; gap:6px; padding:0 10px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font-size:12px; }
.jw-snippet-copy:hover { background:rgba(255,255,255,.1); }
.jw-snippet-copy.is-done { border-color:rgba(77,124,255,.8); background:rgba(77,124,255,.15); }
.jw-snippet pre { margin:0; padding:12px; overflow:auto; color:#e5e7eb; font-size:12px; line-height:1.55; }
.jw-snippet code { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

@media (max-width:980px) { .jw-profile-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .jw-profile-grid { grid-template-columns:1fr; } }
.jw-slider-input::-webkit-slider-runnable-track{ height:6px; background:transparent; }
.jw-slider-input::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--accent); margin-top:-6px; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.jw-slider-input::-moz-range-track{ height:6px; background:transparent; }
.jw-slider-input::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.12); }

.jw-slider-tip{ position:absolute; top:-26px; transform:translateX(-50%); padding:3px 6px; border-radius:6px; font-size:11px; background:#111; color:#fff; white-space:nowrap; z-index:3; pointer-events:none; left:var(--pct); }
.jw-slider-tip::after{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); border:6px solid transparent; border-top-color:#111; }

.jw-slider-scale{ margin-top:8px; display:flex; justify-content:space-between; font-size:11px; color:#888; }

.jw-slider-marks{ margin-top:10px; display:flex; justify-content:space-between; gap:6px; font-size:10px; color:#999; }
.jw-slider-marks span{ width:1px; text-align:center; }

/* dual */
.jw-slider-dual .jw-slider-bar .fill{ left:var(--minPct); width:calc(var(--maxPct) - var(--minPct)); }
.jw-slider-dual .jw-slider-input{ pointer-events:none; }
.jw-slider-dual .jw-slider-input::-webkit-slider-thumb{ pointer-events:auto; }
.jw-slider-dual .jw-slider-input::-moz-range-thumb{ pointer-events:auto; }
.jw-slider-dual .jw-slider-input.is-min{ z-index:3; }
.jw-slider-dual .jw-slider-input.is-max{ z-index:4; }

.jw-slider-dual .jw-slider-tip.is-min{ left:var(--minPct); }
.jw-slider-dual .jw-slider-tip.is-max{ left:var(--maxPct); }


/* ============================== [UTILS] misc (shadow / border / rounded / kbd) ============================== */
/*기타*/
.jw-shadow-sm { box-shadow:0 1px 2px rgba(0,0,0,.06); } 
.jw-shadow-md { box-shadow:0 6px 20px rgba(0,0,0,.08); }
.jw-rounded { border-radius:8px; } 
.jw-rounded-full { border-radius:999px; }
.jw-border { border:1px solid #eaeaea; } 
.jw-border-dashed { border:1px dashed #ccc; }
.jw-kbd { display:inline-block; padding:0 6px; height:20px; border-radius:4px; border:1px solid #ccc; background:#f9f9f9; font-size:12px; }


@media (max-width: 768px) {
	main > .container { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1024px) {
	.jw-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jw-grid.jw-grid-2 { grid-template-columns: 1fr; }
	.jw-layout-3col { grid-template-columns: 1fr; }
	.jw-layout-2col { grid-template-columns: 1fr; }
	.jw-layout-header-sidebar { grid-template-areas: "header" "sidebar" "main"; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; height: auto; }
}

@media (max-width: 768px) {

	.jw-section-header .title { font-size: 20px; }

	.jw-demo-row { gap: 8px; }

	.jw-profile-card .jw-profile-top { gap: 10px; }
	.jw-profile-card .jw-profile-avatar { width: 64px; height: 64px; }
	.jw-profile-card .jw-profile-actions .jw-button { height: 34px; padding: 0 14px; }
	.jw-profile-card .jw-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.jw-profile-grid { grid-template-columns: 1fr; }

	.jw-layout-3col,.jw-layout-2col { padding: 12px; gap: 12px; }
	.jw-layout-header-sidebar { gap: 12px; }
}

@media (max-width: 640px) {

	.jw-app-nav { flex-wrap: wrap; }
	.jw-app-nav a { height: 30px; }

	.jw-demo-card { padding: 14px; }

	.jw-variants-grid { grid-template-columns: 1fr; }

	.jw-radio-group,.jw-check-group { gap: 10px; }
	.jw-radio-desc,.jw-check-desc { padding: 10px 10px; }

	.jw-profile-card .jw-profile-meta .row { padding: 9px 10px; }
	.jw-profile-card .jw-profile-stats { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.jw-profile-card { padding: 14px; }
	.jw-profile-card .jw-profile-avatar { width: 56px; height: 56px; }
	.jw-profile-card .jw-profile-actions { gap: 8px; }
}