/*
 * operation.html ページ固有のレイアウト・グルーCSS
 *
 * design-system/（tokens.css, layout.css, components.css）は
 * どのページでも使える汎用部品。このファイルは「路線・運行情報」
 * という具体的な画面構成にだけ関わる、ページ固有の配置調整を担う。
 * 値はすべて design-system/tokens.css のトークンを参照する。
 *
 * 例外（トークン化しない一回限りの値）:
 * - 路線図のインク色（#020C38 / #000）: この路線図コンポーネント専用の
 *   配色で、他に使い回す予定がないため tokens.css には追加しない。
 */

/* ===== main を1枚のカードとして見せる ===== */
@media (max-width: 768px) {
    main.page-main {
        min-height: calc(100svh - 160px);
        /* layout.css は max-width:768px で .page-main の背景・角丸・影のみ
           打ち消す。左右の余白（padding）ゼロは乗換案内ページ専用の演出に
           切り出されたため、#operation-section 側で独自に余白を持つこの
           ページでも、その前提（左右0）に合わせてここで明示する。 */
        padding: 0;
    }
}

/* ===== 検索方法トグル（会社から探す / 方面から探す）の配置 ===== */
/* .page-mode-toggle / .page-mode-toggle-label は design-system/components.css 側の共通クラス（旧 .mode-toggle-wrapper / .mode-toggle-label） */

/* 路線一覧セクション（モバイルではトグルが絶対配置で上に重なるため、その分の余白を確保する） */
#operation-section {
    position: relative;
}
@media (max-width: 768px) {
    #operation-section {
        padding: 16px;
        padding-top: 100px;
    }
}

/* ===== 路線一覧 ===== */
.line-list-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-2);
}

.line-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.line-section-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-heading);
}

.line-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.line-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.line-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: filter var(--duration-fast);
}
.line-card-header:hover {
    filter: brightness(0.97);
}
.line-card-header:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.line-icon {
    width: 28px;
    height: 28px;
    background-color: var(--color-primary);
    flex-shrink: 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.line-name {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-heading);
}

/* ===== 運行情報行（路線カード内、1notice = 1行） ===== */
.line-notice-list {
    display: flex;
    flex-direction: column;
}

.line-notice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-surface);
}
.line-notice-row + .line-notice-row {
    border-top: 1px solid var(--color-border);
}
.line-notice-row--warning {
    background: var(--color-status-warning-bg);
}
.line-notice-row--suspend {
    background: var(--color-status-suspend-bg);
}

.line-notice-icon-col {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: var(--space-3);
    border-right: 1px dashed var(--color-border);
}

/* 状態アイコンは home の運行状況カードと同じ SVG（○/△/×）で統一する */
.line-notice-icon {
    display: flex;
    color: var(--color-status-normal-text);
}
.status-icon {
    width: 1.6em;
    height: 1.6em;
    fill: none;
    stroke: currentColor;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.line-notice-row--warning .line-notice-icon {
    color: var(--color-status-warning-text);
}
.line-notice-row--suspend .line-notice-icon {
    color: var(--color-status-suspend-text);
}

.line-notice-main {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
}

.line-notice-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-heading);
}

.line-notice-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.line-notice-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.line-notice-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
    flex-shrink: 0;
}

.line-notice-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    font-size: var(--font-size-base);
}

.line-notice-updated {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.line-notice-action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: var(--space-3);
    border-left: 1px dashed var(--color-border);
}

.line-notice-detail-btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .line-notice-fields {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
    .line-notice-action {
        flex-basis: 100%;
        border-left: none;
        border-top: 1px dashed var(--color-border);
        padding-left: 0;
        padding-top: var(--space-3);
        justify-content: center;
    }
    .line-notice-action .btn {
        width: 100%;
    }
}

.area-view-placeholder {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--space-6) var(--space-2) var(--space-2);
}

/* ===== 路線詳細 ===== */
.line-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.line-detail-title-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.line-detail-icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    flex-shrink: 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* 会社名＋路線名の2行（行の高さ計40px）を、隣のアイコン（40px）と上下中央でそろえる */
.line-detail-company {
    margin: 0;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    line-height: 16px;
    color: var(--color-text-secondary);
}

