@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

  :root {
    --primary: #02583D;
    --primary-light: #e7f4ef;
    --bg: #f6f8f7;
    --text: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: Pretendard, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    padding: 16px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
  }

  .logo-mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    overflow: hidden;
    flex-shrink: 0;
  }

  .logo-image-mark {
    background: white;
    border: 1px solid rgba(2,88,61,.16);
    box-shadow: 0 8px 20px rgba(2,88,61,.08);
  }

  .logo-image-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 5px;
  }

  .logo {
    font-weight: 900;
    font-size: 18px;
    line-height: 1.22;
    margin-bottom: 4px;
  }

  .logo-sub {
    font-size: 12px;
    line-height: 1.25;
    color: var(--muted);
  }

  .main-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .main-nav button,
  .tab-btn {
    border: 1px solid transparent;
    background: transparent;
    padding: 11px 15px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    font-family: Pretendard, Arial, sans-serif;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
  }

  .main-nav button:hover,
  .tab-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    transform: translateY(-5px);
    border-color: rgba(2,88,61,.34);
    box-shadow: 0 20px 42px rgba(2,88,61,.12);
  }

  .main-nav button.active,
  .tab-btn.active {
    background: var(--primary);
    color: white;
  }

  .main-nav button.active:hover,
  .tab-btn.active:hover {
    color: white;
    background: var(--primary);
  }

  .page {
    display: none;
    max-width: 1180px;
    margin: 0 auto;
    padding: 50px 20px;
  }

  .page.active {
    display: block;
  }

  .home-section {
    max-width: none;
    padding: 0;
  }

  .home-hero {
    min-height: calc(100vh - 78px);
    background-image:
      linear-gradient(135deg, rgba(0,0,0,.68), rgba(2,88,61,.58)),
      url('https://drive.google.com/thumbnail?id=1kUW_2txE5-BASYWT8JeilsXD39e4JLdt&sz=w2000');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    color: white;
    text-align: center;
    position: relative;
    transition: background-image .45s ease-in-out;
  }



  .home-slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    color: white;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(8px);
    transition: background .2s ease, transform .2s ease;
  }

  .home-slide-arrow:hover {
    background: rgba(255,255,255,.22);
    transform: translateY(-50%) scale(1.04);
  }

  .home-slide-prev {
    left: 28px;
  }

  .home-slide-next {
    right: 28px;
  }

  .home-slide-dots {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    z-index: 3;
  }

  .home-slide-dot {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    padding: 0;
    transition: width .2s ease, background .2s ease;
  }

  .home-slide-dot.active {
    width: 28px;
    background: white;
  }

  .home-hero-inner {
    max-width: 980px;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 22px;
  }

  .home-hero h1 {
    margin: 0;
    font-size: clamp(44px, 7vw, 92px);
    line-height: 1.02;
    letter-spacing: -0.06em;
    font-weight: 950;
  }

  .home-hero p {
    margin: 26px auto 0;
    max-width: 780px;
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.55;
    font-weight: 700;
    color: rgba(255,255,255,.9);
  }

  .home-actions {
    margin-top: 38px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .home-actions button {
    border: 0;
    border-radius: 999px;
    padding: 15px 24px;
    font-family: Pretendard, Arial, sans-serif;
    font-weight: 900;
    cursor: pointer;
  }

  .white-btn {
    background: white;
    color: #111827;
  }

  .glass-btn {
    background: rgba(255,255,255,.14);
    color: white;
    border: 1px solid rgba(255,255,255,.38);
  }

  .business-title {
    margin-bottom: 22px;
  }

  .business-title h1 {
    margin: 0 0 10px;
    font-size: 38px;
    letter-spacing: -0.04em;
  }

  .business-title p {
    color: var(--muted);
    line-height: 1.8;
    margin: 0;
  }

  .business-hero-card {
    border-radius: 30px;
    padding: 36px;
    background: linear-gradient(135deg, #f8fffc, #ecf7f3);
    border: 1px solid #d8eee5;
    margin-bottom: 20px;
  }

  .business-hero-card h2 {
    margin: 0 0 12px;
    font-size: 30px;
    letter-spacing: -0.04em;
    color: var(--primary);
  }

  .business-hero-card p {
    line-height: 1.8;
    margin: 8px 0;
  }

  .hero {
    color: white;
    border-radius: 32px;
    padding: 72px 52px;
    margin-bottom: 28px;
    background: linear-gradient(135deg, rgba(2,88,61,.92), rgba(1,65,45,.78));
  }

  .hero h1 {
    margin: 0 0 16px;
    font-size: 46px;
    line-height: 1.2;
  }

  .hero p {
    max-width: 760px;
    line-height: 1.8;
    font-size: 18px;
  }

  .card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
  }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
  }

  .tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 24px;
    background: #eef3f0;
    padding: 8px;
    border-radius: 24px;
  }

  .insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 20px 0;
  }

  .insight-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px;
  }

  .insight-card strong {
    display: block;
    color: var(--primary);
    margin-bottom: 8px;
    font-size: 17px;
  }

  .insight-card p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
    font-size: 14px;
  }

  .process-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
  }

  .process-step {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
  }

  .process-step span {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-bottom: 10px;
  }

  .process-step b {
    display: block;
    margin-bottom: 8px;
  }

  .process-step p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
  }

  .wide-visual {
    min-height: 260px;
    border-radius: 26px;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(2,88,61,.9), rgba(0,0,0,.72)),
      url('https://drive.google.com/thumbnail?id=1kUW_2txE5-BASYWT8JeilsXD39e4JLdt&sz=w1600');
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    align-items: end;
    padding: 28px;
    margin-top: 18px;
  }

  .wide-visual h3 {
    margin: 0 0 8px;
    font-size: 28px;
  }

  .wide-visual p {
    margin: 0;
    color: rgba(255,255,255,.85);
    line-height: 1.7;
  }

  .source-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin-top: 14px;
  }

  .facility-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-top: 18px;
  }

  .facility-photo {
    aspect-ratio: 4/3;
    border-radius: 18px;
    border: 1px solid rgba(216,238,229,.85);
    background: #e5e7eb;
    background-size: cover;
    background-position: center;
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    font-family: Pretendard, Arial, sans-serif;
    box-shadow: 0 12px 28px rgba(2,88,61,.055);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
  }

  .facility-photo:hover {
    transform: translateY(-5px);
    border-color: rgba(2,88,61,.34);
    box-shadow: 0 20px 42px rgba(2,88,61,.12);
    filter: saturate(1.06) contrast(1.02);
  }

  .facility-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.58));
    pointer-events: none;
  }

  .facility-photo span {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0,0,0,.5);
    color: white;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 1;
  }

  .facility-photo em {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    color: var(--primary);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s ease, transform .22s ease;
  }

  .facility-photo:hover em {
    opacity: 1;
    transform: translateY(0);
  }

  .button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0;
  }

  .primary,
  .secondary {
    border: 0;
    border-radius: 14px;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    font-family: Pretendard, Arial, sans-serif;
  }

  .primary {
    background: var(--primary);
    color: white;
  }

  .secondary {
    background: #f3f4f6;
    color: #111827;
  }

  .primary:disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  .map-box {
    margin-top: 18px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: white;
  }

  .map-frame {
    width: 100%;
    height: 420px;
    border: 0;
  }

  .center-map-box {
    position: relative;
  }

  .map-open-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .map-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(2, 88, 61, .94);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    backdrop-filter: blur(8px);
    pointer-events: auto;
  }

  .map-open-btn:hover {
    background: #01412d;
    color: #fff;
  }

  input,
  textarea {
    width: 100%;
    padding: 13px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    margin-top: 8px;
    margin-bottom: 12px;
    font-family: Pretendard, Arial, sans-serif;
  }

  textarea {
    min-height: 120px;
  }

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

  table {
    width: 100%;
    border-collapse: collapse;
    background: white;
  }

  th,
  td {
    border-bottom: 1px solid var(--line);
    padding: 14px;
    text-align: left;
    vertical-align: top;
  }

  th {
    background: #f8faf9;
  }

  .info-table th {
    width: 160px;
    background: var(--primary-light);
    color: var(--primary);
  }

  .detail-text,
  .info-table td {
    white-space: pre-line;
    line-height: 1.7;
  }

  .badge {
    background: var(--primary-light);
    color: var(--primary);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
  }

  .total-row td {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 900;
  }

  .session-table th,
  .session-table td {
    text-align: center;
    vertical-align: middle;
  }


  .curriculum-table th:nth-child(4),
  .curriculum-table td.curriculum-time-cell {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }




  .training-page-shell {
    position: relative;
  }

  .training-page-shell::before {
    content: '';
    position: absolute;
    inset: -18px -18px auto auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(2,88,61,.10), transparent 68%);
    pointer-events: none;
    z-index: -1;
  }

  .training-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 48px 44px;
    margin-bottom: 22px;
    color: white;
    background:
      radial-gradient(circle at 90% 14%, rgba(255,255,255,.20), transparent 26%),
      radial-gradient(circle at 12% 95%, rgba(255,255,255,.13), transparent 34%),
      linear-gradient(135deg, rgba(2,88,61,.96), rgba(1,65,45,.80));
    box-shadow: 0 22px 54px rgba(2,88,61,.18);
  }

  .training-hero-panel::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border-radius: 80px;
    border: 1px solid rgba(255,255,255,.18);
    transform: rotate(18deg);
  }

  .training-kicker {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 13px;
    font-weight: 900;
    color: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
  }

  .training-hero-panel h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.1;
    letter-spacing: -0.06em;
    font-weight: 950;
  }

  .training-hero-metrics {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
  }

  .training-hero-metrics span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    color: rgba(255,255,255,.94);
    font-weight: 900;
    font-size: 14px;
    backdrop-filter: blur(8px);
  }

  .training-process-card {
    background: linear-gradient(135deg, #ffffff, #f8fffc);
    border: 1px solid #dcefe7;
    border-radius: 28px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 14px 36px rgba(2,88,61,.08);
  }

  .training-process-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-end;
    margin-bottom: 18px;
  }

  .training-process-head span {
    color: var(--primary);
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -0.05em;
  }

  .training-process-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative;
  }

  .training-process-step {
    position: relative;
    min-height: 96px;
    padding: 18px 16px;
    border-radius: 22px;
    background: white;
    border: 1px solid #d8eee5;
    box-shadow: 0 10px 24px rgba(2,88,61,.05);
  }

  .training-process-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    z-index: 2;
    box-shadow: 0 8px 18px rgba(2,88,61,.18);
  }

  .training-process-number {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 10px;
  }

  .training-process-step strong {
    display: block;
    line-height: 1.45;
    letter-spacing: -0.02em;
  }

  .training-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 0 22px;
    padding: 10px;
    border-radius: 28px;
    background: #eef3f0;
    border: 1px solid rgba(2,88,61,.08);
    overflow: visible;
  }

  .training-tab-card {
    position: relative;
    min-height: 76px;
    border-radius: 22px;
    padding: 14px 14px;
    background: white;
    border: 1px solid rgba(2,88,61,.10);
    box-shadow: 0 10px 26px rgba(0,0,0,.035);
    color: #111827;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    text-align: left;
  }

  .training-tab-card:hover {
    background: #f8fffc;
    color: var(--primary);
    transform: translateY(-6px);
    border-color: rgba(2,88,61,.30);
    box-shadow: 0 20px 42px rgba(2,88,61,.13);
  }

  .training-tab-card.active,
  .training-tab-card.active:hover {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), #047452);
    box-shadow: 0 18px 38px rgba(2,88,61,.20);
  }

  .training-tab-icon {
    font-size: 20px;
    line-height: 1;
  }

  .training-tab-label {
    font-weight: 950;
    letter-spacing: -0.03em;
  }

  .training-tab-card::after {
    content: attr(data-desc);
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-6px);
    width: min(280px, 78vw);
    padding: 13px 15px;
    border-radius: 16px;
    background: rgba(17,24,39,.96);
    color: white;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: -0.02em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 18px 36px rgba(17,24,39,.22);
  }

  .training-tab-card::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%) translateY(-6px) rotate(45deg);
    width: 14px;
    height: 14px;
    background: rgba(17,24,39,.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 31;
  }

  .training-tab-card:hover::after,
  .training-tab-card:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .training-tab-card:hover::before {
    transform: translateX(-50%) translateY(0) rotate(45deg);
  }

  .course-tabs {
    background: #f3f7f5;
    margin-top: 0;
  }

  .training-section-heading {
    margin: 24px 0 12px;
  }

  .training-section-heading h2 {
    margin: 0;
    color: #111827;
    letter-spacing: -0.04em;
  }

  .training-table-wrap {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }

  .calendar-wrap {
    margin-top: 8px;
  }

  .calendar-header {
    background: white;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 22px 24px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }

  .calendar-header h2 {
    margin: 0 0 8px;
    font-size: 28px;
    letter-spacing: -0.04em;
  }

  .calendar-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px;
  }

  .calendar-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }

  .calendar-controls strong {
    min-width: 120px;
    text-align: center;
    color: var(--primary);
    font-size: 18px;
  }

  .calendar-table-wrap {
    overflow-x: auto;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }

  .calendar-table {
    min-width: 920px;
    table-layout: fixed;
  }

  .calendar-table th {
    text-align: center;
    padding: 13px 10px;
    background: #f2f7f5;
    color: #374151;
    font-weight: 900;
  }

  .calendar-table th.sun {
    color: #dc2626;
  }

  .calendar-table th.sat {
    color: #2563eb;
  }

  .calendar-table td {
    height: 132px;
    padding: 10px;
    vertical-align: top;
    border-right: 1px solid var(--line);
    background: #ffffff;
  }

  .calendar-table td:last-child {
    border-right: 0;
  }

  .calendar-empty {
    background: #f8faf9 !important;
  }

  .calendar-day.today {
    background: #f3fbf7;
    box-shadow: inset 0 0 0 2px rgba(2,88,61,.25);
  }

  .calendar-date {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    margin-bottom: 7px;
    white-space: nowrap;
  }

  .calendar-date-number {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 900;
    color: #111827;
    flex: 0 0 auto;
  }

  .calendar-day.calendar-sunday .calendar-date-number,
  .calendar-day.calendar-holiday .calendar-date-number {
    color: #dc2626;
  }

  .calendar-day.calendar-saturday:not(.calendar-holiday) .calendar-date-number {
    color: #2563eb;
  }

  .calendar-day.today .calendar-date-number {
    background: var(--primary);
    color: white;
  }

  .calendar-day.today.calendar-sunday .calendar-date-number,
  .calendar-day.today.calendar-saturday .calendar-date-number,
  .calendar-day.today.calendar-holiday .calendar-date-number {
    color: white;
  }

  .calendar-holiday-name {
    display: inline-block;
    min-width: 0;
    max-width: calc(100% - 34px);
    overflow: hidden;
    text-overflow: ellipsis;
    color: #dc2626;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    vertical-align: middle;
  }

  .calendar-events {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .calendar-event {
    border: 0;
    border-radius: 10px;
    padding: 7px 8px;
    color: white;
    font-family: Pretendard, Arial, sans-serif;
    cursor: pointer;
    text-align: left;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
  }

  .calendar-event:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
  }

  .calendar-event-title {
    display: block;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .calendar-event-meta {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    opacity: .88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .calendar-color-1 {
    background: #5F8F7B;
  }

  .calendar-color-2 {
    background: #6F8FC7;
  }

  .calendar-color-3 {
    background: #C77A7A;
  }

  .calendar-color-4 {
    background: #A486C7;
  }

  .calendar-color-5 {
    background: #C7926F;
  }

  .calendar-color-6 {
    background: #6FA5A0;
  }

  .calendar-color-7 {
    background: #C77B94;
  }

  .calendar-color-8 {
    background: #7F82C7;
  }

  .calendar-color-9 {
    background: #B8A36A;
  }

  .calendar-color-10 {
    background: #6EA889;
  }

  .calendar-color-11 {
    background: #6C9DB9;
  }

  .calendar-color-12 {
    background: #9A83C7;
  }

  .calendar-color-13 {
    background: #B97799;
  }

  .calendar-color-14 {
    background: #7B8490;
  }

  .calendar-month-list {
    margin-top: 18px;
  }

  .calendar-month-list h3 {
    margin-top: 0;
  }

  .calendar-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: middle;
  }


  .modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 200;
  }

  .modal.active {
    display: flex;
  }

  .modal-box {
    background: white;
    border-radius: 26px;
    padding: 26px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
  }

  .footer {
    background: #eef1f3;
    color: #111827;
    padding: 26px 28px 18px;
    border-top: 1px solid #d8dde2;
  }

  .footer-inner {
    max-width: 1180px;
    margin: 0 auto;
  }

  .footer-title-block {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #d8dde2;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .footer-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    background: #dfe8e5;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    margin: 0;
    white-space: nowrap;
  }

  .footer-title-block h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -0.03em;
    font-weight: 800;
  }

  .footer-title-block h2 strong {
    color: var(--primary);
    font-weight: 900;
  }

  .footer-partners {
    margin: 0 0 0 auto;
    color: #374151;
    font-size: 14px;
    white-space: nowrap;
  }

  .footer-content-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 14px;
    align-items: stretch;
  }

  .footer-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .footer-contact-card {
    background: rgba(255,255,255,.62);
    border: 1px solid #d8dde2;
    border-radius: 16px;
    padding: 14px 16px;
  }

  .footer-contact-card h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #111827;
    font-weight: 900;
  }

  .footer-contact-card p {
    margin: 5px 0;
    color: #4b5563;
    line-height: 1.55;
    font-size: 13px;
  }

  .footer-contact-card strong {
    color: #111827;
    font-weight: 900;
  }

  .footer-contact-card a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 800;
  }

  .footer-right {
    background: rgba(255,255,255,.62);
    border: 1px solid #d8dde2;
    border-radius: 16px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .footer-right label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #111827;
  }

  .family-select {
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #c9d1d8;
    border-radius: 12px;
    background: white;
    color: #111827;
    font-family: Pretendard, Arial, sans-serif;
    font-weight: 800;
    cursor: pointer;
  }

  .footer-logo-strip {
    margin: 18px auto 0;
    padding: 14px 18px;
    border-radius: 16px;
    background: white;
    border: 1px solid #d8dde2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
  }

  .footer-logo-link {
    min-width: auto;
    height: 42px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, opacity .2s ease;
  }

  .footer-logo-link:hover {
    transform: translateY(-2px);
    opacity: .82;
    box-shadow: none;
  }

  .footer-logo-link img {
    max-width: 150px;
    max-height: 38px;
    object-fit: contain;
    display: block;
  }

  .footer-bottom {
    margin: 12px auto 0;
    text-align: center;
  }

  .footer-bottom p {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
  }

  @media(max-width:900px) {
    .header {
      display: block;
    }

    .main-nav {
      margin-top: 14px;
    }

    .grid-2,
    .facility-grid,
    .insight-grid,
    .process-flow {
      grid-template-columns: 1fr;
    }

    .hero {
      padding: 42px 28px;
    }

    .hero h1 {
      font-size: 32px;
    }

    .footer-top {
      grid-template-columns: 1fr;
    }

    .footer-contact-grid {
      grid-template-columns: 1fr;
    }

    .footer-right {
      position: static;
    }

    .footer-logo-link {
      min-width: 130px;
      height: 56px;
    }

    .calendar-header {
      display: block;
    }

    .calendar-controls {
      margin-top: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .calendar-table {
      min-width: 760px;
    }

    .calendar-table td {
      height: 120px;
    }


    .home-slide-arrow {
      width: 42px;
      height: 42px;
      font-size: 24px;
    }

    .home-slide-prev {
      left: 12px;
    }

    .home-slide-next {
      right: 12px;
    }

    .home-slide-dots {
      bottom: 18px;
    }
  }


  .calendar-course-link {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-family: Pretendard, Arial, sans-serif;
    font-weight: 900;
    cursor: pointer;
    text-align: left;
  }

  .calendar-course-link:hover {
    text-decoration: underline;
  }

  .calendar-event {
    cursor: pointer;
  }

  .calendar-event:hover .calendar-event-title {
    text-decoration: underline;
  }


  /* 사업안내 신규 구성 */
  .business-hero-card-strong {
    position: relative;
    overflow: hidden;
  }

  .business-hero-card-strong::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -70px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(2,88,61,.08);
  }

  .section-kicker {
    margin: 0 0 10px;
    color: var(--primary);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .business-info-card {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 18px;
    align-items: start;
  }

  .business-info-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }

  .business-info-card h3,
  .business-summary-card h3 {
    margin-top: 0;
  }

  .business-info-card p,
  .business-summary-card p {
    color: #374151;
    line-height: 1.85;
    margin-bottom: 0;
  }

  .section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }

  .section-heading-row h3 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.04em;
  }

  .visual-label,
  .image-open-link {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
  }

  .purpose-visual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .purpose-visual-card {
    position: relative;
    min-height: 280px;
    border-radius: 24px;
    padding: 24px;
    background: linear-gradient(180deg, #ffffff, #f4fbf8);
    border: 1px solid #d9eee6;
    box-shadow: 0 12px 32px rgba(2,88,61,.07);
    overflow: hidden;
  }

  .purpose-visual-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 7px;
    background: var(--primary);
  }

  .purpose-number {
    position: absolute;
    right: 20px;
    top: 18px;
    color: rgba(2,88,61,.14);
    font-size: 42px;
    font-weight: 950;
    letter-spacing: -0.06em;
  }

  .purpose-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    font-size: 28px;
    margin-bottom: 24px;
  }

  .purpose-visual-card h4 {
    position: relative;
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -0.04em;
  }

  .purpose-visual-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
  }

  .business-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .business-summary-card span {
    display: inline-flex;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: var(--primary-light);
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
  }

  .support-system-visual {
    display: grid;
    grid-template-columns: 1fr 42px 1fr 42px 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .support-stage {
    border-radius: 24px;
    border: 1px solid #d9eee6;
    background: #fff;
    padding: 22px;
    box-shadow: 0 12px 32px rgba(2,88,61,.06);
  }

  .stage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: var(--primary);
    color: white;
    font-weight: 950;
    margin-bottom: 16px;
  }

  .support-stage h4 {
    margin: 0 0 14px;
    font-size: 20px;
    letter-spacing: -0.04em;
  }

  .support-stage ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .support-stage li {
    position: relative;
    padding-left: 18px;
    margin: 12px 0;
    line-height: 1.65;
    color: #374151;
  }

  .support-stage li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--primary);
  }

  .support-stage em {
    color: var(--muted);
    font-style: normal;
    font-size: 13px;
  }

  .support-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 28px;
    font-weight: 950;
  }

  .system-image-card {
    overflow: hidden;
  }

  .system-image-wrap {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #f9fafb;
    overflow: hidden;
    text-align: center;
  }

  .system-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 240px;
    object-fit: contain;
  }

  @media (max-width: 900px) {
    .purpose-visual-grid,
    .business-summary-grid {
      grid-template-columns: 1fr;
    }

    .support-system-visual {
      grid-template-columns: 1fr;
    }

    .support-arrow {
      transform: rotate(90deg);
      min-height: 34px;
    }
  }

  @media (max-width: 640px) {
    .business-info-card {
      grid-template-columns: 1fr;
    }

    .section-heading-row {
      display: block;
    }

    .visual-label,
    .image-open-link {
      display: inline-flex;
      margin-top: 12px;
    }
  }


  .business-title-clean {
    margin-bottom: 18px;
  }

  .business-tabs {
    background: linear-gradient(135deg, #edf7f3, #f7fbf9);
    border: 1px solid #d8eee5;
    border-radius: 999px;
    padding: 8px;
    box-shadow: 0 12px 30px rgba(2,88,61,.06);
  }

  .business-tab-layout {
    display: grid;
    gap: 20px;
  }

  .business-polished-layout {
    animation: businessFadeUp .32s ease both;
  }

  @keyframes businessFadeUp {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .business-text-card {
    position: relative;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(216,238,229,.95);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 16px 42px rgba(2,88,61,.07);
    overflow: hidden;
  }

  .business-text-card::after {
    content: '';
    position: absolute;
    right: -56px;
    top: -56px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: rgba(2,88,61,.055);
    pointer-events: none;
  }

  .business-main-card {
    background:
      radial-gradient(circle at 90% 12%, rgba(2,88,61,.13), transparent 28%),
      linear-gradient(135deg, #f8fffc, #ecf7f3);
    border-color: #cce8dd;
  }

  .business-text-card h2,
  .business-text-card h3 {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    letter-spacing: -0.04em;
    color: var(--primary);
  }

  .business-text-card h2 {
    font-size: clamp(25px, 3vw, 34px);
  }

  .business-text-card h3 {
    font-size: clamp(21px, 2.4vw, 26px);
  }

  .business-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: #e7f4ef;
    box-shadow: inset 0 0 0 1px rgba(2,88,61,.08);
    flex: 0 0 auto;
  }

  .business-text-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    line-height: 1.88;
    color: #1f2937;
    font-size: 16px;
    word-break: keep-all;
  }

  .business-visual-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .business-visual-card {
    position: relative;
    min-height: 230px;
    border: 1px solid #d8eee5;
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,249,.98));
    padding: 26px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(2,88,61,.055);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .business-visual-card:hover {
    transform: translateY(-5px);
    border-color: rgba(2,88,61,.34);
    box-shadow: 0 20px 42px rgba(2,88,61,.12);
  }

  .business-visual-card::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 6px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--primary), #35a77c);
  }

  .business-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 18px;
    background: #e7f4ef;
    font-size: 26px;
    box-shadow: inset 0 0 0 1px rgba(2,88,61,.08);
  }

  .business-visual-card strong {
    display: block;
    margin: 0 0 14px;
    color: var(--primary);
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: -0.03em;
    word-break: keep-all;
  }

  .business-visual-card p {
    color: #374151;
    line-height: 1.72;
    margin-top: 8px;
    padding-left: 12px;
    border-left: 3px solid #d8eee5;
  }

  .business-purpose-grid .business-visual-card p {
    padding-left: 0;
    border-left: 0;
  }

  .business-visual-flow .business-visual-card {
    min-height: 260px;
  }

  .business-image-wrap {
    position: relative;
    z-index: 1;
    width: 70%;
    max-width: 860px;
    margin: 4px auto 0;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #f9fafb;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 14px 34px rgba(17,24,39,.08);
  }

  .business-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 170px;
    object-fit: contain;
    transform: scale(1);
    transition: transform .28s ease, filter .28s ease;
  }

  .business-image-wrap:hover img {
    transform: scale(1.07);
    filter: saturate(1.06) contrast(1.02);
  }

  @media (max-width: 900px) {
    .business-tabs {
      border-radius: 24px;
    }

    .business-visual-grid {
      grid-template-columns: 1fr;
    }

    .business-visual-card,
    .business-visual-flow .business-visual-card {
      min-height: auto;
    }

    .business-image-wrap {
      width: 100%;
    }
  }



  .center-title-clean {
    margin-bottom: 18px;
  }

  .center-tabs {
    margin-bottom: 24px;
  }

  .center-polished-layout .business-text-card p + p {
    margin-top: 10px;
  }

  .center-main-card .button-row {
    position: relative;
    z-index: 1;
  }

  .center-facility-card .facility-grid {
    position: relative;
    z-index: 1;
  }

  .center-map-card .map-box,
  .center-map-card .button-row,
  .center-map-card .map-help-text {
    position: relative;
    z-index: 1;
  }

  .map-help-text {
    font-size: 13px;
    color: #6b7280;
    margin-top: 12px !important;
  }

  body.modal-open {
    overflow: hidden;
  }

  .photo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .photo-modal.active {
    display: flex;
  }

  .photo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(5px);
  }

  .photo-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(980px, 94vw);
    max-height: 90vh;
    border-radius: 28px;
    background: white;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0,0,0,.35);
    animation: photoModalZoom .2s ease both;
  }

  @keyframes photoModalZoom {
    from {
      opacity: 0;
      transform: scale(.96);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .photo-modal-dialog img {
    display: block;
    width: 100%;
    max-height: calc(90vh - 64px);
    object-fit: contain;
    background: #111827;
  }

  .photo-modal-dialog p {
    margin: 0;
    padding: 16px 20px;
    font-weight: 900;
    color: var(--primary);
    background: #f7fbf9;
  }

  .photo-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #111827;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    transition: transform .2s ease, background .2s ease;
  }

  .photo-modal-close:hover {
    transform: scale(1.06);
    background: white;
  }



  @media (max-width: 900px) {
    .training-process-head {
      align-items: flex-start;
      flex-direction: column;
    }

    .training-process-flow {
      grid-template-columns: 1fr;
    }

    .training-process-step:not(:last-child)::after {
      content: '↓';
      right: 50%;
      top: auto;
      bottom: -18px;
      transform: translateX(50%);
    }

    .training-hero-panel {
      padding: 34px 26px;
    }

    .training-tabs {
      grid-template-columns: 1fr;
    }

    .training-tab-card::after,
    .training-tab-card::before {
      display: none;
    }

    .calendar-header {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (max-width: 900px) {
    .main-nav button:hover,
    .tab-btn:hover,
    .facility-photo:hover {
      transform: translateY(-3px);
    }
  }


  /* ===== Training page refinement v3 ===== */
  .training-title-clean {
    margin-bottom: 18px;
  }

  .training-title-clean h1 {
    margin: 0 0 10px;
    font-size: 38px;
    letter-spacing: -0.04em;
  }

  .training-page-shell::before,
  .training-hero-panel,
  .training-kicker,
  .training-hero-metrics {
    display: none;
  }

  .training-process-card.training-process-compact {
    margin-bottom: 18px;
    padding: 20px 22px;
    background:
      radial-gradient(circle at 90% 12%, rgba(2,88,61,.13), transparent 28%),
      linear-gradient(135deg, #f8fffc, #ecf7f3);
    border-color: #cce8dd;
    box-shadow: 0 16px 42px rgba(2,88,61,.07);
  }

  .training-process-card.training-process-compact h3 {
    margin-bottom: 12px;
    font-size: 22px;
  }

  .training-process-flow {
    gap: 8px;
  }

  .training-process-step {
    min-height: auto;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 20px rgba(2,88,61,.045);
  }

  .training-process-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
    margin: 0 7px 0 0;
    vertical-align: middle;
  }

  .training-process-step strong {
    display: inline;
    font-size: 14px;
    line-height: 1.35;
  }

  .training-process-step:not(:last-child)::after {
    right: -11px;
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .training-tabs {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #edf7f3, #f7fbf9);
    border: 1px solid #d8eee5;
    box-shadow: 0 12px 30px rgba(2,88,61,.06);
    overflow: visible;
  }

  .training-tab-card {
    min-height: auto;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    padding: 11px 15px;
    border-radius: 999px;
    color: #111827;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
  }

  .training-tab-card:hover {
    background: var(--primary-light);
    color: var(--primary);
    transform: translateY(-5px);
    border-color: rgba(2,88,61,.34);
    box-shadow: 0 20px 42px rgba(2,88,61,.12);
  }

  .training-tab-card.active,
  .training-tab-card.active:hover {
    background: var(--primary);
    color: white;
    border-color: transparent;
    box-shadow: none;
  }

  .training-tab-icon {
    font-size: 16px;
  }

  .training-tab-label {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.02em;
  }

  .training-tab-card::after {
    width: min(320px, 82vw);
    padding: 13px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fffc);
    color: #1f2937;
    border: 1px solid #d8eee5;
    box-shadow: 0 18px 38px rgba(2,88,61,.14);
  }

  .training-tab-card::before {
    background: #ffffff;
    border-left: 1px solid #d8eee5;
    border-top: 1px solid #d8eee5;
  }

  @media (max-width: 900px) {
    .training-process-flow {
      grid-template-columns: 1fr;
    }

    .training-process-step:not(:last-child)::after {
      content: '↓';
      right: 50%;
      top: auto;
      bottom: -16px;
      transform: translateX(50%);
    }

    .training-tabs {
      border-radius: 24px;
      align-items: stretch;
    }

    .training-tab-card {
      flex: 1 1 100%;
    }
  }

  /* v4 training tab/process compact refinements */
  .training-tabs-top {
    margin: 0 0 18px;
  }

  .training-tabs {
    align-items: center;
    min-height: 0;
    padding: 6px;
    gap: 8px;
  }

  .training-tab-card {
    min-height: 0 !important;
    height: 42px;
    padding: 9px 15px !important;
    white-space: nowrap;
    flex: 0 0 auto;
    line-height: 1;
  }

  .training-tab-icon,
  .training-tab-label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
  }

  .training-tab-label {
    font-size: 14px;
  }

  .training-process-in-calendar {
    margin: 0 0 16px;
  }

  .training-process-card.training-process-compact {
    padding: 14px 16px;
  }

  .training-process-card.training-process-compact h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.25;
  }

  .training-process-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .training-process-step {
    min-height: 0 !important;
    height: 42px;
    padding: 8px 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
  }

  .training-process-number {
    flex: 0 0 auto;
  }

  .training-process-step strong {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    font-size: 13px;
  }

  @media (max-width: 900px) {
    .training-tabs {
      border-radius: 24px;
      flex-wrap: wrap;
    }

    .training-tab-card {
      flex: 1 1 calc(50% - 8px);
      width: auto;
    }

    .training-process-flow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-process-step:not(:last-child)::after {
      display: none;
    }
  }

  @media (max-width: 520px) {
    .training-tab-card {
      flex-basis: 100%;
    }

    .training-process-flow {
      grid-template-columns: 1fr;
    }
  }

  /* ===== Training page final ordering and one-line compact fix v5 ===== */
  .training-title-clean {
    margin: 0 0 18px;
  }

  .training-title-clean h1 {
    margin: 0 0 10px;
    font-size: 38px;
    letter-spacing: -0.04em;
    line-height: 1.2;
  }

  .training-tabs-top {
    margin: 0 0 18px !important;
  }

  .training-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 24px !important;
    background: #eef3f0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .training-tab-card {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 15px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .training-tab-icon,
  .training-tab-label {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .training-tab-icon {
    font-size: 15px !important;
  }

  .training-tab-label {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  .training-process-in-calendar {
    margin: 0 0 16px !important;
  }

  .training-process-card.training-process-compact {
    padding: 12px 14px !important;
  }

  .training-process-card.training-process-compact h3 {
    margin: 0 0 8px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .training-process-flow {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .training-process-step {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .training-process-number {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 22px !important;
  }

  .training-process-step strong {
    display: inline !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .training-process-step:not(:last-child)::after {
    display: none !important;
  }

  @media (max-width: 900px) {
    .training-tabs {
      flex-wrap: wrap !important;
    }

    .training-tab-card {
      flex: 0 0 auto !important;
    }

    .training-process-flow {
      flex-wrap: wrap !important;
    }

    .training-process-step {
      flex: 1 1 calc(50% - 8px) !important;
    }
  }

  @media (max-width: 520px) {
    .training-tab-card {
      flex: 1 1 calc(50% - 10px) !important;
      padding: 10px 12px !important;
    }

    .training-process-step {
      flex: 1 1 100% !important;
    }
  }



  /* ===== Training tab tooltip layering fix v6 ===== */
  .training-tabs-top,
  .training-tabs {
    position: relative !important;
    z-index: 80 !important;
    overflow: visible !important;
  }

  .training-tab-card {
    position: relative !important;
    z-index: 81 !important;
  }

  .training-tab-card:hover,
  .training-tab-card:focus,
  .training-tab-card:focus-visible {
    z-index: 120 !important;
  }

  .training-tab-card::after {
    z-index: 130 !important;
  }

  .training-tab-card::before {
    z-index: 131 !important;
  }

  .training-process-in-calendar,
  .training-process-card {
    position: relative !important;
    z-index: 1 !important;
  }



<!-- v7 training tab border/process hover refinements -->

  /* 훈련신청 하위 탭 외곽 영역: 사업안내 탭 영역과 동일한 톤 */
  .training-tabs-top {
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
    margin: 0 0 18px !important;
  }

  .training-tabs {
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #edf7f3, #f7fbf9) !important;
    border: 1px solid #d8eee5 !important;
    box-shadow: 0 12px 30px rgba(2,88,61,.06) !important;
  }

  .training-tab-card {
    position: relative !important;
    z-index: 101 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 15px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .training-tab-card:hover,
  .training-tab-card:focus,
  .training-tab-card:focus-visible {
    z-index: 140 !important;
  }

  .training-tab-card::after {
    z-index: 150 !important;
  }

  .training-tab-card::before {
    z-index: 151 !important;
  }

  /* 신청절차 카드 및 단계 hover 모션 */
  .training-process-card.training-process-compact {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
  }

  .training-process-card.training-process-compact:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(2,88,61,.26) !important;
    box-shadow: 0 18px 42px rgba(2,88,61,.12) !important;
    background: linear-gradient(135deg, #f8fffc, #eef8f4) !important;
  }

  .training-process-step {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
  }

  .training-process-step:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(2,88,61,.24) !important;
    box-shadow: 0 12px 26px rgba(2,88,61,.10) !important;
    background: rgba(255,255,255,.96) !important;
  }


  /* 교육신청 팝업 개선 */
  .apply-modal-box {
    max-width: 860px;
    padding: 0;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .26);
  }

  .apply-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px 24px;
    background: linear-gradient(135deg, #f8fffc, #ecf7f3);
    border-bottom: 1px solid #d8eee5;
  }

  .apply-modal-kicker {
    display: inline-flex;
    margin: 0 0 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(2, 88, 61, .1);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
  }

  .apply-modal-head h2 {
    margin: 0 0 10px;
    font-size: 30px;
    letter-spacing: -0.04em;
    color: var(--primary);
  }

  .apply-course-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 900;
    color: #111827;
  }

  .apply-course-meta {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
  }

  .apply-modal-x {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(2, 88, 61, .18);
    border-radius: 999px;
    background: white;
    color: #334155;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(2, 88, 61, .1);
  }

  .apply-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 26px 30px 0;
  }

  .apply-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .apply-field label {
    font-size: 14px;
    font-weight: 900;
    color: #111827;
  }

  .apply-field input,
  .apply-field textarea {
    width: 100%;
    border: 1px solid #d9e5df;
    border-radius: 16px;
    background: #fbfdfc;
    padding: 14px 15px;
    font-family: Pretendard, Arial, sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .apply-field input:focus,
  .apply-field textarea:focus {
    border-color: rgba(2, 88, 61, .48);
    background: white;
    box-shadow: 0 0 0 4px rgba(2, 88, 61, .1);
  }

  .apply-field input::placeholder,
  .apply-field textarea::placeholder {
    color: #8a99a8;
  }

  .apply-file-field {
    margin: 18px 30px 0;
    padding: 18px;
    border: 1px dashed rgba(2, 88, 61, .28);
    border-radius: 22px;
    background: #f8fffc;
  }

  .apply-field-help {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
  }

  .apply-file-input {
    background: white !important;
  }

  .privacy-consent-box {
    margin: 18px 30px 0;
    border: 1px solid #d8eee5;
    border-radius: 24px;
    background: white;
    overflow: hidden;
  }

  .privacy-consent-box h3 {
    margin: 0;
    padding: 17px 20px;
    background: #eef7f3;
    color: var(--primary);
    font-size: 18px;
    letter-spacing: -0.03em;
  }

  .privacy-consent-text {
    max-height: 210px;
    overflow: auto;
    padding: 18px 20px;
    color: #374151;
    font-size: 13px;
    line-height: 1.75;
  }

  .privacy-consent-text p {
    margin: 0 0 10px;
  }

  .privacy-consent-text ul {
    margin: 0 0 10px 18px;
    padding: 0;
  }

  .privacy-consent-final {
    font-weight: 900;
    color: #111827;
  }

  .privacy-choice-row {
    display: flex;
    gap: 10px;
    padding: 16px 20px 18px;
    border-top: 1px solid #eef2f7;
    background: #fbfdfc;
  }

  .privacy-choice {
    flex: 1;
    border: 1px solid #d9e5df;
    border-radius: 999px;
    background: white;
    color: #374151;
    padding: 12px 16px;
    font-family: Pretendard, Arial, sans-serif;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  }

  .privacy-choice:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(2, 88, 61, .11);
    border-color: rgba(2, 88, 61, .28);
  }

  .privacy-choice.active[data-consent="Y"] {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
  }

  .privacy-choice.active[data-consent="N"] {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
  }

  .apply-submit-guide {
    margin: 16px 30px 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
  }

  .apply-submit-guide.ready {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #047857;
  }

  .apply-button-row {
    margin: 18px 30px 30px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  .apply-submit-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }

  @media (max-width: 720px) {
    .apply-form-grid {
      grid-template-columns: 1fr;
      padding: 22px 20px 0;
    }

    .apply-modal-head,
    .apply-file-field,
    .privacy-consent-box,
    .apply-submit-guide,
    .apply-button-row {
      margin-left: 20px;
      margin-right: 20px;
    }

    .apply-modal-head {
      padding: 24px 20px 20px;
      margin: 0;
    }

    .apply-button-row {
      flex-direction: column;
    }
  }

  /* 신청폼 v10 보완: 체크박스형 동의 UI, 첨부 안내 축소, 제출 안내 볼드 */
  .apply-file-help-small {
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    color: #7a8797 !important;
  }

  .privacy-choice {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 16px !important;
  }

  .privacy-check-box {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 5px;
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .privacy-choice.active .privacy-check-box::after {
    content: '✓';
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
  }

  .privacy-choice.active[data-consent="Y"] .privacy-check-box {
    background: white;
    border-color: white;
    color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,255,255,.25);
  }

  .privacy-choice.active[data-consent="N"] .privacy-check-box {
    background: #be123c;
    border-color: #be123c;
    color: white;
  }

  .apply-submit-guide,
  .apply-submit-guide strong {
    font-weight: 950 !important;
  }


  /* 신청폼 v11 보완: 팝업 전체 스크롤 + 긴 작성란 안내문 줄바꿈 */
  .modal.active {
    align-items: center;
  }

  .apply-modal-box {
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .apply-modal-box::-webkit-scrollbar,
  .privacy-consent-text::-webkit-scrollbar {
    width: 9px;
  }

  .apply-modal-box::-webkit-scrollbar-track,
  .privacy-consent-text::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, .9);
    border-radius: 999px;
  }

  .apply-modal-box::-webkit-scrollbar-thumb,
  .privacy-consent-text::-webkit-scrollbar-thumb {
    background: rgba(2, 88, 61, .28);
    border-radius: 999px;
  }

  .apply-input-wrap {
    position: relative;
  }

  .apply-input-wrap input.apply-input-with-note {
    min-height: 66px;
    padding: 16px 15px 10px;
    line-height: 1.35;
  }

  .apply-placeholder-text {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a99a8;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 700;
    word-break: keep-all;
    overflow-wrap: anywhere;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
  }

  .apply-input-wrap input:focus + .apply-placeholder-text,
  .apply-input-wrap input:not(:placeholder-shown) + .apply-placeholder-text {
    opacity: 0;
    visibility: hidden;
  }

  .apply-input-wrap input:focus {
    min-height: 54px;
  }

  @media (max-width: 720px) {
    .modal {
      padding: 12px;
      align-items: center;
    }

    .apply-modal-box {
      max-height: calc(100vh - 24px) !important;
      border-radius: 24px;
    }

    .apply-input-wrap input.apply-input-with-note {
      min-height: 64px;
    }

    .apply-placeholder-text {
      font-size: 11px;
    }
  }



  /* ===== Training session thumbnail card list ===== */
  .training-card-list-head {
    margin: 0 0 16px !important;
    padding: 12px 14px !important;
  }

  .training-card-list-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px !important;
    color: var(--primary);
    font-size: 17px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em;
  }

  .training-card-list-head .business-heading-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    font-size: 17px !important;
  }

  .training-card-list-head p {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    color: #374151;
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.55 !important;
    word-break: keep-all;
  }

  .training-course-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  .training-course-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid rgba(216,238,229,.95);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(2,88,61,.07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .training-course-card:hover {
    transform: translateY(-6px);
    border-color: rgba(2,88,61,.30);
    box-shadow: 0 24px 54px rgba(2,88,61,.13);
  }

  .training-course-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background:
      radial-gradient(circle at 84% 18%, rgba(255,255,255,.34), transparent 24%),
      linear-gradient(135deg, #02583D, #047452);
    overflow: hidden;
  }

  .training-course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .28s ease, filter .28s ease;
  }

  .training-course-card:hover .training-course-thumb img {
    transform: scale(1.04);
    filter: saturate(1.05) contrast(1.02);
  }

  .training-course-thumb.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .training-course-thumb.is-empty span {
    display: inline-flex;
    width: 74px;
    height: 74px;
    border-radius: 26px;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    color: white;
    font-size: 26px;
    font-weight: 950;
    letter-spacing: -0.04em;
    box-shadow: 0 18px 34px rgba(0,0,0,.12);
  }

  .training-course-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
  }

  .training-course-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .training-course-category {
    display: inline-flex;
    align-items: center;
    max-width: 58%;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .training-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
  }

  .training-status-badge.is-open {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #bbf7d0;
  }

  .training-status-badge.is-closed {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
  }

  .training-status-badge.is-ready {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
  }

  .training-status-badge.is-default {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid #d8eee5;
  }

  .training-course-card h3 {
    margin: 0;
    color: #111827;
    font-size: 20px;
    line-height: 1.42;
    letter-spacing: -0.045em;
    word-break: keep-all;
  }

  .training-session-round {
    display: inline-flex;
    width: fit-content;
    margin-top: 12px;
    padding: 7px 11px;
    border-radius: 12px;
    background: #f3f7f5;
    color: var(--primary);
    font-size: 13px;
    font-weight: 950;
  }

  .training-course-meta-list {
    display: grid;
    gap: 10px;
    margin: 16px 0 18px;
  }

  .training-course-meta-list div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border-radius: 16px;
    background: #fbfdfc;
    border: 1px solid #eef2f0;
  }

  .training-course-meta-list dt {
    margin: 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
  }

  .training-course-meta-list dd {
    margin: 0;
    color: #374151;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
    word-break: keep-all;
  }

  .training-card-apply-btn {
    width: 100%;
    margin-top: auto;
    border-radius: 16px;
    min-height: 46px;
    font-size: 15px;
  }

  .training-card-apply-btn:disabled {
    background: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
    opacity: 1;
  }

  .training-empty-card {
    grid-column: 1 / -1;
  }

  @media (max-width: 980px) {
    .training-course-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .training-course-card-grid {
      grid-template-columns: 1fr;
    }

    .training-course-body {
      padding: 18px;
    }

    .training-course-card h3 {
      font-size: 18px;
    }
  }


  /* ===== Training detail page after card selection ===== */
  .training-detail-shell {
    animation: businessFadeUp .32s ease both;
  }

  .training-detail-nav {
    margin: 0 0 16px;
  }

  .training-detail-hero {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    padding: 24px;
  }

  .training-detail-thumb {
    min-height: 230px;
    border-radius: 24px;
    background: linear-gradient(135deg, #e7f4ef, #f8fffc);
    border: 1px solid #d8eee5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .training-detail-thumb img {
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
    display: block;
  }

  .training-detail-thumb.is-empty span {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    background: var(--primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size: 25px;
    letter-spacing: -0.04em;
  }

  .training-detail-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .training-detail-hero-body h2 {
    margin: 12px 0 14px;
    color: var(--primary);
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.22;
    letter-spacing: -0.05em;
    word-break: keep-all;
  }

  .training-detail-hero-body p {
    margin: 0;
    line-height: 1.85;
    color: #374151;
    white-space: pre-line;
    word-break: keep-all;
  }

  .session-focus-row td {
    background: #f3fbf7 !important;
    box-shadow: inset 0 1px 0 rgba(2,88,61,.12), inset 0 -1px 0 rgba(2,88,61,.12);
  }

  .session-table .primary:disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  @media (max-width: 900px) {
    .training-detail-hero {
      grid-template-columns: 1fr;
    }

    .training-detail-thumb,
    .training-detail-thumb img {
      min-height: 210px;
    }
  }


  /* ===== Partner page tab/layout refinement ===== */
  .partner-title-clean {
    margin-bottom: 18px;
  }

  .partner-tabs {
    margin-bottom: 24px;
  }

  .partner-polished-layout .business-text-card p + p {
    margin-top: 10px;
  }

  .partner-main-card p,
  .partner-guide-card p,
  .partner-list-card p {
    white-space: normal;
    word-break: keep-all;
  }

  .partner-compare-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .partner-compare-item {
    position: relative;
    border: 1px solid #d8eee5;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,249,.98));
    padding: 26px;
    box-shadow: 0 12px 28px rgba(2,88,61,.055);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .partner-compare-item:hover {
    transform: translateY(-5px);
    border-color: rgba(2,88,61,.34);
    box-shadow: 0 20px 42px rgba(2,88,61,.12);
  }

  .partner-compare-item::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 6px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--primary), #35a77c);
  }

  .partner-core-item::before {
    background: linear-gradient(90deg, #047452, #7cc9aa);
  }

  .partner-compare-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 18px;
    background: #e7f4ef;
    font-size: 27px;
    box-shadow: inset 0 0 0 1px rgba(2,88,61,.08);
  }

  .partner-compare-item h4,
  .partner-method-item h4 {
    margin: 0 0 14px;
    color: var(--primary);
    font-size: 22px;
    letter-spacing: -0.04em;
  }

  .partner-compare-item ul,
  .partner-method-item ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .partner-compare-item li,
  .partner-method-item li {
    position: relative;
    margin: 10px 0;
    padding-left: 17px;
    color: #374151;
    line-height: 1.72;
    word-break: keep-all;
  }

  .partner-compare-item li::before,
  .partner-method-item li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--primary);
  }

  .partner-compare-item li span {
    color: var(--primary);
    font-weight: 900;
  }

  .partner-info-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
  }

  .partner-info-row {
    border: 1px solid #e1f0ea;
    border-radius: 20px;
    background: #fbfdfc;
    padding: 18px;
  }

  .partner-info-row > strong {
    display: block;
    color: var(--primary);
    font-size: 16px;
    font-weight: 950;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
  }

  .partner-info-row p {
    margin: 0;
    color: #374151;
    line-height: 1.78;
  }

  .partner-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
  }

  .partner-check-card {
    border: 1px solid #d8eee5;
    border-radius: 18px;
    background: white;
    padding: 16px;
    box-shadow: 0 8px 20px rgba(2,88,61,.045);
  }

  .partner-check-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .partner-check-card b {
    display: block;
    margin-bottom: 9px;
    color: #111827;
    line-height: 1.45;
  }

  .partner-check-card p + p {
    margin-top: 8px;
  }

  .partner-note {
    position: relative;
    z-index: 1;
    margin-top: 16px !important;
    padding: 15px 17px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #4b5563 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .partner-method-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .partner-method-item {
    border: 1px solid #d8eee5;
    border-radius: 26px;
    background: linear-gradient(180deg, #ffffff, #f7fbf9);
    padding: 24px;
    box-shadow: 0 12px 28px rgba(2,88,61,.055);
  }

  .partner-method-number {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--primary);
    color: white;
    font-weight: 950;
    margin-bottom: 14px;
  }

  .partner-method-item .button-row {
    margin: 18px 0 0;
    position: relative;
    z-index: 1;
  }

  .partner-search-input {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 4px 0 16px;
    background: #fbfdfc;
    border-color: #d9e5df;
  }

  .partner-table-wrap {
    position: relative;
    z-index: 1;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }

  .partner-status-table th {
    color: var(--primary);
    font-weight: 950;
    background: #f2f7f5;
  }

  .partner-status-table td {
    vertical-align: middle;
    line-height: 1.6;
  }

  .partner-status-table th:nth-child(4),
  .partner-status-table th:nth-child(5),
  .partner-status-table td:nth-child(4),
  .partner-status-table td:nth-child(5) {
    text-align: center;
    white-space: nowrap;
  }

  .partner-page-row {
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .partner-page-row span {
    display: inline-flex;
    min-width: 72px;
    justify-content: center;
    color: var(--primary);
    font-weight: 950;
  }

  @media (max-width: 900px) {
    .partner-compare-grid,
    .partner-method-grid,
    .partner-check-grid {
      grid-template-columns: 1fr;
    }

    .partner-status-table {
      min-width: 760px;
    }
  }

  @media (max-width: 640px) {
    .partner-compare-item,
    .partner-method-item,
    .partner-info-row {
      padding: 18px;
    }
  }



  /* ===== Partner page additional refinements ===== */
  .partner-compare-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    white-space: nowrap;
  }

  .partner-compare-title .partner-compare-icon {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 16px;
    font-size: 23px;
    flex: 0 0 auto;
  }

  .partner-check-card {
    position: relative;
    padding: 17px 16px 16px !important;
    font-size: 13.5px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  }

  .partner-check-card:hover {
    transform: translateY(-5px);
    border-color: rgba(2,88,61,.34);
    box-shadow: 0 18px 38px rgba(2,88,61,.12);
    background: #fbfffd;
  }

  .partner-check-card .partner-check-badge {
    display: inline-flex;
    width: auto;
    min-width: 46px;
    height: 28px;
    padding: 0 11px;
    margin-bottom: 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), #047452);
    color: white;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .04em;
  }

  .partner-check-card b {
    font-size: 14px;
    line-height: 1.42;
  }

  .partner-check-card p {
    font-size: 13px !important;
    line-height: 1.68 !important;
  }

  .partner-check-card a {
    color: var(--primary);
    font-weight: 950;
    text-decoration: none;
    border-bottom: 1px solid rgba(2,88,61,.28);
  }

  .partner-check-card a:hover {
    border-bottom-color: var(--primary);
  }

  .partner-check-point {
    margin-top: 12px !important;
    padding: 10px 11px;
    border-radius: 14px;
    background: #eef7f3;
    border: 1px solid #d8eee5;
    color: var(--primary) !important;
    font-weight: 950;
  }

  .partner-method-grid {
    align-items: stretch;
  }

  .partner-method-item {
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px !important;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  }

  .partner-method-item:hover {
    transform: translateY(-5px);
    border-color: rgba(2,88,61,.34);
    box-shadow: 0 20px 42px rgba(2,88,61,.12);
    background: linear-gradient(180deg, #ffffff, #f2faf6);
  }

  .partner-method-number {
    display: none !important;
  }

  .partner-method-titlebar {
    display: block !important;
    margin: 0 -24px 20px !important;
    padding: 17px 24px;
    background: linear-gradient(135deg, var(--primary), #047452);
    color: white !important;
    font-size: 20px !important;
    text-align: center;
    letter-spacing: -0.03em;
  }

  .partner-method-item ul {
    flex: 1 1 auto;
  }

  .partner-method-button-row {
    justify-content: center;
    align-items: center;
    margin: 22px 0 0 !important;
    min-height: 48px;
  }

  .partner-method-button-row .primary {
    min-width: 210px;
    text-align: center;
    border-radius: 999px;
  }

  @media (max-width: 520px) {
    .partner-compare-title {
      white-space: normal;
    }

    .partner-method-titlebar {
      font-size: 18px !important;
    }
  }

  /* 고객센터: 기존 사업안내/센터소개/협약기업 톤에 맞춘 통합 디자인 */
  #notice.page {
    max-width: 1180px;
    padding-top: 50px;
  }

  .customer-title {
    margin-bottom: 22px;
  }

  .customer-title h1 {
    margin: 0 0 10px;
    font-size: 38px;
    letter-spacing: -0.04em;
  }

  .customer-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 24px;
    background: #eef3f0;
    padding: 8px;
    border-radius: 24px;
  }

  .customer-content {
    animation: customerFade .18s ease;
  }

  @keyframes customerFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .customer-card {
    background: white;
    border: 1px solid rgba(216,238,229,.95);
    border-radius: 26px;
    padding: 30px;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
  }

  .customer-card:hover {
    border-color: rgba(2,88,61,.18);
    box-shadow: 0 18px 42px rgba(2,88,61,.08);
  }

  .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }

  .section-head h2 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.04em;
    color: var(--primary);
  }

  .customer-table-wrap {
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: white;
  }

  .customer-table {
    width: 100%;
    border-collapse: collapse;
  }

  .customer-table th {
    padding: 15px 12px;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 950;
    text-align: center;
    border-bottom: 1px solid #d8eee5;
  }

  .customer-table td {
    padding: 15px 12px;
    background: white;
    border-bottom: 1px solid var(--line);
    line-height: 1.55;
    vertical-align: middle;
  }

  .customer-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .customer-table tr:hover td {
    background: #fbfdfc;
  }

  .customer-table th:first-child,
  .customer-table td:first-child {
    width: 82px;
    text-align: center;
    color: var(--muted);
    font-weight: 800;
  }

  .customer-table th:nth-child(3),
  .customer-table td:nth-child(3),
  .customer-table th:nth-child(4),
  .customer-table td:nth-child(4),
  .customer-table th:nth-child(5),
  .customer-table td:nth-child(5),
  .customer-table th:nth-child(6),
  .customer-table td:nth-child(6) {
    white-space: nowrap;
    text-align: center;
  }

  .center-cell,
  .empty-cell {
    text-align: center !important;
    color: var(--muted);
  }

  .text-link {
    border: 0;
    background: transparent;
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
    padding: 0;
    font-family: Pretendard, Arial, sans-serif;
    text-align: left;
    line-height: 1.5;
  }

  .text-link:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .page-row {
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .page-row span {
    min-width: 82px;
    text-align: center;
    color: var(--muted);
    font-weight: 900;
  }

  .page-row button:disabled {
    opacity: .42;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .detail-card {
    padding: 32px;
  }

  .detail-card > .secondary {
    margin-bottom: 20px;
  }

  .detail-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0 0;
  }

  .detail-title-row h2 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.04em;
    line-height: 1.28;
  }

  .detail-meta {
    margin-top: 14px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
  }

  .notice-body {
    margin: 0;
    padding: 26px 0;
    line-height: 1.85;
    color: #374151;
    font-size: 16px;
    white-space: normal;
  }

  .notice-body a {
    color: var(--primary);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .content-image {
    display: block;
    max-width: 100%;
    border-radius: 20px;
    margin: 16px 0;
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(2,88,61,.07);
  }

  .attachment-box,
  .answer-box,
  .comment-box {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin-top: 12px;
  }

  .attachment-box h3,
  .answer-box h3,
  .comment-box h3 {
    margin: 0 0 14px;
    color: var(--primary);
    font-size: 20px;
    letter-spacing: -0.03em;
  }

  .attach-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 8px 4px 0;
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 900;
    text-decoration: none;
    border: 1px solid #d8eee5;
  }

  .attach-link:hover {
    background: var(--primary);
    color: white;
  }

  .comment-box .source-note {
    margin: 0 0 14px;
    padding: 13px 16px;
    border: 1px solid #d8eee5;
    border-radius: 16px;
    background: #f8fffc;
    color: var(--muted);
  }

  .comment-item {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    margin: 12px 0;
    background: #fbfdfc;
  }

  .reply-item {
    margin-left: 30px;
    background: white;
    border-color: #d8eee5;
  }

  .comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
  }

  .comment-meta b {
    color: var(--text);
    font-size: 14px;
  }

  .comment-item p {
    margin: 10px 0;
    line-height: 1.7;
    color: #374151;
  }

  .comment-form,
  .reply-form {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #d8eee5;
    border-radius: 18px;
    background: #f8fffc;
  }

  .reply-form {
    display: none;
  }

  .empty-comment {
    color: var(--muted);
    padding: 14px 0;
  }

  .faq-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    margin-bottom: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 24px rgba(0,0,0,.035);
  }

  .faq-question {
    width: 100%;
    border: 0;
    background: white;
    padding: 20px 22px;
    text-align: left;
    font-family: Pretendard, Arial, sans-serif;
    font-weight: 950;
    color: var(--text);
    cursor: pointer;
  }

  .faq-question:hover {
    background: var(--primary-light);
    color: var(--primary);
  }

  .faq-answer {
    padding: 0 22px 22px;
    line-height: 1.8;
    color: #374151;
    border-top: 1px solid var(--line);
    background: #fbfdfc;
  }

  .inquiry-form-card input,
  .inquiry-form-card textarea,
  .private-check input,
  .customer-modal-box input,
  .customer-card input,
  .customer-card textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 15px;
    margin-bottom: 12px;
    font-family: Pretendard, Arial, sans-serif;
    font-size: 15px;
    background: white;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }

  .inquiry-form-card input:focus,
  .inquiry-form-card textarea:focus,
  .private-check input:focus,
  .customer-modal-box input:focus,
  .customer-card input:focus,
  .customer-card textarea:focus {
    border-color: rgba(2,88,61,.55);
    box-shadow: 0 0 0 4px rgba(2,88,61,.08);
  }

  .inquiry-form-card textarea,
  .comment-form textarea,
  .reply-form textarea {
    min-height: 150px;
    resize: vertical;
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .file-label {
    display: block;
    font-weight: 900;
    color: var(--primary);
    margin: 8px 0 12px;
  }

  .privacy-row {
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 8px 0 18px;
    padding: 15px 16px;
    border-radius: 18px;
    background: #f8faf9;
    border: 1px solid var(--line);
    font-weight: 900;
  }

  .privacy-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .privacy-row input[type="radio"] {
    width: auto;
    margin: 0;
    box-shadow: none;
  }

  .answer-box {
    background: #fbfdfc;
    border: 1px solid #d8eee5;
    border-radius: 20px;
    padding: 22px;
    margin-top: 20px;
  }

  .answer-box p {
    margin: 0;
    line-height: 1.8;
    color: #374151;
  }

  .private-check {
    max-width: 620px;
    margin: 0 auto;
  }

  .private-check h2 {
    margin: 0 0 12px;
    color: var(--primary);
    letter-spacing: -0.04em;
  }

  .private-check label {
    display: block;
    margin-bottom: 8px;
    font-weight: 900;
    color: var(--primary);
  }

  .customer-modal-box {
    max-width: 560px;
    padding: 0;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 26px 80px rgba(0,0,0,.22);
  }

  .customer-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 26px 28px;
    background: linear-gradient(135deg, #f8fffc, #ecf7f3);
    border-bottom: 1px solid #d8eee5;
  }

  .customer-modal-head h2 {
    margin: 10px 0 0;
    font-size: 26px;
    letter-spacing: -0.04em;
    color: var(--primary);
  }

  .customer-private-modal {
    padding: 26px 28px 28px;
  }

  .modal-button-row {
    justify-content: flex-end;
    margin-top: 6px;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 950;
    border: 1px solid #d8eee5;
  }

  @media (max-width: 760px) {
    .customer-card,
    .detail-card {
      padding: 22px;
    }

    .section-head {
      display: block;
    }

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

    .customer-table {
      min-width: 760px;
    }

    .form-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .reply-item {
      margin-left: 14px;
    }

    .customer-modal-head,
    .customer-private-modal {
      padding: 22px;
    }
  }



  /* 고객센터 디자인 통일 보정: 협약기업 탭과 동일한 카드/표 톤 */
  .customer-title,
  .customer-tabs {
    margin-left: 0;
    margin-right: 0;
  }

  .customer-content.partner-polished-layout {
    display: block;
  }

  .customer-guide-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(216,238,229,.95);
    border-radius: 28px;
    padding: 30px;
    background: linear-gradient(135deg, #ffffff, #f6fffb);
    box-shadow: 0 14px 34px rgba(2,88,61,.06);
  }

  .customer-guide-card::before,
  .customer-card::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    right: -80px;
    top: -90px;
    border-radius: 999px;
    background: rgba(2,88,61,.055);
    pointer-events: none;
  }

  .customer-guide-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #4b5563;
    line-height: 1.75;
    font-weight: 700;
  }

  .customer-section-head {
    position: relative;
    z-index: 1;
    padding-bottom: 0;
    margin-bottom: 10px;
    border-bottom: 0;
  }

  .customer-section-head h2 {
    font-size: 26px;
    color: var(--primary);
    font-weight: 950;
  }

  .customer-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 30px;
    background: linear-gradient(135deg, #ffffff, #fbfdfc);
    border: 1px solid rgba(216,238,229,.95);
    box-shadow: 0 14px 34px rgba(2,88,61,.06);
  }

  .customer-card > * {
    position: relative;
    z-index: 1;
  }

  .customer-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
  }

  .customer-toolbar-right {
    justify-content: flex-end;
  }

  .customer-search-input {
    margin: 0;
    width: min(420px, 100%);
  }

  .customer-filter-select {
    min-height: 48px;
    border: 1px solid #d9e5df;
    border-radius: 16px;
    padding: 0 42px 0 15px;
    background: #fbfdfc;
    color: var(--text);
    font-family: Pretendard, Arial, sans-serif;
    font-weight: 900;
    outline: none;
  }

  .customer-filter-select:focus {
    border-color: rgba(2,88,61,.55);
    box-shadow: 0 0 0 4px rgba(2,88,61,.08);
  }

  .customer-table-wrap {
    position: relative;
    z-index: 1;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }

  .customer-table th {
    color: var(--primary);
    font-weight: 950;
    background: #f2f7f5;
  }

  .customer-table td {
    vertical-align: middle;
    line-height: 1.6;
    font-size: 15px;
  }

  .customer-table .text-link,
  .customer-title-cell .text-link,
  .inquiry-title-cell .text-link {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
  }

  .notice-table th:nth-child(2),
  .notice-table td:nth-child(2) {
    width: 48%;
  }

  .inquiry-table th:nth-child(2),
  .inquiry-table td:nth-child(2) {
    width: 46%;
    min-width: 320px;
  }

  .inquiry-title-cell {
    word-break: keep-all;
  }

  .customer-table th:nth-child(3),
  .customer-table td:nth-child(3),
  .customer-table th:nth-child(4),
  .customer-table td:nth-child(4),
  .customer-table th:nth-child(5),
  .customer-table td:nth-child(5),
  .customer-table th:nth-child(6),
  .customer-table td:nth-child(6) {
    text-align: center;
    white-space: nowrap;
  }

  .customer-table .attach-link {
    padding: 7px 11px;
    font-size: 13px;
  }

  .detail-card {
    background: linear-gradient(135deg, #ffffff, #fbfdfc);
  }

  .detail-title-row h2 {
    font-size: 30px;
    font-weight: 950;
    color: var(--text);
  }

  .answer-date {
    display: inline-flex;
    margin: 0 0 12px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
  }

  .comment-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .comment-head h3 {
    margin-bottom: 8px;
  }

  .comment-head .source-note {
    margin-bottom: 0;
  }

  .faq-list-card {
    padding: 16px;
  }

  .faq-row {
    border: 1px solid var(--line);
    border-radius: 20px;
    margin-bottom: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 24px rgba(0,0,0,.035);
  }

  .faq-row:last-child {
    margin-bottom: 0;
  }

  .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    border: 0;
    background: white;
    padding: 20px 22px;
    text-align: left;
    font-family: Pretendard, Arial, sans-serif;
    color: var(--text);
    cursor: pointer;
    font-size: 16px;
    font-weight: 850;
  }

  .faq-question b {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    transition: transform .2s ease, background .2s ease, color .2s ease;
  }

  .faq-question.active b {
    transform: rotate(180deg);
    background: var(--primary);
    color: white;
  }

  .faq-answer {
    padding: 0;
    border-top: 1px solid var(--line);
    background: #fbfdfc;
    color: #374151;
    font-size: 16px;
  }

  .faq-answer > div {
    min-height: 72px;
    display: flex;
    align-items: center;
    padding: 20px 22px 20px 42px;
    line-height: 1.8;
    font-size: 16px;
  }

  .customer-modal-box {
    border-radius: 28px;
    border: 1px solid rgba(216,238,229,.95);
    box-shadow: 0 30px 90px rgba(0,0,0,.22);
  }

  .customer-modal-head h2 {
    font-size: 26px;
    font-weight: 950;
  }

  @media (max-width: 760px) {
    .customer-toolbar,
    .customer-toolbar-right {
      align-items: stretch;
      justify-content: stretch;
    }

    .customer-search-input,
    .customer-filter-select {
      width: 100%;
    }

    .inquiry-table th:nth-child(2),
    .inquiry-table td:nth-child(2) {
      min-width: 240px;
    }
  }

  /* ===== 고객센터 4차 디자인 보정: 사업안내 탭 + 협약기업 현황 카드/표와 통일 ===== */
  .customer-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 24px;
    background: #eef3f0;
    padding: 8px;
    border-radius: 24px;
  }

  .customer-tabs .tab-btn {
    border: 1px solid transparent;
    background: transparent;
    padding: 11px 15px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    font-family: Pretendard, Arial, sans-serif;
  }

  .customer-tabs .tab-btn.active {
    background: var(--primary);
    color: white;
  }

  .customer-polished-layout {
    display: block;
  }

  .customer-main-card {
    margin-bottom: 18px;
  }

  .customer-main-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .customer-list-card {
    position: relative;
    overflow: hidden;
  }

  .customer-list-card h3 {
    margin: 0 0 16px;
    color: var(--primary);
    font-size: 22px;
    letter-spacing: -0.035em;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .customer-list-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 16px;
  }

  .customer-list-tools .partner-search-input,
  .customer-search-input {
    flex: 1 1 320px;
    max-width: 460px;
    margin: 0;
  }

  .customer-filter-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
    padding: 5px;
    border-radius: 999px;
    background: #f2f7f5;
    border: 1px solid #d8eee5;
  }

  .filter-pill {
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    padding: 0 14px;
    background: transparent;
    color: #374151;
    font-family: Pretendard, Arial, sans-serif;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
  }

  .filter-pill:hover {
    background: rgba(2,88,61,.08);
    color: var(--primary);
    transform: translateY(-1px);
  }

  .filter-pill.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 8px 18px rgba(2,88,61,.18);
  }

  .customer-table-wrap {
    border-radius: 20px;
    overflow: hidden;
  }

  .customer-table,
  .notice-table,
  .inquiry-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }

  .customer-table th,
  .customer-table td,
  .notice-table th,
  .notice-table td,
  .inquiry-table th,
  .inquiry-table td {
    font-size: 15px;
  }

  .customer-table .text-link,
  .customer-title-cell .text-link,
  .notice-table .text-link,
  .inquiry-table .text-link {
    font-size: 15px !important;
    font-weight: 800;
    line-height: 1.55;
  }

  .notice-table th:nth-child(1),
  .notice-table td:nth-child(1) { width: 90px; }
  .notice-table th:nth-child(2),
  .notice-table td:nth-child(2) { width: auto; min-width: 360px; }
  .notice-table th:nth-child(3),
  .notice-table td:nth-child(3) { width: 150px; }
  .notice-table th:nth-child(4),
  .notice-table td:nth-child(4) { width: 150px; }
  .notice-table th:nth-child(5),
  .notice-table td:nth-child(5) { width: 110px; }

  .inquiry-table th:nth-child(1),
  .inquiry-table td:nth-child(1) { width: 90px; }
  .inquiry-table th:nth-child(2),
  .inquiry-table td:nth-child(2) { width: auto; min-width: 420px; }
  .inquiry-table th:nth-child(3),
  .inquiry-table td:nth-child(3) { width: 150px; }
  .inquiry-table th:nth-child(4),
  .inquiry-table td:nth-child(4) { width: 110px; }
  .inquiry-table th:nth-child(5),
  .inquiry-table td:nth-child(5) { width: 110px; }
  .inquiry-table th:nth-child(6),
  .inquiry-table td:nth-child(6) { width: 130px; }

  .faq-list-card {
    padding: 24px;
  }

  .faq-clean-item {
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: white;
    margin-bottom: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.035);
  }

  .faq-clean-item:last-child {
    margin-bottom: 0;
  }

  .faq-clean-question {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    border: 0;
    background: white;
    padding: 18px 20px;
    font-family: Pretendard, Arial, sans-serif;
    cursor: pointer;
    text-align: left;
  }

  .faq-clean-question:hover {
    background: #fbfdfc;
  }

  .faq-mark {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 15px;
    font-weight: 950;
  }

  .answer-mark {
    background: var(--primary);
    color: white;
    flex: 0 0 34px;
  }

  .faq-title-text,
  .faq-answer-text {
    font-size: 16px;
    line-height: 1.75;
    color: #111827;
    font-weight: 800;
  }

  .faq-answer-text {
    font-weight: 700;
    color: #374151;
  }

  .faq-chevron {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f7f5;
    color: var(--primary);
    font-size: 18px;
    font-weight: 950;
    transition: transform .2s ease, background .2s ease, color .2s ease;
  }

  .faq-clean-question.active .faq-chevron {
    transform: rotate(180deg);
    background: var(--primary);
    color: white;
  }

  .faq-clean-answer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 18px 22px 20px 74px;
    border-top: 1px solid var(--line);
    background: #fbfdfc;
  }

  .faq-clean-answer .content-image {
    margin-top: 12px;
  }

  @media (max-width: 760px) {
    .customer-list-tools {
      align-items: stretch;
    }

    .customer-list-tools .partner-search-input,
    .customer-search-input,
    .customer-filter-group {
      width: 100%;
      max-width: none;
    }

    .customer-filter-group {
      border-radius: 18px;
      justify-content: flex-start;
    }

    .filter-pill {
      flex: 1 1 auto;
    }

    .faq-clean-question {
      grid-template-columns: 36px minmax(0, 1fr) 32px;
      padding: 16px;
    }

    .faq-clean-answer {
      padding: 16px;
    }
  }


  /* ===== 고객센터 최종 보정: 사업안내 탭/협약기업 카드/표와 동일화 ===== */
  .customer-tabs {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 18px 0 24px !important;
    background: linear-gradient(135deg, #edf7f3, #f7fbf9) !important;
    border: 1px solid #d8eee5 !important;
    border-radius: 999px !important;
    padding: 8px !important;
    box-shadow: 0 12px 30px rgba(2,88,61,.06) !important;
  }

  .customer-tabs .tab-btn {
    border: 1px solid transparent !important;
    background: transparent !important;
    padding: 11px 15px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-family: Pretendard, Arial, sans-serif !important;
    cursor: pointer !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease !important;
  }

  .customer-tabs .tab-btn:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    transform: translateY(-5px) !important;
    border-color: rgba(2,88,61,.34) !important;
    box-shadow: 0 20px 42px rgba(2,88,61,.12) !important;
  }

  .customer-tabs .tab-btn.active,
  .customer-tabs .tab-btn.active:hover {
    background: var(--primary) !important;
    color: white !important;
  }

  .customer-main-card {
    position: relative !important;
    background: radial-gradient(circle at 90% 12%, rgba(2,88,61,.13), transparent 28%), linear-gradient(135deg, #f8fffc, #ecf7f3) !important;
    border: 1px solid #cce8dd !important;
    border-radius: 28px !important;
    padding: 28px !important;
    box-shadow: 0 16px 42px rgba(2,88,61,.07) !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
  }

  .customer-main-card h2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    color: var(--primary) !important;
    letter-spacing: -0.04em !important;
    font-size: clamp(25px, 3vw, 34px) !important;
  }

  .customer-main-card .business-heading-icon,
  .customer-list-card .business-heading-icon {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Pretendard, Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .customer-main-card p {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    line-height: 1.88 !important;
    color: #374151 !important;
    font-size: 16px !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  .customer-list-card {
    position: relative !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(216,238,229,.95) !important;
    border-radius: 28px !important;
    padding: 28px !important;
    box-shadow: 0 16px 42px rgba(2,88,61,.07) !important;
    overflow: hidden !important;
  }

  .customer-list-card h3 {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
    color: var(--primary) !important;
    font-size: clamp(21px, 2.4vw, 26px) !important;
    letter-spacing: -0.04em !important;
  }

  .customer-list-tools {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin: 0 0 16px !important;
  }

  .customer-search-input {
    flex: 1 1 320px !important;
    max-width: 420px !important;
    margin: 4px 0 0 !important;
    background: #fbfdfc !important;
    border-color: #d9e5df !important;
  }

  .customer-filter-group {
    margin-left: auto !important;
    justify-content: flex-end !important;
    background: #f2f7f5 !important;
    border: 1px solid #d8eee5 !important;
    border-radius: 999px !important;
    padding: 5px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65) !important;
  }

  .filter-pill {
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    background: transparent !important;
    color: #374151 !important;
    font-family: Pretendard, Arial, sans-serif !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }

  .filter-pill.active {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 8px 18px rgba(2,88,61,.18) !important;
  }

  .customer-table-wrap {
    position: relative !important;
    z-index: 1 !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    background: white !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.04) !important;
    overflow: hidden !important;
  }

  .customer-table th,
  .notice-table th,
  .inquiry-table th {
    color: var(--primary) !important;
    font-weight: 950 !important;
    background: #f2f7f5 !important;
    font-size: 15px !important;
  }

  .customer-table td,
  .notice-table td,
  .inquiry-table td,
  .customer-table .text-link,
  .notice-table .text-link,
  .inquiry-table .text-link,
  .customer-title-cell .text-link {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .customer-title-cell .text-link {
    color: #111827 !important;
    font-weight: 800 !important;
    text-align: left !important;
  }

  .customer-detail-card {
    border: 1px solid rgba(216,238,229,.95) !important;
    border-radius: 28px !important;
    padding: 28px !important;
    box-shadow: 0 16px 42px rgba(2,88,61,.07) !important;
  }

  .customer-detail-head {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid #cce8dd;
    border-radius: 24px;
    background: radial-gradient(circle at 92% 18%, rgba(2,88,61,.12), transparent 32%), linear-gradient(135deg, #f8fffc, #ecf7f3);
  }

  .customer-detail-title-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
  }

  .customer-detail-title-row h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.045em !important;
  }

  .customer-detail-body {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
  }

  .customer-detail-body h3,
  .detail-attachment-box h3,
  .answer-box h3 {
    margin: 0 0 12px !important;
    color: var(--primary) !important;
    font-size: 19px !important;
    letter-spacing: -0.03em !important;
  }

  .detail-attachment-box {
    margin-top: 16px !important;
    padding: 16px !important;
    border: 1px solid rgba(2,88,61,.12) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.72) !important;
  }

  .attachment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
  }

  .attachment-list li {
    margin: 0;
  }

  .attach-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f2f7f5;
    border: 1px solid #d8eee5;
    color: var(--primary) !important;
    font-weight: 900;
    text-decoration: none;
  }

  .attach-link:hover {
    background: var(--primary-light);
    border-color: rgba(2,88,61,.34);
  }

  .attach-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f2f7f5;
    color: var(--primary);
    font-weight: 900;
    border: 1px solid #d8eee5;
  }

  .faq-clean-item {
    border: 1px solid rgba(216,238,229,.95) !important;
    border-radius: 22px !important;
    background: white !important;
    box-shadow: 0 10px 24px rgba(2,88,61,.045) !important;
    overflow: hidden !important;
  }

  .faq-clean-question {
    grid-template-columns: 42px minmax(0,1fr) 34px !important;
    padding: 19px 20px !important;
    background: #fff !important;
  }

  .faq-title-text,
  .faq-answer-text {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .faq-clean-answer {
    align-items: center !important;
    min-height: 84px !important;
    background: #fbfdfc !important;
  }

  @media (max-width: 760px) {
    .customer-tabs { border-radius: 24px !important; }
    .customer-tabs .tab-btn { flex: 1 1 calc(50% - 8px); }
    .customer-list-tools { align-items: stretch !important; }
    .customer-search-input { max-width: none !important; width: 100% !important; }
    .customer-filter-group { width: 100% !important; border-radius: 18px !important; justify-content: flex-start !important; }
  }


  /* ===== 2026-06-18: Training detail thumbnail + unified app alert popup ===== */
  .training-detail-hero {
    grid-template-columns: minmax(300px, 368px) minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .training-detail-thumb {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 84% 18%, rgba(255,255,255,.34), transparent 24%),
      linear-gradient(135deg, #02583D, #047452) !important;
    border: 1px solid rgba(216,238,229,.95) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 16px 42px rgba(2,88,61,.07) !important;
  }

  .training-detail-thumb img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .training-detail-thumb.is-empty span {
    display: inline-flex !important;
    width: 74px !important;
    height: 74px !important;
    border-radius: 26px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: white !important;
    font-size: 26px !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.12) !important;
  }

  .app-alert {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .app-alert.active {
    display: flex;
  }

  .app-alert-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17,24,39,.48);
    backdrop-filter: blur(7px);
  }

  .app-alert-card {
    position: relative;
    width: min(440px, 100%);
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(216,238,229,.95);
    box-shadow: 0 30px 80px rgba(17,24,39,.24);
    padding: 34px 28px 26px;
    text-align: center;
    animation: appAlertPop .22s ease both;
  }

  @keyframes appAlertPop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .app-alert-x {
    position: absolute;
    right: 16px;
    top: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .app-alert-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: 34px;
    font-weight: 950;
    box-shadow: 0 18px 34px rgba(2,88,61,.18);
  }

  .app-alert-warning .app-alert-icon {
    background: #b45309;
    box-shadow: 0 18px 34px rgba(180,83,9,.18);
  }

  .app-alert-info .app-alert-icon {
    background: #2563eb;
    box-shadow: 0 18px 34px rgba(37,99,235,.18);
  }

  .app-alert-copy h3 {
    margin: 0 0 10px;
    color: var(--primary);
    font-size: 24px;
    letter-spacing: -0.04em;
  }

  .app-alert-warning .app-alert-copy h3 {
    color: #92400e;
  }

  .app-alert-info .app-alert-copy h3 {
    color: #1d4ed8;
  }

  .app-alert-copy p {
    margin: 0;
    color: #374151;
    font-size: 16px;
    line-height: 1.75;
    word-break: keep-all;
  }

  .app-alert-ok {
    min-width: 132px;
    margin-top: 24px;
    border-radius: 999px;
  }

  @media (max-width: 900px) {
    .training-detail-hero {
      grid-template-columns: 1fr !important;
    }

    .training-detail-thumb {
      max-width: 100% !important;
    }
  }

  @media (max-width: 560px) {
    .app-alert-card {
      border-radius: 24px;
      padding: 30px 22px 24px;
    }

    .app-alert-icon {
      width: 62px;
      height: 62px;
      border-radius: 22px;
      font-size: 30px;
    }
  }



  /* ===== Mobile responsive optimization 2026-06-18 ===== */
  .mobile-menu-toggle {
    display: none;
  }

  @media (max-width: 768px) {
    body {
      overflow-x: hidden;
    }

    .header {
      position: sticky;
      top: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
    }

    .logo-wrap {
      min-width: 0;
      gap: 8px;
    }

    .logo-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
    }

    .logo-image-mark img {
      padding: 4px;
    }

    .logo {
      font-size: 14px;
      line-height: 1.18;
      margin-bottom: 2px;
      letter-spacing: -0.03em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100vw - 94px);
    }

    .logo-sub {
      font-size: 10px;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100vw - 94px);
    }

    .mobile-menu-toggle {
      display: inline-flex;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(2,88,61,.18);
      border-radius: 14px;
      background: #ffffff;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(2,88,61,.08);
    }

    .mobile-menu-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: var(--primary);
      transition: transform .22s ease, opacity .22s ease;
    }

    .header.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .header.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
      opacity: 0;
    }

    .header.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .main-nav {
      display: none;
      grid-column: 1 / -1;
      margin-top: 0;
      padding: 8px;
      border: 1px solid rgba(2,88,61,.12);
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 18px 38px rgba(0,0,0,.1);
    }

    .header.mobile-menu-open .main-nav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .main-nav button {
      width: 100%;
      padding: 11px 8px;
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.2;
      text-align: center;
    }

    .main-nav button:hover,
    .main-nav button.active:hover,
    .tab-btn:hover,
    .tab-btn.active:hover {
      transform: none;
      box-shadow: none;
    }

    .page {
      padding: 30px 14px;
      max-width: 100%;
    }

    .home-hero {
      min-height: calc(100vh - 59px);
      padding: 72px 18px;
    }

    .footer {
      padding: 34px 14px 22px;
    }

    .footer-inner {
      padding: 0;
    }

    .footer-title-block {
      margin-bottom: 18px;
      padding-bottom: 18px;
      text-align: left;
    }

    .footer-title-block h2 {
      font-size: 21px;
      line-height: 1.36;
    }

    .footer-content-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
    }

    .footer-contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
    }

    .footer-contact-card,
    .footer-right {
      width: 100%;
      min-width: 0;
      padding: 15px;
      border-radius: 18px;
    }

    .footer-right {
      position: static;
      align-items: stretch;
      margin-top: 0;
    }

    .family-select {
      width: 100%;
      min-width: 0;
      height: 42px;
      font-size: 13px;
    }

    .footer-logo-strip {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 4px;
      margin-top: 14px;
      padding-top: 14px;
    }

    .footer-logo-link {
      min-width: 0;
      width: 100%;
      height: 34px;
      padding: 3px;
      border-radius: 10px;
    }

    .footer-logo-link img {
      max-width: 100%;
      max-height: 20px;
    }

    .calendar-wrap,
    .training-table-wrap,
    .partner-table-wrap,
    .customer-table-wrap {
      width: 100%;
      overflow: visible !important;
    }

    .calendar-header {
      gap: 10px;
    }

    .calendar-header h2 {
      font-size: 22px;
    }

    .calendar-controls {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 6px;
      align-items: center;
    }

    .calendar-controls .secondary {
      padding: 10px 8px;
      font-size: 12px;
      border-radius: 12px;
    }

    .calendar-controls strong {
      min-width: 78px;
      font-size: 13px;
      text-align: center;
      white-space: nowrap;
    }

    .calendar-table-wrap {
      overflow: visible;
      border-radius: 18px;
    }

    .calendar-table {
      min-width: 0 !important;
      width: 100%;
      table-layout: fixed;
      border-spacing: 0;
    }

    .calendar-table th {
      padding: 7px 0;
      font-size: 11px;
    }

    .calendar-table td {
      height: 66px !important;
      padding: 4px 2px;
      vertical-align: top;
    }

    .calendar-date {
      min-height: 20px;
      gap: 2px;
      margin-bottom: 3px;
      align-items: center;
    }

    .calendar-date-number {
      width: 20px;
      height: 20px;
      font-size: 11px;
    }

    .calendar-holiday-name {
      max-width: calc(100% - 22px);
      font-size: 8px;
      line-height: 1.05;
    }

    .calendar-events {
      gap: 2px;
      max-height: 38px;
      overflow: hidden;
    }

    .calendar-event {
      min-height: 17px;
      padding: 2px 3px;
      border-radius: 6px;
      font-size: 10px;
      line-height: 1.15;
      box-shadow: none;
    }

    .calendar-event-title {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 10px;
      line-height: 1.15;
    }

    .calendar-event-meta {
      display: none;
    }

    .calendar-month-list {
      padding: 16px 12px;
      border-radius: 18px;
    }

    .calendar-month-list h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .calendar-month-list .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .calendar-month-list table {
      min-width: 520px;
    }

    .calendar-month-list th,
    .calendar-month-list td {
      padding: 8px 6px;
      font-size: 11px;
      line-height: 1.35;
      word-break: keep-all;
    }

    .calendar-course-link {
      font-size: 11px;
      line-height: 1.35;
    }

    .session-table,
    .partner-status-table,
    .notice-table,
    .inquiry-table {
      display: block;
      width: 100% !important;
      min-width: 0 !important;
      border-collapse: separate;
      border-spacing: 0;
    }

    .session-table thead,
    .partner-status-table thead,
    .notice-table thead,
    .inquiry-table thead {
      display: none;
    }

    .session-table tbody,
    .session-table tr,
    .partner-status-table tbody,
    .partner-status-table tr,
    .notice-table tbody,
    .notice-table tr,
    .inquiry-table tbody,
    .inquiry-table tr {
      display: block;
      width: 100%;
    }

    .session-table tr,
    .partner-status-table tr,
    .notice-table tr,
    .inquiry-table tr {
      margin-bottom: 10px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(0,0,0,.035);
    }

    .session-table td,
    .partner-status-table td,
    .notice-table td,
    .inquiry-table td {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 8px;
      width: 100% !important;
      min-width: 0 !important;
      padding: 9px 12px !important;
      border-bottom: 1px solid #edf1ef;
      font-size: 12px !important;
      line-height: 1.45 !important;
      white-space: normal !important;
      word-break: keep-all;
      align-items: center;
    }

    .session-table td:last-child,
    .partner-status-table td:last-child,
    .notice-table td:last-child,
    .inquiry-table td:last-child {
      border-bottom: 0;
    }

    .session-table td::before,
    .partner-status-table td::before,
    .notice-table td::before,
    .inquiry-table td::before {
      color: var(--primary);
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .session-table td:nth-child(1)::before { content: '회차'; }
    .session-table td:nth-child(2)::before { content: '교육기간'; }
    .session-table td:nth-child(3)::before { content: '시간'; }
    .session-table td:nth-child(4)::before { content: '모집기간'; }
    .session-table td:nth-child(5)::before { content: '모집상태'; }
    .session-table td:nth-child(6)::before { content: '신청'; }

    .session-table .primary {
      width: 100%;
      min-height: 40px;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 13px;
    }

    .partner-status-table:not(.notice-table):not(.inquiry-table) td:nth-child(1)::before { content: '기업명'; }
    .partner-status-table:not(.notice-table):not(.inquiry-table) td:nth-child(2)::before { content: '업종'; }
    .partner-status-table:not(.notice-table):not(.inquiry-table) td:nth-child(3)::before { content: '주소'; }
    .partner-status-table:not(.notice-table):not(.inquiry-table) td:nth-child(4)::before { content: '협약체결일'; }
    .partner-status-table:not(.notice-table):not(.inquiry-table) td:nth-child(5)::before { content: '협약상태'; }

    .notice-table td:nth-child(1)::before { content: '번호'; }
    .notice-table td:nth-child(2)::before { content: '제목'; }
    .notice-table td:nth-child(3)::before { content: '작성일'; }
    .notice-table td:nth-child(4)::before { content: '첨부파일'; }
    .notice-table td:nth-child(5)::before { content: '조회수'; }

    .inquiry-table td:nth-child(1)::before { content: '번호'; }
    .inquiry-table td:nth-child(2)::before { content: '제목'; }
    .inquiry-table td:nth-child(3)::before { content: '작성일'; }
    .inquiry-table td:nth-child(4)::before { content: '공개여부'; }
    .inquiry-table td:nth-child(5)::before { content: '조회수'; }
    .inquiry-table td:nth-child(6)::before { content: '처리상태'; }

    .notice-table .text-link,
    .inquiry-table .text-link,
    .customer-title-cell .text-link {
      font-size: 13px !important;
      line-height: 1.45 !important;
      white-space: normal !important;
      word-break: keep-all;
    }

    .customer-list-tools {
      gap: 8px;
    }

    .customer-list-tools .partner-search-input,
    .partner-search-input {
      min-width: 0 !important;
      width: 100% !important;
      font-size: 13px !important;
    }

    .training-detail-thumb {
      width: 100%;
      min-height: 0 !important;
      aspect-ratio: 16 / 9;
    }

    .training-detail-thumb img {
      min-height: 0 !important;
      aspect-ratio: 16 / 9;
    }

    .app-alert-card {
      width: min(92vw, 360px);
      padding: 24px 20px 20px;
      border-radius: 24px;
    }
  }

  @media (max-width: 420px) {
    .footer-logo-strip {
      gap: 3px;
    }

    .footer-logo-link {
      height: 30px;
      border-radius: 8px;
    }

    .footer-logo-link img {
      max-height: 17px;
    }

    .calendar-table td {
      height: 58px !important;
      padding: 3px 1px;
    }

    .calendar-date {
      min-height: 18px;
      gap: 1px;
    }

    .calendar-date-number {
      width: 18px;
      height: 18px;
      font-size: 10px;
    }

    .calendar-holiday-name {
      max-width: calc(100% - 19px);
      font-size: 7.5px;
      letter-spacing: -0.04em;
    }

    .calendar-event {
      padding: 2px;
      font-size: 9px;
    }

    .calendar-event-title {
      font-size: 9px;
    }

    .session-table td,
    .partner-status-table td,
    .notice-table td,
    .inquiry-table td {
      grid-template-columns: 76px minmax(0, 1fr);
      padding: 8px 10px !important;
    }
  }


  /* ===== Mobile responsive refinement v5 2026-06-18 ===== */
  /* 협약기업/고객센터 목록 표 정렬 통일 */
  .partner-status-table th,
  .partner-status-table td,
  .notice-table th,
  .notice-table td,
  .inquiry-table th,
  .inquiry-table td {
    text-align: center !important;
  }

  .partner-status-table .text-link,
  .notice-table .text-link,
  .inquiry-table .text-link,
  .customer-title-cell,
  .customer-title-cell .text-link {
    text-align: center !important;
  }

  @media (max-width: 768px) {
    /* 1) 모바일 푸터 타이틀 높이 최소화 */
    .footer {
      padding-top: 24px !important;
    }

    .footer-title-block {
      margin-bottom: 10px !important;
      padding-bottom: 10px !important;
    }

    .footer-kicker {
      font-size: 10px !important;
      line-height: 1.2 !important;
      margin: 0 0 4px !important;
    }

    .footer-title-block h2 {
      font-size: 17px !important;
      line-height: 1.22 !important;
      letter-spacing: -0.055em !important;
      margin: 0 !important;
    }

    .footer-title-block h2 strong {
      display: inline !important;
    }

    .footer-partners {
      font-size: 11px !important;
      line-height: 1.25 !important;
      margin: 5px 0 0 !important;
    }

    /* 2) 훈련신청 하위 탭을 고객센터 탭과 동일한 모바일 형태로 보정 */
    .training-tabs-top,
    .training-tabs {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
      margin: 14px 0 18px !important;
      padding: 8px !important;
      border-radius: 24px !important;
      background: linear-gradient(135deg, #edf7f3, #f7fbf9) !important;
      border: 1px solid #d8eee5 !important;
      box-shadow: 0 12px 30px rgba(2,88,61,.06) !important;
      overflow: visible !important;
    }

    .training-tabs .training-tab-card,
    .training-tabs .tab-btn {
      flex: 1 1 calc(50% - 8px) !important;
      width: auto !important;
      height: auto !important;
      min-height: 42px !important;
      padding: 10px 8px !important;
      border-radius: 999px !important;
      background: transparent !important;
      border: 1px solid transparent !important;
      box-shadow: none !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      text-align: center !important;
      white-space: nowrap !important;
      font-size: 13px !important;
      line-height: 1.1 !important;
    }

    .training-tabs .training-tab-card.active,
    .training-tabs .training-tab-card.active:hover {
      background: var(--primary) !important;
      color: #ffffff !important;
      border-color: var(--primary) !important;
    }

    .training-tabs .training-tab-icon,
    .training-tabs .training-tab-label {
      display: inline-flex !important;
      align-items: center !important;
      white-space: nowrap !important;
      line-height: 1.1 !important;
      font-size: 13px !important;
    }

    /* 2) 과정 상세페이지 모바일 가독성/높이 최적화 */
    .training-detail-shell {
      font-size: 12px !important;
    }

    .training-detail-nav {
      margin-bottom: 10px !important;
    }

    .training-detail-nav .secondary {
      min-height: 36px !important;
      padding: 9px 12px !important;
      font-size: 12px !important;
      border-radius: 12px !important;
    }

    .training-detail-hero {
      display: grid !important;
      grid-template-columns: 116px minmax(0, 1fr) !important;
      gap: 12px !important;
      align-items: center !important;
      padding: 14px !important;
      border-radius: 20px !important;
      margin-bottom: 14px !important;
    }

    .training-detail-thumb {
      width: 116px !important;
      max-width: 116px !important;
      border-radius: 14px !important;
      box-shadow: 0 10px 22px rgba(2,88,61,.08) !important;
    }

    .training-detail-thumb.is-empty span {
      width: 42px !important;
      height: 42px !important;
      border-radius: 14px !important;
      font-size: 17px !important;
    }

    .training-detail-hero-body {
      min-width: 0 !important;
    }

    .training-detail-hero-body .training-course-category {
      margin-bottom: 5px !important;
      padding: 4px 8px !important;
      font-size: 10px !important;
      line-height: 1.1 !important;
    }

    .training-detail-hero-body h2 {
      margin: 0 0 6px !important;
      font-size: 17px !important;
      line-height: 1.24 !important;
      letter-spacing: -0.055em !important;
      word-break: keep-all !important;
    }

    .training-detail-hero-body p {
      margin: 0 !important;
      font-size: 11px !important;
      line-height: 1.45 !important;
      color: #4b5563 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      word-break: keep-all !important;
    }

    .training-section-heading {
      margin: 14px 0 8px !important;
    }

    .training-section-heading h2 {
      font-size: 17px !important;
      line-height: 1.2 !important;
      margin: 0 !important;
    }

    .training-detail-shell .card {
      padding: 12px !important;
      border-radius: 18px !important;
      margin-bottom: 12px !important;
    }

    .training-detail-shell .info-table {
      table-layout: fixed !important;
      width: 100% !important;
    }

    .training-detail-shell .info-table th,
    .training-detail-shell .info-table td {
      padding: 7px 8px !important;
      font-size: 11px !important;
      line-height: 1.42 !important;
      word-break: keep-all !important;
    }

    .training-detail-shell .info-table th {
      width: 74px !important;
      white-space: nowrap !important;
      text-align: center !important;
    }

    .training-detail-shell .info-table td,
    .training-detail-shell .detail-text {
      text-align: left !important;
    }

    .training-detail-shell .training-table-wrap {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      border-radius: 18px !important;
    }

    .training-detail-shell .training-table-wrap table:not(.session-table) {
      min-width: 0 !important;
      width: 100% !important;
      table-layout: fixed !important;
    }

    .training-detail-shell .training-table-wrap table:not(.session-table) th,
    .training-detail-shell .training-table-wrap table:not(.session-table) td {
      padding: 7px 5px !important;
      font-size: 10.5px !important;
      line-height: 1.35 !important;
      word-break: keep-all !important;
      text-align: center !important;
    }

    .training-detail-shell .training-table-wrap table:not(.session-table) th:nth-child(1),
    .training-detail-shell .training-table-wrap table:not(.session-table) td:nth-child(1) {
      width: 42px !important;
    }

    .training-detail-shell .training-table-wrap table:not(.session-table) th:nth-child(2),
    .training-detail-shell .training-table-wrap table:not(.session-table) td:nth-child(2) {
      width: 82px !important;
    }

    .training-detail-shell .training-table-wrap table:not(.session-table) th:nth-child(4),
    .training-detail-shell .training-table-wrap table:not(.session-table) td:nth-child(4) {
      width: 42px !important;
    }


    .training-detail-shell .training-table-wrap table.curriculum-table th:nth-child(4),
    .training-detail-shell .training-table-wrap table.curriculum-table td.curriculum-time-cell {
      text-align: center !important;
      vertical-align: middle !important;
      white-space: nowrap !important;
    }

    .training-detail-shell .training-table-wrap table:not(.session-table) td.detail-text,
    .training-detail-shell .training-table-wrap table:not(.session-table) td:nth-child(3) {
      text-align: left !important;
      font-size: 10.2px !important;
      line-height: 1.32 !important;
    }

    .training-detail-shell .session-table td {
      grid-template-columns: 72px minmax(0, 1fr) !important;
      padding: 8px 10px !important;
      font-size: 11.5px !important;
      line-height: 1.35 !important;
      text-align: center !important;
    }

    .training-detail-shell .session-table td::before {
      text-align: left !important;
    }

    .training-detail-shell .session-table .primary,
    .training-detail-shell .session-table .secondary {
      min-height: 36px !important;
      padding: 8px 10px !important;
      font-size: 12px !important;
      border-radius: 11px !important;
    }

    /* 3~4) 모바일 카드형 목록에서도 값 정렬 통일 */
    .partner-status-table td,
    .notice-table td,
    .inquiry-table td {
      text-align: center !important;
    }

    .partner-status-table td::before,
    .notice-table td::before,
    .inquiry-table td::before {
      text-align: left !important;
    }
  }

  @media (max-width: 420px) {
    .footer-title-block h2 {
      font-size: 16px !important;
    }

    .training-detail-hero {
      grid-template-columns: 96px minmax(0, 1fr) !important;
      gap: 10px !important;
      padding: 12px !important;
    }

    .training-detail-thumb {
      width: 96px !important;
      max-width: 96px !important;
    }

    .training-detail-hero-body h2 {
      font-size: 15.5px !important;
    }

    .training-detail-hero-body p {
      font-size: 10.5px !important;
      -webkit-line-clamp: 2 !important;
    }

    .training-tabs .training-tab-card,
    .training-tabs .tab-btn {
      font-size: 12px !important;
      padding: 9px 6px !important;
    }

    .training-tabs .training-tab-icon,
    .training-tabs .training-tab-label {
      font-size: 12px !important;
    }
  }


  /* ===== Center map / curriculum alignment refinement 2026-06-18 ===== */
  .curriculum-table th:nth-child(4),
  .curriculum-table td:nth-child(4),
  .curriculum-table td.curriculum-time-cell,
  .training-detail-shell .training-table-wrap table.curriculum-table th:nth-child(4),
  .training-detail-shell .training-table-wrap table.curriculum-table td:nth-child(4),
  .training-detail-shell .training-table-wrap table.curriculum-table td.curriculum-time-cell {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }

  @media (max-width: 768px) {
    .center-map-card {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }

    .center-map-card .map-button-row {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin: 12px 0 !important;
    }

    .center-map-card .map-button-row button {
      width: 100% !important;
      min-height: 40px !important;
      padding: 10px 8px !important;
      border-radius: 12px !important;
      font-size: 12.5px !important;
      line-height: 1.25 !important;
    }

    .center-map-card .center-map-box {
      width: 100% !important;
      margin-top: 12px !important;
      border-radius: 16px !important;
    }

    .center-map-card .center-map-frame,
    .center-map-card .map-frame {
      width: 100% !important;
      height: clamp(260px, 62vw, 340px) !important;
      min-height: 260px !important;
      max-height: 340px !important;
      display: block !important;
    }

    .center-map-card .map-help-text {
      margin-top: 9px !important;
      font-size: 11.5px !important;
      line-height: 1.45 !important;
    }

    .center-map-card .map-open-layer {
      bottom: 12px !important;
      padding: 0 12px !important;
    }

    .center-map-card .map-open-btn {
      width: auto !important;
      min-width: 132px !important;
      min-height: 38px !important;
      padding: 10px 15px !important;
      border-radius: 999px !important;
      font-size: 12.5px !important;
      line-height: 1.2 !important;
    }

    .training-detail-shell .training-table-wrap table.curriculum-table th:nth-child(4),
    .training-detail-shell .training-table-wrap table.curriculum-table td:nth-child(4),
    .training-detail-shell .training-table-wrap table.curriculum-table td.curriculum-time-cell {
      text-align: center !important;
      vertical-align: middle !important;
      white-space: nowrap !important;
    }
  }

  @media (max-width: 420px) {
    .center-map-card .center-map-frame,
    .center-map-card .map-frame {
      height: 260px !important;
      min-height: 260px !important;
      max-height: 280px !important;
    }
  }



  /* ===== 2026-06-18: Mobile tab UI unify + top edge scroll zone ===== */
  .mobile-top-scroll-zone {
    display: none;
  }

  @media (max-width: 768px) {
    .mobile-top-scroll-zone {
      display: block !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 12px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      background: transparent !important;
      cursor: pointer !important;
      z-index: 9999 !important;
      opacity: 0 !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    #business .business-tabs,
    #center .center-tabs,
    #partners .partner-tabs {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
      margin: 18px 0 24px !important;
      padding: 8px !important;
      border-radius: 24px !important;
      background: #eef3f0 !important;
      border: 0 !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    #business .business-tabs .tab-btn,
    #center .center-tabs .tab-btn,
    #partners .partner-tabs .tab-btn {
      flex: 1 1 calc(50% - 8px) !important;
      width: auto !important;
      min-width: 0 !important;
      min-height: 44px !important;
      padding: 11px 10px !important;
      border-radius: 999px !important;
      border: 1px solid transparent !important;
      background: transparent !important;
      color: #111827 !important;
      font-size: 14px !important;
      font-weight: 900 !important;
      line-height: 1.25 !important;
      text-align: center !important;
      white-space: normal !important;
      word-break: keep-all !important;
      box-shadow: none !important;
      transform: none !important;
    }

    #business .business-tabs .tab-btn:hover,
    #center .center-tabs .tab-btn:hover,
    #partners .partner-tabs .tab-btn:hover {
      background: var(--primary-light) !important;
      color: var(--primary) !important;
      border-color: rgba(2,88,61,.24) !important;
      transform: none !important;
      box-shadow: none !important;
    }

    #business .business-tabs .tab-btn.active,
    #business .business-tabs .tab-btn.active:hover,
    #center .center-tabs .tab-btn.active,
    #center .center-tabs .tab-btn.active:hover,
    #partners .partner-tabs .tab-btn.active,
    #partners .partner-tabs .tab-btn.active:hover {
      background: var(--primary) !important;
      color: white !important;
      border-color: var(--primary) !important;
      box-shadow: none !important;
    }
  }

  @media (max-width: 420px) {
    #business .business-tabs .tab-btn,
    #center .center-tabs .tab-btn,
    #partners .partner-tabs .tab-btn {
      font-size: 13px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
  }



  /* ===== Mobile unified sub-tab design 2026-06-18 =====
     기준: 훈련신청 > 전체일정 / AX 일반훈련 / AX 전문훈련 / AX 확산행사 탭
     적용: 사업안내, 센터소개, 훈련신청, 협약기업, 고객센터 하위 탭 공통
  */
  @media (max-width: 768px) {
    .tabs,
    .business-tabs,
    .center-tabs,
    .training-tabs-top,
    .training-tabs,
    .partner-tabs,
    .customer-tabs {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
      margin: 14px 0 18px !important;
      padding: 8px !important;
      border-radius: 24px !important;
      background: linear-gradient(135deg, #edf7f3, #f7fbf9) !important;
      border: 1px solid #d8eee5 !important;
      box-shadow: 0 12px 30px rgba(2,88,61,.06) !important;
      overflow: visible !important;
    }

    .tabs .tab-btn,
    .business-tabs .tab-btn,
    .center-tabs .tab-btn,
    .training-tabs .training-tab-card,
    .training-tabs .tab-btn,
    .partner-tabs .tab-btn,
    .customer-tabs .tab-btn {
      flex: 1 1 calc(50% - 8px) !important;
      width: auto !important;
      max-width: none !important;
      height: auto !important;
      min-height: 42px !important;
      padding: 10px 8px !important;
      border-radius: 999px !important;
      background: transparent !important;
      border: 1px solid transparent !important;
      box-shadow: none !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      text-align: center !important;
      white-space: nowrap !important;
      word-break: keep-all !important;
      font-size: 13px !important;
      line-height: 1.1 !important;
      font-weight: 900 !important;
      letter-spacing: -0.03em !important;
      transform: none !important;
      transition: background .18s ease, color .18s ease, border-color .18s ease !important;
    }

    .tabs .tab-btn:hover,
    .business-tabs .tab-btn:hover,
    .center-tabs .tab-btn:hover,
    .training-tabs .training-tab-card:hover,
    .training-tabs .tab-btn:hover,
    .partner-tabs .tab-btn:hover,
    .customer-tabs .tab-btn:hover {
      background: var(--primary-light) !important;
      color: var(--primary) !important;
      border-color: rgba(2,88,61,.24) !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .tabs .tab-btn.active,
    .tabs .tab-btn.active:hover,
    .business-tabs .tab-btn.active,
    .business-tabs .tab-btn.active:hover,
    .center-tabs .tab-btn.active,
    .center-tabs .tab-btn.active:hover,
    .training-tabs .training-tab-card.active,
    .training-tabs .training-tab-card.active:hover,
    .training-tabs .tab-btn.active,
    .training-tabs .tab-btn.active:hover,
    .partner-tabs .tab-btn.active,
    .partner-tabs .tab-btn.active:hover,
    .customer-tabs .tab-btn.active,
    .customer-tabs .tab-btn.active:hover {
      background: var(--primary) !important;
      color: #ffffff !important;
      border-color: var(--primary) !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .training-tabs .training-tab-icon,
    .training-tabs .training-tab-label {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
      line-height: 1.1 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
    }
  }

  @media (max-width: 420px) {
    .tabs .tab-btn,
    .business-tabs .tab-btn,
    .center-tabs .tab-btn,
    .training-tabs .training-tab-card,
    .training-tabs .tab-btn,
    .partner-tabs .tab-btn,
    .customer-tabs .tab-btn {
      min-height: 40px !important;
      padding: 9px 6px !important;
      font-size: 12.5px !important;
      letter-spacing: -0.045em !important;
    }

    .training-tabs .training-tab-icon,
    .training-tabs .training-tab-label {
      font-size: 12.5px !important;
    }
  }


  /* ===== 2026-06-18 추가 보완: 모바일 하위 탭을 훈련신청 탭 기준으로 완전 통일 =====
     기준: 훈련신청 > 전체일정 / AX 일반훈련 / AX 전문훈련 / AX 확산행사
     적용: 사업안내, 센터소개, 협약기업, 고객센터 하위 탭
  */
  @media (max-width: 768px) {
    #business .business-tabs,
    #center .center-tabs,
    #partners .partner-tabs,
    #notice .customer-tabs,
    .customer-tabs {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100% !important;
      margin: 14px 0 18px !important;
      padding: 8px !important;
      border-radius: 24px !important;
      background: linear-gradient(135deg, #edf7f3, #f7fbf9) !important;
      border: 1px solid #d8eee5 !important;
      box-shadow: 0 12px 30px rgba(2,88,61,.06) !important;
      overflow: visible !important;
    }

    #business .business-tabs .tab-btn,
    #center .center-tabs .tab-btn,
    #partners .partner-tabs .tab-btn,
    #notice .customer-tabs .tab-btn,
    .customer-tabs .tab-btn {
      flex: 1 1 calc(50% - 8px) !important;
      width: auto !important;
      max-width: none !important;
      height: auto !important;
      min-height: 42px !important;
      padding: 10px 8px !important;
      border-radius: 999px !important;
      background: transparent !important;
      border: 1px solid transparent !important;
      box-shadow: none !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      text-align: center !important;
      white-space: nowrap !important;
      word-break: keep-all !important;
      font-size: 13px !important;
      line-height: 1.1 !important;
      font-weight: 900 !important;
      letter-spacing: -0.03em !important;
      color: #111827 !important;
      transform: none !important;
      transition: background .18s ease, color .18s ease, border-color .18s ease !important;
    }

    #business .business-tabs .tab-btn:hover,
    #center .center-tabs .tab-btn:hover,
    #partners .partner-tabs .tab-btn:hover,
    #notice .customer-tabs .tab-btn:hover,
    .customer-tabs .tab-btn:hover {
      background: var(--primary-light) !important;
      color: var(--primary) !important;
      border-color: rgba(2,88,61,.24) !important;
      box-shadow: none !important;
      transform: none !important;
    }

    #business .business-tabs .tab-btn.active,
    #business .business-tabs .tab-btn.active:hover,
    #center .center-tabs .tab-btn.active,
    #center .center-tabs .tab-btn.active:hover,
    #partners .partner-tabs .tab-btn.active,
    #partners .partner-tabs .tab-btn.active:hover,
    #notice .customer-tabs .tab-btn.active,
    #notice .customer-tabs .tab-btn.active:hover,
    .customer-tabs .tab-btn.active,
    .customer-tabs .tab-btn.active:hover {
      background: var(--primary) !important;
      color: #ffffff !important;
      border-color: var(--primary) !important;
      box-shadow: none !important;
      transform: none !important;
    }
  }

  @media (max-width: 420px) {
    #business .business-tabs .tab-btn,
    #center .center-tabs .tab-btn,
    #partners .partner-tabs .tab-btn,
    #notice .customer-tabs .tab-btn,
    .customer-tabs .tab-btn {
      min-height: 40px !important;
      padding: 9px 6px !important;
      font-size: 12.5px !important;
      letter-spacing: -0.045em !important;
    }
  }


  /* ===== Calendar continuous multi-day event bars v2 ===== */
  .calendar-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-week-head {
    min-width: 920px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #f2f7f5;
    border-bottom: 1px solid var(--line);
  }

  .calendar-week-head span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    color: #374151;
    font-weight: 950;
    border-right: 1px solid var(--line);
  }

  .calendar-week-head span:last-child {
    border-right: 0;
  }

  .calendar-week-head .sun {
    color: #dc2626;
  }

  .calendar-week-head .sat {
    color: #2563eb;
  }

  .calendar-grid {
    min-width: 920px;
    background: white;
  }

  .calendar-week-row {
    position: relative;
    min-height: calc(104px + (var(--calendar-lanes, 1) * 28px));
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }

  .calendar-week-row:last-child {
    border-bottom: 0;
  }

  .calendar-days-layer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .calendar-day-cell {
    position: relative;
    min-width: 0;
    padding: 8px 8px 6px;
    background: #fff;
    border-right: 1px solid var(--line);
  }

  .calendar-day-cell:last-child {
    border-right: 0;
  }

  .calendar-day-cell.calendar-empty {
    background: #f8faf9 !important;
  }

  .calendar-day-cell.today {
    background: #f3fbf7;
    box-shadow: inset 0 0 0 2px rgba(2,88,61,.25);
  }

  .calendar-event-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 42px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 24px;
    gap: 4px 0;
    padding: 0 5px 7px;
    pointer-events: none;
  }

  .calendar-event-bar {
    pointer-events: auto;
    position: relative;
    grid-row: calc(var(--event-lane) + 1);
    min-width: 0;
    min-height: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 -1px;
    padding: 3px 9px;
    border: 0;
    color: white;
    font-family: Pretendard, Arial, sans-serif;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 5px 12px rgba(0,0,0,.10);
    overflow: hidden;
    z-index: 2;
  }

  .calendar-event-bar.is-start {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
  }

  .calendar-event-bar.is-end {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
  }

  .calendar-event-bar.is-continued-start {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .calendar-event-bar.is-continued-end {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .calendar-event-bar:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
    z-index: 4;
  }

  .calendar-event-bar .calendar-event-title {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
  }

  .calendar-event-bar.is-multi-day .calendar-event-title {
    text-overflow: clip;
  }

  .calendar-event-bar .calendar-event-meta {
    flex: 0 0 auto;
    display: inline-flex;
    margin: 0;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    opacity: .92;
    white-space: nowrap;
  }

  .calendar-event-bar.is-single-day .calendar-event-meta {
    display: none;
  }

  @media (max-width: 900px) {
    .calendar-grid-wrap {
      overflow-x: auto !important;
      border-radius: 18px;
    }

    .calendar-week-head,
    .calendar-grid {
      min-width: 760px;
    }

    .calendar-week-head span {
      min-height: 34px;
      font-size: 12px;
    }

    .calendar-week-row {
      min-height: calc(74px + (var(--calendar-lanes, 1) * 23px));
    }

    .calendar-day-cell {
      padding: 4px 5px;
    }

    .calendar-event-layer {
      top: 30px;
      grid-auto-rows: 20px;
      gap: 3px 0;
      padding: 0 3px 5px;
    }

    .calendar-event-bar {
      height: 19px;
      min-height: 19px;
      padding: 2px 6px;
      gap: 5px;
      border-radius: 7px;
      box-shadow: none;
    }

    .calendar-event-bar .calendar-event-title {
      font-size: 10.5px;
    }

    .calendar-event-bar .calendar-event-meta {
      font-size: 9px;
    }
  }

  @media (max-width: 520px) {
    .calendar-week-head,
    .calendar-grid {
      min-width: 700px;
    }

    .calendar-week-row {
      min-height: calc(68px + (var(--calendar-lanes, 1) * 21px));
    }

    .calendar-date {
      min-height: 20px;
      margin-bottom: 0;
    }

    .calendar-date-number {
      width: 20px;
      height: 20px;
      font-size: 11px;
    }

    .calendar-holiday-name {
      max-width: calc(100% - 22px);
      font-size: 8px;
      line-height: 1.05;
    }

    .calendar-event-layer {
      top: 29px;
      grid-auto-rows: 19px;
    }

    .calendar-event-bar {
      height: 18px;
      min-height: 18px;
      padding: 2px 5px;
    }

    .calendar-event-bar .calendar-event-title {
      font-size: 10px;
    }

    .calendar-event-bar .calendar-event-meta {
      display: none;
    }
  }


  /* ===== Mobile no-scroll calendar + large view button ===== */
  .calendar-large-view-btn {
    display: none;
    white-space: nowrap;
  }

  .calendar-mobile-guide {
    display: none;
    margin: -4px 0 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fffc;
    border: 1px solid #d8eee5;
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
    word-break: keep-all;
  }

  .calendar-mobile-guide strong {
    color: var(--primary);
    font-weight: 950;
  }

  @media (max-width: 900px) {
    .calendar-grid-wrap {
      overflow-x: hidden !important;
      overflow-y: visible !important;
      width: 100% !important;
      border-radius: 18px !important;
    }

    .calendar-week-head,
    .calendar-grid {
      min-width: 0 !important;
      width: 100% !important;
    }

    .calendar-week-head {
      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .calendar-week-head span {
      min-height: 30px !important;
      font-size: 11px !important;
      padding: 0 !important;
    }

    .calendar-week-row {
      min-height: calc(62px + (var(--calendar-lanes, 1) * 18px)) !important;
    }

    .calendar-days-layer,
    .calendar-event-layer {
      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .calendar-day-cell {
      padding: 3px 2px !important;
    }

    .calendar-date {
      min-height: 18px !important;
      margin-bottom: 0 !important;
      gap: 1px !important;
    }

    .calendar-date-number {
      width: 17px !important;
      height: 17px !important;
      font-size: 10px !important;
      line-height: 17px !important;
    }

    .calendar-holiday-name {
      max-width: calc(100% - 18px) !important;
      font-size: 6.8px !important;
      line-height: 1.05 !important;
      letter-spacing: -0.04em !important;
    }

    .calendar-event-layer {
      top: 25px !important;
      grid-auto-rows: 19px !important;
      gap: 2px 0 !important;
      padding: 0 2px 4px !important;
    }

    .calendar-event-bar {
      height: 17px !important;
      min-height: 17px !important;
      margin: 0 -1px !important;
      padding: 1px 3px !important;
      gap: 3px !important;
      border-radius: 5px !important;
      box-shadow: none !important;
    }

    .calendar-event-bar.is-start {
      border-top-left-radius: 5px !important;
      border-bottom-left-radius: 5px !important;
    }

    .calendar-event-bar.is-end {
      border-top-right-radius: 5px !important;
      border-bottom-right-radius: 5px !important;
    }

    .calendar-event-bar.is-continued-start {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    .calendar-event-bar.is-continued-end {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    .calendar-event-bar .calendar-event-title {
      font-size: 7.8px !important;
      letter-spacing: -0.06em !important;
    }

    .calendar-event-bar .calendar-event-meta {
      display: inline-flex !important;
      flex: 0 0 auto !important;
      font-size: 6.8px !important;
      letter-spacing: -0.08em !important;
      max-width: 38% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .calendar-mobile-guide {
      display: block;
    }

    .calendar-controls {
      width: 100%;
      display: grid !important;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px !important;
    }

    .calendar-controls strong {
      grid-column: 1 / -1;
      grid-row: 1;
      width: 100%;
      min-width: 0 !important;
      text-align: center;
      font-size: 17px !important;
    }

    #prevMonth {
      grid-column: 1;
      grid-row: 2;
    }

    #nextMonth {
      grid-column: 3;
      grid-row: 2;
    }

    .calendar-large-view-btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      grid-column: 2;
      grid-row: 2;
      min-width: 88px;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  }

  @media (max-width: 520px) {
    .calendar-week-head,
    .calendar-grid {
      min-width: 0 !important;
    }

    .calendar-week-row {
      min-height: calc(56px + (var(--calendar-lanes, 1) * 15px)) !important;
    }

    .calendar-week-head span {
      min-height: 26px !important;
      font-size: 10px !important;
    }

    .calendar-day-cell {
      padding: 2px 1px !important;
    }

    .calendar-date-number {
      width: 15px !important;
      height: 15px !important;
      font-size: 9px !important;
      line-height: 15px !important;
    }

    .calendar-holiday-name {
      max-width: calc(100% - 16px) !important;
      font-size: 6.2px !important;
      letter-spacing: -0.08em !important;
    }

    .calendar-event-layer {
      top: 22px !important;
      grid-auto-rows: 17px !important;
      gap: 1px 0 !important;
      padding: 0 1px 3px !important;
    }

    .calendar-event-bar {
      height: 15px !important;
      min-height: 15px !important;
      padding: 1px 2px !important;
      border-radius: 4px !important;
    }

    .calendar-event-bar.is-start {
      border-top-left-radius: 4px !important;
      border-bottom-left-radius: 4px !important;
    }

    .calendar-event-bar.is-end {
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
    }

    .calendar-event-bar .calendar-event-title {
      font-size: 6.8px !important;
      letter-spacing: -0.08em !important;
    }

    .calendar-mobile-guide {
      font-size: 11px;
      padding: 9px 10px;
    }

    .calendar-large-view-btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-width: 76px;
      font-size: 12px !important;
    }
  }


  /* ===== Calendar mobile requested refinements v4 ===== */
  @media (min-width: 901px) {
    .calendar-large-view-btn {
      display: none !important;
    }
  }

  @media (max-width: 900px) {
    .calendar-event-bar.is-single-day .calendar-event-meta,
    .calendar-event-bar .calendar-event-meta {
      display: inline-flex !important;
    }

    .calendar-event-bar .calendar-event-title {
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }
  }

  @media (max-width: 520px) {
    .calendar-event-bar .calendar-event-meta {
      font-size: 5.8px !important;
      max-width: 42% !important;
    }
  }