/* @group Notice Box (module)
-------------------- */
/* Shared shape only. Accent: the parent sets --notice-box-accent on an ancestor
   (fallback var(--red)); never declared on .notice-box itself so the ancestor
   value inherits. Parent must provide isolation:isolate on its wrapper. */
.notice-box {
    --notice-box-bleed: .8rem;
    --notice-box-padding: 1.8rem 2.2rem 1.8rem 2.6rem;
    --notice-box-gap: 2.6rem;
    --notice-box-bar-width: 4rem;
    --notice-box-icon-size: 3rem;
    --notice-box-shadow: 2px 2px 8px rgba(40, 40, 40, .1);
    align-items: center;
    background-color: var(--white);
    box-shadow: var(--notice-box-shadow);
    display: flex;
    gap: var(--notice-box-gap);
    left: var(--notice-box-bleed);
    margin-inline: auto;
    padding: var(--notice-box-padding);
    position: relative;
    width: calc(100% - var(--notice-box-bleed));
}
.notice-box::before {
    background-color: var(--notice-box-accent, var(--red));
    content: '';
    height: 100%;
    left: calc(var(--notice-box-bleed) * -1);
    position: absolute;
    top: 0;
    width: var(--notice-box-bar-width);
    z-index: -1;
}
.notice-box > i::before {
    background-color: var(--notice-box-accent, var(--red));
    content: '';
    display: block;
    height: var(--notice-box-icon-size);
    -webkit-mask: url('assets/icon-reminder.svg') center / contain no-repeat;
    mask: url('assets/icon-reminder.svg') center / contain no-repeat;
    width: var(--notice-box-icon-size);
}
.notice-box p {
    color: var(--header-2);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.193em;
    margin: 0;
}
.notice-box p + p {
    margin-top: 1rem;
}
.notice-box strong {
    color: var(--notice-box-accent, var(--red));
    font-weight: 700;
}
.notice-box a {
    color: var(--header-2);
    text-decoration: underline;
    transition: opacity .2s ease;
}
@media only screen and (min-width: 961px) {
    .notice-box a:hover,
    .notice-box a:focus-visible {
        opacity: .7;
    }
}
@media only screen and (max-width: 960px) {
    .notice-box {
        --notice-box-padding: 2.5rem 1.7rem 2.8rem 4rem;
        --notice-box-icon-size: 2rem;
        margin-right: var(--notice-box-bleed);
    }
}
/* @end
-------------------- */