@font-face {
  font-family: '고마운글꼴';
  src: url('../fonts/DungGeunMo.woff2') format('woff2'),
       url('../fonts/DungGeunMo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 기본 설정 */

:root {
  --jisang-navy: #335285;
  --rei-ultramarine: #4670B4;
  --jayeon-lavender: #C0AAE6;
  --girl14-lilac: #996AE4;
  --anima-carmine: #F8757A;
  --dohwa-green: #ACF0AF;

  --jisang-red: #F92F39;
  --jisang-orange: #FFAA43;
  --jisang-yellow: #FFDF34;
  --jisang-green: #42DB48;
  --jisang-blue: #588CE0;
  --jisang-violet: #6C25DF;
  
  --jisang-white: #EFEFEF;
  --jisang-black: #333333;

  --jisang-classic-grey: #868686;
  --jisang-grey: #6B6B6B;
  --jisang-dark-grey: #4E4E4E;

  --jisang-dark-silver: #9C9C9C;
  --jisang-silver: #B7B7B7;
  --jisang-classic-silver: #D4D4D4;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 툴바 및 메뉴 */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: var(--jisang-navy);
  color: var(--jisang-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 100;
}

.logo a {
  color: var(--jisang-white);
  text-decoration: none;
  font-weight: bold;
}

.logo a:hover {
  text-decoration: none;
}

.logo {
  font-weight: bold;
}

.menu a {
  color: var(--jisang-white);
  text-decoration: none;
  margin-left: 20px;
  font-weight: bold;
}

.menu a:hover {
  text-decoration: none;
}

.menu {
  display: flex;
}

/* 큰 콘텐츠 */

.content {
  padding: 20px 20px 40px 20px;
  line-height: 1.6;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow-x: hidden;
}

body {
  font-family: '고마운글꼴', sans-serif;
  background-color: var(--jisang-black);
  color: var(--jisang-white);
  padding: 20px;
}

hr {
  border: none;
  border-top: 2px solid #EFEFEF;
  margin: 0.8rem auto;
  width: 100%
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 10vh;
  padding: 1rem;
  background-color: var(--jisang-classic-silver);

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow-x: hidden;
}

header {
  background-color: var(--jisang-white);
  padding: 20px;
  text-align: center;
  color: var(--jisang-black);
}

footer {
  margin-top: 3.6rem;
  background-color: var(--jisang-black);
  padding: 20px;
  text-align: left;
  font-size: 0.5rem;
}

/* 작은 콘텐츠 */

.double-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 10vh;
  padding: 0 1rem 1rem 1rem;
  background-color: var(--jisang-classic-silver);

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow-x: hidden;
}

.submain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 10vh;
  padding: 1rem;
  background-color: var(--jisang-classic-silver);
  
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 0.8rem 0.8rem 0.2rem 0.8rem;
}

.box {
  flex: 1;
  aspect-ratio: 6 / 2;
  padding: 40px;
  color: var(--jisang-white);
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  border-radius: 8px;
}

.box a {
  color: var(--jisang-white);
  text-decoration: none;
  font-weight: bold;
}

/* 기본 배경 */

.anima {
  background-color: var(--anima-carmine);
}

.girl14 {
  background-color: var(--girl14-lilac);
}

.rei {
  background-color: var(--rei-ultramarine);
}

.jayeon {
  background-color: var(--jayeon-lavender);
}

.dohwa {
  background-color: var(--dohwa-green);
}

.jisang-background {
  background-color: var(--jisang-navy);
}

/* 특수 배경 */

.warning {
      background-color: var(--jisang-red);
}

.caution {
      background-color: var(--jisang-green);
}

.seven {
  background-color: var(--jisang-violet);
}

.page404 {
  background-color: var(--jisang-classic-grey);
}

/* 기타 배경 */

.jisang-orange {
  background-color: var(--jisang-orange);
}

.jisang-yellow {
  background-color: var(--jisang-yellow);
}

.jisang-blue {
  background-color: var(--jisang-blue);
}

.jisang-white {
  background-color: var(--jisang-white);
}

.jisang-black {
  background-color: var(--jisang-black);
}

.jisang-grey {
  background-color: var(--jisang-grey);
}

.jisang-dark-grey {
  background-color: var(--jisang-dark-grey);
}

.jisang-dark-silver {
  background-color: var(--jisang-dark-silver);
}

.jisang-silver {
  background-color: var(--jisang-silver);
}

.jisang-classic-silver {
  background-color: var(--jisang-classic-silver);
}

/* 기본 글자 */

h1 {
  font-size: 1.8rem;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.2rem;
}

p {
  font-size: 1rem;
  line-height: 1.6;
}

/* 특수 글자 */

.highlight {
  color: var(--jisang-yellow);
  font-weight: bold;
}

.highlight-in-light {
  color: var(--jisang-orange);
  font-weight: bold;
}

.lowlight {
  color: var(--jisang-black);
}

.jisang {
  color: var(--jisang-navy);
  font-weight: bold;
}

.init {
  color: var(--jisang-white);
}

a {
  color: var(--jisang-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* 디바이스 */

.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  body {
    padding: 10px;
  }
  .content {
    padding: 10px 10px 20px 10px;
    margin-top: 30px;
  }
  main {
    padding: 0.5rem;
  }
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
  header {
    padding: 10px;
  }
  footer {
    padding: 10px;
  }
  .navbar {
    padding: 0 15px;
  }
}

/* 리스트 및 테이블 */

ul {
  margin-left: 20px;
  margin-top: 10px;
}

.double-ul {
  margin-top: 0px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid var(--jisang-classic-grey);
  padding: 8px;
  text-align: left;
  color: var(--jisang-black);
  background-color: var(--jisang-white);
}

th {
  text-align: center;
  color: var(--jisang-white);
  background-color: var(--jisang-black);
}

/* 폼 및 버튼 */

input, textarea {
  padding: 10px;
  width: 50rem;
  margin: 5px;
  font-size: 1rem;

  width: 100%;
  max-width: 50rem;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow-x: hidden;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
}

.half {
  width: 25rem;
}

/* 탭 */

.tab-buttons button {
  margin-top: 5px;
  margin-right: 1px;
}

.tab-buttons-half button {
  margin-top: 3px;
  margin-right: 1px;
  height: 50%;
  padding: 5px 10px;
  font-size: 0.5em;  
}

.tab-content, .outer-content, .inner-content {
  display: none;
  margin-top: 16px;
  white-space: nowrap;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow-x: hidden;
}

.outer-content.active, .inner-content.active {
  display: block;
}

.active {
  display: block;
}