/* 밥세권 프로젝트 상세 — 메인 포트폴리오 미디어아트와 동일 언어 */

body.media-portfolio.bab-project-page.backend-body {
  background: transparent !important;
  color: rgba(240, 244, 248, 0.95);
}

body.media-portfolio.bab-project-page .page-main {
  position: relative;
  z-index: 20;
}

/* 섹션 헤더 (키커 + 타이틀) */
.bab-section-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.bab-kicker {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(142, 240, 228, 0.78);
  margin-bottom: 0.75rem;
}

.bab-divider {
  height: 1px;
  max-width: min(92%, 900px);
  margin: clamp(2rem, 5vw, 3.5rem) auto;
  border: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(61, 214, 195, 0.35),
    rgba(232, 168, 124, 0.25),
    transparent
  );
  opacity: 0.9;
}

/* 히어로 */
body.media-portfolio.bab-project-page .backend-hero {
  padding: clamp(6rem, 12vw, 8rem) 0 clamp(3rem, 6vw, 4.5rem);
}

body.media-portfolio.bab-project-page .backend-hero-kicker {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(142, 240, 228, 0.88);
  margin-bottom: 0.65rem;
}

body.media-portfolio.bab-project-page .backend-hero-title {
  background: linear-gradient(125deg, #f4c4a8 0%, #e8a87c 28%, #3dd6c3 72%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.35));
}

body.media-portfolio.bab-project-page .backend-hero-desc {
  color: rgba(226, 232, 240, 0.92);
  max-width: 38rem;
}

body.media-portfolio.bab-project-page .backend-hero-desc strong {
  color: #fff;
  font-weight: 700;
}

body.media-portfolio.bab-project-page .backend-hero-lead {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 10, 18, 0.45);
  backdrop-filter: blur(12px);
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(215, 225, 238, 0.95);
}

body.media-portfolio.bab-project-page .backend-hero-lead strong {
  color: #fff;
}

body.media-portfolio.bab-project-page .backend-tags span {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(168, 240, 228, 0.95);
  font-weight: 600;
}

