@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;900&family=Noto+Serif+KR:wght@400;500;600&display=swap');
@import url("https://unpkg.com/littlefoot/dist/littlefoot.css");

:root{
  --bg:#ffffff;
  --fg:#000000;
  --line:#111111;
  --link:#FF78A9;
  --page-x:18px;
  --menu-size:17px;
  --small:13px;
  --head:96px;
  --section:21px;
  --row:15px;
  --indent:1.6em;
  --menu-h:46px;
}

*{
  box-sizing:border-box;
}

html{
  margin:0;
  padding:0;
  background:#ffffff;
  color:var(--fg);
}

body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Noto Sans KR', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:.12em;
  text-decoration-thickness:1px;
}

a:visited,
a:hover,
a:active{
  color:var(--link);
}

img{
  max-width:100%;
  display:block;
}

img.half{
  max-width:50%;
}

.md-figure img.half{
  width:50%;
  max-width:50%;
  margin:0 auto;
}

.md-figure:has(img.half){
  margin-top:4px;
  margin-bottom:4px;
}

.md-figure:has(img.half) figcaption{
  width:50%;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:640px){
  .md-figure img.half{
    width:100%;
    max-width:100%;
    margin:0;
  }
  .md-figure:has(img.half){
    margin-top:28px;
    margin-bottom:28px;
  }
  .md-figure:has(img.half) figcaption{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}

video{
  max-width:100%;
  display:block;
}

.md-embed{
  position:relative;
  width:100%;
  max-width:760px;
  aspect-ratio:16/9;
  margin:0;
}

.md-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}

.site-shell{
  min-height:100vh;
  position:relative;
  background:#ffffff;
}

/* header */
.site-header{
  position:fixed;
  z-index:80;
  top:0;
  left:0;
  right:0;
  height:var(--menu-h);
  background:#ffffff;
}

.site-title{
  position:absolute;
  z-index:83;
  top:0;
  left:0;
  height:var(--menu-h);
  display:flex;
  align-items:center;
  padding-left:var(--page-x);
  padding-right:12px;
  background:transparent;
  font-size:17px;
  font-weight:700;
  line-height:1;
}

.site-title,
.site-title:visited,
.site-title:hover,
.site-title:active{
  color:var(--fg);
  text-decoration:none;
}

.menu-toggle{
  display:none;
  position:absolute;
  z-index:84;
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:var(--menu-h);
  padding:0 12px;
  border:0;
  background:transparent;
  color:var(--fg);
  font:inherit;
  font-size:24px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
}

.lang-list{
  position:absolute;
  z-index:83;
  top:0;
  right:0;
  height:var(--menu-h);
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:var(--page-x);
  background:transparent;
  font-size:14px;
  font-weight:600;
  line-height:1;
}

.lang-list a,
.lang-list a:visited,
.lang-list a:hover,
.lang-list a:active{
  color:var(--fg);
  text-decoration:none;
}

.menu-overlay{
  display:none;
}

.menu-list{
  position:absolute;
  z-index:81;
  top:0;
  left:0;
  right:0;
  height:var(--menu-h);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0 56px 0 calc(var(--page-x) + 110px);
  background:transparent;
  font-weight:600;
  font-size:var(--menu-size);
  line-height:1;
}

.menu-list a{
  color:inherit;
  padding:0 0 3px 0;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.menu-list a:hover,
.menu-list a.active{
  border-color:var(--line);
}

@media (min-width:641px){
  .menu-list{
    pointer-events:none;
  }

  .menu-list a{
    pointer-events:auto;
  }
}

/* pages */
.page{
  padding:68px 0 40px 0;
}

.page-home{
  padding-top:96px;
}

.archive-page,
.detail-page{
  padding-top:70px;
}

.links-page{
  padding-top:78px;
}

.home-name{
  margin:0 0 14px 0;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
  font-size:46px;
  line-height:.94;
  font-weight:900;
  letter-spacing:-.035em;
}

.home-intro{
  margin:0 0 20px 0;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
  max-width:780px;
  font-family:'Noto Serif KR', Georgia, serif;
  font-size:20px;
  line-height:1.72;
  text-indent:var(--indent);
}

.cv-grid{
  width:100%;
  margin-top:14px;
  border-top:1px solid var(--line);
}

.cv-row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:20px;
  align-items:start;
  width:100%;
  margin:0;
  padding:8px var(--page-x) 9px var(--page-x);
  border-bottom:1px solid var(--line);
}

.cv-label{
  font-size:var(--small);
  font-weight:700;
  letter-spacing:.02em;
}

.cv-value{
  font-size:16px;
  line-height:1.4;
  max-width:980px;
}

