@charset "UTF-8";
/*
 Theme Name:   GeneratePress EP Theme
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme made by EP.
 Author:       EVERYDAY PRACTICE
 Author URI:   http://everyday-practice.com
 License:      GNU General Public License v3.0 (or later)
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Template:     generatepress
 Version:      0.1
*/
/* Initialize */
:root {
  --color-white: #fff;
  --color-black: #000;
  --ep-font-base: "Kig Sans", "SL Gothic", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

:root[data-size=desktop] {
  --ep-margin: 20px;
  --ep-pageTop: 12px;
  --ep-headerH: 64px;
}

:root[data-size=tablet],
:root[data-size=phone_large],
:root[data-size=phone] {
  --ep-margin: 15px;
  --ep-pageTop: 10px;
  --ep-headerH: 50px;
}

* {
  word-break: keep-all;
  box-sizing: border-box;
  position: relative;
}

html {
  font-size: 18px !important;
}

body,
input,
select,
optgroup,
textarea {
  font-size: 1rem !important;
  line-height: 1.4em !important;
  font-family: var(--ep-font-base) !important;
}

body {
  background-color: var(--icaseoul-bg-1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
}

h1 {
  font-size: 3.125rem;
  line-height: 1.1;
  font-weight: 400;
}

h2 {
  font-size: 1.8125rem;
  line-height: 1.1;
  font-weight: 400;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
}

h4 {
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 700;
}

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.caption {
  font-size: 0.875rem;
}

a {
  text-decoration: none;
  color: #000;
}

/* ----- Typography: 전역 폰트 강제 적용 ----- */
/* 아이콘 폰트(dashicons / font-awesome 등)는 제외해야 글리프가 깨지지 않음 */
*:not(.dashicons):not([class^=dashicons-]):not([class*=" dashicons-"]):not([class*=fa-]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal) {
  font-family: var(--ep-font-base) !important;
}

/* ----- Initialize End ----- */
/* Global Styles */
/* ----- Header ----- */
:root {
  /* 사이트 전체 여백 */
  --ep-padding: 30px;
  /* 헤더 로고 높이 (두 로고의 비율이 달라 각각 지정) */
  --ep-logo-org-h: 108px;
  --ep-logo-oy-h: 98px;
  /* 좌측 하단 마크 높이 */
  --ep-mark-h: 150px;
  /* 헤더 로고 높이. 스크롤을 내리면 compact 값으로 줄어든다 */
  --ep-logo-org: 150px;
  --ep-logo-oy: 110px;
  --ep-logo-org-compact: 84px;
  --ep-logo-oy-compact: 62px;
  /* 납작해진 헤더의 위 여백과 전환 시간 */
  --ep-header-pt-compact: 14px;
  --ep-header-dur: 320ms;
}

:root[data-size=tablet] {
  --ep-logo-org-h: 78px;
  --ep-logo-oy-h: 71px;
  --ep-mark-h: 86px;
}

:root[data-size=phone_large],
:root[data-size=phone] {
  --ep-logo-org-h: 54px;
  --ep-logo-oy-h: 49px;
  --ep-mark-h: 61px;
}

body {
  padding: 0 var(--ep-padding) var(--ep-padding);
}

.grid-container {
  max-width: 100%;
}

.inside-article {
  padding: 0 !important;
}

.ep-header {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  /* 아래쪽 여백은 두지 않는다. 헤더 높이는 script.js 가 --ep-header-h 로
     실측해서 넘기므로, 사이드바의 sticky top 과 max-height 도 함께 당겨진다 */
  padding: var(--ep-padding) 0 0;
  background-color: var(--color-white);
  transition: padding-top var(--ep-header-dur) ease;
}

/* 스크롤을 내리면 script.js 가 붙이는 상태.
   로고 높이를 줄이면 width:auto 라 폭도 비율대로 따라 줄고,
   레이아웃 높이까지 함께 줄어 헤더가 위로 붙는다.
   줄어든 높이는 ResizeObserver 가 --ep-header-h 로 다시 재므로
   좌측 사이드바의 sticky top 과 max-height 에 그대로 반영된다 */
.ep-header.is-compact {
  padding-top: var(--ep-header-pt-compact);
}

/* 로그인 상태의 관리자 바 아래에 붙도록 */
.admin-bar .ep-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .ep-header {
    top: 46px;
  }
}
.ep-header__logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.ep-header__logo img {
  display: block;
  width: auto;
  transition: height var(--ep-header-dur) ease;
}

.ep-header__logo--org img {
  height: var(--ep-logo-org);
}

.ep-header__logo--oy img {
  height: var(--ep-logo-oy);
}

.ep-header.is-compact .ep-header__logo--org img {
  height: var(--ep-logo-org-compact);
}

.ep-header.is-compact .ep-header__logo--oy img {
  height: var(--ep-logo-oy-compact);
}

@media (prefers-reduced-motion: reduce) {
  .ep-header,
  .ep-header__logo img {
    transition-duration: 1ms;
  }
}

/* 좌측 하단 고정 마크 */
.ep-mark {
  position: fixed;
  left: var(--ep-padding);
  bottom: var(--ep-padding);
  z-index: 998;
  line-height: 0;
  pointer-events: none;
}

.ep-mark img {
  display: block;
  width: auto;
  height: var(--ep-mark-h);
}

/* Element(훅)가 헤더를 감싸는 래퍼를 만들면 sticky 이동 범위가 사라지므로 래퍼를 레이아웃에서 제외 */
:where(body > *, #page > *, .site > *):has(> .ep-header) {
  display: contents;
}

/* ----- Header End ----- */
/* ----- Main ----- */
:root {
  /* 메인 그리드 */
  --ep-grid-cols: 12;
  --ep-gap: 20px;
  /* 트랜스크립션 목록 단 수. 10칸을 균등하게 나누려면 2 / 5 / 10 중에서 고를 것 */
  --ep-list-cols: 10;
  /* 이미지가 없을 때(자리표시)만 쓰는 비율 */
  --ep-thumb-ratio: 3 / 4;
  --ep-thumb-bg: #f2f2f2;
  /* 제목과 구분선 사이 / 구분선과 항목 사이 여백 */
  --ep-facet-mt: 12px;
  --ep-facet-pt: 12px;
  --ep-facet-border: 1px solid var(--color-black);
  /* 활성 항목의 • 이 들어갈 좌측 여백 */
  --ep-facet-indent: 12px;
  /* 목록 호버 시 나머지 카드의 불투명도와 전환 시간 */
  --ep-list-dim: 0.5;
  --ep-list-dim-dur: 200ms;
  /* 카드 사이 여백을 스쳐 지날 때 잠깐 밝아지는 것을 막는 복귀 지연 */
  --ep-list-dim-delay: 80ms;
  /* sticky 사이드바가 헤더 아래에서 띄울 간격 */
  --ep-facet-sticky-gap: 20px;
}

.ep-main {
  display: grid;
  grid-template-columns: repeat(var(--ep-grid-cols), 1fr);
  gap: var(--ep-gap);
  align-items: start;
}

.ep-main__facets {
  grid-column: span 2;
  min-width: 0;
  /* --ep-header-h 는 script.js 가 .ep-header 실측값으로 채운다.
     JS 가 아직 안 돌았을 때를 대비해 fallback 을 둔다 */
  position: sticky;
  top: calc(var(--ep-header-h, 0px) + var(--ep-facet-sticky-gap));
  align-self: start;
  /* 항목이 많아져 화면을 넘기면 사이드바 안에서만 스크롤 */
  max-height: calc(100vh - var(--ep-header-h, 0px) - var(--ep-facet-sticky-gap) - var(--ep-padding));
  overflow-y: auto;
}

/* 관리자 바가 있으면 헤더 자체가 그만큼 내려가 있으므로 같이 밀어준다 */
.admin-bar .ep-main__facets {
  top: calc(32px + var(--ep-header-h, 0px) + var(--ep-facet-sticky-gap));
}

@media (max-width: 782px) {
  .admin-bar .ep-main__facets {
    top: calc(46px + var(--ep-header-h, 0px) + var(--ep-facet-sticky-gap));
  }
}
/* GeneratePress 의 .entry-content p 보다 우선하도록 두 단계로 잡는다 */
.ep-main__facets .ep-main__facets-title {
  margin: 0;
  padding-left: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
}

.ep-main__list {
  grid-column: span 10;
  /* 그리드 자식의 기본 min-width:auto 때문에 내용이 칸을 밀어내는 것을 막는다 */
  min-width: 0;
}

/* 구분선은 제목("분류 기준") 아래에 놓이고,
   라벨("드로잉·노트")과 항목 목록은 그 아래 묶음 안에 들어간다 */
.ep-main__facets-body {
  margin-top: var(--ep-facet-mt);
  padding-top: var(--ep-facet-pt);
  border-top: var(--ep-facet-border);
}

/* FacetWP 기본 스타일을 걷어내고 텍스트 목록으로만 세로 나열 */
.ep-main__facets .facetwp-facet {
  /* 항목 사이 간격과 같은 값을 줘서 라벨이 목록의 첫 줄처럼 읽히게 한다 */
  margin: 4px 0 0;
  padding: 0;
  border: 0;
}

.ep-main__facets .facetwp-radio,
.ep-main__facets .facetwp-checkbox {
  display: block;
  margin: 0 0 4px;
  /* 좌측 여백은 • 자리. 항목 글자들이 세로로 정렬되도록 전부 동일하게 준다 */
  padding: 0 0 0 var(--ep-facet-indent);
  border: 0;
  background: none !important;
  background-image: none !important;
  line-height: 1.4;
  opacity: 0.5;
  cursor: pointer;
}

.ep-main__facets .facetwp-radio:last-child,
.ep-main__facets .facetwp-checkbox:last-child {
  margin-bottom: 0;
}

.ep-main__facets .facetwp-radio:hover,
.ep-main__facets .facetwp-checkbox:hover {
  opacity: 1;
}

.ep-main__facets .facetwp-radio.checked,
.ep-main__facets .facetwp-checkbox.checked {
  background: none !important;
  opacity: 1;
}

/* 활성 항목 좌측 • 표기 */
.ep-main__facets .facetwp-radio.checked::before,
.ep-main__facets .facetwp-checkbox.checked::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.4;
}

