/* ======================================================
   메이플스토리 V코어 계산기
   정리된 최종 스타일시트
   - 기존 디자인 유지
   - 중복 규칙 제거
   - 직업 계열 테마 유지
   - 최종 코젬 숫자 강조 유지
====================================================== */


/* ======================================================
   01. 기본 설정
====================================================== */

:root {
    --maple-red: #b84838;
    --maple-red-dark: #91362b;
    --maple-red-light: #f8e8e3;

    --maple-orange: #e98a3d;
    --maple-orange-light: #fff0df;

    --cream: #fffaf5;
    --cream-dark: #f7efe7;

    --text-main: #302b29;
    --text-sub: #746b67;

    --border: #eadfd7;
    --white: #ffffff;

    --shadow: 0 8px 24px rgba(93, 63, 47, 0.07);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(232, 138, 61, 0.08),
            transparent 26%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(184, 72, 56, 0.07),
            transparent 25%
        ),
        var(--cream);

    color: var(--text-main);

    font-family:
        Pretendard,
        "Noto Sans KR",
        "Apple SD Gothic Neo",
        Arial,
        sans-serif;

    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 100px;
}

main,
.container,
.wrapper {
    position: relative;
}

.hidden {
    display: none !important;
}


/* ======================================================
   02. 메이플 테마 / 공통 장식
====================================================== */

body::before {
    content: "🍁";
    position: fixed;
    top: 70px;
    left: 3%;
    z-index: -1;

    font-size: 80px;
    opacity: 0.055;

    transform: rotate(-18deg);
    pointer-events: none;
}

body::after {
    content: "🍁";
    position: fixed;
    right: 4%;
    bottom: 50px;
    z-index: -1;

    font-size: 110px;
    opacity: 0.045;

    transform: rotate(20deg);
    pointer-events: none;
}

h1 {
    position: relative;

    margin-bottom: 10px;

    color: var(--text-main);

    text-align: center;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -1.3px;
}

h1::before {
    content: "🍁";

    display: inline-block;

    margin-right: 9px;

    font-size: 29px;

    transform: rotate(-8deg);
}

.subtitle {
    margin-bottom: 40px;
    text-align: center;
}

.subtitle,
.description,
.guide-text {
    color: var(--text-sub);
}

.description {
    margin-bottom: 20px;
}


/* ======================================================
   03. 직업 선택 화면
====================================================== */

.job-group {
    margin-bottom: 22px;
    padding: 22px;

    background: rgba(255, 255, 255, 0.9);

    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow: var(--shadow);

    backdrop-filter: blur(8px);
}

.job-group h2,
.job-group h3 {
    margin-top: 0;
    margin-bottom: 14px;

    color: var(--maple-red-dark);

    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.4px;
}

.job-group h2::before,
.job-group h3::before {
    content: "🍂";

    margin-right: 7px;

    font-size: 15px;
}

.job-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.job-buttons button {
    padding: 10px 15px;

    border: 1px solid #eadfd7;
    border-radius: 11px;

    background: #ffffff;
    color: #514743;

    font-size: 14px;
    font-weight: 650;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.job-buttons button:hover {
    transform: translateY(-2px);

    border-color: #dda799;
    background: #fff8f5;

    box-shadow: 0 5px 14px rgba(110, 76, 59, 0.08);
}

.job-buttons button.selected {
    border-color: var(--maple-red);

    background:
        linear-gradient(
            135deg,
            var(--maple-red),
            #cb6551
        );

    color: white;

    box-shadow: 0 6px 16px rgba(184, 72, 56, 0.23);

    transform: translateY(-1px);
}


/* 선택 박스 */

.selection-box {
    position: sticky;
    bottom: 20px;

    margin-top: 30px;
    padding: 20px;

    background-color: white;

    border-radius: 14px;

    text-align: center;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

#selected-job {
    margin-top: 24px;
    padding: 13px 16px;

    border-radius: 12px;

    background: var(--maple-red-light);
    color: var(--maple-red-dark);

    font-size: 18px;
    font-weight: 750;
}

#start-button {
    margin-top: 14px;
    padding: 15px 22px;

    border: none;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--maple-red),
            var(--maple-orange)
        );

    color: white;

    font-size: 16px;
    font-weight: 850;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(184, 72, 56, 0.22);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

