/* ===========================================================================
   cards.css — unified styles for the webhard ranking board
   
   Was scattered across:
     - rank/style.css                              (.rbv-*, .ranked-wrap, .card)
     - rank/components/score.css                    (.img-meter, .meter-*)
     - cards/plan.php + cards/event.php (inline)    (.ps-list*)
     - cards/cs.php (inline)                        (.cs, .cs_time, .cs_bold)
     - cards/opened.php (inline)                    (.d_open, .rbv-count)
     - cards/search_volume.php (inline + Tailwind)  (#sv-card, .sv-*)
     - cards/rank_graph_card.php (inline + Tailwind)(.rg-* — new namespace)
   ========================================================================== */

/* ---- legacy rank skin styles (kept verbatim for visual parity) ---- */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&display=swap');

.a-pointer {cursor:pointer;}

/* 게시판 목록 */
#bo_cate {margin:25px 0}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;padding:2px}
#bo_cate a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #d6e9ff;color:#6794d3}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#3a8afd;color:#fff}
#bo_cate #bo_cate_on {z-index:2;background:#3a8afd;color:#fff;font-weight:bold;border:1px solid #3a8afd;
-webkit-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
-moz-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
box-shadow:inset 0 2px 5px rgb(33, 135, 202)}
.td_subject img {margin-left:3px}

