/*=======================================================*/
/* Wrapper for center-based zoom scaling */
.guide-wrapper {
    width: 100%;
    min-height: 100vh;
    background-color: #f4f4f5;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

.guide {
    width: 1920px;
    position: relative;
    background-color: #f4f4f5;
    height: 2292px;
    overflow: visible;
    text-align: left;
    font-size: 12px;
    color: #878a93;
    font-family: Roboto;
    transform-origin: center top;
}

.guide-title {
    position: absolute;
    top: 279px;
    left: 359px;
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    color: #292a2d;
}

.span {
    font-weight: 600;
}
.span1 {
    color: #70737c;
    font-size: 56px;
}
.span3 {
    line-height: 64px;
}
.span5 {
    color: #70737c;
    font-size: 40px;
}
.span7 {
    line-height: 40px;
}

/* section 01. Spider Chart ======================================================== */
.guide-section01 {
    position: absolute;
    top: 335px;
    left: 340px;
    border-radius: 12px;
    background-color: #fff;
    width: 630px;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Chart container for centering all chart elements */
.chart-container {
    position: relative;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Label positioning relative to chart container */
.section01-ux {
    position: absolute;
    top: -88px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    line-height: 24px;
}
.section01-bm {
    position: absolute;
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 24px;
}
.section01-hosting {
    position: absolute;
    top: 50%;
    right: -125px;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 24px;
}
.section01-web-design {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    line-height: 24px;
}

/* Chart coordinate grids - centered */
.child37 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 8px;
    background-color: #f4f4f5;
    border: 1px solid #878a93;
    box-sizing: border-box;
    width: 260px;
    height: 260px;
    transform-origin: center;
}
.child38 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 8px;
    border: 1px solid #878a93;
    box-sizing: border-box;
    width: 160px;
    height: 160px;
    transform-origin: center;
}
.child39 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 8px;
    border: 1px solid #878a93;
    box-sizing: border-box;
    width: 55px;
    height: 55px;
    transform-origin: center;
}

