/* 管理画面で直接読み込む共通CSS。色の変数と、文字の大きさ・太さなどの基本スタイル。 */
:root {
    --green: #2e5545;
    --green-dark: #213e33;
    --ink: #24342e;
    --muted: #626e66;
    --line: #e4e9e5;
    --background: #f5f7f5;
    --white: #fff
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--background);
    color: var(--ink);
    font: 500 16px/1.7 "Segoe UI", "Yu Gothic UI", "Meiryo", sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

button,
input,
select,
textarea {
    font: inherit
}

button,
a,
input,
select {
    outline-offset: 4px
}

button {
    cursor: pointer
}

/* 業務画面の固定サイドメニュー。ログイン画面ではBlade側で出力しない。 */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 226px;
    background: #fff;
    color: #303b45;
    border-right: 1px solid #dce1e6;
    padding: 32px 18px;
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: .1em
}

.logo-mark {
    border: 1px solid #8896a3;
    width: 38px;
    height: 40px;
    display: grid;
    place-items: center;
    font-family: serif;
    font-size: 26px
}

.logo-sub {
    display: block;
    font-size: 12px;
    letter-spacing: .23em;
    color: #647180;
    margin-top: 2px
}

.nav-label {
    font-size: 13px;
    color: #647180;
    margin: 8px 10px 14px;
    letter-spacing: .09em
}

.sidebar-nav {
    margin: 32px 0 20px
}

.nav-group {
    margin: 0 0 24px
}

.nav-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 6px;
    padding: 0 10px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 750;
    color: #303b45
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    font-size: 17px;
    color: #718090
}

.nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px
}

.nav-subitem {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 12px;
    margin: 3px 0;
    font-size: 14px;
    border-left: 3px solid transparent;
    border-radius: 0 5px 5px 0;
    color: #414e5c;
    line-height: 1.5
}

.nav-subitem:hover {
    background: #f0f5fb;
    color: #215c99
}

.nav-subitem.active {
    background: #eaf2fc;
    border-left-color: #2867a7;
    color: #215c99;
    font-weight: 700
}

.nav-subitem:focus-visible {
    outline: 2px solid #3979bc;
    outline-offset: 2px
}

.dashboard-period {
    display: flex;
    align-items: end;
    gap: 10px
}

.dashboard-period label {
    display: grid;
    gap: 5px;
    font-size: 15px
}

.dashboard-period input {
    width: 175px
}

.dashboard-sites {
    margin-bottom: 20px
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.dashboard-card {
    padding: 20px;
    margin-bottom: 0
}

.dashboard-card h2 {
    font-size: 16px;
    color: var(--muted)
}

.dashboard-card>strong {
    display: block;
    font-size: 36px;
    line-height: 1.4;
    margin: 12px 0;
    color: var(--green-dark);
    overflow-wrap: anywhere
}

.dashboard-card>strong small {
    font-size: 15px;
    margin-left: 6px
}

.dashboard-card p {
    font-size: 14px;
    margin: 5px 0
}

.dashboard-card>small {
    font-size: 14px;
    color: var(--muted)
}

.dashboard-card--realtime {
    background: #edf5f0;
    border-color: #91b3a0
}

.dashboard-report-note {
    font-size: 14px;
    line-height: 1.8;
    margin: 18px 0
}

.dashboard-chart .panel-body {
    overflow-x: auto
}

.dashboard-chart svg {
    display: block;
    width: 100%;
    min-width: 720px;
    height: auto
}

.dashboard-chart svg text {
    font-size: 18px;
    fill: #68766d
}

.dashboard-chart-grid {
    stroke: #e1e8e3;
    stroke-width: 1
}

.dashboard-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round
}

.dashboard-line--sessions {
    stroke: #285f48
}

.dashboard-line--views {
    stroke: #648ac2
}

.dashboard-dot--sessions {
    fill: #285f48
}

.dashboard-dot--views {
    fill: #648ac2
}

.dashboard-legend {
    display: flex;
    gap: 24px;
    font-size: 15px
}

.dashboard-legend--sessions {
    color: #285f48
}

.dashboard-legend--views {
    color: #5377ac
}

.dashboard-daily summary {
    cursor: pointer;
    padding: 15px 20px;
    border-top: 1px solid var(--line)
}

.dashboard-daily>p {
    padding: 0 20px;
    font-size: 14px
}

@media(max-width:1100px) {
    .dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:500px) {
    .dashboard-cards {
        grid-template-columns: 1fr
    }

    .dashboard-period {
        flex-wrap: wrap
    }

    .dashboard-chart .panel-heading {
        display: block
    }
}

.sidebar-bottom {
    margin-top: auto;
    padding: 14px 12px 0;
    border-top: 1px solid #d6dee6;
    font-size: 16px
}

.sidebar-bottom small {
    margin: 5px 0 0 14px;
    color: #647180
}

.sidebar-bottom .live-dot {
    background: #49765a
}

.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a8c2ac;
    margin-right: 6px
}

/* サイドメニュー分の余白、上部バー、本文領域の配置。 */
.workspace {
    margin-left: 226px
}

.topbar {
    height: 72px;
    padding: 0 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    color: #69766e
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px
}

.mode-badge {
    padding: 4px 10px;
    border: 1px solid #d9e4da;
    border-radius: 4px;
    background: #f5f8f4;
    color: var(--green);
    font-size: 14px
}

.text-button {
    border: 1px solid #8b9d91;
    border-radius: 4px;
    background: #fff;
    color: #34463a;
    font-size: 16px;
    padding: 4px 12px
}

main {
    padding: 34px 38px 48px;
    max-width: 1800px;
    margin: auto
}

.eyebrow {
    font-size: 14px;
    letter-spacing: .18em;
    color: #8b978f;
    font-weight: 600;
    margin-bottom: 8px
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 18px
}

h1 {
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: .025em;
    font-weight: 650;
    margin: 0
}

h1 .status {
    font-size: 16px;
    vertical-align: middle;
    margin-left: 12px
}

h2 {
    font-size: 18px;
    margin: 0;
    font-weight: 650
}

h3 {
    font-size: 19px;
    margin: 0
}

.subtitle {
    font-size: 16px;
    color: var(--muted);
    margin: 8px 0 0
}

.snapshot {
    font-size: 14px;
    color: #7c8980;
    border: 1px solid #dde4dd;
    border-radius: 4px;
    padding: 6px 11px;
    white-space: nowrap
}

