/* 진입 소식 모달 「궤도 위에 펼친 카드」 — 42판
   실측해 맞춘 값: 로딩 링 지름 min(72vmin,480px)·눈금 60칸(home.css 375), 회전 640ms·3차 감속(rotary.js 68~70), 색은 site.css 의 --ink 계열 */
:root { --z-modal: 55; }   /* 로딩(50)과 알림(60) 사이 */
@property --nm-r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.nm { --m: max(.85px, min(var(--u), calc(100vh / 680)));   /* 1024 폭에서도 글자가 12px 아래로 내려가지 않게 바닥을 둔다 */
   --R: calc(930 * var(--m)); --rt: calc(728 * var(--m)); --cw: calc(248 * var(--m)); --ch: calc(310 * var(--m));   /* 43b(PSPD 11-11): 카드 더 크게·인스타 세로(4:5) 비율 204×290 → 248×310, 위 여백이 좁아 보이게 */
   --oy: calc(1196 * var(--m));
  --nm-dim: rgba(5, 5, 5, 0.72); --nm-tk: rgba(237, 237, 237, 0.13); --nm-tk-major: rgba(237, 237, 237, 0.3); --nm-tk-on: rgba(237, 237, 237, 0.7); --nm-card: #1c1c1c;
  --nm-glass: rgba(255, 255, 255, 0.09); --nm-glass-line: rgba(255, 255, 255, 0.24); --nm-glass-hi: rgba(255, 255, 255, 0.3); --nm-gear: rgba(237, 237, 237, 0.05); --nm-gear-fill: rgba(255, 255, 255, 0.012);
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; color: var(--on-ink); font-family: var(--f-ko); }
.nm[hidden] { display: none; }
html.nm-open, html.nm-open body { overflow: hidden; }
.nm-dim { position: absolute; inset: 0; background: var(--nm-dim); opacity: 0; transition: opacity .8s var(--ease); }
.nm.on .nm-dim { opacity: 1; }
.nm-box { position: relative; width: calc(1200 * var(--m)); height: calc(610 * var(--m)); overflow: hidden; border-radius: calc(12 * var(--m)); outline: none; }
.nm-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); border: 1px solid var(--ink-line); opacity: 0; transition: opacity .6s var(--ease) .2s; }
.nm.on .nm-box::before { opacity: 1; }
.nm-head, .nm-foot { opacity: 0; transition: opacity .5s var(--ease); }
.nm.ready .nm-head, .nm.ready .nm-foot { opacity: 1; }
.nm-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nm-head { position: absolute; inset: 0 0 auto 0; height: calc(72 * var(--m)); padding: 0 calc(16 * var(--m)) 0 calc(32 * var(--m)); display: flex; align-items: center; gap: calc(16 * var(--m)); z-index: 30; }
.nm-head h2 { margin: 0; font-size: max(16px, calc(20 * var(--m))); font-weight: 600; letter-spacing: -0.015em; }
.nm-count { margin-left: auto; font-family: var(--f-disp); font-size: max(12px, calc(12 * var(--m))); color: var(--on-ink-2); }
.nm-count b { color: var(--on-ink); font-weight: 400; }
.nm-x { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--on-ink); cursor: pointer; border-radius: 50%; transition: background .2s; }
.nm-x:hover { background: var(--ink-line); }
.nm :focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }
.nm-box:focus, .nm-box:focus-visible { outline: none; }   /* 열릴 때 초점만 받는 자리 — 테두리는 그리지 않는다 */

/* 판 바탕의 무브먼트(톱니·태엽·밸런스 휠) — 검은 바탕보다 조금 밝은 선으로만, 은은하게 */
.nm-gears { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease) .3s; fill: var(--nm-gear-fill); stroke: var(--nm-gear); stroke-width: 1.5; }
.nm.on .nm-gears { opacity: 1; }
.nm.out .nm-gears { opacity: 0; transition: opacity .25s; }
.nm-gears .thin { stroke-width: 1; fill: none; }
.nm-gears .open { fill: none; }
.nm-gears .g { transform: rotate(calc(var(--gp, 0deg) * var(--r, 1))); }
.nm-gears .bal { animation: nm-bal 2.4s ease-in-out infinite alternate; }
@keyframes nm-bal { from { transform: rotate(-38deg); } to { transform: rotate(38deg); } }
.nm-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 50% 38%, rgba(14, 14, 14, 0) 30%, rgba(8, 8, 8, .78) 100%); opacity: 0; transition: opacity .6s var(--ease) .2s; }
.nm.on .nm-box::after { opacity: 1; }
.nm.out .nm-box::after { opacity: 0; transition: opacity .25s; }

