/* ==========================================================================
G5Pro 코어 — 베이스 + 레이아웃 + 컴포넌트
shadcn/ui 의 시각 스펙을 손으로 옮긴 순수 CSS. 빌드 스텝 없음.
스코프 격리 규칙
- 엘리먼트 셀렉터는 반드시 .pro-body 하위에서만 쓴다.
순정 css/default.css 가 table/input/a 같은 전역 셀렉터를 쓰기 때문에,
한쪽이 다른 쪽을 덮어쓰는 사고를 구조적으로 막는다.
- 컴포넌트 클래스는 전부 .pro- 접두사. 어디에 놓여도 안전하다.
========================================================================== */
/* ---------- 베이스 ---------- */
/* 머리말이 sticky 라, #앵커 로 이동하면 목표가 그 아래에 깔려 안 보인다.
:target 은 주소의 조각(#tokens)이 가리키는 그 요소에만 맞으므로, 앵커로 온
경우에만 머리말 높이만큼 위를 비워 둔다. 평소 여백에는 영향이 없다. */
.pro-body :target {
scroll-margin-top: calc(var(--pro-header-h) + var(--pro-sp-4));
}
.pro-body {
margin: 0;
background: hsl(var(--pro-background));
color: hsl(var(--pro-foreground));
font-family: var(--pro-font-sans);
font-size: var(--pro-text-sm);
line-height: var(--pro-leading-normal);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.pro-body *,
.pro-body *::before,
.pro-body *::after { box-sizing: border-box; }
.pro-body h1, .pro-body h2, .pro-body h3,
.pro-body h4, .pro-body h5, .pro-body h6 {
margin: 0;
font-weight: 600;
line-height: var(--pro-leading-tight);
letter-spacing: -0.01em;
}
.pro-body h1 { font-size: var(--pro-text-2xl); }
.pro-body h2 { font-size: var(--pro-text-xl); }
.pro-body h3 { font-size: var(--pro-text-lg); }
.pro-body p, .pro-body ul, .pro-body ol, .pro-body dl, .pro-body figure { margin: 0; }
.pro-body ul, .pro-body ol { padding-left: 1.25rem; }
/* :where() 로 감싸 특정도를 0 으로 만든다. 그러지 않으면 이 규칙(0,1,1)이
.pro-btn 같은 단일 클래스 규칙(0,1,0)을 이겨 의 글자색을
덮어쓴다 — 어두운 버튼에 어두운 글자가 나오는 원인이었다. */
.pro-body :where(a) {
color: inherit;
text-decoration: none;
transition: color var(--pro-transition);
}
.pro-body :where(a):hover { color: hsl(var(--pro-foreground)); }
.pro-body img, .pro-body svg, .pro-body video { max-width: 100%; height: auto; vertical-align: middle; }
.pro-body hr {
border: 0;
border-top: 1px solid hsl(var(--pro-border));
margin: var(--pro-sp-6) 0;
}
.pro-body code, .pro-body kbd, .pro-body pre, .pro-body samp { font-family: var(--pro-font-mono); }
.pro-body code {
font-size: 0.85em;
background: hsl(var(--pro-muted));
padding: 0.125em 0.375em;
border-radius: var(--pro-radius-sm);
}
.pro-body pre {
background: hsl(var(--pro-muted));
color: hsl(var(--pro-foreground));
padding: var(--pro-sp-4);
border-radius: var(--pro-radius-md);
overflow-x: auto;
margin: 0;
}
.pro-body pre code { background: none; padding: 0; }
/* 키보드 포커스만 링을 그린다. 마우스 클릭에는 안 그린다. */
.pro-body :focus-visible {
outline: 2px solid hsl(var(--pro-ring));
outline-offset: 2px;
}
/* 스크린리더 전용
.sound_only 는 순정 규약이다. get_paging()·get_sideview()·captcha_html() 같은
lib 함수가 스킨을 거치지 않고 이 클래스를 직접 뱉으므로, 순정 CSS 를 안 싣는
pro 테마에서는 여기서 같은 뜻을 정의해 줘야 그 텍스트가 화면에 노출되지 않는다. */
.pro-sr,
.sound_only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ---------- 자동등록방지 (순정 규약) ----------
plugin/kcaptcha/kcaptcha.lib.php:242 captcha_html() 이 스킨을 거치지 않고 아래 구조를
그대로 뱉는다. 마크업을 못 바꾸므로 CSS 로만 고친다.
순정 CSS 를 안 싣는 pro 테마에서는 이 정의가 없으면 브라우저 기본