/* 화면 모드 (2026-09-26 만호: "ㄴ을 기본으로, ㄱ을 다크모드로") — 기본, 다크모드는 theme-stage a: 무대 조명 (어두운 남색 + 로고의 파랑·보라·주황 빛) b: 밝고 경쾌 (흰 바탕 + 로고 색 크게, 둥근 카드) 원래대로: ?theme=off */ /* ---------- 공통: 로고 색 ---------- */ html.theme-stage, html.theme-bright { --logo-blue: #2f6bff; --logo-purple: #8a3ffc; --logo-orange: #ff8a1e; --grad: linear-gradient(100deg, var(--logo-blue), var(--logo-purple) 55%, var(--logo-orange)); } /* =================== A. 무대 조명 =================== */ html.theme-stage { --ink: #f2f1fa; --ink2: #d9d8ea; --muted: #a6a4bf; --line: rgba(255,255,255,.09); --light: #12142c; --soft: #171a38; --dark: #07081a; --coral: #ff7a45; --coral-d: #ff5f2a; --orange: #ffb35c; } html.theme-stage body { background: #0c0e22; color: var(--ink); } html.theme-stage .site-header { background: rgba(10,12,30,.86); border-bottom-color: var(--line); } html.theme-stage .site-header a, html.theme-stage .gnb > ul > li > a { color: var(--ink); } html.theme-stage .gnb .sub { background: #151836; border-color: var(--line); } html.theme-stage .gnb .sub a:hover { background: #1e2248; } html.theme-stage .logo-text, html.theme-stage .logo-text * { color: #fff; } html.theme-stage .bg-white { background: #0c0e22; } html.theme-stage .bg-light { background: radial-gradient(1200px 500px at 15% 0%, rgba(47,107,255,.14), transparent 60%), radial-gradient(900px 500px at 90% 100%, rgba(138,63,252,.14), transparent 60%), #0f1128; } html.theme-stage .bg-soft { background: radial-gradient(800px 300px at 80% 50%, rgba(255,138,30,.18), transparent 70%), #141733; } html.theme-stage .bg-dark { background: #07081a; } html.theme-stage .eyebrow { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } html.theme-stage h1, html.theme-stage h2, html.theme-stage h3 { color: #fff; } html.theme-stage .lead, html.theme-stage .muted, html.theme-stage .card .muted { color: var(--muted); } html.theme-stage .card, html.theme-stage .occ-card, html.theme-stage .feature-card, html.theme-stage .about-card, html.theme-stage .faq details, html.theme-stage .press-card, html.theme-stage .info-box, html.theme-stage .facts > div { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink); } html.theme-stage .card:hover { border-color: rgba(138,63,252,.6); box-shadow: 0 0 0 1px rgba(138,63,252,.35), 0 18px 40px rgba(47,107,255,.18); } html.theme-stage .btn-primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 8px 24px rgba(138,63,252,.35); } html.theme-stage .btn-line { color: #fff; border-color: rgba(255,255,255,.35); } html.theme-stage .more, html.theme-stage .occ-links a, html.theme-stage .card-body .eyebrow { color: var(--orange); } html.theme-stage .trust-bar { background: #0a0c1f; border-bottom-color: var(--line); } html.theme-stage .trust-bar li::before { background: var(--grad); } html.theme-stage .page-head { background: radial-gradient(700px 260px at 50% 0%, rgba(138,63,252,.28), transparent 70%), #0c0e22; } html.theme-stage .subnav, html.theme-stage .crumbs { border-color: var(--line); } html.theme-stage .form-card, html.theme-stage .inq-form { background: #13163a; color: var(--ink); border-color: var(--line); } html.theme-stage input, html.theme-stage select, html.theme-stage textarea { background: #0c0e22; color: #fff; border-color: rgba(255,255,255,.18); } html.theme-stage .consent-box, html.theme-stage .pay-note { background: rgba(255,255,255,.05); color: var(--ink2); } html.theme-stage .chips a, html.theme-stage .gal-filter .chip { background: transparent; border-color: rgba(255,255,255,.2); color: var(--ink); } html.theme-stage .chips a[aria-current="true"], html.theme-stage .gal-filter .chip.on { background: var(--grad); border-color: transparent; color: #fff; } html.theme-stage .slide .pic::after { background: linear-gradient(90deg, rgba(8,9,26,.7), rgba(8,9,26,.2) 60%, transparent), linear-gradient(0deg, rgba(8,9,26,.6), transparent 45%); } html.theme-stage .timeline li, html.theme-stage .occ-links a { border-color: var(--line); } html.theme-stage .chip-list li, html.theme-stage .about-hi li { background: rgba(255,255,255,.06); } /* =================== B. 밝고 경쾌 =================== */ html.theme-bright { --coral: #ff6a3d; --coral-d: #f25525; --orange: #ff8a1e; --light: #f3f6ff; --soft: #fff4ea; --radius: 22px; } html.theme-bright body { background: #fff; } html.theme-bright h2 { font-weight: 900; letter-spacing: -.03em; } html.theme-bright .sec-head h2 { font-size: clamp(28px, 3.6vw, 42px); } html.theme-bright .eyebrow { display: inline-block; color: #fff; background: var(--grad); padding: 5px 14px; border-radius: 999px; letter-spacing: .1em; font-size: 12px; } html.theme-bright .card-body .eyebrow, html.theme-bright .slide-copy .eyebrow { background: none; padding: 0; color: var(--logo-purple); } html.theme-bright .slide-copy .eyebrow { color: #ffd08a; } html.theme-bright .bg-light { background: #f3f6ff; } html.theme-bright .bg-soft { background: linear-gradient(100deg, #fff1e3, #f5edff); } html.theme-bright .bg-dark { background: linear-gradient(135deg, #1b1f5e, #3a1d78 60%, #5b2a86); } html.theme-bright .btn-primary { background: var(--grad); border: 0; box-shadow: 0 10px 24px rgba(138,63,252,.28); } html.theme-bright .btn-primary:hover { filter: brightness(1.06); } html.theme-bright .card { border: 0; box-shadow: 0 10px 30px rgba(30,40,90,.08); } html.theme-bright .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(60,40,140,.16); } html.theme-bright .show-card .card-body { border-top: 5px solid; border-image: var(--grad) 1; } html.theme-bright .occ-card { border: 0; box-shadow: 0 10px 30px rgba(30,40,90,.08); } html.theme-bright .occ-card:nth-child(1) .occ-body { background: #eef3ff; } html.theme-bright .occ-card:nth-child(2) .occ-body { background: #fff1e3; } html.theme-bright .occ-card:nth-child(3) .occ-body { background: #f4edff; } html.theme-bright .occ-card:nth-child(4) .occ-body { background: #e9fbf3; } html.theme-bright .occ-links a { color: var(--logo-purple); border-color: rgba(0,0,0,.07); } html.theme-bright .more { color: var(--logo-purple); } html.theme-bright .trust-bar { background: linear-gradient(100deg, #eef3ff, #f6efff 50%, #fff3e6); border: 0; } html.theme-bright .trust-bar li::before { background: var(--grad); width: 9px; height: 9px; } html.theme-bright .page-head { background: linear-gradient(120deg, #eef3ff, #f6efff 55%, #fff3e6); } html.theme-bright .chips a[aria-current="true"], html.theme-bright .gal-filter .chip.on { background: var(--grad); border-color: transparent; color: #fff; } html.theme-bright .feature-card, html.theme-bright .about-card, html.theme-bright .press-card { border-top: 0; box-shadow: 0 10px 30px rgba(30,40,90,.07); } html.theme-bright .gnb > ul > li.on > a { color: var(--logo-purple); border-color: var(--logo-purple); } /* ---------- 다크모드 버튼 ---------- */ .mode-btn { background: none; border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0; } .mode-btn svg { width: 18px; height: 18px; } .mode-btn .i-sun { display: none; } html.theme-stage .mode-btn .i-sun { display: block; color: #ffd08a; } html.theme-stage .mode-btn .i-moon { display: none; } html.theme-stage .mode-btn { border-color: rgba(255,255,255,.2); } html.theme-stage { color-scheme: dark; } html.theme-bright .occ-body, html.theme-stage .occ-body { flex: 1; } html.theme-stage .quickbar { background: #0c0e22; border-top-color: rgba(255,255,255,.1); } html.theme-stage .quickbar a { color: #f2f1fa; } html.theme-stage .quickbar a:last-child { color: #fff; } /* 다크모드 보정: 흰 바탕이 남아 있던 곳 (2026-09-26 점검) */ html.theme-stage .subnav { background: #0c0e22; } html.theme-stage .subnav a[aria-current="page"] { color: #fff; } html.theme-stage .form-note { background: rgba(255,179,92,.12); color: var(--ink2); } html.theme-stage .side-item, html.theme-stage .post-list li, html.theme-stage .pager a { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink); } html.theme-stage .post-list a { color: var(--ink); } html.theme-stage .tag { background: rgba(255,255,255,.1); color: #fff; } html.theme-stage .lb { background: rgba(4,5,15,.95); }