.notice-popup{width:min(440px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);padding:0;margin:auto;overflow:auto;border:1px solid var(--line,#ddd);border-radius:4px;background:var(--site-background,#fff);color:var(--ink,#171a17);font-family:var(--site-font,"Pretendard",sans-serif);box-shadow:0 8px 28px #00000024}
.notice-popup:not([open]){display:none}
.notice-popup::backdrop{background:#101a1466}
.notice-popup__content{position:relative;padding:46px 24px 20px}
.notice-popup__close{position:absolute;right:10px;top:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;appearance:none;border:0;background:transparent;color:inherit;font:400 25px/1 var(--site-font,"Pretendard",sans-serif);cursor:pointer}
.notice-popup__close:hover{background:color-mix(in srgb,currentColor 5%,transparent)}
.notice-popup__image{display:block;width:100%;height:auto;max-height:58svh;object-fit:contain;margin:0 auto;background:transparent}
.notice-popup__image-link{display:block;color:inherit}
.notice-popup__title{font-size:20px;font-weight:550;letter-spacing:-.025em;line-height:1.45;margin:18px 0 10px;overflow-wrap:anywhere}
.notice-popup__body{font-size:14px;line-height:1.8;margin:10px 0 0;overflow-wrap:anywhere}
.notice-popup__link{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-width:0;min-height:36px;margin-top:16px;padding:4px 0;border-bottom:1px solid var(--line,#ddd);font-size:13px;font-weight:500;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.notice-popup__link:after{content:'↗';flex:none;font-size:13px}
.notice-popup__footer{margin-top:22px;padding-top:14px;border-top:1px solid var(--line,#ddd)}
.notice-popup__hide{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;color:var(--gray,#666);cursor:pointer}
.notice-popup__hide input{width:14px;height:14px;margin:0;accent-color:var(--green,#6c9b7d)}
.notice-popup :is(button,a,input):focus-visible{outline:2px solid var(--green,#6c9b7d);outline-offset:3px}
html:has(.notice-popup[open]){overflow:hidden}
@media(max-width:520px){.notice-popup__content{padding:42px 18px 18px}.notice-popup__title{font-size:19px}.notice-popup__body{font-size:13px}}
