/* ============================================================ OWNIFY 홈페이지 커스텀 CSS (www.ownify.co.kr, 우피/Oopy) ------------------------------------------------------------ - 정본은 이 파일(GitHub immplee/ONF_Homepage). 우피 에는 jsDelivr 한 줄만 넣는다. (우피 10,240자 제한 회피) - 수정 후 반영: git push → jsDelivr 캐시 purge (README 참고) - 색상 팔레트: 배경 크림 #F1EADE 카드 다크브라운 #6F4A2F (호버 #7D5638, 테두리 #5C3C25, 텍스트 크림 #F3EADB) — 2026-07-02 C안(구 베이지 #EADFCD) 포인트 오렌지 #D2691E (호버 #b9591a / 밴드 호버 #e0761f) 구분선 브라운 #B59A7B ============================================================ */ /* ---------- 0. 서체 · 기본 ---------- */ /* Paperlogy 웹폰트 (fonts-archive CDN, dynamic subset) */ @import url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css"); /* 가로 스크롤 방지 (clip 미지원 브라우저 대비 hidden 폴백) */ html, body { overflow-x: hidden !important; overflow-x: clip !important; } /* 한국어 줄바꿈: 음절이 아니라 단어(어절) 단위로 끊어 자연스럽게. 노션이 span마다 break-word를 직접 넣으므로 자식까지 !important로 덮는다. (긴 영문 단어·URL은 overflow-wrap이 안전하게 줄바꿈) */ .notion-page-content, .notion-page-content *, .onf-footer, .onf-footer *, .onf-band span { word-break: keep-all !important; overflow-wrap: break-word !important; } /* ---------- 1. 타이포그래피 ---------- */ /* 전 영역 기본 서체: Paperlogy, 기본 굵기 400 */ .notion-page-content, .notion-page-content *, .notion-page-block, .page-title, .notion-topbar, .notion-topbar a, .notion-topbar a *, .notion-topbar span, .notion-topbar ~ div a, .notion-topbar ~ div a *, .notion-topbar ~ div span { font-family: 'Paperlogy', 'Apple SD Gothic Neo', sans-serif !important; font-weight: 400 !important; } /* 제목류는 800 */ .notion-page-content h1, .notion-page-content h2, .notion-page-content .notion-header-block, .notion-page-content .notion-sub_header-block, .page-title { font-weight: 800 !important; } /* 상단바·서브 네비 메뉴는 600 (위 400 규칙보다 뒤에 있어야 함) */ .notion-topbar a, .notion-topbar a *, .notion-topbar span, .notion-topbar ~ div a, .notion-topbar ~ div a *, .notion-topbar ~ div span { font-weight: 600 !important; } /* ---------- 2. 상단바(탑바) ---------- */ /* 크림색 배경, 높이 100px */ .notion-topbar { background-color: #F1EADE !important; height: 100px !important; min-height: 100px !important; } /* 탑바 안 링크·아이콘 전부 오렌지 */ .notion-topbar a, .notion-topbar span, .notion-topbar svg, .notion-topbar i, .notion-topbar ~ div a, .notion-topbar ~ div span, .notion-topbar ~ div i { color: #D2691E !important; fill: #D2691E !important; } /* 내부 래퍼도 100px에 맞춰 세로 중앙 정렬 */ .notion-topbar > div { height: 100px !important; display: flex !important; align-items: center !important; } /* 로고 이미지 크기 */ .notion-topbar img { height: 48px !important; } /* 우측 빈 슬롯 제거 */ .notion-topbar > div:last-child:empty { display: none !important; } /* 탑바~본문 사이 경계선·그림자 전부 제거 (이음새 없애기) */ .notion-topbar, .notion-topbar > div, .notion-topbar + div, .notion-topbar + div > div, .notion-topbar ~ div, .notion-topbar ~ div > div { border: none !important; box-shadow: none !important; margin-bottom: 0 !important; } .notion-page-content { border-top: none !important; box-shadow: none !important; } /* 레이아웃: 로고는 왼쪽 고정, 메뉴는 정중앙 (우피 기본 grid → flex 재배치) */ .notion-topbar[style*="grid-template"] { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .notion-topbar[style*="grid-template"] > div:nth-child(2) { margin: 0 !important; display: flex !important; align-items: center !important; gap: 60px !important; } .notion-topbar[style*="grid-template"] > div:first-child { position: absolute !important; left: 40px !important; top: 50% !important; transform: translateY(-50%) !important; } /* 현재 메뉴 밑줄(인디케이터) 위치: 글자 바로 아래로 */ .notion-topbar a > div { top: calc(50% + 16px) !important; bottom: auto !important; } /* 좁은 화면: 로고 왼쪽·메뉴 오른쪽으로 풀어주기 */ @media (max-width: 1100px) { .notion-topbar[style*="grid-template"] { justify-content: flex-start !important; } .notion-topbar[style*="grid-template"] > div:first-child { position: static !important; transform: none !important; left: auto !important; } .notion-topbar[style*="grid-template"] > div:nth-child(2) { margin-left: auto !important; margin-right: 40px !important; gap: 36px !important; } } /* 서브 네비게이션 줄(탑바 아래 링크 줄)도 크림색 배경 */ .notion-topbar ~ div:has(a) { background-color: #F1EADE !important; } /* 모바일: 네비 글자 줄이고 한 줄 꽉 차게 배치 */ @media (max-width: 768px) { .notion-topbar a, .notion-topbar a *, .notion-topbar ~ div a, .notion-topbar ~ div a *, .notion-topbar ~ div span { font-size: 14px !important; white-space: nowrap !important; letter-spacing: .06em !important; } .notion-topbar ~ div:has(a) { display: flex !important; gap: 0 !important; justify-content: space-between !important; padding-left: 12px !important; padding-right: 12px !important; overflow-x: visible !important; } .notion-topbar ~ div:has(a) > * { flex: 0 1 auto !important; min-width: 0 !important; } } /* ---------- 3. 본문 공통 요소 ---------- */ /* 콜아웃 → 다크 브라운 카드 + 크림 텍스트 (2026-07-02 C안, 호버 시 살짝 떠오름) */ .notion-callout-block [class*="CalloutBlock_content"] { background-color: #6F4A2F !important; border: 1.5px solid #5C3C25 !important; border-radius: 12px !important; box-shadow: none !important; padding-top: 33px !important; padding-bottom: 33px !important; position: relative !important; transition: background-color .2s, box-shadow .2s, transform .2s !important; } .notion-callout-block [class*="CalloutBlock_content"]:hover { background-color: #7D5638 !important; box-shadow: 0 6px 18px rgba(58, 36, 21, .28) !important; transform: translateY(-2px) !important; } /* 다크 카드 위 글자는 전부 크림 */ .notion-callout-block [class*="CalloutBlock_content"], .notion-callout-block [class*="CalloutBlock_content"] div, .notion-callout-block [class*="CalloutBlock_content"] span, .notion-callout-block a, .notion-callout-block a span { color: #F3EADB !important; } /* 카드 안 태그(인라인 코드 — 우피는 span[style*=SFMono]로 렌더링)는 크림 칩 + 브라운 글자로 반전 (다크 카드에서 또렷하게) */ .notion-callout-block [class*="CalloutBlock_content"] code, .notion-callout-block [class*="CalloutBlock_content"] code span, .notion-callout-block [class*="CalloutBlock_content"] span[style*="SFMono"] { color: #6F4A2F !important; background: #F1EADE !important; border-radius: 6px !important; padding: 2px 8px !important; } /* 카드 안 링크 밑줄·배경 제거 */ .notion-callout-block a, .notion-callout-block a:hover, .notion-callout-block a span, .notion-callout-block [class*="CalloutBlock_content"] div { text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; background: none !important; } /* 카드 안에 링크가 있으면 카드 전체를 클릭 영역으로 확장 */ .notion-callout-block [class*="CalloutBlock_content"] a::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; } /* 구분선: 브라운 톤 */ .notion-hr, hr { border-color: #B59A7B !important; opacity: .5 !important; } /* 네이버 지도 임베드: 왼쪽 검색/장소 패널(레일 62px + 패널 391px = 453px)을 잘라내서 지도만 보이게. iframe을 453px 넓혀 왼쪽으로 밀면 네이버가 패널을 감안해 잡아둔 지도 중심(핀)이 보이는 영역의 정중앙에 옴. (패널을 접어둔 방문자에겐 핀이 왼쪽으로 치우쳐 보이는 한계는 감수 — 기본값은 열림) */ .notion-page-content div:has(> iframe[src*="map.naver.com"]) { overflow: hidden !important; border-radius: 22px !important; box-shadow: 0 14px 40px rgba(111, 74, 47, .18) !important; } .notion-page-content iframe[src*="map.naver.com"] { width: calc(100% + 453px) !important; max-width: none !important; margin-left: -453px !important; } /* ---------- 4. 이미지 ---------- */ /* 크기: 화면 높이의 45%를 넘지 않게, 가운데 정렬 */ .notion-page-content .notion-image-block img, .notion-page-content [class*="image"] img { max-height: 45vh !important; width: auto !important; object-fit: contain !important; margin-left: auto !important; margin-right: auto !important; display: block !important; } /* 둥근 모서리 + 그림자 */ .notion-page-content .notion-image-block img { border-radius: 22px !important; box-shadow: 0 14px 40px rgba(111, 74, 47, .18) !important; position: relative !important; z-index: 1 !important; } /* 이미지 뒤 오렌지 글로우(radial gradient + blur) */ .notion-page-content .notion-image-block { position: relative !important; background: transparent !important; padding: 0 !important; } .notion-page-content .notion-image-block::before { content: "" !important; position: absolute !important; inset: 0 -18% !important; background: radial-gradient(ellipse at center 60%, rgba(210, 105, 30, .55) 0%, rgba(210, 105, 30, .32) 40%, rgba(210, 105, 30, 0) 75%) !important; filter: blur(30px) !important; z-index: 0 !important; pointer-events: none !important; } /* ---------- 5. 페이지 레이아웃 ---------- */ /* 노션 페이지 제목·아이콘·컨트롤 숨김 (홈은 자체 히어로 사용) */ .notion-page-block:first-child, .page-title, .notion-page-controls, .page-icon { display: none !important; } /* 첫 번째 단(컬럼) 블록 = 히어로 영역: 여백·세로 중앙 정렬 */ .notion-page-content > .notion-column_list-block:first-of-type { margin-top: 40px !important; } .notion-page-content > .notion-column_list-block:first-of-type .notion-text-block:first-child { margin-bottom: 30px !important; } .notion-page-content > .notion-column_list-block:first-of-type .notion-header-block { margin-top: .15em !important; } .notion-page-content > .notion-column_list-block:first-of-type [class*="css-"] { align-items: center !important; } .notion-page-content > .notion-column_list-block:first-of-type .notion-column { justify-content: center !important; } /* 본문 텍스트·제목: 가운데 정렬, 넉넉한 줄간격 */ .notion-page-content > .notion-text-block, .notion-page-content > .notion-header-block { text-align: center !important; } .notion-page-content > .notion-header-block h1, .notion-page-content > .notion-header-block h2, .notion-page-content > .notion-text-block .css-1g4vl24 { justify-content: center !important; text-align: center !important; } .notion-page-content > .notion-text-block { line-height: 2 !important; font-size: 17px !important; margin: 16px auto !important; max-width: 620px !important; } /* ---------- 6. 스크롤 등장 애니메이션 (ownify.js와 세트) ---------- */ /* JS가 .onf-reveal을 붙이고, 화면에 들어오면 .onf-show 추가 */ .onf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s, transform .6s; } .onf-reveal.onf-show { opacity: 1; transform: none; } /* ---------- 7. SNS 플로팅 버튼 (우하단) ---------- */ /* 구조: 체크박스 토글 → :checked 시 아이템 2개가 위로 팝업 */ .onf-sns { position: fixed; right: 24px; bottom: 24px; z-index: 9999; width: 60px; height: 60px; font-family: inherit; } .onf-sns-cb { display: none; } /* 토글용 숨김 체크박스 */ /* 메인 버튼 */ .onf-sns-btn { position: absolute; right: 0; bottom: 0; width: 60px; height: 60px; border-radius: 22px; background: #D2691E; color: #F1EADE; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; box-shadow: 0 6px 18px rgba(58, 36, 21, .28); transition: transform .2s, background .2s; overflow: hidden; } .onf-sns-btn img { width: 60%; height: 60%; object-fit: contain; } .onf-sns-btn:hover { background: #b9591a; transform: scale(1.05); } /* 펼쳐지는 아이템(카카오채널·인스타) — 평소엔 숨김 */ .onf-sns-item { position: absolute; right: 6px; bottom: 6px; width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: scale(.3) rotate(90deg); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; box-shadow: 0 6px 16px rgba(58, 36, 21, .24); z-index: 2; overflow: hidden; } .onf-sns-item img { width: 100%; height: 100%; object-fit: cover; } .onf-sns-b { /* 두 번째 아이템이 button 태그라서 기본 스타일 제거 */ border: none; padding: 0; cursor: pointer; background: transparent; } /* 열렸을 때: 위로 튀어오르며 등장 (살짝 기울였다가 호버 시 정렬) 순서(아래→위): 카카오톡 채널(-64, ownify.js ⑥이 주입) → 블로그(-120) → 인스타(-176) */ .onf-sns-cb:checked ~ .onf-sns-k { opacity: 1; pointer-events: auto; transform: translateY(-64px) rotate(-8deg); } .onf-sns-cb:checked ~ .onf-sns-a { opacity: 1; pointer-events: auto; transform: translateY(-120px) rotate(8deg); transition-delay: .06s; } .onf-sns-cb:checked ~ .onf-sns-b { opacity: 1; pointer-events: auto; transform: translateY(-176px) rotate(-8deg); transition-delay: .12s; } .onf-sns-cb:checked ~ .onf-sns-k:hover { transform: translateY(-64px) rotate(0) scale(1.08); } .onf-sns-cb:checked ~ .onf-sns-a:hover { transform: translateY(-120px) rotate(0) scale(1.08); } .onf-sns-cb:checked ~ .onf-sns-b:hover { transform: translateY(-176px) rotate(0) scale(1.08); } /* ---------- 8. 풀폭 CTA 밴드 (오렌지 띠 배너) ---------- */ .onf-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100vw; /* 본문 폭을 벗어나 화면 전체 폭으로 */ left: 50%; margin: 34px 0 34px -50vw; box-sizing: border-box; background: #D2691E; padding: 14px 20px; text-decoration: none; font-family: inherit; transition: background .25s; } .onf-band span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; color: #FFF7EE !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: .01em; transition: transform .25s; } .onf-band:hover { background: #e0761f; } .onf-band:hover span { transform: scale(1.06); } /* 화살표 아이콘 좌우 흔들림 */ .onf-band-arrow { height: 20px; vertical-align: -4px; animation: onfArrow 1.4s ease-in-out infinite; } @keyframes onfArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* ---------- 9. 특정 블록 미세 조정 (data-block-id) ---------- */ /* 블록을 지우고 다시 만들면 id가 바뀌므로 여기도 갱신해야 함 */ /* OWNIFY 워드마크(자간 넓힘) — 아래 큰 제목과 로고 워드마크·태그라인처럼 딱 붙임. ⚠️ 셀렉터에 .notion-page-content > .notion-text-block를 붙여야 5번 섹션의 일반 본문 여백(margin:16px)보다 구체성이 높아져 실제로 붙는다 (2026-07-02 수정) */ [data-block-id^="6cbfb9fe"] { letter-spacing: 6px !important; } .notion-page-content > .notion-text-block[data-block-id^="6cbfb9fe"] { margin-bottom: 0 !important; } [data-block-id^="6cbfb9fe"] div { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* 큰 제목: 위 워드마크에 밀착(-10px) + 아래 첫 단락과의 간격은 단락끼리 간격과 동일하게 16px(합산 32px) (2026-07-02 Peter 지시) */ [data-block-id="390d6a62-96ae-8009-9189-dea12457fad9"] { margin: -6px 0 16px !important; /* 워드마크와의 간격: -10 → -6 (2026-07-02 한 눈금 벌림) */ padding: 0 !important; } [data-block-id="390d6a62-96ae-8009-9189-dea12457fad9"] h2 { margin-top: 0 !important; padding-top: 0 !important; } [data-block-id="390d6a62-96ae-8009-9189-dea12457fad9"] h2, [data-block-id="390d6a62-96ae-8009-9189-dea12457fad9"] span { font-weight: 900 !important; } /* 숨김 처리한 블록 */ [data-block-id="390d6a62-96ae-8046-923b-d1c930d4a0b7"] { display: none !important; } /* 홈 히어로 리셉션 사진(+오렌지 글로우) 숨김 — 홈에 커버 배너를 걸면서 대체(2026-07-02) */ [data-block-id="390d6a62-96ae-80df-adc6-f2b258824117"] { display: none !important; } /* 홈 히어로 텍스트를 커버 배너 "안"(좌측)으로 끌어올림 — 탑바(100px) 아래 20px 지점부터 시작. 배너 하단 페이드와 자연스럽게 겹침. (섹션 5의 first-of-type margin-top 40px 규칙과 동일 특이도 — 뒤에 있어 이 규칙이 이김) */ .notion-page-content > .notion-column_list-block[data-block-id="3883a92c-8e3f-4bcf-a07e-0f1080420dbb"] { margin-top: calc(120px - var(--page-cover-height, 30vh) - 100px) !important; position: relative; z-index: 5; } /* 텍스트를 "로고 아래 ~ 띠 CTA 위"의 세로 정중앙으로 (2026-07-02 Peter 지시, 기준 변경). transform이라 띠 CTA 등 아래 내용 위치는 그대로. -76px = 실측 보정값 (로고 하단 74px·띠 상단 552px 기준, 위 여백 115 = 아래 여백 115). 모바일은 제외. */ @media (min-width: 769px) { .notion-page-content > .notion-column_list-block[data-block-id="3883a92c-8e3f-4bcf-a07e-0f1080420dbb"] { transform: translateY(-76px) !important; } } /* 홈 본문 맨 아래 자동 생긴 '오시는길' 하위페이지 링크 블록 숨김 (오시는길은 상단 Where 메뉴로만 진입 — 노션에서 이 블록을 지우면 페이지도 삭제되므로 블록은 두고 CSS로만 숨긴다) */ .notion-page-content a[href="/0d3d6a62-96ae-82b3-9b45-81d75762dbc3"] { display: none !important; } /* ---------- 10. 사이트 푸터 (오렌지 밴드 — ownify.js가 주입) ---------- */ /* 구조는 ownify.js ③ 참고. 페이지 끝까지 스크롤하면 아래에서 위로 떠오른다. 위치: .notion-page-content "뒤"(형제, .notion-scroller 안)라서 width:100%면 풀폭. ⚠️ 100vw+left:50% 트릭 금지 — 본문 컨테이너가 모바일에서 flex 중앙정렬이라 어긋남. */ .onf-footer { position: relative; width: 100%; margin: 90px 0 0; box-sizing: border-box; background: #D2691E; padding: 60px 48px 48px; font-family: 'Paperlogy', 'Apple SD Gothic Neo', sans-serif; /* 등장 전: 아래에 숨어 있다가 */ opacity: 0; transform: translateY(60px); transition: opacity .7s ease, transform .7s ease; } /* 화면에 들어오면 위로 떠오르며 등장 (JS가 .onf-show 부착) */ .onf-footer.onf-show { opacity: 1; transform: none; } /* 내부: 좌측 회사 정보 / 우측 로고 */ .onf-footer-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } .onf-footer-info { color: #F1EADE; font-size: 14px; line-height: 1.95; min-width: 0; word-break: keep-all; /* 한국어 단어 단위 줄바꿈 */ } /* 사업자 정보 줄 (항목 사이 넉넉한 간격, 좁으면 자동 줄바꿈) */ .onf-footer-biz { margin: 0 0 16px; display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 2px; font-weight: 600; } /* 지적재산권 고지 + 카피라이트 (폭 제한 없음 — 데스크톱에서 한 줄) */ .onf-footer-legal { margin: 0; font-size: 12.5px; opacity: .85; } .onf-footer-copy { margin: 8px 0 0; font-size: 12.5px; opacity: .7; } .onf-footer-logo { width: 210px; max-width: 40vw; flex-shrink: 0; display: block; align-self: center; /* 회사 정보 블록 기준 세로 정중앙 */ } /* 푸터가 페이지 맨 끝에 딱 붙게: 본문 하단 여백·우피 빈 푸터 여백 제거 */ .notion-scroller:has(.onf-footer) .notion-page-content { padding-bottom: 0 !important; } .notion-scroller:has(.onf-footer) .oopy-footer { margin: 0 !important; } /* 모바일: 세로 스택, 로고는 아래 왼쪽 */ @media (max-width: 768px) { .onf-footer { padding: 44px 24px 40px; } .onf-footer-in { flex-direction: column; align-items: flex-start; gap: 28px; } .onf-footer-biz { column-gap: 18px; } .onf-footer-logo { width: 160px; align-self: flex-start; } /* 세로 스택에선 왼쪽 정렬 유지 */ } /* ---------- 11. 오시는길(/where) — 2열: 왼쪽 지도 + 오른쪽 안내 ---------- */ /* 2026-07-02 개편: 커버 배너 + 2열(왼쪽 = 지도 임베드 / 오른쪽 = 주소·오시는길 사진). 지도는 왼쪽 열 폭을 100% 채우고 화면 높이만큼 시원하게. ⚠️ 지도 왼쪽 흰 패널은 네이버 도메인(iframe 내부)이라 색 변경 불가. ⚠️ 임베드 블록을 지웠다 다시 만들면 data-block-id 갱신 필요. */ [data-block-id="2a11866f-119c-4e50-9a8e-058529413e1e"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; height: calc(100vh - 240px) !important; /* 탑바·여백 제외한 화면 높이만큼 */ min-height: 480px !important; } [data-block-id="2a11866f-119c-4e50-9a8e-058529413e1e"] div { height: 100% !important; } [data-block-id="2a11866f-119c-4e50-9a8e-058529413e1e"] iframe { width: 100% !important; height: 100% !important; } /* 2열 상단 정렬: 오른쪽 '지하철로 오시는 길'이 왼쪽 주소와 같은 높이에서 시작 (섹션 5의 첫 컬럼 세로중앙 규칙을 이 페이지에서만 덮어씀 — 동일 특이도, 뒤에 있어 이김) */ .notion-page-content > .notion-column_list-block[data-block-id="391d6a62-96ae-80b9-8727-cedfaa8148cf"] [class*="css-"] { align-items: flex-start !important; } /* ---------- 11. 탑바 우측 상담 CTA (ownify.js ④와 세트) ---------- */ /* 로고(왼쪽 40px)와 대칭 위치. 글자 굵기 600 = 탑메뉴와 동일 */ .notion-topbar a.onf-top-cta { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; background: #D2691E; color: #FFF7EE !important; /* 탑바 링크 오렌지 규칙(2번 섹션)보다 우선 */ border-radius: 16px; padding: 11px 18px; font-size: 15px !important; font-weight: 600 !important; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(58, 36, 21, .18); transition: background .2s, transform .2s; z-index: 5; } .notion-topbar a.onf-top-cta:hover { background: #e0761f; transform: translateY(-50%) scale(1.04); } /* 화살표: 로고용 48px 규칙(.notion-topbar img)을 이기고 16px로 (흔들림 애니메이션은 .onf-band-arrow 공용) */ .notion-topbar .onf-top-cta img.onf-band-arrow { height: 16px !important; width: auto !important; } /* 표시 조건: 900px 이상 + 메뉴가 탑바 안에 있을 때(분리 전). 900~1100px에선 아래 규칙이 메뉴를 왼쪽으로 밀어 CTA 자리를 확보한다. */ @media (max-width: 899px) { .notion-topbar a.onf-top-cta { display: none !important; } } body.onf-nav-split .notion-topbar a.onf-top-cta { display: none !important; } @media (min-width: 900px) and (max-width: 1100px) { .notion-topbar[style*="grid-template"] > div:nth-child(2) { margin-right: 250px !important; /* 2번 섹션의 40px 대신 — CTA(약 190px+여백) 공간 */ } } /* ---------- 12. 홈 히어로 문구 크기·굵기 조절판 ---------- */ /* ★ 아래 :root의 숫자만 바꾸면 각 줄 크기가 바뀐다 (push 후 몇 분 내 반영) */ /* ⚠️ 블록 id는 2026-07-02 히어로 기준 — 노션에서 해당 줄을 지웠다 다시 쓰면 id 갱신 필요 */ :root { --hero-kicker-size: 17px; /* ① "1:1 프리미엄 영어회화, 오니파이" */ --hero-kicker-weight: 700; /* ① 굵기 (2026-07-02 굵게) */ --hero-copy-size: 16px; /* ② "외워도 늘지 않던 영어. …" */ --hero-title-size: 40px; /* ③ "지금, 당신만의 영어를 시작해 보세요!" */ --hero-title-weight: 800; /* ③ 굵기 — Paperlogy 800 (Peter 지정) */ --hero-metro-size: 17px; /* ④ "잠실역 도보 10분" */ --hero-metro-weight: 700; /* ④ 굵기 (2026-07-02 굵게) */ } /* ① 소제목 */ [data-block-id="38fd6a62-96ae-80df-a867-e22d2edc86d7"], [data-block-id="38fd6a62-96ae-80df-a867-e22d2edc86d7"] * { font-size: var(--hero-kicker-size) !important; font-weight: var(--hero-kicker-weight) !important; /* 전역 400 규칙보다 우선(span까지) */ } /* ② 설명 문장 */ [data-block-id="d3adc428-75e1-404d-9388-cd864a0b40c0"], [data-block-id="d3adc428-75e1-404d-9388-cd864a0b40c0"] * { font-size: var(--hero-copy-size) !important; } /* ③ 큰 제목 — 안쪽 span까지 지정해야 함: 전역 "모든 글자 400" 규칙(1번 섹션)이 span을 400으로 눌러서 h2에만 준 800이 화면에 안 나오던 문제의 해결 지점 */ /* 줄바꿈 금지: 컬럼폭보다 크면 화면폭에 비례해 자동 축소(2.7vw≈데스크톱 컬럼에 맞는 비율). 수 px 넘치는 건 width:max-content로 컬럼 사이 여백에 흡수 */ [data-block-id="38fd6a62-96ae-805c-bf03-ce9ff458002c"] h2, [data-block-id="38fd6a62-96ae-805c-bf03-ce9ff458002c"] h2 * { font-size: min(var(--hero-title-size), 2.7vw) !important; font-weight: var(--hero-title-weight) !important; white-space: nowrap !important; } [data-block-id="38fd6a62-96ae-805c-bf03-ce9ff458002c"] h2 { width: max-content !important; max-width: none !important; } /* 모바일(≤768px): 우피는 좁은 화면에서도 노션 2열을 나란히 유지해 히어로 텍스트가 반쪽 폭(실측 131px/500px 화면)에 갇힌다 → 세로 스택으로 전환해 전체 폭 사용. 큰 제목은 한 줄 강제를 풀고 어절 단위로 자연 줄바꿈(보통 2줄). */ @media (max-width: 768px) { [data-block-id="3883a92c-8e3f-4bcf-a07e-0f1080420dbb"] > div { flex-direction: column !important; } [data-block-id="3883a92c-8e3f-4bcf-a07e-0f1080420dbb"] > div > div { width: 100% !important; } [data-block-id="38fd6a62-96ae-805c-bf03-ce9ff458002c"] h2, [data-block-id="38fd6a62-96ae-805c-bf03-ce9ff458002c"] h2 * { font-size: min(var(--hero-title-size), 6.5vw) !important; white-space: normal !important; /* 한 줄 강제 해제 */ word-break: keep-all; } [data-block-id="38fd6a62-96ae-805c-bf03-ce9ff458002c"] h2 { width: auto !important; max-width: 100% !important; } } /* ④ 잠실역 도보 안내 */ [data-block-id="6ac9cfaa-6db5-42a6-b718-e0ec836cdceb"], [data-block-id="6ac9cfaa-6db5-42a6-b718-e0ec836cdceb"] * { font-size: var(--hero-metro-size) !important; font-weight: var(--hero-metro-weight) !important; /* 전역 400 규칙보다 우선(span까지) */ } /* ---------- 커버 배너를 화면 맨 위(탑바 뒤)까지 확장 ---------- */ /* 커버(.page_cover)가 있는 페이지에서 ownify.js ⑤가 body에 클래스를 토글: .onf-clear-top = 탑바를 커버 위에 투명하게 얹음 .onf-scrolled = 스크롤 중 (모든 페이지에서 토글됨) */ body.onf-clear-top .notion-topbar { position: absolute !important; /* 흐름에서 빼서 커버가 화면 맨 위부터 시작 */ top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100 !important; background-color: transparent !important; transition: background-color .25s, box-shadow .25s !important; } /* 스크롤 중 탑바 = 젖빛 유리(반투명 크림 + 블러) — 전 페이지 공통. 콘텐츠가 헤더 밑으로 비치며 지나가 "잘려 보이는" 딱딱함을 없앤다. */ body.onf-scrolled .notion-topbar { background-color: rgba(241, 234, 222, .78) !important; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(181, 154, 123, .28) !important; /* 은은한 경계선 */ } /* 커버를 탑바(100px)+추가 140px = 240px 키워 아래로 길게 (2026-07-02 Peter 요청) + 하단을 투명으로 녹여(mask) 크림 배경과 경계 없이 페이드아웃 ※ 원본 이미지 2048×683 — 이보다 훨씬 더 높이면 좌우 잘림 심해짐(그땐 이미지 재제작) */ body.onf-clear-top .page_cover { height: calc(var(--page-cover-height, 216px) + 240px) !important; -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); mask-image: linear-gradient(to bottom, black 60%, transparent 100%); } /* 하위 페이지(body.onf-sub — ownify.js ⑤가 토글)는 배너를 낮은 띠로: 탑바 100px + 이미지 200px = 300px. 콘텐츠가 첫 화면에 바로 보인다. 하단 페이드는 위 규칙 그대로 물려받아 크림 배경과 자연스럽게 이어짐. 세로 위치(object-position)도 강제 통일 — 노션에서 페이지마다 커버 위치를 다르게 잡아도 하위 페이지는 항상 같은 crop (이미지 통일은 ownify.js ⑤ ONF_COVER). */ body.onf-clear-top.onf-sub .page_cover { height: 300px !important; object-fit: cover !important; object-position: center 47% !important; } /* ---------- 카카오톡 상담 QR 팝업 (PC 전용 — ownify.js ⑥과 세트) ---------- */ /* PC에선 카카오 1:1 채팅이 앱 전용이라, 카카오 버튼 클릭 시 QR 카드를 띄운다. 카드 바깥을 클릭하면 닫힘. */ .onf-qr { position: fixed; inset: 0; z-index: 10000; background: rgba(58, 36, 21, .45); display: flex; align-items: center; justify-content: center; } .onf-qr-card { background: #F1EADE; border-radius: 20px; padding: 28px 36px 24px; text-align: center; box-shadow: 0 18px 60px rgba(0, 0, 0, .3); font-family: 'Paperlogy', 'Apple SD Gothic Neo', sans-serif; } .onf-qr-title { margin: 0; font-size: 19px; font-weight: 800; color: #3C1E1E; } .onf-qr-card img { width: 190px; height: 190px; border-radius: 14px; display: block; margin: 14px auto 12px; } .onf-qr-hint { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: #6F4A2F; } .onf-qr-card a { color: #D2691E; font-size: 13px; font-weight: 600; text-decoration: none; } /* ---------- 메뉴 분리 상태(body.onf-nav-split): 배너 유지 + 메뉴 줄을 로고 아래로 ---------- */ /* 우피는 좁은 창(≈780px 이하)에서 탑바를 "모바일 탑바(로고+햄버거) + 메뉴 스트립(형제 div)" 구조로 바꾼다. 투명 탑바가 모바일 탑바만 absolute로 띄우면 메뉴 스트립이 맨 위로 올라가 크림 띠가 되므로, 스트립도 로고 아래(100px)에 투명하게 얹는다(2026-07-03). 감지는 ownify.js ⑤: 보이는 탑바에 메뉴 링크가 없으면 body.onf-nav-split. */ body.onf-nav-split.onf-clear-top .notion-topbar ~ div:has(a[href]) { position: absolute !important; top: 100px !important; /* 로고 탑바(100px) 바로 아래 */ left: 0 !important; right: 0 !important; z-index: 100 !important; background-color: transparent !important; transition: background-color .25s !important; } /* 스크롤 중엔 탑바와 같은 젖빛 유리로 */ body.onf-nav-split.onf-scrolled .notion-topbar ~ div:has(a[href]) { background-color: rgba(241, 234, 222, .78) !important; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); } /* ---------- 모바일 지도 폴백 (ownify.js ⑧과 세트) ---------- */ /* 모바일 UA(body.onf-mobile-map)에선 네이버 지도 iframe이 빈 화면이라 iframe을 숨기고, 탭하면 네이버지도가 열리는 지도 이미지로 대체 */ .onf-map-mobile { display: none; } body.onf-mobile-map [data-block-id="2a11866f-119c-4e50-9a8e-058529413e1e"] div:has(iframe) { display: none !important; } body.onf-mobile-map .onf-map-mobile { display: block; position: relative; width: 100%; height: 100% !important; } .onf-map-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 22px; } .onf-map-mobile span { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: rgba(58, 36, 21, .75); color: #F1EADE; font-size: 12.5px; padding: 7px 15px; border-radius: 999px; white-space: nowrap; }