@charset "utf-8";

/*
 * CSS CONTENTS:
 *
 * 01. Web Font Load (Pretendard & Instagram Aesthetic)
 * 02. Type Selector Reset
 * 03. Accessibility Navigation
 * 04. Layout Selector (Hidden Header & Clean Center Layout)
 * 05. Instagram Aesthetic H-Tags (H1, H2, H3, H4)
 * 06. Instagram Aesthetic Buttons (.btn, button)
 * 07. Components (Instagram Feed Card Style)
 * 08. Entry Content Base Typography
 * 09. Custom Hide Rules (Complete Hide below & above Post)
 *
 */

/* 01. Web Font Load */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 02. Type Selector Reset */
body {
  -webkit-text-size-adjust: 100%;
  font-weight: 400;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  font-size: 1em;
  line-height: 1.6;
  color: #262626;
  background-color: #fafafa;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

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;
}

input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
  -webkit-appearance: none;
}

input, select, textarea, button {
  font-family: 'Pretendard', sans-serif;
  font-size: 100%;
  border-radius: 10px;
}

button {
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

ul li {
  list-style: none;
}

img, fieldset {
  border: none;
}

hr {
  display: none;
}

a, a:link {
  text-decoration: none;
  color: #262626;
  transition: all 0.2s ease;
}

a:visited {
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: none;
  color: #8e8e8e;
}

a:active {
  text-decoration: none;
}

/* 03. 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;
}

/* 04. Layout Selector */
#container {
  padding-top: 0 !important;
}

#container .content-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}

/* ===================================================
   05. 인스타그램 감성 H태그 (H1, H2, H3, H4) 디자인
   =================================================== */

/* H1: 포스팅 메인 제목 */
.post-cover h1,
.entry-content h1,
#article-view h1 {
  clear: both;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  line-height: 1.35 !important;
  letter-spacing: -0.5px !important;
  margin: 10px 0 28px !important;
}

/* H2: 주요 소제목 (인스타그램 시그니처 그래디언트 바 포인트) */
.entry-content h2,
#article-view h2,
#article-view h2[data-ke-size] {
  clear: both;
  position: relative !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #262626 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.3px !important;
  padding-left: 14px !important;
  margin: 42px 0 18px !important;
  border: none !important;
}

.entry-content h2::before,
#article-view h2::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  bottom: 3px !important;
  width: 5px !important;
  background: linear-gradient(180deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border-radius: 4px !important;
}

/* H3: 서브 소제목 (인스타그램 블루 알약 태그 스타일) */
.entry-content h3,
#article-view h3,
#article-view h3[data-ke-size] {
  clear: both;
  display: inline-block !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #0095f6 !important;
  line-height: 1.4 !important;
  background-color: #f0f8ff !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  margin: 32px 0 14px !important;
  border: none !important;
}

/* H4: 세부 소제목 (깔끔한 밑줄 및 그레이 포인트) */
.entry-content h4,
#article-view h4,
#article-view h4[data-ke-size] {
  clear: both;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #383838 !important;
  line-height: 1.5 !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid #efefef !important;
  margin: 26px 0 12px !important;
}

/* ===================================================
   06. 인스타그램 감성 클릭 버튼 (.btn, button, a.btn)
   =================================================== */

.btn, 
a.btn, 
button.btn,
.comment-form .submit button,
.entry-content a.btn,
.btn-instagram {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Pretendard', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  background-color: #0095f6 !important; /* 인스타그램 블루 */
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 149, 246, 0.25) !important;
}

/* 버튼 호버 & 클릭 효과 */
.btn:hover, 
a.btn:hover, 
button.btn:hover,
.entry-content a.btn:hover {
  background-color: #1877f2 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 149, 246, 0.35) !important;
  color: #ffffff !important;
}

.btn:active, 
a.btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0, 149, 246, 0.2) !important;
}

/* 특별 포인트: 인스타그램 그래디언트 버튼 클래스 (필요 시 글 작성 시 사용 가능) */
.btn-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
  box-shadow: 0 4px 14px rgba(225, 48, 108, 0.3) !important;
}

.btn-instagram:hover {
  opacity: 0.92 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(225, 48, 108, 0.42) !important;
}

/* 07. Components (Instagram Feed Card Style) */
.post-item {
  background-color: #ffffff;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.post-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.post-item .thum {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #efefef;
}

.post-item .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-item:hover .thum img {
  transform: scale(1.03);
}

.post-item .title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #262626;
  padding: 16px 18px 6px;
  line-height: 1.4;
}

.post-item .excerpt {
  font-size: 0.88rem;
  color: #737373;
  padding: 0 18px 16px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 08. Entry Content (본문 카드 박스) */
.entry-content {
  background: #ffffff;
  padding: 40px;
  border: 1px solid #dbdbdb;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

#article-view {
  color: #262626;
  font-size: 1rem;
  line-height: 1.75;
}

#article-view blockquote[data-ke-style='style1'],
#article-view blockquote[data-ke-style='style2'],
#article-view blockquote[data-ke-style='style3'] {
  border-left: 3px solid #dbdbdb;
  background-color: #fafafa;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  color: #555;
  font-style: normal;
}

#article-view figure img {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* 본문 내 일반 링크 강조 */
#article-view a {
  color: #0095f6;
  text-decoration: none;
  font-weight: 500;
}

#article-view a:hover {
  text-decoration: underline;
}

/* ===================================================
   09. 요청 사항: 본문 외 모든 불필요 요소 완전 제거 (Hide Rules)
   =================================================== */

/* 상단 헤더, GNB, 헤더 구분선 완전 제거 */
#header,
#gnb,
.post-header,
.post-cover .category {
  display: none !important;
}

/* 본문 아래 모든 영역(댓글 전체, 관련글, 푸터) 제거 */
.comments,
.tt-comments-wrap,
.related-articles,
#footer {
  display: none !important;
}

/* 사이드바, 메뉴 버튼, TOP 버튼 제거 */
#aside,
.sidebar,
#footer .page-top,
#footer .meta,
#footer .copyright {
  display: none !important;
}

/* 본문 중앙 정렬 레이아웃 */
#container .content-wrap:before {
  display: none !important;
}

#content {
  float: none !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 태그, 작성자 프로필 카드 제거 */
.tags,
.s_tag_label,
#article-view .tags,
.entry-content + .tags,
.post-cover .meta,
.my_edit,
.container_postbtn,
.tt_blog_profile,
.tt_profile_g,
.tt-box-user,
.author_profile,
.entry-content .author_box,
div[data-ke-type="author"] {
  display: none !important;
}

/* 모바일 반응형 분기 */
@media screen and (max-width: 767px) {
  .entry-content {
    padding: 20px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}