@charset "utf-8";
/*!
 * kobiz-simulator.css
 * 인적·기술적·예술적 요소 확인표 모의계산기
 *
 * 작성자      : Dragon Kight
 * 대상 마크업 : .kobiz-simulator (index.html / animation.html)
 * 배치        : HTML과 같은 경로 (상대경로 url() 없음 → 어디든 이동 가능)
 * 로드 순서   : kobiz 스타일 전부 뒤 — 마지막에 두어야 우선순위가 확보됩니다.
 *
 * 모든 규칙을 .kobiz-simulator 하위로 스코프하여 kobiz 전역 CSS와 충돌하지 않습니다.
 *
 * ── 목차 ────────────────────────────────────────────────
 *  0. 스코프 리셋 (이 컴포넌트만 초기화)
 *  1. 루트 / 페이지 제목
 *  2. 확인표 유형 탭
 *  3. 본문 레이아웃 (본문 + 예상총점 패널)
 *  4. 작품 정보 입력
 *  5. 평가 섹션 헤더
 *  6. 배점 확인표 (table)
 *  7. 체크박스 / 라디오
 *  8. 배점 뱃지
 *  9. 예상 총점 패널
 * 10. 반응형
 * ───────────────────────────────────────────────────────
 */

/* ══════════════ 0. 스코프 리셋 ══════════════
 * 이 컴포넌트가 어떤 사이트에 얹혀도 같은 모습이 되도록
 * .kobiz-simulator 안쪽만 초기화한다. 바깥에는 영향이 없다.
 * ──────────────────────────────────────────── */

.kobiz-simulator *,
.kobiz-simulator *::before,
.kobiz-simulator *::after {
    box-sizing: border-box;
}

.kobiz-simulator h1,
.kobiz-simulator h2,
.kobiz-simulator p,
.kobiz-simulator ul,
.kobiz-simulator li,
.kobiz-simulator hgroup,
.kobiz-simulator fieldset,
.kobiz-simulator table {
    margin: 0;
    padding: 0;
}

.kobiz-simulator ul,
.kobiz-simulator li {
    list-style: none;
}

.kobiz-simulator fieldset {
    border: 0;
    min-width: 0; /* fieldset 기본 min-width 로 grid 가 부풀지 않도록 */
}

.kobiz-simulator input,
.kobiz-simulator button {
    font-family: inherit;
}

/* 표 제목 — 화면에서는 감추고 스크린리더에만 읽힌다 */
.kobiz-simulator caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ══════════════ 1. 루트 / 페이지 제목 ══════════════ */

.kobiz-simulator {
    font-family: 'Noto Sans KR', sans-serif;
    color: #000;
}

.kobiz-simulator > hgroup {
    display: grid;
    row-gap: 8px;
}

.kobiz-simulator > hgroup h1 {
    font-size: 22.9px;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: -0.229px;
    color: #000;
}

.kobiz-simulator > hgroup p {
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    letter-spacing: -0.14px;
    color: #000;
}

/* ══════════════ 2. 확인표 유형 탭 ══════════════ */

.kobiz-simulator .type-tab {
    display: grid;
    grid-template-columns: 265px 265px;
    margin-top: 36px;
}

.kobiz-simulator .type-tab a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 42px;
    border: 1px solid #d9d9d9;
    background: #f9f9f9;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.13px;
    color: #7D7D7D !important; /* kobiz a:visited{color:#333} 대응 */
    text-decoration: none;
    cursor: pointer;
}

.kobiz-simulator .type-tab a[aria-selected='true'] {
    border-color: #5b3a93;
    background: #5b3a93;
    color: #fff !important;
}

/* 맞닿는 쪽 보더는 한 줄만 — 활성 탭이 좌/우 어디에 있어도 성립 */
.kobiz-simulator .type-tab a[aria-selected='true'] + a {
    border-left: 0;
}

.kobiz-simulator .type-tab a:first-child:not([aria-selected='true']) {
    border-right: 0;
}

/* ══════════════ 3. 본문 레이아웃 ══════════════ */

.kobiz-simulator .simulator-body {
    display: grid;
    grid-template-columns: 1fr 250px;
    column-gap: 24px;
    margin-top: 26px;
}

.kobiz-simulator .simulator-main {
    display: grid;
    row-gap: 24px;
    min-width: 0; /* grid item 이 표 min-content 로 부풀지 않도록 */
}

/* ══════════════ 4. 작품 정보 입력 ══════════════ */

.kobiz-simulator .work-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
}

