:root {
  /* Figma Design System Colors */
  --Background-Default-Default: white;
  --Border-Default-Default: #d9d9d9;
  --Text-Default-Default: #1e1e1e;
  --Background-Brand-Tertiary: #f5f5f5; /* Light gray for active nav pill bg */
  --Text-Brand-On-Brand-Secondary: #1e1e1e; /* Text color for active nav pill */
  --Background-Neutral-Tertiary: #e3e3e3; /* Neutral button bg */
  --Border-Neutral-Secondary: #767676; /* Neutral button border */
  --Background-Brand-Default: #2c2c2c; /* Primary button bg */
  --Text-Brand-On-Brand: #f5f5f5; /* Text for primary button */
  --Text-Default-Tertiary: #b3b3b3; /* Placeholder text */
  --Icon-Default-Default: #1e1e1e;

  /* Existing variables (some will be overridden or adapted) */
  --font-family-sans: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --background-color: var(--Background-Default-Default); /* Updated */
  --container-background: var(--Background-Default-Default); /* Updated */
  --text-color: var(--Text-Default-Default); /* Updated */
  --secondary-text-color: #525252; /* Slightly darker than default tertiary for secondary info */
  --border-color: var(--Border-Default-Default); /* Updated */
  --accent-color: var(--Background-Brand-Default); /* Using brand default for accent */

  --score-user-color: #dc3545; /* Kept for user score marker */
  --score-average-color: #6c757d; /* More neutral average bar color */
  --table-header-background: var(--Background-Brand-Tertiary); /* Updated */

  /* Figma Based Variables (New or Aliased) */
  --primary-button-bg: var(--Background-Brand-Default);
  --primary-button-text: var(--Text-Brand-On-Brand);
  --neutral-button-bg: var(--Background-Neutral-Tertiary);
  --neutral-button-text: var(--Text-Default-Default);
  --neutral-button-border: var(--Border-Neutral-Secondary);
}

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

body {
  font-family: var(--font-family-sans);
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  font-size: 16px; /* Base font size from Figma */
}

/* report.html specific nav bar - styled to be somewhat similar to new index.html header */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px; /* Reduced padding from Figma header */
  background-color: var(--Background-Default-Default);
  border-bottom: 1px solid var(--Border-Default-Default);
}

.nav-left {
  /* For a potential logo or brand name later */
  font-size: 20px;
  font-weight: 600;
  color: var(--Text-Default-Default);
}
.nav-left a {
  text-decoration: none;
  color: inherit;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px; /* Gap from Figma */
}

.exam-selector-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exam-selector-container label {
  font-size: 14px; /* Smaller label */
  color: var(--secondary-text-color);
}

#examSelector {
  padding: 8px 12px;
  border-radius: 8px; /* Figma border radius */
  border: 1px solid var(--Border-Default-Default);
  background-color: var(--Background-Default-Default);
  color: var(--Text-Default-Default);
  font-family: var(--font-family-sans);
  font-size: 14px;
  min-width: 180px; /* Adjust as needed */
}

#auth-button-container {
  display: flex;
  align-items: center;
  gap: 12px; /* Figma gap */
}

#auth-button-container span {
  /* For user display name */
  font-size: 14px;
  color: var(--secondary-text-color);
}

.auth-button, /* General class for login/logout buttons in report.html */
.consult-button {
  padding: 8px 16px; /* Figma small button padding */
  font-size: 16px; /* Figma button font size */
  font-family: var(--font-family-sans);
  font-weight: 400; /* Figma button font weight */
  border-radius: 8px; /* Figma border radius */
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  line-height: 1; /* Adjusted for better button text centering */
}

/* Styling for the login button in report.html's nav */
#login-button.auth-button {
  background-color: var(--neutral-button-bg);
  color: var(--neutral-button-text);
  border: 1px solid var(--neutral-button-border);
}
#login-button.auth-button:hover {
  background-color: #d1d1d1; /* Slightly darker hover for neutral */
}

/* Styling for the logout button, once it appears */
#logout-button.auth-button {
  background-color: var(--primary-button-bg);
  color: var(--primary-button-text);
  border: 1px solid var(--primary-button-bg);
}
#logout-button.auth-button:hover {
  background-color: #1a1a1a; /* Slightly darker hover for primary */
}

.report-container {
  max-width: 1100px; /* Increased max-width */
  margin: 32px auto; /* Increased margin like Figma header padding */
  background-color: var(--container-background);
  border-radius: 12px; /* Adjusted border radius */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); /* Softer shadow */
  overflow: hidden;
}

.report-header {
  padding: 32px; /* Consistent padding */
  /* border-bottom: 1px solid var(--border-color); */ /* Removed, header has border */
}

.report-header .exam-title {
  font-size: 16px; /* Increased */
  color: var(--secondary-text-color);
  margin-bottom: 8px; /* Increased */
  font-weight: 400;
}

.report-header h1 {
  font-size: 32px; /* Increased */
  font-weight: 600; /* Bold */
  margin-bottom: 0;
  color: var(--text-color);
}

.student-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  padding: 24px 32px;
  background-color: var(--Background-Brand-Tertiary); /* Light gray bg */
  /* border-bottom: 1px solid var(--border-color); */ /* Removed, header has border */
}

.student-info .info-item {
  display: flex;
  flex-direction: column;
}

.student-info .label {
  font-size: 14px; /* Standardized */
  color: var(--secondary-text-color);
  margin-bottom: 4px;
  font-weight: 400;
}

.student-info .value {
  font-size: 16px;
  font-weight: 500; /* Semi-bold */
  color: var(--text-color);
}

.score-section {
  padding: 32px; /* Consistent padding */
}

.score-section h2 {
  font-size: 24px; /* Increased */
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text-color);
}

