/* =========================================================
   Loghood v2 — base stylesheet
   사용자 mockup 4개의 색상·타이포그래피를 통합한 디자인 토큰.
   ========================================================= */

/* Pretendard Variable — 3000 Next.js 와 동일한 한·영 통합 모던 sans.
   self-host (static/fonts/PretendardVariable.woff2). woff2 단일 파일로
   45~920 weight 전 범위 커버. 두 앱이 같은 폰트로 한국어 렌더를 일치시켜
   글자 크기·자간 perceived size 가 어긋나지 않도록. */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  --bg:        #f5f3ef;
  --surface:   #ffffff;
  --surface2:  #f9f8f6;
  --surface3:  #f0ede8;
  --border:    #e2ddd6;
  --border2:   #cec9c1;

  --accent:    #1a56db;
  --accent-h:  #1446be;
  --accent-s:  rgba(26,86,219,.08);

  /* 상단 작업실 복귀 nav 버튼 팔레트 — 옅고 차분한 파랑(보조 내비게이션 톤).
     기존 solid accent(흰 글자 CTA)를 대체한다. Next.js globals.css 와 동일 hex(SoT).
     base: 매우 옅은 파랑 배경 + 중간 농도 테두리 + 짙은 청색 텍스트(대비 확보).
     hover: 한 단계 진한 옅은 파랑. active/current: 옅은 파랑 + 조금 더 진한 테두리·텍스트
     (강한 원색 파랑 미사용). focus ring: 반투명 중간 청색. */
  --lh-ws-nav-bg:            #eff6ff;
  --lh-ws-nav-border:        #c9ddf5;
  --lh-ws-nav-text:          #315f91;
  --lh-ws-nav-bg-hover:      #e2eefc;
  --lh-ws-nav-active-bg:     #d7e7fa;
  --lh-ws-nav-active-border: #9dbde3;
  --lh-ws-nav-active-text:   #244f7d;
  --lh-ws-nav-focus-ring:    rgba(49,95,145,.40);

  --orange:    #d95f2b;
  --green:     #1a7a42;
  --purple:    #6d45c4;
  --red:       #c0392b;

  /* 한국 전통색 — 3000 Next.js (frontend/src/app/globals.css) 의
     --lh-color-seokganju-ink / --lh-color-bisaek-ink 와 동일 hex.
     SoT: docs/frontend/design-system.md. 상단 nav 의 active main label 색에 사용.
     ⚠ 전역 LOGHOOD 워드마크에는 쓰지 않는다 — 아래 --lh-wordmark-* 참조
     (LOGHOOD-WORDMARK-1/2).
     ⚠ 석간주(seokganju)는 LIBRARY/LAB/ROUTINE 서비스 계열 예약색 —
     ARCHIVE/FORUM 의 warning/danger/destructive 에는 사용 금지. */
  /* 제품 워드마크 잉크 — Next `LOGHOOD_NEUTRAL.ink` / `PUBLIC_PRODUCT_COLOR
     .foundation.strongText` 와 같은 값이어야 한다. 두 runtime 이 파일을
     공유하지 못하므로 값 일치는 cross-contract test 가 잠근다
     (PRODUCT-WORDMARK-SOT-2). */
  --lh-product-wordmark-ink:    #34312D;
  --lh-product-wordmark-weight: 500;
  --lh-product-wordmark-tracking: 1.5px;
  --seokganju-ink:       #9a4435;
  --bisaek-ink:          #5e8a78;
  --bisaek-ink-hover:    #4d7565;

  /* 전역 LOGHOOD 워드마크 (HOME-HERO-TYPOGRAPHY-1) — Next 의
     `LOGHOOD_NEUTRAL.wordmarkWash` / `LOGHOOD_NEUTRAL.wordmarkAxis` mirror.
     워드마크는 하나의 단어이고 `H` 는 LOG 와 HOOD 를 가르는 separator 가
     아니라 기록과 공동체를 잇는 중심축이라 축 하나만 색이 다르다.
     예전 값(#6B655E / #34312D)은 명도 차가 작아 헤더 크기에서 축이 보이지
     않았다 — 획을 한 단계 풀고 축을 검정으로 내려 간격을 벌렸다.
     ⚠ axis 는 일반 먹색(#34312D)이 아닌 **워드마크 전용 검정**이다.
     값은 여기 한 곳에만 적는다 — selector 마다 hex 를 반복하면 두 앱이 조용히
     갈라진다. drift 는 apps/common/test_wordmark_contract.py 가 잠근다. */
  --lh-wordmark-wash:    #77716A;
  --lh-wordmark-axis:    #000000;

  /* 훈색(薰色) — ARCHIVE/FORUM 의 warning / danger / destructive 전용 한국
     전통색. 纁: *분홍빛이 도는 붉은색* (rose-red). 옛 주황(#fff7ed/#fed7aa/
     #9a3412) 과 명확히 구분되는 *장미빛 적색* 으로 둔다. warning·danger·
     destructive 는 같은 훈색 token 을 공유. 석간주(seokganju)와 혼동/혼용 금지. */
  --lh-color-hun-bg:               #fbecef;
  --lh-color-hun-border:           #dd9aa6;
  --lh-color-hun-text:             #a82d46;
  --lh-color-warning-hun-bg:       var(--lh-color-hun-bg);
  --lh-color-warning-hun-border:   var(--lh-color-hun-border);
  --lh-color-warning-hun-text:     var(--lh-color-hun-text);
  --lh-color-danger-hun-bg:        var(--lh-color-hun-bg);
  --lh-color-danger-hun-border:    var(--lh-color-hun-border);
  --lh-color-danger-hun-text:      var(--lh-color-hun-text);

  --text:      #1c1916;
  --text2:     #5a5650;
  --text3:     #9c9890;

  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --radius:    8px;

  /* 본 프로그램 UI sans = Pretendard Variable (3000 Next.js 와 동일).
     로드 실패 시 Malgun Gothic → sans-serif 로 자연 fallback.
     본문 명조 = Noto Serif KR (데이터논문/페이퍼 본문). */
  --font-heading: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
  --font-text:    'Noto Serif KR', serif;
  --font-mono:    'DM Mono', 'Menlo', monospace;

  /* ── workspace/editor 4-column shell width 토큰 ──
     3000 React (frontend/src/app/globals.css) 와 동일 값으로 미러링. 두 앱이
     같은 column boundary 를 가지도록 정렬하기 위한 단일 source of truth.

     본 라운드 (본문 표준 폭 최종 확정) 조정:
       · aside-width    200 → 180 (col 1 step nav 축소)
       · rail-width     280 → 260 (col 4 assist rail compact)
       · context-width  220 (유지)
       · main-max-width 1080 (유지)
       → 1600px viewport (lh-aside 180 제외 maincol 1420) 에서
         col 3 main = 1420 - 220 - 260 = 940px 확보. 편집 본문 1040 cap 은
         1920px+ wide viewport 에서 reach 가능, 1600px 에선 자연 축소.        */
  --lh-shell-aside-width:    180px;   /* col 1: lh-aside / 전체 step nav */
  --lh-shell-context-width:  220px;   /* col 2: lh-pe-nav / section context */
  --lh-shell-rail-width:     260px;   /* col 4: lh-pe-side / 우측 보조 카드 */
  --lh-shell-topbar-height:  66px;    /* 2행 workspace topbar 높이 — 좌측 lh-aside-brand 와 동일 */
  --lh-shell-main-max-width: 1080px;  /* col 3 main 본문 wrapper max-width */

  /* ── 본문 표준 폭 토큰 — editor / public 페이지 공유 SoT ──
     Round S5-G-H-R7-N-fix-2-tune: 3 열 main 본문 폭 확장 (4 열 폭 불변).
     R7-N-fix-2 의 internal scroll 모델 안에서 3 열 main 이 좁아 보이는
     원인은 main wrapper / body card 의 이중 cap (1080 / 1040) 이 grid cell
     보다 작아 본문이 중앙 정렬 + 좌우 빈 공간 발생 + scrollbar 가 빈 공간에
     떠서 어색. 토큰값을 1200 으로 확장해 grid cell 을 모두 채우게 한다.
       · editor-main-max-width   1080 → 1200 : col 3 main 외곽 wrapper.
       · editor-body-width       1040 → 1200 : 편집 본문 card 폭. main 과 같음.
       · wide-block-max-width    1120 → 1280 : 표/figure wide-block 확장.
       · public-body-width / public-readable-width 무변경 (공개 화면 읽기 폭).
     4 열 토큰 (--lh-shell-rail-width: 260px) 은 *변경 금지* — R7-N-fix-2-tune
     의 핵심 제약 (4 열은 그대로, 3 열만 확장). */
  --lh-editor-main-max-width:  1200px;
  --lh-editor-body-width:      1200px;
  --lh-public-body-width:       960px;
  --lh-public-readable-width:   960px;
  --lh-wide-block-max-width:   1280px;

  /* 작업실 / 작성기 sticky offset 토큰 — page/body scroll 모델.
     header / workspace subnav / command bar 가 viewport 상단에 누적 sticky 로
     쌓이고, 작성기 1·2·4 열 nav 가 그 아래에 sticky. 컬럼 top 값은
     cumulative offset 토큰 (--lh-editor-fixed-top-offset) 을 그대로 사용 —
     viewport y-position 과 1:1 일치.
       --lh-site-header-height       : 글로벌 .lh-topnav 높이.
       --lh-workspace-subnav-height  : 작업실 .lh-topbar (2차 nav) 높이.
       --lh-editor-command-bar-height: 작성기 command bar 높이.
       --lh-editor-fixed-top-offset  : 세 값의 합 — 작성기 sticky 컬럼의 top. */
  --lh-site-header-height:        40px;
  --lh-workspace-subnav-height:   48px;
  /* Round S5-G-H-R7-N-fix: command bar 실측 높이 정정 (44 → 52). padding
     (10×2 = 20) + 본문 (button/anchor 32~36) = 52~56. 토큰값이 실측보다
     작으면 sticky 2열 SECTIONS 가 command bar 아래로 약 8px 이상 겹쳐
     "스크롤 시 command bar 아래에 section nav 가 끼어 보이는" 시각 버그가
     발생한다. R7-N 까지 안 잡힌 시각 어긋남의 가장 흔한 원인. */
  --lh-editor-command-bar-height: 52px;
  --lh-editor-fixed-top-offset: calc(
    var(--lh-site-header-height)
    + var(--lh-workspace-subnav-height)
    + var(--lh-editor-command-bar-height)
  );

  /* ── 본문 페이지 제목 typography 토큰 ──
     모든 workspace/editor 본문 제목 (편집자 작업실 / 파일 업로드 / FORUM 투고관리
     / 내 정보 / 데이터셋 작성 / 데이터논문 작성 / 데이터논문 투고 등) 에 적용.    */
  --lh-page-title-font-size:    22px;
  --lh-page-title-font-weight:  700;
  --lh-page-title-line-height:  1.35;

  /* ── 사용자 프로필 토큰 ──
     2행 workspace nav 메뉴(.lh-tnm-item 12.5px) 와 균형. 사용자명은 메뉴와
     같은 가독성, 역할명은 보조 텍스트지만 너무 작지 않게.
     3000 React frontend/src/app/globals.css 와 동일 값 — .lh-aside-profile*
     규칙은 두 앱이 같은 token + 같은 class 구조를 공유해 픽셀 단위 정렬. */
  --lh-profile-avatar-size:     32px;
  --lh-profile-name-size:       14px;
  --lh-profile-role-size:       12.5px;
  --lh-profile-line-height:     1.4;
  --lh-profile-text-gap:        3px;
  --lh-profile-avatar-text-gap: 10px;
  --lh-profile-x-padding:       16px;
  --lh-profile-border-width:    1.5px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-heading);  /* 기본은 가독성 높은 고딕 */
  font-size: 14px;
  line-height: 1.7;
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

/* ── Topnav ───────────────────────────────
   3000 Next.js SiteHeader (frontend/src/app/_components/SiteHeader.tsx) 와
   1:1 동일 구조. 외곽 .lh-topnav 는 full-width sticky + bottom border,
   내부 .lh-topnav-inner 가 max-w 1600px 로 중앙정렬. */
