/* ════════════════════════════════════════════
   공지사항 (모바일 우선 · 360px~1280px)
   ════════════════════════════════════════════ */

/* ── 서브 타이틀 ─────────────────────────── */
.notice-sub-title {
    padding: 32px 16px 24px;
    text-align: center;
    background: #faf8f6;
    border-bottom: 1px solid #ede5e0;
}

.notice-sub-title p {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #b5837c;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.notice-sub-title h1 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.5px;
    margin: 0;
}

/* ── 레이아웃 ────────────────────────────── */
#notice-main,
#notice-single-main {
    padding: 28px 16px 56px;
    background: #fff;
}

.notice-wrap {
    max-width: 1280px;
    margin: 0 auto;
}

/* ── 카테고리 탭 ─────────────────────────── */
.notice-cat-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.notice-cat-tab {
    display: inline-block;
    padding: 6px 14px;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
}

.notice-cat-tab:hover {
    border-color: #b5837c;
    color: #b5837c;
}

.notice-cat-tab.is-active {
    border-color: #b5837c;
    background: #b5837c;
    color: #fff;
}

/* ── 검색 폼 ─────────────────────────────── */
.notice-search-form {
    margin-bottom: 24px;
}

.notice-search-inner {
    display: flex;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.notice-search-inner:focus-within {
    border-color: #b5837c;
}

.notice-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    background: #fff;
    min-width: 0;
}

.notice-search-input::placeholder {
    color: #bbb;
}

.notice-search-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: #b5837c;
    border: none;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}

.notice-search-btn:hover {
    background: #9e6e67;
}

.notice-search-btn svg {
    width: 18px;
    height: 18px;
}

/* ── 공지 목록 ───────────────────────────── */
.notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid #1a1a1a;
}

.notice-item {
    border-bottom: 1px solid #f0ebe8;
}

.notice-item__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 4px;
    text-decoration: none;
    transition: background 0.15s;
    flex-wrap: wrap;
}

.notice-item__link:hover {
    background: #faf8f6;
}

/* 카테고리 뱃지 */
.notice-item__cat {
    flex-shrink: 0;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: #f0e8e6;
    color: #7c5652;
    white-space: nowrap;
}

/* 카테고리별 색상 */
.notice-cat--휴진안내     { background: #fee2e2; color: #991b1b; }
.notice-cat--이벤트       { background: #dbeafe; color: #1e40af; }
.notice-cat--전체안내     { background: #f3f4f6; color: #374151; }

.notice-item__title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.5;
    min-width: 0;
    word-break: break-all;
}

.notice-item__title mark {
    background: #fff3cd;
    color: #856404;
    border-radius: 2px;
    padding: 0 2px;
}

.notice-item__link:hover .notice-item__title {
    color: #b5837c;
}

.notice-item__date {
    flex-shrink: 0;
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
    margin-left: auto;
}

/* ── 본문 발췌 (검색 시) ─────────────────── */
.notice-item__excerpt {
    margin: 0;
    padding: 0 4px 12px;
    font-size: 12px;
    color: #999;
    line-height: 1.65;
    word-break: break-word;
}

.notice-item__excerpt mark {
    background: #fff3cd;
    color: #856404;
    border-radius: 2px;
    padding: 0 2px;
    font-style: normal;
}

/* ── 빈 상태 ─────────────────────────────── */
.notice-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 16px 80px;
    text-align: center;
}

.notice-empty__icon {
    width: 72px;
    height: 72px;
    background: #f7f0ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.notice-empty__icon svg {
    width: 34px;
    height: 34px;
    color: #b5837c;
}

.notice-empty__msg {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 1.65;
    word-break: break-word;
}

.notice-empty__kw {
    color: #b5837c;
    font-weight: 700;
}

.notice-empty__sub {
    margin: 0 0 28px;
    font-size: 13px;
    color: #aaa;
    line-height: 1.6;
}

.notice-empty__reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 22px;
    background: #b5837c;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.notice-empty__reset:hover  { background: #9e6e67; color: #fff; }
.notice-empty__reset:focus-visible { outline: 2px solid #b5837c; outline-offset: 3px; }

/* ── 페이지네이션 ─────────────────────────── */
.notice-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.notice-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid #e0d8d5;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.notice-pagination .page-numbers svg {
    width: 16px;
    height: 16px;
}

.notice-pagination .page-numbers:hover {
    border-color: #b5837c;
    color: #b5837c;
}

.notice-pagination .page-numbers.current {
    border-color: #b5837c;
    background: #b5837c;
    color: #fff;
    font-weight: 700;
}

.notice-pagination .page-numbers.dots {
    border: none;
    cursor: default;
    color: #aaa;
}

/* ════════════════════════════════════════════
   공지사항 상세
   ════════════════════════════════════════════ */

/* ── 게시글 헤더 ─────────────────────────── */
.notice-single__head {
    padding-bottom: 20px;
    border-bottom: 2px solid #1a1a1a;
    margin-bottom: 28px;
}

.notice-single__head .notice-item__cat {
    margin-bottom: 10px;
}

.notice-single__title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.5;
    letter-spacing: -0.5px;
    margin: 8px 0 12px;
}

.notice-single__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notice-single__date {
    font-size: 13px;
    color: #aaa;
}

