/* Style 1 notice and agreement mobile layout. Desktop styles remain unchanged. */
@media (max-width: 768px) {
    body.notice-index-body {
        margin: 0;
        background: #f4f6f8;
        color: #1f2937;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body.notice-index-body,
    body.notice-index-body * {
        box-sizing: border-box;
    }

    body.notice-index-body .container {
        width: 100% !important;
        max-width: none;
        padding-right: 14px;
        padding-left: 14px;
    }

    /* Compact page intro */
    .notice-index-body .page-hero {
        margin-top: 60px;
        padding: 18px 0 16px;
        border-bottom: 1px solid #e9edf2;
        background: #ffffff;
    }

    .notice-index-body .page-hero .container {
        display: block;
    }

    .notice-index-body .page-hero-left h1 {
        margin: 0;
        color: #172033;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0;
    }

    .notice-index-body .page-hero-left p {
        margin: 6px 0 0;
        color: #778196;
        font-size: 13px;
        line-height: 1.6;
    }

    .notice-index-body .page-hero-right {
        display: none;
    }

    /* Main reading surface */
    .notice-index-body .main-content {
        padding: 12px 0 28px;
    }

    .notice-index-body .main-content .container {
        display: block;
    }

    .notice-index-body .notice-list {
        padding: 0;
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .notice-index-body .notice-list-header {
        min-height: 44px;
        margin: 0;
        padding: 9px 2px 10px;
        border-bottom: 0;
    }

    .notice-index-body .notice-list-header h2 {
        margin: 0;
        color: #253047;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.5;
    }

    .notice-index-body .notice-list-header .total {
        color: #8b95a8;
        font-size: 12px;
    }

    /* Each announcement remains a distinct repeated item. */
    .notice-index-body .notice-item {
        margin-bottom: 10px;
        padding: 16px 15px;
        overflow: hidden;
        border: 1px solid #e5eaf0;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
    }

    .notice-index-body .notice-item:last-child {
        margin-bottom: 0;
        border-bottom: 1px solid #e5eaf0;
    }

    .notice-index-body .notice-item:hover {
        background: #ffffff;
    }

    .notice-index-body .notice-item-title {
        margin: 0 0 8px;
        color: #1d2738;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .notice-index-body .notice-item-summary {
        margin: 0 0 12px;
        color: #667085;
        font-size: 14px;
        line-height: 1.75;
        -webkit-line-clamp: 3;
    }

    .notice-index-body .notice-item-meta {
        gap: 7px 14px;
        color: #929bad;
        font-size: 12px;
        line-height: 1.5;
    }

    .notice-index-body .notice-item-meta .tag {
        height: 22px;
        padding: 0 9px;
        border-radius: 6px;
        font-size: 11px;
    }

    .notice-index-body .notice-empty {
        padding: 48px 16px;
        border: 1px solid #e5eaf0;
        border-radius: 8px;
        background: #ffffff;
    }

    /* Touch-friendly pagination */
    .notice-index-body .notice-pagination {
        margin-top: 12px;
        padding: 12px 0 0;
        border-top: 0;
    }

    .notice-index-body .pagination-buttons {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .notice-index-body .pagination-buttons::-webkit-scrollbar {
        display: none;
    }

    .notice-index-body .pagination-buttons a,
    .notice-index-body .pagination-buttons span {
        min-width: 40px;
        height: 40px;
        flex: 0 0 auto;
        padding: 0 11px;
        border-radius: 8px;
        font-size: 13px;
    }

    .notice-index-body .pagination-size {
        justify-content: flex-end;
        width: 100%;
        color: #778196;
        font-size: 12px;
    }

    .notice-index-body .pagination-size select {
        min-width: 82px;
        height: 40px;
        border-radius: 8px;
        font-size: 13px;
    }

    /* Stack the desktop sidebar below the main content on a phone. */
    .notice-index-body .sidebar {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        margin-top: 14px;
    }

    .notice-index-body .sidebar-card {
        width: 100%;
        padding: 16px 15px 18px;
        border: 1px solid #e5eaf0;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
    }

    /* Agreement long-form typography */
    .agreement-page-body .agreement-article {
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e5eaf0;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
    }

    .agreement-page-body .agreement-content {
        width: 100%;
        min-width: 0;
        padding: 19px 16px 24px;
        color: #4b5565;
        font-size: 15px;
        line-height: 1.9;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .agreement-page-body .agreement-content p {
        margin: 0 0 15px;
    }

    .agreement-page-body .agreement-content h1,
    .agreement-page-body .agreement-content h2,
    .agreement-page-body .agreement-content h3,
    .agreement-page-body .agreement-content h4,
    .agreement-page-body .agreement-content h5,
    .agreement-page-body .agreement-content h6 {
        margin: 24px 0 10px;
        color: #202a3c;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .agreement-page-body .agreement-content h1 { font-size: 22px; }
    .agreement-page-body .agreement-content h2 { font-size: 19px; }
    .agreement-page-body .agreement-content h3 { font-size: 17px; }
    .agreement-page-body .agreement-content h4,
    .agreement-page-body .agreement-content h5,
    .agreement-page-body .agreement-content h6 { font-size: 16px; }

    .agreement-page-body .agreement-content ul,
    .agreement-page-body .agreement-content ol {
        margin: 10px 0 16px;
        padding-left: 22px;
    }

    .agreement-page-body .agreement-content li {
        margin-bottom: 7px;
        padding-left: 2px;
    }

    .agreement-page-body .agreement-content blockquote {
        margin: 16px 0;
        padding: 12px 13px;
        border-left-width: 3px;
        border-radius: 6px;
        line-height: 1.8;
    }

    .agreement-page-body .agreement-content a {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 3px;
        overflow-wrap: anywhere;
    }

    .agreement-page-body .agreement-content img,
    .agreement-page-body .agreement-content video,
    .agreement-page-body .agreement-content iframe {
        display: block;
        max-width: 100% !important;
        height: auto !important;
        margin: 14px auto;
        border-radius: 6px;
    }

    .agreement-page-body .agreement-content table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        margin: 16px 0;
        overflow-x: auto;
        table-layout: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .agreement-page-body .agreement-content table th,
    .agreement-page-body .agreement-content table td {
        min-width: 112px;
        padding: 10px;
        white-space: normal;
    }

    .agreement-page-body .agreement-content pre,
    .agreement-page-body .agreement-content code {
        max-width: 100%;
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* FAQ uses the same reading rhythm without nested card padding. */
    .agreement-problem-body .agreement-article {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .agreement-problem-body .faq-list {
        gap: 10px;
        padding: 0;
    }

    .agreement-problem-body .faq-item--static,
    .agreement-problem-body .faq-item--empty {
        border-color: #e5eaf0;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
    }

    .agreement-problem-body .faq-question--static {
        gap: 11px;
        padding: 15px 14px;
    }

    .agreement-problem-body .faq-question__index {
        width: 34px;
        height: 34px;
        border-radius: 7px;
        font-size: 12px;
    }

    .agreement-problem-body .faq-question__text {
        font-size: 15px;
        line-height: 1.55;
    }

    .agreement-problem-body .faq-answer--plain {
        padding: 0 14px 15px;
    }

    .agreement-problem-body .faq-answer--plain .agreement-content {
        padding: 14px 0 0;
        font-size: 14px;
        line-height: 1.85;
    }
}

@media (max-width: 374px) {
    body.notice-index-body .container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .notice-index-body .notice-item,
    .agreement-page-body .agreement-content {
        padding-right: 13px;
        padding-left: 13px;
    }

    .notice-index-body .notice-item-meta {
        gap: 6px 10px;
    }
}