.lh-topnav {
  height: 40px;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.lh-topnav-inner {
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex; align-items: center;
  gap: 12px;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .lh-topnav-inner { padding: 0 24px; }
}
.lh-logo {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
  /* Next.js SiteHeader 의 LOGHOOD 로고 inline-flex 와 perceived size 동일화 —
     body 의 1.7 line-height 상속 차단. inline-flex 가 vertical centering 을
     맡으므로 1.5 / 1 둘 다 시각 동일하지만, header 토큰 SoT 일관성 위해 1.5. */
  line-height: 1.5;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
/* 전역 `a:hover { text-decoration: underline }` 가 로고 hover 시 밑줄을 주는
   것을 차단. 로고는 항상 word-mark 그대로 표시. */
.lh-logo:hover { text-decoration: none; }
/* 전역 LOGHOOD 워드마크 (LOGHOOD-WORDMARK-2) — Next 의 `LoghoodWordmark`
   컴포넌트와 **같은 계약**을 Django template/CSS 로 미러링한 것이다. React
   컴포넌트를 여기서 재사용할 수는 없으므로 값이 갈라지지 않도록 test 가 두
   구현을 대조한다.

   예전에는 `.lh-logo-log`(석간주) / `.lh-logo-hood`(비색)로 칠했다. 최상위
   브랜드가 자기 아래 두 제품(The Loghood Routine · The Loghood Review)의 색을
   빌려 쓰던 자리라 로고만 색 위계 밖에 있었다.

   `.lh-logo` 는 링크의 구조 토큰(font-size 22px / inline-flex / height)만 갖고,
   글자의 색·굵기·자간은 `.lh-wordmark*` 가 갖는다 — `.lh-logo` 의
   font-weight 800 · letter-spacing -.3px 를 여기서 덮어쓴다. */
.lh-wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: none;
  color: var(--lh-wordmark-wash);
}
/* `H` 앞뒤에 margin/padding/별도 tracking 을 주지 않는다 — 간격이 생기는
   순간 중심축이 칸막이가 된다. 두 조각은 색만 다르다. */
.lh-wordmark-wash { color: var(--lh-wordmark-wash); }
.lh-wordmark-axis { color: var(--lh-wordmark-axis); }
/* 메가메뉴 컨테이너 — Next.js LoghoodMegaMenu 의 wrapper `ml-2 flex h-full
   items-stretch` 와 동일. gap-0 : 각 link 가 자체 padding 0 12px 으로 간격 확보. */
.lh-nav-links {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;
  margin-left: 8px;
}
/* 좌측 메인 nav 링크 — Next.js MainLabel 과 동일 톤:
   tracking 1.5px, font-weight 600, 본문 ink 색, hover 시 회색으로만 전환 (배경 없음). */
.lh-nav-links .lh-nav-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.lh-nav-links .lh-nav-link:hover {
  background: transparent;
  color: var(--text2);
  text-decoration: none;
}
.lh-nav-links .lh-nav-link.active { color: var(--bisaek-ink); }
/* 제품 워드마크 — `The Loghood Routine` / `The Loghood Review` 는 헤더에 있든
   HERO 에 있든 같은 로고다. Next `productWordmark.ts` 의 공통 계약과 같은 값을
   Django shell 에도 적용한다(형태·색은 제품별로 갈리지 않는다).
   `.lh-nav-links .lh-nav-link` 보다 class 하나가 많아 그 위를 덮는다. */
.lh-product-wordmark,
.lh-nav-links .lh-nav-link.lh-product-wordmark {
  font-weight: var(--lh-product-wordmark-weight);
  letter-spacing: var(--lh-product-wordmark-tracking);
  font-style: normal;
  text-transform: none;
  color: var(--lh-product-wordmark-ink);
}
/* hover 에도 글자색을 회색으로 내리지 않는다 — 로고 잉크는 상태로 흔들리지
   않는다(Next 와 같은 규칙). 피드백은 옅은 밑줄로만 준다. */
.lh-nav-links .lh-nav-link.lh-product-wordmark:hover {
  color: var(--lh-product-wordmark-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in oklab, var(--lh-product-wordmark-ink) 30%, transparent);
}
/* 우측 유틸 링크 (저자 작업실 / 로그아웃 등) — Next.js RIGHT_LINK_CLASS
   `rounded-md px-3 py-1.5 text-[13px] text-[#5a5650] hover:bg-[#f9f8f6]
   hover:text-[#1c1916]` 와 동일 톤. */
.lh-nav-link {
  /* 라벨은 줄바꿈하지 않는다 (LOGHOOD-WORDMARK-2) — 3000 globals.css mirror.
     좁은 화면에서 `회원가입` 이 한 글자씩 쪼개져 헤더 밖으로 밀렸다. */
  white-space: nowrap;
  padding: 6px 12px; border-radius: 6px;
  font-size: 13px; color: var(--text2);
  /* Next.js SiteHeader RIGHT_LINK_CLASS 와 perceived size 동일화 — body 의
     1.7 line-height 상속 차단. 13 × 1.5 = 19.5px → 버튼 높이 31.5px (양쪽 일치). */
  line-height: 1.5;
  text-decoration: none; cursor: pointer;
}
.lh-nav-link:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.lh-nav-link.active { color: var(--accent); font-weight: 600; }
/* 작업실 복귀 링크 — primary CTA (3000 Next.js SiteHeader 의 WorkspaceReturnLink
   inactive 상태와 정합). solid accent (blue) + 흰 텍스트 + uppercase tracking.
   py 6px 로 h-10 mega menu 안에 정렬. 1px 투명 border 를 두어 box-sizing:
   border-box 환경에서 active outlined 상태 (Next.js 측) 와 content 영역이
   동일하게 유지되도록 (perceived size 불일치 방지). 내부 lh-tnm-item.active
   와도 같은 accent 톤을 공유 — 작업실 navigation identity. */
.lh-nav-workspace-return {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  /* 옅고 차분한 파랑(보조 내비게이션) — 옛 solid accent + 흰 글자 CTA 폐기. */
  background: var(--lh-ws-nav-bg); color: var(--lh-ws-nav-text);
  border: 1px solid var(--lh-ws-nav-border);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  /* Next.js WorkspaceReturnLink 와 perceived size 동일화 — body 의 1.7 line-height
     상속을 1.5 로 명시 차단해 버튼 높이를 35.25px → 32.75px 로 맞춘다 (3000 측 동일). */
  line-height: 1.5;
  text-transform: uppercase; letter-spacing: 1px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lh-nav-workspace-return:hover {
  background: var(--lh-ws-nav-bg-hover);
  color: var(--lh-ws-nav-active-text);
  border-color: var(--lh-ws-nav-active-border);
  text-decoration: none;
}
/* 키보드 focus — 명확한 포커스 링(반투명 중간 청색). 마우스 클릭에는 미노출. */
.lh-nav-workspace-return:focus-visible {
  outline: 2px solid var(--lh-ws-nav-focus-ring);
  outline-offset: 1px;
}
/* parent active — 사용자가 본 작업실 영역 (editor 의 경우 /workspace/editor +
   /editor/*) 안에 있을 때 적용. base CTA (solid accent) 와 시각 구분을 위해
   outlined 톤 (흰 배경 + accent border + accent 텍스트). active 상태에서는
   *hover/focus 가 시각 변화 없음* — 사용자에게 "이미 이 영역 안" 임을 알리는
   상태 표시이지 추가 hover affordance 가 필요한 액션이 아니다. href 는 살아
   있어 클릭 시 작업 목록으로 이동 (disabled 처리하지 않음). */
.lh-nav-workspace-return.is-active,
.lh-nav-workspace-return.is-active:hover,
.lh-nav-workspace-return.is-active:focus {
  /* 현재 위치(active) — base 보다 명확히 구분되지만 강한 원색 파랑은 쓰지 않는다.
     옅은 파랑 배경 + 조금 더 진한 테두리·텍스트 + semibold 로 현재 작업실을 표시한다
     (옛 solid accent 흰 글자 CTA 폐기). base 와 같은 옅은 파랑 계열이라 nav 전체가
     페이지 콘텐츠보다 튀지 않는다. */
  background: var(--lh-ws-nav-active-bg);
  color: var(--lh-ws-nav-active-text);
  border-color: var(--lh-ws-nav-active-border);
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  text-decoration: none;
  /* active 상태는 inert 표시 — 옛 cursor:pointer 폐기. base.html 이 <span>     */
  /* 으로 렌더하므로 클릭 자체가 불가하지만 cursor 도 default 로 명시해 시각    */
  /* affordance 까지 차단.                                                       */
  cursor: default;
}
/* Logout — 화면에는 <a class="lh-nav-link lh-logout-anchor"> 텍스트 링크만
   노출. 실제 POST 는 아래 .lh-hidden-logout-form 안의 form 을 JS 가 submit.
   visible <button> 을 두지 않아 브라우저 native button chrome (appearance /
   inset shadow / focus ring / Firefox ::-moz-focus-inner) 이 화면에 노출될
   가능성이 0. 이전 라운드 1a7f47d / 996249d / ea16bad / d9ae56b 의 CSS reset
   접근 (appearance:none / !important / all:unset) 은 운영 브라우저에서 잔여
   chrome 가 남는 case 가 있어 폐기. */
.lh-hidden-logout-form { display: none; }

/* noscript fallback (JS 비활성 환경) — 매우 드문 케이스라 픽셀 단위 일치가
   아닌, 옆 <a> 와 비슷한 텍스트 링크 형태로만 보이게 reset. */
.lh-inline-form { display: inline; margin: 0; padding: 0; }
.lh-inline-form button.lh-nav-link {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; color: var(--text2);
}
/* 우측 영역 = [작업실 그룹] + [계정 그룹] 두 wrapper. 두 그룹 사이 gap 은 그룹
   내부 간격보다 확실히 크고, 옅은 세로 구분선(.lh-nav-group-divider)으로 한 번만
   구분한다(간격+구분선을 과하게 중복 강조하지 않음). */
.lh-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }

/* ── 주 메뉴 disclosure (ARTICLE-TAXONOMY-MOBILE-NAV-1) ────────────────
   좁은 화면에서 헤더가 넘치던 문제(390 overflow 473 / 320 513)와, 인증 시
   작업실 링크가 도달 불가능하던 문제(320 에서 5개 중 2개만 노출)를 함께 푼다.

   토글이 여닫는 대상은 4 pillar **와 우측 영역(작업실·계정·인증)** 둘 다다.
   `<details>` 는 내용이 반드시 자식이어야 하는데, 자식으로 넣으면
   `::details-content` slot 이 실제 상자라서 데스크톱에서 `.lh-nav-right` 의
   `margin-left: auto` 가 먹지 않는다(실측 확인). checkbox 는 **형제**를
   제어하므로 그 제약이 없다 — 두 영역은 예전처럼 `.lh-topnav-inner` 의 직속
   flex 자식으로 남고, 데스크톱은 checked 와 무관하게 항상 보인다.
   순수 CSS 라 JS 가 죽어도 동작한다.

   breakpoint 900px 은 이 stylesheet 가 이미 쓰는 값이고 실측으로 골랐다 —
   inline nav 는 logo 129 + links 549 + nav-right 가 필요해 900 에서 overflow 0,
   860 에서 26 이다(721 로 잡으면 768 이 데스크톱 모드가 되어 118 넘친다). */
.lh-nav-toggle-input {
  /* 화면에서 숨기되 focusable 하게 둔다 — `display:none` 은 키보드 접근을 없앤다. */
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  opacity: 0;
  pointer-events: none;
}
.lh-nav-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  min-width: 44px;      /* 터치 대상 */
  padding: 0 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  border-radius: 6px;
  user-select: none;
}
.lh-nav-menu-toggle:hover { background: #f9f8f6; color: var(--text); }
/* focus ring 은 숨긴 input 대신 label 에 그린다. */
.lh-nav-toggle-input:focus-visible + .lh-nav-menu-toggle {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}
/* 세 줄 아이콘 — 열리면 X 로 바뀌어 상태가 시각적으로 분명하다. */
.lh-nav-menu-toggle-icon { width: 16px; height: 2px; background: currentColor; position: relative; }
.lh-nav-menu-toggle-icon::before,
.lh-nav-menu-toggle-icon::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
}
.lh-nav-menu-toggle-icon::before { top: -5px; }
.lh-nav-menu-toggle-icon::after  { top: 5px; }
.lh-nav-toggle-input:checked + .lh-nav-menu-toggle .lh-nav-menu-toggle-icon { background: transparent; }
.lh-nav-toggle-input:checked + .lh-nav-menu-toggle .lh-nav-menu-toggle-icon::before { top: 0; transform: rotate(45deg); }
.lh-nav-toggle-input:checked + .lh-nav-menu-toggle .lh-nav-menu-toggle-icon::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  /* 메뉴가 열리면 헤더가 세로로 자란다 — 고정 높이를 풀고 wrap 을 켠다.
     fixed dropdown 을 쓰지 않는 이유: 두 영역(pillar·우측)이 별도 상자라
     아래 상자의 top 을 CSS 로 계산할 수 없다. wrap 은 그 계산이 필요 없다. */
  .lh-topnav { height: auto; }
  .lh-topnav-inner { flex-wrap: wrap; height: auto; min-height: 40px; row-gap: 0; }
  .lh-nav-menu-toggle { display: inline-flex; margin-left: auto; }

  /* 닫힘: 두 영역 모두 숨긴다. 열림: 각각 한 줄을 통째로 쓰고 세로로 쌓인다. */
  .lh-nav-links,
  .lh-nav-right { display: none; }
  .lh-nav-toggle-input:checked ~ .lh-nav-links,
  .lh-nav-toggle-input:checked ~ .lh-nav-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    margin: 0;            /* nav-right 의 `margin-left: auto` 무력화 */
    padding: 4px 0;
    gap: 2px;
  }
  .lh-nav-toggle-input:checked ~ .lh-nav-right { border-top: 1px solid var(--border); }
  .lh-nav-toggle-input:checked ~ * .lh-nav-link,
  .lh-nav-toggle-input:checked ~ .lh-nav-links .lh-nav-link,
  .lh-nav-toggle-input:checked ~ .lh-nav-right .lh-nav-link,
  .lh-nav-toggle-input:checked ~ .lh-nav-right .lh-nav-workspace-return,
  .lh-nav-toggle-input:checked ~ .lh-nav-right .lh-btn {
    height: auto;
    min-height: 44px;     /* 터치 대상 */
    white-space: normal;
    border-radius: 6px;
    justify-content: flex-start;
  }
  /* 작업실 그룹이 **가로 스크롤을 쓰지 않는다.** `min-width: 0` + `overflow-x: auto`
     조합이 좁은 화면에서 clientWidth 0 을 만들어(스크롤도 불가) 링크 2~3개를
     도달 불가능하게 했던 원인이다. 여기서는 세로로 전부 펼친다. */
  .lh-nav-toggle-input:checked ~ .lh-nav-right .lh-nav-workspace-group,
  .lh-nav-toggle-input:checked ~ .lh-nav-right .lh-nav-account-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    overflow-x: visible;
    flex-wrap: nowrap;
    gap: 2px;
  }
  /* 세로 배치에서 세로 구분선은 의미가 없다 — 가로 실선으로 바꾼다. */
  .lh-nav-toggle-input:checked ~ .lh-nav-right .lh-nav-group-divider {
    width: 100%; height: 1px; margin: 6px 0; background: var(--border);
  }
}

/* 작업실 링크 묶음 — 모든 작업실 버튼이 하나의 그룹, 일정한 간격(역할 그룹별 세로
   구분선 폐기 → 일관 간격). 좁은 화면에서 축소·가로 스크롤 가능. */
