/*
  Theme Name:   GeneratePress Child
  Theme URI:    https://generatepress.com
  Description:  Default GeneratePress child theme
  Author:       Tom Usborne
  Author URI:   https://tomusborne.com
  Template:     generatepress
  Version:      0.1
*/

/* =========================================================
  0. Font & Base (Pretendard)
  - Pretendard Variable를 기본 폰트로 사용
  - box-sizing 통일로 레이아웃 깨짐 방지
========================================================= */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-gov.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
    Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #111;
}

/* 기본 타이포(너무 큰 기본값을 방지) */
h1 {
  font-size: clamp(28px, 2.2vw, 34px);
  line-height: 1.25;
}

h2 {
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.3;
}

h3 {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.35;
}

/* 기본 footer 사용X */
.site-footer {
  display: none;
}

@media (max-width: 1023px) {
  body {
    font-size: 15px;
  }
}

/* =========================================================
  1. Design Tokens (전역 변수)
========================================================= */
:root {
  /* 사이드바 */
  --ilway-sidebar-open-w: 280px;
  --ilway-sidebar-collapsed-w: 76px;
  /* 닫힘=미니바. 0px로 바꾸면 완전 숨김 */
  --ilway-sidebar-w: var(--ilway-sidebar-open-w);
  /* 블로그 강조색상*/
  --ilway-accent: #2563EB;

  /* 상단바 */
  --ilway-topbar-h: 64px;

  /* 워드프레스 관리자바 높이(로그인 상태에서만 적용) */
  --ilway-adminbar-h: 0px;

  /* z-index */
  --ilway-z-topbar: 1200;
  --ilway-z-sidebar: 1100;
  --ilway-z-overlay: 1000;

  /* 메가메뉴 */
  --ilway-mega-w: min(1100px, 86vw);

  /* 본문 최대 폭(좌우 여백이 같아지도록 가운데 정렬) */
  --ilway-content-max-w: 980px;

  /* 아카이브(리스트) 썸네일 */
  --ilway-list-thumb-w: 120px;
  --ilway-list-thumb-h: 120px;
}

/* 워드프레스 어드민바 대응 */
body.admin-bar {
  --ilway-adminbar-h: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --ilway-adminbar-h: 46px;
  }
}


/* 사이드바 상태에 따라 실제 폭 변수 변경 */
html.ilway-sidebar-open {
  --ilway-sidebar-w: var(--ilway-sidebar-open-w);
}

html.ilway-sidebar-collapsed {
  --ilway-sidebar-w: var(--ilway-sidebar-collapsed-w);
}

html:not(.ilway-sidebar-open):not(.ilway-sidebar-collapsed) {
  --ilway-sidebar-w: var(--ilway-sidebar-open-w);
}

/* =========================================================
  2. GeneratePress 기본 헤더/네비 숨김
  - 우리가 만든 상단바/사이드바와 중복되기 때문에 비활성
========================================================= */
#masthead,
.main-navigation,
#right-sidebar,
#secondary,
.site-footer {
  /* 테마 기본 헤더, 네비, 사이드바, 푸터 숨김 */
  display: none !important;
}

/* =========================================================
 3. 상단바 (Topbar) - [수정됨]
 - 기능: 버튼 위치 고정 & z-index 유지 (밀림 방지)
 - 디자인: 어두운 반투명 배경 & 흰색 텍스트로 복구
========================================================= */
.ilway-topbar {
  position: fixed;
  top: var(--ilway-adminbar-h);
  left: 0;
  right: 0;
  height: var(--ilway-topbar-h);

  /* [유지] 사이드바보다 위에 오도록 설정 */
  z-index: 10000;

  /* [복구] 이전의 어두운 반투명 배경 스타일 */
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  border-bottom: none;
  /* 흰색 테두리 제거 */
}

.ilway-topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;

  /* [유지] 고정 패딩값 (버튼이 오른쪽으로 밀리는 현상 방지) */
  padding-left: 24px;
  padding-right: 24px;
}

.ilway-sidebar-toggle {
  width: 40px;
  height: 40px;
  border-radius: 10px;

  /* [복구] 버튼 스타일 (흰색 라인/아이콘) */
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;

  cursor: pointer;

  /* flex 축소 방지 */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 상단 좌측 메뉴 */
.ilway-topnav {
  flex: 1;
}

.ilway-top-menu {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.ilway-top-menu>li>a {
  /* [복구] 메뉴 글자색 흰색으로 변경 */
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 8px;
  display: inline-flex;
  align-items: center;
}

/* =========================================================
  4. 메가메뉴 (Top menu dropdown)
========================================================= */
.ilway-top-menu .menu-item-has-children {
  position: relative;
}

.ilway-top-menu .menu-item-has-children>.sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 10px);
  width: var(--ilway-mega-w);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 26px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 28px;
  list-style: none;
  margin: 0;
  z-index: 2000;
}

@media (hover: hover) {

  .ilway-top-menu .menu-item-has-children:hover>.sub-menu,
  .ilway-top-menu .menu-item-has-children:focus-within>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

.ilway-top-menu .ilway-sub-open>.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 2뎁스(컬럼 타이틀) */
.ilway-top-menu .sub-menu>li>a {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #ff4d6d;
  text-decoration: none;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* 3뎁스(링크들) */
.ilway-top-menu .sub-menu>li>.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ilway-top-menu .sub-menu>li>.sub-menu a {
  display: block;
  padding: 6px 0;
  color: #222;
  text-decoration: none;
  font-size: 14px;
}

.ilway-top-menu .sub-menu>li>.sub-menu a:hover {
  text-decoration: underline;
}

/* 상단 우측 */
.ilway-top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ilway-top-search {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.ilway-top-right-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================================================
 5. 사이드바 (ilway Sidebar) - [수정됨]
 - Overlay 방식으로 변경하기 위해 그림자 추가
 - 본문을 밀지 않도록 설정
========================================================= */
.ilway-sidebar {
  position: fixed;
  top: var(--ilway-adminbar-h);
  left: 0;
  width: var(--ilway-sidebar-w);
  height: calc(100vh - var(--ilway-adminbar-h));

  z-index: 9999;

  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);

  transition: width 180ms ease, transform 180ms ease, opacity 180ms ease, visibility 180ms ease;

  /* [핵심 수정] 내용이 길어지면 세로 스크롤 허용 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 가로 스크롤은 방지 */

  /* 부드러운 스크롤 */
  scroll-behavior: smooth;
}

/* [추가] 사이드바 스크롤바 디자인 (크롬, 사파리, 엣지 등) */
.ilway-sidebar::-webkit-scrollbar {
  width: 5px;
  /* 스크롤바 너비를 얇게 설정 */
}

.ilway-sidebar::-webkit-scrollbar-track {
  background: transparent;
  /* 트랙 배경 투명 */
}

.ilway-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  /* 스크롤바 색상 (연한 회색) */
  border-radius: 10px;
  /* 둥근 모서리 */
}

.ilway-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
  /* 마우스 올렸을 때 진하게 */
}

