/*!
 * KTAX 기한 계산기 스타일 (ktax-calculator.css)
 * 범위: .ktax-calculator 하위로만 제한.
 *
 * 워드프레스 테마 격리 메모
 * -------------------------------------------------------------------------
 * 이 컴포넌트는 실제 서비스에서 GeneratePress 자식 테마의 `.entry-content
 * .inside-article` 안에 삽입된다. 그 테마는 h2/h3/p/ul/li/input/select 같은
 * "생 태그" 선택자에 폭넓게 스타일(여백, 글자 크기, 색, ::before 장식 막대,
 * 리스트 점 등)을 건다. 이 파일은 테마를 건드리지 않고 이기기 위해 두 가지
 * 원칙을 쓴다.
 *   1) 모든 내부 요소 규칙은 `.ktax-calculator .ktax-calc .ktax-calc__x`
 *      처럼 클래스 3개를 체인해 (0,3,0) 이상의 특정성을 확보한다. 이 저장소
 *      대상 테마에서 실제로 부딪히는 규칙 중 클래스 2개를 넘는 것이 없으므로
 *      항상 이긴다(!important 불필요).
 *   2) 글꼴(font-family: inherit), 글자 두께(400/600/700만), 자간
 *      (letter-spacing: normal), 줄 높이 등 테마가 body/버튼/인풋/문단에
 *      전역으로 거는 값을 요소마다 명시적으로 다시 선언해 상속으로 새어
 *      들어오는 것을 막는다.
 *   3) 테마가 ::before/::after로 붙이는 장식(h2/h3 포인트 바, ul 리스트 점)은
 *      content: none으로 명시 제거한다.
 */

