/* ═══════════════════════════════════════════════════════════ 유일식품 v4 — 「그린 바이오 (Green Bio)」 2026-07-30 (v3) · 2026-08-02 (v4 — 배치 규칙 4건 · 제품 사진 5장 교체) v2 「계측」에서 바뀐 것 · 신호색 앰버 1개 → 딥그린 + 프레시그린 + 앰버(보조) · 배경 뉴트럴 → 밝은 크림그린 · 모서리 0px 고정 → 4단 라운드 허용 · 그림자 전면 금지 → 소프트 섀도 3단 허용 · 그라디언트 금지 → 히어로·CTA 한정 허용 유지한 것 (색과 무관하게 신뢰도를 만드는 장치) · 모든 계측 수치는 모노스페이스 + tabular-nums · 수치에는 각주 출처를 반드시 붙인다 · 글자 8단계 · 여백 6단계 · 데이터 4형식 · 인라인 style 0개 ═══════════════════════════════════════════════════════════ */ /* Pretendard — 한글은 «전량» 담는다 (4종 합계 908KB). 풀셋 3.0MB KS X 1001 서브셋 1.05MB 공식 배포본 3,728자 사이트 전용 195KB 실제 쓰인 586자 — 2026-08-02 하루만 썼다 한글 전량 908KB 3,643자(키릴·IPA 85자만 제외) ← 지금 ⚠️ 이건 «최적화를 몰라서» 넓게 잡은 게 아니라 의도된 교환이다. 사이트 전용(195KB)이 성능은 제일 좋지만, 문구를 두 번 고치는 동안 새 글자가 4자 나와(「률」「잴」「섹」「션」) 그때마다 배포가 멈췄다. 「초반이라 편집이 많을 것」이라는 판단으로 한글 2,780자를 전부 담는 쪽으로 되돌렸다 (2026-08-03 대표 결정). 편집이 뜸해지면 tools/subset-fonts.py 의 KEEP_ALL_HANGUL 을 False 로 바꿔 다시 좁히면 된다. ⚠️ 그래도 «원본에 없는 글자»(한자·희귀 기호)는 폴백된다 — deploy.sh 가 배포 직전에 전수 대조해 세운다. 이제는 거의 안 걸리고, 걸리면 진짜 없는 글자다. ⚠️ 파일명 .site → .ko 로 바꾼 이유는 캐시다. .htaccess 가 폰트를 1년 캐시하므로 «내용이 바뀌면 이름도 바뀌어야» 재방문자가 새 파일을 받는다. 원본(KS)은 fonts/*.ks.woff2 로 남겨 뒀다 — 재생성의 입력이다. */ @font-face{font-family:Pretendard;font-weight:400;font-display:swap; src:url('../fonts/Pretendard-Regular.ko.woff2') format('woff2')} @font-face{font-family:Pretendard;font-weight:500;font-display:swap; src:url('../fonts/Pretendard-Medium.ko.woff2') format('woff2')} @font-face{font-family:Pretendard;font-weight:600;font-display:swap; src:url('../fonts/Pretendard-SemiBold.ko.woff2') format('woff2')} @font-face{font-family:Pretendard;font-weight:700;font-display:swap; src:url('../fonts/Pretendard-Bold.ko.woff2') format('woff2')} :root{ /* ── 브랜드 그린 ── */ /* 모든 값은 WCAG AA(4.5:1) 실측 통과분이다. 임의로 밝히지 말 것 — 캡션·마이크로 라벨이 11~13px 이라 대비가 떨어지면 바로 안 읽힌다. */ --green:#00704A; /* 1차 — 링크·CTA·활성. 흰 6.15:1 · 민트 5.58:1 */ --green-d:#00563A; /* hover / active */ --green-l:#37BE80; /* 프레시 — 다크 위 전용. forest 5.77:1 */ --forest:#12332A; /* 딥 포레스트 — 다크 섹션 배경 */ --forest-2:#1B4438; /* 다크 위 미세 분리 */ --mint:#D7EBE2; /* 라이트 민트 — 칩·틴트 배경 */ --mint-2:#EDF6F2; /* 극히 옅은 틴트 */ --amber:#9F6825; /* 보조 액센트 — 수치 단위. 흰 4.69:1 */ /* ── 종이와 잉크 ── */ --paper:#F9FBF9; --paper-2:#EFF5F1; --card:#FFFFFF; --ink:#12211C; --ink-2:#4C5F58; --ink-3:#64716C; /* 캡션·주석·마이크로. 배경 4종 전부 4.6:1 이상 */ --rule:#E0EAE5; --rule-2:#C9DBD3; --on-field:#F2F8F5; --on-field-2:#A6BFB5; --rule-field:rgba(255,255,255,.16); /* ── 글자 크기 8단계 ── 이 밖의 값 금지 */ /* ⚠️ --t1 은 11px 이었다. 이 크기의 라벨 대부분이 한글이고, 모노 스택에 한글 글리프가 없어 시스템 고딕으로 폴백되면서 .14em 자간까지 얹혀 「소개」「실증」같은 두 글자 라벨이 읽히지 않았다. 12px 로 올리고 한글이 들어가는 라벨(.chip · .card-no · thead · footer h4)은 아래에서 산세리프로 되돌린다. 모노는 숫자·단위에만 남긴다. */ --t1:12px; /* 마이크로 라벨 · 번호 */ --t2:13px; /* 주석 · 캡션 · 출처 */ --t3:15px; /* UI · 버튼 · 표 · 메타 */ --t4:17px; /* 본문 */ --t5:21px; /* 리드 · 소제목 */ --t6:27px; /* 카드 제목 */ --t7:34px; /* 수치 · 섹션 부제 */ --t8:clamp(36px,4.8vw,60px); /* 섹션 제목 · h1 */ --t9:clamp(42px,6.4vw,82px); /* 랜딩 히어로 전용 */ /* ── 여백 6단계 ── */ --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; /* ── 라운드 4단 ── */ --r1:6px; --r2:12px; --r3:20px; --r4:999px; /* ── 소프트 섀도 3단 ── */ --sh1:0 1px 2px rgba(18,51,42,.05), 0 2px 8px -4px rgba(18,51,42,.08); --sh2:0 2px 4px rgba(18,51,42,.04), 0 12px 28px -12px rgba(18,51,42,.14); --sh3:0 4px 8px rgba(18,51,42,.05), 0 28px 60px -20px rgba(18,51,42,.22); --max:1160px; --gut:28px; --sans:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',system-ui,sans-serif; /* ⚠️ 스택 끝의 Pretendard 는 오타가 아니다. 모노 폰트에는 한글 글리프가 없어서, kv 표의 값 칸처럼 한글이 섞이면 그 글자만 시스템 CJK 폰트로 폴백돼 본문과 다른 서체·자폭으로 튄다. 숫자·영문은 앞의 모노가 먼저 잡고, 한글만 Pretendard 가 받아 본문과 같은 서체로 붙는다. */ --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Pretendard,monospace; --dur:420ms; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden; font-family:var(--sans);font-size:var(--t4);line-height:1.66;letter-spacing:-.011em; word-break:keep-all;overflow-wrap:break-word; -webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.18} p{margin:0} ul{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)} /* 공통 유틸 */ /* .micro 에 남은 것은 「급여 후」「대조군 대비」 같은 한글 보조 라벨과 NH₃ 같은 단위뿐이다. 자간 .14em 은 한글에서 「급 여 후」로 흩어져 읽히므로 .03em 까지 줄인다. 영문 대문자 라벨은 아래 .eyebrow 가 가져갔다. */ .micro{font-family:var(--mono);font-size:var(--t1);letter-spacing:.03em; text-transform:uppercase;color:var(--ink-3)} /* ── 섹션 인덱스 라벨 (.eyebrow) ────────────── 1차: 11px 모노 대문자 「01 — 실증」 한 줄. 섹션 제목이 36~60px 인데 인덱스가 11px 이라 짝이 맞지 않았다. → 번호는 모노 칩, 이름은 산세리프로. 2차: 그래도 「여기가 사업영역이구나」가 즉시 안 읽혔다. 원인은 두 가지 — ① 17px 은 60px 제목 옆에서 여전히 존재감이 없다. ② .sec-head 가 200px 짜리 왼쪽 칸에 라벨을 혼자 앉혀서 제목과 100px 넘게 떨어졌다. 그 거리면 한 쌍으로 안 읽힌다. → 19px/700 으로 올리고, 아래 .sec-head 에서 제목 바로 위로 옮긴다. 큰 글자(카피)는 그대로 두고 뜻만 라벨이 먼저 잡아준다. */ .eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 9px; font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--green); line-height:1.3} .eyebrow b{font-family:var(--mono);font-size:var(--t2);font-weight:500; letter-spacing:.1em;text-transform:uppercase;line-height:1.2; color:var(--green-d);background:var(--mint);border-radius:var(--r1);padding:5px 10px} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .lead{font-size:var(--t5);line-height:1.5;color:var(--ink-2);max-width:52ch} .note{font-size:var(--t2);color:var(--ink-3);line-height:1.55} .lnk{color:var(--green);border-bottom:1px solid var(--mint)} .lnk:hover{border-bottom-color:var(--green)} .hl{color:var(--green);font-weight:600} /* ── 헤더 ───────────────────────────────── */ .nav{position:sticky;top:0;z-index:50;background:rgba(249,251,249,.86); backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--rule); transition:box-shadow var(--dur) var(--ease)} .nav.stuck{box-shadow:var(--sh1)} .nav-in{display:flex;align-items:center;gap:var(--s4);height:66px} .mark{display:flex;align-items:center;gap:10px} .mark-leaf{width:26px;height:26px;flex:none} .mark-tx b{display:block;font-size:var(--t5);font-weight:700;letter-spacing:-.045em;line-height:1.1} .mark-tx span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; color:var(--green);line-height:1.15} /* 상단 메뉴 — 회색(--ink-2) 15px 이라 배경 크림과 대비가 낮았다. 잉크색 + 500 으로 올린다 */ .nav-links{display:flex;gap:var(--s3);font-size:var(--t3);font-weight:500;color:var(--ink);flex:1} .nav-links a{white-space:nowrap;padding:5px 0;border-bottom:2px solid transparent; transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)} .nav-links a:hover,.nav-links a.cur{color:var(--green);border-bottom-color:var(--green)} .nav-cta{display:flex;gap:var(--s1);align-items:center} .btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:var(--t3); font-weight:500;padding:11px 20px;border:1px solid transparent;border-radius:var(--r4); cursor:pointer;white-space:nowrap; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .btn-primary{background:var(--green);color:#fff;box-shadow:var(--sh1)} .btn-primary:hover{background:var(--green-d);box-shadow:var(--sh2);transform:translateY(-1px)} .btn-ghost{border-color:var(--rule-2);color:var(--ink);background:var(--card)} .btn-ghost:hover{border-color:var(--green);color:var(--green)} .btn-lg{font-size:var(--t4);padding:14px 26px} .on-field .btn-ghost,.field .btn-ghost{color:var(--on-field);border-color:var(--rule-field); background:transparent} .on-field .btn-ghost:hover,.field .btn-ghost:hover{border-color:var(--on-field);color:#fff} .field .btn-primary{background:var(--green-l);color:#06231B} .field .btn-primary:hover{background:#52D194} /* 모바일 메뉴 — 햄버거 */ .burger{display:none;width:40px;height:40px;border:1px solid var(--rule-2);background:var(--card); border-radius:var(--r1);align-items:center;justify-content:center;cursor:pointer;padding:0} .burger i{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:var(--dur)} .burger i::before,.burger i::after{content:'';position:absolute;left:0;width:16px;height:1.5px; background:var(--ink);transition:var(--dur)} .burger i::before{top:-5px} .burger i::after{top:5px} .nav.open .burger i{background:transparent} .nav.open .burger i::before{top:0;transform:rotate(45deg)} .nav.open .burger i::after{top:0;transform:rotate(-45deg)} /* ── 섹션 골격 ──────────────────────────── ⚠️ 배경 순서는 페이지마다 «다르게» 짠다. 예전에는 5개 페이지가 전부 tint → field → (tint) → mint → cta 로 똑같아서, 사료첨가제와 브랜드축산물을 연달아 보면 단어만 바뀐 같은 페이지로 읽혔다. 지금은 8페이지가 전부 다른 순서다(현행: about `- tint - field - mint` · technology `field field - mint` · products-feed `tint field - mint -` · products-brand `- field - tint -` · products-wellness `mint - tint field -` · esg `tint field mint`). ⚠️ tint 와 mint 를 «붙여 놓지 말 것». --paper-2(#EFF5F1) 와 --mint-2(#EDF6F2) 는 육안으로 구분이 안 돼서, 두 섹션이 한 덩어리로 보이고 리듬이 사라진다. ⚠️ .field 로 옮기거나 .field 에서 빼낼 때는 그 안의 카드를 확인할 것 — 표가 촘촘한 카드는 .card.light 여야 하고, 나란한 두 카드는 둘 다 .light 이거나 둘 다 아니어야 한다(한쪽만 흰색이면 실수로 보인다). */ section{padding-block:var(--s6)} section.tint{background:var(--paper-2)} section.mint{background:var(--mint-2)} section.field{background:var(--forest);color:var(--on-field)} .field .lead,.field .note{color:var(--on-field-2)} .field .micro{color:var(--on-field-2)} /* 다크 섹션 위 인덱스 라벨 — 칩 배경을 흰색 반투명으로 바꾼다 */ .field .eyebrow{color:var(--green-l)} .field .eyebrow b{color:#CFF3E0;background:rgba(255,255,255,.13)} .field h1,.field h2,.field h3,.field h4,.field b,.field strong{color:var(--on-field)} .field .bar-name{color:var(--on-field)} .field .lnk{color:var(--green-l);border-bottom-color:var(--rule-field)} .field .hl{color:var(--green-l)} /* 라벨 → 제목 → 리드가 한 줄기로 내려온다. 예전의 2단 그리드 (200px 라벨칸 + 본문칸) 는 라벨을 제목에서 떼어놓기만 했고, 왼쪽 200px 이 늘 비어 있어 제목이 화면 한가운데서 시작하는 것처럼 보였다. 히어로(.hero)·밴드(.band) 도 이미 같은 세로 순서라, 블록으로 바꾸면 섹션 머리 모양이 사이트 전체에서 하나가 된다. */ .sec-head{padding-bottom:var(--s4);border-bottom:1px solid var(--rule); margin-bottom:var(--s5)} .field .sec-head{border-color:var(--rule-field)} .sec-head h2{font-size:var(--t8)} .sec-head .lead{margin-top:var(--s2)} .sec-head>.eyebrow{margin-bottom:var(--s2)} /* ═══ 데이터 표현 4형식 ═══ */ /* ① .fig — 수치 */ .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)} .fig{padding:var(--s3);background:var(--card);border:1px solid var(--rule); border-radius:var(--r2);box-shadow:var(--sh1)} .fig-n{font-family:var(--mono);font-size:var(--t7);font-weight:600;letter-spacing:-.04em; line-height:1;display:flex;align-items:baseline;gap:3px;color:var(--green)} .fig-n u{text-decoration:none;font-size:var(--t3);color:var(--amber)} .fig-l{margin-top:var(--s2);font-size:var(--t3);color:var(--ink-2);line-height:1.45} /* 다크 위 수치 타일 — 상단에 그린 액센트를 얹어 배경과 분리한다 */ .field .fig{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14); box-shadow:none;position:relative;overflow:hidden} .field .fig::before{content:'';position:absolute;inset:0 0 auto 0;height:3px; background:var(--green-l)} .field .fig-n{color:var(--green-l)} .field .fig-n u{color:var(--on-field-2)} .field .fig-l{color:var(--on-field-2)} @media(max-width:820px){.figs{grid-template-columns:1fr 1fr}} /* ② .bar — 급여 전 / 급여 후 비교 막대 ⚠️ 막대 길이는 「급여 후 남은 양」이지 감축률이 아니다. 그래서 한 줄짜리 막대만 그렸을 때는 읽는 방향이 숫자와 반대로 뒤집혔다 — 가장 많이 줄어든 암모니아(48.25%↓)가 가장 짧고, 가장 적게 줄어든 황화수소(18.00%↓)가 가장 길게 보였다. 기준선인 「급여 전 = 100」이 글자로만 있고 그림에 없던 탓이다. 그래서 급여 전을 회색 막대로 실제로 그리고 그 아래에 급여 후를 놓는다. 두 막대의 길이 차이가 곧 감축량이라, 숫자를 읽지 않아도 방향이 보인다. */ .bars{display:grid;gap:var(--s3)} .bar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s1)} .bar-name{font-size:var(--t3);font-weight:500} .bar-name em{font-style:normal;font-family:var(--mono);font-size:var(--t2);color:var(--ink-3);margin-left:6px} .bar-val{font-family:var(--mono);font-size:var(--t3);font-weight:600;color:var(--green)} .bar-duo{display:grid;gap:5px;margin-top:8px} /* 가운데 1fr 이 실제 막대. 양 옆은 라벨과 값이라 폭을 고정해야 세 항목의 막대 시작·끝이 세로로 정렬된다 — 어긋나면 길이 비교가 안 된다. */ .bar-row{display:grid;grid-template-columns:52px 1fr 56px;align-items:center;gap:10px} .bar-lb{font-size:var(--t1);color:var(--ink-3);letter-spacing:-.01em} .bar-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t1); color:var(--ink-3);text-align:right} .bar-after .bar-num{color:var(--green-d);font-weight:600} .bar-track{height:14px;background:var(--paper-2);border-radius:var(--r4);overflow:hidden} .bar-fill{height:100%;width:0;border-radius:var(--r4); background:linear-gradient(90deg,var(--green),var(--green-l)); transition:width 1150ms var(--ease)} /* 급여 전은 늘 100 인 기준선이다. 값이 아니라 자(尺)이므로 채워지는 연출을 주지 않는다 — 같이 자라면 무엇이 기준인지 알 수 없다. */ .bar-base .bar-fill{width:100%;background:var(--rule-2);transition:none} /* 다크 섹션 */ .field .bar-track{background:rgba(255,255,255,.12)} .field .bar-fill{background:linear-gradient(90deg,var(--green-l),#6FE0AC)} .field .bar-base .bar-fill{background:rgba(255,255,255,.30)} .field .bar-val{color:var(--green-l)} .field .bar-lb,.field .bar-num{color:var(--on-field-2)} .field .bar-after .bar-num{color:var(--green-l)} /* ③ .tbl — 표 */ .tbl{width:100%;border-collapse:collapse;font-size:var(--t3)} .tbl th,.tbl td{text-align:left;padding:14px 14px 14px 0;border-bottom:1px solid var(--rule); vertical-align:top} /* 표 머리 — 「품목」「용도」처럼 대부분 한글이다. 모노 대문자 11px 에서 산세리프 13px 로 바꿔야 열 이름이 먼저 읽힌다 */ .tbl thead th{font-family:var(--sans);font-size:var(--t2);letter-spacing:.01em; text-transform:none;color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--rule-2)} .tbl tbody tr{transition:background var(--dur) var(--ease)} .tbl tbody tr:hover{background:var(--mint-2)} .tbl td.num{font-family:var(--mono);font-variant-numeric:tabular-nums} .tbl td.hi{color:var(--green);font-weight:600} .field .tbl th,.field .tbl td{border-color:var(--rule-field)} .field .tbl tbody tr:hover{background:var(--forest-2)} .tbl.kv td:first-child{color:var(--ink-2);padding-right:var(--s2)} .tbl.kv td:last-child{text-align:right;padding-right:0; font-family:var(--mono);font-variant-numeric:tabular-nums} .field .tbl.kv td:first-child{color:var(--on-field-2)} .field .tbl.kv td:last-child{color:var(--on-field)} .tbl .w1{width:96px} .tbl .w2{width:180px} .tbl .w3{width:120px} /* 「등록」「출원」처럼 두 글자짜리 상태 칼럼. w3(120px) 를 쓰면 내용의 4배라 남는 폭을 다 먹고, 그만큼 옆 칼럼이 줄어 제목이 여러 줄로 쪼개진다. */ .tbl .w0{width:72px} /* 폭 캡 — 표는 컨테이너를 꽉 채울 이유가 없다. 「조달청 등록 7종」이 1104px 로 늘어나면서 품목 칼럼 828px 에 실제 내용은 300px 남짓이라 행마다 500px 가 비었다. 읽는 눈이 품목과 용도 사이를 건너뛰어야 해서 짝이 안 읽힌다. 영상 임베드(.frame.a169)를 920px 로 묶은 것과 같은 이유다. */ .tbl.tight{max-width:min(100%,720px)} /* 좁힌 표 아래 각주도 같이 좁힌다 — 안 그러면 표 밑에서 글만 혼자 폭 전체로 퍼져 축이 어긋난다(.frame.a169 + .note 와 같은 처리). */ .tbl.tight+.note{max-width:min(100%,720px)} @media(max-width:700px){.tbl .hide-s{display:none}} /* ④ .card — 카드 */ .cards{display:grid;gap:var(--s3)} .cards.c2{grid-template-columns:1fr 1fr} .cards.c3{grid-template-columns:repeat(3,1fr)} .cards.c4{grid-template-columns:repeat(4,1fr)} /* ⚠️ flex column 인 이유 — 그리드가 카드 높이를 맞춰주지만 그건 상자만이다. 본문 길이가 카드마다 달라서 칩 줄과 「자세히 보기」가 카드별로 다른 높이에 앉았다(index 3단 카드에서 1번만 24px 위). 세 카드를 나란히 보면 바닥선이 어긋나 정렬이 안 맞아 보인다. 아래 .card-meta / .card-link 의 margin-top:auto 가 남는 공간을 전부 먹어 하단 요소를 바닥에 붙인다. */ .card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r2); padding:var(--s3);box-shadow:var(--sh1); display:flex;flex-direction:column; transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease), border-color var(--dur) var(--ease)} a.card:hover,.card.lift:hover{box-shadow:var(--sh2);transform:translateY(-3px); border-color:var(--rule-2)} .field .card{background:var(--forest-2);border-color:var(--rule-field);box-shadow:none} /* ── 다크 섹션 위 라이트 카드 (.card.light) ── 표·수치가 빽빽한 카드에 쓴다. 어두운 글자 + 밝은 배경이 숫자 가독성이 가장 좋고, 딥그린 위에서 카드 경계도 분명해진다. .field 의 흰 글자 규칙을 이 안에서만 되돌린다. */ .field .card.light{background:var(--card);border-color:transparent;box-shadow:var(--sh3); color:var(--ink)} .field .card.light h3,.field .card.light h4, .field .card.light b,.field .card.light strong{color:var(--ink)} .field .card.light p{color:var(--ink-2)} .field .card.light .lead{color:var(--ink-2)} .field .card.light .note,.field .card.light .micro{color:var(--ink-3)} .field .card.light .card-no,.field .card.light .fn{color:var(--green)} .field .card.light .hl{color:var(--green)} /* 표 */ .field .card.light .tbl th,.field .card.light .tbl td{border-color:var(--rule)} .field .card.light .tbl thead th{color:var(--ink-3);border-color:var(--rule-2)} .field .card.light .tbl tbody tr:hover{background:var(--mint-2)} .field .card.light .tbl td.hi{color:var(--green)} .field .card.light .tbl.kv td:first-child{color:var(--ink-2)} .field .card.light .tbl.kv td:last-child{color:var(--ink)} /* 막대 — 딥그린용으로 밝혀 둔 색을 흰 카드 안에서 도로 어둡게 되돌린다. esg·products-feed·technology 의 막대가 전부 이 경로(.field 안의 흰 카드)다. */ .field .card.light .bar-lb,.field .card.light .bar-num{color:var(--ink-3)} .field .card.light .bar-after .bar-num{color:var(--green-d)} .field .card.light .bar-base .bar-fill{background:var(--rule-2)} .field .card.light .bar-name{color:var(--ink)} .field .card.light .bar-val{color:var(--green)} .field .card.light .bar-track{background:var(--paper-2)} .field .card.light .bar-fill{background:linear-gradient(90deg,var(--green),var(--green-l))} /* 각주 · 칩 · 접기 */ .field .card.light .src{border-color:var(--rule)} .field .card.light .src li{color:var(--ink-3)} .field .card.light .src b{color:var(--green)} .field .card.light .chip{color:var(--green-d);background:var(--mint)} .field .card.light .card-meta{border-color:var(--rule)} .field .card.light .more{border-color:var(--rule)} .field .card.light .more>summary{color:var(--ink-2)} .field .card.light .more>summary::after{color:var(--green)} /* 카드 라벨 — 「한우용」「양돈용」「식자재 유통」. 카드에서 가장 먼저 읽혀야 할 분류인데 11px 모노라 제목에 묻혔다 */ .card-no{font-family:var(--sans);font-size:var(--t2);font-weight:600;letter-spacing:.01em; color:var(--green);margin-bottom:var(--s1);text-transform:none} .field .card-no{color:var(--green-l)} /* ⚠️ 태그가 아니라 «문서 계층» 이 정한다 — 섹션 제목이 h2 이므로 카드 제목은 h3 다. 예전에는 큰 카드 제목이 h3(27px) · 작은 것이 h4(21px) 라 «크기» 로 태그를 골랐고, 그래서 h2 바로 밑에 h4 가 와서 계층이 h2→h4 로 건너뛰었다(W3C 오류 33건 중 33건). 지금은 둘 다 h3 이고, 흔한 21px 이 기본 · 27px 만 .lg 로 명시한다. ⚠️ .card 안에 h4 를 새로 쓰지 말 것 — 쓰면 다시 계층이 끊긴다. */ .card h2,.card h3{font-size:var(--t5)} .card h3.lg{font-size:var(--t6)} .card h4{font-size:var(--t5)} .card p{margin-top:var(--s2);font-size:var(--t3);color:var(--ink-2);line-height:1.6} .field .card p{color:var(--on-field-2)} .card-meta{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--rule); display:flex;flex-wrap:wrap;gap:6px} .field .card-meta{border-color:var(--rule-field)} .card-link{margin-top:var(--s3)} /* 하단 고정 — 카드 «맨 끝» 에 오는 칩 줄·버튼이 남는 세로 공간을 먹는다. ⚠️ 처음엔 .card-meta / .card-link 전부에 margin-top:auto 를 걸었는데, 사료첨가제 「제품 규격」 카드처럼 칩 줄 뒤에
가 더 오는 구조에서 칩 줄이 공간을 다 먹고 접기 블록을 카드 «밖으로» 314px 밀어냈다. 그래서 끝에 오는 경우로만 좁힌다 — 뒤에 다른 내용이 더 붙는 카드는 예전처럼 자연스럽게 흐른다. .card-link 는 인라인 버튼이라 flex 아이템이 되면 폭이 늘어난다 — align-self 로 원래 폭을 지킨다. */ .card>.card-meta:last-child, .card>.card-link:last-child{margin-top:auto} /* 칩 줄 + 버튼이 «함께» 끝나면 칩 줄이 공간을 먹고 버튼은 평소 간격. :has 를 못 읽는 브라우저에서는 버튼만 바닥에 붙는다 — 깨지지는 않는다. */ .card>.card-meta:has(+.card-link:last-child){margin-top:auto} .card>.card-meta+.card-link:last-child{margin-top:var(--s3)} .card>.card-link{align-self:flex-start} /* 칩 — 「조달청 등록 7종」처럼 대부분 한글 문장이다. 산세리프로 되돌린다 */ .chip{font-family:var(--sans);font-size:var(--t2);font-weight:500;letter-spacing:-.005em; color:var(--green-d);background:var(--mint);border-radius:var(--r4);padding:5px 12px} .field .chip{color:var(--on-field);background:rgba(255,255,255,.08)} @media(max-width:820px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}} /* 표가 든 2단 카드는 더 일찍 접는다 — 820px 바로 위(900~1100px 노트북·창모드) 에서 카드 폭이 460px 까지 줄고, 그 안의 표는 300px 도 안 남는다. 특허표 명칭이 「마늘껍질 / 발효액 / 제조방법」 3줄로 쪼개지던 구간이 여기다. 사진이 든 c2(제품 카드)는 접으면 이미지가 과하게 커지므로 그대로 둔다. */ @media(max-width:1100px){.cards.c2.stack-l{grid-template-columns:1fr}} /* ── 이미지 프레임 ── */ .frame{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:3/2; border-radius:var(--r2)} .frame.a43{aspect-ratio:4/3} /* 카드 사진 전용. 4:3 은 3단 카드에서 사진이 너무 높아 제목(「사료첨가제」 「브랜드 축산물」)이 첫 화면 밖으로 밀렸다 — 사진 3장만 보이고 무슨 사업인지는 스크롤해야 나왔다. 16:9 면 제목이 접힘선 위로 올라온다. */ .frame.a16{aspect-ratio:16/9} .frame.a11{aspect-ratio:1/1} .frame.a21{aspect-ratio:2/1} /* 서브페이지 히어로 전용 — 2:1 은 1104px 폭에서 552px 나 돼서 사진만 덩그러니 놓이면 「자리 채우기」로 읽힌다(대표 지적). 12/5 로 낮춰 460px 짜리 띠로 만든다. 원본이 2:1 이라 가로 크롭 없이 위아래만 잘린다. */ .frame.a24{aspect-ratio:12/5} /* 16:9 — 유튜브 임베드 전용. iframe은 object-fit이 안 먹으므로 폭·높이 100%로 채운다. ⚠️ 본문 폭(--max 1160px)을 꽉 채우면 화면을 너무 먹는다(2026-07-31 대표 지시). 920px로 묶고 가운데 정렬 — 좁은 화면에서는 max-width가 자동으로 풀려 기존처럼 폭 전체를 쓴다(별도 미디어쿼리 불필요). */ .frame.a169{aspect-ratio:16/9;background:var(--ink);max-width:920px;margin-inline:auto} .frame.a169 iframe{width:100%;height:100%;border:0;display:block} /* 임베드 바로 아래 각주는 영상 폭에 맞춰 따라 좁힌다 — 안 그러면 가운데 정렬된 영상 밑에서 글만 혼자 폭 전체로 퍼져 축이 어긋나 보인다. */ .frame.a169 + .note{max-width:920px;margin-inline:auto} .frame.fill{aspect-ratio:auto;height:100%} .frame img,.frame svg{width:100%;height:100%;object-fit:cover;display:block} .frame-cap{margin-top:var(--s1);font-size:var(--t2);color:var(--ink-3)} /* --ink-3 은 밝은 배경 4종에서만 4.6:1 을 확인한 값이다. 딥그린 위에 그대로 쓰면 캡션이 거의 안 보인다 — .micro·.note 와 같은 이유로 되돌린다. */ .field .frame-cap{color:var(--on-field-2)} /* 사진 위 텍스트용 스크림 */ .frame.scrim::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(18,51,42,0) 38%,rgba(18,51,42,.72) 100%)} .frame-tx{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--s3);color:#fff} /* 사진 위 락업은

