@charset "UTF-8";

/* ==========================================================================
   1. Theme Tokens (네이비 & 미니멀 컬러)
   ========================================================================== */
:root {
  --navy-700: #0b1f5e;
  --navy-600: #0e2a73;
  --navy-500: #1a3b94;
  --navy-400: #2f4aa0;
  --navy-200: #e9efff;
  --ink-900:  #0f1115;
  --border-soft: #ebebeb;
}

/* ==========================================================================
   2. Reset & Global
   ========================================================================== */
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,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:#fff; font-size:16px; line-height:1.7; font-family:'Noto Sans KR', sans-serif; color:#444; -webkit-font-smoothing: antialiased; }
a { color:#333; text-decoration:none; }
a:active, a:hover { text-decoration:underline; }
address,caption,cite,code,dfn,em,var { font-style:normal; font-weight:normal; }

#tistorytoolbarid { display:none !important; }

/* Accessible Hidden (스킵 네비게이션) */
#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(--navy-500); }
.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:#ebebeb; }
.img_profile { float:left; margin-right:16px; border-radius:50px; }

/* 상단 스크롤 표시줄 */
#progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--navy-500), var(--navy-700));
  z-index: 9999;
}

/* 형광펜 효과 */
u {
  text-decoration: none; display: inline;
  box-shadow: inset 0 -9px 0 rgba(26, 59, 148, 0.2);
}

/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */
.wrap_skin { position:relative; }
.area_head { position:fixed; top:0; left:0; z-index:10; width:100%; height:80px; border-bottom:1px solid #ebebeb; background-color:rgba(255,255,255,.95); }
.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:bold; margin-bottom:2px; }
.area_head .txt_condition { width:100%; font-size:12px; color:#aaa; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

.area_menu { position:fixed; right:15px; top:21px; z-index:31; }
.area_menu .btn_cate { width:160px; height:38px; border:1px solid var(--navy-500); border-radius:3px; font-weight:bold; font-size:12px; line-height:38px; color:var(--navy-500); padding:0 1px 0 5px; }

/* ==========================================================================
   4. Article & Post Body (제목 & 요약 카드 네이비 스타일링)
   ========================================================================== */
.skin_view .area_title { margin:0 15px; padding:0 0 20px; border-bottom:1px solid #ebebeb; text-align:center; }
.skin_view .tit_category a { font-weight:bold; color:var(--navy-500); }
.skin_view .tit_post { margin-top:7px; font-size:36px; font-weight:bold; color:#000; line-height:1.3; }

.skin_view .area_view { padding:30px 0; }
.skin_view .area_view p { font-size:17px; line-height:1.85; margin:14px 0; color:#333; }

/* H2 (메인 강조 네이비 타이틀) */
.skin_view .area_view h2 {
  font-size: 22px;
  margin: 30px 0 15px;
  padding: 12px 16px;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--navy-600) 0%, var(--navy-400) 100%);
  border-radius: 8px;
  line-height: 1.45;
}

/* H3 (서브 타이틀) */
.skin_view .area_view h3 {
  font-size: 19px;
  margin: 24px 0 12px;
  padding: 10px 14px;
  font-weight: 700;
  color: var(--ink-900);
  background: #f6f8ff;
  border-left: 4px solid var(--navy-500);
  border-radius: 6px;
}

/* H4 (세부 타이틀) */
.skin_view .area_view h4 {
  font-size: 17px;
  margin: 18px 0 10px;
  padding-left: 10px;
  font-weight: 600;
  color: var(--navy-700);
  border-left: 3px solid var(--navy-400);
}

/* 리드 인트로 박스 */
.skin_view .area_view .lead-intro {
  font-size: 16px; line-height: 1.8; color: #2a2f45;
  background: #f4f6fb; border: 1px solid #cdd6f4;
  border-radius: 12px; padding: 14px 18px; margin: 16px 0 20px;
}

/* 요약 카드 Box */
.skin_view .area_view .summary-card {
  background: var(--navy-200);
  border-left: 4px solid var(--navy-500);
  padding: 16px 18px; margin: 20px 0; border-radius: 8px;
  font-size: 16px; color: #25304d;
}

/* 본문 카드형 래퍼 */
.skin_view .area_view .post-card {
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.04);
  margin: 20px 0; padding: 20px;
}

/* 본문 목차 (TOC) Box */
.aros-toc, .toc-container {
  border: 1px solid var(--border-soft);
  padding: 16px 20px; background-color: #fff;
  border-radius: 8px; margin: 20px 0;
}
.aros-toc p, .toc-container p { font-size: 16px; font-weight: 700; color: var(--navy-700); margin-bottom: 8px; }
#toc a { color: var(--navy-500); }
#toc a:hover { text-decoration: underline; }

/* ==========================================================================
   5. List Page (목록 레이아웃)
   ========================================================================== */
.list_content { padding:35px 0; border-bottom:1px solid #ebebeb; }
.list_content::after { content:''; clear:both; display:block; }
.list_content .thumbnail_post { float:right; height:140px; width:140px; margin:4px 0 4px 30px; object-fit: cover; border-radius: 8px; }
.list_content .link_post { display:block; overflow:hidden; text-decoration:none; }
.list_content .link_post:hover .tit_post { text-decoration: underline; color:var(--navy-500); }
.list_content .tit_post { display:block; font-weight:bold; font-size:24px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.list_content .txt_post { display:-webkit-box; overflow:hidden; max-height:80px; margin-top:8px; font-size:15px; line-height:1.6; color:#666; word-break:break-all; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.list_content .detail_info { margin-top:16px; font-size:12px; color:#aaa; }
.list_content .detail_info .link_cate { font-size:12px; text-decoration:none; color:var(--navy-500); font-weight:bold; }

/* ==========================================================================
   6. Paging (페이지 번호 스타일)
   ========================================================================== */
.area_paging { margin: 40px 0 80px; text-align: center; }
.area_paging .inner_paging { display: inline-block; overflow: hidden; }
.area_paging .link_page, .area_paging .link_prev, .area_paging .link_next, .area_paging .interword {
  float: left; padding: 6px 12px; margin: 0 2px; font-size: 14px; color: #666; text-decoration: none;
}
.area_paging .link_page span.selected {
  border-radius: 4px; background-color: var(--navy-500); color: #fff; font-weight: bold; padding: 6px 12px;
}
.area_paging .link_page:hover { color: var(--navy-500); }

/* ==========================================================================
   7. Footer (하단 정보 스타일)
   ========================================================================== */
.wrap_etc { padding-top:48px; padding-bottom:30px; border-top:1px solid #ebebeb; background: #fafafa; margin-top: 60px; }
.wrap_etc .inner_aside { width:820px; margin:0 auto; font-size: 13px; color: #777; line-height: 1.6; }
.area_foot { height:50px; font-size:12px; line-height:50px; text-align:center; background-color:#f0f0f0; color:#aaa; }

/* ==========================================================================
   8. Ads Safelist
   ========================================================================== */
.skin_view .area_view .ad-card {
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: #f7f8fa; margin: 18px 0; text-align: center; padding: 10px;
}
.skin_view .area_view .ad-card ins.adsbygoogle { display:block !important; width:100% !important; }

/* ==========================================================================
   9. Mobile Responsive
   ========================================================================== */
@media (max-width: 820px) {
  .article_skin, .wrap_etc .inner_aside { width: 100%; padding: 0 16px; box-sizing: border-box; }
  .list_content .thumbnail_post { width: 100px; height: 100px; margin-left: 14px; }
  .list_content .tit_post { font-size: 18px; }
}