.ktax-calculator {
    --kc-text: var(--gp-text-main, #16202e);
    --kc-text-sub: var(--gp-text-sub, #556074);
    --kc-text-muted: var(--gp-text-sub, #556074);
    --kc-border: var(--gp-border-strong, #cbd3e0);
    --kc-input-border: var(--gp-border-strong, #cbd3e0);
    --kc-divider: var(--gp-border, #e6eaf1);
    --kc-accent: var(--gp-primary, #1e4fbf);
    --kc-accent-hover: var(--gp-primary-hover, #1740a0);
    --kc-focus-ring: var(--gp-primary-ring, rgba(30, 79, 191, 0.14));
    --kc-result-bg: var(--gp-primary-light, #eef3fe);
    --kc-track-bg: #d6e0f5;
    --kc-card-bg: #FFFFFF;
    --kc-warn-bg: #fdf0ee;
    --kc-warn-text: var(--gp-neg, #c0392b);
    --kc-radius: var(--gp-radius, 12px);
    --kc-radius-sm: var(--gp-radius-sm, 8px);

    display: block;
    margin: 1.8em 0;
    padding: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    color: var(--kc-text);
    text-align: left;
    word-break: keep-all;
}
.ktax-calculator * { box-sizing: border-box; }

/*
 * JS 비활성/실패 대응: 편집자는 .ktax-calculator 안에 대체 문구를 일반 자식 요소로
 * 넣어둘 수 있다. JS는 그 뒤에 계산기 UI를 삽입만 하므로(root.firstChild 앞에
 * 끼워넣기) 대체 문구는 사라지지 않는다. JS가 정상 동작(is-ready)하면 중복 노출을
 * 막기 위해 원래 자식(.ktax-calc가 아닌 요소)만 숨긴다 — JS가 죽거나(또는 필수
 * data-* 누락으로) 렌더링에 실패하면 이 규칙 자체가 적용되지 않으므로 대체 문구는
 * 그대로 보인다.
 */
.ktax-calculator.is-ready > :not(.ktax-calc) {
    display: none;
}

.ktax-calc {
    container-type: inline-size;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-card-bg);
    padding: 32px;
    font-family: inherit;
}

.ktax-calculator .ktax-calc .ktax-calc__header {
    margin: 0 0 20px;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__title {
    font-family: inherit;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: normal;
    margin: 0;
    padding: 0;
    color: var(--kc-text);
}
/* 테마의 h2::before 포인트 바(그라데이션 막대) 무력화 */
.ktax-calculator .ktax-calc .ktax-calc__title::before {
    content: none;
    display: none;
}
.ktax-calculator .ktax-calc .ktax-calc__desc {
    font-family: inherit;
    font-weight: 400;
    margin: 6px 0 0;
    padding: 0;
    font-size: 14.5px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--kc-text-sub);
}

.ktax-calculator .ktax-calc .ktax-calc__field {
    margin: 0 0 24px;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__label {
    display: block;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-text-sub);
    margin: 0 0 8px;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__input {
    display: block;
    width: 100%;
    max-width: 260px;
    height: 48px;
    padding: 0 12px;
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-text);
    background: #fff;
    border: 1px solid var(--kc-input-border);
    border-radius: var(--kc-radius-sm);
    -webkit-appearance: none;
    appearance: none;
}
.ktax-calculator .ktax-calc .ktax-calc__input:focus {
    outline: none;
    border-color: var(--kc-accent);
    box-shadow: 0 0 0 3px var(--kc-focus-ring);
}
.ktax-calculator .ktax-calc .ktax-calc__input:focus-visible {
    outline: none;
    border-color: var(--kc-accent);
    box-shadow: 0 0 0 3px var(--kc-focus-ring);
}
.ktax-calculator .ktax-calc .ktax-calc__hint {
    font-family: inherit;
    font-weight: 400;
    margin: 8px 0 0;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--kc-text-muted);
}

/* ---- 결과 박스 ---- */
.ktax-calculator .ktax-calc .ktax-calc__result {
    border-radius: var(--kc-radius-sm);
    background: var(--kc-result-bg);
    padding: 24px;
    margin: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__result.is-error {
    background: var(--kc-warn-bg);
}
.ktax-calculator .ktax-calc .ktax-calc__error {
    font-family: inherit;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-warn-text);
}

.ktax-calculator .ktax-calc .ktax-calc__result-label {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-text-sub);
    margin: 0 0 6px;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__result-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    margin: 0;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__result-date {
    font-family: inherit;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--kc-text);
    word-break: keep-all;
    overflow-wrap: anywhere;
    margin: 0;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__badge {
    display: inline-block;
    flex: 0 0 auto;
    padding: 4px 10px;
    margin: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    color: #fff;
    background: var(--kc-accent);
    white-space: nowrap;
}
.ktax-calculator .ktax-calc .ktax-calc__badge--warn {
    background: var(--kc-warn-text);
}

/* ---- 진행 막대 ---- */
.ktax-calculator .ktax-calc .ktax-calc__progress { margin: 22px 0 20px; padding: 0; }
.ktax-calculator .ktax-calc .ktax-calc__progress-track {
    position: relative;
    height: 8px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: var(--kc-track-bg);
    overflow: visible;
}
.ktax-calculator .ktax-calc .ktax-calc__progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: var(--kc-accent);
}
.ktax-calculator .ktax-calc .ktax-calc__progress-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    padding: 0;
    border-radius: 50%;
    background: var(--kc-accent);
    border: 2px solid #fff;
    transform: translateY(-50%);
}
.ktax-calculator .ktax-calc .ktax-calc__progress-labels {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--kc-text-muted);
}
.ktax-calculator .ktax-calc .ktax-calc__progress-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__progress-label--today {
    flex: 0 1 auto;
    color: var(--kc-accent);
    font-weight: 700;
    text-align: center;
}

/* ---- 통계 카드 ---- */
.ktax-calculator .ktax-calc .ktax-calc__stats {
    display: flex;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__stat {
    flex: 1 1 0;
    min-width: 0;
    background: var(--kc-card-bg);
    border: 1px solid var(--kc-divider);
    border-radius: var(--kc-radius-sm);
    padding: 14px 16px;
    margin: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__stat--warn {
    background: var(--kc-warn-bg);
    border-color: var(--kc-warn-bg);
}
.ktax-calculator .ktax-calc .ktax-calc__stat--warn .ktax-calc__stat-value {
    color: var(--kc-warn-text);
}
.ktax-calculator .ktax-calc .ktax-calc__stat-label {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-text-muted);
    margin: 0 0 4px;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__stat-value {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--kc-text);
    margin: 0;
    padding: 0;
}

.ktax-calculator .ktax-calc .ktax-calc__note {
    font-family: inherit;
    margin: 0 0 20px;
    padding: 0;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--kc-text-sub);
    line-height: 1.6;
    letter-spacing: normal;
}

/* ---- 버튼 ---- */
.ktax-calculator .ktax-calc .ktax-calc__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__btn {
    min-height: 44px;
    padding: 0 18px;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    border-radius: var(--kc-radius-sm);
    border: 1px solid var(--kc-accent);
    background: var(--kc-accent);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
/* <a>로 만든 버튼(Google 캘린더 링크): 테마의 a 색·밑줄·:visited 색이 새지 않게 상태별로 다시 선언한다. */
.ktax-calculator .ktax-calc a.ktax-calc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
}
.ktax-calculator .ktax-calc a.ktax-calc__btn:link,
.ktax-calculator .ktax-calc a.ktax-calc__btn:visited,
.ktax-calculator .ktax-calc a.ktax-calc__btn:hover,
.ktax-calculator .ktax-calc a.ktax-calc__btn:focus { color: #fff; text-decoration: none; }
.ktax-calculator .ktax-calc .ktax-calc__btn:hover { background: var(--kc-accent-hover); border-color: var(--kc-accent-hover); }
.ktax-calculator .ktax-calc .ktax-calc__btn:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 2px; }
.ktax-calculator .ktax-calc .ktax-calc__btn--secondary {
    background: #fff;
    color: var(--kc-accent);
}
.ktax-calculator .ktax-calc .ktax-calc__btn--secondary:hover { background: var(--kc-result-bg); }
/* 보조 경로: 버튼이 아니라 결과 박스 아래의 작은 텍스트 링크로 보이게 한다. */
.ktax-calculator .ktax-calc .ktax-calc__alt { margin: 12px 0 0; padding: 0; }
.ktax-calculator .ktax-calc .ktax-calc__linkbtn {
    display: inline-block;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-text-sub);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ktax-calculator .ktax-calc .ktax-calc__linkbtn:hover { background: transparent; color: var(--kc-accent); }
.ktax-calculator .ktax-calc .ktax-calc__linkbtn:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 2px; border-radius: 3px; }
.ktax-calculator .ktax-calc .ktax-calc__feedback {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-accent);
    margin: 0;
    padding: 0;
}

/* ---- 세부정보 (계산 방법 / 휴일 연장 / 법적 근거) ---- */
.ktax-calculator .ktax-calc .ktax-calc__details { margin: 20px 0 0; padding: 0; }
.ktax-calculator .ktax-calc .ktax-calc__summary {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-text-sub);
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    width: fit-content;
}
.ktax-calculator .ktax-calc .ktax-calc__summary:hover { color: var(--kc-accent); }
.ktax-calculator .ktax-calc .ktax-calc__summary:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
    border-radius: 3px;
}
.ktax-calculator .ktax-calc .ktax-calc__details-body {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--kc-divider);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ktax-calculator .ktax-calc .ktax-calc__detail-row {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    margin: 0;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__detail-label {
    font-family: inherit;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--kc-text-sub);
    margin: 0 0 2px;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__detail-value {
    font-family: inherit;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.6;
    letter-spacing: normal;
    color: var(--kc-text-muted);
    margin: 0;
    padding: 0;
}

/* ---- 함께 챙길 기한 ---- */
.ktax-calculator .ktax-calc .ktax-calc__related { margin: 24px 0 0; padding: 0; }
.ktax-calculator .ktax-calc .ktax-calc__related-title {
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    margin: 0 0 10px;
    padding: 0;
    color: var(--kc-text);
}
/* 테마의 h3::before 소형 포인트 바 무력화 */
.ktax-calculator .ktax-calc .ktax-calc__related-title::before {
    content: none;
    display: none;
}
.ktax-calculator .ktax-calc .ktax-calc__related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ktax-calculator .ktax-calc .ktax-calc__related-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px 14px;
    margin: 0;
    border: 1px solid var(--kc-divider);
    border-radius: var(--kc-radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    list-style: none;
}
/* 테마의 ul > li::before 리스트 점 무력화 */
.ktax-calculator .ktax-calc .ktax-calc__related-item::before {
    content: none;
    display: none;
}
.ktax-calculator .ktax-calc .ktax-calc__related-label {
    font-weight: 600;
    color: var(--kc-text);
    margin: 0;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__related-date {
    color: var(--kc-text-sub);
    margin: 0;
    padding: 0;
}
.ktax-calculator .ktax-calc .ktax-calc__related-item .ktax-calc__badge {
    margin-left: auto;
    font-size: 12px;
    padding: 3px 9px;
}

/* ---- 안내문 ---- */
.ktax-calculator .ktax-calc .ktax-calc__disclaimer {
    font-family: inherit;
    margin: 24px 0 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--kc-text-muted);
    line-height: 1.6;
    letter-spacing: normal;
}
.ktax-calculator .ktax-calc .ktax-calc__warnings { margin: 8px 0 0; padding: 0; }
/* 경고가 없으면 빈 상자의 위쪽 여백 8px만 남으므로 숨긴다. */
.ktax-calculator .ktax-calc .ktax-calc__warnings:empty { display: none; }
.ktax-calculator .ktax-calc .ktax-calc__warning {
    font-family: inherit;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--kc-warn-text);
    line-height: 1.6;
    letter-spacing: normal;
}

/* 좁은 화면: 컨테이너 쿼리를 우선 쓰고, 지원하지 않는 환경(오래된 브라우저·테마의
   컨테이너 컨텍스트 누락)을 위해 뷰포트 미디어 쿼리로도 같은 규칙을 한 번 더 건다. */
@container (max-width: 480px) {
    .ktax-calculator .ktax-calc .ktax-calc__stats { flex-direction: column; }
    .ktax-calculator .ktax-calc .ktax-calc__actions { flex-direction: column; align-items: stretch; }
    .ktax-calculator .ktax-calc .ktax-calc__btn { width: 100%; }
    .ktax-calculator .ktax-calc .ktax-calc__progress-labels { flex-wrap: wrap; font-size: 11px; row-gap: 4px; }
}

@media (max-width: 480px) {
    .ktax-calc { padding: 20px; }
    .ktax-calculator .ktax-calc .ktax-calc__result { padding: 18px; }
    .ktax-calculator .ktax-calc .ktax-calc__result-date { font-size: 27px; }
    .ktax-calculator .ktax-calc .ktax-calc__stats { flex-direction: column; }
    .ktax-calculator .ktax-calc .ktax-calc__actions { flex-direction: column; align-items: stretch; }
    .ktax-calculator .ktax-calc .ktax-calc__btn { width: 100%; }
    .ktax-calculator .ktax-calc .ktax-calc__progress-labels { flex-wrap: wrap; font-size: 11px; row-gap: 4px; }
}

/* 이 사이트의 테마는 다크 모드를 지원하지 않고 항상 고정 라이트 팔레트로 렌더링되므로
   이 컴포넌트도 다크 모드를 별도로 적용하지 않는다. */