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 { align-items:flex-end; }
.jw-section-header .title { font-size:25px; }


.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; }
.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; }
}