@charset "UTF-8";
@import url(./_token.css);

/* =======================================================
    reset 
======================================================= */
*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; font-size: 1em; font-family: inherit; color: inherit; outline: none; }
html { overflow-y: scroll; }
html.scroll-none { overflow-y: hidden; }
header, footer, section, article, aside, nav, main, hr, figure, figcaption, details, summary { display: block; }
label, input, button, select { vertical-align: middle; }
h1, h2, h3, h4, h5, h6, th, dt { font-weight: inherit; }
strong { font-weight: 700; }
b { font-weight: 600; }
small { font-size: 0.875em; }
img { vertical-align: top; }
a { text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr, fieldset { border: none; }
textarea { width: 100%; resize: vertical; }
input, select, textarea, button, a { transition: var(--ts-sm); }
button { background-color: transparent; border-color: transparent; }
button, label, [type="submit"], [type="button"] { cursor: pointer; }
::-moz-placeholder, ::placeholder, .placeholdersjs { opacity: 0.7; }
input, select, textarea, button { outline: 1px solid transparent; outline-offset: -1px; }
input:focus, select:focus, textarea:focus, button:focus { outline: 1px solid var(--primary-hv); outline-offset: -1px; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1); position: relative; }
::selection { background-color: var(--primary-bg); color: var(--primary-dk); }

/* =======================================================
    default 
======================================================= */
/* 화면낭독기 사용자용 */
caption, legend,
.sr_only, #hd_login_msg, 
.sound_only, .msg_sound_only { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; }

/* 본문 바로가기 */
#skip_to_container a { position: fixed; left: 0; right: 0;; top: 0; z-index: var(--z-fixed); width: 100%; font-size: 1.25em; padding: 0.75em 1em; color: #fff; background-color: rgba(0,0,0,0.6); text-align: center; outline: none; backdrop-filter: blur(0.2em); transform: translateY(-100%); }
#skip_to_container a:focus { transform: translateY(0); }
#skip_to_container a:hover { background-color: rgba(0,0,0,0.8); }

/* ie6 이미지 너비 지정 */
.img_fix { width: 100%; height: auto; }

/* 자바스크립트 alert 대안 */
#validation_check { max-width: var(--container-xxs); width: 100%; margin: 0 auto; height: calc(var(--vh) * 100); display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 1.5em; }
#validation_check h1 { font-size: 1.375em; font-weight: 700; }
#validation_check p { width: 100%; font-size: 1em; padding: 1em 1.25em; border: 1px solid #ddd; }

/* cheditor 이슈 */
.cheditor-popup-window *, 
.cheditor-popup-window *::before, 
.cheditor-popup-window *::after { box-sizing: content-box; }

