:root {
    --psb-primary: #0073aa; /* メインカラー */
    --psb-text: #333;       /* 文字色 */
    --psb-bg: #f9f9f9;      /* 背景色 */
    --psb-border: #ddd;     /* 枠線色 */
    
    --psb-hover-bg: #d6eaff;  /* カレンダーホバー時の薄い青 */
    --psb-accent-bg: #eef7ff; /* サマリーエリアの背景色 */

    --psb-max-width: 600px;
    --psb-font-base: 1.8rem;
    --psb-spacing-base: 20px;
    --psb-slot-gap: 10px;
    --psb-cell-padding: 10px 0;
}

#psb-booking-app {
    max-width: var(--psb-max-width);
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: var(--psb-spacing-base);
    border: 1px solid var(--psb-border);
    background: #fff;
    box-sizing: border-box;
    border-radius: 5px;

    /* Tabs */
    & .psb-tabs {
        display: flex;
        margin-bottom: 25px;
        border-bottom: 2px solid var(--psb-border);

        & .psb-tab {
            flex: 1;
            padding: 0px 10px;
            border: none;
            background: #f1f1f1;
            cursor: pointer;
            font-size: var(--psb-font-base);
            font-weight: bold;
            color: #666;
            transition: background 0.2s;

            &.active {
                background: #fff;
                color: var(--psb-primary);
                border-top: 3px solid var(--psb-primary);
                border-bottom: 3px solid #fff;
                margin-bottom: -2px;
            }
            &:hover:not(.active) { background: #e9e9e9; }
        }
    }

    /* Service List */
    & .psb-category-section {
        margin-bottom: 25px;
        border: 1px solid var(--psb-border);
        border-radius: 5px;
        padding: 15px;
        background: var(--psb-bg);

        & .psb-cat-title {
            margin: 0 0 15px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #ccc;
            font-size: 1.1em;
            color: var(--psb-text);
        }

        & .psb-service-item {
            display: block;
            padding: 6px 0;
            border-bottom: 1px solid #eee;
            
            &:last-child { border-bottom: none; }
            
            & label {
                display: flex; align-items: center; cursor: pointer; gap: 10px;
            }
        }
    }

    /* Summary */
    & .psb-summary {
        background: var(--psb-accent-bg);
        padding: var(--psb-spacing-base);
        margin: 20px 0;
        border-radius: 5px;
        border-left: 4px solid var(--psb-primary);
        & p { margin: 5px 0; }
    }

    /* Calendar */
    & .psb-calendar-header {
        display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;
        & button { background: #f1f1f1; border: 1px solid #ccc; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
    }
    & .psb-calendar-grid {
        display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center;
    }
    & .psb-cal-head { font-weight: bold; font-size: 0.85em; padding: 5px 0; color: #666; }
    & .psb-cal-cell {
        padding: var(--psb-cell-padding);
        border: 1px solid #eee; border-radius: 4px; color: #ccc; cursor: default; background: #fafafa; transition: all 0.2s;
        
        &.psb-open {
            color: var(--psb-text); background-color: #fff; border-color: var(--psb-primary); cursor: pointer; font-weight: bold;
            &:hover { background-color: var(--psb-hover-bg); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        }
        &.psb-selected { background-color: var(--psb-primary); color: #fff; border-color: var(--psb-primary); }
        &.psb-disabled { background-color: #f0f0f0; color: #bbb; cursor: not-allowed; text-decoration: line-through; border-color: #eee; }
    }

    /* Time Slots */
    & .psb-slots {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--psb-slot-gap);
        margin-top: 10px;

        & .psb-slot-btn {
            width: 100%;
            min-height: 45px;
            padding: 0 5px;
            
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;

            border: 1px solid #ccc;
            background: #fff;
            cursor: pointer;
            border-radius: 4px;
            /* font-size: 14px;  <- 削除しました */
            box-sizing: border-box;
            transition: all 0.2s;

            &:hover { border-color: var(--psb-primary); color: var(--psb-primary); }
            &.active { background: var(--psb-primary); color: #fff; border-color: var(--psb-primary); }
        }
    }

    /* Forms */
    & .psb-input {
        width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
        font-size: var(--psb-font-base);
    }
    & .psb-btn {
        width: calc(50% - 0.5rem);
        background: var(--psb-primary);
        color: white;
        padding: 12px 0px;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        font-size: 1.6rem;
        font-weight: bold;
        display: inline-block;
        transition: opacity 0.2s;
        
        &:hover { opacity: 0.9; }
        &:disabled { background: #ccc; cursor: not-allowed; opacity: 1; }
        
        &.psb-btn-back { background: #666; margin-right: 10px; }
        
        /* 修正: full width 用クラスを明示的に記述 */
        &.psb-btn-full { width: 100% !important; margin-right: 0; }
    }
}

/* スマホ用レイアウト (PHPから削除した分をここに移動) */
@media (max-width: 480px) {
    #psb-booking-app .psb-calendar-grid { gap: 2px !important; }
    #psb-booking-app .psb-slots { grid-template-columns: repeat(2, 1fr); }
}

/* Global resets for the app */
#psb-booking-app img, #psb-booking-app svg { max-width: 100%; height: auto; }