/* aria-hidden 처리 (기존 유지) */
#ilway-sidebar.ilway-sidebar[aria-hidden="true"] {
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#ilway-sidebar.ilway-sidebar[aria-hidden="false"] {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ilway-sidebar-inner {
  /* height: 100% 제거 (스크롤을 위해 높이는 내용만큼 늘어나게 둠) */
  min-height: 100%;
  padding: 16px;
  padding-top: calc(var(--ilway-topbar-h) + 16px);
  padding-bottom: 40px;
  /* 맨 아래 내용이 잘리지 않도록 여백 추가 */
}

/* ... (아래 프로필, 퀵메뉴 등은 기존 그대로 유지) ... */
.ilway-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ilway-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
}

.ilway-name {
  font-weight: 800;
}

.ilway-quick {
  display: flex;
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
}

.ilway-quick a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.04);
}

html.ilway-sidebar-collapsed .ilway-name,
html.ilway-sidebar-collapsed .ilway-sidenav {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
 6. 본문 레이아웃 (화면 정중앙 정렬) - [수정됨]
 - 사이드바가 열려도 본문을 밀지 않도록(margin-left 제거) 수정
 - 너비를 항상 100%로 고정
========================================================= */
#page.site {
  padding-top: calc(var(--ilway-topbar-h) + var(--ilway-adminbar-h));

  /* [핵심 수정] 사이드바 여백 계산 제거 -> 0으로 고정 */
  margin-left: 0 !important;
  padding-right: 0 !important;

  /* [핵심 수정] 전체 폭을 항상 100%로 유지 */
  width: 100% !important;
  max-width: none;

  /* transform 등이 일어나지 않도록 강제 */
  transform: none !important;
  transition: none;
  /* 너비 변화 애니메이션 제거 */
}

.site-content {
  max-width: var(--ilway-content-max-w);
  margin: 0 auto;
  /* 확보된 공간 안에서 중앙 정렬 */
  padding: 0 32px 64px;
}

/* GP 우측 사이드바(위젯 영역) 제거 */
#right-sidebar,
#secondary {
  display: none !important;
}

/* 사이드바가 없어졌으니 본문을 100%로 */
.site-content .content-area,
.site-content #primary {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
  7. 오버레이 (모바일 오프캔버스용)
========================================================= */
.ilway-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: var(--ilway-z-overlay);
}

.ilway-overlay[hidden] {
  display: none !important;
}

/* =========================================================
  8. 모바일: 오프캔버스 처리
  - 화면이 좁을 땐 사이드바 공간 확보 해제
========================================================= */
@media (max-width: 1023px) {
  .ilway-topbar-inner {
    padding-left: 12px;
  }

  #page.site {
    margin-left: 0;
    padding-right: 0;
    /* [중요] 모바일에서는 오른쪽 공백 제거 */
    width: 100%;
  }

  .site-content {
    padding: 0 16px 48px;
  }

  .ilway-sidebar {
    width: var(--ilway-sidebar-open-w);
  }
}

/* =========================================================
  9. 사이드바 메뉴(아코디언) - [수정됨]
  - 최상위 메뉴는 자식 유무와 상관없이 모두 굵게(900) 설정
========================================================= */
.ilway-side-menu,
.ilway-side-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ilway-side-menu>li {
  margin: 6px 0;
}

/* 모든 메뉴 링크 공통 스타일 */
.ilway-side-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  color: #222;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background 0.2s ease;
  /* 호버 효과 부드럽게 */
}

.ilway-side-menu a:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* [핵심 수정] Parent (1뎁스 메뉴) */
/* 기존: .ilway-side-menu > .menu-item-has-children > a */
/* 변경: .ilway-side-menu > li > a (모든 최상위 항목 선택) */
.ilway-side-menu>li>a {
  font-weight: 900;
  /* Java, Docker 포함 모두 굵게 */
  font-size: 16px;
  /* 글자 크기도 확실하게 지정 */
}

/* caret (화살표) - 하위 메뉴가 있는 경우에만 표시 */
.ilway-side-menu>.menu-item-has-children>a::after {
  content: "▾";
  opacity: 0.55;
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

/* Submenu collapsed by default */
.ilway-side-menu>.menu-item-has-children>.sub-menu {
  display: none;
  padding-left: 10px;
  margin-top: 4px;
}

/* Open state */
.ilway-side-menu>.menu-item-has-children.ilway-side-open>a::after {
  transform: rotate(0deg);
}

.ilway-side-menu>.menu-item-has-children.ilway-side-open>.sub-menu {
  display: block;
}

/* Child items (2뎁스 하위 메뉴) */
.ilway-side-menu .sub-menu a {
  font-weight: 600;
  /* 하위 메뉴는 조금 덜 굵게 */
  font-size: 14px;
  padding: 8px 12px;
  color: #555;
  /* 색상을 살짝 연하게 하여 위계 구분 */
}

.ilway-side-menu .sub-menu a:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.03);
}

/* =========================================================
  10. Archive List View (Grid System)
  - [병합완료] 기존 10번 섹션의 Grid 구조 + 15번 섹션의 스타일 병합
  - .blog(홈), .archive(카테고리), .search(검색) 적용
========================================================= */
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
  display: grid;
  grid-template-columns: 1fr;

  /* ★ 핵심 변경: 카드 사이의 간격을 여기서 제어 (15px) */
  row-gap: 15px !important;
}

/* 페이지 헤더(아카이브 타이틀) 정리 */
body.blog .site-main>header.page-header,
body.archive .site-main>header.page-header,
body.search .site-main>header.page-header {
  grid-column: 1 / -1;
  margin: 24px 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* article 태그 마진 초기화 */
body.blog .site-main>article,
body.archive .site-main>article,
body.search .site-main>article {
  margin: 0 !important;
  /* row-gap이 간격을 담당하므로 마진 제거 */
}

/* 게시글 카드 스타일 (Grid + Box Style) */
body.blog .inside-article,
body.archive .inside-article,
body.search .inside-article {
  /* Box Style */
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 30px !important;

  /* [변경] 기존 margin-bottom 제거 (row-gap 사용) */
  margin-bottom: 0 !important;

  /* Grid Layout (내부 배치) */
  display: grid;
  grid-template-columns: 1fr var(--ilway-list-thumb-w);
  grid-template-areas:
    "header thumb"
    "summary thumb"
    "meta thumb";
  grid-auto-rows: min-content;
  column-gap: 30px;
  row-gap: 6px;
  /* 내부 요소(제목-요약) 간격 */
  align-items: start;
}

/* Grid Area Mapping */
body.blog .entry-header,
body.archive .entry-header,
body.search .entry-header {
  grid-area: header;
  min-width: 0;
}

body.blog .ilway-archive-meta,
body.archive .ilway-archive-meta,
body.search .ilway-archive-meta {
  grid-area: meta;
  min-width: 0;
}

/* 요약글 영역 */
body.blog .entry-summary,
body.archive .entry-summary,
body.search .entry-summary {
  grid-area: summary;
  min-width: 0;
  margin-top: 0 !important;
}

/* 썸네일 */
body.blog .post-image,
body.archive .post-image,
body.search .post-image {
  grid-area: thumb;
  justify-self: end;
  align-self: start;
  width: var(--ilway-list-thumb-w);
  height: var(--ilway-list-thumb-h);
  margin: 0 !important;
}

/* 썸네일 이미지 스타일 */
.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #f1f1f1;
}

