/* ★★ 63차 이어서 (45) 공지사항 배너 — 사용자 시안(notice-banner-demo.zip · 티켓 모양 · 양옆 투명 홈 · 가로세로 약 5:1) · 「REVERSE WORLD」 → 「MAPLE REVERSE」 ·
   변형 = data-variant(notice · letter · note · release · check) · 어느 변형인지 = js/notice.js NoticeBanner.kindOf(목록 = 공지사항) · 그림 파일 없이 CSS + 인라인 SVG.
   색 = css/style.css 맨 위 :root 토큰 --nb-*(홈페이지 규칙 「색은 :root 토큰에서만」 · 흰색 · 검정(가림막)만 바로 쓴다) · 이 파일 = notice.html 만 읽는다(첫 화면 무게 상한 700KB). */
/* ★ 63차 이어서 (47) 자리 = 게시글 본문 맨 위(글 = .notice-article 안 · 목록 = #board-content 맨 앞 — js/notice.js 가 옮긴다 · 46차 사용자 「메뉴 아래가아니라」). */
.board-main .notice-banner{margin:10px 0 30px}
.notice-article .notice-banner{margin:0 0 34px}
.notice-banner{--nb-bg:var(--nb-notice);--nb-ink:var(--nb-notice-ink);--nb-pill:var(--nb-notice-pill);--nb-glow:var(--nb-notice-glow);--nb-tint:var(--nb-notice-tint);--nb-spark:var(--nb-notice-spark);--nb-brand:var(--nb-notice-brand);position:relative;isolation:isolate;width:100%;min-height:150px;aspect-ratio:5/1;border-radius:24px;overflow:hidden;background:var(--nb-bg);color:#fff;mask-image:radial-gradient(circle 19px at 0 50%,transparent 98%,#000 100%),radial-gradient(circle 19px at 100% 50%,transparent 98%,#000 100%);mask-composite:intersect;-webkit-mask-image:radial-gradient(circle 19px at 0 50%,transparent 98%,#000 100%),radial-gradient(circle 19px at 100% 50%,transparent 98%,#000 100%);-webkit-mask-composite:source-in}
.notice-banner[data-variant="letter"]{--nb-bg:var(--nb-letter);--nb-ink:var(--nb-letter-ink);--nb-pill:var(--nb-letter-pill);--nb-glow:var(--nb-letter-glow);--nb-tint:var(--nb-letter-tint);--nb-spark:var(--nb-letter-spark);--nb-brand:var(--nb-letter-brand)}
.notice-banner[data-variant="note"]{--nb-bg:var(--nb-note);--nb-ink:var(--nb-note-ink);--nb-pill:var(--nb-note-pill);--nb-glow:var(--nb-note-glow);--nb-tint:var(--nb-note-tint);--nb-spark:var(--nb-note-spark);--nb-brand:var(--nb-note-brand)}
.notice-banner[data-variant="release"]{--nb-bg:var(--nb-release);--nb-ink:var(--nb-release-ink);--nb-pill:var(--nb-release-pill);--nb-glow:var(--nb-release-glow);--nb-tint:var(--nb-release-tint);--nb-spark:var(--nb-release-spark);--nb-brand:var(--nb-release-brand)}
.notice-banner[data-variant="check"]{--nb-bg:var(--nb-check);--nb-ink:var(--nb-check-ink);--nb-pill:var(--nb-check-pill);--nb-glow:var(--nb-check-glow);--nb-tint:var(--nb-check-tint);--nb-spark:var(--nb-check-spark);--nb-brand:var(--nb-check-brand)}
.notice-banner .banner-decoration{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.notice-banner .banner-decoration:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--nb-tint) 14%,transparent) 64%,color-mix(in srgb,var(--nb-tint) 22%,transparent))}
.notice-banner .banner-deco{display:none;position:absolute;right:-8px;top:0;height:100%;width:auto;stroke:var(--nb-ink);opacity:.15}
.notice-banner[data-variant="notice"] .deco-notice,.notice-banner[data-variant="letter"] .deco-letter,.notice-banner[data-variant="note"] .deco-note,.notice-banner[data-variant="release"] .deco-release,.notice-banner[data-variant="check"] .deco-check{display:block}
.notice-banner .light-pill{position:absolute;display:block;height:23px;border-radius:30px;background:var(--nb-pill);opacity:.24}
.notice-banner .pill-one{width:96px;left:32%;top:10%}.notice-banner .pill-two{width:56px;left:50%;top:42%}.notice-banner .pill-three{width:76px;left:15%;bottom:16%;opacity:.13}
.notice-banner .floor-glow{position:absolute;width:420px;height:190px;left:-25px;bottom:-155px;background:var(--nb-glow);border-radius:50%;opacity:.25}
.notice-banner .sparkle{position:absolute;color:var(--nb-spark);font-size:22px;opacity:.35}.notice-banner .star-one{left:7%;top:20%}.notice-banner .star-two{left:46%;bottom:14%;font-size:12px;opacity:.24}
.notice-banner .banner-copy{min-height:inherit;position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:34px 160px 34px 8%;height:100%}
.notice-banner .banner-eyebrow{margin:0;font-size:10px;line-height:1;letter-spacing:3px;opacity:.68;color:#fff}
.notice-banner .banner-title{margin:0;font-weight:300;font-size:clamp(25px,3.5vw,38px);letter-spacing:-1.6px;line-height:1.35;color:#fff;text-shadow:0 2px 2px var(--nb-title-shadow);overflow-wrap:anywhere}
.notice-banner .brand-pill{position:absolute;right:42px;top:50%;transform:translateY(-50%);padding:8px 19px;border-radius:30px;background:var(--nb-brand);font-size:11px;color:#fff;white-space:nowrap}
@media(max-width:720px){.board-main .notice-banner{margin:6px 0 22px}.notice-article .notice-banner{margin:0 0 24px}.notice-banner{min-height:155px;border-radius:20px}.notice-banner .banner-copy{padding:28px 36px 48px}.notice-banner .brand-pill{top:auto;bottom:15px;right:30px;transform:none;font-size:9px;padding:5px 12px}.notice-banner .banner-deco{right:-100px;opacity:.11}.notice-banner .banner-eyebrow{font-size:8px;letter-spacing:2px}}
html.app-mode .board-main .notice-banner{margin:4px 0 18px}
html.app-mode .notice-banner{min-height:96px;aspect-ratio:auto}
html.app-mode .notice-banner .banner-copy{padding:20px 120px 20px 6%}