@charset "UTF-8";

/* ===================================================
   Pretendard 폰트 임포트
=================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ===================================================
   CSS 변수 (포인트 컬러: 파란색 계열)
=================================================== */
:root {
  --color-primary:       #2563EB;
  --color-primary-dark:  #1D4ED8;
  --color-primary-light: #3B82F6;
  --color-primary-pale:  #EFF6FF;
  --color-text:          #1E293B;
  --color-text-sub:      #64748B;
  --color-text-muted:    #94A3B8;
  --color-border:        #E2E8F0;
  --color-bg:            #FFFFFF;
  --color-bg-soft:       #F8FAFC;
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           16px;
  --shadow-sm:           0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:           0 4px 16px rgba(37,99,235,0.12);
  --font-base:           'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
}

/* ===================================================
   Reset
=================================================== */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, textarea, p, blockquote,
th, td, input, select, textarea, button {
  margin: 0; padding: 0; outline: none;
}
fieldset, img { border: 0 none; }
dl, ul, ol, menu, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
input, select, textarea, button { vertical-align: middle; }
input::-ms-clear { display: none; }
button { border: 0 none; background-color: transparent; cursor: pointer; }

body { background: var(--color-bg); }

body, th, td, input, select, textarea, button {
  font-size: 15px;
  line-height: 1.6;
  font-family: var(--font-base);
  color: var(--color-text);
}

a { color: var(--color-text); text-decoration: none; }
a:active, a:hover { text-decoration: underline; }
a:active { background-color: transparent; }
address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }

#tistorytoolbarid { display: none; }

/* ===================================================
   Global
=================================================== */
#dkIndex {
  overflow: hidden; position: absolute; left: -9999px;
  width: 0; height: 1px; margin: 0; padding: 0;
}

.ir_pm { display: block; overflow: hidden; font-size: 0px; line-height: 0; text-indent: -9999px; }
.ir_wa { display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%; }
.screen_out { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; }

.show { display: block; }
.hide { display: none; }

.emph_t { color: var(--color-primary); }
.cont_skin { margin-top: 80px; }
.article_skin { width: 820px; margin: 0 auto; }

.txt_bar {
  display: inline-block; width: 1px; height: 9px;
  margin: 0 5px; background-color: var(--color-border);
}

.img_profile { display: block !important; float: left; margin-right: 16px; border-radius: 50px; }
.ico_focused { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }

.ico_skin {
  display: inline-block; overflow: hidden; font-size: 0; line-height: 0;
  background: url("images/ico_skin.gif") 0 0 no-repeat; text-indent: -9999px;
}

/* ===================================================
   헤더
=================================================== */
.wrap_skin { position: relative; }