.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="checkbox"] + label {position:relative;padding-left:20px;color:#676e70;vertical-align:baseline}
.chk_box input[type="checkbox"] + label:hover{color:#2172f8}
.chk_box input[type="checkbox"] + label span {position:absolute;top:10px;left:10px;width:15px;height:15px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.write_div .chk_box input[type="checkbox"] + label, .bo_vc_w .chk_box input[type="checkbox"] + label {padding-left:20px}
.write_div .chk_box input[type="checkbox"] + label span, .bo_vc_w .chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {background:url(./img/chk.png) no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px}
.all_chk.chk_box input[type="checkbox"] + label span {top:0;left:0}

/* 갤러리 목록 */
#bo_gall h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#bo_gall #gall_ul {margin:10px -10px 0;padding:0;list-style:none;zoom:1}
#bo_gall #gall_ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_gall .gall_li {}
#bo_gall .gall_li .gall_chk {position:absolute;top:0;left:0;padding:5px;z-index:1}
#bo_gall .gall_box {position:relative;margin:0 0 50px 0;border-radius:0 0 2px 2px}
#bo_gall .gall_con {position:relative}

.gall_row .col-gn-0,.gall_row .col-gn-1,.gall_row .col-gn-2,.gall_row .col-gn-3,.gall_row .col-gn-4,.gall_row .col-gn-5,.gall_row .col-gn-6,.gall_row .col-gn-7,.gall_row .col-gn-8,.gall_row .col-gn-9,.gall_row .col-gn-10 {position:relative;min-height:1px;padding-left:10px;*padding-left:0;padding-right:10px;*padding-right:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0}
.gall_row .col-gn-0,.gall_row .col-gn-1 {width:100%}
.gall_row .col-gn-2 {width:50%}
.gall_row .col-gn-3 {width:33.33333333%}
.gall_row .col-gn-4 {width:25%}
.gall_row .col-gn-5 {width:20%}
.gall_row .col-gn-6 {width:16.66666667%}
.gall_row .col-gn-7 {width:14.28571428%}
.gall_row .col-gn-8 {width:12.5%}
.gall_row .col-gn-9 {width:11.11111111%}
.gall_row .col-gn-10 {width:10%}

.gall_row .box_clear {clear:both}

#bo_gall .gall_now .gall_text_href a {color:#ff3061}

#bo_gall .gall_href a:link, #bo_gall .gall_href a:focus, #bo_gall .gall_href a:hover {text-decoration:none}
#bo_gall .gall_img {border-bottom:1px solid #eee;text-align:center;overflow:hidden}
#bo_gall .gall_img a,#bo_gall .gall_img .no_image,#bo_gall .gall_img .is_notice {display:block}
#bo_gall .gall_img img, #bo_gall .gall_img video {max-width:100%;height:auto !important}
#bo_gall .gall_img span {display:inline-block;background:#eaeaea;text-align:center;text-transform:uppercase;font-weight:bold;font-size:1.25em;color:#777}

#bo_gall .gall_text_href {margin:10px 0}
#bo_gall .gall_text_href a {font-weight:bold}
#bo_gall .gall_text_href img {margin:0 0 0 4px}
#bo_gall .bo_tit {display:block;line-height:30px;font-weight:bold;color:#000;font-size:1.2em}
#bo_gall .bo_tit .cnt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}

#bo_gall .bo_cnt {color:#acacac;line-height:18px}
#bo_gall .profile_img img {border-radius:50%}
#bo_gall .bo_tit .fa-download {width:16px;height:16px;line-height:16px;background:#e89f31;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle}

#bo_gall .bo_tit .fa-link{width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle;font-weight:normal;}
#bo_gall .bo_tit .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.825em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:baseline}
#bo_gall .bo_tit .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#fff;background:#e52955;text-align:center;border-radius:2px;vertical-align:middle;margin-right:2px}
#bo_gall .bo_tit .fa-lock {display:inline-block;line-height:16px;color:#999;text-align:center;vertical-align:middle}

#bo_gall .gall_info {line-height:1.5em;line-height:20px}
#bo_gall .gall_info strong {display:inline-block;margin:0}
#bo_gall .gall_info i {font-size:12px}
#bo_gall .gall_info .gall_date,
#bo_gall .gall_info .gall_view {display:inline-block;margin-left:10px;color:#777}

#bo_gall .gall_option {position:absolute;top:10px;right:10px}
#bo_gall .gall_option strong {background:#fff;padding:5px 10px;border-radius:30px;-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}

/* 게시판 목록 공통 */
#bo_btn_top {margin:10px 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx {margin-bottom:5px;float:right;zoom:1}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none}
#bo_list_total {float:left;line-height:34px;font-size:0.92em;color:#4e546f}

.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;width:40px;text-align:center;margin-left:5px;background:#fff}
.btn_bo_user > li {position:relative}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:0 8px;border:0;background:#d4d4d4;color:#666;text-decoration:none;vertical-align:middle}
.bo_notice td {background:#fff6fa !important;border-bottom:1px solid #f8e6ee}
.bo_notice td a {font-weight:bold}
.bo_notice .notice_icon {display:inline-block;line-height:25px;border-radius:5px;font-weight:bold;color:#f9267f}

.more_opt {display:none;position:absolute;top:45px;right:0;background:#fff;border:1px solid #b8bfc4;z-index:999}
.more_opt:before {content:"";position:absolute;top:-8px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.more_opt:after {content:"";position:absolute;top:-6px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.more_opt li {border-bottom:1px solid #f1f1f1;padding:10px;float:inherit;width:90px;margin:0;color:#6b757c;text-align:left}
.more_opt li:last-child {border-bottom:0}
.more_opt li button, .more_opt li a {width:100%;border:0;background:#fff;color:#6b757c}
.more_opt li:hover a,
.more_opt li:hover button {color:#000}
.more_opt li i {float:right;line-height:20px}

.td_num strong {color:#000}
.bo_cate_link {display:inline-block;background:#e2eaf6;color:#3a8afd;font-weight:normal !important;height:20px;line-height:10px;padding:5px 8px;border-radius:5px;font-size:0.95em} /* 글제목줄 분류스타일 */
.bo_cate_link:hover {text-decoration:none}
.bo_current {color:#e8180c}
#bo_list .profile_img {display:inline-block;margin-right:5px}
#bo_list .profile_img img {border-radius:50%}
#bo_list .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold;color:#ed6478;font-size:0.86em}

#bo_gall li.empty_list {padding:85px 0;text-align:center}

.bo_sch_wrap {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999}

.bo_sch:after {display:block;visibility:hidden;clear:both;content:""}

.bo_sch legend {background:red}
.bo_sch form {padding:15px;display:block}

.bo_sch .sch_input {width:250px;height:38px;border:0;padding:0;background-color:transparent;float:left}

.bo_sch .bo_sch_cls {position:absolute;right:0;top:0;color:#b5b8bb;border:0;padding:12px 15px;font-size:16px;background:#fff}

/* 게시판 쓰기 */
#char_count_desc {display:block;margin:0 0 5px;padding:0}
#char_count_wrap {margin:5px 0 0;text-align:right}
#char_count {font-weight:bold}

#autosave_pop {display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #565656;background:#fff;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
#autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent}
#autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div {text-align:center;margin:0 !important}
#autosave_pop button {margin:0;padding:0;border:0}
#autosave_pop ul {padding:15px;border-top:1px solid #e9e9e9;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #e8e8e8}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #fff;background:#eee;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop a {display:block;float:left}
#autosave_pop span {display:block;float:right;font-size:0.92em;font-style:italic;color:#999}
.autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}
.autosave_close:hover {background:#f3f3f3;color:#3597d9}
.autosave_content {display:none}
.autosave_del {background:url(./img/close_btn.png) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;height:20px;width:20px}

/* 게시판 읽기 */
#bo_v {margin-bottom:20px;background:#fff;box-sizing:border-box}

#bo_v_table {position:absolute;top:0;right:16px;margin:0;padding:0 5px;height:25px;background:#ff3061;color:#fff;font-weight:bold;line-height:2.2em}

#bo_v_title {}
#bo_v_title .bo_v_cate {display:inline-block;line-height:20px;background:#e2eaf6;color:#3a8afd;padding:0 10px;border-radius:3px;}
#bo_v_title .bo_v_tit {display:block;font-size:2em;margin:5px 0 0;word-break:break-all}

#bo_v_info {margin:0;border-bottom:1px solid #f1f1f1;color:#666}
#bo_v_info:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_v_info h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_v_info .profile_info {margin:20px 0 10px;display:inline-block;float:left}
#bo_v_info .profile_info .pf_img {float:left;margin-right:10px}
#bo_v_info .profile_info .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_v_info .profile_info .profile_info_ct {float:left;padding:5px 0;line-height:18px}

#bo_v_info strong {display:inline-block;margin:0 10px 0 0;font-weight:normal}
#bo_v_info .sv_member,
#bo_v_info .sv_guest,
#bo_v_info .member,
#bo_v_info .guest {font-weight:bold}
#bo_v_info .profile_img {display:none}
#bo_v_info .sv_member {color:#000}
#bo_v_info .if_date {margin:0;color:#888}

#bo_v_file h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_v_file li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf;border-radius:5px;
-webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
-moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%)}
#bo_v_file li i {float:left;color:#b2b2b2;font-size:2.35em;margin-right:20px}
#bo_v_file a {float:left;display:block;text-decoration:none;word-wrap:break-word;color:#000}
#bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active {text-decoration:underline;color:#3a8afd}
#bo_v_file img {float:left;margin:0 10px 0 0}
#bo_v_file .bo_v_file_cnt {color:#b2b2b2;font-size:0.92em}
#bo_v_file li:hover {border-color:#bed4f4;color:#bed4f4}
#bo_v_file li:hover i {color:#3a8afd}
#bo_v_file li:hover .bo_v_file_cnt {color:#99c2fc}

#bo_v_link h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_file ul{margin:0;list-style:none;}
#bo_v_link li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf;border-radius:5px;
-webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
-moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%)}
#bo_v_link li i {float:left;color:#b2b2b2;font-size:2.35em;margin-right:20px}
#bo_v_link a {float:left;display:block;text-decoration:none;word-wrap:break-word;color:#000}
#bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active {text-decoration:underline;color:#3a8afd}
#bo_v_link .bo_v_link_cnt {color:#b2b2b2;font-size:0.92em}
#bo_v_link li:hover {border-color:#bed4f4;color:#bed4f4}
#bo_v_link li:hover i {color:#3a8afd}
#bo_v_link li:hover .bo_v_link_cnt {color:#99c2fc}

#bo_v_top {zoom:1}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_top ul {padding:0;list-style:none;word-break:break-all}

#bo_v_bot {zoom:1}
#bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_bot h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_bot ul {padding:0;list-style:none}

.bo_v_com {margin:20px 0;float:right}
.bo_v_com > li {position:relative;float:left;margin-left:5px}

.bo_v_nb {margin:20px 0;position:relative;clear:both;text-align:left}
.bo_v_nb:after {display:block;visibility:hidden;clear:both;content:""}
.bo_v_nb li {border-top:1px solid #f1f1f1;padding:13px}
.bo_v_nb li:last-child {border-bottom:1px solid #f1f1f1}
.bo_v_nb li:hover {background:#f6f6f6}
.bo_v_nb li i {font-size:13px;color:#b3b3b3}
.bo_v_nb li .nb_tit {display:inline-block;padding-right:20px;color:#b3b3b3}
.bo_v_nb li .nb_date {float:right;color:#b3b3b3}

#bo_v_atc {min-height:200px;height:auto !important;height:200px}
#bo_v_atc_title {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_v_img {width:100%;overflow:hidden;zoom:1}
#bo_v_img:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_img a.view_image {display:block}
#bo_v_img img {margin-bottom:20px;max-width:100%;height:auto}

#bo_v_con {margin:10px 0 30px;width:100%;line-height:1.7em;min-height:200px;word-break:break-all;overflow:hidden}
#bo_v_con a {color:#000;text-decoration:underline}
#bo_v_con img {max-width:100%;height:auto}

#bo_v_act {margin-bottom:30px;text-align:center}
#bo_v_act .bo_v_act_gng {position:relative}
#bo_v_act a {margin-right:5px;vertical-align:middle;color:#4a5158}
#bo_v_act a:hover {background-color:#fff;color:#ff484f;border-color:#ff484f}
#bo_v_act i {font-size:1.4em;margin-right:5px}

#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}

#bo_v_sns {padding:0;list-style:none;zoom:1;float:left;display:inline-block}
#bo_v_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_sns li {float:left;width:135px;margin-right:5px;text-align:left}
#bo_v_sns li a {height:35px;line-height:35px;text-align:center;border-radius:5px;color:#fff;font-size:0.95em}
#bo_v_sns li img {vertical-align:middle;margin-right:5px}
#bo_v_sns li .sns_f {display:block;background:#3b5997}
#bo_v_sns li .sns_t {display:block;background:#09aeee}
#bo_v_sns li .sns_g {display:block;background:#ea4026}
#bo_v_sns li .sns_k {display:block;background:#fbe300}

#bo_v_share {position:relative;padding:20px 0}
#bo_v_share:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_share .btn {padding:0 10px;color:#555;font-weight:normal;font-size:1em;width:80px;line-height:35px;height:35px;border-color:#d5d5d5;border-radius:5px}
#bo_v_share .btn:hover {background:#fff}
#bo_v_share .btn i {margin-right:5px;color:#4b5259;vertical-align:middle}

/* 게시판 댓글 */
.cmt_btn {width:100%;text-align:left;border:0;border-bottom:1px solid #f0f0f0;background:#fff;font-weight:bold;margin:30px 0 0px;padding:0 0 15px}
.cmt_btn span.total {position:relative;display:inline-block;margin-right:5px;font-size:1em;color:#3a8afd}
.cmt_btn span.cmt_more {float:right;display:inline-block;width:15px;height:10px;background:url(./img/btn_cmt.png) no-repeat right 2px;margin-top:5px}
.cmt_btn_op span.cmt_more {background-position:right -8px}
.cmt_btn b {font-size:1.2em;color:#000}
.cmt_btn span.total:after {position:absolute;bottom:-17px;left:0;display:inline-block;background:#3a8afd;content:"";width:100%;height:2px}
#bo_vc {}
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 0;position:relative;border-bottom:1px solid #f0f0f0}
#bo_vc article:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc article .profile_img img {border-radius:50%}
#bo_vc article .pf_img {float:left;margin-right:10px}
#bo_vc article .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_vc article .cm_wrap {float:left;max-width:870px;width:90%}
#bo_vc header {position:relative;width:100%}
#bo_vc header:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc header .profile_img {display:none}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {color:#777}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {line-height:1.8em;padding:0 0 20px}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:underline;color:#ed6479}
#bo_vc_empty {margin:0;padding:80px 0 !important;color:#777;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc .bo_vl_opt {position:absolute;top:0;right:0}

.bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.bo_vc_act li {border-bottom:1px solid #f0f0f0}
.bo_vc_act li:last-child {border-bottom:0}
.bo_vc_act li a {display:inline-block;padding:10px 15px}
.bo_vc_act li a:hover {color:#3a8afd}

.bo_vc_w {position:relative;margin:10px 0;display:block}
.bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w textarea {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;width:100%;height:120px;
-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1)}
#wr_secret {}
.bo_vc_w_info {margin:10px 0;float:left}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input {float:left;margin-right:5px}
.bo_vc_w_info #captcha {padding-top:10px;clear:both}
.bo_vc_w .btn_confirm {clear:both;margin-top:10px}
.bo_vc_w .btn_confirm label {display:inline-block;margin-right:10px;border-radius:3px;font-size:1.5em;text-align:center}
.bo_vc_w .btn_submit {height:45px;padding:0 20px;border-radius:3px;font-weight:bold;font-size:1.083em}
.bo_vc_w .btn_confirm .secret_cm label {font-size:1em !important}
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}
.secret_cm {display:inline-block;float:left}

#bo_vc_send_sns {display:inline-block;float:left}
#bo_vc_sns {display:inline-block;margin:0;padding:0;list-style:none;zoom:1}
#bo_vc_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_sns li {float:left;margin:0 5px 0 0}
#bo_vc_sns .sns_li_f {border-radius:3px;background:#3a589b;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_t {border-radius:3px;background:#00aced;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_off {background:#bbb}
#bo_vc_sns a {display:inline-block;padding:0 15px 0 5px}
#bo_vc_sns input {margin:0 5px 0 0}

/*글쓰기*/
#bo_w .bo_v_option li {display:inline-block;float:left;text-align:left;margin:0 5px 0 0}
#bo_w .bo_v_option li label {vertical-align:baseline}
#bo_w .bo_v_option .chk_box input[type="checkbox"] + label span {margin-left:0;margin-right:5px}
#bo_w .write_div {margin:10px 0;position:relative}
#bo_w .write_div:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info .frm_input {float:left;margin-bottom:1%}
#bo_w #wr_password, #bo_w #wr_homepage {margin-left:1%}
#bo_w .wr_content.smarteditor2 iframe {background:#fff}
#bo_w .bo_w_tit {position:relative}
#bo_w .bo_w_tit .frm_input {padding-right:120px}
#bo_w .bo_w_tit #btn_autosave {position:absolute;top:5px;right:5px;line-height:30px;height:30px}
#bo_w .bo_w_link label {position:absolute;top:1px;left:1px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_link .frm_input {padding-left:50px}
#bo_w .bo_w_flie .lb_icon {position:absolute;top:0px;left:0px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_flie .frm_file {padding-left:50px;margin-top:3px}
#bo_w .bo_w_flie .file_wr {position:relative;border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;height:40px;margin:0}
#bo_w .bo_w_flie .frm_input {margin:10px 0 0}
#bo_w .bo_w_flie .file_del {position:absolute;top:10px;right:10px;font-size:0.92em;color:#7d7d7d}
#bo_w .bo_w_select select {border:1px solid #d0d3db;width:100%;height:40px;border-radius:3px}
#bo_w .btn_submit {padding:0 20px;font-size:1.167em}
#bo_w .btn_cancel {border-radius:3px;font-size:1.167em}

/**********************
여기서부터 빌더전용 CSS입니다.
스킨작업은 가급적 CSS를 수정하지마시고, 
주석 후 새로 라인을 추가해주세요.
************************/

/* 목록 {*/
.rb_bbs_wrap {position: relative;}
.rb_bbs_wrap .rb_bbs_top {margin-top: -55px; margin-bottom: 30px;}
.rb_bbs_wrap .rb_bbs_top li {float:right}
.rb_bbs_wrap .rb_bbs_top li.cnts {margin-right: 10px; margin-top: 9px; font-size: 12px; color:#999;}

.rb_bbs_wrap #bo_cate {margin-bottom: 0px; margin-top: 30px; display: flex;}
.rb_bbs_wrap #bo_cate #bo_cate_ul {flex:1; position: relative;}
.rb_bbs_wrap #bo_cate a {display: inline-flex; padding: 0px 20px; border:0px; font-size: 16px; color:#000; background-color: transparent; line-height: 56px; position: relative;}
.rb_bbs_wrap #bo_cate a:first-child {padding-left: 0px;}
.rb_bbs_wrap #bo_cate a:hover {background-color: transparent; font-family:'font-B',sans-serif;}
.rb_bbs_wrap #bo_cate #bo_cate_on {background-color: transparent; font-weight: normal; box-shadow: none; color:#AA20FF; border:0px; font-family:'font-B',sans-serif;}
.rb_bbs_wrap #bo_cate li {padding: 0px; display: inline-block;}
.rb_bbs_wrap #bo_cate #bo_cate_ul:before {content: "";bottom: 0;position: absolute;width: 100%;margin: 0;height: 1px;background-color: rgba(0, 0, 0, .1);}
.rb_bbs_wrap #bo_cate #bo_cate_on::after {content: "";position: absolute;bottom: 0;right: 20px;left: 0px;height: 2px;background-color: currentColor;}
.rb_bbs_wrap .mo_date_wrap {margin-bottom: 5px;}

.rb_bbs_wrap .rb_bbs_list {border-top:0px solid #ddd; margin-top: 0px;}
.rb_bbs_wrap .rb_bbs_for {padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #eee; position: relative; background-repeat: no-repeat;}
.rb_bbs_wrap .rb_bbs_for_info {float:left; width: 15%; box-sizing: border-box; padding-right: 40px;}
.rb_bbs_wrap .rb_bbs_for_cont {float:left; width: 85%; padding-right: 40px;}
.rb_bbs_wrap .rb_bbs_for_img {position: absolute; top:40px; right: 0px;}
.rb_bbs_wrap .rb_bbs_for_img img {height:115px; width: auto;}
.rb_bbs_wrap .rb_bbs_for_info1_num {font-size: 16px; color:#999; float:left;}
.rb_bbs_wrap .rb_bbs_for_info1_chk {float:right; margin-top: -2px;}
.rb_bbs_wrap .rb_bbs_for_info2 {margin-top: 20px;}
.rb_bbs_wrap .rb_bbs_for_info2 li {color:#999; font-size: 12px;}
.rb_bbs_wrap .view_info_span {color:#999; font-size: 12px;}
.rb_bbs_wrap .view_info_span_ip {color:#999; font-size: 12px; margin-left: -10px;}
.rb_bbs_wrap .view_info_span a {color:#999; font-size: 12px;}
.rb_bbs_wrap .rb_bbs_for_info2 .ca_names {margin-top: 15px;}
.rb_bbs_wrap .rb_bbs_for_info2 .ca_names a {border-bottom: 2px solid #eee; color:#999; padding-bottom: 4px;}
.rb_bbs_wrap .rb_bbs_for_info2 .ca_names a:hover {color:#000; border-bottom: 2px solid #000;}
.rb_bbs_wrap .rb_bbs_for_cont_subj a {font-size: 22px;}
.rb_bbs_wrap .rb_bbs_for_cont_subj a i {opacity: 0.2}
.rb_bbs_wrap .rb_bbs_for_cont_txt {font-size: 14px; color:#777; line-height: 140%; margin-top: 20px; word-break: keep-all;}
.rb_bbs_wrap .rb_thumb_wrap {box-sizing: border-box; }
.rb_bbs_wrap .rb_thumb_wrap img {border-radius: 10px;}
.rb_bbs_wrap .rb_thumb_wrap a:hover img {opacity: .8;}
.rb_bbs_wrap .btns_gr_wrap {position:fixed; top:128px; left: 0px; width: 100%; z-index: 0; height:0px;}
.rb_bbs_wrap .btns_gr_wrap .sub {padding: 0px; height:0px; min-height: 0px;}
.rb_bbs_wrap .btns_gr_wrap .btns_gr {float:right; width: 50px; margin-right: -100px;}
.rb_bbs_wrap .btns_gr_wrap .btns_gr .fl_btns {width: 50px; height:50px; border:1px solid #ddd; background-color: #fff; border-radius: 6px; text-align: center; margin-bottom: 10px; position: relative; display: block; line-height: 45px;}
.rb_bbs_wrap .btns_gr_wrap .btns_gr .fl_btns:hover {border-color:#AA20FF;}
.rb_bbs_wrap .btns_gr_wrap .btns_gr .fl_btns.main_color_bg {background-color: #AA20FF; border-color:#AA20FF;}
.rb_bbs_wrap .btm_btns .fl_btns {line-height: 35px; display: inline-block; height:35px; border:1px solid #ddd; background-color: #fff; border-radius: 6px; text-align: center; margin-bottom: 10px; position: relative; color:#999; padding-left: 15px; padding-right: 15px;}
.rb_bbs_wrap .btm_btns .fl_btns:hover {border-color:#AA20FF; color:#AA20FF;}
.rb_bbs_wrap .btm_btns .fl_btns.main_color_bg {border-color:#AA20FF; color:#fff !important; background-color: #AA20FF;}

.rb_bbs_wrap .btm_btns {margin-top: 30px;}
.rb_bbs_wrap .rb_bbs_for_mem {margin-top: 20px;}
.rb_bbs_wrap .rb_bbs_for_mem li {display: inline-block; margin-left: 0px; margin-right: 20px;}
.rb_bbs_wrap .rb_bbs_for_mem li dd {display: inline-block; margin-right: 10px;}
.rb_bbs_wrap .rb_bbs_for_mem li dd span {font-size: 11px; color:#000;}
.rb_bbs_wrap .lb_ico_new {background-color: #8ED100; color:#fff; font-size: 11px; padding: 2px 5px; border-radius: 4px; display:inline-block; }
.rb_bbs_wrap .lb_ico_hot {background-color: #FFC700; color:#fff; font-size: 11px; padding: 2px 5px; border-radius: 4px; display:inline-block; }
.rb_bbs_wrap .lb_ico_noti {background-color: #121212; color:#fff; font-size: 11px; padding: 2px 5px; border-radius: 4px; display:inline-block; }
.rb_bbs_wrap .is_good span {color:#0094FF !important;}
.rb_bbs_wrap .is_nogood span {color:#FF4C00 !important;}
/* } */

/* 보기 { */
.rb_bbs_for_mem_view {border-bottom: 1px solid #ddd; padding-bottom: 30px;}
.rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_mem_names {float:left; display: block;}
.rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_mem_names span {margin-right: 10px;}
.rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_mem_names span.profile_img {margin-right: 0px;}
.rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_btm_info {float:right; display: block; margin-right: 0px; margin-left: 20px;}
.rb_bbs_wrap .rb_bbs_file_for {padding-top: 17px; padding-bottom: 17px; font-size: 12px; border-bottom:1px solid #eee; color:#888; background-color: #fff; padding-left: 0px; padding-right: 0px; box-sizing: border-box;}
.rb_bbs_wrap .rb_bbs_file_for i {margin-right: 10px;}
.rb_bbs_wrap .rb_bbs_file_for .file_contents {margin-top: 10px; padding: 0px 15px 0px 28px; border-radius: 0px; margin-bottom: -2px;}
.rb_bbs_wrap #bo_v_con {margin: 0px; padding-top: 40px; padding-bottom: 40px; font-size: 16px;}
.rb_bbs_wrap #bo_v_con img {max-width: 100%;}
.rb_bbs_wrap #bo_v_act .bo_v_good {display:inline-block;border:1px solid #ddd;width:70px;line-height:46px;border-radius:30px; background-color: #fff;}
.rb_bbs_wrap #bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #ddd;width:70px;line-height:46px;border-radius:30px; background-color: #fff;}
.rb_bbs_wrap #bo_v_act a {margin-left: 2px; margin-right: 2px; width: auto !important; padding-left: 20px; padding-right: 20px;}
.rb_bbs_wrap #bo_v_act a:hover {border-color:#000; color:#000;}

.rb_bbs_wrap #bo_v_btns {float:left;}

.rb_bbs_wrap #bo_v_share li a span {display: none;}
.rb_bbs_wrap #bo_v_share li {width: 35px; margin-right: 0px; margin-left: 5px;}
.rb_bbs_wrap #bo_v_sns li img {margin-right: 0px;}
.rb_bbs_wrap .bo_v_nb li {padding-top: 17px; padding-bottom: 17px; font-size: 14px; cursor: pointer;}
.rb_bbs_wrap .bo_v_nb li:hover {background-color: #f9f9f9;}
.rb_bbs_wrap .bo_v_nb li .nb_date {font-size: 12px;}
.rb_bbs_wrap .cmt_btn {border-bottom: 1px solid #ddd;}
.rb_bbs_wrap .cmt_btn span.total:after {display: none;}
.rb_bbs_wrap .cmt_btn span.total {color:#000; font-size: 16px}
.rb_bbs_wrap .cmt_btn b {color:#999; font-size: 16px;}
.rb_bbs_wrap #bo_vc header .profile_img {display: inherit;}
.rb_bbs_wrap #bo_vc header {width: 80%;}
.rb_bbs_wrap #bo_vc article .pf_img {display: none;}
.rb_bbs_wrap .cm_wrap span {font-size: 12px; color:#999;}
.rb_bbs_wrap .cm_wrap {background-repeat: no-repeat; padding-top: 20px; padding-bottom: 20px; max-width: inherit !important; width: 100% !important;}
.rb_bbs_wrap #bo_vc .cmt_contents {padding-top: 0px; font-size: 14px; padding-bottom: 0px; margin-top: 15px; line-height: 130%; color:#222;}
.rb_bbs_wrap #bo_vc article {margin: 0px;}
.rb_bbs_wrap .bo_vc_w {margin: 0px;}
.rb_bbs_wrap .bo_vc_w textarea {font-size:14px !important; border-radius: 0px; resize: none; height:150px; margin-top: 30px; background-color: #f9f9f9; padding: 15px !important; padding-right: 70px !important; box-sizing: border-box; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; border:1px solid #ddd; font-size: 16px; color:#000; box-shadow: none; line-height: 130%; overflow: hidden;}
.rb_bbs_wrap .bo_vc_w textarea:focus {border:1px solid #ddd !important; background-color: #fff;}
.rb_bbs_wrap .bo_vc_w textarea::placeholder {color:#999;}
.rb_bbs_wrap .p_times {display: block; margin-top: 5px;}
.rb_bbs_wrap #bo_vc .bo_vl_opt {top:20px;}
.rb_bbs_wrap #bo_vc .bo_vl_opt button {padding: 0px; height:auto; line-height: inherit; color:#000; width: 26px;}
.rb_bbs_wrap #bo_vc .bo_vl_opt button:hover {color:#999;}
.rb_bbs_wrap .bo_vc_act {top:30px;}
.rb_bbs_wrap .bo_vc_act li a:hover {color:#000;}
.rb_bbs_wrap .bo_vc_w_wr {padding: 15px; border:1px solid #ddd; border-top:0px; box-sizing: border-box; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.rb_bbs_wrap .btn_confirm_btn_wrap {margin-right: 20px;}
.rb_bbs_wrap .btn_confirm_cm_wrap i {margin-right: 5px;}
.rb_bbs_wrap .bo_vc_w .btn_confirm {margin-top: 0px;}
.rb_bbs_wrap .bo_vc_w .btn_confirm label {margin: 0px; font-size: 14px; display: inherit; color:#000;}
.rb_bbs_wrap .bo_vc_w .btn_submit {height:40px; border-radius: 6px; font-weight: normal; font-size: 16px; padding-left: 25px; padding-right: 25px;}
.rb_bbs_wrap .cm_wrpa_write_left {float:left;}
.rb_bbs_wrap .cm_wrpa_write_left span {color:#999; font-size: 14px; padding-left: 5px; line-height: 40px;}
.rb_bbs_wrap .cm_wrpa_write_left span.main_color {padding-left: 0px;}
.rb_bbs_wrap .cm_wrpa_write_right {float:right;}
.rb_bbs_wrap #char_cnt {position: absolute; top:50px; right:17px; text-align: right;font-weight: normal; font-size: 12px; color:#999; margin: 0px;}
.rb_bbs_wrap .bo_vc_w_info {margin-top: 0px; margin-bottom: 0px; float:none; margin-bottom: 15px; padding-bottom: 15px; margin-left: -15px; margin-right: -15px; border-bottom: 1px solid #eee; padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
.rb_bbs_wrap .bo_vc_w_info #captcha {margin-top: 30px;}
.rb_bbs_wrap .bo_vc_w_info .frm_input {float:none; border:1px solid #ddd; height:30px; width: 100px; border-radius: 6px !important; padding-left: 10px; padding-right: 10px;}
.rb_bbs_wrap .bo_vc_w_info_ul1 {margin-top: -60px;}
.rb_bbs_wrap .copy_urls {float:left;}
.rb_bbs_wrap .copy_urls li {width:35px; margin-right: 0px; margin-left: 5px;}
.rb_bbs_wrap .copy_urls li a {display: block; background: #f1f1f1; height: 35px;line-height: 35px;text-align: center;border-radius: 5px;color: #fff;font-size: 0.95em;}
.rb_bbs_wrap .bbs_bn_box {margin-top: 30px; margin-bottom: 10px;}
.rb_bbs_wrap #bo_v_img .view_image {display: inline;}

#bo_v_act_good, #bo_v_act_nogood{display:none;position:absolute;top:50px;left:0;z-index:9999;padding:7px 10px;width:auto;background:#ff3061;color:#fff;text-align:center;font-size:12px;font-weight:normal;word-break:keep-all;border-radius:10px;}
/* } */

/* 작성자 서명 { */
.rb_bbs_wrap .writer_prof {background-color: #f9f9f9; padding:30px; box-sizing: border-box; border-radius: 10px;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 {float:left; width: 55%;}
.rb_bbs_wrap .writer_prof .writer_prof_ul2 {float:right;}
.rb_bbs_wrap .writer_prof .writer_prof_ul2 a {display: inline-block; vertical-align: top;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_img {float:left; margin-right:20px;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_img img {width: 50px; height:50px; border-radius: 10px;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_txt {float:left; color:#999;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_txt span {}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_txt .prof_nick .sv_wrap a {font-size: 18px; font-family:'font-R',sans-serif; color:#000;}
.rb_bbs_wrap .writer_prof .writer_prof_ul1 .writer_prof_li_prof_txt .prof_nick {display: block; margin-bottom: 5px; margin-top: 3px;}
.rb_bbs_wrap .writer_prof .writer_prof_li_txt {margin-top: 15px; font-size: 16px; color:#666; line-height: 130%; word-break: keep-all;}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns {width: 50px; height:50px; border:1px solid #ddd; background-color: #fff; border-radius: 6px; text-align: center; margin-bottom: 0px; position: relative; display: block; line-height: 45px;}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns:hover {border-color:#AA20FF;}
.rb_bbs_wrap .writer_prof_ul2 .gd_btn {width: auto; background-color: #AA20FF; color:#fff; font-size: 16px; padding-left: 20px; padding-right: 20px; border:0px;}
.rb_bbs_wrap .writer_prof_ul2 .gd_btn i {margin-top: 0px; margin-right: 5px; float:left;}
.rb_bbs_wrap .writer_prof_ul2 .gd_btn span {float:right; margin-top: 2px;}
/* } */

/* 쓰기 { */
.rb_bbs_wrap.rb_bbs_write_wrap {margin-top: 0px;background:#fff;padding:20px;border-radius:7px;}
.rb_bbs_wrap #char_count_wrap {position: absolute; top:35px; right:17px; text-align: right;font-weight: normal; font-size: 12px; color:#999; margin: 0px;}
.rb_bbs_wrap .help_text {font-size: 12px; color:#999; display: block; margin-bottom: 10px; word-break: keep-all;}
.rb_bbs_wrap .help_text_gap {font-size: 12px; color:#999; display: block; margin-bottom: 10px; word-break: keep-all; margin-top: 15px;}
.rb_bbs_wrap .ca_name {width: 35%;}
.rb_bbs_wrap .wr_subject {width: 70%; height:60px; font-size: 18px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
.rb_bbs_wrap .rb_inp_wrap {margin-bottom: 10px;}
.rb_bbs_wrap .cke_sc {display: none !important;}
.rb_bbs_wrap .wr_content {position: relative;}
.rb_bbs_wrap .wr_content textarea {border:1px solid #ddd; padding: 20px; box-sizing: border-box; box-shadow: none; border-radius: 10px; resize: none;}
.rb_bbs_wrap .guest_inp_wrap {background-color: #f9f9f9; border-radius: 10px; padding: 20px; box-sizing: border-box;}
.rb_bbs_wrap .guest_inp_wrap .input_tiny {width: 20%}
.rb_bbs_wrap .guest_inp_wrap .email {margin-top: 5px; width: 60%}
.rb_bbs_wrap .rb_inp_wrap_link {position: relative; margin-bottom: 10px;}
.rb_bbs_wrap .rb_inp_wrap_link i {position: absolute; top:14px; left: 15px;}
.rb_bbs_wrap .rb_inp_wrap_link .input {padding-left: 40px; box-sizing: border-box;}
.rb_bbs_wrap .rb_inp_wrap_gap {margin-top: 30px;}
.rb_bbs_wrap .rb_inp_wrap_confirm {text-align: center; margin-top: 30px;}
.rb_bbs_wrap .rb_inp_wrap_confirm .btn_cancel {width:auto;background-color: #aaa;color: #fff;height: 47px;border-radius: 10px;border: 0px; line-height: 47px; font-size: 14px; font-weight: normal; padding-left: 30px; padding-right: 30px;}
.rb_bbs_wrap .rb_inp_wrap_confirm .btn_submit {width:auto;background-color: #AA20FF;color: #fff;height: 47px;border-radius: 10px;border: 0px; font-size: 14px; font-weight: normal; padding-left: 30px; padding-right: 30px;}
.rb_bbs_wrap .rb_inp_wrap_confirm .btn_submit:hover {opacity: 0.8}
.rb_bbs_wrap #bo_vc_w #wr_content {border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important;}
/* } */

/* 파일업로드 { */
.swiper-wfile {margin-top: 10px;}
.au_input{width:100%;height:100%;display:block;opacity:0;position:absolute;top:0;left:0;z-index:97;}

                        
.au_file_list{width: 100%; box-sizing: border-box; position: relative;}
.au_file_list_img_wrap {height:90px; overflow: hidden; border-radius: 6px; border:1px solid #eee; box-sizing: border-box;}
.au_file_list img {width: 100%; height:auto; min-height:100%;}
.au_progress{display:none;border-radius:4px;text-align:center; margin-top: 10px; background-color: rgba(0,0,0,0.05);}
.au_bars {font-size: 10px; color:rgba(0,0,0,1); background-color: rgba(0,0,0,0.1); border-radius:4px; transition: all 350ms cubic-bezier(0.07, 1, 0.07, 1);}
.cut {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;display: block;}
.au_btn_del{border-radius:4px;background-color:#f00;color:#fff !important;opacity:1;cursor:pointer; position: absolute; bottom:25px; right:5px; font-size: 11px; padding: 2px 5px 2px 5px;}
.au_btn_del2{border-radius:4px;background-color:#279e6b;color:#fff;opacity:1;cursor:pointer; position: absolute; bottom:25px; right:5px; font-size: 11px; padding: 2px 5px 2px 5px; z-index: 3}
#file_list .swiper-slide_lists dd {display: none; right:37px; color:#fff !important;}
#file_list .swiper-slide_lists:nth-child(1) dd {display: block !important;}
                            
.au_btn_search_file{background-color:#fff !important;padding:15px;text-align:center;cursor:pointer;border-radius:6px;color:#999 !important;border:2px dashed #f0f0f0 !important;min-height:100px;padding-top:35px !important;}
                            
.w_pd {padding-top: 23px; }
.w_etc {display: block; width: 40px; margin:0 auto; text-align: center; background-color: #aaa; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_pdf {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #e7191b; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_ppt {display: block; width: 40px; margin:0 auto; text-align: center; background-color: #f68100; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_pptx {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #f68100; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_jpg {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #87cd6d; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px}
.w_zip {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #fec200; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_hwp {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #006fbe; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_xlsx {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #00753e; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_xls {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #00753e; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_doc {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #01528a; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}
.w_docx {display: block;  width: 40px; margin:0 auto; text-align: center; background-color: #01528a; color:#fff; padding-top: 14px; padding-bottom: 18px; font-weight: bold; border-radius: 6px;}

#son {height:10px;}
/* } */

/* 검색 { */
.bo_sch_bg{background:rgba(0,0,0,0.5);width:100%;height:100%;}
/* } */

/* 툴팁 { */
.rb_bbs_wrap .tooltips {
    opacity: 0;
    transition: all 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: default;
    position: absolute;
    left:50px;
    width: max-content;
    color: #fff;
    background-color: #212121;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 100%;
    top:50%;
    transform: translateY(-50%);
}
.rb_bbs_wrap .tooltips:after {
    border-top: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid #212121;
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid rgba(0, 0, 0, 0);
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}

.rb_bbs_wrap .btns_gr_wrap .btns_gr .fl_btns:hover .tooltips {left: 60px; opacity: 1;}

.rb_bbs_wrap .writer_prof_ul2 .fl_btns .tooltips {left: 50%; transform: translateX(-50%); bottom:-20px; top:auto;}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns .tooltips:after {
    top:-7px; left: 50%; transform: translateX(-50%);
    border-top: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid #212121;
}
.rb_bbs_wrap .writer_prof_ul2 .fl_btns:hover .tooltips {opacity: 1; bottom:-30px;}
/* } */

/* 검색창 { */
.bo_sch select{border:1px solid #d0d3db;width:100%;height:47px;border-radius:10px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);}
.bo_sch .sch_bar{display:inline-block;width:100%;clear:both;margin-top:10px;border:0px;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:none;position:relative;}
.bo_sch .sch_bar input {width: 100%; padding-right: 47px;}
.bo_sch .sch_btn{height:47px;float:none;color:#656565;background:none;border:0;width:47px;font-size:15px;position:absolute;top:0px;right:0px;}
.bo_sch h3{padding:15px;border-bottom:1px solid #e8e8e8;font-size:16px;}
.bo_sch{position:absolute;top:50%;left:50%;background:#fff;text-align:left;width:330px;max-height:300px;margin-left:-125px;margin-top:-180px;overflow-y:auto;border-radius:10px;-webkit-box-shadow:1px 1px 18px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 18px rgba(0,0,0,0.2);box-shadow:10px 10px 30px rgba(0,0,0,0.2);border:0px;}
/* } */

.rb-board-table {width: 100%; border-collapse: collapse;}
.rb-board-table thead {}
.rb-board-table tbody {}
.rb-board-table th {padding-top: 20px; padding-bottom: 20px; text-align: center;  font-family:'font-B',sans-serif; font-weight: normal; border-bottom: 1px solid #ddd;}
.rb-board-table td {padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;}
.rb-board-table td.rb-board-no {width: 10%; text-align: center}
.rb-board-table td.rb-board-writer {width: 20%; text-align: center;}
.rb-board-table td.rb-board-views {width: 15%; text-align: center;}
.rb-board-table td.rb-board-date {width: 15%; text-align: center;}

.rb-board-table td.rb-board-title a {font-size: 16px;}
.rb-board-table td .cats {color:#999 !important; padding-right: 10px;}
.rb-board-table .bbs_basic_infos_wrap {margin-top: 10px; font-size: 12px !important; color:#999 !important;}
.rb-board-table .bbs_basic_infos_wrap a {font-size: 12px !important; color:#999;}
.rb-board-table td.rb-board-title{width:60%;padding-right:15px;padding-left:15px;background-repeat:no-repeat;}

.btm_btns_left {float:left;}
.btm_btns_right {float:right;padding:7px 15px;color:#999;font-size:13px;}
.btm_btns_right .main_color_bg img {height:12px; margin-top: -2px;}
.rb_bbs_wrap #bo_v_share{padding-top:0px;padding-bottom:0px;float:none;text-align:center;}
.rb_bbs_wrap #bo_v_share ul {display: inline-block; float:none; vertical-align: top; margin-left: -1px; margin-right: -1px;}
.rb_bbs_wrap #bo_v_act{background-color:#f9f9f9;border-radius:10px;padding:20px;box-sizing:border-box;margin-top:50px;}

#autosave_wrapper{position:relative;}

#autosave_wrapper ul.autosave_wrapper_ul1 {
    padding-right: 115px;
}

#autosave_wrapper ul.autosave_wrapper_ul2 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 105px;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #btn_autosave {
    border-radius: 10px;
    width: 100%;
    height: 47px;
    background-color: #F0F3F9;
    color: #25282B
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop {
    display: none;
    z-index: 10;
    position: absolute !important;
    top: 50px;
    right: 0;
    width: 300px;
    height: auto !important;
    height: 270px;
    max-height: 270px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0px 50px rgba(0, 0, 0, 0.1);
    border: 0px;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop:after {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 10px;
    right: 45px;
    top: -9px;
    border: solid transparent;
    border-width: 0 8px 10px 8px;
    border-bottom-color: currentColor;
    box-sizing: border-box;
    color: #fff;
    filter: drop-shadow(0 -4px 3px rgba(0, 0, 0, .1));
    z-index: 12;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop:before {
    display: none;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop ul {
    border: 0px;
    height: 150px;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop li {
    border-radius: 0px;
    padding: 0px 0px 10px 0px;
    font-size: 14px;
    background-color: transparent;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop li:last-child {
    border-bottom: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop span {
    float: none;
    font-size: 11px;
    margin-top: 5px;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop a {
    float: none;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_del {
    position: absolute;
    top: 5px;
    right: 0px;
    text-indent:-999px;
    overflow:hidden;
    height:20px;
    width:20px;
    opacity: 0.3
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_del:hover {opacity: 0.5;}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_close {
    height: 35px;
    color: #25282B;
    font-weight: normal;
    font-size: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 10px;
    width: 50%;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_close:hover {
    background-color: #F0F3F9;
}

.autosave_save {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_save {
    height: 35px;
    color: #25282B;
    font-weight: normal;
    font-size: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 50%;
    border-right: 1px solid rgba(0,0,0,0.05);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0px;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_save:hover {
    background-color: #F0F3F9;
}

#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop .autosave_btn_wrap {
    display: flex;
    justify-content: space-between;
}

#autosave_wrapper ul.autosave_wrapper_ul2 .autosave_guide {
    text-align: left;
    font-size: 13px;
    padding: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    color: #777;
    line-height: 140%;
}

/* 반응형 처리 { */
@media all and (max-width:1024px) {
    .board_pc {display: none;}
    .rb_bbs_wrap .rb_bbs_for_info {float:none; width: auto; position: absolute; top:39px; right:-5px; padding-right: 0px; z-index: 97;}
    .rb_bbs_for_info1_num {display: none;}
    .rb_bbs_for_info2 {display: none;}
    .mo_date_wrap {color:#999; font-size: 12px; margin-bottom: 5px;}
    .rb_bbs_wrap .rb_bbs_for_cont {width: 90%;}
    .rb_bbs_wrap .rb_bbs_for_img img {height:80px;}
    .bo_v_nb li .nb_tit {display: block;}
    .bo_v_nb li .nb_date {float:none;}
    .rb_bbs_wrap .bo_v_nb li a {display: block; margin-top: 7px;}
    .rb_bbs_wrap .cm_wrpa_write_left {float:none; text-align: left; word-break: keep-all;}
    .rb_bbs_wrap .cm_wrpa_write_right {float:none; text-align: left; padding-top: 10px;}
    .rb_bbs_wrap .bo_vc_w .btn_submit {float:right; margin-top: -5px;}
    
    .rb_bbs_wrap .btns_gr_wrap .btns_gr {margin-right: 0px;}
    .rb_bbs_wrap .btns_gr_wrap {width: auto; top:65%; transform: translateY(-50%); left: auto; right:20px; z-index: 98; height:auto;}
    .rb_bbs_wrap .tooltips {display: none;}
    .bo_sch {margin-left: 0px; transform: translateX(-50%);}
    
    .rb_bbs_wrap .ca_name {width: 60%;}
    .wr_content #char_count_wrap {display: none;}
    .rb_bbs_wrap .guest_inp_wrap .input_tiny {width: 30%;}
    .rb_bbs_wrap .guest_inp_wrap .email {width: 80%;}
    .rb_bbs_for_mem_names span {word-break: keep-all;}
    
    .rb_bbs_wrap .rb_bbs_for_mem li {margin-right: 10px;}
    .rb_bbs_wrap .rb_bbs_for_mem_view .rb_bbs_for_btm_info {margin-left: 10px;}
    
    .rb_bbs_wrap .cont_info_wrap_l {float:none; width: 100%;}
    .rb_bbs_wrap .cont_info_wrap_r {float:none; width: 100%;}
    .rb_bbs_wrap .writer_prof {padding: 20px; position: relative;}
    .rb_bbs_wrap .writer_prof .writer_prof_ul2 {position: absolute; top:20px; right:20px;}
    .rb_bbs_wrap .writer_prof .writer_prof_li_txt {float:none; width: 100%; font-size: 14px; margin-top:20px; word-break: keep-all;}
    .rb_bbs_wrap .writer_prof .writer_prof_ul1 {float:none; width: 100%;}
    
    .view_info_span_date {display: none;}
    
    .rb-board-table td.rb-board-no {width: 15%;}
    .rb-board-table td.rb-board-title {width: 85%;}
    .write_mobiles {display:inline-block; margin-right: 10px;}
    
    .btm_btns_left {float:none;}

    
    .btns_gr {display: none;}
    .rss_pc {display: none !important;}
    .btm_btns_left .btn_bo_sch {float:right;}
    .btm_btns_right .main_color_bg {width: 100%; height:50px !important; font-size: 16px;}
    .btm_btns_right .main_color_bg img {height: 18px; margin-right: 10px;}
}
/* } */
/* ====================================================
   Global & Resets
==================================================== */
:root{
  /* 공통 테마 */
  --card-bg:#fff;
  --card-radius:7px;
  --card-pad:25px;
  --card-shadow:0 2px 10px rgba(0,0,0,.06);

  --rbv-gap:20px;
  --rbv-bg:#eef2f7;
  --radius:8px;

  --h2-color:#2c73a8;
  --text:#111827;
  --muted:#667085;
  --line:#e5e7eb;
  --accent:#5B57F0;
  --border:#dadce0;
}

.rb_bbs_wrap h2 {color:var(--h2-color);font-size: 17px; font-weight: normal; word-break: keep-all; line-height: 130%; font-family: 'font-B', sans-serif; margin-top: 0px;}
.rb_bbs_wrap img{max-width:100%;height:auto;margin: 0 auto;}

/* 기본 상단 메타 숨김(뷰 상단 구역 대체했음) */
.rb_bbs_wrap > h2,
.view_info_span.mobile,
.rb_bbs_for_mem_view{display:none!important}

/* 유틸 */
.copy_urls img{vertical-align:middle}
.btm_btns .cb{clear:both}

/* 필요 시 전체 상단 버튼 감춤
.btns_gr_wrap{display:none!important}
*/

/* ====================================================
   통합 카드 베이스 (View + List)
==================================================== */
.rbv-card,
.ranked-wrap .card{
	font-family: 'font-R', sans-serif;
  background:var(--card-bg);
  border-radius:var(--card-radius);
  padding:var(--card-pad)!important;
  border: 1px solid var(--border)
}

/* ====================================================
   View (상세) – rbv namespace
==================================================== */
.rbv-wrap{max-width:960px;margin:0 auto;padding:10px;}
.rbv-last{font-size:12px;color:#4b5563;text-align:right;margin-right:10px;margin-bottom:10px}

.rbv-header{display:grid;grid-template-columns:1fr 130px;gap:16px;align-items:center}
.rbv-title{font-size:24px;font-weight:800;margin:0;color:var(--text)}
.rbv-sub{color:#6b7280;font-size:15px;margin-top:10px;min-height:50px;}

.rbv-logo{
  width:130px;height:130px;border-radius:var(--radius);background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 0 1px #edf2f7
}
.rbv-logo img{max-width:100%;max-height:100%;object-fit:contain}

.rbv-cta{background:var(--accent);color:#fff;text-align:center;font-weight:900;padding:20px 10px !important;margin-top:20px;box-shadow: var(--card-shadow) !important;}
.rbv-cta a{display:block;color:#fff;text-decoration:none}

.rbv-h3{margin-bottom:20px}
.rbv-muted{color:var(--muted);font-size:15px;line-height: 1.6;}

/* 2열 그리드 */
.rbv-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rbv-gap);margin-top:var(--rbv-gap);padding:0 10px}
.rbv-grid2 .rbv-card{min-height:120px;}

/* 카드가 1개뿐이거나 마지막 1개가 남으면 전체 폭 사용 */
.rbv-grid2 > *:only-child{grid-column:1/-1}

/* ====================================================
   Score Meter (리스트/뷰 공용)
   - components/score.php가 .rbv-img-meter + .img-meter 둘 다 출력
==================================================== */

/* 막대 공통 */

 /* 더 원색 파랑 */

/* Reserve the row height so the cycle-label disappearing at the end of
   the animation doesn't yank everything below upward (CLS fix). */
.rbv-wrap .meter-head { min-height: 18px; }
/* width를 --w에서 --w-final 우선으로 */

/* ✅ 페이드 제거: 단색으로만 채움 */

/* 값(숫자) 색상도 동일 톤으로 */

/* 모바일에서 폭만 변경 */
@media (max-width:640px){
  .rbv-img-meter,
  .ranked-wrap .img-meter{
    /* --w-mo 없으면 --w-pc → --w → 160px */
    --w-final: var(--w-mo, var(--w-pc, var(--w, 160px)));
  }
}

/* ====================================================
   List (목록) – ranked namespace
   (➡ 대안: 뷰에서도 동일 레이아웃을 쓰도록 .rbv-wrap에 콤마 확장)
==================================================== */
/* Match .rbv-wrap width so the list table (rendered inside .ranked-wrap)
   lines up with the hero cards on the view page, instead of bleeding out
   to the full viewport. */
.ranked-wrap{
  padding:15px;
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
}

/* SEO intro/outro blocks (list page) — informational copy above/below the
   card grid. Width-matched to .ranked-wrap so they line up visually. */
.rb-intro {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 25px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  color: #374151;
  line-height: 1.6;
  font-size: 15px;
}
.rb-intro-top { margin-top: 8px; margin-bottom: 16px; }
.rb-intro-bot { margin-top: 16px; margin-bottom: 8px; }
.rb-intro h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: #111827; }
.rb-intro h3 { font-size: 16px; font-weight: 600; margin: 16px 0 6px; color: #1f2937; }
.rb-intro p  { margin: 0 0 10px; }
.rb-intro p:last-child { margin-bottom: 0; }
.rb-intro ul, .rb-intro ol { margin: 0 0 10px; padding-left: 20px; }
.rb-intro a { color: var(--accent, #2c73a8); text-decoration: underline; }
@media (max-width: 640px) {
  .rb-intro { padding: 14px 16px; font-size: 14px; }
  .rb-intro h2 { font-size: 18px; }
}

.ranked-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:33px}
.rank-item{position:relative;z-index:3;}

/* 리스트 전용 레이아웃(우측 CTA 컬럼)
   ⬇️ 여기부터 .rbv-wrap 컨텍스트 확장 */
.ranked-wrap .card,
.rbv-wrap .card{
  display:grid!important;
  grid-template-columns:1fr 5px 230px!important;
  gap:25px!important;
  align-items:center!important;
  position: relative;
  
}
.divider { grid-column: 2; background:#f9f9f9; height:100%;width:5px;border-radius:5px; }
.ranked-wrap .card-main,
.rbv-wrap .card-main{display:flex;flex-direction:column;gap:0;min-width:0}

.ranked-wrap .head,
.rbv-wrap .head{position:relative;display:flex;align-items:center}

/* 모바일 전용 상세보기 텍스트 토글 */
.ranked-wrap .detail-text,
.rbv-wrap .detail-text{
  display:none;margin-left:auto;font-weight:600;font-size:14px;
  border-bottom:1px solid #777;color:#777;text-decoration:none;align-self:flex-start
}

/* 제목/요약 */
.ranked-wrap .title-logo,
.rbv-wrap .title-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
/* Visible H1 next to the logo — replaces the prior visually-hidden H1 so
   Google/AI get the strongest possible title signal AND users see the
   page subject at a glance. */
/* ====================================================================
   Hero card — first card on /webhard/{site}/ detail pages.
   Sections (top→bottom):
     hero-head  → hero-chips → hero-summary → hero-proscons
     → hero-score → hero-trend → hero-tags
   The parent `.rbv-wrap .card` rule forces a 3-column grid
   (1fr 5px 230px) with !important — we have to break that off for the
   hero card so its children can flow as a single vertical column.
   ==================================================================== */
/* selector includes BOTH `.card` and `.hero-card` so it outweighs
   `.rbv-wrap .card` (specificity 2) from style.css that forces a
   3-column grid via !important. */
.rbv-wrap .card.hero-card {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 22px 24px;
}

/* ── ① hero-head : H1 + domain + tenure badge + small logo ─────── */
.rbv-wrap .hero-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 0 0 18px;
}
.rbv-wrap .hero-title-block {
  min-width: 0; flex: 1;
  display: flex; align-items: center; gap: 12px;
}
.rbv-wrap .hero-meta-stack {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px;
}
.rbv-wrap .card-title {
  font-size: 36px; font-weight: 800; color: #111827;
  line-height: 1.15; margin: 0; letter-spacing: -0.02em;
}
.rbv-wrap .hero-meta-line {
  margin: 6px 0 0; font-size: 13px; color: #6b7280;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.rbv-wrap .hero-domain {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6b7280;
}
.rbv-wrap .hero-badge {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 999px;
  background: #eef2ff; color: #4338ca;
  font-size: 10px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.4;
}
.rbv-wrap .hero-logo {
  width: 80px; height: 40px;
  object-fit: contain; flex-shrink: 0;
  opacity: 0.85; border-radius: 4px;
}

/* ── ② hero-chips : 4 key-metric chips ─────────────────────────── */
.rbv-wrap .hero-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 0 0 20px;
}
.rbv-wrap .hero-chips .chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px 10px 20px; border-radius: 8px;
  background: #f9fafb; border: 1px solid #e5e7eb;
}
.rbv-wrap .hero-chips .chip-label {
  font-size: 11px; font-weight: 500;
  color: #6b7280; letter-spacing: 0.02em;
}
.rbv-wrap .hero-chips .chip-value {
  font-size: 15px; font-weight: 700;
  color: #111827; font-variant-numeric: tabular-nums;
}
.rbv-wrap .hero-chips .chip-event {
  background: #fef2f2; border-color: #fecaca;
}
.rbv-wrap .hero-chips .chip-event .chip-value { color: #dc2626; }
/* Volume chip — show N (naver green) and G (google blue) badges inline,
   mirrors the list-page table column for cross-page consistency. */
.rbv-wrap .hero-chips .chip-volume { grid-column: span 2; }
.rbv-wrap .hero-chips .chip-volume .chip-value b {
  display: inline-block; width: 16px; height: 16px;
  margin-right: 4px; padding: 0 2px;
  font-size: 10px; line-height: 16px; font-weight: 700;
  color: #fff; text-align: center; border-radius: 3px;
  vertical-align: middle;
}
.rbv-wrap .hero-chips .chip-volume .vol-n { background: #03c75a; }
.rbv-wrap .hero-chips .chip-volume .vol-g { background: #4285f4; }
@media (max-width: 640px) {
  .rbv-wrap .hero-chips .chip-volume { grid-column: span 2; }
}

/* ── section labels (shared by summary / pros-cons / score) ────── */
.rbv-wrap .hero-section-label {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700;
  color: #6b7280; text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── ③ hero-summary : narrative one-liner ──────────────────────── */
.rbv-wrap .hero-summary { margin: 0 0 20px; }
.rbv-wrap .hero-summary-text {
  margin: 0; font-size: 15px; line-height: 1.65;
  color: #374151; word-break: keep-all;
}

/* ── ④ hero-proscons : 2-col grid of bullet lists ──────────────── */
.rbv-wrap .hero-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; margin: 0 0 20px;
}
.rbv-wrap .proscons-col {
  padding: 14px 16px; border-radius: 8px;
  border: 1px solid #e5e7eb; background: #fff;
}
.rbv-wrap .proscons-col.pros { background: #f0fdf4; border-color: #bbf7d0; }
.rbv-wrap .proscons-col.cons { background: #fef2f2; border-color: #fecaca; }
.rbv-wrap .proscons-col ul {
  margin: 0; padding: 0; list-style: none;
}
.rbv-wrap .proscons-col li {
  position: relative; padding: 4px 0 4px 16px;
  font-size: 14px; line-height: 1.5;
  color: #1f2937; word-break: keep-all;
}
.rbv-wrap .proscons-col.pros li::before {
  content: '✓'; position: absolute; left: 0;
  color: #16a34a; font-weight: 700;
}
.rbv-wrap .proscons-col.cons li::before {
  content: '×'; position: absolute; left: 0;
  color: #dc2626; font-weight: 700;
}

/* ── ⑤ hero-score : gauge + criteria text ──────────────────────── */
.rbv-wrap .hero-score { margin: 0 0 20px; }
.rbv-wrap .score-criteria {
  margin: 10px 0 0; font-size: 12px;
  color: #6b7280; line-height: 1.5; word-break: keep-all;
}

/* ── ⑥ hero-trend : single dynamic line ────────────────────────── */
.rbv-wrap .hero-trend {
  margin: 0 0 16px; padding: 10px 14px;
  background: #f9fafb; border-left: 3px solid #2563eb;
  border-radius: 4px; font-size: 13px;
  color: #4b5563; line-height: 1.7;
  display: flex; flex-direction: column; gap: 4px;
}
.rbv-wrap .hero-trend .trend-up   { color: #2563eb; font-weight: 700; }
.rbv-wrap .hero-trend .trend-down { color: #dc2626; font-weight: 700; }
.rbv-wrap .hero-trend .trend-flat { color: #6b7280; font-weight: 600; }

/* ── ⑦ hero-tags : just relax the existing card-tags spacing ───── */
.rbv-wrap .hero-tags { margin: 0; }

/* ── Mobile (≤640px) ──────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --card-pad: 16px; }
  .rbv-wrap .hero-card { padding: 18px 16px; }
  .rbv-wrap .hero-head { gap: 10px; }
  .rbv-wrap .card-title { font-size: 28px; }
  .rbv-wrap .hero-logo { width: 60px; height: 30px; }
  .rbv-wrap .hero-meta-line { font-size: 12px; gap: 6px; }
  .rbv-wrap .hero-proscons { grid-template-columns: 1fr; }
  .rbv-wrap .hero-summary-text { font-size: 14px; }
  .rbv-wrap .hero-card .hero-section-label,
  .rbv-wrap .score-criteria,
  .rbv-wrap .hero-trend,
  .rbv-wrap .hero-score,
  .rbv-wrap .hero-chips { display: none; }
}

.ranked-wrap .title-logo img,
.rbv-wrap .title-logo img{height:55px;width:auto;display:block}

.ranked-wrap .title-logo .t,
.rbv-wrap .title-logo .t{font-weight:800;color:#475467;font-size:18px}

.ranked-wrap .body,
.rbv-wrap .body{min-width:0}

.ranked-wrap .summary,
.rbv-wrap .summary{
  min-height:50px;
  margin:7px 3px 0;color:#475467;font-size:16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* 크롬/사파리 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;           /* 표준화 진행 중: 신형 브라우저 */
  word-break: keep-all;    /* 한국어 단어 유지(필요시 break-word 로 변경) */
  line-height:150%;
}

.ranked-wrap .summary .title-link,
.rbv-wrap .summary .title-link{font-weight:800;color:var(--title);text-decoration:none}

.ranked-wrap .summary .sep,
.rbv-wrap .summary .sep{margin:0 6px;color:#98a2b3}

/* view page (rbv-wrap) overrides the line-clamped summary to host a
   two-line structure: facts chip line + narrative blurb. ranked-wrap
   (rank board) still uses the original 2-line clamp behaviour. */
.rbv-wrap .summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: auto;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}
.rbv-wrap .summary .summary-meta {
  font-size: 14px;
  color: #111827;
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
}
.rbv-wrap .summary .summary-meta strong {
  color: #2563eb;
  font-weight: 700;
  margin-right: 2px;
}
.rbv-wrap .summary .summary-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  color: #475467;
  line-height: 1.55;
}

/* 버튼 */
.ranked-wrap .card-cta,
.rbv-wrap .card-cta{
  align-self:stretch;display:flex;flex-direction:column;
  justify-content:center;align-items:stretch;gap:15px
}

/* View page (rbv-wrap) — two buttons side-by-side (50:50), always.
   No mobile-collapse, no hide — both buttons visible on every viewport.
   Gap and vertical margin pinned to --rbv-gap so the CTA strip lines
   up with the 2-col grid below (visual rhythm consistency). */
.rbv-wrap .card-cta {
  flex-direction: row;
  gap: var(--rbv-gap);
  margin: var(--rbv-gap) 0;
  padding: 0 10px;
}
.rbv-wrap .card-cta .card-btn {
  flex: 1;
  padding: 14px;
}
/* Higher specificity than style.css's .rbv-wrap .card-btn so the secondary
   button (목록으로) stays a soft grey instead of white. */
.rbv-wrap .card-cta .card-btn.btn-detail {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  font-weight: 600;
}
.rbv-wrap .card-cta .card-btn.btn-detail:hover {
  background: #e5e7eb;
  color: #374151;
}
@media (max-width: 640px) {
  /* Keep gap on the --rbv-gap variable so spacing stays in sync with
     the rest of the rbv layout when viewport shrinks. */
  .rbv-wrap .card-cta { flex-direction: row; }
  .rbv-wrap .card-cta .card-btn {
    padding: 14px;
    font-size: 16px;
  }
}
@media (max-width: 360px) {
  .rbv-wrap .card-cta .card-btn { padding: 14px; font-size: 16px; }
}

.ranked-wrap .card-cta .card-btn,
.rbv-wrap .card-cta .card-btn{text-align:center}

.ranked-wrap .card-btn,
.rbv-wrap .card-btn{
	padding:14px;border-radius:5px;font-weight:500;
  text-decoration:none;font-size:16px;border:1px solid var(--line);
  color:#777;background:#fff
}

.ranked-wrap .btn-primary,
.rbv-wrap .btn-primary{
  background-color: #2992f7; /* 기본값 */
    color: #fff;
}
.btn-primary:hover {filter:brightness(0.95)}
/* 빈 목록 */
.ranked-wrap .empty{padding:40px 16px;background:#fff;border-radius:12px;text-align:center;color:#98a2b3;border:1px dashed var(--line)}

/* 접근성 숨김 */
.ranked-wrap .visually-hidden,
.rbv-wrap .visually-hidden{
  position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap
}

/* meter block wrapper (라벨 등) - 리스트에서 재사용 */
.ranked-wrap .meter-block{display:inline-flex;flex-direction:column;gap:0;margin-top:14px}
.ranked-wrap .meter-head{display:flex;align-items:center;justify-content:flex-start}
.ranked-wrap .meter-label{font:500 12px/1 system-ui;color:#2992f7;margin-left:3px}

.gap20 {display:grid;grid-template-columns: 1fr;gap: var(--rbv-gap);margin-top: var(--rbv-gap);padding:0 10px;}

.btn-detail {display: inline-flex;align-items: center; justify-content: center; gap: 10px; text-decoration: none;}
/* ====================================================
   Responsive
==================================================== */
/* View */

/* List + View 공통 반응형 확장 */
@media (max-width:768px){
  .ranked-wrap .card,
  .rbv-wrap .card{grid-template-columns:1fr!important}
  .divider {display:none;}
  /* Mobile: hide secondary "웹하드 순위 보기" CTA on both list and view
     pages so only the primary 공식 사이트 button remains.
     !important so it wins against any inline-flex / display:flex coming
     from cards.css L1351 (.btn-detail base rule) or external CSS. */
  .btn-detail,
  .ranked-wrap .card-cta .btn-detail,
  .rbv-wrap .card-cta .btn-detail { display:none !important; }

  .ranked-wrap .detail-text,
  .rbv-wrap .detail-text{display:inline-block}

  .ranked-wrap .rank-out{display:none;}
  .meter-views {display:none!important;}
}
@media (max-width:640px){
  .ranked-wrap .summary,
  .rbv-wrap .summary{white-space:normal}
  .rbv-grid2{grid-template-columns:1fr}
  .rbv-header{grid-template-columns:1fr 50px;gap:10px;align-items:start}
  .rbv-logo {
    width: 50px;
    height: 50px;
    box-shadow:none;
    margin-top:-20px;
  }
  #container_title {position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* 호환성 유지용 */
    clip-path: inset(50%); /* 최신 표준 */
    border: 0;
    white-space: nowrap; /* 줄바꿈 방지 */}
  .rbv-card, .ranked-wrap .card {padding:10px;box-shadow: 1px 1px 1px 1px #eee;}
  .rb_bbs_wrap {padding:0;}
}

.rb_inp_wrap2 {
	display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
	margin-bottom:10px;
}

.rb_inp_wrap > div > input, .rb_inp_wrap2 > div > input {width:100%;} 

/* 스코어 블록을 세로 정렬로 강제 (텍스트 위, 막대 아래) */
.meter-inline{
  display:flex;
  align-items:flex-start;   /* 하트와 높이 자연 정렬 */
  gap:10px;
  margin-top:14px;
  width:98%;
}

.meter-inline .meter-block{
  display:inline-flex !important;
  flex-direction:column !important;   /* ⬅️ 핵심: 세로 스택 */
  flex:0 1 auto !important;
  align-items:flex-start;
  gap:4px;                            /* 텍스트-막대 간격 */
  margin:0;
    width:auto !important;

}

/* 헤더(“score” 라벨/퍼센트) 라인 높이 다듬기 */
.meter-inline .meter-head{
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1;
  margin:0;
}

/* 막대는 한 줄로 꽉 차게 */
.meter-inline .rbv-img-meter,
.meter-inline .img-meter{
  width:100%;
}

/* 하트+숫자 (막대 오른쪽이 아니라 전체 블록 오른쪽에 두지 않고, 텍스트/막대 옆에 자연 배치) */
.meter-views{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:2px;
  color:#2992f7;
  font:300 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.meter-views .ico-heart{
  width:13px; height:13px;
  vertical-align:middle;
}
.meter-views b{ font-weight:700; letter-spacing:-0.2px; }

@media (max-width:640px){
  .ranked-wrap .meter-block {display:none;}
  .meter-inline{ gap:8px; }
  .meter-views{ font-size:11px; }
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tag-item {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  color: #2992f7;         
  background: #fff;     
  border-radius: 999px;    /* pill 모양 */
  border:1px solid var(--border);
  word-spacing:-1px;
}

/* 기본: 데스크탑에서는 숨김 */
.mobile_only {
  display: none !important;
}

/* 720px 이하(모바일)에서는 표시 */
@media (max-width: 720px) {
  .mobile_only {
    display:flex !important;
  }
}

/* ===== Mobile FAB (목록/상단) ===== */
.mo-fab{
  position:fixed; right:16px; bottom:16px;
  display:flex; flex-direction:column; gap:10px;
  z-index:9999;
}
.mo-fab a, .mo-fab button{
  width:54px; height:54px; border-radius:50%;
  border:1px solid #ddd; background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  font-weight:700; font-size:14px; line-height:54px; text-align:center;
  color:#333;
}
.mo-fab .fab-list{
  background:#2992f7; /* 사이트 테마 변수 사용 */
  color:#fff; border-color:transparent; line-height:54px;
}
.mo-fab[hidden]{display:none;}

/* iOS 안전영역 대응 */
@supports(padding: max(0px)){
  .mo-fab{
    bottom:max(16px, env(safe-area-inset-bottom));
    right:max(16px, env(safe-area-inset-right));
  }
}

/* 데스크탑에서는 숨김 (사이트 모바일 기준 1024px) */
@media (min-width:1025px){
  .mo-fab{display:none !important;}
}

/* ---- score gauge (was in components/score.css) ---- */
.meter-block{display:inline-flex;flex-direction:column;gap:0;margin-top:14px;}
.meter-head{display:flex;align-items:center;justify-content:flex-start;}
.meter-label{font:500 12px/1 system-ui;color:#2c73a8;margin-left:3px;}

/* 막대 공통 */
.rbv-img-meter,
.ranked-wrap .img-meter{--h:27px;--on:#2c73a8;--off:#e5e7eb;--img:url('img/seg.png');--w-final:var(--w-pc, var(--w));display:flex;align-items:center;gap:6px;}

/* ⬇️ 수정: width를 --w에서 --w-final 우선으로 */
.rbv-img-meter .bar,
.ranked-wrap .img-meter .bar{position:relative;width:var(--w-final, var(--w));height:var(--h);line-height:0;}

.rbv-img-meter .track,.rbv-img-meter .fill,
.ranked-wrap .img-meter .track,.ranked-wrap .img-meter .fill{position:absolute;inset:0;background-color:var(--off);-webkit-mask:var(--img) left/100% 100% no-repeat;mask:var(--img) left/100% 100% no-repeat;}
.rbv-img-meter .fill,
.ranked-wrap .img-meter .fill{background:var(--on);clip-path:inset(0 calc(100% - var(--pct)) 0 0);background-color:var(--on);}
.rbv-img-meter .val,
.ranked-wrap .img-meter .val{font:700 12px/1 system-ui;color:#2c73a8;}

/* ⬇️ 추가: 모바일에서 폭만 변경 */
@media (max-width:767.98px){
  .rbv-img-meter,
  .ranked-wrap .img-meter{
    /* --w-mo 없으면 --w-pc → --w → 160px */
    --w-final: var(--w-mo, var(--w-pc, var(--w, 160px)));
  }
}

/* ---- plan + event list (was duplicated in cards/plan.php + cards/event.php) ---- */
.ps-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ps-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.ps-list .label { white-space: nowrap; }
.ps-list .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: .2px;
}
.ps-list li.is-hot .label,
.ps-list li.is-hot .price { font-weight: 700; font-size: 16px; color: #444; }
@media (max-width: 480px){ .ps-list { gap: 4px; } }

/* ---- pros/cons list — CSS-only restyle, prose preserved ---------------- */
/* Markup stays as <ul class="rbv-proscons-list"><li>[Label] Description</li></ul>.
   Only visual chrome (bullet, typography, spacing) is changed so that the
   list reads as one natural sentence per item — preserves SEO crawl and
   AI-citation context — while sitting in the same muted-card rhythm as
   plan/event lists. */
.rbv-proscons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.rbv-proscons-list li {
  position: relative;
  padding-left: 18px;
}
.rbv-proscons-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.rbv-pros-card .rbv-proscons-list li::before { background: #10b981; }
.rbv-cons-card .rbv-proscons-list li::before { background: #ef4444; }
@media (max-width: 480px) {
  .rbv-proscons-list { gap: 8px; font-size: 14px; }
  .rbv-proscons-list li { padding-left: 16px; }
}

/* ---- cs card (was in cards/cs.php) ---- */
.cs       { font-size: 2em; font-weight: bold; color: #444; }
.cs_time  { margin-top: 15px; }
.cs_bold  { color: #666; font-weight: 700; }

/* ---- opened card (was in cards/opened.php) ---- */
.d_open                  { font-size: 2em; font-weight: 700; }
.d_open > span:nth-child(2) { color: #444; }
.rbv-kv                  { margin-top: 15px; }
.rbv-count               { font-weight: 800; }

/* ---- search-volume card (was in cards/search_volume.php) ---- */
#sv-card{
  --sv-track: rgba(2,32,71,.10);
  --sv-grad-start:#4F75FF;
  --sv-grad-end:#2D5BFF;
  --sv-dot:#D7DEFF;
  --sv-stroke:15px;
  --sv-value-font: 'font-B', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --sv-value-size:25px;
  --sv-value-weight:600;
  --sv-value-color:#111827;
  --sv-value-dy: 5px;
  --sv-value-tracking: -.5px;
  --sv-unit-size:12px;
  --sv-unit-weight:400;
  --sv-unit-color:#fff;
  --sv-caption-size:15px;
  --sv-caption-weight:600;
  --sv-caption-color:#111827;
  --sv-caption-dy:1px;
}
.sv-wrap   { filter: drop-shadow(0 4px 10px rgba(79,117,255,.08)); }
.sv-canvas { width: 100%; height: clamp(130px, 50vw, 220px); display: block; }
.sv-grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; align-items: center; justify-items: center; }
.sv-fallback { font-size: 13px; color: #9ca3af; margin-top: 12px; display: none; text-align: center; }
.sv-fallback.is-shown { display: block; }
@media (max-width:620px){
  #sv-card{ --sv-stroke:11px; --sv-value-size:20px; --sv-caption-size:15px; }
  .sv-canvas{ height: clamp(180px, 70vw, 280px); }
}
@media (max-width:360px){
  #sv-card{ --sv-stroke:8px; --sv-value-size:15px; --sv-caption-size:12px; }
  .sv-canvas{ height: clamp(110px, 50vw, 170px); }
}

/* ---- rank-graph card (was in cards/rank_graph_card.php, ex-Tailwind) ---- */
.rg-card           { /* inherits .rbv-card box */ }
.rg-head           { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rg-title          { font-size: 16px; font-weight: 600; color: #4f46e5; margin: 0; }
.rg-dl             { font-size: 11px; padding: 4px 10px; border: 0; border-radius: 6px;
                     background: #eef2ff; color: #4f46e5; cursor: pointer; transition: background .15s; }
.rg-dl:hover       { background: #e0e7ff; }
.rg-frame          { width: 92%; max-width: 900px; margin: 0 auto; }
.rg-canvas-wrap    { height: 168px; }
@media (min-width: 640px){ .rg-canvas-wrap { height: 184px; } }
.rg-info           { font-size: 11px; color: #64748b; margin-top: 8px; }
.rg-legend         { display: flex; flex-wrap: wrap; gap: 6px; overflow-x: auto; margin-top: 8px; min-height: 30px; }

/* ---- buttons (was btn.php + btn2.php + cta_official.php) ---- */
.card-cta          { display: flex; gap: 8px; margin-top: 12px; padding: 0 10px; }
.card-btn          { flex: 1; padding: 14px; text-align: center; text-decoration: none;
                     border-radius: 6px; font-weight: 600; font-size: 16px;
                     display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                     transition: filter .15s, transform .05s; }
.card-btn:active   { transform: translateY(1px); }
.card-btn.btn-detail  { background: #f3f4f6; color: #555; border: 1px solid #e5e7eb; }
.card-btn.btn-detail:hover { background: #e5e7eb; }
.card-btn.btn-primary { background: #2563eb; color: #fff; }
.card-btn.btn-primary:hover { filter: brightness(1.05); }
@media (max-width: 480px){
  .card-cta { flex-direction: column; }
}
/* ===========================================================================
   Webhard ranking comparison table — appended to cards.css
   Lean styling so the table reads as plain semantic markup to crawlers but
   stays scannable for humans.
   =========================================================================== */

.rank-table-section { margin: 0 0 30px; }
.rank-table-h2 { font-size: 20px; font-weight: 700; margin: 8px 0 8px; color: #111; }
.rank-table-intro { font-size: 14px; line-height: 1.6; color: #444; margin: 0 0 14px; word-break: keep-all; }

.rank-table-wrap { width: 100%; overflow-x: auto; }
.rank-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.rank-table caption { caption-side: top; text-align: left; font-size: 12px; color: #6b7280; padding-bottom: 8px; }

.rank-table thead th {
  background: #f3f6fa;
  color: #1f2937;
  font-weight: 700;
  padding: 14px 14px;
  border-bottom: 2px solid #2c73a8;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.01em;
}
/* Header alignment mirrors the data cell alignment per column,
   so column titles sit visually above their values. */
.rank-table thead .col-rank,
.rank-table thead .col-tenure { text-align: center; }
.rank-table thead .col-score,
.rank-table thead .col-volume,
.rank-table thead .col-price  { text-align: right; }
.rank-table thead .col-name,
.rank-table thead .col-desc   { text-align: left; }

.rank-table tbody th,
.rank-table tbody td {
  padding: 16px 14px;
  border-bottom: 1px solid #eef2f7;
  /* Top-align everything so 2-line cells (col-volume / col-price) don't push
     1-line cells off-baseline. First text-line of every cell starts at the
     same y-position. */
  vertical-align: middle;
  word-break: keep-all;
  line-height: 1.55;
}
.rank-table tbody tr { transition: background .15s; }
.rank-table tbody tr:hover { background: #f5f9fd; }
.rank-table tbody tr:last-child th,
.rank-table tbody tr:last-child td { border-bottom: 0; }

.rank-table .col-rank   { width: 52px; text-align: center; font-weight: 800; color: #2c73a8; font-size: 18px; line-height: 1.3; }
.rank-table .col-name   { min-width: 90px; }
.rank-table .col-name { text-align: center; }
.rank-table .col-name a {
  color: #111;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rank-table .col-name a:hover .rank-name { color: #2c73a8; }
.rank-table .col-name .rank-name {
  display: inline-block;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  transition: color .15s;
}
.rank-table .col-name .site-logo {
  width: 64px;
  height: 34px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}
.rank-table .col-score  { width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.rank-table .col-tenure { width: 80px; text-align: center; color: #555; }
.rank-table .col-volume { width: 130px; text-align: right; font-variant-numeric: tabular-nums; color: #555; line-height: 1.5; }
.rank-table .col-volume .vol-row { display: block; }
.rank-table .col-volume .vol-row b { display: inline-block; width: 14px; font-size: 10px; font-weight: 700; color: #fff; border-radius: 3px; text-align: center; margin-right: 4px; }
.rank-table .col-volume .vol-row:nth-child(1) b { background: #03c75a; }   /* Naver */
.rank-table .col-volume .vol-row:nth-child(2) b { background: #4285f4; }   /* Google */
.rank-table .col-price  { width: 110px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #111; line-height: 1.4; }
.rank-table .col-price .event-price { display: block; font-size: 11px; font-weight: 500; color: #dc2626; margin-top: 2px; }
.rank-table .col-desc   { color: #555; font-size: 13px; }
.rank-table .col-detail { width: 80px; }
.rank-table .col-detail a { color: #2563eb; text-decoration: none; font-size: 13px; }
.rank-table .col-cta    { width: 90px; text-align: center; }
.rank-table-cta {
  display: inline-block;
  background: #2c73a8;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: filter .15s, transform .05s;
}
.rank-table-cta:hover { filter: brightness(1.08); }
.rank-table-cta:active { transform: translateY(1px); }

.rank-table-source { font-size: 12px; color: #9ca3af; margin-top: 10px; }

/* Mobile — keep ALL columns visible for mobile-first indexing parity
   with desktop. The wrapper (.rank-table-wrap) is overflow-x:auto so
   users can scroll horizontally; tightening padding/fonts to keep as
   much in view as possible. */
@media (max-width: 640px) {
  .rank-table { font-size: 13px; }
  .rank-table thead th { padding: 10px 8px; font-size: 12px; }
  .rank-table tbody th,
  .rank-table tbody td { padding: 12px 8px; }
  .rank-table .col-rank   { width: 34px; font-size: 15px; }
  .rank-table .col-name   { min-width: 80px; }
  .rank-table .col-name a { gap: 4px; }
  .rank-table .col-name .rank-name { font-size: 13px; }
  .rank-table .col-name .site-logo { width: 48px; height: 26px; }
  .rank-table .col-score  { width: 54px; font-size: 14px; }
  .rank-table .col-tenure { width: 56px; }
  .rank-table .col-volume { width: 110px; }
  .rank-table .col-price  { width: 90px; }
  .rank-table .col-price .event-price { font-size: 10px; }
  .rank-table .col-desc   { min-width: 160px; font-size: 12px; }
}