/* Chart canvas - centered */
.child40 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    overflow: hidden;
    height: 194px;
}
/* section 02. 종합 점수 ======================================================== */
.guide-section02 {
    position: absolute;
    top: 335px;
    left: 990px;
    border-radius: 12px;
    background-color: #fff;
    width: 370px;
    height: 500px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Title area container */
.section02-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.section02-title-circle {
    position: relative;
    width: 20px;
    height: 20px;
}

.ellipse-div {
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(8px);
    border-radius: 50%;
    background-color: #ff7638;
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.child8 {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #ff7638;
    border: 1px solid #fff;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
}

.section02-title-text {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #292a2d;
}

/* Image taking full width */
.section02-image {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
    height: auto;
    max-height: 290px;
    object-fit: contain;
    margin-bottom: auto;
}

/* Score at bottom */
.section02-score {
    margin-top: auto;
    line-height: 64px;
    font-size: 100px;
    color: #292a2d;
    text-align: center;
}


/* section 03. 영역별 점수 ======================================================== */
/* 01. UX */
.section03-ux {
    position: absolute;
    top: 335px;
    left: 1380px;
    border-radius: 12px;
    background-color: #fff;
    width: 240px;
    height: 240px;
}
.section03-ux-score {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 72px;
    color: #292a2d;
}
.section03-ux-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section03-ux-title .child4 {
    position: relative;
    top: 0;
    left: 0;
    filter: blur(8px);
    border-radius: 50%;
    background-color: #ef4444;
    width: 20px;
    height: 20px;
    opacity: 0.8;
}
.section03-ux-title .child9 {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #ef4444;
    border: 1px solid #fff;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
}
.section03-ux-title .ux1 {
    position: relative;
    top: 0;
    left: 0;
    font-size: 18px;
    line-height: 24px;
    color: #70737c;
}

/* 02. Hosting */
.section03-hosting {
    position: absolute;
    top: 335px;
    left: 1640px;
    border-radius: 12px;
    background-color: #fff;
    width: 240px;
    height: 240px;
}
.section03-hosting-score {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 72px;
    color: #292a2d;
}
.section03-hosting-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section03-hosting-title .child6 {
    position: relative;
    top: 0;
    left: 0;
    filter: blur(8px);
    border-radius: 50%;
    background-color: #00d282;
    width: 20px;
    height: 20px;
    opacity: 0.8;
}
.section03-hosting-title .child11 {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #00d282;
    border: 1px solid #fff;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
}
.section03-hosting-title .hosting1 {
    position: relative;
    top: 0;
    left: 0;
    font-size: 18px;
    line-height: 24px;
    color: #70737c;
}

/* 03. Web Design */
.section03-web-design {
    position: absolute;
    top: 595px;
    left: 1380px;
    border-radius: 12px;
    background-color: #fff;
    width: 240px;
    height: 240px;
}
.section03-web-design-score {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 72px;
    color: #292a2d;
}
.section03-web-design-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section03-web-design-title .child5 {
    position: relative;
    top: 0;
    left: 0;
    filter: blur(8px);
    border-radius: 50%;
    background-color: #ff7638;
    width: 20px;
    height: 20px;
    opacity: 0.8;
}
.section03-web-design-title .child10 {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #ff7638;
    border: 1px solid #fff;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
}
.section03-web-design-title .web-design1 {
    position: relative;
    top: 0;
    left: 0;
    font-size: 18px;
    line-height: 24px;
    color: #70737c;
}
/* 04. BM */
.section03-bm {
    position: absolute;
    top: 595px;
    left: 1640px;
    border-radius: 12px;
    background-color: #fff;
    width: 240px;
    height: 240px;
}
.section03-bm-score {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 72px;
    color: #292a2d;
}
.section03-bm-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section03-bm-title .child7 {
    position: relative;
    top: 0;
    left: 0;
    filter: blur(8px);
    border-radius: 50%;
    background-color: #ef4444;
    width: 20px;
    height: 20px;
    opacity: 0.8;
}
.section03-bm-title .child12 {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #ef4444;
    border: 1px solid #fff;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
}
.section03-bm-title .bm1 {
    position: relative;
    top: 0;
    left: 0;
    font-size: 18px;
    line-height: 24px;
    color: #70737c;
}

/* section 04. 영역별 점수 ======================================================== */
.section04-title {
    position: absolute;
    top: 895px;
    left: 359px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #292a2d;
}
.section04-content {
    position: absolute;
    top: 947px;
    left: 340px;
    border-radius: 12px;
    background-color: #fff;
    width: 1540px;
    height: 500px;
}
.content-header-area {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 1490px;
    height: 44px;
    font-size: 18px;
}
/* 헤더 - ID */
.content-header-id-text {
    position: absolute;
    top: 0px;
    left: 7px;
    line-height: 24px;
}
.content-header-id-arrow {
    position: absolute;
    top: 0px;
    left: 115px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    object-fit: contain;
}
/* 헤더 - 제목 */
.content-header-title-text {
    position: absolute;
    top: 0px;
    left: 207px;
    line-height: 24px;
}
.content-header-title-arrow {
    position: absolute;
    top: 0px;
    left: 245px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    object-fit: contain;
}
/* 헤더 - 난이도 */
.content-header-level-text {
    position: absolute;
    top: 0px;
    left: 636px;
    line-height: 24px;
}
.content-header-level-arrow {
    position: absolute;
    top: 0px;
    left: 690px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    object-fit: contain;
}
/* 헤더 - 중요도 */
.content-header-importance-text {
    position: absolute;
    top: 0px;
    left: 896px;
    line-height: 24px;
}
.content-header-importance-arrow {
    position: absolute;
    top: 0px;
    left: 950px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    object-fit: contain;
}
/* 헤더 - 준수여부 */
.content-header-compliance-text {
    position: absolute;
    top: 0px;
    left: 1145px;
    line-height: 24px;
}
.content-header-compliance-arrow {
    position: absolute;
    top: 0px;
    left: 1216px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    object-fit: contain;
}
/* 헤더 - 상세보기 */
.content-header-detail-text {
    position: absolute;
    top: 0px;
    left: 1372px;
    line-height: 24px;
}
.content-header-detail-arrow {
    position: absolute;
    top: 0px;
    left: 1443px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    object-fit: contain;
}
.content-header-line {
    position: absolute;
    top: 44px;
    left: 0px;
    max-height: 100%;
    width: 1490px;
}
/* 영역별 필터 바 */
.section04-filter {
    position: absolute;
    top: 895px;
    left: 863px;
    border-radius: 8px;
    background-color: #c2c4c8;
    width: 597px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 3px;
    box-sizing: border-box;
    gap: 2px;
}

.section04-filter-item {
    flex: 1;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0 8px;
    box-sizing: border-box;
}

.section04-filter-item-selected {
    background-color: #fff;
}

.section04-filter-item:not(.section04-filter-item-selected):hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.filter-text {
    font-size: 16px;
    line-height: 24px;
    color: #292a2d;
    font-weight: 400;
}

.section04-filter-item:not(.section04-filter-item-selected) .filter-text {
    color: #70737c;
}

.filter-count {
    font-size: 14px;
    line-height: 20px;
    color: #c2c4c8;
    margin-left: 8px;
}

/* 검색바 */
.section04-search {
    position: absolute;
    top: 895px;
    left: 1480px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #c2c4c8;
    box-sizing: border-box;
    width: 370px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
}
.section04-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}
.section04-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    line-height: 20px;
    color: #292a2d;
    font-family: inherit;
}
.section04-search-input::placeholder {
    color: #c2c4c8;
}

