@charset "utf-8";
/* ============================================================
   리얼스토리 임베드 전용 스타일 (2026-08-05)
   구 게시판(2016)을 신규 사이트 안에 넣을 때 쓰는 단독 CSS.
   2016 공통 CSS 는 부르지 않는다 — 여기서 처음부터 그린다.
   토큰은 신규 테마 style.css 의 :root 값을 그대로 옮겼다.
   ============================================================ */

:root {
    --primary: #2254A5;
    --primary-deep: #1B4384;
    --primary-wash: #EAF3FB;
    --ink: #231F20;
    --ink-2: #232323;
    --body-muted: #696969;
    --hairline: #DDDDDD;
    --hairline-soft: #F0F0F0;
    --canvas: #FFFFFF;
    --canvas-cool: #F5F7FA;
    --radiusSm: 10px;
    --font: 'Pretendard Variable', Pretendard, -apple-system, system-ui,
            'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); }
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }

.board_container { max-width: none; margin: 0; padding: 4px 0 48px; } /* 2026-08-19 전후사진·공지사항 게시판과 폭 통일 */

/* ── 카테고리 탭 ───────────────────────────────── */
.board-category li { margin: 0; padding: 0; border: 0; background: none; list-style: none; }
/* 신규 사이트 전후사진 게시판의 카테고리 탭과 같은 모양 (2026-08-19)
   — 회색 알약 + 선택 시 브랜드색 채움. 테두리는 쓰지 않는다. */
.board-category ul {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin: 0 0 24px; padding: 0; list-style: none;
}
.board-category li a {
    display: flex; align-items: center; height: 54px;
    padding: 0 28.8px;
    border: 0; border-radius: 50px;
    background: var(--canvas-cool);
    font-size: 18px; font-weight: 500;
    color: #8A919B;
    transition: background .18s ease, color .18s ease;
}
.board-category li a:hover { background: var(--primary-wash); color: var(--primary); }
.board-category li.on a {
    background: var(--primary);
    color: #fff; font-weight: 600;
}

/* 좁은 화면에서는 알약을 줄인다 — 신규 사이트는 이 구간에서 드롭다운으로 바뀌지만
   구 게시판에는 드롭다운이 없어 탭을 그대로 두고 크기만 맞춘다. */
@media (max-width: 768px) {
    .board-category ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
    }
    .board-category ul::-webkit-scrollbar { display: none; }
    .board-category li { flex: 0 0 auto; }
    .board-category li a {
        height: 40px; padding: 0 16px; font-size: 14px;
        white-space: nowrap;
    }
}

/* ── 목록 ─────────────────────────────────────── */
.article table { border-top: 2px solid var(--ink); }

/* 목록 헤더 표시 — 번호·제목·등록일·조회수 안내 (2026-08-20 조회수 표시 요청으로 복원) */
.article thead { display: table-header-group; }

.article thead th {
    padding: 15px 8px;
    border-bottom: 1px solid var(--hairline);
    background: var(--canvas-cool);
    font-size: 14px; font-weight: 600; color: var(--ink);
    letter-spacing: -.01em;
}
.article tbody td {
    padding: 17px 8px;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 14px; text-align: center; color: var(--body-muted);
}
.article tbody td.title { text-align: left; padding-left: 14px; }
.article tbody td.title a {
    font-size: 17.5px; /* 공지사항 목록 제목과 같은 크기 (2026-08-19) */
    color: var(--ink-2); font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.article tbody tr:hover td { background: var(--primary-wash); }
.article tbody td.title a:hover { color: var(--primary); text-decoration: underline; }
.article tbody td.no-data { padding: 70px 0; color: var(--body-muted); }

/* ── 페이징 ───────────────────────────────────── */
.paging { position: relative; margin: 32px 0 0; }
.pg_wrap { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg_wrap a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 8px;
    border: 1px solid var(--hairline); border-radius: var(--radiusSm);
    font-size: 14px; color: var(--body-muted);
}
.pg_wrap a:hover { border-color: var(--primary); color: var(--primary); }
.pg_page.cur {
    background: var(--primary) !important; border-color: var(--primary) !important;
    color: #fff !important; font-weight: 600;
}
/* 화살표 — 옛 jpg 대신 기호 (실제 클래스: pg_start · pg_prev · pg_next · pg_end) */
.pg_start img, .pg_prev img, .pg_next img, .pg_end img { display: none; }
.pg_start::after { content: '\00AB'; }
.pg_prev::after  { content: '\2039'; }
.pg_next::after  { content: '\203A'; }
.pg_end::after   { content: '\00BB'; }
.pg_start, .pg_prev, .pg_next, .pg_end { font-size: 16px; line-height: 1; }
.paging .bttn_ar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }

