/* ============================================================
   PORTFOLIO DETAIL PAGE
   ============================================================ */

/* ── A2z 폰트 ── */
@font-face { font-family:'A2z'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-1Thin.woff2') format('woff2'); font-weight:100; font-display:swap; }
@font-face { font-family:'A2z'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-4Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'A2z'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-5Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'A2z'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-7Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'A2z'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/에이투지체-8ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

.pfd-sec .ql-viewer p {margin-bottom:unset !important}


/* ── 변수 ── */
:root {
  --clr-bg:       #ffffff;
  --clr-surface:  #f5f5f7;
  --clr-border:   rgba(0, 0, 0, .1);
  --clr-accent:   #5b6ef5;
  --clr-text:     #0e0f14;
  --clr-text-2:   rgba(0, 0, 0, .55);
  --clr-text-3:   rgba(0, 0, 0, .35);
  --font-ko: 'Noto Sans KR', sans-serif;
  --font-en: 'Inter', sans-serif;
  --nav-h: 80px;
}

/* ── 기본 리셋 ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; }


/* ── 레이아웃 ── */
.pfd-sec {
  padding: calc(var(--nav-h) + 100px) 0 80px;
}

.pfd-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 60px;
}

/* ── 좌측: 프로젝트 정보 ── */
.pfd-info {
  position: relative;
  padding-right:50px;
  border-right:1px solid #eee;
  padding-bottom:50px;
}

.pfd-info-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 100px);
  max-height: calc(100vh - var(--nav-h) - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 스크롤바 숨김 */
.pfd-info-sticky::-webkit-scrollbar { width: 0; }

.pfd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.5rem;
  font-weight: 500;
  color: #999;
  transition: color .2s;
}

.pfd-back:hover { color: var(--clr-accent); }

.pfd-back i { font-size: 1.4rem; }

.pfd-title {
  /* font-family: 'Aggravo', 'A2z', sans-serif; */
  font-size: clamp(3.2rem, 4vw, 4.8rem);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.3;
  word-break: keep-all;
}

.pfd-category {
  display: inline-block;
  padding: 5px 14px;
  background: var(--clr-surface);
  border-radius: 100px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-accent);
  width: fit-content;
}

.pfd-desc {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #555;
}

/* 인라인 키워드 하이라이트 */
.pfd-highlight {
  background: rgba(91,110,245,.08);
  color: var(--clr-accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}

/* 키워드 pill 태그 */
.pfd-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pfd-keyword {
  padding: 5px 14px;
  /* background: rgba(91,110,245,.06);  */
  border-radius: 5px;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--clr-accent);
  border: 1px solid var(--clr-accent);
}

.pfd-keyword.is-category {
  background: var(--clr-accent); 
  color: #fff;
  font-weight: 600;
}

/* 상세 간단 소개 (관리자 portfolio_intro) — 키워드 아래 */
.pfd-intro {
  margin: 16px 0 0;
  padding: 0;
  font-size: 1.8rem;
  font-weight: 500; 
  line-height:1.6;
  color: var(--clr-text-2, #4b5563);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.pfd-label {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-text-3);
  margin-bottom: 10px;
}

.pfd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pfd-tag {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1.4rem;
  font-weight: 500;
  color: #555;
  transition: border-color .2s, color .2s;
}

.pfd-tag:hover {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}

/* ── 우측: 스크린샷 / Quill 본문 ── */
.pfd-screens {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pfd-screen {
  margin: 0;
  border-radius: 12px;
  overflow: hidden; 
}

.pfd-screen img {
  width: 100%;
  display: block;
}

/* Quill 본문 — 스크롤 fade-up (이미지 개별 / 연속 텍스트 묶음) */
.pfd-screens .ql-viewer img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.pfd-screens .ql-viewer .pfd-fade-group {
  display: block;
}

/*
 * 꿀렁임(FOUC) 방지 순서:
 * 1) ready 전: 뷰어 통째로 안 보임 (첫 페인트에 이미지가 뜨지 않음)
 * 2) ready 후 + anim 전: 유닛 opacity 0 (transition 없음)
 * 3) anim 후: transition 켠 뒤 is-in 으로 fade-up
 */
.pfd-screens .ql-viewer:not([data-pfd-fade-ready]) {
  visibility: hidden;
}

.pfd-screens .ql-viewer[data-pfd-fade-ready] {
  visibility: visible;
}

.pfd-screens .ql-viewer .pfd-fade:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
}

/* transition 은 준비 끝난 뒤에만 — 숨김 상태로 점프할 때 애니 안 탐 */
.pfd-screens .ql-viewer[data-pfd-anim-on] .pfd-fade {
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.pfd-screens .ql-viewer .pfd-fade.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.pfd-screens .ql-viewer.pfd-fade-skip,
.pfd-screens .ql-viewer.pfd-fade-skip .pfd-fade {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pfd-screens .ql-viewer:not([data-pfd-fade-ready]),
  .pfd-screens .ql-viewer .pfd-fade {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}

/* ── 하단: 목록 버튼 ── */
.pfd-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: flex;
  justify-content: center;
}

.pfd-list-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  border: 1px solid #ddd;
  border-radius: 100px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #555;
  transition: border-color .2s, color .2s;
}

.pfd-list-btn:hover {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}

.pfd-list-btn i { font-size: 1.4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .pfd-inner { grid-template-columns: 320px 1fr; gap: 40px; }
}

@media (max-width: 768px) {

  .pfd-info {
    border-right:unset;
    padding-right:10px;
    border-bottom:1px solid #eee;
    padding-bottom:30px;
  }

  .pfd-intro {font-size:1.6rem;}

  .pfd-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pfd-info-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .pfd-sec { padding: calc(var(--nav-h) + 40px) 0 60px; }
}

@media (max-width: 480px) {
  .pfd-title { font-size: 2.8rem; }
  .pfd-screen { border-radius: 8px; }
}