@charset "utf-8";
/* ============================================================
   user/notice — 약속백일 (갤러리 게시판)
   ============================================================ */
#main { padding:0; }

/* 히어로 */
.nt-hero {
    background:#1B4B9B;
    background-image:linear-gradient(135deg,#173F86 0%,#1F58B8 100%);
    color:#fff; text-align:center; padding:52px 0 48px;
}
.nt-hero-badge { display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30); border-radius:20px; font-size:13px; font-weight:700; padding:5px 16px; margin-bottom:14px; }
.nt-hero-title { font-size:clamp(24px,4vw,34px); font-weight:900; letter-spacing:-.02em; margin-bottom:12px; }
.nt-hero-sub { font-size:15px; color:rgba(255,255,255,.85); word-break:keep-all; }

/* 100일 여정 진행바 */
.nt-timeline {
    max-width:700px; margin:26px auto 0;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    padding:16px 24px 18px;
}
.nt-tl-labels { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:rgba(255,255,255,.85); }
.nt-tl-today { white-space:nowrap; color:rgba(255,255,255,.9); }
.nt-tl-today strong { color:#FFD24A; font-weight:800; }
.nt-tl-bar { position:relative; height:8px; border-radius:5px; background:rgba(255,255,255,.22); margin-top:10px; }
.nt-tl-fill { position:absolute; left:0; top:0; height:100%; border-radius:5px; background:linear-gradient(90deg,#FFE08A,#FFC93C); }
.nt-tl-knob { position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid #FFC93C; transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:2; }
@media(max-width:560px){
    .nt-tl-labels { font-size:11px; }
}

/* ── 카테고리 필터 + 검색 (히어로 아래) ── */
.nt-filter { background:#fff; border-bottom:1px solid #E7E1D4; }
.nt-filter-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; flex-wrap:wrap; }
.nt-cats { display:flex; flex-wrap:wrap; gap:8px; }
.nt-cat {
    display:inline-flex; align-items:center; gap:5px;
    background:#F3F1EB; color:#5A6072; border:1px solid #E2DCCE;
    font-size:13.5px; font-weight:700; border-radius:20px; padding:7px 15px;
    text-decoration:none; white-space:nowrap; transition:background .15s,color .15s,border-color .15s;
}
.nt-cat:hover { background:#E9E4D8; color:#16264D; }
.nt-cat.on { background:#1B4B9B; border-color:#1B4B9B; color:#fff; }
.nt-cat-ic { font-size:14px; line-height:1; }
.nt-search { position:relative; display:flex; align-items:center; flex:0 1 320px; min-width:220px; }
.nt-search-ic { position:absolute; left:14px; font-size:14px; color:#1B4B9B; pointer-events:none; }
.nt-search input { width:100%; height:40px; border:1px solid #D9D3C5; border-radius:22px; background:#fff; padding:0 16px 0 38px; font-size:14px; color:#16264D; }
.nt-search input::placeholder { color:#9AA0AE; }
.nt-search input:focus { outline:none; border-color:#1B4B9B; box-shadow:0 0 0 3px rgba(27,75,155,.15); }
@media(max-width:820px){
    .nt-filter-inner { flex-direction:column; align-items:stretch; }
    .nt-cats { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
    .nt-search { flex:1 1 auto; }
}

.nt-body { padding:36px 0 64px; }
.nt-empty { text-align:center; padding:60px 20px; color:#8A93A6; background:#fff; border:1px solid #E7E1D4; border-radius:14px; }

/* ── 갤러리: JS 메이슨리 (미드저니 스타일) — 열 너비 동일, 높이 auto, 가장 짧은 열에 채움 ── */
.nt-gallery { display:flex; align-items:flex-start; gap:8px; }
.nt-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.nt-card {
    display:block; width:100%;
    text-decoration:none; color:inherit;
}

.nt-thumb {
    position:relative; width:100%; border-radius:0; overflow:hidden;
    background:#E9E4D8; border:1px solid #E0D9C9;
}
.nt-thumb img { width:100%; height:auto; display:block; transition:transform .35s ease; }
.nt-card:hover .nt-thumb img { transform:scale(1.06); }
.nt-noimg { width:100%; min-height:180px; display:flex; align-items:center; justify-content:center; font-size:40px; color:#B8AF9A; }
.nt-pin { position:absolute; top:10px; left:10px; font-size:14px; background:#FFE08A; color:#8B5A00; border-radius:6px; padding:2px 8px; z-index:3; }

/* hover 오버레이 — 행사일(우측 상단), 키워드(좌측 하단) */
.nt-overlay {
    position:absolute; inset:0; z-index:2; opacity:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
    transition:opacity .25s ease;
}
.nt-card:hover .nt-overlay { opacity:1; }
/* 모바일: hover가 없으므로 D-day 배지는 항상 노출 (행사일/키워드는 숨김) */
@media(max-width:600px){
    .nt-overlay { opacity:1; background:linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 32%); }
    .nt-ov-date, .nt-ov-kw { display:none; }
}
.nt-ov-top {
    position:absolute; top:10px; right:10px;
    display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.nt-ov-dday {
    background:rgba(27,75,155,.95); color:#fff;
    font-size:12px; font-weight:800; border-radius:6px; padding:3px 9px; letter-spacing:.02em;
}
.nt-ov-date {
    background:rgba(255,255,255,.92); color:#16264D;
    font-size:12px; font-weight:800; border-radius:6px; padding:4px 9px;
}
.nt-ov-kw {
    position:absolute; left:10px; bottom:10px;
    background:rgba(27,75,155,.92); color:#fff;
    font-size:12px; font-weight:700; border-radius:6px; padding:4px 10px; max-width:80%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nt-cap {
    margin-top:10px; font-size:14.5px; font-weight:700; color:#16264D; line-height:1.45; word-break:keep-all;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 상세 ── */
.nt-crumb { font-size:13px; color:#8A8270; margin-bottom:18px; }
.nt-crumb a { color:#6B7283; text-decoration:none; }
.nt-crumb a:hover { color:#1B4B9B; }
.nt-crumb span { color:#16264D; font-weight:600; }
.nt-view { background:#fff; border:1px solid #E7E1D4; border-radius:16px; padding:32px 34px; box-shadow:0 2px 12px rgba(0,0,0,.05); }
@media(max-width:560px){ .nt-view{ padding:24px 20px; } }
.nt-view-pin { display:inline-block; background:#FFE08A; color:#8B5A00; font-size:12px; font-weight:800; border-radius:6px; padding:3px 10px; margin-bottom:10px; }
.nt-view-title { font-size:clamp(22px,3vw,28px); font-weight:900; color:#16264D; line-height:1.4; margin-bottom:14px; word-break:keep-all; }
.nt-view-meta { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:13px; color:#7A8398; padding-bottom:18px; border-bottom:1px solid #EFEADF; margin-bottom:22px; }
.nt-meta-item strong { color:#1B4B9B; }
.nt-meta-kw { background:#EFF4FF; color:#1D4ED8; border:1px solid #D7E3FB; border-radius:6px; padding:3px 10px; font-weight:700; }
.nt-view-img { margin-bottom:22px; text-align:center; }
/* 세로(긴) 사진도 화면 안에 전부 보이도록 높이 제한 — 스크롤 불필요 */
.nt-view-img img {
    max-width:100%;
    max-height:78vh;
    width:auto; height:auto;
    object-fit:contain;
    border-radius:12px; display:inline-block;
}
.nt-view-content { font-size:17px; line-height:1.9; color:#333; }
.notice-body img{max-width:100%;height:auto;border-radius:6px}
.notice-body table{border-collapse:collapse;margin:10px 0}
.notice-body table td,.notice-body table th{border:1px solid #ddd;padding:6px 10px}
.notice-body ul,.notice-body ol{padding-left:24px;margin:8px 0}
.notice-body a{color:var(--color-primary);text-decoration:underline}