@charset "UTF-8";

/* [1] Floating capsule 헤더 */
.floatnav-wrap {
  position: fixed;
  top: var(--floatnav-top);
  left: 0; right: 0;
  z-index: 1001;
  display: flex; justify-content: center;
  padding: 0 20px;
  pointer-events: none;
}
.floatnav {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-width: 500px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-card-hover);
  transition: background .3s ease;
}
.floatnav.is-scrolled {
  background: rgba(255,255,255,.92);
}

.fn-slot { justify-self: start; }

.fn-brand {
  justify-self: center;
  display: flex; align-items: center; gap: 9px;
  padding: 6px 14px;
}
.fn-brand__name {
  font-weight: 800; font-size: 15px;
  letter-spacing: -.01em; white-space: nowrap;
}

.fn-hamburger {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--kor-red);
  color: #fff;
  border: 0; cursor: pointer;
  font-size: 14px; font-weight: 700; line-height: 1;
  white-space: nowrap;
  transition: var(--tr-base);
}
.fn-hamburger i { font-size: 18px; line-height: 1; }
.fn-hamburger:hover {
  background: var(--kor-red-500);
  box-shadow: var(--shadow-pop);
  transform: translateY(-1px);
}
.fn-hamburger:active { transform: translateY(0); }
.fn-hamburger:focus-visible {
  outline: 2px solid var(--kor-red);
  outline-offset: 3px;
}

/* [1-b] Fullmenu dropdown */
.fullmenu {
  position: fixed; inset: 0;
  z-index: 1000; 
  pointer-events: none;
}
.fullmenu[hidden] { display: none; }
.fullmenu__backdrop {
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: auto;
}
.fullmenu__panel {
  position: absolute;
  top: calc(var(--floatnav-top) + 76px); 
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: calc(100% - 40px);
  max-width: 980px;
  padding: 28px 32px 32px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 48px -12px rgba(15,15,38,.22);
  opacity: 0;
  pointer-events: auto;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    opacity .22s ease;
  max-height: calc(100vh - var(--floatnav-top) - 90px);
  overflow-y: auto;
}
.fullmenu.is-open .fullmenu__panel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.fullmenu__auth {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.fullmenu__auth-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; line-height: 1;
  transition: var(--tr-fast);
}
.fullmenu__auth-btn i { font-size: 18px; }