/* 件数カードと、一覧・詳細・編集で共用するパネル。 */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 26px
}

.stat {
    background: #fff;
    border: 1px solid var(--line);
    padding: 18px 22px;
    border-radius: 7px;
    display: block
}

.stat.selected {
    border-top: 3px solid var(--green);
    padding-top: 16px
}

.stat>span:first-child {
    font-size: 16px;
    color: #6c7a71
}

.stat strong {
    display: block;
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: .02em;
    margin: 8px 0 5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.stat strong small {
    font-size: 14px;
    margin-left: 9px;
    font-weight: 600;
    color: var(--muted)
}

.stat-hint {
    font-size: 14px;
    color: #8b968f
}

.panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 22px
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line)
}

.panel-body {
    padding: 22px;
    margin: 0
}

.subtle-link {
    color: #75827a;
    font-size: 14px
}

.filters form {
    padding: 20px 22px
}

.filter-row {
    display: flex;
    gap: 16px;
    align-items: end
}

/* ユーザー名だけに補足文があっても、権限の入力欄と上端を揃える。 */
.user-create-row {
    align-items: flex-start
}

.product-editor .field {
    margin-bottom: 20px
}

.product-status-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 14px 18px;
    margin: 0 0 22px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff
}

.product-status-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 560px;
    max-width: 100%;
    border: 1px solid #809188;
    border-radius: 7px;
    overflow: hidden
}

.product-status-buttons form {
    display: flex;
    margin: 0;
    min-width: 0;
    border-right: 1px solid #bdc8c0
}

.product-status-buttons form:last-child {
    border-right: 0
}

.product-status-bar small {
    color: var(--muted)
}

.product-status-button.product-status-button--listed {
    --status-border: #2766a950;
    --status-pale: #edf5ff;
    --status-ink: #174b80;
    --status-current: #1e5e9f;
    --status-current-ink: #fff
}

.product-status-button.product-status-button--hidden {
    --status-border: #B8A16750;
    --status-pale: #fff8d9;
    --status-ink: #624800;
    --status-current: #f4cf52;
    --status-current-ink: #493500
}

.product-status-button.product-status-button--inactive {
    --status-border: #b83b3b50;
    --status-pale: #fff0f0;
    --status-ink: #922d2d;
    --status-current: #af3030;
    --status-current-ink: #fff
}

.button.product-status-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--status-ink);
    white-space: normal;
    line-height: 1.35
}

.product-status-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 650
}

.product-status-check {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 800
}

.product-status-caption {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700
}

.button.product-status-button.is-current {
    background: var(--status-current);
    color: var(--status-current-ink);
    opacity: 1;
    cursor: default;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px #0002
}

.button.product-status-button:not(:disabled):hover {
    background: var(--status-pale)
}

.button.product-status-button:focus-visible {
    outline: 3px solid #254f39;
    outline-offset: -4px
}

/* 商品基本情報は用途ごとにまとめ、短い入力欄を横幅いっぱいに広げない。 */
.product-editor .product-edit-group {
    --edit-accent: #477d67;
    --edit-tint: #f1f7f3;
    border: 1px solid #dce3dd;
    border-left: 5px solid var(--edit-accent);
    border-radius: 6px;
    padding: 18px 20px;
    margin: 0 0 22px;
    background: #fff;
    min-width: 0
}

.product-edit-group>h2 {
    font-size: 18px;
    margin: -18px -20px 18px;
    padding: 12px 20px;
    background: var(--edit-tint);
    color: #34463a;
    border-radius: 0 5px 0 0
}

.product-editor .product-edit-group--spec {
    --edit-accent: #8b70a6;
    --edit-tint: #f7f3fa
}

.product-editor .product-edit-group--board {
    --edit-accent: #a27b49;
    --edit-tint: #fbf7ee
}

.product-editor .product-edit-group--sales {
    --edit-accent: #4c8b91;
    --edit-tint: #f0f8f8
}

.product-editor .product-edit-group--media {
    --edit-accent: #6685aa;
    --edit-tint: #f1f5fb
}

.product-editor .product-edit-group--description {
    --edit-accent: #547ba6;
    --edit-tint: #f1f5fb
}

.product-editor .product-edit-group--seo {
    --edit-accent: #8b7399;
    --edit-tint: #f7f3fa
}

.product-editor .product-edit-group--internal {
    --edit-accent: #8b8174;
    --edit-tint: #f7f5f1
}

.product-editor .product-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 24px;
    margin-bottom: 16px
}

.product-editor .product-form-row>.field {
    flex: 0 1 280px;
    width: 280px;
    max-width: 100%;
    margin: 0;
    font-size: 15px
}

.product-editor .product-form-row>[data-product-field=name],
.product-editor .product-form-row>[data-product-field=title_name] {
    flex-basis: 480px;
    width: 480px
}

.product-editor .product-form-row>[data-product-field=brand_switch],
.product-editor .product-form-row>[data-product-field=producer_country_id],
.product-editor .product-form-row>[data-product-field=leg_type_flag],
.product-editor .product-form-row>[data-product-field=ob_quality] {
    flex-basis: 200px;
    width: 200px
}

.product-editor .product-form-row>[data-product-field=product_sale_par],
.product-editor .product-form-row>[data-product-field=product_sale_card_par] {
    flex-basis: 260px;
    width: 260px
}

.product-editor [data-product-field=product_sale_par] input,
.product-editor [data-product-field=product_sale_card_par] input {
    width: 100px;
    text-align: right;
    font-variant-numeric: tabular-nums
}

.product-editor .product-form-row>[data-product-field=ob_img1],
.product-editor .product-form-row>[data-product-field=ob_img2] {
    flex-basis: 340px;
    width: 340px
}

.product-editor .product-form-row>[data-product-field=instagram_url] {
    flex-basis: 600px;
    width: 600px
}

.product-editor .product-form-row>[data-product-field=tag],
.product-editor .product-form-row>[data-product-field=keywords],
.product-editor .product-form-row>[data-product-field=description] {
    flex-basis: 480px;
    width: 480px
}

.product-editor [data-product-field=memo],
.product-editor #product-reason-other {
    max-width: 800px
}

.product-editor #product-reason-choice {
    max-width: 280px
}

.product-editor .product-category-fieldset {
    margin: 0 0 16px;
    min-width: 0;
    padding: 14px
}

.product-editor .product-category-layout {
    gap: 20px
}

.product-editor .product-category-layout select {
    max-width: 100%
}