/* 제목 스타일 */
body.blog .entry-title,
body.archive .entry-title,
body.search .entry-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
  word-break: keep-all;
  display: block;
  overflow: visible;
}

body.blog .entry-title a,
body.archive .entry-title a,
body.search .entry-title a {
  color: #111;
  text-decoration: none;
}

/* 요약 내용 스타일 */
body.blog .entry-summary p,
body.archive .entry-summary p,
body.search .entry-summary p {
  margin: 0 !important;
  color: rgba(0, 0, 0, 0.70);
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 메타 정보 스타일 */
.ilway-archive-meta {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ilway-meta-date {
  white-space: nowrap;
}

.ilway-meta-cat a {
  color: inherit;
  text-decoration: none;
}

.ilway-meta-cat a:hover {
  text-decoration: underline;
}

/* 모바일 리스트 뷰 */
@media (max-width: 480px) {

  body.blog .inside-article,
  body.archive .inside-article,
  body.search .inside-article {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "summary"
      "meta";
    padding: 24px 20px !important;
    gap: 8px;
  }

  body.blog .post-image,
  body.archive .post-image,
  body.search .post-image {
    display: none !important;
  }

  body.blog .entry-title,
  body.archive .entry-title,
  body.search .entry-title {
    font-size: 19px;
  }

  body.blog .entry-summary p,
  body.archive .entry-summary p,
  body.search .entry-summary p {
    font-size: 14px;
  }
}

/* =========================================================
  11. (옵션) 태그 pill 스타일
  - 지금은 functions.php에서 태그 출력이 꺼져있어도,
    나중에 다시 켤 때 바로 쓰도록 남겨둠
========================================================= */
.ilway-meta-tags {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ilway-meta-tags a {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.70);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
}

.ilway-meta-tags a:hover {
  background: rgba(0, 0, 0, 0.82);
}

/* =========================================================
  Landing Page (Front Page)
  - Hero / Stats / Latest Posts
  - 다른 페이지(아카이브 List View)에는 영향 없음
========================================================= */

.ilway-landing {
  --ilway-container-w: 980px;
  --ilway-radius: 18px;
  --ilway-border: rgba(0, 0, 0, 0.08);
  --ilway-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.ilway-landing .ilway-container {
  max-width: var(--ilway-container-w);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center
}

/* (A) 대문(Hero) */
.ilway-landing .ilway-hero {
  padding: 88px 0 56px;
  text-align: center;
  /* 텍스트 중앙 정렬 강제 */
}

.ilway-landing .ilway-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.70);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.04);
  /* (옵션) 뱃지가 블록 요소처럼 동작할 경우를 대비해 중앙 정렬 */
  margin: 0 auto;
}

.ilway-landing .ilway-badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
}

.ilway-landing .ilway-hero-title {
  margin: 18px 0 10px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1.02;
}

.ilway-landing .ilway-hero-desc {
  /* [중요] 중앙 정렬을 위해 좌우 마진 auto 설정 */
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.70);
  max-width: 56ch;
}

/* (A-2) Hero quick categories (카테고리 칩) */
.ilway-landing .ilway-hero-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  /* [중요] Flex 아이템들을 가운데로 모음 */
  justify-content: center;
}

.ilway-landing .ilway-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.ilway-landing .ilway-chip:hover {
  background: rgba(0, 0, 0, 0.86);
}

/* 각 섹션의 스타일 정의 */
.ilway-hero,
.ilway-section {
  position: relative;
  width: 100%;

  /* [수정] 위아래 여백을 늘려 답답함을 해소하고 시원한 느낌을 줌 */
  /* 기존 60px에서 96px로 변경 */
  padding-top: 96px;
  padding-bottom: 96px;

  /* 구분선 (기존 유지) */
  border-bottom: 1px solid #e5e7eb;
}

/* 모바일 환경에서는 너무 넓으면 부담스러우므로 약간 줄임 (선택사항) */
@media (max-width: 768px) {
  .ilway-section {
    /* 모바일은 기존 40px에서 64px 정도로 상향 조정 */
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* 마지막 섹션은 구분선 제거 (선택 사항) */
.ilway-section:last-child {
  border-bottom: none;
}

/* 모바일 및 태블릿 화면을 위한 스타일 */
@media (max-width: 768px) {

  /* 1. 컨테이너 좌우 여백 확보 */
  .ilway-container {
    width: 100%;
    /* 좌우에 20px 정도 여백을 주어 숨통을 트이게 함 */
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    /* 패딩이 너비에 포함되도록 설정 */
  }

  /* 2. 제목 폰트 크기 조절 */
  /* 모바일에서는 제목이 너무 크면 부담스러우므로 줄여줍니다 */
  .ilway-hero-title {
    font-size: 2.5rem;
    /* 기존보다 약간 작게 조절 (값은 상황에 맞춰 변경) */
    line-height: 1.2;
  }

  /* 3. 섹션 간격 좁히기 */
  /* 모바일은 세로로 길기 때문에 위아래 여백을 데스크탑보다는 줄입니다 */
  .ilway-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* 4. 버튼/태그 들이 삐져나가지 않게 줄바꿈 허용 */
  .ilway-hero-tags,
  .ilway-tags {
    display: flex;
    flex-wrap: wrap;
    /* 공간 부족하면 다음 줄로 넘어감 */
    gap: 8px;
    /* 태그 사이 간격 */
    justify-content: center;
    /* 가운데 정렬 */
  }
}

/* =========================================================
   (B) 통계 + 환영 섹션 (3단 수직 구조 + 하단 컬러바)
   - Vertical Layout: Icon - Value - Label
========================================================= */

.ilway-landing .ilway-stats-welcome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
}

.ilway-landing .ilway-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* 1. 통계 카드 본체 */
.ilway-landing .ilway-stat-card {
  position: relative;
  /* 하단 바 위치 기준점 */
  overflow: hidden;
  /* 둥근 모서리 밖으로 나가는 바 잘라냄 */

  display: flex;
  flex-direction: column;
  /* 수직 정렬 (아이콘-숫자-라벨) */
  align-items: center;
  /* 가운데 정렬 */
  justify-content: center;

  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 24px 16px 32px 16px;
  /* 하단 바 공간 확보를 위해 padding-bottom 넉넉히 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  /* 각 카드별 포인트 컬러 변수 정의 */
  --stat-color: #333;
  /* 기본값 */
}

/* 포인트 컬러 매핑 (data-accent 값에 따라 변수 변경) */
.ilway-stat-card[data-accent="blue"] {
  --stat-color: #3b82f6;
}

/* 파랑 */
.ilway-stat-card[data-accent="red"] {
  --stat-color: #ef4444;
}

/* 빨강 */
.ilway-stat-card[data-accent="yellow"] {
  --stat-color: #eab308;
}

/* 노랑 */
.ilway-stat-card[data-accent="green"] {
  --stat-color: #10b981;
}

/* 초록 */
.ilway-stat-card[data-accent="gray"] {
  --stat-color: #5a6b7c
}

/* 회색 */

/* 호버 효과 */
.ilway-landing .ilway-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* 2. [1층] 아이콘 */
.ilway-stat-icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--stat-color);
  /* 포인트 컬러 적용 */
}

