@charset "utf-8";

/* 설문조사 스킨 */
#poll {position:relative; margin-bottom:15px; border:1px solid var(--layout-gray-200); border-radius:10px; background:var(--layout-white)}
#poll header {position:relative; padding:14px 16px; border-bottom:1px solid var(--layout-gray-200)}
#poll header:after {display:block; clear:both; content:""}
#poll header h2 {float:left; line-height:28px; color:var(--layout-gray-900); font-size:16px; font-weight:700}
#poll header .btn_result {float:right; display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 10px; border:1px solid var(--layout-gray-300); border-radius:999px; background:var(--layout-white); color:var(--layout-gray-700); font-size:12px; font-weight:600}
#poll header .btn_result:hover {border-color:var(--color-prime); color:var(--color-prime)}
#poll header .btn_admin {float:right; margin-left:6px; line-height:28px; color:var(--layout-gray-500); font-size:20px}
#poll ul {margin:0; padding:8px 16px 0; list-style:none}
#poll li {padding:4px 0}

.selec_chk {position:absolute; top:0; left:0; width:0; height:0; opacity:0; outline:0; z-index:-1; overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="radio"] {position:absolute; top:0; left:0; width:0; height:0; opacity:0; outline:0; z-index:-1; overflow:hidden}
.chk_box input[type="radio"] + label {position:relative; display:block; padding:10px 12px 10px 38px; border:1px solid var(--layout-gray-200); border-radius:8px; color:var(--layout-gray-800); line-height:1.45}
.chk_box input[type="radio"] + label span {position:absolute; top:50%; left:13px; width:16px; height:16px; border:1px solid var(--layout-gray-400); border-radius:50%; background:var(--layout-white); transform:translateY(-50%)}
.chk_box input[type="radio"]:checked + label {border-color:var(--color-prime); background:var(--layout-gray-100); color:var(--layout-gray-900)}
.chk_box input[type="radio"]:checked + label span {border-color:var(--color-prime)}
.chk_box input[type="radio"]:checked + label span:before {content:''; position:absolute; top:3px; left:3px; width:8px; height:8px; border-radius:50%; background:var(--color-prime)}

#poll .poll_con p {padding:14px 16px 6px; color:var(--layout-gray-900); font-size:15px; font-weight:700; line-height:1.45}
#poll_btn {padding:12px 16px 16px; text-align:center}
#poll_btn:after {display:block; clear:both; content:""}
#poll_btn .btn_poll {display:block; width:100%; height:40px; border:0; border-radius:8px; background:var(--color-prime); color:var(--layout-white-only); font-size:14px; font-weight:700}

/* 설문조사 결과 (팝업) */
#poll_result.poll_result_win {max-width:760px; margin:0 auto; padding:0 18px 22px; background:transparent}
#poll_result.poll_result_win #win_title {display:flex; align-items:center; gap:8px; margin:0 -18px 18px; padding:14px 18px; border-bottom:1px solid var(--layout-gray-200); box-shadow:none; background:var(--layout-white); color:var(--layout-gray-900); font-size:20px; font-weight:700; line-height:1.35}
#poll_result.poll_result_win #win_title i {color:var(--color-prime); font-size:22px}
#poll_result .new_win_con2 {margin:0}
#poll_result .sv_member,
#poll_result .sv_guest {font-weight:600}

#poll_result_list,
#poll_result_cmt,
#poll_result_oth {margin:0; padding:18px; border:1px solid var(--layout-gray-200); border-radius:12px; background:var(--layout-white)}
#poll_result_cmt,
#poll_result_oth {margin-top:14px}

#poll_result .poll_result_top {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
#poll_result .poll_result_top h2 {margin:0; color:var(--layout-gray-900); font-size:18px; font-weight:700; line-height:1.4}
#poll_result .poll_all {display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 12px; border-radius:999px; background:var(--layout-gray-100); color:var(--layout-gray-700); font-size:12px; font-weight:600; white-space:nowrap}

#poll_result_list ol {margin:0; padding:0; list-style:none}
#poll_result_list li {margin-top:10px; padding:12px; border:1px solid var(--layout-gray-200); border-radius:10px; background:var(--layout-white)}
#poll_result_list li:first-child {margin-top:0}
#poll_result_list li.poll_1st {border-color:var(--color-prime); background:var(--layout-gray-100)}

#poll_result .poll_row_head {display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px}
#poll_result .poll_option_text {flex:1; color:var(--layout-gray-900); font-size:14px; font-weight:600; line-height:1.45; word-break:keep-all}
#poll_result .poll_numerical {position:static; display:flex; align-items:baseline; gap:8px; flex-shrink:0; text-align:right}
#poll_result .poll_numerical .poll_cnt {color:var(--layout-gray-600); font-size:13px; font-weight:500}
#poll_result .poll_numerical .poll_percent {color:var(--color-prime); font-size:15px; font-weight:700; letter-spacing:0}

