/*
Theme Name: JW FSE
Theme URI: https://jongwonweb.com
Author: Jongwon
Description: Minimal Full Site Editing block theme.
Version: 1.0.0
Text Domain: jw-fse
*/


:root {
    --html-font:16px;
    --font-color:#111827;
    --body-bg:#f4f4f4;
    --card-bg:#ffffff;
    --card-radius:12px;
    --accent-color:#ffc107;
    --menu-bg:#ffffff;
    --menu-text:#111827;
    --menu-sub-bg:#ffffff;
    --menu-sub-border:#e5e7eb;
    --menu-hover-text:#f59e0b;
    --footer-bg:#102027;
    --footer-text:#cfd8dc;
    --button-bg:#1976d2;
    --button-text:#ffffff;
}

/* 기본 리셋 */
* { margin:0; padding:0; box-sizing:border-box; }
html { width:100%; min-height:100vh; font-size:var(--html-font); }
body { position:relative; width:100%; min-height:100vh; overflow-x:hidden; background:var(--body-bg); font-family:'Noto Sans KR',sans-serif; font-size:14px; color:var(--font-color); }

ol,ul { list-style:none; }
a { color:inherit; text-decoration:none; }
em,address { font-style:normal; }
img { border:0; max-width:100%; height:auto; vertical-align:top; }
textarea { width:100%; height:100%; outline:none; border:0; background:transparent; resize:none; }
i,h1,h2,h3,h4,h5,h6 { font:inherit; }
button { border:0; outline:0; background:none; cursor:pointer; font:inherit; -webkit-user-select:none; user-select:none; }
table { width:100%; border-collapse:collapse; border-spacing:0; }
input::placeholder,textarea::placeholder { color:#9f9f9f; transition:color 0.3s ease; }
input { outline:none; border:0; background:transparent; }
:focus::placeholder { color:transparent; }
input[type="file"] { position:absolute; overflow:hidden; clip:rect(0,0,0,0); }

/* 공통 레이아웃 */
.jw-container { width:100%; max-width:1180px; margin:0 auto; padding:0 10px; }


/* 기본 리셋 */
* { margin:0; padding:0; box-sizing:border-box; }
html { width:100%; min-height:100vh; font-size:var(--html-font); }
body { position:relative; width:100%; min-height:100vh; overflow-x:hidden; background:var(--body-bg); font-family:'Noto Sans KR',sans-serif; font-size:14px; color:var(--font-color); }

ol,ul { list-style:none; }
a { color:inherit; text-decoration:none; }
em,address { font-style:normal; }
img { border:0; max-width:100%; height:auto; vertical-align:top; }
textarea { width:100%; height:100%; outline:none; border:0; background:transparent; resize:none; }
i,h1,h2,h3,h4,h5,h6 { font:inherit; }
button { border:0; outline:0; background:none; cursor:pointer; font:inherit; -webkit-user-select:none; user-select:none; }
table { width:100%; border-collapse:collapse; border-spacing:0; }
input::placeholder,textarea::placeholder { color:#9f9f9f; transition:color 0.3s ease; }
input { outline:none; border:0; background:transparent; }
:focus::placeholder { color:transparent; }
input[type="file"] { position:absolute; overflow:hidden; clip:rect(0,0,0,0); }

/* 공통 레이아웃 */
.jw-container { width:100%; max-width:1180px; margin:0 auto; padding:0 10px; }

main.wp-block-group { display:flex; justify-content:center; align-items:center; }

.main-container { width:100%; max-width:1200px; margin:20px auto; display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:start; }
.side-area { min-width:0; }
.content-area { min-width:0; }

@media (max-width: 1140px) {
	.side-area { display:none; }
	.main-container { grid-template-columns:1fr; padding:10px; }
}




/* Tokens 최소셋 */
:root { 
	--html-font:18px; 
	/* ===== Palette (원색) ===== */
	--jw-white: #FFFFFF;
	--jw-gray-100: #F4F4F4;
	--jw-gray-800: #2D2D2D;
	--jw-black: #000000;

	--jw-blue-100: #E4F1FF; /* Sky Mist */
	--jw-blue-300: #78A8FF; /* Ocean Breeze */
	--jw-blue-500: #4876EE; /* Deep Wave */
	--jw-blue-700: #244DDB; /* Royal Sapphire */

	--jw-orange-500: #FE8130; /* Sunburst Orange */
	--jw-yellow-400: #FFD166; /* Lemon Zest */
	--jw-red-500: #D64545; /* Electric Magenta */
	--jw-red-800: #990000; /* Crimson Ember */

	/* ===== On-Color (배경 위 글씨색) ===== */
	--jw-on-blue-100: #4A607A; /* Sky Mist 위 텍스트 */
	--jw-on-blue-300: #FFFFFF; /* Ocean Breeze 위 텍스트 */
	--jw-on-blue-500: #FFFFFF; /* Deep Wave 위 텍스트 */
	--jw-on-blue-700: #FFFFFF; /* Royal Sapphire 위 텍스트(추천) */

	/* ===== Semantic (용도별) ===== */
	--jw-font-color: var(--jw-gray-800);
	--jw-font-color-muted: #4A607A;

	--jw-bg-color: var(--jw-white);
	--jw-surface-color: var(--jw-gray-100);

	--jw-line-color: #E5E5E5;
	--jw-line-color-strong: var(--jw-gray-800);

	/* Buttons */
	--jw-button-bgcolor: var(--jw-blue-700);        /* primary */
	--jw-button-color: var(--jw-on-blue-700);

	--jw-button-bgcolor-hover: var(--jw-blue-500);
	--jw-button-color-hover: var(--jw-on-blue-500);

	--jw-button-sub-bgcolor: var(--jw-blue-300);    /* secondary */
	--jw-button-sub-color: var(--jw-on-blue-300);

	--jw-button-light-bgcolor: var(--jw-blue-100);  /* light */
	--jw-button-light-color: var(--jw-on-blue-100);

	/* Status / Accent */
	--jw-accent-color: var(--jw-orange-500);
	--jw-warning-color: var(--jw-yellow-400);
	--jw-danger-bgcolor: var(--jw-red-500);
	--jw-danger-color: var(--jw-white);
	
	/* Focus Ring */
	--jw-focus-ring-color: var(--jw-blue-700);
	--jw-focus-ring: 0 0 0 3px rgba(36,77,219,.18);
	--jw-focus-outline: 2px solid var(--jw-line-color-strong);
	--jw-focus-outline-offset: 2px;
}


/* ============================== [UTILS] divider / section header ============================== */
/*구분선/디바이더 & 섹션 헤더*/
.jw-divider { display:block; width:100%; height:1px; background: var(--jw-line-color); 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: var(--jw-font-color-muted); }


/* ============================== [UTILS] focus ring ============================== */
/*접근성 포커스 링 유틸*/
.jw-focusable:focus-visible { outline: var(--jw-focus-outline); outline-offset: var(--jw-focus-outline-offset); }

.jw-ring:focus { outline:none; box-shadow: var(--jw-focus-ring); }

/* ============================== [UTILS] top loading bar ============================== */
/*상단 로딩바(NProgress 느낌)*/
.jw-topbar { position:fixed; left:0; top:0; width:0; height:3px; background: var(--jw-blue-300); z-index:1000; transition:width .2s; box-shadow:0 1px 3px rgba(0,0,0, .2); }



/* ============================== [UTILS] sr-only ============================== */
/* ========= utilities ========= */
.jw-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

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


/* ============================== [ICONS] ============================== */
/* ========= 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:2px; height:100%; background: var(--jw-line-color-strong); transform:rotate(45deg); }
.ic-close::before { content:""; position:absolute; width:2px; height:100%; background: var(--jw-line-color-strong); transform:rotate(-45deg); }
.ic-close:hover { transform:rotate(360deg); }

.ic-hamberg { position:relative; width:30px; height:25px; cursor:pointer; }
.ic-hamberg > i { position:absolute; width:20px; height:2px; background: var(--jw-line-color); 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); background: var(--jw-line-color-strong); }
.ic-hamberg.on > i:nth-child(2) { top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; }
.ic-hamberg.on > i:last-child { top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); background: var(--jw-line-color-strong); }

.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(--jw-line-color-strong); border-radius:2px; }
.ic-arrow::after { top:-2px; transform:rotate(45deg); }
.ic-arrow::before { top:2px; transform:rotate(-45deg); }


/* ============================== [LAYOUT/MENU] ============================== */

/* ============================== [BUTTON] ============================== */

/* ===== jw-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:40px;
	--jw-btn-px:24px;
	--jw-btn-r:5px;
	--jw-btn-bg: var(--jw-black);
	--jw-btn-border: var(--jw-black);
	--jw-btn-color: var(--jw-white);
	--jw-btn-bg-hover: var(--jw-black);
	--jw-btn-border-hover: var(--jw-black);
	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-button svg { fill:currentColor; }
.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: var(--jw-line-color); border-color: var(--jw-line-color); color:#B0B0B0; }

.jw-button.typeA { --jw-btn-bg: var(--jw-surface-color); --jw-btn-border: #D1D5DB; --jw-btn-color: var(--jw-gray-800); --jw-btn-bg-hover: #E5E7EB; --jw-btn-border-hover: #9CA3AF; }
.jw-button.typeB { --jw-btn-bg: var(--jw-surface-color); --jw-btn-border: var(--jw-surface-color); --jw-btn-color: var(--jw-gray-800); --jw-btn-bg-hover: #e9edf1; --jw-btn-border-hover: #e9edf1; --jw-btn-r:12px; --jw-btn-px:20px; font-weight:bold; }
.jw-button.typeC { --jw-btn-bg: var(--jw-surface-color); --jw-btn-border: #D4D4D4; --jw-btn-color:#666; --jw-btn-bg-hover: var(--jw-surface-color); --jw-btn-border-hover: var(--jw-blue-700); }
.jw-button.typeD { --jw-btn-bg: var(--jw-gray-800); --jw-btn-border:transparent; --jw-btn-color: var(--jw-white); --jw-btn-bg-hover:#383838; --jw-btn-border-hover: var(--jw-black); }
.jw-button.typeG { --jw-btn-bg:transparent; --jw-btn-border:transparent; --jw-btn-color: var(--jw-gray-800); --jw-btn-bg-hover:#E5E7EB; --jw-btn-border-hover:#9CA3AF; }

.jw-button.size-xs { --jw-btn-h:28px; --jw-btn-px:10px; --jw-btn-r:8px; }
.jw-button.size-sm { --jw-btn-h:34px; --jw-btn-px:14px; --jw-btn-r:10px; }
.jw-button.size-md { --jw-btn-h:40px; --jw-btn-px:18px; --jw-btn-r:10px; }
.jw-button.size-lg { --jw-btn-h:46px; --jw-btn-px:22px; --jw-btn-r:12px; }

.jw-button.typeAdmin { 
	--jw-btn-h:30px; 
	--jw-btn-px:10px; 
	--jw-btn-r:5px; 
	--jw-btn-bg: var(--jw-blue-500); 
	--jw-btn-border: var(--jw-blue-500); 
	--jw-btn-color: var(--jw-on-blue-500); 
	--jw-btn-bg-hover: var(--jw-blue-700); 
	--jw-btn-border-hover: var(--jw-blue-500); 
}

.jw-button.normal { 
	--jw-btn-h:auto;
	--jw-btn-bg:transparent; 
	--jw-btn-border:transparent; 
	--jw-btn-color:inherit; 
	--jw-btn-bg-hover:transparent; 
	--jw-btn-border-hover:transparent; 
}
.jw-button.normal:hover { background:transparent; border-color:transparent; }



.jw-button.v-primary { --jw-btn-bg:#111827; --jw-btn-border:#111827; --jw-btn-color:#fff; --jw-btn-bg-hover:#0b1220; --jw-btn-border-hover:#0b1220; border-radius:10px; }
.jw-button.v-secondary { --jw-btn-bg:#f4f6f8; --jw-btn-border:#e5e7eb; --jw-btn-color:#111827; --jw-btn-bg-hover:#e9edf1; --jw-btn-border-hover:#cbd5e1; border-radius:10px; }
.jw-button.v-outline { --jw-btn-bg:#fff; --jw-btn-border:#d1d5db; --jw-btn-color:#111827; --jw-btn-bg-hover:#f9fafb; --jw-btn-border-hover:#9ca3af; border-radius:10px; }
.jw-button.v-ghost { --jw-btn-bg:transparent; --jw-btn-border:transparent; --jw-btn-color:#111827; --jw-btn-bg-hover:#f4f6f8; --jw-btn-border-hover:#e5e7eb; border-radius:10px; }
.jw-button.v-danger { --jw-btn-bg:#d32f2f; --jw-btn-border:#d32f2f; --jw-btn-color:#fff; --jw-btn-bg-hover:#b71c1c; --jw-btn-border-hover:#b71c1c; border-radius:10px; }

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



/* ============================== [BUTTON] extra variants / effects ============================== */
@keyframes jw-spin { 100% { transform:rotate(360deg); } }

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

/* hover circle */
.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; }




/* ============================== [FORM] switch ============================== */
/* ========= jw-switch ========= */
.jw-switch { position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.jw-switch input { position:absolute; opacity:0; }
.jw-switch .track { width:42px; height:24px; background: var(--jw-line-color); border-radius:999px; position:relative; transition:background .2s; }
.jw-switch .thumb { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background: var(--jw-white); box-shadow:0 1px 2px rgba(0,0,0, .2); transition:left .2s; }
.jw-switch input:checked + .track { background: var(--jw-blue-300); }
.jw-switch input:checked + .track .thumb { left:20px; }
.jw-switch input:focus-visible + .track { outline:2px solid var(--jw-line-color-strong); outline-offset:2px; }


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


.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 var(--jw-line-color); 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: var(--jw-blue-700); opacity:0; transition:opacity .2s ease; }
.jw-radio input:checked + .icon { border-color: var(--jw-blue-700); }
.jw-radio input:checked + .icon::after { opacity:1; }
.jw-radio input:focus-visible + .icon { outline:2px solid var(--jw-line-color-strong); outline-offset:2px; }
.jw-radio .text { margin-left:10px; color: var(--jw-font-color-muted); }
.jw-radio.is-accent input:checked + .icon { border-color: var(--jw-danger-bgcolor); }
.jw-radio.is-accent .icon::after { background: var(--jw-danger-bgcolor); }

/* ============================== [FORM] select ============================== */
/* ========= select (custom wrapper) ========= */
.jw-select { position:relative; display:inline-block; --select-height:35px; height:var(--select-height); cursor:pointer; }
.jw-select > .jw-selected { position:relative; display:flex; align-items:center; width:100%; height:100%; padding-left:10px; border:1px solid var(--jw-line-color); color: var(--jw-font-color); background: var(--jw-bg-color); }
.jw-select > .jw-selected:after { content:""; position:absolute; width:5px; height:5px; right:10px; top:calc(50% - 3px); border:1px solid transparent; transform:translateY(-50%) rotate(-45deg); border-color:transparent transparent var(--jw-line-color-strong) var(--jw-line-color-strong); transition:transform .2s ease; }
.jw-select > .jw-selected:hover, .jw-select > .jw-selected.active { box-shadow:0 0 10px rgba(0,0,0, .1); }
.jw-select.open > .jw-selected:after { margin-top:4px; transform:translateY(-50%) rotate(-225deg); }
.jw-select > .jw-select-list { display:none; position:absolute; overflow:auto; top:100%; right:0; left:0; background: var(--jw-bg-color); border:1px solid var(--jw-line-color); z-index:90; max-height:240px; }
.jw-select.open > .jw-select-list { display:block; }
.jw-select > .jw-select-list > .jw-select-item { display:flex; align-items:center; width:100%; height:var(--select-height); padding:0 10px; transition:background .15s ease-in; color: var(--jw-font-color); white-space:nowrap; }
.jw-select > .jw-select-list > .jw-select-item:not(:last-child) { border-bottom:1px solid var(--jw-line-color); }
.jw-select > .jw-select-list > .jw-select-item:hover { background: var(--jw-surface-color); }

/* style variants */
.jw-select:has(.jw-select-type-A) .jw-selected { border-radius:5px; }
.jw-select:has(.jw-select-type-A) .jw-selected.active { border-radius:5px 5px 0 0; }
.jw-select:has(.jw-select-type-B) .jw-selected { border-radius:18px; text-indent:20px; }
.jw-select:has(.jw-select-type-B) .jw-selected.active { border-radius:18px 18px 0 0; }
.jw-select:has(.jw-select-type-B) .jw-selected:after { right:20px; }
.jw-select:has(.jw-select-type-B) .jw-select-item { text-indent:20px; }

.jw-select-search { padding:8px; border-bottom:1px solid var(--jw-line-color); background: var(--jw-bg-color); }
.jw-select-search-input { width:100%; height:32px; border:1px solid var(--jw-line-color); border-radius:8px; padding:0 10px; outline:none; color: var(--jw-font-color); background: var(--jw-bg-color); }
.jw-select-search-input:focus { border-color: var(--jw-blue-700); box-shadow:0 0 0 3px rgba(0,0,0, .10); }

.jw-select-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.jw-select-search-input:focus { border-color: var(--jw-focus-ring-color); box-shadow: var(--jw-focus-ring); }


.jw-tag-btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border:1px solid var(--jw-line-color); background: var(--jw-bg-color); border-radius:999px; cursor:pointer; color: var(--jw-font-color); }
.jw-tag-btn:hover { background: var(--jw-surface-color); }
.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: var(--jw-line-color-strong); 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); }