body.media-portfolio.bab-project-page .backend-logo-card {
  background: rgba(6, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(61, 214, 195, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.media-portfolio.bab-project-page .backend-hero-left {
  min-width: 0;
  flex: 1 1 320px;
}

/* 섹션 공통 */
body.media-portfolio.bab-project-page .backend-section {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: transparent;
}

body.media-portfolio.bab-project-page .backend-section-alt {
  background: linear-gradient(180deg, rgba(10, 14, 24, 0.42) 0%, rgba(8, 11, 20, 0.35) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

body.media-portfolio.bab-project-page .backend-section-title {
  background: linear-gradient(125deg, #f0f4f8 0%, #8ef0e4 45%, #e8c4a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0;
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.3));
}

/* 리드·기획 블록 */
.bab-lead-intro {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 0.25rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(215, 225, 238, 0.92);
}

.bab-lead-intro strong {
  color: #fff;
  font-weight: 600;
}

.bab-lead-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 22px;
  background: rgba(5, 9, 18, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px) saturate(1.08);
}

.bab-lead-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1.5rem;
}

.bab-lead-card {
  padding: 1.35rem 1.25rem;
  border-radius: 16px;
  background: rgba(4, 8, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bab-lead-card:hover {
  border-color: rgba(61, 214, 195, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

.bab-lead-card h3 {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(142, 240, 228, 0.85);
  margin-bottom: 0.75rem;
}

.bab-lead-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(215, 225, 238, 0.92);
  margin: 0;
}

.bab-lead-card p strong {
  color: #fff;
  font-weight: 600;
}

/* 카드 그리드 공통 */
body.media-portfolio.bab-project-page .info-card,
body.media-portfolio.bab-project-page .goal-card,
body.media-portfolio.bab-project-page .admin-card {
  background: rgba(5, 9, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.media-portfolio.bab-project-page .info-card:hover,
body.media-portfolio.bab-project-page .goal-card:hover,
body.media-portfolio.bab-project-page .admin-card:hover {
  border-color: rgba(232, 168, 124, 0.25);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(61, 214, 195, 0.08);
}

body.media-portfolio.bab-project-page .info-card h3,
body.media-portfolio.bab-project-page .admin-card h3 {
  color: #f0f4f8 !important;
  -webkit-text-fill-color: #f0f4f8;
  background: none;
}

body.media-portfolio.bab-project-page .goal-card .goal-title {
  background: linear-gradient(125deg, #8ef0e4 0%, #e8a87c 55%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.media-portfolio.bab-project-page .info-card p,
body.media-portfolio.bab-project-page .goal-list,
body.media-portfolio.bab-project-page .admin-card p {
  color: rgba(215, 225, 238, 0.9) !important;
}

body.media-portfolio.bab-project-page .info-card p strong {
  color: #fff !important;
}

body.media-portfolio.bab-project-page .info-card p.problem {
  color: rgba(248, 200, 180, 0.95) !important;
}

body.media-portfolio.bab-project-page .info-card p.solution {
  color: rgba(168, 240, 228, 0.95) !important;
}

body.media-portfolio.bab-project-page .goal-list {
  list-style: none;
  padding-left: 0;
}

body.media-portfolio.bab-project-page .goal-list li {
  position: relative;
  padding-left: 1.1rem;
}

body.media-portfolio.bab-project-page .goal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8a87c, #3dd6c3);
}

/* 타임라인 */
body.media-portfolio.bab-project-page .backend-timeline {
  border-left-color: rgba(61, 214, 195, 0.45);
}

body.media-portfolio.bab-project-page .backend-timeline-item::before {
  background: linear-gradient(135deg, #e8a87c, #3dd6c3);
  border-color: rgba(8, 12, 20, 0.95);
  box-shadow: 0 0 16px rgba(61, 214, 195, 0.45);
}

body.media-portfolio.bab-project-page .timeline-step {
  color: #8ef0e4 !important;
}

body.media-portfolio.bab-project-page .backend-timeline-item h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* 스크린샷 */
body.media-portfolio.bab-project-page .shot-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

body.media-portfolio.bab-project-page .shot-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

body.media-portfolio.bab-project-page .card-shot {
  border-color: rgba(255, 255, 255, 0.1);
  aspect-ratio: auto;
  overflow: hidden;
}

/* Problem Solving 등 카드 하단 스크린 — 16:9 cover 제거, 전체 표시 */
body.media-portfolio.bab-project-page .card-shot img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}

body.media-portfolio.bab-project-page .card-shot:hover {
  border-color: rgba(61, 214, 195, 0.4);
  box-shadow: 0 8px 32px rgba(61, 214, 195, 0.15);
}

/* 스택 */
body.media-portfolio.bab-project-page .stack-card {
  background: rgba(5, 9, 18, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.media-portfolio.bab-project-page .stack-card:hover {
  border-color: rgba(61, 214, 195, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

body.media-portfolio.bab-project-page .stack-card h3 {
  color: #8ef0e4 !important;
}

body.media-portfolio.bab-project-page .stack-icon-row img {
  border-color: rgba(255, 255, 255, 0.1);
  filter: drop-shadow(0 0 8px rgba(61, 214, 195, 0.2));
}

/* 플로우 */
body.media-portfolio.bab-project-page .flow-img {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

body.media-portfolio.bab-project-page .flow-desc {
  color: rgba(215, 225, 238, 0.9);
}

/* GitHub */
body.media-portfolio.bab-project-page .git-card {
  background: rgba(5, 9, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(240, 244, 248, 0.95);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
}

body.media-portfolio.bab-project-page .git-card:hover {
  border-color: rgba(61, 214, 195, 0.35);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.38);
}

body.media-portfolio.bab-project-page .git-card h3 {
  color: #fff !important;
}

body.media-portfolio.bab-project-page .git-card p {
  color: rgba(215, 225, 238, 0.88) !important;
}

body.media-portfolio.bab-project-page .git-btn {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}

body.media-portfolio.bab-project-page .git-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* PDF */
body.media-portfolio.bab-project-page .backend-pdf-box {
  background: rgba(5, 9, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.32);
}

body.media-portfolio.bab-project-page .backend-pdf-box p {
  color: rgba(215, 225, 238, 0.9);
}

body.media-portfolio.bab-project-page .backend-btn {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  border-radius: 999px;
  box-shadow:
    0 0 28px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
}

body.media-portfolio.bab-project-page .backend-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* —— 스크린샷 쇼케이스 (구매 / 관리자) —— */
.bab-gallery-lead {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(210, 220, 235, 0.9);
}

.bab-gallery-lead strong {
  color: #f0f4f8;
  font-weight: 600;
}

.bab-gallery-shell {
  position: relative;
  padding: clamp(1.35rem, 3.5vw, 2rem);
  border-radius: 24px;
  background: rgba(4, 8, 16, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px) saturate(1.08);
}

.bab-gallery-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, black 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, black 15%, transparent 75%);
}

.bab-gallery-shell--purchase::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(61, 214, 195, 0.45),
    rgba(232, 168, 124, 0.35),
    transparent
  );
  pointer-events: none;
}

.bab-gallery-shell--admin::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 120, 200, 0.35),
    rgba(61, 214, 195, 0.35),
    transparent
  );
  pointer-events: none;
}

.bab-gallery {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.35rem);
}

/* 구매: 벤토 — 큰 탐색 + 우측 스택 + 하단 3열 */
.bab-gallery--purchase {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto auto;
}

.bab-gallery--purchase .bab-shot--p1 {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
}

.bab-gallery--purchase .bab-shot--p2 {
  grid-column: 5 / 7;
  grid-row: 1 / 2;
}

.bab-gallery--purchase .bab-shot--p3 {
  grid-column: 5 / 7;
  grid-row: 2 / 3;
}

.bab-gallery--purchase .bab-shot--p4 {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

.bab-gallery--purchase .bab-shot--p5 {
  grid-column: 3 / 5;
  grid-row: 3 / 4;
}

.bab-gallery--purchase .bab-shot--p6 {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
}

/* 관리자: 로그인 슬림 + 대시보드 와이드 / 중간 3열 / 하단 시네마틱 */
.bab-gallery--admin {
  grid-template-columns: repeat(6, 1fr);
}

.bab-gallery--admin .bab-shot--a1 {
  grid-column: 1 / 3;
}

.bab-gallery--admin .bab-shot--a2 {
  grid-column: 3 / 7;
}

.bab-gallery--admin .bab-shot--a3 {
  grid-column: 1 / 3;
}

.bab-gallery--admin .bab-shot--a4 {
  grid-column: 3 / 5;
}

.bab-gallery--admin .bab-shot--a5 {
  grid-column: 5 / 7;
}

.bab-gallery--admin .bab-shot--a6 {
  grid-column: 1 / 7;
}

/* 프레임 */
.bab-shot-frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.bab-shot-frame:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.45));
}

.bab-shot-frame__chrome {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem 0.55rem;
  background: linear-gradient(180deg, rgba(12, 18, 28, 0.95), rgba(8, 12, 20, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}

.bab-shot-frame__dots {
  width: 46px;
  height: 11px;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 15% 50%, #ff5f57 0, #ff5f57 4px, transparent 5px),
    radial-gradient(circle at 50% 50%, #febc2e 0, #febc2e 4px, transparent 5px),
    radial-gradient(circle at 85% 50%, #28c840 0, #28c840 4px, transparent 5px);
  opacity: 0.85;
}

.bab-shot-frame__url {
  flex: 1;
  min-width: 0;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(160, 190, 215, 0.7);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bab-shot-frame__body {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  /* 내부는 어두운 캔버스 — 스크린샷 비율 유지 시 여백 */
  background:
    linear-gradient(145deg, rgba(61, 214, 195, 0.12), rgba(232, 168, 124, 0.08)),
    #070b12;
  padding: 1px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.bab-shot-frame__body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.07) 0%,
    transparent 42%,
    transparent 58%,
    rgba(0, 0, 0, 0.12) 100%
  );
  mix-blend-mode: soft-light;
}

/* 스크린샷 전체가 보이도록 잘림 방지 (cover·고정 비율 제거) */
.bab-shot-frame__body img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
  background: #070b12;
}

.bab-shot-frame__cap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.85rem;
  padding: 0 0.1rem;
}

.bab-shot-frame__step {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(61, 214, 195, 0.95);
}

.bab-shot-frame__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
}

.bab-shot-frame__sub {
  margin-left: auto;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 200, 220, 0.55);
}

@media (max-width: 520px) {
  .bab-shot-frame__sub {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .bab-gallery--purchase,
  .bab-gallery--admin {
    grid-template-columns: 1fr;
  }

  .bab-gallery--purchase .bab-shot--p1,
  .bab-gallery--purchase .bab-shot--p2,
  .bab-gallery--purchase .bab-shot--p3,
  .bab-gallery--purchase .bab-shot--p4,
  .bab-gallery--purchase .bab-shot--p5,
  .bab-gallery--purchase .bab-shot--p6,
  .bab-gallery--admin .bab-shot--a1,
  .bab-gallery--admin .bab-shot--a2,
  .bab-gallery--admin .bab-shot--a3,
  .bab-gallery--admin .bab-shot--a4,
  .bab-gallery--admin .bab-shot--a5,
  .bab-gallery--admin .bab-shot--a6 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .bab-shot-frame:hover {
    transform: none;
  }
}

/* 푸터 */
body.media-portfolio.bab-project-page .backend-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(180, 200, 220, 0.85);
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: clamp(2rem, 5vw, 3rem) 1rem;
}

@media (max-width: 900px) {
  .bab-lead-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.media-portfolio.bab-project-page .info-card:hover,
  body.media-portfolio.bab-project-page .goal-card:hover,
  body.media-portfolio.bab-project-page .shot-card:hover,
  body.media-portfolio.bab-project-page .bab-shot-frame:hover {
    transform: none;
  }
}