@charset "utf-8";
/* column 읽기 전용. 공통 style.css 뒤에서 불러옵니다. */
#container {
    margin:0
}
#bo_v.hc-reading {
    --hc-text: #242b28;
    --hc-muted: #79817c;
    --hc-line: #e1e6e1;
    --hc-accent: #496650;
    --hc-soft: #f3f6f1;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 40px;
    padding: 0 0 64px;
    background: #fff;
    color: var(--hc-text);
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.7;
}
.h-wrap {
    max-width:800px;
    margin:0 auto;
}
#bo_v.hc-reading *, #bo_v.hc-reading *::before, #bo_v.hc-reading *::after { box-sizing: border-box; }
#bo_v.hc-reading > header { padding: 40px 0 50px; }
#bo_v.hc-reading .hc-reading-label { margin: 0 0 20px; color: var(--hc-accent); font-size: 11px; font-weight: 700; letter-spacing: 3px; opacity:0.5}
#bo_v.hc-reading #bo_v_title { margin: 0; padding: 0; line-height: 1.4; }
#bo_v.hc-reading #bo_v_title .bo_v_tit { 
    display: block; 
    margin: 0; 
    font-size: clamp(21px, 3.2vw, 30px); 
    font-weight: 600; 
    letter-spacing: -1.3px; 
    line-height: 1.4; 
    word-break: keep-all; 
    overflow-wrap: anywhere; 
}
#bo_v.hc-reading #bo_v_title .bo_v_cate { margin-bottom: 16px; padding: 5px 10px; background: var(--hc-soft); color: var(--hc-accent); font-size: 12px; font-weight: 500; border-radius: 5px; }
#bo_v.hc-reading #bo_v_top { 
    display: flex; 
    justify-content: flex-end; 
    position:sticky;
    top:0;
    padding: 1rem 0 20px; 
    background:#fff;
    /* border-bottom: 1px solid var(--hc-line);  */
    z-index: 33;
}
#bo_v.hc-reading #bo_v_top .bo_v_com { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; float: none; background: transparent; }
#bo_v.hc-reading #bo_v_top .bo_v_com > li { float: none; width: auto; margin: 0; background: transparent; }
#bo_v.hc-reading #bo_v_top .btn_b01 { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 7px; 
    min-height: 36px; 
    width: auto; 
    height: auto; 
    font-family: -apple-system,BlinkMacSystemFont,Malgun Gothic,맑은 고딕,helvetica,Apple SD Gothic Neo,sans-serif;
    font-weight:700;
    padding: 0 12px; 
    border: 0; 
    border-radius: 6px; 
    background: #eff0f2; 
    color: #000; 
    /* font: inherit;  */
    font-size: 12px; 
    line-height: 1.4; 
    text-decoration: none; 
    box-shadow: none; 
}
#bo_v.hc-reading #bo_v_top .btn_b01:hover { color: var(--hc-accent); border-color: var(--hc-accent); }
#bo_v.hc-reading #bo_v_top .btn_b01 .sound_only { position: static !important; display: inline; width: auto !important; height: auto !important; margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none; font-size: inherit; line-height: inherit; }
#bo_v.hc-reading #bo_v_top .more_opt { top: 44px; width: 128px; padding: 0; border-color: var(--hc-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(36,43,40,.08); }
#bo_v.hc-reading #bo_v_top .more_opt li { width: 100%; padding: 10px 12px; font-size: 13px; }
#bo_v.hc-reading #bo_v_info { 
    font-size: 12px; 
    padding: 1rem; 
    /* background: transparent;  */
    background:#fafafa;
    border: 0; 
    /* border-bottom: 1px solid var(--hc-line);  */
    color: var(--hc-muted); 
    border-radius:6px;
    margin-top:20px;
}
#bo_v.hc-reading #bo_v_info .profile_info { display: flex; align-items: center; float: none; margin: 0; gap: 12px; }
#bo_v.hc-reading #bo_v_info .profile_info .pf_img { float: none; margin: 0; flex: 0 0 auto; }
.pf_img {display:none}
#bo_v.hc-reading #bo_v_info .profile_info .pf_img img { width: 36px; height: 36px; }
#bo_v.hc-reading #bo_v_info .profile_info_ct { float: none; padding: 0; line-height: 1.8; }
#bo_v.hc-reading #bo_v_info .sv_member { color: var(--hc-text); display:none }
#bo_v.hc-reading #bo_v_info a { color: inherit; }
#bo_v.hc-reading #bo_v_atc { 
    padding-top: 100px; 
    min-height: 0; 
}
#bo_v.hc-reading #bo_v_share { padding: 0 0 20px; display:none }
#bo_v.hc-reading #bo_v_share .btn { font-size: 12px; border-color: var(--hc-line); color: var(--hc-muted); }
#bo_v.hc-reading #bo_v_con { margin: 12px 0 48px; min-height: 160px; font-size: 13pt; line-height: 1.9; word-break: normal; overflow-wrap: anywhere; overflow: visible; }
#bo_v.hc-reading #bo_v_con p { line-height: inherit; }
#bo_v.hc-reading #bo_v_con a { color: var(--hc-accent); text-decoration: underline; text-underline-offset: 4px; }
#bo_v.hc-reading #bo_v_con img, #bo_v.hc-reading #bo_v_img img { max-width: 100%; height: auto; border-radius: 10px; }
#bo_v.hc-reading #bo_v_con iframe, #bo_v.hc-reading #bo_v_con video { max-width: 100%; }
#bo_v.hc-reading #bo_v_con table { display: block; max-width: 100%; overflow-x: auto; }
#bo_v.hc-reading #bo_v_file li, #bo_v.hc-reading #bo_v_link li { display: flow-root; margin: 12px 0; padding: 16px; border-color: var(--hc-line); background: var(--hc-soft); box-shadow: none; }
#bo_v.hc-reading #bo_v_file a, #bo_v.hc-reading #bo_v_link a { float: none; color: var(--hc-accent); overflow-wrap: anywhere; }
#bo_v.hc-reading #bo_v_file .bo_v_file_cnt, #bo_v.hc-reading #bo_v_link .bo_v_link_cnt { font-size: 11px; }
#bo_v.hc-reading .bo_v_nb { margin: 40px 0 0; padding: 0; list-style: none; font-size: 13px; }
#bo_v.hc-reading .bo_v_nb li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 18px 0; border-color: var(--hc-line); }
#bo_v.hc-reading .bo_v_nb li:hover { background: var(--hc-soft); }
#bo_v.hc-reading .bo_v_nb .nb_tit { flex: 0 0 72px; padding: 0; color: var(--hc-muted); }
#bo_v.hc-reading .bo_v_nb li > a { flex: 1; min-width: 0; color: var(--hc-text); overflow-wrap: anywhere; }
#bo_v.hc-reading .bo_v_nb .nb_date { float: none; color: var(--hc-muted); font-size: 11px; }
#bo_v.hc-reading .hc-reading-bottom { margin: 32px 0 40px; text-align: center; }
#bo_v.hc-reading .hc-reading-list { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--hc-line); border-radius: 6px; color: var(--hc-accent); font-size: 13px; text-decoration: none; }
#bo_v.hc-reading .cmt_btn { margin-top: 40px; border-color: var(--hc-line); }
#bo_v.hc-reading .cmt_btn .total { color: var(--hc-accent); }
#bo_v.hc-reading .cmt_btn .total::after { background: var(--hc-accent); }
#bo_v.hc-reading #bo_vc_empty { padding: 40px 0 !important; font-size: 13px; }
#bo_v.hc-reading #bo_vc article .cm_wrap { width: calc(100% - 60px); }
#bo_v.hc-reading .bo_vc_w textarea { padding: 16px; border-color: var(--hc-line); border-radius: 6px; box-shadow: none; font-size: 14px; }
#bo_v.hc-reading .bo_vc_w .btn_submit { background: var(--hc-accent); border-color: var(--hc-accent); color: #fff; }
#bo_v.hc-reading a:focus-visible, #bo_v.hc-reading button:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 3px; }