#poll_result .poll_result_graph {position:relative; width:100%; height:10px; border-radius:999px; background:var(--layout-gray-200); box-shadow:none}
#poll_result .poll_result_graph span {position:absolute; top:0; left:0; height:10px; border-radius:inherit; background:var(--layout-gray-500)}
#poll_result .poll_1st .poll_result_graph span {background:var(--color-prime)}

#poll_result_cmt > h2,
#poll_result_oth > h2 {margin:0 0 12px; color:var(--layout-gray-900); font-size:16px; font-weight:700; line-height:1.4}

#poll_result_cmt article {margin:0; padding:12px 0; border-bottom:1px solid var(--layout-gray-100)}
#poll_result_cmt article:first-of-type {padding-top:0}
#poll_result_cmt article:last-of-type {border-bottom:0; padding-bottom:0}
#poll_result_cmt header {display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin:0}
#poll_result_cmt .poll_comment_author {display:block; color:var(--layout-gray-900); font-size:14px; font-weight:600; line-height:1.3}
#poll_result_cmt .poll_comment_author a {color:inherit}
#poll_result_cmt .poll_comment_author a:hover {color:var(--color-prime)}
#poll_result_cmt .poll_comment_meta {display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
#poll_result_cmt .poll_datetime {display:inline-flex; align-items:center; gap:4px; color:var(--layout-gray-500); font-size:12px}
#poll_result_cmt p {margin-top:8px; padding:0; color:var(--layout-gray-700); font-size:14px; line-height:1.6; word-break:break-word}
#poll_result_cmt .poll_comment_empty {padding:2px 0; color:var(--layout-gray-500); font-size:14px}

#poll_result #poll_other_q {margin-top:14px}
#poll_result #poll_result_wcmt {margin-bottom:10px; border:1px solid var(--layout-gray-200); border-radius:10px; overflow:hidden; background:var(--layout-white)}
#poll_result #poll_other_q h3 {display:flex; align-items:center; gap:6px; margin:0; padding:12px 14px; border-bottom:1px solid var(--layout-gray-200); text-align:left; color:var(--layout-gray-900); font-size:14px; font-weight:700}
#poll_result #poll_other_q h3 span {display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; background:var(--layout-gray-100); color:var(--layout-gray-700); font-size:11px; font-weight:600}
#poll_result #poll_result_wcmt input {width:100%; height:44px; border:0; padding:0 14px; background:transparent; color:var(--layout-gray-900); font-size:14px}

#poll_result .poll_guest input {display:block; width:100%; height:40px; margin-bottom:10px; border:1px solid var(--layout-gray-300); border-radius:8px; padding:0 12px; color:var(--layout-gray-900); font-size:14px}
#poll_result .btn_submit {float:none; width:100%; height:42px; border:0; border-radius:8px; background:var(--color-prime); color:var(--layout-white-only); font-size:14px; font-weight:700}

#poll_result .poll_cmt_del a {display:inline-flex; align-items:center; gap:4px; color:var(--layout-gray-500); font-size:13px}
#poll_result .poll_cmt_del a:hover {color:var(--layout-danger)}

#poll_result_oth ul {margin:0; padding:0; list-style:none}
#poll_result_oth ul li {position:relative; margin-top:8px; padding:10px 12px; border:1px solid var(--layout-gray-200); border-radius:8px; line-height:1.4}
#poll_result_oth ul li:first-child {margin-top:0}
#poll_result_oth ul li a {display:block; padding-right:98px; color:var(--layout-gray-800); font-size:14px; font-weight:500}
#poll_result_oth ul li a:hover {color:var(--color-prime)}
#poll_result_oth li span {position:absolute; top:50%; right:12px; color:var(--layout-gray-500); font-size:12px; transform:translateY(-50%)}

#poll_result .win_btn {margin-top:16px; text-align:center}
#poll_result .btn_close {min-width:140px; height:40px; padding:0 18px; border:1px solid var(--layout-gray-300); border-radius:8px; background:var(--layout-white); color:var(--layout-gray-700); font-size:14px; font-weight:600}
#poll_result .btn_close:hover {border-color:var(--color-prime); color:var(--color-prime)}

@media (max-width: 640px) {
    #poll_result.poll_result_win {padding:0 12px 18px}
    #poll_result.poll_result_win #win_title {margin:0 -12px 14px; padding:12px}
    #poll_result_list,
    #poll_result_cmt,
    #poll_result_oth {padding:14px}
    #poll_result .poll_result_top {flex-direction:column; align-items:flex-start}
    #poll_result .poll_row_head {flex-direction:column; align-items:flex-start; gap:6px}
    #poll_result .poll_numerical {width:100%; justify-content:flex-end}
    #poll_result_oth ul li a {padding-right:0; margin-bottom:4px}
    #poll_result_oth li span {position:static; display:block; transform:none}
}