@charset "utf-8"; /* 자동 생성 유틸리티 (csp_gen_utils.py 로 재생성). @import 는 다른 규칙보다 앞서야 한다. */ @import url('csp-utilities-gen.css'); /* ============================================================ CSP style-src 'self' 전환용 유틸리티 클래스 ------------------------------------------------------------ - 목적: 인라인 style="" 상수를 클래스로 치환 (CSP 위반 해소) - 근거: 인라인 상수 패턴 빈도 집계 (2026-08 정적 분석) - 로드: Common/css/icommon.css 의 @import 로 전역 배포 - 명명: 기존 icommon.css 관례(.w-100px, .mh-100)를 따름 - !important: 대체 대상인 인라인 style이 최우선 순위이므로 동일한 우선순위 확보를 위해 부여 (기존 .w-100px 계열과 동일) - 이 파일은 CSP 전환 작업의 단일 정본이다. 다른 css 사본(v1/v2/캠퍼스별)에 복사하지 말 것. ============================================================ */ /* ---- 너비: 퍼센트 (테이블 컬럼 폭) ---- */ .w-p3 { width: 3% !important; } .w-p4 { width: 4% !important; } .w-p5 { width: 5% !important; } .w-p6 { width: 6% !important; } .w-p7 { width: 7% !important; } .w-p8 { width: 8% !important; } .w-p9 { width: 9% !important; } .w-p10 { width: 10% !important; } .w-p12 { width: 12% !important; } .w-p14 { width: 14% !important; } .w-p15 { width: 15% !important; } .w-p20 { width: 20% !important; } .w-p25 { width: 25% !important; } .w-p30 { width: 30% !important; } .w-p35 { width: 35% !important; } .w-p40 { width: 40% !important; } .w-p50 { width: 50% !important; } .w-p100 { width: 100% !important; } /* ---- 너비: 픽셀 ---- */ /* w-100px/200px/300px 는 v2 icommon.css 에도 있으나 v2 는 대부분 화면에서 로드되지 않으므로 정본에 동일 값으로 재정의 (값 동일 — 충돌 없음) */ .w-70px { width: 70px !important; } .w-80px { width: 80px !important; } .w-100px { width: 100px !important; } .w-150px { width: 150px !important; } .w-200px { width: 200px !important; } .w-300px { width: 300px !important; } .w-500px { width: 500px !important; } /* ---- 높이: 픽셀 ---- */ .h-100px { height: 100px !important; } .h-130px { height: 130px !important; } .h-400px { height: 400px !important; } .h-500px { height: 500px !important; } /* ---- 최대 높이 ---- */ .mxh-400 { max-height: 400px !important; } /* ---- 표시 / 정렬 / 강조 (C# 코드비하인드 치환용) ---- */ .ta-center { text-align: center !important; } .v-hidden { visibility: hidden !important; } .fw-bold { font-weight: bold !important; } /* ---- 여백 제거 (MRD 리포트 치환용) ---- */ .m-0 { margin: 0 !important; } .p-0 { padding: 0 !important; } /* ---- 너비: 퍼센트 0~100 전 범위 (S6 진행률 막대용) ---- 설문 응답 비율 막대가 style="width:<%# Eval(...) %>%" 로 값을 실행 시점에 정한다. 값이 0~100 정수뿐이라 전 범위를 미리 만들어 두면 반올림 없이 그대로 옮길 수 있다. 위쪽에 이미 있는 값(3·4·5·10·12·… )은 중복을 피해 여기 다시 쓰지 않는다. */ .w-p0 { width: 0% !important; } .w-p1 { width: 1% !important; } .w-p2 { width: 2% !important; } .w-p11 { width: 11% !important; } .w-p13 { width: 13% !important; } .w-p16 { width: 16% !important; } .w-p17 { width: 17% !important; } .w-p18 { width: 18% !important; } .w-p19 { width: 19% !important; } .w-p21 { width: 21% !important; } .w-p22 { width: 22% !important; } .w-p23 { width: 23% !important; } .w-p24 { width: 24% !important; } .w-p26 { width: 26% !important; } .w-p27 { width: 27% !important; } .w-p28 { width: 28% !important; } .w-p29 { width: 29% !important; } .w-p31 { width: 31% !important; } .w-p32 { width: 32% !important; } .w-p33 { width: 33% !important; } .w-p34 { width: 34% !important; } .w-p36 { width: 36% !important; } .w-p37 { width: 37% !important; } .w-p38 { width: 38% !important; } .w-p39 { width: 39% !important; } .w-p41 { width: 41% !important; } .w-p42 { width: 42% !important; } .w-p43 { width: 43% !important; } .w-p44 { width: 44% !important; } .w-p45 { width: 45% !important; } .w-p46 { width: 46% !important; } .w-p47 { width: 47% !important; } .w-p48 { width: 48% !important; } .w-p49 { width: 49% !important; } .w-p51 { width: 51% !important; } .w-p52 { width: 52% !important; } .w-p53 { width: 53% !important; } .w-p54 { width: 54% !important; } .w-p55 { width: 55% !important; } .w-p56 { width: 56% !important; } .w-p57 { width: 57% !important; } .w-p58 { width: 58% !important; } .w-p59 { width: 59% !important; } .w-p60 { width: 60% !important; } .w-p61 { width: 61% !important; } .w-p62 { width: 62% !important; } .w-p63 { width: 63% !important; } .w-p64 { width: 64% !important; } .w-p65 { width: 65% !important; } .w-p66 { width: 66% !important; } .w-p67 { width: 67% !important; } .w-p68 { width: 68% !important; } .w-p69 { width: 69% !important; } .w-p70 { width: 70% !important; } .w-p71 { width: 71% !important; } .w-p72 { width: 72% !important; } .w-p73 { width: 73% !important; } .w-p74 { width: 74% !important; } .w-p75 { width: 75% !important; } .w-p76 { width: 76% !important; } .w-p77 { width: 77% !important; } .w-p78 { width: 78% !important; } .w-p79 { width: 79% !important; } .w-p80 { width: 80% !important; } .w-p81 { width: 81% !important; } .w-p82 { width: 82% !important; } .w-p83 { width: 83% !important; } .w-p84 { width: 84% !important; } .w-p85 { width: 85% !important; } .w-p86 { width: 86% !important; } .w-p87 { width: 87% !important; } .w-p88 { width: 88% !important; } .w-p89 { width: 89% !important; } .w-p90 { width: 90% !important; } .w-p91 { width: 91% !important; } .w-p92 { width: 92% !important; } .w-p93 { width: 93% !important; } .w-p94 { width: 94% !important; } .w-p95 { width: 95% !important; } .w-p96 { width: 96% !important; } .w-p97 { width: 97% !important; } .w-p98 { width: 98% !important; } .w-p99 { width: 99% !important; } /* ---- 최소 너비 (진행률 막대가 0% 여도 숫자가 보이도록) ---- */ .min-w-2em { min-width: 2em !important; } /* ---- Bootstrap 과 이름이 겹치는 것은 여기서 정의하지 않는다 ---- .d-none / .d-block / .d-inline / .d-inline-block / .pr-0 은 Bootstrap 에 **같은 선언**으로 이미 있다. 우리가 뒤에 한 번 더 정의하면 특성도가 같은 상태에서 나중 것이 이겨 `.d-none .d-lg-block` 같은 **반응형 조합을 깨뜨린다**(lg 이상에서 보여야 할 것이 숨는다). 실측: Campus/C/CampusC0101U.aspx 의 "예상취득학점/전공/교양/교직" 이 통째로 사라졌다. 이 클래스를 쓰는 화면은 전부 Bootstrap 에 도달하므로 빼도 치환은 그대로 동작한다. (.m-0 / .p-0 는 남긴다 — MRD 리포트 406화면이 Bootstrap 에 도달하지 않는다) */ /* ---- 홈페이지 마스터 인라인 style 제거용 (2026-09-22) ---- .js-hide 는 **!important 를 쓰지 않는다.** 이 요소들은 jQuery 로 토글되는데, !important 를 붙이면 인라인 display 를 이겨 영영 열리지 않는다. 대신 :not(#id) 두 번으로 특성도를 (2,1,0) 까지 올려 기존 ID 규칙(예: `#section3 .banner-tit .carouselButtons > a` = (1,2,1))을 이긴다. #csp-spec-a / #csp-spec-b 는 실제로 존재하지 않는 ID 다. 특성도만 올리는 용도. 짝이 되는 마스터 스크립트도 .show()/.hide() 대신 .removeClass('js-hide') / .addClass('js-hide') 를 쓴다. .show() 를 그대로 두면 jQuery 가 태그 기본값( = inline)을 인라인으로 심어 버튼 크기가 28x28 -> 24x19 로 줄어든다(2026-09-22 실측). ※ 이 파일을 쓰는 마스터에는 가 반드시 함께 들어가야 한다. */ .js-hide:not(#csp-spec-a):not(#csp-spec-b) { display: none; } .cur-pointer { cursor: pointer !important; } .p-055 { padding: 0.55rem !important; } /* ---- 홈페이지 마스터 인라인 style 제거 2차 (2026-09-22) ---- 코드비하인드가 문자열로 만들던 style 속성을 클래스로 옮긴 것. !important 를 쓰지 않는다 - owl.carousel 이 런타임에 .css() 로 같은 속성을 덮어쓰므로, 인라인(CSSOM)이 이기도록 두어야 한다. */ .mr-10px { margin-right: 10px; } .w-163_333px { width: 163.333px; } /* oia 메인 - 고정 경로 배경이미지 (main006.Master.cs) */ .icon-menu0101 { background-image: url(/site/resource/oia/images/icon_menu0101.png); } .icon-menu0102 { background-image: url(/site/resource/oia/images/icon_menu0102.png); } .icon-menu0103 { background-image: url(/site/resource/oia/images/icon_menu0103.png); } .icon-menu0104 { background-image: url(/site/resource/oia/images/icon_menu0104.png); } /* Index.aspx (단독 페이지) 인라인 style 제거 2026-09-22 */ .fs-22px:not(#csp-spec-a):not(#csp-spec-b) { font-size: 22px; } .img-w100-auto:not(#csp-spec-a):not(#csp-spec-b) { width: 100%; height: auto; } .thumb-none:not(#csp-spec-a):not(#csp-spec-b) { background-image: url(/site/resource/system/images-hongik/thumb-none.png); } /* 위 3종은 특성도를 (2,1,0) 으로 올린다. 기존 `.program-list .thum .img` (0,3,0) 이 background-image / height 를 덮어쓰기 때문이다. !important 대신 :not(#id) 를 쓰는 것은 .js-hide 와 같은 이유 - JS 가 인라인으로 덮어쓸 여지를 남긴다. 2026-09-22 실측으로 확인 */