/* 동북권 ICT이노베이션스퀘어 레이아웃 - layout.css (css/common.css 다음에 로드) - 헤더(메가메뉴 · 통합검색 · 모바일 메뉴) / 사이트맵 / 푸터(협력기관 로고 · 탑 버튼) : 메인 · 서브 공통 (inc/header.js, inc/footer.js) - 서브 틀 : 본문 폭 / 서브 비주얼 / 현재 위치 / 하위 메뉴(PC 탭) / 위치 바(태블릿·모바일) / 본문 / 페이지 제목 / 섹션 제목 (모든 서브 공통) */ /* ===================== HEADER ===================== */ #site-header{ --brand-w:185px; /* 로고 영역 폭 (로고 이미지 184.7px) */ --hright-w:102px; /* 오른쪽 버튼 영역 폭 (검색 40 + 간격 22 + 전체메뉴 40) */ position:fixed;top:0;left:0;width:100%;z-index:200; transition:background .3s var(--ease), box-shadow .3s var(--ease); } .header-inner{ position:relative; background:#fff; border-bottom:1px solid #b2b2b2; /* 로고·메뉴 줄 아래 선 */ } #site-header.is-scrolled .header-inner{box-shadow:0 4px 24px rgba(10,25,60,.08);} .util-bar-outer{width:100%;border-bottom:1px solid #b2b2b2;} /* 로그인·회원가입 줄 아래 선 */ .util-bar{ max-width:var(--container);margin:0 auto;padding:0 40px; display:flex;justify-content:flex-end;align-items:stretch;gap:0; font-size:clamp(12px, 11.69px + 0.082vw, 13px);color:var(--gray-700); height:44px; } .util-bar a{ transition:all .2s;display:flex;align-items:center;justify-content:center; width:104px;box-sizing:border-box; } .util-bar a:not(.util-org){font-weight:600;} /* 로그인·회원가입 : 한 단계 더 굵게 (500 → 600) */ .util-bar a:hover{color:var(--primary);background:rgba(5,20,50,.04);} .util-divider{width:0;height:100%;border-left:1px solid #b2b2b2;flex:none;} /* 테두리로 그려 화면 배율(125% 등)에서도 모든 세로선이 1px로 동일 */ .util-bar a.util-org{width:auto;padding:0 18px;gap:7px;} .util-org img{display:block;height:22px;width:auto;} .mobile-orgs img{display:block;height:26px;width:auto;} .util-org .ext,.mobile-orgs .ext{display:block;width:10px;height:10px;flex:none;opacity:.6;transition:transform .25s var(--ease);} /* 새 창 아이콘 : images/common/new_window_icon.svg (마우스 올림 _on) */ .util-org .ext img,.mobile-orgs .ext img{width:100%;height:100%;} .util-org:hover .ext,.mobile-orgs a:hover .ext{transform:translateX(3px);} /* 마우스 올림 : 화살표 오른쪽으로 살짝 */ @media (prefers-reduced-motion:reduce){ .util-org .ext,.mobile-orgs .ext{transition:none;} .mobile-sub,.mobile-sub li,.mobile-group-head img{transition:none !important;} } .main-row{ max-width:var(--container);margin:0 auto;padding:0 40px; display:flex;align-items:center;justify-content:space-between; height:var(--header-h); } .brand{display:flex;align-items:center;gap:10px;color:var(--ink);} .logo{flex:none;margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;} /* 헤더 로고 = 페이지 제목 1단계(h1) : 모양은 그대로 */ .main-row .brand{flex:none;width:var(--brand-w);} /* 2차 메뉴 줄(.mega-row)과 같은 폭 */ .brand .mark{ width:38px;height:38px;border-radius:9px; background:linear-gradient(135deg,#1c5bd6,#0aa8ff); display:flex;align-items:center;justify-content:center;flex:none; } .brand .mark svg{width:20px;height:20px;} .brand img{display:block;height:49px;width:auto;} .brand-text{line-height:1.15;} .brand-text strong{display:block;font-size:clamp(17.5px, 17.04px + 0.122vw, 19px);font-weight:800;letter-spacing:-.3px;} .brand-text span{display:block;font-size:clamp(9px, 8.85px + 0.041vw, 9.5px);letter-spacing:1.2px;color:var(--gray-500);text-transform:uppercase;} .main-nav{height:100%;} .main-nav > ul{display:flex;align-items:center;height:100%;gap:64px;} .main-nav > ul > li{height:100%;position:relative;display:flex;align-items:center;} .main-nav > ul > li > a{ display:flex;align-items:center;height:56%;padding:0 22px; color:var(--ink);font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);font-weight:600;letter-spacing:-.2px;position:relative; /* 1차 메뉴 16 → 17px (사용자 지시) */ border-radius:999px;transition:background .25s var(--ease); } .main-nav > ul > li.is-focus > a{background:rgba(5,20,50,.06);} .main-nav > ul > li.is-current > a{color:var(--primary);} .mega-col a[aria-current="page"],.mobile-sub a[aria-current="page"]{color:var(--primary);font-weight:700;} .sitemap-col a[aria-current="page"]{color:var(--primary);font-weight:700;} /* 사이트맵 현재 페이지 */ .mega{ position:absolute;top:calc(100% + 0.5px);left:0;width:100%; /* 헤더 아래 선(border-bottom)을 가리지 않도록 선 아래에서 시작 (사용자 지시 0.5px) */ background:#fff; /* 깔끔하게 흰색 (사용자 지시 - 그라데이션 · 무늬 없음) */ box-shadow:0 30px 50px -20px rgba(5,20,60,.25); border-radius:0 0 26px 26px; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s; padding:40px 0 42px;z-index:190; } .mega.is-open{opacity:1;visibility:visible;transform:translateY(0);} /* 2차 메뉴 칸 맞춤 (스크립트 없이 CSS 만) : .mega-row 는 .main-row 와 같은 구조 [로고 폭][메뉴][오른쪽 버튼 폭] - 각 칸 폭은 대메뉴 이름(data-label)을 같은 글꼴·여백으로 보이지 않게 넣어 대메뉴 폭과 똑같이 맞춤 */ .mega-row{max-width:var(--container);margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;} .mega-row::before{content:'';flex:none;width:var(--brand-w);} .mega-row::after{content:'';flex:none;width:var(--hright-w);} .mega-inner{position:relative;display:flex;gap:64px;margin:0;} /* 간격 = 대메뉴 간격 */ .mega-col{flex:none;text-align:center;} .mega-col::before{ /* 칸 폭 맞춤용 (보이지 않음, 스크린리더 제외) : .main-nav > ul > li > a 와 같은 글꼴·여백 */ content:attr(data-label);display:block;height:0;overflow:hidden;visibility:hidden;padding:0 22px;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);font-weight:600;letter-spacing:-.2px;white-space:nowrap; } .mega-col .mega-tit,.mega-col > ul{width:0;min-width:100%;} /* 칸 폭에 영향 주지 않고 칸 폭만큼 채움 */ .mega-col .mega-tit{ display:block;font-size:clamp(14.5px, 14.04px + 0.122vw, 16px);font-weight:700;color:var(--ink);margin:0 0 18px;padding-bottom:14px; border-bottom:2px solid var(--gray-100);transition:color .2s; } .mega-col.is-focus .mega-tit{color:var(--primary);} .mega-col .mega-tit{position:absolute;width:1px;min-width:0;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* 대메뉴 제목 우선 숨김 (화면에서만, 스크린리더는 읽음) - 다시 보이려면 이 줄 삭제 */ .mega-col ul li{margin-bottom:4px;display:flex;justify-content:center;} .mega-col ul li a{white-space:nowrap;} /* 긴 2차 메뉴도 한 줄 + 대메뉴 가운데 기준 정렬 */ .mega-col ul li a{ display:block;padding:10px 12px;font-size:clamp(15px, 14.69px + 0.082vw, 16px);font-weight:500;color:var(--gray-700);border-radius:8px; /* 2차 메뉴 14.5 → 16px · 굵기 500 (모바일 메뉴 .mobile-sub 와 같게, 사용자 지시) */ transition:all .2s; } .mega-col ul li a:hover{color:var(--primary);background:var(--primary-light);} .header-right{display:flex;align-items:center;gap:22px;} .main-row .header-right{flex:none;width:var(--hright-w);justify-content:flex-end;} /* 2차 메뉴 줄(.mega-row)과 같은 폭 */ .grid-toggle{ width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:none; } .grid-toggle img{width:28px;height:28px;} /* images/common/sitemap_icon.svg (마우스 올림 sitemap_icon_on.svg) */ .search-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#093ba0;border-radius:50%;transition:color .2s,background .2s;} .search-toggle img{width:24px;height:24px;} .search-toggle:hover{background:var(--primary-light);} .search-toggle:focus-visible,.grid-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px;} .hamburger{display:none;} /* 통합검색 레이어 */ .search-layer{ position:fixed;inset:0;z-index:300;background:rgba(5,12,30,.55); opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s; } .search-layer.is-open{opacity:1;visibility:visible;} .search-layer-inner{ position:relative;background:#fff;padding:clamp(48px, 40.65px + 1.959vw, 72px) 20px clamp(36px, 29.88px + 1.633vw, 56px); display:flex;flex-direction:column;justify-content:center; min-height:calc(min(362px + 12.5vw, 562px) + 67px); /* 서브 비주얼 높이 + 하위 메뉴 탭이 아래로 나온 43px + 여유 24px → 탭까지 덮음 */ transform:translateY(-24px);transition:transform .35s var(--ease); } @media (max-width:1000px){ .search-layer-inner{min-height:calc(277px + 12vw + 80px);} } /* 태블릿 : 서브 비주얼 + 위치 바 56px + 여유 24px */ @media (max-width:640px){ .search-layer-inner{min-height:calc(231.6px + 9.43vw + 74px);} } /* 모바일 : 서브 비주얼 + 위치 바 50px + 여유 24px */ .search-layer.is-open .search-layer-inner{transform:none;} .search-layer-title,.search-layer-form,.search-layer-msg,.search-layer-keywords{width:100%;max-width:640px;margin-left:auto;margin-right:auto;} /* 검색창 · 추천 검색어 가로 : 같은 폭 (최대 640px) */ .search-layer-title{font-family:var(--font-title);font-weight:400;font-size:clamp(24px, 20.94px + 0.816vw, 34px);color:var(--ink);text-align:center;margin-bottom:clamp(18px, 14.94px + 0.816vw, 28px);} .search-layer-form{display:flex;align-items:center;border-bottom:3px solid var(--primary);} .search-layer-form input{ flex:1;min-width:0;height:clamp(52px, 47.1px + 1.306vw, 68px);border:none;background:none;padding:0 8px; font-family:inherit;font-size:clamp(17px, 15.47px + 0.408vw, 22px);color:var(--ink); } .search-layer-form input::placeholder{color:var(--gray-500);} .search-layer-form input:focus{outline:none;} .search-layer-form:focus-within{box-shadow:0 3px 0 0 var(--primary);} .search-layer-submit{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--primary);border-radius:50%;} .search-layer-submit img{width:28px;height:28px;} .search-layer-submit:hover{background:var(--primary-light);} .search-layer-msg{min-height:22px;margin-top:10px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--red);} .search-layer-keywords{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:6px;} /* 검색창 왼쪽 끝부터 */ .search-layer-keywords strong{font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--ink);} .search-layer-keywords ul{flex:1 1 0%;min-width:0;display:flex;flex-wrap:wrap;gap:8px;} /* 추천 검색어 : 검색창 폭만큼 늘어남 */ .search-layer-keywords li{flex:0 0 calc((100% - 32px) / 5);min-width:0;} /* 한 줄 5칸 같은 폭 — 늘어나지 않으므로 줄이 바뀌어도 칸 폭 그대로 */ .search-layer-keywords a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;padding:7px 10px;border-radius:999px;background:var(--gray-100);font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);transition:background .2s,color .2s;} .search-layer-keywords a:hover{background:var(--primary);color:#fff;} @media (max-width:640px){ /* 모바일 추천 검색어 : 제목은 윗줄, 버튼은 한 줄에 3개 같은 폭 */ .search-layer-keywords strong{flex-basis:100%;} .search-layer-keywords li{flex:0 0 calc((100% - 16px) / 3);} } .search-layer-close{position:absolute;top:clamp(12px, 8.33px + 0.98vw, 24px);right:clamp(12px, 5.88px + 1.633vw, 32px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);border-radius:50%;transition:background .2s,transform .3s;} .search-layer-close:hover{background:var(--gray-100);transform:rotate(90deg);} .search-layer-close img{width:24px;height:24px;} .search-layer a:focus-visible,.search-layer button:focus-visible{outline:2px solid var(--primary);outline-offset:2px;} /* mobile nav */ .mobile-panel{ position:fixed;inset:0;z-index:250;background:rgba(5,12,30,.55); opacity:0;visibility:hidden;transition:opacity .3s; } .mobile-panel.is-open{opacity:1;visibility:visible;} .mobile-panel-inner{ position:absolute;top:0;right:0;width:min(380px,88vw);height:100%;background:#fff; padding:26px 24px;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .35s var(--ease); /* contain : 메뉴 끝까지 내린 뒤 뒤 본문으로 스크롤이 이어지지 않게 */ } .mobile-panel.is-open .mobile-panel-inner{transform:translateX(0);} .mobile-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-26px -24px 18px;padding:16px 20px 16px 24px;border-bottom:1px solid var(--gray-100);background:linear-gradient(180deg,#f3f8fe,#fff);} /* 머리 줄 : 로고 + 닫기 (사용자 선택 C안) */ .mobile-logo{display:block;border-radius:4px;} .mobile-logo img{display:block;width:auto;height:30px;} .mobile-logo:focus-visible{outline:2px solid var(--primary);outline-offset:3px;} .mobile-head-btns{flex:none;display:flex;gap:8px;} /* 검색 · 닫기 */ .mobile-search,.mobile-close{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #d6e2f1;color:var(--ink);transition:background .2s,box-shadow .2s;} .mobile-search:hover,.mobile-close:hover{background:var(--primary-light);box-shadow:inset 0 0 0 1px var(--primary);} .mobile-search:focus-visible,.mobile-close:focus-visible{outline:2px solid var(--primary);outline-offset:2px;} .mobile-search img,.mobile-close img{width:20px;height:20px;} .mobile-group{border-top:1px solid #e3e8f0;padding:14px 0;} /* 메뉴 사이 선 : 연회색보다 한 단계 진하게 (사용자 지시) */ .mobile-group-head{ display:flex;align-items:center;justify-content:space-between;font-size:clamp(15px, 14.54px + 0.122vw, 16.5px);font-weight:700; padding:8px 4px;color:var(--ink);width:100%;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer; } .mobile-group-head:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px;} .mobile-group-head img{width:16px;height:16px;transition:transform .42s cubic-bezier(.4,0,.2,1);} .mobile-group.is-open .mobile-group-head img{transform:rotate(180deg);} /* 2차 메뉴 열고 닫기 : 실제 높이까지 부드럽게 (사용자 지시 — 예전 max-height 520px 방식은 딱 열리고 닫힐 때 늦게 반응) - 높이 숫자는 js/common.js 가 넣고 끝나면 지움 (스크립트가 없으면 열림 = 높이 auto 로 바로 보임) - 닫힐 때는 높이가 다 줄어든 뒤 visibility:hidden (닫힌 메뉴에 Tab 초점이 가지 않게) */ .mobile-sub{height:0;overflow:hidden;visibility:hidden;transition:height .42s cubic-bezier(.4,0,.2,1),visibility 0s linear .42s;} .mobile-group.is-open .mobile-sub{height:auto;visibility:inherit;transition:height .42s cubic-bezier(.4,0,.2,1),visibility 0s;} /* inherit : 메뉴판(.mobile-panel)이 닫혀 있으면 같이 숨김 — visible 로 두면 닫힌 메뉴 안 링크에 Tab 초점이 들어감 */ .mobile-sub li{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;} /* 메뉴 글자는 살짝 늦게 떠오름 */ .mobile-group.is-open .mobile-sub li{opacity:1;transform:none;transition:opacity .35s .08s,transform .35s .08s;} .mobile-sub li{border-bottom:1px solid #e9edf3;} .mobile-sub li:last-child{border-bottom:none;} .mobile-sub li a{display:block;padding:15px 12px;font-size:clamp(13.5px, 13.19px + 0.082vw, 14.5px);font-weight:500;color:var(--gray-700);} .mobile-sub li a:hover{color:var(--primary);} .mobile-util{display:flex;gap:10px;margin-bottom:18px;} /* 위(머리 줄 아래 18px)와 아래(첫 메뉴 선까지 18px) 같게 (사용자 지시) */ .mobile-util a{ flex:1;text-align:center;padding:11px 0;border-radius:10px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:600; border:1px solid var(--gray-300); } .mobile-util a.primary{background:var(--primary);color:#fff;border-color:var(--primary);} .mobile-orgs{display:flex;flex-direction:column;gap:14px;margin-top:10px;padding-top:20px;border-top:1px solid #e3e8f0;} /* 마지막 메뉴 아래 선도 메뉴 사이 선과 같게 */ .mobile-orgs a{display:flex;align-items:center;gap:8px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);color:var(--gray-700);} .mobile-orgs a:hover{color:var(--primary);} /* ===================== SITEMAP (PC) — A안 (2026-11-09 사용자 선택) ===================== 헤더 아래 전체 화면 : 왼쪽 하늘색 곡선 판(제목 · 검색 · 추천 검색어 · 일러스트) + 오른쪽 대메뉴 5줄 [아이콘 + 대메뉴 | 하위 메뉴] 메인 첫 화면 · 장비시설 구역과 같은 하늘색, 메인 퀵메뉴 아이콘으로 같은 사이트 느낌 (고객 "다른 사이트 같다") / 1000px 이하는 모바일 메뉴 */ body.is-locked{overflow:hidden;} .sitemap{ position:fixed;left:0;right:0;bottom:0;top:calc(44px + var(--header-h));z-index:300;color:var(--ink);overflow-x:hidden;overflow-y:auto;background:#fff; /* 헤더(로그인 줄 44 + 선 1 + 메뉴 줄 + 선 1) 바로 아래부터 */ opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s; } .sitemap.is-open{opacity:1;visibility:visible;transform:none;} body.is-sitemap-open .mega{visibility:hidden;} /* 사이트맵이 열려 있는 동안 헤더 메가메뉴는 띄우지 않음 */ body.is-sitemap-open #site-header{z-index:310;} /* 사이트맵은 헤더 아래 선 밑으로 2px 겹쳐 시작하고 헤더를 위에 둠 : 화면 배율(125% 등)에서 헤더와 사이트맵 사이 1px 틈으로 뒤 내용이 비치던 것 (사용자 지시 2026-11-09) */ .sitemap-inner{position:relative;display:grid;grid-template-columns:440px minmax(0,1fr);column-gap:96px;max-width:var(--container);min-height:100%;margin:0 auto;padding:0 40px;} .sitemap-inner::before{ /* 왼쪽 하늘색 판 : 화면 왼쪽 끝 ~ 왼쪽 칸 오른쪽, 오른쪽 위 큰 곡선 */ content:'';position:absolute;top:0;bottom:0;left:calc((100% - 100vw) / 2);width:calc((100vw - 100%) / 2 + 40px + 440px + 44px);border-radius:0 220px 0 0;background:#eaf6fc;pointer-events:none; } .sitemap-inner > *{position:relative;} .sitemap a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px;} .sitemap-top{position:absolute;top:22px;right:40px;z-index:2;} .sitemap-close{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;} .sitemap-close .ic{width:44px;height:44px;border-radius:50%;border:1px solid #c9d6e8;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .3s var(--ease);} .sitemap-close img{width:18px;height:18px;} /* 남색 sitemap_close_icon_on.svg (마우스 올림 = 파란 원 + 흰 sitemap_close_icon.svg) */ .sitemap-close:hover .ic{background:var(--primary);border-color:var(--primary);transform:rotate(90deg);} .sitemap-close:focus-visible{outline:2px solid var(--primary);outline-offset:6px;border-radius:40px;} /* 왼쪽 판 : 제목 · 설명 → 검색 → 일러스트(아래, 장식) */ .sitemap-head{display:flex;flex-direction:column;gap:22px;padding:44px 0 0;} .sitemap-head::after{content:'';flex:1 1 0%;min-height:160px;margin:6px 0 28px;background:url("../images/contents/sub_hero.svg") left bottom/contain no-repeat;} /* 서브 상단과 같은 일러스트 (장식) */ .sitemap-title{margin:0;font-family:var(--font-title);font-size:clamp(26px, 20.49px + 1.469vw, 44px);font-weight:400;line-height:1.3;letter-spacing:-.5px;} .sitemap-title span{color:var(--primary);} .sitemap-desc{margin:10px 0 0;font-size:clamp(14px, 13.39px + 0.163vw, 16px);line-height:1.6;color:var(--gray-700);word-break:keep-all;} .ss-form{display:flex;align-items:center;height:58px;padding:0 6px 0 22px;border:2px solid var(--primary);border-radius:16px;background:#fff;transition:box-shadow .2s;} .ss-form:focus-within{box-shadow:0 0 0 4px rgba(5,62,165,.18);} /* 검색창 초점 표시 */ .ss-form input{flex:1 1 0%;min-width:0;height:100%;border:0;background:none;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);color:var(--ink);} .ss-form input::placeholder{color:#6b7488;} .ss-form input:focus{outline:none;} .ss-btn{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--primary);transition:background .2s;} .ss-btn img{width:22px;height:22px;filter:brightness(0) invert(1);} /* 흰 돋보기 */ .ss-btn:hover{background:var(--primary-dark);} .ss-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px;} .ss-msg{margin:8px 0 0 4px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:600;color:var(--red);} .ss-msg:empty{display:none;} .ss-keywords{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;} .ss-keywords strong{flex:1 1 100%;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:700;color:var(--ink);} .ss-keywords ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;} .ss-keywords a{display:block;padding:7px 14px;border-radius:999px;background:#fff;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);transition:background .2s,color .2s;} .ss-keywords a:hover{background:var(--primary);color:#fff;} .ss-keywords a:focus-visible{border-radius:999px;} /* 오른쪽 : 대메뉴 5줄 [아이콘 + 대메뉴 | 하위 메뉴 여러 칸] */ .sitemap-grid{display:flex;flex-direction:column;padding:72px 0 32px;} .sitemap-col{display:grid;grid-template-columns:258px minmax(0,1fr);align-items:center;gap:8px 0;padding:32px 0;border-top:1px solid #e3e8f0;} /* 줄 높이는 내용만큼 (화면 높이에 맞춰 늘리지 않음 — 큰 화면에서 줄 사이가 너무 벌어지던 것, 사용자 지시 2026-11-09) */ .sitemap-col:first-child{border-top:0;} /* 사업소개 위 가로줄 없음 (사용자 지시) — 줄은 대메뉴 사이에만 */ .sitemap-col-head{display:flex;align-items:center;gap:16px;} .sitemap-ic{flex:none;width:40px;height:40px;} /* 메인 퀵메뉴 아이콘 (장식, alt="") — 54 → 40 (사용자 지시 2026-11-09), 모든 폭 같은 크기 */ .sitemap-col h3{margin:0;font-family:var(--font-title);font-size:clamp(20px, 18.47px + 0.408vw, 25px);font-weight:400;line-height:1.35;color:var(--ink);word-break:keep-all;transition:color .2s;} .sitemap-col h3 .dot{line-height:1;} .sitemap-col:hover h3,.sitemap-col:focus-within h3{color:var(--primary);} .sitemap-col ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 20px;margin:0;padding:0;list-style:none;} .sitemap-col ul li a{display:inline-block;padding:9px 0;font-size:clamp(15px, 14.69px + 0.082vw, 16px);font-weight:500;color:var(--gray-700);word-break:keep-all;transition:color .2s;} .sitemap-col ul li a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px;} @media (prefers-reduced-motion:reduce){ .sitemap,.sitemap-close .ic,.sitemap-col h3,.sitemap-col ul li a,.ss-form,.ss-btn,.ss-keywords a{transition:none;} .sitemap-close:hover .ic{transform:none;} } @media (max-width:1500px){ /* 좁은 PC : 왼쪽 판 380 */ .sitemap-inner{grid-template-columns:380px minmax(0,1fr);column-gap:64px;} .sitemap-inner::before{width:calc((100vw - 100%) / 2 + 40px + 380px + 32px);border-radius:0 180px 0 0;} .sitemap-col{grid-template-columns:230px minmax(0,1fr);} .sitemap-col ul{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));} /* 링크 글자 16px 에서 가장 긴 "동북권ICT이노베이션스퀘어"(약 175px)가 한 줄 */ } @media (max-width:1250px){ /* 더 좁은 PC : 왼쪽 판 320, 칸 줄임 */ .sitemap-inner{grid-template-columns:320px minmax(0,1fr);column-gap:48px;} .sitemap-inner::before{width:calc((100vw - 100%) / 2 + 40px + 320px + 24px);border-radius:0 140px 0 0;} .sitemap-col{grid-template-columns:200px minmax(0,1fr);} .sitemap-col-head{gap:12px;} .sitemap-col ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 12px;} /* 1001px 에서도 두 칸에 가장 긴 링크가 한 줄 */ } @media (max-width:1000px){ .sitemap{display:none;} } @media (max-width:1400px){ .main-nav > ul,.mega-inner{gap:44px;} } @media (max-width:1250px){ .main-nav > ul,.mega-inner{gap:24px;} .mega-col ul li a{white-space:normal;word-break:keep-all;text-align:center;} .main-nav > ul > li > a,.mega-col::before{padding:0 16px;font-size:clamp(15.5px, 15.04px + 0.122vw, 17px);} } @media (max-width:1000px){ .main-nav,.mega{display:none;} /* 태블릿·모바일 : 대메뉴·2차 메뉴 대신 모바일 메뉴 사용 */ .main-row .header-right{width:auto;} .header-right .hamburger{ display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px; background:var(--gray-100);border:1px solid var(--gray-300); } .header-right .hamburger img{width:20px;height:20px;} .header-right .grid-toggle{display:none;} .header-right{gap:10px;} .search-toggle{width:46px;height:46px;border-radius:12px;background:var(--gray-100);border:1px solid var(--gray-300);} .util-bar-outer{display:none;} .main-row{height:76px;} :root{--header-h:76px;} .brand img{height:40px;} } @media (max-width:640px){ .container{padding:0 20px;} .main-row,.util-bar{padding:0 20px;} .brand img{height:34px;} } /* ===================== FOOTER ===================== */ #site-footer{background:#000;color:rgba(255,255,255,.68);} /* 협력기관 로고 (푸터 맨 위 흰 띠, 메인·서브 공통) : 가로로 계속 흐름 / 정지 버튼 · 마우스 올림 · 키보드 초점이 있으면 멈춤 (웹접근성) */ .ft-logos{position:relative;height:90px;display:flex;align-items:center;background:#fff;overflow-x:clip;overflow-y:visible;} /* 흐르는 로고가 페이지 폭을 넓히지 않도록 / 높이 120 → 90 (사용자 지시 2026-11-09) */ .sub-page .ft-logos{border-top:1px solid #e8eef6;} .ft-logos::before,.ft-logos::after{content:'';position:absolute;top:0;width:140px;height:100%;z-index:10;pointer-events:none;} .ft-logos::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));} .ft-logos::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0));} .logo-marquee{width:100%;clip-path:inset(-200px 0 -200px 0);} .logo-track{display:flex;align-items:center;width:max-content;margin:0;padding:8px 0;list-style:none;} .ft-logos.is-ready .logo-track{animation:logo-flow var(--logo-dur,40s) linear infinite;} /* 복제가 끝난 뒤 흐름 시작 */ .ft-logos.is-paused .logo-track,.logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:paused;} .ft-logos.is-kbd .logo-track{animation:none;} /* 키보드 초점 : 흐름 멈춤 + 초점 받은 로고가 보이게 띠 위치를 스크립트가 정함 (js/common.js) */ @keyframes logo-flow{to{transform:translateX(-50%);}} .logo-track li{flex:none;padding-right:88px;} /* 간격은 gap 대신 padding (절반 이동 시 이음매가 맞도록) */ .logo-item{ position:relative;z-index:1;flex:none;height:60px;display:flex;align-items:center;justify-content:center;padding:0 24px; background:transparent;border:1px solid transparent;border-radius:16px; box-shadow:0 20px 32px -6px rgba(5,62,165,0),0 8px 14px -8px rgba(5,62,165,0);transition:all .25s var(--ease); } .logo-item:hover{z-index:5;border-color:var(--primary);transform:translateY(-6px);box-shadow:0 20px 32px -6px rgba(5,62,165,.2),0 8px 14px -8px rgba(5,62,165,.16);} .logo-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px;} .logo-item img{display:block;height:40px;width:auto;} .logo-playbtn{ position:absolute;top:50%;right:24px;z-index:11;transform:translateY(-50%); /* 오른쪽 흐림 영역 안에 배치 */ width:36px;height:36px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s; } .logo-playbtn:hover{background:var(--primary);} .logo-playbtn:focus-visible{outline:2px solid var(--primary);outline-offset:3px;} .logo-playbtn img{width:12px;height:12px;} .logo-playbtn .i-play{display:none;} .logo-playbtn.is-paused .i-play{display:block;} .logo-playbtn.is-paused .i-pause{display:none;} /* 푸터 본문 (2026-11-05 사용자 지시) : PC = 왼쪽 로고 · 정책 링크 · 이용 안내 · 저작권 + 오른쪽 기관 연락처 표 (2026-11-09 좌우 바꿈, 사용자 지시) / 주관기관 · 동북권 ICT 도 다른 기관과 같은 한 줄 */ .footer-main{max-width:var(--container);margin:0 auto;padding:44px 40px;display:grid;grid-template-columns:420px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:64px;} /* 왼쪽(로고 · 이용 안내) 360 → 420 (사용자 지시 2026-11-09) */ .footer-side{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;} .footer-orgs{grid-column:2;grid-row:1 / span 2;min-width:0;} .footer-brand{display:flex;align-items:center;gap:10px;color:#fff;} .footer-brand img{display:block;height:31px;width:auto;} .footer-links{display:flex;align-items:center;gap:14px;font-size:clamp(12.5px, 12.19px + 0.082vw, 13.5px);flex-wrap:wrap;} .footer-links a{transition:color .2s;} .footer-links a:hover{color:#fff;} .footer-links a.strong{color:#02f5fd;font-weight:700;} .footer-links .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);} .footer-brand:focus-visible,.footer-links a:focus-visible,.ft-tel a:focus-visible,.ft-loc:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px;} /* 검은 바탕에서 잘 보이게 흰 테두리 (웹접근성) */ .ft-info{align-self:stretch;margin-top:6px;} /* 이용 안내 : 대표전화만 포인트 색 (개인정보처리방침과 같은 색, 사용자 지시) */ .ft-info-tit{margin:0 0 6px;color:#fff;font-size:clamp(14px, 13.69px + 0.082vw, 15px);font-weight:700;line-height:1.4;} .footer-side .ft-tel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:2px 0 8px;border-bottom:1px solid rgba(255,255,255,.4);color:rgba(255,255,255,.8);font-size:clamp(13px, 12.69px + 0.082vw, 14px);} .ft-tel a{color:#02f5fd;font-family:var(--font-title);font-size:clamp(28px, 26.16px + 0.49vw, 34px);font-weight:400;line-height:1.3;white-space:nowrap;} /* 포인트 글꼴 (사용자 지시) */ .ft-tel a:hover{text-decoration:underline;text-underline-offset:3px;} .ft-dl{margin:0;} .ft-dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:clamp(13px, 12.69px + 0.082vw, 14px);line-height:1.5;} .ft-dl dt{color:rgba(255,255,255,.68);font-weight:500;} .ft-dl dd{margin:0;color:rgba(255,255,255,.88);} .ft-loc{display:flex;align-items:center;justify-content:space-between;height:44px;margin-top:12px;padding:0 16px;border:1px solid rgba(255,255,255,.4);border-radius:8px;color:#fff;font-size:clamp(13px, 12.69px + 0.082vw, 14px);font-weight:600;transition:border-color .2s;} .ft-loc::after{content:'';flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;} .ft-loc:hover{border-color:#fff;} .footer-copy{grid-column:1;grid-row:2;align-self:end;margin:0;font-size:12px;line-height:1.6;color:rgba(255,255,255,.5);} .fb-orgs{font-style:normal;} .fb-tbl{width:100%;border-collapse:collapse;font-size:clamp(13px, 12.69px + 0.082vw, 14px);line-height:1.5;color:rgba(255,255,255,.8);} .fb-tbl th,.fb-tbl td{padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.14);text-align:left;vertical-align:top;word-break:keep-all;} .fb-tbl th:first-child{padding-left:0;} .fb-tbl tr > :last-child{padding-right:0;} .fb-tbl thead th{padding-top:0;border-bottom-color:rgba(255,255,255,.4);color:rgba(255,255,255,.68);font-weight:500;} .fb-tbl tbody th{color:#fff;font-weight:700;white-space:nowrap;} .fb-tbl td:nth-child(n+3){white-space:nowrap;} /* 전화 · 이메일은 줄을 나누지 않음, 좁아지면 주소 칸이 줄바꿈 */ .fb-lb{display:none;} /* TEL · E-mail 글자 : 표 머리글이 없는 768px 이하에서만 보임 */ @media(max-width:1500px){ .footer-main{grid-template-columns:360px minmax(0,1fr);column-gap:40px;} /* 320 → 360 */ } @media(max-width:1200px){ /* 표가 좁아지는 폭부터 위아래로 : 로고 · 링크 한 줄 → 표 → 저작권 */ .footer-main{display:block;padding-top:28px;padding-bottom:32px;} .footer-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 32px;} .ft-info{flex:1 1 100%;margin-top:6px;padding-top:18px;border-top:1px solid rgba(255,255,255,.3);} /* 1200 이하 : 로고 · 정책 링크 줄 아래 실선 → 대표전화 한 줄 → 운영 시간 · 휴관일 → FAX · 사업자등록번호 (사용자 지시 2026-11-09) */ .ft-loc{display:none;} /* 오시는 길 버튼 숨김 : 메인 퀵메뉴 · 전체 메뉴에서 갈 수 있음 (사용자 지시 2026-11-09) */ .ft-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;} .footer-orgs{margin-top:24px;} .footer-copy{margin-top:20px;} } @media(max-width:1000px){ /* 태블릿 · 모바일 : 버튼 하나로 기관 표 전체를 열고 닫기 (버튼 .fb-toggle 은 js/common.js 가 넣음 — 스크립트가 없으면 늘 펼침) */ .footer-orgs{margin-top:18px;} .ft-dl div:nth-last-child(-n+2){border-bottom:0;} /* FAX · 사업자등록번호 아래 실선 없음 — 바로 아래 [기관 연락처] 버튼 윗선과 겹쳐 보이던 것 (사용자 지시 2026-11-09) */ .fb-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:50px;padding:0;border:0;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:clamp(15px, 14.69px + 0.082vw, 16px);font-weight:700;text-align:left;cursor:pointer;} .fb-toggle::after{content:'';flex:none;width:9px;height:9px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease);} /* 화살표 : 닫힘 ∨ / 열림 ∧ */ .fb-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg);} .fb-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px;} .fb-toggle + .fb-orgs{margin-top:18px;} } @media(max-width:768px){ /* 표 → 기관마다 묶음 : 기관 이름 / 주소 / TEL · E-mail */ .fb-tbl,.fb-tbl tbody,.fb-tbl tr,.fb-tbl tbody th,.fb-tbl td{display:block;} .fb-tbl thead,.fb-tbl td.is-empty{display:none;} .fb-tbl tr{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);} .fb-tbl tr:first-child{padding-top:0;} .fb-tbl tbody th,.fb-tbl td{padding:0;border-bottom:0;white-space:normal;} .fb-tbl td{margin-top:4px;overflow-wrap:anywhere;} /* 좁은 화면에서 긴 이메일이 칸을 넘지 않게 */ .fb-tbl td:nth-child(n+3){display:inline-block;margin-right:16px;} .fb-lb{display:inline;margin-right:4px;color:rgba(255,255,255,.68);} } @media (prefers-reduced-motion:reduce){ .fb-toggle::after{transition:none;} } .top-btn{ position:fixed;right:max(16px, min(40px, calc((100vw - var(--container))/2 - 36px)));bottom:32px; /* 화면 오른쪽 끝에서 40px (사용자 지시 2026-10-21 : 내용을 가리지 않게 오른쪽으로) — 내용 바깥 자리가 모자라면 내용에서 24px 띄운 자리, 그것도 없는 좁은 화면은 화면 오른쪽 16px */ width:52px;height:52px;border-radius:50%; background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center; /* 파랑 배경 + 흰 화살표 */ box-shadow:0 14px 30px -10px rgba(5,62,165,.6);z-index:150;opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s var(--ease),visibility .3s,transform .3s var(--ease),background .2s; } .top-btn.is-visible{opacity:1;visibility:visible;transform:translateY(0);} .top-btn:hover{background:var(--primary-dark);} .top-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px;} .top-btn img{width:20px;height:20px;} @media(max-width:640px){ .footer-main{padding-left:20px;padding-right:20px;} .ft-dl div{display:block;} /* 안내 칸이 좁으니 이름 아래 값 */ .ft-logos{height:76px;} .logo-item{height:50px;padding:0 16px;} .logo-item img{height:30px;} .logo-track li{padding-right:48px;} .ft-logos::before,.ft-logos::after{width:60px;} .footer-links{gap:10px;} .footer-links a{padding:11px 0;margin:-11px 0;} /* 누르는 범위만 위아래 11px 넓힘(높이 18px → 40px), 줄 높이 · 배치는 그대로 (모바일 전수 LAY-07-01) */ .top-btn{right:18px;bottom:18px;width:46px;height:46px;} } /* ===================== 서브 공통 : 본문 폭 ===================== */ .sub-container{max-width:var(--container);margin:0 auto;padding:0 40px;} /* ===================== 서브 비주얼 : 하늘색 배경 + 네트워크 선 + 하늘색 동그라미·아이콘 ===================== */ .sub-visual{ position:relative;overflow:hidden;isolation:isolate; padding:calc(44px + var(--header-h) + clamp(34px, 28.5px + 1.469vw, 52px)) 0 clamp(60px, 51.6px + 2.245vw, 87.5px); /* 왼쪽 글 묶음이 헤더와 하위 메뉴 사이 세로 가운데 (위아래 22px 씩 줄임, 사용자 지시 2026-11-05) */ background:linear-gradient(135deg,#f7fcff 0%,#eef7fd 55%,#e3f1fb 100%); } .sub-visual::before{ /* 왼쪽 위 네트워크 선 (메인과 같은 이미지) */ content:'';position:absolute;left:0;top:calc(44px + var(--header-h));z-index:-1;width:min(26vw,420px);aspect-ratio:500/360; background:url("../images/main/main_hero_bg1.png") left top/contain no-repeat;pointer-events:none; } .sub-visual::after{ /* 오른쪽 큰 하늘색 원 : 중심을 헤더 아래 선에 두어 왼쪽 아래 곡선만 보이게 */ content:'';position:absolute;left:66%;top:calc(44px + var(--header-h));z-index:-1;width:min(75vw,1440px);aspect-ratio:1;border-radius:50%; background:#d9ecf9;transform:translateY(-50%);pointer-events:none; } .sv-inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 40px;} /* 현재 위치 (브레드크럼) */ .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 0 clamp(22px, 17.1px + 1.306vw, 38px);padding:0;list-style:none;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:var(--gray-700);} .breadcrumb li{display:flex;align-items:center;gap:4px;} .breadcrumb li + li::before{ content:'';width:6px;height:6px;border-top:1.5px solid #8f9ab0;border-right:1.5px solid #8f9ab0;transform:rotate(45deg);margin:0 8px 0 4px; } .breadcrumb a{display:inline-flex;align-items:center;gap:6px;transition:color .2s;} .breadcrumb a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px;} .breadcrumb a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px;} .breadcrumb .home{width:30px;height:30px;justify-content:center;border-radius:50%;background:#fff;color:var(--primary);box-shadow:0 4px 10px -6px rgba(5,40,100,.4);} .breadcrumb .home:hover{text-decoration:none;background:var(--primary);color:#fff;} .breadcrumb .home:focus-visible{border-radius:50%;} .breadcrumb .home img{width:15px;height:15px;transition:filter .2s;} .breadcrumb .home:hover img{filter:brightness(0) invert(1);} /* 아이콘 흰색 */ .breadcrumb [aria-current="page"]{color:var(--ink);font-weight:700;} /* 제목 */ .sv-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--primary);font-weight:700;font-size:clamp(12px, 11.39px + 0.163vw, 14px);letter-spacing:3px;} .sv-eyebrow::before{content:'';width:24px;height:2px;border-radius:2px;background:var(--primary);} .sv-title{margin:0;font-family:var(--font-title);font-weight:400;font-size:clamp(30px, 22.35px + 2.041vw, 55px);line-height:1.1;color:var(--ink);letter-spacing:-.5px;} .sv-title::after{ /* 제목 끝 파란 점 (장식, 읽히지 않음) */ content:'';display:inline-block;width:.16em;height:.16em;margin-left:.1em;border-radius:50%;background:var(--primary);vertical-align:baseline; } .sv-desc{ /* 설명 한 줄 (모바일은 숨김) */ margin:clamp(14px, 11.55px + 0.653vw, 22px) 0 0; color:var(--gray-700);font-size:clamp(15px, 13.78px + 0.327vw, 19px);line-height:1.65;white-space:nowrap; } .sv-img{ /* 오른쪽 일러스트 (images/contents/sub_hero.svg) : 아래쪽은 하위 메뉴 카드 뒤로 들어감 → 가로 위치를 카드 안쪽에 맞춤 */ position:absolute;z-index:1;pointer-events:none; right:calc(max(0px, (100% - var(--container)) / 2) + clamp(60px, 38.57px + 5.714vw, 120px) + 20px);bottom:clamp(30px, 26.94px + 0.816vw, 40px);transform:translateY(-0.3%); /* 그림 높이의 0.3% 만큼 위로 → 아래 끝이 하위 메뉴 윗선 바로 위 (1600 기준 약 1px 띄움) → PC·태블릿 같은 비율 */ width:34.375%;max-width:520px;height:auto; /* 화면 폭에 비례, 최대 520px (서브 비주얼 높이를 줄여 헤더와 띄움, 2026-11-05) */ } /* ===================== 하위 메뉴 (PC 탭) : 서브 비주얼 아래에 걸친 흰 카드 ===================== */ .lnb{position:relative;z-index:5;max-width:var(--container);margin:calc(clamp(30px, 26.94px + 0.816vw, 40px) * -1) auto 0;padding:0 clamp(60px, 38.57px + 5.714vw, 120px);} .lnb ul{ display:flex;gap:8px;margin:0;padding:10px;list-style:none;background:#fff;border-radius:22px; border:1px solid #e6edf7;box-shadow:0 24px 48px -28px rgba(5,40,100,.35); } .lnb li{flex:1;min-width:0;} .lnb a{ display:flex;align-items:center;justify-content:center;gap:10px;height:clamp(50px, 46.33px + 0.98vw, 62px);padding:0 18px;border-radius:14px; font-size:clamp(14px, 13.39px + 0.163vw, 16px);font-weight:600;color:var(--gray-700);text-align:center;white-space:nowrap; transition:background .25s var(--ease),color .25s var(--ease); } .lnb a:hover{background:var(--primary-light);color:var(--primary);} .lnb a[aria-current="page"]{background:var(--primary);color:#fff;font-weight:700;} .lnb a[aria-current="page"]::before,.lnb a[aria-current="page"]::after{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:#fff;} /* 현재 페이지 : 글자 왼쪽·오른쪽 흰 점 (색 외에 점으로도 구분) */ .lnb a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;} /* ===================== 위치 바 (태블릿·모바일 전용) : [홈] | [1차 메뉴 ▾] | [2차 메뉴 ▾] ===================== - 목록은 js/common.js 가 헤더 메뉴에서 자동으로 만듭니다 (페이지에는 서브 비주얼 아래에