.prog-hero {
    position: relative;
    height: 200px;
    background:
      radial-gradient(ellipse at 85% 110%, rgba(255,255,255,0.4), transparent 50%),
      linear-gradient(180deg, #8BC5E6 0%, #B8DDF1 55%, #E8F3FA 100%);
    overflow: hidden;
  }
  .prog-hero .hero-stage {
    position: absolute;
    left: -10%; right: -10%;
    bottom: -10%;
    height: 38%;
    background: linear-gradient(180deg, #A9C287 0%, #6E9855 60%, #527A3D 100%);
    border-radius: 50% 50% 0 0 / 70% 70% 0 0;
    box-shadow: inset 0 6px 0 rgba(255,255,255,0.18);
    z-index: 1;
  }
  .prog-hero .hero-cloud {
    position: absolute;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(92,155,196,0.15);
    z-index: 1;
  }
  .prog-hero .hero-cloud::before,
  .prog-hero .hero-cloud::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 999px;
  }
  .prog-hero .cloud-1 { width: 110px; height: 26px; top: 28px; left: 8%; }
  .prog-hero .cloud-1::before { width: 40px; height: 40px; top: -22px; left: 18px; }
  .prog-hero .cloud-1::after  { width: 30px; height: 30px; top: -14px; left: 56px; }
  .prog-hero .cloud-2 { width: 80px; height: 20px; top: 60px; right: 30%; opacity: 0.85; }
  .prog-hero .cloud-2::before { width: 30px; height: 30px; top: -16px; left: 12px; }
  .prog-hero .cloud-2::after  { width: 22px; height: 22px; top: -10px; left: 38px; }
  .prog-hero .hero-dino {
    position: absolute;
    right: 16px;
    bottom: 0;
    height: 75%;
    width: auto;
    z-index: 3;
    transform-origin: bottom center;
    animation: heroDinoSway 2.6s ease-in-out infinite;
  }
  .prog-hero .hero-dino svg,
  .prog-hero .hero-dino img {
    height: 100%; width: auto; display: block;
    filter: drop-shadow(0 6px 10px rgba(30,50,20,0.25));
  }
  @keyframes heroDinoSway {
    0%, 100% { transform: rotate(-2.5deg); }
    50%      { transform: rotate(2.5deg); }
  }
  .prog-hero .container.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .prog-hero h1 {
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.35;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px 0;
    max-width: 60%;
  }
  .prog-hero p.lead {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
    max-width: 60%;
  }

  .prog-section { padding: 80px 0; }
  .tab-menu + .prog-section { padding-top: 10px; }
  .prog-section.alt { background: var(--bg-soft); }
  .prog-section h2 {
    font-size: clamp(24px, 2.6vw, 34px);
    letter-spacing: -0.025em;
    margin-bottom: 10px;
  }
  .prog-section .sub {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 36px;
  }

  /* ──────── 프로그램 소개 카드 ──────── */
  .intro-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 6px solid var(--sage-500);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    box-shadow: var(--shadow-sm);
  }
  .intro-card .icon-round {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F2C66B, #EF8A6A);
    display: grid; place-items: center;
    font-size: 38px;
    flex-shrink: 0;
  }
  .intro-card .icon-round img {
    width: 70%; height: 70%;
    object-fit: contain;
  }
  .intro-card .tag-small {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    color: var(--sage-600);
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .intro-card h3 {
    font-size: 22px; letter-spacing: -0.02em;
    margin-bottom: 10px;
  }
  .intro-card p {
    font-size: 15.5px;
    color: var(--ink-soft);
    line-height: 1.75;
  }

  /* ──────── 한눈에 보기 ──────── */
  .overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 36px;
  }
  .overview-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
  }
  .overview-item::before {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--sage-50);
    opacity: 0.6;
  }
  .overview-item .label {
    font-size: 12px;
    font-weight: 700;
    color: var(--sage-600);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    position: relative;
  }
  .overview-item .val {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.4;
    position: relative;
  }
  .overview-item .val small {
    display: block;
    font-weight: 500;
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px;
  }

  /* ──────── 기수 일정표 ──────── */
  .schedule-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .schedule-header {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 1fr;
    background: var(--sage-700);
    color: #fff;
    padding: 16px 24px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
  }
  .schedule-row {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 1fr;
    padding: 18px 24px;
    border-top: 1px solid var(--line);
    align-items: center;
    transition: background 0.15s;
  }
  .schedule-row:hover { background: var(--bg-soft); }
  .schedule-row .period-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 30px;
    background: var(--sage-100);
    color: var(--sage-700);
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.01em;
  }
  .schedule-row .date { font-weight: 600; font-size: 14.5px; color: var(--ink); }
  .schedule-row .date small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
  .schedule-row .status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
  }
  .schedule-row .status.upcoming { background: var(--butter); color: #8B5E16; }
  .schedule-row .status.open { background: #D6EBC8; color: var(--sage-700); }
  .schedule-row .status.closed { background: #F4E4D4; color: #8B5E16; }
  .schedule-row .status.ended { background: #DDD; color: #555; }

  /* ──────── 신청 폼 그리드 (schedule-wrap 패턴 차용) ──────── */
  .form-grid {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .form-grid .form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    transition: background 0.12s;
  }
  .form-grid .form-row:last-child { border-bottom: none; }
  .form-grid .form-row:hover { background: var(--bg-soft); }
  .form-grid .form-row .form-label {
    padding-top: 10px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
  }
  .form-grid .form-row .form-label em {
    color: var(--coral);
    margin-left: 2px;
    font-style: normal;
    font-weight: 700;
  }
  .form-grid .form-row .form-input input[type="text"],
  .form-grid .form-row .form-input input[type="password"],
  .form-grid .form-row .form-input input[type="number"],
  .form-grid .form-row .form-input input[type="email"],
  .form-grid .form-row .form-input input[type="tel"],
  .form-grid .form-row .form-input input[type="date"],
  .form-grid .form-row .form-input select,
  .form-grid .form-row .form-input textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14.5px;
    font-family: inherit;
    background: #fff;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
  }
  .form-grid .form-row .form-input input:focus,
  .form-grid .form-row .form-input select:focus,
  .form-grid .form-row .form-input textarea:focus {
    outline: none;
    border-color: var(--sage-400);
    box-shadow: 0 0 0 3px rgba(110, 152, 85, 0.15);
  }
  .form-grid .form-row .form-input textarea { resize: vertical; min-height: 100px; }
  .form-grid .form-row .form-input .desc {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted);
  }
  @media (max-width: 720px) {
    .form-grid .form-row {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 14px 16px;
    }
    .form-grid .form-row .form-label { padding-top: 0; }
  }

  /* ──────── 폼 섹션 타이틀 (그룹 헤더, sage 좌측 강조선) ──────── */
  .form-section-title {
    margin: 32px 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    padding: 6px 0 6px 12px;
    border-left: 4px solid var(--sage-500);
    line-height: 1.2;
  }
  .form-section-title:first-child { margin-top: 0; }
  .form-input .age-label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 500;
  }
  .form-input .desc-inline { font-size: 13px; color: var(--muted); margin-left: 6px; }
  .form-input label { cursor: pointer; }
  .form-input input[type="radio"],
  .form-input input[type="checkbox"] {
    accent-color: var(--sage-500);
    cursor: pointer;
    margin-right: 4px;
  }
  .btn-search-addr {
    padding: 10px 16px;
    background: var(--sage-500);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .btn-search-addr:hover { background: var(--sage-600); }
  .age-cnt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  @media (max-width: 720px) {
    .age-cnt-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ──────── 약관·동의 블록 (참조: nosmk.co.kr 패턴) ──────── */
  .consent-block { margin-top: 24px; }
  .consent-block .consent-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .consent-block .consent-box {
    height: 140px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .consent-block .consent-check {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink);
  }
  .consent-block .consent-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--sage-500);
    cursor: pointer;
  }
  .consent-block .consent-check label { cursor: pointer; }
  .consent-block .consent-box .consent-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
  }
  .consent-block .consent-box .consent-table th {
    background: var(--sage-700);
    color: #fff;
    padding: 6px 8px;
    text-align: center;
    font-weight: 600;
    border: 1px solid var(--sage-700);
  }
  .consent-block .consent-box .consent-table td {
    padding: 6px 8px;
    border: 1px solid var(--line);
    vertical-align: middle;
    color: var(--ink-soft);
  }

  /* ──────── 신청/제출 CTA 버튼 ──────── */
  .btn-area {
    margin-top: 40px;
    text-align: center;
  }
  .btn-area .btn-apply {
    display: inline-block;
    padding: 14px 56px;
    background: var(--sage-500);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 4px 12px -4px rgba(46, 72, 35, 0.25);
  }
  .btn-area .btn-apply:hover { background: var(--sage-600); }
  .btn-area .btn-apply:active { transform: translateY(1px); }

  /* ──────── 신청 완료 페이지 (PB-6) ──────── */
  .complete-icon {
    width: 80px; height: 80px;
    margin: 0 auto 24px;
    background: var(--sage-500);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 44px; font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 24px -8px rgba(46, 72, 35, 0.4);
  }
  .complete-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--ink);
  }
  .complete-confirm-no {
    text-align: center;
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0 0 32px;
  }
  .complete-confirm-no strong {
    color: var(--sage-700);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-left: 8px;
  }
  .complete-notice {
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--sage-50);
    border-radius: 12px;
    text-align: center;
  }
  .complete-notice p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
  .complete-notice p + p { margin-top: 6px; }
  .complete-notice p.muted { font-size: 13px; color: var(--ink-soft); }

  /* btn-area 듀얼 CTA (홈으로 + 조회) */
  .btn-area.dual { display: flex; gap: 12px; justify-content: center; }
  .btn-outline {
    display: inline-block;
    padding: 14px 56px;
    background: #fff;
    color: var(--sage-700);
    border: 1px solid var(--sage-300);
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    box-shadow: 0 2px 6px -3px rgba(46, 72, 35, 0.15);
  }
  .btn-outline:hover { background: var(--sage-50); border-color: var(--sage-500); color: var(--sage-700); }
  .btn-area.dual .btn-apply,
  .btn-area.dual .btn-outline { text-decoration: none; }

  /* ──────── 신청 내역 조회 페이지 (PB-7) ──────── */
  .confirm-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 32px;
    flex-wrap: wrap;
  }
  .confirm-summary .label { font-size: 14.5px; color: var(--ink-soft); }
  .confirm-summary strong {
    color: var(--sage-700);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
  }
  .stat-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
  }
  .stat-badge.stat-P { background: #EEE;            color: var(--muted); }
  .stat-badge.stat-A { background: var(--sage-100); color: var(--sage-700); }
  .stat-badge.stat-R { background: #FBD4C5;         color: #A8432A; }
  .stat-badge.stat-C { background: #EEE;            color: var(--muted); }
  .admin-memo-box {
    margin-top: 12px;
    padding: 16px 18px;
    background: #FFF7E6;
    border-left: 4px solid var(--butter);
    border-radius: 8px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
  }

  /* ──────── 대상 & 조건 ──────── */
  .target-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .target-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 32px;
  }
  .target-card .title-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--line-strong);
  }
  .target-card .circle-ico {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--sage-100);
    color: var(--sage-700);
    display: grid; place-items: center;
    font-size: 20px;
    font-weight: 900;
  }
  .target-card h3 { font-size: 18px; letter-spacing: -0.02em; }
  .target-card ul { list-style: none; }
  .target-card li {
    font-size: 14.5px;
    color: var(--ink-soft);
    padding: 6px 0 6px 22px;
    position: relative;
    line-height: 1.65;
  }
  .target-card li::before {
    content: '';
    position: absolute;
    left: 4px; top: 14px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sage-500);
  }
  .target-card li.note {
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
  }
  .target-card li.note::before {
    background: none;
    content: '※';
    top: 8px; left: 0;
    width: auto; height: auto;
    color: var(--accent-coral);
    font-style: normal;
    font-weight: 700;
  }

  /* ──────── 운영방법 플로우 ──────── */
  .method-wrap {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 44px 48px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }
  .method-title {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }
  .method-title .m-num {
    font-family: Georgia, serif;
    font-size: 14px;
    color: var(--sage-600);
    font-weight: 700;
  }
  .method-title h3 { font-size: 22px; letter-spacing: -0.025em; }
  .method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .method-block h4 {
    font-size: 16px;
    color: var(--sage-700);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }
  .method-block p {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.8;
    margin-bottom: 14px;
  }
  .weeks-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 16px;
  }
  .week-pill {
    text-align: center;
    padding: 12px 8px;
    background: var(--sage-50);
    border: 1px solid var(--sage-100);
    border-radius: 10px;
  }
  .week-pill .w-label {
    font-size: 11px;
    color: var(--sage-600);
    font-weight: 700;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 4px;
  }
  .week-pill .w-val {
    font-size: 14px;
    color: var(--ink);
    font-weight: 800;
  }

  /* ──────── 기관 협조사항 ──────── */
  .coop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .coop-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    position: relative;
    min-height: 180px;
    display: flex; flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .coop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .coop-card .co-num {
    font-family: Georgia, serif;
    font-size: 36px;
    font-weight: 900;
    color: var(--sage-500);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 16px;
  }
  .coop-card h4 {
    font-size: 15px;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    line-height: 1.4;
  }
  .coop-card p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.65;
    margin-top: auto;
  }

  /* ──────── CTA ──────── */
  .apply-cta {
    background: linear-gradient(135deg, var(--sage-600), var(--sage-700));
    border-radius: var(--radius-xl);
    padding: 56px 60px;
    color: #fff;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .apply-cta h2 { color: #fff; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.02em; }
  .apply-cta p { color: rgba(255,255,255,0.88); margin-top: 14px; font-size: 15px; }
  .apply-cta .btn-primary { background: var(--butter); color: var(--sage-700); margin-top: 22px; }
  .apply-cta .btn-primary:hover { background: #f5d488; }
  .apply-cta .orb {
    width: 240px; aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #A9C287, #3F6130);
    justify-self: end;
    position: relative;
  }
  .apply-cta .orb::after {
    content: '';
    position: absolute; inset: -18px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.35);
    animation: spin 24s linear infinite;
  }

  @media (max-width: 960px) {
    .overview-grid { grid-template-columns: repeat(2, 1fr); }
    .target-grid, .method-grid, .coop-grid { grid-template-columns: 1fr; }
    .coop-grid { grid-template-columns: repeat(2, 1fr); }
    .schedule-header, .schedule-row { grid-template-columns: 80px 1fr 1fr; padding: 14px 16px; }
    .schedule-header > div:nth-child(4), .schedule-row > div:nth-child(4) { display: none; }
    .apply-cta { grid-template-columns: 1fr; padding: 40px 28px; }
    .apply-cta .orb { justify-self: start; width: 180px; }
    .method-wrap, .intro-card { padding: 28px 22px; }
    .intro-card { grid-template-columns: 1fr; text-align: center; }
    .intro-card .icon-round { margin: 0 auto; }
    .notice-list li { padding: 16px 18px 16px 50px; font-size: 14px; }
    .notice-list li::before { left: 14px; width: 24px; height: 24px; font-size: 13px; }
  }

  .notice-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 14px;
  }
  .notice-list li {
    position: relative;
    padding: 18px 22px 18px 60px;
    background: #fff;
    border-left: 4px solid var(--sage-500);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
  }
  .notice-list li::before {
    content: '!';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sage-500);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
  }
  .notice-list strong {
    color: var(--sage-700);
    font-weight: 700;
  }

  /* 2depth 탭 메뉴 — 어드민 .header_middle nav 세그먼트 컨트롤 패턴 */
  .tab-menu {
    margin: 80px auto 36px;
  }
  .tab-menu ul {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 4px;
    gap: 4px;
    margin: 0 auto;
    max-width: 1200px;
    height: 60px;
    border-radius: 999px;
    border: 1px solid var(--line);
  }
  .tab-menu ul li {
    flex: 0 0 180px;
    height: 100%;
  }
  .tab-menu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: all 0.15s;
  }
  .tab-menu ul li a:hover {
    background: var(--sage-100);
    color: var(--sage-700);
  }
  .tab-menu ul li.on a {
    font-weight: 700;
    background: var(--sage-500);
    color: #fff;
  }
  @media (max-width: 720px) {
    .tab-menu ul { max-width: 100%; height: 44px; }
    .tab-menu ul li { flex: 1 1 0; min-width: 0; }
    .tab-menu ul li a { font-size: 13.5px; padding: 0 4px; }
  }

  /* ========== MX-1 business-intro 전용 ========== */

  /* intro-card 회색 톤 변형 (사업개요용) */
  .intro-card.family .icon-round {
    background: linear-gradient(135deg, #E2E8F0, #94A3B8);
  }

  /* 사업배경 카드 그리드 */
  .bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .bg-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 32px;
    position: relative;
  }
  .bg-card .bg-num {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: Georgia, serif;
    font-size: 13px; font-weight: 700;
    color: var(--sage-600); letter-spacing: 0.08em;
    margin-bottom: 16px;
  }
  .bg-card .bg-num::before {
    content: ''; width: 30px; height: 2px; background: var(--sage-500);
  }
  .bg-card h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 14px; }
  .bg-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; }

  /* 효과 하이라이트 */
  .effect-highlight {
    background: linear-gradient(135deg, #FFF8E5, #FFF0CC);
    border-radius: var(--radius-xl);
    padding: 48px 56px;
    display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
    border: 1px solid #F2DC9A;
  }
  .effect-highlight .ehi {
    width: 96px; height: 96px; border-radius: 28px;
    background: #fff;
    display: grid; place-items: center; font-size: 44px;
    box-shadow: var(--shadow-sm);
  }
  .effect-highlight .ehi.up {
    background: linear-gradient(135deg, #D6EBC8, #B5D9A0);
  }
  .effect-highlight .ehi img { width: 70%; height: 70%; object-fit: contain; }
  .effect-highlight h3 { font-size: 22px; letter-spacing: -0.025em; color: #6B4E16; margin-bottom: 12px; }
  .effect-highlight p { font-size: 15.5px; color: #6B4E16; line-height: 1.85; }

  /* 사업목적 - purpose pillars */
  .purpose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .purpose-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 32px 28px; transition: transform .2s, box-shadow .2s;
  }
  .purpose-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .purpose-card .pn {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--sage-500); color: #fff;
    display: grid; place-items: center; font-weight: 900; font-size: 17px;
    margin-bottom: 18px;
  }
  .purpose-card h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.4; }
  .purpose-card ul { list-style: none; }
  .purpose-card li {
    font-size: 13.8px; color: var(--ink-soft);
    padding: 5px 0 5px 20px; position: relative; line-height: 1.6;
  }
  .purpose-card li::before {
    content: '\2713'; position: absolute; left: 0; top: 4px;
    color: var(--sage-500); font-weight: 900; font-size: 13px;
  }

  /* 사업내용 - 3카드 */
  .prog-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .prog-card {
    background: #fff; border-radius: var(--radius-lg);
    padding: 36px 30px;
    border: 1px solid var(--line);
    position: relative; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
  }
  .prog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .prog-card .pc-icon {
    width: 64px; height: 64px; border-radius: 18px;
    display: grid; place-items: center; font-size: 30px;
    margin-bottom: 22px;
  }
  .prog-card.c1 .pc-icon { background: linear-gradient(135deg, #D6EBC8, #B5D9A0); }
  .prog-card.c2 .pc-icon { background: linear-gradient(135deg, #FBE4D0, #F7C9A8); }
  .prog-card.c3 .pc-icon { background: linear-gradient(135deg, #D9E8F2, #B0CDE0); }
  .prog-card .pc-icon img { width: 70%; height: 70%; object-fit: contain; }
  .prog-card h3 { font-size: 18px; letter-spacing: -0.02em; margin-bottom: 8px; }
  .prog-card .tag-line { font-size: 12px; color: var(--sage-600); font-weight: 700; letter-spacing: 0.06em; margin-bottom: 16px; }
  .prog-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.75; }
  .prog-card .more {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 20px;
    font-size: 13.5px; font-weight: 700; color: var(--sage-700); text-decoration: none;
    border-bottom: 1px solid var(--sage-700); padding-bottom: 2px;
  }
  .prog-card .more:hover { color: var(--sage-600); border-color: var(--sage-600); }
  .prog-card .more.soon,
  .prog-card .more.soon:hover {
    color: var(--muted);
    border-color: var(--line);
    cursor: default;
  }

  @media (max-width: 960px) {
    .bg-grid, .purpose-grid, .prog-3 { grid-template-columns: 1fr; }
    .effect-highlight { grid-template-columns: 1fr; padding: 32px 24px; }
    .effect-highlight .ehi { margin: 0 auto; }
    .intro-card { grid-template-columns: 1fr; text-align: center; padding: 28px 22px; }
    .intro-card .icon-round { margin: 0 auto; }
  }

  /* ========== MX-2 business-system 추진체계 다이어그램 ========== */
  .org-chart-wrap {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
    padding: 60px 48px;
    box-shadow: var(--shadow-sm);
    position: relative;
  }
  .org-svg-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    width: 100%; height: 100%;
    overflow: visible;
  }
  .org-tier {
    display: grid;
    align-items: stretch;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
  }
  .org-tier:last-child { margin-bottom: 0; }
  .tier-1 { grid-template-columns: 1fr 1fr 1fr; column-gap: 32px; }
  .tier-1 .slot-c { grid-column: 2; }
  .tier-2 { grid-template-columns: 1fr 1fr 1fr; column-gap: 32px; }
  .tier-3 { grid-template-columns: 1fr 1fr 1fr; column-gap: 32px; }
  .tier-4 { grid-template-columns: 1fr 1fr 1fr; column-gap: 32px; }
  .tier-4 .slot-c { grid-column: 2; }

  .org-node {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px 22px;
    text-align: center;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 96px;
  }
  .org-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .org-node .role {
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    margin-bottom: 8px; text-transform: uppercase;
  }
  .org-node h3 { font-size: 15.5px; letter-spacing: -0.02em; margin-bottom: 4px; line-height: 1.4; }
  .org-node small { font-size: 12.5px; display: block; line-height: 1.55; margin-top: 4px; }

  .lvl-top { background: #fff; border-color: var(--sage-500); color: var(--sage-500); }
  .lvl-top .role { color: var(--sage-500); font-size: 12px; }
  .lvl-top h3 { font-size: 16.5px; font-weight: 700; }
  .lvl-top small { color: var(--sage-500); font-size: 13.5px; font-weight: 700; }

  .lvl-main { background: var(--sage-500); border-color: var(--sage-500); color: #fff; }
  .lvl-main .role { color: rgba(255,255,255,0.9); }
  .lvl-main small { color: rgba(255,255,255,0.88); }

  .lvl-side { background: var(--sage-50); border-color: var(--sage-100); }
  .lvl-side .role { color: var(--sage-600); }
  .lvl-side small { color: var(--muted); }

  .lvl-team-l { background: #FFF6E5; border-color: #F2DC9A; }
  .lvl-team-l .role { color: #B8862B; }
  .lvl-team-l small { color: #8B6E2A; }

  .lvl-team-c { background: #FBE4D0; border-color: #F7C9A8; }
  .lvl-team-c .role { color: #A8432A; }
  .lvl-team-c small { color: #7A3B27; }

  .lvl-team-r { background: #D9E8F2; border-color: #B0CDE0; }
  .lvl-team-r .role { color: #2E6B8B; }
  .lvl-team-r small { color: #3A5A75; }

  .lvl-support { background: #fff; border: 2px dashed var(--sage-500); }
  .lvl-support .role { color: var(--sage-600); }
  .lvl-support small { color: var(--muted); }

  .conn-line {
    stroke: var(--sage-300, #B5D9A0);
    stroke-width: 2;
    fill: none;
    opacity: 0.3;
  }
  .arrow-head { fill: var(--sage-500); opacity: 0.3; }

  @media (max-width: 768px) {
    .org-chart-wrap { padding: 36px 22px; }
    .tier-1, .tier-2, .tier-3, .tier-4 { grid-template-columns: 1fr; column-gap: 0; row-gap: 14px; margin-bottom: 30px; }
    .tier-1 .slot-c, .tier-4 .slot-c { grid-column: 1; }
    .org-svg-overlay { display: none; }
    .org-tier::after {
      content: '\2193'; display: block; text-align: center;
      color: var(--sage-500); font-size: 22px; font-weight: 700;
      margin-top: 14px;
    }
    .org-tier:last-child::after { display: none; }
  }

  /* 협력 네트워크 카드 */
  .network-card {
    background: linear-gradient(135deg, #d9eed0, #bae7a6);
    border-radius: var(--radius-xl);
    padding: 52px 56px;
    color: #000;
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center;
  }
  .network-card h3 { color: #000; font-size: 24px; letter-spacing: -0.025em; margin-bottom: 14px; }
  .network-card p { color: #000; font-size: 15px; line-height: 1.8; }
  .network-pills { display: flex; flex-wrap: wrap; gap: 10px; }
  .network-pills span {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    color: #000;
    font-size: 13.5px; font-weight: 600;
    padding: 10px 16px; border-radius: 999px;
    backdrop-filter: blur(4px);
  }

  @media (max-width: 768px) {
    .network-card { grid-template-columns: 1fr; padding: 36px 28px; }
  }

  /* ========== MX-3 family-event 가족체험행사 ========== */

  /* intro-card: family-event 의 fa_01 사이즈 보정 */
  .intro-card .icon-round img[src*="fa_01"] {
    width: 63%; height: 63%;
  }

  /* feature 3-cards (안내) */
  .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .feat-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 32px 28px; transition: transform .2s, box-shadow .2s;
  }
  .feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .feat-card .fi {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; font-size: 24px;
    margin-bottom: 18px;
  }
  .feat-card.f1 .fi { background: linear-gradient(135deg, #D6EBC8, #B5D9A0); }
  .feat-card.f2 .fi { background: linear-gradient(135deg, #FBE4D0, #F7C9A8); }
  .feat-card.f3 .fi { background: linear-gradient(135deg, #D9E8F2, #B0CDE0); }
  .feat-card .fi img { width: 63%; height: 63%; object-fit: contain; }
  .feat-card .tag-line { font-size: 11px; color: var(--sage-600); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 8px; }
  .feat-card h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 12px; }
  .feat-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.75; }

  /* 사업기간 카드 */
  .period-card {
    background: linear-gradient(135deg, #FFF8E5, #FFF0CC);
    border: 1px solid #F2DC9A;
    border-radius: var(--radius-xl);
    padding: 40px 48px;
    display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  }
  .period-card .pi {
    width: 84px; height: 84px; border-radius: 24px; background: #fff;
    display: grid; place-items: center; font-size: 38px;
    box-shadow: var(--shadow-sm);
  }
  .period-card .pi img { width: 56%; height: 56%; object-fit: contain; }
  .period-card .ptag {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    color: #B8862B; margin-bottom: 6px;
  }
  .period-card h3 { font-size: 22px; letter-spacing: -0.02em; color: #6B4E16; margin-bottom: 6px; }
  .period-card p { font-size: 14.5px; color: #6B4E16; line-height: 1.65; }
  .period-card .span-pill {
    background: #fff; border: 1px solid #F2DC9A; border-radius: 999px;
    padding: 14px 26px;
    font-size: 16px; font-weight: 800; color: #6B4E16;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  /* 체험 내용 - 3 영역 */
  .area-block {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
  }
  .area-block:last-child { margin-bottom: 0; }
  .area-head {
    display: grid; grid-template-columns: auto 1fr;
    gap: 18px; align-items: center;
    padding: 22px 28px;
    border-bottom: 1px solid var(--line);
  }
  .area-block.a1 .area-head { background: linear-gradient(90deg, #F0F8E8, #fff); }
  .area-block.a2 .area-head { background: linear-gradient(90deg, #FFF1E5, #fff); }
  .area-block.a3 .area-head { background: linear-gradient(90deg, #EAF1F8, #fff); }
  .area-head .ai {
    width: 56px; height: 56px; border-radius: 16px;
    display: grid; place-items: center; font-size: 26px;
  }
  .area-block.a1 .ai { background: #D6EBC8; }
  .area-block.a2 .ai { background: #FBE4D0; }
  .area-block.a3 .ai { background: #D9E8F2; }
  .area-head .ai img { width: 70%; height: 70%; object-fit: contain; }
  .area-head .ai img[src*="fa_08"] { width: 56%; height: 56%; }
  .area-head .a-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--sage-600); margin-bottom: 4px; }
  .area-head h3 { font-size: 19px; letter-spacing: -0.02em; }

  .activity-row {
    display: grid; grid-template-columns: 280px 1fr;
    gap: 22px;
    padding: 22px 28px;
    border-top: 1px dashed var(--line);
  }
  .activity-row:first-of-type { border-top: 0; }
  .activity-name {
    font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.5;
    position: relative; padding-left: 16px;
  }
  .activity-name::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--sage-500);
  }
  .activity-desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.75; }

  /* 포토존 */
  .photo-card {
    background: linear-gradient(135deg, var(--sage-700), var(--sage-600));
    border-radius: var(--radius-xl);
    padding: 48px 56px;
    color: #fff;
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center;
  }
  .photo-card .ptag2 { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
  .photo-card h3 { color: #fff; font-size: 24px; letter-spacing: -0.025em; margin-bottom: 12px; line-height: 1.35; }
  .photo-card p { color: rgba(255,255,255,0.88); font-size: 14.5px; line-height: 1.8; }
  .character-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .char-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-lg);
    padding: 22px 16px;
    text-align: center;
    backdrop-filter: blur(6px);
  }
  .char-card .ci { margin: 0 auto 12px; display: grid; place-items: center; }
  .char-card .cn { font-size: 13.5px; font-weight: 700; color: #000; letter-spacing: -0.01em; }

  /* 안내 노트 */
  .note-line {
    margin-top: 18px;
    padding: 12px 18px;
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    font-size: 13.5px; color: var(--muted);
    display: flex; gap: 8px; align-items: flex-start;
  }
  .note-line::before { content: '\2139'; font-weight: 700; color: var(--sage-600); }

  @media (max-width: 768px) {
    .feat-grid { grid-template-columns: 1fr; }
    .period-card { grid-template-columns: 1fr; padding: 32px 24px; text-align: center; }
    .period-card .pi { margin: 0 auto; }
    .period-card .span-pill { justify-self: center; }
    .activity-row { grid-template-columns: 1fr; gap: 8px; }
    .photo-card { grid-template-columns: 1fr; padding: 36px 28px; }
    .character-row { grid-template-columns: repeat(3, 1fr); }
  }

  /* ========== MX-4 notice 목록 ========== */

  /* notice 페이지의 hero-dino 변형 — 새 캐릭터 (비행 자세) */
  .prog-hero .hero-dino.bird-fly {
    width: 210px;
    bottom: 60px;
  }
  .prog-hero .hero-dino.bird-fly img {
    transform: rotate(45deg);
  }


  /* 검색·필터 바 */
  .list-toolbar {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    flex-wrap: wrap; margin-bottom: 22px;
  }
  .toolbar-meta { font-size: 14px; color: var(--muted); }
  .toolbar-meta b { color: var(--ink); font-weight: 800; }
  .toolbar-meta b.point { color: var(--sage-600); }
  .toolbar-search { display: flex; gap: 8px; }
  .toolbar-search select,
  .toolbar-search input {
    height: 42px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff; font-size: 14px; color: var(--ink);
    font-family: inherit;
  }
  .toolbar-search select { padding-right: 30px; cursor: pointer; }
  .toolbar-search input { width: 240px; }
  .toolbar-search input::placeholder { color: #aab1ad; }
  .toolbar-search button {
    height: 42px; padding: 0 20px;
    background: var(--sage-600); color: #fff;
    border: 0; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background .15s;
  }
  .toolbar-search button:hover { background: var(--sage-700); }
  .toolbar-search .btn-reset {
    background: #e8ecea; color: var(--ink-soft);
  }
  .toolbar-search .btn-reset:hover { background: #d4dad6; color: var(--ink); }

  /* notice 테이블 */
  .notice-table-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  /* DataTable 2.x 가 .notice-table-wrap 안에 .dt-container 를 추가하면서 padding/layout 을
     끼우는데, 우리는 wrap 자체를 컨테이너로 쓰므로 reset */
  .notice-table-wrap .dt-container {
    padding: 0 !important;
    width: 100%;
  }
  .notice-table-wrap .dt-container > .dt-layout-row,
  .notice-table-wrap .dt-container > div {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  /* DataTable 이 .notice-table 에 자동으로 .dataTable 클래스 추가 → default rule 무력화
     + table-layout: fixed 로 columnDefs.width 강제 적용 */
  .notice-table.dataTable,
  .notice-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14.5px;
    margin: 0 !important;
    table-layout: fixed !important;
  }
  /* DataTable 이 자동 생성하는 colgroup 의 col 에 폭 강제 (columnDefs.className 매칭) */
  .notice-table colgroup col.col-no,
  .notice-table thead th.col-no,
  .notice-table tbody td.col-no { width: 78px !important; }
  .notice-table colgroup col.col-pin,
  .notice-table thead th.col-pin,
  .notice-table tbody td.col-pin { width: 96px !important; }
  .notice-table colgroup col.col-file,
  .notice-table thead th.col-file,
  .notice-table tbody td.col-file { width: 90px !important; }
  .notice-table colgroup col.col-date,
  .notice-table thead th.col-date,
  .notice-table tbody td.col-date { width: 120px !important; }
  .notice-table.dataTable thead th,
  .notice-table thead th {
    background: var(--sage-600) !important;
    padding: 16px 14px !important;
    font-size: 13px;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -0.01em;
    border-bottom: 2px solid var(--sage-100, #C7DFB5) !important;
    border-top: 0 !important;
    text-align: center;
  }
  .notice-table.dataTable tbody td,
  .notice-table tbody td {
    padding: 18px 14px !important;
    border-bottom: 1px solid var(--line) !important;
    border-top: 0 !important;
    text-align: center;
    color: var(--ink-soft);
    vertical-align: middle;
    box-shadow: none !important;
  }
  .notice-table tbody tr:last-child td { border-bottom: 0; }
  .notice-table tbody tr { transition: background .15s; }
  .notice-table tbody tr:hover { background: #FAFCF7; }

  /* 컬럼 폭 */
  .notice-table .col-no { width: 78px; }
  .notice-table .col-pin { width: 96px; }
  .notice-table .col-title { width: auto; text-align: left !important; }
  .notice-table thead th.col-title { text-align: center !important; }
  .notice-table .col-file { width: 90px; }
  .notice-table .col-date { width: 120px; }

  .notice-table td.col-no { font-size: 13.5px; font-weight: 700; color: var(--muted); }

  /* 상단공지 row */
  .notice-table tr.is-pinned { background: #F6FAF1; }
  .notice-table tr.is-pinned:hover { background: #EFF6E6; }
  .notice-table tr.is-pinned td.col-no { color: transparent; position: relative; }
  .notice-table tr.is-pinned td.col-no::after {
    content: '\2014'; color: var(--muted); font-weight: 700;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .pin-badge {
    display: inline-block;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--sage-600);
    vertical-align: middle;
  }
  .pin-empty { color: #d0d4cf; font-size: 14px; }

  /* 제목 셀 */
  .notice-title-cell { text-align: left; }
  .notice-title-cell a {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }
  .notice-title-cell a:hover { color: var(--sage-600); }

  /* 첨부 아이콘 */
  .file-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    background: var(--sage-50);
    color: var(--sage-700);
    font-size: 13px;
  }
  .file-icon img { width: 50%; height: 50%; object-fit: contain; }
  .file-empty { color: #d0d4cf; font-size: 14px; }

  /* 등록일 */
  .notice-table td.col-date {
    font-size: 13.5px;
    color: var(--muted);
    letter-spacing: 0.01em;
  }

  /* notice 페이지 커스텀 페이지네이션 (DataTable dom 의존 분리) */
  #paginationOutside { margin-top: 36px; }
  .khepi-pagination {
    display: flex; gap: 6px; justify-content: center;
    margin: 0; padding: 0;
  }
  .khepi-pagination .page-btn {
    min-width: 38px; height: 38px;
    padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    border-radius: 8px;
    font-size: 13.5px; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
  }
  .khepi-pagination .page-btn:hover:not(.disabled):not(.current) {
    border-color: var(--sage-500); color: var(--sage-600);
  }
  .khepi-pagination .page-btn.current,
  .khepi-pagination .page-btn.current:hover {
    background: var(--sage-600);
    border-color: var(--sage-600);
    color: #fff;
    cursor: default;
  }
  .khepi-pagination .page-btn.disabled,
  .khepi-pagination .page-btn.disabled:hover {
    color: #ccc; cursor: not-allowed;
    border-color: var(--line);
    background: #fff;
  }

  @media (max-width: 768px) {
    .toolbar-search input { width: 100%; }
    .toolbar-search { width: 100%; }

    /* table-layout: fixed + colgroup 폭 강제 해제 (block 카드 레이아웃 전환 위해) */
    .notice-table.dataTable,
    .notice-table { table-layout: auto !important; }
    .notice-table colgroup col.col-no,
    .notice-table colgroup col.col-pin,
    .notice-table colgroup col.col-file,
    .notice-table colgroup col.col-date { width: auto !important; }

    .notice-table.dataTable thead,
    .notice-table thead { display: none !important; }
    .notice-table.dataTable,
    .notice-table.dataTable tbody,
    .notice-table.dataTable tr,
    .notice-table.dataTable tbody td,
    .notice-table, .notice-table tbody, .notice-table tr, .notice-table td {
      display: block; width: 100% !important;
    }
    .notice-table.dataTable tbody tr,
    .notice-table tbody tr {
      padding: 16px 18px !important;
      border-bottom: 1px solid var(--line) !important;
      position: relative;
    }
    .notice-table.dataTable tbody tr:last-child,
    .notice-table tbody tr:last-child { border-bottom: 0 !important; }
    .notice-table tbody tr:hover { background: transparent; }
    .notice-table tr.is-pinned { background: #F6FAF1; }
    .notice-table.dataTable tbody td,
    .notice-table tbody td {
      padding: 0 !important;
      border-bottom: 0 !important;
      text-align: left !important;
    }
    .notice-table.dataTable tbody td.col-no,
    .notice-table td.col-no {
      display: inline-block; width: auto !important;
      font-size: 12px; color: var(--muted); font-weight: 700;
      margin-right: 8px;
    }
    .notice-table tr.is-pinned td.col-no { display: none; }
    .notice-table.dataTable tbody td.col-pin,
    .notice-table td.col-pin {
      display: inline-block; width: auto !important;
      vertical-align: middle; margin-right: 6px;
    }
    .notice-table td.col-pin .pin-empty { display: none; }
    .notice-table.dataTable tbody td.col-title,
    .notice-table td.col-title {
      display: block; width: 100% !important;
      margin-top: 6px;
    }
    .notice-title-cell a { -webkit-line-clamp: 2; font-size: 15px; line-height: 1.45; }
    .notice-table.dataTable tbody td.col-file,
    .notice-table td.col-file {
      display: inline-block; width: auto !important;
      margin-top: 10px; margin-right: 12px;
      vertical-align: middle;
    }
    .notice-table td.col-file .file-empty { display: none; }
    .notice-table.dataTable tbody td.col-date,
    .notice-table td.col-date {
      display: inline-block; width: auto !important;
      margin-top: 10px;
      vertical-align: middle;
    }
  }

  /* ========== MX-5 notice 상세 ========== */
  .post-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .post-head {
    padding: 32px 40px 28px;
    border-bottom: 1px solid var(--line);
  }
  .post-title {
    font-size: clamp(20px, 2.4vw, 28px);
    letter-spacing: -0.025em;
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--ink);
  }
  .post-meta {
    display: flex; gap: 24px; align-items: center;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
  }
  .meta-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--muted);
  }
  .meta-item .mi-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--sage-600);
    text-transform: uppercase;
  }
  .meta-item .mi-value {
    font-size: 13.5px; color: var(--ink);
    font-weight: 600;
  }
  .meta-item .mi-value.num { letter-spacing: 0.02em; }
  .meta-divider { width: 1px; height: 14px; background: var(--line); }

  .post-body {
    padding: 40px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--ink-soft);
  }
  .post-body p { margin-bottom: 18px; }
  .post-body p:last-child { margin-bottom: 0; }
  .post-body h3 {
    font-size: 18px; letter-spacing: -0.02em;
    color: var(--ink);
    margin: 32px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sage-100, #C7DFB5);
  }
  .post-body h3:first-child { margin-top: 0; }
  .post-body strong { color: var(--ink); font-weight: 700; }
  .post-body ul, .post-body ol { margin: 14px 0 18px; padding-left: 22px; }
  .post-body li { padding: 4px 0; }
  .post-body table {
    width: 100%; border-collapse: collapse;
    margin: 18px 0;
    font-size: 14px;
  }
  .post-body table th {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 10px 14px;
    font-weight: 700; color: var(--ink);
    text-align: left;
  }
  .post-body table td {
    border: 1px solid var(--line);
    padding: 10px 14px;
    color: var(--ink-soft);
  }
  .post-body .callout {
    background: #FFF8E5;
    border: 1px solid #F2DC9A;
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin: 22px 0;
    font-size: 14.5px; color: #6B4E16;
    line-height: 1.75;
  }
  .post-body .callout strong { color: #6B4E16; }

  .post-files {
    padding: 24px 20px;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
  }
  .pf-label {
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em;
    color: var(--sage-600);
    margin-bottom: 12px;
  }
  .pf-label img { width: 14px; height: 14px; vertical-align: -3px; }
  .file-list { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
  .file-list li a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    transition: border-color .15s, background .15s;
  }
  .file-list li a:hover { border-color: var(--sage-500); background: #FAFCF7; }
  .file-list .fi-ic {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--sage-50); color: var(--sage-700);
    font-size: 14px; flex-shrink: 0;
  }
  .file-list .fi-ic img { width: 60%; height: 60%; object-fit: contain; }
  .file-list .fi-name { flex: 1; font-weight: 600; letter-spacing: -0.015em; }
  .file-list .fi-size { color: var(--muted); font-size: 12.5px; }
  .file-list .fi-down {
    color: var(--sage-600); font-size: 13px; font-weight: 700;
    border: 1px solid var(--sage-100);
    padding: 5px 12px; border-radius: 999px;
    background: var(--sage-50);
  }

  .post-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin: 24px 0 14px;
  }
  a.btn-list,
  .btn-list {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 16px;
    background: var(--sage-600); border: 1px solid var(--sage-600); color: #fff !important;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    font-family: inherit;
    transition: background .15s;
  }
  a.btn-list:hover,
  .btn-list:hover { background: var(--sage-700); border-color: var(--sage-700); color: #fff !important; }
  a.btn-list:visited { color: #fff !important; }

  @media (max-width: 768px) {
    .post-head, .post-body, .post-files { padding-left: 22px; padding-right: 22px; }
    .post-meta { gap: 12px; }
    .meta-divider { display: none; }
    .post-actions { flex-wrap: wrap; }
    .file-list li a { flex-wrap: wrap; }
    .file-list .fi-name { flex: 1 1 100%; order: 2; }
    .file-list .fi-size, .file-list .fi-down { order: 3; }
  }

  /* ========== MX-6 FAQ ========== */
  /* ele_m05 (faq, prsCnsl/*) — mockup qna-confirm.html CSS 매칭 */
  .prog-hero .hero-dino.faq-elephant,
  .prog-hero .hero-dino.qna-elephant {
    right: 0;
    bottom: 10px;
    width: 168px;
    height: auto;
  }
  .prog-hero .hero-dino.faq-elephant img,
  .prog-hero .hero-dino.qna-elephant img {
    width: 100%;
    height: auto;
  }

  .faq-list {
    list-style: none; padding: 0; margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .faq-list > li + li { border-top: 1px solid var(--line); }
  .faq-list details { padding: 0; }
  .faq-list summary {
    list-style: none; cursor: pointer;
    display: grid;
    grid-template-columns: 32px 1fr 24px;
    align-items: center; gap: 16px;
    padding: 22px 28px;
    transition: background .15s;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary:hover { background: #FAFCF7; }
  .faq-list .q-mark {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--sage-100); color: var(--sage-700);
    display: grid; place-items: center;
    font-weight: 800; font-size: 15px;
  }
  .faq-list .q-text {
    color: var(--ink); font-size: 15.5px; font-weight: 600;
    letter-spacing: -0.015em; line-height: 1.5;
  }
  .faq-list .q-toggle {
    width: 24px; height: 24px;
    color: var(--muted);
    display: grid; place-items: center;
    transition: transform .2s;
  }
  .faq-list details[open] .q-toggle { transform: rotate(180deg); color: var(--sage-700); }
  .faq-list details[open] summary { background: #FAFCF7; }
  .faq-list .answer {
    display: grid;
    grid-template-columns: 32px 1fr 24px;
    gap: 16px;
    padding: 0 28px 26px;
    border-top: 1px dashed var(--line);
    margin-top: 0;
  }
  .faq-list .a-mark {
    grid-column: 1;
    width: 32px; height: 32px; border-radius: 50%;
    background: #FFE7B3; color: #AB6E0E;
    display: grid; place-items: center;
    font-weight: 800; font-size: 15px;
    margin-top: 18px;
  }
  .faq-list .a-text {
    grid-column: 2;
    margin-top: 18px;
    color: var(--ink-soft); font-size: 14.5px; line-height: 1.85;
  }
  .faq-empty {
    padding: 60px 20px; text-align: center;
    color: var(--muted); font-size: 14px;
  }

  @media (max-width: 768px) {
    .faq-list summary,
    .faq-list .answer {
      grid-template-columns: 28px 1fr 24px;
      padding-left: 18px; padding-right: 18px; gap: 12px;
    }
  }

  /* ========== MX-9 동화영상 ========== */
  /* dino_m04 (video/list) — mockup video.html CSS 매칭 */
  .prog-hero .hero-dino.video-dino {
    right: 0;
    bottom: 10px;
    width: 168px;
    height: auto;
  }
  .prog-hero .hero-dino.video-dino img {
    width: 100%;
    height: auto;
  }

  .video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
  }
  .video-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none; color: inherit;
    cursor: pointer;
    padding: 0;
    text-align: left;
    font-family: inherit;
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .video-card:hover {
    border-color: var(--sage-500);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(30,50,20,0.08);
  }
  .video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #B8DDF1, #A9C287);
    overflow: hidden;
  }
  .video-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s;
  }
  .video-card:hover .video-thumb img { transform: scale(1.04); }
  .video-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35));
    pointer-events: none;
  }
  .video-thumb .play {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: grid; place-items: center;
    color: var(--sage-700);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: transform .2s, background .2s;
    z-index: 2;
  }
  .video-card:hover .video-thumb .play {
    background: var(--sage-600); color: #fff;
    transform: translate(-50%, -50%) scale(1.08);
  }
  .video-info {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
    background: #fff;
  }
  .video-info .v-title {
    font-size: 14.5px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }
  .video-card:hover .v-title { color: var(--sage-700); }
  .video-info .v-meta {
    margin: auto 0 0;
    color: var(--muted);
    font-size: 12.5px;
    letter-spacing: 0.01em;
    text-align: right;
  }
  .video-empty {
    padding: 60px 20px; text-align: center;
    color: var(--muted); font-size: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  /* 영상 모달 */
  .video-modal {
    position: fixed; inset: 0;
    z-index: 1000;
    display: none;
  }
  .video-modal.is-open { display: block; }
  .video-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 25, 18, 0.78);
    cursor: pointer;
  }
  .video-modal-content {
    position: relative;
    z-index: 1;
    max-width: 960px;
    width: calc(100% - 32px);
    margin: 5vh auto 0;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    overflow: hidden;
  }
  .video-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 0;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .15s;
  }
  .video-modal-close:hover { background: rgba(0,0,0,0.78); }
  .video-modal-title {
    margin: 0;
    padding: 20px 56px 16px 24px;
    font-size: 16px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
    border-bottom: 1px solid var(--line);
  }
  .video-modal-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
  }
  .video-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }

  @media (max-width: 1100px) {
    .video-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .video-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .video-modal-content { margin-top: 3vh; }
    .video-modal-title { padding: 16px 48px 12px 18px; font-size: 14.5px; }
  }
  @media (max-width: 480px) {
    .video-grid { grid-template-columns: 1fr; }
  }

  /* ========== MX-7 온라인 문의 (qna) — mockup qna.html ========== */
  /* 작성 폼 (prsCnslWrite.jsp) */

  .qna-write .qna-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .qna-write .qna-card .qna-notice {
    padding: 18px 28px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13.5px;
    letter-spacing: -0.01em;
  }
  .qna-write .qna-card .qna-notice .req-mark {
    color: var(--coral-soft, #F26767);
    font-weight: 800;
    margin-right: 4px;
  }

  .qna-write .qna-form { padding: 28px 28px 0; }
  .qna-write .qna-form .field {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px dashed var(--line);
  }
  .qna-write .qna-form .field:last-of-type { border-bottom: 0; }
  .qna-write .qna-form .field > label {
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
    padding-top: 12px;
  }
  .qna-write .qna-form .field > label .req {
    color: var(--coral-soft, #F26767);
    margin-left: 3px;
  }
  .qna-write .qna-form .field input[type="text"],
  .qna-write .qna-form .field input[type="password"],
  .qna-write .qna-form .field textarea {
    width: 100%;
    height: 44px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px; color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
  }
  .qna-write .qna-form .field textarea {
    height: auto;
    min-height: 200px;
    padding: 12px 14px;
    line-height: 1.7;
    resize: vertical;
  }
  .qna-write .qna-form .field input::placeholder,
  .qna-write .qna-form .field textarea::placeholder { color: #aab1ad; }
  .qna-write .qna-form .field input:focus,
  .qna-write .qna-form .field textarea:focus {
    outline: none;
    border-color: var(--sage-500);
    box-shadow: 0 0 0 3px rgba(110,152,85,0.12);
  }
  .qna-write .qna-form .field .hint {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--muted);
  }

  .qna-write .qna-agree {
    margin: 0 28px;
    padding: 18px 22px;
    background: #FFF8E5;
    border: 1px solid #F2DC9A;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    color: #6B4E16;
    line-height: 1.75;
  }
  .qna-write .qna-agree strong { color: #6B4E16; font-weight: 800; }
  .qna-write .qna-agree-check {
    margin: 14px 0 0;
    display: flex; align-items: center; gap: 8px;
    color: #6B4E16;
    font-size: 13.5px; font-weight: 600;
  }
  .qna-write .qna-agree-check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--sage-600);
    cursor: pointer;
  }

  .qna-write .qna-actions {
    padding: 28px;
    display: flex; justify-content: center; gap: 8px;
  }
  .qna-write .btn-submit,
  .qna-write .btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border-radius: 10px;
    font-size: 15px; font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
  }
  .qna-write .btn-submit {
    background: var(--sage-600);
    border: 1px solid var(--sage-600);
    color: #fff;
  }
  .qna-write .btn-submit:hover { background: var(--sage-700); border-color: var(--sage-700); }
  .qna-write .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .qna-write .btn-cancel {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-soft);
  }
  .qna-write .btn-cancel:hover { border-color: var(--sage-500); color: var(--sage-700); }

  @media (max-width: 720px) {
    .qna-write .qna-form { padding: 18px 18px 0; }
    .qna-write .qna-form .field {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 14px 0;
    }
    .qna-write .qna-form .field > label { padding-top: 0; }
    .qna-write .qna-agree { margin: 0 18px; }
    .qna-write .qna-actions { padding: 22px 18px; flex-direction: column-reverse; }
    .qna-write .btn-submit,
    .qna-write .btn-cancel { width: 100%; }
  }

  /* ========== MX-7-3b 본인확인 (prsCnsl/confirm.jsp) — mockup qna-confirm.html ========== */

  .qna-confirm .confirm-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .qna-confirm .confirm-intro {
    padding: 28px 32px 22px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    text-align: center;
  }
  .qna-confirm .confirm-intro h3 {
    font-size: 17px; font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .qna-confirm .confirm-intro p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.7;
  }

  .qna-confirm .confirm-form { padding: 28px 28px 0; }
  .qna-confirm .confirm-form .field {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px dashed var(--line);
  }
  .qna-confirm .confirm-form .field:last-of-type { border-bottom: 0; }
  .qna-confirm .confirm-form .field > label {
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
  }
  .qna-confirm .confirm-form .field input[type="text"],
  .qna-confirm .confirm-form .field input[type="password"] {
    width: 100%;
    height: 44px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px; color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
  }
  .qna-confirm .confirm-form .field input::placeholder { color: #aab1ad; }
  .qna-confirm .confirm-form .field input:focus {
    outline: none;
    border-color: var(--sage-500);
    box-shadow: 0 0 0 3px rgba(110,152,85,0.12);
  }

  .qna-confirm .confirm-actions {
    padding: 24px 32px 32px;
    display: flex; justify-content: center;
    position: relative;
  }
  .qna-confirm .confirm-actions .findpw-link {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
  }
  .qna-confirm .confirm-actions .findpw-link strong {
    color: var(--sage-700);
    font-weight: 700;
    text-decoration: underline;
  }
  .qna-confirm .confirm-actions .findpw-link:hover strong { color: var(--sage-800, #4a6e36); }

  .qna-confirm .confirm-actions .btn-resend-right {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: all .15s;
  }
  .qna-confirm .confirm-actions .btn-resend-right:hover { border-color: var(--sage-500); color: var(--sage-700); }
  .qna-confirm .confirm-actions .btn-resend-right:disabled { opacity: 0.6; cursor: not-allowed; }
  .qna-confirm .btn-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border-radius: 10px;
    background: var(--sage-600);
    border: 1px solid var(--sage-600);
    color: #fff;
    font-size: 15px; font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .qna-confirm .btn-confirm:hover { background: var(--sage-700); border-color: var(--sage-700); }
  .qna-confirm .btn-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

  .qna-confirm .confirm-notes {
    max-width: 560px;
    margin: 22px auto 0;
    padding: 0 4px;
    text-align: center;
  }
  .qna-confirm .confirm-notes p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.85;
  }
  .qna-confirm .confirm-notes a {
    color: var(--sage-700);
    font-weight: 700;
    text-decoration: none;
  }
  .qna-confirm .confirm-notes a:hover { text-decoration: underline; }

  @media (max-width: 720px) {
    .qna-confirm .confirm-card .confirm-intro { padding: 24px 20px 18px; }
    .qna-confirm .confirm-form { padding: 14px 20px 0; }
    .qna-confirm .confirm-form .field {
      grid-template-columns: 1fr;
      gap: 6px;
      align-items: stretch;
    }
    .qna-confirm .confirm-actions {
      padding: 20px 20px 24px;
      flex-direction: column;
      gap: 12px;
    }
    .qna-confirm .confirm-actions .findpw-link,
    .qna-confirm .confirm-actions .btn-resend-right {
      position: static;
      transform: none;
      text-align: center;
    }
    .qna-confirm .confirm-actions .btn-resend-right {
      width: 100%;
    }
  }

  /* ========== MX-7-3c 본인 문의 조회 결과 (prsCnsl/list.jsp) — mockup qna-result.html ========== */
  /* 5b 모델: list + detail 통합 accordion (펼치면 답변까지 한 화면) */

  /* 인증 결과 배너 */
  .qna-result .auth-banner {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 24px;
    background: var(--sage-50);
    border: 1px solid var(--sage-100);
    border-radius: var(--radius-lg);
    margin-bottom: 22px;
  }
  .qna-result .auth-banner .info {
    flex: 1;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
    font-size: 14px; color: var(--ink-soft);
  }
  .qna-result .auth-banner .info b { color: var(--ink); font-weight: 800; }
  .qna-result .auth-banner .info .phone { color: var(--sage-700); font-weight: 700; letter-spacing: 0.02em; }
  .qna-result .auth-banner .info .meta { color: var(--muted); font-size: 13px; }
  .qna-result .auth-banner .relog {
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink-soft);
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: all .15s;
  }
  .qna-result .auth-banner .relog:hover { border-color: var(--sage-500); color: var(--sage-700); }

  /* 결과 메타 + 새 문의 버튼 */
  .qna-result .result-toolbar {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    flex-wrap: wrap; margin-bottom: 22px;
  }
  .qna-result .result-meta { font-size: 14px; color: var(--muted); }
  .qna-result .result-meta b { color: var(--ink); font-weight: 800; }
  .qna-result .result-meta b.point { color: var(--sage-600); }
  .qna-result .btn-new-qna {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 42px; padding: 0 18px;
    background: var(--sage-600);
    border: 1px solid var(--sage-600);
    color: #fff;
    border-radius: 10px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
  }
  .qna-result .btn-new-qna:hover { background: var(--sage-700); border-color: var(--sage-700); }

  /* 문의 리스트 (accordion) */
  .qna-result .qna-list {
    list-style: none; padding: 0; margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .qna-result .qna-list > li + li { border-top: 1px solid var(--line); }
  .qna-result .qna-list details { padding: 0; }
  .qna-result .qna-list summary {
    list-style: none; cursor: pointer;
    display: grid;
    grid-template-columns: 96px 110px 1fr 24px;
    align-items: center; gap: 16px;
    padding: 20px 28px;
    transition: background .15s;
  }
  .qna-result .qna-list summary::-webkit-details-marker { display: none; }
  .qna-result .qna-list summary:hover { background: #FAFCF7; }
  .qna-result .qna-list details[open] summary { background: #FAFCF7; }
  .qna-result .qna-list .status {
    display: inline-flex; align-items: center; justify-content: center;
    height: 26px; padding: 0 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 800;
    letter-spacing: -0.01em;
  }
  .qna-result .qna-list .status.done { background: var(--sage-100); color: var(--sage-700); }
  .qna-result .qna-list .status.wait { background: #FFF1D6; color: #AB6E0E; }
  .qna-result .qna-list .date {
    color: var(--muted); font-size: 13.5px;
    letter-spacing: 0.02em;
  }
  .qna-result .qna-list .q-text {
    color: var(--ink); font-size: 15px; font-weight: 600;
    letter-spacing: -0.015em; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qna-result .qna-list .q-toggle {
    width: 24px; height: 24px;
    color: var(--muted);
    display: grid; place-items: center;
    transition: transform .2s;
  }
  .qna-result .qna-list details[open] .q-toggle { transform: rotate(180deg); color: var(--sage-700); }

  .qna-result .qna-list .body {
    padding: 0 28px 26px;
    border-top: 1px dashed var(--line);
  }
  .qna-result .qna-list .body .row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
  }
  .qna-result .qna-list .body .row + .row { border-top: 1px dashed var(--line); }
  .qna-result .qna-list .body .mark {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; font-size: 15px;
  }
  .qna-result .qna-list .body .row.q .mark { background: var(--sage-100); color: var(--sage-700); }
  .qna-result .qna-list .body .row.a .mark { background: #FFE7B3; color: #AB6E0E; }
  .qna-result .qna-list .body .text {
    color: var(--ink-soft); font-size: 14.5px; line-height: 1.85;
    white-space: pre-line;
  }
  .qna-result .qna-list .body .text .meta-line {
    color: var(--muted); font-size: 12.5px;
    margin-bottom: 6px;
  }
  .qna-result .qna-list .body .text .pending {
    display: inline-flex; align-items: center; gap: 6px;
    color: #AB6E0E; font-weight: 700;
  }

  /* 빈 상태 */
  .qna-result .qna-empty {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 60px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
  }
  .qna-result .qna-empty p { margin-bottom: 16px; }

  @media (max-width: 768px) {
    .qna-result .auth-banner { flex-wrap: wrap; }
    .qna-result .auth-banner .info { width: 100%; }
    .qna-result .auth-banner .relog { width: 100%; }

    .qna-result .qna-list summary {
      grid-template-columns: auto auto 1fr 24px;
      padding: 16px 18px;
      gap: 10px;
    }
    .qna-result .qna-list .q-text { grid-column: 1 / -1; white-space: normal; }
    .qna-result .qna-list .body { padding: 0 18px 22px; }
    .qna-result .qna-list .body .row { grid-template-columns: 28px 1fr; gap: 12px; }
  }

  /* ========== MX-12 비번재설정 후 N>1 신청 카드 리스트 (book/confirmList.jsp) ========== */

  /* 컨테이너 가운데 정렬 강제 — 일부 환경에서 외부 reset 영향 회피 */
  section.prog-section.book-confirm-list > .container {
    max-width: 1240px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }

  .book-confirm-list .book-cards {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .book-confirm-list .book-cards li { margin: 0; padding: 0; }
  .book-confirm-list .book-card-item {
    display: block;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--sage-500);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
  }
  .book-confirm-list .book-card-item:hover {
    border-color: var(--sage-500);
    box-shadow: 0 4px 14px rgba(110,152,85,0.12);
    transform: translateY(-1px);
  }
  .book-confirm-list .book-status {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .book-confirm-list .book-status.wait {
    background: #FFF8E5;
    color: #8E6A19;
    border: 1px solid #F2DC9A;
  }
  .book-confirm-list .book-status.done {
    background: var(--sage-100);
    color: var(--sage-700);
    border: 1px solid var(--sage-100);
  }
  .book-confirm-list .book-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
    margin: 0 0 8px;
    letter-spacing: -0.015em;
    word-break: break-word;
  }
  .book-confirm-list .book-title small {
    margin-left: 8px;
    color: var(--muted);
    font-weight: 500;
    font-size: 13.5px;
  }
  .book-confirm-list .book-meta {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
  }
  .book-confirm-list .book-meta .sep {
    display: block;
    height: 4px;
    visibility: hidden;
  }
  .book-confirm-list .book-empty {
    padding: 64px 24px;
    text-align: center;
    background: var(--bg-soft);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    color: var(--muted);
    font-size: 14.5px;
  }

  @media (max-width: 960px) {
    .book-confirm-list .book-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .book-confirm-list .book-cards { grid-template-columns: 1fr; }
    .book-confirm-list .book-card-item { padding: 18px 18px; }
  }

  /* ========== 공용 모달 (mockup 디자인) — alert/confirm override 용 ========== */
  /* .popup_area 는 popup.css 의 fixed overlay + place-items:center 활용. 안의 카드만 mockup 스타일. */

  .popup_area .app-modal-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    max-width: 420px;
    width: calc(100% - 40px);
    padding: 38px 28px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    text-align: center;
    animation: appModalIn .2s ease-out;
  }
  .popup_area .app-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .popup_area .app-modal-close:hover {
    background: var(--bg-soft);
    color: var(--ink);
  }
  @keyframes appModalIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .popup_area .app-modal-msg {
    font-size: 15px;
    color: var(--ink);
    line-height: 1.7;
    margin: 0 0 24px;
    white-space: pre-line;
    letter-spacing: -0.015em;
    word-break: keep-all;
  }
  .popup_area .app-modal-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .popup_area .app-btn-primary,
  .popup_area .app-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    min-width: 96px;
  }
  .popup_area .app-btn-primary {
    background: var(--sage-600);
    border: 1px solid var(--sage-600);
    color: #fff;
  }
  .popup_area .app-btn-primary:hover { background: var(--sage-700); border-color: var(--sage-700); }
  .popup_area .app-btn-secondary {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-soft);
  }
  .popup_area .app-btn-secondary:hover { border-color: var(--sage-500); color: var(--sage-700); }

  @media (max-width: 480px) {
    .popup_area .app-modal-card { padding: 24px 20px 20px; }
    .popup_area .app-btn-primary,
    .popup_area .app-btn-secondary { min-width: auto; flex: 1; padding: 0 16px; }
  }

/* 다중 세션 체크박스 (book/form) */
.session-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
    margin: 4px 0;
}
.session-checkbox-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}
.session-checkbox-item:hover { border-color: #6E9855; background: #FAFCF7; }
.session-checkbox-item input[type=checkbox] { margin-top: 3px; }
.session-checkbox-item input[type=checkbox]:checked + .session-label strong { color: #527A3D; }
.session-checkbox-item:has(input:checked) { border-color: #527A3D; background: #F6FAF1; }
.session-label { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.session-label strong { font-size: 14px; font-weight: 700; }
.session-label small { font-size: 12px; color: #888; }

/* ==========================================================================
   /gallery 포토존 — 등록된 갤러리 이미지 grid (2026-04-29)
   ========================================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
}
.gallery-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    margin: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}
.gallery-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #F4F2EA;
    display: flex; align-items: center; justify-content: center;
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-no-image {
    color: #B0AC9C;
    font-size: 13px;
    font-weight: 500;
}
.gallery-title {
    padding: 16px 18px;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.4;
}
@media (max-width: 720px) {
    .gallery-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* 갤러리 카드 — button 으로 변경 시 reset */
button.gallery-card {
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
}
.gallery-card-disabled {
    opacity: 0.7;
    cursor: default;
}

/* 갤러리 모달 (video-modal 패턴 차용) */
.gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.gallery-modal.is-open { display: flex; }
.gallery-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}
.gallery-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 1100px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.gallery-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s;
}
.gallery-modal-close:hover { background: rgba(0, 0, 0, 0.85); }
.gallery-modal-title {
    padding: 18px 56px 14px 22px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    margin: 0;
}
.gallery-modal-frame {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    overflow: auto;
    min-height: 300px;
}
.gallery-modal-frame img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}
@media (max-width: 720px) {
    .gallery-modal { padding: 12px; }
    .gallery-modal-content { max-height: 95vh; }
    .gallery-modal-title { padding: 14px 50px 10px 16px; font-size: 15px; }
}

/* ==========================================================================
   Hero 캐릭터 변형 클래스 (2026-04-29 SVG 일원화)
   ========================================================================== */
/* dino_m03 (gallery) — mockup family-event.html CSS 매칭 + 좌우 반전 */
.prog-hero .hero-dino.dino-m03-flip {
    bottom: 10px;
}
.prog-hero .hero-dino.dino-m03-flip img {
    transform: scaleX(-1);
}

/* bird_m01 (gallery) — 50% 확대 + 바닥에서 50px (default 75% × 1.5 = 112%) */
.prog-hero .hero-dino.bird-m01-large {
    bottom: 50px;
    height: 112%;
}

/* bird_m03 (notice, noticeDetail) — mockup notice.html CSS 매칭 + 45도 회전 */
.prog-hero .hero-dino.bird-m03-tilt {
    right: 0;
    bottom: 60px;
    width: 210px;
    height: auto;
}
.prog-hero .hero-dino.bird-m03-tilt img {
    width: 100%;
    height: auto;
    transform: rotate(45deg);
}

/* ele_m04 (intro/business, intro/organization) — mockup CSS 매칭 */
.prog-hero .hero-dino.ele-m04 {
    right: 0;
    bottom: 10px;
    width: 154px;
    height: auto;
}
.prog-hero .hero-dino.ele-m04 img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   Terms / Privacy 페이지 (/terms, /privacy)
   ========================================================================== */
.terms-section { padding: 50px 0 80px; background: #fff; }

.terms-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 16px;
}

.terms-page .terms-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--sage-50);
    border-left: 3px solid var(--sage-500);
    border-radius: 4px;
    margin-bottom: 32px;
    font-size: 14px;
    color: var(--ink-soft);
}
.terms-page .terms-meta strong { color: var(--sage-700); font-weight: 700; }
.terms-page .terms-meta .sep { color: var(--muted); }

.terms-page .terms-empty {
    padding: 80px 20px;
    text-align: center;
    background: var(--bg-soft);
    border-radius: 8px;
    color: var(--ink-soft);
}
.terms-page .terms-empty .hint { font-size: 0.9em; color: var(--muted); margin-top: 8px; }

.terms-content {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.terms-content > *:first-child { margin-top: 0; }

.terms-content h3 {
    margin: 40px 0 14px;
    padding-bottom: 10px;
    font-size: 19px;
    font-weight: 800;
    color: var(--sage-700);
    border-bottom: 2px solid var(--sage-100);
    letter-spacing: -0.02em;
}
.terms-content h3:first-child { margin-top: 0; }

.terms-content h4 {
    margin: 24px 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--sage-600);
    letter-spacing: -0.015em;
}

.terms-content p { margin: 0 0 14px; }

.terms-content ol,
.terms-content ul { margin: 8px 0 16px; padding-left: 24px; }
.terms-content ol > li,
.terms-content ul > li { margin-bottom: 8px; }
.terms-content ol > li > ul,
.terms-content ol > li > ol,
.terms-content ul > li > ul,
.terms-content ul > li > ol { margin: 8px 0; }

.terms-content strong { color: var(--ink); font-weight: 700; }

.terms-content a {
    color: var(--sage-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.terms-content a:hover { color: var(--sage-800, #3F5D2E); }

/* 표 — admin 에서 등록한 inline border 무력화 + sage 톤 적용
   inline style="width:100%; border-collapse:collapse" 는 그대로 활용 */
.terms-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 14.5px;
    border: 1px solid var(--line);
    background: #fff;
}
.terms-content table th,
.terms-content table td {
    padding: 10px 14px;
    border: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
    line-height: 1.6;
}
.terms-content table thead th {
    background: var(--sage-50);
    color: var(--sage-700);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
}
.terms-content table tbody th {
    background: var(--sage-50);
    color: var(--sage-700);
    font-weight: 600;
    width: 130px;
}

@media (max-width: 768px) {
    .terms-section { padding: 32px 0 60px; }
    .terms-page { padding: 0 12px; }
    .terms-content { font-size: 14.5px; line-height: 1.75; }
    .terms-content h3 { font-size: 17px; margin: 28px 0 10px; padding-bottom: 8px; }
    .terms-content h4 { font-size: 15px; margin: 18px 0 8px; }
    .terms-content table { font-size: 13.5px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .terms-content table th,
    .terms-content table td { padding: 8px 10px; }
}