.fullmenu__auth-btn--text {
  padding: 8px 10px;
  color: var(--kor-red);
  background: transparent;
}
.fullmenu__auth-btn--text:hover {
  color: var(--kor-red-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fullmenu__auth-btn--grad {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--grad-main);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(201,10,10,.55);
}
.fullmenu__auth-btn--grad:hover {
  box-shadow: 0 10px 22px -6px rgba(201,10,10,.65);
  transform: translateY(-1px);
}
.fullmenu__auth-btn--grad:active { transform: translateY(0); }

.fullmenu__auth-btn:focus-visible {
  outline: 2px solid var(--kor-red);
  outline-offset: 2px;
}

.fullmenu__nav {
  width: 100%;
}
.fullmenu__cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.fullmenu__cat {
  padding: 0 20px;
  border-right: 1px solid var(--line);
}
.fullmenu__cat:first-child { padding-left: 0; }
.fullmenu__cat:last-child { padding-right: 0; border-right: 0; }
.fullmenu__cat-label {
  font-family: var(--font-title, inherit);
  font-size: 13px; font-weight: 700;
  color: var(--kor-red);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.fullmenu__items {
  display: flex; flex-direction: column; gap: 2px;
}
.fullmenu__link {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0;
  font-size: 14px; font-weight: 600;
  color: var(--ink-700);
  transition: var(--tr-fast);
}
.fullmenu__link i {
  font-size: 16px;
  color: var(--ink-400);
  transition: var(--tr-fast);
}
.fullmenu__link:hover {
  color: var(--kor-red);
}
.fullmenu__link:hover i { color: var(--kor-red); }
.fullmenu__link:focus-visible {
  outline: 2px solid var(--kor-red);
  outline-offset: 2px;
}

/* 스크린리더 전용 라벨 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* [2] Hero */
.hero {
  position: relative;
  overflow-x: clip;     
  overflow-y: visible;  
  max-width: 1920px;
  margin: 0 auto;
  padding: 140px 0 72px;
  background: url('../../images/page/main/hero-daegu-640.jpg?v=5') center 70%/cover no-repeat;
  background-image: image-set(
    url('../../images/page/main/hero-daegu-640.webp?v=5') type('image/webp'),
    url('../../images/page/main/hero-daegu-640.jpg?v=5') type('image/jpeg')
  );
}
@media (min-width: 641px) {
  .hero {
    background-image: image-set(
      url('../../images/page/main/hero-daegu-1024.webp?v=5') type('image/webp'),
      url('../../images/page/main/hero-daegu-1024.jpg?v=5') type('image/jpeg')
    );
  }
}
@media (min-width: 1025px) {
  .hero {
    background-image: image-set(
      url('../../images/page/main/hero-daegu-1600.webp?v=5') type('image/webp'),
      url('../../images/page/main/hero-daegu-1600.jpg?v=5') type('image/jpeg')
    );
  }
}
@media (min-width: 1601px) {
  .hero {
    background-image: image-set(
      url('../../images/page/main/hero-daegu-2400.webp?v=5') type('image/webp'),
      url('../../images/page/main/hero-daegu-2400.jpg?v=5') type('image/jpeg')
    );
  }
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .55) 0%,
    rgba(0, 0, 0, .42) 45%,
    rgba(0, 0, 0, .60) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }

.fx-orb { display: none; }

.hero__eyebrow { display: flex; justify-content: center; margin-bottom: 18px; }
.hero__eyebrow > span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .5);
  font-size: 14px; font-weight: 700;
  color: var(--kor-red);
}
.hero__title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.hero .txt-grad {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.hero__sub {
  margin: 10px auto 0;
  text-align: center;
  color: rgba(255, 255, 255, .9);
  font-size: 14.5px; line-height: 1.55;
  max-width: 640px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.hero .search__tags-label { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.hero .search-scope span  { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.hero .search-scope i {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

/* 통합검색 박스 */
.search {
  max-width: 820px;
  margin: 24px auto 0;
  position: relative;
}
.search__box {
  display: flex; align-items: center; gap: 0;
  background: #fff;
  border: 2px solid var(--kor-red-300);
  border-radius: var(--r-pill);
  transition: var(--tr-base);
}
.search__box:focus-within {
  border-color: var(--kor-red);
}
.search__cat {
  flex-shrink: 0;
  position: relative;
  border-right: 1px solid var(--line);
  border-top-left-radius: var(--r-pill);
  border-bottom-left-radius: var(--r-pill);
}
.search__cat > summary {
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px 0 22px;
  min-width: 120px;
  height: 52px;
  font-size: 14px; font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.search__cat > summary::-webkit-details-marker { display: none; }
.search__cat > summary::marker { content: ""; }
.search__cat > summary i {
  font-size: 18px; color: var(--ink-500);
  margin-left: auto;
  transition: transform .2s ease;
}
.search__cat[open] > summary i { transform: rotate(180deg); }
.search__cat-menu {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  min-width: 200px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card-hover);
  z-index: 20;
  display: flex; flex-direction: column;
  list-style: none;
}
.search__cat-menu li { list-style: none; }
.search__cat-menu button {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 14px; font-weight: 500;
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.search__cat-menu button:hover {
  background: var(--kor-red-50);
  color: var(--kor-red);
}
.search__input {
  flex: 1; min-width: 0;
  height: 52px;
  border: none; outline: none;
  padding: 0 18px;
  font-size: 15px;
  color: var(--ink-900);
  background: transparent;
}
.search__input::placeholder { color: var(--ink-400); }
.search__btn {
  flex-shrink: 0;
  height: 40px; margin-right: 6px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--grad-main);
  color: #fff;
  font-size: 13.5px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; gap: 6px;
  transition: var(--tr-base);
}
.search__btn:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
button.search__btn { border: 0; cursor: pointer; font-family: inherit; }

.search__tags {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.search__tags-label { font-size: 14px; font-weight: 700; color: var(--ink-400); }
.search__tag {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 600;
  color: var(--ink-700);
  transition: var(--tr-fast);
}
.search__tag:hover {
  border-color: var(--kor-red-500);
  color: var(--kor-red);
  background: var(--kor-red-50);
}

.search-scope {
  display: flex; justify-content: center;
  gap: 26px; margin-top: 28px;
  flex-wrap: wrap;
}
.search-scope span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-500);
}
.search-scope i {
  font-size: 16px;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* [3] .hub-head */
.hub-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 32px;
  flex-wrap: wrap;
}
.hub-head__title { min-width: 0; max-width: 720px; }
.hub-head__title .eyebrow      { display: inline-flex; align-items: center; gap: 8px; }
.hub-head__title .section-title { margin-top: 4px; }
.hub-head__title .section-desc  { margin-top: 12px; }

.hub-head__meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.hub-head__meta .lbl {
  font-size: 14px; font-weight: 500; color: var(--ink-500);
  letter-spacing: .04em;
}

/* [4] .role-hub */
.role-hub {
  padding: 72px 0 84px;
  background: #fff;
}
.role-hub__grid {
  display: flex; flex-direction: row; gap: 18px;
}
.role {
  flex: 1;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 24px 24px;
  display: flex; flex-direction: column;
  color: #fff;
  cursor: pointer;
  transition:
    flex .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease;
  box-shadow: var(--shadow-card-rest);
  min-height: 340px;
}
.role:hover {
  flex: 1.8; 
  box-shadow: var(--shadow-card-hover);
}
.role--biz {
  --role-img: url('../../images/page/main/mcon0101.jpg');
  --role-img: image-set(url('../../images/page/main/mcon0101.webp') type('image/webp'), url('../../images/page/main/mcon0101.jpg') type('image/jpeg'));
}
.role--uni {
  --role-img: url('../../images/page/main/mcon0102.jpg');
  --role-img: image-set(url('../../images/page/main/mcon0102.webp') type('image/webp'), url('../../images/page/main/mcon0102.jpg') type('image/jpeg'));
}
.role--student {
  --role-img: url('../../images/page/main/mcon0103.jpg');
  --role-img: image-set(url('../../images/page/main/mcon0103.webp') type('image/webp'), url('../../images/page/main/mcon0103.jpg') type('image/jpeg'));
}
.role--citizen {
  --role-img: url('../../images/page/main/mcon0104.jpg');
  --role-img: image-set(url('../../images/page/main/mcon0104.webp') type('image/webp'), url('../../images/page/main/mcon0104.jpg') type('image/jpeg'));
}

.role::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--role-img) center/cover no-repeat;
  z-index: 0;
  filter: grayscale(.7);
  transition: filter .4s ease;
}
.role:hover::after {
  filter: grayscale(0);
}

.role::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.30) 100%);
  pointer-events: none;
  transition: background .3s ease;
}
.role:hover::before {
  background: linear-gradient(180deg,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.65) 45%,
    rgba(0,0,0,.40) 100%);
}
.role > * { position: relative; z-index: 2; }