.cv-value.serif{
  font-family:'Noto Serif KR', Georgia, serif;
  font-size:20px;
  line-height:1.72;
}

.home-after-text{
  padding-left:var(--page-x);
  padding-right:var(--page-x);
  margin:24px 0 0 0;
  max-width:760px;
  font-family:'Noto Serif KR', Georgia, serif;
  font-size:20px;
  line-height:1.72;
}

.home-after-text p{
  margin:0 0 1.05em 0;
  text-indent:var(--indent);
}

.archive-header{
  width:100%;
  padding-top:10px;
}

.page-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  width:100%;
  margin:0 0 8px 0;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
}

.page-title h1{
  margin:0;
  font-family:'Noto Sans KR', Arial, sans-serif;
  font-size:var(--head);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.055em;
}

.page-title h1.cjk{
  padding-bottom:.12em;
}

.page-title .site-wordmark{
  display:none !important;
}

.archive-tools{
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  gap:22px;
  align-items:start;
  width:100%;
  padding:0 var(--page-x) 10px var(--page-x);
  border-bottom:1px solid var(--line);
}

.tool-label{
  display:none;
}

.filter-line,
.search-line{
  min-height:26px;
}

.filter-options{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:20px;
  font-weight:700;
  line-height:1;
}

.filter-options button,
.search-actions button,
.archive-index button{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-align:left;
}

.filter-options button{
  opacity:1;
}

.filter-options button.active{
  text-decoration:underline;
  text-underline-offset:.12em;
}

.search-box{
  display:flex;
  align-items:center;
  gap:0;
  width:100%;
  padding:0 0 3px 0;
  border-bottom:1px solid var(--line);
}

.search-box input{
  width:100%;
  height:24px;
  border:0;
  outline:0;
  background:transparent;
  padding:0;
  font-size:20px;
  font-weight:600;
}

.search-box input::placeholder{
  color:#000;
  opacity:0.15;
}

.search-actions{
  display:flex;
  gap:10px;
  font-size:14px;
  font-weight:700;
}

.result-box{
  padding-top:0;
  text-align:right;
  font-size:14px;
  white-space:nowrap;
  color:#000;
}

.archive-index,
.archive-row{
  display:grid;
  grid-template-columns:minmax(380px,2.4fr) minmax(170px,.95fr) minmax(135px,.8fr) minmax(110px,.7fr);
  gap:18px;
  align-items:start;
  width:100%;
}

.archive-index{
  padding:7px var(--page-x) 8px var(--page-x);
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
}

.archive-list{
  margin:0;
  padding:0;
  list-style:none;
}

.archive-row{
  padding:6px var(--page-x) 7px var(--page-x);
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.08;
}

.archive-row a{
  display:contents;
  color:inherit;
}

.archive-row .title{
  font-weight:600;
  letter-spacing:-.01em;
}

.archive-row .date{
  text-align:left;
}

.archive-row.hidden{
  display:none;
}

.archive-index .sort-arrows{
  display:inline-flex;
  gap:0;
  letter-spacing:-0.28em;
  margin-left:0.08em;
  line-height:1;
  vertical-align:baseline;
}

.archive-index .sort-arrows span{
  display:inline-block;
}

.archive-index button.is-asc .sort-arrows,
.archive-index button.is-desc .sort-arrows{
  font-weight:700;
}

.back-link{
  display:block;
  width:100%;
  max-width:calc(760px + (var(--page-x) * 2));
  margin:0 auto 16px auto;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
  font-size:14px;
  font-weight:700;
}

.back-link,
.back-link:visited,
.back-link:hover,
.back-link:active{
  color:var(--fg);
  text-decoration:none;
}

.detail-head{
  width:100%;
  max-width:calc(760px + (var(--page-x) * 2));
  margin:0 auto 14px auto;
  padding:0 var(--page-x) 12px var(--page-x);
  border-bottom:1px solid var(--line);
}

.detail-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:10px;
  font-size:13px;
  font-weight:700;
  color:#000;
}

.detail-title{
  margin:0;
  max-width:22ch;
  font-size:52px;
  line-height:1;
  letter-spacing:-.045em;
  margin-bottom:1px;
  font-weight:900;
}

.detail-body{
  max-width:760px;
  margin:0 auto;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
  font-family:'Noto Serif KR', Georgia, serif;
  font-size:20px;
  line-height:1.72;
  color:#000;
}

.detail-body p{
  margin:0 0 1.05em 0;
  text-indent:var(--indent);
}

.no-indent{
  text-indent:0 !important;
}

.detail-body pre{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  background:#f4f4f4;
  border-radius:4px;
  padding:.7em 1em;
  overflow-x:auto;
  font-size:.88em;
  line-height:1.6;
}

.detail-body pre code{
  background:none;
  padding:0;
}