.line-detail-name {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

@media (max-width: 768px) {
    .line-detail-view {
        padding: 16px;
    }
}

/* ===== 運行情報ボックス ===== */
.line-alert-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.alert-item {
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-status-warning);
    padding: var(--space-3) var(--space-4);
    background: var(--color-status-warning-bg);
    font-size: var(--font-size-base);
}
.alert-item--normal {
    border-color: var(--color-status-normal);
    background: var(--color-status-normal-bg);
}
.alert-item--suspend {
    border-color: var(--color-status-suspend);
    background: var(--color-status-suspend-bg);
}

.alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.alert-main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.alert-icon {
    display: inline-flex;
    vertical-align: middle;
    font-weight: var(--font-weight-bold);
    color: var(--color-status-warning-text);
}
.alert-item--normal .alert-icon {
    color: var(--color-status-normal-text);
}
.alert-item--suspend .alert-icon {
    color: var(--color-status-suspend-text);
}

.alert-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

.alert-updated {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.alert-body {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: pre-wrap;
}

/* ===== 路線図 ===== */
.line-layout {
    display: flex;
    flex-direction: column;
    /* 路線図の線の太さ（operation.js の DIAGRAM_LINE_W と対応。駅の丸の内側の白い点と同じ幅） */
    --diagram-line-w: 12px;
}

.op-header-row,
.op-body-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /* 駅の丸・ピルの中心と、線・ぼかし・曲線の端を置く高さ（行の上端から） */
    --node-y: 50%;
}
/* 駅の行は、乗換の一覧で行が高くなっても、丸を駅名の行の中心にそろえる。
   上の余白（--space-3）＋駅名の行の高さの半分。乗換の一覧が無い行（高さ 48px）では 50% と同じ */
.op-body-row--station {
    --station-name-lh: 24px;
    --node-y: calc(var(--space-3) + var(--station-name-lh) / 2);
}
.op-body-row--station .op-station-cell {
    justify-content: flex-start;
}

.op-diagram-headers,
.op-diagram-cells {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-left: var(--space-3);
    padding-right: var(--space-5);
}

.service-label {
    width: 32px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #020C38;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: var(--space-3);
}

.op-diagram-cell {
    width: 32px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-3) 0;
    min-height: 48px;
}

.op-station-spacer {
    flex: 1;
}

.op-station-cell {
    flex: 1;
    min-width: 0; /* 乗換の一覧が長いときに、行からはみ出さず折り返す */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3) 0;
}

.diagram-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: var(--diagram-line-w);
    background: #020C38;
    z-index: 2;
}
.diagram-line.line-start {
    top: var(--node-y);
}
.diagram-line.line-end {
    bottom: calc(100% - var(--node-y));
}

/*
 * affectedのぼかし表示は diagram-line とは独立した要素にし、diagram-line より
 * 低い z-index を明示することで常にその下に表示する。diagram-line の疑似要素に
 * すると区間（セル）ごとに別々のスタッキングコンテキストができてしまい、隣の
 * セルの diagram-line にぼかしが不自然に隠されて線が途切れて見えるため、
 * op-diagram-cell の兄弟要素として配置し z-index だけで前後関係を揃えている。
 */
.diagram-line-glow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 6px;
    z-index: 1;
    pointer-events: none;
}
.diagram-line-glow.affected--suspend {
    animation: diagram-line-blink 2s step-start infinite;
}
.diagram-line-glow.affected-start {
    top: var(--node-y);
}
.diagram-line-glow.affected-end {
    bottom: calc(100% - var(--node-y));
}
/*
 * box-shadow は要素の上下端でも減衰するため、区間（セル）ごとに分けると境目に
 * 濃淡の縞ができる。横方向だけ減衰するグラデーションで描き、隣のセルへ続く端は
 * 減衰させず（glow-cont-*）、続かない端だけ半円のキャップで丸く閉じる。
 * グラデーションの断面は、専用線の曲線のぼかし（operation.js の LOOP_GLOW_W=20px の
 * 実線を σ=5px でぼかし、不透明度 0.84）と同じになるよう計算した値。
 */
