/* ============================================
   FlowLab 교육 - 공통 스타일
   ============================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');

:root {
  /* Brand palette (Figma [전달용]교육홈페이지 실측, 2026-09-21) */
  --bg-page: #FEFFFF;          /* 페이지 배경 (home 프레임 배경) */
  --bg-card: #FFFFFF;
  --bg-hero: #F1F7FF;          /* 히어로/카드 배경 블루 소프트 */
  --bg-hero-2: #E5EFFF;        /* 카드 배경 블루 (진함) */

  --yellow: #FFCF3D;
  --yellow-soft: #FFE9A8;
  --pink: #F8A5B5;
  --pink-soft: #FCE0E4;
  --green: #A8D89B;
  --green-soft: #E1F0DA;
  --blue: #2B7FFF;              /* 로고·포인트 블루 */
  --blue-soft: #E1EDF6;
  --blue-cta: #2B7FFF;          /* 하단 CTA 바 */
  --peach: #FDBFA0;
  --peach-soft: #FDE4D4;
  --purple: #C9B8E8;
  --purple-soft: #EFE9F8;

  --ink-1: #1E1E1E;
  --ink-2: #3C3E46;
  --ink-3: #545559;
  --ink-4: #7B7D85;
  --ink-5: #8E8F96;
  --line: #DCDCDD;
  --line-soft: #F1F7FF;

  --primary: #2B7FFF;           /* 헤더 활성·로고 블루 */
  --primary-hover: #1E6AE0;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;

  --shadow-card: 0 4px 20px rgba(80, 70, 40, 0.06);
  --shadow-hover: 0 10px 30px rgba(80, 70, 40, 0.12);

  --container: 1440px;         /* Figma 컨테이너 (2026-09-21, EDU-FIGMA-PORT-2a) */
  --gutter: 80px;              /* 컨테이너 바깥 최소 여백 — 뷰포트 1600 미만에서만 작동, ≥1600은 Figma 1:1 그대로 (EDU-LAYOUT-GUTTER-1, 2026-09-22, 디자이너 확인 전 임시값) */

  /* Figma 공용 크롬 토큰 — 기존 토큰의 별칭 (단일 출처 유지) */
  --fh-bg: var(--bg-page);
  --fh-ink-1: var(--ink-1);
  --fh-ink-2: var(--ink-2);
  --fh-ink-3: var(--ink-3);
  --fh-ink-4: var(--ink-4);
  --fh-ink-5: var(--ink-5);
  --fh-line: var(--line);
  --fh-blue: var(--primary);
  --fh-card: var(--bg-hero-2);
  --fh-card-soft: var(--bg-hero);
  --fh-black: #0F0F0F;
  --fh-footer: #F7F8F9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink-1);
  background: var(--bg-page);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }

.container {
  max-width: min(var(--container), 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================
   HEADER — Figma 공용 Header 1920×119 1:1 전사 (EDU-FIGMA-PORT-2a, 2026-09-21)
   renderHeaderHtml()이 출력하는 .fh-* 마크업 전용. 전 페이지 공유.
   ============================================ */
.fh-header {
  position: sticky; top: 0; z-index: 100;
  padding-top: 32px; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--fh-line);
}
.fh-gnb {
  max-width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 14px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 80px;
}
.fh-logo { padding: 8px 16px; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -0.32px; color: var(--fh-blue); }
.fh-nav { display: flex; align-items: flex-end; }
.fh-nav a { display: inline-flex; align-items: center; padding: 12px 20px; font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; color: var(--fh-ink-1); white-space: nowrap; }
.fh-nav a.active { font-weight: 700; color: var(--fh-black); }
.fh-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 23px 12px 24px; border: 1px solid var(--fh-ink-2); border-radius: 999px; background: #fff;
  font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; color: var(--fh-ink-1); white-space: nowrap;
}
.fh-pill img { width: 16px; height: 16px; }

/* ============================================
   FOOTER — Figma 공용 footer 1920×538 1:1 전사 (EDU-FIGMA-PORT-2a, 2026-09-21)
   renderFooterHtml()이 출력하는 .fh-* 마크업 전용. 15개 페이지가 푸터를 .container 안에
   두므로 box-shadow+clip-path breakout으로 전면 배경을 만든다(레이아웃 폭 불변, 가로 스크롤 없음).
   ============================================ */
.fh-footer {
  background: var(--fh-footer);
  box-shadow: 0 0 0 100vmax var(--fh-footer);
  clip-path: inset(0 -100vmax);
  margin-top: 60px;
}
.fh-footer-inner { max-width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 80px 0; display: flex; flex-direction: column; gap: 52px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
main.container .fh-footer-inner { max-width: none; } /* 구 15페이지: 푸터가 main.container 안이라 100%가 이미 콘텐츠 폭 — 거터 이중 적용 방지 */
.fh-footer-top { display: flex; flex-direction: column; gap: 44px; }
.fh-footer-row { display: flex; align-items: center; justify-content: space-between; }
.fh-footer-logo img { width: 180px; height: 24px; }
.fh-footer-links { display: flex; gap: 52px; font-size: 20px; line-height: 26px; color: var(--fh-ink-4); }
.fh-footer-links .strong { font-weight: 700; color: var(--fh-ink-1); }
.fh-footer-biz { display: flex; flex-direction: column; gap: 11px; font-size: 18px; letter-spacing: -0.18px; color: var(--fh-ink-5); }
.fh-footer-main { align-self: flex-start; padding: 12px 4px; font-size: 18px; letter-spacing: -0.18px; color: var(--fh-ink-3); }
.fh-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; padding-top: 40px; border-top: 1px solid var(--fh-line);
  font-size: 14px; letter-spacing: -0.14px; color: var(--fh-ink-4);
}
.fh-social { display: flex; gap: 10px; }
.fh-social a { width: 32px; height: 32px; border-radius: 999px; background: var(--fh-ink-1); display: flex; align-items: center; justify-content: center; }
.fh-social img { width: 16px; height: 16px; }
@media (max-width: 1519px) {
  .fh-footer-inner { padding: 80px 40px; }
  main.container .fh-footer-inner { padding-left: 0; padding-right: 0; }
  .fh-gnb { gap: 24px; } /* 거터로 콘텐츠가 160 줄어 헤더 항목 넘침 대역이 넓어지는 것을 환원 — ≥1440은 space-between이 지배해 값 무관 */
}
@media (max-width: 1023px) {
  :root { --gutter: 0px; } /* 태블릿 이하: 기존 24px 내부 패딩 가드 그대로 (단위 없는 0은 calc에서 무효 → 0px) */
  .fh-gnb { flex-wrap: wrap; gap: 16px; padding: 14px 24px; }
  .fh-nav { flex-wrap: wrap; }
  .fh-footer-inner { padding: 60px 0; }
  .fh-footer-row, .fh-footer-bottom { flex-wrap: wrap; gap: 16px; }
}

/* ============================================
   준비중 모달 — Figma 시안이 없는 14페이지(자료실·공지사항·일정·문의 등) 진입 차단
   (EDU-NOSTUB-1, 2026-09-22). header.js initHeader()가 [data-coming-soon] 클릭을
   전 페이지에서 위임 처리하고 이 마크업을 body 끝에 동적 삽입한다.
   ============================================ */
