/* =========================================================================
   fc/note-box - 備註 / 注意事項核心區塊
   ========================================================================= */

.fc-note-box {
    --fc-note-accent: #2563eb;
    --fc-note-bg: #ffffff;
    --fc-note-text: #1f2937;
    --fc-note-muted: #64748b;
    --fc-note-radius: 16px;
    --fc-note-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    --fc-note-soft: color-mix(in srgb, var(--fc-note-accent) 12%, #ffffff);
    --fc-note-border: color-mix(in srgb, var(--fc-note-accent) 28%, transparent);
    --fc-note-item-bg: color-mix(in srgb, var(--fc-note-accent) 5%, #ffffff);
    --fc-note-item-border: color-mix(in srgb, var(--fc-note-accent) 16%, #e5e7eb);
    width: min(100%, var(--fc-note-custom-width, 900px));
    max-width: 100%;
    margin: 1.5rem auto;
    color: var(--fc-note-text);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--fc-note-accent) 4%, #ffffff), var(--fc-note-bg) 48%),
        var(--fc-note-bg);
    border: 1px solid var(--fc-note-border);
    border-radius: var(--fc-note-radius);
    position: relative;
    overflow: hidden;
    box-shadow: var(--fc-note-shadow);
    box-sizing: border-box;
    isolation: isolate;
}

.fc-note-box--tone-soft {
    --fc-note-bg: color-mix(in srgb, #ffffff 96%, var(--fc-note-accent) 4%);
}

.fc-note-box--tone-medium {
    --fc-note-bg: color-mix(in srgb, #ffffff 90%, var(--fc-note-accent) 10%);
    --fc-note-item-bg: color-mix(in srgb, var(--fc-note-accent) 8%, #ffffff);
}

.fc-note-box--tone-strong {
    --fc-note-bg: color-mix(in srgb, #ffffff 82%, var(--fc-note-accent) 18%);
    --fc-note-shadow: 0 18px 46px color-mix(in srgb, var(--fc-note-accent) 14%, transparent);
}

.fc-note-box--tone-dark {
    --fc-note-bg: #0f172a;
    --fc-note-text: #f8fafc;
    --fc-note-muted: rgba(255, 255, 255, 0.76);
    --fc-note-border: rgba(255, 255, 255, 0.14);
    --fc-note-item-bg: color-mix(in srgb, var(--fc-note-bg) 90%, var(--fc-note-accent) 10%);
    --fc-note-item-border: rgba(255, 255, 255, 0.14);
    --fc-note-shadow: 0 22px 56px rgba(15, 23, 42, 0.3);
}

.fc-note-box--no-shadow {
    --fc-note-shadow: none;
}

.fc-note-box *,
.fc-note-box *::before,
.fc-note-box *::after {
    box-sizing: border-box;
}

.fc-note-box.fc-width-wide {
    width: min(100%, 1200px);
}

.fc-note-box.fc-width-normal {
    width: min(100%, 900px);
}

.fc-note-box.fc-width-centered,
.fc-note-box.fc-width-fullwidth-centered-600 {
    width: min(100%, 680px);
}

.fc-note-box.fc-width-fullwidth-centered-800 {
    width: min(100%, 860px);
}

.fc-note-box.fc-width-fullwidth,
.fc-note-box.fc-width-fullwidth-centered {
    width: 100%;
}

.fc-note-box__chrome {
    position: absolute;
    inset: var(--fc-note-chrome-inset-top, 14px) auto var(--fc-note-chrome-inset-bottom, 14px) var(--fc-note-chrome-inset-left, 14px);
    width: var(--fc-note-chrome-width, 5px);
    border-radius: var(--fc-note-chrome-radius, 999px);
    background: linear-gradient(180deg, var(--fc-note-accent), color-mix(in srgb, var(--fc-note-accent) 52%, #ffffff));
}

.fc-note-box__inner {
    display: grid;
    grid-template-columns: minmax(30px, auto) minmax(0, 1fr);
    gap: 1rem;
    padding: 1.25rem 1.35rem 1.25rem 1.75rem;
    align-items: start;
}

.fc-note-box--density-compact .fc-note-box__inner {
    padding: 0.95rem 1rem 0.95rem 1.45rem;
    gap: 0.75rem;
}

.fc-note-box--density-spacious .fc-note-box__inner {
    padding: 1.75rem 2rem 1.75rem 2.35rem;
    gap: 1.35rem;
}

.fc-note-box__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.fc-note-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25em;
    height: 2.25em;
    padding: 0 0.42em;
    border-radius: 999px;
    background: var(--fc-note-accent);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--fc-note-accent) 20%, transparent);
}

.fc-note-box__label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0px auto;
    padding: 0;
    background: transparent;
    color: var(--fc-note-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fc-note-box__body {
    min-width: 0;
}

.fc-note-box__inner > .fc-note-box__body:first-child {
    grid-column: 1 / -1;
}

.fc-note-box__title {
    margin: 0 0 0.45rem;
    color: var(--fc-note-text);
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
    font-weight: 800;
    line-height: 1.38;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.fc-note-box--title-compact .fc-note-box__title {
    font-size: clamp(0.98rem, 0.94rem + 0.28vw, 1.14rem);
}

.fc-note-box--title-large .fc-note-box__title {
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.52rem);
}

.fc-note-box--title-hero .fc-note-box__title {
    font-size: clamp(1.38rem, 1.16rem + 1vw, 1.95rem);
}

.fc-note-box__title:empty {
    display: none;
}

.fc-note-box__content {
    color: color-mix(in srgb, var(--fc-note-text) 88%, #334155);
    font-size: 0.95rem;
    line-height: 1.78;
    overflow-wrap: anywhere;
}

.fc-note-box__content:empty {
    display: none;
}

.fc-note-box__content p {
    margin: 0 0 0.72rem;
}

.fc-note-box__content p:last-child {
    margin-bottom: 0;
}

.fc-note-box__content ul,
.fc-note-box__content ol {
    margin: 0.72rem 0 0;
    padding-left: 1.25rem;
}

.fc-note-box__content li+li {
    margin-top: 0.32rem;
}

.fc-note-box__content a,
.fc-note-box__item-value a {
    color: var(--fc-note-accent);
    font-weight: 700;
    text-underline-offset: 0.18em;
}

.fc-note-box__item-link-preview {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.1rem;
}

.fc-note-box__link-prefix {
    color: var(--fc-note-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fc-note-box__link-icon {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fc-note-accent) 12%, #ffffff);
    color: var(--fc-note-accent);
    font-size: 0.72rem;
}

.fc-note-box__link-text {
    overflow-wrap: anywhere;
}

.fc-note-box__items {
    display: grid;
    gap: 0.55rem;
    margin: 0.95rem 0 0;
}

.fc-note-box__item {
    display: grid;
    grid-template-columns: minmax(96px, 0.24fr) 1fr;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--fc-note-item-border);
    border-radius: 12px;
    background: var(--fc-note-item-bg);
}

.fc-note-box__item-label {
    margin: 0;
    color: var(--fc-note-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.fc-note-box__item-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    margin: 0;
    color: var(--fc-note-text);
    font-size: 0.95rem;
    line-height: 1.65;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fc-note-box__preset-buttons {
    display: grid;
    gap: 0.5rem;
}

.fc-note-box__item-editor {
    padding: 0.85rem;
    margin: 0 0 0.75rem;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #f8fafc;
}

.fc-note-box--editor {
    cursor: text;
}

.fc-note-box--editor .fc-note-box__title:empty,
.fc-note-box--editor .fc-note-box__content:empty {
    min-height: 1.4em;
}

.fc-note-box__editor-only {
    border: 1px dashed color-mix(in srgb, var(--fc-note-accent) 34%, #cbd5e1);
    border-radius: 10px;
    background: color-mix(in srgb, var(--fc-note-accent) 5%, #ffffff);
    padding: 0.45rem 0.6rem;
}

.fc-note-box__editor-only::before {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--fc-note-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    content: 'EDITOR ONLY';
}

.fc-note-box__item-link-editor {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.45rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--fc-note-item-border);
}

@media (max-width: 640px) {
    .fc-note-box__item-link-editor {
        grid-template-columns: 1fr;
    }
}

.fc-note-box--align-center {
    text-align: center;
}

.fc-note-box--align-center .fc-note-box__meta,
.fc-note-box--align-center .fc-note-box__item-value {
    align-items: center;
    justify-content: center;
}

.fc-note-box--align-center .fc-note-box__item {
    justify-items: center;
}

.fc-note-box--align-right {
    text-align: right;
}

.fc-note-box--align-right .fc-note-box__meta,
.fc-note-box--align-right .fc-note-box__item-value {
    align-items: flex-end;
    justify-content: flex-end;
}

.fc-note-box--align-right .fc-note-box__item {
    justify-items: end;
}

/* Style variants */
.fc-note-box--style-default {
    --fc-note-accent: #2563eb;
}

.fc-note-box--style-source {
    --fc-note-accent: #0f766e;
    --fc-note-shadow: none;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--fc-note-accent) 7%, #ffffff), #ffffff),
        var(--fc-note-bg);
}

.fc-note-box--style-caution {
    --fc-note-accent: #d97706;
    background:
        linear-gradient(135deg, rgba(251, 191, 36, 0.16), transparent 42%),
        var(--fc-note-bg);
}

.fc-note-box--style-event {
    --fc-note-accent: #7c3aed;
    background:
        radial-gradient(circle at 0 0, rgba(124, 58, 237, 0.16), transparent 36%),
        var(--fc-note-bg);
}

.fc-note-box--style-policy {
    --fc-note-accent: #334155;
    --fc-note-shadow: none;
    border-style: dashed;
}

.fc-note-box--style-link {
    --fc-note-accent: #0284c7;
}

.fc-note-box--style-link .fc-note-box__inner {
    grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
}

.fc-note-box--style-checklist {
    --fc-note-accent: #16a34a;
}

.fc-note-box--style-checklist .fc-note-box__content p::before {
    content: '✓';
    display: inline-flex;
    margin-right: 0.45em;
    color: var(--fc-note-accent);
    font-weight: 900;
}

.fc-note-box--style-highlight {
    --fc-note-accent: #db2777;
    background:
        linear-gradient(180deg, rgba(253, 242, 248, 0.9), rgba(255, 255, 255, 0.96)),
        var(--fc-note-bg);
}

.fc-note-box--style-compact {
    --fc-note-accent: #64748b;
    --fc-note-item-bg: transparent;
    box-shadow: none;
}

.fc-note-box--style-compact .fc-note-box__item {
    border-width: 0 0 1px;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.fc-note-box--style-editorial {
    --fc-note-accent: #111827;
    --fc-note-shadow: 8px 8px 0 rgba(15, 23, 42, 0.08);
}

.fc-note-box--style-editorial .fc-note-box__label {
    letter-spacing: 0.16em;
}

.fc-note-box--style-glass {
    --fc-note-accent: #0891b2;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(236, 254, 255, 0.74)),
        var(--fc-note-bg);
    backdrop-filter: blur(10px);
}

.fc-note-box--style-outline {
    --fc-note-accent: #475569;
    background: transparent;
    box-shadow: none;
    border-width: 2px;
}

.fc-note-box--style-outline .fc-note-box__item {
    background: transparent;
}

.fc-note-box--style-contact {
    --fc-note-accent: #005bac;
    --fc-note-bg: #f7f8fa;
    border: 0;
    border-radius: 0;
    background: var(--fc-note-bg);
    box-shadow: none;
}

.fc-note-box--style-contact .fc-note-box__chrome {
    display: none;
}

.fc-note-box--style-contact .fc-note-box__inner {
    grid-template-columns: 1fr;
    padding: clamp(1.75rem, 5vw, 4rem);
}

.fc-note-box--style-contact .fc-note-box__meta {
    flex-direction: row;
}

.fc-note-box--style-contact .fc-note-box__title {
    font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.fc-note-box--style-contact .fc-note-box__items {
    gap: 0;
    margin-top: 1.25rem;
}

.fc-note-box--style-contact .fc-note-box__item {
    grid-template-columns: minmax(7rem, 0.18fr) 1fr;
    border-top-color: rgba(15, 23, 42, 0.08);
    border-width: 1px 0 0;
    border-radius: 0;
    background: transparent;
    padding: 0.82rem 0;
}

.fc-note-box--style-contact .fc-note-box__item-label {
    color: var(--fc-note-text);
}

.fc-note-box--style-contact .fc-note-box__item-value {
    line-height: 1.75;
}

@media (max-width: 768px) {
    .fc-note-box {
        margin: 1.2rem 0;
    }

    .fc-note-box__inner {
        grid-template-columns: 1fr;
        gap: 0.95rem;
        padding: 1.15rem 1.15rem 1.15rem 1.55rem;
    }

    .fc-note-box--density-spacious .fc-note-box__inner {
        padding: 1.45rem 1.45rem 1.45rem 2.15rem;
    }

    .fc-note-box--density-compact .fc-note-box__inner {
        padding: 0.85rem 0.85rem 0.85rem 1.25rem;
    }

    .fc-note-box__meta {
        flex-direction: row;
        align-items: center;
    }

    .fc-note-box__item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .fc-note-box--style-contact .fc-note-box__inner {
        padding: 1.35rem;
    }
}

/* =========================================================================
   Note Box Item Style Customization
   ========================================================================= */
.fc-note-box__item {
    border-color: var(--fc-note-item-accent, var(--fc-note-item-border));
}

.fc-note-box__item-label {
    color: var(--fc-note-item-accent, var(--fc-note-muted));
}

/* 關閉框線 */
.fc-note-box--no-item-borders .fc-note-box__item {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* 無框無背景 */
.fc-note-box--item-style-borderless .fc-note-box__item {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 虛線框 */
.fc-note-box--item-style-dashed .fc-note-box__item {
    border-style: dashed !important;
}

/* 底部分隔線 */
.fc-note-box--item-style-underline .fc-note-box__item {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--fc-note-item-accent, var(--fc-note-item-border)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 標題顏色控制 */
.fc-note-box__title {
    color: var(--fc-note-title-color, var(--fc-note-text));
}

/* 關閉左側裝飾線 */
.fc-note-box--no-chrome .fc-note-box__chrome {
    display: none !important;
}

/* 備註灰框 (blq) 樣式 */
.fc-note-box--style-blq {
    --fc-note-accent: #565656;
    --fc-note-bg: #f5f5f5;
    --fc-note-radius: 10px 0 0 10px;
    --fc-note-chrome-width: 6px;
    --fc-note-chrome-inset-top: 0px;
    --fc-note-chrome-inset-bottom: 0px;
    --fc-note-chrome-inset-left: 0px;
    --fc-note-chrome-radius: 0px;
    --fc-note-shadow: none;
    border: none;
}

.fc-note-box--style-blq .fc-note-box__inner {
    padding: 30px 20px 30px 30px;
}

.fc-note-box--style-blq .fc-note-box__chrome {
    background: var(--fc-note-accent);
}

/* 編輯器中預覽「備註：」前綴的視覺呈現 */
.fc-note-box--editor.fc-note-box--prepend-prefix .fc-note-box__content p:first-child::before {
    content: "備註：";
    font-weight: bold;
    margin-right: 0.15em;
}

/* 重要提示 (tip) 樣式 - 承襲舊版 pro-tip */
.fc-note-box--style-tip {
    --fc-note-accent: #669999;
    --fc-note-bg: #669999;
    --fc-note-text: #ffffff;
    --fc-note-radius: 0px;
    --fc-note-shadow: none;
    margin: 30px 0;
    border: none;
}

.fc-note-box--style-tip .fc-note-box__inner {
    padding: 20px;
    display: block;
}

.fc-note-box--style-tip .fc-note-box__chrome {
    display: none !important;
}

.fc-note-box--style-tip .fc-note-box__content {
    color: #ffffff;
    line-height: 1.5;
}

.fc-note-box--style-tip .fc-note-box__content a,
.fc-note-box--style-tip a {
    color: #ffffff;
    text-decoration: underline;
}