/* ✅ 나눔고딕 웹폰트 자체 호스팅 */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/font/NanumGothic-Regular.woff2') format('woff2'),
       url('/font/NanumGothic-Regular.woff') format('woff'),
       url('/font/NanumGothic-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/font/NanumGothic-Bold.woff2') format('woff2'),
       url('/font/NanumGothic-Bold.woff') format('woff'),
       url('/font/NanumGothic-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/font/NanumGothic-ExtraBold.woff2') format('woff2'),
       url('/font/NanumGothic-ExtraBold.woff') format('woff'),
       url('/font/NanumGothic-ExtraBold.ttf') format('truetype');
}

/* ✅ 기본 초기화 및 전체 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  background-color: #ffffff;
  color: #333333;
  line-height: 1.6;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* ✅ 전체를 감싸는 테두리 */
.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
}


/* ✅ 다크모드 공통 설정 */
    html.dark body {
      background-color: #121212;
      color: #eee;
    }

    html.dark a {
      color: #3fa4fd;
    }

html.dark .section,
html.dark .icon-grid,
html.dark .icon-item {
  background-color: #1a1a1a;  /* 어두운 배경 */
  color: #eee;                /* 글자색 보장 */
}

/* ✅ 타이틀과 타이틀 뒤 노란배경색 */
.main-title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 25px;
  margin-left: 10px;
  position: relative;
  display: inline-block;
  z-index: 0;
}
.main-title::after {
  content: '';
  position: absolute;
  left: -7.5%;
  right: -7.5%;
  bottom: 1px;
  height: 39%;
  background-color: #21d5ff;
  z-index: -1;
}

/* ✅ 부제목 */
.sub-title-box {
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
  color: #222;
  padding-left: 12px;
  border-left: 6px solid #546382;
}
.sub-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
  color: #222;
}

/* ✅ 일반 텍스트 */
.body-text {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
}
.small-text {
  font-size: 13px;
  color: #777;
  font-weight: normal;
}
.note-center {
  text-align: center;
}
.note {
  font-size: 14px;
  color: #555;
  font-weight: normal;
}

/* ✅ 제목 스타일 통합 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
}
h1 {
  font-size: 24px;
  color: #0c2c78;
  margin-bottom: 20px;
  text-align: center;
}
h2 {
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 16px;
  padding-left: 10px;
  border-bottom: none;
}
h3 { font-size: 18px; }
h4 { font-size: 16px; }

/* ✅ 문단 및 링크 */
p {
  margin-bottom: 1em;
  line-height: 1.7;
}
a {
  color: #007aff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ✅ 목록 */
ul, ol {
  padding-left: 20px;
  margin-bottom: 1em;
}
li {
  margin-bottom: 6px;
}

/* ✅ 표 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}
th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}
th {
  background-color: #f4f4f4;
  font-weight: 600;
}

/* ✅ 이미지 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ✅ 입력 및 버튼 */
input, select, textarea, button {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
}
button {
  cursor: pointer;
  background-color: #007aff;
  color: #fff;
  border: none;
  transition: background-color 0.2s;
}
button:hover {
  background-color: #005fcc;
}

/* ✅ 코드 */
pre, code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background: #f9f9f9;
  padding: 6px;
  border-radius: 4px;
  overflow-x: auto;
}

/* ✅ 다크모드 대응 */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #121212;
    color: #e0e0e0;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
  }
  a {
    color: #4daeff;
  }
  table th {
    background-color: #1e1e1e;
  }
  table th, table td {
    border-color: #444444;
  }
  input, select, textarea {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #444;
  }
  button {
    background-color: #3399ff;
  }
  button:hover {
    background-color: #1e88e5;
  }
  pre, code {
    background-color: #1e1e1e;
    color: #f1f1f1;
  }
}

/* ✅ class 기반 다크모드 적용 (html.dark 사용 시) */
html.dark pre,
html.dark code {
  background-color: #1e1e1e;
  color: #f1f1f1;
}

/* ✅ 유틸리티 클래스 */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* ✅ 쿠팡배너 설정 */
.coupang-banner-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}
.coupang-banner-wrapper iframe,
.coupang-banner-wrapper div {
  max-width: 100% !important;
  height: auto !important;
}

/* ✅ 강조 텍스트 */
strong {
  color: #0c2c78;
}

/* ✅ 링크 리스트 공통 스타일 */
.link-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.link-list li {
  margin-bottom: 10px;
}
.link-list a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background-color: #f9f9f9;
  padding: 10px 14px;
  border-radius: 6px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.link-list a:hover,
.link-list a:focus {
  background-color: #fff9cc;
}
.link-list a:active {
  background-color: #fff176;
  transform: scale(0.97);
}
.link-list span.number {
  font-weight: bold;
  margin-right: 10px;
  color: #546382;
  width: 24px;
  text-align: right;
}
.link-list span.text {
  flex: 1;
}

/* ✅ 다크모드 추가 보완 */
html.dark body {
  background-color: #121212;
  color: #e0e0e0;
}

/* 헤딩 및 타이틀 색상 */
html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark h4, 
html.dark h5, 
html.dark h6 {
  color: #ffffff;
}

html.dark .main-title::after {
  background-color: #0095ff; /* 노란색 대신 밝은 블루톤으로 대비 */
}

html.dark .sub-title-box,
html.dark .sub-title {
  color: #f1f1f1;
  border-left-color: #4daeff; /* 어두운 배경에서 잘 보이는 색상 */
}

/* 작은 텍스트, 노트 */
html.dark .small-text {
  color: #bbbbbb;
}
html.dark .note {
  color: #cccccc;
}

/* 링크 */
html.dark a {
  color: #4daeff;
}
html.dark a:hover {
  color: #82c9ff;
}

/* 강조 텍스트 */
html.dark strong {
  color: #4daeff;
}

/* 표 */
html.dark table th {
  background-color: #1e1e1e;
  color: #f1f1f1;
}
html.dark table td {
  color: #e0e0e0;
  border-color: #444444;
}

/* 링크 리스트 */
html.dark .link-list a {
  background-color: #1c1c1c;
  color: #e0e0e0;
}
html.dark .link-list a:hover,
html.dark .link-list a:focus {
  background-color: #2b2b2b;
}
html.dark .link-list span.number {
  color: #4daeff;
}

/* 입력폼 및 버튼 */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #444;
}
html.dark button {
  background-color: #3399ff;
  color: #fff;
}
html.dark button:hover {
  background-color: #1e88e5;
}

/* ✅ 각 페이지 URL 복사하기 버튼 공통 */
.copy-url-wrapper {
  text-align: center;
  margin: 40px 0;
}

.copy-url-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #032835;
}

.copy-url-msg {
  margin-top: 8px;
  font-size: 13px;
  color: #032835;
  display: none;
}

/* 다크모드 */
html.dark .copy-url-button,
html.dark .copy-url-msg {
  color: #90cdf4;
}