@charset "shift_jis";
:root {
    /* 本体 */
    --vending-red: #c82e20;
    --vending-mid:  #af3d24;
    --vending-dark: #923509;

    /* UI共通グレー */
    --ui-dark:       #1a1a1a;
    --ui-mid:        #555;
    --ui-light:      #e0e0e0;

    /* テキスト */
    --text-muted:    rgba(255, 255, 255, 0.7);

    /* ショーケース（ガラス） */
    --glass-top:     #ededed;
    --glass-bot:     #d8e1e3;
}


/* ===== 自販機本体 ===== */
.vending-machine {
    width: 960px;
    margin: auto;
    background: linear-gradient(160deg, var(--vending-red), var(--vending-mid) 40%, var(--vending-dark));
    border-radius: 18px 18px 10px 10px;
    box-shadow:
        8px 8px 30px rgba(0,0,0,0.6),
        -3px 0 10px rgba(255,255,255,0.08),
        inset 2px 0 6px rgba(255,255,255,0.12),
        inset -2px 0 6px rgba(0,0,0,0.3);
    border: 3px solid var(--vending-dark);
    position: relative;
    overflow: hidden;
}

/* メタリック質感のテクスチャ */
.vending-machine::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent, transparent 18px,
        rgba(255,255,255,0.03) 18px, rgba(255,255,255,0.03) 20px
    );
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/* ===== 上部看板 ===== */
.machine-top-banner {
    background: linear-gradient(135deg, var(--vending-mid), var(--vending-dark));
    padding: 12px 16px 10px;
    text-align: center;
    border-bottom: 3px solid var(--accent);
    
    z-index: 1;
}

.machine-top-banner h1 {
    font-size: 22px;
    color: #fff;
    letter-spacing: 0.15em;
    text-shadow: 0 0 10px #fff;
}

.machine-top-banner p {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    letter-spacing: 0.1em;
}

.right-badge {
    display: flex;
    justify-content: flex-end;
}
.badge {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--accent);
}

/* ===== ショーケース ===== */
.showcase {
    margin: 1rem 1.5rem;
    background: linear-gradient(180deg, var(--glass-top) 0%, var(--glass-bot) 100%);
    border-radius: 8px;
    border: 3px solid var(--vending-dark);
    box-shadow:
        inset 0 0 20px rgba(0,0,0,0.25),
        inset 0 3px 8px rgba(255,255,255,0.5);
    max-height: 705px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scroll-margin: 0 0 10px;
    scrollbar-color: var(--vending-dark) transparent;
    z-index: 1;
}


/* ===== 棚板 ===== */
.shelf-row {
    display: flex;
    justify-content: space-evenly;
    padding: 15px 0 25px;
    position: relative;
}

.shelf-row::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 10px;
    background: linear-gradient(180deg, var(--ui-light), var(--ui-dark));
    border-top: 2px solid var(--ui-light);
    border-bottom: 2px solid var(--ui-mid);
    z-index: 5;
}

/* ===== 缶アイテム ===== */
.can-item {
    border-radius: 6px;
    width: 180px;
    padding: 6px 0;
    text-decoration: none;
    position: relative;
    z-index: 2;
    transition: transform 0.15s;
    box-shadow:
        2px 3px 6px rgba(0,0,0,0.4),
        inset 1px 0 3px rgba(255,255,255,0.3),
        inset -1px 0 3px rgba(0,0,0,0.2);
}
@media (hover: hover) {
    .can-item:hover { 
        transform: translateY(-4px);
        transition: all 0.3s;
    }
    .can-item.can-empty:hover { transform: translateY(0px); }
}

.can-body {
    width: 180px;
    height:300px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 0.5fr;
    align-items: self-start;
    gap: 15px;
    overflow: hidden;
    cursor: pointer;
}

.can-item::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; width: 20%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    pointer-events: none;
}

