/* ============================================================
   LEADERS MARKETING GROUP — portfolio.css
   ============================================================ */

/* page-hero는 about.css와 동일 구조 — about.css를 공통으로 쓰거나 아래 복사 */
.page-hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: calc(var(--header-h) + 80px) 0 100px;
}
.page-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.page-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.page-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: #7EB3FF;
  margin-bottom: 16px;
}
.page-hero__title {
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 24px;
}
.page-hero__title em {
  font-style: normal;
  background: linear-gradient(130deg, #fff 0%, #9EC7FF 55%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-hero__desc { font-size: 1.05rem; color: rgba(255,255,255,0.6); line-height: 1.9; }


/* ── STATS BAR ── */
.sec-pf-stats {
  background: var(--primary-mid);
  padding: 48px 0;
}
.pf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.pf-stat {
  text-align: center;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.pf-stat:last-child { border-right: none; }
.pf-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}
.pf-stat__num em { font-style: normal; font-size: 1.4rem; color: #A8D4FF; }
.pf-stat__label { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.65); }


/* ── PORTFOLIO GRID ── */
.sec-portfolio-full { background: var(--gray-100); }

.pf-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.pf-tab {
  padding: 8px 22px;
  border-radius: 100px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: var(--tr);
  cursor: pointer;
}
.pf-tab.is-active, .pf-tab:hover {
  background: var(--primary-mid);
  color: var(--white);
  border-color: var(--primary-mid);
}

.pf-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pf-card-full {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: var(--tr);
}
.pf-card-full.is-hidden { display: none; }
.pf-card-full:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; }

.pf-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.pf-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-align: center; line-height: 1.5;
  transition: transform 0.4s;
}
.pf-card-full:hover .pf-placeholder { transform: scale(1.05); }
.pf-placeholder--1 { background: linear-gradient(135deg, #003DA5, #0057D9); }
.pf-placeholder--2 { background: linear-gradient(135deg, #E91E8C, #9C27B0); }
.pf-placeholder--3 { background: linear-gradient(135deg, #FF5722, #FF9800); }
.pf-placeholder--4 { background: linear-gradient(135deg, #00B4A0, #00796B); }
.pf-placeholder--5 { background: linear-gradient(135deg, #5C35CC, #3F1FA0); }
.pf-placeholder--6 { background: linear-gradient(135deg, #1E293B, #0F172A); }

.pf-overlay {
  position: absolute; inset: 0;
  background: rgba(8,14,28,0.7);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.3s; z-index: 2;
}
.pf-card-full:hover .pf-overlay { opacity: 1; }
.pf-overlay__tag { font-size: 0.75rem; font-weight: 700; background: var(--primary-mid); color: var(--white); padding: 4px 14px; border-radius: 100px; margin-bottom: 10px; }
.pf-overlay__result { font-size: 0.84rem; color: rgba(255,255,255,0.8); text-align: center; }

.pf-detail { padding: 22px 22px 24px; }
.pf-detail__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pf-dtag { font-size: 0.72rem; color: var(--primary-mid); background: var(--primary-light); padding: 3px 10px; border-radius: 100px; font-weight: 500; }
.pf-detail h3 { font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.pf-detail p { font-size: 0.82rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 18px; }

.pf-kpi {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
}
.kpi-item { flex: 1; text-align: center; padding: 0 12px; border-right: 1px solid var(--gray-200); }
.kpi-item:last-child { border-right: none; }
.kpi-num { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--primary-mid); line-height: 1; margin-bottom: 4px; }
.kpi-label { display: block; font-size: 0.72rem; color: var(--gray-400); }


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .pf-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .pf-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding: 16px; }
  .pf-grid-full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page-hero { padding: calc(var(--header-h) + 48px) 0 72px; }
  .pf-stats-grid { grid-template-columns: 1fr 1fr; }
  .pf-grid-full { grid-template-columns: 1fr; }
}