/* Notion 페이지(tools/build-notion-page.js 가 생성) 본문.
   블록 스타일은 scc-app/scripts/article-template.js 의 아티클 본문 CSS 에서 가져왔고,
   치수는 원본(oopy, con.staircrusher.club)을 실측해 맞췄다 — 본문 폭 608, 모바일(≤480) 좌우 24.
   굵기: oopy 는 Pretendard 400·700 두 파일만 실어서 Notion 의 600 은 700 으로, 500 은 400 으로 그려진다 → 그 결과값을 쓴다. */
:root { --footer-pt: 80px; } /* 원본 oopy 페이지들은 푸터 윗여백 80 (base 계약) */
.notion-page { --np-fg: #37352f; --np-line: rgba(55, 53, 47, .09); --np-soft: #f7f6f3; }

/* 커버·아이콘·제목 */
.notion-cover { height: 270px; }
.notion-cover img { width: 100%; height: 100%; object-fit: cover; }
.notion { display: flex; flex-direction: column; max-width: 800px; margin: 0 auto; padding: 0 96px 90px; color: var(--np-fg); font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
.notion-icon { width: 78px; height: 78px; margin: -42px 0 36px 3px; font-size: 78px; line-height: 1; position: relative; }
.notion-title { font-size: 40px; line-height: 1.2; font-weight: 700; padding: 3px 2px; margin-bottom: 5px; }

/* 블록. Notion 블록 사이 여백은 겹치지 않는다(원본은 flex 컬럼) → 블록을 담는 상자를 전부 flex 컬럼으로 */
.notion .callout > div, .notion .notion-indent, .notion .column, .notion [role=tabpanel] { display: flex; flex-direction: column; }
.notion [role=tabpanel][hidden] { display: none; }
.notion p { margin: 1px 0; padding: 3px 2px; }
/* Notion 텍스트는 공백을 그대로 둔다(줄 앞 공백·연속 공백) */
.notion :is(p, li, h2, h3, h4, blockquote, summary, td, th, figcaption) { white-space: pre-wrap; word-break: break-word; }
.notion p.empty { height: 30px; }
.notion strong, .notion b { font-weight: 700; }
.notion h2, .notion h3, .notion h4 { font-weight: 700; line-height: 1.3; padding: 3px 2px; }
.notion h2 { font-size: 30px; margin: 32px 0 4px; }
.notion h3 { font-size: 24px; margin: 22px 0 1px; }
.notion h4 { font-size: 20px; margin: 16px 0 1px; }
.notion a { color: inherit; text-decoration: none; border-bottom: .05em solid rgba(55, 53, 47, .4); opacity: .7; }
.notion ul, .notion ol { margin: 0; padding-left: 28px; list-style: disc; }
.notion ol { list-style: decimal; }
.notion li { margin: 1px 0; padding: 3px 2px; }
.notion li > ul, .notion li > ol { margin-top: 3px; }
.notion ul ul { list-style: circle; }
.notion ul ul ul { list-style: square; }
/* 인용: 원본 = 바깥 3px 2px · 왼쪽 선 3px · 안쪽 좌우 14px · 글자 좌우 2px */
.notion blockquote { margin: 7px 2px; padding: 0 16px; border-left: 3px solid currentColor; }
.notion blockquote > p { padding-left: 0; padding-right: 0; }
.notion .notion-indent { padding-left: 1.5em; }
.notion .callout { display: flex; margin: 4px 0; padding: 16px 16px 16px 12px; border: 1px solid transparent; border-radius: 16px; }
.notion .callout .emoji { flex: none; line-height: 1.5; }
.notion .callout .callout-ico { flex: none; width: 22px; height: 22px; margin-top: 2px; object-fit: contain; }
.notion .callout > div { flex: 1 1 auto; min-width: 0; margin-left: 8px; }
.notion .callout > div > :first-child { margin-top: 0; }
.notion details { margin: 1px 0; }
.notion details > summary { position: relative; padding: 3px 2px 3px 30px; list-style: none; cursor: pointer; }
.notion details > summary::-webkit-details-marker { display: none; }
.notion details > summary::before { content: ""; position: absolute; left: 11px; top: 50%; margin-top: -5px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; transition: transform .2s; }
.notion details[open] > summary::before { transform: rotate(90deg); }
.notion details > :not(summary) { margin-left: 26px; }
.notion details.htoggle > summary > * { margin: 0; padding: 0; }
.notion hr { border: 0; border-top: 1px solid var(--np-line); margin: 7px 0; }
.notion figure { margin: 4px 0; }
.notion figure img { width: 100%; height: auto; border-radius: 8px; }
.notion figcaption { color: rgba(55, 53, 47, .65); font-size: 14px; padding: 6px 2px; }
.notion .columns { display: flex; gap: 46px; margin: 2px 0 1px; }
.notion .columns > .column { flex: 1 1 0; min-width: 0; padding: 12px 0; }
/* 표: 원본처럼 스크롤 영역이 화면 오른쪽 끝까지 열린다(본문보다 넓은 표는 그 안에서 가로 스크롤) */
.notion-page { overflow-x: clip; }
.notion .tbl-wrap { overflow-x: auto; margin: 1px calc(50% - 50vw) 1px -8px; }
.notion table { border-collapse: collapse; margin: 8px 18px 18px 8px; font-size: 14px; line-height: 20px; table-layout: fixed; }
.notion th, .notion td { border: 1px solid #e9e9e7; padding: 7px 9px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.notion th { background: var(--np-soft); font-weight: 400; }
.notion :not(pre) > code { background: rgba(135, 131, 120, .15); color: #eb5757; padding: .2em .4em; border-radius: 3px; font-size: .86em; }
:target { scroll-margin-top: calc(var(--header-h, 70px) + 16px); }
/* 렌더러가 색을 안 칠하는 블록(토글)의 Notion 배경색 — oopy 팔레트 */
.notion-gray_background { background: #f1f1ef; }
.notion-brown_background { background: #f4eeee; }
.notion-orange_background { background: #fbecdd; }
.notion-yellow_background { background: #fbf3db; }
.notion-green_background { background: #edf3ec; }
.notion-blue_background { background: #e7f3f8; }
.notion-purple_background { background: #f6f3f9; }
.notion-pink_background { background: #faf1f5; }
.notion-red_background { background: #fdebec; }

/* oopy 링크 버튼 / 하위 페이지 링크 */
.notion .notion-button { padding: 0; }
.notion .notion-button a, .notion .notion-page-link a { display: inline-flex; align-items: center; border: 0; opacity: 1; }
.notion .notion-button a { gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 4px; background: rgba(55, 53, 47, .08); line-height: 1.2; }
.notion .notion-button a:hover { background: rgba(55, 53, 47, .12); }
.notion .notion-button a { max-width: 100%; }
.notion .notion-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notion .notion-button img { flex: none; width: 16px; height: 16px; }
.notion .notion-page-link a { gap: 6px; }
.notion .notion-page-link .emoji { font-size: 18px; line-height: 1; }
.notion .notion-page-link span:last-child { border-bottom: .05em solid rgba(55, 53, 47, .4); }

/* 탭 */
.notion-tabs { margin: 1px 0; border: 1px solid #e6e5e3; border-radius: 16px; }
.notion-tabs [role=tablist] { display: flex; gap: 4px; overflow-x: auto; padding: 16px 16px 14px; scrollbar-width: none; }
.notion-tabs [role=tab] { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 9999px; background: none; font-size: 14px; line-height: 1.2; font-weight: 400; color: #8e8b86; cursor: pointer; white-space: nowrap; }
.notion-tabs [role=tab][aria-selected=true] { background: rgba(42, 28, 0, .07); color: #2c2c2b; }
.notion-tabs [role=tab] img { width: 16px; height: 16px; }
.notion-tabs [role=tabpanel] { padding: 0 16px 16px; }

/* 갤러리 DB */
.notion-gallery { margin: 1px 0; padding: 8px 0 15px; }
.notion .notion-gallery h4 { margin: 0; padding: 0 4px; font-size: 22px; line-height: 1.5; font-weight: 700; }
.notion-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 16px 0 4px; }
.notion .notion-card { display: block; border: 0; opacity: 1; background: #fff; box-shadow: rgba(15, 15, 15, .1) 0 0 0 1px, rgba(15, 15, 15, .1) 0 2px 4px; overflow: hidden; }
.notion-card-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1px 1px 0 0; }
.notion .notion-card p { margin: 0; padding: 8px 10px 10px; font-size: 14px; line-height: 1.5; }
.notion-card p img { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }

/* 동영상 */
.notion-video { margin: 2px 0 4px; }
.notion-video video { width: 100%; background: #f2f1ee; }

/* 하단 고정 CTA (oopy 페이지 버튼). z-index 는 헤더(100) 아래 — 모바일 메뉴를 덮지 않게 */
.notion-cta { position: fixed; left: 50%; bottom: 16px; z-index: 50; transform: translateX(-50%); width: min(608px, 88%); height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #000; color: #c8f713; font-size: 16px; line-height: 24px; font-weight: 700; box-shadow: rgba(55, 53, 47, .4) 0 0 4px 2px; animation: notion-cta-in .8s ease; }
@keyframes notion-cta-in { from { opacity: 0; } }

/* Notion 모바일 레이아웃은 480 이하 (oopy 실측: 480 은 모바일, 481 부터 데스크톱) */
@media (max-width: 480px) {
  .notion-cover { height: 200px; }
  .notion { padding: 0 24px 90px; }
  .notion-icon { margin-bottom: 20px; }
  .notion-title { font-size: 32px; }
  .notion .notion-button a { min-height: 44px; }
  .notion .columns { flex-direction: column; gap: 0; }
  .notion-gallery { padding-bottom: 0; }
  /* 모바일 원본: 스크롤 영역은 본문 폭 안, 표는 안쪽 24px 들여 시작 */
  .notion .tbl-wrap { margin-right: 0; padding-left: 24px; }
  .notion h2 { font-size: 24px; }
  .notion h3 { font-size: 20px; }
  .notion h4 { font-size: 18.72px; }
}