/* 눈금 궤도 */
.nm-ticks { position: absolute; left: 50%; top: var(--oy); width: 0; height: 0; --nm-r: var(--rt); transition: --nm-r 1s var(--ease), translate 1s var(--ease), opacity .4s; }
.nm-tk { position: absolute; top: 0; left: -1px; width: 1px; height: calc(6 * var(--m)); background: var(--nm-tk); transform-origin: 50% 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--nm-r))); transition: background .3s, opacity .6s .5s; }
.nm-tk.M { left: -1px; width: 2px; height: calc(12 * var(--m)); background: var(--nm-tk-major); }   /* 42c(PSPD): 휠 눈금은 뒤로 물러나게 — 가늘고 짧고 옅게 */
.nm-tk.on { background: var(--nm-tk-on); }
.nm-ticks.pre .nm-tk:not(.M) { opacity: 0; transition: none; }
.nm-ticks.pre { transition: none; }

/* 카드 */
.nm-orbit { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; cursor: grab; }   /* 바탕 그늘(::after) 위 */
.nm-orbit.drag { cursor: grabbing; }
.nm-cards { position: absolute; left: 50%; top: var(--oy); width: 0; height: 0; margin: 0; padding: 0; list-style: none; }
.nm-card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); will-change: transform, opacity; }
.nm-card a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(10 * var(--m)); color: inherit; -webkit-user-drag: none; background: var(--nm-card);
  /* 43b(PSPD 11-11): 베젤(유리판 테두리·안쪽 여백)을 없애고 사진을 카드 끝까지 — SNS 게시물처럼 사진이 주인공, 제목은 사진 아래쪽 그늘 위에 */
  box-shadow: 0 calc(14 * var(--m)) calc(36 * var(--m)) rgba(0, 0, 0, .5); }
.nm-card a::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .82) 100%); pointer-events: none; }
.nm-ph { position: absolute; inset: 0; display: block; overflow: hidden; }
.nm-ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(.6 + .4 * var(--k, 0))); pointer-events: none; }   /* 옆 카드는 어둡게 */
/* 종류 칩 — 사진 왼쪽 위에 작게 */
.nm-kind { position: absolute; left: calc(10 * var(--m)); top: calc(10 * var(--m)); z-index: 1; padding: calc(3 * var(--m)) calc(9 * var(--m)); border-radius: calc(12 * var(--m)); background: rgba(14, 14, 14, .55); color: var(--on-ink); font-size: calc(12 * var(--m)); line-height: 1.4; white-space: nowrap; }
/* 제목 — 사진 아래쪽 그늘 위, 두 줄까지 */
.nm-tt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 calc(14 * var(--m)) calc(14 * var(--m)); font-size: calc(16 * var(--m)); font-weight: 600; line-height: 1.38; letter-spacing: -0.015em; word-break: keep-all; color: #fff; opacity: calc(.6 + .4 * var(--k, 0)); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

.nm-foot { position: absolute; inset: auto 0 0 0; height: calc(56 * var(--m)); min-height: 44px; padding: 0 calc(32 * var(--m)); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--ink-line); font-size: max(12px, calc(14 * var(--m))); color: var(--on-ink-2); z-index: 30; background: var(--ink); }
.nm-today { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.nm-today input { width: 16px; height: 16px; accent-color: var(--on-ink); }
.nm-foot a { color: var(--on-ink); text-decoration: underline; text-underline-offset: 4px; }

/* 닫힘 — 링이 메인 다이얼 자리로 */
.nm.out .nm-box { overflow: visible; }
.nm.out .nm-box::before, .nm.out .nm-head, .nm.out .nm-foot, .nm.out .nm-cards { opacity: 0; transition: opacity .25s; }
.nm.out .nm-dim { opacity: 0; transition-duration: .6s; }
.nm.out .nm-ticks { transition: --nm-r .6s var(--ease), translate .6s var(--ease), opacity .3s .35s; opacity: 0; }
.nm.out .nm-tk:not(.M) { opacity: 0; transition: opacity .2s; }

/* 1023 이하(html.flat): 아래에서 올라온 판, 가운데 한 장 + 양옆 반 장 */
html.flat .nm { --m: 1px; --R: 861px; --rt: 707px; --cw: 168px; --ch: 210px; --oy: 1063px; place-items: end center; }
html.flat .nm-box { width: 100%; height: min(440px, 100svh); border-radius: 16px 16px 0 0; }
html.flat .nm-head { height: 56px; padding: 0 8px 0 20px; }
html.flat .nm-foot { padding: 0 20px; height: 52px; }
/* 42c: 폰은 가볍게 — 유리 흐림을 끄고 같은 느낌의 반투명 판으로, 톱니·밸런스 휠은 멈춘 그림으로(js 의 lite). 흐림은 카드가 움직이는 매 프레임 뒤를 다시 그려 프레임이 떨어졌다 */
html.flat .nm-card a { box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
html.flat .nm-gears .bal { animation: none; }
html.flat .nm-tk:not(.M):nth-child(2n) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nm-dim, .nm-box::before, .nm-head, .nm-foot, .nm-ticks, .nm-tk { transition: none !important; }
  .nm-gears .bal { animation: none; }
}