@charset "utf-8"; :root { --table-blue: #0055ec; --blue: #5089ef; --skyblue: #eaf4ff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e00024; --sky-pink: #fff8f9; --red: #dc3545; --orange: #fd7e14; --sky-orange: #fff0e4; --yellow: #ffc107; --green: #009944; --teal: #d7e9df; --cyan: #17a2b8; --white: #fff; --background-white: #f8f8f8; --gray: #6c757d; --gray-dark: #454545; --primary: #007bff; --secondary: #eceef2; --success: #28a745; --info: #17a2b8; --deep-green: #388d6e; --sky-green: #eef5e9; --warning: #ffc107; --danger: #dc3545; --dark: #bdbdbd; --light: #eeeeee; } /* 폰트 정의 */ @font-face { font-family: "yungju"; src: url(../font/YEONGJUPunggiGinseng.ttf); } @font-face { font-family: "Pretendard-B"; src: url(../font/Pretendard-Bold.ttf); } @font-face { font-family: "Pretendard-R"; src: url(../font/Pretendard-Regular.ttf); } @font-face { font-family: "Pretendard-M"; src: url(../font/Pretendard-Medium.ttf); } @font-face { font-family: "Pretendard-L"; src: url(../font/Pretendard-Light.ttf); } @font-face { font-family: "GmarketSans-B"; src: url(../font/GmarketSansTTFBold.ttf); } @font-face { font-family: "GmarketSans-M"; src: url(../font/GmarketSansTTFMedium.ttf); } @font-face { font-family: "GmarketSans-L"; src: url(../font/GmarketSansTTFLight.ttf); } /* box-sizing 규칙을 명시합니다. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* 폰트 크기의 팽창을 방지합니다. */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; width: 100%; height: 100%; font-size: 10px; font-family: 'Pretendard-R'; } /* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0; } /* list를 role값으로 갖는 ul, ol 요소의 기본 목록 스타일을 제거합니다. */ ul, ol, li { list-style: none; } /* 핵심 body의 기본값을 설정합니다. */ body,#root { height: 100%; line-height: 1.5; background-color: var(--white); } /* 제목 요소와 상호작용하는 요소에 대해 line-height를 더 짧게 설정합니다. */ h1, h2, h3, h4, button, input, label { line-height: 1.1; } /* 제목에 대한 text-wrap을 balance로 설정합니다. */ h1, h2, h3, h4 { text-wrap: balance; } /* 클래스가 없는 기본 a 태그 요소는 기본 스타일을 가져옵니다. */ a { text-decoration: none; color: #333; } /* 이미지 관련 작업을 더 쉽게 합니다. */ img, picture { max-width: 100%; display: block; } /* input 및 button 항목들이 글꼴을 상속하도록 합니다. */ input, button, textarea, select { font: inherit; font-size: 1.6rem; } input[type="text"], input[type="date"], input[type="number"], input[type="password"], button, select{ height: 4rem; } input:focus, select:focus, textarea:focus { outline: none; } input::placeholder, textarea::placeholder { color: var(--light); } button { background: inherit; border: none; box-shadow: none; border-radius: 0; padding: 0; /* overflow:visible; */ cursor: pointer; font-size: 1.3rem; } /* 행 속성이 없는 textarea가 너무 작지 않도록 합니다. */ textarea:not([rows]) { width: 100%; min-height: 29rem; } /* 고정된 모든 항목에는 여분의 스크롤 여백이 있어야 합니다. */ :target { scroll-margin-block: 5ex; } table { width: 100%; border-collapse: collapse; table-layout: fixed; word-break:break-all; } table th, table td { font-size: 1.6rem; } select, input, textarea { padding: 0.7rem 1rem; border: 1px solid #ddd; border-radius: 5px; } svg { vertical-align: middle; } /* 스크롤바 디자인 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: #ededed; border-radius: 10px; } ::-webkit-scrollbar-track { background-color: #fff; border-radius: 10px; }