/* ===================================================================
   Tax Calculator — 메인 페이지 전용 스타일
   style.css 의 토큰을 사용한다. index.php 에서만 로드한다.
   =================================================================== */

/* 소개 — 구 .hero-section (100px 패딩 + 통계 카드 3개) 대체 */
.tc-home-intro {
    padding: var(--tc-space-8) 0;
    border-bottom: 1px solid var(--tc-border);
}

.tc-home-intro h1 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    margin: 0 0 var(--tc-space-3);
}

.tc-home-intro p {
    color: var(--tc-muted);
    font-size: 1rem;
    margin: 0;
}

/* 카테고리 바로가기 */
.tc-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
    margin-top: var(--tc-space-4);
    padding: 0;
    list-style: none;
}

.tc-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--tc-space-2) var(--tc-space-4);
    border: 1px solid var(--tc-border);
    border-radius: 999px;
    background: var(--tc-surface);
    color: var(--tc-action);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.tc-jump a:hover {
    border-color: var(--tc-action);
    background: var(--tc-info-bg);
}

/* ===================================================================
   카테고리 섹션
   색은 라벨·세로선에만 쓴다. 버튼색은 전부 --tc-action.
   =================================================================== */

.tc-category {
    margin-block: var(--tc-space-8);
    --tc-category-color: var(--tc-action);
}

.tc-category[data-category="work"]     { --tc-category-color: var(--tc-work); }
.tc-category[data-category="business"] { --tc-category-color: var(--tc-business); }
.tc-category[data-category="finance"]  { --tc-category-color: var(--tc-finance); }
.tc-category[data-category="property"] { --tc-category-color: var(--tc-property); }

.tc-category > h2 {
    border-left: 4px solid var(--tc-category-color);
    padding-left: var(--tc-space-3);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--tc-space-4);
}

.tc-category-count {
    color: var(--tc-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: var(--tc-space-2);
}

/* ===================================================================
   계산기 카드
   =================================================================== */

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--tc-space-4);
}

.calculator-card {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-3);
    padding: var(--tc-space-5, 20px);
    text-decoration: none;
    color: var(--tc-text);
    transition: border-color .15s ease;
}

.calculator-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--tc-text);
}

.calculator-description {
    color: var(--tc-muted);
    font-size: 0.925rem;
    margin: 0;
}

.calculator-button {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    min-height: 44px;
    padding: var(--tc-space-2) var(--tc-space-4);
    background: var(--tc-action);
    color: var(--tc-on-action);
    border-radius: var(--tc-radius-sm);
    font-size: 0.925rem;
    font-weight: 600;
}

.calculator-card:hover {
    border-color: var(--tc-action);
}

.calculator-card:hover .calculator-button {
    background: var(--tc-action-hover);
}

.calculator-card:active .calculator-button {
    background: var(--tc-action-active);
}

/* 안내 전용 화면 표시 */
.tc-category-label {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tc-surface-muted);
    border: 1px solid var(--tc-border);
    color: var(--tc-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ===================================================================
   세율 표 패널
   =================================================================== */

.tc-rate-panel {
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.tc-rate-heading {
    display: flex;
    align-items: center;
    gap: var(--tc-space-2);
    padding: var(--tc-space-4) var(--tc-space-6);
    background: var(--tc-info-bg);
    color: var(--tc-info);
    border-bottom: 1px solid var(--tc-border);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.tc-rate-badge {
    display: inline-block;
    min-width: 52px;
    padding: 4px 10px;
    background: var(--tc-action);
    color: var(--tc-on-action);
    border-radius: var(--tc-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
}

.tc-rate-section {
    margin-block: var(--tc-space-12);
}

.tc-rate-section > h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--tc-space-2);
}

.tc-rate-section > p {
    color: var(--tc-muted);
    margin: 0 0 var(--tc-space-6);
}

/* ===================================================================
   자주 묻는 질문
   =================================================================== */

.tc-faq {
    margin-block: var(--tc-space-12);
}

.tc-faq > h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--tc-space-4);
}

.tc-faq-item {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    margin-bottom: var(--tc-space-2);
}

.tc-faq-item > summary {
    cursor: pointer;
    padding: var(--tc-space-4);
    font-weight: 600;
    color: var(--tc-text);
    list-style-position: inside;
}

.tc-faq-item > summary:hover {
    color: var(--tc-action);
}

.tc-faq-item[open] > summary {
    border-bottom: 1px solid var(--tc-border);
}

.tc-faq-item > p {
    margin: 0;
    padding: var(--tc-space-4);
    color: var(--tc-muted);
    line-height: 1.8;
}

/* 세율표의 적용 기준 연도 표기 */
.tc-rate-note {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--tc-muted);
}