.product-editor .product-category-options {
    max-height: 220px;
    font-size: 15px
}

.product-editor .product-flag-options {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px 20px;
    font-size: 15px
}

.product-editor .product-description-block+.product-description-block {
    border-top: 1px solid #dce3dd;
    padding-top: 20px
}

.product-editor .product-description-block>.field {
    margin-bottom: 8px
}

.product-editor .product-edit-group--media {
    padding: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0
}

.product-editor .product-edit-group--media .panel-heading {
    background: var(--edit-tint)
}

.product-editor .product-edit-group--media .address-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 420px));
    gap: 20px
}

.product-editor .product-edit-group--media .field {
    max-width: 480px
}

.product-editor .product-edit-group--media input[type=file] {
    font-size: 14px;
    padding: 7px
}

.product-editor .product-edit-group--media img {
    object-fit: contain;
    max-width: 100%
}

.product-attachment-group>summary {
    padding: 12px 18px;
    background: #eef4fb;
    font-weight: 650;
    cursor: pointer
}

.product-gallery-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px
}

.variation-grid-actions .variation-image-link {
    display: block;
    margin: 0 0 6px;
    padding: 3px 6px;
    border: 1px solid #8b9d91;
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
    text-align: center;
    white-space: nowrap
}

.product-gallery-fields {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}

.product-editor .product-gallery-reason {
    max-width: 600px
}

.product-attachment-group>summary .muted {
    margin-left: 10px
}

.product-editor .product-attachment-table {
    font-size: 14px;
    white-space: normal
}

.product-editor .product-attachment-table td,
.product-editor .product-attachment-table th {
    padding: 8px 12px
}

.product-attachment-table td:nth-child(2) {
    overflow-wrap: anywhere;
    min-width: 180px;
    max-width: 320px
}

.product-editor .product-attachment-table input.attachment-sort {
    width: 80px;
    padding: 6px;
    border: 1px solid #cbd5cd;
    border-radius: 4px
}

.product-attachment-table input[type=file] {
    width: 250px;
    max-width: 100%
}

.product-attachment-table td:first-child {
    white-space: nowrap
}

.attachment-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 42px;
    vertical-align: middle;
    border: 1px solid #8b9d91;
    border-radius: 4px;
    background: #fff;
    color: #385a48;
    margin-right: 10px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none
}

.attachment-drag-handle:active {
    cursor: grabbing
}

.attachment-is-dragging {
    opacity: .6;
    background: #edf5ff
}

.attachment-drop-before>td {
    border-top: 3px solid #2e5545
}

.attachment-drop-after>td {
    border-bottom: 3px solid #2e5545
}

.product-sort-panel .product-thumbnail {
    width: 52px;
    height: 52px;
    min-width: 52px
}

.product-sort-panel .product-thumbnail img {
    width: 52px;
    height: 52px;
    object-fit: contain
}

.product-sort-panel .attachment-sort {
    width: 105px;
    min-width: 0
}

.product-sort-panel td {
    padding-top: 6px;
    padding-bottom: 6px
}

.product-sort-panel td:first-child {
    width: 60px
}

.product-attachment-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 16px
}

.product-editor .product-attachment-upload .field {
    flex: 0 1 360px;
    margin-bottom: 0
}

.product-editor .product-edit-group--media p {
    overflow-wrap: anywhere
}

.product-edit-actions {
    padding: 4px 0 12px
}

@media(max-width:600px) {
    .product-editor .product-edit-group {
        padding: 14px 12px
    }

    .product-edit-group>h2 {
        margin: -14px -12px 16px;
        padding: 12px
    }

    .product-editor .product-form-row>.field {
        flex-basis: 100%;
        width: 100%
    }

    .product-editor .product-edit-group--media {
        padding: 0
    }

    .product-editor .product-category-fieldset {
        padding: 10px
    }
}

.product-field-disabled {
    opacity: .55
}

.variation-excel-panel>summary {
    padding: 12px 18px;
    background: #edf3ee;
    cursor: pointer;
    font-weight: 650
}

.variation-excel-upload {
    display: flex;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap
}

.variation-excel-upload .field {
    flex: 0 1 520px
}

.variation-excel-upload input[type=file] {
    max-width: 100%
}

.variation-grid-field .variation-grid-unit {
    font-size: 11px;
    min-width: 0;
    color: #64736a
}

.variation-grid td.variation-grid-prices .variation-grid-cell {
    width: 155px
}

.variation-grid-reason [hidden] {
    display: none
}

/* 旧管理画面と同様、行の中に関連入力を詰めた編集表。未使用項目はサーバーの列定義で省く。 */
.variation-grid-toolbar,
.variation-grid-footer,
.variation-grid-reason {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 12px 0
}

.variation-grid-toolbar label {
    display: flex;
    align-items: center;
    gap: 6px
}

.variation-grid-toolbar input[type=number] {
    width: 65px;
    padding: 5px
}

.variation-grid-toolbar input[type=checkbox] {
    width: 18px;
    height: 18px
}

.variation-grid-scroll {
    max-height: 72vh;
    overflow: auto
}

.variation-grid {
    font-size: 14px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

.variation-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eaf0eb;
    white-space: nowrap;
    padding: 8px;
    border-right: 1px solid #dce4dd
}

.variation-grid td {
    padding: 7px;
    vertical-align: top;
    border-right: 1px solid #e4e9e5
}

.variation-grid td:first-child {
    width: 70px;
    min-width: 60px;
    font-size: 12px;
    color: #66736b
}

.variation-grid td:first-child small {
    max-width: 85px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.variation-grid tbody tr:nth-child(even) {
    background: #f8faf8
}

.variation-grid tbody tr.is-new {
    background: #eff8ef
}

.variation-grid tbody tr.is-changed {
    background: #fff9e8
}

.variation-grid tbody tr.is-removed {
    background: #f9ecec;
    color: #8c5555
}

.variation-grid-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: start;
    min-width: 85px;
    max-width: 250px
}

.variation-grid-field {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    margin: 0
}

.variation-grid-field>span {
    color: #69766d;
    min-width: 16px
}

.variation-grid-field input,
.variation-grid-field select {
    border: 1px solid #cbd5cd;
    border-radius: 3px;
    background: #fff;
    padding: 4px 5px;
    height: 30px;
    font-size: 14px;
    font-weight: 500;
    width: 72px;
    min-width: 0;
    line-height: 1.4
}