#start-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 11px 24px rgba(184, 72, 56, 0.28);
}

#start-button:disabled {
    background-color: #ccc;
    opacity: 0.42;

    cursor: not-allowed;

    box-shadow: none;
}


/* ======================================================
   04. 계산 화면
====================================================== */

#calculator-screen {
    position: relative;
}

#back-button {
    margin-bottom: 20px;
    padding: 9px 14px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: white;
    color: #675d58;

    font-size: 15px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

#back-button:hover {
    border-color: #d7a89d;
    background: #fff7f3;

    text-decoration: underline;
}


/* 기존 계산기 헤더
   새 일러스트 헤더가 사용될 경우 script.js 쪽 스타일에서
   #calculator-job-name을 숨기므로 그대로 공존 가능 */

.calculator-header {
    margin-bottom: 24px;
    padding: 35px;

    background-color: #222;
    color: white;

    border-radius: 20px;

    text-align: center;
}

.calculator-header h1 {
    margin: 8px 0;
    color: white;
}

.calculator-header p {
    margin-bottom: 0;
    color: #ddd;
}

.small-label {
    color: #aaa !important;
    font-size: 14px;
}

#calculator-job-name {
    color: var(--maple-red-dark);
    font-weight: 900;
}


/* ======================================================
   05. 강화 추천 영역
====================================================== */

.skill-section,
.core-section,
.cost-section,
.common-option-section {
    margin-bottom: 16px;
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.93);

    box-shadow: var(--shadow);
}

.cost-section,
.common-option-section {
    margin-bottom: 20px;
    padding: 25px;
}

.skill-section h2,
.skill-section h3,
.core-section h2,
.core-section h3,
.cost-section h2,
.common-option-section h2 {
    margin-top: 0;
}

.skill-section h2,
.skill-section h3,
.core-section h2,
.core-section h3 {
    color: var(--text-main);
}

.skill-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skill-item {
    margin-bottom: 8px;
    padding: 11px 13px;

    border-radius: 10px;

    background: #faf6f3;
    color: #4f4642;

    font-size: 14px;
    line-height: 1.6;
}

.skill-item:last-child {
    margin-bottom: 0;
}

.required-section .skill-item {
    border-left: 5px solid #444;
}

.unused-section .skill-item {
    color: #777;
}


/* ======================================================
   06. 비용 카드 / 계산 영역
====================================================== */

.cost-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.cost-card {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 20px;
}

.cost-card,
.cost-item,
.calculation-card,
.result-card,
.summary-card {
    border: 1px solid var(--border) !important;
    border-radius: 15px !important;

    background: rgba(255, 255, 255, 0.94) !important;

    box-shadow: 0 5px 18px rgba(88, 58, 43, 0.055) !important;
}

.cost-title {
    color: #666;
}

.cost-card strong {
    font-size: 25px;
}

.cost-card small {
    color: #999;
}


/* ======================================================
   07. 펼치기 아코디언
====================================================== */

.top-core-accordion-card {
    position: relative;

    border: 1px solid var(--border) !important;
    background: white !important;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease !important;
}

.top-core-accordion-card:hover {
    transform: translateY(-1px);

    border-color: #dfb3a8 !important;

    box-shadow: 0 8px 20px rgba(99, 66, 50, 0.08) !important;
}

.top-core-accordion-card.open {
    border-color: #dca397 !important;

    box-shadow: 0 8px 22px rgba(184, 72, 56, 0.09) !important;
}

.top-core-click-guide {
    color: #a08d86 !important;
    font-size: 11px !important;
}