/* 3. [2층] 숫자 (값) */
.ilway-landing .ilway-stat-value {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--stat-color);
  /* 포인트 컬러 적용 */
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

/* 4. [3층] 라벨 */
.ilway-landing .ilway-stat-label {
  font-size: 15px;
  font-weight: 600;
  color: #888;
  margin-top: 0;
  /* 기존 margin 초기화 */
}

/* 5. [4층] 하단 포인트 컬러 바 (Visual Element) */
.ilway-stat-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  /* 바 두께 */
  background-color: var(--stat-color);
  /* 포인트 컬러 적용 */
}

/* 모바일 반응형 (통계 카드) */
@media (max-width: 768px) {
  .ilway-landing .ilway-stat-card {
    padding: 20px 12px 28px 12px;
    border-radius: 16px;
  }

  .ilway-stat-icon {
    font-size: 26px;
    margin-bottom: 8px;
  }

  .ilway-landing .ilway-stat-value {
    font-size: 28px;
  }

  .ilway-landing .ilway-stat-label {
    font-size: 13px;
  }

  .ilway-stat-bar {
    height: 6px;
  }
}

/* [수정됨] 환영 카드: 공간감 확보 및 타이포그래피 확대 */
.ilway-landing .ilway-welcome-card {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);

  padding: 48px 40px;
  /* 위아래 패딩을 늘려(40->48) 시원하게 */

  display: flex;
  flex-direction: column;
  /* justify-content: space-between; -> 제거하고 아래 flex-grow 방식 사용 */
  align-items: flex-start;
  height: 100%;
}

/* 1. 콘텐츠 영역 (텍스트) */
.ilway-welcome-content {
  position: relative;
  z-index: 2;
  width: 100%;

  /* [핵심] 텍스트 영역이 남은 공간을 차지하며 수직 중앙 정렬됨 */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 텍스트 덩어리를 카드 중앙으로 이동 */
}

.ilway-landing .ilway-welcome-title {
  /* 제목과 설명 사이 간격 대폭 확대 (16px -> 32px) */
  margin: 0 0 32px 0;

  /* 폰트 크기 확대 (26px -> 34px) */
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111;
  line-height: 1.25;
  word-break: keep-all;
  /* 단어 단위 줄바꿈 */
}

.ilway-landing .ilway-welcome-desc {
  margin: 0;

  /* 본문 크기 및 줄간격 확대 */
  font-size: 18px;
  /* 16px -> 18px */
  line-height: 1.8;
  /* 1.7 -> 1.8 (줄간격 넓힘) */

  color: #555;
  word-break: keep-all;
  max-width: 95%;
}

/* 2. 배경 데코레이션 (로켓) */
.ilway-card-deco {
  position: absolute;
  right: -20px;
  bottom: -40px;
  /* 위치 약간 조정 */
  font-size: 200px;
  /* 아이콘 크기도 약간 키움 */
  line-height: 1;
  opacity: 0.04;
  z-index: 1;
  user-select: none;
  pointer-events: none;
  transform: rotate(-15deg);
}

