@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

/* View Transitions API - 페이지 전환 애니메이션 */
@view-transition {
    navigation: auto;
}

/* 기본 애니메이션 속도 설정 */
::view-transition-group(root) {
    animation-duration: 0.15s;
}

/****************************************************************************************************************************************
reset 시작
*****************************************************************************************************************************************/
* {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    font-family: "Noto Sans KR", serif;
}

html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
p,
a,
span,
td,
th {
    word-break: keep-all;
}

li,
p,
span,
strong,
i,
em,
address {
    font-size: inherit;
    color: inherit;
    font-family: inherit;
}

b,
strong {
    font-weight: 700;
    color: inherit;
    font-size: inherit;
}

input,
select,
button,
img {
    vertical-align: middle;
    outline: none;
}

img,
fieldset,
iframe {
    border: 0 none
}

img {
    max-width: 100%;
}

label,
button {
    cursor: pointer
}

input,
select,
button,
textarea {
    margin: 0;
    padding: 0;
    border: 0;
    transition: 0.2s;
}

/* button:focus,
textarea:focus,
textarea:focus-visible {outline: none !important; border: none !important;} */

ol,
ul {
    position: relative;
    margin: 0 auto;
    padding: 0;
}

ol,
ul,
li {
    list-style: none;
}

li {
    transition: 0.2;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

textarea {
    resize: none;
    outline: none;
}

div {
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th {
    font-weight: normal;
}


a {
    text-decoration: none;
    color: var(--color);
    outline: none;
    transition: 0.2s;
}

a:hover {
    text-decoration: none;
    color: var(--color);
    outline: none;
}

a:active {
    text-decoration: none;
    color: var(--color);
    outline: none;
}

a:visited {
    text-decoration: none;
    color: var(--color);
    outline: none;
}

a:focus {
    text-decoration: none;
    color: var(--color);
    outline: none;
    box-shadow: none;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: #2c2c2c;
}

::-webkit-scrollbar-track {
    background: #2c2c2c;
}

::-webkit-scrollbar-thumb {
    background: #9f9f9f;
}

/****************************************************************************************************************************************
SweetAlert2 최상위 레이어 보장
*****************************************************************************************************************************************/
.swal2-container {
    z-index: var(--z-alert) !important;
}

.swal2-popup {
    z-index: var(--z-alert) !important;
}

/****************************************************************************************************************************************
에러 페이지 (404, 500)
*****************************************************************************************************************************************/
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px 20px;
}

.error-code {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--blue-color), var(--purple-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.85;
    margin-bottom: 16px;
}

html[data-theme="light"] .error-code {
    background: linear-gradient(135deg, var(--blue-color), var(--darkOrange-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.9;
}

.error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color);
    margin: 0 0 12px;
}

.error-message {
    font-size: 0.95rem;
    color: var(--secondary);
    margin: 0 0 32px;
}

.error-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--bg-layer3);
    color: var(--color);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.error-home-btn:hover {
    background: var(--bg-layer4);
    color: var(--color);
    text-decoration: none;
}

html[data-theme="light"] .error-home-btn {
    background: var(--blue-color);
    color: #fff;
}

html[data-theme="light"] .error-home-btn:hover {
    background: #1060c0;
    color: #fff;
}