.area_head {
  position: fixed; top: 0; left: 0; z-index: 10;
  width: 100%; height: 80px;
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.area_head:after { display: block; visibility: hidden; height: 0; font-size: 0; clear: both; content: ''; }

.area_head .area_profile { position: relative; float: left; padding: 15px 0 0 30px; }
.area_head .area_profile .link_profile { float: left; }
.area_head .area_profile .info_profile { float: left; max-width: 270px; }
.area_head .btn_name { margin-top: 5px; font-weight: 700; margin-bottom: 2px; }
.area_head .ico_name { width: 10px; height: 6px; margin: 7px 0 0 6px; vertical-align: top; }
.area_head .txt_condition { width: 100%; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.area_head .list_name {
  display: none; position: absolute; top: 44px; left: 92px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background-color: #fff; box-shadow: var(--shadow-sm);
}
.area_head .on .list_name { display: block; width: 112px; padding-top: 13px; padding-bottom: 2px; }
.area_head .on .ico_name { background-position: 0 -632px; }
.area_head .link_name { display: block; padding-left: 15px; margin-bottom: 7px; text-decoration: none; color: var(--color-text-sub); }
.area_head .link_name:hover { text-decoration: underline; color: var(--color-primary); }
.area_head .box_division { padding-top: 13px; border-top: 1px solid var(--color-bg-soft); margin-top: 9px; }

/* 메뉴 */
.area_menu { position: fixed; right: 15px; top: 21px; z-index: 31; }

.area_menu .area_search {
  display: inline-block; margin: 0 2px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); vertical-align: top;
}
.area_menu .on.area_search { border: 1px solid var(--color-primary); }
.area_menu .btn_search { width: 40px; height: 36px; }
.area_menu .on .btn_search { display: none; }
.area_menu .ico_search { width: 16px; height: 16px; margin-top: -1px; background-position: 0 -25px; vertical-align: middle; }
.area_menu .frm_search { display: none; overflow: hidden; width: 210px; height: 36px; }
.area_menu .on .frm_search { display: block; }
.area_menu .lab_search { float: left; width: 16px; height: 16px; margin: 10px 9px 0 12px; background-position: 0 -400px; }
.area_menu .tf_search { float: left; width: 150px; margin-top: 9px; border: 0 none; vertical-align: top; color: var(--color-text); font-family: var(--font-base); }

.area_menu .area_navi { display: inline-block; position: relative; margin: 0 2px 0 3px; }
.area_menu .btn_cate {
  width: 160px; height: 38px;
  border: 1.5px solid var(--color-primary); border-radius: var(--radius-sm);
  font-weight: 700; font-size: 13px; line-height: 38px;
  color: var(--color-primary); padding: 0 1px 0 5px;
  font-family: var(--font-base);
}

.btn_close { display: none; }

.area_menu .ico_cate { width: 10px; height: 6px; margin: -2px 0 0 53px; background-position: 0 -50px; vertical-align: middle; }
.area_menu .list_cate {
  display: none; position: absolute; top: 37px; left: 0;
  width: 158px; padding: 18px 0 10px;
  border: 1.5px solid var(--color-primary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background-color: #fff; box-shadow: var(--shadow-md);
}
.area_menu .on .list_cate { display: block; }
.area_menu .on .ico_cate { background-position: 0 -658px; }
.area_menu .link_cate { display: block; padding-left: 17px; margin-bottom: 12px; font-size: 13px; color: var(--color-text); }

.area_navi .list_cate ul li { line-height: 18px; }
.area_navi .list_cate ul li a {
  display: block; padding-left: 17px; margin-bottom: 12px;
  font-size: 13px; color: var(--color-text); height: 17px;
}
.area_navi .list_cate ul li.selected>a,
.area_navi .list_cate ul li a:hover { text-decoration: underline; color: var(--color-primary); }
.area_navi .list_cate .c_cnt, .area_navi .list_cate img { display: none; }

.area_navi .list_cate ul li ul li ul { padding-bottom: 6px; margin-top: -6px; }
.area_navi .list_cate ul li ul li ul li { color: var(--color-text-muted); padding-left: 21px; }
.area_navi .list_cate ul li ul li ul li a { padding-left: 0; margin-bottom: 6px; font-size: 12px; color: var(--color-text-sub); }
.area_navi .list_cate ul li ul li ul li a::before { content: '· '; }
.area_navi .list_cate .menu_profile { display: none; }

.area_list .tit_category {
  position: fixed; top: 1px; width: 50%; left: 25%;
  line-height: 80px; text-align: center;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; z-index: 21;
}
.tit_category .link_category { font-size: 20px; font-weight: 700; color: var(--color-primary); }
.tit_category .link_category:hover { text-decoration: none; }

.dimmed_layer { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none; z-index: 30; }
.area_head .btn_menu { display: none; }

/* ===================================================
   푸터
=================================================== */
.wrap_etc {
  padding-top: 48px; padding-bottom: 5px;
  border-top: 1px solid var(--color-border);
}
.wrap_etc .inner_aside { overflow: hidden; width: 820px; margin: 0 auto; }
.wrap_etc .box_aside { float: left; position: relative; width: 190px; min-height: 135px; margin: 0 20px 33px 0; }
.wrap_etc .lst { margin-right: 0; }
.wrap_etc .list_board { padding-top: 8px; }
.wrap_etc .list_board li { margin-bottom: 8px; }
.wrap_etc .link_board { display: block; overflow: hidden; width: 170px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.wrap_etc .list_total dt { font-weight: 700; }
.wrap_etc .list_total dd { font-weight: 700; font-size: 22px; }
.wrap_etc .list_visitor { overflow: hidden; margin-top: 8px; font-size: 12px; }
.wrap_etc .list_visitor dt { float: left; color: var(--color-text-muted); }
.wrap_etc .list_visitor dd { float: right; color: var(--color-text-muted); }
.wrap_etc .link_more { position: absolute; top: 3px; right: 10px; font-size: 12px; text-decoration: underline; color: var(--color-text-muted); }
.wrap_etc .list_tag { overflow: hidden; margin-top: 10px; }
.wrap_etc .list_tag li { float: left; }
.wrap_etc .list_tag .link_tag {
  display: block; height: 24px; padding: 0 10px; margin: 0 6px 6px 0;
  border-radius: 20px; font-size: 11px; line-height: 26px;
  border: 1px solid var(--color-border); background-color: var(--color-bg-soft);
  color: var(--color-text-sub); max-width: 65px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.wrap_etc .list_tag .link_tag:hover {
  border: 1px solid var(--color-primary); background-color: var(--color-primary-pale);
  text-decoration: none; color: var(--color-primary);
}

/* 캘린더 */
.tt-calendar { width: 176px !important; border-collapse: collapse; border-spacing: 0; margin-left: -8px; }
.tt-calendar .cal_month { height: 20px; font-weight: 700; text-align: center; margin-bottom: 5px; }
.tt-calendar .cal_month a { font-weight: 700; color: var(--color-text-sub); }
.tt-calendar .cal_month a:first-child, .tt-calendar .cal_month a:last-child { height: 17px; padding: 0 10px; vertical-align: top; color: var(--color-text-muted); }
.tt-calendar td, th { height: 17px; vertical-align: middle; width: 14.28%; text-align: center; }
.tt-calendar thead th { color: var(--color-text-muted); margin-bottom: 2px; }
.tt-calendar tbody td { color: var(--color-text-muted); }
.tt-calendar tbody td .cal_click { font-weight: 700; color: var(--color-text-sub); }

.area_foot {
  height: 50px; font-size: 12px; line-height: 50px;
  text-align: center; background-color: var(--color-bg-soft);
  color: var(--color-text-muted);
}

/* ===================================================
   페이징
=================================================== */
.area_paging_simple { display: none; }
.area_paging { margin: 30px 0 93px; text-align: center; }
.area_paging .inner_paging { display: inline-block; overflow: hidden; }
.area_paging .ico_skin { float: left; width: 24px; height: 24px; margin-top: 6px; }
.area_paging .li_prev { margin-right: 20px; background-position: 0 -100px; }
.area_paging .link_prev { margin-right: 20px; background-position: 0 -100px; }
.area_paging .link_next { margin-left: 20px; background-position: 0 -150px; }
.area_paging .no-more-prev { background-position: 0 -75px; }
.area_paging .no-more-next { background-position: 0 -125px; }
.area_paging .interword { float: left; padding: 6px 12px 0; }
.area_paging .link_page { float: left; }
.area_paging .link_page span { display: block; padding: 9px 14px 5px; color: var(--color-text-sub); }
.area_paging .link_page span.selected {
  border-radius: var(--radius-sm); background-color: var(--color-primary);
  color: #fff; font-weight: 700; padding: 8px 14px 6px;
}

/* ===================================================
   뷰
=================================================== */
.skin_view .area_title {
  margin-bottom: 29px; padding: 68px 0 45px;
  border-bottom: 1px solid var(--color-border); text-align: center;
}
.skin_view .area_title a { text-decoration: none; }
.skin_view .tit_category a { font-weight: 700; color: var(--color-primary); }
.skin_view .tit_post { margin-top: 7px; font-size: 40px; font-weight: 800; color: #000; line-height: 50px; letter-spacing: -1px; }
.skin_view .tit_post a { color: #000; }
.skin_view .txt_detail { display: block; margin-top: 20px; font-size: 12px; color: var(--color-text-muted); }
.skin_view .txt_detail .txt_bar { margin: 0 7px 0 5px; }
.skin_view .txt_detail .my_edit { display: none; }
.skin_view .my_post .my_edit { display: inline-block; }
.skin_view .link_detail { font-size: 12px; color: var(--color-text-muted); }
.skin_view .link_detail:hover { text-decoration: none; }

.skin_view .area_view { padding: 20px 0; font-size: 16px; }
.skin_view .area_view p { font-size: 16px; line-height: 1.8; }
.skin_view .area_view a { color: var(--color-primary); }
.skin_view .area_view h1, .skin_view .area_view h2,
.skin_view .area_view h3, .skin_view .area_view h4 { line-height: 1.2em; margin: 1.5em auto 1em; }
.skin_view .area_view h1 { font-size: 28px; }
.skin_view .area_view h2 { font-size: 24px; }
.skin_view .area_view h3 { font-size: 20px; }
.skin_view .area_view h4 { font-size: 16px; }

.skin_view .area_view ul, .skin_view .area_view ol { margin: 0 auto 32px; padding: 0 0 0 10px; }
.skin_view .area_view ul li, .skin_view .area_view ol li { margin-left: 24px; margin-bottom: 10px; }
.skin_view .area_view ul li { list-style: disc; margin: 0 !important; list-style: none; }
.skin_view .area_view ol li { list-style: decimal; }

.skin_view .area_view blockquote {
  padding: 10px 20px; margin: 0 auto 28px;
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-primary-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.skin_view .area_view blockquote,
.skin_view .area_view blockquote p { font-size: 18px; line-height: 30px; }
.skin_view .area_view blockquote ol:last-child,
.skin_view .area_view blockquote ul:last-child,
.skin_view .area_view blockquote p:last-child { margin-bottom: 0; }

.skin_view .area_view pre {
  background-color: #1E293B; color: #E2E8F0;
  margin: 28px auto; word-wrap: break-word;
  font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
  font-size: 14px; line-height: 1.7;
  border-radius: var(--radius-md);
}
.skin_view .area_view pre code.hljs { padding: 20px; border-radius: var(--radius-md); }
.skin_view .area_view iframe { max-width: 100%; }
.skin_view .area_view img { max-width: 100%; height: auto; }
.skin_view .area_view .imageblock { width: auto !important; height: auto !important; }

.skin_view .area_view .protected_form { text-align: center; padding: 100px 0 150px; border-bottom: 1px solid var(--color-border); margin-bottom: -20px; }
.skin_view .area_view .protected_form input {
  -webkit-appearance: none; padding: 0 15px;
  border: 1px solid var(--color-border); height: 38px; line-height: 38px;
  font-size: 12px; box-sizing: border-box; border-radius: var(--radius-sm);
}
.skin_view .area_view .protected_form button {
  border-radius: var(--radius-sm); font-size: 12px; line-height: 38px;
  background-color: var(--color-primary); color: #fff; font-weight: 700; padding: 0 16px;
}

.skin_view .area_etc { overflow: hidden; min-height: 29px; margin-top: 20px; }
.skin_view .area_etc .list_tag { float: left; margin-top: 5px; font-weight: 700; }
.skin_view .list_tag .tit_tag { float: left; margin-right: 8px; font-weight: 700; font-size: 12px; color: var(--color-primary); }
.skin_view .list_tag .desc_tag { float: left; margin-right: 2px; font-weight: 700; font-size: 12px; color: var(--color-text-muted); max-width: 630px; }
.skin_view .list_tag .desc_tag a { color: var(--color-text-muted); }
.skin_view .list_tag .link_tag { font-weight: 700; font-size: 12px; color: var(--color-text-muted); }
.skin_view .list_tag .link_tag:hover { text-decoration: none; }

/* 이전/다음 카테고리 */
.skin_view .another_category { overflow: hidden; width: 100%; margin: 90px 0 0; border: 0; padding: 0; }
.skin_view .another_category h4 {
  float: left; width: 100%; padding: 0 0 7px !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-weight: 400; font-size: 14px !important; line-height: 1.5; color: var(--color-text-sub) !important;
}
.skin_view .another_category h4 a { color: var(--color-primary) !important; font-weight: 700; }
.skin_view .another_category table { float: left; width: 100%; margin-top: 15px !important; }
.skin_view .another_category table tr { float: left; width: 50%; margin-bottom: 8px; }
.skin_view .another_category table tr:nth-child(even) th { padding-left: 10px !important; }
.skin_view .another_category table th { width: 100%; font-size: 12px; color: var(--color-text-muted); padding: 0 !important; }
.skin_view .another_category table th a {
  overflow: hidden; max-width: 255px; font-size: 12px; white-space: nowrap;
  text-overflow: ellipsis; color: var(--color-text-sub) !important; border: 0 !important;
  display: inline-block; float: left;
}
.skin_view .another_category table th a.current { text-decoration: underline !important; }
.skin_view .another_category table th span { font-size: 12px; }
.skin_view .another_category table td { display: none; }

/* ===================================================
   댓글
=================================================== */
.skin_view .area_reply { margin-top: 40px; }
.area_reply .tit_reply { font-weight: 400; }
.area_reply .btn_reply { font-weight: 700; line-height: 18px; color: var(--color-primary); }
.area_reply .btn_reply .ico_reply { width: 8px; height: 5px; margin: 5px 0 0 3px; background-position: 0 -425px; vertical-align: top; }
.btn_reply.on .ico_reply { background-position: 0 -450px; }

.area_reply .reply_write { position: relative; margin-top: 5px; }
.area_reply .lab_write { position: absolute; top: 13px; left: 16px; font-size: 12px; }
.area_reply .on_box .lab_write { display: none; }
.area_reply .tf_reply {
  width: 820px; height: 102px; padding: 13px 15px 10px;
  border: 1px solid var(--color-border); font-size: 12px;
  resize: none; box-sizing: border-box; border-radius: var(--radius-sm);
  font-family: var(--font-base);
  transition: border-color 0.2s;
}
.area_reply .tf_reply:focus { border-color: var(--color-primary); }

.area_reply .reply_writer { margin-top: 10px; position: relative; height: 36px; }
.area_reply .writer_info { float: left; }
.area_reply .writer_info .info_name { display: inline-block; position: relative; margin-right: 8px; }
.area_reply .writer_info .info_pw { display: inline-block; position: relative; }
.area_reply .writer_info .lab_info { position: absolute; top: 10px; left: 16px; font-size: 12px; }
.area_reply .on_box .lab_info { display: none; }
.area_reply .writer_info .inp_info {
  width: 120px; height: 36px; padding: 0 15px;
  border: 1px solid var(--color-border); font-size: 12px; box-sizing: border-box;
  border-radius: var(--radius-sm); font-family: var(--font-base);
}

.area_reply .writer_check { position: absolute; right: 70px; }
.area_reply .writer_check .check_secret { display: inline-block; position: relative; height: 36px; margin-right: 18px; line-height: 36px; }
.area_reply .writer_check .inp_secret { display: none; }
.area_reply .writer_check .lab_secret { position: relative; padding-left: 20px; font-size: 12px; cursor: pointer; }
.area_reply .writer_check .ico_check { position: absolute; top: -2px; left: 0; width: 16px; height: 16px; background-position: 0 -500px; }
.area_reply .writer_check .inp_secret:checked+.lab_secret .ico_check { background-position: 0 -525px; }
.area_reply .writer_check .inp_secret:focus+.lab_secret .ico_check { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }
.area_reply .on .ico_check { background-position: 0 -525px; }

.area_reply .writer_btn { position: absolute; right: 0; }
.area_reply .writer_btn .btn_enter {
  width: 70px; height: 36px; border-radius: var(--radius-sm); font-size: 12px;
  line-height: 38px; background-color: var(--color-primary); color: #fff; font-weight: 700;
  font-family: var(--font-base); transition: background-color 0.2s;
}
.area_reply .writer_btn .btn_enter:hover { background-color: var(--color-primary-dark); }

.area_reply .btn_replymore { display: none; width: 100%; height: 42px; margin-top: 3px; border-top: 1px solid var(--color-border); font-size: 12px; line-height: 44px; color: var(--color-text-muted); }
.on .btn_replymore { display: block; }
.area_reply .list_reply { margin-bottom: 20px; margin-top: 5px; border-top: 1px solid #CBD5E1; }
.on .list_reply { display: block; margin-bottom: 18px; }
.area_reply .list_reply li.tt_more_preview_comments_wrap { padding: 10px 20px; }
.area_reply .list_reply .tt_more_preview_comments_text { font-size: 12px; color: var(--color-text-muted); }
.area_reply .list_reply li { overflow: hidden; position: relative; padding: 23px 20px 24px; border-bottom: 1px solid var(--color-border); }
.area_reply .list_reply li:hover { background-color: var(--color-bg-soft); }
.area_reply .list_reply .my_reply { background-color: var(--color-bg-soft); }
.area_reply .list_reply .re_reply { padding-left: 86px; }
.area_reply .reply_content { float: left; }
.area_reply .list_reply .img_profile { margin-top: 2px; }
.area_reply .tit_nickname { display: block; overflow: hidden; max-width: 515px; margin: 4px 5px 0 0; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.area_reply .my_reply .tit_nickname { color: var(--color-primary); }
.area_reply .tit_nickname:hover { text-decoration: none; }
.area_reply .ico_secret { width: 10px; height: 12px; margin-top: 4px; background-position: 0 -475px; vertical-align: top; display: none; }
.area_reply .rp_secret .ico_secret { display: inline-block; }
.area_reply .txt_reply { display: block; width: 704px; margin-top: 3px; font-size: 13px; }
.area_reply .re_reply .txt_reply { display: block; width: 627px; margin-top: 3px; font-size: 13px; }
.area_reply .txt_date { display: block; margin-top: 7px; font-size: 12px; color: var(--color-text-muted); }
.area_reply .btn_replymenu { display: none; }
.area_reply .list_reply li .my_edit { display: none; position: absolute; top: 27px; right: 16px; }
.area_reply .list_reply li:hover .my_edit { display: block; }
.area_reply .my_edit .link_edit { margin: 0 2px; font-size: 12px; color: var(--color-primary); }
.area_reply .my_edit .link_edit:hover { text-decoration: none; }
.area_reply .hiddenComment .tit_nickname { display: none; }
.area_reply .hiddenComment .txt_reply { font-weight: 700; font-size: 14px; }

/* ===================================================
   리스트
=================================================== */
.list_content { padding: 35px 0; border-bottom: 1px solid var(--color-border); }
.list_content::after { content: ''; clear: both; display: block; }
.list_content .thumbnail_post { float: right; height: 148px; width: 148px; margin: 4px 0 4px 30px; border-radius: var(--radius-md); overflow: hidden; }
.list_content .link_post { display: block; overflow: hidden; text-decoration: none; }
.list_content .link_post:hover .tit_post { text-decoration: underline; color: var(--color-primary); }
.list_content .tit_post { display: block; font-weight: 700; font-size: 28px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; letter-spacing: -0.5px; }
.list_content .txt_post {
  display: -webkit-box; display: -ms-flexbox; display: box;
  overflow: hidden; max-height: 80px; margin-top: 1px;
  font-size: 15px; line-height: 1.7; color: var(--color-text-sub); vertical-align: top;
  word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.list_content .detail_info { margin-top: 16px; font-size: 12px; color: var(--color-text-muted); }
.list_content .detail_info .link_cate { font-size: 12px; text-decoration: none; color: var(--color-primary); }

/* ===================================================
   방명록
=================================================== */
.skin_visitor { padding-bottom: 40px; }
.skin_visitor .area-reply { padding-top: 40px; }
.skin_visitor .area_reply .list_reply { display: block; margin-top: 30px; border-top: 1px solid var(--color-border); }
.skin_visitor .area_reply .reply_write { margin-top: 32px; }
.skin_visitor .area_reply .ico_secret { background-position: 0 -600px; }

/* ===================================================
   태그
=================================================== */
.skin_tag .list_tag { overflow: hidden; padding: 30px 0 90px; }
.skin_tag .list_tag li { float: left; margin: 0 10px 10px 0; }
.skin_tag .link_tag {
  display: block; height: 32px; padding: 0 13px;
  border-radius: 20px; line-height: 34px;
  border: 1px solid var(--color-border); background-color: var(--color-bg-soft);
  font-weight: 400; color: var(--color-text-sub); font-size: 13px;
  transition: all 0.2s;
}
.skin_tag .link_tag:hover {
  border: 1px solid var(--color-primary); background-color: var(--color-primary-pale);
  text-decoration: none; color: var(--color-primary);
}

/* ===================================================
   티스토리 댓글 공통
=================================================== */
.tt-comment-cont .tt-box-total .tt_txt_g { font-size: 15px; }
.tt-comment-cont .tt-box-total .tt_num_g { font-size: 15px; color: var(--color-primary); }
.tt-comment-cont .tt-wrap-cmt .tt-link-user { font-size: 15px; }
.tt-comment-cont .tt-wrap-cmt .tt_desc { font-size: 15px; color: var(--color-text-sub); }
.tt-comment-cont .tt-txt-mention { color: var(--color-text-sub); }
.tt-comment-cont .tt-wrap-cmt .tt_txt_g { color: var(--color-primary); }
.tt-comment-cont .tt-link-comment .tt_num_g { color: var(--color-primary); }
.tt-comment-cont .tt-btn_register {
  width: 77px; height: 36px;
  background-color: var(--color-primary); color: #fff;
  border-radius: var(--radius-sm); border-color: var(--color-primary);
}
.tt-comment-cont .tt-btn_register:hover,
.tt-comment-cont .tt-btn_register:focus {
  background-color: var(--color-primary-dark); border-color: var(--color-primary-dark);
}

/* ===================================================
   티스토리 블로그 구독 영역 (tt_cont + tt_wrap_thumb)
   — 2번 이미지처럼 좌측 텍스트 + 우측 프로필 정렬
=================================================== */
.revenue_unit_wrap,
[class*="revenue_unit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  background: #f8f8f8 !important;
  border-radius: 12px !important;
  margin: 20px 0 !important;
  font-size: 14px !important;
  font-family: var(--font-base) !important;
}

/* 텍스트 영역 — 제목/설명/버튼 */
.tt_cont {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.tt_tit_cont {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  display: block !important;
  margin: 0 !important;
}

.tt_desc {
  font-size: 13px !important;
  color: #666 !important;
  text-decoration: none !important;
  display: block !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  /* post-body 18px 오염 차단 */
  font-weight: 400 !important;
}

.tt_btn_subscribe {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 8px !important;
  padding: 6px 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 20px !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #333 !important;
  cursor: pointer !important;
  width: fit-content !important;
}

/* 프로필 썸네일 — 우측 고정 */
.tt_wrap_thumb {
  display: block !important;
  flex-shrink: 0 !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 0 0 16px !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.tt_thumb_g {
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 !important;
}

/* ===================================================
   스킨 프로필 이미지 (img-profile, 하이픈 클래스)
   — box-profile 영역 img 보호
=================================================== */
.img-profile,
.box-profile img,
.box-profile .img-profile {
  display: block !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
}

/* ===================================================
   아티클 뷰 공통
=================================================== */
#article-view {
  margin: 0; padding: 20px 20px 50px; word-wrap: break-word;
  color: var(--color-text); min-height: 370px;
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0;
}

.contents_style>* { margin: 20px 0 0 0; }

#article-view h2[data-ke-size] { font-size: 1.62em; line-height: 1.46; }
#article-view h3[data-ke-size] { font-size: 1.44em; line-height: 1.48; }
#article-view h4[data-ke-size] { font-size: 1.25em; line-height: 1.55; }
#article-view p[data-ke-size='size18'] { font-size: 1.12em; line-height: 1.67; }
#article-view p[data-ke-size='size16'] { line-height: 1.75; }
#article-view p[data-ke-size='size14'] { font-size: 0.87em; line-height: 1.71; }

#article-view h2, #article-view h3, #article-view h4 {
  font-weight: 700; letter-spacing: -1px; color: var(--color-text); margin: 1em 0 20px;
}
#article-view p+p, #article-view p { margin-bottom: 30px; }
#article-view h2+h2, #article-view h3+h3, #article-view h4+h4 { margin: 0; }
#article-view h2+h3, #article-view h2+h4, #article-view h3+h4 { margin-top: 10px; }
#article-view h2+p, #article-view h3+p, #article-view h4+p, #article-view h5+p, #article-view h6+p { margin-top: 10px; }

#article-view div[data-ke-type='moreLess'] {
  caret-color: auto; background-color: var(--color-bg-soft);
  padding: 20px 20px 22px; margin: 20px 0;
  border: 1px dashed var(--color-border); color: var(--color-text);
  border-radius: var(--radius-md);
}

#article-view a { color: var(--color-primary); text-decoration: underline; }
#article-view figure[data-ke-type='contentSearch'] a { text-decoration: none; }

/* 인용문 */
#article-view blockquote[data-ke-style='style1'] {
  text-align: center; background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 50% 0;
  padding: 34px 0 0 0; font-size: 1.12em; color: var(--color-text);
  line-height: 1.67; border: 0 none; font-family: "Noto Serif KR";
}
#article-view blockquote[data-ke-style='style2'] {
  border-color: var(--color-primary); border-width: 0 0 0 4px; border-style: solid;
  padding: 1px 0 0 12px; color: var(--color-text-sub); line-height: 1.75; font-size: 1em; text-align: left;
  background-color: var(--color-primary-pale);
}
#article-view blockquote[data-ke-style='style3'] {
  border: 1px solid var(--color-border); background-color: var(--color-bg-soft);
  text-align: left; padding: 21px 25px 20px 25px; color: var(--color-text-sub);
  font-size: 1em; line-height: 1.75; border-radius: var(--radius-md);
}
#article-view blockquote { display: block; margin: 20px auto 0; letter-spacing: 0px; }

/* 파일 첨부 */
#article-view figure.fileblock {
  width: 470px; height: 73px; box-sizing: border-box; position: relative;
  border-radius: var(--radius-md); margin-top: 20px; margin-bottom: 0px;
  box-shadow: var(--shadow-sm); border: solid 1px var(--color-border);
}
#article-view figure.fileblock a { display: block; }
#article-view figure.fileblock .image {
  float: left; width: 30px; height: 30px;
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  margin: 22px 17px 21px 22px; background-position: 0 0;
}
#article-view figure.fileblock .desc { position: absolute; left: 70px; right: 60px; top: 4px; bottom: 0; }
#article-view figure.fileblock .filename { color: var(--color-text); font-size: 14px; text-overflow: ellipsis; width: 100%; height: 20px; margin: 16px 0 0; }
#article-view figure.fileblock .size { font-size: 12px; color: var(--color-text-sub); height: 16px; }
#article-view figure[data-ke-align=alignCenter].fileblock { margin-left: auto; margin-right: auto; }
#article-view figure[data-ke-align=alignRight].fileblock { margin-left: auto; }
#article-view figure.fileblock .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 272px; height: 20px; display: block; }
#article-view figure.fileblock a::after {
  content: ''; background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  background-position: -40px 0; width: 30px; height: 30px; position: absolute; right: 24px; top: 19px;
}

/* 이미지 */
#article-view figure.imageblock { display: table; position: relative; }
#article-view figure.imageblock.alignLeft { text-align: left; }
#article-view figure.imageblock.alignCenter { margin: 20px auto 0; text-align: center; }
#article-view figure.imageblock.alignRight { text-align: right; margin-left: auto; }
#article-view figure.imageblock.floatLeft { float: left; margin-right: 20px; }
#article-view figure.imageblock.floatRight { float: right; margin-left: 20px; }
#article-view figure.imageblock.widthContent { display: block; }
#article-view figure.imageblock.widthContent img { width: 100%; }
#article-view figure.imageblock.floatLeft figcaption,
#article-view figure.imageblock.floatRight figcaption { text-align: left; }
#article-view figure.imageblock img { display: inline-block; max-width: 100%; margin: 0; height: auto; border-radius: var(--radius-sm); }
#article-view iframe, #article-view figure img, #article-view figure iframe { max-width: 100%; }
#article-view figure img:not([width]), #article-view figure iframe:not([width]) { width: 100%; }
#article-view figure { max-width: 100%; clear: both; }
#article-view figure img { display: inline-block; }
#article-view figure.imagegridblock+figure.imagegridblock,
#article-view figure.imagegridblock+figure.imageblock,
#article-view figure.imageblock+figure.imagegridblock { margin-top: 10px; }

/* 캡션 */
#article-view figure figcaption {
  font-size: 13px; color: var(--color-text-muted); word-break: break-word;
  padding-top: 10px; min-height: 20px; caption-side: bottom; text-align: center;
  caret-color: auto; width: 100%; box-sizing: content-box;
}

/* 이미지 그리드 */
#article-view figure.imagegridblock {
  position: relative; caret-color: transparent; background-color: transparent;
  width: 100%; height: auto; margin: 20px 0 0 0;
}
#article-view figure.imagegridblock .image-container { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
#article-view figure.imagegridblock .image-container>span { margin-right: 0; margin-top: 2px; }
#article-view figure.imagegridblock img { margin: 0; height: inherit; }
#article-view figure.imagegridblock span img { width: 100%; }

/* 구분선 */
hr[data-ke-style], #article-view hr[data-ke-style] {
  border: none; font-size: 0; line-height: 0; margin: 20px auto 0;
  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/divider-line.svg);
  background-size: 200px 420px; cursor: default !important;
}
hr[data-ke-style='style1'], #article-view hr[data-ke-style='style1'] { background-position: center 0; width: 64px; height: 4px; padding: 20px; }
hr[data-ke-style='style2'], #article-view hr[data-ke-style='style2'] { background-position: center -48px; width: 64px; height: 3px; padding: 20px; }
hr[data-ke-style='style3'], #article-view hr[data-ke-style='style3'] { background-position: center -96px; width: 64px; height: 8px; padding: 18px 20px; }
hr[data-ke-style='style4'], #article-view hr[data-ke-style='style4'] { background-position: center -144px; width: 2px; height: 60px; padding: 0 51px; }
hr[data-ke-style='style4']+hr[data-ke-style='style4'], #article-view hr[data-ke-style='style4']+hr[data-ke-style='style4'] { margin-top: 0; }
hr[data-ke-style='style5'], #article-view hr[data-ke-style='style5'] { background-position: center -208px; background-repeat: repeat-x; height: 2px; padding: 21px 0; }
hr[data-ke-style='style6'], #article-view hr[data-ke-style='style6'] { background-position: center -256px; background-repeat: repeat-x; height: 2px; padding: 21px 0; }
hr[data-ke-style='style7'], #article-view hr[data-ke-style='style7'] { background-position: center -304px; width: 200px; height: 19px; padding: 18px 20px 17px 20px; }
hr[data-ke-style='style8'], #article-view hr[data-ke-style='style8'] { background-position: center -362px; width: 200px; height: 19px; padding: 18px 20px 17px 20px; }