.diagram-line-glow {
    --glow-color: var(--color-status-warning);
    --glow-fade-top: 22px;
    --glow-fade-bottom: 22px;
    width: 44px;
    background-image:
        radial-gradient(circle 22px at 50% 100%, color-mix(in srgb, var(--glow-color) 80.2%, transparent) 0.0%, color-mix(in srgb, var(--glow-color) 78.7%, transparent) 9.1%, color-mix(in srgb, var(--glow-color) 74.1%, transparent) 18.2%, color-mix(in srgb, var(--glow-color) 66.1%, transparent) 27.3%, color-mix(in srgb, var(--glow-color) 55.0%, transparent) 36.4%, color-mix(in srgb, var(--glow-color) 42.0%, transparent) 45.5%, color-mix(in srgb, var(--glow-color) 28.9%, transparent) 54.5%, color-mix(in srgb, var(--glow-color) 17.8%, transparent) 63.6%, color-mix(in srgb, var(--glow-color) 9.7%, transparent) 72.7%, color-mix(in srgb, var(--glow-color) 4.6%, transparent) 81.8%, color-mix(in srgb, var(--glow-color) 1.9%, transparent) 90.9%, transparent 100.0%),
        radial-gradient(circle 22px at 50% 0, color-mix(in srgb, var(--glow-color) 80.2%, transparent) 0.0%, color-mix(in srgb, var(--glow-color) 78.7%, transparent) 9.1%, color-mix(in srgb, var(--glow-color) 74.1%, transparent) 18.2%, color-mix(in srgb, var(--glow-color) 66.1%, transparent) 27.3%, color-mix(in srgb, var(--glow-color) 55.0%, transparent) 36.4%, color-mix(in srgb, var(--glow-color) 42.0%, transparent) 45.5%, color-mix(in srgb, var(--glow-color) 28.9%, transparent) 54.5%, color-mix(in srgb, var(--glow-color) 17.8%, transparent) 63.6%, color-mix(in srgb, var(--glow-color) 9.7%, transparent) 72.7%, color-mix(in srgb, var(--glow-color) 4.6%, transparent) 81.8%, color-mix(in srgb, var(--glow-color) 1.9%, transparent) 90.9%, transparent 100.0%),
        linear-gradient(90deg, transparent 0.0%, color-mix(in srgb, var(--glow-color) 1.9%, transparent) 4.5%, color-mix(in srgb, var(--glow-color) 4.6%, transparent) 9.1%, color-mix(in srgb, var(--glow-color) 9.7%, transparent) 13.6%, color-mix(in srgb, var(--glow-color) 17.8%, transparent) 18.2%, color-mix(in srgb, var(--glow-color) 28.9%, transparent) 22.7%, color-mix(in srgb, var(--glow-color) 42.0%, transparent) 27.3%, color-mix(in srgb, var(--glow-color) 55.0%, transparent) 31.8%, color-mix(in srgb, var(--glow-color) 66.1%, transparent) 36.4%, color-mix(in srgb, var(--glow-color) 74.1%, transparent) 40.9%, color-mix(in srgb, var(--glow-color) 78.7%, transparent) 45.5%, color-mix(in srgb, var(--glow-color) 80.2%, transparent) 50.0%, color-mix(in srgb, var(--glow-color) 78.7%, transparent) 54.5%, color-mix(in srgb, var(--glow-color) 74.1%, transparent) 59.1%, color-mix(in srgb, var(--glow-color) 66.1%, transparent) 63.6%, color-mix(in srgb, var(--glow-color) 55.0%, transparent) 68.2%, color-mix(in srgb, var(--glow-color) 42.0%, transparent) 72.7%, color-mix(in srgb, var(--glow-color) 28.9%, transparent) 77.3%, color-mix(in srgb, var(--glow-color) 17.8%, transparent) 81.8%, color-mix(in srgb, var(--glow-color) 9.7%, transparent) 86.4%, color-mix(in srgb, var(--glow-color) 4.6%, transparent) 90.9%, color-mix(in srgb, var(--glow-color) 1.9%, transparent) 95.5%, transparent 100.0%);
    background-size: 100% var(--glow-fade-top), 100% var(--glow-fade-bottom), 100% calc(100% - var(--glow-fade-top) - var(--glow-fade-bottom));
    background-position: 0 0, 0 100%, 0 var(--glow-fade-top);
    background-repeat: no-repeat;
}
.diagram-line-glow.affected--suspend {
    --glow-color: var(--color-status-suspend);
}
.diagram-line-glow.glow-cont-top { --glow-fade-top: 0px; }
.diagram-line-glow.glow-cont-bottom { --glow-fade-bottom: 0px; }
/*
 * 続かない端（影響区間の端の駅）は、駅の中心を中心とする半円のキャップで丸く閉じる。
 * 本体は駅の中心まで届かせ、キャップはその外側（半径 22px）に出す。
 */