.variation-grid-field input[type=number] {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.variation-grid-field select {
    width: 125px
}

.variation-grid-field input[data-field=size] {
    width: 135px
}

.variation-grid-field input[data-field=maker_number],
.variation-grid-field input[data-field=original_number] {
    width: 115px
}

.variation-grid-field input[data-field=price],
.variation-grid-field input[data-field=discount],
.variation-grid-field input[data-field=cost] {
    width: 96px
}

.variation-grid-field input[data-field=stock],
.variation-grid-field input[data-field=sort] {
    width: 58px
}

.variation-grid-field input:read-only {
    background: #edf1ed
}

.variation-grid-field input:disabled,
.variation-grid-field select:disabled {
    background: #f1f3f1;
    color: #748078
}

.variation-grid-dimensions .variation-grid-cell {
    width: 220px
}

.variation-grid-identity .variation-grid-cell {
    width: 165px
}

.variation-grid-prices .variation-grid-cell {
    width: 135px
}

.variation-grid-materials .variation-grid-cell,
.variation-grid-fabrics .variation-grid-cell,
.variation-grid-legs .variation-grid-cell {
    width: 165px
}

.variation-grid-inventory .variation-grid-cell {
    width: 85px
}

.variation-grid-delivery .variation-grid-cell {
    width: 155px
}

.variation-grid-actions button {
    display: block;
    margin: 0 0 6px;
    padding: 3px 6px;
    border: 1px solid #8b9d91;
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
    white-space: nowrap
}

.variation-grid-footer {
    position: sticky;
    bottom: 0;
    background: #f5f7f5;
    padding: 12px 0;
    z-index: 3
}

.variation-grid-reason label {
    display: flex;
    align-items: center;
    gap: 8px
}

.variation-grid-reason select,
.variation-grid-reason input {
    padding: 7px;
    border: 1px solid #cbd5cd;
    border-radius: 3px;
    max-width: 100%
}

.variation-grid-paste {
    margin: 12px 0
}

.variation-grid-paste textarea {
    display: block;
    width: min(100%, 800px);
    margin: 8px 0;
    font-family: monospace
}

.variation-grid [hidden],
.variation-grid-reason[hidden] {
    display: none
}

/* バリエーションは内容に合わせた固定上限幅で詰め、用途ごとの色と見出しで区切る。 */
.variation-group {
    --group-color: #527c9a;
    --group-background: #f2f7fb;
    margin: 0 0 16px;
    border: 1px solid #dce4e8;
    border-left: 5px solid var(--group-color);
    border-radius: 6px;
    background: var(--group-background)
}

.variation-group>summary {
    cursor: pointer;
    font-weight: 700;
    padding: 11px 16px;
    color: #283d46
}

.variation-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 18px;
    padding: 4px 16px 16px
}

.variation-editor .variation-field {
    flex: 0 1 var(--field-width);
    width: var(--field-width);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    font-size: 15px
}

.variation-field--number {
    --field-width: 9rem
}

.variation-field--money {
    --field-width: 13rem
}

.variation-field--code {
    --field-width: 17rem
}

.variation-field--description {
    --field-width: 25rem
}

.variation-field--select {
    --field-width: 18rem
}

.variation-field>span {
    min-height: 1.7em
}

.variation-field input,
.variation-field select {
    width: 100%;
    min-width: 0
}

.variation-field input[type=number] {
    font-variant-numeric: tabular-nums;
    text-align: right
}

.variation-field small {
    font-size: 13px
}

.variation-group--dimensions {
    --group-color: #438c92;
    --group-background: #f0f8f8
}

.variation-group--materials {
    --group-color: #8b70a6;
    --group-background: #f7f3fa
}

.variation-group--fabrics {
    --group-color: #a27b49;
    --group-background: #fbf7ee
}

.variation-group--legs {
    --group-color: #79858d;
    --group-background: #f3f5f6
}

.variation-group--prices {
    --group-color: #4d8a64;
    --group-background: #f1f8f2
}

.variation-group--delivery {
    --group-color: #b7804f;
    --group-background: #fcf5ee
}

.variation-group--inventory {
    --group-color: #aa6d7b;
    --group-background: #fcf3f5
}

.variation-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 16px 0
}

.variation-toolbar input[type=number] {
    width: 7rem
}

.variation-columns {
    display: flex;
    gap: 10px 16px;
    flex-wrap: wrap
}

.variation-columns label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px
}

.variation-batch-table {
    table-layout: fixed;
    width: max-content;
    min-width: 100%
}

.variation-batch-table th,
.variation-batch-table td {
    padding: 7px
}

.variation-batch-table input:not([type=checkbox]) {
    width: 100%;
    min-width: 0;
    padding: 7px;
    border: 1px solid #ccd7ce;
    border-radius: 4px;
    font-size: 15px
}

.variation-batch-table input[type=checkbox] {
    width: 18px;
    height: 18px
}

.variation-batch-table td:first-child,
.variation-batch-table th:first-child {
    width: 75px
}

.variation-batch-table th {
    position: sticky;
    top: 0;
    background: #eef3ee
}

.variation-batch-scroll {
    max-height: 65vh;
    overflow: auto
}

.variation-paste {
    width: min(100%, 900px);
    min-height: 100px;
    font-family: monospace
}

.variation-batch-status {
    font-weight: 650;
    color: var(--green)
}

.product-editor input:disabled,
.product-editor select:disabled,
.product-editor textarea:disabled {
    background: #f0f2ef;
    cursor: not-allowed
}

.variation-batch-table .batch-col--number {
    width: 130px
}

.variation-batch-table .batch-col--money {
    width: 190px
}

.variation-batch-table .batch-col--code,
.variation-batch-table .batch-col--select {
    width: 200px
}

.variation-batch-table .batch-col--description {
    width: 250px
}

.product-category-fieldset {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 16px;
    margin: 0 0 24px
}

.product-category-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start
}

.product-category-layout .product-category-fieldset {
    min-width: 0
}

@media(max-width:800px) {
    .product-category-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0
    }
}

.product-category-options {
    max-height: 320px;
    overflow: auto;
    display: grid;
    gap: 10px;
    padding: 4px
}

.product-category-options label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.6
}

.product-category-options input {
    flex-shrink: 0
}

.product-flag-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 20px
}

.product-flag-options label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.6
}

.product-flag-options input {
    flex-shrink: 0
}

.product-meta.product-settings-meta {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr)
}

.product-settings-meta dt {
    overflow-wrap: anywhere
}

