@charset "utf-8";

/* =========================================================
   01. Web Font & Type Selector Reset
========================================================= */
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body { font-weight: 400; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 1.6; background-color: #F8F9FA; color: #333333; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; word-break: keep-all; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure { margin: 0; padding: 0; }
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block; }
button, input[type=submit], input[type=reset], input[type=button] { overflow: visible; cursor: pointer; border:0; background:transparent; }
input, select, textarea, button { font-family: 'Pretendard', sans-serif; font-size: 100%; border-radius: 0; }
ul li { list-style: none; }
img, fieldset { border: none; vertical-align: top; max-width: 100%; }
hr { display: none; }
a { color: #4A6572; text-decoration: none; transition: all 0.2s ease; }
a:hover { color: #2B6CB0; }

/* Accessibility Navigation */
#acc-nav { position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 0; }
#acc-nav a { display: block; position: absolute; left: 0; top: 0; overflow: hidden; width: 1px; height: 1px; margin-left: -1px; margin-bottom: -1px; text-align: center; font-weight: bold; font-size: 0.875em; color: #000; white-space: nowrap; }
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active { width: 100%; height: auto; padding: 10px 0; background: #000; color: #fff; z-index: 1000; }

/* =========================================================
   02. 반응형 대문(헤더) 이미지 완벽 연동
========================================================= */
#header {
  position: relative !important;
  min-height: 380px !important;
  background-image: 
    linear-gradient(to right, rgba(26, 32, 44, 0.85) 0%, rgba(26, 32, 44, 0.1) 100%), 
    url("./images/main.jpeg") !important; /* 대문 영구 고정 주소 */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid #E2E8F0;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 50px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

#header h1 { font-size: 48px !important; font-weight: 800 !important; letter-spacing: 2px; margin-left: 60px !important; margin-top: 0 !important; color: #FFFFFF !important; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important; word-break: keep-all; z-index: 10; }
#header h1 a { color: #FFFFFF !important; }

/* 기존 햄버거 메뉴판 완벽 숨기기 */
#header .mobile-menu, #header .menu { display: none !important; }

/* =========================================================
   03. 검색창 위치 조정 & 돋보기/닫기 아이콘 애니메이션
========================================================= */
#header .search { 
  position: absolute; 
  top: auto !important; 
  bottom: 30px !important; 
  left: 60px !important; /* 좌측 기준 이동 */
  right: auto !important;
  z-index: 500;
}

#header .search button {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  width: 40px; height: 40px; background: transparent; border: none; 
  cursor: pointer; transition: all 0.2s ease; z-index: 9999; /* 클릭 최우선 보장 */
}

.search-icon-wrapper { position: relative; width: 22px; height: 22px; pointer-events: none; }
.search-icon-wrapper svg { position: absolute; top: 0; left: 0; stroke: #f7f9fc; transition: all 0.3s ease; }
.search-icon-wrapper .icon-close { opacity: 0; transform: scale(0.5) rotate(-90deg); }

#header .search button:hover svg { stroke: #4A6572; }
#header .search input { display: none; width: 240px; height: 40px; padding: 0 50px 0 15px; border: 1px solid #E2E8F0; border-radius: 20px; background: rgba(255, 255, 255, 0.9); font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); outline: none; position: relative; z-index: 10; }

#header .search.on input { display: block; }
#header .search.on button svg { stroke: #4A6572; }
#header .search.on .search-icon-wrapper .icon-magnifier { opacity: 0; transform: scale(0.5) rotate(90deg); }
#header .search.on .search-icon-wrapper .icon-close { opacity: 1; transform: scale(1) rotate(0deg); }

/* 비밀 관리자/글쓰기 메뉴 (투명도 조절) */
#header .admin-tools { position: absolute; top: auto !important; bottom: 30px !important; right: 65px; display: flex; gap: 5px; z-index: 500; }
#header .admin-tools a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; opacity: 0.15; transition: all 0.3s ease; }
#header .admin-tools a svg { width: 20px; height: 20px; stroke: #f7f9fc; transition: stroke 0.2s ease; }
#header .admin-tools a:hover { opacity: 1; }
#header .admin-tools a:hover svg { stroke: #4A6572; }

/* =========================================================
   04. 본문 배경 및 레이아웃
========================================================= */
#content .inner { max-width: 960px; margin: 40px auto; background: #FFFFFF; padding: 40px; border-radius: 8px; border: 1px solid #E2E8F0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); }
#content > .inner { max-width: 860px; }

/* 게시글 목록 상단 */
.post-header { display: flex !important; align-items: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #E2E8F0; }
.post-header h1 { float: none !important; margin: 0 !important; font-size: 1.2em; font-weight: 700; color: #1A202C; }
.post-header > span:nth-child(2) { margin-right: auto; color: #718096; font-size: 0.95em; padding-left: 8px; font-weight: bold; }
.post-header .list-type { display: flex; gap: 8px; }
.post-header .list-type button { width: 32px; height: 32px; text-indent: -9999px; overflow: hidden; border: 1px solid #E2E8F0; border-radius: 6px; background-color: #FFFFFF; cursor: pointer; transition: all 0.2s ease; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; }
.post-header .list-type button:hover { border-color: #4A6572; background-color: #F8FAFC; }
.post-header .list-type .thum { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6572' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'%3E%3C/rect%3E%3Crect x='14' y='3' width='7' height='7'%3E%3C/rect%3E%3Crect x='14' y='14' width='7' height='7'%3E%3C/rect%3E%3Crect x='3' y='14' width='7' height='7'%3E%3C/rect%3E%3C/svg%3E"); }
.post-header .list-type .list { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6572' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E"); }

/* 리스트형 목록 디자인 */
.post-item { overflow: hidden; padding: 30px 0; border-bottom: 1px solid #E2E8F0; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.post-item:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05); border-radius: 8px; background: #fafafa; padding-left: 15px; padding-right: 15px; }
.post-item a { display: block; color: #333; }
.post-item .thum { float: right; overflow: hidden; max-width: 180px; margin-left: 30px; border-radius: 6px; }
.post-item .thum img { width: 100%; height: auto; transition: transform 0.3s ease; }
.post-item:hover .thum img { transform: scale(1.05); }
.post-item .category { display: inline-block; margin-bottom: 12px; font-size: 0.85em; color: #4A6572; font-weight: 600; }
.post-item .title { display: block; margin-bottom: 10px; font-weight: 700; font-size: 1.25em; line-height: 1.4; color: #1A202C; }
.post-item .excerpt { font-size: 0.95em; color: #666; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   05. 본문 읽기 & 심화 디자인 (TOC, 소제목, 인용구)
========================================================= */
.hgroup { max-width: 860px; margin: 0 auto 40px; padding-bottom: 20px; border-bottom: 1px solid #E2E8F0; text-align: center; }
.hgroup .category { display: inline-block; margin-bottom: 10px; color: #4A6572; font-weight: 700; font-size: 0.9em; }
.hgroup h1 { font-weight: 800; font-size: 2em; line-height: 1.4; color: #1A202C; margin-bottom: 15px; }
.hgroup .post-meta { color: #888; font-size: 0.9em; }

#article-view { color: #333; line-height: 1.8; font-size: 16px; word-wrap: break-word; }
#article-view p { margin-bottom: 25px; }
#article-view img { border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); max-width: 100%; height: auto; }
#article-view table { width: 100%; border-collapse: collapse; margin: 30px 0; border: 1px solid #E2E8F0; }
#article-view table th { background-color: #F1F5F9; font-weight: 700; text-align: center; padding: 12px; border: 1px solid #E2E8F0; }
#article-view table td { padding: 12px; border: 1px solid #E2E8F0; }

/* 연구소 H2, H3 디자인 */
#article-view h2 { padding: 14px 18px !important; border-left: 6px solid #4A6572 !important; background: linear-gradient(to right, #F1F5F9, rgba(255,255,255,0)); border-radius: 0 6px 6px 0; margin-top: 55px !important; margin-bottom: 20px !important; letter-spacing: -0.5px; box-shadow: inset 0 -1px 0 0 rgba(226,232,240,0.5); font-weight: 700; color: #1A202C; }
#article-view h3 { border-left: 3px solid #2B6CB0 !important; padding-left: 12px !important; color: #2D3748 !important; margin-top: 40px !important; margin-bottom: 15px !important; font-weight: 700; }

/* 인용구(Blockquote) 랩(Lab) 감성 */
#article-view blockquote { border-left: 4px solid #4A6572 !important; background: #F8FAFC !important; color: #4A5568 !important; padding: 20px 25px !important; border-radius: 0 8px 8px 0; font-style: normal !important; box-shadow: inset 2px 0 0 0 rgba(43,108,176,0.1); position: relative; margin: 30px 0; }

/* 단일 자동 목차(TOC) 디자인 */
.toc-container { background: #F8FAFC; border-top: 4px solid #4A6572; border-radius: 6px; padding: 25px 30px; margin: 30px 0 40px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); border-bottom: 1px solid #E2E8F0; border-right: 1px solid #E2E8F0; border-left: 1px solid #E2E8F0; }
.toc-title { font-size: 1.15em; font-weight: 800; color: #1A202C; margin-bottom: 15px; letter-spacing: 0.5px; }
.toc-container ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.toc-container li { margin-bottom: 10px !important; line-height: 1.5 !important; }
.toc-container li a { color: #4A5568 !important; text-decoration: none !important; transition: all 0.2s ease; }
.toc-container li a:hover { color: #2B6CB0 !important; font-weight: 700; }
.toc-h2 { font-weight: 600; font-size: 1.05em; margin-top: 15px !important; }
.toc-h3 { margin-left: 20px !important; font-size: 0.95em; position: relative; }
.toc-h3::before { content: "·"; position: absolute; left: -15px; color: #A0AEC0; }

/* =========================================================
   06. 썸네일형(그리드 뷰) 5열 카드 디자인 (세로 폭주 완벽 해결본)
========================================================= */
.post-type-thumbnail .post-item { position: static !important; float: left !important; width: calc(20% - 20px) !important; margin: 10px !important; padding: 0 !important; border-bottom: none !important; border: 1px solid #E2E8F0 !important; border-radius: 10px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; background: #fff !important; height: 340px !important; box-sizing: border-box !important; }
.post-type-thumbnail .post-item a { padding: 15px !important; display: block !important; height: 100% !important; box-sizing: border-box !important; }
.post-type-thumbnail .post-item .thum { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; height: 160px !important; padding-bottom: 0 !important; margin: 0 0 12px 0 !important; position: relative !important; border-radius: 6px !important; overflow: hidden !important; background: #f8f9fa !important; }
.post-type-thumbnail .post-item .thum img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; }
.post-type-thumbnail .post-item .category { display: block !important; margin-bottom: 6px !important; font-size: 0.75em !important; color: #4A6572 !important; }
.post-type-thumbnail .post-item .title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 0.95em !important; font-weight: 700 !important; margin-bottom: 6px !important; line-height: 1.3 !important; color: #1A202C !important; }
.post-type-thumbnail .post-item .excerpt { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 0.8em !important; margin-bottom: 8px !important; color: #666 !important; line-height: 1.4 !important; }
.post-type-thumbnail .post-item .date { display: block !important; font-size: 0.75em !important; color: #999 !important; }

/* Float 버그 방지 */
.post-type-thumbnail #content > .inner::after { content: ""; display: table; clear: both; }

/* =========================================================
   07. 우측 떠다니는 메뉴 (플랫 디자인) & 스크롤바 & 하단 버튼
========================================================= */
.blade-right-menu { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); width: 170px; padding: 20px 16px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); z-index: 99999; transition: all 0.3s ease; }
.blade-right-menu:hover { transform: translateY(-52%); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); }
.blade-right-title { color: #4A6572; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-align: center; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid #E2E8F0; }

.blade-right-menu a { display: block; padding: 10px 8px; color: #718096; font-size: 13px; border-bottom: 1px solid #F1F5F9; }
.blade-right-menu a:last-child { border-bottom: none; }
.blade-right-menu a:hover { color: #2B6CB0; padding-left: 12px; background: #F8FAFC; border-radius: 4px; }
.blade-right-menu a.active { color: #2B6CB0; font-weight: 700; border-left: 3px solid #4A6572; padding-left: 12px; background: #F8FAFC; border-radius: 4px; }

/* 유튜브 영상 컨테이너 */
.blade-video-container { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; background: #000; }
.blade-video-container iframe { display: block; border: none; }

#scroll-bar { position: fixed; top: 0; left: 0; height: 4px; width: 0%; background: linear-gradient(to right, #A0AEC0, #4A6572, #2B6CB0); z-index: 999999; }
#top-btn { position: fixed; right: 30px; bottom: 40px; width: 45px; height: 45px; border: 1px solid #E2E8F0; border-radius: 50%; background: #FFFFFF; color: #4A6572; font-size: 18px; font-weight: bold; cursor: pointer; opacity: 0; visibility: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: all 0.3s ease; z-index: 99999; }
#top-btn.show { opacity: 1; visibility: visible; }
#top-btn:hover { background: #4A6572; color: #FFFFFF; border-color: #4A6572; }

/* =========================================================
   08. 푸터, 페이지네이션, 태그, 프로필
========================================================= */
#blade-footer { text-align: center; padding: 50px 0; font-size: 15px; letter-spacing: 2px; color: #718096; background: #FFFFFF; border-top: 1px solid #E2E8F0; font-weight: 600; margin-top: 50px; }
#blade-footer .footer-menu { margin-bottom: 15px; }
#blade-footer .footer-menu a { color: #4A6572; font-size: 14px; font-weight: 600; text-decoration: none; transition: color 0.2s ease; }
#blade-footer .footer-menu a:hover { color: #2B6CB0; text-decoration: underline; }
#blade-footer .footer-menu .divider { color: #CBD5E1; margin: 0 10px; font-size: 12px; vertical-align: middle; }
#blade-footer p { font-size: 13px; letter-spacing: 2px; color: #718096; font-weight: 600; margin: 0; }

.tt_box_namecard, .area_profile { background: #F8F9FA !important; border: 1px solid #E2E8F0 !important; border-radius: 8px; padding: 20px; margin-top: 40px; }
.tt_box_namecard .tt_tit_name a { color: #1A202C !important; font-weight: 700; }
.tt_box_namecard .tt_desc { color: #718096 !important; }

.pagination { text-align: center; margin: 40px 0 60px; }
.pagination a, .pagination .prev, .pagination .next { display: inline-block; padding: 8px 14px; margin: 0 4px; border: 1px solid #E2E8F0; border-radius: 4px; color: #4A5568; text-decoration: none; transition: 0.2s; }
.pagination a:hover, .pagination .prev:hover, .pagination .next:hover { background: #F1F5F9; border-color: #CBD5E1; }
.pagination .selected { background: #4A6572; color: #fff; border-color: #4A6572; }

.tags { margin: 40px 0; padding: 20px; background: #F8FAFC; border-radius: 8px; }
.tags h2 { font-size: 1em; color: #1A202C; margin-bottom: 10px; font-weight: 700; }
.tags .items a { display: inline-block; margin-right: 10px; padding: 4px 10px; background: #fff; border: 1px solid #E2E8F0; border-radius: 20px; font-size: 0.85em; color: #4A6572; }
.tags .items a:hover { background: #4A6572; color: #fff; }

.comments h2 { font-size: 1.2em; font-weight: 700; margin-bottom: 20px; border-bottom: 2px solid #1A202C; padding-bottom: 10px; }
.comments .comment-list ul li { padding: 20px 0; border-bottom: 1px solid #E2E8F0; }

/* =========================================================
   09. 반응형 (태블릿 & 모바일 해상도 맞춤)
========================================================= */
@media screen and (max-width: 1200px) { 
  .blade-right-menu { display: none !important; } 
  .post-type-thumbnail .post-item { width: calc(25% - 20px) !important; }
}

@media screen and (max-width: 1024px) { 
  #header { min-height: 300px !important; padding: 0 40px !important; }
  #header h1 { font-size: 38px !important; margin-left: 50px !important; }
  #header .search { top: auto !important; bottom: 20px !important; left: 50px !important; right: auto !important; }
  #header .admin-tools { bottom: 20px !important; right: 40px !important; }
  .post-type-thumbnail .post-item { width: calc(33.333% - 20px) !important; }
}

@media screen and (max-width: 768px) { 
  #header { 
    min-height: 240px !important; 
    padding: 0 20px !important; 
    background-image: linear-gradient(to top, rgba(26, 32, 44, 0.8) 0%, rgba(26, 32, 44, 0.4) 100%), url("./images/main.jpeg") !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
  }
  #header h1 { font-size: 28px !important; margin-left: 0 !important; margin-top: 20px !important; text-align: center !important; width: 100% !important; }
  #header .search { top: auto !important; bottom: 20px !important; left: 20px !important; right: auto !important; }
  #header .admin-tools { bottom: 20px !important; right: 20px !important; }
  
  #content .inner { padding: 20px; margin: 20px; }
  .post-item .thum { float: none; max-width: 100%; margin: 0 0 15px 0; }
  .hgroup h1 { font-size: 1.6em; }
  #article-view h2 { font-size: 1.3em; margin-top: 40px !important; }
  
  .post-type-thumbnail .post-item { width: calc(50% - 20px) !important; height: 340px !important; }
}

@media screen and (max-width: 480px) { 
  .post-type-thumbnail .post-item { width: 100% !important; margin: 0 0 20px 0 !important; height: auto !important; }
  .post-type-thumbnail .post-item .thum { padding-bottom: 60% !important; }
}

/* =========================================================
   대문(헤더) 이미지 강제 복구 (영구 고정 버전)
========================================================= */
#header { 
    background-image: 
        linear-gradient(to right, rgba(26, 32, 44, 0.85) 0%, rgba(26, 32, 44, 0.1) 100%), 
        url("./images/main.jpeg") !important; 
}

/* =========================================================
   좌측 햄버거 메뉴 강제 숨김 처리 (기본 스킨 메뉴 튀어나옴 방지)
========================================================= */
#header .mobile-menu, #header .menu { 
    display: none !important; 
}

/* 전문 용어 툴팁 (Blade Wiki) 디자인 */
.term-wiki {
    position: relative;
    display: inline-block;
    color: #2B6CB0; /* 포인트 컬러 (스틸 블루 계열) */
    border-bottom: 1px dotted #2B6CB0; /* 파란색 점선 밑줄 */
    cursor: help;
}

.term-wiki .tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #1A202C; /* 다크한 연구소 톤 */
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 12px;
    position: absolute;
    z-index: 100;
    bottom: 125%; /* 단어 위로 띄움 */
    left: 50%;
    margin-left: -110px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.85em;
    line-height: 1.5;
    font-weight: 400;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.term-wiki .tooltip-text b {
    display: block;
    margin-bottom: 5px;
    color: #4FD1C5; /* 용어 제목 강조 */
}

.term-wiki:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* 말풍선 꼬리표 */
.term-wiki .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1A202C transparent transparent transparent;
}