.diagram-line-glow.affected-start:not(.glow-cont-top) { top: calc(var(--node-y) - 22px); }
.diagram-line-glow.affected-end:not(.glow-cont-bottom) { bottom: calc(100% - var(--node-y) - 22px); }

.op-diagram-cell--loop {
    overflow: visible;
}

/*
 * 環状・ラケット型の曲線 SVG は 64×48 固定で、駅の中心（--node-y）に合わせて
 * 置く。<svg> は置換要素なので top/bottom 両指定では伸びない点に注意。
 * 行の高さに追従する縦線は .diagram-line（div）側で描く。
 */
.diagram-loop-svg {
    position: absolute;
    top: calc(var(--node-y) - 24px);
    left: 0;
    width: 64px;
    height: 48px;
    z-index: 2;
    pointer-events: none;
}
/* 環状線の始点: 駅中心の上に 24px の直線を挟むため 72px（JS の LOOP_TOP_STRAIGHT と対応） */
.diagram-loop-svg--top {
    top: calc(var(--node-y) - 48px);
    height: 72px;
}
.diagram-loop-svg--bottom {
    top: 0;
}
/* ラケット型の戻る駅: 曲線（駅中心+16px から上）に続く専用線の縦線部分 */
.diagram-line.loop-corner-start,
.diagram-line-glow.loop-corner-start {
    top: calc(var(--node-y) + 16px);
}
/*
 * 専用線の曲線のぼかし（SVG）と直線のぼかし（div）の接合位置。曲線の付け根から 12px
 * 直線側へ離す（operation.js の LOOP_GLOW_JOIN と対応）。セルが低くても下端を越えないよう min で抑える
 */
.diagram-line-glow.glow-join-corner {
    top: min(calc(var(--node-y) + 28px), 100%);
}
.diagram-line-glow.glow-join-loop-bottom {
    bottom: 12px;
}

/* 専用線の曲線部分の影響区間ぼかし（.diagram-line-glow の SVG 版。色と点滅を揃える） */
.diagram-loop-svg.diagram-loop-glow {
    z-index: 1;
    overflow: visible;
    color: var(--color-status-warning);
}
.diagram-loop-glow.affected--suspend {
    color: var(--color-status-suspend);
    animation: diagram-line-blink 2s step-start infinite;
}

/* ===== 他路線への直通の分岐 ===== */
.line-layout {
    /* 運行情報で直通運転を中止している分岐の線と路線名 */
    --color-through-suspended: #c4c9d0;
}
.op-through-row {
    position: relative;
}
.op-through-cell {
    min-height: 0;
    padding: 0;
    overflow: visible;
}
/* 曲線と横線は続く縦線（z-index 2）の下に描き、線から分かれて見せる。
   直通しない種別の縦線と交差するところも縦線が上になる */