/* ============================== [FORM] range / star ============================== */
/* ################### Range */
.jw-range { position:relative; width:150px; height:40px; }
.jw-range input { width:100%; height:100%; }
.jw-range > div { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.jw-range > div > div { width:150px; }
.jw-range > div > div > i { width:30px; height:30px; display:flex; justify-content:center; align-items:center; font-size:30px; color: var(--jw-line-color); }
.jw-range > .range > div > i { color: var(--jw-accent-color); }
.jw-range input[type=range] { -webkit-appearance:none; width:100%; height:100%; background:transparent; cursor:pointer; }
.jw-range input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; opacity:0; width:1px; height:1px; }



/* jw-range: star rating add-on */
.jw-range-star { --star-size:28px; --gap:2px; --pct:0%; --w:calc((var(--star-size) + var(--gap)) * var(--count)); width:var(--w); height:40px; display:inline-block; position:relative; }
.jw-range-star > div { display:flex; align-items:center; }
.jw-range-star > div > div { width:var(--w); display:flex; gap:var(--gap); }
.jw-range-star > div > div > i { width:var(--star-size); height:var(--star-size); display:flex; justify-content:center; align-items:center; font-size:var(--star-size); line-height:1; }
.jw-range-star > .base > div > i { color: var(--jw-line-color); }
.jw-range-star > .range { width:var(--pct); overflow:hidden; }
.jw-range-star > .range > div > i { color: var(--jw-accent-color); }
.jw-range-star input { position:absolute; inset:0; margin:0; cursor:pointer; }
.jw-range-star input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; opacity:0; width:1px; height:1px; }
.jw-range-star input[type=range]::-moz-range-thumb { opacity:0; width:1px; height:1px; border:0; }

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


