/* AiNex Edu — 지원센터 (교강사 / 기업 교육담당자 / 교육영업 파트너) + 공지 상세. 2026-10 redesign, prefix .rcx-
   Markup: include/design/role_center.php, hrdedu/center/notice_view.html. */

.rcx {
  --rcx-ink: #12141a;
  --rcx-text: #3b4252;
  --rcx-muted: #6b7385;
  --rcx-line: #e3e7ec;
  --rcx-accent: #0d3f76;
  --rcx-bg: #f6f7fb;
  background: var(--rcx-bg);
  color: var(--rcx-text);
}

.rcx-in { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }

/* hero */
.rcx-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  background:
    radial-gradient(800px 380px at 90% -20%, rgb(255 255 255 / 0.16), transparent 60%),
    var(--p);
  color: #fff;
  isolation: isolate;
}

.rcx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, #000 55%, transparent);
  pointer-events: none;
}

.rcx-heroGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 48px; align-items: center; }

.rcx-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: rgb(255 255 255 / 0.78); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.rcx-roleIco { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgb(255 255 255 / 0.28); border-radius: 6px; background: rgb(255 255 255 / 0.14); }
.rcx-roleIco svg, .rcx-panelIco svg, .rcx-contactIco svg, .rcx-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.rcx-title { margin: 0; color: #fff; font-size: clamp(32px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.2; }
.rcx-lead { max-width: 640px; margin: 16px 0 0; color: rgb(255 255 255 / 0.86); font-size: 16.5px; line-height: 1.7; word-break: keep-all; }

.rcx-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.rcx-jump a { padding: 9px 16px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 4px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.15s ease; }
.rcx-jump a:hover { background: rgb(255 255 255 / 0.14); }

.rcx-lmsCard {
  padding: 26px;
  border: 1px solid rgb(255 255 255 / 0.26);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.12);
  box-shadow: 0 30px 60px -30px rgb(10 20 80 / 0.6);
  backdrop-filter: blur(10px);
}