/* ── 검색 ─────────────────────────────────────── */
.search { margin: 28px 0 0; }
.search table { width: auto; margin: 0 auto; }
.search td { padding: 0 3px; }
.search select, .search input[type=text] {
    height: 40px; padding: 0 12px;
    border: 1px solid var(--hairline); border-radius: var(--radiusSm);
    font-family: var(--font); font-size: 15px; color: var(--ink-2);
    background: #fff;
}
.search input[type=text] { min-width: 210px; }
.search select:focus, .search input[type=text]:focus {
    outline: 0; border-color: var(--primary);
}

/* ── 상세보기 ─────────────────────────────────── */
.subj {
    padding: 24px 0 0;
    border-top: 2px solid var(--ink); border-bottom: 0;
    font-size: 21px; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.info, .date {
    padding: 12px 4px;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 14px; color: var(--body-muted);
}
.content {
    padding: 34px 4px 44px;
    border-bottom: 1px solid var(--hairline);
    font-size: 16px; line-height: 1.85;
}
.content img { border-radius: var(--radiusSm); margin: 6px 0; }
.attach { padding: 14px 4px; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; }
.attach a { color: var(--primary); text-decoration: underline; }

/* ── 버튼 ─────────────────────────────────────── */
.bttn, .bttn_ar { margin: 26px 0 0; text-align: center; }
.bttn a, .bttn_ar a { display: inline-block; }
.bttn a img, .bttn_ar a img { display: block; }

/* 폼 */
.not_notice { font-size: 14px; color: var(--body-muted); }
input[type=text], input[type=password], textarea, select {
    font-family: var(--font);
}

/* ── 모바일 ───────────────────────────────────── */
@media (max-width: 768px) {
    .board_container { padding: 0 0 36px; }
    .article thead { display: none; }
    .article table, .article tbody, .article tr, .article td { display: block; width: 100%; }
    .article tbody tr {
        padding: 15px 4px;
        border-bottom: 1px solid var(--hairline-soft);
    }
    .article tbody td { border: 0; padding: 0; text-align: left; }
    .article tbody td.title { padding: 0 0 6px; font-size: 16px; }
    .article tbody td.num { display: inline-block; width: auto; font-size: 13px; }
    .article tbody td.num + td.num::before { content: '·'; margin: 0 6px; color: var(--hairline); }
    .article tbody td:first-child { display: none; }   /* 번호 숨김 */
    .paging .bttn_ar { position: static; margin-top: 18px; }
    .search input[type=text] { min-width: 0; width: 100%; }
    .subj { font-size: 18px; }
}


/* ============================================================
   구 board.css 잔재 정리 · 이미지 버튼 교체
   ============================================================ */

/* 접속통계용 비가시 iframe 이 300px 높이를 차지해 아래 여백을 만든다 */
body > iframe { display: none !important; }

/* 글쓰기 — 옛 JPG 버튼을 텍스트 버튼으로 */
.paging .bttn_ar a img,
.bttn_ar > a > img { display: none !important; }
.paging .bttn_ar a {
    display: inline-block; padding: 10px 26px;
    background: var(--primary); border-radius: 999px;
    font-size: 15px; font-weight: 600; color: #fff;
    transition: background .18s ease;
}
.paging .bttn_ar a::after { content: '글쓰기'; }
.paging .bttn_ar a:hover { background: var(--primary-deep); }

/* 검색 GO */
#bt-board-search img { display: none !important; }
#bt-board-search {
    display: inline-block; height: 40px; padding: 0 20px; line-height: 40px;
    background: var(--ink); border-radius: var(--radiusSm);
    font-size: 14px; font-weight: 600; color: #fff;
}
#bt-board-search::after { content: '검색'; }
#bt-board-search:hover { background: var(--primary); }

/* ── 상세·폼 버튼 ─────────────────────────────
   ⚠️ 이미지 버튼을 통째로 숨기면 대체 텍스트가 없는 것들이 빈 알약이 된다.
      아래에 이름을 붙여준 것만 숨기고, 나머지는 원본 이미지를 그대로 둔다. */
