/* ============================================================
   custom.css  —  Scholar 테마용 커스텀 스타일 (모바일 + 표 수정 반영)

   저장 위치: user/themes/scholar/css/custom.css
   함께 쓰는 템플릿:
     user/themes/scholar/templates/partials/header.html.twig
     user/themes/scholar/templates/default.html.twig
     user/themes/scholar/templates/blog.html.twig

   Scholar 의 base.html.twig 가 이 파일을 우선순위 97 로 불러오므로
   theme.css(100)·팔레트(99) 보다 나중에 실립니다.

   수정 후:  bin/grav clear-cache  +  브라우저 강제 새로고침
   ============================================================ */

/* @import 는 반드시 파일 최상단(주석 제외)에 있어야 합니다. */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,600;0,700;1,400&family=Merriweather:wght@300;400;700&family=Mulish:ital,wght@0,400;0,800;1,400&display=swap');


/* ============================================================
   ▼▼▼ 조절하고 싶은 건 전부 여기에 있습니다 ▼▼▼
   ============================================================ */
:root {
  /* --- 폰트 --- */
  --font-main:   'Bitter', Georgia, 'Times New Roman', serif;   /* 본문·제목 */
  --font-title:  'Bitter', Georgia, 'Times New Roman', serif;   /* 상단 사이트 이름 */
  --font-menu:   'Bitter', Georgia, 'Times New Roman', serif;   /* 상단 메뉴 링크 */
  --font-sans:   'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-detail: 'Merriweather', Georgia, serif;

  /* --- 본문 폭 ---
       큰 화면에서 더 넓히려면    → --content-max-width
       좁은 화면에서 여백 줄이려면 → --content-width
     배너의 좌우 여백도 이 두 값에서 자동으로 계산됩니다. */
  --content-width: 92%;
  --content-max-width: 88rem;
  --card-padding-x: 3.5rem;

  /* --- 제목 크기 --- */
  --h1-size: 2.5rem;
  --h2-size: 2rem;
  --h3-size: 1.65rem;
  --h4-size: 1.4rem;
  --h5-size: 1.2rem;
  --h6-size: 1.05rem;

  /* --- 제목 블록 여백 --- */
  --heading-space-above: 1.25rem;
  --heading-space-below: 0.4rem;

  /* --- 상단 배너 --- */
  --site-title-size: 1.6rem;
  --site-logo-height: 2.2rem;
  --nav-link-size: 1.05rem;
  --nav-link-gap: 1.25rem;
  --banner-height: 4rem;

  /* --- 색 --- */
  --body-color:    #4c5156;
  --heading-color: #343a40;
  --title-color:   #222222;
  --menu-color:    #4c5156;
  --banner-bg:     var(--foreground);
  --link-color:    #bd5d38;
  --rule-color:    #c7d3f5;
  --navy:          #154360;
  --navy-deep:     #0b0b3b;

  /* Scholar 자체 토큰 */
  --text: #4c5156;
  --primary: #bd5d38;
}
/* ============================================================
   ▲▲▲ 여기까지 ▲▲▲
   ============================================================ */


/* ------------------------------------------------------------
   1. 본문 기본
   ------------------------------------------------------------ */
body {
  font-family: var(--font-main);
  color: var(--body-color);
}

.page p  { margin-top: 0.1rem; margin-bottom: 0.1rem; }
.page ul { padding-left: 1.5rem; margin-top: 0.1rem; margin-bottom: 0.1rem; }

/* Scholar 의 .page { height: 100vh } 는 모바일에서 내용이 잘립니다. */
.page {
  height: auto;
  min-height: 100vh;
}

/* 제목 안 부분 강조용 (title_html / heading 프런트매터에서 사용) */
.page .accent       { color: var(--link-color); }
.page .accent-bold  { color: var(--link-color); font-weight: 700; }
.page .accent-light { color: var(--body-color); font-weight: 400; opacity: 0.7; }


/* ------------------------------------------------------------
   2. 본문 폭과 카드
   ------------------------------------------------------------ */