.detail-body :not(pre) > code{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  background:#f4f4f4;
  border-radius:3px;
  padding:.1em .35em;
  font-size:.88em;
}

.detail-body blockquote{
  font-family:'Noto Sans KR', Arial, sans-serif;
  margin:0 var(--indent);
  text-indent:0;
}

.detail-body blockquote p{
  text-indent:0;
}

.detail-floating-title{
  position:fixed;
  z-index:65;
  top:var(--menu-h);
  left:0;
  right:0;
  padding:8px var(--page-x) 9px var(--page-x);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}

.detail-floating-title.is-visible{
  opacity:1;
  transform:translateY(0);
}

.links-page h1{
  margin:0 0 18px 0;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
  font-size:var(--head);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.055em;
}

.links-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:calc(100% - (var(--page-x) * 2));
  max-width:420px;
  margin:0 auto;
  padding:0;
  border:0;
}

.links-grid a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100%;
  min-height:56px;
  padding:0 16px !important;
  margin:0;
  box-sizing:border-box;
  border:1px solid var(--line);
  background:#fff;
  color:#000;
  text-decoration:none;
  position:relative;
}

.links-grid a .label{
  display:block;
  width:100%;
  text-align:center;
  font-size:18px;
  font-weight:600;
  line-height:1.2;
}

.links-grid a .meta{
  display:none !important;
}

.links-grid a::after{
  content:none !important;
}

@media (max-width:980px){
  :root{
    --head:72px;
  }

  .archive-tools{
    grid-template-columns:1fr;
    gap:12px;
  }

  .result-box{
    text-align:left;
  }

  .archive-index{
    display:none;
  }

  .archive-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"title date" "series type";
    gap:4px 12px;
    padding:7px var(--page-x) 8px var(--page-x);
  }

  .archive-row .title{
    grid-area:title;
  }

  .archive-row .date{
    grid-area:date;
    text-align:left;
  }

  .archive-row .series{
    grid-area:series;
  }

  .archive-row .type{
    grid-area:type;
  }

  .cv-row{
    grid-template-columns:1fr;
    gap:6px;
  }
}

