/* 119 소방 AI 스튜디오 — 허브 페이지 공통 크롬(외곽 레이아웃). tokens.css 팔레트에 의존. * 7개 손작성 허브(index·guide-library·repo-radar·video-channels·projects·curriculum·contribute)가 공유한다. * 페이지마다 다른 것(.blob 위치·색·blur, .mono, 컴포넌트 카드)은 각 페이지 인라인에 남긴다. * 동일성은 7개 페이지 전수 대조로 검증함(uniq=1). :focus-visible/.crumb/.grain 은 미세 표류를 여기서 단일화. */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--txt);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word} h1,h2,h3{text-wrap:balance} /* 한글 제목 줄 길이 균형 — 미지원 브라우저는 무시 */ a{color:inherit;text-decoration:none} .serif{font-family:"Instrument Serif",serif} .gro{font-family:"Space Grotesk",sans-serif} .wrap{max-width:1200px;margin:0 auto;padding:0 30px} /* 배경 오로라 컨테이너 — 개별 .blob 위치/색/blur 와 @keyframes 는 페이지 인라인에 둔다 */ .aura{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none} .grain{position:fixed;inset:0;z-index:-1;opacity:.45;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} @media (prefers-reduced-motion:reduce){.blob{animation:none}} header{position:sticky;top:0;z-index:60;padding:16px 0} .crumb{font-family:"Space Grotesk";font-size:12.5px;color:var(--txt-faint);margin-bottom:22px} .crumb a:hover{color:var(--ember)} :focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:6px} /* 모바일 터치 타깃 — 필터 칩을 ≥44px 탭 영역으로(WCAG). 데스크톱 모양은 불변 */ @media (max-width:600px){ .chip{min-height:44px;display:inline-flex;align-items:center} } /* View Transitions 크로스페이드는 사용자 결정으로 제거(2026-07-02) — 전화면 디졸브가 '번쩍임'으로 체감됨. * 하드 컷 + 의 meta color-scheme(dark)로 어두운 즉시 전환이 확정 동작. 재도입 금지: docs/reviews/2026-07-02-nav-flash-view-transition-review.md */ /* ===== 카드 깊이(elevation) — 유리 상단 1px 하이라이트 + 엠비언트 그림자, 호버 시 불씨 틴트 ===== */ .cell,.card,.step,.glasspanel,.ecard,.chcard,.vcard,.pcard,.scard,.stage{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px -18px rgba(0,0,0,.55)} .cell:hover,.card:hover,.step:hover,.ecard:hover,.chcard:hover,.vcard:hover,.pcard:hover,.scard:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 56px -22px rgba(0,0,0,.7),0 12px 44px -18px rgba(255,90,46,.24)} /* 모바일: 필터 칩 행을 한 줄 가로 스크롤 스냅으로(세로 5줄 점유 방지). * div.chips 로 특이도 상승 — 페이지 인라인 .chips{flex-wrap:wrap}은 @import된 이 파일보다 뒤에 오므로 * 동일 특이도면 인라인이 이긴다. */ @media (max-width:600px){ div.chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px} div.chips::-webkit-scrollbar{display:none} div.chips .chip{flex-shrink:0;scroll-snap-align:start} div.chips .flabel-inline{flex-shrink:0} } /* ---------- 딥링크 착지(:target) — 검색·홈에서 개별 카드로 도착했을 때 위치 표시 ---------- */ .trow:target, .ecard:target, .fvid:target, .vcard:target, .chcard:target, .scard:target, .pcard:target, .stage:target, .module:target, .cap:target { scroll-margin-top: 96px; animation: target-flash 2.4s ease-out 1 both; } @keyframes target-flash { 0%, 55% { outline: 2px solid var(--ember); outline-offset: 4px; } 100% { outline: 2px solid rgba(255, 107, 53, 0); outline-offset: 4px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .trow:target, .ecard:target, .fvid:target, .vcard:target, .chcard:target, .scard:target, .pcard:target, .stage:target, .module:target, .cap:target { animation: none; outline: 2px solid var(--ember); outline-offset: 4px; } } /* ---------- 이어서 보기(홈) — localStorage 기반, 서버 전송 없음 ---------- */ .continue-row{margin-top:38px} .cont-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px} .cont-clear{font-family:inherit;font-size:12px;color:var(--txt-faint);background:none;border:1px solid var(--glass-line);border-radius:100px;padding:5px 13px;cursor:pointer;transition:color .18s,border-color .18s} .cont-clear:hover{color:var(--txt-dim);border-color:var(--txt-faint)} .cont-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .cont-item{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);text-decoration:none;color:var(--txt);transition:border-color .18s} .cont-item:hover{border-color:var(--ember,#ff5a2e)} .cont-item .cont-type{font-size:11px;color:var(--amber,#ffb338);letter-spacing:.06em} .cont-item strong{font-size:14px;font-weight:600;line-height:1.45;word-break:keep-all} .cont-item .cont-ago{font-size:11.5px;color:var(--txt-faint)} .cont-note{margin-top:10px;font-size:11.5px;color:var(--txt-faint)}