@font-face{ font-family:'Pretendard Variable'; font-weight:45 920; font-style:normal; font-display:swap; src:url('./fonts/PretendardVariable.woff2') format('woff2-variations'); } /* =========================================================== May co., ltd. 웹 디자인 스탠다드 — 색·글꼴 토큰 =========================================================== 이 파일은 고치지 마세요. 페이지마다 그대로 가져다 씁니다. · 색은 반드시 var(--…) 로만 씁니다. HEX 를 직접 쓰면 테마가 깨집니다. · 테마는 로 바뀝니다. 각 페이지 안 스크립트가 첫 그림 전에 값을 넣습니다. · 새 색이 필요하면 여기에 추가하지 말고 먼저 물어보세요. 자주 쓰는 것만 추리면 이렇습니다. --bg 페이지 바탕 --surface 카드·패널 (바탕 위에 올라가는 면) --sf1~sf8 한 단계씩 다른 보조 면 (표 머리 sf1, hover sf2, 칩 sf4 …) --line 테두리 --line-2 약한 안쪽 구분선 --text 본문 글자 --heading 제목·강조 글자 --tx2~tx5 본문보다 조금 낮춘 글자 --muted 라벨·부가정보 --muted-2 비활성·자리표시 --mint 브랜드 포인트 (세 테마에서 값이 같습니다) --solid 진한 버튼 배경 --solidink 그 위의 글자 --headerbg 헤더·상단바 --footerbg 푸터 --ovl 팝업 뒤 덮개 --shadow 떠 있는 요소 그림자 =========================================================== */ :root{ /* 테마와 관계없이 고정 — 브랜드 색 */ --navy:#0f1628; --mint:#52ccbf; --danger:#e5484d; --warn:#f5a524; --info:#1f6fd0; /* 모양 값 */ --radius:12px; --radius-sm:8px; --radius-btn:10px; --header-h:70px; --maxw:1600px; --pad-x:30px; --t:.16s ease; --font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Malgun Gothic',sans-serif; } :root, html[data-theme="light"]{ /* Light — v86 과 같은 값입니다. 바꾸지 마세요. */ --bg:#f5f6f8; --surface:#ffffff; --sf1:#fafbfc; --sf2:#f6f7f9; --sf3:#f4f5f7; --sf4:#f2f4f7; --sf5:#f2f3f6; --sf6:#eef0f3; --sf7:#eceef2; --sf8:#e9ecf1; --line:#e6e8ec; --navline:#e6e8ec; --line-2:#f0f1f4; --ln2:#cdd2da; --ln3:#c9ced7; --ln4:#ccd1d9; --chipline:rgba(15,22,40,.16); --chipclip:padding-box; --text:#161616; --heading:#0f1628; --tx2:#4c5462; --tx3:#5b6373; --tx4:#6b7382; --tx5:#3d4552; --muted:#7a8190; --muted-2:#9aa1ad; --mu3:#c5c9d1; --mu4:#98a0ac; --mu5:#a3a9b4; --mu6:#c2c7d0; --mu7:#b6bcc6; --mu8:#b3b9c4; --mu9:#d3d7de; --mu10:#c9ccd3; --good:#0e9c8e; --good2:#0d7b70; --good3:#0e7b71; --good4:#0c6f66; --good5:#1fa898; --okbg:#e4f7f4; --okbg2:#eaf9f7; --tintdanger:#fdf2f2; --tintdanger2:#fdf1f1; --tintwarn:#fff5e6; --tintwarn2:#fff8ed; --tintwarn3:#fff4e5; --lndanger:#f3d7d8; --lnwarn:#f0d9ae; --lnwarn2:#f3ddb4; --onwarn:#8a5a12; --onwarn2:#8a5a00; --onwarn3:#6d4600; --onwarn4:#9a6300; --onwarn5:#a98341; --ondanger:#a8353a; --headerbg:#0f1628; --footerbg:#161616; --panel:#0f1628; --solid:#0f1628; --solidink:#ffffff; --solidhover:#1a2440; --ovl:rgba(15,22,40,.6); --ovl2:rgba(15,22,40,.5); --ovl3:rgba(20,26,38,.5); --shadow:0 1px 2px rgba(15,22,40,.04), 0 10px 28px rgba(15,22,40,.07); } html[data-theme="navy"]{ /* Navy — 네이비 계열 안에서 밝기 단계를 넓혔습니다. */ --bg:#080f1e; --surface:#16203a; --sf1:#0f1a2e; --sf2:#24314f; --sf3:#1c2740; --sf4:#202c48; --sf5:#1a2438; --sf6:#283654; --sf7:#2b395a; --sf8:#2f3f63; --line:#303f61; --navline:#1a253f; --line-2:#24304a; --ln2:#41537a; --ln3:#41537a; --ln4:#3d4f75; --chipline:rgba(255,255,255,.42); --chipclip:padding-box; --text:#eef1f6; --heading:#ffffff; --tx2:#c3cbdb; --tx3:#b3bdce; --tx4:#a6b1c4; --tx5:#d3dae7; --muted:#98a3b6; --muted-2:#75819b; --mu3:#5c6985; --mu4:#7e8ba3; --mu5:#7a879f; --mu6:#606d89; --mu7:#67748f; --mu8:#64718d; --mu9:#4f5c78; --mu10:#596682; --good:#4fd0c0; --good2:#62d9ca; --good3:#62d9ca; --good4:#6fdccd; --good5:#5fd8c8; --okbg:rgba(82,204,191,.16); --okbg2:rgba(82,204,191,.13); --tintdanger:rgba(229,72,77,.15); --tintdanger2:rgba(229,72,77,.15); --tintwarn:rgba(245,165,36,.15); --tintwarn2:rgba(245,165,36,.15); --tintwarn3:rgba(245,165,36,.15); --lndanger:rgba(229,72,77,.35); --lnwarn:rgba(245,165,36,.32); --lnwarn2:rgba(245,165,36,.32); --onwarn:#f0c169; --onwarn2:#f0c169; --onwarn3:#f7d79b; --onwarn4:#edbd6a; --onwarn5:#d7b177; --ondanger:#ff9ea1; --headerbg:#0a1224; --footerbg:#060c18; --panel:#1d2947; --solid:#2a3a63; --solidink:#ffffff; --solidhover:#34477a; --ovl:rgba(4,8,16,.68); --ovl2:rgba(4,8,16,.6); --ovl3:rgba(4,8,16,.6); --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45); } html[data-theme="dark"]{ /* Dark — 무채색 계열 안에서 밝기 단계를 넓혔습니다. */ --bg:#121212; --surface:#1e1e1e; --sf1:#181818; --sf2:#2f2f2f; --sf3:#272727; --sf4:#2b2b2b; --sf5:#232323; --sf6:#333333; --sf7:#383838; --sf8:#3d3d3d; --line:#383838; --navline:#262626; --line-2:#2b2b2b; --ln2:#484848; --ln3:#484848; --ln4:#454545; --chipline:rgba(255,255,255,.42); --chipclip:padding-box; --text:#e3e3e3; --heading:#f5f5f5; --tx2:#c8c8c8; --tx3:#b7b7b7; --tx4:#aaaaaa; --tx5:#d3d3d3; --muted:#9e9e9e; --muted-2:#767676; --mu3:#5f5f5f; --mu4:#818181; --mu5:#7d7d7d; --mu6:#636363; --mu7:#6b6b6b; --mu8:#686868; --mu9:#575757; --mu10:#5c5c5c; --good:#4fd0c0; --good2:#62d9ca; --good3:#62d9ca; --good4:#6fdccd; --good5:#5fd8c8; --okbg:rgba(82,204,191,.16); --okbg2:rgba(82,204,191,.13); --tintdanger:rgba(229,72,77,.15); --tintdanger2:rgba(229,72,77,.15); --tintwarn:rgba(245,165,36,.15); --tintwarn2:rgba(245,165,36,.15); --tintwarn3:rgba(245,165,36,.15); --lndanger:rgba(229,72,77,.35); --lnwarn:rgba(245,165,36,.32); --lnwarn2:rgba(245,165,36,.32); --onwarn:#f0c169; --onwarn2:#f0c169; --onwarn3:#f7d79b; --onwarn4:#edbd6a; --onwarn5:#d7b177; --ondanger:#ff9ea1; --headerbg:#101010; --footerbg:#161616; --panel:#2a2a2a; --solid:#3a3a3a; --solidink:#f5f5f5; --solidhover:#464646; --ovl:rgba(0,0,0,.68); --ovl2:rgba(0,0,0,.6); --ovl3:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.5); } /* 예전 이름 이어주기 */ :root{ --white:var(--surface); --ink:var(--text); --accent:var(--mint); --accent-ink:var(--navy); --accent-soft:rgba(82,204,191,.14); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font); background:var(--bg);color:var(--text); font-size:15px;line-height:1.55;letter-spacing:-.012em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} button{cursor:pointer;border:none;background:none} img{display:block} ::selection{background:var(--mint);color:var(--navy)} .mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace} /* =========================================================== 테마 고르기 — 두 페이지가 같은 모양을 씁니다 =========================================================== */ .thsel{display:flex;gap:6px;flex-wrap:wrap} .thsel button{ height:36px;padding:0 14px;border-radius:9px; font-size:13px;font-weight:700;letter-spacing:-.01em; background:none;border:1px solid var(--line);color:var(--tx2); transition:background .15s,color .15s,border-color .15s; } .thsel button:hover{border-color:var(--ln3)} .thsel button[aria-checked="true"]{ background:var(--mint);border-color:var(--mint);color:var(--navy); }