.bttn a[href*="act=u"] img,
#bt-board-delete img,
#bt-board-list img,
.bttn a[href^="?pg"] img,
.bttn a[href*="btn_list"] img,
#bt-board-submit img,
#bt-board-cancel img,
#bt-board-answer img { display: none !important; }

.bttn { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 30px 0 0; }
.bttn a {
    display: inline-block; padding: 11px 26px;
    border: 1px solid var(--hairline); border-radius: 999px;
    font-size: 15px; font-weight: 500; color: var(--ink-2);
    background: #fff; transition: all .18s ease;
}
.bttn a:hover { border-color: var(--primary); color: var(--primary); }

.bttn a[href*="act=u"]::after   { content: '수정'; }
#bt-board-delete::after         { content: '삭제'; }
.bttn a[href^="?pg"]::after     { content: '목록'; }
#bt-board-cancel::after         { content: '취소'; }
#bt-board-submit::after         { content: '등록'; }
#bt-board-submit {
    background: var(--primary); border-color: var(--primary);
    color: #fff; font-weight: 600;
}
#bt-board-submit:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
#bt-board-delete:hover { border-color: #C0392B; color: #C0392B; }


/* colgroup 이 100px 로 묶어놔 날짜가 두 줄로 꺾이면서 행 높이가 들쭉날쭉해진다 */
.article table { table-layout: auto; }
.article col { width: auto !important; }
.article td.num, .article th { white-space: nowrap; }
.article td.num { padding-left: 14px; padding-right: 14px; font-size: 14px; }
.article tbody td { vertical-align: middle; }
.article tbody td:first-child { width: 1%; color: #9a9a9a; font-size: 14px; }

/* 글쓰기 버튼 세로 정렬을 페이지네이션에 맞춘다 */





/* ── 글쓰기·수정 폼 ───────────────────────────── */
.board_container form table { border-top: 2px solid var(--ink); }
.board_container form th {
    padding: 13px 16px; width: 130px;
    border-bottom: 1px solid var(--hairline-soft);
    background: var(--canvas-cool);
    font-size: 15px; font-weight: 600; color: var(--ink); text-align: left;
    white-space: nowrap;
}
.board_container form td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 15px;
}
.board_container form input[type=text],
.board_container form input[type=password],
.board_container form textarea,
.board_container form select {
    height: 40px; padding: 0 12px;
    border: 1px solid var(--hairline); border-radius: var(--radiusSm);
    font-family: var(--font); font-size: 15px; color: var(--ink-2);
    background: #fff;
}
.board_container form textarea { height: auto; padding: 10px 12px; line-height: 1.7; }
.board_container form input[type=text]:focus,
.board_container form input[type=password]:focus,
.board_container form select:focus,
.board_container form textarea:focus { outline: 0; border-color: var(--primary); }
.board_container form input[name=subject] { width: 100%; }
.board_container form input[type=checkbox] { margin-right: 5px; vertical-align: -2px; }
/* 검색 폼은 위에서 따로 잡았으니 되돌린다 */
.board_container .search table { border-top: 0 !important; }
.board_container .search th,
.board_container .search td { border: 0 !important; background: none !important; padding: 0 3px !important; }


/* ============================================================
   임베드에서 감추는 항목 (2026-08-05 요청)
   원본 post.php 는 그대로 두고 여기서만 숨긴다.
   ============================================================ */

/* 조회수 열(5번째)은 2026-08-20 요청으로 표시한다 (이전 숨김 규칙 제거). */

/* 상세 — 성별·나이·치료기간 줄 */
.board_container tr.info { display: none; }

/* ── 글쓴이 열 숨김 (2026-08-19) ─────────────────
   글쓴이가 전부 '우아미한의원' 이라 열을 하나 차지할 만한 정보가 아니다.
   같은 이유로 신규 사이트의 공지사항 게시판도 제목과 날짜만 보여준다.
   파일 끝에 두는 이유: 위쪽 모바일 블록의 td.num 규칙보다 뒤에 와야 이긴다. */
.article thead th:nth-child(3),
.article tbody td:nth-child(3) { display: none; }

@media (max-width: 768px) {
    /* 글쓴이가 빠지면 등록일이 첫 항목이 되므로 앞의 가운뎃점을 지운다.
       위의 td.num + td.num::before 가 특이도로 이겨서 !important 로 눌러야 한다. */
    .article tbody td:nth-child(4)::before { content: none !important; }
}

/* HIDE-HITS-MOBILE */
@media (max-width: 768px) {
    .article table th:nth-child(5),
    .article table td:nth-child(5) { display: none; }
}