/* 셸·배치 — LLM-wiki v2.0 app.css 에서 포트폴리오에 쓰는 부분만 옮김. components.css 다음에 읽는다.
   시안의 인라인 style 을 클래스로 옮긴 것 · 셸(펼침 메뉴 위치·모바일 시트·토스트) · 화면 배치.
   CSP: HTML 의 style 속성은 쓰지 않는다. JS 의 el.style 은 펼침 메뉴 높이 계산에만. */

html { scroll-padding-top: calc(var(--nav-h) + var(--space-4)); }
html.lw-lock { overflow: hidden; }
body { background: var(--bg); }
.lw-page { min-height: 100vh; display: flex; flex-direction: column; }
.lw-page > main { flex: 1 0 auto; }
.lw-page > main:focus { outline: none; }
.lw-skip { position: absolute; left: 8px; top: -60px; z-index: 90; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--text); color: var(--on-accent); font-size: 14px; }
.lw-skip:focus { top: 8px; }
.lw-skip:focus-visible, .lw-toasts :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }   /* .lw-page 밖 — 초점 링 따로 */
[hidden] { display: none !important; }
/* 가로 스크롤 상자 안의 .lw-sr(position:absolute)가 .lw-page 를 넘치게 하지 않도록 기준 상자를 둔다 */
.lw-small { font-size: 14px; line-height: 20px; }
.lw-btn-reset { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.lw-plain-btn { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; }
.lw-plain-btn:hover { text-decoration: underline; }

/* ---------- 상단 메뉴 · 펼침 메뉴 ---------- */
.lw-gnav-item { display: flex; align-items: center; }
.lw-gnav-open { position: relative; z-index: 1; width: 12px; height: 12px; margin: 0 -6px; padding: 0; border: 0; background: none; color: var(--nav-text); opacity: 0; cursor: pointer; display: grid; place-items: center; }
.lw-gnav-open svg { width: 8px; height: 8px; }
.lw-gnav-open:focus-visible, .lw-gnav-open[aria-expanded="true"]:focus { opacity: 1; }
.lw-gnav .lw-flyout { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; height: 0; }
.lw-gnav .lw-flyout.is-open { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
.lw-flyout-more { color: var(--link); }
.lw-page a.lw-flyout-sm.lw-flyout-more, .lw-page a.lw-flyout-lg.lw-flyout-more { color: var(--link); }
.lw-flyout-col li { list-style: none; }
.lw-gnav > .lw-curtain { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; height: 100vh; opacity: 0; transition: opacity var(--dur-fade) var(--ease-standard); }
.lw-gnav > .lw-curtain.is-open { opacity: 1; }
.lw-gnav > .lw-mmenu { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; height: calc(100vh - var(--nav-h-compact)); overflow-y: auto; }
.lw-mmenu .lw-links { margin-top: var(--space-2); }
.lw-mmenu .lw-plain-btn { font-size: 14px; }
@container lw-page (min-width: 834px) { .lw-gnav > .lw-mmenu { display: none; } }
@container lw-page (max-width: 833px) { .lw-gnav > .lw-curtain { display: none; } html { scroll-padding-top: calc(var(--nav-h-compact) + var(--space-4)); } }

/* ---------- 리본 · 토스트 ---------- */
.lw-ribbon { position: relative; padding-inline: 48px; }
.lw-ribbon-x { position: absolute; right: 12px; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-secondary); cursor: pointer; }
.lw-ribbon-x svg { width: 12px; height: 12px; }
.lw-ribbon .lw-plain-btn { font-size: 14px; }
.lw-toasts { position: fixed; left: 50%; bottom: 24px; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.lw-toasts .lw-toast { pointer-events: auto; }

/* ---------- 공통 배치 (시안의 인라인 style 대체) ---------- */
.lw-head-flush { margin-top: 0; }
.lw-pager { border-top: 0; }
.lw-pager .lw-links { gap: var(--space-2) var(--space-5); }
.lw-note { margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--bg-alt); font-size: 14px; line-height: 20px; color: var(--text); }
.lw-loading { opacity: 0.55; transition: opacity var(--dur-fade) var(--ease-standard); }
.lw-ico-34 { width: 34px; height: 34px; }
.lw-lineup-icon--ink { color: var(--text); }
.lw-lineup-icon--ink svg { width: 34px; height: 34px; }
.lw-lineup-link[aria-current="page"] .lw-lineup-label { text-decoration: underline; text-underline-offset: 3px; }
.lw-lineup-list { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .lw-lineup-list { scroll-behavior: auto; } }   /* K12 — 좌우 단추 이동도 바로 */
.lw-paddle--prev { left: -4px; }
.lw-paddle svg { width: 14px; height: 14px; }
.lw-lineup-row { padding-bottom: 0; }
.lw-lineup-head { margin: 0 0 var(--space-4); }                       /* /c/docs 문서 유형 라인업 머리 — 축 "(베타)" + 안내 한 줄 */
.lw-lineup-head-name { font-weight: 600; color: var(--text); }

/* ---------- 상태 · 뼈대 ---------- */
.lw-state-icon svg { width: 48px; height: 48px; }

/* ---------- 홈 ---------- */
.lw-home-cats { padding-bottom: var(--space-14); }
@container lw-page (max-width: 734px) { .lw-home-cats { padding-bottom: var(--space-8); } }

/* ---------- 카테고리 ---------- */
.lw-chips--lines { margin-top: var(--space-5); }
.lw-chips--groups { margin-top: var(--space-2); }
.lw-cards--top { margin-top: var(--space-10); }
.lw-section--alt .lw-chip { background: var(--bg); }
.lw-section--alt .lw-chip[aria-pressed="true"] { border-color: var(--text); }
.lw-fold .lw-plain-btn::after { content: "\00a0›"; }
.lw-cards--small { margin-top: var(--space-5); }
.lw-section:not(.lw-section--alt) .lw-card { background: var(--bg-alt); }

/* ---------- 상세 (프로젝트 · YouTube) ---------- */
.lw-detail-actions .lw-btn svg { width: 14px; height: 14px; }
.lw-detail-summary { margin-top: var(--space-3); font-size: 17px; line-height: 27px; }
.lw-detail-media img { width: 100%; height: 100%; object-fit: contain; }
/* 앵커 위치: html 의 scroll-padding-top(상단 메뉴) + 프로젝트는 로컬 메뉴 높이만큼 더 */
.lw-project .lw-prose :is(h2, h3)[id], .lw-project section[id], .lw-project header[id] { scroll-margin-top: var(--localnav-h); }
.lw-prose > h1 { margin: 0 0 var(--space-4); font-size: 28px; line-height: 35px; font-weight: 600; }
/* 렌더러(B15) 결과 — 넓은 표는 상자 안에서만 가로로 넘긴다(페이지 가로 넘침 0) */
.lw-prose .lw-table-scroll { margin: 0 0 var(--space-4); overflow-x: auto; }
.lw-prose .lw-table-scroll > table { margin: 0; }
.lw-prose blockquote { margin: 0 0 var(--space-4); padding: 2px 0 2px var(--space-4); border-left: 3px solid var(--hairline); color: var(--text-secondary); }
.lw-prose blockquote p { margin: 0; }
.lw-prose hr { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--hairline); }
.lw-prose li > ul, .lw-prose li > ol { margin: 4px 0 0; }
.lw-prose del { color: var(--text-secondary); }
.lw-prose pre code { padding: 0; background: none; border-radius: 0; font-size: inherit; }
.lw-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 14px; line-height: 20px; }
.lw-prose th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--text); text-align: left; font-weight: 600; }
.lw-prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.lw-detail-section { padding: var(--space-12) 0 0; }
.lw-detail-section > h2 { margin-bottom: var(--space-4); font-size: 28px; line-height: 35px; font-weight: 600; }
.lw-project .lw-detail-body { padding-top: var(--space-10); }
.lw-project .lw-detail-section:last-child { padding-bottom: var(--space-30); }
.lw-toc a:hover { text-decoration: none; color: var(--link); }
@container lw-page (max-width: 734px) {
  .lw-detail-section > h2 { font-size: 24px; line-height: 30px; }
  .lw-project .lw-detail-section:last-child { padding-bottom: var(--space-28); }
}

