/* ============================================================
   매뉴얼 래퍼 (manual_blastrfa.html / manual_imagerfa.html 공용)

   매뉴얼 본문은 자체 CSS를 가진 독립 문서라 iframe으로 격리해 싣는다.
   사이트 CSS와 섞으면 문서 레이아웃이 깨지고, 매뉴얼을 다시 뽑았을 때
   수정분이 날아간다. 갱신은 manuals/ 안의 파일만 교체하면 된다.

   다만 iframe이 자기 높이 안에서 스크롤하면 브라우저 스크롤과 두 개가 된다.
   그래서 iframe 높이를 문서 내용 높이만큼 늘려 안쪽 스크롤을 없애고(manual_frame.js),
   원본 문서의 사이드바 목차는 숨긴 뒤 여기 이 목차로 대체한다.
   목차가 부모 문서에 있어야 진짜 뷰포트 기준으로 sticky가 걸린다
   (iframe 안에서는 바깥 뷰포트를 기준으로 붙일 방법이 없다).
   ============================================================ */

.mn-layout {
    max-width: 1350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    align-items: start;
}

/* ---------- 목차 ---------- */
.mn-toc {
    position: sticky;
    top: 75px;                          /* 헤더(74px + 경계선 1px) 아래 */
    max-height: calc(100vh - 75px);
    display: flex;
    flex-direction: column;
    padding: 24px 20px 20px;
    border-right: 1px solid var(--tk-line);
    background: var(--tk-surface);
    overflow: hidden;
}

.mn-toc-toggle { display: none; }

.mn-toc-body {
    display: flex;
    flex-direction: column;
    min-height: 0;                      /* 자식 overflow가 먹도록 */
    gap: 14px;
}

.mn-toc-head strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--tk-text);
}
.mn-toc-head span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--tk-muted);
}

.mn-search {
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--tk-text);
    background: var(--tk-surface-2);
    border: 1px solid var(--tk-line);
    border-radius: 9px;
    outline: none;
    transition: border-color .18s;
}
.mn-search:focus { border-color: var(--tk-accent); }
.mn-search::placeholder { color: var(--tk-muted); }

/* 목차 목록만 넘칠 때 스크롤 — 문서 본문은 브라우저 스크롤 하나로 본다 */
.mn-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -8px;
    padding: 0 8px;
}
.mn-nav::-webkit-scrollbar { width: 8px; }
.mn-nav::-webkit-scrollbar-thumb { background: var(--tk-line); border-radius: 99px; }
.mn-nav::-webkit-scrollbar-thumb:hover { background: #cfd5e0; }

/* 원본 매뉴얼의 목차 마크업을 그대로 복제해 오므로 클래스 이름을 따른다 */
.mn-nav .nav-group + .nav-group { margin-top: 2px; }
.mn-nav .nav-group[hidden] { display: none; }

.mn-nav .nav-sec {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    text-align: left;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--tk-text);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .16s;
}
.mn-nav .nav-sec:hover { background: var(--tk-surface-2); }
.mn-nav .nav-sec .txt { flex: 1; }
.mn-nav .nav-sec .chev {
    flex: none;
    font-size: 11px;
    color: var(--tk-muted);
    transition: transform .18s;
}
.mn-nav .nav-group.open .nav-sec .chev { transform: rotate(90deg); }

.mn-nav .nav-sub {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}
.mn-nav .nav-group.open .nav-sub { display: block; }
.mn-nav .nav-sub li[hidden] { display: none; }

.mn-nav .nav-sub a {
    display: block;
    padding: 6px 10px 6px 22px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tk-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 7px 7px 0;
    transition: color .16s, background-color .16s, border-color .16s;
}
.mn-nav .nav-sub a:hover { color: var(--tk-text); background: var(--tk-surface-2); }
.mn-nav .nav-sub a.active {
    color: var(--tk-accent-d);
    font-weight: 700;
    border-left-color: var(--tk-accent);
    background: var(--tk-accent-pale);
}

.mn-pdf {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--tk-ink);
    border-radius: 9px;
    text-decoration: none;
    transition: opacity .18s;
}
.mn-pdf:hover { opacity: .88; }
.mn-pdf svg { width: 15px; height: 15px; }

/* ---------- 문서 ---------- */
/* 높이는 manual_frame.js가 내용에 맞춰 잡는다.
   스크립트가 못 돌았을 때를 대비해 기본값을 한 화면으로 둔다. */
.mn-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 75px);
    border: 0;
}

/* ---------- 좁은 화면: 목차를 접이식 바로 ---------- */
@media (max-width: 1024px) {
    .mn-layout { grid-template-columns: minmax(0, 1fr); }

    .mn-toc {
        top: 75px;
        max-height: none;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--tk-line);
        z-index: 5;
    }

    .mn-toc-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 20px;
        font-family: inherit;
        font-size: 14.5px;
        font-weight: 700;
        color: var(--tk-text);
        background: var(--tk-surface);
        border: 0;
        cursor: pointer;
    }
    .mn-toc-toggle svg { width: 18px; height: 18px; transition: transform .2s; }
    .mn-toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

    .mn-toc-body {
        display: none;
        padding: 0 20px 18px;
        max-height: min(60vh, 460px);
    }
    .mn-toc.open .mn-toc-body { display: flex; }
    .mn-toc-head { display: none; }
}

@media (max-width: 768px) {
    .mn-toc { top: 65px; }
    .mn-frame { height: calc(100vh - 65px); }
}