@charset "UTF-8";

/* =========================================
   1. FONT & VARIABLES
   ========================================= */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

:root {
    --color-main: #1A237E;   /* Deep Navy */
    --color-accent: #C5A065; /* Muted Gold */
    --color-bg: #F5F7FA;     /* Off-White */
    --color-text: #333;
    --font-main: 'Pretendard', sans-serif;
}

/* =========================================
   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, textarea, button {
  margin: 0; padding: 0;
}
* { box-sizing: border-box; } /* 레이아웃 유지 필수 */

fieldset, img { border: 0 none; }
dl, ul, ol, menu, li { list-style: none; }
button { border: 0 none; background-color: transparent; cursor: pointer; }

body {
  background: var(--color-bg);
  -webkit-text-size-adjust: none;
  font-family: var(--font-main);
  font-size: 15px; line-height: 1.6; color: #555;
}

a { color: #333; text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-main); }
.show { display: block; } .hide { display: none; }
.screen_out { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; }


/* =========================================
   3. SIDEBAR (Left)
   ========================================= */
.wrap_skin {
  position: relative;
  min-width: 320px; min-height: 100%;
  padding-left: 300px; /* 사이드바 공간 확보 */
}

.area_head {
  position: fixed; left: 0; top: 0;
  width: 300px; height: 100%;
  background-color: var(--color-main) !important;
  z-index: 1000;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  overflow: visible; /* 태그가 잘리지 않도록 설정 */
}

/* ✨ 태그 이미지 스타일 ✨ */
.point-tag {
    position: absolute;
    top: 0;          /* 최상단 */
    left: 40px;      /* 왼쪽 여백 */
    width: 60px;     /* 태그 너비 */
    height: 160px;   /* 태그 높이 */
    
    /* 파일명: point_tag.png (반드시 파일 업로드 이름 확인!) */
    background: url('./images/point_tag.png') no-repeat top center;
    background-size: contain; 
    
    z-index: 2000;   /* 최상단 노출 */
    pointer-events: none; /* 클릭 방해 금지 */
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3)); /* 그림자 */
}

/* 프로필 */
.area_head .area_profile { width: 100%; padding-top: 120px; /* 태그와 겹치지 않게 여백 추가 */ text-align: center; }
.area_head .area_profile:before { display: none; }