/* 테이블 */
#article-view table[data-ke-style] { margin-bottom: 0px; }
#article-view table { margin-bottom: 0px; border-color: var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
#article-view table tbody tr { box-sizing: content-box; }
#article-view table td { word-break: break-word; padding: 10px 12px; font-size: 14px; line-height: normal; color: var(--color-text); }
#article-view table[data-ke-style='style1'] tr:first-child td { border-bottom: 2px solid var(--color-primary-light); }
#article-view table[data-ke-style='style4'] tr:nth-child(2n) td { background-color: var(--color-bg-soft); }
#article-view table[data-ke-style='style5'] tr:nth-child(2n) td { background-color: var(--color-primary-pale); }

/* 오픈 그래프 */
#article-view figure[data-ke-type='opengraph'] { margin: 10px 0; }
#article-view figure[data-ke-type='opengraph'] a {
  box-sizing: initial; width: 100%; display: flex; justify-content: center; align-items: center;
  box-shadow: var(--shadow-sm); border: solid 1px var(--color-border);
  text-decoration: none; color: #000; border-radius: var(--radius-md); overflow: hidden;
}
#article-view figure[data-ke-type='opengraph'] a:hover { opacity: 1; }
#article-view figure[data-ke-type='opengraph'] div.og-image { border-right: solid 1px rgba(0,0,0,0.06); width: 200px; height: 200px; background-size: cover; background-position: center; }
#article-view figure[data-ke-type='opengraph'] p.og-title { color: var(--color-text); font-size: 22px; padding-bottom: 10px; max-width: 467px; text-overflow: ellipsis; white-space: nowrap; margin: 0px; overflow: hidden; font-weight: 700; }
#article-view figure[data-ke-type='opengraph'] .og-desc { margin: 0px; max-width: 467px; text-overflow: ellipsis; overflow: hidden; font-size: 14px; font-weight: 300; color: var(--color-text-sub); max-height: 42px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; }