/* 가이드라인 리스트 */
.section04-content-list {
    position: absolute;
    top: 75px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    font-size: 18px;
    color: #292a2d;
    scrollbar-width: none;
}
.section04-content-item {
    width: 100%;
    position: relative;
    height: 74px;
    min-height: 74px;
}
.ux-1-wrapper {
    position: absolute;
    top: 0px;
    left: calc(50% - 730px);
    border-radius: 20px;
    background-color: #f4f4f5;
    border: 1px solid #dbdcdf;
    box-sizing: border-box;
    width: 126px;
    height: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px 12px;
    text-align: center;
}
.all {
    position: relative;
    line-height: 24px;
}
.tablerstar-filled-icon {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 24px;
    height: 24px;
    overflow: hidden;
}
.tablerstar-filled-icon1 {
    position: absolute;
    top: 0px;
    left: 36px;
    width: 24px;
    height: 24px;
    overflow: hidden;
}
.tablerstar-icon {
    position: absolute;
    top: 0px;
    left: 72px;
    width: 24px;
    height: 24px;
    overflow: hidden;
}
.tablerstar-filled-parent {
    position: absolute;
    top: 5px;
    left: 632px;
    width: 96px;
    height: 24px;
}
.tablerstar-filled-group {
    position: absolute;
    top: 5px;
    left: 892px;
    width: 96px;
    height: 24px;
}
.group-child4 {
    position: absolute;
    top: 74px;
    left: 0px;
    width: 1490px;
    height: 0px;
}
.group-item {
    position: absolute;
    top: 74px;
    left: 0px;
    max-height: 100%;
    width: 1490px;
}
.div35 {
    position: absolute;
    top: 5px;
    left: 215px;
    line-height: 24px;
    display: inline-block;
    width: 390px;
}
.div36 {
    position: absolute;
    top: 0px;
    left: 1375px;
    border-radius: 6px;
    background-color: #dbdcdf;
    border: 1px solid #c2c4c8;
    box-sizing: border-box;
    width: 100px;
    height: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    font-size: 16px;
}

