/* =========================================================
   research.ebiweb.co.kr — 포트폴리오(/portfolio) 페이지 전용 스타일
   공용 디자인 시스템(common.css) 위에서 동작 — Soft Glass / Lavender 톤
   ========================================================= */

body.portfolio {
  background:
    radial-gradient(circle at 14% 6%, rgba(143,152,217,.22), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(238,206,184,.18), transparent 32%),
    radial-gradient(circle at 76% 70%, rgba(169,206,200,.14), transparent 34%),
    var(--soft);
  overflow-x: hidden;
}
.portfolio-main { background: transparent; }
.portfolio-main > section { padding: 100px 0; }
.portfolio-main .wrap { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }

/* ---------- HERO (컴팩트, 단일 컬럼) ---------- */
.portfolio-hero { padding: 72px 0 44px !important; text-align:center;}
.portfolio-hero .site-eyebrow { color: var(--brand-eyebrow); }
.portfolio-hero h1 { margin: 12px 0 18px; color: var(--ink); font-size: clamp(32px,4.4vw,44px); line-height: 1.3; letter-spacing: -.03em; font-weight: 800; }
.portfolio-hero h1 span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: var(--brand-deep); -webkit-text-fill-color: transparent; }
.portfolio-hero-lead { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; letter-spacing: -.02em; word-break: keep-all; }

/* ---------- 갤러리 ---------- */
.portfolio-gallery { padding-top: 16px !important; }
.pf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2vw,40px); }
.pf-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform .25s ease, box-shadow .25s ease; will-change: transform;
}
.pf-card:hover { transform: translateY(-6px); box-shadow: 0 30px 64px rgba(72,80,130,.18); }

.pf-thumb { position: relative; aspect-ratio: 1 / 1.3; overflow: hidden; }
.pf-thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pf-thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 78% 14%, rgba(255,255,255,.22), transparent 42%); }
.pf-card[data-category="lab"]    .pf-thumb { background: linear-gradient(150deg,#EEF0FA,#DEE2F4); }
.pf-card[data-category="center"] .pf-thumb { background: linear-gradient(150deg,#E9EEF9,#D7DEF1); }
.pf-card[data-category="dept"]   .pf-thumb { background: linear-gradient(150deg,#E9F3EF,#D6E6E1); }

.pf-tag { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: rgba(21,29,59,.78); color: #fff; font-size: 14px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; backdrop-filter: blur(6px); }

a.pf-card { color: inherit; text-decoration: none; }
.pf-body { display: flex; flex-direction: column; flex: 1; padding: var(--pad-box); border-top:1px solid rgba(143, 152, 217, .16)}
.pf-body h3 { margin: 0 0 8px; color: var(--ink); font-size: 19px; line-height: 1.35; letter-spacing: -.03em; font-weight: 800; }
.pf-url { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 12px; color: var(--brand-deep); font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; word-break: break-all; }
.pf-url svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pf-url.is-empty { color: var(--muted); font-weight: 600; }
a.pf-card:hover .pf-url:not(.is-empty) { text-decoration: underline; text-underline-offset: 3px; }
.pf-desc { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; word-break: keep-all; }

/* ---------- 공식 사이트 안내 카드 ---------- */
.portfolio-official { padding-top: 0 !important; }
.pf-official-box {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px;
  padding: var(--pad-box-lg); border-radius: var(--radius-lg); color: #fff; background: var(--cta-bg);
  box-shadow: 0 28px 64px rgba(21,29,59,.30);
}
.pf-official-box .site-eyebrow { color: #A9B3E6; }
.pf-official-box h2 { margin: 12px 0 10px; font-size: clamp(22px,3vw,28px); line-height: 1.35; letter-spacing: -.03em; font-weight: 800; }
.pf-official-box p { margin: 0; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.pf-official-box .pf-official-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 30px;
  border-radius: 999px; background: #fff; color: var(--cta-bg); font-size: 15px; font-weight: 800;
  white-space: nowrap; transition: .2s ease;
}
.pf-official-box .pf-official-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.pf-official-box .pf-official-btn svg { width: 18px; height: 18px; }
.pf-note { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.3; word-break: keep-all; }

/* ---------- FAQ (AEO) — 연구실(lab) FAQ 스타일 동일 적용 ---------- */
.pf-faq-head { max-width: 720px; margin: 0 0 32px; }
.pf-faq-head .site-eyebrow { color: var(--brand-eyebrow); }
.pf-faq-head h2 { margin: 12px 0 0; color: var(--ink); font-size: clamp(26px,3.5vw,34px); line-height: 1.3; letter-spacing: -.03em; font-weight: 800; }
/* FAQ 리스트 스타일은 common.css .faq-list 공용 사용 */

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .pf-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .portfolio-main > section { padding: 72px 0; }
  .portfolio-hero { padding: 56px 0 36px !important; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-official-box { grid-template-columns: 1fr; text-align: center; }
  .pf-official-box .pf-official-btn { justify-self: center; }
}