/* 코드 블럭 */
#article-view pre code.hljs {
  font-size: 14px; padding: 20px;
  font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
  border: solid 1px var(--color-border);
  line-height: 1.71; overflow: auto;
  border-radius: var(--radius-md);
}

/* 접은 글 */
#article-view .moreless-content :first-child { margin-top: 0; margin-bottom: 0; }
#article-view div[data-ke-type='moreLess'] .moreless-content { display: none; }
#article-view div[data-ke-type='moreLess'].open .moreless-content { display: block; }
#article-view div[data-ke-type='moreLess'] .btn-toggle-moreless { color: var(--color-text-sub); font-size: 16px; line-height: 26px; font-family: var(--font-base); cursor: pointer; text-decoration: none; }

/* 리스트 */
#article-view ul li, #article-view ol li { margin: 0 0 3px 22px; line-height: 1.7; margin-left: 20px !important; }
#article-view ul, #article-view ol { margin: 14px auto 24px; padding: 0 0 0 10px; }

/* ===================================================
   구 에디터
=================================================== */
.btn_more, .btn_less {
  border: 0; background: transparent; display: block; height: 21px;
  margin: 20px 0; font-size: 14px; line-height: 14px; color: var(--color-text-muted);
  position: relative; width: 100%; text-align: left;
}
.btn_less::before, .btn_more::before { content: "..."; display: inline-block; padding-right: 5px; font-size: 14px; line-height: 6px; vertical-align: top; }
.box-timeline-content { word-break: break-all; }

/* ===================================================
   하단 고정 CTA
=================================================== */
.fixed-cta-container { display: none !important; }
.bottom-tab-menu { display: none !important; }