@media(max-width:600px) {
    .product-flag-options {
        grid-template-columns: minmax(0, 1fr)
    }
}

.html-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px
}

.html-editor-toolbar .button {
    padding: 5px 12px;
    min-height: 36px;
    font-size: 14px;
    border-color: #8b9d91
}

.product-html-editor {
    margin-bottom: 20px
}

.product-html-editor[hidden] {
    display: none !important
}

.description-preview {
    margin: 0 0 24px
}

.product-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #f6f7f5;
    color: var(--muted);
    font-size: 13px;
    overflow: hidden
}

.product-thumbnail img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain
}

.product-information-summary {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px
}

.product-thumbnail-large,
.product-thumbnail-large img {
    width: 160px;
    height: 160px
}

.product-editor textarea {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    padding: 12px;
    border: 1px solid #dce3dd;
    border-radius: 4px;
    resize: vertical
}

.product-editor textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 2px
}

.product-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 20px
}

.product-meta dd {
    margin: 0;
    overflow-wrap: anywhere
}

.product-text {
    margin-top: 22px;
    overflow-wrap: anywhere
}

.product-text .pre-line {
    white-space: pre-wrap
}

/* 決済記録とAPI操作は同じ画面にまとめ、短い項目は内容に合う幅にする。 */
.payment-management .page-heading {
    margin-bottom: 16px
}

.payment-management .page-heading h1 {
    font-size: 28px
}

.payment-management .panel {
    margin-bottom: 18px
}

.payment-management .panel-heading,
.payment-management .panel-body {
    padding: 14px 18px
}

.payment-management .panel-heading h2,
.payment-section-heading h2 {
    font-size: 18px
}

.payment-management .address-grid {
    gap: 18px;
    align-items: start
}

.payment-management .info-list {
    display: grid;
    grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
    gap: 7px 18px;
    margin: 0;
    font-size: 15px
}

.payment-management .info-list dt {
    font-size: 14px;
    margin: 0
}

.payment-management .info-list dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere
}

.payment-management .info-list .recorded-amount {
    font-size: 23px
}

.payment-management p {
    margin: 8px 0;
    font-size: 14px
}

.payment-management .notice {
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px
}

.payment-management .field {
    font-size: 15px;
    margin: 0 0 14px
}

.payment-management .filter-row,
.payment-form-row {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    gap: 14px 20px
}

.payment-management .filter-row>.field,
.payment-management .payment-form-row>.field {
    flex: 0 1 260px;
    max-width: 100%;
    min-width: 0
}

.payment-management .payment-reason-field {
    max-width: 700px
}

.payment-management textarea {
    display: block;
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #dce3dd;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.6;
    resize: vertical
}

.payment-management .payment-reconcile {
    font-size: 14px;
    margin: 10px 0
}

.payment-management .item-actions {
    margin: 14px 0 0;
    justify-content: flex-start
}

.payment-manual-section {
    border-left: 4px solid #4f8064
}

.payment-manual-section>.panel-heading {
    background: #f1f7f3
}

.payment-sony-section {
    border: 1px solid #cad9eb;
    border-left: 4px solid #3875b4;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: #f7faff;
    scroll-margin-top: 16px
}

.payment-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px
}

.payment-sony-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 18px;
    align-items: start
}

.payment-sony-grid>.panel {
    min-width: 0
}

.payment-sony-section .payment-form-row>.payment-source-field {
    flex-basis: 100%
}

.payment-management .payment-sony-current {
    font-size: 14px
}

.payment-history>summary {
    padding: 12px 18px;
    background: #f4f6f5;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600
}

.payment-history>summary .muted {
    margin-left: 12px
}

.payment-management .table-wrap {
    max-height: 380px
}

.payment-management th,
.payment-management td {
    padding: 9px 14px
}

.payment-management td:last-child {
    white-space: normal;
    min-width: 180px
}

.payment-management .history-entry {
    padding: 10px 0;
    font-size: 14px
}

@media(max-width:650px) {
    .payment-management .info-list {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 7px 12px
    }

    .payment-management .filter-row>.field,
    .payment-management .payment-form-row>.field {
        flex-basis: 100%
    }

    .payment-sony-section {
        padding: 12px
    }

    .payment-section-heading {
        flex-wrap: wrap
    }
}

/* 商品詳細は基本情報と設定を横並びにし、長文と一覧は領域を分けて表示する。 */
.product-detail-page .page-heading {
    margin-bottom: 18px
}

.product-detail-page .page-heading h1 {
    font-size: 28px
}

.product-detail-actions {
    margin-bottom: 18px;
    border: 1px solid #d4dce3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden
}

.product-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #f5f7fa
}

.product-detail-toolbar-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.product-detail-toolbar .button {
    padding: 8px 14px
}

.product-detail-duplicate {
    margin-left: auto
}

.product-detail-page .product-detail-actions .product-status-bar {
    margin: 0;
    border: 0;
    border-top: 1px solid #d4dce3;
    border-radius: 0
}

.product-detail-page .panel-heading,
.product-detail-page .panel-body {
    padding: 14px 18px
}

.product-detail-page .panel-heading h2 {
    font-size: 18px
}

.product-detail-page .product-status-bar {
    padding: 10px 16px;
    margin-bottom: 18px
}

.product-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px
}

.product-overview-grid>.panel {
    margin-bottom: 0;
    min-width: 0
}

.product-detail-page .product-information-summary {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px
}

.product-detail-page .product-thumbnail-large,
.product-detail-page .product-thumbnail-large img {
    width: 128px;
    height: 128px
}

.product-detail-page .product-thumbnail-large {
    flex: 0 0 128px
}

.product-summary-facts {
    margin: 0;
    min-width: 0;
    flex: 1;
    font-size: 15px
}

.product-summary-facts>div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #edf0ed;
    align-items: baseline
}

.product-summary-facts dt {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    overflow-wrap: anywhere
}

.product-summary-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere
}

.product-summary-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    margin-top: 14px
}

.product-summary-specs>div {
    grid-template-columns: 100px minmax(0, 1fr)
}

.product-summary-subheading {
    font-size: 15px;
    margin: 18px 0 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line)
}

.product-category-tag {
    display: inline-block;
    margin: 2px 5px 2px 0;
    padding: 1px 6px;
    border: 1px solid #dae3dc;
    border-radius: 4px;
    background: #f6f8f5;
    font-size: 13px
}

.product-record-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--muted)
}

.product-compact-settings>div {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 5px 0
}

