/* ========== 공통 ========== */
.sec-notice{
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}

.sec-notice__inner{
  display:flex;align-items:center;gap:20px;
  max-width:var(--inner-w);
  margin:0 auto;
  padding:16px var(--inner-px);
}

/* 라벨 */
.sec-notice__label{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding-right:20px;
  border-right:1px solid var(--c-line);
  font-size:var(--fs-sm);font-weight:var(--fw-head);
  color:var(--c-text);
}
.sec-notice__label svg{width:17px;height:17px;color:var(--c-primary)}

/* 롤링 영역 */
.sec-notice__viewport{
  position:relative;flex:1;min-width:0;
  height:24px;overflow:hidden;
}

.sec-notice__item{
  position:absolute;inset:0;
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;
  opacity:0;transform:translateY(100%);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.sec-notice__item.is-active{
  opacity:1;transform:none;
  pointer-events:auto;
}

.sec-notice__badge{
  flex-shrink:0;
  padding:3px 9px;border-radius:100px;
  background:var(--c-primary-l);color:var(--c-primary);
  font-size:12px;font-weight:var(--fw-head);line-height:1.4;
}

.sec-notice__title{
  flex:1;min-width:0;
  font-size:var(--fs-sm);color:var(--c-text-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color var(--tr);
}
.sec-notice__item:hover .sec-notice__title{color:var(--c-primary)}

.sec-notice__date{
  flex-shrink:0;
  font-size:13px;color:var(--c-text-mute);
}

/* 컨트롤 */
.sec-notice__ctrl{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
}
.sec-notice:not(.has-rolling) .sec-notice__ctrl{display:none}

.sec-notice__count{
  margin-right:6px;
  font-size:13px;color:var(--c-text-mute);
}
.sec-notice__count b{font-weight:var(--fw-head);color:var(--c-text)}

.sec-notice__btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;
  border:0;border-radius:var(--radius);
  background:none;color:var(--c-text-mute);
  cursor:pointer;transition:var(--tr);
}
.sec-notice__btn:hover{background:var(--c-bg-alt);color:var(--c-primary)}

.sec-notice__btn--prev::after,
.sec-notice__btn--next::after{
  content:'';
  width:7px;height:7px;
  border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor;
}
.sec-notice__btn--prev::after{transform:rotate(-135deg)}
.sec-notice__btn--next::after{transform:rotate(45deg)}

.sec-notice__btn--toggle svg{width:15px;height:15px}
.sec-notice__ico-play{display:none}
.sec-notice.is-paused .sec-notice__ico-pause{display:none}
.sec-notice.is-paused .sec-notice__ico-play{display:block}

/* ========== A — 흰 배경 (기본) ========== */

/* ========== B — 연회색 배경 ========== */
.sec-notice--b{background:var(--c-bg-alt)}

/* ========== C — 어두운 배경 ========== */
.sec-notice--c{
  background:var(--c-about-panel, #16325c);
  border-color:rgba(255,255,255,.12);
}
.sec-notice--c .sec-notice__label{
  color:#fff;
  border-right-color:rgba(255,255,255,.2);
}
.sec-notice--c .sec-notice__label svg{color:var(--c-point)}

.sec-notice--c .sec-notice__badge{
  background:rgba(255,255,255,.16);color:#fff;
}
.sec-notice--c .sec-notice__title{color:rgba(255,255,255,.8)}
.sec-notice--c .sec-notice__item:hover .sec-notice__title{color:#fff}
.sec-notice--c .sec-notice__date,
.sec-notice--c .sec-notice__count{color:rgba(255,255,255,.55)}
.sec-notice--c .sec-notice__count b{color:#fff}
.sec-notice--c .sec-notice__btn{color:rgba(255,255,255,.6)}
.sec-notice--c .sec-notice__btn:hover{background:rgba(255,255,255,.12);color:#fff}

/* ========== 반응형 ========== */
@media (max-width:1024px){
  .sec-notice__inner{gap:14px}
  .sec-notice__label{padding-right:14px}
  .sec-notice__date{display:none}
}

@media (max-width:768px){
  .sec-notice__inner{gap:12px;padding:14px var(--inner-px)}
  .sec-notice__label span{display:none}
  .sec-notice__label{padding-right:12px}
  .sec-notice__count{display:none}
  .sec-notice__btn--prev,
  .sec-notice__btn--next{display:none}
}