/**
 * Base CSS - PHP Responsive Design System
 * Created: 2026-01-29
 * Purpose: Quick fix for mobile layout issues
 *
 * This file provides the foundation for responsive design across all PHP pages.
 * Apply these styles first, then use layout.css for component-specific styles.
 */

/* ===== Global Box Model ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== Page Container ===== */
/* PC fixed width + Mobile responsive */
.page {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 16px;
}

/* ===== Responsive Images ===== */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Mobile Input Fix (iOS zoom) ===== */
input, textarea, select {
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
}

/* ===== Text Overflow Fix ===== */
.text-wrap, .word-break {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ===== iOS 100vh Fix ===== */
.fullscreen, .full-height {
    min-height: 100vh;
    min-height: 100dvh; /* Use dvh on supported browsers */
}

/* ===== Safe Area for Notch Phones ===== */
.safe-area {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ===== Debug Mode (for development) ===== */
/* Add class "debug" to body to see layout outlines */
.debug * {
    outline: 1px solid rgba(255, 0, 0, 0.2);
}