/* ===================================================================== 지원금 페이지 (/subsidy) — Vue 3 in-DOM · 시안 B "목록형" (2026-09-23) game-event.css 의 테마 변수(--ge-*) 사용. 라이트/다크 = . PC(≥1201px): 상단 조건 한 줄(드롭다운) + 표(지원금·분야·지역·접수·지원·찜) + 오른쪽 광고열. 왼쪽 열 없음. 모바일(≤1200px): 조건 패널 접이식 + 카드 1단. 상세는 PC 오른쪽 패널 / 모바일 전체화면. 색은 두 곳만: 돈(초록) · 1순위/선택(파랑). 나머지는 선·여백. ===================================================================== */ :root { --sb-accent: #1f5fbf; --sb-accent-soft: #eaf1fc; --sb-accent-line: #b9cff2; --sb-money: #0f8a5f; --sb-warn: #c0393d; --sb-warn-bg: #fdecec; } :root[data-ge-theme="dark"] { --sb-accent: #7fb2ff; --sb-accent-soft: #182642; --sb-accent-line: #2d4a7a; --sb-money: #3ecf8e; --sb-warn: #ff8a8a; --sb-warn-bg: #3a1f22; } .sb-wrap { color: var(--ge-text); } .sb-wrap * { box-sizing: border-box; } /* 사이트 공통 배너·서브바는 content-box 전제(padding 이 높이·폭에 더해짐) — 게임이벤트와 같은 위치가 되게 되돌린다 */ .sb-wrap .pg_banner, .sb-wrap .ge-subnav-in { box-sizing: content-box; } /* 사이트 전역 CSS 가 table 글자색을 검정으로 고정 → 다크에서 표 안 글자(금액 등)가 검게 보였다. 테마 변수로 되돌린다 */ .sb-wrap table, .sb-wrap th, .sb-wrap td { color: var(--ge-text-body); } :where(.sb-wrap) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :where(.sb-wrap) button:disabled { cursor: default; } :where(.sb-wrap) input { font: inherit; } .sb-wrap input { color: var(--ge-text); caret-color: var(--ge-text); } /* 사이트 전역 input 색(검정)이 :where(0특이도) 를 이겨 다크에서 검게 나옴 → 클래스 특이도로 */ .sb-wrap input::placeholder { color: var(--ge-text-sub); opacity: 1; } :where(.sb-wrap) a { color: inherit; text-decoration: none; } :where(.sb-wrap) ul, :where(.sb-wrap) ol { list-style: none; margin: 0; padding: 0; } :where(.sb-wrap) h1, :where(.sb-wrap) h2, :where(.sb-wrap) h3, :where(.sb-wrap) p { margin: 0; } :where(.sb-wrap) table { border-collapse: collapse; } .sb-sronly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } [v-cloak] { display: none; } /* 이 페이지는 왼쪽 균형 여백(::before 250px)을 없애 표를 넓게 쓴다 */ .sb-wrap .ge-shell::before { display: none; } .sb-wrap .ge-shell { max-width: 1480px; } /* 본문 바탕은 사이트 그대로(흰색). 카드·표 사이 여백으로 구분 */ .sb-wrap .ge-shell > .ge-wrap { padding: 12px 0 72px; } /* ---------- 상단 바: 게임이벤트의 .pg_banner.pg_short + .ge-subnav 를 그대로 사용 (game-event.css). 여기선 우측 캡션만 추가 */ .ge-subnav-in .sb-cap { margin-left: auto; font-size: 12px; color: #F5F5F5; opacity: .85; white-space: nowrap; } @media (max-width: 1200px) { .ge-subnav-in .sb-cap { color: var(--ge-text-sub); opacity: 1; } } :root[data-ge-theme="dark"] .ge-subnav-in .sb-cap { color: #c3c8d2; } /* ---------- 공통 조각 ---------- */ .sb-card { background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: 12px; } .sb-wrap .sb-chip { min-height: 30px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--ge-line); background: var(--ge-surface); color: var(--ge-text-sub); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: border-color .15s, background .15s, color .15s; } .sb-chip:hover { border-color: var(--ge-text-sub); color: var(--ge-text); } .sb-chip.on { background: var(--ge-text); border-color: var(--ge-text); color: var(--ge-surface); } .sb-chip.sm { min-height: 27px; padding: 2px 9px; font-size: 12px; } .sb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sb-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .sb-grid4 .sb-chip { justify-content: center; padding-left: 4px; padding-right: 4px; } .sb-wrap .sb-note { font-size: 11.5px; color: var(--ge-text-sub); margin-top: 8px; line-height: 1.5; } .sb-wrap .ge-wrap .sb-money { font-weight: 800; color: var(--sb-money); white-space: nowrap; font-variant-numeric: tabular-nums; } .sb-wrap .sb-tag { font-size: 11px; font-weight: 600; color: var(--sb-accent); background: var(--sb-accent-soft); padding: 2px 7px; border-radius: 5px; white-space: nowrap; } .sb-btn { height: 38px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .sb-btn.pri { background: var(--ge-text); color: var(--ge-surface); } .sb-btn.pri:disabled { background: var(--ge-bg-soft); color: var(--ge-text-sub); } .sb-btn.ghost { background: var(--ge-bg-soft); color: var(--ge-text); } .sb-btn svg { width: 16px; height: 16px; } .sb-wrap .sb-req { font-size: 11px; font-weight: 600; color: var(--sb-warn); } .sb-wrap .sb-opt { font-size: 11px; font-weight: 500; color: var(--ge-text-sub); } /* ---------- 조건: PC 한 줄 바 + 드롭다운 ---------- */ .sb-condbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; padding: 14px 16px; align-items: end; position: relative; z-index: 20; } .sb-field { position: relative; min-width: 0; } .sb-field > label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ge-text-sub); margin-bottom: 5px; } .sb-field > label .sb-req, .sb-field > label .sb-opt { margin-left: 4px; } .sb-wrap .sb-sel { width: 100%; height: 38px; border: 1px solid var(--ge-line); border-radius: 9px; background: var(--ge-surface); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; font-size: 13.5px; font-weight: 600; color: var(--ge-text); text-align: left; } .sb-sel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-sel .ph { color: var(--ge-text-sub); font-weight: 500; } .sb-sel svg { width: 14px; height: 14px; color: var(--ge-text-sub); flex: 0 0 auto; transition: transform .15s; } .sb-sel:hover, .sb-field.open .sb-sel { border-color: var(--ge-text-sub); } .sb-field.open .sb-sel svg { transform: rotate(180deg); } .sb-dd { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: 420px; background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: 12px; box-shadow: 0 10px 30px var(--ge-shadow); padding: 14px; z-index: 30; } .sb-dd.wide { width: 420px; } .sb-dd .sb-note { margin-top: 10px; } .sb-dd .foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; } .sb-age { display: flex; align-items: center; gap: 10px; } .sb-age button.pm { width: 34px; height: 34px; border-radius: 50%; background: var(--ge-bg-soft); color: var(--ge-text); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .sb-age input { width: 64px; height: 34px; text-align: center; font-size: 17px; font-weight: 800; border: 1px solid var(--ge-line); border-radius: 9px; background: var(--ge-surface); } .sb-age .u { font-size: 13px; color: var(--ge-text-sub); } .sb-condbar .go { align-self: end; } .sb-condbar .go .sb-btn { height: 38px; white-space: nowrap; } /* ---------- 조건: 모바일 접이식 패널 ---------- */ .sb-cond-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; } .sb-cond-head .t { flex: 1; min-width: 0; } .sb-cond-head .t b { display: block; font-size: 14.5px; color: var(--ge-text); } .sb-cond-head .t span { display: block; font-size: 12px; color: var(--ge-text-sub); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-cond-head .tg { font-size: 12px; font-weight: 700; color: var(--sb-accent); white-space: nowrap; } .sb-cond-body { padding: 0 16px 16px; border-top: 1px solid var(--ge-line); } .sb-cond.closed .sb-cond-body { display: none; } .sb-sec { padding-top: 14px; } .sb-wrap .sb-sec-h { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ge-text); margin-bottom: 8px; } .sb-sec-h .hint { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ge-text-sub); } .sb-cond-foot { display: flex; gap: 8px; margin-top: 16px; } .sb-cond-foot .sb-btn.pri { flex: 1; } /* ---------- 결과 헤더 ---------- */ .sb-head { display: flex; align-items: center; gap: 10px 12px; margin: 26px 0 14px; flex-wrap: wrap; } .sb-head .n { font-size: 16px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; flex: 0 0 auto; } .sb-head .n small { font-size: 12.5px; font-weight: 500; color: var(--ge-text-sub); margin-left: 6px; } .sb-head .cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 320px; align-items: center; } .sb-head .cats .sep { width: 1px; height: 18px; background: var(--ge-line); flex: 0 0 auto; margin: 0 4px; } .sb-head .cats .sb-chip.fc.wish { margin-left: auto; } /* 찜 칩은 줄 오른쪽 끝에 */ .sb-head .cats .sb-chip.fc.on { background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; } .sb-head .cats::-webkit-scrollbar { display: none; } .sb-head .right { display: flex; gap: 6px; align-items: center; margin-left: auto; position: relative; } .sb-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--ge-line); border-radius: 9px; background: var(--ge-surface); width: 260px; } /* PC 260px (130 은 너무 작았다) */ .sb-search svg { width: 14px; height: 14px; color: var(--ge-text-sub); flex: 0 0 auto; } .sb-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 13.5px; } .sb-search:focus-within { border-color: var(--ge-text-sub); } .sb-search button { color: var(--ge-text-sub); font-size: 16px; line-height: 1; } .sb-wrap .sb-tool { height: 32px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--ge-line); background: var(--ge-surface); font-size: 12.5px; font-weight: 700; color: var(--ge-text); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; position: relative; } .sb-tool:hover { border-color: var(--ge-text-sub); } .sb-tool.on { background: var(--ge-text); color: var(--ge-surface); border-color: var(--ge-text); } .sb-tool svg { width: 14px; height: 14px; } .sb-tool .bd { position: absolute; top: -6px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--sb-accent); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ge-surface); } .sb-focus { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; } .sb-focus .sb-chip.on { background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; } .sb-fpop { position: absolute; right: 0; top: calc(100% + 6px); width: 440px; max-width: calc(100vw - 32px); padding: 12px 14px; z-index: 30; box-shadow: 0 10px 30px var(--ge-shadow); } .sb-fpop .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; } .sb-fpop .row .lb { width: 68px; font-size: 12.5px; font-weight: 700; color: var(--ge-text); flex: 0 0 auto; } .sb-fpop .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--ge-text-sub); } .sb-fpop .foot button { color: var(--sb-accent); font-weight: 700; font-size: 12px; } .sb-sortpop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 150px; padding: 6px; z-index: 30; box-shadow: 0 10px 30px var(--ge-shadow); } .sb-sortpop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ge-text-sub); } .sb-sortpop button:hover { background: var(--ge-bg-soft); color: var(--ge-text); } .sb-sortpop button.on { color: var(--sb-accent); background: var(--sb-accent-soft); } /* ---------- 표 (PC) ---------- */ .sb-table { width: 100%; background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: 12px; overflow: hidden; margin-top: 16px; } .sb-table th { font-size: 11.5px; color: var(--ge-text-sub); font-weight: 600; text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--ge-line); background: var(--ge-bg-soft); white-space: nowrap; } .sb-table th.r { text-align: right; } .sb-table th button { font-size: inherit; font-weight: inherit; color: inherit; display: inline-flex; align-items: center; gap: 3px; } .sb-table th button.on { color: var(--ge-text); font-weight: 700; } .sb-table th button svg { width: 12px; height: 12px; } .sb-table td { padding: 15px 18px; border-bottom: 1px solid var(--ge-line); font-size: 13.5px; vertical-align: middle; } .sb-table tr:last-child td { border-bottom: 0; } .sb-table tbody tr { cursor: pointer; } .sb-table tbody tr:hover td { background: var(--ge-bg-soft); } .sb-table tr.top td { background: var(--sb-accent-soft); } .sb-table tr.top:hover td { background: var(--sb-accent-soft); } .sb-table td.t { font-weight: 700; color: var(--ge-text); max-width: 0; width: 44%; font-size: 14px; } .sb-table td.t .ttl { display: flex; align-items: center; gap: 6px; min-width: 0; } .sb-table td.t .ttl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-table td.t .top-tag { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--sb-accent); padding: 1px 7px; border-radius: 4px; flex: 0 0 auto; } .sb-table td.t small { display: block; font-weight: 400; color: var(--ge-text-sub); font-size: 12px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-table td.t small .chk { color: var(--sb-accent); font-weight: 700; } .sb-table td.t small .chk.done { color: var(--sb-money); } .sb-table td.c { color: var(--ge-text-sub); white-space: nowrap; } .sb-table td.r { text-align: right; white-space: nowrap; font-size: 14px; } .sb-table td.r .alt { color: var(--ge-text-sub); font-weight: 600; font-size: 13px; } .sb-table td.w { width: 40px; padding-left: 4px; padding-right: 10px; text-align: center; } .sb-wrap .sb-st { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--ge-bg-soft); color: var(--ge-text-sub); white-space: nowrap; display: inline-block; } .sb-st.ok { background: var(--ge-c-emerald-bg); color: var(--ge-c-emerald); } .sb-st.hot { background: var(--sb-warn-bg); color: var(--sb-warn); } .sb-wrap .sb-wish { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ge-text-sub); opacity: .7; } .sb-wish:hover { background: var(--ge-bg-soft); opacity: 1; } .sb-wish.on { color: var(--sb-accent); opacity: 1; } .sb-wish svg { width: 17px; height: 17px; } .sb-wrap .sb-more { display: block; width: 100%; margin-top: 14px; height: 42px; border-radius: 10px; border: 1px solid var(--ge-line); background: var(--ge-surface); font-size: 13px; font-weight: 700; color: var(--ge-text); } .sb-more:hover { border-color: var(--ge-text-sub); } .sb-empty { padding: 40px 20px; text-align: center; border: 1px dashed var(--ge-line); border-radius: 12px; } .sb-empty b { display: block; font-size: 14px; color: var(--ge-text); } .sb-empty span { display: block; font-size: 12px; color: var(--ge-text-sub); margin-top: 4px; } .sb-skel { height: 56px; border-radius: 10px; background: linear-gradient(90deg, var(--ge-skel) 25%, var(--ge-skel-shine) 50%, var(--ge-skel) 75%); background-size: 200% 100%; animation: sbSk 1.2s infinite; margin-bottom: 8px; } @keyframes sbSk { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---------- 카드 (모바일) ---------- */ .sb-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; } .sb-list > * { min-width: 0; } .sb-item { position: relative; min-width: 0; background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: 12px; padding: 13px 44px 13px 14px; text-align: left; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) fit-content(40%); gap: 3px 10px; } /* 값 칸: 내용만큼, 최대 40% (auto 면 한 글자씩 세로로 쪼개졌다) */ .sb-item.top { border-color: var(--sb-accent-line); background: var(--sb-accent-soft); } .sb-item.locked { border-style: dashed; opacity: .75; } .sb-item .ttl { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--ge-text); grid-column: 1; display: flex; gap: 6px; align-items: center; } .sb-item .ttl .top-tag { font-size: 10px; font-weight: 800; color: #fff; background: var(--sb-accent); padding: 1px 6px; border-radius: 4px; flex: 0 0 auto; } .sb-item .ttl .top-tag.lock { background: #4b5563; } .sb-item .sup { grid-column: 1; font-size: 12px; color: var(--ge-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-item .org { grid-column: 1; font-size: 12px; color: var(--ge-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-item .org.urgent { color: var(--sb-warn); font-weight: 600; } .sb-item .val { grid-column: 2; grid-row: 1 / 4; align-self: center; text-align: right; font-size: 13.5px; white-space: normal; word-break: keep-all; } .sb-item .val .alt { color: var(--ge-text-sub); font-weight: 600; font-size: 12.5px; } .sb-item .sb-wish { position: absolute; top: 8px; right: 8px; } .sb-wrap .sb-sec-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--ge-text); margin: 26px 0 10px; } .sb-sec-title svg { width: 17px; height: 17px; color: var(--ge-text-sub); } .sb-sec-title small { font-size: 12px; font-weight: 500; color: var(--ge-text-sub); margin-left: 4px; } .sb-rows .row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--ge-line); text-align: left; width: 100%; } .sb-rows .row:last-child { border-bottom: 0; } .sb-rows .row:hover { background: var(--ge-bg-soft); } .sb-rows .row .tx { flex: 1; min-width: 0; } .sb-rows .row .tx b { display: block; font-size: 13.5px; color: var(--ge-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-rows .row .tx span { display: block; font-size: 11.5px; color: var(--ge-text-sub); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-rows .row .rt { text-align: right; flex: 0 0 auto; } .sb-rows .row .rt small { display: block; font-size: 10.5px; color: var(--ge-text-sub); margin-top: 2px; } .sb-wrap .sb-foot-note { font-size: 11.5px; color: var(--ge-text-sub); margin-top: 18px; line-height: 1.6; } /* ---------- PC / 모바일 전환 ---------- */ .pc-only { display: none; } .mo-only { display: block; } @media (min-width: 1201px) { .pc-only { display: block; } .mo-only { display: none !important; } .sb-table { display: table; } .sb-condbar { display: grid; } /* .pc-only 의 block 보다 뒤에 와야 5열 유지 */ } /* 결과 헤더: 1줄 = 건수·합계 + (오른쪽) 검색·정렬·필터, 2줄 = 분야 칩(+마감임박·신규·찜) */ .sb-head .cats { flex-basis: 100%; order: 3; margin-top: 2px; } .sb-head .n small { white-space: normal; } .sb-head .right { margin-left: auto; } @media (max-width: 1200px) { .sb-head .n { flex-basis: 100%; } .sb-head .right { margin-left: 0; flex-wrap: wrap; } /* 정렬·필터 팝업: 모바일에선 .right 가 좁아 오른쪽 기준으로 열면 화면 왼쪽 밖으로 나간다 → 헤더 전체 폭 기준으로 연다 */ .sb-head { position: relative; } .sb-head .right { position: static; } .sb-fpop { left: 0; right: 0; width: auto; max-width: none; } .sb-sortpop { right: 0; left: auto; } .sb-search { flex: 1 1 100%; width: auto; height: 40px; } /* 모바일: 검색은 한 줄 전체, 정렬·필터는 다음 줄 */ } /* ---------- 상세 패널 ---------- */ .sb-ov { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 10000; } .sb-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--ge-bg-soft); z-index: 10001; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,.18); animation: sbIn .22s ease-out; } @keyframes sbIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } .sb-panel-h { flex: 0 0 auto; height: 54px; background: var(--ge-surface); border-bottom: 1px solid var(--ge-line); display: flex; align-items: center; padding: 0 8px 0 4px; gap: 4px; } .sb-panel-h button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--ge-text); } .sb-panel-h button:hover { background: var(--ge-bg-soft); } .sb-panel-h button svg { width: 22px; height: 22px; } .sb-panel-h .t { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: var(--ge-text); } /* 패널·카드 계열 컨테이너는 테마 글자색을 직접 가진다(사이트 전역 검정을 끊는다) */ .sb-wrap .sb-panel, .sb-wrap .sb-card, .sb-wrap .sb-panel-h { color: var(--ge-text); } .sb-panel-b { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 90px; } .sb-panel-b .blk { background: var(--ge-surface); padding: 18px 20px; margin-bottom: 8px; } .sb-panel-b .chips-top { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .sb-wrap .sb-pill { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; background: var(--ge-bg-soft); color: var(--ge-text-sub); } .sb-pill.cat { background: var(--sb-accent-soft); color: var(--sb-accent); } .sb-pill.urgent { background: var(--sb-warn-bg); color: var(--sb-warn); } .sb-pill.lock { background: #4b5563; color: #fff; } .sb-panel-b h2.ttl { font-size: 20px; font-weight: 800; line-height: 1.35; margin-top: 8px; color: var(--ge-text); } .sb-panel-b .val { font-size: 22px; margin-top: 8px; } .sb-panel-b .desc { font-size: 13.5px; line-height: 1.7; color: var(--ge-text-body); margin-top: 10px; } .sb-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; } .sb-tiles div { background: var(--ge-bg-soft); border-radius: 10px; padding: 10px 8px; text-align: center; } .sb-tiles p { font-size: 10px; color: var(--ge-text-sub); } .sb-tiles b { display: block; font-size: 13px; color: var(--ge-text); margin-top: 2px; } .sb-wrap .sb-h2 { font-size: 15px; font-weight: 800; color: var(--ge-text); display: flex; align-items: center; gap: 6px; } .sb-h2 svg { width: 17px; height: 17px; } .sb-h2 + .sub { font-size: 11px; color: var(--ge-text-sub); margin-top: 2px; margin-bottom: 10px; } .sb-elig { border: 1px solid var(--ge-line); border-radius: 12px; overflow: hidden; margin-top: 10px; } .sb-elig button { width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-bottom: 1px solid var(--ge-line); text-align: left; } .sb-elig button:last-child { border-bottom: 0; } .sb-elig .bx { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--ge-line); background: var(--ge-surface); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; color: #fff; } .sb-elig .bx.on { background: var(--sb-accent); border-color: var(--sb-accent); } .sb-elig .bx svg { width: 12px; height: 12px; } .sb-elig span.tx { font-size: 13px; line-height: 1.6; color: var(--ge-text-body); } .sb-elig button .tx.on { color: var(--ge-text); font-weight: 600; } .sb-wrap .sb-prog { margin-top: 8px; border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 600; background: var(--ge-bg-soft); color: var(--ge-text-sub); } .sb-prog.ok { background: var(--ge-c-emerald-bg); color: var(--ge-c-emerald); } .sb-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .sb-steps li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ge-text-body); } .sb-steps li i { width: 22px; height: 22px; border-radius: 50%; background: var(--sb-accent-soft); color: var(--sb-accent); font-style: normal; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; } .sb-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .sb-docs span { font-size: 12px; font-weight: 600; color: var(--ge-text-body); background: var(--ge-bg-soft); padding: 6px 11px; border-radius: 999px; } .sb-wrap .sb-src { margin: 0 16px; border-radius: 10px; background: var(--sb-accent-soft); color: var(--sb-accent); padding: 10px 14px; font-size: 12px; line-height: 1.5; } .sb-panel-f { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px 14px; background: var(--ge-surface); border-top: 1px solid var(--ge-line); display: flex; gap: 8px; } .sb-panel-f .sb-btn { height: 46px; font-size: 15px; } .sb-panel-f .sb-btn.wish { flex: 0 0 46px; padding: 0; border: 1px solid var(--ge-line); background: var(--ge-surface); color: var(--ge-text-sub); } .sb-panel-f .sb-btn.wish.on { color: var(--sb-accent); border-color: var(--sb-accent-line); background: var(--sb-accent-soft); } .sb-panel-f .sb-btn.wish svg { width: 20px; height: 20px; } .sb-panel-f .sb-btn.go { flex: 1; background: var(--sb-accent); color: #fff; } .sb-panel-f .sb-btn.go.dim { opacity: .75; } @media (max-width: 1200px) { .sb-panel { width: 100%; animation: sbUp .22s ease-out; } @keyframes sbUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } } /* ---------- 토스트 ---------- */ .sb-wrap .sb-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 10005; background: #111827; color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 999px; max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 20px rgba(0,0,0,.25); } /* ---------- 여행지원금 ---------- */ .sb-tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .sb-tr-note { margin-top: 14px; } /* 안내 문구: 지도·목록(.sb-tr) 아래 */ .sb-tr > * { min-width: 0; } @media (min-width: 1201px) { .sb-tr { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; } .sb-tr-list { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } } .sb-map { position: relative; border-radius: 12px; overflow: hidden; background: #E9EFF5; border: 1px solid var(--ge-line); } :root[data-ge-theme="dark"] .sb-map { background: #14202c; } .sb-map svg { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 540 / 630; user-select: none; } /* = subsidy.js MAP_VB 비율 */ /* 울릉도·독도 표식: 뷰박스 밖이라 오른쪽 가장자리에 (프로토타입과 같은 모양). 누르면 경북 */ .sb-map .isl { position: absolute; right: 0; top: 21%; height: 28px; padding: 0 8px 0 10px; border-radius: 999px 0 0 999px; background: rgba(255,255,255,.92); box-shadow: 0 1px 6px rgba(0,0,0,.12); font-size: 11px; font-weight: 600; color: #6b7280; display: inline-flex; align-items: center; gap: 5px; } .sb-map .isl i { display: inline-block; border-radius: 50%; background: #c9d6e3; border: 1px solid #fff; } .sb-map .isl .d1 { width: 10px; height: 10px; } .sb-map .isl .d2 { width: 7px; height: 7px; margin-left: 3px; } .sb-map .isl.on i { background: #7fb2ff; } .sb-map .st { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .sb-map .st::-webkit-scrollbar { display: none; } .sb-map .st button { flex: 0 0 auto; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 1px 6px rgba(0,0,0,.12); font-size: 12px; font-weight: 700; color: #374151; display: inline-flex; align-items: center; gap: 5px; } .sb-map .st button.on { background: #111827; color: #fff; } .sb-map .st .dot { width: 8px; height: 8px; border-radius: 50%; } .sb-map .legend { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: #6b7280; display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 999px; } .sb-map .legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 3px; } .sb-map path { cursor: pointer; transition: fill .15s; } .sb-map g.lb { cursor: pointer; } .sb-tr-list .head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--ge-line); } .sb-tr-list .head b { font-size: 15px; color: var(--ge-text); } .sb-tr-list .head span { font-size: 12px; color: var(--ge-text-sub); } .sb-tr-list .head .x { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; color: var(--ge-text-sub); font-size: 18px; display: flex; align-items: center; justify-content: center; } .sb-tr-list .head .x:hover { background: var(--ge-bg-soft); } .sb-tr-list .chips { padding: 10px 16px 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; } .sb-tr-list .chips::-webkit-scrollbar { display: none; } .sb-tr-items { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; } .sb-tcard { width: 100%; text-align: left; background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; transition: border-color .15s; } .sb-tcard:hover { border-color: var(--ge-text-sub); } .sb-tcard.closed { opacity: .6; } .sb-tcard .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .sb-tcard .reg { font-size: 10.5px; font-weight: 800; color: var(--ge-text-sub); background: var(--ge-bg-soft); padding: 2px 7px; border-radius: 5px; } .sb-tcard .n { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--ge-text); margin-top: 4px; } .sb-tcard .b { font-size: 13.5px; } .sb-tcard .c { font-size: 12px; color: var(--ge-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-stchip { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; } .sb-stchip.open { background: var(--ge-c-emerald-bg); color: var(--ge-c-emerald); } .sb-stchip.open.hot { background: var(--sb-warn-bg); color: var(--sb-warn); } .sb-stchip.open.today { background: #ef4444; color: #fff; } .sb-stchip.soon { background: var(--ge-bg-soft); color: var(--ge-text-sub); } .sb-stchip.closed { background: var(--ge-bg-soft); color: var(--ge-text-sub); } .sb-kv { border: 1px solid var(--ge-line); border-radius: 12px; overflow: hidden; } .sb-kv div { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--ge-line); font-size: 13px; } .sb-kv div:last-child { border-bottom: 0; } .sb-kv div span:first-child { width: 60px; flex: 0 0 auto; color: var(--ge-text-sub); } .sb-kv div span:last-child { color: var(--ge-text-body); white-space: pre-line; word-break: break-word; } .sb-kv a { color: var(--sb-accent); text-decoration: underline; } .sb-benefit { border-radius: 12px; background: var(--ge-c-emerald-bg); padding: 12px 14px; margin: 12px 0; } .sb-benefit p { font-size: 11px; color: var(--ge-c-emerald); font-weight: 700; } .sb-benefit b { font-size: 18px; } /* ---------- 여행 지도: 다크 팔레트 (svg 안 색은 subsidy.js MAP_COLORS.dark) ---------- */ :root[data-ge-theme="dark"] .sb-map .st button { background: rgba(27,38,52,.95); color: #e7e9ee; box-shadow: 0 1px 6px rgba(0,0,0,.4); } :root[data-ge-theme="dark"] .sb-map .st button.on { background: #e7e9ee; color: #111827; } :root[data-ge-theme="dark"] .sb-map .isl { background: rgba(27,38,52,.95); color: #aab4c3; box-shadow: 0 1px 6px rgba(0,0,0,.4); } :root[data-ge-theme="dark"] .sb-map .isl i { background: #3f4f63; border-color: #1b2634; } :root[data-ge-theme="dark"] .sb-map .isl.on i { background: #7fb2ff; } /* ---------- 헤더 GNB "지원금" 활성 표시 (이 CSS 는 /subsidy 에서만 로드되므로 페이지 한정) ---------- */ .header .one > li > a[href="/subsidy"] { color: #74FFE6 !important; } /* PC 라이트: 게임이벤트 .ge-nav-on 과 동일 */ :root[data-ge-theme="dark"] .header .one > li > a[href="/subsidy"] { color: var(--ge-accent) !important; } /* PC 다크 */ .m_header_wrap .header_menu > li > a[href="/subsidy"] { color: #3f3f3f; border-bottom: 5px solid #74ffe6; } /* 모바일 라이트: 사이트 li.on 과 동일(글자색 그대로 + 민트 밑줄) */ :root[data-ge-theme="dark"] .m_header_wrap .header_menu > li > a[href="/subsidy"] { color: var(--ge-accent) !important; border-bottom-color: var(--ge-accent); } /* 모바일 다크: 게임이벤트와 동일(강조색 글자 + 밑줄) */ /* 테마 버튼: 모바일에서 사이트 플로팅 버튼(우하단)과 겹치지 않게 위로. 로컬 game-event.css 엔 같은 규칙이 있지만 실서버 game-event.css(구버전)엔 없어서 여기서도 지정 */ @media (max-width: 1200px) { .sb-wrap ~ .ge-theme-btn, .ge-theme-btn { bottom: 78px; } } /* ---------- 모바일 내 조건: 요약 바 조각 + 아래에서 올라오는 4단계 시트 (프로토타입 ProfileSheet) ---------- */ .sb-cond-head .t .segs { display: flex; align-items: center; gap: 2px; margin-top: 3px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .sb-cond-head .t .segs::-webkit-scrollbar { display: none; } .sb-cond-head .t .segs .seg { padding: 1px 5px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--ge-text); } .sb-cond-head .t .segs .seg:active { background: var(--ge-bg-soft); } .sb-cond-head .t .segs i { font-style: normal; color: var(--ge-text-sub); } .sb-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; background: var(--ge-surface); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.18); z-index: 10001; display: flex; flex-direction: column; padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); animation: sbSheetUp .26s cubic-bezier(.2,.8,.2,1); } @keyframes sbSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sb-sheet { animation: none; } } .sb-sheet-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .sb-sheet-h b { flex: 1; font-size: 17px; font-weight: 800; color: var(--ge-text); } .sb-sheet-h .x { width: 32px; height: 32px; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--ge-text-sub); display: flex; align-items: center; justify-content: center; } .sb-sheet-steps { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; flex: 0 0 auto; } .sb-sheet-steps::-webkit-scrollbar { display: none; } .sb-sheet-steps .stp { flex: 0 0 auto; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ge-bg-soft); color: var(--ge-text-sub); white-space: nowrap; } .sb-sheet-steps .stp.on { background: var(--ge-text); color: var(--ge-surface); } .sb-sheet-steps .cnt { margin-left: auto; padding-left: 6px; font-size: 12px; color: var(--ge-text-sub); white-space: nowrap; } .sb-sheet-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .sb-sheet-b .desc { font-size: 13px; line-height: 1.55; color: var(--ge-text-body); margin-bottom: 12px; } .sb-sheet-b .sb-sec-h { margin-bottom: 8px; } .sb-sheet .sb-chips.center { justify-content: center; } .sb-sheet .sb-note.center { text-align: center; } .sb-age.big { justify-content: center; gap: 18px; margin: 6px 0 14px; } .sb-age.big .pm { width: 44px; height: 44px; font-size: 22px; } .sb-age.big .mid { display: flex; flex-direction: column; align-items: center; } .sb-age.big input { width: 80px; height: auto; font-size: 32px; font-weight: 800; border: 0; border-bottom: 2px solid var(--sb-accent); border-radius: 0; background: none; padding: 0 0 2px; } .sb-age.big small { font-size: 12px; color: var(--ge-text-sub); margin-top: 4px; } .sb-sheet-f { display: flex; gap: 8px; margin-top: 14px; flex: 0 0 auto; } .sb-sheet-f .sb-btn { height: 48px; font-size: 14.5px; border-radius: 12px; } .sb-sheet-f .sb-btn.grow { flex: 1; }