.new-cta-bar {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000;
  padding: 12px 16px 16px;
  background: linear-gradient(to top, rgba(255,255,255,1) 60%, rgba(255,255,255,0));
  box-sizing: border-box; pointer-events: none;
}
.new-cta-inner {
  display: flex; gap: 10px; max-width: 500px; margin: 0 auto; pointer-events: all;
}
.new-cta-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 12px 8px; border: none; border-radius: var(--radius-lg);
  cursor: pointer; text-decoration: none; font-family: var(--font-base);
  font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -0.2px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15); transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.new-cta-btn:hover, .new-cta-btn:active {
  transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.2);
  text-decoration: none; color: #fff;
}
.new-cta-btn .cta-icon { font-size: 20px; line-height: 1; }
.new-cta-btn.btn-kakao { background: linear-gradient(135deg, #FFE234, #FBB914); color: #3A1D00; }
.new-cta-btn.btn-kakao:hover { color: #3A1D00; }
.new-cta-btn.btn-kt { background: linear-gradient(135deg, #F472B6, #EC4899, #DB2777); flex: 1.3; font-size: 13px; }
.new-cta-btn.btn-usim { background: linear-gradient(135deg, #4ADE80, #22C55E, #16A34A); }

body { padding-bottom: 90px; }

/* ===================================================
   글 본문 공통 스타일
=================================================== */
.title {
  background: linear-gradient(135deg, #93C5FD 10%, var(--color-primary) 100%);
  color: #fff; font-weight: 800; margin: 0.5em 0; padding: 20px 25px;
  border-radius: 20px 20px 20px 0; font-size: 24px; text-align: left;
  letter-spacing: -0.5px; line-height: 1.4;
}
.content-text { font-size: 16px; line-height: 1.85; color: var(--color-text); margin: 1em 0; }
.highlight-strong { color: var(--color-primary); font-weight: 700; }
.highlight-underline { color: var(--color-primary-dark); text-decoration: underline; font-weight: 700; }

.subtitle-style {
  margin: -10px 0 25px 0; border-bottom: 2px solid var(--color-primary);
  text-align: center; color: var(--color-primary); font-weight: 700; font-size: 20px;
}
.subtitle-style span {
  background-color: #fff; position: relative; padding: 10px 15px;
  bottom: -19px; display: inline-block;
}

.content-box {
  padding: 2px; margin: 0.5em 0;
  background: linear-gradient(135deg, var(--color-primary-light), #818CF8);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.content-box-inner { padding: 16px 20px; background-color: #ffffff; border-radius: calc(var(--radius-md) - 2px); }

.quote-box {
  border: 4px solid #CBD5E1; border-radius: var(--radius-md);
  background-color: var(--color-bg-soft); padding: 20px 28px; margin: 1.5em 0; position: relative;
}
.quote-box-top, .quote-box-bottom { display: none; }
.quote-title { text-align: left; font-weight: 700; font-size: 16px; margin-bottom: 10px; color: var(--color-text); }
.quote-text { text-align: left; font-size: 15px; color: var(--color-text-sub); line-height: 1.8; }

.table-wrapper { overflow-x: auto; margin: 1.5em 0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.info-table { width: 100%; min-width: 560px; border-collapse: collapse; white-space: nowrap; font-size: 14px; }
.info-table th { background: linear-gradient(135deg, #93C5FD 10%, var(--color-primary) 100%); color: #fff; padding: 13px 14px; text-align: center; font-weight: 700; font-size: 14px; }
.info-table td { padding: 11px 14px; border: 1px solid var(--color-border); text-align: left; color: var(--color-text); }
.info-table tr:nth-child(even) td { background-color: var(--color-bg-soft); }
.accent-cell { color: var(--color-primary); font-weight: 700; }

.cta-button {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  color: #fff; font-family: var(--font-base); font-size: 15px; font-weight: 700;
  height: 50px; min-width: 160px; padding: 0 28px; border-radius: var(--radius-md);
  text-decoration: none; letter-spacing: -0.3px; box-shadow: 0 4px 14px rgba(37,99,235,0.3);
  transition: all 0.2s ease; border: none; cursor: pointer;
}
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,0.4); text-decoration: none; color: #fff; }
.button-center { text-align: center; margin: 24px 0; }

.list-style { list-style: none; padding-left: 0; margin: 1em 0; }
.list-style li { padding: 7px 0 7px 28px; position: relative; font-size: 15px; line-height: 1.6; }
.list-style li:before { content: "✔️"; position: absolute; left: 0; }

.toc-gradient {
  background: linear-gradient(to right, var(--color-bg-soft), #EFF6FF);
  border-left: 4px solid var(--color-primary); padding: 5px; margin: 25px 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.toc-gradient .toc-title { color: var(--color-primary); display: flex; align-items: center; margin: 10px 21px; font-weight: 700; font-size: 1.05em; cursor: pointer; }
.toc-gradient .toc-title::before { content: "📑"; margin-right: 10px; font-size: 1.1em; }
.toc-gradient .toc-toggle { width: 70px; margin-left: auto; padding: 0.2em 0.7em; font-size: 0.85em; color: #fff; border-radius: 50px; background: var(--color-primary); text-align: center; }
.toc-gradient .toc-list { list-style-type: none; padding: 0 30px 10px 0; margin-top: 10px; display: none; }
.toc-gradient .toc-list.show { display: block; }
.toc-gradient .toc-list li { margin-bottom: 8px; position: relative; padding-left: 20px; }
.toc-gradient .toc-list li::before { content: "-"; position: absolute; left: 4px; color: var(--color-primary); }
.toc-gradient .toc-list a { text-decoration: none; color: var(--color-text-sub); font-size: 14px; display: inline-block; transition: all 0.2s ease; }
.toc-gradient .toc-list a:hover { color: var(--color-primary); transform: translateX(4px); text-decoration: none; }

.comparison-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0; }
.network-card { background: white; border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: transform 0.25s ease; }
.network-card:hover { transform: translateY(-4px); }
.network-card.k-network { border-top: 5px solid var(--color-primary); }
.network-card.l-network { border-top: 5px solid #7C3AED; }
.network-title { font-size: 1.3em; font-weight: 700; margin-bottom: 16px; text-align: center; letter-spacing: -0.3px; }
.network-title.k-title { color: var(--color-primary); }
.network-title.l-title { color: #7C3AED; }

.price-box { background: linear-gradient(135deg, #FEF9C3, #FDE68A); border-radius: var(--radius-md); padding: 14px; margin: 14px 0; text-align: center; }
.price-label { font-size: 13px; color: var(--color-text-sub); margin-bottom: 4px; }
.price-value { font-size: 1.8em; font-weight: 800; color: #B45309; }

.feature-list { list-style: none; padding: 0; margin: 14px 0; }
.feature-list li { padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; color: var(--color-text); line-height: 1.5; }
.feature-list li:last-child { border-bottom: none; }

.speed-box { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border-left: 5px solid var(--color-primary); padding: 20px 24px; border-radius: var(--radius-md); margin: 20px 0; }
.speed-title { font-weight: 700; font-size: 1.1em; color: var(--color-primary-dark); margin-bottom: 12px; }

.vs-box { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border: 2px solid #F59E0B; border-radius: var(--radius-lg); padding: 24px; margin: 28px 0; text-align: center; }
.vs-title { font-size: 1.6em; font-weight: 800; color: #B45309; letter-spacing: -0.5px; }

/* ===================================================
   함께 보면 좋은 글 (카드형)
=================================================== */
.related-posts { margin: 40px 0 20px; }
.related-posts-title {
  font-size: 16px; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}
.related-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.related-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  text-decoration: none; background-color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease; display: block;
}
.related-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); text-decoration: none; }
.related-card-thumb { width: 100%; aspect-ratio: 32 / 9; object-fit: cover; display: block; background-color: var(--color-bg-soft); }
.related-card-thumb-placeholder {
  width: 100%; aspect-ratio: 32 / 9;
  background: linear-gradient(135deg, var(--color-primary-pale), #DBEAFE);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.related-card-body { padding: 14px 16px 16px; }
.related-card-label { font-size: 13px; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: block; }
.related-card-title { font-size: 19px; font-weight: 700; color: var(--color-text); line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-card-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===================================================
   버디모바일 배너
=================================================== */
#article-view .post-body .buddy-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  border-radius: 16px; padding: 28px 32px; margin-top: 40px;
  text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 24px rgba(15,52,96,0.35);
}
#article-view .post-body .buddy-banner:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,52,96,0.45); text-decoration: none !important; }
#article-view .post-body .buddy-banner-left { display: flex; flex-direction: column; gap: 6px; }
#article-view .post-body .buddy-banner-sub { font-size: 13px; color: #8899bb; letter-spacing: 0.5px; }
#article-view .post-body .buddy-banner-name { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
#article-view .post-body .buddy-banner-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
#article-view .post-body .buddy-banner-tag {
  font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.1); color: #ccd9ee;
  border-radius: 20px; padding: 5px 12px; border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer; transition: background 0.15s;
}
#article-view .post-body .buddy-banner-tag:hover { background: rgba(255,255,255,0.2); }
#article-view .post-body .buddy-banner-tag.kakao { background: rgba(255,220,0,0.15); color: #ffe566; border-color: rgba(255,220,0,0.3); }
#article-view .post-body .buddy-banner-tag.kakao:hover { background: rgba(255,220,0,0.25); }
#article-view .post-body .buddy-banner-right { font-size: 56px; line-height: 1; }

/* ===================================================
   post-body 글 스타일 (#article-view 우선순위 확보)
=================================================== */
#article-view .post-body {
  font-family: var(--font-base); font-size: 18px !important;
  line-height: 1.85; color: #1A1A1A; word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

/* 구독 영역: post-body 18px 오염 명시적 차단 */
#article-view .tt_cont { font-size: 14px !important; line-height: 1.6 !important; }
#article-view .tt_tit_cont { font-size: 15px !important; line-height: 1.5 !important; }
#article-view .tt_desc { font-size: 13px !important; line-height: 1.6 !important; margin: 0 !important; }
#article-view .tt_btn_subscribe { font-size: 13px !important; }

/* 타이포그래피 */
#article-view .post-body h1 {
  font-size: 32px !important; font-weight: 800; color: #1A1A1A; line-height: 1.4;
  letter-spacing: -0.5px; margin: 0 0 28px !important;
  padding-bottom: 16px; border-bottom: 2px solid #E5E7EB;
}
#article-view .post-body h2 {
  font-size: 26px !important; font-weight: 800 !important; color: #0A0A0A !important;
  line-height: 1.45; letter-spacing: -0.3px; margin: 48px 0 16px !important;
  position: relative; padding-left: 24px !important; padding-right: 0 !important;
  border-left: none !important; display: block;
}
#article-view .post-body h2::before {
  content: '\201C' !important; position: absolute; left: 0; top: -4px;
  font-size: 38px !important; color: #2563EB; font-family: Georgia, serif;
  font-weight: 900; line-height: 1; letter-spacing: 0 !important;
}
#article-view .post-body h2::after {
  content: '\201D' !important; position: static !important; display: inline !important;
  font-size: 38px !important; color: #2563EB; font-family: Georgia, serif;
  font-weight: 900; line-height: 1; vertical-align: bottom; margin-left: 2px;
}
#article-view .post-body h3 {
  font-size: 22px !important; font-weight: 600 !important; color: #374151 !important;
  line-height: 1.5; letter-spacing: -0.2px; margin: 36px 0 14px !important;
  padding: 0 0 8px 0 !important; border-bottom: 2.5px solid #2563EB !important;
  display: block; background: none !important; border-left: none !important;
  position: relative;
}
#article-view .post-body h3::before { content: '' !important; }
#article-view .post-body h4 {
  font-size: 20px !important; font-weight: 700; color: #555;
  line-height: 1.5; margin: 28px 0 10px !important;
}
#article-view .post-body p {
  font-size: 18px !important; line-height: 1.85 !important;
  color: #1A1A1A; margin: 0 0 32px !important;
}
#article-view .post-body p + p { margin-top: 0 !important; }

/* 강조 */
#article-view .post-body .blue,
#article-view .post-body strong.blue { color: #2563EB !important; font-weight: 700; }
#article-view .post-body .red,
#article-view .post-body strong.red  { color: #E53E3E !important; font-weight: 700; }
#article-view .post-body strong { font-weight: 700; color: inherit; }
#article-view .post-body u { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #2563EB; }

/* 불릿 리스트 */
#article-view .post-body ul {
  background-color: #fff; border: 1px solid #E2E8F0; border-radius: 10px;
  padding: 8px 16px !important; margin: 0 0 20px !important;
}
#article-view .post-body ul li {
  font-size: 16px !important; line-height: 1.75 !important; color: #1A1A1A;
  padding: 10px 0 10px 22px !important; border-bottom: 1px solid #F1F5F9;
  margin: 0 !important; list-style: none !important; position: relative;
}
#article-view .post-body ul li:last-child { border-bottom: none !important; }
#article-view .post-body ul li::before {
  content: '' !important; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 7px !important; height: 7px !important;
  border-radius: 50%; background-color: #2563EB !important;
}

/* 번호 리스트 */
#article-view .post-body ol { margin: 0 0 20px !important; padding-left: 0 !important; counter-reset: ol-counter; }
#article-view .post-body ol li {
  font-size: 18px !important; line-height: 1.8 !important; color: #1A1A1A;
  margin: 0 0 8px 0 !important; padding-left: 20px !important;
  position: relative; list-style: none !important;
}
#article-view .post-body ol li::before {
  content: counter(ol-counter) "." !important; counter-increment: ol-counter;
  position: absolute; left: 0; color: #2563EB; font-weight: 700;
  font-size: 15px; background: none; width: auto; height: auto; border-radius: 0;
}

/* 인용구 */
#article-view .post-body blockquote {
  margin: 24px 0 !important; padding: 16px 20px !important;
  background-color: #F8F9FA; border-left: 4px solid #E5E7EB !important;
  border-radius: 0 8px 8px 0; color: #555; font-size: 17px !important; line-height: 1.8;
}

/* 구분선 */
#article-view .post-body hr { border: none; border-top: 1px solid #E5E7EB; margin: 36px 0; }

/* 이미지 — post-body 직접 자식 img만 (에디터 figure 밖 삽입 이미지) */
#article-view .post-body > img {
  max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 24px auto;
}
/* 에디터 figure 안 이미지: 기존 티스토리 스타일 그대로 유지 */
#article-view .post-body figure img {
  margin: 0; display: inline-block; max-width: 100%; height: auto;
}
/* 프로필 img — 원래 스킨 클래스명 보호 (언더바/하이픈 둘 다) */
.img_profile,
.img-profile {
  display: block !important;
  margin: 0 !important;
  border-radius: 50% !important;
}
.box-profile .img-profile {
  float: none !important;
  margin: 0 auto 12px !important;
}
.area_reply .list_reply .img_profile,
.comments .comment-list .avatar {
  float: left !important;
  margin: 0 !important;
  border-radius: 50% !important;
}

/* 테이블 */
#article-view .post-body .table-wrap {
  overflow-x: auto; margin: 24px 0; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
#article-view .post-body table { width: 100%; border-collapse: collapse; font-size: 16px !important; min-width: 480px; }
#article-view .post-body table th { background-color: #2563EB !important; color: #fff !important; font-weight: 700; padding: 12px 14px; text-align: center; font-size: 15px !important; }
#article-view .post-body table td { padding: 11px 14px !important; border: 1px solid #E5E7EB; color: #1A1A1A !important; text-align: left; line-height: 1.6; }
#article-view .post-body table tr:nth-child(even) td { background-color: #F8F9FA; }
#article-view .post-body table td.accent { color: #2563EB !important; font-weight: 700; }

/* 하이라이트 박스 */
#article-view .post-body .box-blue,
#article-view .post-body .box-red {
  margin: 24px 0 !important; padding: 16px 20px !important;
  border-radius: 8px; font-size: 17px !important; line-height: 1.8;
}
#article-view .post-body .box-blue { background-color: #EFF6FF !important; border-left: 4px solid #2563EB !important; color: #1E40AF; }
#article-view .post-body .box-red { background-color: #FFF5F5 !important; border-left: 4px solid #E53E3E !important; color: #9B2C2C; }
#article-view .post-body .box-blue strong,
#article-view .post-body .box-red strong { display: block; margin-bottom: 6px; font-size: 17px; }

/* 목차 */
#article-view .post-body .toc { background-color: #F8F9FA !important; border: 1px solid #E5E7EB !important; border-radius: 8px; padding: 20px 24px !important; margin: 28px 0 !important; }
#article-view .post-body .toc-title { font-size: 16px !important; font-weight: 700; color: #888; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px !important; }
#article-view .post-body .toc ol { margin: 0 !important; counter-reset: toc-counter; padding: 0 !important; }
#article-view .post-body .toc ol li {
  padding-left: 24px !important; margin-bottom: 6px !important; font-size: 17px !important;
  color: #555; counter-increment: toc-counter; list-style: none !important; position: relative;
}
#article-view .post-body .toc ol li::before {
  content: counter(toc-counter) "." !important; color: #2563EB !important; font-weight: 700;
  font-size: 15px !important; background: none !important; width: auto !important;
  height: auto !important; border-radius: 0 !important; position: absolute; left: 0;
}
#article-view .post-body .toc ol li a { color: #555 !important; text-decoration: none !important; }
#article-view .post-body .toc ol li a:hover { color: #2563EB !important; text-decoration: underline !important; }

