.dragon-load {
    margin: 0;
    min-height: 100vh;
    color: #e8efff;
    background: #071223 url("img/dragon_lord_background.png") no-repeat center top;
    background-size: cover;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.dragon-load--repeat {
    background-repeat: repeat;
    background-size: auto;
}

.dragon-load__hero {
    background: transparent;
    padding: 0;
    text-align: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.dragon-load__hero-title {
    width: 100%;
    height: auto;
    display: block;
    max-width: none;
}

.dragon-load__content {
    padding: 16px;
    max-width: 420px;
    margin: 0 auto 32px;
}

.dragon-load__content--wide {
    max-width: none;
    padding: 12px 10px 24px;
}

.dragon-load__intro {
    border: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 20px;
    box-shadow: none;
    overflow: hidden;
}

.dragon-load__intro-image {
    width: 100%;
    height: auto;
    display: block;
}

.dragon-load__list {
    display: grid;
    gap: 14px;
}

.dragon-load__card {
    background: rgba(6, 16, 33, 0.78);
    border: 1px solid #395d7b;
    padding: 14px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.dragon-load__range {
    font-weight: bold;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 14px;
    line-height: 1.4;
}

.dragon-load__date {
    color: #ffffff;
    display: inline-block;
    line-height: 1.4;
}

.dragon-load__weekday {
    color: #ffffff;
    font-weight: bold;
    display: inline-block;
    line-height: 1.4;
}

.dragon-load__weekday--sun {
    color: #ff4d4f;
}

.dragon-load__weekday--sat {
    color: #1e90ff;
}

.dragon-load__range-sep {
    color: #c7def5;
    padding: 0 2px;
    line-height: 1.4;
}

.dragon-load__highlight {
    color: #e3c200;
    font-size: 14px;
    margin-bottom: 6px;
}

.dragon-load__title {
    font-size: 15px;
    margin-bottom: 8px;
}

.dragon-load__detail-link {
    display: inline-block;
    color: #6fd1ff;
    font-weight: bold;
    text-decoration: none;
}

.dragon-load__detail-link:hover {
    text-decoration: underline;
}

.dragon-load__note {
    margin-top: 18px;
    font-size: 11px;
    color: #c7def5;
    text-align: left;
    line-height: 1.4;
}

.dragon-load__note--tight {
    margin-top: 12px;
}

.dragon-load__detail-header {
    background: rgba(6, 16, 33, 0.95);
    border: 1px solid #395d7b;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.dragon-load__detail-badge {
    display: inline-block;
    background: #f6d477;
    color: #0e111a;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin-bottom: 6px;
}

.dragon-load__detail-title {
    font-weight: bold;
    font-size: 15px;
    line-height: 1.6;
}

.dragon-load__table-wrapper {
    background: rgba(6, 16, 33, 0.95);
    border: 1px solid #395d7b;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
    overflow-x: auto;
    margin: 0 -6px;
}

.dragon-load__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #e8efff;
    font-size: 13px;
}

.dragon-load__table th,
.dragon-load__table td {
    border: 1px solid #395d7b;
    text-align: center;
    padding: 2px 1px;
}

.dragon-load__th--group,
.dragon-load__th--machine {
    background: #1c2f45;
    width: 44px;
    font-weight: bold;
}

.dragon-load__th--day {
    background: #1c2f45;
    position: relative;
}

.dragon-load__day-num {
    font-weight: bold;
    margin-bottom: 2px;
}

.dragon-load__day-label {
    font-size: 11px;
    color: #ffffff;
}

.dragon-load__th--holiday {
    background: #5b6674;
}

.dragon-load__day-holiday {
    font-size: 10px;
    font-weight: bold;
    color: #f6d477;
    margin-top: 2px;
}

.dragon-load__day--sun .dragon-load__day-num,
.dragon-load__day--sun .dragon-load__day-label {
    color: #ff4d4f;
}

.dragon-load__day--sat .dragon-load__day-num,
.dragon-load__day--sat .dragon-load__day-label {
    color: #1e90ff;
}

.dragon-load__cell {
    background: rgba(10, 23, 40, 0.85);
}

.dragon-load__cell--group {
    width: 44px;
}

.dragon-load__cell--machine {
    font-weight: bold;
    width: 44px;
}

.dragon-load__cell--day {
    min-width: 50px;
    height: 16px;
    padding: 0;
}

.dragon-load__cell--group {
    font-weight: bold;
}

.dragon-load__cell--group-none {
    background: #a6a6a6;
}

.dragon-load__cell--group-blue {
    background: #04b3ff;
}

.dragon-load__cell--group-orange {
    background: #ff751f;
}

.dragon-load__cell--group-green {
    background: #019b27;
}

.dragon-load__cell--holiday {
    background: #5b6674;
    color: #f6d477;
}

.dragon-load__stamp {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.dragon-load__holiday {
    font-weight: bold;
    font-size: 11px;
    display: inline-block;
    width: 100%;
}

@media (max-width: 480px) {
    .dragon-load__content {
        padding: 12px;
    }

    .dragon-load__hero-title {
        width: 100%;
    }

    .dragon-load__cell--day {
        min-width: 44px;
        height: 16px;
    }

    .dragon-load__stamp {
        width: 100%;
        height: 100%;
    }
}