:root { --blue500: #0E3CFB; --gray200: #E3E5E8; --gray500: #79849A; --gray800: #2A303C; --font: #000000; --background: #F6F8FA; --bannerline: #F1C469; --banner: #FDF8EF; --bannerfont: #6C4B0A; --banner-red-line: #F3A577; --banner-red: #FDF4EF;--banner-red-font: #7A340B;}

html, body { width: 100%; height: 100%; margin: 0; color: var(--font); font-family: 'Pretendard Variable', Pretendard, sans-serif; }
h1, h2, p { margin: 0; padding: 0; }


/* 전체 */
#wrap { display: flex; flex-direction: column; width: 100%; height: 100vh; overflow: hidden; }


/* 헤더 */
header { display: flex; align-items: center; width: 100%; height: 80px; flex-shrink: 0; padding-left: 30px; box-sizing: border-box; background-color: #ffffff; border-bottom: 1px solid var(--gray200); }


/* 헤더 아래 전체 영역 */
.container { display: flex; flex: 1; width: 100%; min-height: 0; overflow: hidden; }


/* 사이드바 */
.sidebar { width: 310px; flex-shrink: 0; padding: 30px 36px; box-sizing: border-box; background-color: #ffffff; font-family: 'Pretendard Variable', Pretendard, sans-serif; }

.menu-btn { display: block; width: 100%; margin: 0 0 30px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1; text-align: left; cursor: pointer; }
.menu-btn.active { color: var(--blue500); }

.submenu { max-height: 0; margin: -12px 0 0; padding: 0 16px; overflow: hidden; opacity: 0; transform: translateY(-6px); list-style: none; border-radius: 10px; background-color: #f5f5f5; transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.3s ease, padding 0.3s ease, margin 0.3s ease; }
.menu-btn.active + .submenu { max-height: 1000px; margin: -12px 0 24px; padding: 12px 16px; opacity: 1; transform: translateY(0); }
.submenu li { list-style: none; }

.submenu-btn, .submenu-scroll { display: block; width: 100%; padding: 5px 0; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; text-align: left; cursor: pointer; }
.submenu-btn.active, .submenu-scroll.active { color: var(--blue500); }

.submenu.depth-3 { max-height: none; margin: 4px 0 4px 10px; padding: 0; overflow: visible; opacity: 1; transform: none; background: none; border-radius: 0; transition: none; }
.depth-3 .submenu-scroll { padding: 4px 0; font-size: 14px; font-weight: 400; }


/* 오른쪽 전체 영역 : 브레드크럼 + main */
.content { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; background-color: var(--background); }


/* 브레드크럼 */
.breadcrumb { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; margin-bottom: 25px; box-sizing: border-box; color: var(--blue500); font-weight: 600;}
.breadcrumb button { padding: 0; border: 0; background: none; color: var(--blue500); font-size: 18px; font-weight: 500; cursor: pointer; }
.breadcrumb button:hover { text-decoration: underline; }
.breadcrumb .separator { color: var(--blue500); font-size: 18px; font-weight: 500; }
.breadcrumb .current { cursor: default; }
.breadcrumb .current:hover { text-decoration: none; }

/* 바로가기 하이퍼링크 */
a, a:visited, a:hover, a:active { color: var(--blue500); }


/* 메인 */
main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; background-color: var(--background); padding: 60px; box-sizing: border-box; }
.main-inner { width: 80%; max-width: 1000px; margin: 0 auto; box-sizing: border-box; }

/* 스크롤 탑 */
.scroll-top { position: fixed; right: 40px; bottom: 40px; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; pointer-events: none; cursor: pointer; z-index: 1000; }
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.scroll-top iconify-icon { font-size: 48px; color: #333; }

/* 페이지 section */
.section { display: none; background-color: var(--background); }
.section.active { display: flex; flex-direction: column; gap: 70px; }


/* 타이틀 */
.title { display: flex; flex-direction: column; gap: 20px; }
.title h1 { margin: 0; font-size: 36px; font-weight: 700; }
.title .info { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.6; }


/* 공통 박스 */
.box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.box h2 { font-size: 24px; font-weight: 700; margin-bottom: 15px; }
.box .info { font-size: 20px; font-weight: 400; }
.box .info .link { color:var(--blue500); text-decoration: underline; text-underline-offset: 4px; font-weight: 800; cursor: pointer; }
.box .text { margin-bottom: 10px; }
.box img { max-width: 100%; height: auto; width: auto; display: block; border-radius: 8px; border: 1px solid var(--gray200); }


/* 안내 배너 */
.banner { display: flex; align-items: center; width: 100%; gap: 16px; padding: 20px; background-color: var(--banner); border: var(--bannerline) solid 1px; border-radius: 12px; margin-bottom: 16px; }
.banner p { font-size: 20px; font-weight: 400; color: var(--bannerfont); line-height: 1.4;}
.banner img { align-self: flex-start; border: none; }

.banner-red { display: flex; align-items: center; width: 100%; gap: 16px; padding: 20px; background-color: var(--banner-red); border: var(--banner-red-line) solid 1px; border-radius: 12px; margin-bottom: 16px; }
.banner-red p { font-size: 20px; font-weight: 500; color: var(--banner-red-font); line-height: 1.4;}
.banner-red img { align-self: flex-start; border: none; }

.banner, .banner-red { box-sizing: border-box; }

/* 이전 / 다음 버튼 */
.move-btn { display: flex; flex-direction: row; gap: 10px; width: 100%; height: 100px; margin-top: 70px; }

.before, .after { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100px; padding: 0 24px; border: 1px solid var(--gray200); border-radius: 12px; background-color: #ffffff; box-sizing: border-box; cursor: pointer; }

.before:disabled, .after:disabled { cursor: default; }

.before { align-items: flex-start; text-align: left; }
.after { align-items: flex-end; text-align: right; }

.before p, .after p { margin: 0; font-size: 14px; font-weight: 400; color: var(--gray500); }
.before .title, .after .title { margin: 0; font-size: 20px; font-weight: 500; }


/* 표 */
.graph { width: 100%; margin-top: 24px; border: 1px solid #d9dee7; border-radius: 8px; overflow: hidden; }

.graph table { width: 100%; border-collapse: collapse; table-layout: auto; }

.graph th { padding: 14px 24px; background-color: #29313e; color: #fff; font-size: 18px; font-weight: 600; text-align: center; border-right: 1px solid #68717e; white-space: nowrap; }
.graph th:last-child { border-right: 0; }

.graph td { padding: 14px 24px; background-color: #fff; color: var(--gray800); font-size: 18px; line-height: 1.5; text-align: center; vertical-align: middle; border-top: 1px solid #d9dee7; border-right: 1px solid #d9dee7; }
.graph td:last-child { border-right: 0; }

.graph th:nth-child(1), .graph td:nth-child(1) { width: 1%; white-space: nowrap; }
.graph th:nth-child(2), .graph td:nth-child(2) { width: 1%; white-space: nowrap; }
.graph th:nth-child(3), .graph td:nth-child(3) { width: auto; }

.graph td.possible { color: #155eef; font-weight: 700; }
.graph td.impossible { color: #f04438; font-weight: 700; }


/* 구분선 */
.line { width: 100%; height: 1.5px; background-color: var(--gray200); }