/* 3. 하단 버튼 영역 */
.ilway-welcome-action {
  /* 버튼과 텍스트 사이 간격 확보 */
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

.ilway-welcome-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 아이콘 간격 조정 */
  padding: 14px 28px;
  /* 버튼 크기 약간 확대 */
  background: #111;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  /* 글자 크기 확대 */
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ilway-welcome-btn:hover {
  color: #fff !important;
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 모바일 대응 (기존 유지하되 간격만 조정) */
@media (max-width: 768px) {
  .ilway-landing .ilway-welcome-card {
    padding: 32px 24px;
    text-align: center;
    align-items: center;
  }

  .ilway-welcome-content {
    justify-content: flex-start;
    /* 모바일은 위에서부터 정렬 */
  }

  .ilway-landing .ilway-welcome-title {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .ilway-landing .ilway-welcome-desc {
    font-size: 16px;
    max-width: 100%;
  }

  .ilway-welcome-action {
    margin-top: 24px;
    width: 80%;
    /* 버튼 꽉 차게 */
  }

  .ilway-welcome-btn {
    width: 100%;
    padding: 10px 20px;
    justify-content: center;
  }
}

/* =========================================================
   (C) 최신글 섹션 (Latest Posts) - [수정됨]
   - 헤더 및 카드 내부 텍스트 왼쪽 정렬 적용
   - 이미지 높이 및 레이아웃 유지
========================================================= */

/* 1. 최신글 섹션 헤더 왼쪽 정렬 (중앙 정렬 해제) */
.ilway-landing .ilway-section-header {
  text-align: left;
  margin-bottom: 24px;
  padding-left: 2px;
  /* 살짝 여유를 줌 */
}

/* [추가] 섹션 타이틀 & 설명 폰트 두께 보강 */
.ilway-landing .ilway-section-title {
  font-size: 32px;
  /* 크기 명시 */
  font-weight: 800;
  /* 아주 두껍게 (Black) */
  letter-spacing: -0.03em;
  color: #111;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.ilway-landing .ilway-section-desc {
  font-size: 17px;
  font-weight: 400;
  /* 기존보다 두껍게 (Semi-Bold) */
  color: #555;
  /* 너무 새까맣지 않게 조절 */
  margin: 0;
  line-height: 1.5;
}

/* 모바일에서는 크기만 살짝 조절 */
@media (max-width: 768px) {
  .ilway-landing .ilway-section-title {
    font-size: 26px;
  }

  .ilway-landing .ilway-section-desc {
    font-size: 15px;
  }
}

/* 2. 그리드 레이아웃 */
.ilway-landing .ilway-latest-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 22px;
  align-items: stretch;
  /* 좌우 높이 맞춤 */
}

/* 왼쪽 영역 래퍼 */
.ilway-landing .ilway-featured {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 3. 왼쪽 큰 카드 스타일 */
.ilway-landing .ilway-featured-card {
  display: flex;
  flex-direction: column;
  height: 100%;

  border: 1px solid var(--ilway-border);
  border-radius: var(--ilway-radius);
  background: #fff;
  box-shadow: var(--ilway-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  /* [핵심] 부모의 center 정렬 무시하고 왼쪽 정렬 */
  text-align: left;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ilway-landing .ilway-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* 이미지 영역 (남는 공간 채움) */
.ilway-landing .ilway-featured-media {
  flex: 1;
  min-height: 240px;
  position: relative;
  background: rgba(0, 0, 0, 0.04);
}

.ilway-landing .ilway-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* 본문 영역 */
.ilway-landing .ilway-featured-body {
  padding: 24px;
  display: grid;
  gap: 8px;
  align-content: start;
  flex-shrink: 0;
}

.ilway-landing .ilway-featured-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.ilway-landing .ilway-featured-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ilway-landing .ilway-featured-meta {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
}

/* 4. 오른쪽 리스트 스타일 */
.ilway-landing .ilway-latest-list {
  display: grid;
  gap: 12px;
}

.ilway-landing .ilway-latest-item {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 14px;
  align-items: center;

  border: 1px solid var(--ilway-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  padding: 14px;
  text-decoration: none;
  color: inherit;

  /* [핵심] 텍스트 왼쪽 정렬 (ilway-latest-text 요소 포함) */
  text-align: left;

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ilway-landing .ilway-latest-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

.ilway-landing .ilway-latest-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ilway-landing .ilway-latest-meta {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
}

.ilway-landing .ilway-latest-thumb {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.ilway-landing .ilway-latest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 반응형 */
@media (max-width: 1023px) {
  .ilway-landing .ilway-stats-welcome {
    grid-template-columns: 1fr;
  }

  .ilway-landing .ilway-latest-grid {
    grid-template-columns: 1fr;
  }

  .ilway-landing .ilway-featured-card {
    grid-template-columns: 1fr;
  }

  .ilway-landing .ilway-featured-media {
    min-height: 220px;
  }
}

@media (max-width: 480px) {
  .ilway-landing .ilway-hero {
    padding: 64px 0 44px;
  }

  .ilway-landing .ilway-hero-desc {
    font-size: 16px;
  }

  .ilway-landing .ilway-latest-item {
    grid-template-columns: 1fr 84px;
  }

  .ilway-landing .ilway-latest-thumb {
    width: 84px;
    height: 84px;
  }
}

/* =========================================================
  Landing Footer (front-page only)
========================================================= */
body.front-page .site-footer {
  display: none !important;
}

.ilway-landing-footer {
  margin-top: 64px;
  background: rgba(0, 0, 0, 0.80);
  color: rgba(255, 255, 255, 0.92);
}

.ilway-landing-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
}

.ilway-footer-mark {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.ilway-footer-right {
  font-weight: 800;
  opacity: 0.95;
}

/* =========================================================
  Landing: Post Meta Row (date + comments)
========================================================= */
.ilway-landing .ilway-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
}

.ilway-landing .ilway-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ilway-landing .ilway-meta-dot {
  opacity: 0.6;
}

.ilway-landing .ilway-ico {
  font-size: 14px;
  line-height: 1;
}

/* =========================================================
  Landing Page Footer (ilway.ilways.com)
  - full width background + 980px inner container
========================================================= */
.ilway-landing-footer {
  width: 100%;
  background: #2f3238;
  color: rgba(255, 255, 255, 0.92);
}

.ilway-landing-footer-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ilway-landing-footer-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ilway-footer-mark {
  font-weight: 900;
  letter-spacing: -0.04em;
}

.ilway-footer-title {
  font-weight: 800;
}

.ilway-landing-footer-right {
  font-weight: 700;
  opacity: 0.9;
}

/* =========================================================
   12. Saju Style Content Override
   - saju.ilways.com의 본문 스타일을 이식
   - .entry-content 내부 요소에만 적용
========================================================= */

/* 1. 본문 텍스트 기본 설정 */
.entry-content p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  /* 황금비율 줄간격 */
  color: #333333;
  /* 완전 검정보다 눈이 편한 진회색 */
  margin-bottom: 24px !important;
  word-break: keep-all;
  /* 단어 끊김 방지 */
  letter-spacing: -0.3px;
}

/* 2. 소제목 H2 (파란색 밑줄 포인트) */
.entry-content h2 {
  font-size: 26px !important;
  font-weight: 700;
  color: #111;
  margin-top: 50px !important;
  margin-bottom: 20px !important;
  border-bottom: 2px solid var(--ilway-accent);
  /* 포인트 컬러 */
  padding-bottom: 10px;
  line-height: 1.3;
}

/* 3. 소제목 H3 (왼쪽 파란 막대 포인트) */
.entry-content h3 {
  font-size: 22px !important;
  font-weight: 600;
  color: #222;
  margin-top: 35px !important;
  margin-bottom: 15px !important;
  border-left: 5px solid var(--ilway-accent);
  /* 왼쪽 포인트 막대 */
  padding-left: 12px;
  line-height: 1.3;
}

/* H4: 마크다운 스타일 (# 제목) */
.entry-content h4 {
  font-size: 19px !important;
  /* h3(22px)와 본문(16px) 사이 */
  font-weight: 700;
  color: #222;
  margin-top: 28px !important;
  margin-bottom: 10px !important;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* 앞에 # 기호를 붙여 개발자스러운 느낌 강조 */
.entry-content h4::before {
  content: "#";
  color: var(--ilway-accent);
  /* 포인트 컬러(Indigo Blue) 적용 */
  margin-right: 6px;
  font-weight: 400;
  /* 기호는 너무 두껍지 않게 */
  opacity: 0.7;
  /* 약간 투명하게 해서 세련된 느낌 */
}

/* 4. 리스트 (ul, ol) - 회색 박스 스타일 */
.entry-content ul,
.entry-content ol {
  margin-left: 0;
  margin-bottom: 30px;
  background-color: #f9f9f9;
  padding: 25px 25px 25px 40px;
  border-radius: 8px;
}

/* [추가] 중첩된 리스트 (리스트 안의 리스트) 스타일 조정 */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  background-color: transparent;
  /* 배경색 투명 (중첩 시 박스 겹침 방지) */
  padding: 0 0 0 20px;
  /* 왼쪽 들여쓰기를 줄임 (기존 40px -> 20px) */
  margin-bottom: 0;
  /* 불필요한 하단 여백 제거 */
  border-radius: 0;
  margin-top: 5px;
  /* 상단 여백 약간 추가 */
}

.entry-content li {
  margin-bottom: 10px;
  line-height: 1.6;
  font-size: 16px;
  color: #333;
}

/* 5. 인용구 (Blockquote) - 파란 박스 스타일 */
.entry-content blockquote {
  font-style: normal;
  background: #eefbff;
  border-left: 4px solid var(--ilway-accent);
  margin: 30px 0;
  padding: 20px 25px;
  color: #444;
  font-size: 17px;
  font-weight: 500;
  border-radius: 0 8px 8px 0;
}

/* 6. 본문 링크 스타일 */
.entry-content a {
  color: var(--ilway-accent);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.entry-content a:hover {
  background-color: var(--ilway-accent);
  color: #fff;
  text-decoration: none;
}

/* 7. 테이블 디자인 (반응형 자동 조절) */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 15px !important;
  border: 1px solid #ddd;
  table-layout: auto !important;
}

.entry-content table th,
.entry-content table td {
  padding: 12px 10px;
  border-bottom: 1px solid #eee;
  line-height: 1.5;
  color: #444;
  vertical-align: middle;
  word-break: keep-all;
}

.entry-content table th {
  background-color: #f1f3f5;
  color: #333;
  font-weight: 700;
  border-bottom: 2px solid #d1d1d1;
  text-align: center;
}

/* 테이블 줄무늬 효과 */
.entry-content table tr:nth-child(even) td {
  background-color: #fafafa;
}

/* PC 화면: 첫 번째 칸 좁게 */
@media (min-width: 769px) {

  .entry-content table th:first-child,
  .entry-content table td:first-child {
    width: 1%;
    white-space: nowrap;
  }

  .entry-content table th:nth-child(2),
  .entry-content table td:nth-child(2) {
    width: auto;
  }
}

/* 모바일 화면: 좌우 스크롤 */
@media (max-width: 768px) {
  .entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: 100% !important;
  }

  .entry-content table td,
  .entry-content table th {
    font-size: 14px !important;
    padding: 10px 8px;
  }

  .entry-content table th:last-child,
  .entry-content table td:last-child {
    width: 100%;
  }
}

/* 8. 이미지 스타일 */
.entry-content figure {
  margin: 0 0 1em;
}

.entry-content img {
  height: auto;
  max-width: 100%;
  border-radius: 4px;
  /* 살짝 둥근 모서리 추가 */
}

/* 9. 본문 하단 날짜/메타 (Saju 스타일 톤앤매너) */
.entry-meta {
  font-size: 13px !important;
  color: #888888 !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

.entry-meta a {
  color: #888888 !important;
  text-decoration: none !important;
}

.entry-meta a:hover {
  color: #555555 !important;
}

/* =========================================================
   13. 본문 상단 대표 이미지 숨기기 (중복 방지)
========================================================= */
.inside-article .featured-image,
.inside-article .page-header-image-single {
  display: none !important;
}


/* =========================================================
   14. 제목 스타일 및 메타 정보 수정
   - H1 크기/두께 Saju 사이트와 동일하게 변경
   - 작성자(byline) 정보 숨김
========================================================= */
/* 1. 게시글 제목 (H1) 스타일 변경 */
.single .entry-title {
  font-size: 32px !important;
  /* Saju PC 기준 크기 */
  font-weight: 800 !important;
  /* Saju 기준 두께 (Black) */
  line-height: 1.25 !important;
  margin-bottom: 15px !important;
  color: #111111;
  text-transform: uppercase;
  /* Saju 스타일 반영 */
}

/* 모바일 화면 대응 (Saju 스타일 반영) */
@media (max-width: 768px) {
  .single .entry-title {
    font-size: 30px !important;
    /* 모바일에서는 조금 작게 조정 */
  }
}

/* 2. 작성자(byline) 숨기기 */
.entry-meta .byline {
  display: none !important;
  /* */
}

/* =========================================================
   16. Sticky Footer (화면 꽉 차게 만들기)
   - 본문 내용이 짧아도 푸터가 화면 최하단에 위치하도록 설정
   - body에 min-height: 100vh 적용
========================================================= */

body {
  min-height: 100vh;
  /* 최소 높이를 화면 높이(100%)로 설정 */
  display: flex;
  /* Flexbox 레이아웃 적용 */
  flex-direction: column;
  /* 요소들을 세로 방향으로 배치 */
}

/* 메인 콘텐츠 영역(#page)이 빈 공간을 모두 차지하여 푸터를 밀어냄 */
#page {
  flex: 1;
  /* 남은 공간을 모두 차지 */
  width: 100%;
  /* 가로 폭 꽉 채우기 */
}

/* =========================================================
   17. 빈 페이지(Empty State) 디자인
   - 404, 검색 결과 없음, 빈 카테고리 등
   - 기본 테마의 메시지/타이틀 완벽하게 숨김
========================================================= */

/* (1) 테마 기본 요소(타이틀, 본문) 숨기기 */
.error404 .page-header,
.error404 .entry-content,
.error404 .entry-header,
/* 혹시 모를 내부 헤더 */
.no-results .page-header,
.no-results .entry-content,
.no-results .entry-header,
.search-no-results .page-header,
.search-no-results .entry-content {
  display: none !important;
}

/* "찾지 못함" H1 태그 강제 숨김 (이중 안전장치) */
.error404 h1.page-title,
.no-results h1.page-title,
.search-no-results h1.page-title {
  display: none !important;
}

/* 빈 페이지 래퍼 초기화 */
.no-results .inside-article,
.not-found .inside-article,
.error404 .inside-article {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* (2) 커스텀 Empty State UI 디자인 */
.ilway-empty-state {
  text-align: center;
  padding: 100px 20px;
  max-width: 600px;
  margin: 0 auto;
}

/* 아이콘 (이모지 + 애니메이션) */
.ilway-empty-icon {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 24px;
  display: inline-block;
  animation: ilwayFloat 3s ease-in-out infinite;
}

/* 텍스트 스타일 */
.ilway-empty-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  color: #222;
  letter-spacing: -0.02em;
}

.ilway-empty-desc {
  font-size: 16px !important;
  color: #666;
  line-height: 1.6;
  margin-bottom: 32px !important;
}

/* 홈으로 가기 버튼 */
.ilway-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #222;
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  border-radius: 50px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ilway-empty-btn:hover {
  background-color: #444;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 애니메이션 정의 */
@keyframes ilwayFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .ilway-empty-state {
    padding: 60px 20px;
  }

  .ilway-empty-icon {
    font-size: 60px;
  }

  .ilway-empty-title {
    font-size: 22px !important;
  }
}

/* =========================================================
   18. Search Modal Style (전체화면 검색창)
========================================================= */
.ilway-search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  /* 최상위 노출 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 활성화 상태 */
.ilway-search-modal.active {
  opacity: 1;
  visibility: visible;
}

/* 배경 (반투명 블랙) */
.ilway-search-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  /* 블러 효과로 고급스럽게 */
}

/* 검색창 컨테이너 */
.ilway-search-wrap {
  position: relative;
  width: 90%;
  max-width: 600px;
  z-index: 1;
  text-align: center;
  transform: translateY(30px);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ilway-search-modal.active .ilway-search-wrap {
  transform: translateY(0);
}

/* 닫기 버튼 */
.ilway-search-close {
  position: absolute;
  top: -80px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 48px;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
  padding: 10px;
}

.ilway-search-close:hover {
  opacity: 1;
}

/* 검색 폼 디자인 */
.ilway-search-form {
  position: relative;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

.ilway-search-input {
  width: 100%;
  background: transparent;
  border: none;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  padding: 15px 10px;
  outline: none;
  text-align: center;
}

.ilway-search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* 검색 버튼 숨김 (엔터키 사용) */
.ilway-search-submit {
  display: none;
}

/* 안내 문구 */
.ilway-search-tip {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .ilway-search-input {
    font-size: 22px;
    padding: 10px 0;
  }

  .ilway-search-close {
    top: -60px;
    right: 0;
    font-size: 36px;
  }
}

/* =========================================================
   19. 모바일 태그 개수 제한
   - 모바일(768px 이하)에서는 4번째 태그부터 숨김 처리
   - 결과적으로 상위 3개만 보임
========================================================= */
@media (max-width: 768px) {
  .ilway-landing .ilway-chip:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 493px) {
  .ilway-landing .ilway-chip:nth-child(n+4) {
    display: none;
  }
}

/* =========================================================
   20. Comments Section (Chat Style & Modern Form)
   - 대화형 말풍선 디자인 + Tistory 스타일 입력 폼
   - [수정] 상단 여백 제거 및 모바일 간격 최적화
========================================================= */

/* (A) 댓글 섹션 전체 레이아웃 */
#comments {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* 섹션 제목 (이모지 포함) */
.comments-title,
#reply-title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 20px;
  /* 제목 아래 간격 */
  margin-top: 0 !important;
  /* [수정] 위쪽 간격 완전 제거 */
  color: #111;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  /* 줄간격 좁힘 */
}

/* (B) 댓글 리스트 디자인 (말풍선 스타일) */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list li.comment {
  margin-bottom: 24px;
}

.comment-body {
  display: flex;
  gap: 16px;
}

/* 아바타 */
.comment-body .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 말풍선 본문 */
.comment-content {
  flex: 1;
  background: #f3f4f6;
  padding: 16px 20px;
  border-radius: 0 16px 16px 16px;
  position: relative;
}

/* 작성자 정보 */
.comment-meta .fn {
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  color: #111;
  margin-right: 8px;
}

.comment-metadata {
  display: inline-block;
  font-size: 12px;
  color: #888;
}

.comment-metadata a {
  text-decoration: none;
  color: inherit;
}

.comment-content p {
  margin: 8px 0 0;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

/* 답글 버튼 */
.reply {
  margin-top: 8px;
  text-align: right;
}

.comment-reply-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--ilway-accent);
  text-decoration: none;
  background: rgba(79, 70, 229, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  transition: 0.2s;
}

.comment-reply-link:hover {
  background: var(--ilway-accent);
  color: #fff;
}

/* 대댓글 */
.children {
  list-style: none;
  padding-left: 64px;
  margin-top: 16px;
  border-left: 2px solid #eee;
}


/* (C) 댓글 입력 폼 (Tistory 스타일) */
#respond {
  background: #fff;
  padding: 0 !important;
  /* [수정] 상단 패딩 제거 */
  margin-top: 0px !important;
  /* 본문/댓글리스트와 입력폼 사이 간격 */
  border: none;
  box-shadow: none;
  border-top: none !important;
  /* [수정] 상단 구분선 제거 */
}

/* 폼 레이아웃 (Flexbox) */
#commentform {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* 1. 본문 입력창 */
.comment-form-comment {
  width: 100%;
  order: 1;
  margin-bottom: 10px;
}

#comment {
  width: 100%;
  height: 150px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  box-shadow: none;
  resize: vertical;
}

#comment:focus {
  border-color: var(--ilway-accent);
  outline: none;
}

.comment-form label {
  display: none;
}

/* 2. 이름 & 이메일 */
.comment-form-author,
.comment-form-email {
  order: 2;
  width: auto;
  margin: 0;
}

#author,
#email {
  height: 46px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  box-shadow: none;
}

#author {
  width: 160px;
}

