/* 지페 · 공지사항 인터랙션: 분류 칩(알약 · 개수) · 실시간 검색(강조) · 목록 재배치 · 내용 펼치기 · NEW · 히어로 종
   기본 목록 스타일은 pages.css(.nbar .nlist .nrow …) — 여기서는 그 위에 얹어요. */

/* ── 분류 칩 ─────────────────────────────────────── */
.nbar__tabs{position:relative}
.nbar__tabs.has-pill button{position:relative;z-index:1;display:inline-flex;align-items:center;background:transparent;transition:color .3s}
.nbar__tabs.has-pill button[aria-selected="true"]{background:transparent;color:#fff}
.nbar__tabs.has-pill button:not([aria-selected="true"]):hover{color:var(--ink)}
.nbar__pill{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--ink);pointer-events:none}
.nbar__pill.is-ready{transition:transform .5s var(--spring),width .4s var(--out),height .4s var(--out)}
.nbar__tabs em{margin-left:.5em;font-size:.82em;font-style:normal;font-weight:800;opacity:.55;font-variant-numeric:tabular-nums}
.nbar__tabs [aria-selected="true"] em{opacity:.8}
.nbar__tabs .is-zero{opacity:.55}
.nbar__tabs em.bump{animation:n-bump .45s var(--spring)}
@keyframes n-bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

/* ── 검색 ────────────────────────────────────────── */
.nbar__s{position:relative;display:block}
.nbar__ic{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;fill:none;stroke:var(--ink3);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.nbar__s input{padding-left:2.7em;padding-right:2.7em;transition:box-shadow .2s,background .2s}
.nbar__s input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.nbar__s:focus-within .nbar__ic{stroke:var(--blue)}
.nbar__c{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;background:rgba(25,31,40,.08);cursor:pointer;transition:background .2s,transform .3s var(--spring)}
.nbar__c[hidden]{display:none}
.nbar__c svg{width:16px;height:16px;fill:none;stroke:var(--ink2);stroke-width:2.4;stroke-linecap:round}
.nbar__c:hover{background:rgba(25,31,40,.16);transform:rotate(90deg)}
.nres{margin:-6px 0 14px;color:var(--ink2);font-size:14px;font-weight:700}
.nres[hidden]{display:none}

/* ── 목록 항목 ───────────────────────────────────── */
.nitem{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.nitem .nrow{position:relative;padding-right:.6em}
.nrow::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:2px;background:var(--blue);transform:scaleY(0);transform-origin:50% 50%;transition:transform .35s var(--out)}
.nrow:hover::before,.nrow:focus-visible::before{transform:scaleY(1)}
.nrow__t{transition:transform .4s var(--out)}
.nrow:hover .nrow__t,.nrow:focus-visible .nrow__t{transform:translateX(6px)}
.nrow__t mark{position:relative;z-index:0;background:none}
.nrow__t mark::before{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.42em;z-index:-1;border-radius:2px;background:var(--wave);transform-origin:0 50%;animation:n-mark .4s var(--out) both}
@keyframes n-mark{from{transform:scaleX(0)}}
.nrow__new{position:relative;overflow:visible}
.nrow__new::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--wave);pointer-events:none;animation:n-ping 1.8s ease-out 4}
@keyframes n-ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.9,1.8);opacity:0}}

.nitem__x{display:grid;place-items:center;width:40px;height:40px;margin-right:.2em;border:0;border-radius:50%;background:var(--mist);cursor:pointer;transition:background .25s,transform .5s var(--spring)}
.nitem__x svg{width:20px;height:20px;fill:none;stroke:var(--ink2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nitem__x:hover{background:#e6e9ed}
.nitem__x[aria-expanded="true"]{background:var(--wave);transform:rotate(180deg)}
.nitem__x[aria-expanded="true"] svg{stroke:var(--ink)}
.nitem__more{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--out)}
.nitem__more>div{min-height:0;overflow:hidden}
.nitem.is-open .nitem__more{grid-template-rows:1fr}
.nbody--in{max-width:none;margin:0 .4em clamp(18px,2vw,28px) calc(7.5em + 1em + .4em);padding:clamp(18px,2vw,28px) clamp(20px,2.2vw,32px);border-radius:var(--r2);background:var(--mist)}
.nbody--in p,.nbody--in li{font-size:clamp(15px,1.05vw,17px);line-height:1.75}
.nbody--in li{border-bottom:0}
.nbody--in h3{margin:1.4em 0 .5em;font-size:clamp(16px,1.2vw,19px)}
.nbody--in>:first-child{margin-top:0}
.nbody--in>:last-child{margin-bottom:0}
.nbody--in table{font-size:15px}
.nbody--in th{background:#e6e9ed}
@media (max-width:640px){.nbody--in{margin-left:.4em}.nitem__x{align-self:start;margin-top:12px}}

/* ── 비었을 때: 고민하는 캐릭터 ─────────────────────── */
.nlist__empty{display:grid;justify-items:center;gap:.7em;padding:2.2em 0 2.6em}
.nlist__empty p{font-weight:700}
.nempty__m{width:auto;height:120px}
.nlist__empty .nempty__m{transform-origin:50% 100%;animation:n-shake .95s var(--out) .12s both}
@keyframes n-shake{0%{transform:rotate(0)}22%{transform:rotate(-6deg)}46%{transform:rotate(5deg)}68%{transform:rotate(-3deg)}100%{transform:rotate(0)}}

/* ── 히어로 장식: 종 ─────────────────────────────── */
.pg-hero__vis:has(.nart){place-items:center;min-height:0;padding:0;border-radius:0;background:none;overflow:visible}
.nart{width:min(100%,320px)}
.nart svg{width:100%;height:auto;overflow:visible}
.nart__sh{fill:rgba(25,31,40,.1)}
.nart__bell{transform-box:view-box;transform-origin:50% 17%;animation:n-swing 1.7s ease-out .5s 1 both}
.nart:hover .nart__bell{animation:n-swing2 1.7s ease-out 1 both}
@keyframes n-swing{0%,100%{transform:rotate(0)}14%{transform:rotate(-15deg)}34%{transform:rotate(11deg)}54%{transform:rotate(-7deg)}76%{transform:rotate(3deg)}}
@keyframes n-swing2{0%,100%{transform:rotate(0)}14%{transform:rotate(-15deg)}34%{transform:rotate(11deg)}54%{transform:rotate(-7deg)}76%{transform:rotate(3deg)}}
.nart__ping{fill:#1e4dd8;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:n-ring 2.2s ease-out 1.4s 3}
@keyframes n-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.6);opacity:0}}
@media (max-width:767px){.pg-hero__vis:has(.nart){display:none}}

@media (prefers-reduced-motion:reduce){
  .nart__bell,.nart__ping,.nrow__new::after,.nlist__empty .nempty__m,.nrow__t mark::before{animation:none!important}
  .nrow:hover .nrow__t,.nrow:focus-visible .nrow__t{transform:none}
}