.lh-nav-workspace-group {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.lh-nav-workspace-group::-webkit-scrollbar { display: none; }
/* 계정 묶음 — 계정명(보조 텍스트) · 계정 · 로그아웃. 작업실 버튼과 섞이지 않도록
   별도 wrapper + flex-shrink:0(계정 영역이 찌그러지지 않음). 내부 점 구분자는 유지. */
/* 계정 묶음 — 넓을 때는 줄지 않고, 부족할 때만 줄어들며 그 몫을 계정명에게
   넘긴다(ARTICLE-WRITER-MOBILE-OVERFLOW-HARDENING-1). `flex-shrink:0` 이면 로그인
   사용자명이 붙는 순간 390px 에서 header 밖으로 122.8px 나갔다(Next 에서 실측).
   Next globals.css 의 동명 선택자와 미러다 — 한쪽만 고치면 8000 에서만 밀린다. */
.lh-nav-account-group { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
/* 줄어드는 몫은 계정명만 받는다 — `계정`·`로그아웃`은 줄이면 글자가 깨진다. */
.lh-nav-account-group > :not(.lh-nav-account-name) { flex-shrink: 0; }
/* 로그인 계정명 — 링크 아님(보조 텍스트). 길면 ellipsis(전체는 title 로 확인). */
.lh-nav-account-name {
  /* 모자라는 폭을 혼자 흡수한다 — flex 자식 기본값 auto 는 콘텐츠보다 작아지지
     않으므로 min-width:0 이 필요하다. 전체 값은 기존대로 `title` 로 확인한다. */
  flex: 0 1 auto; min-width: 0;
  display: inline-block; max-width: 10rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  font-size: 12.5px; color: var(--text2);
}
/* 두 그룹 사이 옅은 세로 구분선(장식용). aria-hidden — navigation 대상 아님. */
.lh-nav-group-divider {
  display: block; flex: 0 0 1px; align-self: center;
  width: 1px; min-width: 1px; height: 20px;
  background-color: var(--border2);
}
/* ── Header 압축의 최초 근거 (LOGHOOD-WORDMARK-2) — 당시 경계는 ≤380px ─────
   아래 블록의 경계·범위는 그 뒤 두 라운드에서 갱신됐다(바로 다음 주석 참조).
   여기 적힌 수치는 *왜 여백을 회수하기로 했는가* 의 기록이다.

   워드마크 확정 typography(tracking 0.14em)가 로고를 107.4 → 129px 로 넓히면서
   320px Header 의 계정 영역이 헤더 아래로 밀려났다(spill 5.0 → 24.5px,
   `회원가입` 이 한 글자씩 줄바꿈). 320px 실측 예산은 content 288px 에 필요
   331.1px — 43.1px 이 모자란다.

   워드마크 계약(색·weight 600·tracking 0.14em·line-height 1·font-size)은
   그대로 두고 **주변 여백만** 회수한다. 합계 50px:
     inner padding 16→10 (12) · inner gap 12→8 (8) · 메뉴 버튼 ml-2 8→0 (8)
     · nav-right gap 14→8 (6) · nav-link 좌우 padding 12→7 (10)
     · 로그인 CTA 좌우 padding 11→8 (6)

   메뉴 버튼의 `ml-2` 를 0 으로 두는 이유: `.lh-topnav-inner` 가 이미 flex
   `gap` 으로 항목을 띄우므로 그 margin 은 이중 간격이었다.

   당시 ≥390px 은 이 블록 밖이었다(비로그인 390 은 여유 26.9px). 로고
   font-size·계정 항목·기능은 이 라운드에서도 하나도 줄이지 않는다. */

/* ── 좁은 화면 header 압축 — 경계 480 ─────────────────────────────────────
   경계를 380 → 480 으로 넓힌 이유: 380 은 **비로그인** 예산으로 정해졌고,
   로그인하면 390px 에서 26px 적자다(ARTICLE-WRITER-MOBILE-OVERFLOW-HARDENING-1
   실측). Next `globals.css` 의 동명 선택자와 미러다.

   ── 이 블록은 base 선언 뒤에 있어야 한다 (MOBILE-HEADER-360-HARDENING-1) ──
   media query 는 특정도를 올리지 않는다. 위의 `.lh-nav-group-divider`,
   `.lh-nav-account-name` base 선언보다 앞에 두면 같은 특정도끼리 뒤가 이기므로
   이 override 가 조용히 무시된다(실제로 그렇게 놓쳤다). */
@media (max-width: 480px) {
  .lh-topnav-inner { gap: 8px; padding: 0 10px; }
  .lh-nav-right { gap: 8px; }
  /* DJANGO-MOBILE-NAV-APC-1: 320px 에서 `회원가입` CTA 가 10px 넘쳤다(실측).
     토글의 글자를 접어 34px 을 회수한다 — accessible name 은 summary 의
     `aria-label="주 메뉴"` 가 계속 갖는다. */
  .lh-nav-menu-toggle { padding: 0 8px; }
  .lh-nav-menu-toggle-text { display: none; }
  .lh-nav-link { padding-left: 7px; padding-right: 7px; }

  /* 장식 구분자(·) — `aria-hidden` 이고 폭이 모자라는 곳에서 접는다
     (MOBILE-HEADER-360-HARDENING-1). Next `globals.css` 와 미러 — Django 헤더에는
     현재 이 자식이 없지만(`계정`·`로그아웃` 뿐), 공유 class 의 평행을 지킨다. */
  .lh-nav-account-group > [aria-hidden="true"] { display: none; }

  /* 두 묶음 사이의 세로 구분선도 같은 장식이다 — `aria-hidden` 이고 1px 짜리지만
     양옆의 gap 을 달고 있어 사실상 9px 를 쓴다(실측). 작업실 배지와 계정 묶음은
     `.lh-nav-right` 자신의 gap 으로 여전히 구분된다. 항목을 지우는 것이 아니라
     장식을 지운다.

     360px 적자 회계(editor = `편집자` 3글자 배지, 가장 빡빡한 경우):
     점 구분자 24 + 이 구분선 9 + 계정명 gap 8 + 메뉴 버튼 이중 간격 8 = 49px.
     넷 중 하나라도 빠지면 360 에서 다시 넘친다 — 실측 하한은 356px 다.
     (Django 헤더에는 점 구분자·계정명이 없어 이 회계는 Next 쪽 기준이다.) */
  .lh-nav-group-divider { display: none; }

  /* ── 계정명은 압축 구간 전체에서 접고, 묶음은 내용 아래로 줄지 않는다
     (LEARNING-WRITER-MOBILE-OVERFLOW-HARDENING-1) ─────────────────────────
     두 규칙은 **한 쌍**이다. 따로 두면 서로를 망친다.

     (1) `min-width: 0` 이면 이 묶음은 **내용보다 작게** 줄어든다. 계정명은
         ellipsis 로 0 까지 줄지만 `계정`·`로그아웃` 은 `flex-shrink: 0` 이라
         줄지 않는다 — 상자만 작아지고 내용이 상자 밖, 결국 viewport 밖으로
         나간다. 작업실 배지가 **둘**인 사용자(크리에이터+스튜어드) 실측:
         360px 에서 묶음 64.9px 안에 105px 내용 → `로그아웃` 우변 390.3.

     (2) 그런데 `min-content` 하한은 **계정명이 보이는 동안에는 이름 폭까지
         포함한다**. `min-width: 0` 은 이름이 *줄어들 수 있다*는 말이지 min-content
         기여가 0 이라는 말이 아니다(nowrap 텍스트의 min-content 는 글자 폭이다).
         그래서 하한만 걸었더니 390px 에서 operator·author 가 27px 넘쳤다(실측).

     그래서 계정명을 압축 구간 **전체**(≤480)에서 접는다. 이전 라운드는 경계를
     380 으로 두고 "390–480 은 장식만 접어도 자리가 남는다" 고 적었는데, 그 실측은
     배지 0·1개 사용자만 본 것이었다. 배지가 둘이면 390 에서도 자리가 없다.

     계정명은 기능이 아니라 보조 identity 이고, 전체 사용자명은 `계정` 링크의
     accessible name 이 계속 들고 있다(`계정 - <username>`, SiteHeader.tsx).
     모자란 폭은 `.lh-nav-workspace-group` 이 받는다 — 원래 `overflow-x: auto`
     스크롤러로 설계된 자리다. `운영자`·`계정`·`로그아웃` 은 사라지지 않는다. */
  .lh-nav-account-name { display: none; }
  .lh-nav-account-group { min-width: min-content; }
}

.lh-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #2563eb);
  color: white; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lh-user-label { font-size: 12px; color: var(--text3); }

/* ── Messages ───────────────────────────── */
.lh-messages { padding: 12px 24px; max-width: 1200px; margin: 0 auto; }
.lh-msg {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 8px;
  font-size: 13px; border: 1px solid var(--border);
  background: var(--surface);
}
.lh-msg-success { background: rgba(26,122,66,.07); border-color: rgba(26,122,66,.2); color: var(--green); }
/* Round S10b: warning / danger / error 메시지는 훈색 계열로 통일 (석간주 미사용). */
.lh-msg-error,
.lh-msg-danger  { background: var(--lh-color-danger-hun-bg); border-color: var(--lh-color-danger-hun-border); color: var(--lh-color-danger-hun-text); }
.lh-msg-warning { background: var(--lh-color-warning-hun-bg); border-color: var(--lh-color-warning-hun-border); color: var(--lh-color-warning-hun-text); }

/* ── Main ───────────────────────────────── */
/* topnav(40px)만 차감 — footer 는 제거되었다. */
.lh-main { min-height: calc(100vh - 40px); }

/* ── Buttons ────────────────────────────── */
.lh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer;
  font-size: 13px; font-family: inherit; font-weight: 500;
  transition: all .14s; white-space: nowrap; text-decoration: none;
}
.lh-btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.lh-btn-primary:hover { background: var(--accent-h); text-decoration: none; }
.lh-btn-outline { background: var(--surface); color: #000; border-color: var(--border); }
.lh-btn-outline:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.lh-btn-green { background: var(--green); color: white; border-color: var(--green); }
.lh-btn-green:hover { background: #156036; text-decoration: none; }
.lh-btn-purple { background: var(--purple); color: white; border-color: var(--purple); }
.lh-btn-ai {
  background: rgba(109,69,196,.07); color: var(--purple);
  border-color: rgba(109,69,196,.2);
}
.lh-btn-ai:hover { background: rgba(109,69,196,.12); text-decoration: none; }
.lh-btn-sm { padding: 5px 11px; font-size: 12px; }
.lh-btn-xs { padding: 3px 8px;  font-size: 14px; }
.lh-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cards ──────────────────────────────── */
.lh-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.lh-card-pad { padding: 20px 22px; }
.lh-card-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.lh-card-title { font-size: 16px !important; font-weight: 700; }

/* Phase 4-F-10: 작업실/작성기 "내 정보" 공통 정보 카드. 저자/편집자 양측이
   같은 markup (``templates/common/_workspace_profile_card.html``) 으로 같은
   3열 grid 카드를 렌더. 표 형태 (이전 ``/accounts/profile/`` ``<table
   class="lh-tbl">``) 는 본 라운드부터 폐기 — 두 화면 시각 규칙 통일.   */
.lh-profile-card { padding: 18px 20px; }
.lh-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px;
}
.lh-profile-item {
  display: flex; flex-direction: column; gap: 4px;
}
.lh-profile-label {
  font-size: 11.5px;
  color: var(--text3);
  letter-spacing: .2px;
}
.lh-profile-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* ── Forms ──────────────────────────────── */
.lh-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
}
.lh-fg { display: flex; flex-direction: column; gap: 6px; }
.lh-fg-span2 { grid-column: span 2; }
.lh-fl { font-size: 12px; font-weight: 700; color: var(--text2);
         text-transform: uppercase; letter-spacing: .5px; }
.lh-fl .req { color: var(--orange); }
.lh-fi, .lh-ft, .lh-fs {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text); font-family: inherit; font-size: 13.5px;
  padding: 9px 12px; width: 100%; outline: none;
  transition: border-color .14s;
}
.lh-fi:focus, .lh-ft:focus, .lh-fs:focus { border-color: var(--accent); }
.lh-ft { resize: vertical; min-height: 56px; line-height: 1.5; }
.lh-fhint { font-size: 11.5px; color: #000; }
.lh-help-text { font-size: 12.5px; color: var(--text3); line-height: 1.5; }

/* ── Page header ────────────────────────── */
.lh-page { padding: 32px 24px; max-width: 1200px; margin: 0 auto; }
.lh-page-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--accent); margin-bottom: 6px;
}
/* Step 1/2/3/4 라벨 통일 — Step 2 의 .lh-page-eyebrow 스타일을 정확히 복제.
   Step 3/4 는 _section_nav.html 안에서 다른 위치(좌측 nav 헤더)에 노출되므로
   호출 측에서 inline padding 만 추가로 지정한다. */
.lh-step-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--accent); margin-bottom: 6px;
}
.lh-page-title {
  /* 모든 workspace/editor list / dashboard 화면 (upload / analysis / profile / */
  /* forum_submission_list / static_page_list 등) 의 페이지 제목.               */
  font-family: var(--font-heading);
  font-size: var(--lh-page-title-font-size) !important;
  font-weight: var(--lh-page-title-font-weight);
  line-height: var(--lh-page-title-line-height);
  margin-bottom: 8px;
}
.lh-page-desc { font-size: 13.5px; color: #000; }

/* ── Section label ──────────────────────── */
.lh-sec-label {
  font-family: var(--font-heading);
  font-size: 24px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: #000;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 8px; margin: 28px 0 16px;
}
/* ── Sub-section label (폼·카드 내부 소제목) ───── */
.lh-subsec-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px !important; font-weight: 600; color: #000;
  line-height: 1.3;
  margin: 18px 0 10px;
}

/* ── Tables ─────────────────────────────── */
.lh-tbl-wrap { overflow-x: auto; border-radius: 0 0 10px 10px; }
.lh-tbl { width: 100%; border-collapse: collapse; min-width: 480px; }
.lh-tbl th {
  padding: 10px 14px; background: var(--surface2);
  font-size: 14px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: #000; text-align: left;
  border-bottom: 1.5px solid var(--border); white-space: nowrap;
}
.lh-tbl td {
  padding: 10px 14px; font-size: 13px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.lh-tbl tr:last-child td { border-bottom: none; }
.lh-tbl tr:hover td { background: var(--surface2); }
.lh-mono { font-family: var(--font-mono); font-size: 12px; }

/* ── Workspace-style table (작업실 표 SoT) ─────────────────────────
   Next.js `frontend/src/app/workspace/_components/WorkspaceContentTable.tsx`
   의 시각 언어와 1:1 매칭. 수치 모두 Tailwind class 와 일치시킴:
     · card             rounded-lg(=8px) + border 1px var(--border) + bg-white
     · thead            bg=--surface2 (≈bg-zinc-50)
     · th               px-4 py-2 (16/8px) · text-xs(12px) · font-medium(500) ·
                        uppercase · tracking-wide(.025em) · color=text-zinc-500
     · tbody divider    divide-zinc-100 (≈--surface3)
     · td               px-4 py-2 (16/8px) · text-sm(14px) · vertical-align top
   기존 `.lh-tbl` 은 operations / forum issues / static_page_list 등 다른 6개
   화면에서 계속 사용되므로 무수정. 본 클래스 세트가 편집자 작성기 ↔ 작업실
   공통 표 SoT. */
.lh-workspace-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}
.lh-workspace-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text);
}
.lh-workspace-table thead { background: var(--surface2); }
.lh-workspace-table thead tr {
  border-bottom: 1px solid var(--border);
}
.lh-workspace-table th {
  padding: 8px 16px; text-align: left;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .025em;
  color: var(--text2);
  white-space: nowrap;
}
.lh-workspace-table tbody tr {
  border-top: 1px solid var(--surface3);
}
.lh-workspace-table tbody tr:first-child { border-top: none; }
.lh-workspace-table td {
  padding: 8px 16px;
  vertical-align: top;
  line-height: 1.5;
}
/* Next.js WorkspaceContentTable 에는 row hover 가 없어 시각 일치를 위해 미적용. */
.lh-workspace-table-empty {
  padding: 24px 16px; text-align: center;
  color: var(--text3); font-size: 13px;
}
/* ── 작성 진행 컨텍스트 바 (Phase 1 + single-row 정리) ───────────
   article_editor.html / dataset_editor.html 상단에서 공통 partial 로 렌더되는
   3-그룹 progress strip. 데이터셋 작성 / 데이터논문 작성 / 데이터논문 투고 의
   현재 상태 + 빠른 실행을 *한 줄* horizontal bar 로 노출. view model 은
   `apps/common/editor_progress.py:build_editor_progress()`.

   레이아웃 정책:
     · strip 전체는 inline-flex 한 줄 (`flex-wrap: nowrap`).
     · 그룹 title 과 액션 버튼이 같은 baseline (`flex-direction: row`).
     · 좁은 폭에서는 줄바꿈하지 않고 가로 스크롤 (`overflow-x: auto`).
     · 그룹 사이 구분 = vertical divider (adjacent sibling 의 left border).

   상태 클래스 (액션 단위):
     · is-done       — 완료 (green 톤, ✓ 마크)
     · is-available  — 실행 가능 (link / POST 버튼). 기본은 outline,
                       `.is-primary` 함께 붙으면 accent 배경.
     · is-blocked    — 선행 조건 미충족 (muted, cursor: not-allowed).
     · is-error      — 운영 확인 필요 (warning 톤, ⚠ 마크).
   current 강조는 액션이 아니라 group 단위 — `.lh-editor-progress-group.is-current`.

   기존 `.lh-editor-context*` 규칙은 무수정 (다른 화면에서 잠재 사용 가능). */
.lh-editor-progress-strip {
  display: flex; align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin: 0 0 14px;
  overflow-x: auto;
  white-space: nowrap;
}
/* command bar 안에 nested 된 progress strip — 자체 padding / border / margin /
   배경 제거. command bar 가 한 행 SoT 로 패딩·하단 경계·배경을 담당하기 때문에
   안쪽 strip 은 *컨테이너 없는 inline flow* 처럼 좌측 영역에 그대로 흐른다.
   strip 단독 사용 (예: author 화면 — command bar 미사용 케이스) 시는 기존 규칙
   그대로 유지된다.                                                              */
.lh-editor-command-progress > .lh-editor-progress-strip {
  padding: 0;
  margin: 0;
  background: transparent;
  border-bottom: none;
}

/* ── 작성기 command bar — progress strip + 저장 액션 한 행 ────────────────────
   좌(.lh-editor-command-progress) = progress strip overflow 영역,
   우(.lh-editor-command-actions) = [미리보기][저장][저장 후 다음 스텝으로].
   두 영역 사이 vertical divider 는 우측 영역의 border-left 로 표현. 본 wrapper
   가 strip 단독으로 가졌던 padding / border-bottom / 하단 margin 을 흡수한다.   */
/* ── admin shell 2차 topbar (subnav) — 2영역 flex ──────────────────────────────
   layout: [left auto (breadcrumb menus)] [right auto, margin-left:auto].
   right 영역이 *어떤 left 메뉴 폭에서도* 우측 끝에 고정 (subnav 가 넓어도 chip
   이 메뉴 바로 옆에 inline 으로 붙지 않는다). right 영역은 context label
   (topbar_context block) + (옵션) topbar_actions block 두 슬롯 — context 가
   먼저, 뒤에 actions. 비-editor admin 화면은 두 block 모두 빈 채로 0-width. */
.lh-topbar {
  display: flex;
  align-items: center;
}
.lh-topbar-right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 0;
  /* Round S5-G-H-R7-N-fix-8 Phase 4: flex:0 0 auto 명시 — 우측 context box
     가 좌측 `.lh-bc` 메뉴 영역을 침범 / shrink 하지 않게. context box 자체
     는 `.lh-editor-subnav-context-box` 에서 `max-width: min(620px, 48vw)` +
     `white-space:nowrap` + `overflow:hidden` + `text-overflow:ellipsis` 로
     자체 폭 제한. */
  flex: 0 0 auto;
}

/* flat context label — editor screens (Step 1·2·3·4·5) 가 topbar_context block
   안에 렌더하는 *읽기 전용* 라벨. 클릭 가능한 element 가 아니므로 border /
   background / padding / hover / box-shadow 일체 없음 — 서비스 기본 sans 텍스트
   에 대괄호 `[ ]` (템플릿에서 emit) 만 둘러싼다. 옛 클래스명에 `box` 가 남아
   있지만 실제 시각은 flat (이름은 호환 위해 유지).                              */