#email {
  width: 300px;
}

#author:focus,
#email:focus {
  border-color: var(--ilway-accent);
}

/* 3. 쿠키 체크박스 */
.comment-form-cookies-consent {
  order: 2;
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  margin-left: 5px;
  margin-top: 10px;
}

.comment-form-cookies-consent input {
  margin-right: 8px;
}

.comment-form-cookies-consent label {
  display: inline-block;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* 4. 전송 버튼 */
.form-submit {
  order: 3;
  margin: 0 0 0 auto;
  width: auto;
}

#submit {
  background: var(--ilway-accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 0 30px;
  height: 46px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s;
}

#submit:hover {
  background: #3730a3;
}

/* 5. 로그인 유저 상태 메시지 디자인 */
.logged-in-as {
    margin: 0 0 15px 0 !important; /* 입력창과의 간격 */
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
}

.logged-in-as strong {
    font-weight: 700;
    color: var(--ilway-accent); /* 닉네임에 포인트 컬러 */
}

.logged-in-as .sep {
    color: #ddd; /* 구분선 연하게 */
    margin: 0 2px;
}

.logged-in-as a.logout-link {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.logged-in-as a.logout-link:hover {
    color: #ff5f56; /* 로그아웃은 빨간색으로 경고 느낌 살짝 줌 */
    border-bottom-color: #ff5f56;
    background: transparent !important; /* 기존 버튼 스타일 덮어쓰기 방지 */
}

/* (D) 모바일 반응형 최적화 (768px 이하) */
@media (max-width: 768px) {

  /* [수정] Flex Gap을 0으로 만들고 margin으로 제어 */
  #commentform {
    gap: 0 !important;
  }

  /* [수정] 태그 간 간격 좁히기 (기존 P태그 여백 제거) */
  .comment-form-comment,
  .comment-form-author,
  .comment-form-email {
    width: 100%;
    margin-bottom: 8px !important;
    /* 좁은 간격 적용 (8px) */
  }

  #author,
  #email {
    width: 100%;
  }

  /* 버튼 영역 */
  .form-submit {
    width: 100%;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
  }

  #submit {
    width: 100%;
  }

  /* 쿠키 동의 (맨 아래로) */
  .comment-form-cookies-consent {
    width: 100%;
    margin-top: 8px !important;
    order: 10;
    /* 강제로 맨 끝으로 */
  }
}

