/* ══════════════════════════════════════════════════════════════════════════ 쉴더스랩 — 디자인 시스템 v2 (에디토리얼) 원칙 · 종이(warm off-white) 위에 잉크. 그라데이션·글로우·블러 없음. · 구조를 숨기지 않는다 — 헤어라인 규칙선, 12칼럼 그리드, 좌측 라벨/우측 본문 비대칭. · 라벨·번호·메타데이터는 모노스페이스. 본문은 한글 가독을 위한 넉넉한 행간. · 카드는 상자가 아니라 '단(column)' — 상단 규칙선 + 번호로 구분한다. · 모션은 스크롤 진입 페이드 하나. 배경은 움직이지 않는다. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* 지면 */ --paper:#F6F4EF; --paper-2:#EFECE4; --paper-3:#E8E4DA; --white:#FFFDFA; --dark:#14171A; --dark-2:#1D2125; /* 잉크 */ --ink:#15181B; --ink-2:#4A5157; --ink-3:#5F666C; /* WCAG AA: paper 계열 위 소형 텍스트 4.5:1 확보(paper 5.30·paper-2 4.94·paper-3 4.59). 이전 #7C838A 는 3.0~3.5 로 미달 */ /* --muted 는 --ink-3 의 별칭이다(새 색 아님). 관리자 콘솔과 .pg 컴포넌트가 var(--muted) 를 폴백 없이 8곳에서 쓰는데 선언이 없어 color 가 inherit 로 떨어지고 있었다 — '연한 보조 텍스트'로 의도한 경로·카운트·빈 상태·힌트가 본문색으로 진하게 나왔다. */ --muted:var(--ink-3); --ink-inv:#EDEAE3; --ink-inv-2:#A7ACA8; /* 규칙선 */ --rule:#DDD8CE; --rule-2:#C6C0B3; --rule-inv:rgba(237,234,227,.18); /* 액센트 — 딥 파인 */ --accent:#1A4B3A; --accent-2:#0F3227; --accent-3:#2E6B54; --wash:#E9EFEA; --ochre:#8A6224; /* 상태 */ --ok:#1A4B3A; --warn:#8A6224; --bad:#8C3A2E; --shell:1240px; --gut:28px; /* ── 폰트 스택 ────────────────────────────────────────────── IBM Plex Mono 와 Serif 에는 **한글 글리프가 없다.** 그래서 모노·세리프 스택의 두 번째 자리에 'IBM Plex Sans KR' 을 둔다. 이렇게 하면 라벨 안에 한글이 섞여도 시스템 폰트(Apple SD Gothic Neo 등)로 떨어지지 않고 사이트 자체 서체로 이어진다 — 한 줄 안에서 서체가 바뀌는 현상을 셀렉터 관리 없이 구조적으로 막는다. ⚠ 새 컴포넌트는 반드시 이 변수를 쓴다. 스택을 직접 적지 말 것. */ --font-sans:'IBM Plex Sans KR','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif; --font-mono:'IBM Plex Mono','IBM Plex Sans KR',ui-monospace,SFMono-Regular,Menlo,monospace; /* IBM Plex Serif 는 요청에서 뺐다(위 shell.py 주석 참조 — 한글에 렌더되지 않아 내려받기만 하던 상태였다). 라틴은 시스템 Georgia, 한글은 Sans KR 이 받는다. */ --font-serif:Georgia,'IBM Plex Sans KR',serif; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:17px; line-height:1.78; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"tnum" 0; overflow-x:hidden; } a{color:inherit;text-decoration:none} img,svg{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--accent);color:var(--paper)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ─────────────── 타이포 ─────────────── */ h1,h2,h3,h4,h5{font-weight:600;line-height:1.18;letter-spacing:-.024em} .d1{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.038em;font-weight:600} .d2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.032em} .d3{font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.026em} .lead{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.72;color:var(--ink-2)} .small{font-size:.875rem;line-height:1.7;color:var(--ink-2)} .tiny{font-size:.78rem;line-height:1.6;color:var(--ink-3)} /* 굵기는 600 이 이 시스템의 볼드 끝이다. / 의 브라우저 기본값은 700 인데 700 페이스는 로드하지 않으므로 그대로 두면 브라우저가 **합성 볼드**(글자를 알고리즘으로 부풀린 가짜 굵기)를 그린다. 한글에서 특히 뭉개져 보이고, 같은 페이지의 진짜 600 과 굵기가 어긋나 "폰트가 튄다"는 인상을 준다. 전역으로 600 에 맞춘다. */ b,strong{font-weight:600} .mono{font-family:var(--font-mono)} .lbl{font-family:var(--font-mono); font-size:.6875rem;font-weight:500;letter-spacing:.145em;text-transform:uppercase;color:var(--ink-3)} .lbl-a{color:var(--accent)} .serif{font-family:var(--font-serif)} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* ─────────────── 레이아웃 ─────────────── */ .shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 32px} .g12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)} /* 스팬은 grid-column-end 로만 지정한다 — grid-column 단축을 쓰면 .startN 이 grid-column-start 를 덮을 때 스팬이 사라진다(단축이 end:auto 로 설정하기 때문). */ .c2{grid-column-end:span 2}.c3{grid-column-end:span 3}.c4{grid-column-end:span 4} .c5{grid-column-end:span 5}.c6{grid-column-end:span 6}.c7{grid-column-end:span 7} .c8{grid-column-end:span 8}.c9{grid-column-end:span 9}.c10{grid-column-end:span 10} .c11{grid-column-end:span 11}.c12{grid-column-end:span 12} .start2{grid-column-start:2}.start3{grid-column-start:3}.start4{grid-column-start:4}.start5{grid-column-start:5}.start6{grid-column-start:6}.start7{grid-column-start:7}.start8{grid-column-start:8}.start9{grid-column-start:9}.start10{grid-column-start:10}.start11{grid-column-start:11}.start12{grid-column-start:12} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* 본문 바로가기 — 평소엔 화면 밖, Tab 으로 포커스되면 좌상단에 나타난다(WCAG 2.4.1). 키보드 사용자가 매 페이지 nav 를 건너뛰고 본문으로 바로 간다. */ .skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--paper); color:var(--accent);font-weight:500;padding:10px 16px;border:1px solid var(--accent); border-radius:2px;transition:top .16s ease} .skip-link:focus{top:8px;outline:2px solid var(--accent);outline-offset:2px} /* hidden 속성은 UA 기본값 display:none 이라 어떤 요소에든 display 를 지정하는 순간 무력해진다. 홈 채용 섹션(#home-careers)이 공고 0건일 때 이걸로 숨으므로 명시적으로 못박는다. */ [hidden]{display:none !important} .sec{padding:96px 0;position:relative} .sec-sm{padding:64px 0} .rule{height:1px;background:var(--rule);border:0;width:100%} .rule-ink{height:1px;background:var(--ink);border:0;width:100%} .band{background:var(--paper-2)} .band-3{background:var(--paper-3)} .band-dark{background:var(--dark);color:var(--ink-inv)} .band-dark .lbl{color:var(--ink-inv-2)} .band-dark .lead,.band-dark .small{color:var(--ink-inv-2)} .band-dark .rule{background:var(--rule-inv)} /* 섹션 머리 — 좌측 라벨 / 우측 본문 비대칭 */ .sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut); padding-top:22px;border-top:1px solid var(--ink);margin-bottom:56px} .sec-head .idx{grid-column:span 3} .sec-head .idx .lbl{display:block;padding-top:6px} .sec-head .body{grid-column:4 / -1} .sec-head h2{margin-bottom:18px} .sec-head .lead{max-width:60ch} /* ─────────────── 헤더 ─────────────── */ .masthead{position:sticky;top:0;z-index:60;background:var(--paper); border-bottom:1px solid var(--rule);transition:border-color .2s} .masthead.stuck{border-bottom-color:var(--rule-2)} .masthead .bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand img{height:36px;width:auto;display:block} .brand .admin-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em; color:var(--ink-3);border-left:1px solid var(--rule-2);padding-left:12px} @media (max-width:820px){.brand img{height:30px}} .nav{display:flex;align-items:center;gap:30px} .nav a{font-size:.9rem;font-weight:500;color:var(--ink-2);position:relative;padding:4px 0} .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink); transition:right .28s cubic-bezier(.2,.7,.2,1)} .nav a:hover{color:var(--ink)} .nav a:hover::after,.nav a.on::after{right:0} .nav a.on{color:var(--ink);font-weight:500} .nav .cta{border:1px solid var(--ink);padding:9px 18px;font-size:.84rem;font-weight:500;color:var(--ink)} .nav .cta::after{display:none} .nav .cta:hover{background:var(--ink);color:var(--paper)} .burger{display:none;width:40px;height:40px;border:1px solid var(--rule-2);background:none;cursor:pointer; align-items:center;justify-content:center;flex-direction:column;gap:4px} .burger i{display:block;width:16px;height:1px;background:var(--ink);transition:.25s} .burger.on i:nth-child(1){transform:translateY(2.5px) rotate(45deg)} .burger.on i:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)} /* ─────────────── 버튼 · 링크 ─────────────── */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-size:.92rem;font-weight:500; border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer; transition:background .18s,color .18s,border-color .18s} .btn:hover{background:transparent;color:var(--ink)} .btn-line{background:transparent;color:var(--ink)} .btn-line:hover{background:var(--ink);color:var(--paper)} .btn-acc{background:var(--accent);border-color:var(--accent);color:var(--white)} .btn-acc:hover{background:transparent;color:var(--accent)} .btn-sm{padding:9px 16px;font-size:.82rem} .btn:disabled{opacity:.45;cursor:not-allowed} .band-dark .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)} .band-dark .btn:hover{background:transparent;color:var(--paper)} .band-dark .btn-line{background:transparent;color:var(--paper);border-color:var(--rule-inv)} .band-dark .btn-line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .alink{display:inline-flex;align-items:baseline;gap:8px;font-weight:500;font-size:.9rem; border-bottom:1px solid var(--rule-2);padding-bottom:2px;transition:border-color .2s,color .2s} .alink::after{content:"→";transition:transform .2s} .alink:hover{border-bottom-color:var(--ink)} .alink:hover::after{transform:translateX(4px)} /* ─────────────── 히어로 ─────────────── */ .hero{padding:88px 0 76px;border-bottom:1px solid var(--ink)} .hero .g12{align-items:end} .hero h1{margin:26px 0 0} .hero .sub{margin-top:28px;max-width:46ch} .hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px} .hero-meta{border-left:1px solid var(--rule);padding-left:24px} .hero-meta dl{display:grid;gap:0} .hero-meta dt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3);padding-top:16px} .hero-meta dd{font-size:.94rem;color:var(--ink);padding-bottom:16px;border-bottom:1px solid var(--rule); line-height:1.55} .hero-meta dd:last-child{border-bottom:0} /* 규제 태그 열 */ .tagrow{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);margin-top:56px} .tagrow span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-2); padding:14px 22px 14px 0;border-right:1px solid var(--rule);margin-right:22px;white-space:nowrap} .tagrow span:last-child{border-right:0;margin-right:0;padding-right:0} /* ─────────────── 단(column) 카드 ─────────────── */ .cols{display:grid;gap:0 var(--gut)} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} .col-item{border-top:1px solid var(--ink);padding:20px 0 40px;display:flex;flex-direction:column; gap:12px;position:relative} .col-item .n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:var(--ink-3)} .col-item h3{font-size:1.08rem;letter-spacing:-.018em} .col-item p{font-size:.9rem;color:var(--ink-2);line-height:1.7} .col-item .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .col-item .tags i{font-style:normal;font-family:var(--font-mono);font-size:.64rem; letter-spacing:.08em;color:var(--ink-3);border:1px solid var(--rule);padding:3px 8px} .col-item .go{margin-top:auto;padding-top:14px} a.col-item{transition:border-color .2s} a.col-item:hover{border-top-color:var(--accent)} a.col-item:hover h3{color:var(--accent)} /* 얇은 구분: 열 사이 세로 규칙선 */ .cols.divided .col-item{padding-left:22px;border-left:1px solid var(--rule)} .cols.divided .col-item:first-child{padding-left:0;border-left:0} /* ─────────────── 정의 리스트 / 스펙 표 ─────────────── */ .kv{border-top:1px solid var(--ink)} .kv .row{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:16px 0; border-bottom:1px solid var(--rule)} .kv dt,.kv .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3);padding-top:3px} .kv dd,.kv .v{font-size:.94rem;color:var(--ink);line-height:1.7; /* 줄바꿈 지점이 없는 긴 토큰(contact@shilderslab.com 등)이 칼럼을 밀어내지 않게 한다. */ min-width:0;overflow-wrap:anywhere} /* ⚠️ 좁은 사이드바(.c4 = 12칼럼 중 4칼럼)에서는 키/값을 **세로로 쌓는다.** 위 180px 는 전체폭
기준값이다. 4칼럼 어사이드는 840px 뷰포트에서 폭이 235px 뿐이라 180px + gap 24px = 204px 를 키가 먹고 값에 **31px** 만 남았다 → 본문이 한 글자씩 세로로 흘렀다(실측: '보안 신고' 값 30.7줄 · '운영시간' 8.3줄 · 행 전체가 어사이드를 넘침). 512행의 `@media (max-width:820px)` 붕괴는 이 맥락에서 **방향이 반대**다 — 어사이드는 820px **위에서** 좁아진다(그 지점부터 4칼럼 레이아웃이 켜지므로). 그래서 뷰포트 분기가 아니라 **컨테이너 맥락**(.c4)으로 잡는다. 모든 폭에서 안전하다. */ .c4 .kv .row{grid-template-columns:1fr;gap:6px} table.spec{width:100%;border-collapse:collapse;font-size:.9rem} table.spec caption{text-align:left;font-family:var(--font-mono);font-size:.68rem; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-bottom:12px} table.spec th{text-align:left;font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);padding:0 16px 10px 0;border-bottom:1px solid var(--ink);white-space:nowrap} table.spec td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top; color:var(--ink-2);line-height:1.65} table.spec td:first-child{color:var(--ink);font-weight:500} table.spec tr:last-child td{border-bottom:0} table.spec .num{font-variant-numeric:tabular-nums;color:var(--ink)} /* ─────────────── 프로세스 ─────────────── */ .flow{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink)} .flow .step{padding:22px 20px 34px 0;border-right:1px solid var(--rule);padding-right:20px} .flow .step:last-child{border-right:0} .flow .step .n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em; color:var(--accent);display:block;margin-bottom:12px} .flow .step h4{font-size:.98rem;margin-bottom:8px} .flow .step p{font-size:.85rem;color:var(--ink-2);line-height:1.66} /* ─────────────── 목록 ─────────────── */ .ticks{list-style:none;display:grid;gap:0;border-top:1px solid var(--rule)} .ticks li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:15px 0; border-bottom:1px solid var(--rule);font-size:.94rem;color:var(--ink-2);line-height:1.7} .ticks li b{color:var(--ink);font-weight:600} .ticks li::before{content:"—";color:var(--accent);font-family:var(--font-mono);font-size:.8rem; padding-top:3px} .bullets{list-style:none;display:grid;gap:9px} .bullets li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:.92rem;color:var(--ink-2); line-height:1.7} .bullets li::before{content:"·";color:var(--ink-3);font-weight:700;text-align:center} /* ─────────────── 인용 ─────────────── */ /* 열 안의 소머리 — `.lbl`(아이브로) + 디스플레이 제목 조합. 16곳이 같은 구조인데 인라인 style 로 마진을 매번 따로 적어 값이 6가지로 갈려 있었다 (18/18·20/24·20/26·20/22·18/16·18/14 — 2~12px 차이라 의도한 설계로 보기 어렵다). 조판을 한 곳에서 정하고 마크업에서는 인라인 마진을 없앤다. ⚠ 새 소머리를 만들 때 style="margin:..." 을 다시 쓰지 말고 이 클래스를 붙일 것. */ .col-head .lbl{display:block} .col-head h2,.col-head h3{margin:18px 0} .col-head .lead,.col-head p{margin-top:0} /* CTA 섹션은 `.cta h2{margin-bottom:20px}` 가 뒤에서 이겨 18/20 이 된다. 그건 CTA 만의 의도된 조판이라 그대로 둔다 — 여기서 !important 로 덮지 않는다. */ /* 콜아웃 — 본문 흐름 중 강조 박스. 법률 문서(.doc .note)와 자료실(.doc-note)이 배경·테두리·글꼴·행간까지 같은 걸 각자 정의하고 패딩만 2px 달랐다. 하나로 합친다. 새 강조 박스가 필요하면 이걸 쓰고, 의미 변형은 수정자 클래스로 붙일 것. */ .callout{border-left:2px solid var(--accent);background:var(--wash);padding:18px 22px; font-size:.92rem;color:var(--ink-2);line-height:1.78;margin:26px 0} .pull{border-left:2px solid var(--accent);padding-left:26px;max-width:52ch} .pull p{font-family:var(--font-serif);font-size:clamp(1.2rem,1.9vw,1.5rem); line-height:1.62;letter-spacing:-.014em;color:var(--ink)} .pull cite{display:block;margin-top:14px;font-style:normal;font-family:var(--font-mono); font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} /* ─────────────── 지표 ─────────────── */ .figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)} .figs .fig{padding:24px 20px 26px 0;border-right:1px solid var(--rule)} .figs .fig:last-child{border-right:0} .figs .fig b{display:block;font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:500;letter-spacing:-.03em; line-height:1;font-variant-numeric:tabular-nums;margin-bottom:10px} .figs .fig span{font-size:.82rem;color:var(--ink-2);line-height:1.55;display:block} /* ─────────────── 글 목록 ─────────────── */ .posts{border-top:1px solid var(--ink)} .post{display:grid;grid-template-columns:150px 1fr 150px;gap:var(--gut);padding:26px 0; border-bottom:1px solid var(--rule);align-items:baseline;transition:background .18s} .post:hover{background:rgba(26,75,58,.035)} .post .meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-3); text-transform:uppercase} .post h3{font-size:1.14rem;letter-spacing:-.02em;margin-bottom:8px} .post p{font-size:.9rem;color:var(--ink-2);max-width:64ch} .post .go{text-align:right;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3)} .post:hover .go{color:var(--accent)} /* 본문(인사이트 상세) */ .article{max-width:68ch} .article .body{font-size:1.06rem;line-height:1.85;color:var(--ink-2)} .article .body h2{font-size:1.34rem;color:var(--ink);margin:44px 0 14px;padding-top:20px; border-top:1px solid var(--rule)} .article .body h3{font-size:1.08rem;color:var(--ink);margin:30px 0 10px} .article .body p{margin-bottom:18px} .article .body ul,.article .body ol{margin:0 0 18px 22px} .article .body li{margin-bottom:8px} .article .body b{color:var(--ink);font-weight:600} .article .body a{color:var(--accent);border-bottom:1px solid var(--rule-2)} .article .body a:hover{border-bottom-color:var(--accent)} .article .body code{font-family:var(--font-mono);font-size:.88em;background:var(--paper-2); padding:2px 6px} .article .body pre{background:var(--paper-2);border:1px solid var(--rule);padding:18px;overflow-x:auto; margin-bottom:18px} .article .body blockquote{border-left:2px solid var(--accent);padding-left:20px;margin:0 0 18px; color:var(--ink-2)} /* ─────────────── 페이지 머리 ─────────────── */ .phead{padding:64px 0 52px;border-bottom:1px solid var(--ink)} .phead .crumb{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3);margin-bottom:26px} .phead .crumb a:hover{color:var(--accent)} .phead h1{max-width:20ch} .phead .lead{margin-top:22px;max-width:58ch} /* ─────────────── 폼 ─────────────── */ .form{border-top:1px solid var(--ink);padding-top:8px} .field{padding:18px 0;border-bottom:1px solid var(--rule)} .field label{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-3);margin-bottom:9px} .field label .req{color:var(--accent)} .field input,.field select,.field textarea{width:100%;background:transparent;border:0; border-bottom:1px solid transparent;padding:4px 0;font-size:1rem;line-height:1.6;color:var(--ink)} .field textarea{min-height:130px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)} .field input::placeholder,.field textarea::placeholder{color:var(--ink-3)} /* 이전 #A9AEA6 은 2.06:1 로 심각 미달 */ .field select{cursor:pointer} .field .hint{font-size:.78rem;color:var(--ink-3);margin-top:8px;line-height:1.6} .field.err{border-bottom-color:var(--bad)} .field .msg{display:none;font-size:.76rem;color:var(--bad);margin-top:7px} .field.err .msg{display:block} .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut)} .consent{display:grid;grid-template-columns:18px 1fr;gap:12px;padding:20px 0; border-bottom:1px solid var(--rule);font-size:.86rem;color:var(--ink-2);line-height:1.7} .consent input{width:16px;height:16px;margin-top:5px;accent-color:var(--accent)} .consent a{color:var(--accent);border-bottom:1px solid var(--rule-2)} .alert{display:none;padding:14px 18px;font-size:.88rem;margin-bottom:22px;border-left:2px solid} .alert.on{display:block} .alert.ok{background:var(--wash);border-color:var(--accent);color:var(--accent-2)} .alert.bad{background:#F7ECEA;border-color:var(--bad);color:var(--bad)} .alert.info{background:var(--paper-2);border-color:var(--rule-2);color:var(--ink-2)} /* ─────────────── CTA ─────────────── */ .cta{padding:84px 0} .cta h2{max-width:18ch;margin-bottom:20px} .cta .lead{max-width:52ch;margin-bottom:34px} /* ─────────────── 푸터 ─────────────── */ footer.site{background:var(--dark);color:var(--ink-inv);padding:72px 0 34px;margin-top:0} footer.site a{color:var(--ink-inv-2)} footer.site a:hover{color:var(--paper)} footer.site .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gut); padding-bottom:48px;border-bottom:1px solid var(--rule-inv)} footer.site .fbrand img{height:34px;width:auto;margin-bottom:20px} footer.site .fbrand p{font-size:.86rem;color:var(--ink-inv-2);max-width:34ch;line-height:1.72} /* 푸터 열 제목 — 시맨틱은 h2(문서 말단 독립 섹션, 레벨 건너뜀 방지), 시각은 작은 모노 라벨 유지. 색은 dark 위 6.77:1(이전 #6E7570 은 3.81 미달). */ footer.site h2{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em; text-transform:uppercase;color:#9BA09C;margin-bottom:18px;font-weight:500;line-height:1.3} footer.site .fcol a,footer.site .fcol span{display:block;font-size:.88rem;margin-bottom:11px; color:var(--ink-inv-2)} footer.site .legal{padding-top:26px;display:flex;justify-content:space-between;gap:20px 32px;flex-wrap:wrap} footer.site .biz{font-size:.74rem;color:#9BA09C;line-height:1.9;max-width:70ch} /* dark 위 6.77:1 (이전 #6E7570 3.81 미달) */ footer.site .biz b{color:var(--ink-inv-2);font-weight:500} footer.site .copy{font-size:.72rem;color:#8A8F8B;margin-top:8px} /* dark 위 5.47:1 (이전 #5C625E 2.88 미달) */ footer.site .flinks{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start} footer.site .flinks a{font-size:.76rem} /* ─────────────── 공지 배너 ─────────────── */ .notice-bar{background:var(--dark);color:var(--ink-inv);text-align:center;padding:9px 18px; font-size:.8rem;letter-spacing:-.01em} .notice-bar a{color:var(--ink-inv);border-bottom:1px solid rgba(237,234,227,.4)} /* ─────────────── 모션 ─────────────── */ .rv{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1)} .rv.in{opacity:1;transform:none} /* 리빌 지연. ⚠ 예전 이름은 `.rv.d1` 이었는데 `.d1`~`.d3` 은 **디스플레이 제목 스타일**이기도 하다 (위 79~81행: font-size clamp 최대 4.6rem · font-weight 600 · letter-spacing -.038em). 그래서 `class="col-item rv d1"` 같은 요소가 제목 타이포를 통째로 물려받았다. font-size 는 하위 규칙이 덮어 눈에 안 띄었지만 **font-weight 600 과 자간은 상속돼** 카드 안 모노 텍스트가 합성 볼드로 렌더되고 글자가 좁아졌다(2026-08-08 실측, 12곳). 이름을 분리했다. 되돌리지 말 것. */ .rv.rv-d1{transition-delay:.06s}.rv.rv-d2{transition-delay:.12s}.rv.rv-d3{transition-delay:.18s} .rv.rv-d4{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .rv{opacity:1!important;transform:none!important;transition:none!important} *{scroll-behavior:auto!important} } /* ─────────────── FAQ ─────────────── */ .faq{border-top:1px solid var(--ink)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{padding:20px 0;cursor:pointer;list-style:none;display:grid; grid-template-columns:1fr 24px;gap:16px;font-weight:500;font-size:1rem;align-items:start} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--font-mono);color:var(--ink-3); font-size:1.1rem;line-height:1.4;text-align:right} .faq details[open] summary::after{content:"–";color:var(--accent)} .faq .ans{padding:0 60px 24px 0;font-size:.94rem;color:var(--ink-2);line-height:1.78;max-width:70ch} /* 배지·상태, 표(.tbl), 관리자 셸 CSS 는 assets/css/admin.css 로 분리했다(관리자 전용). .empty 만 공개 페이지(채용·인사이트 폴백)도 쓰므로 여기 남긴다. */ .empty{padding:44px 0;color:var(--ink-3);font-size:.9rem} /* ─────────────── 관리자 ─────────────── 관리자 셸·탭·패널·지표·모달·표·배지 등은 assets/css/admin.css 로 옮겼다 (공개 페이지에 실리지 않게). admin/index.html 이 site.css 다음에 admin.css 를 링크한다. ⚠ 아래 공용 @media 블록에 .mini-stat span / .login-box / table.tbl 카드접기 반응형이 일부 남아 있다 — 그 요소들의 base 는 admin.css 에 있고, 관리자는 두 파일을 다 받으므로 정상 동작한다. 그 규칙을 옮기려면 @media 경계를 깨야 해서 남겨 두었다. */ /* ─────────────── 반응형 ─────────────── */ @media (max-width:1080px){ .sec-head{margin-bottom:44px} .sec-head .idx{grid-column:span 12;margin-bottom:14px} .sec-head .body{grid-column:span 12} .cols-4{grid-template-columns:repeat(2,1fr)} .flow{grid-template-columns:repeat(2,1fr);border-top:0} .flow .step{border-right:0;border-top:1px solid var(--rule);padding-right:16px} .figs{grid-template-columns:repeat(2,1fr)} .post{grid-template-columns:120px 1fr} .post .go{display:none} footer.site .top{grid-template-columns:1fr 1fr;gap:36px var(--gut)} .two{grid-template-columns:1fr} } @media (max-width:820px){ body{font-size:16px} .shell{padding:0 20px} .sec{padding:64px 0} .hero{padding:56px 0 52px} .hero .g12>*{grid-column:span 12} .hero-meta{border-left:0;padding-left:0;border-top:1px solid var(--rule);margin-top:40px;padding-top:8px} .g12>*{grid-column:1 / -1} .cols-2,.cols-3,.cols-4{grid-template-columns:1fr} .cols.divided .col-item{padding-left:0;border-left:0} .row2{grid-template-columns:1fr} /* 닫힌 패널은 화면 밖(translateX 100%)에 있지만 그것만으로는 링크가 여전히 Tab 포커스· 스크린리더에 잡힌다. visibility:hidden 으로 접근 트리에서 빼고, 열릴 때 되살린다. transition 에 visibility 를 함께 걸어 슬라이드가 끝난 뒤 사라지게 한다. */ .nav{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);flex-direction:column;align-items:flex-start; gap:0;background:var(--paper);border-left:1px solid var(--ink);padding:88px 28px 28px; transform:translateX(100%);visibility:hidden; transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility .3s;z-index:70;overflow-y:auto} .nav.open{transform:none;visibility:visible} /* 드로어 뒤 딤 — 열린 상태를 분명히 하고, 바깥을 눌러 닫을 수 있게 한다. (데스크톱에서는 이 미디어쿼리 밖이라 존재하지 않는다.) */ .nav-backdrop{position:fixed;inset:0;background:rgba(20,23,26,.42);z-index:65; opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s} .nav-backdrop.on{opacity:1;visibility:visible} .nav a{width:100%;padding:16px 0;border-bottom:1px solid var(--rule);font-size:1rem} .nav .cta{width:100%;justify-content:center;margin-top:22px;border-bottom-width:1px} .burger{display:flex;z-index:75} .kv .row{grid-template-columns:1fr;gap:6px} .detail-dl{grid-template-columns:1fr} .detail-dl dt{border-bottom:0;padding-bottom:0} .figs{grid-template-columns:1fr} .figs .fig{border-right:0;border-bottom:1px solid var(--rule)} .post{grid-template-columns:1fr;gap:8px} footer.site .top{grid-template-columns:1fr} .modal-card{padding:24px} table.spec{font-size:.84rem} } /* ══════════════════════════════════════════════════════════════ CMS 리치 블록 관리자 콘솔에서 편집하는 여러 문단짜리 블록(data-content, kind=rich). 글자 크기·색은 부모(.lead 등)에서 상속받고, 여기서는 문단 간격만 잡는다. 빌드가 구워 넣은 마크업과 클라이언트가 다시 그린 마크업이 같은 모양이어야 하므로 자식 선택자(>)로만 규칙을 건다. ══════════════════════════════════════════════════════════════ */ .cms-rich>p{margin:0 0 18px} .cms-rich>p:last-child{margin-bottom:0} .cms-rich>ul,.cms-rich>ol{margin:0 0 18px;padding-left:20px} .cms-rich>ul>li,.cms-rich>ol>li{margin-bottom:6px} .cms-rich>blockquote{margin:0 0 18px;padding-left:16px;border-left:2px solid var(--rule-2);color:var(--ink-3)} .cms-rich>h2,.cms-rich>h3{margin:26px 0 10px;font-size:1.05rem;color:var(--ink)} /* ══════════════════════════════════════════════════════════════ 한글 라벨 보정 모노스페이스 + 대문자 + 넓은 자간은 라틴 알파벳 전용 조판이다. 한글이 들어가는 라벨은 산세리프로 되돌리고 자간을 좁힌다. (라틴 전용 라벨 .lbl · 번호 .n · 코드값은 모노 유지) ⚠ 아래 목록은 **셀렉터 단위**라, 같은 셀렉터에 한글과 라틴이 섞여 들어오는 자리(예: 연혁의