/* basic reset */
* { box-sizing: border-box; }
body{
  margin:0;
  font-family: Arial, system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background:#f6f0e4;
  color:#3b2a22;
}

/* 전체 래퍼 */
.container{
  width: 980px;
  margin: 20px auto 60px;
  display:flex;
  gap: 18px;
}

/* 좌/우 컬럼 */
.left{ width: 340px; }
.right{ flex:1; }

/* 공통 박스 스타일 */
.note, .side, .main, .nav, .content{
  background:#fff9ef;
  border: 2px solid #6a4a3a;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

/* 상단 타이틀 영역 */
.imgbox{
  margin-bottom: 12px;
}
.img{
  height: 180px;
  border-radius: 18px;
  border: 2px solid #6a4a3a;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)),
              url("header.png");
  background-size: cover;
  background-position: center;
  position: relative;
  overflow:hidden;
}
.img h1{
  position:absolute;
  left:16px;
  bottom:10px;
  margin:0;
  font-size: 34px;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(255,255,255,0.7);
}

/* 좌측 박스 간격 */
.note{ margin-bottom: 12px; position: relative; }
.side{ margin-bottom: 12px; }

/* note 내부 텍스트 */
.notecontent h2{
  margin: 8px 0 6px;
  font-size: 18px;
}
.notecontent p{
  margin: 8px 0;
  line-height: 1.45;
}

/* 오른쪽 메인: content + nav를 나란히 */
.main{
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.main .content, .main .nav{
  display:inline-block;
  vertical-align: top;
}
.main .content{
  width: calc(100% - 290px);
  margin-right: 12px;
}
.main .nav{
  width: 270px;
}

/* content 텍스트 */
.content p{ line-height: 1.55; }
.content img{ max-width: 100%; }

/* nav 박스 */
.navcontent h2{
  margin: 6px 0 10px;
  font-size: 18px;
}
.nav iframe{
  background:#fff;
  border-radius: 10px;
}

/* 페이지 하단 장식 이미지 */
.thinking{
  position: fixed;
  right: 18px;
  bottom: 12px;
  opacity: 0.95;
}

/* 모바일은 이 레이아웃이 깨질 수 있음 */
@media (max-width: 1020px){
  .container{ width: 94%; flex-direction: column; }
  .left{ width: 100%; }
  .main .content, .main .nav{ width: 100%; margin-right: 0; }
  .thinking{ position: static; margin-top: 12px; text-align:right; }
}