.role__deco {
  position: absolute; right: -40px; bottom: -40px;
  font-size: 190px; opacity: .14;
  pointer-events: none; line-height: 1;
}
.role__eyebrow {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .65;
}
.role__name {
  margin-top: 6px;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.role__desc {
  margin-top: 6px;
  font-size: 14.5px; line-height: 1.5;
  opacity: .85; max-width: 340px;
  min-height: calc(1.5em * 2); 
}
.role__list {
  order: 1; 
  padding-top: 16px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .35s ease .1s,
    transform .4s cubic-bezier(.2,.8,.2,1) .1s;
  max-height: 0;
  overflow: hidden;
}
.role:hover .role__list {
  opacity: 1;
  transform: translateY(0);
  max-height: 340px;
}
.role__list a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 14px; font-weight: 700;
  color: #fff;
  transition: var(--tr-fast);
}
.role__list a:hover {
  background: rgba(255, 255, 255, .26);
  padding-left: 20px;
}
.role__list a i { font-size: 17px; }

.role__hint {
  order: 2; /* 카드 바닥으로 */
  margin-top: auto;
  padding-top: 26px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: #fff;
  opacity: .6;
  transition: opacity .25s ease;
}
.role:hover .role__hint {
  opacity: 0;
  height: 0;
  padding: 0; margin: 0;
  overflow: hidden;
}
.role__eyebrow,
.role__name,
.role__desc,
.role__hint {
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}