/* 상단 버튼 영역 */
#bo_v.hc-reading #bo_v_top {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding:10px 1rem 10px;
}

/* 버튼을 전체 폭에 배치 */
#bo_v.hc-reading #bo_v_top .bo_v_com {
    width: 100%;
    align-items: center;
    justify-content: flex-end;
}

/* 첫 번째 목록 버튼만 왼쪽으로 */
#bo_v.hc-reading #bo_v_top .bo_v_com > li:first-child {
    margin-right: auto;
}

/* 관련 링크 섹션 */
#bo_v.hc-reading #bo_v_link {
    margin-top: 32px;
}

#bo_v.hc-reading #bo_v_link h2 {
    position: static;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--hc-muted);
    overflow: visible;
}

#bo_v.hc-reading #bo_v_link ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 링크 카드 */
#bo_v.hc-reading #bo_v_link li {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 5px 16px;
    margin: 10px 0;
    padding: 20px 24px;
    /* border: 1px solid #e3e9e3; */
    border:0;
    border-radius: 12px;
    background: #fafbf9;
    box-shadow: none;
    transition: border-color .25s ease,
                background-color .25s ease;
}

#bo_v.hc-reading #bo_v_link li:hover {
    border-color: #b8c9bc;
    background: #f3f6f1;
}

