/* ============================================================ festa.css — 제3회 사회적가치 페스타 공통 디자인 시안 기준: 다크 네이비 + 시안/틸 그라데이션 + Pretendard 각 페이지 끝(인라인 style 뒤)에 링크 → !important 로 테마 일괄 적용 ============================================================ */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap'); :root{ --bg-deep:#050a1f; --bg-card:#0d1430; --bg-glass:rgba(20,42,92,.35); --border:rgba(157,168,214,.18); --border-strong:rgba(157,168,214,.35); --cyan:#3ee0d8; --grad:linear-gradient(135deg,#3ee0d8 0%,#06bf9f 50%,#0a4dac 100%); --ink-100:#ffffff; --ink-200:#cdd6f4; --ink-300:#9ea8d6; --ink-400:#6b7596; --ink-500:#5a6791; --success:#7df0a0; --error:#ff6b8a; --amber:#ffb74d; /* 기존 페이지 변수 재매핑 */ --pt:#3ee0d8; --pk:#3ee0d8; --ac:#7df0a0; --bg:#050a1f; --bd:rgba(157,168,214,.18); --tx:#cdd6f4; --gy:#9ea8d6; --sub:#9ea8d6; --card:#0d1430; --card2:#0b1024; --in:rgba(5,10,31,.6); } body{ background:var(--bg-deep)!important; color:var(--ink-200)!important; font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif!important; word-break:keep-all; } a{ color:var(--cyan)!important; } /* ── 상단바: 대한상공회의소 로고 + KR/EN 토글 ── */ .topbar-kcci{ position:sticky; top:0; z-index:200; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); background:rgba(5,10,31,.85); border-bottom:1px solid var(--border); } .tbk-inner{ max-width:1100px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; } .kcci-logo{ height:30px; display:flex; align-items:center; } .kcci-logo img{ height:100%; width:auto; display:block; object-fit:contain; } .lang-switch{ display:flex; gap:4px; background:rgba(255,255,255,.05); padding:4px; border-radius:8px; border:1px solid var(--border); } .lang-switch button{ background:transparent; border:0; color:var(--ink-400); padding:6px 13px; border-radius:5px; cursor:pointer; font-size:12px; font-weight:700; transition:.2s; } .lang-switch button.active{ background:var(--cyan); color:var(--bg-deep); } /* 언어별 노출 (data-en 없이 마크업으로 처리할 때) */ .en-only{ display:none; } .lang-en .en-only{ display:inline; } .lang-en .ko-only{ display:none; } /* ── 추가 관람 신청(대기) 안내 팝업 ── */ .festa-waitpop{ display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.6); align-items:center; justify-content:center; padding:20px; } .festa-waitpop.show{ display:flex; } .festa-waitpop .fw-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:34px 28px; max-width:420px; width:100%; text-align:center; } .festa-waitpop .fw-ic{ font-size:42px; margin-bottom:8px; } .festa-waitpop h3{ color:var(--cyan); font-size:19px; font-weight:800; margin:0 0 14px; } .festa-waitpop p{ color:var(--ink-200); font-size:14px; line-height:1.7; text-align:left; margin:0 0 22px; background:rgba(5,10,31,.5); border:1px solid var(--border); border-radius:10px; padding:14px 16px; } .festa-waitpop p b{ color:var(--amber); } .festa-waitpop .fw-btns{ display:flex; gap:10px; } .festa-waitpop .fw-btns button{ flex:1; height:48px; border:0; border-radius:10px; font-size:15px; font-weight:800; cursor:pointer; } .festa-waitpop #fwCancel{ background:#1e2740; color:var(--ink-300); } .festa-waitpop #fwOk{ background:var(--grad); color:#04121f; } /* 안내 팝업 미리보기 버튼 (하단 작게) */ /* [테스트용] 대기 안내 팝업 미리보기 — 우측 하단 플로팅, 항상 노출 */ .festa-waitpreview{ position:fixed!important; right:14px; bottom:14px; z-index:2147483000!important; display:block!important; visibility:visible!important; opacity:1!important; } .festa-waitpreview button{ background:linear-gradient(135deg,#3ee0d8 0%,#06bf9f 55%,#0a4dac 100%)!important; border:0!important; color:#04122b!important; font-weight:800!important; font-size:13px!important; padding:11px 16px!important; border-radius:999px!important; cursor:pointer!important; font-family:inherit; line-height:1.2; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 2px rgba(62,224,216,.25)!important; } .festa-waitpreview button:hover{ filter:brightness(1.08); } .festa-waitpreview button:active{ transform:translateY(1px); } @media (max-width:480px){ .festa-waitpreview{ right:10px; bottom:10px; left:10px; } .festa-waitpreview button{ width:100%; font-size:12px!important; padding:12px 10px!important; } } /* ── 카드/컨테이너 ── */ .wrap,.card,.form-card,.tbl-wrap,.mcard,.ro,.pop-card{ background:var(--bg-card)!important; border:1px solid var(--border)!important; color:var(--ink-200)!important; box-shadow:none!important; } .body{ background:transparent!important; } .cert-box,.msess-box,#altReg{ background:rgba(5,10,31,.5)!important; border:1px solid var(--border)!important; } /* ── 안내 배너(앰버) ── */ .demo-flag,.flag,.notice,.guide{ background:rgba(255,183,77,.08)!important; border:1px solid rgba(255,183,77,.35)!important; color:var(--amber)!important; } .notice b,.guide b{ color:#ffcf8a!important; } .notice a{ color:var(--cyan)!important; } /* ── 히어로 ── */ .hero{ background:transparent!important; border-bottom:1px solid var(--border)!important; } .hero .ed{ background:rgba(62,224,216,.12)!important; border:1px solid rgba(62,224,216,.4)!important; color:var(--cyan)!important; } .hero h1,.hero .htitle{ background:var(--grad)!important; -webkit-background-clip:text!important; background-clip:text!important; -webkit-text-fill-color:transparent!important; color:transparent!important; word-break:keep-all; } .hero p{ color:var(--ink-300)!important; } /* ── 제목/라벨/보조텍스트 ── */ .sec-title,h1,h2,.subttl,.gtitle,.rtitle{ color:var(--ink-100)!important; } .sec-title{ border-bottom:1px solid var(--border)!important; } h2{ border-bottom-color:var(--border)!important; } label,.field label,.mno{ color:var(--ink-100)!important; } .sub,.desc,.foot,.hint,.help,.opt,.field-hint,.sess-note,.submit-note{ color:var(--ink-400)!important; } .req{ color:var(--cyan)!important; } /* ── 인풋 ── */ input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=password],textarea,select{ background:rgba(5,10,31,.6)!important; border:1px solid var(--border)!important; color:var(--ink-100)!important; } input:focus,textarea:focus,select:focus{ border-color:var(--cyan)!important; } input::placeholder{ color:var(--ink-500)!important; } input:disabled,select:disabled{ background:rgba(5,10,31,.3)!important; color:var(--ink-400)!important; } /* ── 버튼: 그라데이션(주요) ── */ .submit,.submit-btn,.primary,.edit-btn,.go,.dl,.add,.addbtn,.mbtns .save,.pop-card button,.pop button{ background:var(--grad)!important; color:#04121f!important; border:0!important; font-weight:800!important; } .submit:hover,.primary:hover,.edit-btn:hover,.submit-btn:hover{ box-shadow:0 8px 24px rgba(62,224,216,.3)!important; } /* 버튼: 보조/아웃라인 */ .ghost,.btn,.rfsh,.cancel,.mbtns .cancel{ background:transparent!important; color:var(--cyan)!important; border:1px solid var(--border-strong)!important; } /* 버튼: 삭제 */ .btn.del,.del{ background:transparent!important; color:var(--error)!important; border:1px solid rgba(255,107,138,.4)!important; } /* 버튼: 인증발송 등 다크 */ .btn-s{ background:#152449!important; color:var(--cyan)!important; border:1px solid var(--border-strong)!important; } .btn-s:disabled{ background:#0f1a33!important; color:var(--ink-400)!important; } /* [ENTRY-01] 2026-08-23 — 단체등록·조회 보조 링크 (폼 하단) 구 .tbtn/.sbtn 상단 배너 버튼을 대체한다. 밝은 박스가 다크 화면에서 튀어 보여 카드 톤으로 맞춤. */ /* #altReg(등록폼 하단) 배경은 위 '카드/컨테이너' 블록에서 중첩 박스 톤으로 지정 */ .altreg,.altreg span{ color:var(--ink-100)!important; } .altreg a{ color:var(--cyan)!important; } /* ── 칩(다중선택) ── */ .chip{ background:rgba(5,10,31,.5)!important; border:1px solid var(--border)!important; color:var(--ink-300)!important; } .chip.on{ background:rgba(62,224,216,.12)!important; border-color:var(--cyan)!important; color:var(--cyan)!important; } /* ── [GRP-19] 2026-08-28 세션 일자·시간대 선택 칩 (단체·참가사 인원 카드) ── 화면 인라인 CSS 의 흰 배경(#fff)이 다크 테마의 밝은 글자를 가려 글자가 안 보이던 문제 수정 */ .mdchip{ background:rgba(5,10,31,.5)!important; border:1px solid var(--border)!important; color:var(--ink-200)!important; } .mdchip.on{ background:rgba(62,224,216,.12)!important; border-color:var(--cyan)!important; color:var(--cyan)!important; } .mhint{ color:var(--ink-300)!important; } .msess-box .gt{ color:var(--ink-300)!important; } .cbadge.sp{ background:rgba(62,224,216,.14)!important; color:var(--cyan)!important; } .cbadge.se{ background:rgba(255,255,255,.10)!important; color:var(--ink-100)!important; } /* ── 라디오/체크박스 ── */ .radio-opt,.sess,.msess,.agree label,.pchk{ color:var(--ink-200)!important; } .radio-opt input,.sess input,.agree input,.msess input,.msess-cb,.scb, input[type=checkbox],input[type=radio]{ accent-color:var(--cyan)!important; } .sess:hover{ background:rgba(255,255,255,.03)!important; } .agree{ border-top:1px solid var(--border)!important; } /* ── [UX-01] 프로그램·세션 표(stbl/strow) — 다크 테마 매핑 ── 인라인 스타일의 밝은 호버(#f7f9fc)가 다크 테마의 밝은 글자를 가리는 문제 방지: 호버는 어두운 반투명으로, 글자색은 밝게 유지 */ .stbl{ border:1px solid var(--border)!important; background:rgba(5,10,31,.35)!important; } .stbl-day{ background:rgba(62,224,216,.10)!important; color:var(--cyan)!important; } .strow{ border-top:1px solid var(--border)!important; color:var(--ink-200)!important; } .strow:hover{ background:rgba(255,255,255,.06)!important; } .strow.shead{ background:rgba(5,10,31,.55)!important; color:var(--ink-400)!important; } .strow.shead:hover{ background:rgba(5,10,31,.55)!important; } .strow input{ accent-color:var(--cyan)!important; } .c-tm{ color:var(--cyan)!important; } .c-tm .tt{ color:var(--amber)!important; } .c-nm{ color:var(--ink-100)!important; } .c-rm{ color:var(--ink-300)!important; background:rgba(157,168,214,.12)!important; border-radius:6px; padding:1px 7px; justify-self:start; } /* ── 세션 잔여석 ── */ .rem{ color:var(--success)!important; } .rem.low{ color:var(--amber)!important; } .rem.full{ color:var(--error)!important; } .live-dot,.dot{ background:var(--success)!important; } /* ── 인증/타이머/배지 ── */ .timer{ color:var(--cyan)!important; } .ok-badge,.ok{ color:var(--success)!important; } /* ── 토글(세션 신청) ── */ .sess-toggle,.msess-toggle{ background:rgba(62,224,216,.08)!important; border:1px solid rgba(62,224,216,.3)!important; color:var(--cyan)!important; } /* ── 조회 결과(kv) ── */ dl,.kv{ border-color:var(--border)!important; } .kv dt{ color:var(--ink-400)!important; } .kv dd{ color:var(--ink-200)!important; } .kv dd.hl,.hl{ color:var(--cyan)!important; } /* ── 팝업 ── */ .pop-card h3{ color:var(--ink-100)!important; } .pop-card p{ color:var(--ink-300)!important; } .pop-card .rc{ color:var(--cyan)!important; } /* ── 관리자 대시보드 ── */ .top{ background:#0a1230!important; border-bottom:1px solid var(--border)!important; } .top h1{ color:var(--ink-100)!important; -webkit-text-fill-color:initial!important; background:none!important; } .top a,.top a.link{ color:var(--cyan)!important; } .top .live,.top .upd{ color:var(--ink-300)!important; } .cards .card,.card{ background:var(--bg-card)!important; } .card .lbl{ color:var(--ink-400)!important; } .card .val{ color:var(--ink-100)!important; } .card.red .val{ color:var(--error)!important; } .bar input,.bar select{ background:rgba(5,10,31,.6)!important; border:1px solid var(--border)!important; color:var(--ink-100)!important; } table{ background:var(--bg-card)!important; } th{ background:rgba(5,10,31,.55)!important; color:var(--ink-300)!important; border-color:var(--border)!important; } td{ color:var(--ink-200)!important; border-color:var(--border)!important; } tr.gtop td{ background:rgba(62,224,216,.07)!important; color:var(--ink-100)!important; } tr.cxl td{ background:rgba(255,107,138,.06)!important; } .pg a,.pg span{ background:rgba(5,10,31,.5)!important; border-color:var(--border)!important; color:var(--ink-200)!important; } .pg .cur{ background:var(--grad)!important; color:#04121f!important; border:0!important; } /* 상태/현황 태그 */ .tag.on,.st.ok{ background:rgba(125,240,160,.12)!important; color:var(--success)!important; } .tag.off{ background:rgba(157,168,214,.14)!important; color:var(--ink-400)!important; } .tag.full,.st.full{ background:rgba(255,107,138,.12)!important; color:var(--error)!important; } .st.low{ background:rgba(255,183,77,.14)!important; color:var(--amber)!important; } .grp{ background:var(--grad)!important; color:#04121f!important; } .grp.uam{ background:linear-gradient(135deg,#7c5bff,#3ee0d8)!important; } .bar-el,.bar>i{ background:var(--success)!important; } .bar>i.low{ background:var(--amber)!important; } .bar>i.full{ background:var(--error)!important; } .empty,.note{ color:var(--ink-400)!important; } /* 세션관리 모달 */ .modal .mcard,.mcard{ background:var(--bg-card)!important; } .help{ color:var(--ink-400)!important; } /* ── 세션장 모니터(다크 보드) ── */ .mon .top{ border-bottom:3px solid var(--cyan)!important; } .mon .brand{ background:var(--grad)!important; -webkit-background-clip:text!important; background-clip:text!important; -webkit-text-fill-color:transparent!important; } .mon .brand small{ color:var(--ink-400)!important; -webkit-text-fill-color:var(--ink-400)!important; } .mon .clock{ color:var(--ink-200)!important; } .mon .rtitle{ color:var(--ink-100)!important; } .mon .rtitle .live{ color:var(--success)!important; } .mon .row{ border-bottom:1px solid var(--border)!important; } .mon .row .tm,.mon .row .nm{ color:var(--ink-100)!important; } .mon .row .rem{ color:var(--success)!important; } .mon .row.low .rem{ color:var(--amber)!important; } .mon .row.full .rem{ color:var(--error)!important; } .pick .rooms a{ background:rgba(5,10,31,.5)!important; border:1px solid var(--border)!important; color:var(--cyan)!important; } /* ── 등록 진입 페이지(entry.html) — 탭/버튼 다크 테마 매핑 ── a{color:cyan!important} 전역 규칙이 버튼 글자색을 덮어 민트 배경에 민트 글씨가 되는 문제 방지 */ .tab{ background:rgba(5,10,31,.5)!important; border:1px solid var(--border)!important; } .tab:hover{ border-color:var(--cyan)!important; box-shadow:0 6px 18px rgba(62,224,216,.15)!important; } .tab .nm{ color:var(--ink-100)!important; } .tab .ds{ color:var(--ink-300)!important; } .tab .acts a{ background:var(--grad)!important; color:#04121f!important; border:0!important; font-weight:800!important; } .tab .acts a + a{ background:transparent!important; color:var(--cyan)!important; border:1.5px solid var(--cyan)!important; } .lead{ color:var(--ink-100)!important; } .lead-sub{ color:var(--ink-400)!important; } .altreg{ border-top-color:var(--border)!important; } /* entry.html — 구분선만 있는 형태 */