/* 전역 공지 띠 (.ct-nbar) 확정판 CSS · 2026.10.14
   새 색 0: 아래 값은 모두 사이트에서 이미 쓰는 값(홈 공지바, 캐시백 변동 목록, 사이트 토큰).
   다크 토큰 없음(사이트 방침). 폰트는 사이트 Pretendard 상속. 실구현은 var(--이름, 값) 의 이름을 사이트 토큰으로 바꾼다. */
.ct-nbar,.ct-nbar *{box-sizing:border-box}
.ct-nbar{
  --nb-ink:var(--ct-ink-text,#191f28);
  --nb-sub:var(--ct-text-sub,#4e5968);
  --nb-bg:var(--ct-surface-soft,#f5f7fb);
  --nb-line:var(--ct-line,#e6e6e6);
  --nb-blue:#1b64da;
  --nb-green:#16815a;
  --nb-up:#bd344c; --nb-down:#2564cf;
  --nb-focus:#125bfa;
  --nb-h:39px;
  display:block;margin:0;padding:0;min-width:0;text-align:left;
  position:relative;z-index:10;
  background:var(--nb-bg);border-bottom:1px solid var(--nb-line);
  color:var(--nb-ink);font-family:Pretendard,"Pretendard Variable",-apple-system,"Apple SD Gothic Neo",sans-serif;
  font-size:13px;line-height:1.4;letter-spacing:-.02em;
}
html[data-nbar-closed] .ct-nbar{display:none!important}           /* 닫힘: 높이 0, 첫 페인트 전에 head 인라인 스크립트가 속성을 심는다 */
.ct-nbar :is(h2,p,ul,li){margin:0;padding:0;font-family:inherit;color:inherit;letter-spacing:inherit}
.ct-nbar :is(a,button,span,div){text-shadow:none}
.ct-nbar a{color:inherit;text-decoration:none}
.ct-nbar button{font:inherit;color:inherit;letter-spacing:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ct-nbar :is(a,button):focus-visible{outline:2px solid var(--nb-focus);outline-offset:-2px;border-radius:6px}
.ct-nbar .nb-sr,.nb-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ct-nbar .nb-wrap{max-width:1280px;margin:0 auto;padding:0 var(--ct-gut,32px)}

/* 한 줄 막대 */
.ct-nbar .nb-bar{display:flex;align-items:center;gap:8px;height:var(--nb-h)}
.ct-nbar .nb-view{position:relative;flex:1 1 auto;min-width:0;height:44px;align-self:flex-start;overflow:hidden} /* 터치 영역 44px: 띠 아래로 투명하게 확장 (보이는 높이는 --nb-h) */
.ct-nbar .nb-line{position:absolute;inset:0;display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;padding-bottom:calc(44px - var(--nb-h))}
.ct-nbar .nb-line[hidden]{display:none}
.ct-nbar .nb-line.is-in{animation:nb-in .35s cubic-bezier(.4,0,.2,1)}
.ct-nbar .nb-line.is-out{animation:nb-out .35s cubic-bezier(.4,0,.2,1) forwards}
@keyframes nb-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes nb-out{from{transform:none;opacity:1}to{transform:translateY(-8px);opacity:0}}
.ct-nbar a.nb-line:hover .nb-name{text-decoration:underline;text-underline-offset:3px}

/* 줄 구성: 칩 · 카드명 · 플랫폼 · 전→후 금액 · ▲변동액 · 날짜 */
.ct-nbar .nb-chip{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;color:#fff;
  font-size:12px;font-weight:700;line-height:1;letter-spacing:-.01em;background:var(--nb-blue)}
.ct-nbar .nb-chip[data-kind=add]{background:var(--nb-green)}
.ct-nbar .nb-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:650;color:var(--nb-ink)}
.ct-nbar .nb-plat{flex:0 0 auto;color:var(--nb-sub);font-weight:500}
.ct-nbar .nb-plat::before{content:"·";margin-right:4px;color:var(--nb-sub)}
.ct-nbar .nb-amt{flex:none;display:inline-flex;align-items:baseline;gap:6px;font-weight:700;font-variant-numeric:tabular-nums}
.ct-nbar .nb-ba{color:var(--nb-ink)}
.ct-nbar .nb-ba i{font-style:normal;color:var(--nb-sub);margin:0 3px;font-weight:500}
.ct-nbar .nb-d{font-weight:700}
.ct-nbar .nb-d[data-dir=up]{color:var(--nb-up)}
.ct-nbar .nb-d[data-dir=down]{color:var(--nb-down)}
.ct-nbar .nb-new{font-weight:700;color:var(--nb-ink)}
.ct-nbar .nb-date{flex:none;color:var(--nb-sub);font-size:12px;font-weight:500}
.ct-nbar .nb-go{flex:none;color:var(--nb-blue);font-weight:700}

/* 오른쪽 조작부 */
.ct-nbar .nb-tools{flex:none;display:flex;align-items:center;align-self:center;gap:2px}
.ct-nbar .nb-count{color:var(--nb-sub);font-size:12px;font-variant-numeric:tabular-nums;padding-right:4px;white-space:nowrap}
.ct-nbar .nb-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:32px;height:32px;padding:0 6px;border-radius:8px;
  font-size:12px;font-weight:600;color:var(--nb-ink)}
.ct-nbar .nb-btn::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)} /* 터치 영역 44px, 보이는 크기는 32px */
.ct-nbar .nb-btn:hover{background:#eaf3ff}
.ct-nbar .nb-btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-nbar .nb-exp svg{transition:transform .2s}
.ct-nbar .nb-exp[aria-expanded=true] svg{transform:rotate(180deg)}
.ct-nbar .nb-exp{color:var(--nb-blue);font-weight:700}

/* 펼침 패널 (최대 20줄 + 안내 한 줄) : GNB(z 60) 아래, 좌측 도구함(z 53) 위 */
.ct-nbar .nb-panel{position:absolute;left:0;right:0;top:100%;z-index:55;background:#fff;border-bottom:1px solid var(--nb-line);
  box-shadow:0 14px 30px rgba(17,24,39,.12);border-radius:0 0 18px 18px}
.ct-nbar .nb-panel[hidden]{display:none}
.ct-nbar .nb-ph{display:flex;align-items:center;gap:10px;min-height:48px}
.ct-nbar .nb-ph h2{margin:0;font-size:14px;line-height:1.4;font-weight:700}
.ct-nbar .nb-ph .nb-sp{flex:1}
.ct-nbar .nb-all{color:var(--nb-blue);font-weight:700;font-size:13px;display:inline-flex;align-items:center;min-height:48px;padding:0 4px}
.ct-nbar .nb-list{list-style:none;margin:0;padding:0 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;max-height:min(560px,calc(100vh - 220px));overflow:auto;overscroll-behavior:contain}
.ct-nbar .nb-list li{border-top:1px solid #f2f4f6}
.ct-nbar .nb-list a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border-radius:8px;white-space:nowrap}
.ct-nbar .nb-list a:hover{background:var(--nb-bg)}
.ct-nbar .nb-list .nb-name{flex:1 1 auto}
.ct-nbar .nb-list .nb-more{grid-column:1/-1}
.ct-nbar .nb-list .nb-more a{min-height:48px}
.ct-nbar .nb-list .nb-more .nb-name{flex:0 1 auto}
.ct-nbar .nb-pnote{margin:6px 0 0;padding:0 0 14px;color:var(--nb-sub);font-size:12px}

/* 패널 안 일시정지(모바일 전용) */
.ct-nbar .nb-mpause{display:none;min-height:44px}
.ct-nbar .nb-mpause::after{display:none}
/* 태블릿 이하 */
@media(max-width:1023px){.ct-nbar .nb-wrap{padding:0 var(--ct-gut,24px)} .ct-nbar .nb-list{grid-template-columns:minmax(0,1fr)}}
/* 모바일: 높이 36, 줄 = 칩 · 카드명 · 플랫폼 · 변동액(전→후 금액은 펼침 목록에서) */
.ct-nbar .nb-short{display:none}
@media(max-width:767px){
  .ct-nbar{--nb-h:35px;font-size:12px}
  .ct-nbar .nb-wrap{padding:0 var(--ct-gut,16px)}
  .ct-nbar .nb-bar{gap:2px}
  .ct-nbar .nb-line{gap:6px}
  .ct-nbar .nb-chip{height:20px;padding:0 5px;font-size:11px;letter-spacing:-.03em}
  .ct-nbar .nb-plat{flex:0 0 auto}
  .ct-nbar .nb-view .nb-chip[data-kind=change]{display:none} /* 모바일 띠 줄: 금액변동 칩은 ▲▼ 글자로 대신하고 카드명 자리를 확보. 캐시백 추가 칩은 유지. 펼침 목록에는 칩 둘 다 있다 */
  .ct-nbar .nb-plat::before{margin-right:3px}
  .ct-nbar .nb-date{display:none}
  .ct-nbar .nb-bar .nb-ba{display:none}
  .ct-nbar .nb-amt{gap:0}
  .ct-nbar .nb-count,.ct-nbar .nb-pause{display:none}
  .ct-nbar .nb-full{display:none}.ct-nbar .nb-short{display:inline}
  .ct-nbar .nb-panel{border-radius:0 0 16px 16px}
  .ct-nbar .nb-list{max-height:min(62vh,calc(100vh - 170px))}
  .ct-nbar .nb-list a{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:1px;padding:7px 4px;min-height:52px;font-size:12px}
  .ct-nbar .nb-list .nb-name{flex:1 1 calc(100% - 84px);font-size:13px}
  .ct-nbar .nb-list .nb-plat{flex:1 1 auto;margin-left:72px;overflow:visible}
  .ct-nbar .nb-list .nb-plat::before{content:none}
  .ct-nbar .nb-list .nb-date{display:none}
  .ct-nbar .nb-list .nb-ex{margin-left:auto}
  .ct-nbar .nb-list .nb-more a{flex-wrap:nowrap;min-height:48px}
  .ct-nbar .nb-mpause{display:inline-flex}
}

/* 모션 줄이기: 롤링과 슬라이드 없음, 첫 줄 + «외 N건», 일시정지 버튼 숨김 */
@media(prefers-reduced-motion:reduce){
  .ct-nbar .nb-line,.ct-nbar .nb-line.is-in,.ct-nbar .nb-line.is-out{animation:none}
  .ct-nbar .nb-pause,.ct-nbar .nb-mpause{display:none!important}
}
.ct-nbar.is-reduced .nb-pause,.ct-nbar.is-reduced .nb-mpause{display:none!important}

/* 다시 보기 진입 (GNB 쪽): 벨 아이콘(PC) · 햄버거 첫 줄과 점(모바일). 닫힘 상태에서만 보인다. */
html:not([data-nbar-closed]) [data-nbar-reopen]{display:none!important}
html[data-nbar-closed] [data-nbar-reopen]{display:grid}
html[data-nbar-closed] .nb-burger-dot{display:block}
.nb-burger-dot{display:none;position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:#bd344c}
.nb-bell{position:relative}
.nb-bell .nb-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#bd344c;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.nb-bell .nb-tip{position:absolute;top:calc(100% + 4px);right:0;z-index:70;padding:6px 10px;border-radius:8px;background:#191f28;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-2px);transition:opacity .15s,transform .15s}
.nb-bell:hover .nb-tip,.nb-bell:focus-visible .nb-tip,.nb-bell.is-tip .nb-tip{opacity:1;transform:none}
.nb-bell:focus-visible{outline:2px solid #125bfa;outline-offset:2px;border-radius:12px}
@media(max-width:767px){.nb-bell{display:none!important}}

/* 구현 추가: 사이트 헤더(.my-button 36×40)에 맞춘 벨 · 모바일 메뉴 첫 줄(컨트롤러가 만든다) · 햄버거 점 */
.nb-bell.my-button{width:44px;height:44px;border:0;background:transparent;color:#55677f;cursor:pointer;display:grid;place-items:center}
.nb-bell svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html:not([data-nbar-closed]) .nb-menu-row{display:none!important}
html[data-nbar-closed] .nb-menu-row{display:flex}
.nb-menu-row{align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 16px;color:#191f28;font-size:15px;font-weight:650;text-decoration:none;border-bottom:1px solid #e6e6e6;background:#f5f7fb}
.nb-menu-row b{color:#1b64da;font-weight:700;font-size:14px}
.nb-menu-row:focus-visible{outline:2px solid #125bfa;outline-offset:-2px}
.nb-burger-dot{pointer-events:none}
[data-nbar-menu-button]{position:relative}