@charset "utf-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap);

:root {
  --primary-900:#28343a;
  --primary-700:#334a53;
  --primary-500:#405862;
  --primary-300:#6b7d86;
  --primary-100:#e6ebed;

  --accent-strong:#2f8d62;
  --accent:#4ba47d;
  --accent-soft:#7ec7a5;

  --surface-0:#ffffff;
  --surface-1:#fafafa;
  --surface-2:#f4f6f7;
  --surface-3:#e6ebed;

  --text-strong:#1f2937;
  --text-muted:#6b7280;
  --text-invert:#ffffff;

  --alert:#d64545;
  --warn:#d97706;

  --color-main:#405862;
  --color-sub:#2f8d62;
  --color-emph:#d64545;
  --color-text:#1f2937;
  --color-light-bg:#f9fafb;
  --color-light-bg1:#fcfcfc;
  --color-light-bg2:#f3f4f6;
  --color-light-bg3:#e6ebed;
  --color-light-bd:#d9dee1;
  --color-lighter:#bfc8cc;
  --color-white-bg:#ffffff;
}

/* 오버레이 메시지 공통 스타일 glitter 메시지 style start */
.dev-message-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
  font-family: 'Noto Sans KR', sans-serif;
  z-index: 1000;
}

.message-container {
  text-align: center;
}

.message-text {
  font-size: 32px;
  font-weight: bold;
}

.message-subtext {
  font-size: 20px;
  color: #555;
}

.check-button {
  display: inline-block;
  margin-top: 16px;
  padding: 18px 36px;
  font-size: 24px;
  color: #ffffff;
  background-color: #28a745;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.check-button:hover {
  background-color: #218838;
}

/* @media 쿼리 추가: 화면 너비가 768px 이상일 때 폰트 크기를 70%로 조정 */
@media (max-width: 768px) {
  .message-text {
      font-size: calc(29px * 0.6); /* 약 70% 크기 */
  }
  .message-subtext {
      font-size: calc(24px * 0.7); /* 약 70% 크기 */
  }
  .check-button {
      font-size: calc(30px * 0.9); /* 약 70% 크기 */
  }
}
/* 오버레이 메시지 공통 스타일 glitter 메시지 style end */
.message-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  width: 90%; /* 기본 너비를 조정하여 작은 화면에서도 중앙에 적절히 표시 */
}

@media (max-width: 768px) {
  .message-container {
      width: 90%; /* 태블릿 크기에서 컨테이너 너비 조정 */
      font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  .message-container {
      width: 40%; /* 데스크탑 크기에서 컨테이너 너비 조정 */
      font-size: 1.5rem;
  }
}

.button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.button:hover {
  background-color: #0056b3;
}
/* 메시지를 화면 중앙에 배치하는 스타일 mailer style  end*/


/* ========================= bliking =========== */
@keyframes blink {
  from { opacity: 0; }
  to { opacity: 1; }
}
.blink_200 {
  animation-name: blink;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_250 {
  animation-name: blink;
  animation-duration: 250ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_300 {
  animation-name: blink;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_350  {
 /* color: var(--color-sub); */
  animation-name: blink;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_400 {
  animation-name: blink;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_450 {
  animation-name: blink;
  animation-duration: 450ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_500 {
  animation-name: blink;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_550 {
  animation-name: blink;
  animation-duration: 550ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_600 {
  animation-name: blink;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_650 {
  animation-name: blink;
  animation-duration: 650ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_700 {
  animation-name: blink;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_750 {
  animation-name: blink;
  animation-duration: 750ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_800 {
  animation-name: blink;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_850 {
  animation-name: blink;
  animation-duration: 850ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_900 {
  animation-name: blink;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_950 {
  animation-name: blink;
  animation-duration: 950ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_1500 {
  animation-name: blink ;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c200  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c250  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 250ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c300  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c350  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c400  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c450  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 450ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c500  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c550  {
 /* font-size: 1.2em; */
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 550ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c600  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c650 {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 650ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c700  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c750 {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 750ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c800  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c850 {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 850ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c900  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_c950 {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 950ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--accent);
}
.blink_y850 {
  color: var(--color-yellow);
  animation-name: blink;
  animation-duration: 850ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--warn);
}
.blink_y950 {
  color:  var(--color-yellow);
  animation-name: blink;
  animation-duration: 950ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: var(--warn);
}
/* ================================= blinking end ====== */
.hover-go:hover {
  color: var(--accent);
}
/* ================================ 둥둥 시작 == */
.html-css__thumb {
  position: relative;
}
/* 로고 아래 그림자 */
.html-css__thumb::after {
  content: '';
  position: absolute;
  left: 0;
  height: 10%;
  background-color: black;
  border-radius: 50%;
}
/* 초록색 체크표시 */
.html-css__spec dd::before {
  content: '';
  display: inline-block;
  margin-right: 0.4em;
  width: 12px;
  height: 6px;
  border-left: 4px solid var(--color-sub);
  border-bottom: 4px solid var(--color-sub);
  vertical-align: 0.2em;
  transform: rotate(-45deg);
}
/* 둥둥 오르내리는 효과 */
@keyframes logo-hover {
  from { transform: translateY(0); }
  to { transform: translateY(10px); }
}
.html-css__logo {
  animation-name: logo-hover;
  animation-duration: 800ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* 짙고 옅어지는 애니메이션 */
@keyframes logo-shadow {
  from { opacity: 0.08; }
  to { opacity: 0.24; }
}
.html-css__thumb::after {
  animation-name: logo-shadow;
  animation-duration: 800ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* ================ 둥둥 에니 끝 ==-====== */
#top_btn i {font-size:1.4em}