.jw-range-type-A { position:relative; width:100%; height:34px; }
.jw-range-type-A progress { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:8px; -webkit-appearance:none; appearance:none; border:0; border-radius:999px; overflow:hidden; }
.jw-range-type-A progress::-webkit-progress-bar { background: var(--jw-line-color); border-radius:999px; }
.jw-range-type-A progress::-webkit-progress-value { background: var(--jw-blue-700); border-radius:999px; }
.jw-range-type-A progress::-moz-progress-bar { background: var(--jw-blue-700); border-radius:999px; }
.jw-range-type-A input[type="range"] { position:absolute; inset:0; width:100%; height:100%; margin:0; background:transparent; -webkit-appearance:none; appearance:none; z-index:3; cursor:pointer; }
.jw-range-type-A input[type="range"]::-webkit-slider-runnable-track { background:transparent; height:8px; }
.jw-range-type-A input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:1px; height:1px; opacity:0; }
.jw-range-type-A input[type="range"]::-moz-range-track { background:transparent; height:8px; }
.jw-range-type-A input[type="range"]::-moz-range-thumb { width:1px; height:1px; opacity:0; border:0; }
.jw-range-type-A .thumb { position:absolute; top:50%; transform:translateY(-50%); width:8px; height:18px; border-radius:999px; background: var(--jw-blue-700); z-index:2; pointer-events:none; }

/* ============================== [FORM] progress ============================== */
/* ========= progress ========= */
.progress progress { width:300px; height:20px; -webkit-appearance:none; appearance:none; }
.progress progress::-webkit-progress-bar { background-color: var(--jw-line-color); border-radius:10px; overflow:hidden; }
.progress progress::-webkit-progress-value { background:linear-gradient(90deg, var(--jw-blue-700), var(--jw-blue-300)); border-radius:10px; }
.progress progress::-moz-progress-bar { background:linear-gradient(90deg, var(--jw-blue-700), var(--jw-blue-300)); border-radius:10px; }

/* ========= jw-progress ========= */
.jw-progress { --h:12px; --radius:999px; display:flex; flex-direction:column; gap:8px; }
.jw-progress .head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color: var(--jw-font-color-muted); }
.jw-progress .head .value { font-weight:700; color: var(--jw-font-color); }

.jw-progress progress { width:100%; height:var(--h); -webkit-appearance:none; appearance:none; }
.jw-progress progress::-webkit-progress-bar { background: var(--jw-line-color); border-radius:var(--radius); overflow:hidden; }
.jw-progress progress::-webkit-progress-value { background:linear-gradient(90deg, var(--jw-blue-700), var(--jw-blue-300)); border-radius:var(--radius); }
.jw-progress progress::-moz-progress-bar { background:linear-gradient(90deg, var(--jw-blue-700), var(--jw-blue-300)); border-radius:var(--radius); }

/* sizes */
.jw-progress.size-xs { --h:8px; }
.jw-progress.size-sm { --h:10px; }
.jw-progress.size-md { --h:12px; }
.jw-progress.size-lg { --h:16px; }

/* variants */
.jw-progress.v-primary { --fill1: var(--jw-blue-700); --fill2: var(--jw-blue-300); }
.jw-progress.v-success { --fill1: var(--jw-blue-500); --fill2: var(--jw-blue-300); }
.jw-progress.v-warn { --fill1: var(--jw-orange-500); --fill2: var(--jw-yellow-400); }
.jw-progress.v-danger { --fill1: var(--jw-danger-bgcolor); --fill2: var(--jw-red-500); }
.jw-progress.v-gray { --fill1: var(--jw-gray-800); --fill2: var(--jw-line-color); }

/* striped + animate */
.jw-progress.is-striped progress::-webkit-progress-value {
	background-image:linear-gradient(90deg, var(--fill1), var(--fill2), var(--fill1));
	background-size:200% 100%;
	animation:jw-progress-move 1.2s linear infinite;
}
.jw-progress.is-striped progress::-moz-progress-bar {
	background-image:linear-gradient(90deg, var(--fill1), var(--fill2), var(--fill1));
	background-size:200% 100%;
	animation:jw-progress-move 1.2s linear infinite;
}
@keyframes jw-progress-move { 0% { background-position:0% 0; } 100% { background-position:200% 0; } }