다. h3 였을 때는 h1 바로 밑에 와서 계층을 끊었고, 의미로도 문서 섹션이 아니라 사진 캡션이라 제목 목록에 낄 자리가 아니다. */ .frame-tx h3,.frame-tx .frame-h{color:#fff} .frame-tx .frame-h{font-weight:600;letter-spacing:-.028em;line-height:1.18;font-size:1.17em} /* 스크림 위 보조 줄 — .note 는 자기 color(--ink-3)를 들고 오므로 상속으로는 안 밝아진다. 여기서 되돌리지 않으면 어두운 사진 위에서 안 읽힌다. 이 사이트 문법상 사진 위 큰 글자에는 «출처 한 줄»이 따라붙는다. */ .frame-tx .note{color:rgba(255,255,255,.82);margin-top:6px} .frame-tx .mono{color:#fff} /* 히어로처럼 큰 프레임에서는 안쪽 여백을 키우고 글자도 한 단 올린다. 기본 h3(--t6 27px)는 552px 짜리 히어로에서 캡션처럼 읽혀 사진이 밋밋해진다. --t7(34px)은 수치·CTA 밴드 제목에 쓰는 단이라 새 값을 만들지 않는다. */ .frame.a21 .frame-tx{padding:var(--s4)} .frame.a21 .frame-tx h3,.frame.a21 .frame-tx .frame-h{font-size:var(--t7)} /* 본문 밴드용 캡션 오버레이 (.tx-cap) ── 사진 «아래» 캡션은 큰 밴드에서 힘을 잃는다. 특히 뒤에 .note 가 이어지면 13px 회색 두 줄이 붙어 서로 구분이 안 된다(esg 02 가 그랬다). 사진 위로 올린다. ⚠️ 히어로처럼 h3 를 쓰지 «않는다». 같은 무게의 오버레이를 11군데에 쓰면 도구가 벽지가 된다. 본문은 «캡션 한 줄»만 얹어 히어로 락업과 급을 나눈다. */ .frame-tx.tx-cap{padding:var(--s3)} .frame-tx.tx-cap p{font-size:var(--t3);font-weight:500;color:#fff} .frame-tx.tx-cap .mono{color:#fff} /* ⚠️⚠️ **작은 사진에는 글자를 얹지 않는다.** 한때 컨테이너 쿼리로 프레임이 좁아지면 캡션을 13px 까지 줄이게 해뒀는데, 그건 «읽으라고» 넣은 게 아니라 «넣으려고» 줄인 것이었다(대표 지적). 실측에서도 675×506 프레임은 텍스트가 높이의 14% 인데 405×304 에서는 24% 를 먹었다 — 사진이 캡션 받침대가 된다. → .tx-cap 은 «본문 폭을 다 쓰는 밴드»(1104px)에만 쓴다. 칼럼 폭 사진(.duo 2단·카드 썸네일)과 증빙 스캔(.evid-item)은 아래 캡션이다. */ @media(max-width:820px){ .frame.a21 .frame-tx{padding:var(--s3)} .frame.a21 .frame-tx h3,.frame.a21 .frame-tx .frame-h{font-size:var(--t6)}} /* 여백 유틸 */ .mt1{margin-top:var(--s1)} .mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)} .mt5{margin-top:var(--s5)} /* ── CTA 밴드 ── */ .cta-sec{padding-block:var(--s5)} .cta-band{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center; justify-content:space-between;background:var(--forest);border-radius:var(--r3); padding:var(--s4);position:relative;overflow:hidden} .cta-band::before{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 160% at 88% 8%,rgba(46,158,107,.42),transparent 62%)} .cta-band>*{position:relative;z-index:1} .cta-band h2{font-size:var(--t7);color:var(--on-field)} /* 글 덩어리가 남는 폭을 가져가게 한다. 이게 없으면 폭이 내용에 맞춰 정해지는데, .lead 의 52ch 상한이 527px 에서 글을 끊었다 — 오른쪽에 340px 이 비어 있는데도 「…영업일 기준 1일 / 내 회신합니다」로 갈라졌다. 52ch 는 본문 단 폭을 잡으려고 건 값이라 밴드 안에서는 푼다. min-width:0 은 flex 아이템의 기본 최소폭(=내용 폭) 때문에 좁은 화면에서 밴드를 밀어내지 않게 하는 안전장치다. */ .cta-band>:first-child{flex:1 1 420px;min-width:0} .cta-band .lead{margin-top:var(--s1);font-size:var(--t4);color:var(--on-field-2); max-width:none} /* .hero-cta 는 히어로에서 쓰라고 margin-top:40px 을 달고 있는데 밴드 안까지 따라 들어왔다. align-items:center 는 여백까지 포함해 가운데를 잡으므로 버튼 두 개가 글자보다 20px 내려앉아 있었다. */ .cta-band .hero-cta{margin-top:0} /* ── 서브페이지 히어로 ── */ .hero{padding-block:var(--s5);position:relative;overflow:hidden} .hero::before{content:'';position:absolute;inset:-30% -10% auto -10%;height:150%; pointer-events:none; background:radial-gradient(52% 60% at 82% 18%,rgba(46,158,107,.16),transparent 68%), radial-gradient(46% 52% at 8% 0%,rgba(0,112,74,.09),transparent 70%)} .hero>*{position:relative;z-index:1} .hero h1{font-size:var(--t8);max-width:18ch;margin-top:var(--s2)} .hero .lead{margin-top:var(--s3)} .hero-cta{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s1)} .hero-badges{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule); display:flex;flex-wrap:wrap;gap:8px} /* ── 자세히 접기 ── */ .more{border-top:1px solid var(--rule);margin-top:var(--s3)} .more>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px; padding:14px 0;font-size:var(--t3);font-weight:500;color:var(--ink-2)} .more>summary::-webkit-details-marker{display:none} .more>summary::after{content:'+';font-family:var(--mono);font-size:var(--t5);line-height:1; color:var(--green);margin-left:auto} .more[open]>summary::after{content:'−'} .more>summary:hover{color:var(--green)} .more-bd{padding-bottom:var(--s3)} .field .more{border-color:var(--rule-field)} .field .more>summary{color:var(--on-field-2)} /* ── 공정 스트립 (스크롤 연동 진행선) ── ⚠️ 가로 5단이었다. 본문 폭 1160px 을 5로 나누면 칸이 202px 이고, 15px 한글 이면 한 줄에 13자다. S100~S500 설명이 전부 3줄로 각지게 끊겨, 이 페이지 에서 제일 중요한 설명이 제일 안 읽히는 상태였다(4단인 esg·사료첨가제· 브랜드축산물도 272px/18자로 같은 문제). → 모든 폭에서 세로 타임라인으로 간다. 진행선도 세로로 차오르는데, 스크롤과 방향이 같아 오히려 읽는 순서와 맞는다. 데스크톱에서는 아래 min-width:821px 에서 「번호·제목 | 설명」 2단으로 나눠, 세로로만 길어지지 않게 한다. */ .proc{position:relative;display:grid;grid-template-columns:1fr;gap:0} .proc::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px; background:var(--rule)} .field .proc::before{background:var(--rule-field)} .proc-line{position:absolute;left:7px;top:0;width:2px;height:0;z-index:1; background:linear-gradient(180deg,var(--green),var(--green-l)); transition:height 260ms linear} .step{position:relative;z-index:2;padding:0 0 var(--s3) var(--s4)} .step::before{content:'';position:absolute;left:0;top:2px;width:16px;height:16px; border-radius:var(--r4);background:var(--paper);border:2px solid var(--rule-2); transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)} .field .step::before{background:var(--forest);border-color:var(--rule-field)} .tint .step::before{background:var(--paper-2)} .mint .step::before{background:var(--mint-2)} .step.on::before{background:var(--green);border-color:var(--green)} .step-id{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;color:var(--green); display:block;margin-bottom:6px} .field .step-id{color:var(--green-l)} .step h3{font-size:var(--t5)} .step p{margin-top:var(--s1);font-size:var(--t3);color:var(--ink-2);line-height:1.58} .field .step p{color:var(--on-field-2)} /* 데스크톱 2단 — 왼쪽에 번호·제목, 오른쪽에 설명. ⚠️ 설명에 max-width 를 걸지 않는다. 46ch(약 411px) 로 묶었더니 전부 2줄이 되면서 오른쪽에 380px 가 그대로 비었다. 여기 설명은 문단이 아니라 한 문장짜리 캡션이라 긴 행폭이 문제되지 않는다 — 칸을 다 쓰면 대부분 한 줄에 떨어져 다섯 단계가 한눈에 훑힌다. 설명은 왼쪽 두 줄(번호·제목)의 가운데에 맞춘다. baseline 으로 맞추면 설명 첫 줄이 번호(12px 모노) 줄에 붙어 제목보다 떠 보였다. */ @media(min-width:821px){ .step{display:grid;grid-template-columns:260px minmax(0,1fr); column-gap:var(--s4);row-gap:0;padding-bottom:var(--s4)} .step-id{grid-column:1;grid-row:1;margin-bottom:4px} .step h3{grid-column:1;grid-row:2} .step p{grid-column:2;grid-row:1/3;margin-top:0;align-self:center} } /* ── 조직도 (.org) ──────────────────────── 전에는 본부 3장 + 연구소·자문단 2장, 그냥 카드 «나열»이었다. 나열은 관계를 못 그린다 — 연구소가 본사 소속인지 외부 기관인지, 자문단이 누구에게 붙는지가 화면에 아예 없었다(대표 지적: 「대충 만든 티가 난다」). → 계통선을 실제로 그린다. 실선 = 본사 직할, 점선 = 부설·외부 협력. ⚠️ 가로 버스선은 «셀 자기 폭»에 그리고 좌우로 갭의 절반씩 넘긴다. 그러면 옆 셀의 선과 맞붙어 한 줄이 되고, 칼럼 폭이 달라도(본부 1fr · 연구소 1.42fr) 계산이 필요 없다. 컨테이너에 선 하나를 그리는 방식은 첫·끝 카드의 «중심»을 calc 로 잡아야 해서 칼럼 폭이나 개수가 바뀌면 그때마다 어긋난다. ⚠️ align-items 는 start 다. stretch 로 두면 3개 본부 카드가 「연구소+자문단」 칼럼 높이(2배)까지 늘어나, 빈 카드 세 장이 된다. */ .org{--org-c:var(--rule-2);--org-stub:22px} .org .card{position:relative} /* 본사 — 뿌리 노드. 상단 그린 3px 은 .field .fig 와 같은 장치다 */ .org-root{position:relative;max-width:560px;margin-inline:auto} .org-root::after{content:'';position:absolute;top:100%;left:50%;width:2px; height:var(--org-stub);background:var(--org-c);transform:translateX(-1px)} .org-hq{overflow:hidden;border-color:transparent;box-shadow:var(--sh2); text-align:center;padding:var(--s4) var(--s3)} .org-hq::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--green)} .org-hq h3{font-size:var(--t6)} .org-hq p{max-width:44ch;margin-inline:auto} .org-hq .card-meta{justify-content:center} /* ⚠️ 4칸이 «같은 줄»이어야 한다. 처음엔 연구소 칸에 자문단까지 세로로 넣었더니 그 칸만 2배 높이가 되고 왼쪽 본부 3장 아래로 500px 짜리 흰 구멍이 났다. → 자문단은 그리드 2행(4열)으로 내리고, 1행 4장은 stretch 로 키를 맞춘다. 카드가 늘어난 만큼은 .card-meta 의 margin-top:auto 가 먹어서 칩 줄이 네 장 모두 같은 바닥선에 앉는다. 남는 2행 왼쪽에는 범례를 앉힌다. */ .org-lv{display:grid;grid-template-columns:repeat(3,1fr) 1.34fr;gap:0 var(--s3); align-items:stretch} .org-lv>li{position:relative;display:flex;flex-direction:column} .org-lv>li>.card{flex:1} .org-cell{padding-top:calc(var(--org-stub)*2)} .org-cell::before{content:'';position:absolute;top:var(--org-stub);height:2px; left:calc(var(--s3)/-2);right:calc(var(--s3)/-2);background:var(--org-c)} .org-cell::after{content:'';position:absolute;top:var(--org-stub);left:50%;width:2px; height:var(--org-stub);background:var(--org-c);transform:translateX(-1px)} .org-cell:first-child::before{left:50%} .org-cell:nth-child(4)::before{right:50%} .org-lv h3{font-size:var(--t5)} /* 점선 가지 — 부설·외부. 색을 흐리게 하는 대신 «선의 종류»로 구분한다. 흐린 색은 저대비(3:1 미만)라 비텍스트 대비 기준에 걸리고, 인쇄에서도 날아간다. */ .org-dash::before{background:none; background-image:repeating-linear-gradient(90deg,var(--org-c) 0 5px,transparent 5px 10px)} .org-dash::after{background:none; background-image:repeating-linear-gradient(180deg,var(--org-c) 0 5px,transparent 5px 10px)} /* 연구소 아래 자문단 — 2행 4열. 한 칸 더 내려가는 점선 가지 */ .org-hang{grid-column:4;grid-row:2;padding-top:calc(var(--org-stub)*2)} .org-hang::before{content:'';position:absolute;top:0;left:50%;width:2px; height:calc(var(--org-stub)*2);transform:translateX(-1px); background-image:repeating-linear-gradient(180deg,var(--org-c) 0 5px,transparent 5px 10px)} .org-hang>.card{flex:none} /* 범례 — 2행 왼쪽 3칸. 빈 칸을 메우려고 넣는 장식이 아니라, 실선·점선의 뜻을 «선이 보이는 자리»에서 읽게 하는 것이다. */ .org-key{grid-column:1/4;grid-row:2;justify-content:center;padding:var(--s4) 0 0} /* 본문 폭을 다 쓰면 13px 회색 한 줄이 740px 로 뻗어 읽는 눈이 되돌아오지 못한다 */ .org-key p{max-width:52ch} /* 부설 연구소 — 본부와 같은 실행 조직이 아니라는 걸 배경으로도 알린다 */ .org-lab{background:var(--mint-2);border-color:var(--rule-2)} /* 외부 협력 — 소속이 아니므로 카드의 «무게»를 뺀다(그림자 0 · 점선 테두리) */ .org-ghost{background:transparent;border-style:dashed;border-color:var(--rule-2);box-shadow:none} .org-legend{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;max-width:46ch} .org-legend span{display:inline-flex;align-items:center;gap:7px} .org-legend i{display:block;width:22px;height:2px;background:var(--org-c);flex:none} .org-legend i.d{background:none; background-image:repeating-linear-gradient(90deg,var(--org-c) 0 5px,transparent 5px 10px)} /* 4단 → 세로 계통도. 4칸을 2칸으로 접으면 버스선이 «두 줄»이 되는데, 첫칸/끝칸 규칙(:first-child·:last-child)은 한 줄을 전제로 짜여 있어 둘째 줄 선이 허공으로 뻗는다. 그래서 2단은 건너뛰고 바로 세로 레일로 간다. 레일 x 는 --org-rail 하나로 뿌리 노드와 각 가지가 함께 맞춘다. */ @media(max-width:1000px){ .org{--org-rail:15px} .org-root{max-width:none} .org-root::after{left:var(--org-rail);transform:none} .org-lv{grid-template-columns:minmax(0,1fr);gap:0;padding-left:var(--s4)} .org-lv>li{grid-column:auto;grid-row:auto} .org-cell{padding:0 0 var(--s2)} /* 세로 레일 + 카드로 뻗는 짧은 가로 팔 */ .org-cell::before,.org-cell:first-child::before,.org-cell:nth-child(4)::before{ top:34px;left:calc(var(--org-rail) - var(--s4));width:calc(var(--s4) - var(--org-rail)); right:auto} .org-cell::after{top:0;bottom:0;height:auto;transform:none; left:calc(var(--org-rail) - var(--s4))} /* 마지막 가지에서 레일을 끊는다 — 안 끊으면 선이 카드 옆을 지나 허공으로 내려간다 */ .org-cell:nth-child(4)::after{bottom:auto;height:34px} .org-hq{text-align:left;padding:var(--s3)} .org-hq p{margin-inline:0} .org-hq .card-meta{justify-content:flex-start} /* 자문단 — 연구소 아래 한 단 더 들여쓴다(세로 점선 + 가로 점선 팔) */ .org-hang{padding:var(--s3) 0 0 var(--s4)} .org-hang::before{left:var(--org-rail);height:34px;transform:none} .org-hang::after{content:'';position:absolute;top:34px;left:var(--org-rail); width:calc(var(--s4) - var(--org-rail));height:2px; background-image:repeating-linear-gradient(90deg,var(--org-c) 0 5px,transparent 5px 10px)} .org-key{padding-top:var(--s3)} } /* ── 유튜브 지연 로드 (.yt) ──────────────── iframe 대신 썸네일 + 재생 버튼만 먼저 놓는다. 이유는 site.js 4번 주석 참고 (플레이어 스크립트 844KB 를 아무도 안 누른 상태에서 받고 있었다). ⚠️ 버튼이지 장식이 아니다 — 실제