@media (max-width:640px){
  :root{
    --page-x:14px;
    --head:54px;
    --menu-size:14px;
    --menu-h:42px;
    --safe-top:env(safe-area-inset-top);
  }

  .site-header{
    height:calc(var(--safe-top) + var(--menu-h));
    background:#ffffff;
    box-shadow:0 1px 0 #ffffff;
  }

  .site-title,
  .menu-toggle,
  .lang-list{
    top:var(--safe-top);
    height:var(--menu-h);
  }

  .site-title{
    padding-left:var(--page-x);
    padding-right:12px;
    font-size:14px;
  }

  .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .lang-list{
    padding-right:var(--page-x);
    font-size:12px;
  }

  .menu-list{
    position:fixed;
    z-index:72;
    top:calc(var(--safe-top) + var(--menu-h) + 18px);
    left:50%;
    right:auto;
    height:auto;
    min-width:0;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:18px;
    padding:0;
    margin:0;
    transform:translateX(-50%) translateY(-8px);
    opacity:0;
    pointer-events:none;
    background:transparent;
    border:0;
  }

  .menu-list li{
    list-style:none;
  }

  .menu-list a{
    padding:0;
    border-bottom:0;
    font-size:18px;
    line-height:1;
  }

  .site-shell.menu-open .menu-list{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity .2s ease, transform .2s ease;
  }

  .menu-overlay{
    display:block;
    position:fixed;
    z-index:71;
    inset:calc(var(--safe-top) + var(--menu-h)) 0 0 0;
    background:rgba(255,255,255,.92);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  .site-shell.menu-open .menu-overlay{
    opacity:1;
    pointer-events:auto;
  }

  .page{
    padding-top:calc(60px + var(--safe-top));
  }

  .page-home{
    padding-top:calc(84px + var(--safe-top));
  }

  .archive-page,
  .detail-page,
  .links-page{
    padding-top:calc(60px + var(--safe-top));
  }

  .home-name{
    font-size:34px;
  }

  .detail-title{
    font-size:34px;
  }

  .cv-value{
    font-size:15px;
    line-height:1.45;
  }

  .cv-value.serif,
  .home-intro,
  .home-after-text,
  .detail-body{
    font-size:17px;
    line-height:1.68;
  }

  .filter-options{
    gap:10px;
    font-size:18px;
  }

  .search-box input{
    font-size:18px;
  }

  .links-grid{
    gap:10px;
  }

  .links-grid a{
    min-height:52px;
  }

  .links-grid a .label{
    font-size:16px;
  }

  .detail-floating-title{
    top:calc(var(--safe-top) + var(--menu-h));
    padding-top:7px;
    padding-bottom:8px;
    font-size:12px;
  }
}

/* markdown figures + math */
.md-figure{
  display:block;
  width:100%;
  margin:28px auto;
}

.md-figure img,
.md-figure video{
  display:block;
  width:100%;
  max-width:760px;
  height:auto;
}

.md-figure .md-embed{
  margin:0;
}

.md-figure figcaption{
  max-width:760px;
  margin-top:8px;
  font-size:14px;
  line-height:1.45;
  text-indent:0;
}

.detail-body mjx-container,
.home-after-text mjx-container{
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
}

/* 1. 각주 버튼 [1] (회색 배경 투명하게, 위첨자로) */
.littlefoot__button {
  background-color: transparent !important; /* 회색 배경 강제 투명화 */
  background: none !important;
  border: none !important;
  color: #000000 !important;
  padding: 0 !important;
  margin: 0 1px !important;
  font-size: 0.75em !important;
  vertical-align: super !important;
  border-radius: 0 !important;
  box-shadow: none !important; /* 버튼 테두리/그림자 제거 */
  height: auto !important;
  width: auto !important;
}

.littlefoot__button:hover {
  opacity: 0.5 !important;
}

/* 2. 팝업 박스 본체 (쓰레기 잔상 제거 및 위쪽 강제 고정) */
.littlefoot__popover {
  background: transparent !important; 
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important; 

  /* 쓰레기 잔상의 원인인 0.1배 축소 렌더링 속성 완전히 무효화 */
  transition: none !important;
  transform: none !important;

  margin: 0 0 5px 0 !important; /* 버튼과 팝업 사이의 상하 여백 */
  z-index: 9999 !important;
}

/* 모든 내부 요소의 간섭 애니메이션 제거 */
.littlefoot__popover.is-active,
.littlefoot__wrapper,
.littlefoot__content {
  transition: none !important;
  transform: none !important;
}

.littlefoot__wrapper {
  background-color: #ffffff !important; 
  background: #ffffff !important;
  border: 1px solid #111111 !important; 
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* 3. 팝업 내부 텍스트 영역 */
.littlefoot__content {
  background-color: #ffffff !important; 
  background: #ffffff !important;
  color: #000000 !important;
  /* padding: 위 오른쪽 아래 왼쪽 순서입니다. (아래쪽 여백을 12px에서 4px로 대폭 축소) */
  padding: 12px 16px 12px 16px !important; 
  
  font-size: 15px !important;
  line-height: 1.68 !important;
  max-height: min(15rem, 50vh) !important;
  overflow-y: auto !important;
  font-family: 'Noto Serif KR', Georgia, serif !important;
}

.littlefoot__content p:last-child {
  margin-bottom: 0 !important;
}

/* 4. 말풍선 꼬리표 요소 완전 삭제 */
.littlefoot__tooltip,
.littlefoot__arrow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* (선택) 리눅스/윈도우에서 우측 스크롤바가 투박하게 튀어나오는 것을 방지 */
.littlefoot__content::-webkit-scrollbar {
  width: 6px;
}
.littlefoot__content::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 3px;
}

/* 5. 화면 맨 아래의 본래 각주 영역 복구 */
.footnotes {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 60px !important;
  border-top: 1px solid var(--line) !important;
  padding-top: 20px !important;
}

/* ★ 추가: Littlefoot이 개별적으로 숨겨버린 내부 리스트 요소들까지 완벽하게 숨김 해제 */
.footnotes ol,
.footnotes li,
.footnotes p {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 내부 리스트 간격 및 디자인 */
.footnotes ol {
  display: block !important;
  padding-left: 20px !important;
}

.footnotes li {
  display: list-item !important; /* 1, 2, 3... 숫자 목록 형태 유지 */
  margin-bottom: 12px !important;
}

/* 각주 내부 문단(p)을 한 줄로 자연스럽게 연결 */
.footnotes p {
  display: inline !important;
}

/* 각주 내 긴 URL 강제 줄바꿈 */
.footnotes a {
  word-break: break-all;
}

/* 6. 되돌아오기 화살표(?)의 도착점 좌표 복구 */
sup[id^="fnref:"] {
  display: inline-block !important; /* 브라우저가 위치를 찾을 수 있게 강제 노출 */
  width: 0 !important;              /* 공간을 차지하지 않도록 크기를 0으로 */
  height: 0 !important;
  overflow: hidden !important;
  vertical-align: baseline !important;
  scroll-margin-top: 40vh !important;
}

sup[id^="fnref:"] > a.footnote {
  display: none !important; /* 안에 들어있는 기존 중복 숫자는 완벽히 숨김 */
}