.page main,
.page .main,
.page:not(.listing) main,
.page.listing main {
  width: var(--content-width);
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.page main article {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 992px) {
  .page:not(.listing) main article {
    padding: 1rem var(--card-padding-x);
  }
}

/* 제목과 카드 사이 이중 마진 제거
   (Scholar: main section { margin: 2rem 0 0 } + main article { margin-top: 2rem }) */
.page main > section {
  margin-top: 0;
}
.page:not(.listing) main article {
  margin-top: 0;
}

/* 블로그 목록: 사이드바를 없앴으므로 12칸을 다 씁니다.
   목록 페이지만 main 에 붙는 위쪽 마진과 행 간격도 제거합니다. */
.page.listing main > section {
  grid-column-end: span 12;
}
.page.listing main {
  margin-top: 0;
  row-gap: 0;
}


/* ------------------------------------------------------------
   3. 제목 (h1 ~ h6)
   ------------------------------------------------------------ */
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
  font-family: var(--font-main);
  color: var(--heading-color);
  font-weight: 600;
  text-align: left;
  line-height: 1.25;
}

.page h1 { font-size: var(--h1-size); margin: 0.2rem 0 1rem;   padding: 0; }
.page h2 { font-size: var(--h2-size); margin: 1.4rem 0 0.6rem; }
.page h3 { font-size: var(--h3-size); margin: 1.2rem 0 0.6rem; }
.page h4 { font-size: var(--h4-size); margin: 1rem 0 0.3rem;   padding: 0; }
.page h5 { font-size: var(--h5-size); margin: 0.9rem 0 0.3rem; }
.page h6 { font-size: var(--h6-size); margin: 0.8rem 0 0; }


/* ------------------------------------------------------------
   4. 페이지 제목 — 본문 카드 바깥 위, 왼쪽 정렬

   프런트매터 옵션:
     hide_title: true      이 페이지만 제목 숨김
     heading: 표시할 제목   메뉴의 title 과 다르게 (HTML 가능)
     subtitle: 부제
   ------------------------------------------------------------ */
.page article > header h1 {
  display: none;
}

.page main > .page-heading {
  grid-column-end: span 12;
  width: 100%;
  margin: var(--heading-space-above) 0 var(--heading-space-below);
  padding: 0 1rem;
  background: none;
}
@media (min-width: 992px) {
  .page main > .page-heading {
    padding: 0 var(--card-padding-x);
  }
}

.page main > .page-heading h1 {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  font-size: var(--h1-size);
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.2;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
}

.page main > .page-heading .page-subheading {
  margin: 0.15rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--body-color);
  opacity: 0.8;
}

.page main > .page-heading .page-intro {
  margin: 0.15rem 0 0;
}
.page main > .page-heading .page-intro p {
  margin: 0 0 0.1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--body-color);
}
.page main > .page-heading .page-intro > :last-child {
  margin-bottom: 0;
}


/* ------------------------------------------------------------
   5. 상단 배너
   목표: [로고 + 사이트이름] 왼쪽 / [메뉴] 오른쪽, 한 줄.
   ------------------------------------------------------------ */
.page header[role="banner"] {
  background: var(--banner-bg);
}

/* 오른쪽 끝의 삼선(목차 서랍) 버튼 숨김 */
.page header[role="banner"] [data-drawer-open] {
  display: none;
}

/* 로고 + 사이트 이름 */
.page header[role="banner"] h1 {
  margin: 0;
  padding: 0;
  font-family: var(--font-title);
  font-size: var(--site-title-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  color: var(--title-color);
}
.page header[role="banner"] h1 a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: auto;
  padding: 0;
  border-right: 0;
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.page header[role="banner"] .site-logo {
  display: block;
  height: var(--site-logo-height);
  width: auto;
  flex: 0 0 auto;
}

/* 메뉴 링크 */
.page header[role="banner"] nav.links > div a {
  width: auto;
  padding: 0.4rem 0;
  font-family: var(--font-menu);
  font-size: var(--nav-link-size);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--menu-color);
  text-decoration: none;
}
.page header[role="banner"] nav.links > div a:hover,
.page header[role="banner"] nav.links > div a.active {
  color: var(--link-color);
}

/* --- 한 줄 레이아웃 (768px 이상) --- */
@media (min-width: 768px) {
  .page header[role="banner"] {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--banner-height);
    padding-inline: max(
      calc((100% - var(--content-width)) / 2),
      calc((100% - var(--content-max-width)) / 2)
    );
  }

  .page header[role="banner"] h1 {
    order: 0;
    flex: 0 0 auto;
    width: auto;
  }

  .page header[role="banner"] nav.links {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin-left: auto;
    padding: 0;
  }
  .page header[role="banner"] nav.links > div {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    width: auto;
  }
  .page header[role="banner"] nav.links > div a + a {
    margin-left: var(--nav-link-gap);
  }

  .page header[role="banner"] nav.menu {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 1rem;
  }
}


/* ------------------------------------------------------------
   6. 링크
   ------------------------------------------------------------ */
