/* BASIC css start */
/* =====================================================================
   좌측 사이드바 (#aside) - LNB / 투표하기 / 안내(info) / 고객센터
   ---------------------------------------------------------------------
   구성 순서
     1. #aside 최외곽 박스
     2. LNB(좌측 내비게이션) - 타이틀(h2) + 메뉴 목록(ul)
     3. 투표하기(.research) 영역
     4. 안내 박스(.info) - 배경 이미지 3단 조합(위/중간반복/아래)
     5. 고객센터(.info-cs) 영역
   ===================================================================== */


/* =====================================================================
   1. #aside 최외곽 박스
      사이드바 전체 폭 고정(177px) + 본문과의 우측 여백
   ===================================================================== */

#aside { width: 177px; margin-right: 20px; }


/* =====================================================================
   2. LNB (좌측 내비게이션)
   ===================================================================== */

/* h2 타이틀 - 텍스트는 화면에 안 보이고(font-size/line-height 0) 배경 이미지로만 표시하는 방식(이미지 치환 기법) */
#aside .lnb-wrap h2 { font-size: 0; line-height: 0; }

/* 타이틀 텍스트형(.txt) - 우측에 화살표 아이콘을 배경으로 깔아줌 (세로 중앙보다 살짝 아래쪽인 45% 위치) */
#aside h2.txt {
    padding-right: 15px;
    background: url(/images/d3/modern_simple/common/bull_h13_dw_arw.gif) no-repeat right 45%;
}
/* 타이틀 안쪽 span - 실제 보이는 텍스트. 밑줄(테두리)로 타이틀 영역 구분 */
#aside h2.txt span {
    border-bottom: 1px solid #999999;
    color: #333333;
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    padding-bottom: 3px;
}

/* 메뉴 목록 묶음 - 내부 li가 float이므로 zoom:1(IE hasLayout) + :after clearfix로 높이 무너짐 방지 */
#aside .lnb { zoom: 1; padding-bottom: 25px; padding-left: 2px; }
#aside .lnb:after { content: ""; display: block; clear: both; }

/* li, a 둘 다 float + width:100% → 항목을 세로로 쌓되 각 줄 전체를 클릭 영역으로 만드는 구조 */
#aside .lnb li,
#aside .lnb a { float: left; width: 100%; }

#aside .lnb li { margin-top: 10px; word-wrap: break-word; }   /* 항목 간 세로 간격 + 긴 단어 줄바꿈 허용 */
#aside .lnb li.now a { font-weight: bold; }                    /* 현재 위치(선택된) 메뉴 강조 */
#aside .lnb a:hover { font-weight: bold; }                     /* 마우스오버 시에도 동일하게 강조 */
#aside .lnb li a { color: #767676; }                           /* 기본 링크 색상(회색) */


/* =====================================================================
   3. 투표하기 (.research)
   ===================================================================== */

#aside .research .txt-1 { margin-top: 10px; font-weight: bold; text-align: center; }   /* 상단 안내문구 - 굵게 중앙정렬 */
#aside .research .list { margin-top: 10px; }                                          /* 선택지 목록 묶음 */
#aside .research .list li { margin-top: 5px; }                                        /* 선택지 간 간격 */
#aside .research .list li.li-center { text-align: center; }                           /* 특정 항목(예: 투표 버튼 등) 중앙정렬 */


/* =====================================================================
   4. 안내 박스 (.info)
      배경 이미지를 위/중간/아래 3단으로 이어붙이는 고전적인 방식
        - .info 자체        : 중간부분(mdl) 이미지를 세로로 반복(repeat-y) → 내용 길이에 따라 늘어남
        - .cnt (안쪽 콘텐츠) : 하단(btm) 이미지를 바닥에 1장만 깔아 박스를 마감
        - dd (구분선)        : 점선(dot) 이미지를 가로로 반복해서 항목 사이 구분선처럼 사용
   ===================================================================== */

#aside .info {
    margin-bottom: 15px;
    background: url(/images/d3/modern_simple/aside_info_mdl.gif) repeat-y 0 0;   /* 박스 좌우 테두리 역할 - 세로로 늘어나며 반복 */
}
#aside .info .cnt,
#aside .info .cnt a { color: #616161; }

/* 안쪽 콘텐츠 - 좌우 여백 + 하단 이미지로 박스 바닥을 마감 */
#aside .info .cnt {
    zoom: 1;                       /* (레거시) IE hasLayout 트리거 */
    padding: 0 13px 7px;
    text-align: center;
    color: #616161;
    background: url(/images/d3/modern_simple/aside_info_btm.gif) no-repeat 0 bottom;
}

/* 각 항목(dd) - 위쪽에 점선 이미지를 구분선처럼 반복(repeat-x) */
#aside .info .cnt dd { padding: 10px 0; background: url(/images/d3/modern_simple/aside_info_dot.gif) repeat-x 0 0; }
#aside .info .cnt dd.first { background-image: none; }   /* 첫 항목은 위 구분선 제거(그 위에 선이 필요 없으므로) */
#aside .info .cnt dd li { padding: 2px 0; }               /* dd 안쪽 세부 항목 간격 */


/* =====================================================================
   5. 고객센터 (.info-cs)
   ===================================================================== */

#aside .info-cs .ph { font-size: 14px; font-weight: bold; }     /* 전화번호 - 크고 굵게 강조 */
#aside .info-cs .qna { font-weight: bold; }                      /* 1:1 문의/QnA 링크 - 굵게 강조 */
#aside .info-cs .qna img { vertical-align: middle; }             /* 아이콘과 텍스트 세로 중앙 정렬 */
/* BASIC css end */