.op-through-curve {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}
.op-through-arrow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: visible;
    pointer-events: none;
}
.op-through-stub {
    z-index: 1;
}
/* 路線名（駅名と左端をそろえる位置は JS で設定）。横線は曲線と同じ SVG に描く */
.op-through-branch {
    position: absolute;
    right: 0;
    height: 0;
    display: flex;
    align-items: center;
    z-index: 1;
}
.op-through-label {
    flex: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--through-color);
    text-decoration: none;
    white-space: nowrap;
}
.op-through-label::after {
    content: ' ›';
}
.op-through-branch.is-suspended .op-through-label {
    color: var(--color-text-muted);
}
.op-through-note {
    margin-left: var(--space-1);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--color-status-suspend-bg);
    color: var(--color-status-suspend-text);
    font-size: var(--font-size-xs);
}
.op-through-label:hover {
    text-decoration: underline;
}

.diagram-pill {
    position: absolute;
    left: 13px;
    right: 23px;
    top: var(--node-y);
    height: 22px;
    transform: translateY(-50%);
    background: #000000;
    border-radius: var(--radius-pill);
    z-index: 3;
}

.diagram-node {
    position: absolute;
    top: var(--node-y);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-circle);
    border: 6px solid #020C38;
    background: var(--color-bg-surface);
    z-index: 4;
}
.diagram-node.is-all-stop {
    border: none !important;
    width: 12px;
    height: 12px;
    box-shadow: none !important;
}

@keyframes diagram-line-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .diagram-line-glow.affected--suspend,
    .diagram-loop-glow.affected--suspend {
        animation: none;
    }
}

.station-name-main {
    line-height: var(--station-name-lh, inherit);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

/* ===== 駅の乗換・徒歩連絡 =====
   乗換先の路線は、路線図の線と同じ「路線色の細い縦帯」＋路線名で示し、その路線のページへの
   リンクにする。運行情報がある路線だけ、路線一覧の運行情報の行と同じ状態の淡色の帯に載せ、
   路線名の後ろに記号と見出しを出す。 */
.op-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-1);
}
.op-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
}
.op-links__label,
.op-loop-return__kind {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.op-xfer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-xs);
}
.op-xfer:hover .op-xfer__name {
    color: var(--color-text);
    text-decoration: underline;
}
.op-xfer:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.op-xfer__mark {
    flex: none;
    width: 4px;
    height: 13px;
    border-radius: 2px;
    background-color: var(--line-color);
}

/* 運行情報の状態（記号＋見出し）。色は状態の文字色トークン */
.op-xfer__status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: var(--font-weight-bold);
}
.op-xfer__status-icon {
    flex: none;
    width: 12px;
    height: 12px;
    stroke-width: 5;
}
.op-xfer--warning { --status-text: var(--color-status-warning-text); --status-bg: var(--color-status-warning-bg); --status-line: var(--color-status-warning); }
.op-xfer--suspend { --status-text: var(--color-status-suspend-text); --status-bg: var(--color-status-suspend-bg); --status-line: var(--color-status-suspend); }
.op-xfer--alert {
    padding: 1px 8px 1px 6px;
    margin: 0 -2px;
    background: var(--status-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-line) 35%, transparent);
    color: var(--color-text);
}
.op-xfer--alert .op-xfer__status {
    margin-left: 2px;
    color: var(--status-text);
}

.op-walk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.op-walk__icon {
    flex: none;
    width: 14px;
    height: 14px;
    background-color: var(--color-text-secondary);
    -webkit-mask: url(../icons/walking.svg) center / contain no-repeat;
    mask: url(../icons/walking.svg) center / contain no-repeat;
}
.op-walk__name {
    font-weight: var(--font-weight-bold);
}
.op-walk__time {
    color: var(--color-text-secondary);
}

/* 環状・ラケット型の「◯◯の次は◯◯へ戻る」。記号は路線図の折り返しと同じ形を路線色で */
.op-station-cell--loop {
    align-items: flex-start;
}
.op-loop-return {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.op-loop-return__icon {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--line-color);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.op-loop-return__to {
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

/* .share-result-wrapper / .notice-section / .loading-section / @keyframes fadeIn は design-system/components.css 側の共通クラス */