/* section 05. 탄소배출량 추이 ====================================================== */
.child16 {
    position: absolute;
    top: 1558px;
    left: 340px;
    border-radius: 12px;
    background-color: #fff;
    width: 1540px;
    height: 400px;
}
.div14 {
    position: absolute;
    top: 1514px;
    left: 359px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #292a2d;
}
.child17 {
    position: absolute;
    top: 1508px;
    left: 530px;
    border-radius: 8px;
    background-color: #c2c4c8;
    width: 450px;
    height: 40px;
}
.frame-div {
    position: absolute;
    top: 1511px;
    left: 533px;
    border-radius: 6px;
    background-color: #fff;
    height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 24px;
    box-sizing: border-box;
    font-size: 16px;
    color: #292a2d;
}
.parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}
.vector-icon1 {
    width: 12px;
    position: relative;
    max-height: 100%;
    object-fit: contain;
}
.div16 {
    position: absolute;
    top: 1516px;
    left: 738px;
    font-size: 16px;
    line-height: 24px;
    color: #70737c;
}
.div17 {
    position: absolute;
    top: 1516px;
    left: 879px;
    font-size: 16px;
    line-height: 24px;
    color: #70737c;
}
.group-icon {
    position: absolute;
    top: 1507px;
    left: 996px;
    width: 42px;
    height: 42px;
}
.div18 {
    position: absolute;
    top: 1892px;
    left: 414px;
    line-height: 16px;
    text-align: center;
}
.div19 {
    position: absolute;
    top: 1920px;
    left: 503px;
    line-height: 16px;
}
.div20 {
    position: absolute;
    top: 1920px;
    left: 708px;
    line-height: 16px;
}
.div21 {
    position: absolute;
    top: 1920px;
    left: 913px;
    line-height: 16px;
}
.div22 {
    position: absolute;
    top: 1920px;
    left: 1118px;
    line-height: 16px;
}
.div23 {
    position: absolute;
    top: 1920px;
    left: 1323px;
    line-height: 16px;
}
.div24 {
    position: absolute;
    top: 1920px;
    left: 1528px;
    line-height: 16px;
}
.div25 {
    position: relative;
    line-height: 20px;
}
.wrapper {
    position: absolute;
    top: 1914px;
    left: 1721px;
    border-radius: 40px;
    background-color: #daf2e9;
    height: 27px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    box-sizing: border-box;
    font-size: 14px;
    color: #5a5c63;
}
.div26 {
    position: absolute;
    top: 1856px;
    left: 411px;
    line-height: 16px;
    text-align: center;
}
.div27 {
    position: absolute;
    top: 1820px;
    left: 411px;
    line-height: 16px;
    text-align: center;
}
.div28 {
    position: absolute;
    top: 1784px;
    left: 411px;
    line-height: 16px;
    text-align: center;
}
.div29 {
    position: absolute;
    top: 1748px;
    left: 411px;
    line-height: 16px;
    text-align: center;
}
.div30 {
    position: absolute;
    top: 1712px;
    left: 411px;
    line-height: 16px;
    text-align: center;
}
.div31 {
    position: absolute;
    top: 1676px;
    left: 411px;
    line-height: 16px;
    text-align: center;
}
.div32 {
    position: absolute;
    top: 1640px;
    left: 411px;
    line-height: 16px;
    text-align: center;
}
.div33 {
    position: absolute;
    top: 1604px;
    left: 411px;
    line-height: 16px;
    text-align: center;
}
.child18 {
    position: absolute;
    top: 1591px;
    left: 462px;
    width: 1335px;
    height: 313px;
}
.child19 {
    position: absolute;
    top: 1864px;
    left: 462px;
    max-height: 100%;
    width: 1335px;
}
.child20 {
    position: absolute;
    top: 1828px;
    left: 462px;
    max-height: 100%;
    width: 1335px;
}
.child21 {
    position: absolute;
    top: 1792px;
    left: 462px;
    max-height: 100%;
    width: 1335px;
}
.child22 {
    position: absolute;
    top: 1756px;
    left: 462px;
    max-height: 100%;
    width: 1335px;
}
.child23 {
    position: absolute;
    top: 1720px;
    left: 462px;
    max-height: 100%;
    width: 1335px;
}
.child24 {
    position: absolute;
    top: 1684px;
    left: 462px;
    max-height: 100%;
    width: 1335px;
}
.child25 {
    position: absolute;
    top: 1648px;
    left: 462px;
    max-height: 100%;
    width: 1335px;
}
.child26 {
    position: absolute;
    top: 1612px;
    left: 462px;
    max-height: 100%;
    width: 1335px;
}
.child27 {
    position: absolute;
    top: 1635.5px;
    left: 462px;
    width: 1335px;
    height: 268.5px;
}
.bxup-arrow-icon {
    position: absolute;
    top: 1920px;
    left: 1809px;
    width: 16px;
    height: 16px;
    overflow: hidden;
    object-fit: contain;
}
.bxsup-arrow-icon {
    position: absolute;
    top: 1920px;
    left: 462px;
    width: 16px;
    height: 16px;
    overflow: hidden;
    object-fit: contain;
}
.child28 {
    position: absolute;
    top: 1635.5px;
    left: 462px;
    width: 1335px;
    height: 30.5px;
}
.child29 {
    position: absolute;
    top: 1640px;
    left: 518px;
    border-radius: 50%;
    background-color: #5a5c63;
    width: 16px;
    height: 16px;
}
.child30 {
    position: absolute;
    top: 1640px;
    left: 722px;
    border-radius: 50%;
    background-color: #5a5c63;
    width: 16px;
    height: 16px;
}
.child31 {
    position: absolute;
    top: 1640px;
    left: 926px;
    border-radius: 50%;
    background-color: #5a5c63;
    width: 16px;
    height: 16px;
}
.child32 {
    position: absolute;
    top: 1658px;
    left: 1133px;
    border-radius: 50%;
    background-color: #5a5c63;
    width: 16px;
    height: 16px;
}
.child33 {
    position: absolute;
    top: 1653px;
    left: 1330px;
    border-radius: 50%;
    background-color: #5a5c63;
    width: 16px;
    height: 16px;
}
.child34 {
    position: absolute;
    top: 1628px;
    left: 1543px;
    border-radius: 50%;
    background-color: #5a5c63;
    width: 16px;
    height: 16px;
}
.child35 {
    position: absolute;
    top: 1651px;
    left: 1751px;
    border-radius: 50%;
    background-color: #5a5c63;
    width: 16px;
    height: 16px;
}
.child36 {
    position: absolute;
    top: 1659px;
    left: 1759px;
    max-width: 100%;
    overflow: hidden;
    height: 244px;
}
.container {
    position: absolute;
    top: 1606px;
    left: 1728px;
    border-radius: 8px;
    background-color: #daf2e9;
    border: 1px solid #b0ebd4;
    box-sizing: border-box;
    height: 31px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 14px;
    font-size: 16px;
    color: #292a2d;
}
/* ================================================================================ */






.child41 {
    position: absolute;
    top: 579px;
    left: 474px;
    width: 360px;
    height: 0px;
    object-fit: contain;
}
.child42 {
    position: absolute;
    top: 478px;
    left: 496px;
    border-radius: 4px;
    width: 244px;
    height: 226px;
    opacity: 0.6;
}

.compliance-dot {
    position: absolute;
    top: 1px;
    left: 1180px;
}