/* ============================== [FORM] inputFile ============================== */
/* ========= file input ========= */
.inputFile { position:relative; display:inline-flex; align-items:center; gap:10px; }
.inputFile input[type=file] { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.inputFile .jw-button { pointer-events:none; }
.inputFile:hover .jw-button { background:var(--jw-btn-bg-hover); border-color:var(--jw-btn-border-hover); }
.inputFile-wrap { display:flex; align-items:center; gap:10px; }

/* ========= inputFile addons ========= */
.inputFile-name { font-size:12px; color: var(--jw-font-color-muted); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inputFile-name.is-empty { color: var(--jw-line-color); }
.inputFile-preview { width:46px; height:46px; border-radius:12px; border:1px solid var(--jw-line-color); background: var(--jw-surface-color); overflow:hidden; display:flex; justify-content:center; align-items:center; font-size:11px; color: var(--jw-font-color-muted); }
.inputFile-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.inputFile-wrap.is-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }


/* ============================== [FORM] uploader ============================== */
/* ========= jw-uploader ========= */
.jw-uploader { display:flex; flex-direction:column; gap:12px; }

.jw-uploader-drop { border:2px dashed var(--jw-line-color); border-radius:14px; background: var(--jw-bg-color); padding:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.jw-uploader-drop .left { display:flex; flex-direction:column; gap:4px; min-width:0; }
.jw-uploader-drop .title { font-size:13px; font-weight:800; color: var(--jw-font-color); }
.jw-uploader-drop .sub { font-size:12px; color: var(--jw-font-color-muted); line-height:1.4; }
.jw-uploader-drop.is-over { border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(17,24,39, .06); }

.jw-uploader-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.jw-uploader-list { display:flex; flex-direction:column; gap:10px; }

.jw-uploader-item { border:1px solid var(--jw-line-color); border-radius:12px; background: var(--jw-bg-color); padding:12px; display:flex; gap:12px; align-items:flex-start; }
.jw-uploader-item .thumb { width:48px; height:48px; border-radius:10px; background: var(--jw-surface-color); border:1px solid var(--jw-line-color); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; }
.jw-uploader-item .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.jw-uploader-item .body { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.jw-uploader-item .top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.jw-uploader-item .name { font-size:13px; font-weight:700; color: var(--jw-font-color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jw-uploader-item .meta { margin-top:2px; font-size:12px; color: var(--jw-font-color-muted); display:flex; gap:10px; flex-wrap:wrap; }
.jw-uploader-item .btns { display:flex; gap:8px; flex:0 0 auto; }
.jw-uploader-item .mini-btn { width:32px; height:32px; border-radius:10px; border:1px solid var(--jw-line-color); background: var(--jw-bg-color); cursor:pointer; display:flex; align-items:center; justify-content:center; color: var(--jw-font-color); }
.jw-uploader-item .mini-btn:hover { background: var(--jw-surface-color); }

.jw-uploader-empty { border:1px dashed var(--jw-line-color); border-radius:12px; background: var(--jw-bg-color); padding:14px; font-size:12px; color: var(--jw-font-color-muted); }


/* ============================== [FORM] date picker (native) ============================== */
/* ========= date picker (native) ========= */
.jw-date { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.jw-date input[type="date"], .jw-date input[type="time"], .jw-date input[type="datetime-local"] { height:36px; padding:0 10px; border:1px solid var(--jw-line-color); border-radius:10px; font-size:13px; background: var(--jw-bg-color); color: var(--jw-font-color); }
.jw-date .sep { font-size:12px; color: var(--jw-font-color-muted); }
.jw-date .grow { flex:1 1 auto; min-width:180px; }


/* ============================== [TABLE] ============================== */
/* ========= tables ========= */
.jw-tableA { width:100%; table-layout:fixed; border-collapse:collapse; border-top:1px solid var(--jw-line-color-strong); border-bottom:1px solid var(--jw-line-color-strong); }
.jw-tableA th { height:40px; background: var(--jw-surface-color); border-bottom:1px solid var(--jw-line-color); text-align:center; color: var(--jw-font-color); }
.jw-tableA td { height:40px; color: var(--jw-font-color); }
.jw-tableA tr:not(:last-child) td { border-bottom:1px solid var(--jw-line-color); }
.jw-tableA tr.hover:hover td { background: var(--jw-surface-color); }
.jw-tableA .nodata { height:150px; text-align:center; color: var(--jw-font-color-muted); }
.jw-tableA .checklist { width:60px; text-align:center; }
.jw-tableA .num { width:80px; text-align:center; }
.jw-tableA .date { width:100px; text-align:center; }
.jw-tableA .center { place-items:center; text-align:center; }
/* colgroup 클래스 프리셋(선택) */
.jw-tableA col.checklist { width:60px; }
.jw-tableA col.num { width:80px; }
.jw-tableA col.date { width:100px; }


.jw-tableB { width:100%; }
.jw-tableB tr:last-child td, .jw-tableB tr:last-child th { border-bottom:1px solid var(--jw-line-color-strong); }
.jw-tableB tr:first-child td, .jw-tableB tr:first-child th { border-top:1px solid var(--jw-line-color-strong); }
.jw-tableB td { padding:3px 10px; height:45px; border-bottom:1px solid var(--jw-line-color); color: var(--jw-font-color); background: var(--jw-bg-color); }
.jw-tableB th { background: var(--jw-surface-color); text-align:center; color: var(--jw-font-color); border-bottom:1px solid var(--jw-line-color); }
.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-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: var(--jw-font-color-muted); 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; color: var(--jw-font-color); }
.jw-pagebox > .contents > .page > .p:hover { background: var(--jw-surface-color); }
.jw-pagebox > .contents > .page > .p.show { color: var(--jw-blue-700); font-weight:800; background:rgba(36,77,219,.10); }
.jw-pagebox > .contents > .page > .p.ellipsis { cursor:default; color: var(--jw-line-color); }
.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: var(--jw-font-color); }
.jw-pagebox .btn.off > button { color: var(--jw-line-color); }


/* ============================== [TIMELINE] ============================== */
/* ========= jw-timeline ========= */
.jw-timeline { display:flex; flex-direction:column; gap:14px; position:relative; padding-left:26px; }
.jw-timeline::before { content:""; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background: var(--jw-line-color); border-radius:999px; }

.jw-timeline-item { position:relative; display:flex; gap:12px; }
.jw-timeline-dot { position:absolute; left:-26px; top:6px; width:18px; height:18px; border-radius:50%; background: var(--jw-line-color-strong); box-shadow:0 0 0 3px var(--jw-bg-color); }
.jw-timeline-dot::after { content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,.9); opacity:.9; }

.jw-timeline-body { flex:1; min-width:0; }
.jw-timeline-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.jw-timeline-time { font-size:12px; color: var(--jw-font-color-muted); }
.jw-timeline-title { font-size:13px; font-weight:800; color: var(--jw-font-color); }
.jw-timeline-desc { margin-top:6px; font-size:12px; color:#555; line-height:1.5; }
.jw-timeline-meta { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; font-size:12px; color: var(--jw-font-color-muted); }

.jw-timeline-item.is-active .jw-timeline-dot { background: var(--jw-blue-700); }
.jw-timeline-item.is-active .jw-timeline-title { color: var(--jw-blue-700); }
.jw-timeline-item.is-done .jw-timeline-dot { background: var(--jw-blue-500); }
.jw-timeline-item.is-warn .jw-timeline-dot { background: var(--jw-orange-500); }
.jw-timeline-item.is-error .jw-timeline-dot { background: var(--jw-danger-bgcolor); }
.jw-timeline-item.is-gray .jw-timeline-dot { background: var(--jw-gray-800); }

.jw-timeline.is-compact { gap:10px; padding-left:24px; }
.jw-timeline.is-compact::before { left:9px; }
.jw-timeline.is-compact .jw-timeline-dot { left:-24px; width:16px; height:16px; }

.jw-timeline.is-card .jw-timeline-item { padding:12px 12px; border:1px solid var(--jw-line-color); border-radius:12px; background: var(--jw-bg-color); }
.jw-timeline.is-card .jw-timeline-dot { top:18px; }


/* ============================== [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: var(--jw-line-color-strong); color: var(--jw-white); 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: var(--jw-line-color-strong); }

/* ========= 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: var(--jw-line-color-strong); 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: var(--jw-line-color-strong); 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: var(--jw-line-color-strong); 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: var(--jw-line-color-strong); border-top-color:transparent; border-left-color:transparent; border-bottom-color:transparent; }


/* ============================== [POPOVER] ============================== */
/* ========= popover ========= */
.jw-popover { position:relative; display:inline-flex; }
.jw-popover-panel { position:absolute; min-width:240px; max-width:320px; padding:12px; border-radius:12px; border:1px solid var(--jw-line-color); background: var(--jw-bg-color); box-shadow:0 10px 30px rgba(0,0,0,.12); z-index:300; display:none; color: var(--jw-font-color); }
.jw-popover.is-open .jw-popover-panel { display:block; }
.jw-popover-title { font-size:13px; font-weight:800; color: var(--jw-font-color); }
.jw-popover-desc { margin-top:6px; font-size:12px; color:#555; line-height:1.45; }
.jw-popover-actions { margin-top:10px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

.jw-popover-panel::before { content:""; position:absolute; width:10px; height:10px; background: var(--jw-bg-color); border-left:1px solid var(--jw-line-color); border-top:1px solid var(--jw-line-color); transform:rotate(45deg); }

.jw-popover[data-pos="bottom"] .jw-popover-panel { top:calc(100% + 10px); left:0; }
.jw-popover[data-pos="bottom"] .jw-popover-panel::before { top:-6px; left:18px; }

.jw-popover[data-pos="top"] .jw-popover-panel { bottom:calc(100% + 10px); left:0; }
.jw-popover[data-pos="top"] .jw-popover-panel::before { bottom:-6px; left:18px; transform:rotate(225deg); }

.jw-popover[data-pos="right"] .jw-popover-panel { left:calc(100% + 10px); top:0; }
.jw-popover[data-pos="right"] .jw-popover-panel::before { left:-6px; top:16px; transform:rotate(315deg); }

.jw-popover[data-pos="left"] .jw-popover-panel { right:calc(100% + 10px); top:0; }
.jw-popover[data-pos="left"] .jw-popover-panel::before { right:-6px; top:16px; transform:rotate(135deg); }


/* ============================== [TOAST] base ============================== */
/* 토스트(알림) 컨테이너 (CSS+간단 JS) */
.jw-toast-wrap { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:1000; }
.jw-toast { min-width:220px; max-width:360px; padding:10px 12px; border-radius:8px; background:#222; color:#fff; box-shadow:0 6px 20px rgba(0,0,0, .2); opacity:.98; }
.jw-toast.success { background:#2e7d32; } .jw-toast.warn { background:#ed6c02; } .jw-toast.error { background:#d32f2f; }


/* ============================== [TOAST] upgrade ============================== */
/* ========= toast (upgrade) ========= */
.jw-toast { display:flex; align-items:flex-start; gap:10px; color: var(--jw-white); }
.jw-toast .jw-toast-body { flex:1; min-width:0; font-size:13px; line-height:1.35; }
.jw-toast .jw-toast-close { width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.15); display:flex; justify-content:center; align-items:center; cursor:pointer; flex:0 0 auto; }
.jw-toast .jw-toast-close:hover { background:rgba(0,0,0,.25); }
.jw-toast.is-in { animation:jw-toast-in .18s ease-out both; }
.jw-toast.is-out { animation:jw-toast-out .18s ease-in both; }
@keyframes jw-toast-in { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes jw-toast-out { from { transform:translateY(0); opacity:1; } to { transform:translateY(10px); opacity:0; } }


/* ============================== [MODAL] dialog base ============================== */
/* ========= dialog ========= */
dialog { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:15px; border:1px solid var(--jw-line-color); border-radius:10px; background: var(--jw-bg-color); box-shadow:0 4px 8px rgba(0,0,0,.2); width:300px; overflow:hidden; outline:none !important; color: var(--jw-font-color); }
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; color: var(--jw-font-color); }
dialog .dialog-content { flex:1; padding:10px; color: var(--jw-font-color); }
dialog .dialog-controls { display:flex; justify-content:flex-end; gap:10px; }
dialog .dialog-controls button { height:30px; }

/* ============================== [MODAL] upgrade ============================== */
/* ========= modal (dialog upgrade) ========= */
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); background: var(--jw-bg-color); color: var(--jw-font-color); }
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 var(--jw-line-color); background: var(--jw-bg-color); }
.jw-modal-title { font-size:14px; font-weight:800; color: var(--jw-font-color); }
.jw-modal-close { width:32px; height:32px; border-radius:10px; border:1px solid var(--jw-line-color); background: var(--jw-bg-color); display:flex; justify-content:center; align-items:center; cursor:pointer; color: var(--jw-font-color); }
.jw-modal-close:hover { background: var(--jw-surface-color); }

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

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


/* ============================== [FX] ripple ============================== */
/* ripple (optional) */
.jw-ripple-button { position:relative; overflow:hidden; transition:background .3s; }
.jw-ripple-button:hover { background: var(--jw-blue-700); }
.jw-ripple-button .ripple { position:absolute; width:100px; height:100px; background:rgba(255,255,255,.6); border-radius:50%; transform:scale(0); animation:ripple-animation .6s ease-out; pointer-events:none; }
@keyframes ripple-animation { to { transform:scale(4); opacity:0; } }


/* ============================== [UI] skeleton ============================== */
/*스켈레톤 로더*/
.jw-skeleton { position:relative; overflow:hidden; background: var(--jw-line-color); border-radius:6px; }
.jw-skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%); animation:jw-skel 1.2s infinite; }
@keyframes jw-skel { 100% { transform:translateX(100%); } }


/* ============================== [UI] badge/chip ============================== */
/* 배지/칩 */
.jw-badge { display:inline-flex; align-items:center; gap:6px; height:25px; padding:0 8px; border-radius:999px; font-size:12px; background: var(--jw-surface-color); color: var(--jw-font-color); }
.jw-badge.dot::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--jw-blue-700); }
.jw-badge.success { background: var(--jw-blue-100); color: var(--jw-blue-700); }
.jw-badge.warn { background: var(--jw-yellow-400); color: var(--jw-line-color-strong); }
.jw-badge.error { background: var(--jw-red-500); color: var(--jw-white); }


