@charset "utf-8";

/* ============================================================
   메인 팝업 모달
   - 팝업관리(POP_MANAGE)에 등록된 팝업을 메인 화면 위에 모달로 표시한다.
   - 이미지가 있으면 이미지 카드, 없으면 제목+본문 발췌 카드(에디토리얼)로 표시한다.
   - 한 화면 노출: PC 3장 / 태블릿 2장 / 모바일 1장.
   - 마지막 팝업 다음은 처음으로 이어지는 무한 롤링, 화살표 1장씩 이동, 4초 자동 이동.
   - NKIS 포털은 css/default.css 에서 html { font-size: 10px } 를 쓴다. 이 파일의
     rem 값은 전부 그 기준이다 (1rem = 10px).
   ============================================================ */

.nkis-pop{
  --gap: 2.6rem;
  --visible: 3;
  --maxw: 105rem;
  position:fixed; inset:0; z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.6rem;
  background:rgba(8,11,18,.64); /* 2026-09-15 배경 밝게 (.74 → .64) */
  font-family:Pretendard,"Noto Sans KR",sans-serif;
  overscroll-behavior:contain;
  animation:nkisPopOverlayIn .22s ease both;
}
@keyframes nkisPopOverlayIn{from{opacity:0}to{opacity:1}}
.nkis-pop *{box-sizing:border-box}
.nkis-pop button{font-family:inherit;cursor:pointer}

/* overflow-x 만 숨긴다 : 캐러셀이 좌우로 넘어갈 땐 화면 밖 카드가 가려져야 하지만,
   위아래까지 hidden 이면 포커스 아웃라인(카드 테두리 바깥으로 번짐)의 위쪽이 잘려 보인다. */
.nkis-pop__viewport{width:min(var(--maxw), calc(100% - 6.4rem));overflow-x:hidden;overflow-y:visible}
.nkis-pop__track{display:flex;gap:var(--gap);align-items:flex-start;
  transition:transform .38s cubic-bezier(.22,.75,.3,1);will-change:transform}
.nkis-pop__item{
  flex:0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  position:relative;min-width:0;
}


/* 카드는 항상 4:5 세로 상자로 고정한다(권장 사이즈인 600×750이 아니어도) — 그래야 이미지형이든
   글카드든 카드 크기·하단 캡션 위치가 줄 안에서 항상 나란히 맞는다. 이미지는 object-fit:contain 으로
   원본을 절대 잘라내지 않고 그대로 다 보여준다 — 가로가 길든 세로가 길든, 작아서 확대되든 커서
   축소되든 비율은 유지한 채 상자 안에 맞추고, 남는 여백은 배경색(어두운 톤, 다크 모달과 어울리게)
   으로 채운다. */
.nkis-pop__shot{position:relative;display:block;overflow:hidden;border-radius:1.8rem;
  aspect-ratio:4/5;
  box-shadow:0 2.4rem 5.6rem -2rem rgba(0,0,0,.75);background:#0f1420;
  color:inherit;text-decoration:none}  /* a 태그 기본 밑줄이 안쪽 텍스트로 새는 것 방지 */
.nkis-pop__shot img{display:block;width:100%;height:100%;object-fit:contain}
.nkis-pop__shot svg{display:block;width:100%;height:auto}
.nkis-pop__linkhint{position:absolute;left:0;right:0;bottom:0;padding:3.2rem 1.8rem 1.4rem;
  background:linear-gradient(to top,rgba(12,16,28,.86),rgba(12,16,28,0));
  color:#fff;font-size:1.4rem;font-weight:500;letter-spacing:-.02em;
  display:flex;align-items:center;gap:.6rem;
  opacity:0;transition:opacity .2s;pointer-events:none}
/* 글자는 한 줄로 고정하고 넘치면 말줄임. 아이콘은 절대 찌그러지지 않게 고정 크기. */
.nkis-pop__linkhint > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nkis-pop__linkhint svg{flex:none;width:1.2rem;height:1.2rem}

a.nkis-pop__shot:hover .nkis-pop__linkhint,
a.nkis-pop__shot:focus-visible .nkis-pop__linkhint{opacity:1}


.nkis-pop--static .nkis-pop__track{justify-content:center}