/* ── 본문 ───────────────────────────────── */
.notice-single__body {
    max-width: 860px;   /* wrap이 1280px이어도 본문은 가독성 유지 */
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    padding-bottom: 36px;
    border-bottom: 1px solid #ede5e0;
    word-break: break-word;
}

.notice-single__body p      { margin: 0 0 1em; }
.notice-single__body h2     { font-size: 18px; font-weight: 700; margin: 1.5em 0 0.5em; color: #1a1a1a; }
.notice-single__body h3     { font-size: 16px; font-weight: 700; margin: 1.2em 0 0.4em; color: #1a1a1a; }
.notice-single__body ul,
.notice-single__body ol     { padding-left: 1.5em; margin: 0 0 1em; }
.notice-single__body li     { margin-bottom: 4px; }
.notice-single__body img    { max-width: 100%; height: auto; border-radius: 6px; display: block; }
.notice-single__body a      { color: #b5837c; text-decoration: underline; word-break: break-all; }
/* 모바일에서 표(table) 가로 스크롤 */
.notice-single__body table  { width: 100%; border-collapse: collapse; }
.notice-single__body .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1em; }
/* 긴 단어·URL 줄바꿈 */
.notice-single__body        { word-break: break-word; overflow-wrap: break-word; }

/* ── 이전 / 다음 글 ─────────────────────── */
.notice-single__nav {
    margin-top: 0;
    border-bottom: 1px solid #ede5e0;
}

.notice-single__nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    border-top: 1px solid #f0ebe8;
    text-decoration: none;
    transition: background 0.15s;
}

.notice-single__nav-item:hover {
    background: #faf8f6;
}

.notice-single__nav-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #b5837c;
    width: 36px;
    letter-spacing: 0.3px;
}

.notice-single__nav-title {
    font-size: 14px;
    color: #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ── 목록으로 ────────────────────────────── */
.notice-single__back {
    margin-top: 28px;
    text-align: center;
}

.notice-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: 1.5px solid #b5837c;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #b5837c;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.notice-back-btn:hover {
    background: #b5837c;
    color: #fff;
}

.notice-back-btn svg {
    width: 16px;
    height: 16px;
}

/* ════════════════════════════════════════════
   반응형 (360px → 1280px 모바일 우선)
   ════════════════════════════════════════════ */

/* ── 360px 이하 ─────────────────────────────── */
@media (max-width: 360px) {
    .notice-sub-title           { padding: 22px 12px 16px; }
    .notice-sub-title h1        { font-size: 17px; }

    #notice-main,
    #notice-single-main         { padding: 20px 12px 48px; }

    /* 카테고리 탭: 가로 스크롤 */
    .notice-cat-tabs            { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
                                  scrollbar-width: none; padding-bottom: 4px; gap: 6px; }
    .notice-cat-tabs::-webkit-scrollbar { display: none; }
    .notice-cat-tab             { flex-shrink: 0; font-size: 11px; padding: 5px 10px; }

    /* 검색 */
    .notice-search-input        { font-size: 13px; padding: 9px 10px; }
    .notice-search-btn          { width: 38px; }
    .notice-search-btn svg      { width: 16px; height: 16px; }

    /* 목록 */
    .notice-item__link          { padding: 12px 2px; gap: 6px; }
    .notice-item__cat           { font-size: 10px; padding: 2px 7px; }
    .notice-item__title         { font-size: 13px; }
    .notice-item__date          { display: none; }

    /* 페이지네이션 */
    .notice-pagination          { gap: 2px; margin-top: 24px; }
    .notice-pagination .page-numbers { width: 30px; height: 30px; font-size: 12px; }

    /* 상세 */
    .notice-single__title       { font-size: 16px; }
    .notice-single__body        { font-size: 14px; }
    .notice-back-btn            { font-size: 13px; padding: 8px 18px; }
}

/* ── 480px ~ ─────────────────────────────────── */
@media (min-width: 480px) {
    .notice-sub-title           { padding: 36px 20px 28px; }
    .notice-sub-title h1        { font-size: 22px; }
    #notice-main,
    #notice-single-main         { padding: 36px 20px 64px; }

    .notice-item__link          { flex-wrap: nowrap; }
    .notice-single__title       { font-size: 22px; }
}

/* ── 768px ~ ─────────────────────────────────── */
@media (min-width: 768px) {
    .notice-sub-title           { padding: 48px 24px 32px; }
    .notice-sub-title h1        { font-size: 26px; }
    #notice-main,
    #notice-single-main         { padding: 48px 24px 72px; }

    .notice-item__title         { font-size: 15px; }
    .notice-single__title       { font-size: 24px; }
    .notice-single__body        { font-size: 16px; }
}

/* ── 1024px ~ ────────────────────────────────── */
@media (min-width: 1024px) {
    .notice-sub-title           { padding: 56px 40px 36px; }
    .notice-sub-title h1        { font-size: 30px; }
    #notice-main,
    #notice-single-main         { padding: 56px 40px 80px; }

    .notice-cat-tab             { font-size: 14px; padding: 7px 18px; }
    .notice-single__title       { font-size: 26px; }
    .notice-item__link          { padding: 16px 4px; }
}

/* ── 1280px ~ ────────────────────────────────── */
@media (min-width: 1280px) {
    .notice-sub-title           { padding: 64px 0 40px; }
    .notice-sub-title h1        { font-size: 32px; }
    #notice-main,
    #notice-single-main         { padding: 64px 40px 96px; }
}