/* 폰트는 html에서 preload를 하고 css에서 swap을 설정하는 것이 좋다. */
/* font-display: swap; 폰트 로드 전까지 시스템 폰트로 보여줌 */
/* https://noonnu.cc/font_page/415 */
@font-face {
  font-family: 'ChosunGu';
  src: url('/assets/fonts/ChosunGu.woff2') format('woff2');
  font-display: swap;
}
/* https://noonnu.cc/font_page/342 */
/*
@font-face {
    font-family: 'Cafe24Gowoonbam';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
*/
/*
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2');
    font-display: swap;
}
*/
/* 자주 사용하는 클래스 이름을 정리한다. */
/* tailwind css에서 사용하는 이름을 쓴다. */
/* html에서 쉽게 css를 설정할 수 있도록 한다. */
/* 한자 표시 요소에 적용하는 폰트 클래스 */
.hanja {
  font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

.justify-center {
  /* 가로로 가운데 정렬한다. */
  display: flex;
  justify-content: center;
  align-items: center;
}

.items-center {
  /* 세로로 가운데 정렬한다. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 위에서부터 정렬한다. */
.items-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}


:root {
  /* header의 높이다. */
  --header-height: 5rem;
   /* 숫자는 중요도 순이다. */
  /* #FFCACC : 메인 컬러. 가장 시각적 부담이 적은 분홍색입니다. 메인 버튼이나 강조 아이콘에 적합합니다. */
  /* #FFF5F5 : 배경 컬러. 완전한 흰색보다 훨씬 눈이 편안합니다. 사이트 전체 배경색으로 강력 추천합니다.*/
  /* #E5989B : 포인트 컬러. 1순위보다 약간 차분한 톤으로, 중요 공지사항이나 탭 메뉴의 활성 상태에 사용하세요. */
  /* #B5838D : 텍스트/서브. 제목이나 중요 문구에 사용하세요. 일반 검정색보다 핑크 배경과 훨씬 부드럽게 어우러집니다. */
  --site-color-1: #50c9f5;
  --site-color-2: #65d1f8;
  /* 앱의 기본 너비를 정한다. */
  /* 나중에 전체 너비를 사용하는 경우도 있다. */
  --app-width: 660px;
  /* 폰트 크기는 따로 변수로 만들지 않는다. */
  /* 기본 폰트다. */
  --font-basic: 'ChosunGu';
}

/* 리셋을 한다. */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* 모바일에서 클릭했을 때 파란색 부분이 나오지 않도록 한다.*/
  -webkit-tap-highlight-color: transparent !important;
  image-rendering: -webkit-optimize-contrast; /* Safari */
  image-rendering: crisp-edges; /* Firefox/표준 */
}

/* 이게 없으면 높이가 줄어든다. */
body,
html {
    /* height를 100%로 한다. */
    height: 100%;
    /* 많이 줄어들지 않기 위해서 min-height를 설정한다. */
    /* min-height 값이 너무 크면 모바일에서 아래 공간이 생긴다. */
    min-height: 500px;
    font-family: var(--font-basic);
    /* 폰트를 정한다. */
}

html {
    /* 부드럽게 움직이게 한다. */
    scroll-behavior: smooth;
}

body {
    /* overflow-x를 설정하지 않으면 mobile에서 사이드 메뉴가 옆에서 나왔을 때 아래에 공간이 생긴다. */
    /* overflow-x: hidden; */
    /* 애드센스 앵커 광고가 나올 때 레이아웃이 깨지지 않기 위해서 설정한다. */
    padding: 0 !important;
    max-width: 100%;
    /* 드래그 하지 못하게 한다. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

li {
    /* 앞에 디스크 모양이 나오지 않게 한다. */
    list-style: none;
}

a,
a:hover,
a:visited {
    /* 밑줄이 없도록 한다. */
    text-decoration: none;
    /* 글자색은 검정색으로 정해서 다른 색으로 바뀌지 않도록 한다. */
    color: #000000;
}

button {
    /* 버튼의 테두리를 없앤다. */
    outline: 0;
    background: none;
    border: none;
    /* 버튼은 기본 폰트가 있어서 font-familiy를 정한다. */
    font-family: var(--font-basic);
    /* 버튼 위에서 마우스 모양이 바뀌도록 한다. */
    cursor: pointer;
}
input{
    outline: none; /* 브라우저 기본 외곽선 제거 */
    border: 3px solid var(--site-color-1);
    border-radius: 15px;
}

input,
textarea,
select
{
    /* input와 textarea은 기본 폰트가 있어서 font-familiy를 지정한다. */
    font-family: var(--font-basic);
}
input:focus{
   border-color: #76e8be;
   
}
input::placeholder {
    /* placeholder는 기본 폰트가 있어서 font-familiy를 지정한다. */
    font-family: var(--font-basic);
}

/* main > aside, section, aside 구조다. */
main {
    /* header의 높이만큼 위에 공간을 둔다. */
    margin-top: var(--header-height);
    width: 100%;
    /* svh 브라우저 UI가 최대로 펼쳐졌을 때 보이는 높이 (가장 작음)*/
    /* 최소 높이를 정한다. */
    /* 100vh로 하면 모바일에서 아래가 조금 잘린다. */
    min-height: calc(100svh - var(--header-height));
    display: flex;
}