.thumb_profile {
  display: block; width: 120px; height: 120px; margin: 0 auto 20px;
  border-radius: 50%; border: 4px solid var(--color-accent); overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.img_profile { width: 100%; height: 100%; object-fit: cover; }

.link_post { font-size: 24px; color: #fff; font-weight: 700; display: block; margin-bottom: 5px; }
.txt_profile { font-size: 16px; color: rgba(255,255,255,0.85); display: block; margin-bottom: 20px; }

.profile-tagline {
    display: block; color: var(--color-accent); font-size: 13px; margin-bottom: 25px;
    letter-spacing: 0.5px; font-weight: 600; text-transform: uppercase;
}

.btn-consult-cta {
    display: inline-block; background: var(--color-accent); color: #fff !important;
    padding: 10px 25px; border-radius: 30px; font-size: 14px; font-weight: 700;
    margin-top: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-consult-cta:hover { background: #fff; color: var(--color-main) !important; transform: translateY(-2px); }

/* 검색창 */
.area_search { margin: 30px auto; width: 80%; }
.frm_search {
  width: 100%; height: 40px; background: rgba(255,255,255,0.1);
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.2);
}
.tf_search {
  width: 100%; height: 40px; padding: 0 15px; border: none; background: transparent;
  color: #fff; text-align: center;
}
.tf_search::placeholder { color: rgba(255,255,255,0.5); }
.wrap_sub { display: none; }


/* =========================================
   4. MAIN CONTENT (2단 카드)
   ========================================= */
.article_skin {
  width: auto; max-width: 1200px; min-height: 800px;
  margin: 0 auto; padding: 60px 40px 100px;
}
.list_wrap { width: 100%; overflow: hidden; }
.list_title { width: 100%; margin-bottom: 30px; clear: both; }
.list_title .tit_skin { font-size: 18px; color: #888; border-bottom: 1px solid #ddd; padding-bottom: 10px; }

/* 카드 아이템 */
.list_content {
  float: left;
  width: calc(50% - 15px);
  margin-right: 30px;
  margin-bottom: 40px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
  height: 400px; 
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 2번째 아이템마다 오른쪽 여백 제거 */
.list_content:nth-of-type(2n) { margin-right: 0; }
.list_content:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

/* 썸네일 높이 180px */
.list_content .thumbnail_post { width: 100%; height: 180px; overflow: hidden; display: block; }
.list_content .thumbnail_post img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.list_content:hover .thumbnail_post img { transform: scale(1.05); }

.list_content .link_post { padding: 20px 25px 0; flex-grow: 1; display: block; }
.list_content .tit_post {
    font-size: 19px; font-weight: 700; color: #222; margin-bottom: 10px;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list_content:hover .tit_post { color: var(--color-main); }
.list_content .txt_post {
    font-size: 15px; color: #666; height: 4.8em;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

.list_content .detail_info {
    padding: 15px 25px 20px; margin-top: auto; font-size: 13px; color: #999; border-top: 1px solid #f0f0f0;
}
.list_content .detail_info .link_cate { color: var(--color-accent); font-weight: 600; }


/* =========================================
   5. DETAIL VIEW
   ========================================= */
.view_content_wrap { width: 100%; clear: both; float: none; display: block; }
.area_title { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid var(--color-main); }
.area_title .tit_category a { color: var(--color-accent); font-weight: 700; }
.area_title .tit_post { font-size: 32px; color: #111; font-weight: 700; margin: 15px 0 20px; }
.area_view { font-size: 17px; line-height: 1.8; color: #333; word-break: break-all; }
.area_view p { margin-bottom: 24px; }
.area_view img { max-width: 100%; height: auto; border-radius: 8px; }
.area_view blockquote {
    border-left: 4px solid var(--color-accent); background: #f9f9f9; padding: 20px;
    font-style: italic; color: #555; margin: 30px 0;
}


/* =========================================
   6. RELATED ARTICLES (4단 그리드)
   ========================================= */
.area_related { margin-top: 80px; padding-top: 50px; border-top: 1px solid #e0e0e0; width: 100%; clear: both; }
.area_related .tit_related { font-size: 20px; font-weight: 700; color: var(--color-main); margin-bottom: 20px; display: block; }

.list_related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.list_related li { float: none; width: auto; margin: 0; padding: 0; }

.list_related .link_related {
    display: flex; flex-direction: column; width: 100%; height: 100%;
    background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden;
    transition: transform 0.3s ease;
}
.list_related .link_related:hover { transform: translateY(-5px); border-color: var(--color-accent); }

.list_related .thumb_related { width: 100%; height: 140px; display: block; overflow: hidden; }
.list_related .img_related { width: 100%; height: 100%; object-fit: cover; }

.list_related .txt_related {
    padding: 15px; font-size: 15px; font-weight: 600; color: #333; line-height: 1.4;
    height: 3em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal;
}
.list_related .date_related { display: block; padding: 0 15px 15px; font-size: 12px; color: #999; margin-top: auto; }

.area_related .link_more {
    float: right; font-size: 13px; color: #999; border: 1px solid #ddd;
    padding: 5px 12px; border-radius: 20px; margin-top: -45px;
}
.area_related .link_more:hover { background: var(--color-main); color: #fff; border-color: var(--color-main); }


/* =========================================
   7. ETC
   ========================================= */
.area_reply { margin-top: 60px; }
.area_foot { border-top: 1px solid #e0e0e0; color: #999; text-align: center; padding: 30px 0; background: #fff; margin-left: 300px; }
.area_paging { margin-top: 50px; text-align: center; clear: both; }
.area_paging .link_page .selected { background-color: var(--color-main); color: #fff; border-radius: 50%; }
.area_paging a { display: inline-block; padding: 5px 10px; color: #555; }


/* =========================================
   8. MEDIA QUERIES (모바일)
   ========================================= */
/* ✨ PC 화면 정상화를 위해 기준점 768px로 수정 ✨ */
@media only screen and (max-width:768px) {
    .wrap_skin { padding-left: 0; }
    .area_foot { margin-left: 0; }
    
    .area_head { position: relative; width: 100%; height: auto; padding: 30px 20px; }
    
    /* 모바일에서는 태그 위치 조정 (작게) */
    .point-tag { width: 40px; height: 100px; left: 20px; top: 0; }
    .area_head .area_profile { padding-top: 40px; }
    
    .list_content { width: 100%; float: none; margin-right: 0; height: auto; }
    .list_content .thumbnail_post { height: 220px; }
    
    .list_related { grid-template-columns: repeat(2, 1fr); }
}