.lh-editor-subnav-context-box {
  display: inline-block;
  max-width: min(620px, 48vw);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.lh-editor-command-bar {
  /* Round S5-G-H-R7-N-fix-6: command bar 를 `.lh-editor-fixed-layout` *밖*
     으로 분리. 더 이상 wrapper 내부 flex column item 이 아니라 admin-body
     의 normal document flow block 으로 동작 — flex algorithm 의 0 collapse
     회귀가 *구조적으로* 불가능.

     R7-N-fix-4/5 의 !important 요새 (flex: 0 0 <token> / min-height /
     height / display / visibility / opacity 모두 !important) 는 fixed-
     layout 내부 collapse 방어용이었음 — 외부로 분리된 이후 불요. 본
     라운드 cleanup 으로 normal flow CSS 만 남김.

     단순 정책:
       · display: flex — wrapper 자체가 좌(progress) / 우(actions) 2-슬롯
         flex container.
       · align-items: center — 자식 button 세로 중앙.
       · min-height — 토큰값 (52px) 최소 row height 보장.
       · normal flow + position: relative — sticky/absolute 아닌 일반 block.
       · z-index: 30 — body 카드 (z<30) 위로 살짝 띄움 (focus ring / dropdown).

     Round S5-G-H-R7-N-fix-8 Phase 2 (rolled back in Phase 7): Phase 2 에서
     `.lh-topbar` sticky overlap 회귀 회피용으로 z-index 50 raise 했으나,
     Phase 7 에서 *근본 원인* — 작성기 화면 sticky topbar 자체의 잘못된
     painting — 을 해결. 작성기 분기에서 `.lh-topbar` 를 position static 으로
     강제 (별도 selector) → cb 와 geometrically 겹침 0 → z-index 경쟁 불요.
     cb z-index 를 옛 정책값 30 으로 복귀.                                  */
  /* Round R7-N-cleanup (workbench-layout-audit C-3): fix-7 의 production-safe
     inline `!important` style 을 본 class 로 이관. 가시성-critical 선언
     (display / width / min-height / height / box-sizing / overflow / visibility /
     opacity / flex) 만 `!important` 유지 — 일부 dev 브라우저의 cascade collapse
     (0 높이 / 숨김) 회귀 방어용. 본 element 를 override 하는 경쟁 `!important`
     규칙이 없어(grep 확인) inline `!important` 와 cascade-동등. 색은 디자인 토큰
     (--surface / --border) 만 사용(평소 톤). */
  display: flex !important;
  align-items: center;
  gap: 0;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin: 0;
  width: 100% !important;
  min-height: var(--lh-editor-command-bar-height) !important;
  height: var(--lh-editor-command-bar-height) !important;
  box-sizing: border-box !important;
  position: relative;
  top: auto;
  z-index: 30;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
}
/* actions-only modifier — Step 1·2 (데이터 정보 입력 / 분석) 처럼 진행 strip 이
   없는 화면용. 오른쪽 actions 만 보이고, progress-strip ↔ actions 구분용 divider
   (border-left) 는 제거. `justify-content: flex-end` 가 1차 우측 정렬 SoT 이고,
   spacer + `margin-left: auto` 는 보조 (브라우저 / nested wrapping 에서도 안전). */
.lh-editor-command-bar--actions-only {
  justify-content: flex-end;
}
.lh-editor-command-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.lh-editor-command-bar--actions-only .lh-editor-command-actions {
  margin-left: auto;
  border-left: 0;
  padding-left: 0;
}
.lh-editor-command-progress {
  flex: 1 1 auto;
  min-width: 0;          /* flex item 의 overflow-x:auto 가 정상 동작하도록 */
  overflow-x: auto;
  display: flex; align-items: center;
}
.lh-editor-command-actions {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
/* command bar 안의 액션 단위 — progress strip 의 .lh-editor-progress-action 과
   동일한 metric (28px height, 12.5px font, 10px gutter) 을 따라 시각적 연속성
   확보. 색 의미는 spec §11 확장:
     · .is-neutral  — 흰 배경 + var(--border) 외곽 (미리보기)
     · .is-primary  — var(--accent) filled (저장 / 저장 후 다음 스텝으로)
   `.lh-editor-progress-action.is-available.is-primary` 와 같은 톤이지만 progress
   강조와 의미 분리를 위해 별도 클래스를 사용 (테스트가 두 영역을 구분 가능).      */
.lh-editor-action {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  gap: 4px;
  height: 28px; padding: 0 12px;
  font-size: 12.5px; font-weight: 500; line-height: 1;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  text-decoration: none; white-space: nowrap;
  cursor: pointer; font-family: inherit;
  transition: border-color .14s, color .14s, background .14s;
}
.lh-editor-action:hover { text-decoration: none; }
.lh-editor-action.is-neutral {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text); font-weight: 500;
}
.lh-editor-action.is-neutral:hover {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}
.lh-editor-action.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff; font-weight: 700;
  box-shadow: 0 1px 2px rgba(26, 86, 219, .18);
}
.lh-editor-action.is-primary:hover {
  background: var(--accent-h);
  border-color: var(--accent-h);
  color: #fff;
}
.lh-editor-progress-group {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.lh-editor-progress-group + .lh-editor-progress-group {
  /* 그룹 사이 vertical divider — 그룹 제목이 제거되어 본 divider 가 유일한
     그룹 경계 시각화. */
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
/* 그룹 제목 / current 점 시각 강조는 적용하지 않는다 — 좌측 5-step nav 가 현재
   단계 정보를 담당. 클래스 정의 자체는 partial 호환을 위해 제거하지 않지만
   .lh-editor-progress-title / .lh-editor-progress-current-dot 요소는 더 이상
   템플릿에서 렌더되지 않는다. */
.lh-editor-progress-actions {
  display: inline-flex; align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}
.lh-editor-progress-action-form {
  display: inline-flex; margin: 0; padding: 0;
}
.lh-editor-progress-action {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  gap: 4px;
  height: 28px; padding: 0 10px;
  font-size: 12.5px; font-weight: 500; line-height: 1;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  text-decoration: none; white-space: nowrap;
  cursor: pointer; font-family: inherit;
  transition: border-color .14s, color .14s, background .14s;
}
.lh-editor-progress-action:hover { text-decoration: none; }

/* 색 의미 (spec §11):
   · is-available.is-primary  — 파란색 filled  (지금 누르기를 기다리는 진행 액션)
   · is-done                  — 파란색 outline (완료된 진행 액션)
   · is-available 그 외       — 중립 outline   (단순 보기 링크)
   · is-blocked               — 회색           (조건/권한 미충족)
   · is-error                 — 주황 warning   (운영 확인 필요)
   완료 상태에 초록 톤은 사용하지 않는다 (spec §12). ✓ 마크 색은 부모(.is-done) 의
   color 를 그대로 상속받으므로 별도 색 지정 없음.                                 */

/* 진행 액션 — 파란색 filled */
.lh-editor-progress-action.is-available.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff; font-weight: 700;
  box-shadow: 0 1px 2px rgba(26, 86, 219, .18);
}
.lh-editor-progress-action.is-available.is-primary:hover {
  background: var(--accent-h);
  border-color: var(--accent-h);
  color: #fff;
}

/* 단순 보기 링크 — 중립 outline (is-primary 없는 available) */
.lh-editor-progress-action.is-available:not(.is-primary) {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text); font-weight: 500;
}
.lh-editor-progress-action.is-available:not(.is-primary):hover {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}

/* Phase 4-F-4: 재공개 (republish) 버튼 — 비색 (연한 청록) 톤.
   ``is-primary`` 파란색 강조와 분리해 *이미 공개된 콘텐츠의 갱신* 임을 사용자
   가 한눈에 구분할 수 있도록 한다. command bar action builder 가
   ``button_tone='lh-action-republish'`` 로 set 하면 본 규칙이 적용.
   적용 대상: dataset_publish / article_publish 의 republish 분기 한정. */
.lh-editor-progress-action.is-available.lh-action-republish {
  background: #d8ebe7;
  border-color: #9fc9c1;
  color: #1f5f57; font-weight: 600;
  box-shadow: none;
}
.lh-editor-progress-action.is-available.lh-action-republish:hover,
.lh-editor-progress-action.is-available.lh-action-republish:focus {
  background: #c6e1dc;
  border-color: #7fb7ad;
  color: #174c45;
}

/* 완료된 진행 액션 — 파란색 outline (초록 톤 제거) */
.lh-editor-progress-action.is-done {
  background: rgba(26, 86, 219, .06);   /* var(--accent) RGB 6% tint */
  border-color: var(--accent);
  color: var(--accent); font-weight: 700;
}
a.lh-editor-progress-action.is-done:hover {
  background: rgba(26, 86, 219, .10);
  border-color: var(--accent);
  color: var(--accent);
}
span.lh-editor-progress-action.is-done,
button.lh-editor-progress-action.is-done { cursor: default; }
.lh-editor-progress-check { margin-right: 4px; }

/* 조건/권한 미충족 — 회색 disabled */
.lh-editor-progress-action.is-blocked {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text3);
  cursor: not-allowed;
}
.lh-editor-progress-action.is-blocked:hover {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text3);
}

/* Phase 4-F-7: blocked + action-kind tone — faded color hint.
   editor 가 보면 활성 톤 (is-available + is-primary / lh-action-republish),
   author 가 같은 콘텐츠를 보면 같은 label 의 faded 버전. CSS 는 ``.is-blocked``
   기본 회색 처리 위에 *살짝* 색상을 덧붙여 action kind 를 식별 가능하게 함 --
   여전히 disabled 표현 (cursor: not-allowed + 채도 낮은 색). */
.lh-editor-progress-action.is-blocked.is-primary {
  background: rgba(26, 86, 219, .05);    /* var(--accent) RGB 5% tint */
  border-color: rgba(26, 86, 219, .25);
  color: rgba(26, 86, 219, .55);
  font-weight: 600;
}
.lh-editor-progress-action.is-blocked.lh-action-republish {
  background: rgba(159, 201, 193, .15);  /* 비색 매우 옅은 tint */
  border-color: rgba(159, 201, 193, .55);
  color: rgba(31, 95, 87, .60);
  font-weight: 500;
}

/* 확인 필요 / 외부 오류 — 훈색 warning (Round S10b: 석간주 미사용) */
.lh-editor-progress-action.is-error {
  background: var(--lh-color-warning-hun-bg);
  border-color: var(--lh-color-warning-hun-border);
  color: var(--lh-color-warning-hun-text); font-weight: 700;
}
.lh-editor-progress-action.is-error:hover {
  background: var(--lh-color-warning-hun-bg);
  border-color: var(--lh-color-warning-hun-border);
  color: var(--lh-color-warning-hun-text);
}

/* Round S10b: status row 작업권한 불일치 경고 badge — 훈색 계열.
   (옛 inline orange 스타일 #fff7ed/#fed7aa/#9a3412 폐기 → CSS class SoT). */
.lh-work-ownership-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--lh-color-warning-hun-bg);
  border: 1px solid var(--lh-color-warning-hun-border);
  color: var(--lh-color-warning-hun-text);
}

/* ── 본문 wrapper (목록·dashboard 화면용) ─────────────────────────
   3000 Next.js `.lh-ws-main-w` (frontend/src/app/globals.css) 와 1:1 동일.
   `max-width: --lh-shell-main-max-width` (1080px) + 자동 중앙정렬. `.lh-admin-
   body` 의 외곽 padding 안에 자리잡아 작업실/작성기 본문과 같은 위치·폭·여백
   유지. 작성기 (form 화면) 의 `.lh-pe-grid` 는 form 구조용 3-컬럼 그리드라
   *목록* 화면 (FORUM 투고관리 등) 에서는 본 wrapper 만 사용. */