/* CTA 버튼 */
#article-view .post-body .btn-wrap { text-align: center; margin: 28px 0 !important; }
#article-view .post-body .btn {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 32px !important; height: 52px !important; border-radius: 8px;
  font-family: var(--font-base); font-size: 16px !important; font-weight: 800;
  text-decoration: none !important; letter-spacing: -0.2px;
  transition: all 0.2s ease; cursor: pointer; border: none; color: #1A1A1A !important;
}
#article-view .post-body .btn-yellow,
#article-view .post-body .btn-blue,
#article-view .post-body .btn-red {
  background-color: #FFD600 !important; color: #1A1A1A !important;
  box-shadow: 0 2px 10px rgba(255,214,0,0.4);
}
#article-view .post-body .btn-yellow:hover,
#article-view .post-body .btn-blue:hover,
#article-view .post-body .btn-red:hover {
  background-color: #F0C000 !important; transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,214,0,0.55); color: #1A1A1A !important; text-decoration: none !important;
}

/* ===================================================
   FAQ ★ 단일 정의 (중복 없음)
=================================================== */
#article-view .post-body .faq-section {
  margin: 40px 0 20px;
}
#article-view .post-body .faq-item {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
#article-view .post-body .faq-q {
  background-color: #F8F9FA !important;
  padding: 16px 20px 16px 56px !important;
  font-weight: 700;
  font-size: 16px !important;
  color: #1A1A1A;
  line-height: 1.5;
  list-style: none !important;
  position: relative;
}
#article-view .post-body .faq-q::before {
  content: 'Q' !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  background-color: #2563EB !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  border-radius: 50% !important;
}
#article-view .post-body .faq-a {
  padding: 16px 20px 16px 56px !important;
  font-size: 15px !important;
  color: #555;
  line-height: 1.8;
  border-top: 1px solid #E5E7EB;
  background-color: #fff;
  position: relative;
  list-style: none !important;
}
#article-view .post-body .faq-a::before {
  content: 'A' !important;
  position: absolute !important;
  left: 16px !important;
  top: 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  background-color: #FFD600 !important;
  color: #1A1A1A !important;
  font-size: 13px;
  font-weight: 800;
  border-radius: 50% !important;
}

/* ===================================================
   번호 목록 카드형
=================================================== */
#article-view .post-body .list-number {
  list-style: none !important; padding: 0 !important; margin: 0 0 24px !important;
  counter-reset: list-number-counter;
}
#article-view .post-body .list-number li {
  counter-increment: list-number-counter; display: flex !important; align-items: flex-start;
  gap: 14px; padding: 14px 16px !important; margin: 0 0 10px 0 !important;
  background-color: #fff; border: 1px solid #E5E7EB; border-radius: 8px;
  font-size: 16px !important; line-height: 1.7 !important; color: #1A1A1A;
  list-style: none !important; position: static !important;
}
#article-view .post-body .list-number li::before {
  content: counter(list-number-counter) !important; display: inline-flex !important;
  align-items: center; justify-content: center;
  min-width: 28px !important; height: 28px !important; width: 28px !important;
  background-color: #2563EB !important; color: #fff !important;
  font-size: 13px !important; font-weight: 800; border-radius: 50% !important;
  flex-shrink: 0; margin-top: 1px; position: static !important; left: auto; top: auto;
}

/* ===================================================
   번호 목록 제목+설명 분리형
=================================================== */
#article-view .post-body .list-number-desc {
  list-style: none !important; padding: 0 !important; margin: 0 0 24px !important;
  counter-reset: list-desc-counter;
}
#article-view .post-body .list-number-desc li {
  counter-increment: list-desc-counter; display: flex !important; align-items: flex-start;
  gap: 18px; padding: 22px 0 !important; margin: 0 !important;
  border-bottom: 1px solid #E5E7EB; background: none !important; border-radius: 0 !important;
  border-left: none !important; border-right: none !important; border-top: none !important;
  list-style: none !important; position: static !important; font-size: 16px !important;
}
#article-view .post-body .list-number-desc li:first-child { border-top: 1px solid #E5E7EB; }
#article-view .post-body .list-number-desc li::before {
  content: counter(list-desc-counter) !important; display: inline-flex !important;
  align-items: center; justify-content: center;
  min-width: 36px !important; width: 36px !important; height: 36px !important;
  background-color: #2563EB !important; color: #fff !important;
  font-size: 16px !important; font-weight: 800; border-radius: 50% !important;
  flex-shrink: 0; margin-top: 2px; position: static !important; left: auto; top: auto;
}
#article-view .post-body .list-number-desc li .item-body { display: flex; flex-direction: column; gap: 6px; }
#article-view .post-body .list-number-desc li .item-title { font-size: 18px !important; font-weight: 800; color: #1A1A1A !important; line-height: 1.4; margin: 0 !important; }
#article-view .post-body .list-number-desc li .item-desc { font-size: 15px !important; color: #64748B !important; line-height: 1.7; margin: 0 !important; }

/* ===================================================
   섹션 박스
=================================================== */
#article-view .post-body .section-box {
  background-color: #F8FAFC !important; border-radius: 12px !important;
  padding: 24px 28px !important; margin: 0 0 32px !important; border: 1px solid #E2E8F0 !important;
}
#article-view .post-body .section-box > p:first-child { margin-top: 0 !important; }
#article-view .post-body .section-box > *:last-child { margin-bottom: 0 !important; }
#article-view .post-body .section-box ul { background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 8px !important; }
#article-view .post-body .section-box ul li { border-bottom-color: #E2E8F0 !important; }