/* [5] .live-hub */
.live-hub {
  padding: 72px 0 84px;
  background: var(--bg-soft);
  position: relative;
}

/* api-chip */
.api-chip {
  font-size: 14px; font-weight: 500; line-height: 1;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-700);
}
.api-chip--btn {
  cursor: pointer;
  transition: var(--tr-fast);
  font-family: inherit;
}
.api-chip--btn:hover {
  background: var(--kor-red);
  border-color: var(--kor-red);
  color: #fff;
  transform: translateY(-1px);
}
.api-chip--btn:active { transform: translateY(0); }

/* Bento */
.bento {
  --bento-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bento-gap);
  align-items: stretch;
}
.tile { min-width: 0; }
.tile--match { width: calc(66.6667% - var(--bento-gap) / 2); order: 2; }
.kpi-stack {
  width: calc(33.3333% - var(--bento-gap) / 2);
  order: 1;
  display: flex; flex-direction: column;
  gap: var(--bento-gap);
  min-width: 0;
}
.kpi-stack .tile { width: 100%; flex: 1; min-height: 0; }
.tile--notice { width: calc(66.6667% - var(--bento-gap) / 2); order: 3; }
.tile--jobs   { width: calc(33.3333% - var(--bento-gap) / 2); order: 4; }
.tile--survey { width: 100%; order: 5; }
.tile--notice, .tile--jobs { height: 320px; }
.tile {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card-rest);
  padding: 22px 24px;
  overflow: hidden; position: relative;
  transition: var(--tr-base);
}
.tile__label {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-title); 
  font-size: 16px; font-weight: 700;
  color: var(--ink-900);
}
.tile__label i { font-size: 15px; color: var(--kor-red-500); }
.tile__label .src {
  font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 본문 폰트 유지 */
  font-size: 12px; font-weight: 500;
  color: var(--ink-400);
  letter-spacing: 0;
  padding: 0; background: transparent;
  border-radius: 0;
}
.tile__label .src::before { content: "· "; }