/* ============================== [UI] avatar ============================== */
/*아바타/아바타 그룹*/
.jw-avatar { position:relative; width:36px; height:36px; border-radius:50%; overflow:hidden; background: var(--jw-line-color); display:inline-flex; justify-content:center; align-items:center; font-size:14px; color: var(--jw-font-color-muted); }
.jw-avatar img { width:100%; height:100%; object-fit:cover; }

.jw-avatars { display:flex; }
.jw-avatars .jw-avatar { margin-left:-8px; border:2px solid var(--jw-bg-color); }
.jw-avatars .jw-avatar:first-child { margin-left:0; }

/* ============================== [EDITOR] ============================== */
/* ========= editor shell (generic) ========= */
.jw-editor { position:relative; background: var(--jw-bg-color); border:1px solid var(--jw-line-color); border-radius:5px; box-shadow:0 4px 6px rgba(0,0,0,.1); display:flex; flex-direction:column; overflow:auto; color: var(--jw-font-color); }
.jw-editor .toolbar { padding:2px 10px; display:flex; align-items:center; flex-wrap:wrap; gap:1px 20px; border-bottom:1px solid var(--jw-line-color); background: var(--jw-bg-color); }

.jw-editor .toolbar .group { position:relative; height:35px; display:flex; align-items:center; gap:10px; }
.jw-editor .toolbar .group:not(:last-child):after { content:""; position:absolute; width:1px; height:20px; background: var(--jw-line-color); right:-10px; top:50%; transform:translateY(-50%); }
.jw-editor .toolbar .jw-select > .jw-selected { border:0; --select-height:100%; }
.jw-editor .toolbar .editor-btn { background: var(--jw-bg-color); min-width:30px; height:100%; display:flex; justify-content:center; align-items:center; border:0; cursor:pointer; color: var(--jw-font-color); }
.jw-editor .toolbar .editor-btn img { display:block; width:16px; height:16px; }
.jw-editor .toolbar .inputFile { position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.jw-editor .toolbar .inputFile input { display:none; }
.jw-editor .toolbar .inputFile > .text { font-size:12px; color: var(--jw-font-color); }
.jw-editor .toolbar .inputFile > .progress { position:relative; display:inline-block; width:40px; height:6px; border-radius:999px; background: var(--jw-line-color); overflow:hidden; }
.jw-editor .toolbar .inputFile > .progress:before { content:""; position:absolute; left:0; top:0; height:100%; width:0%; background: var(--jw-font-color-muted); }

.jw-editor .font-color { position:relative; font-size:16px; color: var(--jw-font-color); font-weight:bold; text-shadow:0 0 1px rgba(0,0,0,1); }
.jw-editor .background-color { position:relative; width:15px; height:15px; background: var(--jw-font-color); border-radius:2px; }

.jw-editor .colorBox { position:absolute; top:100%; left:0; width:200px; display:flex; flex-wrap:wrap; gap:5px; padding:10px; box-shadow:0 2px 5px rgba(0,0,0,.2); background: var(--jw-bg-color); border:1px solid var(--jw-line-color); z-index:50; }
.jw-editor .colorBox button { width:15px; height:15px; border:1px solid var(--jw-line-color); cursor:pointer; }

.jw-editor .jweditor { position:relative; flex:1; padding:2px; min-height:220px; display:flex; flex-direction:column; overflow:auto; }

.jw-editor .ql-editor { display:block; flex:1; width:100%; height:100%; min-height:220px; padding:20px; overflow-y:auto; outline:none; box-sizing:border-box; color: var(--jw-font-color); background: var(--jw-bg-color); }

.jw-editor .ql-editor::-webkit-scrollbar { display:initial; width:10px; }
.jw-editor .ql-editor::-webkit-scrollbar-track { border-radius:4px; background: var(--jw-bg-color); }
.jw-editor .ql-editor::-webkit-scrollbar-thumb { background: var(--jw-font-color-muted); border-radius:5px; border:3px solid var(--jw-bg-color); }

.jw-editor em { font-style:italic; }
.ql-editor .ql-align-center { text-align:center; }
.ql-editor .ql-align-right { text-align:right; }
.ql-editor ul, .ql-editor ol { padding-left:1.4em; margin:.6em 0; }
.ql-editor ul { list-style-type:disc; }
.ql-editor ol { list-style-type:decimal; }
.ql-editor li { margin:.2em 0; }
.jw-editor select { display:inline-block; appearance:auto; }
.jw-editor .custom-image-class.ql-align-center { display:block; margin:0 auto; }
.jw-editor .custom-image-class.ql-align-right { display:block; margin:0 0 0 auto; }


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


/* ========= 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: var(--jw-white); }
.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; }



/* ===== Input: floating label (A) ===== */
.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: var(--jw-bg-color); --jw-in-bd: var(--jw-line-color); --jw-in-tx: var(--jw-font-color); --jw-in-ph: var(--jw-line-color); --jw-in-focus: var(--jw-focus-ring-color); 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:has(.jw-input-control) { --jw-in-px:0; }
.jw-input .jw-input-control { width:100%; height:100%; border:0; outline:0; padding:0 10px; background:transparent; color:inherit; font-size:13px; }
.jw-input .jw-selected { border:0 !important; }

.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.v-default { --jw-in-bg: var(--jw-bg-color); --jw-in-bd: var(--jw-line-color); }
.jw-input.v-filled { --jw-in-bg: var(--jw-surface-color); --jw-in-bd: var(--jw-line-color); }

.jw-input.v-underline { border:0; border-bottom:1px solid var(--jw-line-color); 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 var(--jw-danger-bgcolor); box-shadow:none; }
.jw-input.v-underline.is-valid { border:0; border-bottom:1px solid var(--jw-blue-500); box-shadow:none; }

.jw-input.size-xs { --jw-in-h:28px; --jw-in-px:10px; --jw-in-r:8px; }
.jw-input.size-sm { --jw-in-h:34px; --jw-in-px:12px; --jw-in-r:9px; }
.jw-input.size-md { --jw-in-h:40px; --jw-in-px:12px; --jw-in-r:10px; }
.jw-input.size-lg { --jw-in-h:46px; --jw-in-px:14px; --jw-in-r:12px; }

/*
.jw-input:focus-within { border-color:var(--jw-in-focus); box-shadow:0 0 0 3px rgba(17,24,39,.08); }
.jw-input.is-focus { border-color:var(--jw-in-focus); box-shadow:0 0 0 3px rgba(17,24,39,.08); }
*/

.jw-input.is-error { border-color: var(--jw-danger-bgcolor); box-shadow:0 0 0 3px rgba(211,47,47,.10); }
.jw-input.is-valid { border-color: var(--jw-blue-500); box-shadow:0 0 0 3px rgba(72,118,238,.10); }
.jw-input.is-disabled { background: var(--jw-surface-color); border-color: var(--jw-line-color); color: var(--jw-font-color-muted); }
.jw-input.is-disabled .jw-input-control { cursor:not-allowed; }
.jw-input.is-block { width:100%; }

.jw-input.has-icon { padding-left:38px; }
.jw-input .jw-input-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color: var(--jw-font-color-muted); display:flex; }
.jw-input.has-clear { padding-right:40px; }
.jw-input .jw-input-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:8px; border:1px solid var(--jw-line-color); background: var(--jw-bg-color); display:flex; justify-content:center; align-items:center; cursor:pointer; color: var(--jw-font-color); }
.jw-input .jw-input-clear:hover { background: var(--jw-surface-color); }

