/* 올바른 분석노트 — 이 화면에서만 쓰는 규칙.
   전역 CSS 라서 접두어 .nn- 를 반드시 붙인다(AGENTS.md). */

.nn-wrap{margin-top:14px}
.nn-frame{display:block;width:100%;height:calc(100vh - 188px);min-height:660px;
  border:1px solid var(--line,#e2e8f0);border-radius:14px;background:#fff}
.nn-hint{margin:10px 2px 0;font-size:13px;color:#64748b;line-height:1.6}
.nn-out{color:#2563eb;font-weight:700;text-decoration:underline}

/* 분석노트는 문서를 실제로 편집하는 스튜디오다. 진입하면 좌측 메뉴를 접고,
   공통 상단 바 아래의 화면 전체를 조판 도구에 양보한다. */
.nn-sidebar-toggle{display:none;position:fixed;top:78px;left:0;z-index:45;
  min-width:46px;min-height:128px;padding:12px 10px;border:1px solid #2563eb;border-left:0;
  border-radius:0 12px 12px 0;background:#2563eb;color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.24);
  align-items:center;justify-content:center;gap:7px;cursor:pointer;writing-mode:vertical-rl;
  font-family:Pretendard,"Noto Sans KR",sans-serif;font-size:12px;font-weight:800;letter-spacing:.04em;
  transition:left .2s ease,background .16s ease,border-color .16s ease,color .16s ease}
.nn-sidebar-toggle:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff;transform:none}
.nn-sidebar-toggle svg{width:17px;height:17px;flex:0 0 auto}
.nn-sidebar-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

@media (min-width:641px){
  .app-shell.nn-studio-mode{width:100%;max-width:none;height:100dvh;min-height:0;margin:0}
  .app-shell.nn-studio-mode .topbar{display:none}
  .app-shell.nn-studio-mode .sidebar{width:0;flex-basis:0;padding:0;border-right-color:transparent;
    height:100%;min-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:width .2s ease,flex-basis .2s ease,padding .2s ease,opacity .16s ease,border-color .2s ease}
  .app-shell.nn-studio-mode.nn-sidebar-open .sidebar{width:232px;flex-basis:232px;padding:18px 14px;
    border-right-color:#E4EAF3;overflow-x:hidden;overflow-y:auto;opacity:1;pointer-events:auto}
  /* 메뉴를 펼치면 일반 게시판과 같은 계정 상단바를 함께 보여 준다.
     편집지는 남는 높이를 flex로 받아 하단이 밀리거나 잘리지 않게 한다. */
  .app-shell.nn-studio-mode.nn-sidebar-open .topbar{display:flex;flex:0 0 auto}
  .app-shell.nn-studio-mode.nn-sidebar-open .app-body{height:auto}
  .app-shell.nn-studio-mode.nn-sidebar-open .app-body .container{height:auto;display:flex;flex:1 1 auto;flex-direction:column}
  .app-shell.nn-studio-mode.nn-sidebar-open #view-note-new{height:auto;display:flex;flex:1 1 auto;flex-direction:column}
  .app-shell.nn-studio-mode.nn-sidebar-open #view-note-new .nn-wrap{height:auto;display:flex;flex:1 1 auto;flex-direction:column}
  .app-shell.nn-studio-mode.nn-sidebar-open #view-note-new .nn-frame{height:100%;flex:1 1 auto}
  .app-shell.nn-studio-mode.nn-sidebar-open .nn-sidebar-toggle{left:232px}
  .app-shell.nn-studio-mode .nn-sidebar-toggle{display:inline-flex}
  .app-shell.nn-studio-mode .app-body{flex:1 1 auto;width:auto;height:100%;min-width:0;min-height:0}
  .app-shell.nn-studio-mode .app-body .container{width:100%;max-width:none;height:100%;min-width:0;min-height:0;margin:0;padding:0}
  /* iframe 안쪽에서 다시 100dvh를 잡으면 바깥 스튜디오보다 몇 px 커져
     하단 조작 바가 잘린다. 부모 작업 영역의 실제 높이를 그대로 이어 쓴다. */
  .app-shell.nn-studio-mode #view-note-new{height:100%;min-height:0;overflow:hidden}
  .app-shell.nn-studio-mode #view-note-new .page-head,
  .app-shell.nn-studio-mode #view-note-new .nn-hint{display:none}
  .app-shell.nn-studio-mode #view-note-new .nn-wrap{height:100%;min-height:0;margin:0;overflow:hidden}
  .app-shell.nn-studio-mode #view-note-new .nn-frame{height:100%;min-height:0;border:0;border-radius:0}
}

@media (max-width:900px){
  .nn-frame{height:calc(100vh - 190px);min-height:520px;border-radius:10px}
}
@media (max-width:640px){
  .nn-sidebar-toggle{display:none!important}
  .app-shell.nn-studio-mode .app-body .container{width:100%;max-width:none;height:100%;min-width:0;min-height:0;margin:0;padding:0}
  .app-shell.nn-studio-mode .topbar{display:none}
  .app-shell.nn-studio-mode #view-note-new{height:100%;min-height:0;overflow:hidden}
  .app-shell.nn-studio-mode #view-note-new .page-head,
  .app-shell.nn-studio-mode #view-note-new .nn-hint{display:none}
  .app-shell.nn-studio-mode #view-note-new .nn-wrap{height:100%;min-height:0;margin:0;overflow:hidden}
  .app-shell.nn-studio-mode #view-note-new .nn-frame{height:100%;min-height:0;border:0;border-radius:0}
  .nn-frame{height:calc(100vh - 170px);min-height:460px}
  .nn-hint{font-size:12.5px}
}