/* 개수 표기 (3) 숨김. 필요하면 이 블록을 지울 것 */
.ep-main__facets .facetwp-counter {
  display: none;
}

/* 트랜스크립션 목록 */
/* 무한 스크롤로 붙는 2페이지 이후의 <ul> 도 같은 그리드에 이어지도록,
   그리드는 .facetwp-template 이 갖고 <ul> 은 display:contents 로 통과시킨다.
   (FacetWP 의 load_more 는 .facetwp-template 안에 <ul> 을 통째로 append 한다) */
.ep-main__list .facetwp-template {
  display: grid;
  grid-template-columns: repeat(var(--ep-list-cols), 1fr);
  gap: var(--ep-gap);
}

.ep-tx-list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ep-tx-list__empty {
  grid-column: 1/-1;
  margin: 0;
}

/* 무한 스크롤 트리거 */
.ep-tx-more {
  margin-top: var(--ep-gap);
}

/* 관측 대상. 레이아웃에는 영향을 주지 않는다 */
.ep-tx-more__sentinel {
  height: 1px;
}

.ep-tx-more .facetwp-facet {
  margin: 0;
}

.facetwp-load-more {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--color-black);
  background: none;
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
}

/* JS 자동 로드가 걸리면 버튼은 필요 없다.
   IntersectionObserver 가 없는 환경에서는 클래스가 안 붙어 버튼이 그대로 남는다 */