.product-compact-settings dd {
    text-align: right;
    font-size: 14px
}

.product-setting-value {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 4px;
    background: #f0f2f4;
    color: #68716c;
    font-size: 13px
}

.product-setting-value.is-on {
    background: #e7f3eb;
    color: #2e6748;
    font-weight: 600
}

.product-supplement-panel>summary {
    padding: 12px 18px;
    background: #f3f5f8;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px
}

.product-supplement-facts .pre-line {
    white-space: pre-wrap;
    max-height: 300px;
    overflow: auto
}

.product-summary-variations {
    max-height: 430px
}

.product-summary-variations thead th {
    position: sticky;
    top: 0;
    z-index: 1
}

.product-summary-variations th,
.product-summary-variations td {
    padding: 9px 16px
}

.product-detail-page .pagination {
    padding: 12px 18px
}

.product-detail-page details.product-text {
    margin-top: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px
}

.product-detail-page details.product-text summary {
    cursor: pointer;
    font-size: 15px
}

.product-detail-page details.product-text h3 {
    font-size: 15px;
    margin: 12px 0 4px
}

@media(max-width:1200px) {
    .product-overview-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .product-compact-settings {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px
    }
}

@media(max-width:650px) {
    .product-detail-page .product-information-summary {
        flex-direction: column
    }

    .product-detail-page .product-thumbnail-large {
        flex-basis: auto
    }

    .product-summary-facts {
        width: 100%
    }

    .product-summary-specs,
    .product-compact-settings {
        grid-template-columns: minmax(0, 1fr)
    }

    .product-summary-facts>div {
        grid-template-columns: 105px minmax(0, 1fr)
    }

    .product-compact-settings>div {
        grid-template-columns: minmax(0, 1fr) auto
    }
}

.product-changes {
    table-layout: fixed;
    white-space: normal
}

.product-changes td {
    overflow-wrap: anywhere
}

.secondary-filters {
    margin-top: 15px
}

/* 検索・編集フォームの共通部品。ラベルと入力欄を縦に配置する。 */
.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #6b786f
}

.search-field {
    flex: 2
}

.field input,
.field select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dce3dd;
    border-radius: 4px;
    background: #fff;
    color: #34463a;
    padding: 8px 11px;
    font-size: 16px;
    font-weight: 600
}

.field input::placeholder {
    color: #a0a9a2
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 9px 22px;
    border: 1px solid #8b9d91;
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    text-align: center
}

.button.primary {
    border-color: #193b2d
}

.button:disabled {
    opacity: .6;
    cursor: default
}

.primary {
    background: var(--green);
    color: #fff
}

.primary:hover {
    background: #214333
}

.primary:disabled {
    opacity: .45;
    cursor: default
}

.search-button {
    min-width: 144px
}

.search-button span {
    margin-left: 20px
}

.count-badge {
    background: #f0f4f0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 7px;
    margin-left: 6px;
    color: #718077
}

.muted {
    color: var(--muted);
    font-size: 14px
}

/* 幅の広い一覧表は横スクロールし、金額・件数を読み比べやすく整える。 */
.table-wrap {
    overflow: auto
}

table {
    border-collapse: collapse;
    width: 100%;
    white-space: nowrap;
    font-size: 16px
}

th {
    background: #fafbf9;
    color: #7c887f;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line)
}

td {
    padding: 17px 18px;
    vertical-align: middle;
    border-bottom: 1px solid #eef1ed
}

tbody tr:hover {
    background: #fbfcfa
}

/* 商品の状態は行全体でも判別できるようにし、ホバー中も色を維持する。 */
tbody tr.product-row--hidden,
tbody tr.product-row--hidden:hover {
    background: #fff8dc
}

tbody tr.product-row--inactive,
tbody tr.product-row--inactive:hover {
    background: #eef0f2
}

td small {
    display: block;
    color: #8b968e;
    font-size: 14px;
    margin-top: 4px
}

.order-id {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    color: var(--green)
}

.customer-name {
    font-weight: 600
}

.brand {
    font-size: 14px;
    color: #526d5b
}

.brand.unknown {
    color: #8e948c
}

.status {
    display: inline-block;
    font-size: 14px;
    border-radius: 4px;
    padding: 3px 8px;
    background: #f2f3f0;
    color: #7a8276
}

.status-1,
.status-2,
.status-5 {
    background: #fcf4df;
    color: #917136
}

.status-3,
.status-4 {
    background: #edf2fa;
    color: #597698
}

.status-6,
.status-9 {
    background: #eaf3ed;
    color: #4d7d5b
}

.status-8 {
    background: #f7eeeb;
    color: #a1796c
}

.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.money {
    font-weight: 600
}

.detail-link {
    font-size: 14px;
    color: #6c8172;
    white-space: nowrap
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    padding: 17px 22px;
    font-size: 14px;
    color: #626e66
}

.pagination nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px
}

.pagination nav a,
.pagination nav .page-current,
.pagination nav .page-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid #bcc9c0;
    border-radius: 4px;
    padding: 4px 10px;
    background: #fff;
    color: #344f40
}

.pagination nav a:hover {
    background: #edf3ef;
    border-color: #648471
}

.pagination nav a:focus-visible {
    outline: 2px solid #2867a7
}

.pagination nav .page-current {
    background: #2e5545;
    border-color: #2e5545;
    color: #fff;
    font-weight: 700
}

.pagination nav .page-disabled {
    color: #7c857f;
    background: #f5f7f5;
    border-color: #e0e5e1
}

.page-ellipsis {
    padding: 0 3px
}

.passkey-login {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.passkey-login [data-passkey-status] {
    margin-bottom: 0;
    font-size: 14px
}

.list-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px
}

.panel-heading .list-sort {
    margin: 0
}

.panel-heading.list-sort-heading {
    flex-wrap: wrap;
    gap: 12px
}

.list-sort label {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap
}

.list-sort select {
    width: auto;
    max-width: 190px;
    min-height: 38px;
    padding: 5px 28px 5px 9px;
    border: 1px solid #a9b8ae;
    border-radius: 4px;
    background: #fff;
    color: var(--ink)
}

.list-sort .button {
    min-height: 38px;
    padding: 5px 12px;
    font-size: 14px
}

.empty {
    text-align: center;
    padding: 50px;
    color: var(--muted)
}

footer {
    border-top: 1px solid var(--line);
    margin: 0 38px;
    padding: 17px 0 24px;
    font-size: 14px;
    color: #9aa59d;
    display: flex;
    justify-content: space-between
}

