@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); /* ── 공통 상단 바 + 페이지 전환 (jnranet.com 의 /, /apps/, /api/ 가 같이 쓴다) ── 각 페이지 끝에서 불러 페이지 CSS 를 덮는다. API INDEX 는 ranet-api-catalog/public_theme.py 가 링크한다. 상단 바 두 상태: · 기본(흰 바) — 흰 반투명 바탕 + 진한 글씨 + 컬러 CI (앱스·API, 그리고 홈에서 스크롤을 내렸을 때) · html.over — 사진 위에 떠 있는 투명 바 + 흰 글씨 + 흰 CI (홈 첫 화면) */ @view-transition{navigation:auto} /* 밝은 화면 전용 — 폰 브라우저가 강제로 어둡게 칠하지 않게(크롬 자동 다크 모드는 only light 를 존중) */ :root{color-scheme:only light} /* 글꼴: Pretendard 가변 굵기(모든 기기에서 같은 굵기) — CDN 이 막히면 각 페이지의 기존 글꼴 목록으로 */ body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif} .top{position:sticky;top:0;z-index:30;padding:0;view-transition-name:site-top; background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid rgba(27,31,46,.08);color:#1B1F2E;transition:background .35s,border-color .35s,color .35s} .top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px} /* 로고(CI) — 흰 바에선 컬러, 사진 위에선 흰색 */ .brand{position:relative;display:block;flex:none;height:30px;view-transition-name:site-logo} .brand img{display:block;height:30px;width:auto;transition:opacity .35s} .brand .w{position:absolute;inset:0;opacity:0} /* 글자 메뉴 — 현재 페이지는 글자 밑 가는 막대(.ind). 페이지를 넘기면 막대가 옆 메뉴로 미끄러진다 */ .menu{display:flex;align-items:center;gap:6px} .menu a{position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 14px;font-size:15px;font-weight:600;letter-spacing:-.01em; color:inherit;text-decoration:none;opacity:.72;transition:opacity .2s} .menu a:hover{opacity:1} .menu a.on{opacity:1;font-weight:800} .menu .ind{position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;view-transition-name:site-ind; background:linear-gradient(90deg,#0079C8,#5DB82F)} .menu .div{width:1px;height:14px;margin:0 8px;background:currentColor;opacity:.22} .menu a.x svg{width:11px;height:11px;opacity:.55} .menu .status{margin-left:10px} /* 사진 위(홈 첫 화면): 바를 사진에 띄우고 흰 글씨 */ html.over .top{position:fixed;left:0;right:0;background:transparent;border-color:transparent;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none} html.over .top .menu a{text-shadow:0 1px 12px rgba(0,0,0,.25)} html.over .top .ind{background:#fff} html.over .top .brand .c{opacity:0} html.over .top .brand .w{opacity:1} /* 홈에서 스크롤을 내리면 흰 바로 */ html.over.scrolled .top{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px); border-color:rgba(27,31,46,.08);color:#1B1F2E} html.over.scrolled .top .menu a{text-shadow:none} html.over.scrolled .top .ind{background:linear-gradient(90deg,#0079C8,#5DB82F)} html.over.scrolled .top .brand .c{opacity:1} html.over.scrolled .top .brand .w{opacity:0} /* 웹서비스 3개 묶음: PC 에선 한 줄, 폰에선 «⋯» 버튼 드롭다운 */ .menu{position:relative} .menu .xs{display:flex;align-items:center;gap:6px} .menu .more{display:none} @media (max-width:900px){ .menu .div{display:none} .menu .more{display:inline-grid;place-items:center;width:40px;height:40px;margin-left:2px;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer} .menu .more svg{width:18px;height:18px} .menu .more[aria-expanded="true"]{background:rgba(127,127,127,.18)} .menu .xs{display:none;position:absolute;right:0;top:calc(100% + 10px);min-width:210px;flex-direction:column;align-items:stretch;gap:2px;padding:8px; background:#fff;color:#1B1F2E;border:1px solid rgba(27,31,46,.08);border-radius:16px;box-shadow:0 20px 44px -18px rgba(27,31,46,.4); transform-origin:top right;animation:drop .18s cubic-bezier(.2,.8,.2,1)} .menu.open .xs{display:flex} .menu .xs a{opacity:1;justify-content:space-between;padding:13px 14px;border-radius:10px;font-weight:700;text-shadow:none!important} .menu .xs a:hover{background:#F1F2F7} } /* 홈(사진 위) 폰 화면: 앱스·API 는 히어로 버튼이 대신하므로 상단엔 외부 웹서비스 3종을 바로 노출 */ @media (max-width:900px){ html.over .menu > a{display:none} html.over .menu .more{display:none} html.over .menu .xs{display:flex;position:static;flex-direction:row;align-items:center;gap:0;min-width:0;padding:0; background:transparent;color:inherit;border:0;box-shadow:none;animation:none} html.over .menu .xs a{padding:10px 9px;font-weight:600;opacity:.85} html.over .menu .xs a:hover{background:transparent;opacity:1} html.over .menu .xs a svg{display:none} } @keyframes drop{from{opacity:0;transform:translateY(-6px) scale(.97)}} @media (max-width:480px){.top .wrap{gap:10px}.brand,.brand img{height:24px}.menu a{padding:10px 9px;font-size:14px}.menu .ind{left:9px;right:9px}.menu .status{display:none}} /* ── 페이지 전환 연출 (머티리얼 공유축 X) ── 이동(길고 부드럽게)과 페이드·흐림(짧게, 시차)을 따로 돌린다. 오른쪽 메뉴로 가면 본문이 왼쪽으로 밀린다. */ ::view-transition{background:#F6F7FB} ::view-transition-group(site-ind){animation-duration:.6s;animation-timing-function:cubic-bezier(.2,0,0,1)} ::view-transition-group(site-top),::view-transition-group(site-logo){animation-duration:.4s} ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal} ::view-transition-old(root){animation:.36s cubic-bezier(.4,0,1,1) both vt-fade-out} ::view-transition-new(root){animation:.45s cubic-bezier(0,0,.2,1) .1s both vt-fade-in} html:active-view-transition-type(fwd)::view-transition-old(root){animation:.55s cubic-bezier(.4,0,.2,1) both vt-slide-out-l,.36s cubic-bezier(.4,0,1,1) both vt-fade-out} html:active-view-transition-type(fwd)::view-transition-new(root){animation:.65s cubic-bezier(.05,.7,.1,1) .05s both vt-slide-in-r,.45s cubic-bezier(0,0,.2,1) .12s both vt-fade-in} html:active-view-transition-type(back)::view-transition-old(root){animation:.55s cubic-bezier(.4,0,.2,1) both vt-slide-out-r,.36s cubic-bezier(.4,0,1,1) both vt-fade-out} html:active-view-transition-type(back)::view-transition-new(root){animation:.65s cubic-bezier(.05,.7,.1,1) .05s both vt-slide-in-l,.45s cubic-bezier(0,0,.2,1) .12s both vt-fade-in} @keyframes vt-fade-out{to{opacity:0;filter:blur(8px)}} @keyframes vt-fade-in{from{opacity:0;filter:blur(8px)}} @keyframes vt-slide-out-l{to{transform:translateX(-16%)}} @keyframes vt-slide-out-r{to{transform:translateX(16%)}} @keyframes vt-slide-in-r{from{transform:translateX(16%)}} @keyframes vt-slide-in-l{from{transform:translateX(-16%)}} @media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}} /* 공통 바닥글 */ .site-foot{padding:36px 0 44px;text-align:center;color:#8A92A8;font-size:13px;line-height:1.7} .site-foot a{color:#8A92A8;text-decoration:none} .site-foot a:hover{color:#1B1F2E}