/* ═══════════════════════════════════════════════════════════════════════════ 꾸러기 게시판 99 — 1999 원본 외관 재현 원본 MakeTable.asp:56-64 의 인라인 스타일 + 각 .asp 의 테이블 속성을 CSS 로 옮긴 것입니다. 값을 바꾸면 원본과 달라집니다. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* 게시판별 설정(boards.list_menu_bg 등)이 인라인 style 로 덮어씁니다 */ --list-menu-bg: teal; --read-menu-bg: teal; --read-title-bg: gold; --board-width: 90%; } /* 원본: */ body { background-color: #ffffff; color: #000000; font-family: '굴림', Gulim, Dotum, '돋움', sans-serif; font-size: 10pt; margin: 0; padding: 8px; text-align: center; /* 원본 */ } a:link, a:visited { color: navy; text-decoration: none; } a:active { color: red; } a:hover { text-decoration: underline; color: red; } td, th { font-family: '굴림', Gulim, Dotum, '돋움', sans-serif; font-size: 10pt; text-decoration: none; } .text9 { font-family: '굴림', Gulim, Dotum, '돋움', sans-serif; font-size: 9pt; } img { border: 0; } /* ── 레이아웃 ────────────────────────────────────────────────────────────── */ .gg-wrap { display: inline-block; text-align: center; max-width: 100%; } .gg-banner { margin-bottom: 24px; } .gg-footer { margin-top: 16px; font-size: 1pt; } /* ── 목록 테이블 (list.asp) ──────────────────────────────────────────────── */ /* 원본: */ .gg-list { width: var(--board-width); border: 0; border-collapse: collapse; margin: 0 auto; } .gg-list th, .gg-list td { padding: 2px; } /* 원본: + */ .gg-list thead tr { background-color: var(--list-menu-bg); } .gg-list thead th { color: #ffffff; text-align: center; white-space: nowrap; } /* 원본: */ .gg-list tbody tr { background-color: #f0f0f0; } .gg-list .col-no, .gg-list .col-name, .gg-list .col-date, .gg-list .col-hit { text-align: center; white-space: nowrap; } .gg-list .col-title { text-align: left; } .gg-empty { text-align: center; padding: 12px; } /* 검색 결과표 — 원본 search.asp:110 은 border="1" 에 칸 배경이 흰색이었습니다 */ .gg-list-bordered, .gg-list-bordered th, .gg-list-bordered td { border: 1px solid #808080; } .gg-list-bordered tbody tr { background-color: #ffffff; } /* 답변글 들여쓰기 — 원본은 4개를 re_level 만큼 반복 */ .gg-indent { display: inline-block; } /* ── 상단 정보줄 (현재 N쪽 | 총 N쪽 | 전체 N개) ─────────────────────────── */ .gg-infobar { width: var(--board-width); margin: 0 auto 4px; border: 0; } .gg-infobar td { text-align: right; vertical-align: bottom; } /* 게시판 이동 셀렉트를 정보줄과 같은 줄에 둡니다 */ .gg-inline { display: inline; margin: 0; } /* ── 페이지네이션 (list.asp:225-251) ─────────────────────────────────────── */ .gg-paging { font-size: smaller; margin: 8px 0; } .gg-paging .current { font-weight: bold; color: red; } /* ── 아이콘 버튼 바 ──────────────────────────────────────────────────────── */ .gg-iconbar { width: var(--board-width); margin: 8px auto 0; border: 0; } .gg-iconbar img { width: 42px; height: 38px; vertical-align: middle; } .gg-iconbar .left { text-align: left; white-space: nowrap; } .gg-iconbar .center { text-align: center; /* [제목▾] [입력칸] [검색] 이 한 줄에 남게 합니다. 이게 없으면 폭이 모자랄 때 select 가 먼저 떨어져 나가 두 줄이 됩니다. nowrap 은 이 칸의 최소 너비를 끌어올리므로 표 배치가 여기에 그만큼을 반드시 내줍니다. */ white-space: nowrap; /* 남는 가로 폭을 이 칸이 가져갑니다. 좌·우 칸은 nowrap 이라 아이콘만큼만 쓰고, 나머지가 전부 검색폼 몫이 됩니다. */ width: 100%; } /* 입력칸이 남는 폭을 다 먹어 아이콘을 밀어내지 않도록 상한을 둡니다. 원본 size=20 은 그대로 두고(폰트가 바뀌면 실제 폭이 달라지므로) 여기서 묶습니다. */ .gg-iconbar .center input[type='text'] { max-width: 200px; } /* 폰에서는 한 줄을 고집하면 아이콘까지 밀려 가로 스크롤이 생깁니다. 그 폭에서는 두 줄이 되는 편이 낫습니다. */ @media (max-width: 640px) { .gg-iconbar .center { white-space: normal; } } .gg-iconbar .right { text-align: right; white-space: nowrap; } /* 글이 없을 때·검색 결과 위아래의 가운데 정렬 버튼 줄 */ .gg-center-bar { text-align: center; margin: 8px 0; } .gg-center-bar img { width: 42px; height: 38px; vertical-align: middle; } /* 검색 결과 안내문 — 원본 search.asp:91-95 / searchfail.asp:37 */ .gg-search-summary { text-align: center; font-size: 11pt; } .gg-search-summary .keyword { color: darkred; } /* ── 글 읽기 (read.asp) ──────────────────────────────────────────────────── */ .gg-rule { width: var(--board-width); border: 0; border-top: 1px solid #808080; margin: 8px auto; } .gg-meta { width: var(--board-width); margin: 0 auto; border: 0; } .gg-meta .left { text-align: left; } .gg-meta .right { text-align: right; } .gg-article { width: var(--board-width); margin: 0 auto; border: 0; border-collapse: separate; border-spacing: 2px; } .gg-article .subject { background-color: var(--read-title-bg); text-align: center; font-weight: bold; font-size: 12pt; color: var(--read-menu-bg); padding: 2px; } .gg-article .body { background-color: #f0f0f0; vertical-align: top; height: 200px; padding: 2px; text-align: left; word-break: break-all; } /* 이전글/다음글 줄 — 원본 read.asp:95 의

*/ .gg-article .nav { text-align: left; white-space: nowrap; } .gg-article .right { text-align: right; vertical-align: bottom; } /* * 원본 read.asp:141 은 를 썼지만 정작 그 클래스는 * 어디에도 정의돼 있지 않아 td 기본 스타일(굴림 10pt)로 나왔습니다. * 그 결과를 그대로 재현합니다. */ .gg-copyright { font-size: 10pt; } /* ── 폼 (write.asp / preup.asp / preans.asp) ─────────────────────────────── */ .gg-form { margin: 0 auto; border: 0; border-collapse: separate; border-spacing: 0; } .gg-form th { text-align: right; padding: 3px; white-space: nowrap; } .gg-form td { text-align: left; padding: 3px; } /* 내용 칸의 라벨은 textarea 위쪽에 붙습니다 (원본 preup.asp:85 valign=top) */ .gg-form th.top { vertical-align: top; } /* 폼 컨트롤도 굴림으로 — 원본은 브라우저 기본 폰트였지만 지금은 어색합니다 */ .gg-form input, .gg-form textarea, .gg-panel input { font-family: '굴림', Gulim, Dotum, '돋움', sans-serif; font-size: 10pt; } .gg-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; } /* ── 확인/에러 패널 (preadmin.asp / predel.asp / Err.asp) ────────────────── */ /* 원본: */ .gg-panel { border: 1px solid #808080; border-collapse: collapse; background-color: #c0c0c0; width: 240px; margin: 0 auto; } .gg-panel td { border: 1px solid #808080; padding: 4px; } .gg-panel .head { background-color: #000099; color: #ffffff; font-weight: bold; } .gg-panel .inner, .gg-panel .inner td { border: 0; background-color: transparent; } /* ── 관리 콘솔 (AdminCenter.asp) ─────────────────────────────────────────── */ .gg-admin { border: 1px solid #808080; border-collapse: collapse; background-color: #c0c0c0; margin: 0 auto; } .gg-admin th, .gg-admin td { border: 1px solid #808080; padding: 4px; text-align: center; } .gg-admin th { background-color: navy; color: #ffffff; } /* 표 안의 폼(해임·정지 버튼)이 줄을 차지하지 않게 */ .gg-admin form { display: inline; margin: 0; } .gg-admin input, .gg-admin select { font-family: '굴림', Gulim, Dotum, '돋움', sans-serif; font-size: 9pt; } /* 삭제된 게시판 · 정지된 계정 줄 */ .gg-admin .gg-row-deleted td { color: #808080; background-color: #e0e0e0; } .gg-admin-title { font-size: 12pt; font-weight: bold; margin: 16px 0 8px; } .gg-admin-links { margin: 8px 0; } .gg-notice { color: #006600; font-size: 9pt; margin: 4px 0; } /* ── 감사로그 · IP 차단 (Phase 5) ────────────────────────────────────────── */ /* 원본에 대응 화면이 없어 새로 만든 표입니다. 나머지 관리 화면과 같은 회색 톤 */ .nowrap { white-space: nowrap; } .gg-audit { /* 상세 칸이 길어 900px 보드 폭을 넘으므로 표만 따로 넓힙니다 */ width: 96%; table-layout: fixed; } .gg-audit td { /* 긴 URL·제목이 표를 밀어내지 않도록 */ overflow-wrap: anywhere; text-align: left; } .gg-audit-detail { color: #333333; } /* ── 게시판 설정 폼 (ch_conf.asp / admincheck.asp:71) ────────────────────── */ /* 원본:

*/ .gg-conf { border: 0; border-collapse: separate; border-spacing: 2px; background-color: #f0f0f0; margin: 0 auto; text-align: left; } .gg-conf th, .gg-conf td { padding: 2px; } /* 원본:

— 라벨 칸 */ .gg-conf th { background-color: #c0c0c0; text-align: center; font-weight: normal; white-space: nowrap; } .gg-conf th.top { vertical-align: top; } .gg-conf input, .gg-conf select, .gg-conf textarea { font-family: '굴림', Gulim, Dotum, '돋움', sans-serif; font-size: 10pt; } .gg-conf textarea { max-width: 100%; } .gg-conf label { white-space: nowrap; } /* 원본 admincheck.asp:220-222 — 왼쪽 [변경], 오른쪽 목록 아이콘 */ .gg-conf-foot { vertical-align: top; } .gg-conf-back { float: right; } .gg-conf-back img { width: 42px; height: 38px; } /* ── 커스텀 모달 (원본 alert/confirm 대체) ───────────────────────────────── */ .gg-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; } .gg-modal-overlay[hidden] { display: none; } .gg-modal { background: #c0c0c0; border: 2px outset #ffffff; min-width: 260px; max-width: 90vw; text-align: left; } .gg-modal-title { background: #000099; color: #ffffff; font-weight: bold; padding: 4px 6px; display: flex; justify-content: space-between; align-items: center; } .gg-modal-close { background: none; border: 0; color: #ffffff; cursor: pointer; font-size: 12pt; line-height: 1; padding: 0 2px; } .gg-modal-body { padding: 12px; display: flex; gap: 8px; align-items: center; } .gg-modal-actions { padding: 0 12px 12px; text-align: center; } .gg-modal-actions button { font-family: '굴림', Gulim, Dotum, '돋움', sans-serif; font-size: 10pt; padding: 2px 10px; } .gg-modal-body img { flex: none; } body.gg-modal-open { overflow: hidden; /* 팝업 중 배경 스크롤 잠금 */ } /* ── 에러/안내 메시지 ────────────────────────────────────────────────────── */ .gg-error { color: #cc0000; font-size: 9pt; margin: 4px 0; } /* ── 로그인 상태 줄 (Phase 3) ────────────────────────────────────────────── */ /* 원본에 없던 요소라 눈에 띄지 않게 우상단 9pt 로 둡니다 */ .gg-userbar { width: var(--board-width); margin: 0 auto 4px; text-align: right; color: #666666; } .gg-userbar form { display: inline; margin: 0; } /* 로그아웃은 POST 여야 하므로 버튼이지만 링크처럼 보이게 합니다 */ .gg-linkbutton { background: none; border: 0; padding: 0; margin: 0; color: navy; cursor: pointer; font-family: '굴림', Gulim, Dotum, '돋움', sans-serif; font-size: 9pt; } .gg-linkbutton:hover { color: red; text-decoration: underline; } /* 로그인·가입 패널은 기본 gg-panel(240px)보다 넓어야 합니다 */ .gg-panel-wide { width: 380px; max-width: 92vw; } .gg-panel-wide .head { text-align: left; } .gg-panel-wide .gg-form { width: 100%; } .gg-panel-wide .gg-form input { max-width: 100%; } /* ── 랜딩 (/) ────────────────────────────────────────────────────────────── */ /* 원본에 대응 화면이 없어 새로 만든 자리. 새 장식을 들이지 않고 나머지 화면과 같은 굴림·회색 톤만 씁니다. */ .gg-story { /* 나머지 화면은 1999년 관례대로 가운데 정렬이지만(`gg-wrap`), 이 길이의 글을 가운데 정렬하면 읽을 수가 없습니다. */ max-width: 540px; /* 게시판 표 아래에 오므로 위쪽을 넉넉히 띄웁니다 */ margin: 40px auto 0; text-align: left; line-height: 1.9; } .gg-story p { margin: 0 0 14px; } .gg-story h1 { font-size: 14pt; font-weight: bold; margin: 0 0 18px; text-align: center; } /* ■ 는 1999년 한국 웹의 소제목 관례입니다 */ .gg-story h2 { font-size: 11pt; font-weight: bold; color: #000099; margin: 24px 0 8px; } .gg-story h2::before { content: '■ '; } .gg-story .closing { margin-top: 14px; } .gg-story .closing .text9 { color: #666666; } .gg-story .sign { text-align: right; color: #666666; } /* 이 화면의 구분선은 글 폭에 맞춥니다 (기본은 --board-width) */ .gg-story .gg-rule { width: 100%; margin: 22px 0 14px; } /* 랜딩 하단 기술 스택 — 회고 다음, 관리자 링크 앞 */ .gg-stack { margin: 32px auto 0; } .gg-stack h2 { font-size: 11pt; font-weight: bold; color: #000099; margin: 0 0 10px; } .gg-stack h2::before { content: '■ '; } /* 이 표만 가운데 정렬을 풀어 왼쪽으로 읽힙니다. 항목명과 값이 섞이면 어느 쪽이 그때고 어느 쪽이 지금인지 눈으로 못 따라갑니다. */ .gg-stack .gg-admin td { text-align: left; } /* 항목명 열 — 값과 구분되게 눌러 둡니다 */ .gg-stack .gg-admin td.k { background-color: #d4d0c8; font-weight: bold; white-space: nowrap; } .gg-stack .note { max-width: 540px; margin: 12px auto 0; text-align: left; color: #666666; line-height: 1.7; } .gg-home-admin { margin-top: 24px; } /* 발급된 임시 비밀번호 — 받아 적는 값이라 등폭으로 크게 보여 줍니다 */ .gg-issued { font-family: 'Courier New', Courier, monospace; font-size: 14pt; font-weight: bold; letter-spacing: 1px; background-color: #ffffff; border: 1px solid #808080; padding: 6px; margin: 4px 0; text-align: center; overflow-wrap: anywhere; }