@charset "utf-8";
/**
 * 게시판 서식 본문 (에디터 + 상세 렌더)
 *
 * - 붙여넣기한 원본 사이트의 CSS 는 클립보드에 실려오지 않는다. 최종 모양은 전적으로 이 파일이 결정한다.
 *   (아지트/노션이 붙여넣기 결과가 예뻐 보이는 이유도 "보존" 이 아니라 "받는 쪽 스타일" 이다)
 * - 앱은 라이트 전용이므로 다크 토큰을 두지 않는다.
 * - 좌우 여백은 부모 컨테이너(.join-club__input / .community-detail__con)가 이미 16px 을 만든다.
 *   여기서 좌우 패딩을 다시 주면 이중 여백이 되므로 넣지 않는다.
 */

/* ================================================================
 *  1. 글쓰기 에디터
 * ================================================================ */

.board-editor {
    border: 1px solid #E0E2E6;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

/* 실제 전송용 textarea 는 화면에서 숨긴다(기존 제출/검증 로직이 참조하므로 DOM 에는 유지) */
.board-editor__source {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* 실제 입력창. 서식 툴바는 두지 않으며 서식은 붙여넣기로만 들어온다. */
.board-editor__area {
    min-height: 160px;
    max-height: 60vh;
    padding: 10px 16px;
    overflow-y: auto;
    outline: 0;
    white-space: pre-wrap;
}

.board-editor__area--tall {
    min-height: 40vh;
}

.board-editor__area.is-empty:before {
    content: attr(data-placeholder);
    color: #9aa0ab;
    pointer-events: none;
}

/* ================================================================
 *  2. 상세 본문 렌더 (.board-content)
 * ================================================================ */

/* 서식 글은 마크업이 줄바꿈을 담당하므로 전역 pre-wrap 상속을 되돌린다.
   (klubo.css 의 .community-detail__con .community-detail__text{white-space:pre-wrap}) */
.community-detail__con .community-detail__text--html {
    white-space: normal;
}

.board-content,
.board-editor__area {
    line-height: 24px;
    color: #222;
    overflow-wrap: anywhere;
}

.board-content p,
.board-editor__area p {
    margin: 0 0 8px;
}

.board-content p:last-child,
.board-editor__area p:last-child {
    margin-bottom: 0;
}

.board-content h1,
.board-editor__area h1,
.board-content h2,
.board-editor__area h2,
.board-content h3,
.board-editor__area h3 {
    margin: 16px 0 8px;
    font-weight: 700;
    line-height: 1.4;
}

.board-content h1,
.board-editor__area h1 { font-size: 20px; }
.board-content h2,
.board-editor__area h2 { font-size: 18px; }
.board-content h3,
.board-editor__area h3 { font-size: 16px; }

.board-content h1:first-child,
.board-editor__area h1:first-child,
.board-content h2:first-child,
.board-editor__area h2:first-child,
.board-content h3:first-child,
.board-editor__area h3:first-child {
    margin-top: 0;
}

.board-content strong,
.board-editor__area strong { font-weight: 700; }

/* 붙여넣은 원본의 font-size 를 4단계로 정규화해 받는다(boardEditor.js / BoardHtmlSanitizer.php).
   원본 px 을 그대로 쓰지 않는 이유는, 외부 사이트의 제각각인 크기가 그대로 들어오면
   모바일 360px 에서 줄바꿈·오버플로가 깨지고 앱 디자인 톤도 무너지기 때문이다.
   기본(16px)에 해당하는 단계는 클래스를 붙이지 않으므로 여기 없다. */
.board-content .fs-sm,
.board-editor__area .fs-sm { font-size: 14px; }
.board-content .fs-lg,
.board-editor__area .fs-lg { font-size: 18px; line-height: 26px; }
.board-content .fs-xl,
.board-editor__area .fs-xl { font-size: 20px; line-height: 28px; }

/* 문단 정렬 — 기본(왼쪽/양쪽)은 클래스를 붙이지 않으므로 여기 없다. */
.board-content .ta-center,
.board-editor__area .ta-center { text-align: center; }
.board-content .ta-right,
.board-editor__area .ta-right { text-align: right; }

/* ----------------------------------------------------------------
 *  표 (Confluence/Jira 문서 붙여넣기)
 *
 *  넓은 표는 페이지 body 를 가로로 밀지 않고 이 래퍼 안에서만 스크롤한다.
 *  js-scroll-hint 는 www/js/common/scrollHint.js 가 잡아 우측 페이드+화살표를 붙인다.
 * ---------------------------------------------------------------- */

.board-content .board-table,
.board-editor__area .board-table {
    margin: 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.board-content table,
.board-editor__area table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
}

/* 셀에 최소폭을 줘서 컬럼이 많으면 눌리지 않고 가로 스크롤이 생기게 한다.
   (모바일 360px 에서 5컬럼 표가 뭉개져 못 읽는 것보다 스크롤이 낫다) */
.board-content th,
.board-editor__area th,
.board-content td,
.board-editor__area td {
    min-width: 88px;
    padding: 8px;
    border: 1px solid #E0E2E6;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

.board-content th,
.board-editor__area th {
    background: #F7F8FA;
    font-weight: 700;
    white-space: nowrap;
}

.board-content table p,
.board-editor__area table p { margin: 0; }

.board-content em,
.board-editor__area em { font-style: italic; }
.board-content u,
.board-editor__area u { text-decoration: underline; }
.board-content s,
.board-editor__area s { text-decoration: line-through; }

.board-content a,
.board-editor__area a {
    color: #4c7cf3;
    text-decoration: underline;
}

/* 인용 — 좌측 라인 대신 은은한 배경 박스(앱 하이라이트 색과 동일 계열) */
.board-content blockquote,
.board-editor__area blockquote {
    margin: 8px 0;
    padding: 16px;
    border: 1px solid #dbe7fb;
    border-radius: 6px;
    background: #f0f6ff;
    color: #222;
}

.board-content blockquote > :last-child,
.board-editor__area blockquote > :last-child {
    margin-bottom: 0;
}

/* 전역 리셋으로 list-style 이 죽어 있어 본문에서만 되살린다 */
.board-content ul,
.board-editor__area ul,
.board-content ol,
.board-editor__area ol {
    margin: 8px 0;
    padding-left: 24px;
}

.board-content ul,
.board-editor__area ul { list-style: disc outside; }
.board-content ol,
.board-editor__area ol { list-style: decimal outside; }
.board-content li,
.board-editor__area li { margin: 0 0 4px; list-style: inherit; }

/* 코드 — 모바일에서 가로 스크롤이 생기지 않도록 줄바꿈시킨다 */
.board-content pre,
.board-editor__area pre,
.board-content code,
.board-editor__area code {
    font-family: "D2Coding", "Consolas", "Menlo", "Monaco", "Courier New", "Pretendard", "Noto Sans KR", monospace;
    font-size: 13px;
}

.board-content pre,
.board-editor__area pre {
    margin: 8px 0;
    padding: 16px;
    border: 1px solid #E0E2E6;
    border-radius: 6px;
    background: #f8f8f8;
    line-height: 20px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.board-content code,
.board-editor__area code {
    padding: 2px 4px;
    border-radius: 3px;
    background: #f1f1f4;
    color: #d6336c;
}

.board-content pre code,
.board-editor__area pre code {
    padding: 0;
    background: transparent;
    color: #222;
}

.board-content hr,
.board-editor__area hr {
    height: 1px;
    margin: 16px 0;
    border: 0;
    background: #E0E2E6;
}

/* 본문 인라인 이미지 — 전역(.community-detail__con img{width:100%})이 강제 확대하지 않도록 되돌린다 */
.community-detail__con .board-content img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 8px 0;
    vertical-align: middle;
}

.board-content br + br,
.board-editor__area br + br {
    line-height: 8px;
}

/* 에디터 안에 붙여넣어진 이미지도 폭을 넘지 않게 한다 */
.board-editor__area img {
    max-width: 100%;
    height: auto;
}

/* ================================================================
 *  3. 목록/피드 카드의 서식 본문 (.board-content--feed)
 * ================================================================ */

/* 줄 단위 -webkit-line-clamp 는 블록 자식(h1/blockquote/pre 등)이 들어오면 계산이 어긋난다.
   서식 글 카드만 "높이 기준" 클램프로 바꾼다. 5줄 × 22px = 110px 로 기존 체감 높이를 맞춘다.
   boardEvent.js 의 initViewBoardMore 는 scrollHeight > clientHeight 로 판단하므로 그대로 동작한다. */
.community-gallery--view .view-card .gallery-con.gallery-con--html {
    display: block;
    max-height: 110px;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
}

.community-gallery--view .view-card .gallery-con.gallery-con--html.gallery-con--full {
    max-height: none;
    overflow: visible;
}

/* 잘린 카드에만 하단 페이드 — 인용·코드 상자가 중간에서 뚝 끊긴 것처럼 보이지 않게 한다.
   (클래스는 boardEvent.js 의 initViewBoardMore 가 잘림을 판정해 부여) */
.community-gallery--view .view-card .gallery-con--html.gallery-con--truncated {
    position: relative;
}

.community-gallery--view .view-card .gallery-con--html.gallery-con--truncated:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    pointer-events: none;
}

/* 사진첩(갤러리)형 목록의 3줄 클램프도 동일하게 높이 기준으로 바꾼다. 3줄 × 24px = 72px */
.community-gallery__wrap .gallery-con.text-hide--3.gallery-con--html {
    display: block;
    max-height: 72px;
    -webkit-line-clamp: none;
}

/* 카드 안에서는 서식을 한 단계 작게 — 헤딩·인용·코드가 카드 높이를 헤집지 않게 한다 */
.board-content--feed { line-height: 22px; }
.board-content--feed p { margin: 0 0 4px; }

.board-content--feed h1,
.board-content--feed h2,
.board-content--feed h3 {
    margin: 4px 0;
    font-size: 15px;
    line-height: 1.4;
}

/* 카드에서는 큰 글씨 단계를 본문 크기까지 낮춘다(카드 높이·클램프 계산이 어긋나지 않게) */
.board-content--feed .fs-lg,
.board-content--feed .fs-xl {
    font-size: 15px;
    line-height: 22px;
}

/* 카드 안의 표는 미리보기일 뿐이라 스크롤시키지 않는다(카드째로 가로 스크롤되면 목록이 망가진다) */
.board-content--feed .board-table {
    margin: 4px 0;
    overflow: hidden;
}

.board-content--feed table {
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
    table-layout: fixed;
}

.board-content--feed th,
.board-content--feed td {
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-content--feed blockquote {
    margin: 4px 0;
    padding: 8px 12px;
}

.board-content--feed pre {
    margin: 4px 0;
    padding: 8px 12px;
    line-height: 18px;
}

.board-content--feed ul,
.board-content--feed ol {
    margin: 4px 0;
    padding-left: 20px;
}

.board-content--feed li { margin: 0; }
.board-content--feed hr { margin: 8px 0; }

.board-content--feed img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 120px;
    margin: 4px 0;
}

/* 상세 래퍼가 .community-detail__con 이 아닌 스킨(accordion 의 .con 등)에서도
   본문 이미지가 컨테이너를 넘지 않게 한다. */
.board-content img {
    max-width: 100%;
    height: auto;
}

/* 중간 높이 입력창 (일정/투표 내용 등 — 기존 textarea height:210px 대체) */
.board-editor__area--md {
    min-height: 210px;
}

/* 큰 입력창 (투표 내용 등 — 기존 .club-introduction__box height:260px 대체) */
.board-editor__area--lg {
    min-height: 260px;
}

/* ================================================================
 *  5. 붙여넣은 체크박스 (표시 전용)
 *
 *  외부 문서(아지트 등)를 붙여넣으면 <input type="checkbox" checked> 가 함께 온다.
 *  체크 상태가 곧 정보이므로 지우지 않고 보존하되, 저장 시 sanitizer 가 disabled 를
 *  강제하므로 누를 수는 없다. disabled 기본 렌더는 흐릿해서 원문보다 약해 보이므로
 *  appearance:none 으로 우리가 직접 그린다.
 * ================================================================ */

.board-content input[type="checkbox"],
.board-editor__area input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0 4px 0 0;
    padding: 0;
    border: 1px solid #b9bfcc;
    border-radius: 3px;
    background: #fff;
    vertical-align: -3px;
    opacity: 1;
    cursor: default;
}

.board-content input[type="checkbox"]:checked,
.board-editor__area input[type="checkbox"]:checked {
    border-color: #4c7cf3;
    background: #4c7cf3;
}

/* 체크 표시 — 배경 이미지 대신 회전한 사각형 테두리로 그린다(추가 파일 없음) */
.board-content input[type="checkbox"]:checked:after,
.board-editor__area input[type="checkbox"]:checked:after {
    content: "";
    display: block;
    width: 4px;
    height: 8px;
    margin: 1px 0 0 5px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}