.tile__more {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line-strong);
  font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 버튼 라벨은 본문 폰트 */
  font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--ink-700);
  transition: var(--tr-fast);
  white-space: nowrap;
}
.tile__more i {
  font-size: 18px; line-height: 1;
  color: var(--ink-400);
  width: 14px; overflow: hidden; text-align: center;
}
.tile__more:hover {
  background: var(--kor-red);
  border-color: var(--kor-red);
  color: #fff;
  gap: 6px;
}
.tile__more:hover i { color: #fff; }

.tile--match, .tile--equip, .tile--comp { overflow: visible; }
.tile--survey {
  background-color: #95b0bc;
  background-image:
    url('../../images/page/main/banner_right.png'),
    linear-gradient(to right, rgba(50,100,132,.75) 0%, rgba(50,100,132,.55) 30%, rgba(50,100,132,.2) 55%, transparent 70%),
    linear-gradient(to top, #bacdd5 0%, #809fad 35%, #809fad 65%, #95b0bc 100%);
  background-position: right center, left top, left top;
  background-size: auto 90%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border: none; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 14px;
}

.count-block {
  margin-top: 12px;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tile--match .big {
  display: flex; justify-content: center; align-items: baseline; gap: 4px;
  font-family: var(--font-title); /* 세방고딕 */
  font-size: 42px; font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  line-height: 1.1;
}
.tile--match .big small {
  font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 본문 폰트로 복귀 */
  font-size: 16px; font-weight: 400; color: var(--ink-500);
}
.tile--match .sub {
  font-size: 14px; color: var(--ink-400);
  text-align: center;
}
.match-bars {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.mrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-500);
}
.mrow .nm  { width: 88px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.mrow .bar i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--grad-main);
  width: 0;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.mrow:nth-child(1) .bar i { background: #F87171; }  /* AI·로봇 */
.mrow:nth-child(2) .bar i { background: #FBBF77; }  /* 이차전지 */
.mrow:nth-child(3) .bar i { background: #7DD3FC; }  /* 반도체 */
.mrow:nth-child(4) .bar i { background: #6EE7B7; }  /* 헬스케어 */
.mrow .val {
  width: 34px; text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700); font-weight: 700;
}

.tile--equip, .tile--comp {
  display: flex; flex-direction: column;
}
.tile--equip .num, .tile--comp .num {
  flex: 1;
  margin-top: 12px;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-title); /* 세방고딕 */
  font-size: 30px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.tile--equip .num small, .tile--comp .num small {
  font-family: 'Pretendard Variable', Pretendard, sans-serif; /* 본문 폰트로 복귀 */
  font-size: 14px; font-weight: 400; color: var(--ink-500);
}

.tile--notice,
.tile--jobs {
  display: flex; flex-direction: column;
}

.notice-list {
  margin-top: 12px;
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.notice-list::-webkit-scrollbar,
.joblist::-webkit-scrollbar { width: 6px; }
.notice-list::-webkit-scrollbar-track,
.joblist::-webkit-scrollbar-track { background: transparent; }
.notice-list::-webkit-scrollbar-thumb,
.joblist::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 3px;
}
.notice-list::-webkit-scrollbar-thumb:hover,
.joblist::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
/* Firefox */
.notice-list, .joblist {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.notice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: 14px; font-weight: 600;
  color: var(--ink-700);
  transition: var(--tr-fast);
}
.notice:last-child { border-bottom: none; }
.notice:hover {
  color: var(--kor-red);
  padding-left: 8px;
}
.notice:hover .notice__arr { opacity: 1; transform: translateX(2px); }

.notice__dday {
  flex-shrink: 0;
  width: 48px; text-align: center;
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
  padding: 4px 0;
  border-radius: var(--r-pill);
  background: #f9f9f9;
  border: 1px solid #ddd;
  color: #666;
  font-variant-numeric: tabular-nums;
}
.notice__tag {
  flex-shrink: 0;
  font-size: 14px; font-weight: 500;
  padding: 3px 9px; border-radius: var(--r-pill);
}
.notice__title {
  flex: 1; min-width: 0;
  font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice__date {
  flex-shrink: 0;
  width: 56px; text-align: right;
  font-size: 14px; font-weight: 500;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.notice__arr {
  flex-shrink: 0;
  font-size: 18px; opacity: .4;
  transition: var(--tr-fast);
}

.tag--iris { background: var(--kor-red-50); color: var(--kor-red);   }
.tag--dash { background: var(--amber-50);  color: var(--amber-700); }
.tag--dris { background: var(--kor-blue-50);   color: var(--kor-blue);  }

/* 채용 타일 */
.tile--jobs .joblist {
  margin-top: 12px;
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.tile--jobs .joblist a {
  display: block;
  padding: 10px 2px;
  border-bottom: 1px dashed var(--line);
  font-size: 16px; font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: var(--tr-fast);
}
.tile--jobs .joblist a:last-child { border-bottom: none; }
.tile--jobs .joblist a:hover      { color: var(--kor-red); }
.tile--jobs .joblist .co {
  display: block;
  font-size: 14px; color: var(--ink-400); font-weight: 500;
  margin-top: 3px;
}

.tile--survey .txt b {
  display: block;
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: #fff;
}
.tile--survey .txt span {
  font-size: 14px;
  color: #fff;
  opacity: .9;
}
.tile--survey .go {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px; font-weight: 400; line-height: 1;
  text-decoration: none;
  transition: font-weight .2s ease, color .2s ease;
}
.tile--survey:hover .go,
.tile--survey:focus-within .go { font-weight: 700; }
.tile--survey .go i {
  font-size: 18px; line-height: 1;
  width: 14px; overflow: hidden; text-align: center;
}

/* [6] Linked platforms */
.link-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.link-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  transition: var(--tr-base);
}
.link-card:hover {
  transform: translateY(-4px);
  border-color: var(--kor-red-300);
  box-shadow: var(--shadow-card);
}
.link-card:hover .icon-box {
  background: var(--grad-main);
  border-color: transparent;
  color: #fff;
}
.link-card__title {
  font-weight: 800; font-size: 15.5px;
  color: var(--ink-900);
}
.link-card__desc {
  font-size: 14px; color: var(--ink-500);
  margin-top: 3px; line-height: 1.5;
}

/* [7] Partners marquee */
.partners {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: relative; isolation: isolate;
}
.partners__head {
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: 10px;
}
.partners__marquee {
  overflow-x: clip; overflow-y: visible;
  padding: 10px 0; margin: -10px 0;
}
.partners__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.partners__group {
  display: flex; align-items: center;
  gap: 20px; padding-right: 20px;
  flex-shrink: 0;
}
.partners--static .partners__head { display: none; }
.partners--static .partners__track { width: 100%; justify-content: center; }
.partners--static .partners__group { padding-right: 0; }
.partner-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: var(--tr-base);
}
.partner-chip:hover {
  border-color: var(--kor-red-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.partner-chip--logo { padding: 10px 18px; }
.partner-chip--logo img {
  display: block;
  width: 150px; height: 44px;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 1024px) {
  .tile--match,
  .kpi-stack   { width: 100%; }
  .kpi-stack   { flex-direction: row; }
  .kpi-stack .tile { flex: 1; }
  .tile--notice,
  .tile--jobs  { width: 100%; height: 280px; }
}
@media (max-width: 640px) {
  .floatnav     { min-width: 320px; }
  .kpi-stack   { flex-direction: column; }
  .tile--notice,
  .tile--jobs  { height: 240px; }
  .tile--survey {
    padding-bottom: 100px;
    background-position: right bottom 20px, left top, left top;
    background-size: auto 150px, 100% 100%, 100% 100%;
  }
}
@media (max-width: 1100px) {
  .floatnav {
    width: 100%;
    max-width: 640px;
  }
  .link-grid { grid-template-columns: repeat(2, 1fr); }
  .fullmenu__panel { padding: 24px 22px 26px; }
  .fullmenu__cats { grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
  .fullmenu__cat { padding: 0; border-right: 0; }
}
@media (max-width: 900px) {
  .fullmenu__panel { padding: 22px 20px 24px; }
  .fullmenu__cats { grid-template-columns: repeat(2, 1fr); gap: 20px 20px; }
  .fullmenu__cat-label { font-size: 12px; }
  .fullmenu__link { font-size: 13px; padding: 8px 0; }
}
@media (max-width: 640px) {
  .fullmenu__panel {
    top: calc(var(--floatnav-top) + 62px);
    width: calc(100% - 24px);
    padding: 18px 16px 20px;
    border-radius: var(--r-md);
    max-height: calc(100vh - var(--floatnav-top) - 76px);
  }
  .fullmenu__auth {
    padding-bottom: 12px;
    margin-bottom: 14px;
    gap: 6px;
  }
  .fullmenu__auth-btn { font-size: 13px; }
  .fullmenu__auth-btn--text { padding: 6px 8px; }
  .fullmenu__auth-btn--grad { padding: 8px 14px; }
  .fullmenu__cats { grid-template-columns: 1fr; gap: 14px; }
  .fullmenu__items { gap: 0; }
  .fullmenu__link { padding: 10px 0; }
}
@media (max-width: 1440px) {
  .role__name { font-size: clamp(18px, 2.4vw, 22px); }
}
@media (max-width: 1280px) {
  .role, .role:hover { flex: 1; }
  .role__name { font-size: clamp(18px, 2.4vw, 24px); }
  .role__hint { display: none; }
}
@media (max-width: 1280px) and (min-width: 1025px) {
  .role-hub__grid {
    flex-wrap: wrap;
    min-height: 0;
  }
  .role, .role:hover {
    flex: 0 0 calc(50% - 9px); 
  }
  .role__hint { display: flex; }
  .role__list {
    transition:
      opacity .35s ease .1s,
      transform .4s cubic-bezier(.2,.8,.2,1) .1s,
      max-height .45s cubic-bezier(.2,.8,.2,1);
  }
}
@media (max-width: 1024px) {
  .hero { padding: 150px 0 64px; }
  .role-hub__grid { display: flex; flex-direction: column; min-height: 0; }
  .role { min-height: 0; }
  .role__list {
    transition:
      opacity .35s ease .1s,
      transform .4s cubic-bezier(.2,.8,.2,1) .1s,
      max-height .45s cubic-bezier(.2,.8,.2,1);
  }
  .hub-head { flex-direction: column; align-items: center; text-align: center; }
  .hub-head__title { max-width: 100%; }
  .hub-head__title .eyebrow { justify-content: center; }
  .hub-head__meta { justify-content: center; }
}
@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .tile {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
}
@media (max-width: 768px) {
  .floatnav-wrap { top: 10px; padding: 0 12px; }
  .floatnav { padding: 6px 8px; gap: 4px; }
  .fn-brand { padding: 4px 8px; gap: 8px; }
  .fn-brand__name { font-size: 14px; }
  .fn-hamburger { padding: 8px 14px; font-size: 13px; }
  .fn-hamburger i { font-size: 16px; }
  .search__cat { display: none; }
  .search__box  { border-radius: var(--r-md); }
  .search__btn  { border-radius: var(--r-md); padding: 0; width: 44px; gap: 0; justify-content: center; }
  .search__btn .search__btn-label { display: none; }
  .search__btn i { font-size: 22px; }
  .search__input { padding: 0 14px; font-size: 16px; height: 56px; min-width: 0; }
  .search__box .search__btn { height: 44px; margin-right: 6px; }
  .search__tags { gap: 6px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
  .search__tags-label { display: none; }
  .search__tag { padding: 5px 10px; font-size: 12px; font-weight: 500; }
  .search__tag:nth-child(n+7) { display: none; }
  .search-scope { display: none; }
  .hero { padding: 120px 0 56px; }
  .hero__title { font-size: clamp(26px, 6vw, 40px); }
  .hero__sub   { font-size: 15px; }
  .hero__eyebrow-more { display: none; }
  .hero__eyebrow > span { padding: 2px 16px; }
  .role-hub    { padding: 48px 0 56px; }
  .role        { padding: 28px 24px; border-radius: var(--r-lg); }
  .live-hub    { padding: 48px 0 56px; }
  .tile--survey {
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding-top: 22px;
    padding-inline: 24px;
  }
  .notice { gap: 8px; font-size: 14px; padding: 10px 2px; }
  .notice__date { display: none; }
  .partner-chip--logo img { width: 120px; height: 36px; }
}
@media (max-width: 480px) {
  .fn-brand__name { font-size: 13px; }
  .link-grid { grid-template-columns: 1fr; }
  .hero { padding: 100px 0 48px; }
  .hero__title { font-size: clamp(24px, 7vw, 34px); }
  .hero__sub { font-size: 14px; }
  /* 섹션 패딩 축소 */
  .role-hub, .live-hub { padding: 36px 0 44px; }
  .role { padding: 22px 20px; }
  .role__name { font-size: clamp(18px, 5vw, 24px); }
  .role__desc { font-size: 14px; }
  .tile { padding: 18px 20px; }
  .tile__label { gap: 6px; row-gap: 6px; }
  .tile__more { padding: 5px 10px; font-size: 13px; }
  /* KPI 숫자 축소 */
  .tile--equip .num, .tile--comp .num { font-size: 26px; }
  .tile--match .big { font-size: 34px; }
  /* 매칭 bars 압축 */
  .mrow .nm { width: 68px; font-size: 13px; }
  .mrow .val { width: 28px; font-size: 13px; }
  .tile--survey .txt b { font-size: 17px; }
  .tile--survey {
    padding-bottom: 80px;
    background-size: auto 120px, 100% 100%, 100% 100%;
    background-position: right bottom 16px, left top, left top;
  }
  /* footer 문구 축소 */
  .footer { padding: 48px 0 32px; }
  .footer__addr { font-size: 13px; line-height: 1.7; }
}
/* 최소 지원 폭 340px 대응 */
@media (max-width: 380px) {
  .fn-hamburger { padding: 7px 12px; gap: 4px; font-size: 12px; }
  .fn-hamburger i { font-size: 15px; }
  .search__input { padding: 0 10px; font-size: 15px; }
  .hero__title { font-size: clamp(22px, 7.5vw, 30px); }
  .hero__sub { font-size: 13px; line-height: 1.6; }
  .search__tag { font-size: 12px; padding: 4px 8px; }
  /* 컨텐츠2 카드 최소 압축 */
  .tile { padding: 16px 16px; height: auto; }
  .tile--notice, .tile--jobs { height: 240px; }
  .mrow .nm { width: 58px; font-size: 12px; }
  .mrow .val { width: 26px; }
  .notice { gap: 6px; }
  .notice__dday { width: 42px; font-size: 12px; }
  .notice__tag { font-size: 12px; padding: 2px 7px; }
  .tile--jobs .joblist a { font-size: 15px; }
  .tile--jobs .joblist .co { font-size: 13px; }
  .tile--survey {
    padding-bottom: 60px;
    background-size: auto 90px, 100% 100%, 100% 100%;
    background-position: right bottom 12px, left top, left top;
  }
  .tile--survey .txt b { font-size: 16px; }
  /* 파트너 로고 축소 */
  .partner-chip--logo img { width: 100px; height: 30px; }
}

/* ============================================================
   Main Popup — 메인 페이지 팝업존 (캐러셀 + 오늘 하루 그만보기)
   ============================================================ */
.main-popup {
  position: fixed; inset: 0;
  z-index: 900;
}
.main-popup__bg {
  position: absolute; inset: 0;
  background: rgba(20, 20, 24, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: main-popup-fade .2s ease;
}
.main-popup__wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1200px, calc(100% - 40px));
  animation: main-popup-pop .35s cubic-bezier(.2, .8, .3, 1);
}
.main-popup__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 18px;
}
.main-popup__title {
  font-size: 24px; font-weight: 700; color: #fff;
  letter-spacing: -0.01em;
  margin: 0;
}
.main-popup__ctrl { display: flex; gap: 8px; }
.main-popup__nav {
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: #fff;
  color: var(--ink-700);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
}
.main-popup__nav:hover { color: var(--kor-red); transform: translateY(-1px); }
.main-popup__nav:disabled,
.main-popup__nav[aria-disabled="true"] { opacity: .45; cursor: default; }
.main-popup__nav:disabled:hover { transform: none; color: var(--ink-700); }
.main-popup__nav i { font-size: 22px; line-height: 1; }

.main-popup__viewport { overflow: hidden; }
.main-popup__track {
  display: flex;
  list-style: none; margin: 0; padding: 0;
  gap: 20px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.main-popup__slide {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
}
.main-popup__card {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #222;
  transition: transform .3s ease, box-shadow .3s ease;
}
.main-popup__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .5);
}
.main-popup__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.main-popup__bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px;
  padding: 0 4px;
}
.main-popup__hide {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.main-popup__hide input {
  width: 18px; height: 18px;
  accent-color: var(--kor-red);
  cursor: pointer;
}
.main-popup__close {
  position: relative;
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: #fff;
  color: var(--ink-900);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.main-popup__close:hover { color: var(--kor-red); transform: translateY(-1px); }
.main-popup__close i { font-size: 30px; line-height: 1; }
.main-popup__close::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(1);
  animation: main-popup-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
  z-index: -1;
}

@keyframes main-popup-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes main-popup-pop {
  from { transform: translate(-50%, -46%); opacity: 0; }
  to   { transform: translate(-50%, -50%); opacity: 1; }
}
@keyframes main-popup-ping {
  0%   { transform: scale(1);   opacity: .6; }
  75%,
  100% { transform: scale(1.4); opacity: 0; }
}

/* Responsive : slidesPerView 3 → 2 → 1 */
@media (max-width: 900px) {
  .main-popup__slide { flex: 0 0 calc((100% - 20px) / 2); }
  .main-popup__title { font-size: 20px; }
  .main-popup__cardtitle { font-size: 18px; }
  .main-popup__card { padding: 26px 22px; }
}
@media (max-width: 640px) {
  .main-popup__wrap { width: calc(100% - 24px); }
  .main-popup__slide { flex: 0 0 100%; }
  .main-popup__card { aspect-ratio: 5 / 6; }
  .main-popup__top { padding-bottom: 12px; }
  .main-popup__bottom { margin-top: 16px; }
  .main-popup__nav { width: 38px; height: 38px; }
  .main-popup__nav i { font-size: 20px; }
  .main-popup__close { width: 48px; height: 48px; }
  .main-popup__close i { font-size: 26px; }
  .main-popup__hide { font-size: 13px; }
}

/* [8] Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fx-orb, .live-dot::after { animation: none !important; }
  .main-popup__close::after { animation: none !important; }
}