/* ===== 전체 레이아웃 ===== */
body {
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
    background-color: #f5f5f5; /* 연한 회색 배경 */
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

/* ===== 헤더 ===== */
header {
    background: linear-gradient(135deg, #2c3e50, #34495e); /* 진지한 톤의 그라데이션 */
    color: white;
    text-align: center;
    padding: 10px 10px;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
header a {
    color:white;
}

/* 메인 영역을 좌/우 분할 */
.site-main {
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 10px auto;
  padding: 20px;
}

/* 본문 영역 */
.content-area {
  flex: 1;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 오른쪽 사이드바 */
.sidebar {
  width: 280px;   /* 사이드바 고정 폭 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ===== 헤더 전체 ===== */
.site-header {
  text-align: center;
  padding: 40px 20px;
  background: #f5f5f5;              /* 은은한 회색 배경 */
  border-bottom: 1px solid #ddd;    /* 구분선 */
}

/* ===== 사이트 타이틀 ===== */
.site-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0;
}

.site-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: #ff6f61; /* 포인트 컬러 */
    margin: 1px auto 0 auto;
    border-radius: 2px;
}

.site-title a {
  text-decoration: none;
  color: #2c3e50;
}

/* ===== 태그라인 ===== */
.site-tagline {
  font-size: 1rem;
  color: #666;
  margin: 8px 0 20px;
}

/* ===== 네비게이션 (PC 기본) ===== */
.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;              /* 가로 정렬 */
  justify-content: center;
  gap: 30px;
}

.site-nav a {
  text-decoration: none;
  color: #2c3e50;
  font-weight: 600;
  font-size: 1rem;
  padding: 8px 12px;
  border-bottom: 2px solid #ddd;   /* 기본 얇은 밑줄 */
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  border-radius: 4px;
}

.site-nav a:hover {
  color: #ff6f61;
  border-bottom: 2px solid #ff6f61;
  background: rgba(255,111,97,0.08); /* 은은한 배경 강조 */
}

/* ===== 모바일 (768px 이하) ===== */
@media (max-width: 768px) {
  .site-nav ul {
    flex-direction: column;    /* 세로 정렬 */
    align-items: stretch;      /* 전체 너비 사용 */
    gap: 0;                    /* 간격 제거 */
  }

  .site-nav li {
    width: 100%;
  }

  .site-nav a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    padding: 12px;
    border-bottom: 1px solid #ddd; /* 리스트 구분선 */
    border-radius: 0;              /* 네모 형태로 */
  }

  .site-nav a:hover {
    background: rgba(255,111,97,0.12); /* 터치 시 강조 */
  }
}


/* ===== 검색창 ===== */
.site-search {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.site-search input {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
  width: 220px;
  transition: border 0.3s;
}

.site-search input:focus {
  border: 1px solid #ff6f61;
}

.site-search button {
  padding: 10px 18px;
  border: none;
  background: #ff6f61;
  color: #fff;
  font-weight: 600;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.site-search button:hover {
  background: #e05550;
}



/* ===== 메인 컨테이너 ===== */
main {
    max-width: 820px;
    margin: 60px auto;
    background-color: #fff; /* 본문 흰색 박스 */
    padding: 50px 40px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* ===== 본문 컨테이너 ===== */
.main-content {
    max-width: 820px;
    margin: auto;
}

/* ===== 제목 (h1, h2) ===== */
.main-content h1 {
    font-size: 1.5rem;          /* 기본보다 약간 크게 */
    font-weight: 700;
    color: #222;

    border-bottom: 2px solid #ff6f61;  /* 밑줄 포인트 */
}

.main-content h2 {
    font-size: 1.2rem;          /* h1보다 살짝 작게 */
    font-weight: 600;
    color: #333;
    border-left: 4px solid #ff6f61;    /* 왼쪽 강조선 */
    padding-left: 8px;
}

/* ===== 본문 내용 (p) ===== */
.main-content p {
    font-size: 1rem;            /* 거의 기본 크기 */
    margin-bottom: 14px;
    color: #444;
    background: #fafafa;        /* 살짝 회색 배경 */
    padding: 10px 16px;
    border-radius: 6px;
}


/* ===== 푸터 ===== */
footer {
    background: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 25px 20px;
    font-size: 0.95rem;
    margin-top: 60px;
    border-radius: 12px 12px 0 0;
}



/* 배너 컨테이너 */
.banner {
  background: url("gogo.gif") no-repeat center center;
  background-size: cover;       /* 반응형 배경 */
  width: 100%;
  height: 250px;                /* 기본 높이 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  color: white;
}

/* 어두운 오버레이 (가독성 보강 + 그라데이션) */
.banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.35)
  );
}

/* 배너 안 텍스트 */
.banner-content {
  position: relative;
  z-index: 1;
  max-width: 90%;
  text-align: center;
  animation: fadeInUp 0.8s ease;
}

.banner-content h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.banner-content p {
  font-size: 1.1rem;
  margin-bottom: 18px;
  color: #f1f1f1;
}

/* 버튼 */
.banner-btn {
  display: inline-block;
  padding: 14px 28px;
  background: linear-gradient(45deg, #ff5722, #ff9100);
  color: white;
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 버튼 hover 효과 */
.banner-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  background: linear-gradient(45deg, #ff9100, #ff5722);
}

/* 버튼 클릭시 */
.banner-btn:active {
  transform: scale(0.96);
}

/* 등장 애니메이션 */
@keyframes fadeInUp {
  0% {opacity: 0; transform: translateY(20px);}
  100% {opacity: 1; transform: translateY(0);}
}


/* 모바일 대응 */
@media (max-width: 600px) {
  .banner {
    height: 160px;
    padding: 10px;
  }

  .banner-content h2 {
    font-size: 1.2rem;
  }

  .banner-content p {
    font-size: 0.9rem;
  }

  .banner-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}


/* ===== 커스텀 리스트 ===== */
.custom-list {
    list-style: none;
    padding: 0;
    margin: 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2열 배치 */
    gap: 16px;
}

.custom-list li {
    background: #ffffff;
    border-left: 6px solid #ff6f61;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-list li:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.custom-list li a {
    display: block;
    padding: 14px 18px;
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.2s ease;
}

.custom-list li a:hover {
    color: #ff6f61;
}


/* ===== 이미지 갤러리 ===== */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.image-gallery img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* ===== 블로그 검색 결과 ===== */
h3 {
  font-size: 1.2rem;
  margin: 20px 0 10px;
  font-weight: 700;
  border-left: 5px solid #ff6f61;
  padding-left: 10px;
  color: #333;
}

h3 a {
  text-decoration: none;
  color: #222;
  transition: color 0.2s;
}

h3 a:hover {
  color: #ff6f61;
}

/* PC용 배너 */
.coupang-pc-banner iframe {
    width: 250px;
    height: 1100px;
    border: none;
}

/* 모바일용 배너 */
.coupang-mobile-banner {
    display: none; /* 기본은 숨김 */
    text-align: center;
    margin: 20px 0;
}

.coupang-mobile-banner iframe {
    width: 360px;
    height: 120px;
    max-width: 100%;
    border: none;
}

/* 반응형: 모바일에서는 PC용 사이드바 숨기고 모바일용 배너 보이기 */
@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .coupang-mobile-banner {
        display: block;
    }
}