:root{
  --orange:#fd8e61;
}

body{
  margin:40px;
  font-family: Arial;
  color: #fd8e61;
    background: #f1f1f1;
}

.page-border{
   min-height: calc(100vh - 80px);
   border: 2px solid #fd8e61;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 80px;
  padding-right: 80px;
  box-sizing: border-box;
  position: relative;
}

.corner{
  position:absolute;
  width:28px;
  height:28px;
  background:var(--orange);
}

.corner.tl{top:0;left:0;}
.corner.tr{top:0;right:0;}
.corner.bl{bottom:0;left:0;}
.corner.br{bottom:0;right:0;}

.nav{
  position: static;
  display: flex;
  gap: 18px;
  margin-bottom: 30px;
}

.nav-btn{
  text-decoration: none;
  color: #fd8e61;
  border: 2px solid #fd8e61;
  padding: 10px 15px;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 14px;
  font-family: Arial;
}

.nav-btn:hover{
  background:#fd8e61;
  color:white;
}

.n1-wrap{
  /* 위치 잡기: 기준을 page 안에서 잡고 싶으면 relative가 필요 */
  position: relative;
  margin-top: 30px;
}

.n1-img{
  width: 300px;
  height: auto;
  display: block;
}

.content-wrap{
  width: 70vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

.caption{
   margin-top: 30px;
  color: white;
  font-size: 14px;
  line-height: 1.5;
}

.n-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.n-img{
  width: 100%;
  height: 260px;            /* 고정 높이 (원하면 조절) */
  object-fit: cover;        /* 비율 유지하면서 꽉 채우기 */
  display: block;
  border: 2px solid var(--orange); /* 네 테두리 스타일 맞추기 */
  box-sizing: border-box;
}

@media (max-width: 900px){
  .n-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .n-grid{ grid-template-columns: 1fr; }
}

/* 포스터 이미지 공통 */
.design-page .poster{
  width: 600px;
  height: auto;
  display: block;
}

/* 나중에 개별 미세조정 */
.design-page .top-img-22{ transform: translate(0px, 0px); }
.design-page .top-img-23{ transform: translate(0px, 0px); }

/* 포스터 */
.design-page .poster{
  height:480px;
  width:auto;
  display:block;
}