@charset "utf-8";

/*
 * 편집하기 전에 <사용자화된 CSS 활성화> 옵션이 켜져 있는지 확인하십시오.
 * 이 줄 아래에 사용자화 스타일 시트 코드를 입력하면 됩니다.
 */

:root {
  /* 폰트 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
    "Roboto Mono", "Liberation Mono", "Courier New", monospace;

  /* 레이아웃 */
  --slider-max-width: 768px;
  --content-max-width: 728px;
  --content-block-space: 12px;
  --mobile-inline-gap: 40px;

  /* 색상 */
  --namecard-bg: #181818;
  --namecard-title: #f1f1f1;
  --namecard-desc: rgba(255, 255, 255, 0.62);
  --namecard-border: rgba(255, 255, 255, 0.26);

  --color-night-text: #d6d6d6;
  --color-night-summary: #767676;
  --color-hr: #555555;

  /* 줄 간격 */
  --body-line-height: 1.7;
  --heading-line-height-h2: 1.4;
  --heading-line-height-h3: 1.45;
  --heading-line-height-h4: 1.5;

  /* 글자 크기 */
  --body-font-size: 17px;
  --caption-font-size: 14px;
}

/* ================ Start Pretendard 폰트 적용 ================ */
/* 일반 텍스트 및 UI 요소 */
html,
button,
input,
textarea,
#tt-body-page #article p[class*="moreless"] span {
  font-family: var(--font-sans) !important;
}

/* 코드블록은 고정폭 폰트 유지 */
code,
pre,
#article pre * {
  font-family: var(--font-mono) !important;
}

/* 다크모드 글자색 */
html.night,
html.night :is(a, button) {
  color: var(--color-night-text); /* 기본값: #bbb */
}

/* 다크모드 글 목록 요약 글자색 */
html.night :is(.card-type, .text-type) .index-item-summary {
  color: var(--color-night-summary) !important;
}

/* 본문 글자 크기 */
#article.fc {
  font-size: var(--body-font-size) !important; /* 기본값: 모바일 16px, 데스크톱 17px */
}

/* 제목 글자 크기 - clamp(최소,선호,최대) 사이에서 화면 너비에 따라 제목 크기 자동 조정 */
#article h2 {
  font-size: clamp(25px, 1.15rem + 0.9vw, 28px) !important;
  line-height: var(--heading-line-height-h2) !important;
}

#article h3 {
  font-size: clamp(22px, 1.05rem + 0.6vw, 24px) !important;
  line-height: var(--heading-line-height-h3) !important;
}

/* 카테고리의 다른글 보기의 h4엔 적용 안함 */
#article :not(.another-category) > h4 {
  font-size: clamp(19px, 1rem + 0.3vw, 20px) !important;
  line-height: var(--heading-line-height-h4) !important;
}

/* 줄 간격 */
button,
html,
input,
textarea {
  line-height: var(--body-line-height); /* 기본값: 1.75 */
}

/* 카테고리 텍스트 (글 목록 상단 및 포스팅 제목 하단) */
.gh-text ul.fc-list {
  margin: 6px auto 0 !important;
  font-size: 12px !important;
}

/* 이미지 캡션 폰트 크기 및 줄 간격 */
#article.fc :is(.imageblock:not(figure) .cap1, figure figcaption) {
  font-size: var(--caption-font-size) !important;
  line-height: var(--heading-line-height-h2) !important;
}
/* ================ End Pretendard 폰트 적용 ================ */


/* ================= Start 본문 콘텐츠 요소 여백 조정 ================= */
/* 기본 블록 요소 상하 여백 (인용문, 코드블록, 테이블, HTML, 수식, 이미지) */
#article.fc :is(
  blockquote, pre, .table-content, .katex-display,
  .imageblock:not(figure), [data-ke-type='html'],
  figure:not(.fileblock):not([data-ke-type='opengraph'])
) {
  margin-block: var(--content-block-space) !important;
}

/* ul, ol 상하 여백 */
#article.fc :is(ul, ol) {
  margin-block: calc(var(--content-block-space) / 1.5);
}

/* ul, ol 내부 li 사이 간격 */
#article.fc :is(ul, ol) > li + li {
  margin-block-start: calc(var(--content-block-space) / 3);
}

/* 캡션 있는 이미지 하단 여백 */
#article.fc :is(.imageblock.has-info:not(figure), figure.has-info) {
  margin-block-end: var(--content-block-space) !important;
}

/* 이미지가 연속으로 올 때 이미지 사이 여백 더 추가 */
#article.fc figure:not(.fileblock):not([data-ke-type='opengraph'])
+ figure:not(.fileblock):not([data-ke-type='opengraph']) {
  margin-block-start: calc(var(--content-block-space) * 2) !important;
}

