@charset "utf-8";
/* =====================================================
   탈황 시스템 납품실적 — portfolio/css/desulf.css
   카테고리 시그니처: H₂S Red Accent
   ===================================================== */

/* ===== HERO ===== */
.perf-hero {position:relative; padding:0 0 40px; overflow:hidden;}
.perf-hero .moto {font-size:var(--fs14); font-weight:700; color:var(--c_base3); letter-spacing:0.3em; text-transform:uppercase; margin-bottom:18px; display:inline-flex; align-items:center; gap:14px;}
.perf-hero .moto::before {content:''; width:48px; height:1px; background:var(--c_base3);}
.perf-hero h2 {font-size:var(--fs56); font-weight:800; color:var(--c_base1); line-height:1.2; letter-spacing:-0.025em;}
.perf-hero h2 em {color:var(--c_base3); font-style:normal; position:relative;}
.perf-hero h2 em::after {content:''; position:absolute; left:0; right:0; bottom:4px; height:14px; background:rgba(226,14,22,0.14); z-index:-1; border-radius:4px;}
.perf-hero .lead {margin-top:28px; font-size:var(--fs17); color:#666; line-height:1.85; max-width:820px;}

/* ===== KPI ===== */
.perf-kpi {display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:60px;}
.perf-kpi-item {position:relative; padding:36px 28px 32px; background:#fff; border:1px solid var(--border1); border-radius:20px; overflow:hidden; transition:all .5s cubic-bezier(0.16,1,0.3,1);}
.perf-kpi-item::before {content:''; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg, var(--c_base1), var(--c_base3)); transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(0.16,1,0.3,1);}
.perf-kpi-item::after {content:''; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(226,14,22,0.08) 0%, transparent 70%); opacity:0; transition:opacity .5s;}
.perf-kpi-item:hover {transform:translateY(-8px); box-shadow:0 26px 60px rgba(19,67,143,0.18); border-color:var(--c_base3);}
.perf-kpi-item:hover::before {transform:scaleX(1);}
.perf-kpi-item:hover::after {opacity:1;}
.perf-kpi-item .ico {position:absolute; right:22px; top:22px; width:28px; height:28px; opacity:0.18; fill:var(--c_base1);}
.perf-kpi-item .num {font-size:var(--fs48); font-weight:900; color:var(--c_base1); line-height:1; letter-spacing:-0.04em; display:flex; align-items:baseline; gap:4px;}
.perf-kpi-item .num .plus {font-size:0.55em; color:var(--c_base3); font-weight:800;}
.perf-kpi-item .lbl {margin-top:14px; font-size:var(--fs14); color:#555; font-weight:600;}
.perf-kpi-item .sub {margin-top:4px; font-size:var(--fs12); color:#999; font-weight:500;}
.perf-kpi-item.highlight {background:linear-gradient(135deg, var(--c_base1) 0%, #0e3672 60%, var(--c_base3) 130%); border-color:transparent;}
.perf-kpi-item.highlight::before {background:linear-gradient(90deg, #fff, rgba(255,255,255,0.4));}
.perf-kpi-item.highlight::after {background:radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); opacity:1;}
.perf-kpi-item.highlight .num, .perf-kpi-item.highlight .lbl {color:#fff;}
.perf-kpi-item.highlight .num .plus {color:#ffd9db;}
.perf-kpi-item.highlight .sub {color:rgba(255,255,255,0.75);}
.perf-kpi-item.highlight .ico {fill:#fff; opacity:0.25;}

/* ===== PRINCIPLE — H₂S 시그니처: 레드 글로우 강화 ===== */
.perf-principle {display:grid; grid-template-columns:1.05fr 1fr; gap:24px; margin:60px 0 40px;}
.perf-principle-left {position:relative; padding:46px 40px; background:linear-gradient(135deg, var(--c_base1) 0%, #0e3672 60%, #8a1117 130%); border-radius:22px; color:#fff; overflow:hidden;}
.perf-principle-left::before {content:''; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(255,224,74,0.16) 0%, transparent 70%);}
.perf-principle-left::after {content:''; position:absolute; left:-60px; bottom:-60px; width:220px; height:220px; border-radius:50%; background:rgba(226,14,22,0.32); filter:blur(40px);}
.perf-principle-left > * {position:relative; z-index:1;}
.perf-principle-left .label {display:inline-flex; align-items:center; gap:10px; font-size:var(--fs13); font-weight:700; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:18px; color:#ffe04a;}
.perf-principle-left .label::before {content:''; width:36px; height:1px; background:#ffe04a;}
.perf-principle-left h3 {font-size:var(--fs28); font-weight:800; line-height:1.35; letter-spacing:-0.02em;}
.perf-principle-left h3 em {font-style:normal; color:#ffe04a;}
.perf-principle-left p {margin-top:16px; font-size:var(--fs15); color:rgba(255,255,255,0.9); line-height:1.85;}
.perf-principle-left .formula {margin-top:22px; padding:16px 22px; background:rgba(0,0,0,0.22); border:1px dashed rgba(255,224,74,0.4); border-radius:10px; font-family:'Consolas', monospace; font-size:var(--fs13); color:#ffe04a;}

.perf-principle-right {display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.perf-feat-mini {padding:24px 22px; background:#fff; border:1.5px solid var(--border1); border-radius:16px; transition:all .4s cubic-bezier(0.16,1,0.3,1); position:relative; overflow:hidden;}
.perf-feat-mini::before {content:''; position:absolute; left:0; top:0; height:100%; width:3px; background:linear-gradient(180deg, var(--c_base1), var(--c_base3)); transform:scaleY(0); transform-origin:top; transition:transform .4s;}
.perf-feat-mini:hover {transform:translateY(-4px); box-shadow:0 16px 36px rgba(19,67,143,0.12); border-color:var(--c_base3);}
.perf-feat-mini:hover::before {transform:scaleY(1);}
.perf-feat-mini .ico {display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; background:linear-gradient(135deg, var(--c_base1), var(--c_base3)); color:#fff; margin-bottom:14px;}
.perf-feat-mini .ico svg {width:20px; height:20px; fill:#fff;}
.perf-feat-mini h4 {font-size:var(--fs15); font-weight:800; color:var(--c_base1); margin-bottom:6px; letter-spacing:-0.01em;}
.perf-feat-mini p {font-size:var(--fs13); color:#666; line-height:1.65;}

/* ===== SECTION + HEAD ===== */

.perf-section-head {margin-bottom:26px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px;}
.perf-section-head .lead-area .label {display:inline-flex; align-items:center; gap:10px; font-size:var(--fs13); font-weight:700; color:var(--c_base3); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:12px;}
.perf-section-head .lead-area .label::before {content:''; width:32px; height:1px; background:var(--c_base3);}
.perf-section-head h3 {font-size:var(--fs36); font-weight:800; color:#222; letter-spacing:-0.02em; line-height:1.3;}
.perf-section-head h3 em {font-style:normal; color:var(--c_base3);}
.perf-section-head .desc {margin-top:8px; font-size:var(--fs14); color:#888;}

/* ===== FEATURED CARDS ===== */
.perf-feat {display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.perf-feat-card {position:relative; padding:30px 28px; background:#fff; border:1.5px solid var(--border1); border-radius:18px; transition:all .45s cubic-bezier(0.16,1,0.3,1); overflow:hidden;}
.perf-feat-card::before {content:''; position:absolute; left:0; top:0; width:5px; height:0; background:linear-gradient(180deg, var(--c_base1), var(--c_base3)); transition:height .45s cubic-bezier(0.16,1,0.3,1);}
.perf-feat-card::after {content:''; position:absolute; right:-50px; bottom:-50px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(226,14,22,0.07) 0%, transparent 70%); transition:transform .6s;}
.perf-feat-card:hover {transform:translateY(-6px); box-shadow:0 20px 48px rgba(19,67,143,0.14); border-color:var(--c_base3);}
.perf-feat-card:hover::before {height:100%;}
.perf-feat-card:hover::after {transform:scale(1.4);}
.perf-feat-card .ff-tag {display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:50px; background:rgba(226,14,22,0.08); color:var(--c_base3); font-size:var(--fs12); font-weight:700; letter-spacing:0.05em;}
.perf-feat-card .ff-tag::before {content:''; width:6px; height:6px; border-radius:50%; background:var(--c_base3); box-shadow:0 0 0 4px rgba(226,14,22,0.18); animation:perfDot 1.8s ease infinite;}
@keyframes perfDot {0%,100%{box-shadow:0 0 0 4px rgba(226,14,22,0.18);} 50%{box-shadow:0 0 0 8px rgba(226,14,22,0);}}
.perf-feat-card h4 {margin-top:16px; font-size:var(--fs20); font-weight:800; color:var(--c_base1); line-height:1.35; letter-spacing:-0.01em; min-height:54px;}
.perf-feat-card .ff-spec {margin-top:18px; padding-top:18px; border-top:1px dashed var(--border1); display:flex; flex-direction:column; gap:8px;}
.perf-feat-card .ff-spec-row {display:flex; justify-content:space-between; align-items:center; font-size:var(--fs13); position:relative; z-index:1;}
.perf-feat-card .ff-spec-row .lbl {color:#999; font-weight:500;}
.perf-feat-card .ff-spec-row .val {color:var(--c_base1); font-weight:700;}

/* ===== TOOLS ===== */
.perf-panel {opacity:1;}
.perf-panel.on {animation:perfFade .55s cubic-bezier(0.16,1,0.3,1) both;}
@keyframes perfFade {from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);}}
/* .perf-tools {position:sticky; top:80px; z-index:50; padding:18px; margin-bottom:24px; background:rgba(255,255,255,0.85); backdrop-filter:blur(14px); border:1px solid var(--border1); border-radius:18px; box-shadow:0 8px 24px rgba(19,67,143,0.06);} */
.perf-tools { margin-bottom:24px;}
.perf-tools-row {display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.perf-search {flex:1; min-width:240px; position:relative;}
.perf-search svg {position:absolute; left:18px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:#999;}
.perf-search input {width:100%; padding:14px 50px 14px 46px; border:1.5px solid var(--border1); border-radius:10px; background:#fff; transition:all .25s; font-family:inherit;}
.perf-search input:focus {outline:none; border-color:var(--c_base3); box-shadow:0 0 0 4px rgba(226,14,22,0.08);}
.perf-search .clear {position:absolute; right:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; background:var(--border1); border:none; cursor:pointer; display:none; align-items:center; justify-content:center; color:#666; font-size:14px; line-height:1;}
.perf-search.has-value .clear {display:flex;}
.perf-search .clear:hover {background:var(--c_base3); color:#fff;}
.perf-search .clear.on {display:block;}
.perf-filter-sel {position:relative;}
.perf-filter-sel select {padding:14px 42px 14px 18px; border:1.5px solid var(--border1); border-radius:50px; font-size:var(--fs14); background:#fff; color:#444; font-weight:600; cursor:pointer; appearance:none; -webkit-appearance:none; font-family:inherit; min-width:140px;}
.perf-filter-sel::after {content:'▾'; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--c_base1); pointer-events:none; font-size:12px;}
.perf-filter-sel select:focus {outline:none; border-color:var(--c_base3);}
.perf-status {display:flex; gap:6px; padding:4px; background:var(--bg1); border-radius:50px;}
.perf-status button {padding:10px 18px; border:none; background:transparent; border-radius:50px; font-size:var(--fs13); font-weight:600; color:#777; cursor:pointer; transition:all .25s; font-family:inherit;}
.perf-status button:hover {color:var(--c_base3);}
.perf-status button.on {background:var(--c_base3); color:#fff; box-shadow:0 4px 12px rgba(226,14,22,0.28);}
.perf-tools-info {display:flex; align-items:center; gap:8px; padding-left:6px; font-size:var(--fs13); color:#888;}
.perf-tools-info b {color:var(--c_base3); font-weight:800; font-size:var(--fs15);}

/* ===== TABLE ===== */
.perf-table-wrap {position:relative; background:#fff; border:1px solid var(--border1); border-radius:10px; overflow:hidden; box-shadow:0 8px 28px rgba(19,67,143,0.05);}
.perf-table-scroll {overflow-x:auto;}
.perf-table {width:100%; border-collapse:collapse; min-width:760px;}
.perf-table thead {background:linear-gradient(180deg, var(--c_base1) 0%, #0e3672 100%); color:#fff;}
.perf-table th {padding:18px 20px; font-weight:700; text-align:left; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;}
.perf-table td {padding:16px 20px; color:#444; border-bottom:1px solid var(--border1); transition:all .25s;}
.perf-table tbody tr:last-child td {border-bottom:none;}
.perf-table tbody tr:hover td {background:linear-gradient(90deg, rgba(226,14,22,0.04), rgba(19,67,143,0.02));}
.perf-table tbody tr.hidden {display:none;}
.perf-table td.col-no {color:#222; width:64px;}
.perf-table td.col-name {color:#222; font-weight:700;}
.perf-table td.col-cap {font-weight:600; color:#333; white-space:nowrap;}
.perf-table td.col-year {font-weight:700; white-space:nowrap;}
.perf-table .modeli {display:inline-flex; align-items:center; padding:4px 12px; border-radius:50px; background:rgba(19,67,143,0.08); color:var(--c_base1);  font-weight:700; white-space:nowrap;}
.perf-table .modeli.alt {background:rgba(47,113,200,0.1); color:var(--c_base2);}
.badge {display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:50px;font-weight:700; white-space:nowrap;}
/* .badge::before {content:''; width:5px; height:5px; border-radius:50%; background:currentColor;} */
.badge.wip {background:rgba(226,14,22,0.1); color:var(--c_base3);}
/* .badge.done {background:rgba(47,113,200,0.1); color:var(--c_base2);} */
.badge.export {background:rgba(97,106,118,0.12); color:#445063;}

.perf-empty {display:none; padding:80px 20px; text-align:center; color:#999;}
.perf-empty.on {display:block;}
.perf-empty svg {width:60px; height:60px; opacity:0.25; margin-bottom:18px; fill:#000;}
.perf-empty h4 {font-size:var(--fs18); font-weight:700; color:#666; margin-bottom:8px;}
.perf-empty p {font-size:var(--fs14);}
.perf-note {margin-top:18px; padding:14px 20px; background:var(--bg1); border-left:3px solid var(--c_base3); border-radius:0 10px 10px 0; font-size:var(--fs15); color:#666; line-height:1.7;}

/* ===== SERIES NAV ===== */
.perf-series {margin-top:80px; padding:42px 36px; background:linear-gradient(135deg, #fafbfc 0%, #f4e8e9 100%); border:1px solid var(--border1); border-radius:22px;}
.perf-series-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px;}
.perf-series-head h4 {font-size:var(--fs20); font-weight:800; color:#222; letter-spacing:-0.01em;}
.perf-series-head .sub {font-size:var(--fs13); color:#888;}
.perf-series-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.perf-series-grid a {position:relative; padding:22px 20px; background:#fff; border:1.5px solid var(--border1); border-radius:14px; transition:all .35s cubic-bezier(0.16,1,0.3,1); overflow:hidden; display:block;}
.perf-series-grid a::before {content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--c_base1), var(--c_base3)); opacity:0; transition:opacity .35s;}
.perf-series-grid a > * {position:relative; z-index:1;}
.perf-series-grid a:hover {transform:translateY(-4px); box-shadow:0 18px 40px rgba(19,67,143,0.18); border-color:transparent;}
.perf-series-grid a:hover::before {opacity:1;}
.perf-series-grid a:hover .ps-n, .perf-series-grid a:hover .ps-name, .perf-series-grid a:hover .ps-count {color:#fff;}
.perf-series-grid a.now {border-color:var(--c_base3); background:linear-gradient(135deg, #fff, #fff5f5);}
.perf-series-grid a.now::after {content:'NOW'; position:absolute; top:10px; right:10px; padding:2px 8px; border-radius:50px; background:var(--c_base3); color:#fff; font-size:var(--fs12); font-weight:800; letter-spacing:0.08em;}
.perf-series-grid .ps-n {font-size:var(--fs12); font-weight:800; color:var(--c_base3); letter-spacing:0.15em; transition:color .3s;}
.perf-series-grid .ps-name {margin-top:6px; font-size:var(--fs18); font-weight:800; color:#222; letter-spacing:-0.01em; transition:color .3s;}
.perf-series-grid .ps-count {margin-top:10px; font-size:var(--fs12); color:#888; font-weight:600; transition:color .3s;}
.perf-series-grid .ps-count {display:none;}

/* ===== CTA ===== */
.perf-cta {position:relative; margin-top:80px; padding:70px 60px; border-radius:24px; background:linear-gradient(135deg, var(--c_base1) 0%, #0e3672 45%, var(--c_base3) 130%); color:#fff; overflow:hidden;}
.perf-cta::before {content:''; position:absolute; right:-100px; top:-100px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(255,224,74,0.14) 0%, transparent 70%);}
.perf-cta::after {content:''; position:absolute; left:-80px; bottom:-100px; width:280px; height:280px; border-radius:50%; background:rgba(226,14,22,0.32); filter:blur(40px);}
.perf-cta .inner {position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
.perf-cta h3 {font-size:var(--fs32); font-weight:800; line-height:1.35; letter-spacing:-0.01em;}
.perf-cta h3 em {font-style:normal; color:#ffe04a;}
.perf-cta p {margin-top:14px; font-size:var(--fs15); color:rgba(255,255,255,0.85); line-height:1.7;}
.perf-cta .btn-group {display:flex; gap:12px; flex-wrap:wrap;}

/* ===== RESPONSIVE ===== */
@media screen and (max-width:1199px) {
	/* .perf-hero {padding:80px 0 30px;} */
	/* .perf-hero h2 {font-size:var(--fs40);} */
	.perf-kpi {grid-template-columns:repeat(3,1fr);}
	/* .perf-kpi-item .num {font-size:var(--fs36);} */
	.perf-principle {grid-template-columns:1fr;}
	.perf-feat {grid-template-columns:repeat(2,1fr);}
	.perf-series-grid {grid-template-columns:repeat(3,1fr);}
}
@media screen and (max-width:767px) {
	/* .perf-hero h2 {font-size:var(--fs30);} */
	.perf-hero h2 em::after {display:none;}
	.perf-kpi {grid-template-columns:1fr 1fr;}
	.perf-kpi-item {padding:24px 18px;}
	/* .perf-kpi-item .num {font-size:var(--fs30);} */
	.perf-principle-left {padding:30px 24px;}
	/* .perf-principle-left h3 {font-size:var(--fs22);} */
	.perf-principle-right {grid-template-columns:1fr;}
	.perf-feat {grid-template-columns:1fr;}
	/* .perf-section-head h3 {font-size:var(--fs22);} */
	/* .perf-tools {padding:14px; top:60px;} */
	.perf-tools {margin-bottom:10px;}
	.perf-tools-row {gap:8px;}
	.perf-search {min-width:100%;}
	.perf-status {width:100%; justify-content:space-between;}
	.perf-status button {padding:8px 12px; flex:1;}
	.perf-table th, .perf-table td {padding:12px 14px; font-size:var(--fs13);}
	.perf-series {padding:28px 22px;}
	.perf-series-grid {grid-template-columns:1fr 1fr;}
	.perf-cta {padding:50px 30px; margin-top:60px;}
	/* .perf-cta h3 {font-size:var(--fs24);} */
}