.ep-tx-more--auto .facetwp-load-more {
  display: none;
}

.ep-tx-more--auto.is-loading::after {
  content: "불러오는 중…";
  display: block;
  padding: 12px 0;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0.5;
}

.ep-tx-list__item {
  margin: 0;
  min-width: 0;
}

.ep-tx-card {
  display: block;
  color: inherit;
}

/* 실제 링크(.ep-tx-card)에 올라갔을 때만 가리킨 카드만 남기고 나머지를 흐리게.
   li 는 그리드에서 행 높이만큼 늘어나 카드보다 클 수 있으므로 링크를 기준으로 잡는다.
   터치 기기에서는 호버 상태가 눌린 채로 남으므로 제외한다 */
.ep-tx-card {
  /* 흐려질 때는 즉시, 원래대로 돌아올 때는 지연을 둔다.
     카드 사이 여백을 빠르게 지나가는 동안 밝아지지 않게 하기 위한 것 */
  transition: opacity var(--ep-list-dim-dur) ease var(--ep-list-dim-delay);
}

@media (hover: hover) {
  .ep-tx-list:has(.ep-tx-card:hover) .ep-tx-card {
    opacity: var(--ep-list-dim);
    transition-delay: 0s;
  }
  .ep-tx-list:has(.ep-tx-card:hover) .ep-tx-card:hover {
    opacity: 1;
  }
}
/* 이미지를 자르지 않는다. 너비만 100%로 맞추고 높이는 원본 비율을 따른다 */
.ep-tx-card__thumb {
  display: block;
  width: 100%;
}