.fh-soon-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center;
  background: rgba(15, 15, 15, .45);
}
.fh-soon-backdrop.is-open { display: flex; }
.fh-soon-card {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 40px 48px; background: #fff; border-radius: 24px;
  box-shadow: 0 20px 60px rgba(15, 15, 15, .2);
  text-align: center;
}
.fh-soon-msg { font-size: 20px; font-weight: 700; color: var(--fh-ink-1); }
.fh-soon-ok {
  padding: 12px 32px; border-radius: 999px; border: 0;
  background: var(--fh-black); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  font-size: 12px; font-weight: 700;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.badge-education { background: var(--green-soft); color: #4A7A3A; }
.badge-competition { background: var(--pink-soft); color: #B04E5F; }
.badge-dark { background: var(--ink-1); color: #FFFFFF; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  transition: transform .15s, box-shadow .15s, background .15s;
  border: 1.5px solid transparent;
}
.btn-primary { background: var(--yellow); color: var(--ink-1); box-shadow: 0 3px 10px rgba(255, 193, 61, 0.3); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 193, 61, 0.45); }
.btn-secondary { background: #fff; color: var(--ink-1); border-color: var(--ink-1); }
.btn-secondary:hover { background: var(--ink-1); color: #fff; }

.btn-lg { padding: 15px 28px; font-size: 15px; }

/* ============================================
   MAIN — hero / category nav / program cards / three-col / quick-row / bottom-row
   ============================================ */
main.container { padding-bottom: 20px; }

.hero {
  margin-top: 24px;
  background: linear-gradient(180deg, #FFF3CE 0%, #FFEBAF 100%);
  border-radius: 32px;
  padding: 60px 60px 50px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  position: relative; overflow: hidden;
}
.hero-copy .hi {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; background: #fff; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 12px;
}
.hero-copy h1 {
  margin: 0 0 6px; font-size: 26px; font-weight: 700;
  color: var(--ink-1); line-height: 1.35; letter-spacing: -0.02em;
}
.hero-copy .big {
  font-family: 'Nunito', sans-serif;
  font-size: 60px; font-weight: 900; letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-1);
  margin: 0 0 20px;
}
.hero-copy .big .accent { color: var(--yellow); font-family: 'Pretendard Variable', sans-serif; }
.hero-copy p.desc {
  margin: 0 0 26px; font-size: 15px; color: var(--ink-2);
  line-height: 1.7;
}
.hero-buttons { display: flex; gap: 12px; }
.hero-img-wrap {
  position: relative;
  margin: -30px -30px -50px 0;   /* 이미지 배경(크림/노랑)이 hero 배경과 이어지도록 */
}
.hero-img-wrap img {
  max-height: 340px;
  mix-blend-mode: multiply;      /* 이미지의 크림 배경을 hero의 노랑과 자연스럽게 섞기 */
}

/* CATEGORY ICONS */
.cat-nav {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 20px; margin-top: 40px;
}
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s;
}
.cat-item:hover { transform: translateY(-3px); }
.cat-icon {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cat-icon svg { width: 34px; height: 34px; color: var(--ink-1); }
.cat-item .label { font-size: 15px; font-weight: 700; color: var(--ink-1); }
.cat-item .sub { font-size: 12px; color: var(--ink-3); }

/* SECTION TITLE */
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 40px 0 20px;
}
.section-title h2 {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
}
.section-subtitle {
  margin: 6px 0 0; font-size: 13px; color: var(--ink-3);
}
.section-title .more {
  font-size: 13px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 4px;
}
.section-title .more:hover { color: var(--ink-1); }

/* BOTTOM: gallery + winners */
.bottom-row {
  margin-top: 30px;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px;
}
.gallery-block h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery-thumbs img {
  width: 100%; height: 90px; object-fit: cover; border-radius: 14px;
}
.gallery-block .see-more {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; margin-top: 12px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  border: 1px solid var(--line);
}
.winners-block h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800;
  display: flex; justify-content: space-between; }
.winners-block h3 .more { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.winners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.winner-card {
  background: #fff; border-radius: 18px; padding: 18px;
  text-align: left;
  box-shadow: 0 3px 12px rgba(80,70,40,.05);
}
.winner-card .medal {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  margin-bottom: 8px;
}
.medal.g { background: linear-gradient(135deg, #FFDA6A 0%, #F0B325 100%); }
.medal.s { background: linear-gradient(135deg, #C7CBD4 0%, #97A0AF 100%); }
.medal.b { background: linear-gradient(135deg, #E0AA7F 0%, #B87540 100%); }
.winner-card .prize {
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 4px;
}
.winner-card .name { font-size: 15px; font-weight: 800; color: var(--ink-1); margin-bottom: 4px; }
.winner-card .from { font-size: 12px; color: var(--ink-3); }

.hot-banner {
  margin-top: 30px;
  background: linear-gradient(135deg, #FFE9A8 0%, #FFCF3D 100%);
  border-radius: 22px; padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.hot-banner .txt .t1 { font-size: 18px; font-weight: 800; }
.hot-banner .txt .t2 { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.hot-banner a { padding: 12px 22px; border-radius: 999px; background: var(--ink-1); color: #fff; font-weight: 700; font-size: 14px; }

/* ============================================
   PROGRAM-DETAIL 상세 (EDU-4-a)
   ============================================ */
.section-block { background: #fff; border-radius: 22px; padding: 30px; box-shadow: var(--shadow-card); margin-bottom: 20px; }
.section-block h2 {
  margin: 0 0 20px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 8px;
}
.section-block h2 .dot { width: 8px; height: 8px; background: var(--yellow); border-radius: 50%; }
.section-block p { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin: 0 0 12px; }

.highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.highlight-item { background: #FCF8E3; border-radius: 14px; padding: 16px; text-align: center; }
.highlight-item .ico {
  width: 40px; height: 40px; border-radius: 12px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px; font-size: 20px;
}
.highlight-item .t { font-size: 13px; font-weight: 800; }
.highlight-item .s { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.instructor {
  display: flex; gap: 16px; align-items: center;
  padding: 16px; background: var(--yellow-soft); border-radius: 16px;
}
.instructor .avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #FFDA6A 0%, #F0B325 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.instructor .info .n { font-size: 15px; font-weight: 800; }
.instructor .info .r { font-size: 12px; color: var(--ink-3); }
.instructor .info .d { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

.apply-side {
  position: sticky; top: 90px;
  background: #fff; border-radius: 22px; padding: 24px;
  box-shadow: var(--shadow-card);
  height: fit-content;
}
.apply-side .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.apply-side .price .p { font-family: 'Nunito'; font-size: 28px; font-weight: 900; }
.apply-side .price .u { font-size: 13px; color: var(--ink-3); }
.apply-side .price .del { text-decoration: line-through; color: var(--ink-4); font-size: 14px; margin-left: 4px; }
.apply-side .discount-badge {
  background: var(--pink); color: #fff;
  padding: 4px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  display: inline-block; margin-bottom: 12px;
}
.apply-side .fact-list {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px;
}
.apply-side .fact-list li {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px dashed var(--line-soft);
}
.apply-side .fact-list li .lbl { color: var(--ink-3); }
.apply-side .fact-list li .val { color: var(--ink-1); font-weight: 700; text-align: right; }
.apply-side .btn { width: 100%; }
.apply-side .btn + .btn { margin-top: 8px; }
.apply-side .side-progress {
  background: var(--yellow-soft); border-radius: 12px; padding: 12px 14px;
  margin-bottom: 20px; font-size: 12px; color: var(--ink-2);
}
.apply-side .side-progress .bar {
  height: 6px; background: #fff; border-radius: 999px; overflow: hidden; margin: 8px 0 4px;
}
.apply-side .side-progress .bar span {
  display: block; height: 100%; background: var(--yellow); border-radius: 999px;
}
.apply-side .share-row {
  display: flex; gap: 6px; margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed var(--line-soft);
}
.apply-side .share-row button { flex: 1; padding: 8px; border-radius: 10px; background: var(--bg-page); font-size: 12px; }

/* ============================================
   COMPETITIONS 목록 (EDU-4-a)
   ============================================ */
.comp-hero { background: linear-gradient(180deg, #FDF1F3 0%, #FBE4E8 100%); }

.featured {
  margin-top: 24px;
  background: linear-gradient(135deg, #FFF1D0 0%, #FFE7A8 100%);
  border-radius: 28px; padding: 40px;
  display: grid; grid-template-columns: 1fr 260px; gap: 30px; align-items: center;
  position: relative; overflow: hidden;
}
.featured .label {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink-1); color: var(--yellow);
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; margin-bottom: 14px;
}
.featured h2 { margin: 0 0 12px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.featured p { margin: 0 0 24px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.featured .countdown { display: flex; gap: 10px; margin-bottom: 24px; }
.featured .cd-box {
  background: #fff; padding: 12px 18px; border-radius: 14px;
  text-align: center; min-width: 68px;
  box-shadow: 0 3px 10px rgba(255,193,61,.2);
}
.featured .cd-box .n { font-family: 'Nunito'; font-size: 26px; font-weight: 900; }
.featured .cd-box .l { font-size: 11px; color: var(--ink-3); }
.featured .btn-row { display: flex; gap: 10px; }
.featured .img { text-align: center; }
.featured .img img { max-height: 200px; }

.cat-tabs {
  display: flex; gap: 8px; margin: 40px 0 20px;
  padding-bottom: 12px; border-bottom: 1.5px solid var(--line);
}
.cat-tabs button {
  padding: 10px 20px;
  font-size: 15px; font-weight: 700;
  color: var(--ink-3);
  border-radius: 10px 10px 0 0;
  margin-bottom: -13.5px;
  border-bottom: 3px solid transparent;
  transition: all .12s;
}
.cat-tabs button.active { color: var(--ink-1); border-bottom-color: var(--yellow); }
.cat-tabs button:hover { color: var(--ink-1); }

.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .comp-grid { grid-template-columns: 1fr; } .featured { grid-template-columns: 1fr; padding: 24px; } }

.comp-card {
  background: #fff; border-radius: 22px; padding: 24px;
  box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  transition: transform .15s, box-shadow .15s;
}
.comp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.comp-card .tag-row { display: flex; gap: 6px; margin-bottom: 12px; }
.comp-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.comp-card .fact-list {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: var(--ink-2);
}
.comp-card .fact-list li strong { color: var(--ink-3); font-weight: 700; margin-right: 6px; }
.comp-card .prize-info {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--yellow-soft);
  border-radius: 8px; font-size: 12px; font-weight: 700; color: #8A6510;
}
.comp-card .cta {
  padding: 10px 16px; border-radius: 999px;
  background: var(--pink); color: #fff;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.comp-card .img-side {
  width: 110px; height: 110px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pink-soft);
}
.comp-card .img-side img { max-height: 90px; }
.comp-card.past .img-side { background: var(--line-soft); opacity: 0.6; }
.comp-card.past .cta { background: var(--ink-4); }

/* ============================================
   COMPETITION-DETAIL 상세 (EDU-4-a)
   ============================================ */
.cd-hero {
  background: linear-gradient(135deg, #FFF1D0 0%, #FFE7A8 100%);
  border-radius: 28px; padding: 44px;
  margin-top: 24px;
  display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: center;
  position: relative; overflow: hidden;
}
.cd-hero .breadcrumb { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.cd-hero .breadcrumb a { color: var(--ink-3); }
.cd-hero .breadcrumb .sep { margin: 0 6px; opacity: 0.6; }
.cd-hero .badges { display: flex; gap: 6px; margin-bottom: 12px; }
.cd-hero h1 { margin: 0 0 12px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; }
.cd-hero .lede { font-size: 15px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.7; max-width: 520px; }
.cd-hero .quick-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 24px; padding: 16px 0; }
.cd-hero .qf .l { font-size: 11px; color: var(--ink-3); }
.cd-hero .qf .v { font-family: 'Nunito'; font-weight: 900; font-size: 20px; color: var(--ink-1); margin-top: 2px; }
.cd-hero .qf .v.pink { color: #B04E5F; }
.cd-hero .qf .v .u { font-family: 'Pretendard Variable'; font-size: 13px; font-weight: 700; margin-left: 2px; }
.cd-hero .img { text-align: center; position: relative; }
.cd-hero .img img { max-height: 230px; }

.cd-layout { display: grid; grid-template-columns: 1fr 340px; gap: 30px; margin-top: 30px; }
@media (max-width: 900px) {
  .cd-hero { grid-template-columns: 1fr; padding: 24px; }
  .cd-layout { grid-template-columns: 1fr; }
  .cd-hero .quick-facts { grid-template-columns: repeat(2, 1fr); }
}

.prize-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prize-item { text-align: center; padding: 20px 14px; border-radius: 18px; background: #FCFAF3; }
.prize-item .medal {
  width: 56px; height: 56px; border-radius: 50%;
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
}
.prize-item.gold .medal { background: linear-gradient(135deg, #FFDA6A 0%, #F0B325 100%); }
.prize-item.silver .medal { background: linear-gradient(135deg, #C7CBD4 0%, #97A0AF 100%); }
.prize-item.bronze .medal { background: linear-gradient(135deg, #E0AA7F 0%, #B87540 100%); }
.prize-item.encourage .medal { background: linear-gradient(135deg, #F8A5B5 0%, #E58A9A 100%); }
.prize-item .r { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.prize-item .p { font-family: 'Nunito'; font-weight: 900; font-size: 20px; color: var(--ink-1); margin: 4px 0; }
.prize-item .n { font-size: 11px; color: var(--ink-3); }

.step-list { display: flex; flex-direction: column; gap: 0; }
.step-item {
  display: grid; grid-template-columns: 60px 1fr; gap: 20px;
  padding: 20px 0; border-bottom: 1px dashed var(--line-soft);
  align-items: center;
}
.step-item:last-child { border-bottom: none; }
.step-num {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--pink-soft); color: #B04E5F;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito'; font-weight: 900; font-size: 18px;
}
.step-content .d { font-size: 12px; color: var(--pink); font-weight: 700; margin-bottom: 4px; }
.step-content .t { font-size: 15px; font-weight: 700; }
.step-content .s { font-size: 13px; color: var(--ink-3); margin-top: 3px; }

.rule-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.rule-list li { display: flex; gap: 10px; align-items: flex-start; }
.rule-list li::before { content: '✓'; color: var(--pink); font-weight: 800; margin-top: 1px; }
.rule-list li strong { color: var(--ink-1); font-weight: 800; }

.cd-hero ~ .cd-layout .apply-side .status-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: #E7F6E9; color: #2E7D32;
  font-size: 12px; font-weight: 700; margin-bottom: 14px;
}
.apply-side .fee-box {
  background: var(--pink-soft); border-radius: 12px; padding: 14px;
  margin-bottom: 16px; text-align: center;
}
.apply-side .fee-box .l { font-size: 11px; color: #B04E5F; }
.apply-side .fee-box .n { font-family: 'Nunito'; font-weight: 900; font-size: 24px; margin-top: 2px; }

/* ============================================
   SCHEDULE 캘린더 (EDU-4-b)
   ============================================ */
.sch-hero { background: linear-gradient(180deg, #F0F7FC 0%, #E1EEF7 100%); }

.sch-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 30px; }
@media (max-width: 900px) { .sch-layout { grid-template-columns: 1fr; } }

.cal-panel { background: #fff; border-radius: 22px; padding: 24px; box-shadow: var(--shadow-card); }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cal-header h2 {
  margin: 0; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 24px;
  display: flex; align-items: baseline; gap: 6px;
}
.cal-header h2 .m { color: var(--primary); }
.cal-header .nav { display: flex; gap: 6px; }
.cal-header .nav button {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-page); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-header .nav button:hover { background: var(--yellow-soft); }
.cal-header .view-toggle { display: flex; gap: 4px; background: var(--bg-page); padding: 4px; border-radius: 10px; }
.cal-header .view-toggle button { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.cal-header .view-toggle button.active { background: #fff; color: var(--ink-1); box-shadow: 0 1px 3px rgba(0,0,0,.06); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
  border-radius: 12px; overflow: hidden;
}
.cal-grid .dow {
  padding: 12px; text-align: center; background: #FCFAF3;
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.cal-grid .dow.sun { color: #E5507A; }
.cal-grid .dow.sat { color: #4B7BE5; }

.cal-grid .cell {
  min-height: 90px; padding: 8px;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: #fff; font-size: 12px; position: relative; cursor: pointer;
  transition: background .12s;
}
.cal-grid .cell:hover { background: #FDFBF5; }
.cal-grid .cell.dim { background: #FCFAF3; color: var(--ink-4); }
.cal-grid .cell.today .day-num {
  background: var(--pink); color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}
.cal-grid .cell .day-num { font-weight: 700; color: var(--ink-1); }
.cal-grid .cell .day-num.sun { color: #E5507A; }
.cal-grid .cell .day-num.sat { color: #4B7BE5; }

.cal-event {
  margin-top: 4px; padding: 3px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event.edu { background: var(--green-soft); color: #4A7A3A; }
.cal-event.comp { background: var(--pink-soft); color: #B04E5F; }
.cal-event.workshop { background: var(--blue-soft); color: #3F6D95; }
.cal-event.notice { background: var(--yellow-soft); color: #8A6510; }

.cal-legend { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cal-legend span::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px;
  vertical-align: middle;
}
.cal-legend .lg-edu::before { background: #A8D89B; }
.cal-legend .lg-comp::before { background: #F8A5B5; }
.cal-legend .lg-workshop::before { background: #A9CFE8; }
.cal-legend .lg-notice::before { background: #FFCF3D; }

.up-panel { background: #fff; border-radius: 22px; padding: 24px; box-shadow: var(--shadow-card); height: fit-content; position: sticky; top: 90px; }
.up-panel h3 { margin: 0 0 16px; font-size: 16px; font-weight: 800; }
.up-list { display: flex; flex-direction: column; gap: 12px; }
.up-item { display: flex; gap: 12px; padding: 14px; background: var(--bg-page); border-radius: 14px; align-items: center; }
.up-item .up-date { background: #fff; border-radius: 10px; padding: 8px; text-align: center; min-width: 52px; }
.up-item .up-date .m { font-size: 10px; color: var(--ink-3); font-weight: 700; }
.up-item .up-date .d { font-family: 'Nunito'; font-weight: 900; font-size: 20px; color: var(--ink-1); line-height: 1; margin-top: 2px; }
.up-item .up-date .dow { font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.up-item .up-info .type { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; margin-bottom: 4px; }
.up-item .up-info .type.edu { background: var(--green-soft); color: #4A7A3A; }
.up-item .up-info .type.comp { background: var(--pink-soft); color: #B04E5F; }
.up-item .up-info .type.workshop { background: var(--blue-soft); color: #3F6D95; }
.up-item .up-info .type.notice { background: var(--yellow-soft); color: #8A6510; }
.up-item .up-info .t { font-size: 13px; font-weight: 700; }
.up-item .up-info .s { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.quick-cal { background: #FCF8E3; border-radius: 16px; padding: 16px; margin-top: 16px; }
.quick-cal .l { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.quick-cal .btns { display: flex; flex-direction: column; gap: 6px; }
.quick-cal button {
  padding: 8px; background: #fff; border-radius: 10px;
  font-size: 12px; font-weight: 700; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
}

/* ============================================
   RESOURCES 목록 (EDU-4-b)
   ============================================ */
.rs-hero { background: linear-gradient(180deg, #F3EEFB 0%, #EFE9F8 100%); }

.kind-tabs { display: flex; gap: 8px; margin: 30px 0 20px; padding-bottom: 12px; border-bottom: 1.5px solid var(--line); }
.kind-tabs button {
  padding: 10px 20px; font-size: 15px; font-weight: 700; color: var(--ink-3);
  border-radius: 10px 10px 0 0; margin-bottom: -13.5px; border-bottom: 3px solid transparent;
}
.kind-tabs button.active { color: var(--ink-1); border-bottom-color: var(--purple); }

.feat-video {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
  background: #fff; border-radius: 22px; padding: 24px;
  box-shadow: var(--shadow-card); margin-bottom: 30px;
}
@media (max-width: 900px) { .feat-video { grid-template-columns: 1fr; } }
.feat-video .thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #C9B8E8 0%, #A88FD5 100%);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; cursor: pointer;
}
.feat-video .thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.3), transparent 50%);
}
.feat-video .thumb .play {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 2; box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.feat-video .thumb .duration {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 3px 8px; border-radius: 5px;
  font-size: 12px; font-weight: 700; z-index: 2;
}
.feat-video .thumb .live-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--pink); color: #fff;
  padding: 4px 10px; border-radius: 5px;
  font-size: 11px; font-weight: 800; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
}
.feat-video .info .tag-row { display: flex; gap: 6px; margin-bottom: 10px; }
.feat-video .info h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.feat-video .info .meta { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.feat-video .info p { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin: 0 0 16px; }
.feat-video .stats { display: flex; gap: 20px; padding-top: 12px; border-top: 1px dashed var(--line-soft); font-size: 12px; color: var(--ink-3); }
.feat-video .stats span strong { color: var(--ink-1); font-weight: 800; }

.vid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .vid-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vid-grid { grid-template-columns: 1fr; } }

.vid-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .15s; }
.vid-card:hover { transform: translateY(-3px); }
.vid-thumb { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; position: relative; }
.vid-thumb.c1 { background: linear-gradient(135deg, #F5FBF0 0%, #A8D89B 100%); }
.vid-thumb.c2 { background: linear-gradient(135deg, #FFF3CE 0%, #FFCF3D 100%); }
.vid-thumb.c3 { background: linear-gradient(135deg, #FDF1F3 0%, #F8A5B5 100%); }
.vid-thumb.c4 { background: linear-gradient(135deg, #F0F7FC 0%, #A9CFE8 100%); }
.vid-thumb.c5 { background: linear-gradient(135deg, #F3EEFB 0%, #C9B8E8 100%); }
.vid-thumb.c6 { background: linear-gradient(135deg, #FDF3EA 0%, #FDBFA0 100%); }
.vid-thumb.c7 { background: linear-gradient(135deg, #E1F0DA 0%, #4A7A3A 100%); }
.vid-thumb.c8 { background: linear-gradient(135deg, #FFEBAF 0%, #F0B325 100%); }
.vid-thumb .icon { font-size: 40px; z-index: 2; }
.vid-thumb .play-mini {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
}
.vid-thumb .dur {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700;
}
.vid-thumb .new {
  position: absolute; top: 8px; left: 8px;
  background: var(--pink); color: #fff;
  padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 800;
}
.vid-info { padding: 14px; }
.vid-info .cat { font-size: 11px; font-weight: 700; color: var(--purple); margin-bottom: 4px; }
.vid-info .t {
  font-size: 14px; font-weight: 700; line-height: 1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height: 40px;
}
.vid-info .m { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.vid-info .m .r { color: var(--yellow); }

.file-table { background: #fff; border-radius: 22px; box-shadow: var(--shadow-card); overflow: hidden; margin-top: 20px; }
.file-row {
  display: grid; grid-template-columns: 60px 1fr 120px 80px 80px 40px;
  gap: 14px; align-items: center; padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft); font-size: 13px;
  transition: background .12s; cursor: pointer;
}
.file-row:hover { background: #FDFBF5; }
.file-row:last-child { border-bottom: none; }
.file-row.head { background: #FCFAF3; font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: default; }
.file-row.head:hover { background: #FCFAF3; }
.file-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; }
.file-icon.pdf { background: #E5507A; }
.file-icon.doc { background: #4B7BE5; }
.file-icon.ppt { background: #F0B325; }
.file-icon.zip { background: #A88FD5; }
.file-icon.xls { background: #4A7A3A; }
.file-title { font-weight: 700; color: var(--ink-1); }
.file-title .desc-sub { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
.file-cat { font-size: 12px; color: var(--ink-2); }
.file-size, .file-down { color: var(--ink-3); font-size: 12px; }
.file-action { background: var(--yellow-soft); border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }

/* ============================================
   RESOURCE-DETAIL 영상 플레이어 (EDU-4-b)
   ============================================ */
.rd-breadcrumb { font-size: 13px; color: var(--ink-3); margin: 24px 0 12px; }
.rd-breadcrumb a { color: var(--ink-3); }
.rd-breadcrumb .sep { margin: 0 6px; opacity: 0.6; }

.rd-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
@media (max-width: 900px) { .rd-layout { grid-template-columns: 1fr; } }

.player-block { background: #000; border-radius: 22px; overflow: hidden; margin-bottom: 20px; position: relative; }
.player {
  aspect-ratio: 16/9;
  background:
    radial-gradient(circle at 30% 50%, rgba(201,184,232,.4), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,193,61,.3), transparent 60%),
    linear-gradient(135deg, #2A2438 0%, #1A1522 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.player .play-big {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  cursor: pointer; transition: transform .15s;
}
.player .play-big:hover { transform: scale(1.05); }
.player .lecture-label {
  position: absolute; top: 20px; left: 20px;
  background: rgba(0,0,0,.5); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  backdrop-filter: blur(6px);
}
.player-controls { background: #1A1522; padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.player-controls .progress { flex: 1; height: 4px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; position: relative; }
.player-controls .progress .fill { height: 100%; width: 32%; background: var(--yellow); }
.player-controls .progress::after {
  content:''; position:absolute; top: -4px; left: calc(32% - 6px);
  width: 12px; height: 12px; border-radius: 50%; background: var(--yellow);
}
.player-controls .time { color: rgba(255,255,255,.8); font-size: 12px; font-family: 'Nunito'; font-weight: 700; }
.player-controls .icon-btn { color: rgba(255,255,255,.8); font-size: 18px; }

.video-header { background: #fff; border-radius: 22px; padding: 24px; box-shadow: var(--shadow-card); margin-bottom: 20px; }
.video-header .tag-row { display: flex; gap: 6px; margin-bottom: 10px; }
.video-header h1 { margin: 0 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; }
.video-header .meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px dashed var(--line-soft);
  font-size: 13px; color: var(--ink-3);
  flex-wrap: wrap; gap: 10px;
}
.video-header .meta .lecturer { display: flex; align-items: center; gap: 10px; }
.video-header .meta .lecturer .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #FFDA6A 0%, #F0B325 100%);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.video-header .meta .lecturer .n { font-weight: 700; color: var(--ink-1); }
.video-header .actions { display: flex; gap: 6px; }
.video-header .actions button { padding: 6px 12px; border-radius: 999px; background: var(--bg-page); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.video-header .actions button.liked { background: var(--pink-soft); color: #B04E5F; }

.chapter-list { display: flex; flex-direction: column; gap: 4px; }
.chapter-item {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px;
  cursor: pointer; transition: background .12s;
}
.chapter-item:hover { background: var(--bg-page); }
.chapter-item .ts { font-family: 'Nunito'; font-weight: 800; font-size: 13px; color: var(--purple); }
.chapter-item .txt { font-size: 13px; color: var(--ink-1); font-weight: 500; }
.chapter-item .dur { font-size: 11px; color: var(--ink-3); }
.chapter-item.active { background: var(--purple-soft); }

.attach-list { display: flex; flex-direction: column; gap: 8px; }
.attach-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; transition: border-color .12s; cursor: pointer;
}
.attach-item:hover { border-color: var(--yellow); }
.attach-item .icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 800; }
.attach-item .icon.pdf { background: #E5507A; }
.attach-item .icon.ppt { background: #F0B325; }
.attach-item .icon.zip { background: #A88FD5; }
.attach-item .info { flex: 1; }
.attach-item .info .n { font-size: 13px; font-weight: 700; }
.attach-item .info .s { font-size: 11px; color: var(--ink-3); }
.attach-item .dl { padding: 6px 12px; background: var(--yellow); border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--ink-1); }

.comment { padding: 14px 0; border-bottom: 1px dashed var(--line-soft); display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.comment:last-child { border-bottom: none; }
.comment .av { width: 36px; height: 36px; border-radius: 50%; background: var(--peach-soft); display: flex; align-items: center; justify-content: center; }
.comment .body .who { font-size: 13px; font-weight: 700; }
.comment .body .who .time { color: var(--ink-4); font-weight: 500; font-size: 11px; margin-left: 6px; }
.comment .body .txt { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.55; }

.comment-form { background: var(--bg-page); border-radius: 14px; padding: 12px; display: flex; gap: 10px; margin-bottom: 20px; }
.comment-form input { flex: 1; border: none; background: transparent; padding: 8px 12px; font-family: inherit; font-size: 14px; outline: none; }
.comment-form button { padding: 8px 18px; background: var(--ink-1); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 700; }

.side-info { background: #fff; border-radius: 22px; padding: 20px; box-shadow: var(--shadow-card); position: sticky; top: 90px; }
.side-info h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; }
.side-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.side-item { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 8px; border-radius: 10px; transition: background .12s; cursor: pointer; }
.side-item:hover { background: var(--bg-page); }
.side-item.active { background: var(--purple-soft); }
.side-item .thumb { aspect-ratio: 16/9; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.side-item .thumb.c1 { background: linear-gradient(135deg, #F5FBF0, #A8D89B); }
.side-item .thumb.c2 { background: linear-gradient(135deg, #FFF3CE, #FFCF3D); }
.side-item .thumb.c3 { background: linear-gradient(135deg, #FDF1F3, #F8A5B5); }
.side-item .thumb.c4 { background: linear-gradient(135deg, #F0F7FC, #A9CFE8); }
.side-item .thumb.c5 { background: linear-gradient(135deg, #F3EEFB, #C9B8E8); }
.side-item .body .t {
  font-size: 12px; font-weight: 700; line-height: 1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.side-item .body .m { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* ============================================
   RESULTS 수상자 갤러리 (EDU-4-b)
   ============================================ */
.rs-hero-results { background: linear-gradient(180deg, #FFF3CE 0%, #FFEBAF 100%); }

.contest-picker {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: #fff; border-radius: 22px; padding: 20px 24px;
  box-shadow: var(--shadow-card);
  margin-top: 30px; margin-bottom: 30px; flex-wrap: wrap;
}
.contest-picker .years { display: flex; gap: 6px; }
.contest-picker .years button { padding: 8px 16px; border-radius: 10px; background: var(--bg-page); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.contest-picker .years button.active { background: var(--ink-1); color: #fff; }
.contest-picker .info { display: flex; gap: 16px; align-items: baseline; }
.contest-picker .info h2 { margin: 0; font-size: 18px; font-weight: 800; }
.contest-picker .info .stats { font-size: 13px; color: var(--ink-3); }

.podium { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; align-items: end; margin-bottom: 40px; }
@media (max-width: 900px) { .podium { grid-template-columns: 1fr; } }

.pod-card { background: #fff; border-radius: 24px; padding: 30px 24px; text-align: center; position: relative; box-shadow: 0 10px 30px rgba(80,70,40,.08); }
.pod-card.gold {
  background: linear-gradient(180deg, #FFF3CE 0%, #FFE7A8 100%);
  padding-top: 44px;
  box-shadow: 0 12px 40px rgba(255,193,61,.3);
  transform: translateY(-10px);
}
.pod-card.silver { background: linear-gradient(180deg, #F0F2F5 0%, #E1E5EA 100%); }
.pod-card.bronze { background: linear-gradient(180deg, #FDF3EA 0%, #FDE4D4 100%); }

.pod-medal {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.gold .pod-medal { background: linear-gradient(135deg, #FFDA6A 0%, #F0B325 100%); }
.silver .pod-medal { background: linear-gradient(135deg, #C7CBD4 0%, #97A0AF 100%); }
.bronze .pod-medal { background: linear-gradient(135deg, #E0AA7F 0%, #B87540 100%); }

.pod-award { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 16px; color: var(--ink-3); margin-bottom: 8px; }
.gold .pod-award { color: #B58810; font-size: 18px; }
.pod-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.gold .pod-name { font-size: 26px; }
.pod-team { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.pod-prize {
  display: inline-block; padding: 8px 16px; background: rgba(255,255,255,.6);
  border-radius: 999px; font-family: 'Nunito'; font-weight: 900; font-size: 15px; margin-top: 14px;
}
.pod-project { font-size: 13px; color: var(--ink-2); margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(0,0,0,.1); line-height: 1.6; }
.pod-project strong { display: block; color: var(--ink-1); font-weight: 800; margin-bottom: 4px; }

.other-list { background: #fff; border-radius: 22px; padding: 30px; box-shadow: var(--shadow-card); }
.other-list h2 { margin: 0 0 20px; font-size: 20px; font-weight: 800; }
.winner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .winner-grid { grid-template-columns: repeat(2, 1fr); } }
.winner-tile { background: #FCFAF3; border-radius: 14px; padding: 16px; text-align: center; }
.winner-tile .medal-mini { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; margin-bottom: 8px; }
.winner-tile .medal-mini.enc { background: linear-gradient(135deg, #F8A5B5 0%, #E58A9A 100%); }
.winner-tile .award { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.winner-tile .name { font-size: 15px; font-weight: 800; margin-top: 2px; }
.winner-tile .team { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.past-h { margin: 40px 0 16px; font-size: 20px; font-weight: 800; }
.past-table { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-card); }
.past-row {
  display: grid; grid-template-columns: 80px 100px 1fr 200px 100px;
  gap: 16px; align-items: center; padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft); font-size: 13px;
  cursor: pointer; transition: background .12s;
}
.past-row:hover { background: #FDFBF5; }
.past-row:last-child { border-bottom: none; }
.past-row.head { background: #FCFAF3; font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: default; }
.past-row .m { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.past-row .m.g { background: linear-gradient(135deg, #FFDA6A, #F0B325); }
.past-row .m.s { background: linear-gradient(135deg, #C7CBD4, #97A0AF); }
.past-row .m.b { background: linear-gradient(135deg, #E0AA7F, #B87540); }
.past-row .m.e { background: linear-gradient(135deg, #F8A5B5, #E58A9A); }
.past-row .name { font-weight: 700; color: var(--ink-1); }
.past-row .team { color: var(--ink-3); font-size: 12px; }

/* ============================================
   BADGES 추가 (EDU-4-c)
   ============================================ */
.badge-notice { background: var(--blue-soft); color: #3F6D95; }
.badge-yellow { background: var(--yellow-soft); color: #8A6510; }
.badge-purple { background: var(--purple-soft); color: #6E5DA0; }
.badge-new { background: var(--pink); color: #fff; }

/* ============================================
   NOTICES 목록 (EDU-4-c)
   ============================================ */
.notice-hero { background: linear-gradient(180deg, #F0F7FC 0%, #E1EEF7 100%); }

.notice-table {
  grid-template-columns: 90px 90px 1fr 100px 120px;
}
.pin {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; background: var(--pink); color: #fff;
  border-radius: 6px; font-size: 11px; font-weight: 800;
}
.num {
  font-family: 'Nunito'; font-weight: 700; color: var(--ink-3); font-size: 13px;
}
.notice-table-full {
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.nrow {
  display: grid; grid-template-columns: 60px 100px 1fr 100px 130px;
  gap: 16px; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  transition: background .12s;
  cursor: pointer;
}
.nrow:hover { background: #FDFBF5; }
.nrow:last-child { border-bottom: none; }
.nrow.head {
  background: #FCFAF3; font-size: 12px; font-weight: 700; color: var(--ink-3);
  cursor: default;
}
.nrow.pinned { background: linear-gradient(90deg, #FFFAF0 0%, #fff 100%); }
.nrow.pinned .num { color: var(--pink); }
.nrow .title {
  font-weight: 600; color: var(--ink-1);
  display: flex; align-items: center; gap: 8px;
}
.nrow .title .new-tag {
  background: var(--pink); color: #fff;
  padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 800;
}
.nrow .meta {
  font-family: 'Nunito'; font-weight: 700; color: var(--ink-3); font-size: 12px;
}
@media (max-width: 900px) {
  .nrow, .nrow.head { grid-template-columns: 60px 1fr; padding: 14px 16px; gap: 8px; }
  .nrow > *:nth-child(2), .nrow > *:nth-child(4), .nrow > *:nth-child(5) { display: none; }
}

/* ============================================
   NOTICE-DETAIL 상세 (EDU-4-c)
   ============================================ */
.nd-hero { background: linear-gradient(180deg, #F0F7FC 0%, #E1EEF7 100%); padding: 44px; }

.article {
  background: #fff; border-radius: 22px; padding: 40px;
  box-shadow: var(--shadow-card);
  margin-top: 30px;
}
.article-header {
  padding-bottom: 24px; border-bottom: 2px solid var(--line);
  margin-bottom: 30px;
}
.article-header .tag-row { display: flex; gap: 6px; margin-bottom: 12px; }
.article-header h1 { margin: 0 0 16px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; }
.article-header .meta {
  display: flex; gap: 20px; font-size: 13px; color: var(--ink-3);
}
.article-header .meta span strong { color: var(--ink-1); font-weight: 700; }

.article-body {
  font-size: 15px; color: var(--ink-1); line-height: 1.85;
}
.article-body p { margin: 0 0 16px; }
.article-body h3 { margin: 30px 0 14px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; padding-left: 12px; border-left: 4px solid var(--yellow); }
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 20px; }
.article-body li { margin-bottom: 6px; }
.article-body strong { color: var(--pink); font-weight: 800; }
.article-body .info-box {
  background: var(--yellow-soft); border-radius: 14px;
  padding: 20px 24px; margin: 20px 0;
  font-size: 14px;
}
.article-body .info-box .il { font-weight: 800; color: #8A6510; margin-bottom: 6px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.article-body th, .article-body td {
  border: 1px solid var(--line);
  padding: 12px 14px; text-align: left;
}
.article-body th { background: #FCFAF3; font-weight: 700; color: var(--ink-1); }

.attach-block {
  margin-top: 30px; padding: 20px;
  background: var(--bg-page); border-radius: 16px;
}
.attach-block .al { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.attach-block .al svg { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }
.attach-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 6px;
  font-size: 13px;
  transition: transform .12s;
  cursor: pointer;
}
.attach-item:hover { transform: translateX(3px); }
.attach-item .icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 800;
}
.attach-item .icon.pdf { background: #E5507A; }
.attach-item .icon.hwp { background: #4B7BE5; }
.attach-item .name { flex: 1; font-weight: 600; }
.attach-item .size { color: var(--ink-3); font-size: 12px; }
.attach-item .dl { color: var(--yellow); font-weight: 800; }

.article-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line-soft);
}
.article-actions .left-btns { display: flex; gap: 6px; }
.article-actions .left-btns button {
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-page); font-size: 12px; font-weight: 700; color: var(--ink-2);
}

.article-nav {
  background: #fff; border-radius: 22px; overflow: hidden;
  margin-top: 20px; box-shadow: var(--shadow-card);
}
.article-nav .row {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 20px; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s;
}
.article-nav .row:hover { background: #FDFBF5; }
.article-nav .row:last-child { border-bottom: none; }
.article-nav .row .dir { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.article-nav .row .t { color: var(--ink-2); font-weight: 600; }
.article-nav .row .d { color: var(--ink-4); font-size: 12px; font-family: 'Nunito'; }

.back-list {
  text-align: center; margin: 30px 0;
}

/* ============================================
   GALLERY 갤러리 (EDU-4-c)
   ============================================ */
.gal-hero { background: linear-gradient(180deg, #FDF3EA 0%, #FDE4D4 100%); }

.gal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gal-grid { grid-template-columns: 1fr; } }

.gal-item {
  position: relative;
  border-radius: 18px; overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: transform .18s;
  box-shadow: 0 4px 15px rgba(80,70,40,.08);
}
.gal-item:hover { transform: translateY(-3px) scale(1.01); }
.gal-item.wide { grid-column: span 2; aspect-ratio: 8/3; }
.gal-item.tall { grid-row: span 2; aspect-ratio: 4/6; }
@media (max-width: 900px) {
  .gal-item.wide, .gal-item.tall { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; }
}

.gal-item img { width: 100%; height: 100%; object-fit: cover; }
.gal-item .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
  color: #fff;
  opacity: 0; transition: opacity .18s;
}
.gal-item:hover .overlay { opacity: 1; }
.gal-item .overlay .cat {
  display: inline-block;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.9); color: var(--ink-1);
  font-size: 11px; font-weight: 800;
  align-self: flex-start;
  margin-bottom: 8px;
}
.gal-item .overlay .t { font-size: 14px; font-weight: 800; }
.gal-item .overlay .d { font-size: 11px; margin-top: 2px; opacity: 0.9; }

.gal-item.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 50px;
}
.gal-item.ph.c1 { background: linear-gradient(135deg, #FFF3CE, #FFCF3D); }
.gal-item.ph.c2 { background: linear-gradient(135deg, #FDF1F3, #F8A5B5); }
.gal-item.ph.c3 { background: linear-gradient(135deg, #F0F7FC, #A9CFE8); }
.gal-item.ph.c4 { background: linear-gradient(135deg, #F5FBF0, #A8D89B); }
.gal-item.ph.c5 { background: linear-gradient(135deg, #F3EEFB, #C9B8E8); }
.gal-item.ph.c6 { background: linear-gradient(135deg, #FDF3EA, #FDBFA0); }
.gal-item.ph.c7 { background: linear-gradient(135deg, #FFEBAF, #F0B325); }
.gal-item.ph.c8 { background: linear-gradient(135deg, #E1F0DA, #4A7A3A); color: #fff; }

.event-strip {
  background: #fff; border-radius: 22px; padding: 20px 24px;
  box-shadow: var(--shadow-card);
  display: flex; gap: 20px; align-items: center; margin-top: 30px;
  flex-wrap: wrap;
}
.event-strip h3 { margin: 0; font-size: 15px; font-weight: 800; }
.event-strip .list {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.event-strip .list button {
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-page); font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.event-strip .list button.active { background: var(--peach); color: #fff; }

/* ============================================
   FAQ 문의 (EDU-4-c)
   ============================================ */
.faq-hero { background: linear-gradient(180deg, #FDF1F3 0%, #FBE4E8 100%); }

.cat-tabs {
  display: flex; gap: 8px; margin: 30px 0 20px; flex-wrap: wrap;
}
.cat-tabs button {
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  background: #fff;
}
.cat-tabs button.active { background: var(--pink); color: #fff; border-color: var(--pink); }

.faq-search {
  background: linear-gradient(135deg, #FCE0E4 0%, #FDF1F3 100%);
  border-radius: 22px; padding: 40px;
  margin-top: 30px;
  text-align: center;
  position: relative;
}
.faq-search h2 {
  margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.faq-search p { margin: 0 0 20px; color: var(--ink-2); }
.faq-search-input {
  max-width: 500px; margin: 0 auto;
  display: flex; align-items: center;
  background: #fff; border-radius: 999px;
  padding: 6px 6px 6px 24px;
}
.faq-search-input input {
  flex: 1; border: none; outline: none; background: transparent;
  padding: 12px 0;
  font-family: inherit; font-size: 15px;
}
.faq-search-input button {
  padding: 12px 20px;
  background: var(--ink-1); color: #fff;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.faq-tag-hints {
  display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap;
}
.faq-tag-hints button {
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.7);
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}

.faq-list { margin-top: 20px; }
.faq-item {
  background: #fff; border-radius: 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-q {
  padding: 20px 24px;
  display: grid; grid-template-columns: 40px 60px 1fr 24px;
  gap: 14px; align-items: center;
  cursor: pointer;
  transition: background .12s;
}
.faq-q:hover { background: #FDFBF5; }
.faq-q .q-mark {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--pink-soft); color: #B04E5F;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito'; font-weight: 900; font-size: 14px;
}
.faq-q .cat { font-size: 11px; font-weight: 700; color: var(--pink); }
.faq-q .t { font-size: 15px; font-weight: 700; color: var(--ink-1); }
.faq-q .chev {
  color: var(--ink-3); font-size: 18px; transition: transform .18s;
}
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a {
  padding: 0 24px 24px 24px;
  padding-left: 78px;
  display: none;
  font-size: 14px; color: var(--ink-2); line-height: 1.8;
}
.faq-item.open .faq-a { display: block; }
.faq-a strong { color: var(--ink-1); }
.faq-a .quick-links {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.faq-a .quick-links a {
  padding: 6px 12px; background: var(--yellow-soft); color: #8A6510;
  border-radius: 999px; font-size: 12px; font-weight: 700;
}

#inquiry {
  margin-top: 60px;
}
.inq-section {
  background: #fff; border-radius: 22px; padding: 40px;
  box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: 280px 1fr; gap: 40px;
}
@media (max-width: 900px) { .inq-section { grid-template-columns: 1fr; padding: 24px; } }
.inq-section .left h2 {
  margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
}
.inq-section .left p { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.inq-section .left .contact-box {
  background: var(--yellow-soft); border-radius: 16px;
  padding: 16px; margin-top: 20px;
  font-size: 13px;
}
.inq-section .left .contact-box strong { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ink-1); }
.inq-section .left .contact-box .row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  color: var(--ink-2);
}
.past-row .project { color: var(--ink-2); }

/* ============================================
   LOGIN (EDU-4-d)
   ============================================ */
body.auth-bg { background: linear-gradient(180deg, #FBF7ED 0%, #FFF3CE 100%); min-height: 100vh; }

.auth-wrap {
  max-width: 1000px; margin: 40px auto;
  padding: 0 24px;
}
.auth-card {
  background: #fff; border-radius: 32px;
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.1fr;
  box-shadow: 0 20px 60px rgba(80,70,40,.1);
}
@media (max-width: 900px) { .auth-card { grid-template-columns: 1fr; } .auth-visual { display: none; } }

.auth-visual {
  background: linear-gradient(160deg, #FFF3CE 0%, #FFEBAF 100%);
  padding: 50px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.auth-visual .quote { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-visual .quote-mark { font-family: 'Nunito'; font-size: 70px; font-weight: 900; line-height: 1; color: var(--yellow); }
.auth-visual .quote-text {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4;
  color: var(--ink-1);
  margin: -20px 0 20px;
}
.auth-visual .quote-by { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.auth-visual .img-block { text-align: center; margin-top: 20px; }
.auth-visual .img-block img { max-height: 220px; }
.auth-visual .brand {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Nunito'; font-weight: 900; font-size: 16px;
}
.auth-visual .brand .m {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #FFDA6A 0%, #F0B325 100%);
}

.auth-form {
  padding: 60px 50px;
}
.auth-form h1 {
  margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em;
}
.auth-form p.sub {
  margin: 0 0 32px; color: var(--ink-2); font-size: 14px;
}
.auth-form .form-group input { padding: 15px 16px; font-size: 15px; }
.auth-form .options {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.auth-form .options .stay { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.auth-form .options a { font-size: 13px; color: var(--primary); font-weight: 700; }
.auth-form .divider {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0;
  font-size: 12px; color: var(--ink-3);
}
.auth-form .divider::before, .auth-form .divider::after {
  content:''; flex: 1; height: 1px; background: var(--line);
}
.auth-form .social-btns {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.auth-form .social-btn {
  padding: 12px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink-1);
  transition: border-color .12s;
}
.auth-form .social-btn:hover { border-color: var(--ink-3); }
.auth-form .social-btn.kakao { background: #FEE500; border-color: #FEE500; }
.auth-form .social-btn.naver { background: #03C75A; border-color: #03C75A; color: #fff; }
.auth-form .social-btn.google { color: var(--ink-1); }
.auth-form .signup-hint {
  text-align: center; margin-top: 24px;
  font-size: 14px; color: var(--ink-2);
}
.auth-form .signup-hint a { color: var(--primary); font-weight: 700; }

/* ============================================
   SIGNUP (EDU-4-d)
   ============================================ */
body.signup-bg { background: linear-gradient(180deg, #FBF7ED 0%, #F5FBF0 100%); }

.signup-wrap {
  max-width: 720px; margin: 40px auto;
  padding: 0 24px;
}

.steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin-bottom: 40px;
}
.step {
  display: flex; align-items: center; gap: 10px;
}
.step .n {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--line); color: var(--ink-3);
  font-family: 'Nunito'; font-weight: 900; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.step.active .n { background: var(--yellow); color: var(--ink-1); box-shadow: 0 3px 10px rgba(255,193,61,.4); }
.step.done .n { background: var(--green); color: #fff; }
.step .l { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.step.active .l, .step.done .l { color: var(--ink-1); }
.step-line {
  width: 60px; height: 2px; background: var(--line); margin: 0 12px;
}
.step-line.done { background: var(--green); }

.signup-card {
  background: #fff; border-radius: 24px; padding: 40px;
  box-shadow: var(--shadow-card);
}
.signup-card h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.signup-card p.sub { margin: 0 0 32px; color: var(--ink-2); font-size: 14px; }

.agr-all {
  padding: 16px 20px; border: 2px solid var(--line);
  border-radius: 16px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800;
  cursor: pointer;
}
.agr-all:has(input:checked) { border-color: var(--yellow); background: var(--yellow-soft); }
.agr-all input { width: 20px; height: 20px; accent-color: var(--yellow); }

.agr-item {
  padding: 14px 20px 14px 40px;
  border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 24px 1fr auto;
  gap: 10px; align-items: center;
  font-size: 14px;
}
.agr-item:last-child { border-bottom: none; }
.agr-item input { width: 18px; height: 18px; accent-color: var(--yellow); }
.agr-item .req { color: #E5507A; font-size: 12px; font-weight: 700; margin-right: 4px; }
.agr-item .opt { color: var(--ink-3); font-size: 12px; font-weight: 700; margin-right: 4px; }
.agr-item .more { font-size: 12px; color: var(--ink-3); }

.signup-actions {
  display: flex; gap: 10px; margin-top: 24px;
}
.signup-actions .btn { flex: 1; }

.input-with-btn {
  display: flex; gap: 6px;
}
.input-with-btn input { flex: 1; }
.input-with-btn button {
  padding: 0 16px; background: var(--ink-1); color: #fff;
  border-radius: 14px;
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
}

/* ============================================
   MYPAGE (EDU-4-d)
   ============================================ */
.my-hero {
  margin-top: 24px;
  background: linear-gradient(135deg, #FFF3CE 0%, #FDE4D4 100%);
  border-radius: 28px; padding: 30px 40px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.profile { display: flex; gap: 20px; align-items: center; }
.profile .av {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #FFDA6A 0%, #F0B325 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  box-shadow: 0 4px 15px rgba(255,193,61,.3);
}
.profile .info h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.profile .info h2 .lvl {
  display: inline-flex; align-items: center;
  background: var(--ink-1); color: var(--yellow);
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; margin-left: 6px;
  vertical-align: middle;
}
.profile .info .email { font-size: 13px; color: var(--ink-3); }
.profile .info .joined { font-size: 12px; color: var(--ink-4); margin-top: 4px; }
.my-hero .quick-actions { display: flex; gap: 8px; }

.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 30px;
}
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: #fff; border-radius: 20px; padding: 22px;
  box-shadow: var(--shadow-card);
}
.stat-card .top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.stat-card .top .l { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.stat-card .top .icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.stat-card .top .icon.y { background: var(--yellow-soft); }
.stat-card .top .icon.p { background: var(--pink-soft); }
.stat-card .top .icon.b { background: var(--blue-soft); }
.stat-card .top .icon.g { background: var(--green-soft); }
.stat-card .v { font-family: 'Nunito'; font-weight: 900; font-size: 30px; letter-spacing: -0.02em; }
.stat-card .v .u { font-family: 'Pretendard Variable'; font-size: 15px; font-weight: 700; margin-left: 2px; color: var(--ink-3); }
.stat-card .diff { font-size: 12px; color: var(--green); font-weight: 700; margin-top: 4px; }
.stat-card .diff.down { color: var(--pink); }

.my-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  margin-top: 30px;
}
@media (max-width: 900px) { .my-layout { grid-template-columns: 1fr; } }

.side-nav {
  background: #fff; border-radius: 20px; padding: 16px;
  box-shadow: var(--shadow-card);
  height: fit-content;
  position: sticky; top: 90px;
}
.side-nav .group-lbl {
  padding: 8px 12px; font-size: 11px; font-weight: 700; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.side-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: background .12s;
}
.side-nav a:hover { background: var(--bg-page); color: var(--ink-1); }
.side-nav a.active { background: var(--yellow); color: var(--ink-1); font-weight: 800; }
.side-nav a svg { width: 16px; height: 16px; }
.side-nav .count {
  margin-left: auto;
  padding: 1px 8px; border-radius: 999px;
  background: var(--pink); color: #fff;
  font-size: 10px; font-weight: 800; font-family: 'Nunito';
}

.content-block { background: #fff; border-radius: 20px; padding: 28px; box-shadow: var(--shadow-card); margin-bottom: 20px; }
.content-block h2 { margin: 0 0 20px; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; }
.content-block h2 a { font-size: 12px; color: var(--ink-3); font-weight: 600; }

.learn-list { display: flex; flex-direction: column; gap: 14px; }
.learn-item {
  display: grid; grid-template-columns: 80px 1fr 130px;
  gap: 16px; align-items: center;
  padding: 16px; background: var(--bg-page); border-radius: 14px;
}
.learn-item .thumb {
  width: 80px; height: 60px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.learn-item .thumb.c1 { background: linear-gradient(135deg, #F5FBF0, #A8D89B); }
.learn-item .thumb.c2 { background: linear-gradient(135deg, #FDF1F3, #F8A5B5); }
.learn-item .thumb.c3 { background: linear-gradient(135deg, #F0F7FC, #A9CFE8); }
.learn-item .body .cat { font-size: 11px; color: var(--pink); font-weight: 700; }
.learn-item .body .t { font-size: 14px; font-weight: 700; margin: 2px 0 6px; }
.learn-item .body .bar { height: 6px; background: #fff; border-radius: 999px; overflow: hidden; }
.learn-item .body .bar span { display: block; height: 100%; background: var(--yellow); border-radius: 999px; }
.learn-item .body .meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.learn-item .cta { padding: 8px 14px; background: var(--ink-1); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; }
.learn-item .cta.done { background: var(--green); }

.app-row {
  display: grid; grid-template-columns: 80px 1fr 100px 90px 90px;
  gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px dashed var(--line-soft);
  font-size: 13px;
}
.app-row:last-child { border-bottom: none; }
.app-row.head { font-size: 12px; font-weight: 700; color: var(--ink-3); border-bottom: 1.5px solid var(--line); padding-bottom: 12px; }
.app-row .st {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.app-row .st.done { background: var(--green-soft); color: #4A7A3A; }
.app-row .st.wait { background: var(--yellow-soft); color: #8A6510; }
.app-row .st.cancel { background: var(--line-soft); color: var(--ink-4); }
.app-row .type { font-size: 11px; color: var(--ink-3); }
.app-row .type strong { display: block; color: var(--ink-1); font-weight: 700; font-size: 13px; margin-bottom: 2px; }

.notif { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--line-soft); }
.notif:last-child { border-bottom: none; }
.notif.unread { background: linear-gradient(90deg, #FFFAF0, transparent); margin: 0 -14px; padding: 12px 14px; border-radius: 10px; }
.notif .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-top: 6px; flex-shrink: 0; }
.notif.unread .dot { background: var(--pink); }
.notif .body .t { font-size: 13px; font-weight: 600; }
.notif .body .t.strong { font-weight: 800; }
.notif .body .m { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .cols-2 { grid-template-columns: 1fr; } }

/* ============================================
   APPLY-CONSULTING 구 규칙 — EDU-FIGMA-PORT-2d(2026-09-22)로 Figma 1:1 재작성되며 제거.
   .form-layout·.form-card는 apply-competition.astro가, .checkbox-row·.helper·.req는
   apply-competition.astro·faq.astro·signup.astro가 공유하므로 보존(사용 확인 완료).
   ============================================ */
.form-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px;
  margin-top: 30px;
}
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.form-card { background: #fff; border-radius: 22px; padding: 40px; box-shadow: var(--shadow-card); }
.form-card h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.form-card p.desc { margin: 0 0 28px; font-size: 13px; color: var(--ink-3); }
.form-card h3 {
  margin: 30px 0 16px; padding-left: 12px; border-left: 4px solid var(--yellow);
  font-size: 15px; font-weight: 800;
}

/* ============================================
   APPLY-COMPETITION (EDU-4-e)
   ============================================ */
.cp-hero {
  margin-top: 24px;
  background: linear-gradient(135deg, #FDF1F3 0%, #FBE4E8 100%);
  border-radius: 28px; padding: 44px;
  display: grid; grid-template-columns: 1fr 200px; gap: 30px; align-items: center;
}
.cp-hero .breadcrumb { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.cp-hero .breadcrumb a { color: var(--ink-3); }
.cp-hero .breadcrumb .sep { margin: 0 6px; opacity: 0.6; }
.cp-hero h1 { margin: 0 0 8px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.cp-hero .lede { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.cp-hero .cnt {
  display: flex; gap: 12px; margin-top: 20px;
}
.cp-hero .cnt .cd-box {
  background: #fff; padding: 10px 16px; border-radius: 14px;
  text-align: center; min-width: 60px;
}
.cp-hero .cnt .cd-box .n { font-family: 'Nunito'; font-size: 20px; font-weight: 900; }
.cp-hero .cnt .cd-box .l { font-size: 10px; color: var(--ink-3); }

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

.cp-form .form-card { margin-bottom: 20px; }
.form-card h2 .num {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--pink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Nunito'; font-weight: 900; font-size: 13px;
}

.type-select { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type-select input { display: none; }
.type-select label {
  padding: 24px; border: 2px solid var(--line); border-radius: 18px;
  text-align: center;
  cursor: pointer;
  transition: all .12s;
  position: relative;
}
.type-select input:checked + label {
  border-color: var(--pink);
  background: var(--pink-soft);
}
.type-select input:checked + label::after {
  content: '✓'; position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
}
.type-select label .ic { font-size: 32px; margin-bottom: 8px; }
.type-select label .t { font-size: 15px; font-weight: 800; }
.type-select label .s { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.type-select label .p {
  display: inline-block; margin-top: 8px; padding: 3px 10px;
  background: var(--yellow-soft); color: #8A6510;
  border-radius: 6px; font-size: 11px; font-weight: 700;
}

.member-list { display: flex; flex-direction: column; gap: 12px; }
.member-item {
  padding: 16px; background: var(--bg-page); border-radius: 14px;
  display: grid; grid-template-columns: 32px 1fr 1fr 1fr auto;
  gap: 10px; align-items: center;
}
.member-item .n {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito'; font-weight: 900; font-size: 13px;
}
.member-item input {
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 13px; background: #fff;
}
.member-item .del { color: var(--ink-3); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.add-member-btn {
  padding: 12px; border: 2px dashed var(--line); border-radius: 14px;
  background: transparent;
  font-size: 13px; font-weight: 700; color: var(--ink-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.add-member-btn:hover { border-color: var(--pink); color: var(--pink); }

.file-upload {
  padding: 24px;
  border: 2px dashed var(--line); border-radius: 14px;
  text-align: center;
  background: var(--bg-page);
  cursor: pointer;
  transition: all .12s;
}
.file-upload:hover { border-color: var(--yellow); background: var(--yellow-soft); }
.file-upload .ic { font-size: 32px; margin-bottom: 8px; }
.file-upload .t { font-size: 14px; font-weight: 700; }
.file-upload .s { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

.pay-side { background: #fff; border-radius: 20px; padding: 24px; box-shadow: var(--shadow-card); position: sticky; top: 90px; }
.pay-side h3 { margin: 0 0 16px; font-size: 15px; font-weight: 800; }
.pay-side .row {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px dashed var(--line-soft);
  font-size: 13px; color: var(--ink-2);
}
.pay-side .row.total {
  margin-top: 10px; border: none;
  font-size: 16px; font-weight: 800; color: var(--ink-1);
}
.pay-side .row.total .p {
  font-family: 'Nunito'; font-size: 22px; font-weight: 900; color: var(--pink);
}
.pay-side .pay-method {
  margin-top: 20px;
  padding: 14px; background: var(--pink-soft); border-radius: 12px;
  font-size: 12px; color: var(--ink-2);
}
.pay-side .pay-method strong { color: var(--ink-1); }
.pay-side .btn { width: 100%; margin-top: 20px; }

.agree-block {
  padding: 20px; background: var(--yellow-soft); border-radius: 16px;
  margin-top: 20px;
}
.agree-block .row { padding: 6px 0; }