/**
 * base.css
 * Breakpoints, Global Variables, Reset, Typography
 */
:root {
    /* Breakpoints */
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;

    /* Typography - clamp() for fluid scaling */
    --font-main: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-size-base: clamp(14px, 1.25vw, 18px);
    --font-size-h1: clamp(1.5rem, 5vw, 2.5rem);
    --font-size-h2: clamp(1.2rem, 4vw, 2rem);

    /* Spacing */
    --spacing-base: clamp(10px, 3vw, 20px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Native <dialog> showModal() 중앙 배치 복원
 * `* { margin: 0 }` 가 native dialog 의 default margin: auto 를 덮어서
 * viewport 좌측 상단에 고정되는 회귀 fix — P11 */
dialog[open] { margin: auto; }

body {
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

h1 { font-size: var(--font-size-h1); margin-bottom: 1rem; }
h2 { font-size: var(--font-size-h2); margin-bottom: 0.8rem; }

/* ============================================================
 * Pastel Casual theme tokens
 * (Merged from layout/header.php inline <style> — RFC-UI-V3)
 * ============================================================ */
:root {
    --bg-pastel: #F8FAFC;
    --primary-pastel: #E0F2FE;
    --accent-pastel: #F0F4F8;
    --card-radius: 20px;
    /* Override base --font-main to match Pastel Casual brand (Noto Sans KR) */
    --font-main: 'Noto Sans KR', sans-serif;
}

body {
    background-color: var(--bg-pastel);
    font-family: var(--font-main);
    color: #334155;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 공통 카드 스타일 */
.card-ui {
    background: #ffffff;
    border-radius: var(--card-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    padding: 25px;
    border: 1px solid #F1F5F9;
}

a { color: #0EA5E9; text-decoration: none; }

/* [AdSense Hybrid Placement] — responsive visibility */
@media (max-width: 767px) {
    .ads-pc-wrapper { display: none !important; }
    .ads-mobile-wrapper { display: block !important; margin: 10px auto; }
}
@media (min-width: 768px) {
    .ads-pc-wrapper { display: block !important; margin: 15px auto; min-height: 90px; }
    .ads-mobile-wrapper { display: none !important; }
}