/* Notice Board — photo grid with OCR snippet preview, upload form. */

.nb-title-count {
    display: inline-flex; align-items: center; vertical-align: middle;
    font-size: .68rem; font-weight: 700; color: var(--indigo);
    background: var(--indigo-soft, var(--paper)); padding: .12rem .5rem; border-radius: 999px;
    margin-left: .3rem;
}

.nb-upload-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--indigo);
    background: var(--indigo-soft, var(--paper)); color: var(--indigo); font-size: .82rem; font-weight: 700;
    text-decoration: none; margin-bottom: .7rem;
}
.nb-upload-btn:hover { background: var(--indigo); color: #fff; }

.nb-login-cta {
    display: flex; align-items: center; gap: .55rem;
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--indigo);
    border-radius: var(--radius, 5px); padding: .5rem .7rem; margin-bottom: .7rem;
    text-decoration: none; transition: background .12s ease;
}
.nb-login-cta:hover { background: var(--paper); }
.nb-login-cta-icon {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--indigo-soft, var(--paper)); color: var(--indigo); font-size: .74rem;
}
.nb-login-cta-text { font-size: .8rem; font-weight: 600; color: var(--ink); }

.nb-upload-card { margin-bottom: 1rem; }
.nb-upload-heading { font-size: 1rem; font-weight: 800; margin: 0 0 .2rem; }
.nb-upload-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .7rem; }
.nb-upload-form input {
    border: 1px solid var(--border); border-radius: 5px; padding: .6rem .75rem;
    background: var(--paper); color: var(--ink); font-family: inherit; font-size: .9rem;
}
.nb-upload-form label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: -.3rem; }
.nb-upload-hint { font-size: .74rem; margin: 0; }

.nb-list {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    overflow: hidden;
}
.nb-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem .55rem; border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit; transition: background .12s ease;
}
.nb-row:last-child { border-bottom: none; }
.nb-row:hover { background: var(--paper); }

.nb-row-thumb {
    flex-shrink: 0; width: 76px; height: 76px; border-radius: 6px; overflow: hidden;
    background: var(--paper); border: 1px solid var(--border); position: relative;
}
.nb-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nb-row-thumb-count {
    position: absolute; bottom: 2px; right: 2px;
    background: rgba(0,0,0,.65); color: #fff; font-size: .6rem; font-weight: 700;
    padding: 0 .3rem; border-radius: 3px; line-height: 1.4;
}

.nb-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.nb-row-title { font-weight: 700; font-size: .86rem; color: var(--ink); }
.nb-row-snippet {
    font-size: .76rem; color: var(--ink-soft); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nb-row-snippet-empty { font-style: italic; opacity: .7; }

.nb-row-go { flex-shrink: 0; font-size: .75rem; color: var(--ink-soft); }

@media (max-width: 480px) {
    .nb-row-thumb { width: 60px; height: 60px; }
    .nb-row-title { font-size: .8rem; }
}

.page-head-card-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.page-head-card-text h1 { margin: 0; }
.nb-guide-source { font-size: .78rem; margin: 0; }
.nb-back-btn {
    margin-left: auto; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper); color: var(--ink); font-size: .85rem; text-decoration: none;
    transition: background .12s ease;
}
.nb-back-btn:hover { background: var(--border); }

.nb-share-form { margin-bottom: .7rem; }
.nb-share-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink); font-size: .82rem; font-weight: 700;
    cursor: pointer; transition: background .12s ease;
}
.nb-share-btn:hover { background: var(--paper); }

.nb-view-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem;
    margin-bottom: .8rem;
}
.nb-view-gallery-single { grid-template-columns: 1fr; }

.nb-view-image-link { display: block; position: relative; }
.nb-view-gallery-single .nb-view-image-link { margin-bottom: 0; }
.nb-view-image {
    display: block; width: 100%; object-fit: contain;
    border-radius: var(--radius, 5px); border: 1px solid var(--border); background: var(--paper);
}
.nb-view-gallery-single .nb-view-image { max-height: 70vh; }
.nb-view-gallery:not(.nb-view-gallery-single) .nb-view-image { height: 160px; object-fit: cover; }
.nb-view-image-num {
    position: absolute; bottom: .35rem; right: .35rem;
    background: rgba(0,0,0,.65); color: #fff; font-size: .68rem; font-weight: 700;
    padding: .1rem .4rem; border-radius: 4px;
}

.nb-view-text-card { margin-bottom: 1rem; }
.nb-view-text-heading { font-size: .95rem; font-weight: 800; margin: 0 0 .6rem; display: flex; align-items: center; gap: .4rem; }
.nb-view-text { font-size: .88rem; line-height: 1.6; color: var(--ink); }
.nb-view-text-caveat { font-size: .74rem; margin-top: .7rem; line-height: 1.4; }