/* ckeditor 단축키 */
.smarteditor2 { position: relative; }
.wr_content.smarteditor2 { flex-direction: column; gap: 0.25em; }
.cke_sc { font-size: 0.75rem; margin-bottom: 0.5em; position: relative; display: flex; justify-content: flex-end; align-items: center; align-self: flex-end; }
.btn_cke_sc_close { display: none; }
.btn_cke_sc { display: inline-flex; justify-content: center; align-items: center; background-color: #fafafa; border: 1px solid #ddd; color: #686868; padding: 0 0.5em; height: 1.875em; border-radius: var(--radius-xs); }
.cke_sc_def { position: absolute; top: 100%; right: 0; margin-top: 0.25em; z-index: var(--z-dropdown); overflow: hidden; border: 1px solid #eee; border-radius: var(--radius-sm); background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(0.1em); box-shadow: var(--shadow-sm); }
.cke_sc_def dl { display: grid; grid-template-columns: repeat(4,1fr); text-align: left; white-space: nowrap; }
.cke_sc_def dt, .cke_sc_def dd { padding: 0.5em 1em; }
.cke_sc_def dt { font-weight: 600; }

/* 캡챠 자동등록방지 기본 */
#captcha { font-size: 0.8125rem; display: inline-grid; grid-template-columns: repeat(4, max-content); gap: 0.25em 0.25em; text-align: left; }
#captcha_img, #captcha_key, #captcha button { height: 3em; border: 1px solid #ddd; }
#captcha_info { grid-column: 1/-1; color: #999; }
#captcha_key { padding: 0 0.375em; font-size: 1.5em; height: 2em; width: 5.5em; }
#captcha button { aspect-ratio: 1/1; text-indent: -999px; overflow: hidden; color: #999; background-color: #fafafa; }
#captcha button:hover { background-color: #f3f3f3; color: #333; }
#captcha button::before { font-family: 'remixicon'; display: flex; justify-content: center; align-items: center; text-indent: 0; width: 100%; height: 100%; font-size: 1.375em; transition: color var(--ts-sm); }
#captcha_mp3::before { content: "\f2a1"; }
#captcha_reload::before { content: "\f33e"; }

/* 필수입력 */
.require { color: var(--error-hv); font-style: normal; vertical-align: top; line-height: 1; }
.required { background: url('../img/require.png') no-repeat right top !important; }

/* 읽기전용,비활성화 */
.readonly, .disabled { filter: grayscale(1); background: #f5f5f5 !important; color: #686868; cursor: default; }
.readonly:focus, .disabled:focus { box-shadow: none; outline: none; }

/* 자료 없는 목록 */
.empty_table, .empty_list, .empty_li { color: #999; text-align: center; grid-column: 1/-1; flex-grow: 1; width: 100%; padding: 8em 0 !important; }

/* 폼스타일 */
.frm_input, select, textarea { background-color: #fff; border: 1px solid #ddd; border-radius: var(--radius-xs); }
.frm_input, select { padding: 0.625em; } 
textarea { padding: 0.425em 0.625em; min-height: 8em; line-height: 1.4; vertical-align: top; } 
.full_input { width: 100%; }
.half_input { width: calc((100% - 1em)/2); }
.frm_address { display: flex; flex-wrap: wrap; gap: 0.5em; }
.twopart_input { flex-grow: 1; }
.frm_info { font-size: 0.9375em; color: #999; display: flex; justify-content: flex-start; align-items: flex-start; gap: 0.25em; padding: 0.25em 0; }
.frm_info i { font-size: 1.125em; line-height: 1.3; }

/* 체크박스, 라디오 */
.chk_wrap { display: flex; justify-content: flex-start; align-items: center; gap: 0.5em; }
.chk_box { display: inline-flex; justify-content: flex-start; align-items: center; }
.chk_box input { display: none; }
.chk_box label { display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.25em; font-weight: 400; line-height: 1; vertical-align: top; font-size: 0.9375em; }
.chk_box label span { font-size: 1.125em; background-color: #fff; border: 1px solid #bbb; display: block; width: 1em; height: 1em; border-radius: var(--radius-xs); transition: var(--ts-sm); }
.chk_box input[type=checkbox] + label span { background: #fff url(../img/chk.png) no-repeat center; }
.chk_box input[type=checkbox]:checked + label span { border-color: var(--primary); background-color: var(--primary); }
.chk_box input[type=radio] + label span { border-radius: var(--radius-full); }
.chk_box input[type=radio]:checked + label span { border: 0.3em solid var(--primary); background-color: #fff; }

/* 버튼 */
.btn, 
.btn01, .btn02, 
.btn_submit, .btn_cancel, .btn_close, .btn_frmline,
.btn_admin, .btn_b01, .btn_b02, .btn_b03, .btn_b04 { display: inline-flex; justify-content: center; align-items: center; line-height: 1; border: 1px solid transparent; vertical-align: top; border-radius: var(--radius-xs); gap: 0.25em; }
.btn01 { color: #686868; border-color: #dddddd; background-color: #f5f5f5; }
.btn02 { color: #ffffff; border-color: #686868; background-color: #686868; }
.btn_submit  { color: #ffffff; border-color: var(--primary); background-color: var(--primary); }
.btn_cancel  { color: var(--primary); border-color: var(--primary); }
.btn_close   { color: #686868; border-color: #eeeeee; background-color: #eeeeee; }
.btn_frmline { color: #ffffff; border-color: #333333; background-color: #333333; flex-shrink: 0; padding: 0 1.25em; gap: 0.5em; align-self: stretch; }

.btn_confirm { display: flex; justify-content: center; gap: 0.5em; margin-top: 2em; }
.btn_confirm a,
.btn_confirm button { flex: 1 1 20%; font-size: 1.125em; padding: 0.875em 1em; max-width: 12em; }

/* 게시판용 버튼 */
.btn_admin { color: var(--error); }
.btn_admin:hover { color: var(--error-hv); }
.btn_b01 { color: #bbb; }
.btn_b01:hover { color: #333; }
.btn_b02 { color: #ffffff; border-color: var(--primary); background-color: var(--primary); }
.btn_b03 { color: #686868; border-color: #dddddd; }
.btn_b04 { color: #686868; border-color: #eeeeee; background-color: #eeeeee; }

/* 기본테이블 */
.tbl_wrap table { border-top: 2px solid #000; }
.tbl_wrap tr { border-bottom: 1px solid #ddd; }
.tbl_wrap th,
.tbl_wrap td { padding: 1em 0.625em; }
.tbl_head01 { text-align: center; }
.tbl_head02 { text-align: left; }
.tbl_head02 th { background-color: #fafafa; }

/* 폼 테이블 */
.tbl_frm01 th { background-color: #fafafa; }

/* 테이블 항목별 정의 */
.td_board { width: 5em; }
.td_category { width: 5em; }
.td_chk { width: 2.5em; }
.td_date { width: 3.75em; }
.td_datetime { width: 6.875em; }
.td_default { width: 3.75em; }
.td_dvr { width: 6.25em; }
.td_group { width: 5em; }
.td_mb_id { width: 6.25em; }
.td_mng { width: 5em; }
.td_mngsmall { width: 6.25em; }
.td_name { width: 6.25em; }
.td_namesmall { width: 3.125em; }
.td_nick { width: 6.25em; }
.td_num { width: 3.125em; }
.td_numbig, .td_num2 { width: 5em; }
.td_stat { width: 3.75em; }
.td_statsmall { width: 3.125em; }
.td_imgsmall { width: 3.75em; }
.td_md { width: 10em; }
.td_email { width: 15em; }

/* 폼 리스트 */
.form_01 h2 { font-size: 1.125em; padding: 0.5em 0; margin-bottom: 0.5em; font-weight: 700; border-bottom: 2px solid #000; }
.form_01 ul { display: flex; flex-wrap: wrap; gap: 0.5em 0.5em; margin-bottom: 1em; }
.form_01 li:not(.half_input) { width: 100%; }

/* 사이드뷰 */
.sv_wrap { position: relative; }
.sv_member { display: inline-flex; gap: 0.25em; align-items: center; justify-content: flex-start; }
.sv_member .profile_img { width: 1.375em; }
.sv { position: absolute; top: 100%; left: 0; margin-top: 0.25em; z-index: var(--z-dropdown); overflow: hidden; border: 1px solid #eee; border-radius: var(--radius-sm); background-color: #ffffff; backdrop-filter: blur(0.1em); box-shadow: var(--shadow-sm); transition: var(--ts-md); }
.sv a { font-size: 0.875rem; height: 2em; padding: 0 0.5em; white-space: nowrap; aspect-ratio: 4.5/1; display: flex; justify-content: flex-start; align-items: center; color: #686868; }
.sv a:hover { background-color: #f3f3f3; color: #111; }
.sv { opacity: 0; transform: translateY(1em); pointer-events: none; }
.sv_on, .sv.is-open { opacity: 1; transform: translateY(0); pointer-events: auto;  }

/* 페이징 */
.pg_wrap { font-size: 0.9375em; line-height: 1.6; margin: auto; }
.pg { display: flex; justify-content: center; align-items: center; gap: 0.5em; }
.pg_current, .pg_page { width: 2.5em; gap: 0; aspect-ratio: 1/1; display: inline-flex; justify-content: center; align-items: center; border-radius: var(--radius-xs); }
.pg_current { background-color: var(--primary); color: #fff; font-weight: inherit; }
.pg_page { border: 1px solid #ddd; color: #999; }
.pg_page:hover { border-color: var(--primary); color: var(--primary); }
[class*="pg_page pg_"] { position: relative; overflow: hidden; }
[class*="pg_page pg_"]::after { width: 100%; height: 100%; display: inline-flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; background-color: #fff; font-family: "remixicon"; font-size: 1.375em; }
.pg_start::after { content:"\f2e3"; }
.pg_prev::after { content:"\ea64"; }
.pg_next::after { content:"\ea6e"; }
.pg_end::after { content:"\f2e5"; }

/* 임시저장 */
#autosave_count { font-size: 0.75em; padding: 0.25em 0.5em; line-height: 1; background-color: #fff; color: #333; }
#autosave_pop { max-width: 20em; position: absolute; top: 100%; text-align: left; transition: 0.45s ease; z-index: 100; overflow: hidden; background-color: #fff; opacity: 0; transform: translateY(1em); pointer-events: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); right: 0; margin-top: 0.25em; }
#autosave_pop_on,
#autosave_pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
#autosave_pop ul { font-size: 0.8125em; padding: 0.5em; }
#autosave_pop li { padding: 0.25em 0.5em; display: flex; justify-content: space-between; align-items: center; gap: 0.5em; }
#autosave_pop a,
#autosave_pop span { display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.25em; }
#autosave_pop a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; color: #495057; }
#autosave_pop a:hover { text-decoration: underline; }
#autosave_pop span { flex-shrink: 0; font-size: 0.9375em; color: #adb5bd; }
#autosave_pop button { height: calc(var(--em) * 0.8125 * 0.9375 * 1.5); aspect-ratio: 1/1; font-size: 0; position: relative; display: inline-block; }
#autosave_pop button::before { content: "\eb99"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(var(--em) * 0.8125 * 0.9375 * 1.25); font-family: "remixicon"; font-style: normal; transition: color var(--ts-sm); }
#autosave_pop button:hover { color: var(--error-rgb); }

/* ==============================================================
    커스텀 - 컴포넌트
============================================================== */
/* 프로필 이미지 */
img[alt=profile_image],
.profile_img img { border-radius: var(--radius-full); max-width: 100%; height: auto; border: 1px solid #e9e9e9; }

/* 배지 */
.badge { display: inline-flex; justify-content: center; align-items: center; padding: 0 0.75em;  border-radius: var(--radius-full); line-height: 1.8; background-color: var(--bg); color: var(--c); }
.badge         { --bg: var(--info-bg); --c: var(--info-hv); }
.badge.is-wait { --bg: var(--primary-bg); --c: var(--primary-hv); }
.badge.is-done { --bg: #f3f3f3; --c: #686868; }

/* 툴팁 */
.tooltip { display: inline-flex; justify-content: flex-start; align-items: flex-start; position: relative; gap: 0.25em; vertical-align: top; }
.tooltip_icon { font-size: 0.875em; padding: 0.125em 0.25em; border: 0; position: relative; z-index: var(--z-sticky); color: #686868; }
.tooltip_txt { padding: 0.4em 0.5em 0.4em 1.5em; border-radius: var(--radius-sm); position: absolute; white-space: nowrap; background-color: rgba(var(--info-rgb), 0.1); box-shadow: var(--shadow-xs); z-index: var(--z-dropdown); left: 0; font-size: 0.8125em; line-height: 1.2; backdrop-filter: blur(0.1em); pointer-events: none; top: 0.25em; opacity: 0; transition: var(--ts-sm); color: var(--info); }
.tooltip:hover .tooltip_icon { color: var(--info); }
.tooltip:hover .tooltip_txt { pointer-events: auto; opacity: 1; top: 0; } 

/* 탭메뉴 */
.tab { margin-bottom: 1.5em; }
.tab_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(3em, max-content)); gap: 1em; justify-content: start; align-items: center; }
.tab_item a { display: inline-flex; justify-content: center; align-items: center; padding: 0.5em 1em; background-color: #f3f3f3; color: #686868; border-radius: var(--radius-full); }
.tab_item:hover a { background-color: var(--primary-bg); color: var(--primary); }
.tab_item.is-active a { background-color: var(--primary); color: #fff; }

/* 폼 리스트 */
.frm_wrap { margin-bottom: 2em; }
.frm_tit { font-size: 1.25em; font-weight: 700; border-bottom: 2px solid #000; padding-bottom: 0.375em; margin-bottom: 0.5em; }
.frm_list { display: flex; flex-wrap: wrap; gap: 0.625em 0.625em; }
.frm_item { width: 100%; flex-grow: 1; }
.frm_item.half { width: calc((100% - 0.625em)/2) }
.frm_label { display: none; }
.frm_label strong { color: var(--error-hv); font-weight: 400; }
.frm_box { width: 100%; display: flex; align-items: flex-start; gap: 0.5em; position: relative; }
.frm_box .frm_input,
.frm_box .frm_att { flex-grow: 1; }
.frm_att { display: flex; justify-content: flex-start; align-items: center; color: #686868; border: 1px solid #ddd; border-radius: var(--radius-xs); transition: var(--ts-sm); }
.frm_att [type=file] { display: none; }
.frm_att .att_icon { flex-shrink: 0; padding: 0.625em 0.875em; transition: var(--ts-sm); }
.frm_att .att_input { flex-grow: 1; padding: 0.625em 0.875em 0.625em 0; border: 0; font-weight: 400; transition: var(--ts-sm); }
.frm_att .att_input:focus { outline: none; box-shadow: none; }
.frm_att:hover { border-color: var(--primary-hv); color: var(--primary); }
.frm_att:hover ::placeholder { color: var(--primary); opacity: 1; }

/* 팝업레이어 */
.popup_wrap { position: absolute; z-index: var(--z-fixed); top: 5%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(auto-fit, minmax(min-content,450px)); gap: 1.5em; pointer-events: none; }
.popup { box-shadow: var(--shadow-lg); border-radius: var(--radius-md); overflow: hidden; pointer-events: auto; }
.popup_con img { max-width: 100%; vertical-align: top; }
.popup_btns { display: flex; justify-content: flex-start; align-items: center; }
.popup_btn { font-size: 0.875em; padding: 0.625em 1em; border: 0; color: #fff; }
.popup_btn.is-reject { flex-grow: 1; text-align: left; background-color: #191919; }
.popup_btn.is-close { flex-shrink: 0; background-color: #393939; }

/* 모달창 */
.modal { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.5); z-index: var(--z-modal); display: none; }
.modal_box { width: 90%; max-width: var(--container-sm); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; display: none; }
.modal_title { padding: 0.75em 1.25em; border-bottom: 1px solid #e1e1e1; display: flex; justify-content: space-between; align-items: center; }
.modal_title h3 { font-size: 1.25em; font-weight: 700; }
.modal_close { font-size: 1.25em; border: 0; }
.modal_con { padding: 0.75em 1.25em; height: calc(var(--vh) * 60); overflow: hidden scroll; background-color: #fafafa; color: #686868; line-height: 1.5; }
.modal_open { cursor: pointer; }

/* 새창 기본 스타일 */
.new_win { font-size: 0.9375em; position: relative; }
#win_title { display: flex; align-items: center; gap: 0.5em; font-size: 1.25em; line-height: 1; padding: 0 1em; width: 100%; height: 2.75em; box-shadow: var(--shadow-sm); position: sticky; left: 0; top: 0; background-color: #fff; z-index: var(--z-fixed); }
.win_total { font-size: 0.75em; margin-left: auto; background-color: var(--c); color: #fff; }
.win_box { font-size: 0.9375em; display: flex; flex-direction: column; gap: 1em; padding: 1.25em 1em; }
.win_box .post_meta { font-size: 0.875em; }
.win_box .form_01 ul { margin-bottom: 0; }
.win_ul { display: flex; justify-content: flex-start; align-items: center; gap: 0.5em; }
.win_ul li { background-color: #f3f3f3; color: #999; border-radius: var(--radius-full); }
.win_ul li:not(.selected):hover { background-color: var(--primary-bg); color: var(--primary-hv); }
.win_ul .selected { background-color: var(--primary); color: #fff; }
.win_ul a { display: inline-flex; justify-content: center; align-items: center; padding: 0.5em 1em; }
.win_info { font-size: 0.9375em; color: #999; display: flex; justify-content: flex-start; align-items: flex-start; gap: 0.25em; }
.win_info i { font-size: 1.125em; line-height: 1.3; }
.win_btn { display: grid; grid-template-columns: repeat(auto-fit,minmax(30%, max-content)); gap: 0.5em; justify-content: center; align-items: center; margin-top: 0.5em; }
.win_btn > * { padding: 0.875em 1em; font-size: 1.1em; }

/* =======================================================
    레이아웃
======================================================= */
#debug { position: fixed; left: 0; bottom: 0; margin: 1em; background-color: rgba(0,0,0,0.6); color: #00ffd5; padding: 0.5em 1em; }

.wrapper { min-height: calc(var(--vh) * 100); display: flex; flex-direction: column; word-break: keep-all; }
.hd, .ft { flex-shrink: 0; }
.main { flex-grow: 1; position: relative; padding: 4em 0; }

.container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; }
.container.xxs { max-width: var(--container-xxs); }
.container.xxs #captcha { width: 100%; }
.container.xs { max-width: var(--container-xs); }
.container.sm { max-width: var(--container-sm); }

/* 기본 타이틀 */
.def_title { margin-bottom: 0.75em; text-align: center; }
.def_title h2 { font-size: 1.375em; font-weight: 700; }
.def_title p { font-size: 1.125em; color: #686868; }

/* 유틸리티 */
.icon { display: inline-flex; justify-content: center; align-items: center; aspect-ratio: 1/1; }
.asset { position: absolute; }
.divider { width: 0.125em; height: 0.875em; background-color: currentColor; opacity: 0.5; border-radius: var(--radius-full); display: inline-block; }
.emph { color: var(--primary); }
.ellipsis { width: 100%; display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; }

/* 모션 */
.motion-txt[data-split="chars"] .line { overflow: hidden; }
.motion-txt[data-split="words"] .line { overflow: hidden; }

/* ==============================================================
    컨텐츠
============================================================== */
.ctt_admin { text-align: right; }

/* ==============================================================
    게시판
============================================================== */
.post_box { display: flex; align-items: center; position: relative; margin: 0.5em 0; }

.post_btns { display: flex; align-items: center; }
.post_btns.is-admin { margin-left: auto; gap: 0.25em; }
.post_btns.is-admin .btn { width: 2em; aspect-ratio: 1/1; }
.post_btns.is-user .btn { padding: 0.75em 1.25em; gap: 0.5em; }
.post_btns.is-user.is-list { margin-left: auto; }
.post_btns.is-user.is-view { margin: 2em auto 0; }
.post_btns.is-user.is-view .btn_b01 { font-size: 0.9375em; font-weight: 600; }
.post_btns.is-user.is-view .btn_submit { font-size: 1.125em; min-width: 10em; }
.post_btns.is-user.is-view .disabled { opacity: 0; pointer-events: none; }

.post_opt { position: relative; }
.post_opt_list { position: absolute; top: 100%; text-align: left; transition: var(--ts-md); overflow: hidden; background-color: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(0.2em); backdrop-filter: blur(0.2em); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); right: 0; padding: 0.25em 0; opacity: 0; transform: translateY(1em); pointer-events: none; z-index: var(--z-dropdown); }
.post_opt_list li { color: #888; }
.post_opt_list li > * { padding: 0.25em 0.5em; font-size: 0.875em; display: flex; justify-content: flex-start; align-items: center; gap: 0.25em; white-space: nowrap; background-color: transparent; border: 0; }
.post_opt_list li:hover { color: #191919; }
.post_opt_list.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.post_meta { font-size: 0.9375em; display: flex; justify-content: flex-start; align-items: center; gap: 0.75em; color: #686868; }
.post_meta li { display: inline-flex; justify-content: flex-start; align-self: center; gap: 0.25em; }
.post_meta .badge { font-size: 0.9375em; }

/* 상세 */
.post_title { font-size: 1.875em; font-weight: 700; }
.post_content { border-top: 1px solid #ddd; padding: 1.5em 0; }
.post_content img { max-width: 100%; height: auto; margin-bottom: 0.625em; }
.post_att { display: flex; flex-direction: column; gap: 0.625em; }

/* 목록 */
.post_total { font-size: 0.9375em; align-self: flex-end; }
.post_search { margin-left: auto; }
.post_search .search_box { display: flex; gap: 0.5em; }
.post_search .search_select,
.post_search .search_input,
.post_search .search_btn { padding: 0.425em 0.625em; }
.post_search .search_bar { display: flex; border: 1px solid #ddd; border-radius: var(--radius-xs); }
.post_search .search_input { border: 0; border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.post_search .search_btn { border: 0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.post_list { margin-bottom: 1.5em; }

/* 목록 - 테이블형 */
.basic .post_list { text-align: center; border-top: 2px solid #000; }
.basic .post_item { display: flex; align-items: center; position: relative; border-bottom: 1px solid #ddd; padding: 1em 0; }
.basic .post_chk { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.basic .post_num { flex-shrink: 0; width: 5em; }
.basic .post_subject { flex-grow: 1; }
.basic .post_subject a { text-align: left; }
.basic .post_subject a:hover { text-decoration: underline; }
.basic .post_meta { flex-shrink: 0; color: #191919; }
.basic .post_meta li { justify-content: center; gap: 0; }
.basic .post_meta-name { width: 6.5em; }
.basic .post_meta-hit { width: 5em; }
.basic .post_meta-date { width: 8em; }
.basic .post_meta-status { width: 7em; }

/* 목록 - 갤러리형 */
.gallery .post_list { display: grid; grid-template-columns: repeat(4,1fr); gap: 2em 1.5em; }
.gallery .post_item { position: relative; }
.gallery .post_item a { display: block; }
.gallery .post_chk { position: absolute; right: 0; top: 0; margin: 0.5em 0.75em; z-index: 5; }
.gallery .post_thumb { width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.gallery .post_thumb a { display: block; width: 100%; height: 100%; }
.gallery .post_thumb img { width: 100%; height: 100%; object-fit: cover; transition: var(--ts-md); }
.gallery .post_thumb .badge_list { position: absolute; left: 0; top: 0; margin: 0.5em; font-size: 0.8125em; display: flex; gap: 0.5em; justify-content: flex-start; align-items: center; }
.gallery .post_thumb .badge_list .badge { color: #fff; background-color: var(--c);}
.gallery .post_txt { margin-top: 1em; }
.gallery .post_subject { font-size: 1.25em; font-weight: 600; }
.gallery .post_desc { margin: 0.25em 0 0.75em; }
.gallery .post_meta { font-size: 0.875em; }
.gallery .post_item:hover .post_thumb img { transform: scale(1.1); }
.gallery .post_item:hover .post_txt a { opacity: 0.6; }

/* ==============================================================
    회원
============================================================== */
.mb_box { display: flex; flex-direction: column; gap: 0.5em; }
.mb_box .frm_input,
.mb_box .btn_submit { height: 2.75em; }
.mb_box .btn_submit { font-size: 1.125em; }
.mb_divider { width: 100%; height: 1px; background-color: #ddd; margin: 2em 0; }
.mb_desc { color: #686868; text-align: center; margin-bottom: 1.5em; line-height: 1.5; }
.mb_desc i { font-size: 1.125em; }

/* 로그인 */
.login_if { display: flex; justify-content: space-between; align-items: center; font-size: 0.9375em; margin-top: 0.5em; }
.login_join { margin: 1em 0 2em; display: flex; justify-content: center; gap: 0.5em; color: #aaa; }
.login_join a { color: #686868; font-weight: 600; }
.login_join a:hover { color: var(--primary); }

/* 본인 인증 */
.cert_btn { display: flex; justify-content: flex-start; align-items: center; gap: 0.5em; }
.cert_btn button { flex: 1 1 20%; height: 2.75em; }
.cert_desc { font-size: 0.875em; margin-left: 0.5em; color: #686868; } 

/* 회원가입 - 공통 */
.register_title { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; padding: 0.5em 0; }
.register_title h3 { font-size: 1.125em; font-weight: 700; }
.register_box { margin-bottom: 1.5em; }
.register_desc { text-align: center; color: #686868; margin-bottom: 1em; }

/* 회원가입 - 약관 */
.register .readonly { border-radius: 0; }
.register .chk_all { font-size: 1.125em; }

/* 회원가입 - 작성 */
.register_form li:not(.chk_box) label { display: block; margin: 0.5em 0 0.25em; }

/* 회원가입 - 완료 */
.register_result .container > .def_title { display: none; }
.register_result .def_title h2 { font-weight: 400; }
.register_result .def_title i { font-size: 1.25em; display: block; } 
.register_result .form_01 li:not(.chk_box) label { display: block; margin-bottom: 0.25em; }

/* 쪽지 목록 */
.memo_list { border-top: 1px solid #eee; }
.memo_item { display: flex; align-items: center; gap: 1em; padding: 0.625em; border-bottom: 1px solid #eee; }
.memo_item .profile_big_img { flex-shrink: 0; position: relative; }
.memo_item .profile_big_img img { width: 3.5em; border-radius: var(--radius-full); }
.memo_item .profile_big_img .no_read { position: absolute; right: 0; bottom: 0; width: 0.45em; margin: 0.25em; aspect-ratio: 1/1; box-shadow: 0 0 0.4em 0.1em var(--warning-hv); border-radius: var(--radius-full); background-color: var(--warning-hv); animation: blinker 1.25s linear infinite; }
@keyframes blinker {
	50% { box-shadow: 0 0 0.2em 0 var(--warning-hv); }
}
.memo_item .memo_post { flex-grow: 1; }
.memo_item .memo_preview { font-size: 0.9375em; margin-top: 0.5em; }
.memo_item .memo_preview:hover { text-decoration: underline; }
.memo_item .memo_del { flex-shrink: 0; font-size: 1.125em; margin-right: 0.625em; }
.memo_item.read { background-color: #fafafa; }
.memo_item.read .memo_preview { color: #999; }

/* 쪽지 상세 */
#memo_view .sv_member .profile_img { width: 1.875em; }
#memo_view .sv_member .profile_img img { width: 100%; }
#memo_view .post_box { margin-top: 0; }
#memo_view .post_content { padding: 0.875em 0.5em; min-height: 8em; }
#memo_view .btn_memo { display: flex; justify-content: center; align-items: center; }
#memo_view .btn_memo .btn { padding: 0.75em; }
#memo_view .btn_memo .btn i { font-size: 1.125em; }
#memo_view .btn_memo .btn[disabled] { color: #aaa; cursor: default; }

/* 포인트 */
.point_list { border-top: 1px solid #eee; }
.point_item { display: flex; align-items: center; gap: 1em; padding: 0.75em 0.625em; border-bottom: 1px solid #eee; }
.point_item .point_con { flex-grow: 1; }
.point_item .point_tit { font-weight: 700; }
.point_item .point_num { flex-shrink: 0; font-size: 1.125em; font-weight: 700; color: #0D6EFD; }
.point_item .txt_expired,
.point_use .point_num { color: #BE0A0D; }
.point_status { font-size: 1.125em; font-weight: 600; background-color: #393939; color: #fff; }

/* 자기소개 */
.profile_name { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5em; font-size: 1.125em; font-weight: 600; }
.profile_name .my_profile_img { width: 3.25em; }
.profile_greeting h3 { font-size: 1.125em; font-weight: 600; }
.profile_greeting p { margin-top: 0.5em; color: #686868; min-height: 6em; background-color: #fafafa; padding: 0.425em 0.625em; border-radius: var(--radius-sm); border: 1px solid #eee; }

/* 스크랩하기 */
.scrap_tit { font-size: 1em; font-weight: 600; }

/* 스크랩 목록 */
.scrap_list { border-top: 1px solid #eee; }
.scrap_item { display: flex; align-items: center; gap: 1em; padding: 0.75em 0.625em; border-bottom: 1px solid #eee; }
.scrap_con { flex-grow: 1; }
.scrap_tit { margin-bottom: 0.25em; }
.scrap_del { flex-shrink: 0; font-size: 1.125em; margin-right: 0.625em; }