/* 작은 아이콘 배지 */
#bo_v.hc-reading #bo_v_link li > i {
    grid-column: 1;
    /* grid-row: 1 / 3; */
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: #edf2eb;
    color: #6d8773;
    font-size: 17px;
}

/* 주소와 이동 화살표 */
#bo_v.hc-reading #bo_v_link li > a {
    grid-column: 2;
    grid-row: 1;
    float: none;
    display: block;
    padding-right: 28px;
    color: #354c3b;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere;
}

#bo_v.hc-reading #bo_v_link li > a strong {
    font-weight: 500;
}

#bo_v.hc-reading #bo_v_link li > a::after {
    content: "↗";
    position: absolute;
    top: 22px;
    right: 24px;
    color: #8fa494;
    font-size: 18px;
    transition: color .25s ease;
}

#bo_v.hc-reading #bo_v_link li > a:hover {
    color: var(--hc-accent);
    text-decoration: none;
}

#bo_v.hc-reading #bo_v_link li > a:hover::after {
    color: var(--hc-accent);
}

/* 연결 횟수 */
#bo_v.hc-reading #bo_v_link li > br {
    display: none;
}

#bo_v.hc-reading #bo_v_link .bo_v_link_cnt {
    grid-column: 2;
    grid-row: 2;
    color: #929c94;
    font-size: 11px;
    line-height: 1.5;
}

#bo_v.hc-reading #bo_v_link li > i {
    grid-row: 1 / 3;
}

#bo_v.hc-reading #bo_v_link li > a {
    grid-row: 1;
}

#bo_v.hc-reading #bo_v_link .bo_v_link_cnt {
    grid-column: 2;
    grid-row: 2;
}








/* 읽기 화면 상단 버튼 아이콘 */
#bo_v_top .hc-action-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

@media (max-width: 600px) {
    #bo_v.hc-reading #bo_v_link li {
        padding: 18px;
        gap: 5px 12px;
    }

    #bo_v.hc-reading #bo_v_link li > a::after {
        top: 20px;
        right: 18px;
    }
}


@media (max-width: 600px) {
    #bo_v.hc-reading { padding: 24px 20px 40px; margin-bottom: 24px; }
    #bo_v.hc-reading > header { padding: 30px 0 20px; }
    #bo_v.hc-reading #bo_v_title .bo_v_tit { letter-spacing: -.8px; }
    #bo_v.hc-reading #bo_v_info { padding-bottom: 24px; }
    #bo_v.hc-reading #bo_v_top .bo_v_com { gap: 6px; }
    #bo_v.hc-reading #bo_v_top .btn_b01 { padding-inline: 9px; }
    #bo_v.hc-reading #bo_v_con { font-size: 13pt; margin-bottom: 36px; }
    #bo_v.hc-reading .bo_v_nb .nb_date { display: none; }
}