/* ---------- 프로젝트 상세 하이라이트 타일 3 (B7b) ---------- */
.lw-hl-section > h2 { margin-bottom: var(--space-5); }
.lw-hl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.lw-hl-tile { display: flex; flex-direction: column; min-width: 0; padding: var(--space-7); border-radius: var(--radius-lg); background: var(--bg-alt); }
.lw-hl-icon { width: 28px; height: 28px; color: var(--text-secondary); }
.lw-hl-eyebrow { margin-top: var(--space-4); font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.lw-hl-name { margin-top: 2px; font-size: 21px; line-height: 27px; font-weight: 600; overflow-wrap: anywhere; }
.lw-hl-desc { margin-top: var(--space-2); font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lw-hl-meta { margin-top: var(--space-2); font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.lw-hl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: auto; padding-top: var(--space-5); }
@container lw-page (max-width: 833px) { .lw-hl { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }
@container lw-page (max-width: 734px) { .lw-hl-tile { padding: var(--space-6); } }

/* X1 — 실제 자료의 끊을 곳 없는 긴 토큰(경로·해시·인코딩이 깨진 파일명)이 좁은 폭에서 상자를 넘던 것 — 그 글자 상자 안에서 줄을 바꾼다.
   (표 칸은 넣지 않는다 — 표는 .lw-table-scroll 안에서 가로로 넘긴다) */
.lw-prose p, .lw-prose li, .lw-prose h1, .lw-prose h2, .lw-prose h3, .lw-prose h4, .lw-prose blockquote, .lw-prose dd { overflow-wrap: anywhere; }