.back-link {
    display: inline-block;
    font-size: 16px;
    color: #6f8274;
    margin-bottom: 22px
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 22px
}

.detail-main {
    min-width: 0
}

.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.address p {
    margin: 10px 0 0;
    font-size: 16px;
    overflow-wrap: anywhere
}

.items-table {
    white-space: normal;
    min-width: 820px
}

.items-table td {
    vertical-align: top
}

.items-table td:first-child {
    min-width: 210px
}

.items-table th {
    white-space: nowrap
}

.item-custom {
    font-size: 14px;
    max-width: 300px
}

.totals {
    padding: 18px 22px;
    background: #fcfdfb
}

.totals dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 22px;
    margin: 0 0 0 auto;
    max-width: 440px;
    font-size: 16px
}

.totals dd {
    margin: 0;
    text-align: right
}

.total-label,
.total-amount {
    padding-top: 14px;
    margin-top: 8px !important;
    border-top: 1px solid var(--line);
    font-weight: 600
}

.total-amount {
    font-size: 26px
}

.totals>p {
    text-align: right;
    margin-bottom: 0
}

.info-list {
    margin: 0
}

.info-list dt {
    font-size: 14px;
    color: var(--muted);
    margin-top: 17px
}

.info-list dt:first-child {
    margin-top: 0
}

.info-list dd {
    margin: 5px 0 0;
    font-size: 16px
}

.info-list .recorded-amount {
    font-size: 30px;
    font-weight: 600;
    color: var(--green)
}

.pre-line {
    white-space: pre-line;
    overflow-wrap: anywhere
}

.detail-aside .pre-line {
    font-size: 16px
}

.transport {
    display: flex;
    gap: 20px;
    padding: 8px 0;
    font-size: 16px
}

/* 受注レビューは本文を広く取り、評価・公開状態・操作をコンパクトにまとめる。 */
.order-review-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-bottom: 14px;
    overflow-wrap: anywhere;
}

.order-review {
    border-top: 1px solid #e2e8ef;
    padding: 16px 0;
}

.order-review:last-child {
    padding-bottom: 0;
}

.order-review-heading,
.order-review-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.order-review-heading {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.order-review-image {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1px solid #d5dde6;
    border-radius: 5px;
}

.order-review-text {
    flex: 1 1 220px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.order-review-text p {
    margin: 0 0 8px;
}

.order-review-text time {
    display: inline-block;
    margin-left: 12px;
}

.order-review-status {
    padding: 3px 10px;
    border: 1px solid;
    border-radius: 5px;
    font-weight: 700;
}

.order-review-status.approved {
    background: #eaf2fc;
    color: #215c99;
    border-color: #a4bedb;
}

.order-review-status.pending {
    background: #fff7db;
    color: #785a0a;
    border-color: #dbc77c;
}

.history-entry {
    padding: 14px 0;
    border-bottom: 1px solid #eef2ec;
    font-size: 16px
}

.history-entry:first-child {
    padding-top: 0
}

.history-entry:last-child {
    border: 0
}

.history-entry>div {
    display: flex;
    gap: 20px;
    justify-content: space-between
}

.history-entry time {
    color: var(--muted);
    font-size: 14px
}

.history-entry p {
    margin: 7px 0 0;
    color: #6c786f
}

.notice,
.error {
    padding: 13px 18px;
    border-radius: 5px;
    margin-bottom: 18px;
    font-size: 16px
}

.notice {
    background: #fff5de;
    border: 1px solid #efe0b5;
    color: #8c713c
}

.error {
    background: #fff0ee;
    color: #a64f43;
    border: 1px solid #f1d3cc
}

.warning-text {
    color: #a5854b
}

/* ログイン画面専用。業務画面用の左余白を外し、フォームを中央に配置する。 */
.auth-page .workspace {
    margin-left: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.auth-page main {
    width: 100%;
    flex: 1
}

.auth-page footer {
    max-width: 960px;
    width: calc(100% - 76px);
    margin: 0 auto
}

.login-wrap {
    max-width: 520px;
    margin: 65px auto 90px
}

.login-panel {
    margin-top: 26px;
    padding: 28px
}

.login-panel .field {
    margin-bottom: 20px
}

.login-button {
    width: 100%;
    margin-top: 7px
}

.login-note {
    text-align: center
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

code {
    font-size: 14px;
    overflow-wrap: anywhere
}

/* 画面幅に応じた表示調整。狭い画面ではメニュー・検索欄・詳細を縦配置へ切り替える。 */
@media(min-width:1500px) {
    td {
        padding: 18px 22px
    }
}

@media(max-width:1200px) {
    .sidebar {
        width: 190px
    }

    .workspace {
        margin-left: 190px
    }

    .topbar {
        padding: 0 24px
    }

    main {
        padding: 28px 24px
    }

    .detail-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .detail-aside {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px
    }

    .stats {
        gap: 12px
    }

    .stat {
        padding: 16px
    }

    .stat.selected {
        padding-top: 14px
    }

    .stat-hint {
        font-size: 13px
    }
}

@media(max-width:800px) {
    .sidebar {
        position: static;
        width: 100%;
        padding: 14px 20px;
        flex-direction: row;
        align-items: center;
        gap: 20px
    }

    .logo {
        font-size: 20px;
        padding: 0
    }

    .logo-mark {
        width: 30px;
        height: 32px;
        font-size: 24px
    }

    .logo-sub {
        font-size: 11px
    }

    .nav-label,
    .sidebar-bottom {
        display: none
    }

    .workspace {
        margin: 0
    }

    .topbar {
        height: 54px;
        font-size: 14px;
        padding: 0 18px
    }

    .topbar-right {
        gap: 12px
    }

    .topbar>span {
        display: none
    }

    main {
        padding: 24px 18px
    }

    .page-heading {
        align-items: start
    }

    .snapshot {
        font-size: 13px
    }

    h1 {
        font-size: 28px
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .stat strong {
        font-size: 30px
    }

    .filter-row {
        flex-wrap: wrap;
        gap: 12px
    }

    .filter-row .field {
        flex: 1 1 42%
    }

    .filter-row .search-field {
        flex-basis: 100%
    }

    .search-button {
        width: 100%;
        margin-top: 4px
    }

    .panel-heading,
    .filters form,
    .panel-body {
        padding: 16px
    }

    .address-grid,
    .detail-aside {
        grid-template-columns: 1fr;
        gap: 0
    }

    .pagination {
        padding: 16px;
        font-size: 14px
    }

    .pagination nav {
        gap: 9px
    }

    footer {
        margin: 0 18px;
        gap: 15px;
        flex-wrap: wrap
    }

    .auth-page footer {
        width: calc(100% - 36px)
    }

    .login-wrap {
        margin: 35px auto
    }

    .login-panel {
        padding: 22px
    }

    .transport {
        flex-wrap: wrap;
        gap: 8px 16px
    }
}


.success {
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid #bdd7c5;
    border-radius: 5px;
    background: #edf7ef;
    color: #2e5545;
    font-weight: 600
}

.secondary {
    background: #fff;
    border-color: #8b9d91;
    color: var(--green)
}

.secondary:hover {
    background: #edf4ee
}

/* 配送伝票と配送履歴、照会の成功・失敗メッセージ。 */
.shipment-card {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 16px
}

.shipment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap
}

.tracking-number {
    font-size: 22px;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    margin-top: 5px
}

.shipment-status {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 18px 0
}

.shipment-status strong {
    border-radius: 4px;
    background: #edf4ee;
    padding: 4px 12px;
    color: var(--green)
}

.shipment-history summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--green);
    padding: 6px 0
}

.shipment-history table {
    margin-top: 12px;
    white-space: normal;
    min-width: 440px
}

.shipment-register {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin-top: 22px
}

.shipment-register textarea {
    width: 100%;
    max-width: 520px;
    min-height: 120px;
    border: 1px solid #dce3dd;
    border-radius: 4px;
    padding: 12px;
    font-size: 17px;
    font-weight: 500;
    resize: vertical;
    font-variant-numeric: tabular-nums
}

.shipment-register textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 2px
}

.shipment-register p {
    line-height: 1.8
}

#shipments {
    scroll-margin-top: 24px
}