.lh-ws-main {
  width: 100%;
  max-width: var(--lh-shell-main-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* 표 캡션 — 작업실 표 `<h2 mb-3 text-base font-semibold text-zinc-900>` 와 일치.
   화면 페이지 제목 (.lh-page-title) 보다 한 단계 작은 섹션 레벨. */
.lh-workspace-table-caption {
  font-size: 16px; font-weight: 600;
  color: var(--text); line-height: 1.4;
  margin: 18px 0 12px;
}
/* 관리 컬럼 — 4개 이상 액션을 세로로 stack. 각 액션이 한 줄 차지하면
   "작성기 열기" / "공개 데이터논문 보기 ↗" / "관련 데이터셋 보기 ↗" /
   "게재논문 보기 ↗" 가 일정 간격으로 정렬되어 작업실 표의 명확한 액션 톤 유지. */
.lh-workspace-table-actions {
  display: flex; flex-direction: column;
  gap: 4px; align-items: flex-start;
  min-width: 160px;
}

/* table-context link-style action — workspace 표의 "작성기 열기" / "보기 ↗"
   와 동일한 시각. `.lh-btn-outline` 처럼 박스가 아니라 plain text link.        */
.lh-table-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}
.lh-table-link:hover { color: #143f9c; text-decoration: none; }
.lh-table-link[disabled],
.lh-table-link.is-disabled { color: var(--text3); cursor: default; }

/* table-context 작은 POST 버튼 — form 제출이 필요한 상태 전환에만 사용.
   `.lh-btn-primary` 처럼 강한 색이 아니라 흰 배경 + 얇은 테두리.              */
.lh-btn-table {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 12.5px; font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer; text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .14s, color .14s;
}
.lh-btn-table:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ── Badges ─────────────────────────────── */
.lh-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700;
}
.lh-badge-ok    { background: rgba(26,122,66,.1);  color: var(--green); }
.lh-badge-warn  { background: rgba(217,95,43,.1);  color: var(--orange); }
.lh-badge-info  { background: rgba(26,86,219,.08); color: var(--accent); }
/* 상태 표시용 중립 배지 — 대시보드 현황 카드의 톤(흰 배경·회색 테두리) 과
   동일하게 보이도록. 색으로 구분하지 않는 표 셀에서 사용. */
.lh-badge-muted { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.lh-tb { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 4px; }
.lh-tb-int { background: rgba(26,86,219,.08);  color: var(--accent); }
.lh-tb-flt { background: rgba(109,69,196,.08); color: var(--purple); }
.lh-tb-cat { background: rgba(217,95,43,.08);  color: var(--orange); }
.lh-tb-ord { background: rgba(26,122,66,.08);  color: var(--green); }
.lh-tb-str { background: var(--surface3); color: var(--text2); }
.lh-tb-date{ background: rgba(26,86,219,.05);  color: var(--accent); }

/* ── Steps (admin workflow) ─────────────── */
/* 2-column workspace shell (8000 Django + 3000 React 공통).
   3000 frontend/src/app/globals.css 의 .lh-shell / .lh-aside / .lh-maincol /
   .lh-topbar 규칙과 1:1 동일. position:fixed 폐기 — 두 앱 모두 flex row 로
   같은 y-baseline 정렬. 좌측 .lh-aside 와 우측 .lh-maincol 의 첫 자식
   (.lh-aside-brand / .lh-topbar) 이 동일 y=40px 부터 시작. */
.lh-shell {
  /* 기본 (workspace / list / profile 등 비-작성기 화면) — page/body scroll
     모델. shell 은 viewport 높이만큼 최소 보장하고, 본문이 길어지면 자연
     확장. 작업실 좌측 rail (.lh-aside) / 작업실 2차 nav (.lh-topbar) 는
     viewport 기준 sticky 로 고정. 화면 전체는 normal page scroll.            */
  min-height: calc(100vh - var(--lh-site-header-height));
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* Round S5-G-H-R7-N-fix-2: 작성기 (`.lh-pe-grid` 가 admin-body 자식) 화면
   에서는 sticky 누적 모델 폐기 — viewport 고정 height + 내부 column scroll
   모델로 전환. shell 자체 height 를 viewport - global header 로 고정하고,
   하위 chain (maincol → admin-body → grid → 각 column) 이 모두 min-height:0
   + overflow:hidden / auto 로 내부 스크롤만 발생하게 한다.
   본 selector 는 작성기 화면에만 매칭 — 다른 workspace 화면 (workspace
   list / profile / forum_submission_list 등) 은 기존 normal page scroll
   유지. browser :has() 미지원 시 fallback = 기존 sticky 모델 (degrade
   가능). */
.lh-shell:has(.lh-pe-grid) {
  height: calc(100vh - var(--lh-site-header-height));
  min-height: 0;
  overflow: hidden;
}
.lh-aside {
  width: var(--lh-shell-aside-width);
  min-width: var(--lh-shell-aside-width);
  flex-shrink: 0;
  background: var(--surface);
  /* 1열 rail 오른쪽 세로 구분선 — 모든 역할 (저자/편집자/운영자/관리자) 모든
     페이지 (작업 목록 / 내 정보 / 새 작성 시작 / 작성기 / FORUM 투고관리 등)
     공통 SoT. role-specific shell / page-specific override 금지. */
  border-right: var(--lh-profile-border-width) solid var(--border);
  box-sizing: border-box;
  /* 좌측 rail — page scroll 모델에서 *sticky 영역*. 글로벌 .lh-topnav (sticky
     top:0) 바로 아래에 viewport 기준으로 고정되어 본문이 스크롤되어도 항상
     보인다. align-self: start 로 grid/flex stretch 무력화. 카드 / step item
     이 많아 높이가 모자라면 본 컬럼 안에서만 세로 스크롤 (thin scrollbar).
     `min-height = max-height = viewport - header` — 콘텐츠가 짧은 화면
     (예: /authoring/profile/) 에서도 rail 자체가 viewport 전체 높이로 확장
     되어 border-right 가 끊김 없이 보인다.                                  */
  position: sticky;
  top: var(--lh-site-header-height);
  align-self: flex-start;
  min-height: calc(100vh - var(--lh-site-header-height));
  max-height: calc(100vh - var(--lh-site-header-height));
  z-index: 30;
}

/* Round S5-G-H-R7-N-fix-2: 작성기 화면에서는 shell 이 overflow:hidden 인
   고정 height container 라 sticky 가 무의미. 대신 height 100% + flex item
   으로 두어 같은 viewport-fill 동작 보장. align-self:stretch (flex 기본) 가
   self:flex-start 보다 우선이라 height 100% 가 정상 동작. */
.lh-shell:has(.lh-pe-grid) > .lh-aside {
  position: static;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
}
.lh-aside-head { padding: 18px 20px; font-size: 14px;
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: #000; }
/* S5-G-H-R4: ARCHIVE/FORUM editor 좌측 rail 헤더 — eyebrow + brand-name
   2 줄 layout 간격. 두 작성기 (admin_panel/_shell.html, forum step nav
   partial) 가 같은 markup pattern 사용하므로 본 rule 도 양쪽에 동시 적용. */
.lh-aside-head .lh-aside-brand-name { margin-top: 4px; }

/* S5-G-H-R4-visual: 1열 "STEPS" / 2열 "SECTIONS" 열 제목.
   - 같은 크기·색·스타일·spacing.
   - 작성기 brand-name (19px/700) 보다 작고 기존 .lh-pe-eyebrow (12px/500) 보다 큼.
   - color: var(--accent) (#1a56db) — 파란색 계열로 1열·2열의 *역할 구분*
     을 시각화. brand-name 의 강조와 분리.
   - 본 class 는 archive editor (admin_panel/_shell.html) 와 forum editor
     step nav partial 양쪽 1열, 그리고 inner col 2 의 SECTIONS heading
     (_section_nav.html / _section_nav_submission.html /
     forum_editor_article_detail.html) 모두에서 동일 markup 으로 사용. */
/* ── LOGHOOD 공통 rail heading 체계 (Django/Next 공유) ──────────────
   Django 작성기(ARCHIVE EDITOR / 아카이브 작성기 / STEPS)와 Next workspace
   (WORKSPACE / 작업 목록 / 콘텐츠 유형)가 *같은 이름·의미* 의 rail heading
   class 를 쓴다. Next globals.css 에 동일 값으로 mirror.
     · .lh-rail-kicker      = 작은 영문 상위 라벨  (ARCHIVE EDITOR / WORKSPACE)
     · .lh-rail-title       = 큰 파란 제목         (아카이브 작성기 / 작업 목록)
     · .lh-rail-group-label = rail 그룹 라벨        (STEPS / 콘텐츠 유형)
   기존 작성기 class (.lh-pe-eyebrow / .lh-aside-brand-name / .lh-editor-column-
   label) 는 그대로 유지 — `.lh-editor-column-label` 은 `.lh-rail-group-label`
   과 *동일 스타일을 alias* 로 공유한다(아래 selector 결합).
   향후 공통화 대상: rail navigation 항목 → `.lh-rail-nav-item` (이번 라운드 미적용). */
.lh-rail-kicker {
  font-size: 12px; font-weight: 500;
  color: #000; text-transform: uppercase;
  letter-spacing: .8px;
}
.lh-rail-title {
  font-family: var(--font-heading);
  font-size: 19px; font-weight: 700;
  color: var(--accent);
  letter-spacing: .3px; line-height: 1;
  margin-top: 4px;
}
.lh-rail-group-label,
.lh-editor-column-label {
  font-size: 13px; font-weight: 700;
  color: var(--accent); text-transform: uppercase;
  letter-spacing: .06em;
  padding: 14px 20px 6px;
}
.lh-step-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer;
  border-left: 3px solid transparent; text-decoration: none;
  color: inherit;
}
.lh-step-item:hover { background: var(--surface2); text-decoration: none; }
.lh-step-item.active { background: var(--accent-s); border-left-color: var(--accent); }
/* done 상태도 미완료 (숫자) 원과 같은 흰 배경 + 검정 외곽 + 검정 텍스트 톤
   유지. 완료 표시는 안 ✓ 의 색 (검정) 으로만 구분 — 녹색 fill 제거. */
.lh-step-item.done .lh-step-circle {
  background: #fff; color: #000; border-color: #000;
}
.lh-step-item.active .lh-step-circle {
  background: var(--accent); color: white; border-color: var(--accent);
}
.lh-step-circle {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #000;
  flex-shrink: 0;
}
.lh-step-name { font-size: 12.5px; font-weight: 600; color: #000; }
.lh-step-item.disabled { cursor: not-allowed; }
.lh-step-item.disabled:hover { background: transparent; }
.lh-step-item.disabled .lh-step-name { color: #000; }

/* 사이드바 안 messages (4단계 workflow 아래) */
.lh-aside-messages { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.lh-aside-messages .lh-msg { font-size: 12.5px; padding: 8px 10px; }

/* 사이드바 — page scroll 모델. 자체는 sticky (위쪽 규칙) 이며 max-height 안에서
   세로 콘텐츠를 column 으로 배치하고 모자라면 본 컬럼 안에서만 스크롤. */
.lh-aside { display: flex; flex-direction: column; overflow-y: auto; }
.lh-aside-brand {
  /* 프로필 영역 높이를 우측 2행 topbar 와 동일하게 맞춤 — 두 영역의 가로
     baseline 정렬. padding 대신 min-height + flex center 로 세로 중앙.
     3000 frontend/src/app/globals.css .lh-aside-brand 와 동일 값. */
  min-height: var(--lh-shell-topbar-height);
  padding: 0 var(--lh-profile-x-padding);
  display: flex;
  align-items: center;
  border-bottom: var(--lh-profile-border-width) solid var(--border);
  background: var(--surface);
  box-sizing: border-box;
}
.lh-aside-brand-name {
  font-family: var(--font-heading);
  font-size: 19px; font-weight: 700; color: var(--accent);
  letter-spacing: .3px; line-height: 1;
}
.lh-aside-brand-sub {
  font-family: var(--font-heading);
  font-size: 9px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 1.6px;
  margin-top: 3px;
}

/* 사이드바 하단 (프로필 + 백링크) */
.lh-aside-bottom {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.lh-aside-nav-link {
  font-size: 14px; font-weight: 500; color: #000; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.lh-aside-nav-link:hover { color: var(--accent); }
/* ── 사용자 프로필 블록 ──
   `.lh-aside-profile` 는 `.lh-aside-brand` 안에서만 사용된다 (admin_panel /
   operations / authoring 세 shell 모두). 3000 React WorkspaceLayoutShell 도
   동일 class 이름 + 동일 값을 공유 (frontend/src/app/globals.css). */
.lh-aside-profile {
  display: flex;
  align-items: center;
  gap: var(--lh-profile-avatar-text-gap);
  min-width: 0;
}
.lh-aside-profile-avatar {
  width: var(--lh-profile-avatar-size);
  height: var(--lh-profile-avatar-size);
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--lh-profile-name-size);
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
  font-family: var(--font-heading);
  line-height: 1;
}
.lh-aside-profile-meta {
  display: flex;
  flex-direction: column;
  gap: var(--lh-profile-text-gap);
  line-height: var(--lh-profile-line-height);
  min-width: 0;
  font-family: var(--font-heading);
}
.lh-aside-profile-name {
  font-size: var(--lh-profile-name-size);
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-profile-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lh-aside-profile-role {
  font-size: var(--lh-profile-role-size);
  /* username 아래 role/context 라벨 — 회색보다 잘 보이도록 기존 accent(blue)
     토큰 + semibold. 크기/위치/간격은 유지(가독성만 상향). .lh-nav-link.active
     와 동일 문법(var(--accent) + font-weight:600). */
  color: var(--accent);
  font-weight: 600;
  line-height: var(--lh-profile-line-height);
}

.lh-maincol {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  /* page scroll 모델 — overflow:hidden / height:100% 폐기. 자식 (lh-topbar
     sticky + lh-admin-body 자연 흐름) 이 viewport sticky 와 page scroll 을
     공유. min-width:0 은 grid/flex 안에서 본문이 가로로 넘치지 않게.       */
}

/* Round S5-G-H-R7-N-fix-3: 작성기 화면 maincol — admin-body 의 flex chain
   (`flex: 1 1 auto; min-height: 0`) 이 정상 동작하려면 부모 maincol 도
   min-height: 0 + overflow: hidden 으로 column scroll 누설 차단해야 한다.
   본 규칙 없으면 maincol 의 implicit min-content height 가 admin-body 를
   밀어내 command bar / grid 가 viewport 밖으로 흘러나가 "command bar 가
   보이지 않는" 회귀 발생 (R7-N-fix-3 fix). */
.lh-shell:has(.lh-pe-grid) > .lh-maincol {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.lh-admin-body {
  padding: 32px 36px;
  /* page scroll 모델 — 본 body 자체는 overflow 비조작. 본문이 길면 page/body
     가 스크롤하고, sticky 영역 (lh-topnav / lh-aside / lh-topbar / 작성기
     command bar / nav / side) 이 viewport 누적 offset 으로 고정된다. 작성기
     (`:has(> .lh-pe-grid)`) 도 동일 — admin-body 가 자체 scroll container 가
     되지 않는다.                                                            */
  flex: 1; min-width: 0;
}
/* 작성기 페이지 — lh-admin-body 가 lh-pe-grid 를 직접 자식으로 가질 때만 매칭.
   padding 만 0 으로 (grid 가 좌·우 column padding 을 직접 관리). scroll
   container 화 제거 — sticky 컬럼은 page/body scroll 기준으로 viewport 누적
   offset 사용. */
.lh-admin-body:has(> .lh-pe-grid) {
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Round S5-G-H-R7-N-fix-2: shell 이 viewport 고정 height 가 된 작성기
     화면에서, admin-body 도 maincol 안 남은 height 를 모두 차지하고
     자식 (command bar + grid) 이 *내부 scroll* 만 일으키도록 min-height:0 +
     overflow:hidden 명시. command bar 는 자연 sibling (스크롤 없음), grid 가
     남은 height 안에서 각 column 별 self scroll. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.lh-admin-body > .lh-editor-context {
  flex-shrink: 0;
}
.lh-admin-body > .lh-pe-grid {
  /* R7-N-fix-2: grid 가 admin-body 의 남은 height 차지 + 자식 column 의
     overflow:auto 가 정상 동작하도록 min-height:0. */
  flex: 1 1 auto;
  min-height: 0;
}

/* ─── Round S5-G-H-R7-N-fix-6: `.lh-editor-fixed-layout` wrapper ─────────
   R7-N-fix-4/5 까지 wrapper 안에 command bar 를 넣었더니 dev 브라우저
   에서 collapse → 화면에서 안 보임. debug marker (강제 height row) 가
   있을 때만 보임 확인 (R7-N-fix-5 Phase 1).

   결론: command bar 는 *wrapper 밖* 으로 분리. wrapper 안에는 grid 만.
   command bar 는 admin-body 의 normal document flow block 으로 subnav
   바로 아래에 위치 — flex calculation 에 참여 안 함 → collapse 불가.

   structure (R7-N-fix-6):
     <div class="lh-admin-body">
       <style>...</style>             ← display:none (자동)
       <section class="lh-editor-command-bar">   ← normal flow block (52px)
       <div class="lh-editor-fixed-layout">       ← internal scroll wrapper
         <div class="lh-pe-grid">                 ← 4 열 grid
           <nav class="lh-pe-nav">                ← col 2 (own scroll)
           <main class="lh-pe-main">              ← col 3 (own scroll)
           <aside class="lh-pe-side">             ← col 4 (own scroll)
         </div>
       </div>
     </div>

   wrapper height: admin-body 의 남은 영역 = admin-body 전체 - command bar
   intrinsic. flex chain 을 안 쓰고 explicit calc 으로 보장 — token 값
   변경 시 자동 반영.                                                      */
.lh-editor-fixed-layout {
  /* admin-body 내 *normal flow* 두 번째 block — 첫 번째 (command bar) 가
     intrinsic 52px 점유하고 나머지를 본 wrapper 가 점유.

     viewport-기준 height calc — shell(100vh - site-header) - subnav
     (--lh-shell-topbar-height) - command bar (--lh-editor-command-bar
     -height) = wrapper 가 가질 수 있는 최대 height.                      */
  height: calc(
    100vh
    - var(--lh-site-header-height)
    - var(--lh-shell-topbar-height)
    - var(--lh-editor-command-bar-height)
  );
  min-height: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.lh-editor-fixed-layout > .lh-pe-grid {
  /* grid 는 wrapper 의 height 를 모두 차지. flex:1 1 auto + min-height:0
     으로 자식 column 의 overflow:auto 가 정상 동작.                       */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
/* admin-body 가 fixed-layout wrapper 를 직접 자식으로 가질 때 — R7-N-fix
   -6 부터 admin-body 는 *natural block* 흐름 (flex column 아님). command
   bar 가 natural block 으로 자기 height 점유, wrapper 는 explicit calc
   height 로 남은 영역 점유.                                              */
.lh-admin-body:has(> .lh-editor-fixed-layout) {
  padding: 0;
  display: block;
  overflow: hidden;
}

/* Round S5-G-H-R7-N-fix-8 Phase 7: 작성기 화면에서는 `.lh-topbar` 의
   `position: sticky; top: 40px` 폐기 — 페이지가 scroll 되지 않는 fixed-
   height 모델 (`.lh-shell:has(.lh-pe-grid) { height: calc(...); overflow:
   hidden }`) 에서는 sticky 가 무의미하고, 일부 환경에서 sticky 의 `top`
   offset 이 잘못 적용되어 topbar 가 자기 자리 (y=40-106) 아래 command bar
   area (y=106+) 까지 painting 영역을 가지는 회귀 발생. 사용자 Phase 6
   debug 시각 확인 결과 확정.

   해결: 작성기 분기에서 topbar 를 `position: static` 으로 강제 — natural
   document flow 안에서 maincol flex column 의 첫 자식으로만 동작. cb 와
   geometrically 겹칠 가능성 0.

   본 selector 는 `.lh-shell:has(.lh-pe-grid)` 안 으로 한정 — 비-작성기
   화면 (workspace list / profile / forum_submission_list 등) 은 기존
   sticky 정책 유지.                                                      */
.lh-shell:has(.lh-pe-grid) .lh-topbar {
  position: static;
  top: auto;
}

/* ── Topbar inside admin ────────────────── */
/* 좌측 .lh-aside-brand(프로필 영역) 와 동일 y=0 (shell 내부) 부터 시작. 두
   영역의 첫 자식이 같은 y-position 에서 시작하도록 정렬 — position:sticky
   폐기. 3000 globals.css .lh-topbar 와 1:1 동일. */
.lh-topbar {
  min-height: var(--lh-shell-topbar-height);
  background: var(--surface);
  border-bottom: var(--lh-profile-border-width) solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  /* 작업실 2차 nav — page scroll 모델에서 *sticky 영역*. 글로벌 .lh-topnav
     (sticky top:0) 바로 아래에 viewport 기준 고정. 좌측 lh-aside (sticky
     top:site-header-height) 와 같은 y-position 에서 시작 (visual baseline). */
  position: sticky;
  top: var(--lh-site-header-height);
  z-index: 40;
}
.lh-bc { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 500; }
.lh-bc .sep { color: var(--border2); }
.lh-bc .cur { color: #000; font-weight: 500; }
.lh-bc-link { color: #000; cursor: pointer; }

/* Round S5-G-H-R7-N-fix-8 Phase 4: `.lh-topbar` 안 메뉴 노출 안정화.
   사용자 보고 — topbar 컨테이너는 보이지만 안에 있는 4 메뉴 (`작업 목록` /
   `새 아카이브 작성기` / `새 포럼 작성기` / `FORUM 투고관리`) 가 화면에 안
   보임. 서버 측 HTML 에는 정상 emit + CSS 에 hidden rule 없음 — 실제 원인은
   flex sizing / wrapping 으로 추정.
     · `.lh-topbar > .lh-bc` — flex:1 1 auto + min-width:0 + overflow:visible.
       기존 default flex (`0 1 auto`) + implicit `min-width: auto` 가 좁은
       viewport 에서 의도치 않은 sizing 회귀 가능 — explicit grow + 0 min
       으로 명시.
     · `.lh-topbar .lh-tnm` — flex-wrap:nowrap + visibility:visible + opacity:1
       + overflow:visible. 메뉴 가로 wrap 방지.
     · `.lh-topbar .lh-tnm-item` — white-space:nowrap + flex-shrink:0. 텍스트
       wrap 차단 + 압박 받아도 width 축소 차단.
     · `.lh-topbar-right` — flex:0 0 auto 명시 (좌측 메뉴 침범 차단).
   본 selector 들은 모두 `.lh-topbar` 안 으로 scope 한정 — global `.lh-bc`
   사용처 (`templates/{admin_panel,authoring,operations}/_shell.html` 의 topbar
   안 만 검증) 외 다른 화면 영향 없음.                                       */
.lh-topbar > .lh-bc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}
.lh-topbar .lh-tnm {
  flex-wrap: nowrap;
  visibility: visible;
  opacity: 1;
  overflow: visible;
}
.lh-topbar .lh-tnm-item {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Topbar 메뉴 (dashboard / upload / list) ──
   shell 내부 .lh-topbar 안에서 사용되는 보조 nav 버튼. 저자/편집자/운영자
   3개 Django shell (templates/authoring/_shell.html, admin_panel/_shell.html,
   operations/_shell.html) 이 모두 동일 class contract 로 사용 — 화면별로
   별도 button style 을 두지 않는다.

   line-height 명시 (1.5) 이유:
     body 의 line-height 1.7 이 상속되면 padding 동일해도 버튼 높이가
     ~2.5px 더 커진다 → 3000 Next.js workspace topbar (WorkspaceNavLinks
     의 px-3.5 py-1.5 Tailwind 유틸, preflight line-height 1.5) 보다 buton
     이 시각적으로 커 보이는 회귀가 운영자/관리자 화면에서 반복됐다.
     본 explicit 1.5 가 그 회귀를 차단한다.

   border: 1px solid transparent + box-sizing: border-box 이유:
     같은 화면에서 글로벌 헤더의 작업실 복귀 버튼 (.lh-nav-workspace-return) 은
     `border: 1px solid transparent` 가 있어 outer box 가 32.75px. 본 보조 nav
     버튼이 border 가 없으면 outer box 가 30.75px 로 2px 차이가 생겨 같은 화면
     위/아래에서 같은 "작업실/메뉴 버튼" 으로 인지되는 두 요소의 높이가 어긋난다.
     transparent 1px border 를 두면 active/inactive 둘 다 32.75px 로 정렬된다.
     active 상태는 본 border 를 override 하지 않아야 height 가 흔들리지 않음 —
     아래 .lh-tnm-item.active rule 은 background/color 만 다루고 border 는
     base 의 transparent 를 그대로 상속한다. */
.lh-tnm { display: flex; gap: 4px; align-items: center; }
.lh-tnm-item {
  display: inline-flex; align-items: center;
  box-sizing: border-box;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600; color: #000;
  line-height: 1.5;
  text-decoration: none; cursor: pointer;
  transition: background-color .14s, color .14s;
}
.lh-tnm-item:hover {
  background: var(--surface2); color: var(--accent);
  text-decoration: none;
}
.lh-tnm-item.active,
.lh-tnm-item.active:hover,
.lh-tnm-item.active:focus,
.lh-tnm-item[aria-current="page"],
.lh-tnm-item[aria-current="page"]:hover,
.lh-tnm-item[aria-current="page"]:focus {
  /* border 는 base 의 1px transparent 그대로 — active 가 border 를 새로 선언
     하면 height 가 흔들리므로 background/color/font-weight 만 다룬다. active
     상태는 *현재 위치* 표시이므로 hover/focus 해도 시각 변화가 없어야 한다
     (active rule 을 :hover/:focus 까지 함께 묶어 일반 :hover (background var
     (--surface2), color accent) 가 override 되지 않게).
     R6-hotfix-3: admin shell `_shell.html` 의 active 메뉴는 더 이상 <span>
     이 아니라 *<a href> 그대로* — 모든 화면에서 클릭 가능. cursor 는 base
     `.lh-tnm-item` 의 `cursor: pointer` 를 그대로 상속해 link 어포던스를
     유지한다 (이전의 `cursor: default` override 제거).
     2026-05-25 hotfix: `[aria-current="page"]` selector 추가 — `.active` class
     누락된 경우에도 active 표시가 누락 없이 적용. Next.js EditorSubmenu /
     Django partial 둘 다 active 항목에 aria-current 를 부착하므로 dual selector
     가 빠짐없이 매칭. */
  background: var(--accent-s);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* ── 좁은 화면에서 작업실 shell 을 세로로 접는다
   (LEARNING-WRITER-MOBILE-OVERFLOW-HARDENING-1) ──────────────────────────
   `.lh-aside` 는 지금까지 **모든 폭에서** `width/min-width: 180px;
   flex-shrink: 0` 이었다. 360px 에서 그것은 viewport 의 **절반**이고, 남은
   180px 에서 frame 의 좌우 padding 을 빼면 본문 열이 **132px** 다(실측).
   그 폭에서는 어떤 입력 칸도 성립하지 않고, 메타 표(`max-content` 열)가
   404.8px 까지 밀려 document 가 45px 넘쳤다. overflow 의 최초 owner 는
   작성기 컴포넌트가 아니라 이 shell 이었다.

   ── 경계 640 은 측정으로 골랐다 ─────────────────────────────────────
   aside 180 + frame padding 을 뺀 본문 열: 640→397 · 540→297 · 430→202 ·
   390→162 · 360→132. 본문이 320px 아래로 떨어지는 지점이 약 548px 이라 그
   바로 위의 **기존 token**(Tailwind `sm` = 640)을 쓴다. 640 이상은 한 픽셀도
   바뀌지 않는다 — 768·1024 tablet layout 을 그대로 둔다.

   ── 작성기 viewport-lock 과 충돌하지 않는다 ──────────────────────────
   writer 모드 높이 고정은 이미 `@media (min-width: 1024px)` 전용이다. 1024
   미만은 원래 document scroll 모델이라 세로로 쌓아도 이중 스크롤이 없다.

   ── 순서는 DOM 그대로다 ──────────────────────────────────────────────
   CSS `order` 를 쓰지 않는다. aside → maincol 순서가 그대로 "작성기 nav →
   본문" 이 되어 모바일에서 자연스럽다.

   이 블록은 위 네 base 선언(.lh-shell/.lh-aside/.lh-topbar/.lh-tnm) **전체
   뒤**에 있다. media query 는 특정도를 올리지 않아서, 앞에 두면 같은 특정도
   끼리 뒤가 이겨 조용히 무시된다. */
@media (max-width: 639px) {
  .lh-shell {
    flex-direction: column;
  }
  .lh-aside {
    width: 100%;
    min-width: 0;
    /* sticky + viewport 높이 고정을 푼다. 세로로 쌓인 rail 이 화면 높이를 전부
       차지하면 본문이 화면 밖으로 밀려 첫 화면에서 아무 일도 할 수 없다. */
    position: static;
    min-height: 0;
    max-height: none;
    overflow-y: visible;
    /* 세로 배치에서 오른쪽 세로선은 의미가 없다 — 아래쪽 실선으로 바꾼다. */
    border-right: 0;
    border-bottom: var(--lh-profile-border-width) solid var(--border);
  }
  /* 좌우 28px padding 은 좁은 화면에서 내용 폭을 그대로 깎는다. 간격을 0 으로
     만드는 것이 아니라 화면에 맞게 줄인다. */
  .lh-topbar {
    padding: 0 12px;
  }
  /* 작성기 submenu 는 줄바꿈한다 — 스크롤 속 항목은 없는 것과 같다. */
  .lh-tnm {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ── Forms grid utility ─────────────────── */
.lh-form-grid > .lh-fg-span2 { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .lh-form-grid { grid-template-columns: 1fr; }
  .lh-form-grid > .lh-fg-span2 { grid-column: 1; }
}

/* ── Stats cards ────────────────────────── */
.lh-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width:800px){ .lh-stats-grid{ grid-template-columns:repeat(2,1fr);} }
.lh-stat-card { background: var(--surface); border: 1.5px solid var(--border);
                border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow); }
.lh-stat-card.accent { border-left: 3px solid var(--accent); }
.lh-stat-card.ok     { border-left: 3px solid var(--green); }
.lh-stat-card.warn   { border-left: 3px solid var(--orange); }
.lh-stat-lbl { font-size: 14px; font-weight: 500; text-transform: none;
               letter-spacing: 0; color: #000; margin-bottom: 8px; }
.lh-stat-val { font-size: 28px; font-weight: 700; font-family: var(--font-mono);
               color: var(--text); line-height: 1; }
.lh-stat-sub { font-size: 14px; color: #000; margin-top: 5px; }

/* ── Upload zone ────────────────────────── */
.lh-upload-zone {
  display: block;
  border: 2px dashed var(--border2); border-radius: 10px;
  padding: 14px 20px; text-align: center; cursor: pointer;
  background: var(--surface2); transition: all .18s;
}
.lh-upload-zone:hover { border-color: var(--accent); }
.lh-upload-zone.filled { border-color: var(--green); background: rgba(26,122,66,.04); }
.lh-upload-icon { font-size: 32px; margin-bottom: 8px; }
.lh-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 8px;
  background: var(--surface); border: 1.5px solid var(--border);
  color: #000; font-size: 14px; font-weight: 500;
  margin-bottom: 10px;
}
.lh-upload-zone:hover .lh-upload-btn { border-color: var(--accent); color: var(--accent); }
.lh-upload-main { font-size: 14px; color: #000; font-weight: 500; }
.lh-upload-sub  { font-size: 12px; color: #000; margin-top: 4px; }

/* ── Bars ───────────────────────────────── */
.lh-prog-bar-wrap { background: var(--surface3); border-radius: 6px;
                     height: 8px; overflow: hidden; }
.lh-prog-bar-fill { height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 6px; transition: width .5s; }

.lh-miss-bar { width: 64px; height: 5px; background: var(--border);
               border-radius: 3px; overflow: hidden; display: inline-block; }
.lh-miss-fill { height: 100%; background: var(--green); border-radius: 3px; }

/* ── Editor (authoring) ─────────────────── */
.lh-ai-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 13px; background: rgba(109,69,196,.06);
  border: 1.5px solid rgba(109,69,196,.18);
  border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
}
.lh-ai-label { font-size: 12px; color: var(--purple); font-weight: 700; }
.lh-ai-actions { margin-left: auto; display: flex; gap: 6px; }

.lh-editor-body {
  background: white; border: 1.5px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px 22px; min-height: 280px;
  font-size: 14px; line-height: 1.9; color: var(--text);
  outline: none; white-space: pre-wrap;
}
.lh-editor-body:focus { border-color: var(--accent); }
.lh-user-added { background: rgba(26,122,66,.1); color: var(--green);
                 border-bottom: 1.5px solid rgba(26,122,66,.3); }
.lh-ai-original { background: rgba(109,69,196,.08); color: var(--purple);
                  text-decoration: line-through; opacity: .6; font-size: 12px; }

/* ── Right sidebar (authoring/archive) ──── */
.lh-rs { width: 268px; background: var(--surface);
         border-left: 1.5px solid var(--border); overflow-y: auto;
         flex-shrink: 0; }
.lh-rs-sec { padding: 16px; border-bottom: 1px solid var(--border); }
.lh-rs-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
               letter-spacing: .8px; color: var(--text3); margin-bottom: 10px; }
.lh-prog-item { display: flex; justify-content: space-between; align-items: center;
                padding: 5px 0; font-size: 12.5px; }
.lh-p-done    { color: var(--green); }
.lh-p-active  { color: var(--accent); font-weight: 700; }
.lh-p-edited  { color: var(--orange); }
.lh-p-pending { color: var(--text3); }

/* ── Section nav (authoring) ────────────── */
.lh-secnav { width: 220px; background: var(--surface);
             border-right: 1.5px solid var(--border);
             overflow-y: auto; flex-shrink: 0; }
.lh-secnav-head { padding: 16px 16px 8px; font-size: 10.5px;
                   font-weight: 700; text-transform: uppercase;
                   letter-spacing: 1px; color: var(--text3); }
.lh-secnav-item {
  padding: 10px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  border-left: 3px solid transparent; transition: all .12s;
  text-decoration: none; color: inherit;
}
.lh-secnav-item:hover { background: var(--surface2); text-decoration: none; }
.lh-secnav-item.active { background: var(--accent-s); border-left-color: var(--accent); }
.lh-secnav-item.done { color: var(--green); }
.lh-secnav-item.user-edited { border-left-color: var(--orange); }
.lh-secnav-item .s-num { font-size: 10.5px; font-family: var(--font-mono);
                         color: var(--text3); min-width: 18px; }
.lh-secnav-item .s-name { font-size: 13px; flex: 1; }
.lh-edited-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ── Auth pages ─────────────────────────── */
.lh-auth-shell { max-width: 420px; margin: 60px auto; padding: 0 20px; }
.lh-auth-card { background: var(--surface); border: 1.5px solid var(--border);
                border-radius: 12px; padding: 32px; box-shadow: var(--shadow-md); }
.lh-auth-title { font-family: var(--font-heading); font-size: 22px;
                 font-weight: 600; margin-bottom: 6px; }
.lh-auth-sub { font-size: 13px; color: var(--text3); margin-bottom: 24px; }

/* ── Editor context banner (dataset / article 에디터 공용) ──
   현재 작업 중인 콘텐츠 제목을 본문 상단 좌측에 한 줄짜리 정보 라인으로
   알린다. lh-pe-grid 위에 풀 너비로 배치되어 좌/우 사이드보다 먼저 보이고,
   "데이터셋:" / "ID:" / "데이터논문:" / "관련 데이터셋:" 라벨은 본문 검정,
   title / ID 값은 3000 공개 페이지를 새 탭으로 여는 accent 톤 링크. */
.lh-editor-context {
  padding: 14px 22px;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  /* 외곽에서 상속될 수 있는 잘림 규칙을 차단해 어떤 제목도 잘리지 않게 한다. */
  overflow: visible;
  /* 두 정보 라인(데이터논문 / 관련 데이터셋)을 같은 row 에 100px 간격으로 배치.
     화면이 좁아지면 자연스럽게 두 번째 라인이 다음 줄로 wrap. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 100px;
}
.lh-editor-context-line {
  display: flex; align-items: baseline; gap: 6px;
  flex-wrap: wrap; line-height: 1.5;
  /* 라인 내부 텍스트도 가운데 정렬 유지 */
  justify-content: center; text-align: center;
}
.lh-editor-context-label {
  font-size: 14px; font-weight: 500; color: var(--text);
}
/* title / id 는 <a target="_blank"> 로 렌더 — 공개 데이터셋·데이터논문 페이지로
   이동. 색은 accent 톤 유지, 기본 underline off / hover 시 underline. */
a.lh-editor-context-title {
  font-size: 14px; font-weight: 700; color: var(--accent);
  text-decoration: none;
  /* 자연 줄바꿈 — 한국어 어절 단위, 매우 긴 ASCII 식별자도 안전 */
  word-break: keep-all; overflow-wrap: anywhere;
  white-space: normal;
  /* 어떤 부모에도 적용된 잘림 규칙을 명시적으로 무력화 */
  overflow: visible;
  text-overflow: clip;
  /* flex 자식이 부모 폭을 초과하지 않고 안에서 wrap */
  min-width: 0; flex: 0 1 auto;
}
a.lh-editor-context-title:hover { text-decoration: none; color: var(--accent-h); }
a.lh-editor-context-id {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
a.lh-editor-context-id:hover { text-decoration: none; color: var(--accent-h); }
.lh-editor-context-sep {
  font-size: 13px; color: var(--text2);
}

/* ── Misc ───────────────────────────────── */
.lh-divider { height: 1px; background: var(--border); margin: 24px 0; }
.lh-text-center { text-align: center; }
.lh-mt-sm { margin-top: 8px; }
.lh-mt-md { margin-top: 16px; }
.lh-mt-lg { margin-top: 24px; }
.lh-mb-md { margin-bottom: 16px; }
.lh-flex-end { display: flex; justify-content: flex-end; gap: 10px; }
.lh-flex-between { display: flex; justify-content: space-between; gap: 10px; }
.lh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width:720px) { .lh-grid-2 { grid-template-columns: 1fr; } }

/* ── Hero (home) ────────────────────────── */
.lh-hero {
  background: var(--surface); padding: 30px 24px 10px;
  border-bottom: 1.5px solid var(--border);
}
.lh-hero-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.lh-hero-title { font-family: var(--font-heading); font-size: 38px;
                 font-weight: 600; line-height: 1.2; margin-bottom: 14px; }
.lh-hero-sub { font-size: 15px; color: var(--text2); max-width: 680px;
               margin: 0 auto 24px; line-height: 1.7; }

.lh-card-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width:800px) { .lh-card-list { grid-template-columns: 1fr; } }

.lh-list-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 18px 20px;
  display: block; text-decoration: none; color: inherit;
  transition: all .14s;
}
.lh-list-card:hover {
  border-color: var(--accent); transform: translateY(-1px);
  text-decoration: none; box-shadow: var(--shadow-md);
}
.lh-list-card-eyebrow { font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--accent); margin-bottom: 6px; }
.lh-list-card-title { font-family: var(--font-heading); font-size: 17px;
  font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
.lh-list-card-meta { font-size: 11.5px; color: var(--text3);
                     display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Pill ───────────────────────────────── */
.lh-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-s); color: var(--accent);
  border: 1px solid rgba(26,86,219,.18); border-radius: 20px;
  padding: 3px 10px; font-size: 11.5px; font-weight: 600;
}

/* ============================================================
   Paper Editor (admin step 4 통합 편집기)
   사용자 mockup HTML의 레이아웃·톤을 그대로 재현.
   ============================================================ */

/* ── 상단 breadcrumb 보강 ── */
.lh-bc-back { color: var(--text2); font-size: 12.5px; text-decoration: none; }
.lh-bc-back:hover { color: var(--accent); }
.lh-bc-pipe { color: var(--border2); margin: 0 4px; }
.lh-bc-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.lh-bc-id { font-size: 12px; color: var(--text3); font-family: var(--font-mono); }
.lh-bc-sub { font-size: 12px; color: var(--text3); margin-left: 4px; }

.lh-status-pill .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  animation: lh-pulse 1.6s ease-in-out infinite;
}
@keyframes lh-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── 3컬럼 그리드 ──
   가운데 본문이 데이터셋 아카이브 상세(max-width 920px) 본문과 비슷한 폭을
   확보하도록 좌·우 컬럼 합계를 조정. 우측 카드는 "이 데이터셋으로 데이터논문
   작성" 등 긴 버튼 문구가 한 줄에 들어가도록 폭을 키우고, 그만큼 좌측 두
   컬럼에서 줄여 가운데 1fr 폭은 그대로 유지.                                */
.lh-pe-grid {
  display: grid;
  /* 3000 React WorkspaceLayoutShell 와 동일 column boundary.
     col widths 는 :root 의 --lh-shell-context-width / --lh-shell-rail-width
     토큰으로 통일. col 1 (left aside) 은 grid 바깥의 lh-aside 가 담당하므로
     본 grid 의 첫 칼럼은 section context (col 2 in 4-column layout).        */
  grid-template-columns: var(--lh-shell-context-width) 1fr var(--lh-shell-rail-width);
  /* Round S5-G-H-R7-N-fix-2: page scroll → editor-body-internal-scroll 전환.
     grid 는 admin-body (flex column, viewport 고정 height) 안에서 *남은
     height 를 모두 차지* (`flex: 1 1 auto; min-height: 0` 이 admin-body 자식
     rule 에서 적용). 본 rule 의 align-items: stretch 가 각 column 을 grid
     row 전체 height 로 stretch — column 내부 overflow:auto 가 정상 동작.
     min-height 는 *작성기 외* 화면 호환을 위해 유지 (selector :has() 미지원
     browser 의 fallback). */
  min-height: calc(100vh - var(--lh-editor-fixed-top-offset));
  align-items: stretch;
}
/* 우측 사이드바가 비는 화면 (Phase 2 최종 — editor/admin dataset editor 등) —
   3-col → 2-col 로 줄여 본문이 우측 빈 공간을 흡수. lh-pe-side 자체는 템플릿
   에서 미렌더되므로 grid 셀이 빈 채로 남지 않는다. */
.lh-pe-grid.is-sidebarless {
  grid-template-columns: var(--lh-shell-context-width) 1fr;
}
/* is-sidebarless 일 때 main 의 left edge 가 *3-col 모드와 동일* (col 2 시작점)
   에 머무르도록 auto-margin 무력화. 3-col 에서는 col 2 폭이 본문 max-width 와
   비슷해 margin auto 효과가 거의 0 이지만, 2-col 에서는 col 2 가 우측 rail
   폭 만큼 더 넓어져 본문이 *우측으로 이동*하는 회귀가 발생 (Step 3 데이터셋
   작성 admin 화면이 다른 step 보다 main 시작점이 오른쪽으로 밀려 보이던 버그).
   margin-right 만 auto 로 두면 본문이 좌측에 고정되고 우측은 자연스럽게 비어
   진다 — 모든 step 의 main left edge 가 col 2 시작점 (= section nav 우측)
   에서 일관되게 시작.                                                            */
.lh-pe-grid.is-sidebarless > .lh-pe-main {
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 1280px) {
  .lh-pe-grid { grid-template-columns: 208px 1fr 288px; }
  .lh-pe-grid.is-sidebarless { grid-template-columns: 208px 1fr; }
  .lh-pe-nav { width: 208px; }
}
@media (max-width: 1024px) {
  .lh-pe-grid,
  .lh-pe-grid.is-sidebarless { grid-template-columns: 1fr; }
  .lh-pe-nav, .lh-pe-side,
  .lh-pe-grid-empty-nav, .lh-pe-grid-empty-side { display: none; }
}

/* ── 빈 placeholder 칼럼 ── (upload / analysis / profile 등 좌·우 칼럼에
   콘텐츠가 없는 화면에서 본문 폭을 dataset/article editor 와 동일하게
   유지하기 위한 빈 grid 셀. 폭만 reserve 하고 border 는 적용하지 않는다 —
   콘텐츠가 있는 .lh-pe-nav / .lh-pe-side 의 좌·우 구분선과 시각 구분.
   position:fixed/sticky 는 미적용 — 비어 있어 스크롤 따라 고정될 콘텐츠
   없음. */
.lh-pe-grid-empty-nav {
  grid-column: 1;
  background: #fff;
}
.lh-pe-grid-empty-side {
  grid-column: 3;
  background: #fff;
}

/* ── 좌: 섹션 네비 (col 2) ──
   .lh-pe-grid 의 첫 셀로 in-flow 배치. height:100% 로 grid row height 를 채워
   내부 콘텐츠가 길어지면 본 컬럼 안에서만 세로 스크롤 (다른 컬럼·페이지 무관). */
.lh-pe-nav {
  border-right: 1.5px solid var(--border);
  padding: 22px 0;
  background: #fff;
  /* Round S5-G-H-R7-N-fix-2: sticky 폐기. 작성기 shell 이 viewport 고정
     height + admin-body flex column 모델로 전환되면서, grid 가 admin-body
     의 남은 height 를 *flex item 으로* 차지 + align-items: stretch 로 각
     column 이 grid row 전체 height. 따라서 nav 자체는 *고정 column*
     으로서 움직이지 않고, 안의 list 만 자체 overflow-y:auto 로 스크롤.
     sticky 가 일부 browser 에서 깨지던 회귀가 *구조적으로* 해소된다.
       · position: static — sticky 폐기.
       · min-height: 0 — flex/grid stretch 안에서 overflow:auto 정상 동작.
       · max-height: 100% / overflow-y: auto — 자체 영역 안에서만 스크롤.
  */
  position: static;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.lh-pe-nav-head {
  font-family: var(--font-heading);
  font-size: 20px !important; font-weight: 600;
  color: #000; padding: 4px 16px 14px;
}
/* LOGHOOD ARCHIVE editor 메인 타이틀 — 전역 표준.
   "데이터논문 에디터" / "데이터셋 에디터" 등 editor 헤드라인 통일.
   템플릿에서 inline-style 로 덮지 말고 항상 이 클래스를 사용. !important 는
   다른 규칙·미디어 쿼리에서 덮이는 것을 막기 위한 의도. */
.editor-title {
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.4;
}
.lh-pe-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 16px; text-decoration: none;
  color: #000; font-size: 14px;
  border-left: 3px solid transparent;
  transition: all .12s;
}
.lh-pe-nav-item:hover { background: var(--surface3); color: var(--accent); text-decoration: none; }
.lh-pe-nav-item.is-active {
  background: var(--accent-s); color: var(--accent);
  border-left-color: var(--accent); font-weight: 600;
}
.lh-pe-nav-item.is-done:not(.is-active) { color: #000; }
.lh-pe-nav-num {
  font-size: 13px; color: #000;
  min-width: 22px; flex-shrink: 0;
}
.lh-pe-nav-item.is-active .lh-pe-nav-num { color: var(--accent); }
.lh-pe-nav-name { flex: 1; }
/* S5-G-H-R5: section nav 상태 dot — ARCHIVE / FORUM 작성기 공통.
   기존 ✓ / ✏️ 텍스트 마크를 작은 색 dot 으로 통일. markup 은 빈 span +
   modifier class (.is-complete / .is-edited). */
.lh-pe-nav-mark {
  width: 7px; height: 7px; border-radius: 999px;
  flex-shrink: 0; display: inline-block;
  background: transparent;
}
.lh-pe-nav-mark.is-complete { background: var(--green); }
.lh-pe-nav-mark.is-edited   { background: var(--purple); }

/* ── 중: 본문 편집기 ──
   가운데 1fr 셀에 모두 채워지지만 큰 모니터에서는 무한정 늘어나지 않도록
   max-width로 상한 (`--lh-editor-main-max-width` 1080 — outer wrapper).
   내부 reading column 은 `.lh-editor-*-body` (max-width 1040 — editor) 가
   별도로 관리.

   padding 좌·우 40px — 사용자 spec (본문 표준 폭 최종 확정 라운드). outer
   1080 안에서 본문 1040 reading column 이 자연스럽게 자리잡고 좌·우 여백
   40px 가 안정적으로 보이게.                                                */
.lh-pe-main {
  grid-column: 2;
  padding: 36px 40px 60px;
  max-width: var(--lh-editor-main-max-width); width: 100%;
  margin: 0 auto;
  /* Round S5-G-H-R7-N-fix-2: page scroll → editor-internal scroll 전환.
     작성기 shell 이 viewport 고정 height 모델로 바뀌면서 본 본문 column 이
     editor body 안의 *주 scroll 영역* 이 된다. min-height:0 + overflow-y:auto
     로 본 column 안에서만 세로 스크롤하고, command bar / 2 열 nav / 4 열
     side 는 영향 받지 않는다.

     Round S5-G-H-R7-N-fix-2-tune: `scrollbar-gutter: stable` 추가 —
     scroll 출현/소멸 시 본문 width 가 흔들리지 않게 scrollbar 자리를
     영구 확보. scrollbar 가 본문 우측 가장자리에 고정 위치 — 옛 어색한
     "중앙 떠 있는 scrollbar" 느낌 완화. main wrapper / body card 토큰
     (1080/1040 → 1200/1200) 도 함께 확장되어 3 열이 grid cell 을 모두 채움.
     주의: max-width: 1200px / margin: 0 auto 는 본문 reading column 정렬
     SoT — 본 변경으로도 유지. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
/* 편집 본문 reading column — Step 3·4·5 모두 같은 폭 (1040, editor-body-width).
   public 본문 (`.lh-public-readable` 등) 의 960 보다 약간 넓어 입력 UI / 카드
   다루기 쉽도록.

   class 변형:
     · `.lh-editor-public-body`  — 공통 (모든 editor 작성 본문)
     · `.lh-editor-dataset-body` — 데이터셋 전용 마커 (style 동일, semantic)
     · `.lh-editor-article-body` — 데이터논문 전용 마커 (style 동일, semantic)
   세 class 모두 동일 폭. dataset / article 이유로 폭을 다르게 두지 않는다. */
.lh-editor-public-body,
.lh-editor-dataset-body,
.lh-editor-article-body {
  max-width: var(--lh-editor-body-width);
  width: 100%;
  margin: 0 auto;
}

/* 공개 본문 reading column — /archive/datasets/<id>, /archive/articles/<id>,
   /forum/articles/<id> 등 public detail 페이지에서 사용. editor 본문보다
   compact (960) 한 read-optimized width. 좌·우 padding 32px 로 모바일 ↔ wide
   viewport 일관 여백. */
.lh-public-main,
.lh-dp-main,
.lh-dataset-public-main,
.lh-article-public-main,
.lh-public-readable {
  max-width: var(--lh-public-body-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* wide block 예외 — 본문 reading column 안에서도 *큰 표 / figure / 변수표 /
   파일표* 처럼 가로 폭이 더 필요한 블록은 1120px 까지 확장 허용. parent
   wrapper 가 더 좁으면 100% 사용 (parent 폭에 자연 cap). 적용 권장:
     · public table.lh-public-wide-block ↔ editor table.lh-editor-wide-block
     · figure / 코드 가용성 표 / 변수 설명 표 등                              */
.lh-public-wide-block,
.lh-editor-wide-block {
  max-width: min(var(--lh-wide-block-max-width), 100%);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ── 작업실 / 작성기 sticky 컬럼 thin scrollbar ──
   자체 overflow-y: auto 를 갖는 컬럼에 thin scrollbar 적용. Round S5-G-H-
   R7-N-fix-2 이후 3 열 main (.lh-pe-main) 도 작성기 *주 scroll 영역* 이
   되어 본 group 에 포함 — 본문과 사이드/네비 scroll 두께를 통일 (Phase
   4-F-8 unification, 사용자 명시 회귀: 본문은 두꺼운 OS 기본 scrollbar,
   사이드는 thin 으로 비대칭).
   대상:
     · 1 열 step nav  (.lh-aside)
     · 2 열 section nav (.lh-pe-nav)
     · 3 열 main 본문 (.lh-pe-main) — R7-N-fix-2 부터 internal scroll
     · 4 열 assist rail (.lh-pe-side)
   Firefox `scrollbar-width: thin` + Chromium `::-webkit-scrollbar` pseudo
   로 6px 폭, transparent track, 반투명 thumb. 스크롤바를 *완전히 숨기지
   않는다* — 접근성을 위해 thumb 은 항상 보인다.                            */
.lh-aside,
.lh-pe-nav,
.lh-pe-main,
.lh-pe-side {
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 24, 39, 0.26) transparent;
}
.lh-aside::-webkit-scrollbar,
.lh-pe-nav::-webkit-scrollbar,
.lh-pe-main::-webkit-scrollbar,
.lh-pe-side::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.lh-aside::-webkit-scrollbar-track,
.lh-pe-nav::-webkit-scrollbar-track,
.lh-pe-main::-webkit-scrollbar-track,
.lh-pe-side::-webkit-scrollbar-track {
  background: transparent;
}
.lh-aside::-webkit-scrollbar-thumb,
.lh-pe-nav::-webkit-scrollbar-thumb,
.lh-pe-main::-webkit-scrollbar-thumb,
.lh-pe-side::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 39, 0.26);
  border-radius: 999px;
}
.lh-aside::-webkit-scrollbar-thumb:hover,
.lh-pe-nav::-webkit-scrollbar-thumb:hover,
.lh-pe-main::-webkit-scrollbar-thumb:hover,
.lh-pe-side::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 24, 39, 0.36);
}
.lh-pe-eyebrow {
  font-size: 12px; font-weight: 500;
  color: #000; text-transform: uppercase; letter-spacing: .8px;
}
.lh-pe-title {
  /* 작성기 (dataset_editor / article_editor) 의 페이지 제목. .lh-page-title  */
  /* 과 동일 토큰을 사용해 모든 workspace 화면 제목 통일.                       */
  font-family: var(--font-heading);
  font-size: var(--lh-page-title-font-size);
  font-weight: var(--lh-page-title-font-weight);
  color: #000; margin: 8px 0 6px;
  line-height: var(--lh-page-title-line-height);
}
.lh-pe-sub {
  font-size: 14px; color: #000;
  margin-bottom: 22px; line-height: 1.6;
}

/* AI 초안 카드 (mockup의 보라 라벨) */
.lh-pe-ai-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.lh-pe-ai-head {
  /* AI 카드 머리바 — 우측에 .lh-pe-ai-actions 그룹 (초안 보기 + AI로 다듬기)
     만 배치. 좌측 텍스트/버튼이 사라져 single child 가 되었으므로 flex-end
     로 우측 정렬. */
  display: flex; align-items: center; justify-content: flex-end;
  padding: 9px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.lh-pe-ai-label {
  font-size: 11.5px; font-weight: 600;
  color: var(--purple); letter-spacing: .2px;
}
.lh-pe-ai-actions { display: flex; gap: 6px; }
.lh-pe-ai-btn {
  /* font-size 12px — head 행 좌측 `.lh-pe-tb-meta` (AI 다듬기 N회) 와 동일 크기. */
  font-size: 12px; padding: 4px 9px;
  border: 1px solid rgba(109, 69, 196, .25);
  background: white; color: var(--purple);
  border-radius: 5px; cursor: pointer;
  font-weight: 500;
}
.lh-pe-ai-btn:hover { background: rgba(109, 69, 196, .08); }
/* AI 다듬기 primary 톤 — `.lh-btn-ai` (전체 섹션 AI로 다듬기) 와 동일한
   light purple ghost 로 통일. 두 버튼 모양 일치 정책: 모든 "AI로 다듬기"
   계열 (단일 섹션 / 전체 섹션 / draft edit card 등) 이 같은 색 톤을 공유. */
.lh-pe-ai-btn-primary {
  background: rgba(109, 69, 196, .07);
  color: var(--purple);
  border-color: rgba(109, 69, 196, .2);
}
.lh-pe-ai-btn-primary:hover { background: rgba(109, 69, 196, .12); }

.lh-pe-editor {
  padding: 22px 24px;
  font-family: var(--font-text);  /* 데이터논문과 동일한 명조체 (Noto Serif KR) */
  font-size: 14px; font-weight: 600; line-height: 1.95;
  color: var(--text);
  outline: none;
  min-height: 240px;
  white-space: pre-wrap; word-wrap: break-word;
}
.lh-pe-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text3);
}
.lh-pe-editor:focus { background: rgba(26, 86, 219, .015); }

.lh-pe-compare {
  border-top: 1.5px dashed var(--border);
  padding: 16px 22px;
  background: #fff;
}
.lh-pe-compare-head {
  font-size: 11px; font-weight: 700;
  color: var(--purple); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 1px;
}
.lh-pe-compare-body {
  font-size: 13px; color: var(--text2);
  line-height: 1.85;
}

/* 편집 도구바 */
.lh-pe-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.lh-pe-tb-btn {
  background: white;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px; color: var(--text2);
  cursor: pointer; font-weight: 500;
}
.lh-pe-tb-btn:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); }
.lh-pe-tb-btn b, .lh-pe-tb-btn i { font-family: var(--font-text); }
.lh-pe-tb-btn-ai {
  border: 1px solid rgba(109, 69, 196, .25);
  background: rgba(109, 69, 196, .06);
  color: var(--purple);
}
.lh-pe-tb-btn-ai:hover { background: rgba(109, 69, 196, .12); }
.lh-pe-tb-sep {
  width: 1px; height: 16px; background: var(--border);
  margin: 0 4px;
}
.lh-pe-tb-spacer { flex: 1; }
.lh-pe-tb-meta {
  font-size: 12px; color: #000;
}

/* 좌우 페이저 */
.lh-pe-pager {
  display: flex; justify-content: space-between;
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid var(--border);
  gap: 12px;
}
.lh-pe-pager-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: white;
  text-decoration: none; color: var(--text);
  font-size: 13px;
  transition: all .13s;
  min-width: 0;
  flex: 0 1 auto;
}
.lh-pe-pager-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.lh-pe-pager-btn span { display: flex; flex-direction: column; line-height: 1.2; }
.lh-pe-pager-btn span:not(.lh-pe-pager-arrow) { gap: 2px; min-width: 0; }
.lh-pe-pager-arrow {
  font-size: 17px; color: var(--text3);
  flex-shrink: 0;
}
.lh-pe-pager-btn:hover .lh-pe-pager-arrow { color: var(--accent); }
.lh-pe-pager-dir { font-size: 11px; color: #000; }
.lh-pe-pager-name { font-size: 14px; font-weight: 600; color: #000; }
.lh-pe-pager-next { text-align: right; }

/* ── 우: 사이드바 (col 4) ──
   .lh-pe-grid 의 세 번째 셀로 in-flow 배치. height:100% 로 grid row height 를
   채워 내부 보조 카드 (작성 관리 / 인계 / 공개 / Figure / Table / 등) 가
   길어지면 본 컬럼 안에서만 세로 스크롤. col 3 본문 스크롤과 독립. */
.lh-pe-side {
  grid-column: 3;
  border-left: 1.5px solid var(--border);
  padding: 28px 22px;
  background: #fff;
  font-size: 13px;
  /* Round S5-G-H-R7-N-fix-2: sticky 폐기 — sticky 가 일부 browser 에서
     깨지던 회귀 해소. shell 이 viewport 고정 height + admin-body flex column
     + grid stretch 모델로 전환되면서, 본 col 4 도 grid row 전체 height 를
     차지 + min-height:0 + overflow-y:auto 로 자체 영역 안에서만 스크롤.
     col 3 본문 / 2 열 nav 의 스크롤과 독립. */
  position: static;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.lh-pe-side-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.lh-pe-side-title {
  font-family: var(--font-heading);
  font-size: 16px !important; font-weight: 700;
  color: var(--text); margin-bottom: 10px;
  letter-spacing: .3px;
}

/* 진행 현황 */
.lh-pe-progress { margin-bottom: 12px; }
.lh-pe-progress-bar {
  height: 6px; background: var(--surface3);
  border-radius: 3px; overflow: hidden;
}
.lh-pe-progress-fill {
  height: 100%; background: var(--accent);
  transition: width .3s;
}
.lh-pe-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--text2);
  margin-top: 6px;
}
.lh-pe-progress-meta { color: #000; font-size: 12px; }
.lh-pe-progress-meta strong { color: #000; }
.lh-pe-progress-list {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.lh-pe-progress-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  padding: 3px 0;
}
.lh-pe-progress-num {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text3); min-width: 22px;
}
.lh-pe-progress-name { flex: 1; color: var(--text2); }
.lh-pe-progress-status {
  font-size: 10.5px; flex-shrink: 0;
}
.lh-pe-progress-status.is-active  { color: var(--accent); font-weight: 600; }
.lh-pe-progress-status.is-edited  { color: var(--purple); }
.lh-pe-progress-status.is-done    { color: var(--green); }
.lh-pe-progress-status.is-pending { color: var(--text3); }

/* AI 제안 */
.lh-pe-suggest {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 12px; line-height: 1.55;
  color: var(--text2);
}
.lh-pe-suggest-body strong { color: var(--purple); }
.lh-pe-suggest-sub {
  margin-top: 5px; font-size: 11px;
  color: var(--text3); font-family: var(--font-mono);
}

/* 데이터셋 정보 */
.lh-pe-ds-info {
  display: flex; flex-direction: column; gap: 0;
  font-family: var(--font-heading);
}
.lh-pe-ds-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 12.5px; color: #000;
  border-bottom: 1px dashed var(--border);
}
.lh-pe-ds-row:last-child { border-bottom: none; }
.lh-pe-ds-k { color: #000; }
.lh-pe-ds-v { color: #000; font-weight: 500; }
.lh-pe-ds-link {
  display: block; text-align: center;
  margin-top: 10px; padding: 6px;
  font-size: 11.5px; color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}
.lh-pe-ds-link:hover { background: var(--accent-s); text-decoration: none; }

/* 전체 재생성 */
.lh-pe-regen-card {
  background: #fff;
  border-color: var(--border);
}

/* ============================================================
   Archive 사이드바 — "이 데이터논문 보기" 버튼/메뉴
   ============================================================ */
.lh-rel-paper-wrap { position: relative; margin-bottom: 14px; }

.lh-rel-paper-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(109,69,196,.07), rgba(26,86,219,.05));
  border: 1.5px solid rgba(109,69,196,.22);
  border-radius: 9px;
  color: var(--text); text-decoration: none;
  cursor: pointer;
  font-family: var(--font-heading);
  text-align: left;
  transition: all .14s;
}
.lh-rel-paper-btn:hover {
  border-color: var(--purple);
  box-shadow: 0 2px 10px rgba(109,69,196,.12);
  text-decoration: none;
}
.lh-rel-paper-icon { font-size: 18px; flex-shrink: 0; }
.lh-rel-paper-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lh-rel-paper-label {
  font-size: 12.5px; font-weight: 700;
  color: var(--purple); letter-spacing: .2px;
}
.lh-rel-paper-sub {
  font-size: 10.5px; color: var(--text3);
}
.lh-rel-paper-arrow {
  font-size: 14px; color: var(--purple);
  flex-shrink: 0; transition: transform .15s;
}
.lh-rel-paper-btn.is-open .lh-rel-chevron { transform: rotate(180deg); }

/* 드롭다운 메뉴 */
.lh-rel-paper-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: white;
  border: 1.5px solid rgba(109,69,196,.22);
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  padding: 6px;
  z-index: 20;
  max-height: 360px; overflow-y: auto;
}
.lh-rel-paper-item {
  display: block; padding: 10px 12px;
  border-radius: 6px;
  color: var(--text); text-decoration: none;
  font-family: var(--font-text);
  border-bottom: 1px solid var(--border);
}
.lh-rel-paper-item:last-child { border-bottom: none; }
.lh-rel-paper-item:hover {
  background: rgba(109,69,196,.05);
  text-decoration: none;
}
.lh-rel-paper-item-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.lh-rel-paper-status {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 1px 6px; border-radius: 3px;
}
.lh-rel-paper-status.is-pub { background: rgba(26,122,66,.1); color: var(--green); }
.lh-rel-paper-status.is-sub { background: rgba(217,95,43,.1); color: var(--orange); }
.lh-rel-paper-date {
  font-size: 10.5px; color: var(--text3);
  font-family: var(--font-mono);
}
.lh-rel-paper-item-title {
  font-size: 12.5px; font-weight: 600;
  line-height: 1.4; color: var(--text);
}
.lh-rel-paper-item-author {
  font-size: 10.5px; color: var(--text3);
  margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────
 * v2 Step 1 — 목록 화면 정리 + 반응형 보강
 * ───────────────────────────────────────────────────────── */

/* 홈 hero 버튼 묶음 */
.lh-home-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 20px;
}

/* 카드 빈 상태(grid 전체 폭으로 채움) — 인라인 스타일 대체 */
.lh-card-empty {
  grid-column: 1 / -1;
  color: var(--text3);
}

/* 카드 eyebrow 안의 배지 정렬 */
.lh-list-card-eyebrow .lh-badge {
  margin-right: 6px;
  vertical-align: middle;
}

/* 데이터논문 상태 배지 — 향후 심사 중/게재 등 변형은 .badge-article-status에
   추가 모디파이어 클래스(.badge-in-review, .badge-published 등)로 확장한다. */
.badge-article-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .2px;
  border: 1px solid transparent;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-article-status.badge-pre-review {
  background: #eef3ff;
  color: #1a4aff;
  border-color: #c7d4ff;
}
/* FORUM 학술저널에 게재된 Article — Step 7 공존 정책에서 ARCHIVE 카드의
   "비심사 논문" 뱃지를 대체한다. 같은 카드가 /forum/articles/ 에도
   별도로 노출되므로, 색상은 FORUM 진입을 환기하는 강조 톤으로 둔다. */
.badge-article-status.badge-published-in-forum {
  background: #eef9f1;
  color: #1a7a42;
  border-color: #b8e1c4;
}

/* 반응형 보강 — 모바일에서 폰트 축소 */
@media (max-width: 720px) {
  .lh-hero-title { font-size: 28px; }
  /* .lh-page-title 은 데스크톱과 동일 20px 유지 (전역 통일 기준). */
  .lh-list-card-title { font-size: 15.5px; }
}

/* anchor jump target — sticky 글로벌 topnav(40px) + 내부 topbar(66px) 합계
   106px 만큼 가려지므로 약간 여유를 두고 110px 로 보정한다. 인접 section
   간격(margin-top)도 여기서 처리해 템플릿의 inline style 을 제거한다. */
.lh-anchor-section { scroll-margin-top: 110px; }
.lh-anchor-section + .lh-anchor-section { margin-top: 36px; }
/* 저자 대시보드의 tab 패널은 한 번에 하나만 보이므로(다른 형제는 [hidden]),
   위 인접-sibling 36px 규칙이 시각적으로는 active 패널 위에 빈 공간만 만든다.
   관리자 목록 화면과 동일하게 본문이 .lh-admin-body 패딩 위에서 곧장 시작
   하도록 0 으로 덮는다. */
.lh-author-tab-panel + .lh-author-tab-panel { margin-top: 0; }

/* admin dashboard — 데이터셋/데이터논문 현황을 좌우 2-column 으로,
   각 영역 안 4개 stat card 는 2x2 mini grid 로 배치한다. 모바일에서는
   외곽이 1-column 으로 자연스레 접힌다. */
.dashboard-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dashboard-mini-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .dashboard-summary-row { grid-template-columns: 1fr; }
}

/* 데이터셋·데이터논문 현황 블록 — 각각 한 줄 전체 폭을 차지한다. */
.lh-summary-block { display: block; }

/* 데이터셋·데이터논문 현황 카드 레이아웃.
   - 외곽: flex 로 "전체"(accent, 고정 100px) + 상태 카드 그리드(나머지 폭)를
     좌우 배치. 두 현황이 같은 클래스를 공유 → 동일 규칙이 자동 적용된다.
   - 상태 카드 그리드: 고정 7-column. minmax(0, 1fr) 라 컨테이너 폭이 같으면
     같은 컬럼 위치는 같은 폭. Dataset 7 + Article 6 카드가 동일 위치에서
     수직 정렬된다 (Article 의 column 7 은 빈 칸).
   - Dataset 의 조건부 '기타' 카드 (총 8장이 될 수 있음) 는 row 2 column 1 로
     wrap 되며, 그 컬럼 폭도 다른 컬럼과 동일. */
.lh-dashboard-mini-cards {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.lh-dashboard-mini-cards > .lh-stat-card.accent {
  flex: 0 0 100px;
}
.lh-stat-list {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.lh-dashboard-mini-cards .lh-stat-card { padding: 14px 16px; min-width: 0; }
.lh-dashboard-mini-cards .lh-stat-val { font-size: 24px; }
.lh-dashboard-mini-cards .lh-stat-lbl { white-space: nowrap; }
/* published 카드(.ok)의 녹색 왼쪽 띠는 대시보드 컨텍스트에서는 제거하고
   기본 border 와 동일하게 보이도록 복원. 다른 화면의 .ok 는 영향 없음. */
.lh-dashboard-mini-cards .lh-stat-card.ok {
  border-left: 1.5px solid var(--border);
}

/* ─── FORUM 보조 메뉴 dropdown (Step 72-pre) ────────────────────── */
/* templates/forum/_static_pages_nav.html 가 사용. JS 0 — CSS-only hover */
/* + focus-within 으로 키보드 / 마우스 양쪽 접근. forum/* 6 화면에서 공유. */
.forum-static-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.forum-nav-item {
  position: relative;
}
.forum-nav-trigger { /* dropdown 의 진입 link — 클릭 시 페이지 이동, hover 시 submenu */
  position: relative;
}
.forum-nav-submenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  z-index: 50;
  min-width: 240px;
  padding: 6px 0;
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
.forum-nav-item:hover .forum-nav-submenu,
.forum-nav-item:focus-within .forum-nav-submenu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}
.forum-nav-submenu a {
  display: block;
  padding: 7px 16px;
  color: var(--text2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.forum-nav-submenu a:hover,
.forum-nav-submenu a:focus-visible {
  background: #f6f7f8;
  color: #000;
}

/* =========================================================
   Round S5-G-B: snapshot 상세 모달
   부모 page = archive_editor/save_history.html
   partial   = archive_editor/partials/_save_snapshot_detail.html
   원칙: 흰색 background + 연한 회색 border, 과한 색상 없음,
   기존 lh-pe-side-card / lh-btn 톤과 조화.
   ========================================================= */
.lh-save-history-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lh-save-history-modal[hidden] { display: none; }
.lh-save-history-modal-open { overflow: hidden; }

.lh-save-history-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  cursor: pointer;
}

.lh-save-history-modal__panel {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.lh-save-history-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #e2ddd6);
  background: var(--surface2, #f9f8f6);
}
.lh-save-history-modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text1, #1a1a1a);
}
.lh-save-history-modal__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text2, #444);
}
.lh-save-history-modal__close:hover,
.lh-save-history-modal__close:focus-visible {
  background: #ffffff;
  color: #000;
}

.lh-save-history-modal__body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text1, #1a1a1a);
}

.lh-save-history-modal__placeholder {
  margin: 12px 0;
  padding: 16px;
  background: var(--surface2, #f9f8f6);
  border: 1px dashed var(--border, #e2ddd6);
  border-radius: 6px;
  color: var(--text3, #777);
  font-size: 13px;
  text-align: center;
}
.lh-save-history-modal__error {
  background: #fde8e8;
  border-color: #d33;
  color: #9c1c1c;
}

.lh-save-history-modal__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 4px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--surface2, #f9f8f6);
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 6px;
  font-size: 12.5px;
}
.lh-save-history-modal__meta dt {
  color: var(--text3, #777);
  font-weight: 500;
}
.lh-save-history-modal__meta dd {
  margin: 0;
  color: var(--text1, #1a1a1a);
}

.lh-save-history-modal__section + .lh-save-history-modal__section {
  margin-top: 18px;
}
.lh-save-history-modal__section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2, #444);
  letter-spacing: 0.2px;
}

.lh-save-history-modal__fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 6px;
  margin: 0;
}
.lh-save-history-modal__fields dt {
  color: var(--text3, #777);
  font-size: 12px;
  font-weight: 500;
  padding-top: 2px;
}
.lh-save-history-modal__fields dd {
  margin: 0;
  color: var(--text1, #1a1a1a);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}
.lh-save-history-modal__field-value { color: var(--text1, #1a1a1a); }
.lh-save-history-modal__muted { color: var(--text3, #777); font-style: italic; }

.lh-save-history-modal__sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lh-save-history-modal__section-card {
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 6px;
  padding: 10px 12px;
  background: #ffffff;
}
.lh-save-history-modal__section-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.lh-save-history-modal__section-card-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text1, #1a1a1a);
}
.lh-save-history-modal__section-card-meta {
  font-size: 11px;
  color: var(--text3, #777);
}
.lh-save-history-modal__section-card-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text1, #1a1a1a);
  white-space: pre-wrap;
  word-break: break-word;
}

.lh-save-history-modal__raw {
  margin-top: 18px;
  padding: 10px 12px;
  background: var(--surface2, #f9f8f6);
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 6px;
}
.lh-save-history-modal__raw > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text3, #777);
}
.lh-save-history-modal__raw-pre {
  margin: 10px 0 0;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text2, #444);
  overflow-x: auto;
  max-height: 320px;
}

@media (max-width: 720px) {
  .lh-save-history-modal { padding: 12px; }
  .lh-save-history-modal__panel { max-height: calc(100vh - 24px); }
  .lh-save-history-modal__meta,
  .lh-save-history-modal__fields {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .lh-save-history-modal__fields dt,
  .lh-save-history-modal__meta dt {
    margin-top: 8px;
  }
}