/* =========================================================
   Code Block Style (Mac Window + Line Numbers)
   - <pre lang="..."> 태그 전용 스타일
   - [수정] 언어 라벨 오른쪽 정렬 적용
========================================================= */

/* 1. 코드 블럭 창틀 */
.entry-content pre[lang] {
  position: relative;
  background: #282c34;
  border-radius: 12px;
  margin-bottom: 30px;
  padding-top: 50px !important;
  /* 헤더 높이 확보 */
  padding-bottom: 20px !important;
  padding-right: 20px !important;
  padding-left: 0 !important;
  /* 기본 왼쪽 패딩 0 */

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  line-height: 1.6;
}

/* 2. 줄 번호가 있을 때 패딩 조정 */
.entry-content pre[lang].has-line-numbers {
  padding-left: 60px !important;
  /* 줄 번호 공간 확보 */
}

/* 3. 상단 헤더 바 + 신호등 */
.entry-content pre[lang]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #21252b;
  border-bottom: 1px solid #181a1f;
  z-index: 10;

  /* 신호등 버튼 */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
  box-sizing: content-box;
  transform: translate(15px, 14px);
}

/* 4. [수정됨] 언어 이름 라벨 (오른쪽 표시) */
.entry-content pre[lang]::after {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 20px;
  /* [핵심] 왼쪽(left:0) 대신 오른쪽에서 20px 떨어뜨림 */
  /* width: 100%; text-align: center; -> 제거함 */

  height: 40px;
  line-height: 40px;
  text-align: right;
  /* 오른쪽 정렬 */

  color: #abb2bf;
  font-size: 13px;
  font-weight: 700;
  font-family: "Pretendard", sans-serif;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 11;
}

