html {
  /* 색: 흰 배경 + 검은 글씨로 간소화 */
  --page-bg-rgb: 255, 255, 255;
  --accent-bg-rgb: 255, 255, 255;
  --accent-rgb: 17, 17, 17;
  --dark-accent-rgb: 17, 17, 17;
  --body-rgb: 17, 17, 17;
  --dark-flair-rgb: 17, 17, 17;
  --flair-rgb: 17, 17, 17;
  --light-flair-rgb: 90, 90, 90;

  --white-color: #ffffff;
  --neutral-color: #888888;
  --heading-text-color: rgb(var(--accent-rgb));
  --link-text-color: rgb(var(--accent-rgb));
  --glow-color: rgba(0, 0, 0, 0);

  /* 버튼 / 트레이 */
  --btn-text-color: #ffffff;
  --btn-bg-color: #111111;
  --btn-bg-2-color: #111111;
  --btn-hover-color: #333333;

  --tray-bg-color: #ffffff;
  --info-bg-color: #ffffff;
  --dropdown-bg-color: #ffffff;

  /* 폰트: Noto Sans KR 단독 고정 */
  --text-font: "Noto Sans KR", sans-serif;
  --accent-font: var(--text-font);
  --input-font: "Noto Sans KR", sans-serif;
  --answer-font: var(--text-font);
}

@media screen {
  body {
    margin: 0 auto 60px;
    width: min(1100px, 100vw - 32px);
    max-width: 1100px;
    background: none;
    color: rgba(var(--body-rgb), 0.92);
    line-height: 1.6;
    font-size: 16px;
    font-family: var(--text-font);
  }

  main {
    display: block;
    position: relative;
  }

  /* 제목들은 글로우 대신 시험지 느낌의 단단한 텍스트 */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--accent-font);
    text-shadow: none;
    letter-spacing: 0.02em;
    word-spacing: 0.08em;
  }

  h1, h2 {
    margin-top: 1.8rem;
    margin-bottom: 1.8rem;
    line-height: 1.25;
    text-transform: none;  /* 전부 대문자 처리했던 것 제거 */
  }

  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.9rem; }

  /* 공책/노트 한 장처럼 보이는 메인 컨테이너 */
  .content {
    position: relative;
    margin: 28px auto 40px;
    padding: 28px clamp(18px, 4vw, 40px)
             32px clamp(24px, 6vw, 72px);
    border-radius: 18px;
    border: 1px solid #e4dcc5;
    background: #ffffff;
    box-shadow: none;
    }
  }

  /* 버튼: 검정 펜 느낌의 굵은 버튼 */
  .btn,
  .shortcuts .btn,
  form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;    
    height: auto;
    line-height: 1.2;
    font-size: 1.6rem;

    border-radius: 12px;  
    border: 1px solid #d8cfbd;

    background: var(--btn-bg-color);
    color: var(--btn-text-color);
    text-decoration: none;

    font-family: var(--accent-font);
    font-weight: 800;
    text-transform: none;

    cursor: pointer;
  }

  .btn:hover,
  .btn:focus {
    background: var(--btn-hover-color);
    color: var(--btn-text-color);
  }

  /* 홈 화면 What / When / Who 카드들 */
  .info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 16px;
  }

  .info-row > div {
    flex: 1 1 220px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    border: 1px solid #e6dcc7;
    padding: 14px 16px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  }

  .info-row h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4b5563;
  }

  .info-desc {
    font-size: 0.94rem;
    color: #374151;
  }

  .feedback {
    margin-top: 8px;
    font-size: 0.95rem;
  }

  .register .btn {
    margin-top: 4px;
    font-size: 1rem;
  }
}

@media screen and (max-width: 720px) {
  body {
    width: 94vw;
  }

  .content {
    padding-left: 20px;
    padding-right: 18px;
  }

  .content::before,
  .content::after {
    left: 22px;
  }

  .info-row {
    gap: 16px;
  }
}