.kobiz-simulator .work-info p {
    display: grid;
    row-gap: 4px;
}

.kobiz-simulator .work-info label {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.13px;
    color: #000;
}

.kobiz-simulator .work-info input {
    box-sizing: border-box;
    width: 100%;
    height: 37px;
    padding: 0 12px;
    border: 1px solid #cdcdcd;
    background: #fff;
    font-size: 13px;
    font-weight: 300;
    color: #000;
}

.kobiz-simulator .work-info input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* ══════════════ 5. 평가 섹션 헤더 ══════════════ */

.kobiz-simulator .score-section {
    min-width: 0;
}

.kobiz-simulator .section-head {
    padding: 22.5px 18px 22px;
    border-top: 2px solid #6121cd;
    background: rgba(97, 33, 205, 0.05);
}

/* 참고 문구가 붙는 섹션은 하단 여백이 다름 (Figma 176px) */
.kobiz-simulator .section-head.has-note {
    padding-bottom: 13px;
}

/* 제목 + 점수 한 줄 — .section-note 와 형제이므로 전용 클래스로 분리 */
.kobiz-simulator .section-title-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 16px;
}

.kobiz-simulator .section-head hgroup {
    display: grid;
    row-gap: 6px;
}

.kobiz-simulator .section-head h2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.18px;
    color: #000;
}

.kobiz-simulator .section-head hgroup p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.14px;
    color: #000;
}

.kobiz-simulator .section-score {
    text-align: right;
    white-space: nowrap;
}

.kobiz-simulator .section-score b {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.18px;
    color: #6121cd;
}

.kobiz-simulator .section-score span {
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

/* 섹션 헤더 안 점선 구분선 */
.kobiz-simulator .section-divider {
    display: block;
    width: 100%;
    margin-top: 14px;
    border-top: 0.5px dashed #000;
    opacity: 0.2;
}

/* 섹션 헤더 안 참고 문구 */
.kobiz-simulator .section-note {
    display: flex;
    align-items: flex-start;
    column-gap: 4px;
    margin-top: 14px;
}

.kobiz-simulator .section-note svg {
    flex-shrink: 0;
}

.kobiz-simulator .section-note p {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -0.13px;
    color: #000;
}

/* ══════════════ 6. 배점 확인표 ══════════════ */

.kobiz-simulator .table-scroll {
    min-width: 0;
    overflow-x: auto;
}

.kobiz-simulator .score-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-top: 1px solid #cdcdcd;
    border-collapse: collapse;
    table-layout: fixed;
}

.kobiz-simulator .score-table th,
.kobiz-simulator .score-table td {
    border-right: 1px solid #cdcdcd;
    border-bottom: 1px solid #cdcdcd;
    vertical-align: middle;
}

/* 표 왼쪽 테두리는 첫 열이 담당 */
.kobiz-simulator .score-table tr > :first-child {
    border-left: 1px solid #cdcdcd;
}

/* 열 머리 + 대분류/중분류 */
.kobiz-simulator .score-table thead th,
.kobiz-simulator .score-table tbody th {
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.14px;
    text-align: center;
    color: #000;
}

.kobiz-simulator .score-table thead th {
    height: 42px;
}

/* 세부내용 셀 */
.kobiz-simulator .score-table .detail-cell {
    height: 46px;
    padding: 8px 16px;
    background: #fff;
    text-align: left;
}

.kobiz-simulator .score-table .detail-cell label {
    display: flex;
    align-items: flex-start;
    column-gap: 8px;
    cursor: pointer;
}

.kobiz-simulator .score-table .detail-text {
    display: grid;
    row-gap: 2px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.15px;
    color: #000;
}

/* 세부내용 안 보조 설명 (*10% 마다 1점 부여 …) */
.kobiz-simulator .score-table .detail-text small {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.14px;
    color: rgba(0, 0, 0, 0.5);
}

/* 배점 / 점수 셀 */
.kobiz-simulator .score-table .allot-cell,
.kobiz-simulator .score-table .score-cell {
    background: #fff;
    text-align: center;
}

/* 선택된 행 */
.kobiz-simulator .score-table tbody tr.on > td {
    background: #f8f3ff;
}


/* 그룹 안내 문구 행 (세부내용+배점+점수 병합) */
.kobiz-simulator .score-table .note-cell {
    padding: 12px 16px;
    background: #f4f4f4;
    text-align: left;
}

.kobiz-simulator .score-table .note-cell p {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -0.13px;
    color: #000;
}