/* ---------- 글 내용형 카드 (이미지 없이 제목+본문 발췌, C. 에디토리얼 브라이트 레이아웃) ----------
   시안에서 A(카드형 발췌)·B(에디토리얼, 짙은 남색 고정 배경)도 검토했으나 최종적으로 C로 확정.
   B와 같은 좌측 정렬 골격(라벨+밑줄+제목+발췌+CTA)에, 배경만 강조색별 밝은 대각선 그라데이션으로
   바꾼 것 — 배경 자체가 이미 색을 띠므로 강조요소는 색을 입히지 않고 흰색 그대로 둬 대비를 지킨다.
   레이아웃 선택지를 늘릴 계획이면 클래스명을 .txt-a / .txt-b 로 다시 분기하고
   card()/textCard() 에 p.layout 분기를 추가하면 된다 (poc: "팝업 모달 확정안" 목업 참고). */
.nkis-pop__shot--text{background:none} /* 4:5 비율 고정은 .nkis-pop__shot 공통 규칙에 있음 */
.nkis-pop__shot--text .nkis-pop__linkhint{display:none} /* 자세히 보기 CTA 가 늘 보이므로 hover 안내는 생략 */

.txt-c{width:100%;height:100%;display:flex;flex-direction:column;position:relative;
  padding:2.8rem 2.6rem 2.4rem}
.txt-c .num{position:relative;font-family:"IBM Plex Mono",monospace;font-size:1.1rem;
  letter-spacing:.08em;margin-bottom:1.4rem;color:rgba(255,255,255,.78)}
.txt-c .rule2{position:relative;width:2.8rem;height:2px;margin-bottom:1.4rem;
  background:rgba(255,255,255,.85)}
.txt-c h3{position:relative;margin:0 0 1.2rem;font-size:2rem;font-weight:700;
  line-height:1.3;color:#fff;letter-spacing:-.03em}
.txt-c .excerpt{position:relative;font-weight:300;font-size:1.3rem;line-height:1.68;
  color:rgba(255,255,255,.88);flex:1;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:4}
.txt-c .cta{position:relative;margin-top:1.4rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.32);color:#fff;
  font-size:1.25rem;font-weight:600;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:flex-end;gap:.4rem}
/* 연결된 게시글에 일시가 있으면 좌측에 날짜, 우측에 "자세히 보기" — 없으면 우측 정렬 하나뿐 */
.txt-c .cta.has-date{justify-content:space-between}
.txt-c .cta span{display:flex;align-items:center;gap:.4rem}
.txt-c .cta svg{transition:transform .18s}
.nkis-pop__shot--text:hover .txt-c .cta svg{transform:translateX(.3rem)}

/* 배경 장식 : 옅은 원형 두 개. 이미지 포스터 배경에 쓰던 원(같은 위치·크기·불투명도)을
   글 카드에도 은은하게 얹어서 밋밋해 보이지 않게 한다. ::before 는 DOM상 가장 먼저 그려지므로
   별도 z-index 없이도 제목·본문 뒤로 깔린다 — 카드 모서리 밖으로는 .nkis-pop__shot 의
   overflow:hidden 이 잘라낸다. */
.txt-c::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(30% 30% at 86.4% 90.4%, rgba(255,255,255,.09) 0 99%, transparent 100%),
    radial-gradient(14.4% 14.4% at 94% 14%, rgba(255,255,255,.07) 0 99%, transparent 100%)}

