.fcn-notice[hidden] { display: none !important; }
.fcn-notice,
.fcn-notice * { box-sizing: border-box; }
.fcn-notice {
position: fixed;
z-index: 999999;
left: auto;
right: max(var(--fcn-offset-x, 24px), env(safe-area-inset-right, 0px));
top: auto;
bottom: max(var(--fcn-offset-y, 24px), env(safe-area-inset-bottom, 0px));
width: var(--fcn-width, 420px);
max-width: calc(100% - max(var(--fcn-offset-x, 24px), env(safe-area-inset-left, 0px)) - max(var(--fcn-offset-x, 24px), env(safe-area-inset-right, 0px)));
max-height: calc(100vh - 2 * var(--fcn-offset-y, 24px));
max-height: calc(100dvh - 2 * var(--fcn-offset-y, 24px));
overflow-y: auto;
margin: 0;
padding: var(--fcn-padding, 18px);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.fcn-notice.is-visible { opacity: 1; transform: translateY(0); }
.fcn-notice[data-position$="-left"] { left: max(var(--fcn-offset-x, 24px), env(safe-area-inset-left, 0px)); right: auto; }
.fcn-notice[data-position$="-center"] { left: 0; right: 0; margin-left: auto; margin-right: auto; }
.fcn-notice[data-position^="top-"] { top: max(var(--fcn-offset-y, 24px), env(safe-area-inset-top, 0px)); bottom: auto; }
.fcn-notice .fcn-notice__text { margin: 0 0 14px; white-space: pre-line; overflow-wrap: anywhere; }
.fcn-notice .fcn-notice__button { cursor: pointer; } .fcn-notice--styled {
background: var(--fcn-background, #fff);
color: var(--fcn-text-color, #222);
border: var(--fcn-border-width, 1px) solid var(--fcn-border-color, #ddd);
border-radius: var(--fcn-radius, 4px);
box-shadow: var(--fcn-shadow, 0 8px 28px rgba(0,0,0,0.12));
font-family: var(--fcn-font-family, inherit);
font-size: var(--fcn-font-size, 14px);
font-weight: var(--fcn-font-weight, 400);
line-height: var(--fcn-line-height, 1.5);
text-align: var(--fcn-text-align, left);
}
.fcn-notice--styled .fcn-notice__text {
font: inherit;
color: inherit;
text-transform: none;
letter-spacing: normal;
}
.fcn-notice--styled .fcn-notice__link,
.fcn-notice--styled .fcn-notice__link:visited {
color: var(--fcn-link-color, #222);
font: inherit;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.fcn-notice--styled .fcn-notice__link:hover,
.fcn-notice--styled .fcn-notice__link:focus-visible { color: var(--fcn-link-hover, #555); }
.fcn-notice--styled .fcn-notice__button {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 60px;
min-height: 40px;
max-width: 100%;
height: auto;
margin: 0;
padding: var(--fcn-button-padding-y, 10px) var(--fcn-button-padding-x, 20px);
border: 1px solid transparent;
border-radius: var(--fcn-button-radius, 4px);
background: var(--fcn-button-background, #222);
color: var(--fcn-button-color, #fff);
box-shadow: none;
font-family: inherit;
font-size: var(--fcn-button-font-size, 14px);
font-weight: 500;
line-height: 1.3;
text-align: center;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
white-space: normal;
overflow-wrap: anywhere;
transition: background-color 0.2s ease, color 0.2s ease;
}
.fcn-notice--styled .fcn-notice__button:hover,
.fcn-notice--styled .fcn-notice__button:focus-visible {
background: var(--fcn-button-hover-background, #444);
color: var(--fcn-button-hover-color, #fff);
border-color: transparent;
}
.fcn-notice--styled .fcn-notice__button:focus-visible,
.fcn-notice--styled .fcn-notice__link:focus-visible { outline: 2px solid var(--fcn-link-hover, #555); outline-offset: 3px; }
@media (max-width: 600px) {
.fcn-notice[data-position] {
left: max(var(--fcn-mobile-offset, 12px), env(safe-area-inset-left, 0px));
right: max(var(--fcn-mobile-offset, 12px), env(safe-area-inset-right, 0px));
bottom: max(var(--fcn-mobile-offset, 12px), env(safe-area-inset-bottom, 0px));
width: auto;
max-width: none;
max-height: calc(100vh - 2 * var(--fcn-mobile-offset, 12px));
max-height: calc(100dvh - 2 * var(--fcn-mobile-offset, 12px));
margin: 0;
padding: var(--fcn-mobile-padding, 16px);
}
.fcn-notice[data-position^="top-"] { top: max(var(--fcn-mobile-offset, 12px), env(safe-area-inset-top, 0px)); bottom: auto; }
.fcn-notice--styled { font-size: var(--fcn-mobile-font-size, 13px); }
}
@media (prefers-reduced-motion: reduce) {
.fcn-notice,
.fcn-notice .fcn-notice__link,
.fcn-notice .fcn-notice__button { transition: none; transform: none; }
}