/* 따옴표 + 큰제목 세트 */
#article-view .post-body .section-quote-header { margin: 36px 0 0; }
#article-view .post-body .section-quote-header::before {
  content: '\201C\201C'; display: block; font-size: 28px; color: #CBD5E1;
  line-height: 1; margin-bottom: 8px; font-family: Georgia, serif;
}
#article-view .post-body .section-quote-header h2,
#article-view .post-body .section-quote-header h3 { border-left: none !important; padding-left: 0 !important; margin-top: 4px !important; margin-bottom: 0 !important; }
#article-view .post-body .section-quote-header::after { content: ''; display: block; border-bottom: 1px solid #E5E7EB; margin-top: 16px; }

/* ===================================================
   함께 보면 좋은 글 (#article-view 우선순위)
=================================================== */
#article-view .post-body .related-posts { margin: 40px 0 20px; }
#article-view .post-body .related-posts-title { font-size: 16px !important; font-weight: 700; color: #888; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 16px !important; padding-bottom: 10px; border-bottom: 2px solid #E5E7EB; }
#article-view .post-body .related-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
#article-view .post-body .related-card { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; text-decoration: none !important; background-color: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; display: block; }
#article-view .post-body .related-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); text-decoration: none !important; }
#article-view .post-body .related-card-thumb { width: 100%; aspect-ratio: 32 / 9; object-fit: cover; display: block; }
#article-view .post-body .related-card-thumb-placeholder { width: 100%; aspect-ratio: 32 / 9; background: linear-gradient(135deg, #EFF6FF, #DBEAFE); display: flex; align-items: center; justify-content: center; font-size: 20px; }
#article-view .post-body .related-card-body { padding: 14px 16px 16px; }
#article-view .post-body .related-card-label { font-size: 13px !important; font-weight: 700; color: #2563EB !important; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: block; }
#article-view .post-body .related-card-title { font-size: 19px !important; font-weight: 700; color: #1A1A1A !important; line-height: 1.45; margin-bottom: 8px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#article-view .post-body .related-card-desc { font-size: 13px !important; color: #888 !important; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===================================================
   모바일 반응형 (max-width: 820px)
