@import url("header.css?v=20261005d");
html { scroll-padding-top: 80px; }

:root{
  --sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Noto Serif KR",Georgia,serif;
  --paper:#f6f4ee; --paper-alt:#eee9dd; --ink:#2f3a33; --ink-soft:#5b6159;
  --accent:#4f6c57; --accent-soft:#9db9a3; --line:#dcd6c4; --max-w:720px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);line-height:1.85;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.brand,.chapter-title{font-family:var(--serif);font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.site-header{border-bottom:1px solid var(--line);background:var(--paper-alt);text-align:center;}
.site-header-inner{max-width:var(--max-w);margin:0 auto;padding:48px 20px 36px;}
.brand{font-size:1.9rem;margin:0 0 10px;}
.brand a{color:var(--ink)}
.subtitle{color:var(--ink-soft);margin:0 0 6px;font-size:1rem;}
.tagline{color:var(--accent);font-size:0.95rem;margin:16px 0 0;font-style:italic;}
main{max-width:var(--max-w);margin:0 auto;padding:40px 20px 90px;}
.part-block{margin-bottom:44px;}
.part-title{font-size:1.15rem;color:var(--accent);border-bottom:2px solid var(--accent-soft);padding-bottom:8px;margin-bottom:14px;}
.chapter-list{list-style:none;margin:0;padding:0;}
.chapter-list li{padding:10px 0;border-bottom:1px dashed var(--line);}
.chapter-list li a{color:var(--ink);font-size:1.02rem;}
.chapter-list li a:hover{color:var(--accent);}
.chapter-num{color:var(--ink-soft);font-size:0.85rem;margin-right:8px;}
.chapter-header{margin-bottom:30px;text-align:center;}
.chapter-part-label{color:var(--accent);font-size:0.85rem;letter-spacing:0.05em;}
.chapter-title{font-size:1.7rem;margin:10px 0 0;line-height:1.4;}
.chapter-body p{margin:0 0 1.3em;}
.nav-row{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:0.9rem;}
.nav-row a{color:var(--ink-soft);}
.nav-row a:hover{color:var(--accent);}
.back-link{display:inline-block;margin-bottom:24px;font-size:0.9rem;color:var(--ink-soft);}
.back-link:hover{color:var(--accent);}
.site-footer{border-top:1px solid var(--line);background:var(--paper-alt);color:var(--ink-soft);
  font-size:18px;text-align:center;padding:30px 20px;}
.site-footer a{color:var(--ink-soft); display: inline-flex; align-items: center; min-height: 56px; font-size: 18px; padding: 0 10px;} .site-footer a:hover{color:var(--accent);}
@media(max-width:480px){.chapter-title{font-size:1.35rem;}.brand{font-size:1.5rem;}}
.site-nav{display:flex;justify-content:flex-start;align-items:center;gap:12px;flex-wrap:nowrap;overflow-x:auto;margin-top:18px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;}
.site-nav a{font-size:0.92rem;color:var(--ink);text-decoration:none;font-weight:500;}
.site-nav a:hover{color:var(--accent);}
.site-nav .sep{color:var(--line);font-size:0.8rem;}


/* --- 글로벌 상단바 --- */
.global-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 1000;
  justify-content: space-between;
}
.gh-left { flex: 1; display: flex; align-items: center; min-width:0; }
.gh-center { flex: 2; display: flex; justify-content: center; min-width:0; }
.gh-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-width:0; }

.gh-logo { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--ink); text-decoration: none !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* .gh-app-btn 규격은 header.css 에서만 정의 */
.site-header-inner { display: none; } /* Hide old header inner */