/* お問い合わせの長い件名・本文・顧客情報を折り返し、管理フォームを配置する。 */
.contacts-table .contact-summary {
    min-width: 260px;
    max-width: 430px;
    white-space: normal;
    overflow-wrap: anywhere
}

.contact-summary small {
    line-height: 1.7
}

.contact-status-1 {
    background: #fcf4df;
    color: #825e1e
}

.contact-status-2,
.contact-status-4,
.contact-status-5,
.contact-status-6 {
    background: #eaf3ed;
    color: #3f6b4c
}

.contact-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px
}

.contact-subject {
    font-size: 23px;
    overflow-wrap: anywhere;
    line-height: 1.7;
    margin-bottom: 24px
}

.contact-content {
    font-size: 17px;
    line-height: 1.9;
    white-space: pre-wrap
}

.contact-customer {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px 24px;
    margin: 0
}

.contact-customer dt {
    color: var(--muted);
    font-size: 14px
}

.contact-customer dd {
    margin: 0;
    overflow-wrap: anywhere
}

.contact-customer small {
    display: block;
    color: var(--muted);
    font-size: 14px
}

.contact-management .field,
.contact-create .field {
    margin-bottom: 20px;
    font-size: 15px
}

.contact-management .button {
    width: 100%
}

.contact-management textarea,
.contact-create textarea {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    padding: 12px;
    border: 1px solid #dce3dd;
    border-radius: 4px;
    resize: vertical
}

.contact-management textarea:focus,
.contact-create textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 2px
}

.related-order {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0
}

.contact-create {
    max-width: 1100px
}

.contact-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px
}

.required-label {
    font-size: 12px;
    color: #8e493c
}

/* 商品検索・明細編集・確認フォームと、税込合計の比較表示。 */
.item-heading-actions,
.item-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap
}

.item-actions {
    justify-content: flex-end;
    margin: 24px 0
}

.item-edit-link {
    display: block;
    margin-top: 14px;
    font-weight: 650;
    color: var(--green)
}

.item-search {
    margin-top: 20px
}

.catalog-table {
    white-space: normal;
    min-width: 640px
}

.catalog-table td:first-child {
    min-width: 300px
}

.catalog-table .button {
    display: inline-block;
    white-space: nowrap
}

.catalog-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--muted);
    font-size: 14px;
    margin-top: 8px
}

.item-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 22px
}

.order-item-editor .field {
    font-size: 15px
}

.order-item-editor textarea {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    padding: 12px;
    border: 1px solid #dce3dd;
    border-radius: 4px;
    resize: vertical
}

.item-remove {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: #984c3c;
    font-weight: 650
}

.item-remove input {
    width: 20px;
    height: 20px;
    accent-color: #984c3c
}

/* 外部記録の照合・API送信の確認欄。チェックボックスのサイズを確保する。 */
.payment-reconcile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: var(--green);
    font-weight: 650
}

.payment-reconcile input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--green)
}

.item-total-comparison {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap
}

.item-total-comparison strong {
    display: block;
    font-size: 30px;
    color: var(--green)
}

@media(max-width:1100px) {
    .item-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:600px) {
    .item-fields {
        grid-template-columns: 1fr
    }

    .item-actions .button {
        width: 100%;
        text-align: center
    }

    .item-search {
        flex-wrap: wrap
    }

    .item-search .field {
        flex-basis: 100%
    }
}

@media(max-width:1100px) {
    .contact-detail-grid {
        grid-template-columns: 1fr
    }

    .contact-detail-grid>aside {
        grid-row: 1
    }

    .contact-create .filter-row {
        flex-wrap: wrap
    }

    .contact-create .filter-row .field {
        flex-basis: 45%
    }
}

@media(max-width:800px) {
    .sidebar {
        flex-wrap: wrap;
        gap: 8px 14px
    }

    .sidebar .logo {
        flex-basis: 100%;
        margin-bottom: 8px
    }

    .sidebar-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
        margin: 10px 0 0
    }

    .nav-group {
        min-width: 0;
        margin-bottom: 0
    }

    .nav-submenu {
        padding-left: 8px
    }

    .contact-customer {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .contact-customer dd {
        margin-bottom: 14px
    }

    .contact-create .filter-row .field {
        flex-basis: 100%
    }

    .contact-create-actions {
        flex-direction: column
    }

    .contact-create-actions .button {
        text-align: center
    }
}

@media(max-width:800px) {
    .shipment-card {
        padding: 14px
    }

    .shipment-heading form,
    .shipment-heading button,
    .shipment-register button {
        width: 100%
    }

    .tracking-number {
        font-size: 20px
    }
}