/* =========================================================
   Deltafiber 共通デザイントークン + 顧客向けUI基盤
   （社内 /work 画面は work/layout.blade.php 内スタイルを併用）
   ========================================================= */
:root {
    /* カラートークン */
    --df-brand: #0b5cab;
    --df-brand-dark: #094a89;
    --df-brand-light: #e8f1fb;
    --df-text: #1f2937;
    --df-text-muted: #6b7280;
    --df-bg: #f6f8fa;
    --df-surface: #ffffff;
    --df-border: #e5e7eb;
    --df-success: #047857;
    --df-success-bg: #ecfdf5;
    --df-danger: #b91c1c;
    --df-danger-bg: #fef2f2;
    --df-warning: #b45309;
    --df-warning-bg: #fffbeb;
    --df-info: #0e7490;
    --df-info-bg: #ecfeff;

    /* 形状・余白 */
    --df-radius: 10px;
    --df-radius-sm: 6px;
    --df-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    --df-space: 16px;

    --df-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.df-body {
    font-family: var(--df-font);
    color: var(--df-text);
    background: var(--df-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- ヘッダー ---------- */
.df-header {
    background: var(--df-surface);
    border-bottom: 1px solid var(--df-border);
    position: sticky; top: 0; z-index: 50;
}
.df-header-inner {
    max-width: 1200px; margin: 0 auto; padding: 10px 20px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.df-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.df-brand-logo { font-weight: 800; font-size: 18px; color: var(--df-brand); letter-spacing: .02em; }
.df-brand-sub { font-size: 12px; color: var(--df-text-muted); }
.df-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.df-nav a, .df-nav button.df-linklike {
    display: inline-block; padding: 7px 12px; border-radius: var(--df-radius-sm);
    text-decoration: none; color: var(--df-text); font-size: 14px;
    border: none; background: none; cursor: pointer; font-family: inherit;
}
.df-nav a:hover, .df-nav button.df-linklike:hover { background: var(--df-brand-light); color: var(--df-brand-dark); }
.df-nav a.is-active { background: var(--df-brand-light); color: var(--df-brand-dark); font-weight: 600; }

/* 言語切替は css/lang-switch.css へ出した（社内の画面と共通・2026-09-09） */

/* ---------- レイアウト ---------- */
.df-main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 64px; }
.df-main--narrow { max-width: 560px; }
.df-footer {
    border-top: 1px solid var(--df-border); background: var(--df-surface);
    margin-top: 40px;
}
.df-footer-inner {
    max-width: 1200px; margin: 0 auto; padding: 18px 20px;
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    font-size: 12.5px; color: var(--df-text-muted);
}

/* ---------- 部品 ---------- */
.df-card {
    background: var(--df-surface); border: 1px solid var(--df-border);
    border-radius: var(--df-radius); box-shadow: var(--df-shadow);
    padding: 20px; margin-bottom: var(--df-space);
}
.df-card h1, .df-card h2 { margin-top: 0; }

.df-btn {
    display: inline-block; padding: 10px 18px; border-radius: var(--df-radius-sm);
    font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; font-family: inherit; line-height: 1.4;
}
.df-btn-primary { background: var(--df-brand); color: #fff; }
.df-btn-primary:hover { background: var(--df-brand-dark); }
.df-btn-outline { background: var(--df-surface); color: var(--df-brand); border-color: var(--df-brand); }
.df-btn-outline:hover { background: var(--df-brand-light); }
.df-btn-ghost { background: transparent; color: var(--df-text-muted); border-color: var(--df-border); }
.df-btn-ghost:hover { background: var(--df-bg); }
.df-btn[disabled] { opacity: .5; cursor: not-allowed; }

.df-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; border: 1px solid transparent;
}
.df-badge-issued { background: var(--df-info-bg); color: var(--df-info); }
.df-badge-ordered { background: var(--df-success-bg); color: var(--df-success); }
.df-badge-cancelled { background: var(--df-danger-bg); color: var(--df-danger); }
.df-badge-muted { background: var(--df-bg); color: var(--df-text-muted); }

/* フラッシュ */
.df-flash { border-radius: var(--df-radius-sm); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; border: 1px solid; }
.df-flash-success { background: var(--df-success-bg); color: var(--df-success); border-color: #a7f3d0; }
.df-flash-error { background: var(--df-danger-bg); color: var(--df-danger); border-color: #fecaca; }
.df-flash-info { background: var(--df-info-bg); color: var(--df-info); border-color: #a5f3fc; }
.df-flash-warning { background: var(--df-warning-bg); color: var(--df-warning); border-color: #fde68a; }

/* フォーム */
.df-field { margin-bottom: 14px; }
.df-field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.df-field .df-help { font-size: 12px; color: var(--df-text-muted); margin-top: 3px; }
.df-input, .df-select, .df-textarea {
    width: 100%; padding: 9px 12px; font-size: 14.5px; font-family: inherit;
    border: 1px solid var(--df-border); border-radius: var(--df-radius-sm);
    background: var(--df-surface); color: var(--df-text);
}
.df-input:focus, .df-select:focus, .df-textarea:focus {
    outline: 2px solid var(--df-brand); outline-offset: 1px; border-color: var(--df-brand);
}
.df-error-text { color: var(--df-danger); font-size: 12.5px; margin-top: 3px; }

/* テーブル */
.df-table-wrap { overflow-x: auto; }
.df-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--df-surface); }
.df-table th, .df-table td { padding: 10px 12px; border-bottom: 1px solid var(--df-border); text-align: left; white-space: nowrap; }
.df-table th { background: var(--df-bg); font-size: 12.5px; color: var(--df-text-muted); }
.df-table tr:hover td { background: #fafcff; }

/* ページネーション */
.df-pagination { display: flex; gap: 6px; align-items: center; margin-top: 14px; flex-wrap: wrap; font-size: 13.5px; }
.df-pagination a, .df-pagination span {
    padding: 6px 11px; border: 1px solid var(--df-border); border-radius: var(--df-radius-sm);
    text-decoration: none; color: var(--df-text); background: var(--df-surface);
}
.df-pagination .is-current { background: var(--df-brand); color: #fff; border-color: var(--df-brand); font-weight: 600; }
.df-pagination .is-disabled { color: var(--df-border); pointer-events: none; }
.df-pagination .df-page-info { border: none; background: none; color: var(--df-text-muted); }

/* ランディング */
.df-hero { text-align: center; padding: 48px 16px 36px; }
.df-hero h1 { font-size: 30px; margin: 0 0 12px; color: var(--df-brand-dark); line-height: 1.4; }
.df-hero p { font-size: 15.5px; color: var(--df-text-muted); max-width: 640px; margin: 0 auto 24px; }
.df-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.df-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.df-step { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius); padding: 22px; text-align: left; }
.df-step .df-step-num {
    display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--df-brand); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 10px;
}
.df-step h3 { margin: 0 0 6px; font-size: 16px; }
.df-step p { margin: 0; font-size: 13.5px; color: var(--df-text-muted); }

@media (max-width: 800px) {
    .df-steps { grid-template-columns: 1fr; }
    .df-hero h1 { font-size: 22px; }
    .df-header-inner { padding: 8px 12px; gap: 8px; }
    .df-main { padding: 16px 12px 48px; }
}