/* 5. 실제 코드 영역 */
.entry-content pre[lang] code {
  background: transparent !important;
  padding: 0 24px !important;
  font-family: "D2Coding", "Fira Code", "Consolas", monospace !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #abb2bf;
  display: block;
  overflow-x: auto;
  white-space: pre;
}

/* 줄 번호 있을 때 코드 영역 패딩 제거 */
.entry-content pre[lang].has-line-numbers code {
  padding-left: 10px !important;
}

/* 6. 줄 번호 컨테이너 스타일 */
.line-numbers-rows {
  position: absolute;
  top: 50px;
  left: 0;
  width: 50px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
  height: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.line-numbers-rows span {
  display: block;
  counter-increment: linenumber;
  text-align: right;
  padding-right: 10px;
  color: #5c6370;
  font-size: 15px;
  line-height: 1.6;
  user-select: none;
}

.line-numbers-rows span::before {
  content: counter(linenumber);
}

/* 스크롤바 */
.entry-content pre[lang] code::-webkit-scrollbar {
  height: 8px;
}

.entry-content pre[lang] code::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* =========================================================
   21. Pagination (Modern Button Style)
   - 기존 텍스트 링크를 크고 클릭하기 쉬운 버튼형으로 변경
========================================================= */

/* 1. 페이지네이션 컨테이너 (중앙 정렬) */
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* 버튼 사이 간격 */
    margin-top: 20px; /* 본문과의 거리 */
    margin-bottom: 20px;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 허용 */
}

/* 2. 개별 버튼 (숫자, 이전, 다음) 공통 스타일 */
.nav-links .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 44px; /* 최소 너비 (원형/정사각형 느낌) */
    height: 44px;    /* 높이 */
    padding: 0 16px; /* 텍스트(이전/다음)가 길 경우를 대비한 여백 */
    
    background: #fff;
    border: 1px solid #e5e7eb; /* 연한 회색 테두리 */
    border-radius: 12px; /* 부드러운 둥근 모서리 */
    
    color: #555;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 3. 호버(마우스 오버) 효과 */
.nav-links .page-numbers:not(.current):not(.dots):hover {
    border-color: var(--ilway-accent);
    color: var(--ilway-accent);
    transform: translateY(-3px); /* 살짝 위로 뜸 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 그림자 생성 */
    background: #fff;
}

/* 4. 현재 페이지 (활성화 상태) */
.nav-links .page-numbers.current {
    background: var(--ilway-accent); /* 브랜드 컬러 배경 */
    border-color: var(--ilway-accent);
    color: #fff; /* 흰색 글씨 */
    cursor: default; /* 클릭 커서 제거 */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); /* 브랜드 컬러 그림자 */
}

/* 5. 줄임표 (...) 스타일 */
.nav-links .dots {
    border: none;
    background: transparent;
    min-width: auto;
    color: #999;
    padding: 0 4px;
    cursor: default;
    pointer-events: none; /* 클릭 방지 */
    font-weight: 700;
    letter-spacing: 2px;
}

/* 6. 이전/다음 버튼 텍스트 정리 */
.nav-links .prev.page-numbers,
.nav-links .next.page-numbers {
    font-size: 14px; /* 글씨 살짝 작게 */
    font-weight: 700;
}

/* (옵션) 모바일 최적화 */
@media (max-width: 480px) {
    .nav-links {
        gap: 6px;
    }
    
    .nav-links .page-numbers {
        min-width: 38px; /* 모바일에서는 조금 작게 */
        height: 38px;
        font-size: 14px;
        padding: 0 12px;
        border-radius: 10px;
    }
}

/* =========================================================
  Mermaid Diagram Style (Mac Window)
  - JS가 <pre lang="mermaid"> 를 아래 구조로 치환:
    <div class="ilway-mermaid-frame" data-lang="MERMAID">
      <div class="ilway-mermaid">...</div>
    </div>
  - 충돌 방지: .entry-content 스코프 + ilway- 네임스페이스
========================================================= */

.entry-content .ilway-mermaid-frame {
  position: relative;
  background: #282c34;
  border-radius: 12px;
  margin-bottom: 30px;
  padding: 50px 20px 20px 20px; /* 헤더 높이 + 내부 여백 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* 상단 헤더바 + 신호등(한 번에) */
.entry-content .ilway-mermaid-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #181a1f;
  z-index: 10;

  /* 헤더바 + 신호등 3개를 background로 구성 */
  background:
    radial-gradient(circle at 22px 20px, #ff5f56 0 6px, transparent 7px),
    radial-gradient(circle at 42px 20px, #ffbd2e 0 6px, transparent 7px),
    radial-gradient(circle at 62px 20px, #27c93f 0 6px, transparent 7px),
    linear-gradient(#21252b, #21252b);
}

/* 우측 상단 언어 라벨 */
.entry-content .ilway-mermaid-frame::after {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 20px;
  height: 40px;
  line-height: 40px;
  text-align: right;

  color: #abb2bf;
  font-size: 13px;
  font-weight: 700;
  font-family: "Pretendard", sans-serif;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 11;
}

/* Mermaid 다이어그램 렌더 영역(밝게) */
.entry-content .ilway-mermaid-frame .ilway-mermaid {
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px;
  overflow: auto; /* 큰 다이어그램 스크롤 */
}

/* SVG가 박스 밖으로 튀지 않게 */
.entry-content .ilway-mermaid-frame .ilway-mermaid svg {
  max-width: 100%;
  height: auto;
  display: block;
}