/* ── 자체호스팅 폰트 (런타임 외부 CDN 금지) · IBM Plex 가족 ── */ @font-face{font-family:"IBM Plex Sans KR";font-weight:400;font-display:swap; src:url("/assets/fonts/IBMPlexSansKR-Regular.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans KR";font-weight:600;font-display:swap; src:url("/assets/fonts/IBMPlexSansKR-SemiBold.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans KR";font-weight:700;font-display:swap; src:url("/assets/fonts/IBMPlexSansKR-Bold.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap; src:url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap; src:url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2")} :root{ --sans:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace; /* 다크(기본·관측) */ --bg:#070B12;--bg2:#0A0F1A;--surf:#0E1626;--surf2:#111C30;--elev:#152238; --ink:#EAF0F8;--ink2:#93A3BC;--muted:#7D8BA3;--line:#1B2942;--line2:#141F33; /* 브랜드 액센트: Cobalt Precision — cobalt 리드 + amber flair(절제된 화려). 중립색은 계승. */ --t:#4C7DFF;--az:#3D8BFF;--vi:#8E7CF6;--aurora:linear-gradient(100deg,#34E5C4,var(--az) 55%,var(--vi));/* 시그니처 그라디언트는 이전 teal-led 유지(선호)·--t 코발트와 분리 */ --accent:#4C7DFF;--flair:#F5B547; --good:#2DD4BF;--warn:#F5B13D;--crit:#F2557A; /* 글자 전용 강조 — 위 세 색은 테두리·배경에는 좋지만 **글자**로 쓰면 라이트 테마에서 명도대비가 무너진다(실측: crit 2.79 · warn 1.58 · good 1.57, WCAG AA 4.5 미달). 색상(hue)은 유지하고 명도만 낮춘 값을 테마별로 따로 둔다. 글자에는 이쪽을 쓸 것. */ --crit-ink:#F2557A;--warn-ink:#F5B13D;--good-ink:#2DD4BF; --ease:cubic-bezier(.34,1.3,.5,1);--ease2:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.2,.8,.2,1);--dur-1:120ms;--dur-2:220ms;--dur-3:380ms;--stagger:56ms; --radius:14px;--radius-sm:10px;--radius-lg:18px; --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px; } /* 라이트(읽기 표면·전역 크롬) — 쿨 페이퍼, 웜크림 금지 */ :root[data-theme="light"]{ --bg:#F1F3EE;--bg2:#EAEDE6;--surf:#FCFCFA;--surf2:#F4F5F1;--elev:#FFFFFF; --ink:#141B22;--ink2:#414B57;--muted:#5C6672;--line:#D5D9D1;--line2:#E7EAE2; --t:#2F5FE0;--az:#24509F;--vi:#4f46a8;--aurora:linear-gradient(100deg,#1B3F5F,#0f6155); --accent:#2F5FE0;--flair:#C9871A;--good:#0F8F7C; /* 라이트에서 AA(4.5)를 넘는 최소 명도까지만 낮춘 값 — 더 어둡게 하면 강조가 죽는다. 최소 대비(표면 3종 + 그 위 15% 틴트 배경까지 포함한 최악값): crit 4.73 · warn 4.84 · good 4.85 */ --crit-ink:#B41D45;--warn-ink:#865809;--good-ink:#0D6D60; } /* OS가 라이트인데 사용자가 dark를 강제하지 않은 경우에도 라이트 토큰 적용(시인성 보강) */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#F1F3EE;--bg2:#EAEDE6;--surf:#FCFCFA;--surf2:#F4F5F1;--elev:#FFFFFF; --ink:#141B22;--ink2:#414B57;--muted:#5C6672;--line:#D5D9D1;--line2:#E7EAE2; --t:#2F5FE0;--az:#24509F;--vi:#4f46a8;--aurora:linear-gradient(100deg,#1B3F5F,#0f6155); --accent:#2F5FE0;--flair:#C9871A;--good:#0F8F7C; /* 라이트에서 AA(4.5)를 넘는 최소 명도까지만 낮춘 값 — 더 어둡게 하면 강조가 죽는다. 최소 대비(표면 3종 + 그 위 15% 틴트 배경까지 포함한 최악값): crit 4.73 · warn 4.84 · good 4.85 */ --crit-ink:#B41D45;--warn-ink:#865809;--good-ink:#0D6D60; color-scheme:light; } } html{color-scheme:dark} :root[data-theme="light"]{color-scheme:light} html{word-break:keep-all;overflow-wrap:anywhere}/* 한글 어절 중간 끊김 방지(전역) */ /* ── Task2: 모션 키프레임 + 재사용 컴포넌트 (승인 시안 lookbook에서 이관, 색은 전부 토큰 경유) ── */ @keyframes shim{0%,100%{background-position:0 0}50%{background-position:100% 0}} @keyframes scan{0%{top:0;opacity:0}12%{opacity:1}100%{top:100%;opacity:0}} @keyframes tk{to{transform:translateX(-50%)}} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--t) 33%,transparent)} 70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} /* 컴포넌트는 .gs 스코프로 한정 — 재스킨된 페이지만 로 opt-in. 사전-재스킨 페이지(.gs 없음)와 .panel/.btn/.chip 등 클래스명이 충돌하지 않게 함. 토큰·폰트·키프레임·:focus-visible는 전역. */ /* 리빌 온스크롤 */ .gs .rv{opacity:0;transform:translateY(20px)} .gs .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease2),transform .8s var(--ease)} /* 버튼 / 칩 */ .gs .btn{border:0;border-radius:11px;padding:11px 22px;font-weight:800;font-size:14px;cursor:pointer; color:var(--bg);background:var(--aurora);font-family:var(--sans);transition:transform .18s var(--ease)} .gs .btn:active{transform:scale(.95)} .gs .chip{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;color:var(--ink2); border:1px solid var(--line);background:var(--surf);border-radius:999px;padding:6px 13px;transition:.2s var(--ease)} .gs .chip:hover{color:var(--ink);border-color:var(--t)} /* 카드/타일 */ .gs .tile{position:relative;background:linear-gradient(160deg,var(--surf),var(--surf2)); border:1px solid var(--line);border-radius:16px;padding:20px 18px;cursor:pointer;overflow:hidden; transition:transform .35s var(--ease),border-color .35s,box-shadow .35s var(--ease2)} .gs .tile::before{content:"";position:absolute;inset:0;opacity:0;transition:.4s; background:radial-gradient(90% 80% at 15% 0%,color-mix(in srgb,var(--t) 7%,transparent),transparent 60%)} .gs .tile:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--az) 40%,var(--line)); box-shadow:0 18px 44px color-mix(in srgb,var(--muted) 45%,transparent),0 0 0 1px color-mix(in srgb,var(--t) 13%,transparent)} .gs .tile:hover::before{opacity:1} /* 패널 */ .gs .panel{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden; background:radial-gradient(130% 120% at 15% -10%,color-mix(in srgb,var(--az) 20%,var(--surf2)),var(--surf2))} /* HUD 스탯 리드아웃 */ .gs .hud{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:34px 0 0;max-width:760px} @media(min-width:640px){.gs .hud{grid-template-columns:repeat(4,1fr)}} .gs .hud .c{background:var(--bg2);padding:16px 16px} .gs .hud .v{font-family:var(--mono);font-size:clamp(22px,3.4vw,30px);font-weight:700;letter-spacing:-.02em; color:var(--ink);font-variant-numeric:tabular-nums} .gs .hud .k{font-size:10.5px;color:var(--muted);margin-top:6px;letter-spacing:.1em;text-transform:uppercase} /* 실시간 티커 */ .gs .ticker{border-bottom:1px solid var(--line);background:var(--bg2);overflow:hidden;height:34px;display:flex;align-items:center} .gs .tk-track{display:flex;gap:28px;white-space:nowrap;font-family:var(--mono);font-size:11.5px;color:var(--ink2); will-change:transform;animation:tk 40s linear infinite;padding-left:100%} .gs .ticker:hover .tk-track{animation-play-state:paused} /* 부팅 스캔 인트로 */ .gs .boot{position:absolute;inset:0;z-index:6;background:var(--bg);display:flex;align-items:center;justify-content:center; font-family:var(--mono);color:var(--t);font-size:12px;letter-spacing:.28em} .gs .boot.done{opacity:0;pointer-events:none;transition:opacity .55s ease} .gs .scan{position:absolute;left:0;right:0;height:2px;top:0; background:linear-gradient(90deg,transparent,var(--t),transparent);box-shadow:0 0 20px var(--t); animation:scan 1s cubic-bezier(.5,0,.5,1) forwards} /* 읽기(.read) 프로필 */ .gs .read{--pad:clamp(16px,3vw,28px)} .gs .read h1,.gs .read h2,.gs .read h3{font-weight:700;letter-spacing:-.02em} /* 세리프 미사용 — 굵은 sans 위계 */ .gs .read p,.gs .read li{font-size:15.5px;line-height:1.75;max-width:66ch;color:var(--ink)} .gs .read .num{font-variant-numeric:tabular-nums} .gs .read *{--glow:none} @media (prefers-reduced-motion:reduce){ .gs .rv{opacity:1;transform:none;transition:none} .gs .tk-track{animation:none;padding-left:0} .gs .boot,.gs .scan{display:none} .gs [data-anim="ambient"]{animation:none!important} } :focus-visible{outline:2px solid var(--t);outline-offset:2px} /* ── border-beam 유틸(전역, Jakub Antalík 참고) — 테두리 도는 은은한 관측 빔. @supports 게이트·reduced-motion off ── */ .beam{position:relative} @property --beam{syntax:'';initial-value:0deg;inherits:false} @keyframes beamrot{to{--beam:360deg}} @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)){ .beam::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.4px;pointer-events:none;z-index:2; background:conic-gradient(from var(--beam,0deg), transparent 0 58%, color-mix(in srgb,var(--t,#4C7DFF) 95%,transparent) 76%, color-mix(in srgb,var(--az,#3D8BFF) 85%,transparent) 88%, transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; opacity:.7; animation:beamrot 4.5s linear infinite} @media (prefers-reduced-motion: reduce){ .beam::before{animation:none; opacity:.25} } } /* ── thinking dots 로더(전역, 모노크롬 currentColor) — "불러오는 중" 상태용. reduced-motion off ── */ .tdots{display:inline-flex;gap:4px;vertical-align:middle;margin-left:6px} .tdots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:tdot 1.1s ease-in-out infinite} .tdots i:nth-child(2){animation-delay:.15s} .tdots i:nth-child(3){animation-delay:.3s} @keyframes tdot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.15)}} @media (prefers-reduced-motion:reduce){.tdots i{animation:none;opacity:.5}} /* ── 사이트 전역 모션 폴리시(추가전용·transitions.dev 정신 → 순수 CSS) ── 짧은 지속시간·작은 이동. .gs 스코프 유지(비-gs 레거시 페이지 영향 차단). 숨김 기본값(opacity:0/visibility:hidden) 신규 도입 금지 — 콘텐츠는 항상 보임. */ /* 1) 카드 호버 리프트 — 실체 표면(배경+테두리)이 있는 진짜 카드 컨테이너에만. */ .gs .panel,.gs .report-card,.gs .card{ transition:transform .18s var(--ease2),box-shadow .18s var(--ease2),border-color .18s var(--ease2)} .gs .panel:hover,.gs .report-card:hover,.gs .card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--az) 32%,var(--line)); box-shadow:0 8px 24px color-mix(in srgb,var(--muted) 30%,transparent), 0 0 0 1px color-mix(in srgb,var(--t) 12%,transparent)} /* KPI 스탯 타일: 격자 밀집(1px~10px gap) → 이동 시 노이즈. 리프트 없이 테두리·배경만 은은히. */ .gs .kpi{transition:background-color .18s var(--ease2),border-color .18s var(--ease2),box-shadow .18s var(--ease2)} .gs .kpi:hover{ border-color:color-mix(in srgb,var(--t) 30%,var(--line)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 14%,transparent)} /* 2) 페이드업 리빌: 기존 .gs .rv(→.rv.in, nav.js IntersectionObserver)가 이미 존재·안전. 신규 숨김 기본값 도입 위험을 피하려 리빌을 새로 만들지 않음(기존 메커니즘 유지). */ /* 3) 마이크로 인터랙션 — 링크/버튼 색·배경·테두리 부드럽게(변형/애니메이션엔 무개입). .gs .btn/.chip은 자체 transition 보유(특이도 우선) → 여기 규칙에 안 덮임. */ .gs a,.gs button{transition:color .15s var(--ease2),background-color .15s var(--ease2),border-color .15s var(--ease2)} /* 4) reduced-motion: 위 이동/그림자 전환 무력화(색 피드백은 즉시 적용). */ @media (prefers-reduced-motion:reduce){ .gs .panel,.gs .report-card,.gs .card,.gs .kpi{transition:none} .gs .panel:hover,.gs .report-card:hover,.gs .card:hover{transform:none;box-shadow:none} .gs a,.gs button{transition:none} } /* ── 토큰 별칭(공용화 SoT) — 페이지 인라인 :root(--surface/--paper/--ink-2/--line-2) 제거 시 ds.css가 단일 출처. var 간접이라 테마 자동 반영 ── */ :root{--surface:var(--surf);--surf-2:var(--surf2);--paper:var(--bg);--paper-2:var(--bg2);--ink-2:var(--ink2);--line-2:var(--line2)} /* ── ds-motion.js 리빌(옵트인·실패안전) — JS가 html.ds-motion-ready 부여 전엔 [data-reveal] 완전 표시(opacity:1). reduced-motion에선 ready-class를 안 붙이므로 자동 정적. .gs 스코프 불필요(신규 data-* 어휘). ── */ html.ds-motion-ready [data-reveal]{opacity:0;transform:translateY(16px); transition:opacity var(--dur-3,380ms) var(--ease2),transform var(--dur-3,380ms) var(--ease-spring,var(--ease))} html.ds-motion-ready [data-reveal].ds-in{opacity:1;transform:none} /* ── 기관 분석 공용 헤더+탭(#105) — inst-tabs.js 주입. 기관명+정보칩 고정 + 언더라인 탭. .wrap(1080/18px) 정렬 ── */ .inst-wrap{max-width:1080px;margin:12px auto 0;padding:0 18px} .inst-search{margin-bottom:10px} .inst-search input{width:100%;max-width:420px;font-family:var(--sans);font-size:14px;color:var(--ink); background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:9px 13px} .inst-search input:focus{outline:none;border-color:var(--t);box-shadow:0 0 0 3px color-mix(in srgb,var(--t) 14%,transparent)} .inst-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px} .inst-hd .inst-name{font-size:calc(clamp(18px,2.4vw,24px) * var(--nsc,1));font-weight:850;letter-spacing:-.02em;color:var(--ink)} .inst-hd .inst-meta{display:flex;gap:6px;flex-wrap:wrap} .inst-hd .ichip{font-size:11px;font-weight:700;color:var(--ink2);border:1px solid var(--line);background:var(--surf);border-radius:999px;padding:3px 10px} .inst-links{display:flex;gap:6px 8px;flex-wrap:wrap;margin-bottom:10px} .inst-links a{font-size:12px;font-weight:700;color:var(--ink2);text-decoration:none;border:1px solid var(--line);background:var(--surf);border-radius:8px;padding:5px 10px;transition:color .18s var(--ease2),border-color .18s var(--ease2)} .inst-links a:hover{color:var(--t);border-color:var(--t)} .inst-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)} /* ── 기관 진입 화면 보조 블록(#105) — 최근 본 기관·주목 기관·빠른 찾기. inst-tabs.js가 주입 ── */ .pk-extras{max-width:760px;margin:22px auto 0;text-align:left;display:flex;flex-direction:column;gap:18px} .pk-sec{display:flex;flex-direction:column;gap:8px} .pk-h{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink2);text-transform:uppercase;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .pk-sub{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)} .pk-list{display:flex;gap:7px;flex-wrap:wrap} .pk-i{display:inline-flex;align-items:baseline;gap:6px;font-size:calc(13.5px * var(--nsc,1));font-weight:700;color:var(--ink); text-decoration:none;border:1px solid var(--line);background:var(--surf);border-radius:9px;padding:7px 11px; transition:color .18s var(--ease2),border-color .18s var(--ease2)} .pk-i:hover{color:var(--t);border-color:var(--t)} .pk-i .pk-note{font-size:11px;font-weight:700;color:var(--muted)} .pk-chips{display:flex;gap:6px;flex-wrap:wrap} .pk-c{font-size:12.5px;font-weight:700;color:var(--ink2);border:1px solid var(--line);background:transparent; border-radius:999px;padding:5px 11px;cursor:pointer;font-family:inherit} .pk-c i{font-style:normal;font-size:11px;color:var(--muted)} .pk-c:hover{color:var(--ink);border-color:var(--t)} .pk-c.on{color:#fff;background:var(--t);border-color:var(--t)} .pk-c.on i{color:rgba(255,255,255,.75)} .pk-res{display:flex;flex-direction:column;gap:8px;margin-top:2px} .inst-tabs .itab{padding:9px 16px;font-size:14px;font-weight:800;text-decoration:none;color:var(--ink2); border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .18s var(--ease2)} .inst-tabs .itab:hover{color:var(--ink)} .inst-tabs .itab.on{color:var(--t);border-bottom-color:var(--t)} /* ── 검증원장 배지 (#36 E1) — 이 숫자가 확인된 값인지, 계산된 값인지, 아직 사람이 확인 안 한 값인지 ── 4상태: confirmed(원문·공시로 직접 확인) / derived(확인값으로 계산·식 공개) / unverified(자동 추출·사람 미확인) / unavailable(공시 자체가 없음). derived는 결함이 아니다 — 파생치를 확인된 사실처럼 보이게 하는 것이 결함이다. */ .vb{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.01em; border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap;vertical-align:.06em; color:var(--ink2);background:transparent;cursor:help} .vb i{font-style:normal;font-size:9px;line-height:1} /* 채움은 warn/good 만(2026-08-06) — crit 계열은 텍스트와 배경이 같은 색조라 틴트하면 AA가 무너진다(계산 확인) */ .vb-confirmed{color:var(--good-ink);border-color:color-mix(in srgb,var(--good) 45%,var(--line)); background:color-mix(in srgb,var(--good) 10%,transparent)} .vb-derived{color:var(--t);border-color:color-mix(in srgb,var(--t) 40%,var(--line))} .vb-unverified{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 45%,var(--line)); background:color-mix(in srgb,var(--warn) 10%,transparent)} .vb-unavailable{color:var(--muted)} /* 각주 한 줄 — 출처·기준시점·커버리지. generated(산출일)와 refPeriod(기준 시점)를 반드시 구분해 적는다. */ .vmeta{font-size:11px;color:var(--muted);line-height:1.65} .vmeta b{color:var(--ink2);font-weight:800} .vmeta .vsep{margin:0 5px;opacity:.55} /* 터치 기기 탭 타깃 — 실측상 칩·아이콘 버튼이 24~37px이라 오탭이 났다(390px 기준). 포인터가 거친 기기에서만 높이를 올린다. 마우스 환경 레이아웃은 건드리지 않는다. */ @media (pointer: coarse){ button, select, input[type="button"], input[type="submit"], [role="button"]{min-height:40px} }