.ep-tx-card__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* 이미지가 없는 칸만 비율을 고정해 자리를 잡아준다 */
.ep-tx-card__thumb:empty {
  aspect-ratio: var(--ep-thumb-ratio);
  background-color: var(--ep-thumb-bg);
}

.ep-tx-card__title {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* demo 속성으로 찍는 자리표시 카드 */
.ep-tx-list__item--placeholder .ep-tx-card__title {
  min-height: 1.4em;
}

@media (max-width: 1024px) {
  :root {
    --ep-list-cols: 5;
  }
}
@media (max-width: 780px) {
  :root {
    --ep-list-cols: 3;
  }
  .ep-main__facets,
  .ep-main__list {
    grid-column: span 12;
  }
  /* 한 칼럼으로 떨어지면 사이드바가 목록 위에 오므로 sticky 를 푼다 */
  .ep-main__facets,
  .admin-bar .ep-main__facets {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
@media (max-width: 480px) {
  :root {
    --ep-list-cols: 2;
  }
}
/* ----- Transcription Modal ----- */
:root {
  /* 팝업 전용 토큰. 시안 기준 26 / 16 / 12px */
  --ep-tx-modal-pad: var(--ep-padding);
  --ep-tx-title: 26px;
  --ep-tx-body: 16px;
  --ep-tx-small: 14px;
  /* 좌우 2단 사이 간격 */
  --ep-tx-col-gap: 10px;
  /* 좌측 본문 최대 폭. 트랜스크립션은 원문 줄바꿈을 그대로 살리므로
     기본은 좌측 단 전체를 쓰고, 더 좁히려면 이 값을 px 로 바꿀 것 */
  --ep-tx-text-w: 100%;
  /* 우측 하단 주석 블록 폭 */
  --ep-tx-notes-w: 270px;
  /* 제목 아래 구분선까지의 간격 */
  --ep-tx-head-gap: 10px;
  --ep-tx-rule-gap: 10px;
  --ep-tx-dur: 260ms;
}

/* 카드가 팝업 트리거임을 알린다 */
.ep-tx-card[data-tx-id] {
  cursor: pointer;
}

/* 단독 URL 로 들어온 상세 페이지.
   .ep-tx-modal 클래스를 같이 붙여 아래 레이아웃 규칙을 그대로 재사용하므로
   여기서는 뒤쪽 문서 스크롤만 잠가주면 된다 */
html:has(body.single-transcription),
body.single-transcription {
  overflow: hidden;
}

/* 팝업이 열린 동안 뒤쪽 문서 스크롤을 잠근다.
   스크롤바가 사라지며 생기는 가로 밀림은 padding 으로 보정 */
html.ep-tx-modal-open,
html.ep-tx-modal-open body {
  overflow: hidden;
}

html.ep-tx-modal-open body {
  padding-right: calc(var(--ep-padding) + var(--ep-scrollbar, 0px));
}

.ep-tx-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* display 를 쓰는 규칙보다 뒤에 두어 hidden 이 이기게 한다 */
.ep-tx-modal[hidden] {
  display: none;
}

/* 로그인 상태의 관리자 바를 가리지 않도록 */
.admin-bar .ep-tx-modal {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .ep-tx-modal {
    top: 46px;
  }
}
.ep-tx-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-white);
  opacity: 0;
  transition: opacity var(--ep-tx-dur) ease;
}

.ep-tx-modal__panel {
  position: absolute;
  inset: 0;
  padding: var(--ep-tx-modal-pad);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--ep-tx-dur) ease;
}

.ep-tx-modal.is-open .ep-tx-modal__backdrop {
  opacity: 1;
}

.ep-tx-modal.is-open .ep-tx-modal__panel {
  opacity: 1;
}

/* JS 가 팝업을 열자마자 패널에 포커스를 준다. 기본 외곽선은 지운다 */
.ep-tx-modal__panel:focus {
  outline: none;
}

