/* =====================================================================
rokvf-modern.css — 전체 사이트 공유 디자인 시스템
정체성: 흰 바탕 + 로고 파랑(#1877b6) + 오방색 절제 포인트 · Pretendard(자체호스팅) · 외부 CDN 없음
접두사 rm- : 서브페이지 레거시 스타일(content-box 등)과 충돌 방지 목적
===================================================================== */
@font-face{font-family:'Pretendard';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Pretendard-Regular.woff2) format('woff2')}
@font-face{font-family:'Pretendard';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Pretendard-Medium.woff2) format('woff2')}
@font-face{font-family:'Pretendard';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Pretendard-Bold.woff2) format('woff2')}
@font-face{font-family:'Pretendard';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/Pretendard-ExtraBold.woff2) format('woff2')}
:root{
--rm-blue:#1877b6; --rm-blue-2:#2f93d6; --rm-blue-deep:#12608f;
--rm-gold:#1877b6; --rm-gold-2:#2f93d6; /* 골드 제거 → 로고 파랑으로 통합(기존 골드 usages 자동 전환) */
--rm-ink:#1b2431; --rm-paper:#ffffff; --rm-band:#f6f8fc;
--rm-line:#eef0f4; --rm-muted:#66718a; --rm-chip:#eef2fa;
--rm-wrap:1200px;
/* 오방색 5색 — 2026-07-21 사장님 지시: 중앙선거관리위원회(NEC) CI 색상표 사용,
단 검정(Dark Blue 2965C)·회색(Cool Gray 5C) 제외 → 정확히 5색이 남음. 표에 적힌 순서 그대로.
순서: ①빨강 ②초록 ③노랑 ④파랑 ⑤보라 (이 순서가 곧 띠·미니바의 좌→우 순서)
값은 색상표에 인쇄된 RGB를 그대로 사용. 단 Red는 표에 R255만 적혀 있어(G·B 누락)
Pantone 185C 표준 sRGB로 보완함.
사용처: 헤더 최상단 띠 · 섹션 제목 밑 미니바 · 게시판 제목 리드 · 푸터 상단 띠 (절제형 포인트) */
--rm-ob-1:#e4002b; /* ① 빨강 NEC Red Pantone 185C (표: R255만 표기 → 185C 표준값) */
--rm-ob-2:#118e34; /* ② 초록 NEC Green Pantone 355C (표: R17 G142 B52) */
--rm-ob-3:#ffd900; /* ③ 노랑 NEC Yellow Pantone 116C (표: R255 G217) */
--rm-ob-4:#0a50a1; /* ④ 파랑 NEC Blue Pantone 2935C (표: R10 G80 B161) */
--rm-ob-5:#81017e; /* ⑤ 보라 NEC Purple Pantone 254C (표: R129 G1 B126) */
/* 하위호환 별칭(옛 --rm-c1~c5 / --rm-ob-* 색이름 usages) */
--rm-c1:var(--rm-ob-1); --rm-c2:var(--rm-ob-2); --rm-c3:var(--rm-ob-3);
--rm-c4:var(--rm-ob-4); --rm-c5:var(--rm-ob-5);
--rm-ob-blue:var(--rm-ob-2); --rm-ob-red:var(--rm-ob-1); --rm-ob-yellow:var(--rm-ob-3);
--rm-ob-white:var(--rm-ob-4); --rm-ob-black:var(--rm-ob-5);
}
/* ===== 오방색 5색 띠 (헤더 최상단 / 푸터 상단 공용) ===== */
.rm-obband{height:3px;width:100%;display:flex;flex:0 0 auto}
.rm-obband i{flex:1 1 0;height:100%}
.rm-obband i:nth-child(1){background:var(--rm-ob-1)} /* 빨강 */
.rm-obband i:nth-child(2){background:var(--rm-ob-2)} /* 초록 */
.rm-obband i:nth-child(3){background:var(--rm-ob-3)} /* 노랑 */
.rm-obband i:nth-child(4){background:var(--rm-ob-4)} /* 파랑 */
.rm-obband i:nth-child(5){background:var(--rm-ob-5)} /* 보라 */
/* 푸터(파랑 #0f5ba3) 위 보정 — ④파랑은 배경과 거의 같아 사라지고, ②초록·⑤보라는 어두워 묻힘.
그 3색만 같은 계열로 밝게 올림(①빨강·③노랑은 대비 충분해 원색 그대로). */
.rm-footer .rm-obband i:nth-child(2){background:#2fcc63} /* 초록: 밝게 */
.rm-footer .rm-obband i:nth-child(4){background:#5aa9e8} /* 파랑: 배경보다 밝게 */
.rm-footer .rm-obband i:nth-child(5){background:#c44dbf} /* 보라: 밝게 띄움 */
/* 모던 헤더/푸터/홈 영역만 border-box·시스템폰트 적용 (레거시 #wrap 불침범) */
.rm-header,.rm-header *,.rm-topbar,.rm-topbar *,.rm-footer,.rm-footer *,
.rm-drawer,.rm-drawer *,.rm-home,.rm-home *{box-sizing:border-box}
.rm-header,.rm-topbar,.rm-footer,.rm-drawer,.rm-home{
font-family:"Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",-apple-system,sans-serif;
color:var(--rm-ink);-webkit-font-smoothing:antialiased;line-height:1.6;letter-spacing:-.01em;
}
.rm-header a,.rm-topbar a,.rm-footer a,.rm-drawer a,.rm-home a{text-decoration:none;color:inherit}
.rm-home img{display:block;max-width:100%}
.rm-in{max-width:var(--rm-wrap);margin:0 auto;padding:0 24px}
a:focus-visible,button:focus-visible{outline:3px solid var(--rm-gold-2);outline-offset:2px}
/* ===== 헤더 우측 유틸(로그인/사이트맵) ===== */
/* 우측 상단 슬림 유틸 스트립 (계정·사이트맵) — 버튼과 분리해 갑갑함 해소 */
.rm-utilbar{display:flex;justify-content:flex-end;align-items:center;font-size:12.5px;color:#8a95a6;padding:8px 0 4px}
.rm-utilbar>*{position:relative;transition:.15s}
.rm-utilbar>*+*{margin-left:11px;padding-left:11px}
.rm-utilbar>*+*::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:#dbe0e8}
.rm-utilbar a:hover{color:var(--rm-blue)}
.rm-utilbar .rm-hello{color:#3a4657}
.rm-utilbar .rm-hello b{color:var(--rm-blue)}
/* ===== 헤더 + GNB ===== */
.rm-header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--rm-line);box-shadow:0 2px 14px rgba(16,32,64,.05)}
.rm-header .rm-bar{display:flex;align-items:center;justify-content:space-between;height:78px}
.rm-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.rm-brand img{height:46px;width:auto}
.rm-gnb{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.rm-gnb>li{position:relative;width:118px}
/* 메뉴 칸 구분 — 점 대신 옅은 세로 구분선(은은한 그림자)으로 '칸'을 표시 */
.rm-gnb>li+li::before{content:"";position:absolute;left:-3px;top:50%;transform:translateY(-50%);width:1px;height:18px;background:#e7ebf2;box-shadow:0 0 2px rgba(20,40,80,.05)}
.rm-gnb>li>a{display:block;position:relative;text-align:center;font-size:16.5px;font-weight:700;color:#2a3446;padding:28px 4px;letter-spacing:-.02em;transition:color .18s}
.rm-gnb>li>a::after{content:"";position:absolute;left:50%;bottom:22px;width:42px;height:2.5px;background:var(--rm-blue);transform:translateX(-50%) scaleX(0);transition:transform .22s}
.rm-gnb>li:hover>a,.rm-gnb>li.rm-on>a{color:var(--rm-blue)}
.rm-gnb>li:hover>a::after,.rm-gnb>li.rm-on>a::after{transform:translateX(-50%) scaleX(1)}
/* 메가메뉴 컬럼 — 각 메뉴 바로 아래 정렬(li 기준), 헤더 hover 시 전체 열림 */
.rm-sub{position:absolute;top:100%;left:0;width:118px;display:flex;flex-direction:column;padding:12px 0 22px;opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .32s ease,transform .4s cubic-bezier(.22,1,.36,1);z-index:195}
.rm-header:hover .rm-sub{opacity:1;transform:translateY(0);pointer-events:auto}
.rm-sub a{padding:8px 4px;font-size:13.5px;color:#48546a;text-align:center;white-space:nowrap;transition:color .13s}
.rm-sub a:hover{color:var(--rm-blue)}
.rm-sub a.rm-cur{color:var(--rm-blue);font-weight:700}
/* 메가메뉴 왼쪽 빈 공간을 채우는 브랜드 featured 패널 */
.rm-mega-feat{position:absolute;left:0;top:30px;width:236px;padding:6px 22px 6px 2px;border-right:1px solid var(--rm-line);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .34s ease,transform .42s cubic-bezier(.22,1,.36,1);z-index:190}
.rm-header:hover .rm-mega-feat{opacity:1;transform:translateY(0);pointer-events:auto}
.rm-mega-emb{width:56px;height:56px;object-fit:contain;margin-bottom:12px}
.rm-mega-feat b{display:block;font-size:16px;font-weight:800;color:var(--rm-ink);letter-spacing:-.02em}
.rm-mega-feat .en{display:block;font-size:9.5px;font-weight:700;color:#9aa4b2;letter-spacing:.6px;margin-top:3px}
.rm-mega-feat p{margin:13px 0 15px;font-size:13px;line-height:1.65;color:#48546a}
.rm-mega-cta{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--rm-blue)}
.rm-mega-cta:hover{gap:8px;color:var(--rm-blue-deep)}
/* 메가 전체폭 흰 배경 바 — 커튼처럼 높이가 스르륵 펼쳐졌다 접힘 */
.rm-megabg{position:absolute;left:0;right:0;top:100%;height:448px;background:#fff;border-top:1px solid var(--rm-line);box-shadow:0 24px 40px rgba(16,32,64,.12);opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .32s ease,transform .4s cubic-bezier(.22,1,.36,1);z-index:185}
.rm-header:hover .rm-megabg{opacity:1;transform:translateY(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){.rm-sub,.rm-megabg{transition:none}}
.rm-hd-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.rm-btn{font-size:14px;font-weight:700;padding:10px 18px;border-radius:999px;transition:.18s;white-space:nowrap}
.rm-btn.ghost{color:var(--rm-blue);border:1.5px solid #cdd6e6}
.rm-btn.ghost:hover{border-color:var(--rm-blue);background:var(--rm-band)}
.rm-btn.fill{background:var(--rm-blue);color:#fff}
.rm-btn.fill:hover{background:var(--rm-blue-deep)}
.rm-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;flex-shrink:0}
.rm-burger span{width:26px;height:3px;background:var(--rm-blue);border-radius:2px;transition:.2s}
/* ===== 모바일 드로어 ===== */
.rm-drawer{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none}
.rm-drawer.open{visibility:visible;pointer-events:auto}
.rm-drawer .rm-scrim{position:absolute;inset:0;background:rgba(9,20,40,.5);opacity:0;transition:.25s}
.rm-drawer.open .rm-scrim{opacity:1}
.rm-drawer .rm-dpanel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,340px);background:#fff;box-shadow:-10px 0 40px rgba(0,0,0,.2);transform:translateX(100%);transition:.28s;overflow-y:auto;padding:18px 18px 40px}
.rm-drawer.open .rm-dpanel{transform:none}
.rm-drawer .rm-dclose{background:none;border:0;font-size:26px;color:#42506a;cursor:pointer;float:right;line-height:1;padding:6px}
.rm-drawer .rm-dutil{display:flex;gap:8px;flex-wrap:wrap;margin:44px 0 14px}
.rm-drawer .rm-dutil a{font-size:13px;font-weight:700;color:var(--rm-blue);border:1.5px solid #cdd6e6;border-radius:999px;padding:7px 14px}
.rm-dgroup{border-top:1px solid var(--rm-line)}
.rm-dgroup>button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:15px 6px;font-size:16px;font-weight:700;color:#22314c;cursor:pointer}
.rm-dgroup>button i{color:var(--rm-muted);transition:.2s}
.rm-dgroup.open>button i{transform:rotate(180deg);color:var(--rm-blue)}
.rm-dgroup ul{list-style:none;margin:0;padding:0 0 8px;display:none}
.rm-dgroup.open ul{display:block}
.rm-dgroup ul a{display:block;padding:10px 14px;font-size:14.5px;color:#48546a;border-radius:8px}
.rm-dgroup ul a:hover{background:var(--rm-band);color:var(--rm-blue)}
/* ===== reveal(스크롤 페이드업) ===== */
.rm-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rm-reveal.in{opacity:1;transform:none}
/* ===== 공통 섹션 헤더 ===== */
.rm-shead{text-align:center;margin-bottom:34px}
.rm-shead .eye{color:var(--rm-gold);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.rm-shead h2{font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--rm-blue);letter-spacing:-.02em;margin:8px 0 0;text-wrap:balance}
/* 섹션 제목 밑 오방색 미니 바 — 마크업 변경 없이 그라데이션 하드스톱으로 5색.
가운데정렬(.rm-vhead/.rm-shead)과 좌측정렬(.rm-ghead) 둘 다 대응 */
.rm-shead h2::after,.rm-vhead h2::after,.rm-ghead h2::after{
content:"";display:block;width:58px;height:3px;border-radius:2px;margin-top:14px;
background:linear-gradient(90deg,
var(--rm-ob-1) 0 20%, var(--rm-ob-2) 20% 40%, var(--rm-ob-3) 40% 60%,
var(--rm-ob-4) 60% 80%, var(--rm-ob-5) 80% 100%)}
.rm-shead h2::after,.rm-vhead h2::after{margin-left:auto;margin-right:auto}
.rm-ghead h2::after{margin-top:11px}
.rm-shead p{color:var(--rm-muted);font-size:15px;margin:10px 0 0}
/* ===== 히어로 슬라이더 ===== */
.rm-hero{position:relative;height:clamp(540px,78vh,780px);overflow:hidden;background:#0f2c52}
.rm-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.rm-slide.on{opacity:1;pointer-events:auto}
.rm-slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 6s ease}
.rm-slide.on .bg{transform:scale(1)}
.rm-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,rgba(11,28,54,.60) 0%,rgba(11,28,54,.28) 44%,rgba(11,28,54,.03) 100%),linear-gradient(0deg,rgba(11,28,54,.42),transparent 40%)}
.rm-hero-in{position:relative;z-index:3;max-width:var(--rm-wrap);margin:0 auto;padding:0 24px;height:100%;display:flex;flex-direction:column;justify-content:center}
.rm-hero-in .eyebrow{display:flex;align-items:center;color:#eaf1fb;font-weight:700;font-size:15px;letter-spacing:.04em;margin-bottom:18px}
.rm-hero-in h2{color:#fff;font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1.14;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.35);text-wrap:balance}
.rm-hero-in p.sub{color:#dbe4f4;font-size:clamp(15px,1.5vw,19px);margin-top:20px;max-width:560px;line-height:1.6}
.rm-hero-in .go{display:inline-flex;align-items:center;gap:9px;margin-top:34px;background:#fff;color:var(--rm-blue);font-weight:800;font-size:15.5px;padding:14px 28px;border-radius:999px;align-self:flex-start;transition:.2s}
.rm-hero-in .go:hover{background:var(--rm-gold);color:#fff;transform:translateY(-2px)}
.rm-slide.on .eyebrow{animation:rm-up .7s .15s both}
/* ===== 히어로 (split: 콘텐츠 + 이미지 슬라이더) ===== */
.rm-hero2{background:#fff}
.rm-hero2-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;padding:58px 0 64px}
.rm-eyebrow{display:flex;align-items:center;font-size:14.5px;font-weight:700;letter-spacing:.05em;color:var(--rm-muted);margin-bottom:20px}
.rm-dots5{display:inline-flex;gap:5px;margin-right:12px}
.rm-dots5 i{width:8px;height:8px;border-radius:50%}
.rm-dots5 i:nth-child(1){background:var(--rm-c1)}.rm-dots5 i:nth-child(2){background:var(--rm-c2)}.rm-dots5 i:nth-child(3){background:var(--rm-c3)}.rm-dots5 i:nth-child(4){background:var(--rm-c4)}.rm-dots5 i:nth-child(5){background:var(--rm-c5)}
.rm-hero2-txt h1{font-size:clamp(32px,4.3vw,54px);font-weight:800;line-height:1.16;letter-spacing:-.035em;color:var(--rm-ink);text-wrap:balance;margin:0}
.rm-hero2-txt h1 .hl{color:var(--rm-blue)}
.rm-hero2-txt p{margin:22px 0 30px;font-size:clamp(15px,1.5vw,18px);font-weight:400;line-height:1.7;color:#414d63;max-width:480px}
.rm-hero2-btns{display:flex;gap:12px;flex-wrap:wrap}
.rm-btn2{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;padding:15px 28px;border-radius:30px;transition:.18s}
.rm-btn2.pri{background:var(--rm-blue);color:#fff;box-shadow:0 10px 22px rgba(24,119,182,.26)}
.rm-btn2.pri:hover{background:var(--rm-blue-deep);transform:translateY(-2px)}
.rm-btn2.gh{background:#fff;color:var(--rm-ink);border:1.5px solid var(--rm-line)}
.rm-btn2.gh:hover{border-color:#c9d3e2}
.rm-hero2-fig{position:relative}
.rm-hf{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;box-shadow:0 30px 55px rgba(20,40,80,.15);background:#dfe6ef}
.rm-hero2 .rm-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.rm-hero2 .rm-slide.on{opacity:1;pointer-events:auto}
.rm-hero2 .rm-slide::after{display:none}
.rm-hf .rm-dots{position:absolute;left:18px;bottom:16px;display:flex;gap:7px;z-index:4;margin:0}
.rm-hf .rm-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.2s}
.rm-hf .rm-dots button.on{background:#fff;width:22px;border-radius:4px}
.rm-hf-badge{position:absolute;left:-14px;bottom:26px;background:#fff;border-radius:14px;box-shadow:0 14px 32px rgba(20,40,80,.16);padding:14px 18px;display:flex;align-items:center;gap:13px;z-index:5}
.rm-hf-badge .bar{flex:0 0 auto;width:5px;height:38px;border-radius:3px;background:linear-gradient(var(--rm-c1),var(--rm-c3),var(--rm-c5))}
.rm-hf-badge b{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--rm-ink);display:block;line-height:1.1}
.rm-hf-badge small{display:block;font-size:12px;color:var(--rm-muted);font-weight:600;margin-top:2px}
/* (오방색 포인트 제거 — 사장님 요청: 깔끔한 파랑 유지) */
@media(max-width:820px){
.rm-hero2-grid{grid-template-columns:1fr;gap:26px;padding:32px 0 40px}
.rm-hero2-fig{order:-1}
.rm-hero2-txt h1{font-size:32px}
.rm-hf-badge{left:12px;bottom:14px;padding:11px 15px;gap:11px}
.rm-hf-badge b{font-size:18px}
}
.rm-slide.on h2{animation:rm-up .8s .28s both}
.rm-slide.on p.sub{animation:rm-up .8s .44s both}
.rm-slide.on .go{animation:rm-up .8s .6s both}
@keyframes rm-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.rm-dots{position:absolute;z-index:5;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:11px}
.rm-dots button{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s;padding:0}
.rm-dots button.on{background:#fff;width:30px;border-radius:6px}
.rm-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(10,22,44,.22);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.rm-arrow:hover{background:rgba(255,255,255,.95);color:var(--rm-blue);border-color:#fff}
.rm-arrow.prev{left:26px}.rm-arrow.next{right:26px}
.rm-counter{position:absolute;z-index:5;right:34px;bottom:26px;color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.rm-counter b{font-size:20px}.rm-counter span{opacity:.6}
/* ===== 퀵카드 ===== */
.rm-quick{max-width:var(--rm-wrap);margin:-38px auto 0;position:relative;z-index:20;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rm-quick a{background:#fff;border:1px solid var(--rm-line);border-radius:16px;padding:26px 22px;box-shadow:0 12px 30px rgba(16,32,64,.08);transition:.2s}
.rm-quick a:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,32,64,.14);border-color:#dce3ef}
.rm-quick .ic{width:46px;height:46px;border-radius:12px;background:var(--rm-chip);color:var(--rm-blue);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.rm-quick h3{font-size:17px;color:var(--rm-blue);font-weight:800}
.rm-quick p{font-size:13px;color:var(--rm-muted);margin-top:6px}
/* ===== 사진 배너 버튼(벤치마킹 스타일) ===== */
.rm-links{max-width:var(--rm-wrap);margin:54px auto 0;position:relative;z-index:20;padding:0 24px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.rm-lcard{position:relative;display:flex;align-items:flex-end;height:290px;overflow:hidden;box-shadow:0 14px 34px rgba(16,32,64,.16)}
.rm-lcard .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s ease}
.rm-lcard:hover .bg{transform:scale(1.08)}
.rm-lcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,32,62,.9) 0%,rgba(11,32,62,.34) 52%,rgba(11,32,62,.06) 100%);transition:.25s}
.rm-lcard:hover::after{background:linear-gradient(0deg,rgba(37,99,168,.92) 0%,rgba(11,32,62,.34) 52%,rgba(11,32,62,.06) 100%)}
.rm-lcard .lb{position:relative;z-index:2;padding:20px 18px;color:#fff;width:100%}
.rm-lcard .lb .en{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--rm-gold-2);font-weight:800}
.rm-lcard .lb .ko{font-size:19px;font-weight:800;margin-top:5px;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}
.rm-lcard .lb .ko .arr{margin-left:auto;opacity:.65;transition:.2s}
.rm-lcard:hover .lb .ko .arr{transform:translateX(3px);opacity:1}
/* ===== 소개 스트립 ===== */
.rm-intro{padding:78px 0 0}
.rm-intro .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.rm-intro .eye{color:var(--rm-gold);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.rm-intro h2{font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--rm-blue);letter-spacing:-.02em;margin-top:10px;line-height:1.3;text-wrap:balance}
.rm-intro p{color:#4a5568;font-size:16px;margin-top:18px;line-height:1.8}
.rm-intro .more{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--rm-blue);font-weight:800;border-bottom:2px solid var(--rm-gold);padding-bottom:3px}
.rm-intro .vis{position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(16,32,64,.16);aspect-ratio:4/3;background:#0f2c52 center/cover}
.rm-intro .vis video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ===== 최신소식 탭 ===== */
.rm-news{padding:80px 0}
.rm-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:28px}
.rm-tabs button{font-size:15px;font-weight:700;color:var(--rm-muted);background:#fff;border:1.5px solid var(--rm-line);padding:10px 24px;border-radius:999px;cursor:pointer;transition:.18s}
.rm-tabs button.on{background:var(--rm-blue);color:#fff;border-color:var(--rm-blue)}
.rm-panel{display:none}
.rm-panel.on{display:block;animation:rm-fade .35s ease}
@keyframes rm-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 2단 나란히 (공지사항 | 보도자료) — kpfem식 */
.rm-news2{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.rm-ncol{min-width:0}
/* 게시판 제목 밑줄: 파란 실선 → 옅은 선 + 좌측 오방색 리드 세그먼트(절제형 포인트) */
.rm-nhead{position:relative;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #dde5f0;padding-bottom:13px;margin-bottom:2px}
.rm-nhead::after{content:"";position:absolute;left:0;bottom:-2px;width:80px;height:2px;
background:linear-gradient(90deg,
var(--rm-ob-1) 0 20%, var(--rm-ob-2) 20% 40%, var(--rm-ob-3) 40% 60%,
var(--rm-ob-4) 60% 80%, var(--rm-ob-5) 80% 100%)}
.rm-nhead h3{font-size:20px;font-weight:800;color:var(--rm-ink);letter-spacing:-.02em}
.rm-nplus{color:var(--rm-muted);font-size:22px;line-height:1;padding:2px 6px;transition:color .15s}
.rm-nplus:hover{color:var(--rm-blue)}
.rm-nlist{list-style:none;margin:0;padding:0}
.rm-nlist li a{display:flex;align-items:center;gap:11px;padding:14px 4px;border-bottom:1px solid var(--rm-line);transition:.15s}
.rm-nlist li a::before{content:"";flex-shrink:0;width:5px;height:5px;background:var(--rm-gold)}
.rm-nlist li a:hover{padding-left:10px}
.rm-nlist .t{font-size:15.5px;color:#3a4658;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rm-nlist li a:hover .t{color:var(--rm-blue)}
.rm-nlist .d{font-size:13px;color:var(--rm-muted);flex-shrink:0;font-variant-numeric:tabular-nums;margin-left:auto}
.rm-nlist .empty{padding:30px 4px;text-align:center;color:var(--rm-muted)}
/* ===== 연맹 소개 영상 ===== */
.rm-video{background:var(--rm-band);padding:74px 0}
.rm-vhead{text-align:center;margin-bottom:34px}
.rm-vhead .eye{color:var(--rm-blue);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}
.rm-vhead h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--rm-ink)}
.rm-vwrap{position:relative;max-width:940px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 26px 60px rgba(16,32,64,.20);background:#000}
.rm-vplayer{display:block;width:100%;height:100%;background:#000}
.rm-vbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;background:rgba(24,119,182,.92);box-shadow:0 12px 34px rgba(0,0,0,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.22s;z-index:3}
.rm-vbtn:hover{background:var(--rm-blue);transform:translate(-50%,-50%) scale(1.07)}
.rm-vbtn .tri{width:0;height:0;border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent #fff;margin-left:6px}
.rm-vbtn.gone{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.75)}
@media(max-width:820px){
.rm-video{padding:48px 0}
.rm-vhead{margin-bottom:22px}
.rm-vwrap{border-radius:14px}
.rm-vbtn{width:64px;height:64px}
.rm-vbtn .tri{border-width:12px 0 12px 20px}
}
/* ===== 활동 갤러리 (각진 스타일) ===== */
.rm-gallery{padding:82px 0 84px;background:var(--rm-band)}
.rm-ghead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.rm-ghead .eye{color:var(--rm-gold);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.rm-ghead h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;color:var(--rm-blue);letter-spacing:-.02em;margin-top:6px}
.rm-more{flex-shrink:0;font-size:14px;font-weight:700;color:var(--rm-blue);border:1.5px solid #cdd6e6;padding:8px 18px;transition:.18s}
.rm-more:hover{background:var(--rm-blue);color:#fff;border-color:var(--rm-blue)}
.rm-ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rm-gcard{position:relative;display:block;overflow:hidden;box-shadow:0 10px 26px rgba(16,32,64,.09)}
.rm-gimg{display:block;width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;transition:transform .5s}
.rm-gcard:hover .rm-gimg{transform:scale(1.07)}
.rm-gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,32,62,.45),transparent 55%);opacity:0;transition:.25s}
.rm-gcard:hover::after{opacity:1}
/* ===== 참여 CTA ===== */
.rm-cta{background:linear-gradient(120deg,var(--rm-blue-2),var(--rm-blue) 60%);color:#fff}
.rm-cta .rm-in{padding:60px 24px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.rm-cta h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em}
.rm-cta p{color:#d7e3f6;margin-top:10px;font-size:15.5px}
.rm-cta .btns{display:flex;gap:12px}
.rm-cta .btns a{font-weight:800;font-size:15px;padding:15px 30px;border-radius:999px;transition:.2s}
.rm-cta .b-gold{background:var(--rm-gold);color:#fff}
.rm-cta .b-gold:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(24,119,182,.32)}
.rm-cta .b-line{border:1.6px solid rgba(255,255,255,.6);color:#fff}
.rm-cta .b-line:hover{background:#fff;color:var(--rm-blue)}
/* ===== 모던 푸터 ===== */
/* 2026-07-20 사장님 지시: 오방색 반영에 맞춰 푸터 톤업(#173a6b → #0f5ba3, 2단계) */
.rm-footer{background:#0f5ba3;color:#d7e6f8;font-size:13.5px}
.rm-footer .rm-in{padding:44px 24px 30px}
.rm-footer .rm-ftop{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.22)}
/* 푸터 로고 = 헤더와 동일한 정식 로고(사단법인 포함) 흰색 반전본 */
.rm-footer .flogo{display:block}
.rm-footer .flogo .rm-flogo-img{height:40px;width:auto;max-width:100%;display:block;opacity:.97}
/* 연락처: 번호가 중간에서 끊기지 않도록 조각마다 nowrap */
.rm-footer .faddr{margin-top:15px;line-height:1.9;color:#d7e6f8}
.rm-footer .faddr .fl{display:block}
.rm-footer .faddr .nw{white-space:nowrap}
.rm-footer .faddr .fcontact{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.rm-footer .faddr .fcontact i{font-style:normal;color:#8fb4dc;padding:0 5px}
.rm-footer .faddr a{color:#e9f2fd;text-decoration:underline;text-underline-offset:2px}
.rm-footer .faddr a:hover{color:#fff}
.rm-footer .rm-fyt{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;font-weight:600;color:#dbe4f2;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 15px;transition:.15s}
.rm-footer .rm-fyt:hover{background:#c4302b;border-color:#c4302b;color:#fff}
.rm-footer .rm-flinks{display:flex;flex-direction:column;gap:11px;align-items:flex-end;text-align:right;flex-shrink:0}
.rm-footer .rm-flinks a{color:#e9f2fd;font-size:13px;transition:.15s}
.rm-footer .rm-flinks a:hover{color:#fff}
.rm-footer .rm-flinks a.strong{color:#fff;font-weight:600}
.rm-footer .copy{color:#aecbea;font-size:12.5px;padding-top:18px}
/* 관련 기관: 하단 전체폭 밝은 띠 (로고 흰 배경이 자연스럽게 녹아듦) */
.rm-footer .rm-forgs-band{background:#fff}
.rm-footer .rm-forgs-band .rm-in{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
.rm-footer .rm-forgs-t{font-size:12.5px;color:#66718a;font-weight:700}
.rm-footer .rm-forgs-list{display:inline-flex;align-items:center;flex-wrap:wrap}
.rm-footer .rm-forgs-list a{position:relative;display:inline-flex;align-items:center;padding:2px 22px;transition:opacity .15s}
.rm-footer .rm-forgs-list a:first-child{padding-left:0}
.rm-footer .rm-forgs-list a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:20px;background:#e5e7eb}
.rm-footer .rm-forgs-list a:hover{opacity:.6}
.rm-footer .rm-forgs-list img{height:26px;width:auto;display:block}
/* 모바일: 3개가 줄바꿈되며 국세청이 잘려 보이던 문제 → 3열 균등 그리드(구분선 제거) */
@media(max-width:700px){
/* 연락처는 한 줄에 하나씩 → 줄 끝에 구분점(·)이 대롱대롱 남지 않도록 숨김 */
.rm-footer .faddr .fcontact{display:block}
.rm-footer .faddr .fcontact .nw{display:block}
.rm-footer .faddr .fcontact i{display:none}
.rm-footer .rm-forgs-band .rm-in{flex-direction:column;align-items:stretch;gap:9px;padding-top:14px;padding-bottom:16px}
.rm-footer .rm-forgs-list{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:10px;width:100%}
.rm-footer .rm-forgs-list a{padding:0;justify-content:center;min-width:0}
.rm-footer .rm-forgs-list a::before{display:none}
.rm-footer .rm-forgs-list img{height:auto;width:100%;max-width:118px;max-height:24px;object-fit:contain}
}
/* ===== 서브페이지 프레임 (히어로 + 사이드바 + 콘텐츠) ===== */
/* ⚠️레거시 sub-style.css 의 body{line-height:14px} 가 모던 서브페이지 전체에 상속돼
글자 크기보다 줄간격이 작아진다(제목이 줄바꿈되는 순간 줄끼리 겹침). sub-style 이 나중에
로드되므로 요소 선택자로는 못 이기고, 클래스 선택자로 덮어야 한다. 되돌리지 말 것. */
body.rm-subbody{font-family:"Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",-apple-system,sans-serif;color:var(--rm-ink);margin:0;background:#fff;line-height:1.6}
.rm-subhero,.rm-subhero *,.rm-subwrap,.rm-subgrid,.rm-side,.rm-side *,.rm-main{box-sizing:border-box}
.rm-subhero{background:linear-gradient(120deg,var(--rm-blue-2),var(--rm-blue-deep));color:#fff;padding:42px 0}
.rm-subhero .rm-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.rm-subhero-t{font-size:clamp(23px,3vw,32px);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.3}
/* 레거시 orig-main/sub-style의 h1~h6{font-family:dotum} 강제를 덮어 모던 폰트로 통일 (서브페이지 제목 글씨 정상화) */
body.rm-subbody h1,body.rm-subbody h2,body.rm-subbody h3,body.rm-subbody h4,body.rm-subbody h5,body.rm-subbody h6{font-family:"Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",-apple-system,sans-serif}
.rm-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#d3e0f5}
.rm-crumb a{color:#d3e0f5;transition:.13s}
.rm-crumb a:hover{color:#fff}
.rm-crumb .sep{opacity:.55}
.rm-crumb b{color:#fff;font-weight:600}
.rm-subwrap{padding:52px 0 84px}
.rm-subgrid{display:grid;grid-template-columns:214px 1fr;gap:46px;align-items:start}
.rm-side{position:sticky;top:98px}
.rm-side-h{font-size:19px;font-weight:800;color:var(--rm-blue);padding-bottom:14px;border-bottom:2px solid var(--rm-blue);margin-bottom:4px;letter-spacing:-.02em}
.rm-side ul{list-style:none;margin:0;padding:0}
.rm-side li a{display:block;padding:12px 14px;font-size:14.5px;color:#4a5568;border-bottom:1px solid var(--rm-line);transition:.13s}
.rm-side li a:hover{background:var(--rm-band);color:var(--rm-blue);padding-left:18px}
.rm-side li.on a{color:var(--rm-blue);font-weight:700;background:var(--rm-band)}
.rm-side li.on a::before{content:"";display:inline-block;width:5px;height:5px;background:var(--rm-gold);margin:-2px 8px 0 -4px;vertical-align:middle}
.rm-main{min-width:0}
.rm-main .bdttl{color:var(--rm-blue);font-size:20px;font-weight:800;border-bottom:2px solid var(--rm-blue);padding-bottom:12px;margin:0 0 20px;letter-spacing:-.02em;line-height:1.45}
/* 게시판 표: 레거시 sub-style 의 th,td{line-height:14px} 를 덮는다(모바일에서 제목이 여러 줄 감길 때 붙어 보임) */
.rm-main .bdlist th,.rm-main .bdlist td{line-height:1.55}
.rm-main .rokvf-editable{font-size:15px;line-height:1.85;color:#333}
.rm-main .rokvf-editable img{max-width:100%;height:auto}
.rm-main .post-body{font-size:15px;line-height:1.8;color:#333}
.rm-main-full{max-width:900px}
/* 사이드바 없는 서브 레이아웃(인증 등) */
.rm-subgrid--full{grid-template-columns:1fr}
/* ===== 인증 폼(로그인·가입·찾기·마이페이지) ===== */
.rm-main .rokvf-auth{max-width:440px;margin:0 auto}
.rm-main .rokvf-auth::before{content:"";display:block;width:78px;height:78px;margin:2px auto 16px;background:url(img/emblem.png) center/contain no-repeat}
.rm-main .rokvf-auth-lead{color:#48546a;font-size:14px;line-height:1.7;margin:0 0 20px;text-align:center}
.rm-main .rokvf-auth-err{background:#fdecec;color:#c0392b;border:1px solid #f3c9c9;padding:11px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px}
.rm-main .rokvf-auth-ok{background:#eaf5ec;color:#1e7a34;border:1px solid #c5e6cd;padding:11px 14px;border-radius:8px;font-size:13.5px;margin-bottom:16px}
.rm-main .rokvf-auth-form{display:flex;flex-direction:column;gap:15px}
.rm-main .rokvf-auth-row{display:flex;flex-direction:column;gap:6px}
.rm-main .rokvf-auth-row label{font-size:13.5px;font-weight:700;color:#42506a}
.rm-main .rokvf-auth input[type=text],.rm-main .rokvf-auth input[type=password],.rm-main .rokvf-auth input[type=email],.rm-main .rokvf-auth input[type=tel]{width:100%;padding:13px 14px;border:1.5px solid #d5dce8;border-radius:8px;font-size:15px;background:#fff;transition:.15s;box-sizing:border-box}
.rm-main .rokvf-auth input:focus{outline:none;border-color:var(--rm-blue);box-shadow:0 0 0 3px rgba(37,99,168,.13)}
.rm-main .rokvf-auth-remember{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#48546a}
.rm-main .rokvf-auth-btn{width:100%;padding:14px;background:var(--rm-blue);color:#fff;border:0;border-radius:8px;font-size:15.5px;font-weight:800;cursor:pointer;transition:.15s}
.rm-main .rokvf-auth-btn:hover{background:var(--rm-blue-deep)}
.rm-main .rokvf-auth-find{text-align:center;font-size:13px;color:#66718a;margin:6px 0 0}
.rm-main .rokvf-auth-find a{color:#48546a}
.rm-main .rokvf-auth-find a:hover{color:var(--rm-blue)}
.rm-main .rokvf-auth-alt{text-align:center;font-size:14px;color:#48546a;margin:24px 0 0;padding-top:22px;border-top:1px solid var(--rm-line)}
.rm-main .rokvf-auth-alt a{color:var(--rm-blue);font-weight:700}
.rm-main .rokvf-auth-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* 인증 페이지는 본문 제목 가운데(히어로와 중복 완화) */
.rm-subgrid--full .rm-main>.bdttl{text-align:center;border-bottom:0;padding-bottom:0;margin-bottom:8px}
/* ===== 연혁 타임라인 ===== */
.rm-main .rk-hist{margin-top:8px}
.rm-main .rk-hist-yr{display:grid;grid-template-columns:92px 1fr;gap:26px;padding:16px 0;border-top:2px solid var(--rm-line)}
.rm-main .rk-hist-yr:first-child{border-top:0;padding-top:2px}
.rm-main .rk-hist-y{font-size:28px;font-weight:800;color:var(--rm-blue);letter-spacing:-.02em;line-height:1.1}
.rm-main .rk-hist-list{list-style:none;margin:0;padding:0}
.rm-main .rk-hist-list li{padding:9px 0;border-bottom:1px dashed #e6e9f0;display:flex;gap:14px;align-items:baseline}
.rm-main .rk-hist-list li:last-child{border-bottom:0}
.rm-main .rk-hist-list .d{flex-shrink:0;min-width:82px;font-size:13px;font-weight:700;color:var(--rm-blue);font-variant-numeric:tabular-nums}
.rm-main .rk-hist-list .c{font-size:14.5px;color:#3a4658;line-height:1.6}
.rm-main .rk-hist-list .h{display:inline-block;margin-left:8px;font-size:11.5px;color:#6b7688;background:var(--rm-band);border:1px solid var(--rm-line);border-radius:999px;padding:1px 10px;white-space:nowrap;vertical-align:middle}
/* ===== 임원 명단 ===== */
.rm-main .rk-roster{margin-top:8px}
.rm-main .rk-roster-cat{font-size:17px;font-weight:800;color:var(--rm-blue);margin:28px 0 10px;padding-left:12px;border-left:4px solid var(--rm-gold)}
.rm-main .rk-roster-t{width:100%;border-collapse:collapse;border-top:2px solid var(--rm-blue)}
.rm-main .rk-roster-t td{padding:11px 12px;border-bottom:1px solid var(--rm-line);font-size:14px;vertical-align:top}
.rm-main .rk-roster-t .nm{width:96px;font-weight:700;color:#22314c;white-space:nowrap}
.rm-main .rk-roster-t .po{width:148px;color:var(--rm-blue);font-weight:600}
.rm-main .rk-roster-t .pr{color:#48546a;line-height:1.5}
/* WP 이모지(📄 등)가 이미지로 변환될 때 본문 img 규칙에 눌려 커지는 것 방지 */
.rm-main img.wp-smiley,.rm-main img.emoji{display:inline!important;width:1.1em!important;height:1.1em!important;margin:0 .15em!important;padding:0!important;vertical-align:-.1em!important;border:0!important;box-shadow:none!important}
/* ===== 자료 다운로드 버튼 ===== */
.rm-main .rk-dl{margin:26px 0 4px}
.rm-main .rk-dl-btn{display:inline-flex;align-items:center;gap:9px;background:var(--rm-blue);color:#fff;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:8px;transition:.15s}
.rm-main .rk-dl-btn:hover{background:var(--rm-blue-deep);transform:translateY(-1px)}
/* 임원진 명함형 카드 (전화·이메일 없음, 실루엣 자리 → 사진 제공 시 .has-img 로 교체) */
.rm-main .rk-oc{margin-top:6px}
.rm-main .rk-oc-lead{font-size:15px;color:#48546a;line-height:1.7;margin:0 0 22px}
.rm-main .rk-oc-group{margin:32px 0 6px}
.rm-main .rk-oc-h{font-size:17px;font-weight:800;color:var(--rm-blue);margin:0 0 14px;padding-left:12px;border-left:4px solid var(--rm-gold)}
.rm-main .rk-oc-h .cnt{font-size:12.5px;font-weight:600;color:#98a2b3;margin-left:8px}
.rm-main .rk-oc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.rm-main .rk-oc-card{display:flex;align-items:flex-start;gap:18px;background:#fff;border:1px solid var(--rm-line);border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px rgba(16,32,64,.04);transition:box-shadow .16s ease,transform .16s ease}
.rm-main .rk-oc-body{padding-top:2px}
.rm-main .rk-oc-card:hover{box-shadow:0 10px 26px rgba(16,32,64,.11);transform:translateY(-2px)}
.rm-main .rk-oc-card.lead{border-color:var(--rm-gold);box-shadow:0 2px 14px rgba(24,119,182,.18)}
/* 사진 자리: 증명사진(3.5×4.5cm)보다 살짝 작은 세로 직사각형. 사진 제공 시 .has-img + ![]()
로 교체 */
.rm-main .rk-oc-photo{flex:0 0 84px;width:84px;height:108px;border-radius:8px;border:1px solid #e2e7ef;background:#eef1f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b4bfd0'%3E%3Ccircle cx='12' cy='9' r='4.1'/%3E%3Cpath d='M3.8 20.6a8.2 8.2 0 0 1 16.4 0z'/%3E%3C/svg%3E") center 82%/66% no-repeat}
.rm-main .rk-oc-photo.has-img{background:none}
.rm-main .rk-oc-photo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.rm-main .rk-oc-body{flex:1;min-width:0}
.rm-main .rk-oc-name{font-size:18px;font-weight:800;color:#22314c;letter-spacing:.4px}
.rm-main .rk-oc-role{display:inline-block;margin-left:9px;font-size:13.5px;font-weight:700;color:var(--rm-blue);vertical-align:1px}
.rm-main .rk-oc-card.lead .rk-oc-role{color:var(--rm-blue-deep)}
.rm-main .rk-oc-prof{margin-top:7px;font-size:13.5px;color:#48546a;line-height:1.55}
/* 컴팩트 변형 — 약력 없이 이름·직함만 있는 명단(강사단)용.
기본 카드를 그대로 쓰면 약력 자리가 비어 오른쪽이 휑해 보이므로 칸을 좁히고 사진을 줄임.
약력이 확보되면 이 클래스만 빼면 임원진과 동일한 카드로 돌아감. */
.rm-main .rk-oc-grid.compact{grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:14px}
.rm-main .rk-oc-grid.compact .rk-oc-card{gap:14px;padding:15px 16px;align-items:center}
.rm-main .rk-oc-grid.compact .rk-oc-photo{flex:0 0 58px;width:58px;height:74px}
.rm-main .rk-oc-grid.compact .rk-oc-name{font-size:16.5px}
.rm-main .rk-oc-grid.compact .rk-oc-role{display:block;margin-left:0;margin-top:5px;font-size:12.5px}
.rm-main .rk-oc-note{margin:26px 0 0;font-size:13px;color:#8a94a6;line-height:1.6}
.rm-main .rk-oc-back{margin:8px 0 0;font-size:14px}
.rm-main .rk-note{color:#66718a;font-size:13.5px;margin:16px 0 0;line-height:1.6}
/* ===== 사업분야: 리드 + 핵심사업 + 추진 로드맵 ===== */
.rm-main .rk-lead{font-size:15.5px;line-height:1.9;color:#3a4658;margin:4px 0 6px}
.rm-main .rk-lead b{color:var(--rm-blue)}
.rm-main .rk-sec-h{font-size:19px;font-weight:800;color:var(--rm-blue);margin:36px 0 16px;padding-left:12px;border-left:4px solid var(--rm-gold)}
/* 로고+소개 멘트 인트로 밴드 (텍스트 위주 페이지) */
.rm-main .rk-introband{display:flex;align-items:center;gap:20px;background:linear-gradient(105deg,#f6f9fd,#eaf1fa);border:1px solid #dce6f2;border-radius:12px;padding:18px 24px;margin:0 0 28px}
.rm-main .rk-introband-badge{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:#fff;border:1px solid #e4ebf4;border-radius:50%;box-shadow:0 1px 4px rgba(16,32,64,.07)}
.rm-main .rk-introband-logo{width:44px;height:44px;object-fit:contain}
.rm-main .rk-introband-sep{flex:0 0 auto;width:3px;align-self:stretch;margin:3px 0;background:linear-gradient(180deg,var(--rm-blue),rgba(24,119,182,.18));border-radius:2px}
.rm-main .rk-introband-txt{margin:0;font-size:14px;line-height:1.75;color:#414d63}
.rm-main .rk-introband-txt strong{color:var(--rm-blue);font-weight:800;font-size:15px}
@media(max-width:560px){.rm-main .rk-introband{gap:14px;padding:15px 16px}.rm-main .rk-introband-badge{width:50px;height:50px}.rm-main .rk-introband-logo{width:36px;height:36px}.rm-main .rk-introband-sep{display:none}.rm-main .rk-introband-txt{font-size:13px}}
/* 사업개요 — 설립목적 6대 목적사업 카드 */
.rm-main .rk-purpose{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin-top:8px}
.rm-main .rk-pp{display:flex;gap:16px;background:#fff;border:1px solid var(--rm-line);border-radius:12px;padding:20px 22px;color:inherit;transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.rm-main a.rk-pp:hover{border-color:#cfdcec;box-shadow:0 8px 22px rgba(16,32,64,.09);transform:translateY(-2px)}
.rm-main .rk-pp-n{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--rm-blue),var(--rm-blue-deep));color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;letter-spacing:.5px}
.rm-main .rk-pp-b{flex:1;min-width:0}
.rm-main .rk-pp-b h4{font-size:16px;font-weight:800;color:#22314c;margin:2px 0 7px;line-height:1.4}
.rm-main .rk-pp-b p{font-size:13.5px;color:#48546a;line-height:1.6;margin:0}
.rm-main .rk-pp-more{display:inline-block;margin-top:11px;font-size:13px;font-weight:700;color:var(--rm-blue)}
.rm-main a.rk-pp:hover .rk-pp-more{text-decoration:underline}
.rm-main .rk-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rm-main .rk-prog-card{background:var(--rm-band);border:1px solid var(--rm-line);border-radius:12px;padding:0 0 18px;overflow:hidden;transition:.18s}
.rm-main .rk-prog-card:hover{border-color:#d3ddec;box-shadow:0 8px 22px rgba(16,32,64,.07)}
.rm-main .rk-prog-img{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#dbe3ef}
.rm-main .rk-prog-card h4{font-size:15.5px;font-weight:800;color:var(--rm-blue);margin:16px 18px 9px}
.rm-main .rk-prog-card.noimg{padding-top:20px}
.rm-main .rk-prog-card p{font-size:13.5px;color:#48546a;line-height:1.65;margin:0 18px}
/* 협력·유관단체 로고 그리드 */
.rm-main .rk-orgs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 4px}
.rm-main .rk-org{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:110px;padding:18px 16px;background:#fff;border:1px solid var(--rm-line);border-radius:12px;text-decoration:none;transition:.18s}
.rm-main .rk-org:hover{border-color:#c9d6e8;box-shadow:0 8px 22px rgba(16,32,64,.08);transform:translateY(-2px)}
.rm-main .rk-org-logo{height:52px;width:auto;max-width:100%;object-fit:contain;display:block}
.rm-main .rk-org-go{font-size:12.5px;color:#7a879a;font-weight:600}
.rm-main .rk-org:hover .rk-org-go{color:var(--rm-gold)}
.rm-main .rk-road{margin-top:4px;border-top:1px solid var(--rm-line)}
.rm-main .rk-road-item{border-bottom:1px solid var(--rm-line)}
.rm-main .rk-road-head{width:100%;display:flex;align-items:center;gap:18px;background:none;border:0;padding:16px 8px;cursor:pointer;text-align:left;transition:background .13s}
.rm-main .rk-road-head:hover{background:var(--rm-band)}
.rm-main .rk-road-when{display:flex;flex-direction:column;gap:5px;align-items:flex-start;width:118px;flex-shrink:0}
.rm-main .rk-road-tag{font-size:11px;font-weight:800;border-radius:5px;padding:2px 9px;letter-spacing:.02em}
/* 추진 로드맵 상태 3단계 (2026-08-23) — 예정: 옅게 / 진행중: 채움 / 완료: 초록.
상태색은 브랜드 파랑과 별개의 의미색이다. 되돌리지 말 것. */
.rm-main .rk-road-tag.plan{background:#eef2fa;color:var(--rm-blue-deep);border:1px solid #d9e3f2}
.rm-main .rk-road-tag.ing{background:var(--rm-blue);color:#fff}
.rm-main .rk-road-tag.done{background:#e8f4ed;color:#146b47;border:1px solid #c6e3d3}
.rm-main .rk-road-when .p{font-size:12.5px;color:#66718a;font-weight:600;font-variant-numeric:tabular-nums}
.rm-main .rk-road-t{flex:1;font-size:15.5px;font-weight:700;color:#22314c}
.rm-main .rk-road-chev{flex-shrink:0;color:var(--rm-muted);font-size:14px;transition:.2s}
.rm-main .rk-road-item.open .rk-road-chev{transform:rotate(180deg);color:var(--rm-blue)}
.rm-main .rk-road-item.open .rk-road-head{background:var(--rm-band)}
.rm-main .rk-road-panel{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.rm-main .rk-road-item.open .rk-road-panel{max-height:1200px}
.rm-main .rk-road-in{padding:6px 8px 24px 136px}
.rm-main .rk-road-summary{font-size:14px;color:#42506a;line-height:1.7;margin:0 0 16px}
.rm-main .rk-road-dl{display:grid;grid-template-columns:96px 1fr;gap:9px 16px;font-size:13.5px;margin:0}
.rm-main .rk-road-dl dt{font-weight:700;color:var(--rm-blue)}
.rm-main .rk-road-dl dd{margin:0;color:#48546a;line-height:1.65}
.rm-main .rk-road-photo{margin-top:16px}
.rm-main .rk-road-photo img{max-width:360px;width:100%;height:auto;border-radius:8px;border:1px solid var(--rm-line);display:block}
.rm-main .rk-road-photo figcaption{font-size:12px;color:#66718a;margin-top:6px}
/* ===== 대표인사말 — 2026-08-05 사무국 지적 반영 =====
기존엔 인사말 전체가 통이미지(insamal-2026.jpg 418×533)여서 ①문구 수정이 불가능하고
②콘텐츠 폭(892px)의 절반만 채워 오른쪽이 비어 보였다. → 편집 가능한 텍스트 + 이사장 사진 2단. */
.rm-main .rk-greet{display:flex;gap:36px;align-items:flex-start;margin-top:4px}
.rm-main .rk-greet-body{flex:1 1 auto;min-width:0}
.rm-main .rk-greet-lead{margin:0 0 24px;line-height:1.35}
.rm-main .rk-greet-lead span{display:block;font-size:16.5px;font-weight:600;color:var(--rm-muted);letter-spacing:-.01em}
.rm-main .rk-greet-lead strong{display:block;margin-top:5px;font-size:clamp(21px,2.2vw,26px);font-weight:800;color:var(--rm-blue);letter-spacing:-.03em}
.rm-main .rk-greet-body p{margin:0 0 17px;font-size:15px;line-height:1.85;color:#3a4453}
.rm-main .rk-greet-body p:last-of-type{margin-bottom:0}
.rm-main .rk-greet-photo{flex:0 0 226px;margin:6px 0 0;text-align:center}
.rm-main .rk-greet-photo img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--rm-line);box-shadow:0 12px 28px rgba(16,32,64,.11)}
.rm-main .rk-greet-photo figcaption{margin-top:11px;font-size:13.5px;color:var(--rm-muted)}
.rm-main .rk-greet-photo figcaption b{margin-left:5px;font-size:15px;font-weight:800;color:var(--rm-ink);letter-spacing:.06em}
.rm-main .rk-greet-sign{width:fit-content;margin:30px 0 0 auto;padding:3px 0 3px 15px;border-left:3px solid var(--rm-blue);font-size:14.5px;line-height:1.65;color:var(--rm-muted)}
.rm-main .rk-greet-sign b{display:block;margin-top:3px;font-size:17px;font-weight:800;color:var(--rm-ink);letter-spacing:.02em}
.rm-main .rk-greet-sign b i{font-style:normal;letter-spacing:.34em;margin-left:7px}
@media(max-width:760px){
.rm-main .rk-greet{flex-direction:column;gap:22px}
.rm-main .rk-greet-photo{order:-1;flex:none;width:186px;margin:0 auto}
.rm-main .rk-greet-sign{margin-right:0}
}
/* ===== 서브페이지 본문 이미지 폭 맞춤 — 2026-08-05 사무국 지적 =====
옛 사이트에서 가져온 '글자가 박힌' 본문 이미지(img_company_02·03·05·09·15_map)는
옛 670px 레이아웃 기준이라 892px 콘텐츠 영역에서 오른쪽이 비어 보였다. 폭에 맞춰 채운다.
(확대율 최대 1.45배 — 육안 확인 결과 글자 선명도 문제 없음. h3_company_*.gif 소제목은 대상 아님) */
.rm-main .rokvf-editable img[src*="img_company_"]{display:block;width:100%;height:auto;margin:16px auto}
/* ===== 오시는길 주소 ===== */
.rm-main .rk-loc-map{max-width:100%;height:auto;border:1px solid var(--rm-line);border-radius:8px;display:block}
.rm-main .rk-loc-t{border-collapse:collapse;margin-top:22px;width:100%;max-width:640px;border-top:2px solid var(--rm-blue)}
.rm-main .rk-loc-t th{text-align:left;width:92px;background:var(--rm-band);color:var(--rm-blue);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--rm-line);font-size:14px;vertical-align:top}
.rm-main .rk-loc-t td{padding:12px 16px;border-bottom:1px solid var(--rm-line);color:#3a4658;font-size:14px}
.rm-main .rk-loc-t a{color:var(--rm-blue)}
/* ===== 정관(법령 스타일) ===== */
.rm-main .rk-law-rev{font-size:13px;color:#66718a;text-align:right;margin:0 0 4px;border-bottom:1px solid var(--rm-line);padding-bottom:14px;font-variant-numeric:tabular-nums}
.rm-main .rk-law-ch{margin-top:30px}
.rm-main .rk-law-cht{font-size:17px;font-weight:800;color:#fff;background:var(--rm-blue);border-radius:6px;padding:9px 16px;margin:0 0 16px;letter-spacing:.02em}
.rm-main .rk-law-art{margin:0 0 18px}
.rm-main .rk-law-artt{font-size:15px;font-weight:800;color:var(--rm-blue-deep);margin:0 0 6px}
.rm-main .rk-law-tx{font-size:14px;color:#3a4658;line-height:1.78;margin:3px 0}
.rm-main .rk-law-cl{font-size:14px;color:#3a4658;line-height:1.78;margin:5px 0 2px}
.rm-main .rk-law-sub{font-size:14px;color:#48546a;line-height:1.72;margin:1px 0 1px 20px}
.rm-main .rk-law-buchik .rk-law-cht{background:var(--rm-blue-deep)}
.rm-main .rk-law-orig-note{font-size:13.5px;color:#66718a;margin:0 0 18px;line-height:1.6}
.rm-main .rk-law-orig figure{margin:0 0 22px}
.rm-main .rk-law-orig img{width:100%;max-width:740px;height:auto;display:block;margin:0 auto;border:1px solid var(--rm-line);box-shadow:0 4px 18px rgba(16,32,64,.1)}
.rm-main .rk-law-orig figcaption{text-align:center;font-size:12px;color:#66718a;margin-top:7px;font-variant-numeric:tabular-nums}
/* ===== 모션 최소화 존중 ===== */
@media(prefers-reduced-motion:reduce){
.rm-reveal{opacity:1;transform:none;transition:none}
.rm-slide,.rm-slide .bg,.rm-slide.on *{transition:none!important;animation:none!important}
}
/* ===== 반응형 ===== */
@media(max-width:960px){
.rm-topbar,.rm-utilbar{display:none}
.rm-gnb,.rm-hd-cta .rm-btn{display:none}
.rm-header .rm-bar{height:60px}
.rm-brand img{height:38px}
.rm-burger{display:flex}
.rm-arrow{display:none}
.rm-hero{height:100vw;min-height:0}
.rm-hero-in{justify-content:flex-end;padding-bottom:64px}
.rm-quick{grid-template-columns:repeat(2,1fr);margin-top:-30px}
.rm-links{grid-template-columns:1fr;margin-top:16px;gap:12px}
.rm-lcard{height:212px}
.rm-subhero{padding:28px 0}
.rm-subhero .rm-in{flex-direction:column;align-items:flex-start;gap:8px}
.rm-subwrap{padding:30px 0 56px}
.rm-subgrid{grid-template-columns:1fr;gap:22px}
.rm-side{position:static;overflow-x:auto}
.rm-side-h{display:none}
.rm-side ul{display:flex;gap:8px;padding-bottom:4px}
.rm-side li a{white-space:nowrap;border:0;padding:9px 14px;border-radius:999px;background:var(--rm-band);font-size:13.5px}
.rm-side li a:hover{padding-left:14px}
.rm-side li.on a{background:var(--rm-blue);color:#fff}
.rm-side li.on a::before{display:none}
.rm-main .rk-hist-yr{grid-template-columns:1fr;gap:4px}
.rm-main .rk-prog{grid-template-columns:1fr}
.rm-main .rk-orgs{grid-template-columns:1fr}
.rm-main .rk-road-head{flex-wrap:wrap;gap:8px 12px}
.rm-main .rk-road-when{flex-direction:row;align-items:center;gap:8px;width:auto}
.rm-main .rk-road-t{flex-basis:100%;order:3}
.rm-main .rk-road-in{padding-left:8px}
.rm-main .rk-road-dl{grid-template-columns:1fr;gap:3px 0}
.rm-main .rk-road-dl dt{margin-top:8px}
.rm-main .rk-roster-t .nm{width:auto;white-space:normal}
.rm-main .rk-roster-t .po{width:auto}
.rm-lcard .lb .ko{font-size:20px}
.rm-counter{display:none}
.rm-intro{padding-top:56px}
.rm-intro .grid{grid-template-columns:1fr;gap:28px}
.rm-intro .vis{order:-1}
.rm-megabg{display:none}
.rm-news{padding:60px 0}
.rm-news2{grid-template-columns:1fr;gap:38px}
.rm-ggrid{grid-template-columns:repeat(2,1fr)}
.rm-cta .rm-in{flex-direction:column;text-align:center}
.rm-cta .btns{width:100%;justify-content:center}
.rm-footer .rm-ftop{flex-direction:column;gap:22px}
.rm-footer .rm-flinks{flex-direction:row;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;text-align:left}
}
/* ===== 설립허가증 / MOU 협약서 (2026-07-16 사장님 자료) ===== */
.rk-cert{max-width:700px;margin:16px auto 0;border:1px solid #e3e8ef;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 3px 14px rgba(20,60,110,.07)}
.rk-cert img{display:block;width:100%;height:auto}
.rk-cert figcaption{padding:11px 14px;font-size:14px;color:#555;text-align:center;border-top:1px solid #eef1f5;background:#fafbfc}
.rk-mou{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:14px}
.rk-mou-item{margin:0;border:1px solid #e3e8ef;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 3px 14px rgba(20,60,110,.07)}
.rk-mou-item img{display:block;width:100%;height:auto}
.rk-mou-item figcaption{padding:11px 14px;font-size:14px;color:#555;text-align:center;border-top:1px solid #eef1f5;background:#fafbfc}
@media(max-width:700px){.rk-mou{grid-template-columns:1fr}}
/* ===== 옛 기사 본문의 가로 넘침 가두기 — 2026-08-08 =====
옛 언론사 기사를 그대로 옮겨온 글(예: /press/151/ /press/156/)에는
`` 같은 고정폭 표와 줄바꿈되지 않는 긴 문자열이 들어 있어
모바일에서 **페이지 전체가 가로로 밀렸다**(390px 화면에서 문서폭 664px).
같은 취지의 규칙이 responsive.css 에 있었으나 그 파일은 모던 테마 페이지에
로드되지 않아 죽어 있었다 → 실제로 로드되는 이 파일에 둔다.
표는 줄이지 않고(글자가 4~6px로 뭉개짐) 본문 안에서만 가로 스크롤되게 가둔다. */
@media(max-width:980px){
.rm-main .post-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rm-main .post-body img{max-width:100%;height:auto}
/* 긴 URL·공백 없는 문자열이 안 꺾여서 넘치는 경우 */
.rm-main .post-body p,.rm-main .post-body span,.rm-main .post-body a,
.rm-main .post-body li,.rm-main .post-body td{overflow-wrap:anywhere}
}