/* 페이지 범위 한정 */
:root{
  --ink:#111;
  --muted:#666;
}

*{ box-sizing:border-box; }

html { font-size: 18px; }

body {
  margin: 0;
  padding-top: 100px;
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--ink);
  background: #fff;
}

/* 메인 레이아웃 섹션 */
.work-detail {
  padding: 24px 16px 64px;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.work-detail__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr; /* 텍스트 : 이미지 */
  gap: 96px;
  align-items: start;
}

/* 좌측 정보 패널 */
.work-info__back{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:36px; border-radius:10px;
  background:#f2f2f2; color:#333; text-decoration:none;
  font-size:18px; margin-bottom:16px;
  margin-top: -40px;
}
.work-info__back:hover{ background:#e9e9e9; }

.work-info__title{
  font-size:28px; font-weight:800; margin:4px 0 4px;
}
.work-info__subtitle{
  font-size:15px; color:var(--muted); margin:0 0 40px;
}
.work-meta{
  display:grid; gap:10px; margin:18px 0 250px;
}
.work-meta dt{ font-size:12px; color:#8d8d8d; letter-spacing:.2px; }
.work-meta dd{ margin:2px 0 0; font-weight:600; }
.work-meta > div{ display:grid; grid-template-columns:72px 1fr; gap:14px; }

.work-info__h{
  font-size:12px; color:#9a9a9a; letter-spacing:.3px; margin:20px 0 8px;
}
.work-info__keywords{ margin:0 0 16px; font-weight:600; }

.work-info__overview {
  margin: 20px 0 0;
  line-height: 1.85;
  font-size: 1rem;
  color: #333;
}

/* 우측 비주얼 */
.work-visual {
  width: 100%;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

/* A4 비율 유지 + 크기 축소 */
.visual-box {
  position: relative;
  height: 80vh;              /* 화면 높이의 80% */
  aspect-ratio: 210 / 297;   /* A4 세로 비율 */
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(60px);  /* ⬅️ 원하는 만큼 px 조절 */
}

.visual-box img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  /* opacity 전환 효과 제거 */
  transition: none;
}

/* hover 효과 제거 */
.visual-box .img--default { opacity: 1; }
.visual-box .img--hover { display: none; }  /* hover 이미지 완전히 숨김 */

/* 불필요한 hover 전환 코드 삭제 또는 주석 처리 */
/* .visual-box:hover .img--default { opacity: 0; } */
/* .visual-box:hover .img--hover { opacity: 1; } */

/* 반응형 */
@media (max-width: 1024px){
  html { font-size: 16px; }
  .work-detail__inner{
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .work-visual { 
    margin-top: 0;
  }
  .visual-box {
    height: 65vh;  /* 모바일에서는 조금 더 작게 */
  }
  .work-info__title { font-size: 1.6rem; }
}