/* 패널의 확정된 높이를 .ep-tx-detail 로 넘겨준다.
   이 규칙이 없으면 아래 height:100% 들이 전부 auto 로 풀려서
   우측 이미지 상자가 좌측 본문 길이에 끌려간다 (짧은 글일수록 작아짐) */
.ep-tx-modal__content {
  height: 100%;
}

.ep-tx-modal__status {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0;
  font-size: var(--ep-tx-small);
  line-height: 1.55;
  text-align: center;
  opacity: 0.5;
  pointer-events: none;
}

/* 상세 본문 */
.ep-tx-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ep-tx-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex: 0 0 auto;
}

.ep-tx-detail__title {
  margin: 0;
  font-size: var(--ep-tx-title);
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-black);
}

.ep-tx-detail__close {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--ep-tx-title);
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-black);
  cursor: pointer;
  transition: opacity 150ms ease;
}

.ep-tx-detail__close:hover,
.ep-tx-detail__close:focus {
  background: none;
  color: var(--color-black);
  opacity: 0.55;
}

.ep-tx-detail__close-x {
  font-size: 0.92em;
}

.ep-tx-detail__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ep-tx-col-gap);
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--ep-tx-head-gap);
}

/* 구분선은 좌측 본문 위, 우측 메타 행 위에 각각 걸린다 */
.ep-tx-detail__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding-top: var(--ep-tx-rule-gap);
  border-top: 1px solid var(--color-black);
}

.ep-tx-detail__col--text {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ep-tx-detail__text {
  max-width: var(--ep-tx-text-w);
  flex: 0 0 auto;
  font-size: var(--ep-tx-body);
  line-height: 1.6;
  /* 원문의 줄바꿈과 들여쓰기를 그대로 보존한다 */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* 주석은 좌측 단 아래쪽 오른편에 붙는다 */
.ep-tx-detail__notes {
  flex: 0 0 auto;
  margin-top: auto;
  margin-left: auto;
  max-width: var(--ep-tx-notes-w);
  padding-top: 40px;
  font-size: var(--ep-tx-small);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.ep-tx-detail__meta {
  display: flex;
  align-items: baseline;
  gap: 30px;
  flex: 0 0 auto;
  font-size: var(--ep-tx-small);
  line-height: 1.55;
}

.ep-tx-detail__meta-item--spec {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

/* 이미지가 놓일 상자. 우측 단 폭 × (뷰포트 높이에서 패딩·제목·메타를 뺀 나머지) */
.ep-tx-detail__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: 50px 0 0;
}

/* 상자(우측 반 폭 × 남은 높이)를 넘지 않되 원본보다 크게 늘리지도 않는다.
   원본 폭이 255px 인 스캔도 섞여 있어 확대하면 뭉개진다 */
.ep-tx-detail__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

@media (max-width: 1024px) {
  :root {
    --ep-tx-col-gap: 30px;
    --ep-tx-head-gap: 26px;
  }
}
@media (max-width: 780px) {
  :root {
    --ep-tx-title: 20px;
    --ep-tx-body: 15px;
    --ep-tx-notes-w: 100%;
  }
  /* 좁은 화면에서는 한 단으로 쌓고 패널 전체를 스크롤한다 */
  .ep-tx-modal__panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ep-tx-modal__content,
  .ep-tx-detail {
    height: auto;
    min-height: 100%;
  }
  .ep-tx-detail__body {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ep-tx-detail__col--text {
    overflow: visible;
  }
  /* 이미지를 먼저 보여준다 */
  .ep-tx-detail__col--figure {
    order: -1;
  }
  .ep-tx-detail__notes {
    margin-top: 26px;
    padding-top: 0;
  }
  .ep-tx-detail__meta {
    flex-wrap: wrap;
    gap: 4px 20px;
  }
  .ep-tx-detail__meta-item--spec {
    margin-left: 0;
    text-align: left;
  }
  .ep-tx-detail__figure {
    margin-top: 20px;
  }
  .ep-tx-detail__img {
    max-height: 62vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ep-tx-card,
  .ep-tx-modal__backdrop,
  .ep-tx-modal__panel {
    transition-duration: 1ms;
  }
}
/* ----- Transcription Modal End ----- */
/* ----- Main End ----- */
/* ----- Global Styles End ----- */
/* Custom Styles */
/* ----- Custom Styles End ----- */