@media(max-width: 1023px) {
  .global-header { display: flex !important; }
  /* .site-header-inner { display: block; padding-top:20px; } removed to use .mhead */
}
\n/* --- 검색창 --- */
.ns-search-wrap { display:flex; flex:1; max-width:640px; margin:0 auto; position:relative; z-index:100; }
.ns-search-box { display:flex; align-items:center; background:#e8edee; border-radius:999px; padding:4px; width:100%; border:1.5px solid transparent; transition:border-color 0.2s; }
.ns-search-box.focused { border-color:#5b7a63; background:#fff; }
.ns-search-scope { appearance:none; background:#fff; border:none; border-radius:999px; padding:6px 22px 6px 12px; font-size:0.85rem; font-weight:700; color:#2f3a33; cursor:pointer; outline:none; background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232f3a33%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:right 6px center; flex-shrink:0; }
.ns-search-input { flex:1; background:transparent; border:none; outline:none; padding:0 12px; font-size:0.95rem; color:#191c1e; min-width:0; }
.ns-search-input::placeholder { color:#8a9299; }
.ns-search-btn { background:transparent; border:none; display:grid; place-items:center; padding:8px; color:#5b7a63; cursor:pointer; }
.ns-search-results { position:absolute; top:100%; left:0; right:0; margin-top:8px; background:#fff; border:1px solid #dcd6c4; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,0.1); max-height:400px; overflow-y:auto; display:none; flex-direction:column; text-align:left; }
.ns-search-results.show { display:flex; }
.ns-res-item { display:block; padding:12px 16px; border-bottom:1px solid #eee; color:#191c1e; text-decoration:none!important; cursor:pointer; }
.ns-res-item:last-child { border-bottom:none; }
.ns-res-item:hover, .ns-res-item.active { background:#f6f8f6; }
.ns-res-item b { display:block; font-size:0.95rem; margin-bottom:4px; font-weight:700; color:#191c1e; }
.ns-res-item .tag { display:inline-block; font-size:0.7rem; background:#e3f4ea; color:#16623a; padding:2px 6px; border-radius:4px; margin-right:6px; vertical-align:middle; font-weight:700; }
.ns-res-item p { font-size:0.8rem; color:#5a6269; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ns-res-empty { padding:24px; text-align:center; color:#8a9299; font-size:0.9rem; }
.ns-search-mbtn { display:none; background:transparent; border:none; color:#191c1e; padding:8px; cursor:pointer; }
@media(max-width:1023px){
  .ns-search-wrap { display:none; position:absolute; top:100%; left:10px; right:10px; width:auto; max-width:none; margin-top:0; border:1px solid #line; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,0.1); }
  .ns-search-wrap.show-m { display:flex; }
  .ns-search-mbtn { display:grid; place-items:center; }
  .ns-search-results { max-height:300px; }
}



/* PC */
@media (min-width: 1024px) {
  .site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 64px;
    padding: 0 24px;
    /* shell.js pages have body padding-left: 240px, so we counteract it */
    
    width: 100%;
    margin-top: 60px;
  }
  .foot-left { display: flex; gap: 24px; color: #8C9993; font-size: 0.875rem; }
  .foot-left a:hover { font-weight: 700; color: #5A6269; }
  .foot-center { font-size: 0.75rem; color: #8C9993; text-align: center; }
  .foot-right { display: flex; gap: 12px; justify-content: flex-end; }
  .foot-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 8px;
    padding: 4px 10px; font-size: 0.75rem; color: var(--ink);
    background: transparent;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    gap: 12px;
    margin-top: 40px;
  }
  .m-only { display: inline; }
  .foot-right { display: none !important; }
  .foot-left { 
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; 
    color: #8C9993; font-size: 0.875rem; 
  }
  .foot-left a { white-space: nowrap; }
  .foot-center { font-size: 0.75rem; color: #8C9993; text-align: center; line-height: 1.4; }
}

@media (min-width: 1024px) {
  body:not(.is-info) .site-footer {
    
    
  }
}

/* PC */
@media (min-width: 1024px) {
  body:not(.is-info) .site-footer {
    
    
  }
  .site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 64px;
    padding: 0 24px;
    margin-top: 60px;
  }
  .foot-left { display: flex; gap: 24px; color: #8C9993; font-size: 0.875rem; }
  .foot-left a:hover { font-weight: 700; color: #5A6269; }
  .foot-center { font-size: 0.75rem; color: #8C9993; text-align: center; white-space: nowrap; }
  .foot-right { display: flex; gap: 12px; justify-content: flex-end; }
  .foot-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #DDE5DF; border-radius: 8px;
    padding: 4px 10px; font-size: 0.75rem; color: #191C1E;
    background: transparent;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px 88px;
    gap: 12px;
    margin-top: 40px;
  }
  .m-only { display: inline-flex; }
  .foot-right { display: none !important; }
  .foot-left { 
    display: flex; gap: 10px; justify-content: center; 
    color: #8C9993; font-size: 0.8125rem; 
    white-space: nowrap;
  }
  .foot-left a { white-space: nowrap; align-items: center; }
  .foot-left a:not(:last-child)::after {
    content: "·"; margin-left: 10px; color: #ccc; pointer-events: none; font-weight: 300;
  }
  /* For very narrow screens */
  @media (max-width: 350px) {
    .foot-left { flex-wrap: wrap; row-gap: 6px; }
    .foot-left a:not(:last-child)::after { display: none; }
  }
  .foot-center { font-size: 0.6875rem; color: #8C9993; text-align: center; line-height: 1.4; white-space: normal; }
}

/* PC */
@media (min-width: 1024px) {
  body:not(.is-info) .site-footer {
    
    
  }
}

/* Mobile */
@media (max-width: 1023px) {
  .site-footer {
    padding-bottom: 0px !important; /* 탭바 높이 고려 */
  }
}

/* PC */
@media (min-width: 769px) {
  body:not(.is-info) .site-footer {
    
    
  }
  .sf-row2 span:not(:first-child)::before {
    content: "|"; margin: 0 8px !important; color: #DDE5DF; display: inline-block !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .site-footer { padding-bottom: 0px !important; }
  .sf-row2 { flex-direction: column; gap: 4px !important; }
}

/* PC */
@media (min-width: 769px) {
  body:not(.is-info) {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
  }
  body:not(.is-info) .site-footer {
    margin-top: auto !important;
  }
  .sf-row2 span:not(:first-child)::before {
    content: "|"; margin: 0 8px !important; color: #DDE5DF; display: inline-block !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .site-footer { padding-bottom: 0px !important; }
  .sf-row2 { flex-direction: column; gap: 4px !important; }
}

/* PC */
@media (min-width: 769px) {
  body:not(.is-info) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
  }
  body:not(.is-info) .site-footer {
    margin-top: auto !important;
    margin-left: 240px !important;
    width: calc(100% - 240px) !important;
    box-sizing: border-box !important;
    left: auto !important;
    position: static !important;
    z-index: auto !important;
  }
  .sf-row2 span:not(:first-child)::before {
    content: "|"; margin: 0 8px !important; color: #DDE5DF; display: inline-block !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  body:not(.is-info) {
    padding-bottom: 0 !important; /* shell.js 의 72px 를 무효화 */
  }
  body:not(.is-info) .site-footer {
    padding-bottom: 0px !important; /* 푸터가 직접 72px 여백을 가짐 */
  }
  .sf-row2 { flex-direction: column; gap: 4px !important; }
}

/* PC */
@media (min-width: 769px) {
  body:not(.is-info) .site-footer {
    margin-left: 0 !important;
    width: auto !important;
    left: auto !important;
    position: static !important;
    z-index: auto !important;
  }
  .sf-row2 span:not(:first-child)::before {
    content: "|"; margin: 0 8px !important; color: #DDE5DF; display: inline-block !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  body:not(.is-info) {
    padding-bottom: 0 !important; /* shell.js 의 72px 를 무효화 */
  }
  body:not(.is-info) .site-footer {
    padding-bottom: 0px !important; /* 푸터가 직접 72px 여백을 가짐 */
  }
  .sf-row2 { flex-direction: column; gap: 4px !important; }
}

/* 공통 푸터 */
body:not(.is-info) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}
body:not(.is-info) > *:not(.site-footer):not(.site-header):not(#nsSide):not(#nsBnav):not(#nsMore):not(script):not(style):not(link) {
  align-self: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body:not(.is-info) .site-footer {
  margin-top: auto !important;
}

.site-footer {
  background: #fff !important;
  border-top: 1px solid #E9EEEA !important;
  text-align: center !important;
  padding: 24px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.site-footer a, .site-footer span {
  font-weight: 400 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  line-height: 1.5 !important;
}
.site-footer a { color: inherit !important; text-decoration: none !important; outline: none; }
.site-footer a:focus-visible { outline: 2px solid var(--pri) !important; outline-offset: 2px !important; }

.sf-row1 {
  display: flex; justify-content: center; gap: 20px;
  font-size: 14px !important; color: #444 !important; flex-wrap: wrap;
}
.sf-row1 a { font-size: 14px !important; color: #444 !important; }

.sf-row2 {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  font-size: 13px !important; color: #777 !important;
}
.sf-row2 span { font-size: 13px !important; color: #777 !important; }
.sf-row2 a { font-size: 13px !important; color: #777 !important; display: inline !important; }

.sf-row3 {
  font-size: 13px !important; color: #999 !important; margin-top: 4px !important;
}

/* PC */
@media (min-width: 769px) {
  body:not(.is-info) .site-footer {
    margin-left: 0 !important;
    width: auto !important;
    left: auto !important;
    position: static !important;
    z-index: auto !important;
  }
  .sf-row2 span:not(:first-child)::before {
    content: "|"; margin: 0 8px !important; color: #DDE5DF; display: inline-block !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  body:not(.is-info) {
    padding-bottom: 0 !important; /* shell.js 의 72px 를 무효화 */
  }
  body:not(.is-info) .site-footer {
    padding-bottom: 0px !important; /* 푸터가 직접 72px 여백을 가짐 */
  }
  .sf-row2 { flex-direction: column; gap: 4px !important; }
}


.gh-menu-btn { display: none; }
@media (max-width: 1023px) {
  .gh-menu-btn { display: flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; padding: 0; cursor: pointer; color: var(--ink); margin-right: 8px; }
}

@media (max-width: 600px){
  .global-header{padding:0 12px; gap:8px}
  .global-header .gh-center{flex:0 0 auto}
  .global-header .gh-left{flex:1 1 auto; min-width:0; gap:4px}
  .global-header .gh-right{flex:0 0 auto}
  .global-header .gh-logo{min-width:0; font-size:15px; letter-spacing:-0.02em}
  .global-header .gh-menu-btn{width:40px; height:40px}
}
@media (max-width: 380px){
  .global-header .gh-logo{font-size:14px}
}
@media (max-width: 430px){
  .global-header{padding:0 8px}
  .global-header .gh-right{gap:4px}
  .global-header .gh-menu-btn{width:34px; height:34px}
  .global-header .gh-logo{letter-spacing:-0.04em; font-size:14px}
}


/* --- 상단 고정 헤더 가림 방지 (수정 1) --- */
:root {
  --gh-h: 64px;
}
body.is-info .page, body.is-info .main, body.is-info #view {
  padding-top: calc(var(--gh-h) + 12px) !important;
}
body:has(.global-header) main {
  padding-top: calc(var(--gh-h) + 12px) !important;
}
body:has(.global-header) .site-header + div {
  margin-top: calc(var(--gh-h) + 12px) !important;
}

/* --- 넓은 화면 헤더 제목 잘림 방지 (수정 2) --- */
@media (min-width: 601px){
  .global-header .gh-left { flex:1 1 auto; min-width:0; }
  .global-header .gh-center { flex:0 1 auto; }
  .global-header .gh-right { flex:0 0 auto; }
}