/* 소계 행 */
.kobiz-simulator .score-table .subtotal-row th,
.kobiz-simulator .score-table .subtotal-row td {
    height: 46px;
    padding: 10px;
    font-size: 15px;
    letter-spacing: -0.15px;
    text-align: center;
}

.kobiz-simulator .score-table .subtotal-row th {
    font-weight: 400;
    color: #000;
}

.kobiz-simulator .score-table .subtotal-row td {
    font-weight: 500;
    color: #6121cd;
}

/* 총점 행 */
.kobiz-simulator .score-table .total-row th,
.kobiz-simulator .score-table .total-row td {
    height: 46px;
    padding: 10px;
    background: #f7f4fc;
    text-align: center;
}

.kobiz-simulator .score-table .total-row td:first-child {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.14px;
    color: #000;
}

.kobiz-simulator .score-table .total-row th,
.kobiz-simulator .score-table .total-row td:last-child {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.15px;
    color: #6121cd;
}

/* ══════════════ 7. 체크박스 / 라디오 ══════════════ */

.kobiz-simulator .check {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* 실제 input 은 박스 위에 투명하게 겹쳐 접근성·키보드 조작 유지 */
.kobiz-simulator .check input {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    appearance: none;
    cursor: pointer;
}

.kobiz-simulator .check span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #d3d3d3;
}

.kobiz-simulator .check.radio span {
    border-radius: 50%;
}

.kobiz-simulator .check input:checked + span {
    background: #6121cd;
}

/* ══════════════ 8. 배점 뱃지 ══════════════ */

.kobiz-simulator .point-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.14px;
    color: #6121cd;
}

.kobiz-simulator .score-cell .point-badge {
	background:#e6d8ff
}

/* 범위 배점 (1~5점 / 2~10점) — 2줄 */
.kobiz-simulator .point-badge.range {
    flex-direction: column;
    height: 48px;
    padding: 0 3px;
    line-height: 1.4;
}

/* ══════════════ 9. 예상 총점 패널 ══════════════ */

.kobiz-simulator .score-panel {
    position: sticky !important; /* kobiz .ps{position:static!important} 대응 */
    top: var(--calc-sticky-top, 20px);
    align-self: start;
    box-sizing: border-box;
    padding: 23px 18px 18px;
    border-radius: 12px;
    background: #311865;
}

.kobiz-simulator .score-panel h2 {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: -0.13px;
    color: #fff;
}

/* 도넛 게이지 */
.kobiz-simulator .score-gauge {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.kobiz-simulator .score-gauge svg {
    display: block;
}

.kobiz-simulator .score-gauge > span {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

.kobiz-simulator .score-gauge b {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.34px;
    color: #fff;
}

.kobiz-simulator .score-gauge > span span {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

/* 섹션별 점수 요약 */
.kobiz-simulator .score-summary {
    display: grid;
    row-gap: 8px;
    margin-top: 22px;
}

.kobiz-simulator .score-summary li {
    display: flex;
    align-items: center;
    column-gap: 8px;
    min-height: 42px;
    padding: 8px 12px 8px 8px;
    border-radius: 8px;
    background: #fff;
}

.kobiz-simulator .score-summary li span:first-child {
    flex-grow: 1;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.52px;
    color: #000;
}

.kobiz-simulator .score-summary li span:last-child {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.13px;
    white-space: nowrap;
    color: #6121cd;
}

/* 패널 하단 참고 문구 */
.kobiz-simulator .score-note {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 300;
    line-height: 19px;
    letter-spacing: -0.13px;
    color: #fff;
}

/* 초기화 버튼 */
.kobiz-simulator .btn-reset {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    margin-top: 16px;
    border: 1px solid #fff;
    border-radius: 8px;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.14px;
    color: #fff;
    cursor: pointer;
    appearance: none;
}

/* ══════════════ 10. 반응형 ══════════════ */

/* 태블릿 — 예상 총점 패널을 본문 아래로 */
@media (max-width: 1024px) {
    .kobiz-simulator .simulator-body {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .kobiz-simulator .score-panel {
        position: static !important;
        width: 100%;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    .kobiz-simulator > hgroup h1 {
        font-size: 20px;
        line-height: 1.4;
    }

    .kobiz-simulator .type-tab {
        grid-template-columns: 1fr 1fr;
    }

    .kobiz-simulator .work-info {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .kobiz-simulator .section-title-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .kobiz-simulator .section-score {
        text-align: left;
    }
}