...
로 감싸서 작성
사용 가능한 클래스: .box .tip .warn .info .faq .note .center
===================================== */
.yg{max-width:760px;margin:0 auto;line-height:1.8;color:#333;word-break:keep-all}
.yg *{box-sizing:border-box}
/* 제목 */
.yg h2{font-size:21px;font-weight:700;color:#111;border-left:5px solid #111;padding-left:12px;margin:40px 0 16px}
.yg h3{font-size:18px;font-weight:700;color:#111;margin:28px 0 12px}
.yg h2:first-child,.yg h3:first-child{margin-top:0}
/* 본문 */
.yg p{margin:0 0 14px}
.yg strong{color:#111}
.yg a{color:#1E40AF;text-decoration:underline}
.yg ul,.yg ol{margin:0 0 16px;padding-left:22px}
.yg li{margin-bottom:6px}
.yg img{max-width:100%;height:auto;display:block;margin:20px auto}
.yg hr{border:0;border-top:1px solid #e5e5e5;margin:32px 0}
/* 표 (모바일에서 가로 스크롤) */
.yg table{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:15px}
.yg th,.yg td{border:1px solid #ddd;padding:10px;text-align:center;vertical-align:middle}
.yg th{background:#1E40AF;color:#fff;font-weight:700}
.yg tr:nth-child(even) td{background:#f8f9fa}
/* 인용 */
.yg blockquote{margin:20px 0;padding:14px 18px;border-left:4px solid #ccc;color:#555;background:#fafafa}
/* 강조 박스: 처럼 사용 */
.yg .box{background:#f5f5f5;border-left:4px solid #888;border-radius:8px;padding:16px 18px;margin:20px 0}
.yg .box p:last-child,.yg .box ul:last-child{margin-bottom:0}
.yg .box > strong:first-child{display:block;margin-bottom:6px}
.yg .tip{background:#FEFCE8;border-color:#EAB308}
.yg .warn{background:#FEF2F2;border-color:#EF4444}
.yg .info{background:#ECFDF5;border-color:#22C55E}
/* FAQ:
*/
.yg .faq{background:#F5F3FF;border-left:4px solid #8B5CF6;border-radius:8px;padding:16px 18px;margin:14px 0}
.yg .faq strong{display:block;color:#5b21b6;margin-bottom:6px}
.yg .faq p{margin:0}
/* 기타 */
.yg .note{font-size:14px;color:#777}
.yg .center{text-align:center}
/* 모바일 */
@media (max-width:640px){
.yg{font-size:15px}
.yg h2{font-size:19px}
.yg table{display:block;overflow-x:auto;white-space:nowrap}
}
/* =========================================================
8. 사용 여부 확인 필요 (삭제 후보)
--------------------------------------------------------
올려주신 head / index / tail / 게시판 스킨에서는 쓰이지 않는
규칙들입니다. 다만 mysubmenu.php, 로그인 스킨, 다른 게시판
스킨 등 올리지 않은 파일에서 쓰일 수 있어서 지우지 않고
모아만 두었습니다. (현재 동작은 그대로입니다)
- 사이트에서 문제없이 확인한 뒤 이 구역을 통째로 지워도 됩니다.
========================================================= */
/* 왼쪽 사이드 메뉴 ※ 지우지 마세요! skin/nav/mysubmenu.php 의 #sidebar 가 실제로 사용 중 */
/* ----- 사이드바 색상 : 미드나잇 네이비 #2c3e50 (여기 6개만 바꾸면 전체 색이 바뀜) ----- */
#sidebar {
--sb-head: #2c3e50; /* 그룹 제목 글자 */
--sb-accent: #2c3e50; /* 펼친 화살표 */
--sb-active-bg: #eef1f4; /* 현재 메뉴 배경 */
--sb-active-tx: #2c3e50; /* 현재 메뉴 글자 */
--sb-hover: #f5f7f9; /* 마우스 올렸을 때 / 펼친 그룹 제목 배경 */
--sb-chev: #8a97a5; /* 접힌 화살표 */
}
#sidebar {
width: 140px; /* #sidemenu 칸(140px)에 꽉 차게 (기존 120px) */
background: #fff;
font-size: 15px;
line-height: 1.4;
padding-top: 20px;
position: relative;
will-change: transform;
}
#sidebar ul {list-style:none;margin:0;padding:0}
#sidebar li {border-bottom:1px solid #d9dde0}
#sidebar li a {display:block;padding:10px;text-decoration:none;color:#222;font-size:15px}
#sidebar li a:not(.bold-menu)::before {content:"•";display:inline-block;margin-right:12px;color:#111;font-size:13px}
#sidebar li a.bold-menu {position:relative;font-size:17px;font-weight:bold;color:var(--sb-head);background:#fff;padding:15px 10px 13px 10px;border-bottom:none}
#sidebar li a.bold-menu::after {content:"▲";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--sb-head)}
#sidebar li:has(a.bold-menu) {border-top:2px solid #c9ced2;border-bottom:none}
#sidebar li:first-child {border-top:none}
#sidebar li a:not(.bold-menu):hover {color:var(--sb-active-tx);background:var(--sb-hover);border-radius:10px}
#sidebar li a.active {background:var(--sb-active-bg);color:var(--sb-active-tx);font-weight:bold;border-radius:10px}
#sidebar li a.active::before {color:var(--sb-active-tx)}
/* ----- 그룹 접기/펼치기 (mysubmenu.php 스크립트가 sb-ready / sb-head / sb-panel 클래스를 붙임) ----- */
#sidebar li a {transition:background-color .2s ease, color .2s ease}
/* 그룹 제목 */
#sidebar.sb-ready li.sb-head > a.bold-menu {padding-right:30px;user-select:none;transition:background-color .25s ease}
#sidebar.sb-ready li.sb-head > a.bold-menu:hover,
#sidebar.sb-ready li.sb-head.sb-open > a.bold-menu {background:var(--sb-hover)}
/* 오른쪽 화살표: 글자(▲) 대신 얇은 꺾쇠, 펼치면 부드럽게 뒤집힘 */
#sidebar.sb-ready li.sb-head > a.bold-menu::after {
content:"";width:7px;height:7px;font-size:0;
border-right:2px solid var(--sb-chev);border-bottom:2px solid var(--sb-chev);
top:50%;right:14px;transform:translateY(-70%) rotate(45deg);
transition:transform .35s cubic-bezier(.4,0,.2,1), border-color .25s;
}
#sidebar.sb-ready li.sb-head.sb-open > a.bold-menu::after {transform:translateY(-25%) rotate(-135deg);border-color:var(--sb-accent)}
/* 하위 메뉴 패널: 높이가 0 → 자연스러운 높이로 부드럽게 열림 */
#sidebar li.sb-panel {border:0;padding:0;margin:0;display:grid;grid-template-rows:0fr;
transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1)}
#sidebar li.sb-panel.is-open {grid-template-rows:1fr}
#sidebar .sb-panel-inner {overflow:hidden;min-height:0}
#sidebar .sb-panel ul {padding:2px 0 6px}
#sidebar .sb-panel li {border-bottom:0}
/* 하위 메뉴: 위에서 살짝 내려오며 하나씩 차례로 나타남 */
#sidebar .sb-panel li.sb-child {opacity:0;transform:translateY(-6px);
transition:opacity .2s ease, transform .2s ease}
#sidebar .sb-panel.is-open li.sb-child {opacity:1;transform:none;
transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
transition-delay:calc(var(--i, 0) * 35ms + 60ms)}
#sidebar .sb-panel li a {margin:1px 4px;padding:8px 10px;border-radius:8px}
/* 현재 게시판: 연한 배경 + 굵은 글씨 */
#sidebar .sb-panel li a.active {background:var(--sb-active-bg);color:var(--sb-active-tx)}
/* 처음 그릴 때·움직임 줄이기 설정한 사용자는 애니메이션 없음 */
#sidebar.sb-noanim *, #sidebar.sb-noanim *::after {transition:none !important}
@media (prefers-reduced-motion: reduce) {
#sidebar *, #sidebar *::after {transition:none !important}
}
#sidebar > ul > li:last-child {border-bottom:1px solid #d9dde0}
/* 옛 헤더 (hd_define / hd_qnb / hd_login) 및 이상한 선택자 */
.head menu {position:relative;float:left;display:inline-block}
#hd_define {float:left}
#hd_define:after {display:block;visibility:hidden;clear:both;content:""}
#hd_define li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px}
#hd_define li:last-child {padding-right:0;margin-right:0;border-right:0}
#hd_define li a {display:inline-block;color:#919191}
#hd_define li.active a {color:#fff}
#hd_qnb {float:right;text-align:right}
#hd_qnb:after {display:block;visibility:hidden;clear:both;content:""}
#hd_qnb li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px}
#hd_qnb li:last-child {padding-right:0;margin-right:0;border-right:0}
#hd_qnb li span {display:block;margin-top:5px;font-size:0.92em}
#hd_qnb li a {display:inline-block;color:#919191}
#hd_qnb .visit .visit-num {display:inline-block;line-height:16px;padding:0 5px;margin-left:5px;border-radius:10px;background:#da22f5;color:#fff;font-size:10px}
.hd_login {position:absolute;right:0;top:60px}
.hd_login li {float:left;margin:0 5px;border-left:1px solid #616161;padding-left:10px;line-height:13px}
.hd_login li:first-child {border-left:0}
.hd_login a {color:#fff}
/* 사이드 배너 / 기타 */
#new_sidemenu {float:right}
#golf {margin-top:30px}
.golf_banner1, .golf_banner2 {width:140px;height:120px;box-shadow:0 5px 10px 0 rgba(0,0,0,0.1), 0 2px 4px 0 rgba(0,0,0,0.07);border-radius:8px;overflow:hidden}
#aside {
float: none;
margin: 0 auto;
padding: 0;
height: 46%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.07);
}
/* 옛 latest / 배너 레이아웃 */
.main_banner {position:relative;float:left;height:300px;width:965px;margin:0;border-radius:15px;overflow:hidden}
.latest_top_wr {clear:both;margin:0 7px 20px 0;float:left}
.latest_top_wr:after {display:block;visibility:hidden;clear:both;content:""}
.latest_top_wr1, .latest_top_wr2, .latest_top_wr3, .latest_top_wr4,
.latest_top_wr5, .latest_top_wr6, .latest_top_wr7 {float:left;margin:0}
.latest_top_wr1:after, .latest_top_wr2:after, .latest_top_wr3:after, .latest_top_wr4:after,
.latest_top_wr5:after, .latest_top_wr6:after, .latest_top_wr7:after {display:block;visibility:hidden;clear:both;content:""}
.mid_ad {border-radius:8px;box-shadow:0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.07);overflow:hidden;margin-bottom:20px}
/* 옛 푸터 (현재 tail.php 는 ft_link_wr / ft_info_wr 구조 사용) */
#ft_link {text-align:left}
#ft_link ul {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:30px}
#ft_link a {display:inline-block;line-height:1.5;font-weight:bold;color:#333;text-decoration:none}
#ft_link a:hover {color:#3059c7;text-decoration:underline}
#ft_wr {margin:0 auto;max-width:1200px;position:relative}
#ft_wr:after {display:block;visibility:hidden;clear:both;content:""}
#ft_wr .ft_cnt {width:100%;padding:0}
#ft_company h2 {font-size:1.2em;margin-bottom:12px;color:#222}