/* 상단 버튼 바 */
#bo_v.hc-reading {
    --hc-toolbar-height: 56px;
}

#bo_v.hc-reading #bo_v_top {
    position: sticky;
    top: 0;
    z-index: 33;
    min-height: var(--hc-toolbar-height);
    /* background: #fff !important; */
}

/* 고정 시작 위치를 확인하는 기준점 */
#bo_v.hc-reading .hc-heading-anchor {
    height: 0;
    margin: 0;
    padding: 0;
}

/* 제목 영역 */
#bo_v.hc-reading .hc-sticky-heading {
    position: sticky;
    top: var(--hc-toolbar-height);
    top:0;
    z-index: 32;
    padding-top:20px;
    padding-bottom: 20px;
    background: #fff;

    transform: translateY(0);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* 아래로 스크롤하면 제목 숨김 */
/* #bo_v.hc-reading .hc-sticky-heading.hc-heading-hidden {
    transform: translateY(
        calc(-100% - var(--hc-toolbar-height))
    );
    pointer-events: none;
} */

/* 제목 안쪽 여백 */
#bo_v.hc-reading .hc-sticky-heading > header {
    padding: 0;
}


/* 버튼 바와 제목을 같은 속도로 이동 */
#bo_v.hc-reading #bo_v_top,
#bo_v.hc-reading .hc-sticky-heading {
    transform: translateY(0);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* 두 영역을 동일한 거리만큼 위로 숨김 */
#bo_v.hc-reading #bo_v_top.hc-heading-hidden,
#bo_v.hc-reading .hc-sticky-heading.hc-heading-hidden {
    transform: translateY(
        calc(0px - var(--hc-reading-hide-distance))
    );
    pointer-events: none;
}





@media (max-width: 600px) {
    #bo_v.hc-reading #bo_v_top {
        padding:0;
    }
    #bo_v.hc-reading .hc-sticky-heading > header {
        padding: 0 0 20px;
    }
    #bo_v.hc-reading .hc-sticky-heading {
        padding-bottom:0;
        padding-top:80px
    }
    #bo_v.hc-reading .hc-reading-label {
        display:none
    }
}


#bo_v.hc-reading #bo_v_link .hc-related-title,
#bo_v.hc-reading #bo_v_link .hc-related-url {
    display: block;
}

#bo_v.hc-reading #bo_v_link .hc-related-url {
    margin-top: 6px;
    font-size: 12px;
    overflow-wrap: anywhere;
}




/* 본문 글자 크기 고정: 붙여넣은 인라인 크기도 덮어쓰기 */
/* #bo_v.hc-reading #bo_v_con,
#bo_v.hc-reading #bo_v_con * {
    font-size: 13pt !important;
} */

/* 읽기 화면 하단: 홈 + 칼럼 목록 */
#bo_v.hc-reading .hc-reading-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

#bo_v.hc-reading .hc-reading-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

#bo_v.hc-reading .hc-reading-home .hc-action-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 하단 버튼: 한 줄에 하나씩 */
/* #bo_v.hc-reading .hc-reading-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

#bo_v.hc-reading .hc-reading-bottom .hc-reading-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
} */

/* 하단 버튼: 홈 30% / 칼럼 목록 70% */
#bo_v.hc-reading .hc-reading-bottom {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    align-items: stretch;
    gap: 10px;
}

#bo_v.hc-reading .hc-reading-bottom .hc-reading-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 본문 해시태그 뱃지 */
#bo_v_con .hc-hashtag {
    display: inline-block;
    vertical-align: baseline;
    margin: 3px 2px 3px 0;
    padding: 5px 11px;
    border: 1px solid rgba(112, 145, 122, .22);
    border-radius: 999px;
    background: rgba(112, 145, 122, .09);
    color: #526e5b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}