/* 缶カラー：8系統 */
.shelf-row:nth-child(odd) .can-item:nth-child(1) { background: linear-gradient(160deg, var(--accent),    #b07800, #805800); }
.shelf-row:nth-child(odd) .can-item:nth-child(2) { background: linear-gradient(160deg, #a8ffff,  #00b0ad, #008080 ); }
.shelf-row:nth-child(odd) .can-item:nth-child(3) { background: linear-gradient(160deg, var(--green),    #1a8a50, #0f5c34); }
.shelf-row:nth-child(odd) .can-item:nth-child(4) { background: linear-gradient(160deg, #ffc0cb,    #e66a7e, #d82442); }

.shelf-row:nth-child(even) .can-item:nth-child(1) { background: linear-gradient(160deg, #e49ee4,    #b423b4, purple); }
.shelf-row:nth-child(even) .can-item:nth-child(2) { background: linear-gradient(160deg, #a3cffb,    #378ce0, #0f77de); }
.shelf-row:nth-child(even) .can-item:nth-child(3) { background: linear-gradient(160deg, #9eeed3,    #4fc79f, #009563); }
.shelf-row:nth-child(even) .can-item:nth-child(4) { background: linear-gradient(160deg, #ffff85,    rgb(172, 172, 26), #777702);}

.can-empty {
    background: linear-gradient(160deg, var(--ui-light), var(--ui-mid), var(--ui-dark));
    filter: grayscale(60%) brightness(0.75);
    cursor: default;
}

.can-thumb {
    display: block;
    width: 145px;
    margin: 0 auto;
    border-radius: 3px;
    margin-top: 8px;
    border: 1px solid rgba(255,255,255,0.3);
}

.can-date {
    color: #fff;
    text-align: center;
    padding: 0 2px;
    margin-top: 2px;
}

.can-title {
    color: #fff;
    font-weight: bold;
    text-align: justify;
    line-height: 1.5;
    width: 100%;
    padding: 0 2px;
    word-break: break-all;
}

.coming-label {
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.05em;
    padding: 4px 2px;
}

/* ===== ボタン行 ===== */
.btn-row {
    display: flex;
    padding: 8px 10px 10px;
    gap: 6px;
    background: linear-gradient(180deg, var(--vending-red), var(--vending-mid));
}

.slot-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.slot-num {
    font-size: 9px;
    font-weight: bold;
    color: var(--ui-dark);
    background: var(--ui-light);
    border-radius: 2px;
    padding: 1px 5px;
}

.read-btn {
    width: 100%;
    height: 28px;
    background: linear-gradient(180deg, var(--ui-dark), var(--vending-dark));
    border: 2px solid var(--ui-mid);
    border-radius: 6px;
    color: var(--green);
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 #000, 0 5px 6px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-shadow: 0 0 6px rgba(46,204,113,0.9);
    text-decoration: none;
    transition: all 0.1s;
}

.read-btn:hover {
    background: linear-gradient(180deg, var(--ui-mid), var(--ui-dark));
    box-shadow: 0 5px 0 #000, 0 6px 10px rgba(0,0,0,0.5);
}

.read-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #000;
}

.led {
    display: inline-block;
    width: 8px; height: 8px;
    background: radial-gradient(circle, #98ecbb, var(--green));
    border-radius: 50%;
    box-shadow: 0 0 5px var(--green);
}

.read-btn.sold-out {
    background: linear-gradient(180deg, var(--ui-mid), var(--ui-dark));
    color: var(--ui-light);
    text-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ===== 下部パネル ===== */
.lower-panel {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    z-index: 1;
    margin: 0 1.5rem;
}

.ad-panel {
    width: 60%;
    background: linear-gradient(135deg, var(--glass-top), var(--ui-light));
    border-radius: 8px;
    border: 2px solid var(--vending-dark);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 90px;
}

.ad-panel-text {
    text-align: center;
    color: #333;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.05em;
}


.ad-button img {
    box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
    border: 1px solid var(--ui-mid);
}

.op-panel {
    width: 20%;
    background: linear-gradient(180deg, var(--ui-dark), #000);
    border-radius: 8px;
    border: 2px solid var(--vending-dark);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.7);
}

.amount-display {
    background: #000;
    border: 2px solid var(--ui-mid);
    border-radius: 4px;
    padding: 4px 8px;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    color: var(--green);
    text-shadow: 0 0 6px var(--green);
    font-family: monospace;
    letter-spacing: 0.05em;
}

.bill-slot {
    background: linear-gradient(180deg, var(--ui-mid), var(--ui-dark));
    height: 14px;
    border-radius: 3px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    
}


.coin-slot {
    background: linear-gradient(180deg, var(--ui-mid), var(--ui-dark));
    height: 8px;
    width: 28px;
    border-radius: 2px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    
}


.return-btn {
    background: linear-gradient(180deg, var(--ui-light), var(--ui-mid));
    border: 1px solid var(--ui-mid);
    border-radius: 50%;
    width: 28px; height: 28px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    align-self: flex-end;
}

.change-tray {
    background: linear-gradient(180deg, var(--ui-light), var(--ui-mid));
    height: 14px;
    border-radius: 4px;
    border: 2px solid var(--ui-mid);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* ===== 取り出し口 ===== */
.dispenser-section {
    margin: 3rem 1.5rem;
    z-index: 1;
}

.dispenser-label {
    background: var(--ui-dark);
    color: #fff;
    font-size: 11px;
    text-align: center;
    padding: 4px;
    border-radius: 4px 4px 0 0;
    letter-spacing: 0.1em;
}

.dispenser-tray {
    background: linear-gradient(180deg, var(--ui-light), var(--ui-mid));
    border: 2px solid var(--ui-mid);
    border-top: none;
    border-radius: 0 0 6px 6px;
    height: 90px;
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dispenser-opening {
    width: 80%;
    height: 50px;
    background: var(--ui-dark);
    border-radius: 4px;
    border: 2px solid var(--ui-mid);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}

/* ===== 底部 ===== */
.machine-bottom {
    height: 16px;
    background: linear-gradient(180deg, var(--vending-mid), var(--vending-dark));
    border-radius: 0 0 8px 8px;
    border-top: 2px solid var(--vending-dark);
}


@media screen and (max-width:768px) {

    .vending-machine {
        width: 100%;
        overflow: scroll;
        padding: 30px 10px 15px;
        border-radius: 10px;
    }

    .showcase,
    .lower-panel,
    .shelf-row {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .showcase {
        max-height: 400px;
        overflow-y: scroll;
    }
    .shelf-row::after {
        display: none;
    }

    .ad-panel,
    .op-panel {
        width: 100%;
    }
    .ad-button img {
        max-width: 100%;
        object-fit: contain;
    }
}