/* ===== 홈 화면 튜닝 ===== */
@media screen {

  /* 1. 연습장 배경 세로 길이 늘리기 */
  .content{
    /* 기존 padding은 그대로 두고, 최소 높이만 추가 */
    min-height: 720px;  /* 숫자 바꿔가면서 높이 조절하면 됨 (예: 650, 800 등) */
  }

  /* 2. WHAT / WHEN / WHO 텍스트 크게 */
  .info-desc{
    font-size: 1.8rem;   /* 기존 0.94rem → 조금 키움 */
    line-height: 1.7;
  }

  /* 3. Register 버튼 색/모양 커스텀 */
  .register{
    text-align: center;
    margin-top: 22px;
  }

  .register .btn{
    background: #111;              /* 버튼 배경색 */
    color: #fdfaf2 !important;     /* 글자색(연한 아이보리) */
    border: 1px solid #111;
    border-radius: 999px;          /* 알약 모양 */
    padding: 14px 40px;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 5px 14px rgba(0,0,0,.2);
  }

  .register .btn:hover,
  .register .btn:focus{
    background: #222;              /* 호버 시 살짝 밝게 */
    box-shadow: 0 7px 18px rgba(0,0,0,.26);
  }

  .top-tabs a{
    color: #111;                    /* 기본 색상 원하는 값으로 */
  }

  .top-tabs .selected-tab{
    color: #111;
    font-weight: 800;
    border-bottom: 2px solid #111;  /* 선택된 탭 밑줄 느낌 (원하면 삭제 가능) */
  }

  /* 왼쪽 LOGIN / REGISTER 영역도 통일 */
  .top-team-actions a{
    color: #111;
    
  }

  .about-intro{
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #111;
  }

  /* Teams 페이지 표 기본 디자인 (순위 / 팀명 / solves 등) */
  .list-table {
    width: 100%;
    font-size: 1.5rem;           /* 표 전체 글자 크기 */
    border-collapse: collapse;
    margin-top: 1.5rem;
  }

  .list-table th,
  .list-table td {
    padding: 8px 10px;           /* 셀 안 여백 */
    color: #111;                 /* 글자색 */
    font-family: var(--text-font);
    background: transparent;     /* 기본 배경은 투명 */
  }

  /* 헤더 행 (Rank / Team / Solves ...) 스타일 */
  .list-table th {
    background: #f3ecdd;         /* 연한 베이지 */
    color: #111;
    border-bottom: 2px solid #d2c6ac;
    position: sticky;
    top: 0;                      /* 스크롤 시 상단 고정 유지 */
    z-index: 1;
  }

  /* 번갈아 색 넣고 싶으면 (선택사항) */
  .list-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.9);
  }
  .list-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.7);
  }

  /* 현재 팀 하이라이트 색상 */
  .current-team {
    background: #fff3c4 !important;   /* 연한 노랑 */
  }

  .current-team td,
  .current-team th {
    font-weight: 700;
    color: #111;
  }
}

/* ===== 퍼즐 목록: 미궁 배너 ===== */
.puzzle-banner-wrap { max-width: 560px; margin: 2rem auto; }
.puzzle-banner-list { display: flex; flex-direction: column; gap: 60px; align-items: center; }
/* 피더 배너 크기를 메타(도작) 배너와 동일하게 (480px) */
.puzzle-banner-list .puzzle-banner { width: 100%; max-width: 480px; }

.puzzle-banner {
  display: block; text-decoration: none; color: inherit;
  border-radius: 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.puzzle-banner:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.puzzle-banner-img { position: relative; line-height: 0; }
.puzzle-banner-img img {
  width: 100%; height: auto; display: block;
  border: 1px solid #d8cfbd; border-radius: 10px;
}
/* 풀이 완료: 이미지 위 어두운 오버레이 + 정답 */
.puzzle-banner-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.62);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.25s ease;
  opacity: 1;
}
.puzzle-banner-overlay-answer {
  color: #4a2; font-family: var(--answer-font);
  font-size: 3rem; font-weight: 700; letter-spacing: 2px;
  text-align: center; padding: 0 12px;
  text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.9);
}
/* 호버 시 오버레이 사라짐 → 원래 배너 보임 */
.puzzle-banner.solved:hover .puzzle-banner-overlay { opacity: 0; }

.puzzle-banner-meta { text-align: center; padding: 10px 4px 0; }
.puzzle-banner-name { font-size: 2rem; font-weight: 800; line-height: 1.3; color: #111; }
.puzzle-banner-answer {
  font-size: 1.15rem; font-family: var(--answer-font);
  letter-spacing: 1px; color: #1a7f37; font-weight: 700; margin-top: 3px; line-height: 1.3;
}
.puzzle-banner-stats { font-size: 0.95rem; color: #888; margin-top: 2px; line-height: 1.3; }

.puzzle-banner-meta-row {
  display: flex; justify-content: center;
  margin-top: 32px; padding-top: 26px; border-top: 2px dashed #c9bfa8;
}
.puzzle-banner-is-meta { width: 100%; max-width: 480px; }
.puzzle-banner-is-meta .puzzle-banner-name { font-size: 2rem; }

.puzzles-intro {
  text-align: center;
  font-size: 1.8rem;
  color: #000;
  max-width: 1800px;
  margin: 1rem auto 2rem;
  line-height: 1.7;
}