a.urllink {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s ease;
}
a.urllink:hover,
a.urllink:focus {
  text-decoration: underline;
}


/* ------------------------------------------------------------
   7. 커스텀 문단 스타일
   ------------------------------------------------------------ */
pti,
.pti {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.5;
}
.pti { display: block; }

pta,
.pta {
  font-family: var(--font-sans);
  font-size: 0.99rem;
}
.pta { display: block; }

.pl {
  font-family: var(--font-detail);
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--navy-deep);
  line-height: 1.5;
}

.pa {
  font-family: var(--font-sans);
  font-size: 0.94rem;
}

.bold-text {
  font-family: var(--font-main);
  font-weight: 600;
}


/* ------------------------------------------------------------
   8. 표
   Grav 마크다운은 <table> 에 클래스를 붙이지 않으므로
   .table-striped / .table-nohover 는 매칭되지 않습니다.
   기본을 '줄무늬 O, hover X' 로 두고 예외만 클래스로 지정합니다.
   ------------------------------------------------------------ */

/* hover 끄기 — 팔레트의 table tr:hover (0,1,2) 를 이깁니다 */
.page main table tr:hover {
  background-color: transparent;
}

/* 줄무늬. td 배경이 tr 배경 위에 칠해지므로 짝수 행도 명시해야
   hover 색이 한 줄 걸러 비쳐 보이는 현상이 사라집니다. */
.page main table > tbody > tr:nth-of-type(odd) > td,
.page main table > tbody > tr:nth-of-type(odd) > th {
  background-color: #eeeeee;
}
.page main table > tbody > tr:nth-of-type(even) > td,
.page main table > tbody > tr:nth-of-type(even) > th {
  background-color: var(--foreground);
}

/* 가로선 */
.page main table > :not(caption) > * > * {
  border-top: 1px solid var(--rule-color);
  border-bottom: 1px solid var(--rule-color);
}

/* --- 예외: 원시 HTML 표에 직접 클래스를 붙였을 때 --- */

/* 줄무늬 없는 표 */
.page main table.table-plain > tbody > tr > td,
.page main table.table-plain > tbody > tr > th {
  background-color: transparent;
}

/* hover 를 살리고 싶은 표 */
.page main table.table-hover > tbody > tr:hover > td,
.page main table.table-hover > tbody > tr:hover > th {
  background-color: var(--secondary);
}


/* ------------------------------------------------------------
   9. 모바일
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .page main,
  .page .main,
  .page:not(.listing) main,
  .page.listing main {
    width: 100%;
    max-width: 100%;
  }
  .page main article {
    padding: 1rem;
  }
  .page main > .page-heading {
    padding: 0 1rem;
    margin-top: 0.75rem;
  }

  .page main > .page-heading h1,
  .page h1 { font-size: 1.75rem; }
  .page h2 { font-size: 1.45rem; }
  .page h3 { font-size: 1.3rem; }
  .page h4 { font-size: 1.15rem; }
  .page h5 { font-size: 1.05rem; }
  .page h6 { font-size: 1rem; }

  .page article { overflow-wrap: break-word; }
  .page article table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  .page article pre { overflow-x: auto; }
  .page article img { max-width: 100%; height: auto; }
}

/* --- 모바일 배너 (575px 이하): 메뉴를 항상 펼쳐두고 삼선 제거 --- */
@media (max-width: 575px) {
  .page header[role="banner"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5rem 1rem;
  }

  .page header[role="banner"] h1 {
    order: 0;
    flex: 1 1 100%;
    width: auto;
    font-size: 1.15rem;
    letter-spacing: normal;
  }
  .page header[role="banner"] .site-logo {
    height: 1.6rem;
  }

  /* display 를 다시 켜는 게 핵심. 이게 없으면 메뉴가 사라집니다. */
  .page header[role="banner"] .links {
    display: flex;
    order: 1;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .page header[role="banner"] .links > div {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 0.2rem 1rem;
  }
  .page header[role="banner"] .links > div a {
    width: auto;
    padding: 0.2rem 0;
    font-size: 0.95rem;
  }

  /* 삼선과 그 아래 빈 띠 제거.
     검색 기능을 쓰신다면 이 블록 대신 아래 주석을 사용하세요. */
  .page header[role="banner"] .menu {
    display: none;
  }
  /*
  .page header[role="banner"] .menu {
    order: 2;
    width: auto;
    flex: 0 0 auto;
  }
  .page header[role="banner"] [mobile-menu-open],
  .page header[role="banner"] [mobile-menu-close] {
    display: none;
  }
  */
}