/* 汉字笔顺与组词查询页 */
body {
    background-color: #FFF9F0;
}

.hanzi-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 80px var(--site-gutter) 40px;
}

/* ===== 查询区 ===== */
.zi-search {
    margin-bottom: 1.2rem;
}

.zi-search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #E3D5C2;   /* 暖棕描边（原为冷蓝 #dfe6ef） */
    border-radius: 999px;
    padding: 0.3rem 0.4rem 0.3rem 1rem;
    box-shadow: 0 1px 4px rgba(96, 64, 24, 0.06);
}

.zi-search-box .bi-search {
    color: #9C948A;
    font-size: 1rem;
}

.zi-search-box #ziInput {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.15rem;
    color: #262626;
    padding: 0.35rem 0;
}

.zi-search-box #ziInput::-webkit-search-cancel-button {
    cursor: pointer;
}

.zi-search-btn {
    flex: none;
    border: none;
    border-radius: 999px;
    padding: 0.4rem 1.2rem;
    font-size: 0.95rem;
    color: #ffffff;
    background: #FF6B6B;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .zi-search-btn:hover {
        background: #C23434;
    }
}

/* 待查字：横滑溢出、当前字高亮 */
.zi-queue {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.zi-queue::-webkit-scrollbar {
    height: 6px;
}

.zi-queue::-webkit-scrollbar-thumb {
    background: #E0D2BC;
    border-radius: 3px;
}

.zi-queue-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.7rem;
    font-size: 1.3rem;
    color: #262626;
    background: #ffffff;
    border: 1px solid #E3D5C2;   /* 暖棕描边（原为冷蓝 #dfe6ef） */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    .zi-queue-chip:hover {
        border-color: #D93E3E;
        color: #D93E3E;
    }
}

.zi-queue-chip.active {
    color: #ffffff;
    background: #FF6B6B;
    border-color: #D93E3E;
}

/* ===== 结果卡 ===== */
.zi-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(96, 64, 24, 0.06);
    overflow: hidden;
}

.zi-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid #EFE6D9;
}

/* 字资料（拼音 / 部首 / 结构）：纯文本排布，不用胶囊底 */
.zi-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 1.1rem;
    font-size: 1.1rem;
    color: #1d1c1a;
    min-width: 0;
}

.zi-meta-item {
    white-space: nowrap;
}

.zi-meta-item i {
    font-style: normal;
    color: #9C948A;
    margin-right: 0.3rem;
}

.zi-meta-empty {
    color: #9C948A;
}

.zi-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.zi-pane {
    padding: 0.9rem 1.1rem 1rem;
    min-width: 0;
}

.zi-pane + .zi-pane {
    border-top: 1px solid #EFE6D9;
}

.zi-pane-title {
    display: flex;
    align-items: center;
    gap: 0.4rem 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4D4A46;   /* 暖深灰（原为冷灰 #374151） */
}

.zi-pane-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: #FF6B6B;
}

.zi-pane-stroke .zi-pane-title::before {
    background: #f59e0b;
}

.zi-pane-tip {
    font-size: 0.78rem;
    font-weight: 400;
    color: #9C948A;
}

.zi-replay {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
    color: #C23434;
    background: #FFE5E5;
    border: 1px solid #FFC9C9;   /* 珊瑚描边（原为冷蓝 #d9e6f5） */
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.zi-replay i {
    font-size: 0.85rem;
}

@media (hover: hover) {
    .zi-replay:hover {
        background: #FF6B6B;
        border-color: #D93E3E;
        color: #ffffff;
    }
}

/* 田字格：网格与笔顺 g 在同一个带 viewBox 的 svg 中，随 svg 缩放永远不被裁。
   width: 100% 与下方分步笔画区等宽，aspect-ratio 保持正方形；超出时由 max-width 封顶。 */
.zi-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 320px;
    margin: 0 auto;
    cursor: pointer;
}

.zi-stage-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 分步笔画 */
.zi-steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 6px 8px;
    margin-top: 0.7rem;
}

.zi-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.zi-step-no {
    font-size: 0.9rem;
    color: #4D4A46;
    white-space: nowrap;
}

.zi-step-svg {
    width: 100%;
    border: 1px solid #EFE6D9;   /* 暖米边（原为冷灰 #eee） */
    border-radius: 6px;
    background: #ffffff;
}

/* 组词表 */
.zi-words {
    overflow-x: auto;
    /* 「组词」按钮 scrollIntoView 时的滚动目标：避开顶部固定导航栏 */
    scroll-margin-top: 78px;
}

.zi-words-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.08rem;
}

/* 每行 2 词（4 列均分）。是否启用由 JS 按组词区实际宽度决定（≥460px），
   不用视口断点 —— 窄屏下笔顺/组词上下堆叠，组词区反而更宽（见 index.js currentCols） */
.zi-words-table.zi-words-cols-2 {
    table-layout: fixed;
}

.zi-words-table.zi-words-cols-2 th,
.zi-words-table.zi-words-cols-2 td {
    width: 25%;
}

.zi-words-table thead th {
    background: #FFE5E5;
    color: #6E6A64;              /* 暖灰字（原为冷蓝 #45607e） */
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid #FFD3D3;   /* 珊瑚系边（原为冷蓝 #d6e1ec） */
}

.zi-words-table tbody td {
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid #F5EDE0;   /* 暖米边（原为冷灰 #f1f3f5） */
    vertical-align: middle;
}

@media (hover: hover) {
    .zi-words-table tbody tr:hover {
        background: #FFF9F0;
    }
}

.zi-words-table .zi-w {
    font-weight: 500;
    color: #262626;
    white-space: nowrap;
}

.zi-words-table .zi-p {
    color: #6E6A64;
    word-break: break-all;
}

/* 加载 / 空态占位 */
.zi-placeholder {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #9C948A;
    font-size: 0.95rem;
}

.zi-intro {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(96, 64, 24, 0.06);
    padding: 2.5rem 1.2rem;
    text-align: center;
    color: #6E6A64;
}

.zi-intro .intro-icon {
    font-size: 2.4rem;
    color: #FFD0CC;   /* 淡珊瑚（原为冷蓝 #cfe0f1） */
    margin-bottom: 0.5rem;
}

.zi-intro .intro-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #262626;   /* 暖黑（原为冷石板灰 #334155） */
    margin-bottom: 0.4rem;
}

.zi-intro p {
    margin: 0 auto;
    max-width: 30em;
    font-size: 0.9rem;
    color: #9C948A;
}

/* ===== 平板 / 笔记本 / 台式机：笔顺与组词左右并列 ===== */
@media (min-width: 768px) {
    .zi-card-body {
        grid-template-columns: 340px minmax(0, 1fr);
    }

    .zi-pane + .zi-pane {
        border-top: none;
        border-left: 1px solid #EFE6D9;
    }

    .zi-stage {
        max-width: 280px;
    }

    .zi-steps {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    }

    /* 左列内容较短时吸附跟随滚动，便于对照笔顺看组词 */
    .zi-pane-stroke {
        position: sticky;
        top: 80px;
        align-self: start;
    }
}

@media (max-width: 760px) {
    .hanzi-container {
        padding: 72px var(--site-gutter) 30px;
    }

    .zi-card-head {
        padding: 0.7rem 0.85rem;
    }

    .zi-pane {
        padding: 0.8rem 0.85rem 0.9rem;
    }

    .zi-stage {
        max-width: 240px;
    }

    .zi-steps {
        grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    }

    .zi-words-table {
        font-size: 1rem;
    }
}