.score-section h3 {
  font-size: 20px; /* Increased */
  font-weight: 600;
  margin-bottom: 16px;
  margin-top: 32px;
  color: var(--text-color);
}
.score-section h3 .analysis-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--accent-color);
  text-decoration: none;
  margin-left: 8px;
}
.score-section h3 .analysis-link:hover {
  text-decoration: underline;
}

.subject-detail:first-of-type h3 {
  margin-top: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px; /* Standard table font size */
}

table thead {
  /* border-bottom: 1px solid var(--border-color); */ /* Applied to th directly */
}

table th,
table td {
  padding: 12px 10px;
  text-align: center;
  border: 1px solid var(--border-color); /* Add border to all cells */
  vertical-align: middle;
}

table th {
  font-weight: 500; /* Semi-bold headers */
  color: var(--Text-Default-Default); /* Darker text for headers */
  background-color: var(--table-header-background);
  font-size: 14px; /* Standardized */
}

/* Remove complex overall-scores header border rules, covered by general th, td border */
.overall-scores thead tr:first-child th {
  border-bottom: 1px solid var(--border-color); /* Ensure bottom border for merged cells */
}
.overall-scores thead tr:nth-child(2) th {
  border-top: 1px solid var(--border-color); /* Keep this for clarity between header rows */
}

/* table tbody tr:last-child td {
    border-bottom: none; 
} */ /* Removed to have consistent cell borders */

table td:first-child,
table th:first-child {
  text-align: left;
  padding-left: 16px; /* Consistent padding */
}

.my-score {
  font-weight: 600;
  color: var(--accent-color); /* Use main accent color */
}

.my-score.score-warn {
  color: #ffc107; /* Keep warning color */
}
.my-score.score-low {
  color: #dc3545; /* Keep low score color */
}

/* Score bar styles */
.score-bar-container {
  position: relative;
  height: 16px; /* Adjusted height */
  background-color: #e9ecef; /* Light gray background for the track */
  border-radius: 8px; /* Figma radius */
  overflow: hidden;
  min-width: 100px;
}

.score-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 8px;
  transition: width 0.5s ease-in-out;
}

.score-bar.section-weight {
  background-color: var(--Text-Default-Tertiary); /* Lighter gray for weight */
  z-index: 1;
}

.score-bar.average {
  background-color: var(--score-average-color); /* Adjusted average color */
  z-index: 2;
}

.score-marker.user {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px; /* Slightly larger star */
  color: var(--score-user-color); /* Consistent user score color */
  z-index: 3;
  line-height: 1;
  transition: left 0.5s ease-in-out;
}

footer {
  padding: 32px; /* Consistent padding */
  background-color: var(--Background-Brand-Tertiary); /* Light gray footer */
  border-top: 1px solid var(--border-color);
  text-align: center; /* Center consult button */
}

.consult-button-container {
  /* display: flex;
    justify-content: flex-end; */ /* Removed for centering */
}

.consult-button {
  background-color: var(--primary-button-bg);
  color: var(--primary-button-text);
  border: 1px solid var(--primary-button-bg);
  padding: 10px 20px; /* Slightly larger for a CTA */
  font-size: 16px;
}

.consult-button:hover {
  background-color: #1a1a1a; /* Darken primary */
  border-color: #1a1a1a;
}

/* Analysis link in subject headers, already styled above within .score-section h3 */

/* Specific styles for korean_analysis.html tables if they exist (keep general for now) */
.cause-analysis-table th,
.trend-analysis-table th {
  background-color: var(--table-header-background);
}

.cause-analysis-table td,
.trend-analysis-table td {
  /* General td style already applied */
}

.cause-analysis-table select,
.cause-analysis-table input[type="text"] {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--Border-Default-Default);
  background-color: var(--Background-Default-Default);
  color: var(--Text-Default-Default);
  font-family: var(--font-family-sans);
  font-size: 14px;
  width: 100%; /* Make form elements take full cell width */
  margin: 4px 0;
}

/* Keep media queries, adjust specific values if needed after testing */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  .main-nav {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }
  .nav-right {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  #examSelector {
    width: 100%;
  }
  #auth-button-container {
    width: 100%;
    justify-content: space-between;
  }

  .report-container {
    margin: 16px;
    border-radius: 10px;
  }
  .report-header,
  .score-section,
  footer {
    padding: 24px;
  }
  .report-header h1 {
    font-size: 26px;
  }
  .score-section h2 {
    font-size: 20px;
  }
  .score-section h3 {
    font-size: 18px;
  }

  .student-info {
    grid-template-columns: 1fr; /* Stack on smaller screens */
    padding: 16px 24px;
  }

  table th,
  table td {
    padding: 10px 8px;
    font-size: 13px;
  }
  table td:first-child,
  table th:first-child {
    padding-left: 10px;
  }
}

/* Styles for links in #auth-button-container (mypage, 성적입력) */
#auth-button-container .auth-link {
  font-size: 14px;
  color: var(--accent-color);
  text-decoration: none;
  padding: 8px 0; /* Make it more button like if needed */
}
#auth-button-container .auth-link:hover {
  text-decoration: underline;
}

/* Admin badge styling if it exists */
.admin-badge {
  margin-right: 10px;
  background-color: #ff3b30; /* Red */
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* Ensure table cell content doesn't break layout if too long */
table td {
  word-break: break-word; /* Break long words */
}

/* Remove inline styles from HTML where possible and manage via CSS */
/* Example: if #auth-button-container had inline style before, it's now managed by CSS */
/* style.css - Ensure there are no conflicting #auth-button-container styles */
/* #auth-button-container styles from original report.html nav */
/* The .nav-right #auth-button-container is already handled by the general #auth-button-container style */