/* ========================================================= KOSPOLE 통합 웹사이트 디자인 시스템 - 기관(INST): 네이비 / 골드 포인트 - 신뢰감 - 사업(BIZ) : 레드-오렌지 그라디언트 - 역동성 ========================================================= */ :root{ --font: 'Pretendard Variable','Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif; --navy-900:#0B1E42; --navy-800:#122A56; --navy-700:#1B3A73; --navy-600:#274B8E; --gold:#C9A227; --gold-light:#E9CE6F; --lnb-orange:#F6921E; /* 로컬내비게이션(LNB) 탭 hover/active 전용 - KOREATECH 벤치마킹, 2026-08-02 */ /* 2026-09-02 웹접근성 점검(KWCAG 2.2 검사항목 8, 명도대비 4.5:1) 반영 - --lnb-orange는 흰색과 짝지으면(텍스트 색으로 쓰거나, 흰 텍스트를 얹는 배경으로 쓰거나) 2.32:1로 크게 미달한다. GNB 대메뉴 active/hover, 메가메뉴 hover, LNB 탭 active처럼 흰색과 조합되는 곳에는 대신 이 값(흰색과 4.91:1)을 쓴다. --lnb-orange 자체는 비텍스트 용도(밑줄 배경 등)에 계속 사용. */ --lnb-orange-a11y:#C24A08; --red-600:#E63946; --red-700:#C81E2C; /* 2026-09-02 웹접근성 점검(KWCAG 2.2 검사항목 8, 명도대비 4.5:1) 반영 - --red-600(#E63946)은 흰 배경 대비 4.17:1로 기준 미달이라, 본문 텍스트 색상으로 쓰던 곳만 이 변수(값은 --red-700과 동일, 5.71:1)로 바꿔 넣는다. 배경/테두리/그라디언트 등 비텍스트 용도는 대비 기준 적용 대상이 아니므로 --red-600을 그대로 유지한다(styles.css 전수 조사로 텍스트 color: 선언만 선별 치환). */ --red-600-text:#C81E2C; --orange-500:#FF7A45; --orange-400:#FF9662; --orange-600:#E8590C; /* 2026-08-02 - 사업(BIZ) 사이트의 빨간 계열 브랜드 컬러를 주황으로 전환하며 추가 */ /* 2026-09-02 웹접근성 점검(검사항목 8) - --orange-600은 흰 배경 대비 3.58:1로 미달이라, 본문 텍스트 색상으로 쓰던 곳만 이 값(--orange-700과 동일, 4.91:1)으로 바꿔 넣는다. */ --orange-600-text:#C24A08; --orange-700:#C24A08; /* 위와 짝을 이루는 더 진한 주황(호버/그라데이션 어두운 쪽 끝) */ --ink-900:#14171F; --ink-700:#3A3F4B; --ink-500:#6B7280; --line:#E6E8ED; --bg-soft:#F5F7FB; --white:#FFFFFF; --radius-lg:20px; --radius-md:14px; --radius-sm:8px; --shadow-sm:0 2px 10px rgba(15,23,42,.06); --shadow-md:0 12px 32px rgba(15,23,42,.12); --shadow-lg:0 24px 60px rgba(15,23,42,.18); /* 2026-08-10 확대(1200px→1400px) - 사용자가 국립환경과학원(nier.go.kr) 초기화면 스크린샷을 제시하며 "화면 폭 대비 콘텐츠가 차지하는 비율이 우리보다 넓어 더 개방감 있고 글자도 크게 쓸 수 있어 보인다"고 비교 요청, 실측(화면폭 대비 콘텐츠폭 비율) 결과 국립환경과학원이 약 70~72%인 반면 우리는 약 63~65%였음을 확인하고 그 비율에 가깝게 맞춤. 이 변수 하나가 .wrap(거의 모든 섹션의 공용 컨테이너)에 그대로 쓰이므로 헤더/본문/푸터 등 사이트 전체 레이아웃이 이 값 하나로 일괄 조정된다(메가메뉴 폭은 이 값에 맞춰 아래 .mega에서 별도로 같이 넓혔고, GNB가 모바일 메뉴로 전환되는 1200px 기준점은 콘텐츠 폭과 무관한 별개 기준이라 그대로 유지함 - 아래 @media(max-width:1200px) 옆 설명 참고). */ --container:1400px; } *{box-sizing:border-box;} /* scrollbar-gutter:stable - 세로 스크롤바가 필요할 때만 나타나는 기본 동작 대신, 필요 여부와 무관하게 그 폭만큼 공간을 항상 미리 확보해둔다(2026-07-31 추가). 메가메뉴 펼침, 아코디언/탭 전환처럼 화면 높이가 순간적으로 바뀌는 상호작용이 있을 때 스크롤바가 나타났다 사라지며 본문 폭이 함께 줄었다 늘었다 해 화면이 좌우로 흔들리는 문제를 사이트 전체에서 예방한다. 지원하지 않는 구형 브라우저에서는 이 선언만 무시되고 이전과 동일하게 동작한다(안전한 점진적 개선). */ html{scroll-behavior:smooth;scrollbar-gutter:stable;} body{ margin:0; font-family:var(--font); color:var(--ink-900); background:var(--white); -webkit-font-smoothing:antialiased; line-height:1.55; /* 2026-08-10 추가 - 갤럭시 폴드6를 접었을 때(~344px)처럼 아주 좁은 화면에서 "공공기관"류 단어가 "공공" / "기관"으로 단어 중간에 끊겨 줄바꿈되는 문제(사용자 스크린샷 확인) 신고. 개별 제목 클래스마다 word-break:keep-all을 따로 붙이는 대신(이미 .mega-left-title 등 일부에만 있었음) body 전체 기본값으로 올려 사이트 전체 한글 텍스트가 항상 단어 단위로만 줄바꿈되도록 통일했다 (한글 웹 타이포그래피의 표준 권장 설정 - 영문/숫자 줄바꿈 동작에는 영향 없음). */ word-break:keep-all; } a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} img{max-width:100%;display:block;} button{font-family:inherit;cursor:pointer;} .wrap{max-width:var(--container);margin:0 auto;padding:0 24px;} .section{padding:72px 0;} .section-tight{padding:48px 0;} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:15px;font-weight:700;letter-spacing:.06em; padding:6px 14px;border-radius:999px;margin-bottom:14px; } /* 2026-09-02 웹접근성 점검(검사항목 8) - var(--gold)(#C9A227)를 이 배지의 옅은 배경과 같이 쓰면 2.2:1로 미달이라, 여기서만 더 어두운 톤(5.32:1)을 직접 지정한다(--gold 자체 값은 유지). */ .eyebrow.inst{background:rgba(201,162,39,.12);color:#7A6218;} /* 2026-08-19 - BIZ 홈페이지 개편(KISTA 벤치마킹)으로 본문(SCHEDULE/NEWS/SNS) 색상 톤을 기존 주황 계열에서 기관(INST) 사이트와 같은 남색/블루 계열로 전환. 히어로/GNB/풋터는 사용자 요청대로 손대지 않았으므로 로고·히어로·크로스바 등의 --orange-* 값은 그대로 둔다. */ .eyebrow.biz{background:rgba(27,58,115,.1);color:var(--navy-700);} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap;} .section-head h2{font-size:34px;margin:0 0 6px;} .section-head p{margin:0;color:var(--ink-500);font-size:17px;} .more-link{font-size:14px;font-weight:700;white-space:nowrap;padding-bottom:4px;border-bottom:2px solid currentColor;} /* ---------- Skip / Utility ---------- */ .skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:10px 16px;z-index:999;} .skip-link:focus{left:12px;top:12px;} /* ---------- Top Utility Bar ---------- */ .util-bar{background:var(--navy-900);color:#C9D3E8;font-size:13.5px;} .util-bar.biz-theme{background:#1B1420;} .util-bar .wrap{display:flex;justify-content:flex-end;gap:18px;height:38px;align-items:center;} .util-bar a{opacity:.85;} .util-bar a:hover{opacity:1;text-decoration:underline;} .util-bar .divider{width:1px;height:12px;background:rgba(255,255,255,.25);} /* 2026-08-10 - 갤럭시 폴드6를 접었을 때(~344px)처럼 아주 좁은 화면에서 "KOSPOLE 통합 포털/ 스포츠토토 사업 홈페이지/다국어지원/로그인" 4개 항목이 줄바꿈 없이 우겨넣어져 글자가 한 글자씩 세로로 쪼개지던 문제(사용자 스크린샷 확인). 사용자 확인에 따라 모바일에서는 사이트 전환용 텍스트 링크 2개(맨 앞 2개 항목 + 그 사이 구분선, 항상 이 순서로 고정된 공용 마크업이라 순서 기반 선택자로 안전하게 지정 가능)는 숨기고, 다국어지원·로그인처럼 실제 조작이 필요한 항목만 한 줄에 깔끔하게 남긴다(사이트 전환은 어차피 메인 화면에 카드 버튼이 따로 있어 유틸리티 바에서 굳이 안 보여도 됨). */ @media (max-width:480px){ .util-bar .wrap > :nth-child(-n+4){display:none;} } /* ---------- Header / GNB ---------- */ header.site-header{position:relative;z-index:40;background:var(--white);border-bottom:1px solid var(--line);} /* 메가메뉴가 열려 있을 때 하단 페이지 내용을 어둡게 덮어, 메뉴박스 뒤로 페이지 콘텐츠가 그대로 비쳐 보여 화면이 산만해지는 것을 막는다(한국마사회 메뉴박스처럼 또렷하게 보이도록). header보다 낮은 z-index라 헤더/메가메뉴 자체는 항상 그 위에 선명하게 보인다. */ .gnb-backdrop{ position:fixed;left:0;right:0;top:122px;bottom:0; background:rgba(10,20,40,.45);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .15s ease;z-index:35; } .gnb-backdrop.show{opacity:1;visibility:visible;} .header-row{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px;position:relative;} .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em;flex-shrink:0;white-space:nowrap;} .logo .mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:900;} .logo.inst .mark{background:linear-gradient(135deg,var(--navy-700),var(--navy-900));} .logo.biz .mark{background:linear-gradient(135deg,var(--orange-600),var(--orange-500));} .logo small{display:block;font-size:11px;font-weight:600;color:var(--ink-500);letter-spacing:0;} /* 기관 홈페이지 헤더 로고(2026-07-30, 실제 로고 파일로 교체) - 기존 "KO" 마크+텍스트 대신 이미지 하나로 브랜드명(KSPO&KSL/한국스포츠레저(주))이 모두 표시되므로 높이만 header-row(84px)에 맞춰 지정하고 나머지는 원본 비율(1890x567) 그대로 둔다. */ .logo-img{height:48px;width:auto;display:block;} /* 사업(BIZ) 홈페이지 헤더 로고(2026-08-02, 첨부 이미지로 교체) - toto_logo.png는 원본이 170x30(가로로 매우 넓은 순수 텍스트 워드마크)이라, 기관 로고와 같은 48px 높이를 그대로 쓰면 가로 폭이 270px 이상으로 과도하게 넓어져 다른 헤더 요소를 밀어낸다. 워드마크 성격에 맞춰 높이를 40px로 낮춰 가로 폭(약 227px)을 기관 로고와 비슷한 수준으로 맞춘다. */ .logo-img-biz{height:26px;} /* 2026-08-02 확대 - 한국기술교육대학교 벤치마킹: 대메뉴 글자를 크게 키우고 nav 전체 폭을 꽉 채우도록 justify-content:space-between으로 항목을 양쪽 끝까지 고르게 분산시켰다 (이전에는 justify-content:center로 가운데 뭉쳐 있어 좌우 여백이 넓게 남아있었음). */ nav.gnb{flex:1;display:flex;justify-content:center;min-width:0;} nav.gnb > ul{display:flex;gap:0;flex-wrap:nowrap;width:100%;justify-content:space-between;} nav.gnb > ul > li{position:static;} nav.gnb > ul > li > a{ display:flex;align-items:center;height:84px;padding:0 12px; font-weight:800;font-size:20px;color:var(--ink-900);border-bottom:3px solid transparent; white-space:nowrap; } /* "베트맨" 대메뉴(BIZ, 2026-08-15 신설) - 데스크톱 GNB는 글자 대신 로고를 글자 크기(20px)에 맞춰 표시, 모바일 전체메뉴(≤1200px)는 로고 대신 글자로 표시(요청사항) - 둘 다 마크업에 넣어두고 화면폭에 따라 CSS로 하나만 보이게 전환한다. */ .gnb-betman-logo{height:22px;width:auto;} .gnb-betman-text{display:none;} /* 대메뉴 마우스오버/활성 - 2026-08-02 요청: 텍스트+글자 바로 아래 바(border-bottom)를 모두 주황(--lnb-orange)으로. 기존에는 hover 색이 기본 색(--ink-900)과 거의 구분이 안 되는 짙은 남색(--navy-800)이라 "색이 안 바뀐다"는 문제가 있었음 - 기관/사업 사이트 공통으로 통일. */ nav.gnb > ul > li:hover > a, nav.gnb > ul > li.active > a{border-bottom-color:var(--lnb-orange);color:var(--lnb-orange-a11y);} /* "온에어"(구 "뉴스룸") GNB 강조 배지(2026-08-03) - 국민체육진흥공단 참고, 다른 대메뉴와 구분되도록 알약형 배경+아이콘으로 꾸민다. 클래스 선택자를 추가해 위 기본 규칙보다 specificity가 높아지므로 !important 없이도 항상 이 스타일이 우선 적용된다. */ nav.gnb > ul > li > a.onair-badge{ height:auto;gap:6px;background:var(--navy-800);color:#fff;padding:9px 18px; border-radius:999px;font-weight:800;font-size:15px;border-bottom:none; } nav.gnb > ul > li:hover > a.onair-badge, nav.gnb > ul > li > a.onair-badge:hover{background:var(--navy-700);color:#fff;border-bottom:none;} .onair-badge-icon{width:15px;height:15px;flex-shrink:0;} .header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;} .icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink-700);} .icon-btn:hover{background:var(--bg-soft);} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:999px;font-weight:700;font-size:14.5px;border:none; transition:transform .15s ease, box-shadow .15s ease; } .btn:hover{transform:translateY(-1px);} .btn-inst{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm);} .btn-inst:hover{box-shadow:var(--shadow-md);} .btn-biz{background:linear-gradient(135deg,var(--orange-600),var(--orange-500));color:#fff;box-shadow:0 10px 24px rgba(232,89,12,.28);} .btn-biz:hover{box-shadow:0 14px 30px rgba(232,89,12,.36);} .btn-outline{background:transparent;border:1.5px solid currentColor;} .btn-ghost{background:var(--bg-soft);color:var(--ink-900);} /* ---------- Mega Menu ---------- 가로 크기는 항목(대메뉴)에 관계없이 항상 동일하게 고정하고, 위치도 항상 화면(페이지 본문) 좌측 여백과 동일한 지점(로고 "KO" 시작 위치)에 맞춰 고정한다. 메뉴 항목이 많아지는 경우에는 flex-wrap으로 줄바꿈되어 세로로만 커지도록 한다. (li나 nav.gnb가 아닌 .header-row를 기준(position:relative)으로 절대배치하고, header-row 자체의 좌측 padding(24px)만큼 들여서 로고/페이지 본문과 좌측 정렬이 맞도록 한다 — 이전에는 nav.gnb 기준으로 가운데 정렬되어 있어 로고 옆 애매한 위치에서 시작했었음) 좌측에는 현재 선택된 대메뉴 이름(mega-left), 우측에는 하위메뉴 컬럼(mega-cols)을 두어 어떤 대메뉴를 선택해도 항상 같은 2단 레이아웃으로 보이도록 한다(한국마사회 메뉴박스 참고). */ /* 2026-08-13 - 열림/닫힘을 display:none↔flex(즉시 전환, 애니메이션 불가)에서 CSS grid-template-rows(0fr↔1fr) 트릭으로 교체(사용자가 KEPCO 사이트를 참고 제시 - 대메뉴 클릭 시 하위 메뉴가 슬라이드처럼 부드럽게 열리는 효과가 마음에 든다며 KOSPOLE 전체 메뉴에도 적용 요청). display는 height를 애니메이션할 수 없고, height:auto도 transition 대상이 될 수 없어(브라우저가 시작/끝 실제 px 값을 모르면 보간 불가) 기존엔 두 방법 다 못 썼는데, 1개짜리 grid row를 0fr(=0)에서 1fr(=콘텐츠가 필요로 하는 만큼)로 바꾸는 트릭은 JS로 높이를 미리 측정하지 않고도 내용 길이가 제각각인 모든 대메뉴에 동일하게 안전히 적용된다. `visibility`는 트랜지션 지연(delay)을 열림/닫힘에서 다르게 줘서(닫힐 때만 delay) 접히는 애니메이션 동안은 계속 보이다가 완전히 접힌 뒤에야 화면에서 사라지고 클릭도 막히게(pointer-events도 함께) 한다. */ .mega{ position:absolute;top:100%;left:24px; /* 2026-08-10 - 본문 컨테이너 확대(1200px→1400px, 위 --container 주석 참고)에 맞춰 메가메뉴 폭도 같은 비율로 함께 넓힘(1120px→1320px, 컨테이너 폭 대비 약 80px 인셋을 유지). */ width:min(1320px, calc(94vw - 24px));background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy-700); border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--shadow-lg); display:grid;grid-template-rows:0fr;overflow:hidden; visibility:hidden;pointer-events:none; transition:grid-template-rows .28s ease, visibility 0s linear .28s; } /* mega-inner: grid의 유일한 자식(행) - min-height:0이 없으면 flex/grid 자식의 기본값(min-height:auto, 콘텐츠 크기만큼)에 막혀 0fr일 때도 완전히 접히지 않는다(흔한 함정). 실제 좌/우 2단 레이아웃은 여기서 그대로 유지(mega-left+mega-cols를 가로로 배치). */ .mega-inner{display:flex;min-height:0;overflow:hidden;} .biz-nav .mega{border-top-color:var(--orange-600);} nav.gnb > ul > li:hover .mega, nav.gnb > ul > li:focus-within .mega, .mega.is-open{ grid-template-rows:1fr; visibility:visible;pointer-events:auto; transition:grid-template-rows .28s ease, visibility 0s linear 0s; } .mega-left{ position:relative;overflow:hidden; width:200px;flex:0 0 200px;background:linear-gradient(160deg, var(--bg-soft) 0%, #e9edf4 100%); padding:32px 26px;display:flex;flex-direction:column;justify-content:center; } /* 대메뉴별로 부합하는 아이콘을 우하단에 크게 깔아주는 워터마크(요청: "밋밋해서 특색이 없어보임" 개선). 실사 이미지 생성/다운로드가 불가한 환경이라 옅은 라인아이콘 워터마크로 대체 구현함. */ .mega-left-icon{ position:absolute;right:-24px;bottom:-24px;width:150px;height:150px; color:var(--navy-700);opacity:.12;z-index:0;pointer-events:none; } .mega-left-title{position:relative;z-index:1;font-size:23px;font-weight:800;color:var(--navy-800);line-height:1.35;word-break:keep-all;} .biz-nav .mega-left{background:linear-gradient(160deg, rgba(230,57,70,.06) 0%, rgba(230,57,70,.14) 100%);} .biz-nav .mega-left-icon{color:var(--navy-700);opacity:.14;} .biz-nav .mega-left-title{color:var(--navy-800);} .mega-cols{ flex:1;min-width:0;display:flex;flex-wrap:wrap;align-content:flex-start; gap:18px 36px; /* 세로 간격 28px→18px로 축소(2026-07-31, 하위메뉴가 많은 대메뉴가 화면 안에 더 잘 들어가도록) */ padding:22px 30px; /* 상하 패딩도 28px→22px로 축소 */ /* 대메뉴 시작 지점(top:100%, 뷰포트 기준 122px=util-bar 38px+header-row 84px) 아래로 뷰포트를 벗어날 만큼 하위메뉴가 많으면(예: KOSPOLE 기관소개) 문서 전체 높이가 그만큼 늘어나 세로 스크롤바가 나타났다 사라지며 화면이 좌우로 흔들리는 문제가 있었다(2026-07-31 버그수정). 드롭다운 자체 높이를 뷰포트에 맞춰 제한하고 넘치는 내용은 이 안에서만 스크롤되게 해 문서 높이 자체가 변하지 않도록 근본적으로 막는다 - 하위메뉴가 적은 대메뉴는 원래 높이가 이 한도보다 작아 지금처럼 스크롤 없이 그대로 보인다. */ max-height:calc(100vh - 150px); overflow-y:auto; } .mega-col{width:170px;flex:0 0 auto;} .mega-col > .mid{display:block;font-weight:800;font-size:16px;color:var(--navy-800);margin-bottom:9px;padding-bottom:6px;border-bottom:2px solid var(--bg-soft);transition:color .18s ease, border-color .18s ease;} /* 2026-08-02 수정 - 중메뉴 기본(비호버) 색상을 기관과 동일한 남색으로 통일(브랜드색인 빨강 제거). 호버 시에만 공용 규칙(.mega-col > .mid:hover)에 의해 주황으로 바뀜(기관/사업 공통). */ .biz-nav .mega-col > .mid{color:var(--navy-800);} /* 중메뉴(.mid) 마우스오버 - 2026-08-02 요청: 글자+바로 아래 바(border-bottom) 모두 주황으로. 기존에는 hover 규칙 자체가 없어 색이 전혀 바뀌지 않았음(진짜 버그). 비호버 시 색상(남색/BIZ는 레드)은 그대로 유지. 2026-08-13 - 항상 떠 있던 회색 밑줄(border-bottom)이 색만 바뀌는 방식이라 그대로 유지하되(이미 항상 보이는 구분선이라 "슬라이드로 나타나는" 처리 대상이 아님), 순간적으로 뚝 바뀌던 색 전환에 transition을 추가해 KEPCO처럼 부드럽게 바뀌도록만 다듬었다. */ .mega-col > .mid:hover{color:var(--lnb-orange-a11y);border-bottom-color:var(--lnb-orange);} .mega-col ul li{margin-bottom:5px;} /* 소메뉴 밑줄 - 2026-08-13, KEPCO 벤치마킹(사용자 제공 캡처: 마우스오버 시 글자 아래 밑줄이 왼쪽에서부터 슬라이드로 자라나며 나타남). 기존엔 여기에 밑줄 자체가 아예 없다가 호버 시 브라우저 기본 text-decoration이 즉시(애니메이션 없이) 전체 폭으로 나타났는데, text-decoration은 폭을 0→100%로 트랜지션할 수 없어(브라우저가 지원하지 않음) 대신 ::after 가상요소를 transform:scaleX()로 애니메이션하는 표준 기법으로 교체했다 - transform-origin:left로 항상 왼쪽부터 자라나게 고정. */ .mega-col ul li > a{position:relative;display:inline-block;font-size:15px;color:var(--ink-700);padding-bottom:2px;} .mega-col ul li > a::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px; background:var(--lnb-orange);transform:scaleX(0);transform-origin:left; transition:transform .22s ease; } .mega-col ul li > a:hover{color:var(--lnb-orange);} .mega-col ul li > a:hover::after{transform:scaleX(1);} .mega-col .sub2{padding-left:12px;margin-top:3px;} .mega-col .sub2 li{margin-bottom:3px;} .mega-col .sub2 li > a{font-size:12px;color:var(--ink-500);} .mega-col .sub2 li > a::before{content:'– ';} .mobile-toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:4px;} .mobile-toggle span{width:20px;height:2px;background:var(--ink-900);} /* ---------- Secondary GNB bar (opposite site quick link) ---------- */ .cross-bar{background:var(--bg-soft);border-top:1px solid var(--line);} .cross-bar .wrap{display:flex;align-items:center;gap:18px;height:50px;overflow-x:auto;} .cross-bar .cross-label{flex-shrink:0;display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;padding:6px 12px;border-radius:999px;color:#fff;white-space:nowrap;} .cross-bar.to-biz .cross-label{background:linear-gradient(135deg,var(--orange-600),var(--orange-500));} .cross-bar.to-inst .cross-label{background:linear-gradient(135deg,var(--navy-700),var(--navy-900));} .cross-bar .cross-links{display:flex;gap:6px;flex-wrap:nowrap;} .cross-bar .cross-links a{font-size:13px;font-weight:600;color:var(--ink-700);padding:6px 12px;border-radius:8px;white-space:nowrap;} .cross-bar .cross-links a:hover{background:#fff;box-shadow:var(--shadow-sm);} .cross-bar .cross-links a.emph{color:var(--orange-600-text);font-weight:800;} .cross-bar.to-inst .cross-links a.emph{color:var(--navy-700);} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;} .hero .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;} .hero-inst{background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-700) 55%,#0B3B6B 100%);} .hero-inst .blob1{width:520px;height:520px;background:var(--gold);top:-160px;right:-120px;opacity:.25;} .hero-inst .blob2{width:420px;height:420px;background:#3E6FD9;bottom:-180px;left:-100px;opacity:.35;} .hero-biz{background:linear-gradient(120deg,#3B1B08 0%,var(--orange-700) 45%,var(--orange-500) 100%);} .hero-biz .blob1{width:560px;height:560px;background:#FFD166;top:-180px;right:-140px;opacity:.35;} .hero-biz .blob2{width:440px;height:440px;background:#7A1120;bottom:-200px;left:-120px;opacity:.5;} .hero .speed-lines{position:absolute;inset:0;z-index:-1;opacity:.18; background:repeating-linear-gradient(100deg, rgba(255,255,255,.6) 0 2px, transparent 2px 90px);} .hero-inner{padding:96px 0 84px;position:relative;} .hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:22px;backdrop-filter:blur(4px);} .hero h1{font-size:46px;line-height:1.28;margin:0 0 20px;font-weight:800;letter-spacing:-.02em;max-width:680px;text-shadow:0 2px 14px rgba(0,0,0,.35);} .hero h1 em{font-style:normal;color:var(--gold-light);} .hero-biz h1 em{color:#FFE08A;} .hero p.lead{font-size:17px;color:rgba(255,255,255,.86);max-width:560px;margin:0 0 34px;text-shadow:0 1px 10px rgba(0,0,0,.3);} .hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;} .hero-stats{display:flex;gap:44px;margin-top:56px;flex-wrap:wrap;} .hero-stats .stat b{display:block;font-size:30px;font-weight:800;} .hero-stats .stat span{font-size:12.5px;color:rgba(255,255,255,.7);} /* decorative dynamic figure block (스포츠 이미지 대체 그래픽) */ .action-graphic{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:360px;height:360px;z-index:-1;opacity:.9;} @media (max-width:1100px){.action-graphic{display:none;}} /* ---------- Portal Landing ---------- */ .portal-hero{min-height:100vh;display:flex;flex-direction:column;background:var(--navy-900);color:#fff;position:relative;overflow:hidden;} .portal-hero::before{content:'';position:absolute;inset:0; background: radial-gradient(700px 500px at 12% 15%, rgba(201,162,39,.30), transparent 60%), radial-gradient(800px 600px at 88% 85%, rgba(230,57,70,.35), transparent 60%), linear-gradient(160deg,#0B1E42 0%,#101A33 55%,#170E16 100%); z-index:0;} .portal-hero::after{content:'';position:absolute;inset:0;z-index:0;opacity:.15; background:repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1.5px, transparent 1.5px 70px);} /* 2026-08-06 - z-index를 .portal-main(아래 히어로 본문, 역시 z-index:2)보다 명확히 높여야 함. 기존엔 둘 다 2로 같아서 DOM 순서상 나중에 오는 .portal-main이 쌓임 우선순위를 이겼는데, 그러면 .lang-switch-menu(다국어지원 드롭다운)의 z-index:120은 .portal-top 안에서만 유효해 형제 스태킹 컨텍스트인 .portal-main을 못 넘어서고, 결과적으로 드롭다운은 화면엔 보이지만 (.portal-main이 그 자리엔 투명 배경이라 밑에 있는 드롭다운이 비쳐 보임) 실제 클릭은 .portal-main이 가로채 언어를 선택해도 반응이 없던 문제가 있었다(KOSPOLE 포털 첫 화면 index.html에서만 재현 - 다른 페이지는 이런 풀스크린 히어로 구조가 아니라 문제 없었음). */ .portal-top{position:relative;z-index:10;} .portal-top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:12px;flex-wrap:wrap;padding:10px 0;} .portal-logo{font-weight:800;font-size:19px;display:flex;align-items:center;gap:10px;white-space:nowrap;} /* 2026-08-07 수정: 자리표시자였던 오렌지 "K" 박스를 실제 기관 로고(logo-kospole.png)로 교체. 로고 자체가 남색 글자라 어두운 포털 히어로 배경(--navy-900) 위에서는 거의 안 보이므로, 흰색 알약(pill) 배지로 감싸 대비를 확보한다(사이트 헤더는 흰 배경이라 이 처리가 필요 없지만, 포털 상단바는 어두운 배경이라 다름). */ .portal-logo-badge{background:#fff;border-radius:9px;padding:5px 9px;display:flex;align-items:center;line-height:0;} .portal-logo-img{height:22px;width:auto;display:block;} .portal-top-links{display:flex;gap:22px;font-size:13px;color:rgba(255,255,255,.75);flex-wrap:wrap;} /* 2026-08-10 - 위 .util-bar와 동일한 이유(좁은 화면 세로 붕괴)로, 모바일에서는 내비게이션 성격의 "사이트맵"은 숨기고 다국어지원·고객센터(실제 연락 가능한 정보)만 남긴다. */ @media (max-width:480px){ .portal-top-links > a:first-child{display:none;} .portal-logo{font-size:16px;} } .portal-main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px 20px;} .portal-main .kicker{font-size:13px;letter-spacing:.18em;color:var(--gold-light);font-weight:700;margin-bottom:18px;text-transform:uppercase;} .portal-main h1{font-size:44px;font-weight:800;line-height:1.35;margin:0 0 14px;max-width:760px;} .portal-main p{color:rgba(255,255,255,.72);max-width:560px;margin:0 auto 46px;font-size:15.5px;} .portal-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:980px;width:100%;margin:0 auto;} .portal-card{ position:relative;overflow:hidden;border-radius:24px;padding:40px 32px;min-height:300px; display:flex;flex-direction:column;justify-content:flex-end;text-align:left; border:1px solid rgba(255,255,255,.14);transition:transform .25s ease, box-shadow .25s ease; } .portal-card:hover{transform:translateY(-6px);} .portal-card.card-inst{background:linear-gradient(160deg, rgba(27,58,115,.9), rgba(11,30,66,.96));box-shadow:0 20px 50px rgba(11,30,66,.5);} .portal-card.card-biz{background:linear-gradient(160deg, rgba(255,122,69,.92), rgba(184,74,10,.96));box-shadow:0 20px 50px rgba(184,74,10,.5);} .portal-card .card-glow{position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(50px);opacity:.55;} .portal-card.card-inst .card-glow{background:var(--gold);top:-80px;right:-60px;} .portal-card.card-biz .card-glow{background:#FFB347;top:-80px;right:-60px;} .portal-card .card-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.16);margin-bottom:16px;width:fit-content;} .portal-card h2{font-size:26px;font-weight:800;margin:0 0 10px;} .portal-card p{font-size:14px;color:rgba(255,255,255,.78);margin:0 0 22px;max-width:340px;} .portal-card .card-enter{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;} .portal-card .card-enter .arrow{transition:transform .2s ease;} .portal-card:hover .card-enter .arrow{transform:translateX(6px);} .portal-card .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;position:relative;z-index:1;} /* 2026-08-10 - 칩이 실제 링크가 되면서(이전엔 아무 동작 없는 ) 클릭 가능함을 알 수 있도록 호버 시 배경을 밝게. position:relative + z-index:1은 카드 전체 클릭 영역(bindPortalCardLinks()) 보다 칩이 항상 위에 있어야 칩을 눌렀을 때 카드 전체 이동이 아니라 칩 자신의 링크로 정확히 이동하기 때문(둘 다 같은 문서 흐름상 자연스럽게 칩이 위지만 명시적으로 고정). */ .portal-card .chips a{font-size:11.5px;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:999px;color:rgba(255,255,255,.85);transition:background .15s ease;} .portal-card .chips a:hover{background:rgba(255,255,255,.26);} .portal-foot{position:relative;z-index:2;padding:26px 0 34px;} .portal-foot .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;} .portal-ticker{display:flex;gap:22px;font-size:13px;color:rgba(255,255,255,.75);flex-wrap:wrap;} .portal-ticker b{color:var(--gold-light);font-weight:700;margin-right:6px;} .portal-copy{font-size:12px;color:rgba(255,255,255,.45);} /* ---------- Cards / Grid ---------- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .bento{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:18px;} .bento .b-large{grid-row:span 2;} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;transition:box-shadow .2s ease, transform .2s ease;} .card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);} .card .card-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff;} .card h3{font-size:20px;margin:0 0 8px;} .card p{font-size:15.5px;color:var(--ink-500);margin:0 0 16px;} .card .tag-links{display:flex;gap:14px;flex-wrap:wrap;} .card .tag-links a{font-size:14px;font-weight:700;color:var(--navy-700);border-bottom:1px solid currentColor;} .biz-page .card .tag-links a{color:var(--orange-600-text);} /* 기관(INST) 메인의 3장짜리 grid-3 카드 섹션(institution-main.html #business "주요 사업", #kospole-intro "한국스포츠레저(주)를 소개합니다")과 목록형 섹션(#recruit "진행중인 채용공고", .post-list) - 가장 좁은 모바일(≤480px, 프로젝트 공통 브레이크포인트, .news-swipe-arrow 등과 동일 기준)에서 항목이 2열로 줄지어 두 줄로 보이거나 세로로 계속 나열되던 것을, 1장씩 화면 폭 꽉 차게 보여주고 좌우 스와이프 + 상단 우측 화살표 버튼으로 넘기도록 개편(2026-08-29, 여러 섹션에 동일 요청이 있어 공용 클래스로 일반화). `.card-swipe-grid` 바로 아래 자식이면 `.grid-3`의 `.card`든 `.post-list`의 `
  • `든 종류에 상관없이 전부 1장씩 넘어가도록 `> *`로 범용 선택자를 썼다 - 앞으로 같은 종류의 3열 카드/목록에 이 스와이프가 또 필요해지면 마크업에 이 클래스 3종만 추가하면 된다. main.js의 bindCardSwipeCarousel() 참고. */ .card-swipe-wrap{position:relative;} .card-swipe-nav{display:none;} @media(max-width:480px){ /* ⚠️ 2026-08-29(후속) - 처음엔 그냥 `.card-swipe-grid{display:flex;...}`로 썼는데, "공식 채널" 섹션(#sns)에서 실제로는 계속 세로로 쭉 나열되는(스와이프 안 됨) 회귀가 있었다. 원인은 specificity가 같은 두 규칙(`.card-swipe-grid{display:flex}` vs 기존 `.onair-feature-grid{display:grid}`)이 부딪혔을 때, `.onair-feature-grid`가 미디어쿼리 없이 파일 뒤쪽(709번째 줄 부근)에 있어 캐스케이드상 이 규칙보다 나중에 적용되어 이겨버린 것 - 미디어쿼리 안에 있다고 항상 우선하는 게 아니라, specificity가 같으면 그냥 "파일에서 더 늦게 나오는 규칙"이 이긴다는 점을 여기서 놓쳤었다. 앞으로 어떤 페이지의 어떤 그리드 클래스와 조합해도(파일에서의 선언 순서와 무관하게) 항상 이기도록, 처음부터 `.card-swipe-wrap` 조상까지 selector에 포함해 specificity를 한 단계 더 올려둔다. */ .card-swipe-wrap .card-swipe-grid{ display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;gap:16px;scrollbar-width:none;-ms-overflow-style:none; } .card-swipe-wrap .card-swipe-grid::-webkit-scrollbar{display:none;} .card-swipe-wrap .card-swipe-grid > *{flex:0 0 100%;width:100%;scroll-snap-align:start;} /* .post-list(목록형)는 원래 카드 테두리가 없는 li라, 1장씩 슬라이드로 보일 때는 카드처럼 테두리를 둘러 다른 두 카드 그리드 섹션과 시각적으로 어색하지 않게 맞춘다. ⚠️ 선택자에 .card-swipe-wrap까지 포함해 specificity를 일부러 올림 - 그냥 `.card-swipe-grid.post-list > li`만 쓰면 `.post-list li:last-child{border-bottom:none}` (styles.css 다른 곳의 기존 규칙)과 specificity가 같아져서 파일상 더 뒤에 있는 그 규칙이 이겨버려, 항목이 1개뿐이거나 마지막 항목일 때 아래쪽 테두리만 사라져 카드가 3면만 있는 것처럼 깨져 보인다. 2026-08-29(후속) - 처음엔 원래 .post-list li의 가로 1행 배치(배지-제목-날짜가 한 줄에 나란히, `.post-list li{display:flex;align-items:center}`)를 그대로 뒀는데, 실제 화면에서 확인해보니 카드 폭 안에 세 가지가 다 들어가지 못해 제목이 "2026년 한..."처럼 심하게 잘리고 날짜는 카드 상단 우측의 스와이프 화살표 버튼과 겹쳐 보이는 문제가 있었다(사용자 스크린샷으로 확인). `flex-direction:column`으로 세로 배치로 바꿔 배지→제목→날짜 순서로 쌓이게 하면(DOM 순서 그대로라 마크업 변경 불필요) 자연스럽게 "날짜가 카드 하단에 오게" 되고, 화살표와 겹칠 요소도 사라진다. 박스 자체도 패딩을 늘려 더 커 보이게 했다. */ .card-swipe-wrap .card-swipe-grid.post-list > li{ display:flex;flex-direction:column;align-items:flex-start;gap:8px; border:1px solid var(--line);border-radius:var(--radius-md);padding:22px 20px 20px; } /* 제목이 잘리지 않고 다 보이도록(요청사항 "내용이 많이 보이게") - 기존 .post-list a는 한 줄 말줄임(nowrap+ellipsis)이 기본인데, 여기서는 그걸 걷어내고 폭 전체로 줄바꿈되게 한다. specificity는 `.card-swipe-wrap .card-swipe-grid.post-list > li a`(클래스 3+타입 2)로 기존 `.post-list a`(클래스 1+타입 1)보다 훨씬 높아 항상 이긴다. */ .card-swipe-wrap .card-swipe-grid.post-list > li a{ white-space:normal;overflow:visible;text-overflow:clip;align-self:stretch; } /* 2026-08-29(후속2, 후속3) - "NOTICE" 섹션(.notice-list)의 첫 번째 글에는 원래 강조용 스타일 (연한 배경색 + 굵은 남색 왼쪽 테두리 + 가로 배치 + 19px 굵은 제목, `.post-list.notice-list li:first-child`/`...li:first-child a`)이 따로 있었는데, 스와이프 모드에서는 모든 글이 동등하게 한 장씩 넘어가는 카드라 첫 글만 다른 모양이면 오히려 어색하다. ⚠️ 처음엔 background/margin-bottom만 재정의했는데, 실제 화면에서 확인해보니(사용자 스크린샷) 배지·화살표가 나란히 있고 글자가 가운데 정렬되는 등 정작 레이아웃은 옛 스타일이 그대로 남아있었다 - 원인은 `.post-list.notice-list li:first-child`(클래스 2+가상클래스 1)와 위쪽 공용 규칙 `.card-swipe-wrap .card-swipe-grid.post-list > li`(클래스 3+타입 1)의 specificity가 **똑같이 (0,3,1)이라 여기서는 안 이겼던 것**(recruit-list 쪽 경쟁 상대였던 `.post-list li:last-child`는 클래스 1개뿐이라 안전했지만, notice 쪽은 첫 글 전용 규칙이 클래스가 하나 더 많아 우연히 동점이 됐다) - `a` 태그 쪽(`...li:first-child a`, 19px 굵게)도 마찬가지로 동점이었다. 그래서 이번엔 아예 필요한 값을 전부 이 안에 다시 명시해 어떤 상황에서도(파일 순서와 무관하게, specificity로 확실히) 다른 카드들과 완전히 같은 모양이 되도록 했다. */ .card-swipe-wrap .card-swipe-grid.notice-list > li:first-child{ display:flex;flex-direction:column;align-items:flex-start;gap:8px; background:#fff;border:1px solid var(--line);border-radius:var(--radius-md); padding:22px 20px 20px;margin-bottom:0; } .card-swipe-wrap .card-swipe-grid.notice-list > li:first-child a{ font-size:16.5px;font-weight:400;white-space:normal; } .card-swipe-nav{ display:flex;gap:6px;position:absolute;top:14px;right:14px;z-index:2; } .card-swipe-arrow{ display:flex;align-items:center;justify-content:center;width:32px;height:32px; border:none;padding:0;border-radius:50%;background:rgba(255,255,255,.94); box-shadow:var(--shadow-sm);color:var(--navy-700);font-size:18px;font-weight:800; line-height:1;cursor:pointer;transition:opacity .2s ease,filter .15s ease; } .card-swipe-arrow:hover{filter:brightness(0.96);} .card-swipe-wrap.at-start .card-swipe-prev{opacity:.35;pointer-events:none;} .card-swipe-wrap.at-end .card-swipe-next{opacity:.35;pointer-events:none;} } .icon-blue{background:linear-gradient(135deg,var(--navy-700),var(--navy-900));} .icon-gold{background:linear-gradient(135deg,var(--gold),#A9821D);} .icon-red{background:linear-gradient(135deg,var(--red-600),var(--red-700));} .icon-orange{background:linear-gradient(135deg,var(--orange-500),var(--red-600));} /* 2026-08-02 - icon-red/icon-orange는 기관/사업 공용 클래스라(예: 기관의 "신고센터" 카드는 경고 의미로 빨강을 그대로 써야 함) 기본 규칙은 손대지 않고, 사업(BIZ) 페이지에서만 두 아이콘 모두 주황 계열로 보이도록 .biz-page 스코프 오버라이드를 추가한다(서로 다른 진하기로 구분). */ .biz-page .icon-red{background:linear-gradient(135deg,var(--orange-500),var(--orange-600));} .biz-page .icon-orange{background:linear-gradient(135deg,var(--orange-400),var(--orange-500));} /* ---------- Notice board tabs ---------- */ .board-panel{background:var(--bg-soft);border-radius:var(--radius-lg);padding:32px;} .tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;} .tabs button{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13.5px;color:var(--ink-500);} /* 2026-08-19 - BIZ 홈페이지 개편으로 공지사항 탭/배지가 더 이상 사이드바형이 아니라 NEWS 카드 그리드 섹션(business-main.html)에서 처음으로 이 일반(가로형) .tabs를 실제로 사용하게 됐다. 기존에 있던 .biz-page 전용 주황색 오버라이드는 그 사이드바형 디자인 전용이었고 이제 쓰는 곳이 없어져 삭제 - 기본값(남색)을 그대로 쓴다. */ .tabs button.active{background:var(--navy-800);color:#fff;border-color:var(--navy-800);} .post-list li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line);} .post-list li:last-child{border-bottom:none;} .post-list .badge{flex-shrink:0;font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:6px;background:var(--navy-800);color:#fff;} .post-list .badge.notice{background:var(--gold);color:#3b2c00;} /* 2026-08-10 버그수정 - min-width:0 누락으로 좁은 화면(갤럭시 폴드6를 접었을 때 등)에서 이 글자가 말줄임(ellipsis) 처리되지 않고 원래 길이 그대로 카드/부모 요소를 화면 밖으로 밀어내던 문제(사용자 신고 - "진행중인 채용공고" 박스가 화면 우측 밖으로 사라져 보임). flex 자식은 기본값 min-width:auto 때문에 overflow:hidden이 있어도 콘텐츠의 최소 폭(말줄임 전 원래 텍스트 폭) 밑으로는 스스로 줄어들지 않는 게 원인 - min-width:0으로 그 기본값을 꺼줘야 실제로 줄어들면서 말줄임이 동작한다. */ .post-list a{flex:1;min-width:0;font-size:16.5px;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .post-list .date{flex-shrink:0;font-size:14px;color:var(--ink-500);} .tab-panel{display:none;} .tab-panel.active{display:block;} /* ---------- Notice panel (Phase 5, 2026-08-02 - KOREATECH NOTICE 참고 재설계) ---------- 좌측 사이드바(타이틀+설명+세로 탭) + 우측 콘텐츠(목록). 세로 탭은 기존 .tabs/.tab-panel과 동일한 마크업 계약을 쓰므로 main.js의 bindTabs()/board-api.js는 변경 없이 재사용된다. */ /* 테두리 - 2026-08-13, 한국기술교육대학교(koreatech.ac.kr) NOTICE 위젯 벤치마킹(사용자 제시 참고 이미지) 참고해 기존의 얇은 직선 테두리 대신 카드처럼 떠 보이는 둥근 테두리+옅은 그림자로 교체(사이트에서 이미 같은 용도로 쓰는 --radius-lg/--shadow-sm 토큰 재사용 - .sns-col 등과 동일한 "카드" 느낌). overflow:hidden이 이미 있어 안쪽 남색 사이드바(직사각형 그라디언트)도 둥근 모서리에 맞춰 자동으로 잘린다. */ /* 2026-08-19 - 이 사이드바형 NOTICE 위젯은 이제 institution-main.html(기관 홈페이지)만 쓴다. business-main.html(BIZ 홈페이지)은 KISTA 벤치마킹 개편으로 아래 "NEWS 카드 그리드" 섹션으로 교체되어 더 이상 이 마크업을 쓰지 않으므로, 여기 있던 .biz-page 전용 주황색 오버라이드들은 전부 삭제(institution-main.html이 쓰는 기본값 규칙 자체는 그대로 유지). */ .notice-panel{display:flex;gap:0;padding:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);} .notice-sidebar{flex:0 0 340px;background:linear-gradient(160deg,var(--navy-800),var(--navy-900));color:#fff;padding:40px 34px;display:flex;flex-direction:column;} .notice-sidebar-brand{font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--gold-light);} .notice-sidebar-title{font-size:34px;font-weight:800;margin:8px 0 16px;letter-spacing:.02em;} .notice-sidebar-desc{font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 24px;} .notice-sidebar .tabs.tabs-vertical{display:flex;flex-direction:column;gap:2px;margin:0;flex-wrap:nowrap;margin-top:auto;} .tabs.tabs-vertical button{text-align:left;padding:13px 16px;border-radius:8px;background:transparent;border:none;font-size:16.5px;font-weight:700;color:rgba(255,255,255,.62);border-left:3px solid transparent;} .tabs.tabs-vertical button:hover{color:#fff;} .tabs.tabs-vertical button.active{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--gold);} .notice-content{flex:1;padding:40px 44px;position:relative;min-width:0;} .post-list.notice-list{margin-bottom:8px;} .post-list.notice-list li:first-child{display:flex;align-items:center;gap:16px;padding:20px 22px;margin-bottom:6px;border-bottom:none;background:var(--bg-soft);border-radius:var(--radius-md);border-left:4px solid var(--navy-800);} .post-list.notice-list li:first-child a{font-size:19px;font-weight:700;white-space:normal;} .notice-more-btn{position:absolute;right:34px;bottom:28px;width:44px;height:44px;border-radius:50%;background:var(--navy-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;font-weight:400;} .notice-more-btn:hover{background:var(--navy-900);} /* 2026-08-19 - BIZ 홈페이지 NEWS(공지사항·이벤트) 카드 그리드(KISTA "전략원 새소식" 벤치마킹). board-api.js가 `.post-list[data-panel="..."]` 셀렉터로 실 데이터를 그대로
  • ......
    • 형태로 주입하므로 그 계약은 절대 바꾸지 않고, news-card-grid 클래스를 추가로 얹어 그리드/카드 모양만 새로 정의한다(notice-list 클래스는 일부러 붙이지 않아 위 사이드바형 li:first-child 강조 규칙과 충돌하지 않는다). */ .news-board-panel{background:#fff;} .news-board-panel .tabs{margin-bottom:22px;} .news-card-grid.tab-panel.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;} .news-card-grid li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);transition:box-shadow .18s ease, transform .18s ease;} .news-card-grid li:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);} .news-card-grid a{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.4;color:var(--ink-900);} .news-card-grid .date{margin-top:auto;padding-top:2px;} .news-card-grid .post-empty{grid-column:1/-1;padding:24px;text-align:center;background:none;border:none;} /* 2026-08-19(후속) - 캠페인(CAMPAIGN_TOTO)/이벤트(EVENT_BIZ) 카드용 썸네일. board-api.js가 badge.thumb인 보드에서만 이 을 만들어 넣으므로 공지사항/언론보도/당첨자 결과발표 카드에는 애초에 마크업 자체가 없다(레이아웃은 li의 flex-column 순서를 그대로 따름). */ .news-card-grid .news-card-thumb{display:block;width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--bg-soft);} .news-card-grid .news-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;} .news-card-grid .news-card-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--ink-500);font-size:12.5px;} @media(max-width:520px){.news-card-grid.tab-panel.active{grid-template-columns:1fr 1fr;}} /* 2026-08-19(후속5) - 폴드6 "펼친" 화면(~673px, 접은 화면과는 별개의 화면 상태)처럼 데스크톱 보다는 좁지만 아래 480px 스와이프 카드뷰를 적용하기엔 넓은 구간에서, 항목별(공지사항/ 언론보도/캠페인/이벤트/당첨자 결과발표 각 탭)에 최대 10개까지 나오던 게시글을 4개로 줄여 화면이 지저분해 보이지 않게 함(사용자 확인: 기준 폭 760px 이하, 이 사이트에 이미 있는 브레이크포인트 재사용). 481px 이상으로 하한을 둬서 아래 480px 구간(카드 2개씩 좌우 스와이프)과 겹치지 않게 분리 - "접은 화면"은 기존 스와이프 방식을 그대로 유지하고, 이 "펼친 화면" 구간만 별도로 "그냥 4개까지만 보이는 정적 목록"으로 처리한다. board-api.js가 최대 10개(all2는 6개)까지 실제로
  • 를 그려 넣은 뒤, 여기서 5번째부터는 CSS로 숨기는 방식이라 API 호출/렌더링 로직은 전혀 건드리지 않았다(화면 폭이 바뀌면 자동으로 다시 보이거나 숨겨짐 - JS 재실행 불필요). */ @media(min-width:481px) and (max-width:760px){ .news-card-grid li:nth-child(n+5){display:none;} } /* 2026-08-19(후속3) - 폴드6 접은 화면(약 344px) 같은 좁은 모바일에서 ①탭 6개가 2줄로 밀리는 문제, ②카드가 한 화면에 다 몰려 지저분해 보이는 문제 개선(사용자 요청). ≤480px에서만 적용 - 그보다 넓은 화면은 위 520px 규칙(2열 그리드, 페이지 전체 스크롤)을 그대로 유지한다. */ @media(max-width:480px){ /* 탭 버튼 - 줄바꿈 대신 한 줄 + 손가락 스와이프(가로 스크롤). mask-image로 오른쪽 끝을 페이드시켜(2026-08-20 추가) 스와이프해보지 않아도 더 있다는 걸 알 수 있게 함 - 아래 .kospole-scroll-fade-x 공통 규칙 참고. */ .news-board-panel .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;margin-bottom:16px; mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);} .news-board-panel .tabs::-webkit-scrollbar{display:none;} .news-board-panel .tabs button{flex:0 0 auto;} /* 2026-08-21 - FAQ 페이지(faq-list.html) 대분류 탭(경기/게임·결제구매·적중/환급·기타)이 좁은 모바일에서 4개가 3+1로 줄바뀜되는 문제 - 위 news-board-panel .tabs와 동일한 패턴 (한 줄 + 가로 스크롤 + 오른쪽 페이드 힌트)으로 통일. */ .faq-board .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px; mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);} .faq-board .tabs::-webkit-scrollbar{display:none;} .faq-board .tabs button{flex:0 0 auto;} /* 카드 영역 - grid(전체 노출) 대신 가로 스크롤 스냅으로 전환해 한 화면에 카드 2장만 보이게 하고, 좌우 화살표(.news-swipe-arrow, main.js의 bindNewsCardSwipe())로 2장씩 넘어가게 함. board-api.js가 채우는
  • 구조/클래스는 그대로 - display만 grid→flex로 바뀐다. */ .news-panels-wrap{position:relative;} .news-card-grid.tab-panel.active{ display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px; } .news-card-grid.tab-panel.active::-webkit-scrollbar{display:none;} .news-card-grid.tab-panel.active li{flex:0 0 calc(50% - 6px);min-width:0;scroll-snap-align:start;} .news-card-grid .post-empty{flex:0 0 100%;} .news-swipe-arrow{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;padding:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:var(--shadow-sm);color:var(--navy-700);font-size:16px;font-weight:800;line-height:1;cursor:pointer;transition:opacity .2s ease,filter .15s ease;z-index:2;} .news-swipe-arrow:hover{filter:brightness(0.96);} .news-swipe-arrow-left{left:-6px;} .news-swipe-arrow-right{right:-6px;} .news-panels-wrap.at-start .news-swipe-arrow-left{opacity:0;pointer-events:none;} .news-panels-wrap.at-end .news-swipe-arrow-right{opacity:0;pointer-events:none;} } @media(min-width:481px){.news-swipe-arrow{display:none;}} .biz-page .notice-more-btn:hover{background:var(--orange-700);} /* ---------- SNS section (Phase 5, 2026-08-02 신설 / 2026-08-02·2026-08-02 2차 실 링크·카드 레이아웃 재설계) ---------- 플랫폼(블로그/유튜브/인스타그램/페이스북) 4개가 위→아래로 전체폭 카드로 쌓이고, 각 카드 안은 한국기술교육대학교 "YOUTUBE" 카드 참고 - 대형 카드 1개(.sns-feature) + 그 아래 3개짜리 카드 그리드(.sns-card-grid) + "더보기" 버튼을 눌러야 나오는 5번째 카드(.sns-more-extra)로 구성된다. 네이버 블로그·인스타그램은 플랫폼 정책상(비공개 API·차단 도메인) 이 서버가 최신 글을 직접 가져올 수 없어, 관리자가 등록한 실제 게시물 URL을 그대로 노출한다(sns-api.js가 /api/public/sns-links를 불러와 아래 정적 폴백을 덮어씀 - board-api.js와 동일한 패턴). 유튜브는 공개 oEmbed API로 확보한 실제 제목·썸네일이 표시된다. */ .sns-panel{position:relative;padding:0 58px;} .sns-carousel-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;} .sns-carousel-track::-webkit-scrollbar{display:none;} .sns-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-900);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.08);} .sns-carousel-arrow.prev{left:0;} .sns-carousel-arrow.next{right:0;} .sns-carousel-arrow:hover{background:var(--bg-soft);} .sns-col{flex:0 0 340px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 22px;} .sns-col-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;} .sns-col-head b{font-size:20px;font-weight:800;letter-spacing:.02em;color:var(--ink-900);} .sns-icon-btn{flex-shrink:0;width:46px;height:46px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;} .sns-icon-btn svg{width:22px;height:22px;} .sns-icon-btn.sns-icon-blog{background:#1EC800;} .sns-icon-btn.sns-icon-youtube{background:#E63946;} .sns-icon-btn.sns-icon-instagram{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);} .sns-icon-btn.sns-icon-facebook{background:#1877F2;} .sns-icon-btn:hover{filter:brightness(1.08);} .sns-feature{display:block;margin-bottom:20px;} .sns-feature-thumb{display:block;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg-soft);} .sns-feature-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--ink-500);font-size:13px;} /* kospoleSnsThumbHtml()이 관리자 등록 썸네일을 로 채워 넣을 때(2026-08-13, 네이버 블로그 등 핫링크 방지 CDN 대응) 컨테이너를 꽉 채우도록 - 정적 폴백(background-image 방식)은 그대로 유지되므로 위 background-size/position 규칙과 공존한다. */ .sns-feature-thumb img,.sns-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;} .sns-feature-title{display:block;margin-top:12px;font-size:17px;font-weight:800;color:var(--ink-900);line-height:1.45;} .sns-feature:hover .sns-feature-title{color:var(--navy-800);} .sns-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .sns-card{display:block;} .sns-card-thumb{display:block;aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg-soft);} .sns-card-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--ink-500);font-size:12px;} .sns-card-title{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-700);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .sns-card:hover .sns-card-title{color:var(--navy-800);} .sns-more-btn{display:block;margin:18px auto 0;padding:9px 24px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700;color:var(--ink-700);cursor:pointer;} .sns-more-btn:hover{background:var(--bg-soft);} .sns-more-extra{margin-top:20px;} .sns-more-extra[hidden]{display:none;} .sns-more-extra .sns-card-thumb{aspect-ratio:16/9;} .sns-empty{padding:36px 0;text-align:center;font-size:13.5px;color:var(--ink-500);} .sns-empty a{font-weight:700;color:var(--navy-700);} .sns-disclaimer{margin:18px 0 0;font-size:12px;color:var(--ink-500);} /* ---------- 온에어(onair.html, 2026-08-10 신설) - KEPCO 홍보센터 뉴스룸 벤치마킹 ---------- 공지사항(카드형)/보도자료(좌1+우4)/소셜미디어·홍보자료(사진+제목 카드, .sns-feature 재사용) 4개 섹션 공용 스타일. */ .onair-section{margin-bottom:56px;} .onair-section:last-child{margin-bottom:0;} .onair-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--ink-900);} /* 2026-08-13 - 메인화면 섹션 제목(.section-head h2)과 "동일한 크기로" 통일(사용자 명시적 요청) */ .onair-section-head h2{margin:0;font-size:34px;font-weight:800;color:var(--ink-900);} .onair-more{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:700;color:var(--ink-700);flex-shrink:0;} .onair-more svg{width:15px;height:15px;} .onair-more:hover{color:var(--navy-800);} .biz-page .onair-more:hover{color:var(--orange-600-text);} .onair-empty{grid-column:1/-1;padding:44px 0;text-align:center;font-size:15px;color:var(--ink-500);background:var(--bg-soft);border-radius:var(--radius-md);} /* 1) 공지사항 - 3열 카드. 2026-08-13 개편(사용자 제시 참고 이미지 - KEPCO 뉴스룸 벤치마킹): 기존엔 카드(#fff)와 바로 뒤 페이지 배경(역시 흰색)이 같은 색이라 테두리(--line, 아주 옅은 회색)만으로 카드 형태를 구분해야 했는데 그 테두리마저 옅어 카드가 도드라져 보이지 않는다는 지적 - 그리드 컨테이너 자체에 옅은 회색 캔버스(--bg-soft)를 깔아 흰 카드와의 명암 대비를 확보하고, 카드 테두리도 더 진한 회색(#D3D8E0, 기존 --line:#E6E8ED보다 뚜렷함)+1.5px로 강화했다. 세로폭도 패딩을 늘려 참고 이미지처럼 여유 있게 키웠다. */ .onair-notice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;background:var(--bg-soft);padding:28px;border-radius:var(--radius-lg);} .onair-notice-card{display:block;padding:32px 28px;border:1.5px solid #D3D8E0;border-radius:var(--radius-lg);background:#fff;transition:box-shadow .15s ease,transform .15s ease;} .onair-notice-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);} .onair-notice-tag{display:inline-block;font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:6px;background:var(--gold-light);color:#5a4400;margin-bottom:14px;} .onair-notice-title{font-size:17px;font-weight:700;color:var(--ink-900);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;} .onair-notice-card:hover .onair-notice-title{color:var(--navy-800);} .biz-page .onair-notice-card:hover .onair-notice-title{color:var(--orange-600-text);} .onair-notice-date{margin-top:20px;font-size:14px;color:var(--ink-500);} /* 2) 보도자료 - 좌측 큰 카드 1개 + 우측 작은 목록 4개 */ .onair-press-layout{display:flex;gap:36px;align-items:flex-start;} .onair-press-main{display:block;flex:1 1 0;min-width:0;} .onair-press-main-thumb{aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);} .onair-press-main-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease;} .onair-press-main:hover .onair-press-main-thumb img{transform:scale(1.04);} .onair-press-main-title{margin-top:16px;font-size:20px;font-weight:800;color:var(--ink-900);line-height:1.5;} .onair-press-main:hover .onair-press-main-title{color:var(--navy-800);} .biz-page .onair-press-main:hover .onair-press-main-title{color:var(--orange-600-text);} .onair-press-main-date{margin-top:10px;font-size:14.5px;color:var(--ink-500);} .onair-press-list{flex:1 1 0;min-width:0;display:flex;flex-direction:column;} .onair-press-list-item{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);} .onair-press-list-item:first-child{padding-top:0;} .onair-press-list-item:last-child{border-bottom:none;padding-bottom:0;} /* 2026-08-13 - 우측 목록 썸네일이 너무 작아 시원스럽지 않다는 지적에 따라 기존(84px)의 정확히 2배(168px)로 확대 */ .onair-press-list-thumb{flex:0 0 168px;width:168px;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft);} .onair-press-list-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .onair-press-list-body{flex:1;min-width:0;} .onair-press-list-title{font-size:16.5px;font-weight:700;color:var(--ink-900);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .onair-press-list-item:hover .onair-press-list-title{color:var(--navy-800);} .biz-page .onair-press-list-item:hover .onair-press-list-title{color:var(--orange-600-text);} .onair-press-list-date{margin-top:8px;font-size:14px;color:var(--ink-500);} .onair-thumb-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--ink-500);font-size:13.5px;background:var(--bg-soft);} /* 3)/4) 소셜미디어·홍보자료 - .sns-feature(사진+제목)를 3열 그리드로 재사용 */ .onair-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .onair-feature-grid .sns-feature{margin-bottom:0;} /* institution-main.html "공식 채널" 섹션(2026-08-13, 온에어와 레이아웃 맞바꾸기 이후) 전용 modifier - .onair-feature-grid에 이 클래스를 함께 붙이면 4개 플랫폼(유튜브/블로그/인스타그램/페이스북) 카드를 전부 4열로 보여준다. onair.html의 홍보자료(3열, PROMO_VIDEO 최대 3건)는 이 클래스가 없어 그대로 3열 유지 - 반응형 축소값도 아래 900px/640px 블록에 각각 명시(우연한 캐스케이드 순서에 기대지 않음). 2026-08-29 - 이 modifier에 `.card-swipe-grid`도 함께 붙여, ≤480px(422번째 줄 근처 공용 `.card-swipe-*` 규칙 참고)에서는 아래 640px 규칙의 세로 1열 나열 대신 1장씩 스와이프+상단 우측 화살표로 넘기도록 개편(institution-main.html #sns 참고). ⚠️ 첫 시도에서 실제로 계속 세로로 나열되는 회귀가 있었다 - `.card-swipe-grid{display:flex}`와 바로 위 `.onair-feature-grid{display:grid}`의 specificity가 우연히 같았는데, 후자가 미디어쿼리 없이 이 파일에서 더 뒤에 있어(캐스케이드는 "미디어쿼리 안이라고 우선"이 아니라 "파일에서 더 늦게 나온 규칙이 승리") grid가 그대로 이겨버렸던 것 - `.card-swipe-*` 쪽 selector에 `.card-swipe-wrap` 조상을 포함시켜 specificity를 한 단계 더 올려 파일 순서와 무관하게 항상 이기도록 고쳤다. */ .sns-feature-grid-4{grid-template-columns:repeat(4,1fr);} .onair-feature-badge{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:13px;font-weight:800;color:var(--ink-500);letter-spacing:.02em;} .onair-feature-badge-icon{color:#E63946;font-size:9px;} @media (max-width:900px){ .onair-notice-grid{grid-template-columns:1fr 1fr;} .onair-press-layout{flex-direction:column;} .onair-feature-grid{grid-template-columns:1fr 1fr;} .sns-feature-grid-4{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .onair-section-head h2{font-size:19px;} .onair-notice-grid{grid-template-columns:1fr;} .sns-feature-grid-4{grid-template-columns:1fr;} .onair-feature-grid{grid-template-columns:1fr;} .onair-press-list-thumb{flex-basis:128px;width:128px;} } /* ---------- press-list.html(썸네일+제목 목록, 2026-08-24 신설) ---------- 온에어 페이지 "보도자료" 섹션(.onair-press-list-item)과 같은 룩(썸네일 168px 좌측 + 제목/날짜 우측, 하단 구분선)을 표준 게시판 목록(검색+페이지네이션 포함) 크기로 그대로 옮겼다. 사용자 요청("온에어 페이지 보도자료 섹션과 같이") - 클래스는 재사용하지 않고 새로 뒀다(.onair-press-list-*는 온에어 위젯 전용 flex 레이아웃 컨텍스트에 맞춰져 있어 독립된 목록 페이지에 그대로 쓰기엔 폭 계산이 다름). */ .press-list-body{display:flex;flex-direction:column;} .press-list-row{display:flex;align-items:center;gap:20px;padding:22px 4px;border-bottom:1px solid var(--line);color:inherit;} .press-list-row:first-child{padding-top:0;} .press-list-thumb{flex:0 0 168px;width:168px;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft);} /* 2026-08-25 수정 - object-fit:cover였을 때 세로로 긴 포스터/캡처 이미지의 위아래(또는 글자)가 잘려 확대되어 보이던 문제(사용자 신고, 스포츠토토 25주년 목록). contain으로 바꿔 이미지 전체가 박스 안에 항상 다 보이도록 함(비율이 안 맞으면 위아래/좌우 여백은 생길 수 있음). */ .press-list-thumb img{width:100%;height:100%;object-fit:contain;display:block;} .press-thumb-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--ink-500);font-size:13.5px;background:var(--bg-soft);} .press-list-row-body{flex:1;min-width:0;} .press-list-row-title{font-size:17px;font-weight:700;color:var(--ink-900);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .press-list-row:hover .press-list-row-title{color:var(--navy-800);} .biz-page .press-list-row:hover .press-list-row-title{color:var(--orange-600-text);} .press-list-row-date{margin-top:8px;font-size:14px;color:var(--ink-500);} @media (max-width:640px){ .press-list-row{gap:14px;padding:16px 0;} .press-list-thumb{flex-basis:104px;width:104px;} .press-list-row-title{font-size:15px;-webkit-line-clamp:3;} } /* press-chapter-tabs(2026-08-25 신설, 2026-08-26 육각형 허니콤 디자인으로 재구성 - 사용자가 제공한 디자인 캔버스 history.dc.html 반영) - press-list.html의 CHAPTER_DEFS가 있는 게시판 (스포츠토토 25주년 등)에서 연도대별 "장(챕터)" 목차를 지그재그로 겹치는 육각형 탭으로 보여줌. 원본 캔버스는 960×420 고정 캔버스에 5개 육각형을 절대좌표로 배치한 정적 다이어그램이었으나, 실제로는 클릭해서 목록을 필터링하는 탭(data-chapter, applyChapter())이라 절대좌표 대신 flex + 음수 margin(겹침)・margin-top(지그재그)으로 반응형에 가깝게 재현했다. 겹침/지그재그 비율은 원본 좌표(육각형 220×190, 좌표 간격 155px→겹침 65px, 위/아래 줄 간격 135px)에서 그대로 계산해 옮김(65/220≈29.5%, 135/190≈71%). 문서 순서대로 뒤 요소가 앞 요소 위에 자연스럽게 그려지는 것도 원본의 레이어 순서(3이 2 위, 4가 3 위, 5가 4 위)와 동일하다. */ .press-chapter-tabs{display:flex;align-items:flex-start;flex-wrap:nowrap;margin:4px 0 40px;padding:6px 0 90px;} .press-chapter-tab{ position:relative;flex:0 0 208px;width:208px;height:180px;margin-left:-61px; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0% 50%); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; border:none;cursor:pointer;color:#fff;text-align:center; box-shadow:0 12px 22px rgba(0,0,0,.32); transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; } .press-chapter-tab:first-child{margin-left:0;} .press-chapter-tab:nth-child(even){margin-top:128px;} .press-chapter-tab-1{background:linear-gradient(135deg,#7a4fc0 0%,#7a4fc0 32%,#5a3aa0 32%,#5a3aa0 100%);} .press-chapter-tab-2{background:linear-gradient(135deg,#4c5cc8 0%,#4c5cc8 32%,#3945a8 32%,#3945a8 100%);} .press-chapter-tab-3{background:linear-gradient(135deg,#3f74cf 0%,#3f74cf 32%,#2f5cb8 32%,#2f5cb8 100%);} .press-chapter-tab-4{background:linear-gradient(135deg,#3390c9 0%,#3390c9 32%,#2678b0 32%,#2678b0 100%);} .press-chapter-tab-5{background:linear-gradient(135deg,#2fa8ad 0%,#2fa8ad 32%,#218e93 32%,#218e93 100%);} .press-chapter-tab:hover{transform:translateY(-5px);filter:brightness(1.08);} .press-chapter-tab.active{transform:translateY(-9px) scale(1.035);filter:brightness(1.16);box-shadow:0 18px 32px rgba(0,0,0,.42);z-index:2;} .press-chapter-icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .press-chapter-icon svg{width:21px;height:21px;} .press-chapter-no{font-size:12.5px;opacity:.9;} .press-chapter-title{font-size:20px;font-weight:800;line-height:1.25;padding:0 10px;} .press-chapter-years{font-size:11.5px;opacity:.85;} @media (max-width:820px){ /* 좁은 화면에서는 육각형/지그재그 비율은 그대로 유지한 채 크기만 줄이고, 이 세션에서 이미 확립한 관례(FAQ 대분류 탭·게시판 페이지네이션 등)와 동일하게 한 줄 가로 스와이프 + 양쪽 페이드 힌트로 전환한다. */ .press-chapter-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; padding:6px 18px 64px;margin:4px -18px 32px; mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%); -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);} .press-chapter-tabs::-webkit-scrollbar{display:none;} .press-chapter-tab{flex:0 0 152px;width:152px;height:131px;margin-left:-45px;} .press-chapter-tab:first-child{margin-left:0;} .press-chapter-tab:nth-child(even){margin-top:93px;} .press-chapter-icon{width:34px;height:34px;} .press-chapter-icon svg{width:16px;height:16px;} .press-chapter-no{font-size:11px;} .press-chapter-title{font-size:15px;padding:0 6px;} .press-chapter-years{font-size:10.5px;} } /* ---------- KOSPOLE 기관소개 이미지 카드 (Phase 5, 2026-08-02) ---------- */ .card.card-photo{padding:0;overflow:hidden;display:block;} .card-photo-thumb{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--bg-soft);} .card-photo-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--ink-500);font-size:13px;} .card-photo-body{padding:22px 24px;} /* ---------- 인재채용 하이라이트 섹션 (2026-08-02, 2026-08-29 "채용절차 안내"/"채용자료실" 카드 삭제 요청으로 .recruit-links(2열)가 없어져 .recruit-list-wrap 하나만 남음 - 그에 맞춰 .recruit-panel도 2열 그리드에서 단일 열로 정리, 이제 쓰는 곳이 없어진 .recruit-links/ .recruit-link-card와 그 반응형 규칙은 함께 삭제) ---------- */ .recruit-panel{display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch;} /* 2026-08-10 - grid 자식도 flex 자식과 마찬가지로 기본값이 min-width:auto라, 자식(.post-list a 등)에 min-width:0을 줘도 이 그리드 칸(.recruit-list-wrap) 자체가 내용의 최소 폭 밑으로 줄어들지 못해 좁은 화면에서 박스 전체가 화면 밖으로 밀려나던 문제(사용자 신고 - "진행중인 채용공고" 박스가 잘려 보임)의 진짜 원인이었다. 그리드 칸에도 min-width:0을 줘야 안쪽 말줄임 처리가 실제로 폭을 줄이는 효과까지 이어진다. */ .recruit-panel > *{min-width:0;} .recruit-list-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:24px 26px;box-shadow:var(--shadow-sm);} .recruit-list-wrap h3{margin:0 0 10px;font-size:18px;} /* ---------- Quick menu bar (BIZ) ---------- */ /* 2026-08-06 - 어두운 통짜 바 디자인이 마음에 안 든다는 요청으로 흰 배경 카드형으로 전면 교체: 카드마다 개별 윤곽선(테두리)을 두르고, 진한 남색 글자로 흰 배경과 뚜렷하게 대비시키며, 호버 시 카드가 살짝 떠오르는(translateY + 그림자) 인터랙션을 추가. 2026-08-06(후속) - "적중확인" 카드만 주황으로 강조하던 것을 다른 항목과 동일하게 되돌리고 (emphasis 규칙 삭제), 카드가 전반적으로 크다는 피드백에 따라 패딩/아이콘/글자 크기를 축소. */ /* 2026-08-19 - BIZ 홈페이지 개편: 사각 박스형(테두리) 퀵메뉴를 히어로 바로 아래로 옮기면서 사용자가 제공한 아이콘 이미지 7개로 교체. 박스 테두리는 없애고 이미지+라벨 텍스트만 남기는 방식으로 확정(사용자 확인) - 아이콘 SVG(.qicon)는 더 이상 쓰지 않아 관련 규칙 삭제. */ /* 2026-08-19(후속2) - 실제 sportstoto.co.kr 캡처(사용자 첨부)처럼 아이콘은 약간 더 작게, 대신 justify-content:center 대신 space-between으로 바꿔 7개가 컨테이너 폭 전체에 가장자리까지 고르게 펼쳐지도록 함(gap은 좁아지지 않도록 최소값으로만 유지 - 화면이 넓을수록 space-between이 알아서 더 벌려준다). 아이콘 자체는 여전히 clamp()로 화면폭에 비례해 스케일(1차 확대분(56px→104px)이 너무 커 보인다는 피드백에 따라 최대값을 82px로 축소). 640px 이하 모바일은 한 줄에 다 안 들어가 줄바꿈되므로 space-between을 쓰면 마지막 줄이 양쪽 끝으로 벌어져 어색해져 center로 되돌린다. */ .quick-bar{background:#fff;padding:34px 0 16px;} .quick-bar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 20px;} .quick-bar a{ display:flex;flex-direction:column;align-items:center;gap:11px; color:var(--navy-800);font-size:15px;font-weight:700;white-space:nowrap; transition:transform .18s ease, opacity .18s ease; } .quick-bar a:hover{transform:translateY(-3px);opacity:.82;} .quick-bar a .qimg{width:clamp(52px, 5.5vw, 82px);height:clamp(52px, 5.5vw, 82px);object-fit:contain;} @media(max-width:640px){ .quick-bar{padding:24px 0 10px;} .quick-bar .wrap{justify-content:center;gap:16px 22px;} .quick-bar a{font-size:13px;} .quick-bar a .qimg{width:clamp(46px, 13vw, 64px);height:clamp(46px, 13vw, 64px);} } /* ---------- Promo strip ---------- */ .promo-strip{border-radius:var(--radius-lg);padding:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;color:#fff;} .promo-strip.inst{background:linear-gradient(120deg,var(--navy-800),var(--navy-600));} .promo-strip.biz{background:linear-gradient(120deg,#4A2A0A,var(--orange-600));} .promo-strip h3{font-size:25px;margin:0 0 6px;} .promo-strip p{margin:0;color:rgba(255,255,255,.78);font-size:15.5px;} /* ---------- Widget (game schedule) ---------- */ .widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);} /* 제목 영역과 하단 목록이 둘 다 흰 배경이라 구분이 잘 안 된다는 지적(2026-08-14) - 주황 계열은 제외해달라는 요청이라(본문 배당률 "+"버튼 등에 이미 주황을 쓰고 있어 헤더까지 주황이면 단조로움) 사이트가 이미 쓰는 남색 계열(--navy-700~900) 그라데이션으로 대비를 줬다. 배경이 짙어진 만큼 제목 글자도 흰색으로 바꿔 가독성을 맞췄다. */ .widget-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:linear-gradient(135deg,var(--navy-700),var(--navy-900));} .widget-head h3{margin:0;font-size:16px;color:#fff;} .match-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line);font-size:13.5px;} .match-row:last-child{border-bottom:none;} .match-row .teams{font-weight:700;} .match-row .odd{display:flex;gap:8px;} .match-row .odd span{background:var(--bg-soft);padding:4px 10px;border-radius:6px;font-weight:700;font-size:12.5px;} /* ---------- BIZ 메인 "이번주 게임일정·배당률" 위젯 - 좌(배당률)/우(게임일정) 2박스(2026-08-13) ---------- /api/public/betman/widget에서 받아온 데이터를 main.js가 이 박스들에 채워 넣는다. 베트맨 원본 화면으로 이동하는 "+" 버튼(.widget-plus)은 좌측은 항상 최신 회차(gmTs)로 갱신되는 동적 링크, 우측은 게임일정 목록 페이지로 가는 고정 링크다. */ .betman-widgets{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .betman-box .widget-head h3{font-size:16px;} /* 좌측 박스 제목 밑 "YYYY년 프로토 승부식 NN회차"(2026-08-14 추가, 실제 최신 회차) */ .betman-round-label{display:block;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--orange-600-text);} /* 2026-08-19 - BIZ 홈페이지에서만 쓰이는 버튼이라(institution-main.html은 이 위젯 자체를 안 씀) 기존 주황 그라데이션을 KISTA 벤치마킹에 맞춰 남색 단색(그라데이션 없음)으로 전환. */ .widget-plus{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--navy-800);color:#fff;font-size:16px;font-weight:800;line-height:1;text-decoration:none;transition:filter .15s ease,transform .15s ease;} .widget-plus:hover{filter:brightness(1.06);transform:translateY(-1px);} .betman-list{min-height:120px;} .betman-empty{padding:36px 24px;text-align:center;color:var(--ink-500);font-size:13.5px;} .betman-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line);font-size:13px;} .betman-row:last-child{border-bottom:none;} .betman-row .league{display:inline-block;font-size:11px;font-weight:700;color:var(--orange-600-text);background:rgba(232,89,12,.08);padding:2px 8px;border-radius:999px;white-space:nowrap;} .betman-row .sched-date{color:var(--ink-500);font-size:12.5px;white-space:nowrap;flex-shrink:0;} /* 우측 게임일정 행 - 회차 배지 + 상품명을 한 덩어리로(데스크톱은 한 줄, 2026-08-14) */ .sched-main{display:inline-flex;align-items:center;gap:8px;min-width:0;} .sched-name{font-weight:700;} /* 회차 배지(.league) 폭이 회차 숫자 자릿수에 따라 달라("109회차"가 "56회차"보다 넓음) 상품명 시작 위치가 행마다 어긋나는 문제(2026-08-14 사용자 지적, 스크린샷 확인) - 배지 폭을 고정해(가장 긴 "YYYY년 NNN회차" 기준 여유있게) 상품명이 항상 같은 위치에서 시작하게 한다. */ .sched-main .league{width:100px;text-align:center;flex-shrink:0;} /* 좌측 배당률 행 - 팀명 줄 위에 메타 정보를 좌(리그명·경기번호)/우(마감일시·경기일시) 두 그룹으로. ⚠️ 폭이 좁아 한 줄에 다 안 들어갈 때 overflow-x:auto(숨겨진 가로 스크롤)로 처리했었는데, 스크롤바가 안 보여서 "경기일시 ... 18:"처럼 글자가 중간에 잘려 보이는 것처럼 오해를 샀다(2026-08-14 재지적) - 대신 flex-wrap:wrap으로 바꿔, 안 들어가면 meta-right(마감일시·경기일시) 그룹이 통째로 다음 줄로 내려가게 한다(개별 날짜 텍스트는 여전히 .meta-text의 white-space:nowrap 덕에 중간에서 끊기지 않음 - 완전한 정보 단위로만 줄바꿈). margin-left:auto로 meta-right를 항상 그 줄의 오른쪽 끝에 붙여 한 줄이든 줄바꿈 되어 혼자 있는 줄이든 "우측 정렬" 요청이 그대로 유지되게 했다. */ .betman-odds-main{display:flex;flex-direction:column;gap:4px;min-width:0;} .betman-odds-meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;column-gap:6px;font-size:11.5px;color:var(--ink-500);} .meta-left{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;} .meta-right{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;} /* 리그 배지(.league) 폭이 리그명 길이에 따라 달라("코파리베"가 "MLB"보다 넓음) 경기번호 시작 위치가 행마다 어긋나는 문제(2026-08-14 사용자 지적) - 우측 게임일정 배지(.sched-main .league)와 같은 원리로 폭을 고정해 경기번호가 항상 같은 위치에서 시작하게 한다. */ .betman-odds-meta .league{width:50px;text-align:center;flex-shrink:0;position:relative;} .betman-odds-meta .match-no{font-weight:700;color:var(--navy-800);white-space:nowrap;} .betman-odds-meta .dot{color:var(--line);flex-shrink:0;} /* 말줄임(…) 처리는 안쪽 .league-text에서만 건다 - 원래는 .league(바깥 배지) 자체에 overflow:hidden을 걸었었는데, 아래 풍선 툴팁(::after)이 .league의 자식이라 .league에 overflow:hidden이 있으면 툴팁이 배지 위쪽(배지 바깥)으로 나가자마자 그대로 잘려 전혀 안 보이는 버그가 있었다(2026-08-26, 실제 화면에서 "hover하면 음영만 잠깐 보이고 툴팁 텍스트가 안 뜬다"는 사용자 신고로 발견). .league는 위치 기준점(position:relative)과 폭 고정 역할만 하고, 잘라내기는 이 안쪽 span으로 옮겨 툴팁이 .league 바깥으로 자유롭게 삐져나오게 한다. */ .betman-odds-meta .league .league-text{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* 리그 배지 전체 리그명 풍선 툴팁 - 배지 폭이 50px 고정이라 긴 리그명은 위에서처럼 말줄임(…) 으로 잘리는데, 마우스오버/터치 시(betman-widget.js의 kospoleBindBetmanLeagueTip()) 이 .league-tip-show 클래스가 약 2초간 붙었다 자동으로 빠지면서 배지 위에 전체 리그명을 띄운다 (요청사항, 2026-08-26). 배지 자체 폭·정렬(경기번호 시작 위치 고정)에는 영향을 주지 않도록 레이아웃에서 빠진 절대배치 풍선으로 구현. */ .betman-odds-meta .league::after{ content:attr(data-full); position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); background:var(--navy-800); color:#fff; font-weight:700; white-space:nowrap; padding:5px 10px; border-radius:6px; font-size:11.5px; box-shadow:0 4px 12px rgba(0,0,0,.2); opacity:0; visibility:hidden; pointer-events:none; z-index:30; transition:opacity .15s ease; } .betman-odds-meta .league.league-tip-show::after{opacity:1;visibility:visible;} .teams{font-weight:700;min-width:0;text-align:left;} .teams-line{display:inline-flex;align-items:center;gap:8px;} .teams-mobile{display:none;} /* 승/무/패(또는 언더/오버, 홀/짝) 고정 3칸 그리드 - 가운데 항목이 없어도 좌우 위치가 흔들리지 않는다(요청사항 예시: "승 1.35 패 2.65"처럼 가운데만 빈 칸으로 남음). ⚠️ width를 명시적 고정값으로 둔다 - 예전엔 flex:0 0 auto(내용 크기에 맞춰 자동 축소)라 각 행의 .odd-grid가 서로 독립된 그리드라서 숫자 자릿수 등 내용에 따라 행마다 총 폭이 미세하게 달라져 배당률 칸 위치가 행마다 살짝씩 어긋나는 문제가 있었다(2026-08-14 사용자 지적, 실측 확인) - 폭을 고정해 모든 행이 동일한 3칸 폭을 갖도록 해 위치가 항상 일치하게 했다. */ .odd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:0 0 auto;width:186px;} .odd-grid .odd-slot{background:var(--bg-soft);padding:4px 9px;border-radius:6px;font-weight:700;font-size:12px;white-space:nowrap;text-align:center;} .odd-grid .odd-slot-empty{background:transparent;} .odd-grid.odd-pending{display:block;} .odd-pending-text{color:var(--ink-500);font-size:12px;white-space:nowrap;} /* 좌우 2박스 - 860px 이하는 세로 스택 대신 박스 1개씩 화면 폭으로 좌우 스와이프(2026-08-14, 모바일에서 아래로 계속 스크롤해야 하는 불편 해소 요청). 스크롤바는 시각적으로 숨기되 스크롤 동작 자체는 그대로 유지(터치 스와이프로 자연스럽게 전환). */ .betman-swipe-wrap{position:relative;} @media (max-width:860px){ .betman-widgets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px;padding-bottom:4px;scrollbar-width:none;overscroll-behavior-x:contain;} .betman-widgets::-webkit-scrollbar{display:none;} .betman-box{flex:0 0 100%;scroll-snap-align:start;} /* 좌우 스와이프가 가능하다는 걸 화면만 봐서는 알 수 없다는 지적(2026-08-14) - 화면 좌/우 가장자리에 화살표 힌트를 띄운다. pointer-events:none이라 터치/스와이프 자체를 가로채지 않는 순수 시각적 표시이고, betman-widget.js가 스크롤 위치를 감시해 시작 지점에서는 좌측 화살표를, 끝 지점에서는 우측 화살표를 숨긴다(.at-start/.at-end). */ /* 처음엔 순수 시각적 힌트(pointer-events:none)였는데, 터치/클릭해도 반응이 없다는 지적 (2026-08-14)으로 실제