/* 강조색 3종 : 밝은 대각선 그라데이션 배경 (카드형 발췌 A안과 같은 색 값) */
.txt-c[data-c="1"]{background:linear-gradient(135deg,#2B4C9B 0%,#5E7FE0 100%)}
.txt-c[data-c="2"]{background:linear-gradient(135deg,#0B6B5B 0%,#2FA98C 100%)}
.txt-c[data-c="3"]{background:linear-gradient(135deg,#3F3C86 0%,#7A6BE0 100%)}

.nkis-pop__shot .txt-arrow{width:1.4rem;height:1.4rem;flex:none}  /* .nkis-pop__shot svg 규칙보다 우선하도록 */

.nkis-pop__cap{margin-top:1.4rem;font-size:1.5rem;font-weight:500;
  color:#fff;letter-spacing:-.025em;text-align:center; /* 반투명이면 어두운 배경에서 명도 대비가 애매해질 수 있어 완전한 흰색으로 고정 */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nkis-pop__bar{display:flex;align-items:center;gap:.8rem;
  padding:.9rem .9rem .9rem 2.4rem;border-radius:999px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(1.4rem);-webkit-backdrop-filter:blur(1.4rem)}
.nkis-pop__nav{width:4rem;height:4rem;border:0;border-radius:50%;background:transparent;
  color:#fff;padding:0;line-height:0;display:flex;align-items:center;justify-content:center;
  transition:background .16s}
.nkis-pop__nav svg{display:block;width:1.8rem;height:1.8rem}
.nkis-pop__nav:hover{background:rgba(255,255,255,.16)}
/* 점 자체는 작아도 버튼 상자를 키워 누를 수 있는 면적을 확보한다 */
.nkis-pop__dots{display:flex;align-items:center;gap:.2rem;padding:0 .8rem}
.nkis-pop__dots button{width:2.2rem;height:3.2rem;border:0;padding:0;background:none;
  display:flex;align-items:center;justify-content:center;transition:width .24s}
.nkis-pop__dots button::before{content:"";display:block;width:.9rem;height:.9rem;
  border-radius:50%;background:rgba(255,255,255,.34);
  transition:background .24s,width .24s,border-radius .24s}
.nkis-pop__dots button:hover::before{background:rgba(255,255,255,.68)}
.nkis-pop__dots button.is-on{width:3.6rem}
.nkis-pop__dots button.is-on::before{width:2.4rem;border-radius:.35rem;background:#fff}
.nkis-pop__pause{width:4rem;height:4rem;border:0;border-radius:50%;background:transparent;
  color:#fff;padding:0;line-height:0;display:flex;align-items:center;justify-content:center;
  transition:background .16s}
.nkis-pop__pause svg{display:block;width:1.6rem;height:1.6rem}
.nkis-pop__pause[aria-pressed="true"] svg{margin-left:.2rem}  /* 삼각형은 광학 중심이 왼쪽이라 살짝 민다 */
.nkis-pop__pause:hover{background:rgba(255,255,255,.16)}

.nkis-pop__total{font-size:1.5rem;font-weight:600;color:#fff;
  letter-spacing:-.02em;white-space:nowrap;padding-right:.6rem}

.nkis-pop__sep{width:1px;height:2.2rem;background:rgba(255,255,255,.22);margin:0 .5rem}
.nkis-pop__today{border:0;background:transparent;color:rgba(255,255,255,.82);
  font-size:1.5rem;font-weight:500;padding:.9rem 1.4rem;border-radius:999px;
  letter-spacing:-.02em;transition:background .16s,color .16s}
.nkis-pop__today:hover{background:rgba(255,255,255,.14);color:#fff}
.nkis-pop__close{border:0;background:#fff;color:#141414;font-size:1.5rem;font-weight:600;
  padding:.9rem 2.4rem;border-radius:999px;letter-spacing:-.02em;transition:background .16s}
.nkis-pop__close:hover{background:#ebebeb}
.nkis-pop__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nkis-pop:focus{outline:none} /* 다이얼로그 컨테이너 자체는 a11y 용으로만 포커스, 시각적 표시 없음 */
/* default.css 의 a:focus,button:focus { outline-width:30px !important; box-shadow:... !important }
   전역 규칙을 이겨야 해서 !important 로 덮어쓴다. (마우스 클릭 시엔 :focus-visible 이 안 걸려서
   전역 규칙의 영향을 안 받는 듯 보이지만, 키보드 Tab 이동 시엔 :focus 와 :focus-visible 이 동시에
   걸리므로 그냥 :focus-visible 을 !important 없이 얹으면 전역 규칙에 밀린다.) */
.nkis-pop :focus-visible{
  outline:1px solid #fff !important;
  outline-offset:2px !important;
  box-shadow:none !important;
}

/* --maxw 를 그대로 두면(105rem, 3장 기준) 3장→2장으로 바뀌는 순간 카드 폭이 105rem/2 로
   훌쩍 뛰어버린다(3장일 땐 카드당 ~33rem인데 2장일 땐 ~51rem으로 급격히 커짐) — 글자 크기는
   그대로인데 카드만 커지니 본문이 갑자기 더 많이 보이는 것처럼 느껴진다. 2장 구간 전용 --maxw 로
   카드 폭이 3장 구간과 비슷하게 이어지도록 맞춘다. */
@media (max-width:1199px){ .nkis-pop{--visible:2;--gap:2.2rem;--maxw:72rem} }
@media (max-width:767px){
  .nkis-pop{--visible:1;--gap:1.8rem;gap:2rem}
  /* 카드가 4:5 라 폭 40rem 이면 높이만 50rem — 캡션·하단 바까지 더하면 뷰포트가 짧은 기기
     (아이폰 SE 급, 주소창 제외 약 55rem)에서 바가 잘린다. 폭을 32rem 으로 낮춰 총 높이를 맞춘다. */
  .nkis-pop__viewport{max-width:32rem}
  .nkis-pop__bar{flex-wrap:wrap;justify-content:center;max-width:calc(100% - 4.8rem)}
}
@media (prefers-reduced-motion: reduce){
  .nkis-pop,.nkis-pop__item,.nkis-pop__track{animation-duration:.01ms !important;transition-duration:.01ms !important}
}