/* Page Layout Styles for EUMP Plugin */

/* 基本ラッパー */
.eump-wrapper {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--eump-font-family);
    font-size: var(--eump-font-size-base);
    line-height: var(--eump-line-height);
    background: var(--eump-background);
    border-radius: var(--eump-border-radius-lg);
    box-shadow: var(--eump-shadow);
    color: var(--eump-text);
    padding: var(--eump-spacing-xl);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ページコンテナ */
.eump-page {
    background: var(--eump-background);
    border-radius: var(--eump-border-radius-lg);
    box-shadow: var(--eump-shadow);
    margin-bottom: var(--eump-spacing-xl);
}

/* シングルカラムページ */
.eump-single-page {
    max-width: var(--eump-content-width);
    margin: var(--eump-spacing-xl) auto;
    padding: var(--eump-spacing-xl);
}

/* 認証関連ページ（ログイン・登録） */
.eump-auth-page {
    min-width: 600px;
    max-width: 800px;
    margin: var(--eump-spacing-xxl) auto;
    padding: var(--eump-spacing-xl);
    background: var(--eump-background);
    border-radius: var(--eump-border-radius-lg);
    box-shadow: var(--eump-shadow);
}

.eump-auth-page__header {
    text-align: center;
    margin-bottom: var(--eump-spacing-xl);
}

.eump-auth-page__title {
    font-size: calc(var(--eump-font-size-xl) * 1.2);
    color: var(--eump-text);
    margin: 0 0 var(--eump-spacing-sm);
}

.eump-auth-page__subtitle {
    color: var(--eump-text-light);
    font-size: var(--eump-font-size-base);
    margin: 0;
}

.eump-auth-page__content {
    margin-bottom: var(--eump-spacing-xl);
}

.eump-auth-page__footer {
    text-align: center;
    margin-top: var(--eump-spacing-xl);
    padding-top: var(--eump-spacing-lg);
    border-top: 1px solid var(--eump-border);
}

/* 2カラムページ（サイドバー付き） */
.eump-two-column-page {
    display: flex;
    gap: var(--eump-spacing-xl);
    max-width: var(--eump-container-max-width);
    margin: var(--eump-spacing-xl) auto;
    padding: 0 var(--eump-spacing-lg);
}

/* ページヘッダー */
.eump-page-header {
    padding: var(--eump-spacing-xl);
    border-bottom: 2px solid var(--eump-primary);
    margin-bottom: var(--eump-spacing-xl);
}

.eump-page-title {
    font-size: calc(var(--eump-font-size-xl) * 1.2);
    color: var(--eump-text);
    margin: 0 0 var(--eump-spacing-sm);
}

.eump-page-subtitle {
    color: var(--eump-text-light);
    font-size: var(--eump-font-size-base);
    margin: 0;
}

/* ページコンテンツ */
.eump-page-content {
    padding: 0 var(--eump-spacing-xl) var(--eump-spacing-xl);
}

/* ページフッター */
.eump-page-footer {
    padding: var(--eump-spacing-lg) var(--eump-spacing-xl);
    border-top: 1px solid var(--eump-border);
    background: var(--eump-background-light);
}

/* セクション */
.eump-section {
    margin-bottom: var(--eump-spacing-xl);
}

.eump-section:last-child {
    margin-bottom: 0;
}

.eump-section-title {
    font-size: var(--eump-font-size-lg);
    color: var(--eump-text);
    margin: 0 0 var(--eump-spacing-md);
    padding-bottom: var(--eump-spacing-xs);
    border-bottom: 1px solid var(--eump-border);
}

/* パンくずリスト */
.eump-breadcrumb {
    padding: var(--eump-spacing-md) var(--eump-spacing-xl);
    background: var(--eump-background-light);
    border-bottom: 1px solid var(--eump-border);
}

.eump-breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eump-spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.eump-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: var(--eump-spacing-xs);
    color: var(--eump-text-light);
}

.eump-breadcrumb a {
    color: var(--eump-primary);
    text-decoration: none;
}

.eump-breadcrumb a:hover {
    text-decoration: underline;
}

/* レスポンシブ対応 */
@media (max-width: var(--eump-breakpoint-md)) {
    .eump-two-column-page {
        flex-direction: column;
        padding: 0;
    }

    .eump-page-header,
    .eump-page-content {
        padding: var(--eump-spacing-lg);
    }

    .eump-single-page {
        margin: var(--eump-spacing-lg);
        padding: var(--eump-spacing-lg);
    }

    .eump-breadcrumb {
        padding: var(--eump-spacing-md);
    }

    .eump-auth-page {
        min-width: auto;
        margin: var(--eump-spacing-lg);
        padding: var(--eump-spacing-lg);
    }
}

/* アクセシビリティ */
.eump-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}