=================================================== */
@media only screen and (max-width: 820px) {
  body, th, td, input, select, textarea, button, p, span { font-family: var(--font-base); font-weight: 400; }
  .ico_skin { background: url("images/ico_skin_320.png") 0 0 no-repeat; }
  .img_profile { width: 40px; height: 40px; border-radius: 40px; }

  /* 헤더 */
  .area_head { z-index: 20; height: 60px; }
  .area_head .area_profile { overflow: hidden; float: none; padding: 10px 65px 0 15px; }
  .area_head .area_profile .info_profile { max-width: 180px; }
  .area_head .img_profile { margin-right: 8px; }
  .area_list .tit_category { line-height: 60px; }
  .area_list .tit_category .link_category { font-size: 16px; font-weight: 700; }
  .area_head .on .list_name { display: none; }
  .area_head .btn_name { margin-top: 2px; color: var(--color-text); margin-bottom: 0px; font-weight: 700; }
  .area_head .ico_name { display: none; }
  .area_head .txt_condition { overflow: hidden; width: auto; line-height: 16px; }

  .area_menu { display: none; right: 0; top: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; width: 220px; background-color: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.08); }
  .area_menu .area_search { display: none; width: 188px; height: 38px; margin: 15px 0 0 15px; border: 1px solid var(--color-border); border-radius: 30px; }
  .area_menu .frm_search { width: 188px; height: 38px; }
  .area_menu .lab_search { margin: 11px 0 0 16px; background-position: -70px -110px; }
  .area_menu .tf_search { width: 130px; margin: 9px 0 3px 8px; outline: none; font-family: var(--font-base); }

  .dimmed_layer { background-color: #000; opacity: 0.6; }
  .area_menu .btn_search { display: none; }
  .area_menu .area_navi { display: block; position: static; margin: 0; }

  .area_head .btn_menu { display: block; overflow: hidden; position: absolute; right: 15px; top: 0; width: 40px; height: 35px; margin-top: 13px; border: 0 none; }
  .area_head .ico_menu { display: block; width: 40px; height: 31px; margin: 0; background-position: 0 -80px; text-indent: 0; }
  .area_menu .btn_cate { display: none; }
  .area_menu .list_cate { position: static; width: 220px; padding: 13px 0 15px; border: 0 none; border-radius: 0; }

  .area_navi .list_cate ul li { line-height: 18px; }
  .area_navi .list_cate ul li a { margin-bottom: 0; padding: 7px 0 15px 24px; font-size: 15px; line-height: 22px; font-weight: 600; }
  .area_navi .list_cate ul li ul li a { padding: 4px 0 15px 24px; font-weight: 400; }
  .area_navi .list_cate ul li ul li ul { padding-bottom: 3px; margin-top: -3px; }
  .area_navi .list_cate ul li ul li ul li { padding-left: 0; list-style: none; margin-bottom: 1px; }
  .area_navi .list_cate ul li ul li ul li a { margin-bottom: 0; padding: 4px 0 11px 32px; font-size: 14px; font-weight: 400; }
  .area_navi .list_cate ul li ul li ul li a::before { content: '· '; }
  .area_navi .list_cate .menu_profile { display: block; margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--color-border); }

  .btn_close { position: fixed; right: 224px; top: 11px; width: 30px; height: 30px; z-index: 31; }
  .on .btn_close { display: block; }
  .ico_close { display: inline-block; width: 18px; height: 18px; background-position: -50px -110px; vertical-align: middle; }

  /* 푸터 */
  .wrap_etc { display: none; }
  .area_foot { height: 42px; font-size: 11px; line-height: 42px; color: var(--color-text-muted); }
  .area_foot .emph_t { font-weight: 700; color: var(--color-text-muted); }

  /* 페이징 */
  .area_paging_list { display: none; }
  .area_paging_simple { display: block; }
  .area_paging { padding: 20px 0 10px; margin: 0; position: static; }
  .area_paging .inner_paging { display: block; padding: 0 20px; }
  .area_paging .inner_paging a { display: block; line-height: 20px; font-size: 15px; }
  .area_paging .inner_paging a.link_prev { float: left; }
  .area_paging .inner_paging a.link_next { float: right; }
  .area_paging .ico_skin { width: 10px; height: 18px; margin-top: 0; }
  .area_paging .ico_prev { float: left; margin-right: 11px; background-position: -130px -80px; }
  .area_paging .ico_next { float: right; margin-left: 11px; background-position: -130px -100px; }
  .area_paging .no-more-prev, .area_paging .no-more-next { text-decoration: none; color: var(--color-text-muted); }
  .area_paging .no-more-prev .ico_prev { background-position: -110px -80px; }
  .area_paging .no-more-next .ico_next { background-position: -110px -100px; }
  #tt-body-page .area_more { display: none; }

  /* 뷰 */
  .article_skin { position: relative; width: 100%; }
  .skin_view .area_title { margin: 0 20px; padding: 44px 0 20px; }
  .skin_view .area_title .my_edit { display: none; }
  .skin_view .tit_category { font-size: 13px; }
  .skin_view .tit_category a { font-weight: 700; }
  .skin_view .tit_post { margin-top: 3px; padding: 0 8px; font-weight: 800; font-size: 26px; line-height: 31px; }
  .skin_view .txt_detail { margin-top: 18px; word-break: break-all; }
  .skin_view .txt_detail .txt_bar { margin: 0 8px; }
  .skin_view .area_view { padding: 22px 20px 22px; }
  .skin_view .area_view p { font-size: 16px; line-height: 1.75; color: var(--color-text); }
  .skin_view .img_view { width: 100%; height: auto; margin: 11px 0 6px; }
  .skin_view .area_etc { position: relative; height: auto; margin: 0; }
  .skin_view .area_etc .list_tag { margin-top: 0; padding: 0 20px; float: none; margin-bottom: 22px; }
  .skin_view .list_tag .tit_tag { margin-right: 3px; font-size: 13px; float: none; display: inline; }
  .skin_view .list_tag .desc_tag { margin: 0; float: none; display: inline; font-weight: 700; }
  .skin_view .list_tag .link_tag { font-weight: 400; font-size: 13px; }

  /* 댓글 */
  .skin_view .area_reply { margin-top: 0; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); }
  .area_reply .tit_reply { padding-left: 15px; color: var(--color-text); font-weight: 700; display: block; padding-bottom: 1px; }
  .area_reply .btn_reply { margin-top: 0; line-height: 20px; vertical-align: top; }
  .area_reply .btn_reply span { font-weight: 700; }
  .area_reply .btn_reply .ico_reply { margin: 6px 0 0 0px; background-position: -150px -80px; }
  .btn_reply.on .ico_reply { background-position: -150px -90px; }
  .area_reply .list_reply { margin-bottom: 0px; }
  .area_reply .list_reply .tt_more_preview_comments_text { font-size: 14px; color: var(--color-text-sub); }
  .area_reply .list_reply li { overflow: visible; padding: 20px 15px 16px; border-bottom: 1px solid var(--color-border); }
  .area_reply .list_reply li.tt_more_preview_comments_wrap { height: 20px; }
  .area_reply .list_reply li:hover { background-color: #fff; }
  .area_reply .list_reply li:last-child { border: 0; padding-bottom: 14px; }
  .area_reply .list_reply .my_reply { background-color: var(--color-bg-soft); }
  .area_reply .list_reply .my_reply:hover { background-color: var(--color-bg-soft); }
  .area_reply .list_reply .re_reply { padding-left: 60px; }
  .area_reply .list_reply .prev_reply:before { content: ''; position: absolute; left: 31px; top: 48px; width: 1px; height: 100%; background-color: var(--color-border); }
  .area_reply .reply_content { display: block; float: none; padding: 0 28px 0 45px; }
  .area_reply .list_reply .img_profile { width: 33px; height: 33px; border-radius: 33px; margin: 0; }
  .area_reply .list_reply .tit_nickname { font-size: 13px; overflow: visible; margin: 0px 5px 2px 0; color: var(--color-text); vertical-align: top; white-space: normal; font-weight: 700; }
  .area_reply .re_reply .tit_nickname { color: var(--color-primary); }
  .area_reply .reply_secret .tit_nickname { margin-top: 0; vertical-align: top; }
  .area_reply .ico_secret, .skin_visitor .area_reply .ico_secret { margin-top: 3px; background-position: -90px -110px; }
  .area_reply .txt_reply, .area_reply .re_reply .txt_reply { width: 100%; margin-top: 0; line-height: 20px; font-size: 14px; color: var(--color-text); }
  .area_reply .txt_date { margin-top: 4px; }
  .area_reply .reply_secret .txt_date { margin-top: 0; }
  .area_reply .btn_replymenu { display: block; position: absolute; right: 2px; top: 12px; width: 30px; height: 30px; }
  .area_reply .btn_replymenu .ico_replymenu { display: inline-block; width: 3px; height: 13px; background-position: -150px -100px; vertical-align: middle; }
  .area_reply .list_reply li .my_edit { right: 10px; top: 20px; z-index: 10; width: 95px; padding: 10px 0; border: 1px solid var(--color-border); background-color: #fff; border-radius: var(--radius-sm); }
  .area_reply .list_reply li .my_edit .link_edit { display: block; font-size: 14px; line-height: 32px; color: var(--color-text); text-align: center; }
  .area_reply .fld_reply { padding: 0 15px; }
  .area_reply .btn_replymore { margin-top: 5px; border-top: 1px solid #CBD5E1; border-bottom: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-sub); }
  .area_reply .reply_write { margin-top: 4px; padding: 10px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .area_reply .tf_reply { width: 100%; height: 67px; padding: 0; border: 0 none; font-size: 14px; outline: none; font-family: var(--font-base); }
  .area_reply .lab_write { left: 10px; top: 8px; font-size: 14px; color: var(--color-text-muted); }
  .area_reply .reply_writer { margin-top: 8px; }
  .area_reply .writer_info { overflow: hidden; float: none; width: 100%; }
  .area_reply .writer_info .info_name { display: block; float: left; width: 50%; margin-right: 0; }
  .area_reply .writer_info .info_pw { display: block; float: left; width: 50%; }
  .area_reply .writer_info .wrap_info { display: block; }
  .area_reply .info_name .wrap_info { margin-right: 5px; }
  .area_reply .info_pw .wrap_info { margin-left: 5px; }
  .area_reply .writer_info .lab_info { left: 11px; top: 7px; font-size: 14px; color: var(--color-text-muted); }
  .area_reply .info_pw .lab_info { left: 16px; }
  .area_reply .writer_info .inp_info { width: 100%; height: 35px; font-size: 14px; outline: none; padding: 3px 10px 0; -webkit-appearance: none; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-family: var(--font-base); }
  .area_reply .writer_check { overflow: hidden; float: left; padding-top: 10px; position: inherit; right: inherit; }
  .area_reply .writer_check .check_secret { display: block; float: left; width: 75px; height: 33px; line-height: 35px; }
  .area_reply .writer_check .inp_secret { width: 75px; height: 33px; }
  .area_reply .writer_check .lab_secret { position: static; padding-left: 33px; font-size: 14px; color: var(--color-text-sub); }
  .area_reply .writer_check .ico_check { left: 0; top: 3px; width: 26px; height: 26px; background-position: -50px -80px; }
  .area_reply .on .ico_check, .area_reply .writer_check .inp_secret:checked+.lab_secret .ico_check { background-position: -80px -80px; }
  .area_reply .writer_check .inp_secret:checked+.lab_secret { font-weight: 700; }
  .area_reply .writer_btn { float: right; padding-top: 10px; position: inherit; right: inherit; }
  .area_reply .writer_btn .btn_enter { width: 62px; height: 33px; font-size: 15px; line-height: 34px; padding-top: 1px; }
  .area_reply .hiddenComment .txt_reply { font-weight: 700; }
  .area_reply .hiddenComment .txt_date { margin-top: 0px; }

  /* 이전/다음 카테고리 */
  .skin_view .another_category { margin: 20px -15px 4px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 23px 0; width: auto; }
  .skin_view .another_category h4 { float: none; padding: 0 15px !important; width: auto; border: 0 !important; }
  .skin_view .another_category table { float: none; margin-top: 10px !important; max-height: 145px; overflow: hidden; display: block; }
  .skin_view .another_category table tr { width: 100%; margin-bottom: 9px; padding: 0 15px !important; }
  .skin_view .another_category table tr:nth-child(even) th { padding: 0 !important; }
  .skin_view .another_category table th { font-size: 14px; color: var(--color-text-muted); }
  .skin_view .another_category table th a { font-size: 15px; color: var(--color-text) !important; max-width: 230px; }
  .skin_view .another_category table th a.current { font-weight: 700; }
  .skin_view .another_category table th span { font-size: 15px; display: inline-block; line-height: 1.5; }

  /* 리스트 */
  .cont_skin { margin-top: 63px; }
  #tt-body-search .area_head .btn_name, #tt-body-search .area_head .txt_condition,
  #tt-body-tag .area_head .btn_name, #tt-body-tag .area_head .txt_condition,
  #tt-body-category .area_head .btn_name, #tt-body-category .area_head .txt_condition,
  #tt-body-guestbook .area_head .btn_name, #tt-body-guestbook .area_head .txt_condition { display: none; }
  .area_foot { margin-top: 21px; }

  .list_content { max-height: 113px; padding: 21px 15px 20px; }
  .list_content .thumbnail_post, .list_content .thumbnail_post img { width: 76px; height: 76px; }
  .list_content .thumbnail_post { margin: 8px 0 8px 30px; border-radius: var(--radius-sm); }
  .list_content .tit_post { font-size: 18px; font-weight: 700; }
  .list_content .txt_post { max-height: 37px; margin-top: 2px; font-size: 14px; line-height: 19px; color: var(--color-text-sub); -webkit-line-clamp: 2; }
  .list_content .detail_info { margin-top: 8px; font-size: 13px; color: var(--color-text-muted); }
  .list_content .detail_info .link_cate { font-size: 13px; }
  .list_content .detail_info .txt_bar { margin: 0 5px; }

  /* 방명록 */
  .skin_visitor .area_reply .fld_reply { padding-top: 12px; }
  .skin_visitor .area_reply .reply_write { margin-top: 0; }
  .skin_visitor .area_reply .reply_writer { margin-top: 10px; }
  .skin_visitor .area_reply .list_reply { margin-top: 25px; }
  .skin_tag .list_tag { overflow: hidden; padding: 30px 20px 90px; }

  /* 카테고리 레이어 */
  .layer_on { overflow: hidden; }
  .layer_on .cont_skin { margin-top: 0; padding-top: 61px; }
  .layer_on .dimmed_layer { display: block; }
  .layer_on .area_head .btn_menu { display: none; }
  .layer_on .area_menu { display: block; }
  .layer_on .area_menu .area_search { display: block; }
  .layer_on .area_menu .frm_search { display: block; }
  .layer_on .area_menu .list_cate { display: block; }
  .layer_on .btn_close { display: block; }

  /* 새 CTA 모바일 */
  .new-cta-bar { padding: 10px 12px 14px; }
  .new-cta-btn { font-size: 11px; padding: 11px 6px; border-radius: var(--radius-md); }
  .new-cta-btn .cta-icon { font-size: 18px; }

  /* 글 본문 모바일 */
  #article-view .post-body h1  { font-size: 27px !important; }
  #article-view .post-body h2  { font-size: 25px !important; padding-left: 20px !important; }
  #article-view .post-body h2::before { font-size: 30px !important; }
  #article-view .post-body h2::after  { font-size: 30px !important; }
  #article-view .post-body h3  { font-size: 21px !important; padding-bottom: 6px !important; }
  #article-view .post-body h4  { font-size: 19px !important; }
  #article-view .post-body p   { font-size: 17px !important; margin-bottom: 28px !important; }
  #article-view .post-body ul li { font-size: 16px !important; }
  #article-view .post-body ol li { font-size: 17px !important; }
  #article-view .post-body table { font-size: 15px !important; }
  #article-view .post-body table th,
  #article-view .post-body table td { padding: 9px 10px !important; }
  #article-view .post-body .btn { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  #article-view .post-body .btn-wrap { padding: 0 !important; }
  #article-view .post-body .toc ol li { font-size: 16px !important; }
  #article-view .post-body .box-blue,
  #article-view .post-body .box-red { font-size: 16px !important; }
  #article-view .post-body .faq-q { font-size: 16px !important; padding: 14px 16px 14px 50px !important; }
  #article-view .post-body .faq-a { font-size: 15px !important; padding: 14px 16px 14px 50px !important; }
  #article-view .post-body .list-number li { font-size: 15px !important; padding: 12px 14px !important; gap: 12px; }
  #article-view .post-body .list-number li::before { min-width: 24px !important; height: 24px !important; font-size: 12px !important; }
  #article-view .post-body .list-number-desc li { gap: 14px; padding: 18px 0 !important; }
  #article-view .post-body .list-number-desc li::before { min-width: 30px !important; width: 30px !important; height: 30px !important; font-size: 14px !important; }
  #article-view .post-body .list-number-desc li .item-title { font-size: 17px !important; }
  #article-view .post-body .list-number-desc li .item-desc { font-size: 15px !important; }
  #article-view .post-body .section-box { padding: 18px 20px !important; border-radius: 10px !important; margin: 0 0 24px !important; }
  #article-view .post-body .related-posts-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  #article-view .post-body .related-card-desc { display: none; }
  #article-view .post-body .related-card-title { font-size: 17px !important; }
  #article-view .post-body .buddy-banner { padding: 16px 18px !important; gap: 12px; }
  #article-view .post-body .buddy-banner-name { font-size: 22px !important; }
  #article-view .post-body .buddy-banner-right { font-size: 36px !important; }
  #article-view .post-body .buddy-banner-tag { font-size: 11px !important; padding: 4px 8px; }

  /* 글 본문 공통 모바일 */
  .title { font-size: 20px; padding: 16px 18px; }
  .subtitle-style { font-size: 17px; }
  .comparison-box { grid-template-columns: 1fr; gap: 14px; }
  .info-table { font-size: 13px; }
  .info-table th, .info-table td { padding: 9px 10px; }
  .vs-title { font-size: 1.3em; }
  .network-card { padding: 18px; }
  .cta-button { width: 100%; max-width: 320px; }
}

@media only screen and (max-width: 820px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-width: 820px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 820px) and (min-resolution: 1.5dppx) {
  .ico_skin { background-image: url("images/ico_skin_640.png"); -webkit-background-size: 160px 160px; background-size: 160px 160px; }
}

@media only screen and (max-width: 800px) {
  .tt-comment-cont { padding: 0 15px; }
}

@media only screen and (max-width: 480px) {
  #article-view .post-body .related-posts-grid { grid-template-columns: 1fr; }
}