.rcx-lmsKicker { display: inline-flex; margin: 0 0 12px; padding: 4px 10px; border-radius: 4px; background: #fff; color: var(--rcx-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
.rcx-lmsText { margin: 0 0 20px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.6; word-break: keep-all; }
.rcx-lmsCard .rcx-btn { width: 100%; }

/* buttons */
.rcx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 800; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.rcx-btnWhite { background: #fff; color: #0a3260; }
.rcx-btnWhite:hover { background: #eef3f9; }
.rcx-btnGlass { border-color: rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.1); color: #fff; }
.rcx-btnGlass:hover { background: rgb(255 255 255 / 0.2); }
.rcx-btnLine { border-color: #d9dee6; background: #fff; color: var(--rcx-ink); }
.rcx-btnLine:hover { border-color: var(--rcx-accent); color: var(--rcx-accent); }

/* body */
.rcx-body { padding: 48px 0 88px; }
.rcx-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.rcx-panel { padding: 26px; border: 1px solid var(--rcx-line); border-radius: 6px; background: #fff; scroll-margin-top: 96px; }
.rcx-panelHead { display: flex; gap: 14px; align-items: center; margin: 0 0 18px; }
.rcx-panelIco { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 6px; background: #eef3f9; color: var(--rcx-accent); }
.rcx-kicker { margin: 0 0 4px; color: var(--rcx-accent); font-size: 13px; font-weight: 800; }
.rcx-panelHead h2 { margin: 0; color: var(--rcx-ink); font-size: 19px; font-weight: 800; letter-spacing: -0.035em; }

.rcx-notices, .rcx-files { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.rcx-notices a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 15px 16px;
  border-radius: 6px;
  background: var(--rcx-bg);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.rcx-notices a:hover { background: #eef3f9; }
.rcx-notices b { overflow: hidden; color: var(--rcx-ink); font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.rcx-notices time { color: var(--rcx-muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rcx-notices a:not(:has(.rcx-badge)) b { grid-column: 1 / 3; }

.rcx-badge { display: inline-flex; padding: 3px 9px; border-radius: 4px; background: #fff; color: var(--rcx-accent); font-size: 12px; font-weight: 800; white-space: nowrap; }
.rcx-go { display: grid; place-items: center; color: #98a2b3; transition: color 0.15s ease, transform 0.15s ease; }
.rcx-go svg { width: 16px; height: 16px; }
a:hover > .rcx-go { color: var(--rcx-accent); transform: translateX(2px); }

.rcx-files a, .rcx-files > li > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--rcx-line);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.rcx-files a:hover { border-color: #b8c7ff; }
.rcx-fileExt { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: var(--p); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.rcx-fileText b { display: block; color: var(--rcx-ink); font-size: 15px; font-weight: 800; }
.rcx-fileText em { display: block; margin-top: 2px; color: var(--rcx-muted); font-size: 13px; font-style: normal; line-height: 1.5; }
.rcx-dl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eef3f9; color: var(--rcx-accent); font-weight: 800; }

.rcx-empty { display: grid; place-items: center; gap: 4px; padding: 40px 16px; border: 1px dashed #d9dee6; border-radius: 6px; text-align: center; }
.rcx-empty p { margin: 0; color: var(--rcx-ink); font-size: 15px; font-weight: 700; }
.rcx-empty span { color: var(--rcx-muted); font-size: 13.5px; }

.rcx-sec { margin-top: 64px; scroll-margin-top: 96px; }
.rcx-h2 { margin: 0 0 22px; color: var(--rcx-ink); font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.35; word-break: keep-all; }

.rcx-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.rcx-rules li { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--rcx-line); border-radius: 6px; background: #fff; }
.rcx-ruleNo { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 6px; background: #eef3f9; color: var(--rcx-accent); font-size: 14px; font-weight: 800; }
.rcx-rules b { color: var(--rcx-ink); font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.rcx-rules span:not(.rcx-ruleNo) { color: var(--rcx-text); font-size: 14.5px; line-height: 1.6; word-break: keep-all; }

.rcx-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.rcx-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--rcx-line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rcx-contact:hover { border-color: #b8c7ff; box-shadow: 0 18px 36px -28px rgba(13,63,118,0.6); }
.rcx-contactIco { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: #eef3f9; color: var(--rcx-accent); }
.rcx-contact b { color: var(--rcx-ink); font-size: 16px; font-weight: 800; }
.rcx-contact em { grid-column: 2; color: var(--rcx-muted); font-size: 13px; font-style: normal; }
.rcx-contact .rcx-go { grid-row: 1 / span 2; grid-column: 3; }
.rcx-contact.is-main { border-color: var(--rcx-accent); background: var(--rcx-accent); }
.rcx-contact.is-main b, .rcx-contact.is-main .rcx-go { color: #fff; }
.rcx-contact.is-main .rcx-contactIco { background: rgb(255 255 255 / 0.16); color: #fff; }
.rcx-contact.is-main:hover { background: #0a3260; }
.rcx-note { margin: 16px 0 0; color: var(--rcx-muted); font-size: 14px; }

/* close */
.rcx-close { padding: 56px 0; background: var(--p); color: #fff; }
.rcx-close .rcx-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.rcx-close h2 { max-width: 640px; margin: 0; color: #fff; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.35; word-break: keep-all; }
.rcx-closeActions { display: flex; flex: none; gap: 10px; }

/* notice view */
.rcx-view { padding: 40px 0 88px; }
.rcx-viewIn { width: min(880px, calc(100% - 48px)); }
.rcx-crumbs { display: flex; gap: 8px; margin: 0 0 16px; color: var(--rcx-muted); font-size: 14px; font-weight: 600; }
.rcx-crumbs a { color: var(--rcx-accent); text-decoration: none; }
.rcx-article { overflow: hidden; border: 1px solid var(--rcx-line); border-radius: 6px; background: #fff; }
.rcx-articleHead { padding: 34px 36px 26px; border-bottom: 1px solid var(--rcx-line); background: linear-gradient(180deg, #f5f7fa, #fff); }
.rcx-articleHead .rcx-badge { background: #eef3f9; }
.rcx-articleHead h1 { margin: 12px 0 8px; color: var(--rcx-ink); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.35; word-break: keep-all; }
.rcx-articleHead time { color: var(--rcx-muted); font-size: 14px; font-weight: 600; }
.rcx-doc { padding: 30px 36px 38px; color: var(--rcx-text); font-size: 16px; line-height: 1.8; word-break: keep-all; }
.rcx-doc img { max-width: 100%; height: auto; border-radius: 6px; }
.rcx-doc table { width: 100%; border-collapse: collapse; }
.rcx-doc td, .rcx-doc th { padding: 8px 10px; border: 1px solid var(--rcx-line); }
.rcx-emptyLg { padding: 80px 16px; background: #fff; }
.rcx-viewBack { margin: 22px 0 0; }

@media (width <= 1023px) {
  .rcx-heroGrid, .rcx-two { grid-template-columns: 1fr; }
  .rcx-heroGrid { gap: 28px; }
  .rcx-contacts { grid-template-columns: 1fr; }
}

@media (width <= 640px) {
  .rcx-in, .rcx-viewIn { width: calc(100% - 32px); }
  .rcx-hero { padding: 40px 0 48px; }
  .rcx-panel { padding: 20px; }
  .rcx-notices a { grid-template-columns: minmax(0, 1fr) auto; }
  .rcx-notices .rcx-badge { grid-column: 1 / -1; justify-self: start; }
  .rcx-notices b { white-space: normal; }
  .rcx-close .rcx-in { flex-direction: column; align-items: stretch; }
  .rcx-closeActions { flex-direction: column; }
  .rcx-articleHead, .rcx-doc { padding-inline: 22px; }
}