@font-face {
    font-family: 'Hand';
    src: url('../fonts/LeeSeoyun.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Dotum';
    src: url('../fonts/GowunDodum-Regular.woff2') format('woff2');
    font-weight: 100;
}

@font-face {
    font-family: 'Normal';
    src: url('../fonts/IBMPlexSansKR-ExtraLight.woff2') format('woff2');
    font-weight: 200;
}

@font-face {
    font-family: 'Normal';
    src: url('../fonts/IBMPlexSansKR-Light.woff2') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'Normal';
    src: url('../fonts/IBMPlexSansKR-Text.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Normal';
    src: url('../fonts/IBMPlexSansKR-Medium.woff2') format('woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'Normal';
    src: url('../fonts/IBMPlexSansKR-SemiBold.woff2') format('woff2');
    font-weight: 600;
}

@font-face {
    font-family: 'Normal';
    src: url('../fonts/IBMPlexSansKR-Bold.woff2') format('woff2');
    font-weight: 700;
}


@font-face {
    font-family: 'Icon_Solid';
    src: url('../icons/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Icon_Regular';
    src: url('../icons/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Icon_Light';
    src: url('../icons/webfonts/fa-light-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Icon_Thin';
    src: url('../icons/webfonts/fa-thin-100.woff2') format('woff2');
}
@font-face {
  font-family: 'Icon_Custom';
  src: url('../icons/webfonts/custom-icons.woff2') format('woff2');
}

/* 라이트모드 */
html[data-theme="light"] body {
    /* 종이와 잉크 */
    --theme-overlay: repeating-linear-gradient(50deg, rgba(0, 0, 0, 0.6) 0px, rgba(0, 0, 0, 0.6) 1px, rgba(0, 0, 0, 0.7) 1px, rgba(0, 0, 0, 0.7) 5px);
    --theme-disabled: repeating-linear-gradient( 55.5deg, rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0.7) 1px, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0.05) 5px );
    --theme-read: repeating-linear-gradient( 55.5deg, rgba(255, 255, 255, 0.4) 0px, rgba(255, 255, 255, 0.4) 1px, rgba(0, 0, 0, 0.03) 1px, rgba(0, 0, 0, 0.03) 5px);
    --theme-background: linear-gradient(to bottom, #EEE, #e0e0e0);
    --theme-background-popup: linear-gradient(to bottom, #EEE, #e0e0e0);
    --theme-background-popup-shadow-transperancy: 0.1; /* 팝업 그림자 투명도 */
    --theme-background-mean: #e7e7e7;
    --theme-icon-background: 255,255,255;
    --theme-paper: #FDFDFD; /* 밝은 테마 색상 */
    --theme-paper-rgb: 253, 253, 253; /* 밝은 테마 색상 RGB 값 */
    --theme-ink: #333; /* 어두운 테마 색상 */
    --theme-ink-ii: #666; /* 어두운 테마 색상 */
    --theme-ink-rgb: 51, 51, 51; /* 어두운 테마 색상 RGB 값 */
    --theme-shadow: rgba(0, 0, 0, 0.7); /* 그림자 효과 */
    --theme-shadow-weak: rgba(0, 0, 0, 0.1);
    /* 비활성화된 종이와 잉크 색상 */
    --theme-disabled-paper: #ccc; /* 비활성화된 테마 색상 */
    --theme-disabled-ink: #777; /* 비활성화된 테마 색상 */
    /* 기본 테마 색상 */
    --theme-color: #FBD230;
    --theme-color-light: #E6D9A8; /* 기본 테마 색상 */
    --theme-color-hover: #EDC524;
    --theme-color-active: #CFAA19;
    --theme-color-rgb: 251, 210, 48; /* 기본 테마 색상 RGB 값 */

    --theme-dark: #eee; /* 어두운 테마 색상 */
    --theme-dark-hover: #aaa; /* 어두운 테마 색상 */
    --theme-dark-active: #ccc; /* 어두운 테마 색상 */
    --theme-dark-ink: #fdfdfd; /* 어두운 테마 색상 잉크 */
    /* 비상 테마 색상 */
    --theme-color-critical-ink: #fdfdfd;
    --theme-color-critical: #DB5000;
    --theme-color-critical-hover: #E15F14; /* 비상 테마 색상 */
    --theme-color-critical-active: #A83D00; /* 비상 테마 색상 */
    --theme-color-critical-rgb: 219, 80, 0; /* 비상 테마 색상 RGB 값 */
    /* 플랫 색상 */
    --theme-color-flat: #f8f8f8; /* 플랫 색상 */
}

/* 다크모드 */
html[data-theme="dark"] body {
    /* 종이와 잉크 */
    --theme-overlay: repeating-linear-gradient(50deg, rgba(0, 0, 0, 0.8) 0px, rgba(0, 0, 0, 0.8) 1px, rgba(0, 0, 0, 0.6) 1px, rgba(0, 0, 0, 0.6) 5px);
    --theme-disabled: repeating-linear-gradient( 55.5deg, rgba(255, 255, 255, 0.15) 0px, rgba(255, 255, 255, 0.15) 1px, rgba(255, 255, 255, 0.02) 1px, rgba(255, 255, 255, 0.02) 5px );
    --theme-read: repeating-linear-gradient( 55.5deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.00) 1px, rgba(255, 255, 255, 0.00) 5px );
    --theme-background: linear-gradient(to bottom, #383838, #181818);
    --theme-background-popup: #282828;
    --theme-background-popup-shadow-transperancy: 0.22; /* 팝업 그림자 투명도 */
    --theme-background-mean: #282828;
    --theme-icon-background: 0,0,0;
    --theme-paper: #555; /* 밝은 테마 색상 */
    --theme-paper-rgb: 85, 85, 85; /* 밝은 테마 색상 RGB 값 */
    --theme-ink: #CBCBCB; /* 어두운 테마 색상 */
    --theme-ink-ii: #8B8B8B; /* 어두운 테마 색상 */
    --theme-ink-rgb: 203, 203, 203; /* 어두운 테마 색상 RGB 값 */
    --theme-shadow: rgba(0, 0, 0, 1); /* 그림자 효과 */
    --theme-shadow-weak: rgba(0, 0, 0, 0.5);
    /* 비활성화된 종이와 잉크 색상 */
    --theme-disabled-paper: #444; /* 비활성화된 테마 색상 */
    --theme-disabled-ink: #777; /* 비활성화된 테마 색상 */
    /* 새로운 테마 색상 */
    --theme-color: #275DBA; /* 기본 */
    --theme-color-light: #293a58;
    --theme-color-hover: #254F99; /* 호버 */
    --theme-color-active: #1F4280; /* 액티브 */
    --theme-color-rgb: 39, 93, 186; /* 기본 테마 색상 RGB 값 */

    --theme-dark: #eee; /* 어두운 테마 색상 */
    --theme-dark-hover: #aaa; /* 어두운 테마 색상 */
    --theme-dark-active: #ccc; /* 어두운 테마 색상 */
    --theme-dark-ink: #fdfdfd; /* 어두운 테마 색상 잉크 */
    /* 비상 테마 색상 */
    --theme-color-critical-ink: #fdfdfd;
    --theme-color-critical: #C45312;
    --theme-color-critical-hover: #E15F14; /* 비상 테마 색상 */
    --theme-color-critical-active: #FA782D; /* 비상 테마 색상 */
    --theme-color-critical-rgb: 196, 83, 18; /* 비상 테마 색상 RGB 값 */
    /* 플랫 색상 */
    --theme-color-flat: #444; /* 플랫 색상 반전 */
}

:root {
    --theme-radius: 0.75rem;
    --theme-radius-small: 0.35rem;
}

/* 공통 스타일 카피금지*/
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 하이라이트 완전 제거 */
/*    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;*/
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
    width: 0.3rem;
}
/* 
*::-webkit-scrollbar-thumb {
    border-radius: 0.2rem;
} */

* {
    padding: 0;
    margin: 0;
}

body,html {
    font-family: 'Normal','Dotum','Hand';
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 260%;
    margin: 0;
    padding: 0%;
    height: 100vh;
    width: 100%;
    background: var(--theme-background);
    background-attachment: fixed;
    color: var(--theme-ink);
    transition: background 0.3s ease, color 0.3s ease;
}

background-ui {
    position: fixed;
    inset: 0; /* top, left, right, bottom = 0과 같음 */
    z-index: 0; /* 배경이니까 낮은 z-index */
    text-align: right;
}

theme-switch {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2; /* 컨텐츠니까 높은 z-index */
}

theme-scrolltotop {
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 2; /* 컨텐츠니까 높은 z-index */
}

body-ui {
    position: relative;
    z-index: 1; /* 컨텐츠니까 높은 z-index */
}

.icon-browser {
    cursor: pointer;
    user-select: none;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20%;
    background-color: rgba(var(--theme-icon-background), 0.8); /* 아이콘 배경색 */
    transition: background 0.2s ease;
}

.icon-browser:hover {
    background-color: var(--theme-color);
}

.icon-browser:active {
    background-color: var(--theme-color-active);
}


.highlight {
    background: none; /* 기본 배경 제거 */
    box-shadow: inset 0 -0.7rem 0 var(--theme-color); /* 노란색 형광펜 */
    display: inline; /* 줄바꿈 시 자연스럽게 적용 */
    cursor: pointer;
}
.highlight:hover {
    box-shadow: inset 0 -0.7rem 0 var(--theme-color-hover); /* 노란색 형광펜 */
}

b {
    font-weight: 600;
}

a {
    color: var(--browser-text);
    text-decoration: none;
    cursor: pointer;
    background: none; /* 기본 배경 제거 */
    box-shadow: inset 0 -0.7rem 0 var(--theme-color); /* 노란색 형광펜 */
    display: inline; /* 줄바꿈 시 자연스럽게 적용 */
    transition: box-shadow 0.2s ease;
    font-weight: 600;
}

a:hover {
    box-shadow: inset 0 -0.7rem 0 var(--theme-color-active); /* 노란색 형광펜 */
}

button {
    vertical-align: middle;
    font-family: 'Normal';
    font-weight: 500;
    font-size: 1.02rem;
    line-height: 220%;
    border-radius: var(--theme-radius);
    padding: 0rem 1rem;
    cursor: pointer;
    user-select: none;
    color: var(--theme-ink);
    background-color: var(--theme-color);
    background-clip: padding-box; /* 테두리 안쪽에 배경색 적용 */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.05s ease;
    border: 2px solid var(--theme-color); /* 기본 테두리 색상 */
    white-space: nowrap;
    overflow: visible;
}

/* 호버 (올렸을 때) */
button:hover:not(:disabled) {
    background-color: var(--theme-color-hover);
    border: 2px solid var(--theme-color-active);
}

/* 눌렀을 때 */
button:active:not(:disabled) {
    background-color: var(--theme-color-active);
}

/* 비활성화 상태 - 더 높은 우선순위로 */
button:disabled {
    cursor: not-allowed !important;
    color: var(--theme-disabled-ink) !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 2px dashed var(--theme-disabled-paper) !important;
    opacity: 0.6;
}

button.critical {
    color: var(--theme-color-critical-ink);
    border: 2px solid var(--theme-color-critical);
    background-color: var(--theme-color-critical);
}

button.critical:hover:not(:disabled) {
    background-color: var(--theme-color-critical-hover);
    border: 2px solid var(--theme-color-critical-active);
}

button.critical:active:not(:disabled) {
    background-color: var(--theme-color-critical-active);
}

button.critical:disabled {
    cursor: not-allowed !important;
    color: var(--theme-disabled-ink) !important;
    background-color: transparent !important;
    border: 2px dashed var(--theme-disabled-paper) !important;
    opacity: 0.6;
}

input {
    flex: 1 1 0;
    min-width: 1rem;
    width:100%;
    box-sizing: border-box;
    vertical-align: middle;
    font-family: 'Normal';
    font-weight: 500;
    font-size: 1.02rem;
    line-height: 220%;
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: var(--theme-radius);
    padding: 0rem 1rem;
    user-select: none;
    color: var(--theme-ink);
    background-color: var(--theme-paper);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.05s ease;
    border: 2px solid var(--theme-paper);
    white-space: nowrap;
}

input:hover {
    background-color: var(--theme-paper);
    border: 2px solid var(--theme-color);
}
input:focus {
    background-color: var(--theme-paper);
    border: 2px solid var(--theme-color);
    outline: none; /* 포커스 시 기본 테두리 제거 */
}
input::placeholder {
    font-weight: 300;
    font-style: italic;
    opacity: 0.8;
    color: var(--theme-ink);
}
input:disabled {
    cursor: not-allowed;
    color: var(--theme-disabled-ink);
    background-color: transparent;
    border: 2px dashed var(--theme-disabled-paper);
}
input:disabled::placeholder {
    color: var(--theme-disabled-ink);
    opacity: 0;
}
.input-select {
    vertical-align: middle;
    font-family: 'Normal';
    font-weight: 500;
    font-size: 1.02rem;
    line-height: 220%;
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: var(--theme-radius);
    padding: 0rem 1rem; /* 오른쪽 padding 늘림 */
    padding-right: 2.2rem;
    user-select: none;
    color: var(--theme-ink);
    background-color: var(--theme-color);
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                transform 0.05s ease;

    appearance: none; /* 기본 꺾쇠 제거 */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 2px center; /* ← 아이콘 위치 조정 */
    background-size: 24px;
    border: 2px solid var(--theme-color);
}

.input-select:hover {
    background-color: var(--theme-color);
    border: 2px solid var(--theme-color-hover);
}
.input-select:active {
    background-color: var(--theme-color-active);
    border: 2px solid var(--theme-color);
}
.input-select:disabled {
    cursor: not-allowed;
    color: var(--theme-disabled-ink);
    background-color: transparent;
    border: 2px dashed var(--theme-disabled-paper);
}
.input-select option {
    color: var(--theme-ink);
    background-color: var(--theme-paper);
}
.input-select option:checked {
    background-color: var(--theme-color); /* 예: #f97316 */
    color: var(--theme-color-ink); /* 선택된 글자색 */
}

.input-select.critical {
    color: var(--theme-color-critical-ink);
    background-color: var(--theme-color-critical);
}
.input-select.critical:hover {
    background-color: var(--theme-color-critical-hover);
    border: 2px solid var(--theme-color-critical-active);
}
.input-select.critical option {
    color: var(--theme-ink);
    background-color: var(--theme-paper);
}

/* 선택된 항목 배경색 변경 (기본 파란색 → theme 선택색) */
.input-select.critical option:checked {
    background-color: var(--theme-color-critical); /* 예: #f97316 */
    color: var(--theme-color-critical-ink); /* 선택된 글자색 */
}


.modal-overlay {
    z-index: 9998; /* 모달이 다른 요소 위에 오도록 설정 */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    /* background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; */
        background: repeating-linear-gradient(50deg,
                rgba(0, 0, 0, 0.6) 0px,
                rgba(0, 0, 0, 0.6) 1px,
                rgba(0, 0, 0, 0.7) 1px,
                rgba(0, 0, 0, 0.7) 5px);
}
.modal-box {
    z-index: 9999; /* 모달이 다른 요소 위에 오도록 설정 */
    border: none;
    border-radius: 1rem;
    background: var(--theme-background-popup); padding: 1rem; min-width: 15rem;
    

    /* 그림자 효과 */
    box-shadow: 0rem 0rem 4rem var(--theme-shadow);
    animation: modalSlideIn 0.3s ease-out;
}
.modal-box > .title {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.5;
}
.modal-box > .button-group {
    display: flex; justify-content: right; align-items: center; margin-top: 1rem;
}
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}



.page {
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    max-width: 60rem;
    margin: 0 auto; /* ➜ 브라우저 가로 중앙 정렬 */
}

hr {
    height: 2rem;
    border: none;
    height: 2px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(var(--theme-ink-rgb), 0.16) 0,
        rgba(var(--theme-ink-rgb), 0.16) 8px,
        transparent 8px,
        transparent 16px
    );
}



.halfline {
    height: 1rem;
}

.pr {
    padding-right: 0.5rem;
}

.pl {
    padding-left: 0.5rem;
}

.info {
    font-size: 0.9rem;
    line-height: 150%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info > div::before {
    content: '\f00c'; /* Font Awesome 아이콘 코드 */
    font-family: 'Icon_Regular'; /* 아이콘 폰트 패밀리 */
    padding-right: 0.5rem;
    color: rgba(var(--theme-ink-rgb), 0.3);
}
.info > div::after {
    content: '\f4aa'; /* Font Awesome 아이콘 코드 */
    font-family: 'Icon_Regular'; /* 아이콘 폰트 패밀리 */
    padding-left: 0.5rem;
}


/* 로딩 상태 */
.loading-message, .no-records {
    text-align: center;
    padding: 2rem;
    color: rgba(var(--theme-ink-rgb), 0.5);
    font-size: 0.9rem;
}

.loading-indicator {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    padding-bottom: 3rem;
    color: rgba(var(--theme-ink-rgb), 0.6);
    font-size: 0.85rem;
    line-height: 1rem; /* 텍스트 높이를 스피너와 맞춤 */
    flex-wrap: nowrap; /* ✅ 줄바꿈 강제 방지 */
    white-space: nowrap; /* ✅ 텍스트 줄바꿈 방지 */
}
.loading-indicator > span {
    margin-left: 0.8rem; /* ✅ 스피너와 텍스트 사이 간격 */
    font-weight: 500;
    color: var(--theme-ink);
}

.spinner {
    display: inline-block; /* ✅ block → inline-block */
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--theme-ink-rgb), 0.2);
    border-top: 2px solid var(--theme-ink);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle; /* 스피너를 텍스트와 수직 정렬 */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.disabled {
    cursor: not-allowed;
    color: var(--theme-disabled-ink);
    background-color: transparent;
    background : var(--theme-disabled);
}


.read {
    position: relative;
    color: var(--theme-ink);
    background: var(--theme-read);
    border: 1px solid rgba(var(--theme-ink-rgb),0.4);
    padding: 1.2rem;
}


@media (max-width: 480px) {
    * {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    .page {
        padding: 1rem 0rem 1rem 0rem;
        margin: 0 auto; /* ➜ 브라우저 가로 중앙 정렬 */
    }
    button {
        width: auto;
        white-space: wrap;
        word-break: auto-phrase;
    }
}


table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.4rem;
  border: none;
  background: transparent;
}

  table > thead {
    text-align: center;
    padding: 0.3rem 1rem;
  }

  /* 카드 스타일 */
  table > tbody > tr {
    background: rgb(var(--theme-paper-rgb), 0.5);
    border-radius: var(--theme-radius);
    box-shadow: 0 0 1rem rgba(var(--theme-ink-rgb), 0.04);
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

    /* hover: theme color border */
    table > tbody > tr:hover {
      background: rgb(var(--theme-paper-rgb), 0.8);
      box-shadow: 0 0 0 2px var(--theme-color), 0 0 1rem rgba(var(--theme-ink-rgb), 0.1);
      cursor: pointer;
    }

    table > tbody > tr > td {
      background: transparent;
      vertical-align: middle;
      padding: 0.2rem;
    }

      table > tbody > tr > td:first-child {
        border-top-left-radius: var(--theme-radius);
        border-bottom-left-radius: var(--theme-radius);
        padding-left: 1rem;
      }

      table > tbody > tr > td:last-child {
        border-top-right-radius: var(--theme-radius);
        border-bottom-right-radius: var(--theme-radius);
        padding-right: 1rem;
      }

@media (max-width: 560px) {
  table,
  thead,
  tbody,
  th,
  tr,
  td {
    display: block;
    width: 100%;
    line-height: 1.3;
  }

    table > thead {
      display: none; /* 헤더 숨김 */
    }

    table > tbody > tr {
      margin-bottom: 0.75rem;
      padding: 0.75rem;
    }

      table > tbody > tr > td {
        display: flex;
        justify-content: flex-start; /* 양쪽 분리 대신 왼쪽부터 시작 */
        align-items: center;
        border: none;
        text-align: left; /* 기본적으로 내용은 왼쪽 정렬 */
      }

        /* 제목 (왼쪽 영역, 오른쪽 정렬) */
        table > tbody > tr > td::before {
          content: attr(data-label);
          font-weight: 600;
          color: rgba(var(--theme-ink-rgb), 0.6);
          text-align: right; /* 제목은 오른쪽 정렬 */
          padding-right: 1rem; /* 요청사항: 제목 오른쪽 패딩0.5 */
          display: inline-block;
          width: 7rem;
        }
        table > tbody > tr > td:first-child {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          padding-left: 0rem;
        }

        table > tbody > tr > td:last-child {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          padding-right: 0rem;
        }
}