.top-core-arrow {
    color: var(--maple-red) !important;
}

.top-core-content {
    border-top: 1px solid #efe3dc !important;
}

.top-core-skill-row {
    border-bottom: 1px solid #f0e8e3 !important;
}

.top-core-skill-point {
    background: var(--maple-red-light) !important;
    color: var(--maple-red-dark) !important;
}

.top-core-warning {
    border: 1px solid #f2dfb9;

    background: #fff9eb !important;
    color: #77613c !important;
}


/* 강화 코어 필수 / 선택 뱃지 */

.boost-core-label.optional {
    background: #fff0d8 !important;
    color: #76501b !important;

    border: 1px solid #efd2a2;
}


/* ======================================================
   08. 선택 공용 코어 레벨
====================================================== */

.level-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 20px;
}

.level-buttons button {
    padding: 8px 13px;

    border: 1px solid #e3d8d1;
    border-radius: 10px;

    background: white;
    color: #5f5550;

    font-size: 15px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.level-buttons button:hover {
    border-color: #d69a8b;
    background: #fff7f3;

    transform: translateY(-1px);
}

.level-buttons button.selected {
    border-color: var(--maple-red);
    background: var(--maple-red);
    color: white;

    box-shadow: 0 4px 12px rgba(184, 72, 56, 0.18);
}

.selected-option-cost {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 20px;
    padding: 18px;

    background-color: #f5f6f8;

    border-radius: 10px;
}

.selected-option-cost strong {
    font-size: 22px;
}


/* ======================================================
   09. 최종 결과
====================================================== */

.result-box {
    margin-top: 25px;
    padding: 35px;

    background-color: #222;
    color: white;

    border-radius: 20px;

    text-align: center;
}

.result-box p {
    margin: 0 0 10px;
    color: #ccc;
}

.result-box strong {
    display: block;

    margin-bottom: 10px;

    font-size: 42px;
}

.result-box span {
    color: #bbb;
}

/* 최종 코어 젬스톤 수는 직업 계열의 진한 색으로 강조 */
#total-cost {
    color: var(--maple-red-dark);
    font-weight: 900;
    letter-spacing: -0.3px;
}


/* ======================================================
   10. 직업 계열 테마
   글자색은 통일하고 배경 / 카드에만 계열색 적용
====================================================== */

/* 공통 글자색 */

body,
button,
#calculator-job-name,
#selected-job,
#boost-cost,
#job-common-cost,
#optional-common-cost,
.top-core-arrow,
.top-core-skill-point,
.boost-core-label.required {
    color: #302b29 !important;
}

.top-core-click-guide,
.core-accordion-description,
#boost-description,
#job-common-description,
#result-description {
    color: #817773 !important;
}


/* 직업을 아직 선택하지 않았을 때 */

body:not([data-job-type]) {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(232, 138, 61, 0.08),
            transparent 26%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(184, 72, 56, 0.07),
            transparent 25%
        ),
        #fffaf5;
}


/* 직업 선택 후 전체 배경 */

body[data-job-type] {
    background:
        radial-gradient(
            circle at 8% 8%,
            color-mix(
                in srgb,
                var(--job-main) 17%,
                transparent
            ),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 22%,
            color-mix(
                in srgb,
                var(--job-main) 11%,
                transparent
            ),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            var(--job-very-light),
            #fffaf7 70%
        ) !important;

    transition: background 0.35s ease;
}


/* 직업 그룹 카드 */

body[data-job-type] .job-group {
    background:
        color-mix(
            in srgb,
            var(--job-light) 32%,
            white
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--job-border) 70%,
            #eeeeee
        ) !important;

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--job-main) 8%,
            transparent
        ) !important;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

body[data-job-type] .job-group h2,
body[data-job-type] .job-group h3 {
    color: #302b29 !important;
}


/* 선택한 직업 버튼 */