.jw-input.is-textarea { height:auto; padding:10px 12px; }
.jw-input.is-textarea .jw-input-control { height:110px; resize:vertical; }

.jw-input-group { display:flex; align-items:stretch; gap:8px; }
.jw-input-addon { display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border-radius:10px; background: var(--jw-surface-color); border:1px solid var(--jw-line-color); color: var(--jw-font-color); font-size:12px; height:40px; }

/* ===== Input: floating label (A) ===== */
.jw-input.v-float { position:relative; }
.jw-input.v-float .jw-input-control { padding-top:12px; }
.jw-input.v-float .jw-float { position:absolute; left:12px; top:50%; transform:translateY(-50%); padding:0 5px; color: var(--jw-font-color-muted); pointer-events:none; user-select:none; transition:all .25s ease; background:transparent; }
.jw-input.v-float:focus-within .jw-float,
.jw-input.v-float.on .jw-float { top:0; font-size:12px; color: var(--jw-font-color); background: var(--jw-bg-color); }
.jw-input.v-float.v-filled:focus-within .jw-float,
.jw-input.v-float.v-filled.on .jw-float { background: var(--jw-surface-color); }


/* ===== Input: underline floating label (M) ===== */
.jw-input.v-underline-float { position:relative; border:0; border-bottom:1px solid var(--jw-line-color); 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: var(--jw-font-color-muted); 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: var(--jw-font-color); }

.jw-input.v-underline-float .jw-uline { position:absolute; left:0; right:0; bottom:-1px; height:1px; background: var(--jw-line-color); overflow:hidden; }
.jw-input.v-underline-float .jw-uline > div { width:0%; height:100%; background: var(--jw-blue-700); transition:width .25s ease; }
.jw-input.v-underline-float:focus-within .jw-uline > div { width:100%; }
/*.jw-input.v-underline-float.on .jw-uline > div { width:100%; }*/

/* underline-float: error/valid는 밑줄만 */
.jw-input.v-underline-float.is-error { border:0; border-bottom:1px solid var(--jw-danger-bgcolor); box-shadow:none; }
.jw-input.v-underline-float.is-error .jw-uline > div { background: var(--jw-danger-bgcolor); }
.jw-input.v-underline-float.is-valid { border:0; border-bottom:1px solid var(--jw-blue-500); box-shadow:none; }
.jw-input.v-underline-float.is-valid .jw-uline > div { background: var(--jw-blue-500); }

