/* 全体のリセットとベース設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --language-cycle-duration: 18s;
    --language-cycle-delay: 0ms;
    --app-font-family: "Noto Sans CJK JP", sans-serif;
}

@font-face {
    font-family: "Noto Sans CJK JP";
    src: url("fonts/NotoSansCJKjp-VF.otf") format("opentype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: var(--app-font-family);
    background-color: #000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ディスプレイ全体のコンテナ */
.display-container {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 3840px;
    height: 1080px;
    background-color: #2b2b2b;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(var(--display-scale, 1));
    transform-origin: center;
}

.debug-open {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 20;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 8px 12px;
    cursor: pointer;
}

/* =========================================
   ヘッダー領域 (Header)
   ========================================= */
.header {
    display: flex;
    height: 270px;
    background-color: #222222;
    border-bottom: 19.2px solid #00a650;
    color: #ffffff;
}

/* 列車種別 (急行) */
.train-type {
    background-color: #ff0000;
    flex: 0 0 461px;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.type-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: rotateX(-72deg);
    will-change: transform, opacity;
}

.type-ja {
    font-size: 108px;
    letter-spacing: 0.08em;
    opacity: 1;
    transform: none;
    animation: type-ja-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.type-en {
    font-size: 96px;
    animation: type-en-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.type-zh {
    font-size: 108px;
    letter-spacing: 0.08em;
    animation: type-zh-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.type-ko {
    font-size: 86px;
    letter-spacing: 0.02em;
    animation: type-ko-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

@keyframes type-ja-cycle {
    0%,
    17%,
    100% {
        opacity: 1;
        transform: none;
    }

    22%,
    97% {
        opacity: 0;
        transform: rotateX(72deg);
    }
}

@keyframes type-en-cycle {
    0%,
    17%,
    42%,
    100% {
        opacity: 0;
        transform: rotateX(-72deg);
    }

    22%,
    37% {
        opacity: 1;
        transform: none;
    }

    42% {
        opacity: 0;
        transform: rotateX(72deg);
    }
}

@keyframes type-zh-cycle {
    0%,
    37%,
    62%,
    100% {
        opacity: 0;
        transform: rotateX(-72deg);
    }

    42%,
    57% {
        opacity: 1;
        transform: none;
    }
}

@keyframes type-ko-cycle {
    0%,
    57%,
    82%,
    100% {
        opacity: 0;
        transform: rotateX(-72deg);
    }

    62%,
    77% {
        opacity: 1;
        transform: none;
    }
}

/* 行き先情報 */
.destination-info {
    flex: 0 0 1060px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 77px;
}

.dest-main {
    height: 132px;
    font-size: 115px;
    font-weight: bold;
    white-space: nowrap;
}

.dest-sub {
    height: 54px;
    font-size: 42px;
    font-weight: bold;
    color: #eeeeee;
    white-space: nowrap;
}

/* 次の駅情報 */
.next-station-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 56px;
    overflow: hidden;
}

.next-label, .next-name {
    font-weight: bold;
}

.next-label {
    flex: 0 0 auto;
    width: 390px;
    height: 128px;
    font-size: 88px;
    white-space: nowrap;
}

.next-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 142px;
    font-size: 115px;
}

.header-cycle {
    position: relative;
    overflow: hidden;
}

.cycle-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
    opacity: 0;
    transform: rotateX(-72deg);
    transform-origin: center;
    will-change: transform, opacity;
}

.destination-info .cycle-label {
    justify-content: flex-start;
}

.next-station-info .cycle-label {
    justify-content: center;
}

.cycle-ja {
    opacity: 1;
    transform: none;
    animation: header-ja-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.cycle-en {
    animation: header-en-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.cycle-zh {
    animation: header-zh-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.cycle-ko {
    animation: header-ko-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.dest-main .cycle-ja,
.dest-main .cycle-zh {
    font-size: 0.92em;
}

.dest-main .cycle-en {
    font-size: 0.72em;
}

.next-name .cycle-en {
    font-size: 0.84em;
}

.dest-main .cycle-en {
    top: -12px;
    bottom: 12px;
}

.dest-sub .cycle-en {
    top: -6px;
    bottom: 6px;
}

.next-label .cycle-en,
.next-label .cycle-ko {
    font-size: 0.9em;
}

@keyframes header-ja-cycle {
    0%,
    17%,
    100% {
        opacity: 1;
        transform: none;
    }

    22%,
    97% {
        opacity: 0;
        transform: rotateX(72deg);
    }
}

@keyframes header-en-cycle {
    0%,
    17%,
    42%,
    100% {
        opacity: 0;
        transform: rotateX(-72deg);
    }

    22%,
    37% {
        opacity: 1;
        transform: none;
    }

    42% {
        opacity: 0;
        transform: rotateX(72deg);
    }
}

@keyframes header-zh-cycle {
    0%,
    37%,
    62%,
    100% {
        opacity: 0;
        transform: rotateX(-72deg);
    }

    42%,
    57% {
        opacity: 1;
        transform: none;
    }
}

@keyframes header-ko-cycle {
    0%,
    57%,
    82%,
    100% {
        opacity: 0;
        transform: rotateX(-72deg);
    }

    62%,
    77% {
        opacity: 1;
        transform: none;
    }
}

/* ヘッダー右側（駅ナンバリングと時刻） */
.header-right {
    flex: 0 0 691px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
}

.station-number-icon .top-c-icon {
    height: 185px;
    width: auto;
}

.header-station-code {
    width: 150px;
    height: 185px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.header-station-code span {
    display: block;
}

.clock-car-display {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.clock-car-number {
    font-size: 98px;
    font-weight: 900;
    line-height: 0.95;
}

.time-box {
    width: 292px;
    align-self: stretch;
    background-color: #161616;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    line-height: 1.1;
}

.time-clock { font-size: 69px; }


/* =========================================
   路線図（メイン）領域 (Route Map)
   ========================================= */
.route-map {
    height: 810px;
    padding: 77px 0;
    position: relative;
}

.route-map.has-platform-guide {
    padding: 0;
}

.route-map.has-platform-guide .map-grid {
    display: none;
}

.platform-guide {
    display: none;
    height: 100%;
    color: #ffffff;
}

.route-map.has-platform-guide .platform-guide {
    display: block;
}

.platform-guide-content {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 920px;
    grid-template-rows: 1fr auto;
    gap: 16px 70px;
    padding: 38px 120px 0;
}

.platform-diagram {
    display: contents;
}

.platform-scene {
    --train-entry-duration: 7200ms;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
    transform: translateY(-132px) scale(0.82);
    transform-origin: center bottom;
}

.platform-shape {
    --platform-edge-top: -18px;
    position: relative;
    height: 224px;
    margin-top: 22px;
    padding: 102px 118px 28px;
}

.platform-shape::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    height: 194px;
    background: #929292;
    clip-path: polygon(10% 0, 88% 0, 100% 100%, 0 100%);
    z-index: 0;
}

.platform-exit {
    position: absolute;
    left: 50%;
    top: calc(var(--platform-edge-top) + 18px);
    transform: translateX(-50%);
    z-index: 2;
    min-width: 440px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    border-radius: 8px;
    background: #e7d72d;
    color: #242424;
    font-size: 48px;
    font-weight: 900;
    white-space: nowrap;
}

.platform-cycle-text {
    position: relative;
    display: block;
    width: 100%;
    height: 1.18em;
    overflow: hidden;
}

.platform-cycle-text .cycle-label {
    justify-content: center;
}

.platform-cars {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
    animation-duration: var(--train-entry-duration);
    animation-delay: var(--language-cycle-delay);
    animation-timing-function: cubic-bezier(0.16, 0.84, 0.26, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

.platform-scene.is-train-top .platform-shape {
    --platform-edge-top: 124px;
    height: 342px;
    padding: 0 118px;
}

.platform-scene.is-train-top .platform-cars {
    width: 78%;
    margin: 0 auto 58px;
    gap: 10px;
}

.platform-scene.is-lrt-train .platform-shape {
    padding-left: 150px;
    padding-right: 150px;
}

.platform-scene.is-lrt-train .platform-cars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.platform-scene.is-lrt-train .platform-car {
    height: 92px;
    border-radius: 14px;
}

.platform-scene.is-lrt-train .platform-car.is-current-car {
    height: 112px;
}

.platform-scene.is-train-top.is-lrt-train .platform-cars {
    width: 84%;
    gap: 18px;
}

.platform-scene.is-entry-left .platform-cars {
    animation-name: platform-cars-enter-left;
}

.platform-scene.is-entry-right .platform-cars {
    animation-name: platform-cars-enter-right;
}

.platform-car {
    position: relative;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #d8d8d8;
    color: #242424;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
}

.platform-car.is-current-car {
    height: 108px;
    background: #f1f1f1;
    outline: 8px solid var(--platform-line-color, #ffffff);
    outline-offset: 0;
}

@keyframes platform-cars-enter-left {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }

    2% {
        opacity: 1;
        transform: translateX(-120%);
    }

    22%,
    88% {
        opacity: 1;
        transform: translateX(0);
    }

    96% {
        opacity: 1;
        transform: translateX(120%);
    }

    99.4% {
        opacity: 0;
        transform: translateX(120%);
    }

    100% {
        opacity: 0;
        transform: translateX(-120%);
    }
}

@keyframes platform-cars-enter-right {
    0% {
        opacity: 0;
        transform: translateX(120%);
    }

    2% {
        opacity: 1;
        transform: translateX(120%);
    }

    22%,
    88% {
        opacity: 1;
        transform: translateX(0);
    }

    96% {
        opacity: 1;
        transform: translateX(-120%);
    }

    99.4% {
        opacity: 0;
        transform: translateX(-120%);
    }

    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

.platform-door-notice {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    align-self: stretch;
    min-height: 0;
    gap: 0;
}

.train-door {
    position: relative;
    grid-row: 2;
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 26px;
    width: 560px;
    height: 630px;
    overflow: visible;
}

.train-door-panel {
    position: relative;
    width: 238px;
    height: 500px;
    object-fit: contain;
    z-index: 2;
    animation-duration: var(--language-cycle-duration);
    animation-delay: var(--language-cycle-delay);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.train-door-not {
    position: absolute;
    left: 50%;
    bottom: 36px;
    width: 182px;
    height: 182px;
    object-fit: contain;
    transform: translateX(-50%);
    z-index: 3;
}

.train-door-go {
    position: absolute;
    left: 50%;
    bottom: 98px;
    width: 194px;
    height: 168px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 4;
}

.train-door.is-door-current .train-door-not {
    display: none;
}

.train-door.is-door-current .train-door-go {
    animation: door-go-up var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.train-door.is-door-current .train-door-left {
    animation-name: door-panel-open-left;
}

.train-door.is-door-current .train-door-right {
    animation-name: door-panel-open-right;
}

.train-door.is-door-opposite .train-door-go,
.train-door.is-door-none .train-door-go {
    display: none;
}

@keyframes door-panel-open-left {
    0%,
    8%,
    88%,
    100% {
        transform: translateX(0);
    }

    18%,
    76% {
        transform: translateX(-126px);
    }
}

@keyframes door-panel-open-right {
    0%,
    8%,
    88%,
    100% {
        transform: translateX(0);
    }

    18%,
    76% {
        transform: translateX(126px);
    }
}

@keyframes door-go-up {
    0%,
    18%,
    100% {
        opacity: 0;
        transform: translate(-50%, 0) translateY(58px) scale(1);
    }

    24% {
        opacity: 1;
        transform: translate(-50%, 0) translateY(58px) scale(1);
    }

    42%,
    70% {
        opacity: 1;
        transform: translate(-50%, 0) translateY(-88px) scale(0.78);
    }

    78% {
        opacity: 0;
        transform: translate(-50%, 0) translateY(-88px) scale(0.78);
    }
}

.platform-door-text {
    grid-row: 1;
    width: 100%;
    margin-top: 56px;
    font-size: 58px;
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
}

.platform-door-text .platform-cycle-text {
    height: 1.18em;
}

.platform-door-text .cycle-label {
    white-space: nowrap;
}

.platform-transfer-section {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 70px;
    min-height: 210px;
    transform: translateY(-26px);
}

.platform-transfer-title {
    width: 360px;
    font-size: 86px;
    font-weight: 900;
    white-space: nowrap;
}

.platform-transfer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 64px;
    align-items: center;
}

.platform-transfer-item {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    color: #ffffff;
    font-size: 62px;
    font-weight: 900;
    line-height: 1;
}

.platform-transfer-label {
    width: 560px;
}

.platform-transfer-label .cycle-label {
    justify-content: flex-start;
}

.platform-transfer-item img {
    width: 86px;
    height: 86px;
    flex: 0 0 auto;
}

.cycle-icon {
    animation: dynamic-cycle-icon var(--language-cycle-duration) ease-out infinite var(--language-cycle-delay);
}

/* CSS Gridを使用して、13列の駅情報を完全に整列させる */
.map-grid {
    --route-marker-size: 77px;
    --route-track-height: var(--route-marker-size);
    --route-arrow-width: calc(var(--route-track-height) * 0.75);
    --route-marker-font-size: 42px;
    --station-name-base-size: 77px;
    --station-count: 1;
    --route-color: #00a650;
    --route-track-background: var(--route-color);
    --progress-left: 0%;
    display: grid;
    grid-template-columns: repeat(var(--station-count), minmax(0, 1fr));
    grid-template-rows: 1fr 72px 96px 192px; /* 駅名, ID, ノード(線路), 乗換情報 */
    height: 100%;
    position: relative;
}

/* Track Line (背景の線路) */
.track-bg {
    grid-row: 3;
    grid-column: 1 / -1;
    align-self: center;
    height: var(--route-track-height);
    background: var(--route-track-background);
    clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 0 100%);
    position: relative;
    z-index: 1;
}

/* Track 上の進行方向矢印 */
.progress-arrow {
    position: absolute;
    top: 50%;
    left: var(--progress-left);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: calc(var(--route-track-height) / 2) solid transparent;
    border-bottom: calc(var(--route-track-height) / 2) solid transparent;
    border-left: var(--route-arrow-width) solid #ffffff;
    z-index: 3;
    animation: progress-arrow-glow 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.72));
    transform-origin: 0 50%;
}

.map-grid.is-at-station .progress-arrow {
    display: none;
}

@keyframes progress-arrow-glow {
    0%,
    100% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(0.98);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.52));
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.07);
        filter:
            drop-shadow(0 0 14px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 30px rgba(255, 255, 255, 0.42));
    }
}

.station-list {
    display: contents;
}

/* display: contents を用いて子要素を直接親のGridに配置 */
.station-col {
    display: contents;
}

.station-col > * {
    grid-column: var(--col);
}

/* テキストカラー */
.text-white { color: #ffffff; }
.text-gray { color: #7a7a7a; }

/* 駅名 (日本語/英語/簡体中国語/韓国語ローテーション表示) */
.st-name {
    grid-row: 1;
    justify-self: center;
    align-self: end;
    width: 330px;
    height: 360px;
    overflow: visible;
    font-weight: bold;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: var(--station-name-margin-bottom, 18px);
    position: relative;
}

.st-name-ja,
.st-name-en,
.st-name-zh,
.st-name-ko {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform-origin: bottom center;
    will-change: transform, opacity;
}

.st-name-ja,
.st-name-zh,
.st-name-ko {
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1;
    white-space: nowrap;
}

.st-name-ja {
    font-size: var(--station-name-ja-size, var(--station-name-base-size));
    letter-spacing: var(--station-name-ja-spacing, 0.18em);
    transform: translateX(-50%) scaleY(var(--station-name-ja-scale, 1));
}

.st-name-zh {
    font-size: var(--station-name-zh-size, var(--station-name-base-size));
    letter-spacing: var(--station-name-zh-spacing, 0.18em);
    transform: translateX(-50%) scaleY(var(--station-name-zh-scale, 1));
}

.st-name-ko {
    font-size: var(--station-name-ko-size, var(--station-name-base-size));
    letter-spacing: var(--station-name-ko-spacing, 0.08em);
    transform: translateX(-50%) scaleY(var(--station-name-ko-scale, 1));
}

.st-name-ja {
    animation: station-name-ja-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.st-name-zh,
.st-name-ko {
    opacity: 0;
}

.st-name-zh {
    animation: station-name-zh-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.st-name-ko {
    animation: station-name-ko-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.st-name-en {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    bottom: var(--station-name-en-bottom, 148px);
    width: min(var(--station-name-en-width, 420px), 460px);
    min-height: 112px;
    max-height: 150px;
    font-size: var(--station-name-en-size, 80px);
    line-height: 1.03;
    opacity: 0;
    text-align: left;
    transform-origin: center center;
    transform: translateX(-50%) rotate(-90deg) rotateX(-72deg) scale(var(--station-name-en-scale, 1));
    animation: station-name-en-cycle var(--language-cycle-duration) ease-in-out infinite var(--language-cycle-delay);
}

.st-name-en span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
}

.st-name.is-long-name {
    --station-name-margin-bottom: 17px;
}

.st-name.is-very-long-name {
    --station-name-margin-bottom: 16px;
}

.st-name.is-en-long-name {
    --station-name-en-size: 71px;
}

.st-name.is-en-very-long-name {
    --station-name-en-size: 63px;
}

.st-name-ja.is-long-name,
.st-name-zh.is-long-name {
    letter-spacing: 0.08em;
}

.st-name-ko.is-long-name {
    letter-spacing: 0.03em;
}

.st-name-ja.is-very-long-name,
.st-name-zh.is-very-long-name {
    letter-spacing: 0.02em;
}

.st-name-ko.is-very-long-name {
    letter-spacing: 0;
}

@keyframes station-name-ja-cycle {
    0%,
    17%,
    100% {
        opacity: 1;
        transform: translateX(-50%) scaleY(var(--station-name-ja-scale, 1));
    }

    22%,
    97% {
        opacity: 0;
        transform: translateX(-50%) rotateX(72deg) scaleY(var(--station-name-ja-scale, 1));
    }
}

@keyframes station-name-en-cycle {
    0%,
    17%,
    42%,
    100% {
        opacity: 0;
        transform: translateX(-50%) rotate(-90deg) rotateX(-72deg) scale(var(--station-name-en-scale, 1));
    }

    22%,
    37% {
        opacity: 1;
        transform: translateX(-50%) rotate(-90deg) scale(var(--station-name-en-scale, 1));
    }

    42% {
        opacity: 0;
        transform: translateX(-50%) rotate(-90deg) rotateX(72deg) scale(var(--station-name-en-scale, 1));
    }
}

@keyframes station-name-zh-cycle {
    0%,
    37%,
    62%,
    100% {
        opacity: 0;
        transform: translateX(-50%) rotateX(-72deg) scaleY(var(--station-name-zh-scale, 1));
    }

    42%,
    57% {
        opacity: 1;
        transform: translateX(-50%) scaleY(var(--station-name-zh-scale, 1));
    }
}

@keyframes station-name-ko-cycle {
    0%,
    57%,
    82%,
    100% {
        opacity: 0;
        transform: translateX(-50%) rotateX(-72deg) scaleY(var(--station-name-ko-scale, 1));
    }

    62%,
    77% {
        opacity: 1;
        transform: translateX(-50%) scaleY(var(--station-name-ko-scale, 1));
    }
}

/* 駅ナンバリング */
.st-id {
    grid-row: 2;
    justify-self: center;
    align-self: center;
    font-size: 35px;
    font-weight: bold;
    white-space: nowrap;
}

/* 駅のノード（丸印）コンテナ */
.st-node {
    grid-row: 3;
    justify-self: center;
    align-self: center;
    display: grid;
    place-items: center;
    width: var(--route-marker-size);
    height: var(--route-marker-size);
    z-index: 2; /* 路線トラックより前面に */
}

/* 駅ノード */
.node-past,
.node-stop,
.node-skip {
    width: var(--route-marker-size);
    height: var(--route-marker-size);
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.node-stop {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
    font-size: var(--route-marker-font-size);
    line-height: 1;
}

.node-skip {
    background-color: #ffffff;
}

.node-past {
    background-color: #d8d8d8;
}

.node-label {
    position: relative;
    z-index: 1;
}

.node-current-highlight {
    animation: station-pulse 1.6s ease-in-out infinite;
    box-shadow:
        0 0 0 8px color-mix(in srgb, var(--route-color) 55%, transparent),
        0 0 34px 16px color-mix(in srgb, var(--route-color) 70%, transparent);
}

@keyframes station-pulse {
    0%,
    100% {
        filter: brightness(1);
        transform: scale(1);
    }

    50% {
        filter: brightness(1.18);
        transform: scale(1.12);
    }
}

/* 乗り換え情報エリア */
.st-transfers {
    grid-row: 4;
    justify-self: center; /* アイコンを中央基準に配置 */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin-top: 36px;
    width: max-content;
    transform: translateX(72px);
}

.station-col.has-long-name .st-transfers {
    gap: 14px;
    margin-top: 26px;
}

.station-col.has-very-long-name .st-transfers {
    gap: 10px;
    margin-top: 20px;
}

.station-col.has-many-transfers .st-transfers {
    gap: 8px;
    margin-top: 14px;
}

.transfer-item {
    display: flex;
    align-items: center;
    font-size: 31px;
    color: #ffffff;
    font-weight: bold;
    min-width: 0;
}

.station-col.has-long-name .transfer-item {
    font-size: 29px;
}

.station-col.has-many-transfers .transfer-item {
    font-size: 25px;
}

.transfer-item img {
    width: 46px;
    height: 46px;
    margin-right: 12px;
}

.station-col.has-long-name .transfer-item img {
    width: 43px;
    height: 43px;
    margin-right: 10px;
}

.station-col.has-many-transfers .transfer-item img {
    width: 38px;
    height: 38px;
    margin-right: 9px;
}

.transfer-label {
    position: relative;
    display: inline-block;
    width: 320px;
    height: 1.18em;
    overflow: hidden;
}

.transfer-label .cycle-label {
    justify-content: flex-start;
}

.transfer-label .cycle-en {
    font-size: 0.82em;
}

.station-col.has-long-name .transfer-label {
    width: 300px;
}

.station-col.has-many-transfers .transfer-label {
    width: 280px;
}

.debug-panel {
    min-height: 100vh;
    padding: 24px;
    background: #1e1e1e;
    color: #f5f5f5;
    font-family: var(--app-font-family);
}

.debug-panel h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.debug-form {
    display: grid;
    gap: 14px;
}

.debug-field {
    display: grid;
    gap: 6px;
}

.debug-field label {
    font-size: 13px;
    color: #cfcfcf;
}

.debug-field select,
.debug-field input {
    width: 100%;
    border: 1px solid #555;
    background: #111;
    color: #fff;
    font-size: 16px;
    padding: 8px;
}

.debug-playback {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #444;
    border-radius: 8px;
    background: #252525;
}

.debug-playback-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.debug-playback-buttons button {
    min-height: 40px;
    border: 1px solid #666;
    background: #333;
    color: #f5f5f5;
    font: inherit;
    cursor: pointer;
}

.debug-playback-buttons button:hover {
    background: #3f3f3f;
}

.debug-playback-buttons button.is-playing {
    border-color: #ffffff;
    background: #d8d8d8;
    color: #111111;
    font-weight: 700;
}

.debug-playback-status {
    min-height: 1.2em;
    color: #cfcfcf;
    font-size: 13px;
}

.debug-speech-panel {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid #444;
    border-radius: 8px;
    background: #252525;
}

.debug-speech-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.debug-speech-header strong {
    font-size: 15px;
}

.debug-speech-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.debug-speech-actions button {
    min-height: 34px;
    border: 1px solid #666;
    background: #333;
    color: #f5f5f5;
    font: inherit;
    padding: 5px 12px;
    cursor: pointer;
}

.debug-speech-actions button:hover {
    background: #3f3f3f;
}

.debug-speech-lines {
    display: grid;
    gap: 12px;
}

.debug-speech-panel .script-meta {
    margin-bottom: 0;
}

.debug-speech-panel .script-speech-status {
    margin: -6px 0 0;
}

.debug-speech-panel .script-voice-settings {
    margin-bottom: 0;
}

.debug-speech-panel .script-lines {
    gap: 8px;
}

.debug-speech-panel .script-lines p {
    padding: 10px;
    font-size: 15px;
    line-height: 1.45;
}

.debug-checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.debug-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    border: 1px solid #555;
    background: #111;
    color: #fff;
    font-size: 15px;
    padding: 8px;
}

.debug-checkbox input {
    width: auto;
}

.script-panel {
    min-height: 100vh;
    padding: 24px;
    background: #151515;
    color: #f7f7f7;
    font-family: var(--app-font-family);
}

.script-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.script-header h1 {
    margin: 0;
    font-size: 24px;
}

.script-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-header-actions button {
    min-height: 36px;
    border: 1px solid #666;
    background: #282828;
    color: #fff;
    font: inherit;
    padding: 6px 14px;
    cursor: pointer;
}

.script-header-actions button:hover {
    background: #333;
}

.script-header-actions button.is-active {
    border-color: #f7f7f7;
    background: #f1f1f1;
    color: #111;
    font-weight: 700;
}

.script-header-actions button.is-active:hover {
    background: #ffffff;
}

.script-meta {
    margin-bottom: 18px;
    color: #cfcfcf;
    font-size: 14px;
}

.script-speech-status {
    min-height: 1.2em;
    margin: -8px 0 18px;
    color: #cfcfcf;
    font-size: 13px;
}

.script-voice-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.script-voice-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.script-voice-field span {
    color: #d8d8d8;
    font-size: 13px;
}

.script-voice-field select {
    width: 100%;
    min-height: 38px;
    border: 1px solid #555;
    background: #242424;
    color: #fff;
    font: inherit;
    padding: 6px 10px;
}

.script-language-blocks {
    display: grid;
    gap: 18px;
}

.script-language-block {
    display: grid;
    gap: 10px;
}

.script-language-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.script-language-block h2 {
    margin: 0;
    color: #f7f7f7;
    font-size: 16px;
    line-height: 1.2;
}

.script-language-heading button {
    min-height: 30px;
    border: 1px solid #666;
    background: #333;
    color: #f5f5f5;
    font: inherit;
    font-size: 13px;
    padding: 4px 10px;
    cursor: pointer;
}

.script-language-heading button:hover {
    background: #3f3f3f;
}

.script-lines {
    display: grid;
    gap: 14px;
}

.script-lines p {
    margin: 0;
    padding: 16px;
    border: 1px solid #3f3f3f;
    background: #202020;
    color: #fff;
    font-size: 22px;
    line-height: 1.55;
    white-space: pre-line;
}

@media (max-width: 560px) {
    .script-voice-settings {
        grid-template-columns: 1fr;
    }
}