body[data-job-type] .job-buttons button.selected {
    background:
        color-mix(
            in srgb,
            var(--job-main) 35%,
            white
        ) !important;

    border-color: var(--job-border) !important;

    color: #302b29 !important;

    box-shadow:
        0 5px 14px
        color-mix(
            in srgb,
            var(--job-main) 16%,
            transparent
        ) !important;
}


/* 선택한 직업 표시 */

body[data-job-type] #selected-job {
    background:
        color-mix(
            in srgb,
            var(--job-light) 75%,
            white
        ) !important;

    border: 1px solid var(--job-border) !important;

    color: #302b29 !important;
}


/* 계산 시작 버튼 */

body[data-job-type] #start-button:not(:disabled) {
    background:
        color-mix(
            in srgb,
            var(--job-main) 55%,
            white
        ) !important;

    border: 1px solid var(--job-border) !important;

    color: #302b29 !important;

    box-shadow:
        0 7px 18px
        color-mix(
            in srgb,
            var(--job-main) 18%,
            transparent
        ) !important;
}

body[data-job-type] #start-button:hover:not(:disabled) {
    background:
        color-mix(
            in srgb,
            var(--job-main) 65%,
            white
        ) !important;
}


/* 강화 추천 영역 */

body[data-job-type] .skill-section,
body[data-job-type] .core-section {
    background:
        color-mix(
            in srgb,
            var(--job-light) 23%,
            white
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--job-border) 65%,
            #eeeeee
        ) !important;

    box-shadow:
        0 7px 20px
        color-mix(
            in srgb,
            var(--job-main) 7%,
            transparent
        ) !important;
}

body[data-job-type] .skill-item {
    background:
        color-mix(
            in srgb,
            var(--job-light) 38%,
            white
        ) !important;

    color: #413b38 !important;
}


/* 계산 비용 카드 */

body[data-job-type] .cost-card,
body[data-job-type] .cost-item,
body[data-job-type] .calculation-card,
body[data-job-type] .result-card,
body[data-job-type] .summary-card,
body[data-job-type] .top-core-accordion-card {
    background:
        color-mix(
            in srgb,
            var(--job-light) 22%,
            white
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--job-border) 65%,
            #eeeeee
        ) !important;

    box-shadow:
        0 6px 18px
        color-mix(
            in srgb,
            var(--job-main) 7%,
            transparent
        ) !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

body[data-job-type] .top-core-accordion-card:hover {
    background:
        color-mix(
            in srgb,
            var(--job-light) 38%,
            white
        ) !important;

    border-color: var(--job-border) !important;
}

body[data-job-type] .top-core-accordion-card.open {
    background:
        color-mix(
            in srgb,
            var(--job-light) 42%,
            white
        ) !important;

    border-color: var(--job-border) !important;

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--job-main) 12%,
            transparent
        ) !important;
}


/* 펼친 스킬 목록 */

body[data-job-type] .top-core-content {
    border-top: 1px solid var(--job-border) !important;
}

body[data-job-type] .top-core-skill-row {
    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--job-border) 45%,
            #eeeeee
        ) !important;
}


/* 포인트 뱃지 */

body[data-job-type] .top-core-skill-point {
    background:
        color-mix(
            in srgb,
            var(--job-main) 18%,
            white
        ) !important;

    color: #413b38 !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--job-border) 75%,
            transparent
        );
}


/* 필수 / 선택 뱃지 */

body[data-job-type] .boost-core-label.required {
    background:
        color-mix(
            in srgb,
            var(--job-main) 22%,
            white
        ) !important;

    color: #413b38 !important;

    border: 1px solid var(--job-border);
}

body[data-job-type] .boost-core-label.optional {
    background: #fff0d8 !important;
    color: #76501b !important;

    border: 1px solid #efd2a2;
}


/* 선택 공용 코어 레벨 버튼 */

body[data-job-type] .level-buttons button {
    color: #403936 !important;
}