/* 제목 바로 아래 hr이 있고, 그 다음에 figure가 오는 경우, figure 위 여백 더 추가 */
#article.fc :is(h2, h3, h4, h5, h6) + hr + figure:not(.fileblock):not([data-ke-type='opengraph']) {
  margin-block-start: calc(var(--content-block-space) * 1.5) !important;
}

/* 구분선 여백 */
#tt-body-page #article.fc hr {
  margin-block: var(--content-block-space);
}

/* 구분선 스타일 5 디자인 */
#tt-body-page #article.fc hr[data-ke-style='style5'] {
  border-bottom: 1px solid var(--color-hr) !important;
}

/* 문단 상단 여백 제거 */
#article.fc p {
  margin-block-start: 0 !important;
}

/* 본문 제목 여백 */
#article.fc :is(h2, h3, h4, h5, h6) {
  margin-block: 0 calc(var(--content-block-space) / 2) !important;
}

/* 본문 제목 다음에 hr, figure, blockquote가 오면 제목 하단 여백 제거 */
#article.fc :is(h2, h3, h4, h5, h6):has(+ :is(hr, figure, blockquote)) {
  margin-block-end: 0 !important;
}
/* ================= End 본문 콘텐츠 요소 여백 조정 ================= */


/* ======================= Start 제목 왼쪽 정렬 ====================== */
/* 메인 캐러셀 제목 왼쪽 정렬 */
body#tt-body-index .slider-title > h2 {
  text-align: left;
  display: inline-block;
  width: auto;
  /* 화면이 넓을 땐 최대 너비로 고정, 좁아지면 양옆 여백 추가 */
  max-width: min(var(--slider-max-width), calc(100% - var(--mobile-inline-gap)));
  line-height: var(--heading-line-height-h2);
}

/* 갤러리 목록 제목 왼쪽 정렬 */
.gallery :is(h2, .digit):not(.visuallyhidden-content) {
  text-align: left !important;
  display: inline-block !important;
}

/* 포스팅 제목 컨테이너 */
body#tt-body-page .gh-text {
  width: 100% !important;
  max-width: var(--content-max-width) !important;
  text-align: left !important;
}

/* 포스팅 제목 */
body#tt-body-page #global-header .gh-headline {
  width: 100% !important;
}

/* 포스팅 제목 하단 카테고리 */
body#tt-body-page .gh-text ul li:first-child {
  padding-left: 0 !important;
}

/* 본문 이미지 캡션 왼쪽 정렬 */
#article.fc figure.imageblock.alignCenter.has-info {
  width: fit-content;
  margin-inline: auto;
}

#article.fc figure figcaption {
  text-align: left;
}
/* ======================= End 제목 왼쪽 정렬 ====================== */


/* =============== Start 모바일 헤더 제목 잘림 문제 해결 =============== */
.gnb-center .gnb-title {
  width: calc(100vw - 90px);
  max-width: var(--content-max-width);
  min-width: 0;
}

.gnb-center .gnb-title p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* =============== End 모바일 헤더 제목 잘림 문제 해결 =============== */


/* =============== Start 네임카드 다크모드 스타일 =============== */
html.night .tt_box_namecard {
  background-color: var(--namecard-bg);
}

html.night .tt_box_namecard .tt_tit_cont {
  color: var(--namecard-title);
  font-weight: 700;
}

html.night .tt_box_namecard .tt_desc {
  color: var(--namecard-desc);
}

html.night .tt_box_namecard .tt_btn_subscribe .tt_txt_g {
  color: var(--namecard-title);
}

html.night .tt_box_namecard .tt_btn_subscribe .tt_ico_cross {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

html.night .tt_box_namecard .tt_btn_subscribe {
  border: 1px solid var(--namecard-border);
}

/* 박스 여백 조정 */
.tt_box_namecard {
  align-items: center;
  gap: 20px;
  padding-inline: 32px;
  padding-block: 40px;
  min-height: 0;
}

.tt_box_namecard .tt_cont {
  padding: 0;
  align-self: start;
}

.tt_box_namecard .tt_wrap_thumb {
  margin: 0;
  align-self: flex-start;
}

.tt_box_namecard .tt_btn_subscribe {
  margin-block-end: 0;
}

@media (max-width: 600px) {
  .tt_box_namecard {
    padding-inline: 20px;
  }
}
/* =============== End 네임카드 다크모드 스타일 =============== */


/* 네비게이션 헤더의 블로그명 텍스트를 시각적으로만 숨김 */
#global-navigation .gnb-center .gnb-title > span[aria-hidden="true"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 방문자 수 카운트 말줄임 방지 */
.visitor-emphasis .visitor-count.digit {
  max-width: fit-content;
}

/* 본문 밑줄 조정 */
#article u {
  text-underline-offset: 0.24em;
  text-decoration-thickness: 1.2px;
  text-decoration-skip-ink: auto;
}