@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
* ORANGE-PMI PLATFORM Version 2.0.0 - Last modified 2026-09-30
* Modular Web Architecture · Powered by Orangecommunication · www.oranc.net
* ----------------------------------------------------------------------------------------------
* basic 게시판 스킨의 **제 모양** — 이 스킨만 쓰는 규칙 한 벌.
*
* bbs.css (skin/bbs/basic/asset) — 이 스킨의 진입 화면들이 `asset_head('skin::bbs.css')` 로 건다.
* 셸의 `` 가 공통 여섯 장 **뒤**에 낸다 → global-template "그 화면에만 필요한 CSS".
* `asset_head()` 는 URL 을 키로 접으므로 여러 화면이 불러도 `` 는 한 줄이다.
*
* ── 왜 이 파일이 있나 (사용자 결정 2026-09-30) ──────────────────────────────
* 게시판 모양 하나 고치자고 **사이트 여섯 장을 건드릴 수는 없다.** 여섯 장은 70여 화면이 같이 읽는다
* (실제로 `l-actions` 는 54곳이 써서 못 고치고 변형을 따로 만들어야 했다).
* 게시판은 **스킨마다 모양이 달라질 수 있는 것**이라, 그 규칙은 스킨이 들고 있는 편이 맞다.
*
* ── 접두 — 이름만 보고 주인을 안다 ─────────────────────────────────────────
* `sk-` 이 스킨의 컴포넌트 (sk-doc__* · sk-tabs · sk-search)
* `sk-` 이 스킨의 유틸리티 (sk-actions-flush · sk-schd)
* `c-` `l-` `u-` `is-` 는 **사이트 것**이다 — 여기서 새로 만들지 않는다.
*
* ── 담지 않는 것 ───────────────────────────────────────────────────────────
* ✗ 사이트 전체가 쓰는 것 c-btn(74곳) · c-table(64곳) · c-modal · c-input · l-actions(54곳) · u-*
* ✗ **공용 함수가 마크업을 내는 것** c-attach*·c-ico(attach_links) · c-paging(paging_nav)
* — 그 함수는 자기가 어느 스킨에서 불렸는지 모른다. 스킨마다 다른 class 를 내게 하면 공용인 뜻을 잃는다.
* 즉 **스킨이 제 손으로 쓴 마크업**만 여기 온다. 그 선이 이 파일의 경계다.
*
* ⛔ **색·크기를 숫자로 박지 않는다** — 토큰(`var(--…)`)만 읽는다. 박으면 이 스킨이 어느 사이트에서
* 열리든 같은 모양이 되어, 사이트가 제 색을 못 낸다 (gallery/asset/style.css 와 같은 규칙).
*
* ※ 2026-09-30 현재 `c-doc__*` 와 `c-tabs` 는 **사이트 ui.css 에도 남아 있다** — basic_multi·gallery·
* download02 가 아직 그 이름을 쓰기 때문이다. 셋을 다 옮기면 그때 사이트 쪽에서 지운다.
* ---------------------------------------------------------------------------------------------- */
/* 머리 — 제목과 메타를 한 덩어리로 감싼다. 위는 굵게, 아래는 가늘게 그어 글의 시작을 만든다. */
.sk-doc__head {text-align:center; padding:25px 0; border-top:2px solid var(--color-ink); border-bottom:1px solid var(--border-color-cell);}
.sk-doc__title {font-size:1.5em; line-height:140%; font-weight:bold; letter-spacing:-1px;}
/* 메타 한 줄 — 작성자 · 날짜 · 조회. 각 조각을 으로 두면 **사이 구분선을 CSS 가 낸다**
(마크업에 `|` 를 적지 않는다 — 조각이 늘거나 줄어도 선이 저절로 맞는다).
마지막 조각의 선은 지운다 — 안 지우면 줄 끝에 선이 하나 남는다. */
.sk-doc__meta {padding:15px 0 0 0; font-size:0.9em; color:var(--color-mute);}
.sk-doc__meta span {position:relative; padding-right:23px;}
.sk-doc__meta span::after {content:''; position:absolute; top:0; right:12px; bottom:0; width:1px; height:1em; margin:auto; background:var(--border-color);}
.sk-doc__meta span:last-child {padding-right:0;}
.sk-doc__meta span:last-child::after {display:none;}
/* 본문 — 글이 짧아도 읽는 자리가 있도록 최소 높이를 준다.
★ 안의 이미지는 **칸을 넘지 않는다** — 에디터로 넣은 큰 사진이 그대로 들어와 레이아웃을 밀어내는
일이 흔하다. 높이는 비율대로 따라간다. */
.sk-doc__body {overflow:hidden; padding:40px 0; min-height:300px; border-bottom:1px solid var(--color-ink);}
/* ★ 좌우 여백은 **글 안의 어느 블록도 제 몫으로 갖지 않는다** (2026-09-30 사용자 지시
"게시글 안쪽의 모든 컨텐츠는 동일한 틀에 쌓여야 넓이가 다 같아진다").
전에는 머리와 본문만 좌우 10px 을 갖고 있어 **제목·본문 921 / 이전다음·버튼 941** 로 20px 어긋나 있었다.
바깥 틀(`c-panel`)이 자리를 정하고, 안쪽은 전부 그 폭을 그대로 쓴다. 상자 꼴인 것(첨부 `c-attach`,
이전다음 `sk-pnav__inner`)의 안쪽 여백은 **그 상자 것**이라 별개다 — 바깥 선이 941 로 같으면 맞는 것이다. */
.sk-doc__body img {max-width:100%; height:auto;}
/* ★ 에디터가 박아 둔 **고정 px 폭은 무시한다** (2026-09-30 사용자 지시 "원본이 큰 것은 이 안에서 100%").
서머노트는 손잡이로 크기를 잡으면 `style="width:1078.67px"` 처럼 **그때의 에디터 폭**을 글에 박는다.
본문 칸은 화면마다 넓이가 다르므로 그 수는 여기서 늘 틀리다 — 칸이 넓으면 오른쪽이 남고, 좁으면 어차피
위 `max-width` 가 줄인다. 그래서 px 로 적힌 폭만 `auto` 로 되돌리고 **원본 크기**를 기준으로 삼는다:
원본이 칸보다 크면 → `max-width:100%` 가 칸에 꽉 맞춘다
원본이 칸보다 작으면 → 원본 크기 그대로 (작은 그림을 늘려 뭉개지 않는다)
✗ `%` 로 적힌 폭은 **건드리지 않는다** — 그건 글쓴이가 '이만큼만' 이라고 **비율로** 정한 뜻이라 화면이 바뀌어도 맞다.
⚠ 인라인 style 을 이기려면 `!important` 말고는 없다 — 이 한 줄이 이 파일에서 그것을 쓰는 유일한 자리다. */
.sk-doc__body img[style*="px"] {width:auto !important;}
/* 본문 위 유튜브 — 칸 폭을 다 쓰되 **비율은 지킨다**(16:9).
마크업의 width=560 height=315 는 남겨 둔다 — `aspect-ratio` 를 모르는 브라우저에서 그 둘이 비율을 알려
`height:auto` 가 같은 결과를 낸다. 즉 규칙 한 줄이 두 겹으로 선다. */
.sk-doc__video {display:block; width:100%; height:auto; aspect-ratio:16 / 9; border:0;}
/* 이전글 / 다음글 — **좌우 두 칸**이 맞붙은 한 덩어리다(레거시 `.pn_wrap`). 표가 아니다.
★ 어느 쪽인지는 **차례로** 정한다(`:first-child`·`:last-child`) — 마크업에 prev·next class 를 두지 않는다.
이전글이 첫째, 다음글이 둘째라는 것은 이 컴포넌트의 약속이다.
★ 동그라미와 화살표는 **CSS 도형**이다 — 이미지 파일을 쓰지 않는다(레거시도 그랬다).
※ 글이 없는 쪽은 가 아니라