body[data-job-type] .level-buttons button:hover {
    background:
        color-mix(
            in srgb,
            var(--job-light) 55%,
            white
        ) !important;

    border-color: var(--job-border) !important;
}

body[data-job-type] .level-buttons button.selected {
    background:
        color-mix(
            in srgb,
            var(--job-main) 45%,
            white
        ) !important;

    border-color: var(--job-border) !important;

    color: #302b29 !important;

    box-shadow:
        0 4px 12px
        color-mix(
            in srgb,
            var(--job-main) 15%,
            transparent
        ) !important;
}


/* 직업명 / 비용 숫자 / 화살표는 동일한 검정 계열 */

body[data-job-type] #calculator-job-name,
body[data-job-type] #boost-cost,
body[data-job-type] #job-common-cost,
body[data-job-type] #optional-common-cost,
body[data-job-type] .top-core-arrow {
    color: #302b29 !important;
}


/* 최종 코젬 숫자만 직업 계열색으로 강조 */

body[data-job-type] #total-cost {
    color: var(--job-dark) !important;
    font-weight: 900 !important;
}


/* 뒤로가기 버튼 */

body[data-job-type] #back-button {
    background:
        color-mix(
            in srgb,
            var(--job-light) 26%,
            white
        ) !important;

    border-color: var(--job-border) !important;

    color: #403936 !important;
}

body[data-job-type] #back-button:hover {
    background:
        color-mix(
            in srgb,
            var(--job-light) 55%,
            white
        ) !important;
}


/* ======================================================
   11. 스크롤바 / 선택 색상
====================================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f6eee8;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #f6eee8;
    border-radius: 20px;

    background: #d4aaa0;
}

::-webkit-scrollbar-thumb:hover {
    background: #c48678;
}

::selection {
    background: #e8b9ad;
    color: #4c2922;
}


/* ======================================================
   12. 모바일
====================================================== */

@media (max-width: 700px) {
    .container {
        width: 94%;
        padding-left: 10px;
        padding-right: 10px;
    }

    body::before {
        left: -5px;
        font-size: 55px;
    }

    body::after {
        right: -10px;
        font-size: 70px;
    }

    h1 {
        font-size: 27px;
        line-height: 1.35;
    }

    h1::before {
        font-size: 23px;
    }

    .job-group {
        padding: 16px;
        border-radius: 14px;
    }

    .job-buttons {
        gap: 7px;
    }

    .job-buttons button {
        padding: 9px 11px;
        font-size: 13px;
    }

    #start-button {
        width: 100%;
    }

    .cost-grid {
        grid-template-columns: 1fr;
    }

    .level-buttons button {
        flex: 1;
    }
}
/* 코젬계산기 상단 헤더 최종 수정 */

.site-header {
    width: 100%;
    padding: 32px 20px 22px;
    box-sizing: border-box;
}

.site-brand {
    width: min(900px, 100%);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    text-align: center;
}

.site-logo-image {
    width: 64px;
    height: 64px;

    display: block;

    object-fit: contain;
}

.site-brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-brand-text h1 {
    margin: 0;

    color: #3f3734;

    font-size: 38px;
    font-weight: 900;

    line-height: 1.2;
}

.site-brand-text p {
    margin: 7px 0 0;

    color: #877a74;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.6;
}/* 사이트 제목 */

.site-header {
    width: 100%;
    padding: 38px 20px 24px;
    box-sizing: border-box;
}

.site-brand {
    width: min(900px, 100%);
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.site-brand-text h1 {
    margin: 0;

    color: #3f3734;

    font-size: 42px;
    font-weight: 900;

    line-height: 1.2;

    letter-spacing: -1.5px;
}

.site-brand-text p {
    margin: 9px 0 0;

    color: #877a74;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.6;
}


/* 직업 선택 제목 */

.job-select-title {
    margin-top: 26px;

    font-size: 28px;
    font-weight: 850;

    text-align: center;
}