/* 기존 focus-within 때문에 생기는 테두리/그림자 제거(언더라인 계열만) */
.jw-input.v-underline:focus-within,
.jw-input.v-underline-float:focus-within { box-shadow:none; }


mark { background: rgba(255, 209, 102, .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; }


/* a_variables.css */
/* Flex & Align */
.jw-center { display:flex; justify-content:center; align-items:center; }
.jw-flex { display:flex; }
.jw-row { display:flex; align-items:center; }
.jw-col { display:flex; flex-direction:column; }
.jw-between { justify-content:space-between; }
.jw-around { justify-content:space-around; }
.jw-flex-c { justify-content:center; }
.jw-flex-r { justify-content:flex-end; }

/* grid place 유틸 (grid/flex 둘 다에서 동작하는 건 일부만) */
.jw-place-items-c { place-items:center; }
.jw-place-content-c { place-content:center; }

.jw-self-center { place-self:center; }

/* Grid */
.jw-grid-span2 { grid-column:span 2; }

/* Width */
.jw-w10 { width:10px; } .jw-w20 { width:20px; } .jw-w50 { width:50px; } .jw-w80 { width:80px; }
.jw-w100 { width:100px; } .jw-w120 { width:120px; } .jw-w150 { width:150px; } .jw-w200 { width:200px; }
.jw-w250 { width:250px; } .jw-w300 { width:300px; } .jw-w335 { width:335px; } .jw-w400 { width:400px; }
.jw-w450 { width:450px; } .jw-w500 { width:500px; } .jw-w800 { width:800px; } .jw-w1280 { width:1280px; }
.jw-wf { flex:1; min-width:0; } /* overflow 방지 */
.jw-w { width:100%; }

/* Max-Width */
.jw-mw100 { max-width:100px; } .jw-mw120 { max-width:120px; } .jw-mw150 { max-width:150px; }
.jw-mw200 { max-width:200px; } .jw-mw300 { max-width:300px; } .jw-mw1100 { max-width:1110px; } .jw-mw1280 { max-width:1280px; }

/* Padding */
.jw-pad10 { padding:10px; } .jw-pad20 { padding:20px; }
.jw-pdl10 { padding-left:10px; } .jw-pdl20 { padding-left:20px; }

/* Gap (컨테이너에 jw-flex/jw-grid 필요) */
.jw-gap5 { gap:5px; } .jw-gap10 { gap:10px; } .jw-gap15 { gap:15px; } .jw-gap20 { gap:20px; }
.jw-gap30 { gap:30px; } .jw-gap40 { gap:40px; } .jw-gap50 { gap:50px; } .jw-gap150 { gap:150px; }

/* Margin */
.jw-mgt5 { margin-top:5px; } .jw-mgt10 { margin-top:10px; } .jw-mgt15 { margin-top:15px; } .jw-mgt20 { margin-top:20px; }
.jw-mgt30 { margin-top:30px; } .jw-mgt40 { margin-top:40px; } .jw-mgt50 { margin-top:50px; } .jw-mgt80 { margin-top:80px; } .jw-mgt100 { margin-top:100px; }

.jw-mgb10 { margin-bottom:10px; } .jw-mgb50 { margin-bottom:50px; }

.jw-mgr10 { margin-right:10px; } .jw-mgl10 { margin-left:10px; } .jw-mgl20 { margin-left:20px; }

.jw-mg10 { margin:0 10px; }

/* Height */
.jw-h10 { height:10px; } .jw-h20 { height:20px; } .jw-h25 { height:25px; } .jw-h30 { height:30px; }
.jw-h40 { height:40px; } .jw-h50 { height:50px; } .jw-h60 { height:60px; } .jw-h80 { height:80px; }
.jw-h100 { height:100px; } .jw-h120 { height:120px; } .jw-h150 { height:150px; }
.jw-h100p { height:100%; }

/* Font Size (px 고정) */
.jw-font12 { font-size:12px; } .jw-font13 { font-size:13px; } .jw-font14 { font-size:14px; }
.jw-font20 { font-size:20px; } .jw-font22 { font-size:22px; } .jw-font24 { font-size:24px; }

/* Heading */
.jw-h1 { font-size:18px; font-weight:bold; } .jw-h2 { font-size:16px; font-weight:bold; }

/* REM Scale (html 18px 기준) */
.rem12{ font-size:0.67rem; } .rem14{ font-size:0.78rem; } .rem16{ font-size:0.89rem; } .rem18{ font-size:1rem; }
.rem20{ font-size:1.11rem; } .rem22{ font-size:1.22rem; } .rem24{ font-size:1.33rem; } .rem26{ font-size:1.44rem; }
.rem28{ font-size:1.56rem; } .rem30{ font-size:1.67rem; } .rem32{ font-size:1.78rem; } .rem34{ font-size:1.89rem; }
.rem36{ font-size:2rem; } .rem38{ font-size:2.11rem; } .rem46{ font-size:2.56rem; } .rem48{ font-size:2.67rem; }
.rem50{ font-size:2.78rem; } .rem60{ font-size:3.33rem; } .rem72{ font-size:4rem; }

/* 보너스 유틸(실전에서 자주 씀) */
.jw-ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jw-break { word-break:break-word; overflow-wrap:anywhere; }
.jw-hide { display:none !important; }
.jw-inline { display:inline-block; }
.jw-ovh { overflow:hidden; }
.jw-pta { pointer-events:auto; } .jw-ptn { pointer-events:none; }

/* variable utils (inject via style="--jw-*: ..." or parent selector) */
.jw-wv { width:var(--jw-width); }
.jw-hv { height:var(--jw-height); }
.jw-mwv { max-width:var(--jw-max-width); }
.jw-mhv { max-height:var(--jw-max-height); }

.jw-pv { padding:var(--jw-pad); }
.jw-mv { margin:var(--jw-mg); }
.jw-gv { gap:var(--jw-gap); }

.jw-flexv { flex:var(--jw-flex); }
.jw-colsv { grid-template-columns:var(--jw-cols); }
.jw-fontv { font-size:var(--jw-font); }

/* ######################### */

.comment-list .children { margin-left:30px; padding-left:20px; border-left:2px solid #eee; }

.sidebar-inner { width:100%; background:#fafafa; border:1px solid #e5e5e5; border-radius:8px; padding:20px; }
.sidebar-inner h3 { margin:20px 0 10px; font-size:15px; font-weight:600; }
.sidebar-inner a { color:#333; text-decoration:none; }
.sidebar-inner a:hover { text-decoration:underline; }
.wp-block-loginout { margin-bottom:20px; }
.wp-block-loginout form { display:flex; flex-direction:column; gap:8px; }
.wp-block-loginout input[type="text"],
.wp-block-loginout input[type="password"] { height:36px; padding:0 10px; border:1px solid #ccc; border-radius:4px; }
.wp-block-loginout input[type="submit"] { height:36px; background:#222; color:#fff; border:0; border-radius:4px; cursor:pointer; }
.wp-block-query { margin-bottom:20px; }
.wp-block-query .wp-block-post-title { font-size:14px; line-height:1.4; }
.wp-block-query .wp-block-post-title + .wp-block-post-title { margin-top:6px; }
.wp-block-latest-posts { padding-left:0; list-style:none; }
.wp-block-latest-posts li { margin-bottom:6px; font-size:14px; }



.home-grid { width:100%; display:flex; flex-direction:column; gap:20px; padding:0 16px; }
.home-row { display:block; }
.home-row-1 { display:grid; grid-template-columns:1fr; }
.home-row-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.home-row-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.home-box { min-height:120px; }

.home-box-hero { padding:0; overflow:hidden; border-radius:12px; }
.home-hero-image { width:100%; height:300px; background-size:cover; background-position:center; background-repeat:no-repeat; background-image:url('/wp-content/themes/jw-template-v2/img/test.png'); }

.jw-card.type-banner { height:130px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:12px; border-radius:12px; background:#fff; box-shadow:3px 3px 10px rgba(15,23,42,0.12); }
.jw-card.type-banner .jw-cols { display:flex; align-items:center; }
.jw-card.type-banner img { width:50px; height:auto; display:block; }
.jw-card.type-banner .title { font-size:18px; font-weight:800; line-height:1; }
.jw-card.type-banner .text { display:flex; justify-content:center; align-items:center; color:#666; font-size:13px; line-height:1.2; text-align:center; padding:0 12px; }

.jw-card.type-main-section { background:#fff; border-radius:12px; box-shadow:3px 3px 10px rgba(15,23,42,0.10); overflow:hidden; }
.jw-card.type-main-section .title-wrap { position:relative; height:46px; padding:0 12px; border-bottom:1px solid #e9e9e9; display:flex; align-items:center; justify-content:space-between; }
.jw-card.type-main-section .title { position:relative; height:100%; padding:0 10px; display:flex; align-items:center; font-size:16px; font-weight:800; border-bottom:3px solid var(--accent-color); }
.jw-card.type-main-section .title-wrap a { font-size:13px; color:#777; text-decoration:none; }
.jw-card.type-main-section .title-wrap a:hover { color:var(--accent-color); text-decoration:underline; }

.outlogin { width:100%; }
.outlogin .login-links { display:flex; justify-content:center; align-items:center; gap:10px; }
.outlogin .login-links a { flex:1; display:flex; justify-content:center; align-items:center; }

.login-userbox { padding:12px; background:#f9f9f9; border:1px solid #ddd; border-radius:8px; font-size:14px; }
.login-userbox p { margin:6px 0; display:flex; align-items:center; gap:8px; }
.login-userbox strong { color:#333; font-weight:600; }
.login-userbox img { width:36px; height:36px; border-radius:50%; border:1px solid #ccc; }
.login-userbox a { color:#0073aa; text-decoration:none; margin-left:4px; }
.login-userbox a:hover { text-decoration:underline; color:#005177; }
.login-userbox .point-info { margin:10px 0; }

.notice-box h2 { font-size:16px; font-weight:bold; padding:0 10px; display:flex; align-items:center; height:40px; border-radius:5px; background:#f4f4f4; }
.notice-box h2 a { width:100%; height:100%; display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:inherit; }
.notice-box h2 span { color:#999; }
.notice-box ul { margin-top:10px; padding:0; list-style:none; }
.notice-box ul li { height:35px; display:flex; align-items:center; gap:10px; }
.notice-box ul li a { max-width:220px; display:inline-block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; min-width:0; text-decoration:none; color:#333; }
.notice-box ul li a:hover { color:var(--accent-color); text-decoration:underline; }
.notice-box ul li .num { width:25px; height:25px; display:flex; justify-content:center; align-items:center; background:#E0E0E0; border-radius:3px; font-weight:bold; color:#999999; }
.notice-box ul li:nth-child(1) .num { background:#DB3232; color:#fff; }
.notice-box ul li:nth-child(2) .num { background:#999999; color:#fff; }
.notice-box ul li:nth-child(3) .num { background:#999999; color:#fff; }
.notice-box ul .no-post { height:100px; display:flex; justify-content:center; align-items:center; color:#999; }

.jw-comment-login-required { padding:0 10px; }

.jw-recent-posts { margin:0 0 20px; padding:0; }
.jw-recent-posts-list { list-style:none; margin:0; padding:0; }
.jw-recent-posts-item { display:flex; align-items:center; justify-content:space-between; gap:10px; height:45px; border-bottom:1px solid #eee; padding:0 12px; }
.jw-recent-posts-item:last-child { border-bottom:none; }
.jw-recent-posts-title { flex:1; display:inline-block; text-decoration:none; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jw-recent-posts-title:hover { text-decoration:underline; color:var(--accent-color); }
.jw-recent-posts-date { flex-shrink:0; margin-left:10px; font-size:12px; color:#999; }

.jw-recent-posts--thumb { margin:16px 12px 20px; }
.jw-recent-posts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; list-style:none; margin:0; padding:0; }
.jw-recent-posts-thumb-link { display:flex; flex-direction:column; height:100%; border:1px solid #eee; border-radius:10px; overflow:hidden; text-decoration:none; background:#fff; }
.jw-recent-posts-thumb-image { width:100%; aspect-ratio:4 / 3; background:#f5f5f5; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.jw-recent-posts-thumb-image img { width:100%; height:100%; object-fit:cover; display:block; }
.jw-recent-posts-thumb-placeholder { font-size:12px; color:#999; }
.jw-recent-posts-thumb-meta { padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.jw-recent-posts-thumb-title { font-size:13px; color:#333; line-height:1.4; max-height:2.8em; overflow:hidden; }
.jw-recent-posts-thumb-date { font-size:11px; color:#999; }
.jw-recent-posts-thumb-link:hover { border-color:var(--accent-color); }
.jw-recent-posts-thumb-link:hover .jw-recent-posts-thumb-title { color:var(--accent-color); }

/* 반응형 */
@media (max-width:960px) {
	.home-grid { padding:0 12px; }
	.home-hero-image { height:260px; }
	.jw-recent-posts-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
	.home-row-2 { grid-template-columns:1fr; }
	.home-row-3 { grid-template-columns:1fr; }
	.jw-card.type-banner { height:120px; }
	.jw-card.type-banner .title { font-size:17px; }
}
@media (max-width:480px) {
	.home-hero-image { height:220px; }
	.jw-recent-posts-item { padding:0 10px; }
	.jw-recent-posts--thumb { margin:14px 10px 18px; }
	.jw-recent-posts-grid { grid-template-columns:1fr; }
}

.wp-block-template-part header, header.wp-block-template-part { position:relative; z-index:10; }
.wp-block-template-part > .wp-block-group.alignfull { max-width:1200px; margin:0 auto; }
.wp-block-template-part .wp-block-group.is-content-justification-space-between { border-bottom:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:14px; margin:18px auto 0; max-width:1200px; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.wp-block-template-part .wp-block-group.is-content-justification-space-between { padding:14px 18px !important; }
.wp-block-site-logo img.custom-logo { width:44px; height:44px; object-fit:contain; border-radius:10px; }

.wp-block-site-title { margin:0; line-height:1; }
.wp-block-site-title a { font-size:18px; font-weight:700; letter-spacing:-.3px; color:#111; text-decoration:none; }
.wp-block-site-title a:hover { opacity:.8; }

.wp-block-navigation { gap:10px; }
.wp-block-navigation .wp-block-navigation-item__content { padding:10px 12px; border-radius:10px; font-size:14px; color:#111; text-decoration:none; transition:all .15s ease; }
.wp-block-navigation .wp-block-navigation-item__content:hover { background:rgba(0,0,0,.06); }
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content { background:#111; color:#fff; }
.wp-block-navigation__responsive-container-open { width:40px; height:40px; border-radius:10px; border:1px solid rgba(0,0,0,.08); background:#fff; }
.wp-block-navigation__responsive-container-open:hover { background:rgba(0,0,0,.04); }
.wp-block-navigation__responsive-container { border-radius:16px; }
.wp-block-navigation__responsive-dialog { padding:18px; }

.wp-block-cover.alignfull { border-radius:18px; overflow:hidden; max-width:1200px; margin:16px auto 0; box-shadow:0 16px 50px rgba(0,0,0,.10); }
.wp-block-cover.alignfull::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 100%); pointer-events:none; }
.wp-block-cover.alignfull .wp-block-cover__inner-container { min-height:216px; }

@media (max-width: 1140px) {
	.wp-block-template-part .wp-block-group.is-content-justification-space-between { margin:10px 12px 0; border-radius:12px; }
	.wp-block-cover.alignfull { margin:12px 12px 0; border-radius:14px; }
	.wp-block-site-title a { font-size:16px; }
}