/* ==============================
   JSUOG 2027 Credit CSS
   Soft Poster-Matched Version
============================== */

:root {
  --color-primary: #1F3468;
  --color-primary-soft: #4F70B8;
  --color-secondary: #BFD5F6;
  --color-secondary-light: #EAF2FF;

  --color-bg: #F8FAFD;
  --color-bg-warm: #F7F4EC;

  --color-accent: #C9B97A;

  --color-text: #33415C;
  --color-text-light: #667085;

  --color-white: #FFFFFF;

  --border-soft: rgba(191, 213, 246, 0.75);

  --shadow-soft: 0 8px 24px rgba(31, 52, 104, 0.08);
  --shadow-hover: 0 12px 30px rgba(31, 52, 104, 0.13);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Credit-specific */
  --credit-border: rgba(79, 112, 184, 0.32);
  --credit-header-bg: #EAF2FF;
}

/* ==============================
   Credit Page Base
============================== */

.credit-page {
  min-width: 0;
}

/* ==============================
   Credit Tables
============================== */

.info-table,
.credit-table {
  width: 100%;

  border-collapse: collapse;

  background: var(--color-white);

  font-size: 1rem;

  border: 1px solid var(--credit-border);

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-soft);
}

/* ==============================
   Table Cells
============================== */

.info-table th,
.info-table td,
.credit-table th,
.credit-table td {
  border: 1px solid var(--credit-border);

  padding: 15px 18px;

  vertical-align: middle;

  line-height: 1.8;
}

/* ==============================
   Header Cells
============================== */

.info-table th,
.credit-table th {
  background: linear-gradient(135deg,
      var(--credit-header-bg),
      var(--color-white));

  color: var(--color-primary);

  font-weight: 700;

  width: 180px;

  white-space: nowrap;
}

/* ==============================
   Table Body
============================== */

.info-table td,
.credit-table td {
  color: var(--color-text);
}

.credit-table tbody tr:nth-child(even),
.info-table tbody tr:nth-child(even) {
  background: rgba(234, 242, 255, 0.28);
}

.credit-table tbody tr:hover,
.info-table tbody tr:hover {
  background: rgba(191, 213, 246, 0.18);
}

/* ==============================
   Program Label
============================== */

.credit-table .program-label {
  vertical-align: middle;
  font-weight: 700;
  color: var(--color-primary);
}

/* ==============================
   Lecture Formatting
============================== */

.credit-table .lecture-title {
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-primary);
}

.credit-table .lecture-meta {
  margin-top: 8px;

  font-size: 0.98em;
  line-height: 1.7;

  color: var(--color-text-light);
}

/* ==============================
   Program Table Width
============================== */

.info-table.program-table th {
  width: 220px;
}

/* ==============================
   Wide Section Title
============================== */

.credit-page h2.with-line {
  width: 100%;
  max-width: 1200px;

  margin: 24px auto 14px;
  padding: 14px 22px;

  background: linear-gradient(135deg,
      var(--color-primary),
      var(--color-primary-soft));

  color: var(--color-white);

  border-radius: var(--radius-md);

  border: none;

  font-size: 1.2rem;
  font-weight: 700;

  text-align: left;

  box-shadow: var(--shadow-soft);
}

/* Remove generic underline */

.credit-page h2.with-line::after {
  display: none;
}

/* ==============================
   English Notice Block
============================== */

.credit-page .credit-en-notice {
  max-width: 1200px;

  margin: 40px auto;
  padding: 24px;

  font-size: 1.02rem;
  line-height: 1.9;

  color: var(--color-text);

  background: linear-gradient(135deg,
      var(--color-white),
      var(--color-bg));

  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-soft);
}

.credit-page .credit-en-notice p {
  margin-bottom: 12px;
}

.credit-page .credit-en-notice strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* ==============================
   JP Link Button
============================== */

.credit-page .credit-jp-link {
  margin-top: 34px;
  text-align: center;
  
}

.credit-page .credit-jp-link .btn {
  display: inline-block;

  padding: 0.85rem 1.8rem;

  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;

  color: var(--color-primary);

  background: linear-gradient(135deg,
      var(--color-secondary-light),
      var(--color-white));

  border: 1px solid var(--border-soft);
  border-radius: 999px;

  text-decoration: none;

  box-shadow: var(--shadow-soft);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.credit-page .credit-jp-link .btn:hover {
  color: var(--color-white);

  background: var(--color-primary);

  transform: translateY(-2px);

  box-shadow: var(--shadow-hover);
}

/* ==============================
   Responsive
============================== */

@media (max-width: 768px) {

  .table-wrap {
    overflow-x: auto;
  }

  .info-table {
    min-width: 720px;
  }

  .credit-table {
    min-width: 900px;
  }

  .credit-page h2.with-line {
    width: 94%;

    padding: 12px 18px;

    font-size: 1.08rem;
  }

  .credit-page .credit-en-notice {
    padding: 18px;
  }

  .info-table th,
  .info-table td,
  .credit-table th,
  .credit-table td {
    padding: 12px 14px;
  }
}

@media (max-width: 480px) {

  .credit-page .credit-en-notice {
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .credit-page .credit-jp-link .btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ==============================
   Accessibility
============================== */

@media (prefers-reduced-motion: reduce) {

  .credit-page .credit-jp-link .btn {
    transition: none;
  }
}