/* ============ Portfolio A3 (scoped) ============ */
.portfolio-a3{
  --bg:#e7e7eb;
  --ink:#0b0b0b;
  --text:#1a1d21;
  --muted:#6a7077;

  position: relative;
  background: var(--bg);
  margin: 0;
  overflow: hidden;            
  margin-bottom: 30px;      
}

/* 내부 랩 - 좌우 풀블리드 */
.portfolio-a3 .wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 20px;
  position: relative;
  z-index: 2;                   
  padding-left: 0;
  padding-right: 0;
}

/* 고정 비율 배경 스테이지 */
.portfolio-a3 .bg-stage{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
}
.portfolio-a3 .bg-stage::before{
  content:"";
  aspect-ratio: 3/5;
  width: 100vw;           
  max-height: 100%;
  display: block;
}
.portfolio-a3 .bg-stage>img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 레이아웃 */
.portfolio-a3 .row{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 40px;
  margin: 64px 0;
}
.portfolio-a3 .row.alt{ grid-template-columns: 1fr 1.05fr; }

.portfolio-a3 .a3{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 297/420;
  background: var(--ink);
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  overflow: hidden;
}
.portfolio-a3 .a3>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-a3 .title{
  font-size: clamp(28px,4.5vw,48px);
  letter-spacing: .4px;
  font-weight: 800;
  margin: 0 0 18px;
}
.portfolio-a3 .meta strong{
  display: block;
  font-size: 18px;
  margin: 0 0 6px;
}
.portfolio-a3 .meta p{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

/* 반응형 */
@media (max-width:980px){
  .portfolio-a3 .row,
  .portfolio-a3 .row.alt{ grid-template-columns: 1fr; }
  .portfolio-a3 .row.alt .copy{ order:1; }
  .portfolio-a3 .row.alt .fig{ order:2; }
  .portfolio-a3 .a3{ max-width:560px; }
}

/* 섹션 래퍼 풀블리드 */
.container.section-title{
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* hero/footer 여백 정리 */
.hero{ margin-bottom: 0; }
footer, .footer{
  margin-top: 0;
  margin-bottom: 30px;
  padding-bottom: 0;
}

/* hero → portfolio 전환 그라데이션 */
.portfolio-a3::before{
  content:"";
  position: absolute;
  left:0; right:0; top:0;
  height: 260px;                    /* 길이 조절 가능 */
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 90%);
}

/* ============ Top Button ============ */
/* 기본은 '보임'. 맨 위에 있을 때(body.is-top)만 숨김 */
.btn-top{
  position: fixed;                  /* 뷰포트 기준 */
  right: 40px;
  bottom: 40px;
  z-index: 10000;                   /* 충분히 높게 */
  width: 70px;
  height: 70px;
  display: block;
  cursor: pointer;

  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
}
.btn-top img{
  width: 100%;
  height: auto;
  display: block;
}
.btn-top:hover{
  opacity: .85;
  transform: translateY(-5px);
}

/* 화면이 '맨 위'일 때만 숨김 */
body.is-top .btn-top{
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

/* 글로벌 정리 */
html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  scroll-behavior: smooth; /* 클릭시 부드러운 스크롤 (JS 없이도 동작) */
}

@media (max-width:980px){
  .container.section-title{ padding:0; }
  .portfolio-a3 .wrap{ padding-left:0; padding-right:0; }
}

/* 개별 위치 조정 */
.left-shift {
  transform: translateX(-40px); /* 왼쪽으로 20px 이동 */
}

/* 개별 오른쪽 밀기 */
.portfolio-a3 .shift-right-title {
  margin-inline-start: 130px; /* = LTR일 땐 margin-left */
}

/* strong만 오른쪽으로 (한 줄 고정 + 말줄임) */
.portfolio-a3 .copy .meta strong.shift-right-strong {
  display: inline-block;      /* block 제거 → 한 줄에서 동작 */
  margin-left: 180px;         /* 오른쪽으로 밀기 */
  white-space: nowrap;        /* 줄바꿈 금지 */
  overflow: hidden;           /* 넘치면 숨김 */
  text-overflow: ellipsis;    /* 말줄임표 */
  max-width: calc(100% - 180px); /* 밀린 만큼 남은 폭에서 한 줄 유지 */
  vertical-align: middle;
}

/* QR 코드 스타일 */
.portfolio-a3 .meta .qr-video {
  display: block;
  width: 100px;        /* 필요시 크기 조정 */
  margin-top: 20px;    /* 본문과 간격 */
  margin-left: 0;      /* 정렬: 0은 왼쪽 정렬 */
  border-radius: 8px;  /* 살짝 둥글게 (선택사항) */
}

/* 모바일에서는 원위치 (원하면 삭제 가능) */
@media (max-width:980px){
  .portfolio-a3 .copy .title.shift-right-title,
  .portfolio-a3 .copy .meta .shift-right-strong {
    margin-left: 0;
  }
}

.portfolio-a3 .title,
.portfolio-a3 .meta strong {
  color: #000 !important;
}