/* section 나머지 공간을 사용한다. */
aside {
    flex: 1;
}

section{
    width: var(--app-width);
    /* 가운데 정렬한다. */
    margin: 0 auto;
    /* 최소 높이는 각각의 페이지에서 설정한다. */
    /* 최소 높이를 정한다. */
    /* min-height: calc(100vh - var(--header-height)); */
}

#page-title{
  font-size: 24px;
  font-weight: bold;
  padding: 15px;
  text-align: center;
  word-break: keep-all;
}

/* 사이드바 광고가 보이지 않도록 정한다. */
@media screen and (max-width: 660px) {
 :root{
    --app-width: 100%;
 }   
}
/* 광고 위치를 정할 때 사용한다. */
/* sticky가 되려면 부모의 display가 flex이면 안 된다. */
/* div 태그를 하나 더 만들고 그 안에 광고를 넣는다. */
/* 화면 가운데에 고정한다. */
.sticky-center {
  position: sticky;
  /* 화면의 1/2에서 400px을 빼고 40px를 더한다. */
  /* 원래는 300px를 뺐다. 광고 크기가 따라서 빼는 값을 다르게 한다. */
  /* 빼는 값이 크면 광고가 위로 올라간다. */
  top: calc(50vh - 400px + 40px);
}

/* 위쪽에 고정한다. */
.sticky-top {
  position: sticky;
  /* header 높이에서 값을 더한다. */
  top: calc(var(--header-height) + 20px);
}

.adsbygoogle {
  z-index: 1 !important;
  overflow: hidden;
  /* 광고 로드 전 레이아웃 흔들림 방지 (CLS 개선) */
  display: block;
}

/* 앵커 광고 */
.adsbygoogle-noablate {
  z-index: 10 !important;
}

/* 광고 박스 */
.ad-box
{
  position: relative;
  padding: 20px 0px;
  width: 100%;
}

/* 광고 크기가 고정된 것이다. */
.ad-box.fixed
{
  position: relative;
  padding: 35px 0px 10px;
  width: fit-content;
  margin: 0 auto;
}

/* 닫기 버튼 */
.ad-close-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #171515;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

@media (hover: hover) {
  .ad-close-btn:hover {
    background: #000;
  }
}

/* X 클릭 시 — 공간은 차지하고 내용만 숨김 */
.ad-box.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 본문 반응형 광고 */
.responsive-ad {
  display: block;
  width: 100%;
  min-height: 300px;
  margin: 15px 0;
}

/* 모바일에서 min-height 축소 */
@media screen and (max-width: 480px) {
  .responsive-ad {
    width: 98%;
    min-height: 100px;
  }
}
/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    background: var(--site-color-1);    
    height: var(--header-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-inner {
  width: var(--app-width);
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
}

.logo a {
  display: flex;
  align-items: center;
}

#logo-img {
  height: 50px;
  width: auto;
  display: block;
  border-radius: 10px;
}

#site-name{
  font-size: 24px;
  color: #1a1a1a;
}
/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  padding: 4px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
}

.bar {
  display: block;
  width: 30px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger.open .bar1 { transform: translateY(7px) rotate(45deg); }
.hamburger.open .bar2 { opacity: 0; width: 0; }
.hamburger.open .bar3 { transform: translateY(-7px) rotate(-45deg); }

/* Side Nav */
#side-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 100vw);
  height: 100%;
  background: #fff;
  z-index: 300;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 40px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 페이지 로드 시 transition 비활성화 */
#side-nav.preload {
  transition: none;
}

#side-nav.open {
  transform: translateX(0);
  visibility: visible;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;  
  position: sticky;
  padding: 15px;
  top: 0;
  background: #fff;
  z-index: 1;
}

.nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  color: var(--color-text, #1a1a1a);
  transition: background-color 0.18s, color 0.18s;
}

@media (hover: hover) {
  .nav-close:hover {
    background: var(--site-color-2);
  }
}

.nav-list {
  list-style: none;
  margin: 0;
  padding-bottom: 20px;
}

.nav-list > li {
  opacity: 1;
  transform: none;
  /* transform: translateX(-20px); */
}

/* 딜레이를 주지 않는다. */
/*
#side-nav.open .nav-list > li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
#side-nav.open .nav-list > li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.10s; }
#side-nav.open .nav-list > li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.15s; }
#side-nav.open .nav-list > li:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.20s; }
*/

.nav-link {
  display: block;
  padding: 15px;
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

@media (hover: hover) {
  .nav-link:hover {
    background: var(--site-color-2);
  }
}

.header-ad{
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

/* 880px를 mobile 기준값으로 정했다. */
@media screen and (max-width: 880px) {
  header {
      width: 100%;
  }
  .header-inner {
    padding: 0 15px;
  }  
}
#site-footer {
  width: 100%;
  padding: 40px 20px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--site-color-1);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 10px;
}

#site-footer ul{  
  margin-bottom: 10px;
}

#site-footer ul li{
  list-style: circle;
  font-size: 20px;
  padding-bottom: 7px;
}

/* 저작권 */
#copyright p {
  font-size: 22px;
  text-align: center;
}

/* 880px를 mobile 기준값으로 정했다. */
@media screen and (max-width: 880px) {
  #site-footer {
    width: 100%;
  }
}