body {
  display: flex;
  justify-content: center;
  /* Ensure pages can pin footer to viewport bottom even when content is short */
  min-height: 100vh;
  background-color: #DAF0F6;
  font-family: 'Noto Sans', sans-serif;
}

:root {
  /* Assets are injected by `public/scripts/config.js` as CSS variables. */
  --asset-header-bg: none;
  --asset-header-bg-non: none;
  --asset-footer-bg: none;
}

.PageShell {
  display: flex;
  flex-flow: column;
  width: 1230px;
  /* Sticky footer base: let the shell fill the viewport height */
  min-height: 100vh;
  background-color: #ffffff;
}

header {
  transition: all .5s ease;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1230px;
  z-index: 1000;
}

.bg-on {
  background-image: var(--asset-header-bg-non);
  padding: 20px 5px 80px !important;
}

header .Head {
  display: flex;
  justify-content: space-between;
  padding: 20px 5px;
}

header .Head .Logo {
  width: 18%;
}

header .Head .Logo a {}

header .Head .Logo a img {
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

header .Head .Logo:hover img {
  transform: scale(1.01);
  opacity: 0.5;
  filter: brightness(1.1);
}

.holographic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  border-radius: 30px;
  background: #d0c3e8;
  cursor: pointer;
}

.holographic-card {
  height: 45px;
  background: #d0c3e8;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 2px 13px;
  transition: all 0.5s ease;
}

.holographic-card a {
  color: #fff;
  font-size: 0.975rem;
  position: relative;
  z-index: 2;
}

.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(0deg,
      transparent,
      transparent 30%,
      rgba(0, 255, 255, 0.3));
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

/* 메인 */
main {
  background-color: #ffffff;
  padding-bottom: 30px;
}

/* 배너 */
main .MainBanner {}

main .MainBanner a {}

main .MainBanner a img {}

/* 새로운 테스트 리스트 */
main .NewTestList {
  display: flex;
  flex-flow: column;
}

/* 새로운 테스트 리스트 타이틀 */

main .NewTestList .NewTestListTittle {
  display: flex;
  padding: 16px 0 4px;
}

main .NewTestList .NewTestListTittle img {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 8px;
}

main .NewTestList .NewTestListTittle .fire {
  display: block;
  width: 24px;
  height: 24px;
}

main .NewTestList .NewTestListTittle p {
  display: flex;
  align-items: center;
  font-size: 1.0rem;
  font-weight: 700;
}

/* 새로운 테스트 리스트 카드 디자인 */
main .NewTestList .NewTestListShell {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

main .NewTestList .NewTestListShell .NewTestShell {
  width: 22%;
  padding: 16px;
  border-radius: 15px;
  background-color: #ffffff;
  cursor: pointer;
  margin-bottom: 20px
}

main .NewTestList .NewTestListShell .NewTestShell:hover {
  transition: all 0.5s ease;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

main .NewTestList .NewTestListShell .NewTestShell .NewTest {
  background-color: #ffffff;
}

main .NewTestList .NewTestListShell .NewTestShell .NewTest img {
  display: block;
  width: 100%;
  height: 260px;
  background-color: aquamarine;
}

main .NewTestList .NewTestListShell .NewTestShell .NewTest h4 {
  padding: 12px 0 12px;
}

main .NewTestList .NewTestListShell .NewTestShell .NewTest .NewTestHashTag {}

main .NewTestList .NewTestListShell .NewTestShell .NewTest .NewTestHashTag>span {}

.TestMoreBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Morebutton {
  position: relative;
  display: inline-block;
  margin: 20px;
}

.Morebutton a {
  color: #000;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  background-color: #FFD48D;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10px 20px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #FFD48D;
  filter: dropshadow(color=#FFD48D, offx=0px, offy=1px);

  -webkit-box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #E1A860;
  -moz-box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #E1A860;
  box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #E1A860;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.Morebutton a img {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.Morebutton a:active {
  top: 10px;
  background-color: #FFD48D;

  -webkit-box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #E1A860;
  -moz-box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #E1A860;
  box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #E1A860;
}

/* 푸터 시작 */
footer {
  /* Sticky footer: keep footer at the bottom when content is short */
  margin-top: auto;
}

footer ul {
  background-image: var(--asset-footer-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

footer ul li {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

footer ul li a {
  width: 48px;
  height: 48px;
  background-color: #fff;
  text-align: center;
  line-height: 48px;
  font-size: 35px;
  margin: 0 10px;
  display: flex;
  border-radius: 50%;
  position: relative;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 3px solid #fff;
  z-index: 1;
}

footer ul li a .icon {
  position: relative;
  width: 24px;
  height: 24px;
  color: #262626;
  transition: .5s;
  z-index: 3;
}

footer ul li a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}

footer ul li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  transition: .5s;
  z-index: 2;
}

footer ul li a:hover:before {
  top: 0;
}

footer ul li a:nth-child(1):before {
  background: #5851DB;
}

footer ul li a:nth-child(2):before {
  background: #fae100;
}

footer ul li a:nth-child(3):before {
  background: #03C75A;
}

footer ul li a:nth-child(4):before {
  background: #dd4b39;
}

footer .FooterShell {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 0 0 16px;
}

footer .FooterShell p {
  margin-right: 12px;
  color: #9d9d9d;
}

footer .FooterShell p:last-child {
  margin-right: 0px;
}

footer .Copyright {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: #00ffff;
  background-color: #000000;
}

/* 공통CSS */
.HashTag {
  font-size: 0.75rem;
  color: #9d9d9d;
  margin-right: 3px;
}

.HashTag:last-child {
  margin-right: 0px;
}

.Shellheight {
  margin-top: 20px;
}

/* Mobile (<=500px) */
@media (max-width: 900px) {
  body {
    display: block;
  }

  .PageShell {
    width: 100%;
  }

  header {
    padding: 28px 12px 20px;
    background-image: var(--asset-header-bg-non);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
  }

  .fixed-header {
    width: 100%;
    max-width: none;
    left: 0;
    transform: none;
  }

  .bg-on {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
  }

  header .Head {
    padding: 0;
    align-items: center;
  }

  header .Head .Logo {
    width: 22%;
    min-width: 120px;
  }

  header .Head .Logo a img {
    width: 100%;
    max-width: 160px;
  }

  .holographic-container {
    height: 38px;
  }

  .holographic-card {
    height: 38px;
    padding: 2px 10px;
  }

  main {
    padding: 0 0 24px;
  }

  .MainBanner a img {
    width: 100%;
    height: auto;
  }

  main .NewTestList {
    padding: 0 4px;
  }

  main .NewTestList .NewTestListTittle {
    padding: 12px 4px 6px;
    align-items: center;
  }

  main .NewTestList .NewTestListShell {
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  main .NewTestList .NewTestListShell::-webkit-scrollbar {
    display: none;
  }

  main .NewTestList .NewTestListShell .NewTestShell {
    flex: 0 0 72%;
    min-width: 72%;
    padding: 12px;
    margin-bottom: 8px;
  }

  main .NewTestList .NewTestListShell .NewTestShell .NewTest img {
    height: 100%;
  }

  .TestMoreBtn {
    padding: 8px 0 14px;
  }

  .Morebutton a {
    width: 100%;
  }

  footer ul {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 12px 0;
  }

  footer ul li {
    padding: 0;
  }

  footer ul li a {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    margin: 0 4px;
    border: 2px solid #fff;
  }

  footer ul li a .icon {
    width: 12px;
    height: 12px;
  }
}