.indWrap {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* ==========================================
       PAGE HERO (Title + Search)
       ========================================== */
    .page-hero {
        background: #ffffff;
        padding: 4px 0 10px;
    }

    .page-title-wrap {
        max-width: 1000px;
        margin: 0 auto;
        padding: 4px 20px 10px;
    }

    .page-title-wrap h1 {
        margin: 0;
        font-size: 28px;
        font-weight: 600;
        color: #111;
        letter-spacing: 0.5px;
    }

    .page-title-wrap .sub-title {
        margin: 2px 0 0;
        font-size: 14px;
        color: #888;
    }

    /* ==========================================
       SEARCH BOX
       ========================================== */
    .search-wrap {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px 4px;
    }

    .search-box {
        display: flex;
        align-items: center;
        background: #ffffff;
        border-radius: 10px;
        padding: 4px;
        border: 1px solid #e2e8f0;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .search-box:focus-within {
        border-color: #83561f;
        box-shadow: 0 6px 24px rgba(131, 86, 31, 0.10);
        transform: translateY(-1px);
    }

    .search-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #b0b8c4;
        margin-right: 8px;
        transition: color 0.3s ease;
        flex-shrink: 0;
        line-height: 0;
    }

    .search-box:focus-within .search-icon {
        color: #83561f;
    }

    .search-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .search-input {
        flex: 1;
        border: none;
        outline: none;
        padding: 5px 0;
        font-size: 14px;
        color: #1e293b;
        background: transparent;
        min-width: 0;
        font-weight: 400;
        letter-spacing: 0.3px;
    }

    .search-input::placeholder {
        color: #b0b8c4;
        font-weight: 300;
    }

    .search-btn {
        flex-shrink: 0;
        padding: 5px 18px;
        background: #c7c7c7;
        color: #ffffff;
        border: none;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.4px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 4px 14px rgba(131, 86, 31, 0.25);
        white-space: nowrap;
        position: relative;
        overflow: hidden;
    }

    .search-btn::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    .search-btn:hover::after {
        opacity: 1;
    }

    .search-btn:hover {
        background: #333333;
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(131, 86, 31, 0.35);
    }

    .search-btn:active {
        transform: scale(0.96);
        box-shadow: 0 2px 8px rgba(131, 86, 31, 0.2);
    }

    .search-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: 0 2px 10px rgba(131, 86, 31, 0.15);
    }

    /* ==========================================
       CATEGORY TABS
       ========================================== */
    .inTabsWrap {
        padding: 20px 0 8px;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .inTabs {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .inTab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 94px;
        height: 40px;
        padding: 0 16px;
        border: 1px solid #e6e0d7;
        text-decoration: none;
        color: #333;
        font-size: 14px;
        background: #fff;
        transition: .2s ease;
        border-radius: 10px;
    }

    .inTab:hover {
        border-color: #cdb99d;
        color: #111;
    }

    .inTab.active {
        background: #111;
        color: #fff;
        border-color: #111;
    }

    /* ==========================================
       ARTICLE LIST
       ========================================== */
    .inMain {
        padding: 0;
    }

    .inHeadRow {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding-bottom: 20px;
        border-bottom: 1px solid #efefef;
    }

    .inHeadRow .info-text {
        margin: 0;
        font-size: 13px;
        color: #888;
    }

    .inHeadRow .info-text .highlight {
        color: #007bff;
        margin-left: 15px;
        display: inline-block;
    }

    .inHeadRow .info-text .clear-link {
        color: #dc3545;
        margin-left: 10px;
        text-decoration: none;
    }

    .article-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        background-color: #fefefe;
    }

    .article-item {
        display: grid;
        grid-template-columns: 1fr auto auto auto;
        align-items: center;
        gap: 20px 30px;
        padding: 10px 8px;
        border-bottom: 1px solid #f0ebe6;
        transition: background 0.15s;
        border-radius: 4px;
        margin: 0 -8px;
    }

    .article-item:last-child {
        border-bottom: none;
    }

    .article-item:hover {
        background: #f9f8f6;
    }

    .article-content {
        min-width: 0;
        padding-left: 15px;
    }

    .article-content .title {
        margin: 0 0 2px 0;
        font-size: 15px;
        font-weight: 550;
        line-height: 1.4;
        display: inline-block;
        transition: transform 0.3s ease;
    }
    .article-content .title:hover {
        transform: scale(1.05);
    }

    .article-content .title a {
        color: #1e1a17;
        text-decoration: none;
    }

    .article-content .title a:hover {
        color: #a67a5c;
    }

    .article-content .summary {
        font-size: 14px;
        color: #6e5f53;
        margin-top: 2px;
        max-width: 600px;
    }

    .article-tag {
        font-size: 13px;
        font-weight: 450;
        color: #4d3f35;
        background: #f5f1ed;
        padding: 4px 16px;
        border-radius: 30px;
        white-space: nowrap;
        display: inline-block;
        text-align: center;
    }

    .article-date {
        font-size: 14px;
        color: #a08b7e;
        white-space: nowrap;
    }

    .article-link {
        font-size: 14px;
        font-weight: 500;
        color: #a67a5c;
        text-decoration: none;
        transition: color 0.2s;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .article-link:hover {
        color: #7d5c44;
    }

    .article-link .arrow {
        transition: transform 0.2s;
        display: inline-block;
    }

    .article-link:hover .arrow {
        transform: translateX(4px);
    }

    .inEmpty {
        padding: 50px 20px;
        text-align: center;
        border: 1px dashed #ddd;
        color: #888;
        font-size: 14px;
    }

    /* ==========================================
       PAGINATION
       ========================================== */
    .pagination-wrap {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 18px;
        box-sizing: border-box;
        text-align: center;
    }

    .pagination {
        display: inline-flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        margin: 20px auto;
        flex-wrap: wrap;
    }

    .page-button {
        display: inline-block;
        padding: 8px 14px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fff;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.2s;
    }

    .page-button:hover:not(.disabled):not(.active-page) {
        background-color: #f0f0f0;
        border-color: #999;
    }

    .page-button.active-page {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
        font-weight: bold;
    }

    .page-button.disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

    /* ==========================================
       RESPONSIVE - Mobile
       ========================================== */
    @media (max-width: 768px) {
        .page-title-wrap h1 {
            font-size: 22px;
        }
        .page-title-wrap .sub-title {
            font-size: 12px;
        }

        .inTabsWrap {
            padding: 12px 0 4px;
        }
        .inTabs {
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 8px;
            padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .inTabs::-webkit-scrollbar {
            display: none;
        }
        .inTab {
            flex: 0 0 auto;
            min-width: auto;
            padding: 0 14px;
            height: 36px;
            font-size: 13px;
            border-radius: 20px;
            white-space: nowrap;
        }

        .inHeadRow {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            padding-bottom: 14px;
            margin-bottom: 16px;
        }
        .inHeadRow .info-text {
            font-size: 12px;
        }

        .search-box {
            padding: 3px 3px 3px 14px;
            border-radius: 30px;
        }
        .search-input {
            padding: 8px 0;
            font-size: 14px;
        }
        .search-btn {
            padding: 6px 16px;
            font-size: 13px;
            border-radius: 30px;
        }
        .search-icon svg {
            width: 18px;
            height: 18px;
        }

        .article-item {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 6px 12px;
            padding: 16px 0;
            margin: 0;
            border-radius: 0;
        }
        .article-item:hover {
            background: transparent;
        }
        .article-content {
            grid-column: 1 / -1;
        }
        .article-content .title {
            font-size: 17px;
        }
        .article-content .title a {
            display: block;
        }
        .article-content .summary {
            font-size: 14px;
            max-width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.6;
        }
        .article-tag {
            font-size: 12px;
            padding: 3px 14px;
            justify-self: start;
        }
        .article-date {
            font-size: 12px;
            justify-self: end;
        }
        .article-link {
            grid-column: 1 / -1;
            font-size: 13px;
            justify-self: start;
        }

        .pagination {
            gap: 4px;
            margin: 12px auto;
        }
        .page-button {
            padding: 6px 11px;
            font-size: 13px;
            min-width: 34px;
            text-align: center;
        }
    }

    @media (max-width: 420px) {
        .indWrap {
            padding: 0 12px;
        }
        .page-title-wrap {
            padding: 4px 14px 6px;
        }
        .page-title-wrap h1 {
            font-size: 18px;
        }
        .page-title-wrap .sub-title {
            font-size: 11px;
        }
        .search-wrap {
            padding: 0 14px;
        }
        .inTab {
            height: 32px;
            font-size: 12px;
            padding: 0 12px;
            border-radius: 16px;
        }
        .article-item {
            padding: 12px 0;
            gap: 4px 10px;
        }
        .article-content .title {
            font-size: 15px;
        }
        .article-content .summary {
            font-size: 13px;
            -webkit-line-clamp: 2;
        }
        .article-tag {
            font-size: 10px;
            padding: 2px 10px;
        }
        .article-date {
            font-size: 10px;
        }
        .article-link {
            font-size: 12px;
        }
        .search-input {
            font-size: 13px;
            padding: 6px 0;
        }
        .search-btn {
            padding: 5px 12px;
            font-size: 12px;
        }
        .search-box {
            padding: 2px 2px 2px 12px;
        }
        .page-button {
            padding: 4px 8px;
            font-size: 11px;
            min-width: 28px;
        }
        .pagination {
            gap: 3px;
        }
    }