/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* 카카오 계열 색상 */
    --kakao-yellow:       #FEE500;
    --kakao-yellow-hover: #F5DC00;
    --kakao-yellow-light: #FFFDE7;
    --kakao-dark:         #191919;
    --kakao-brown:        #3C1E1E;

    /* 시스템 색상 */
    --primary:        var(--kakao-yellow);
    --primary-hover:  var(--kakao-yellow-hover);
    --primary-light:  var(--kakao-yellow-light);
    --primary-text:   var(--kakao-dark);

    --success:        #2DB400;
    --error:          #E53935;
    --error-bg:       #FFEBEE;

    --bg:             #F2F2F2;
    --card-bg:        #FFFFFF;
    --text-primary:   #191919;
    --text-secondary: #888888;
    --border:         #E8E8E8;
    --border-active:  var(--kakao-dark);

    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  22px;
    --radius-pill:50px;

    --shadow:       0 2px 16px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.13);
    --transition:   all 0.18s ease;

    --font: 'Inter', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC',
            -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    padding: 20px 16px 48px;
}

h1, h2, h3 { font-weight: 700; line-height: 1.3; }
button { font-family: inherit; cursor: pointer; }
textarea, input { font-family: inherit; }

.container {
    max-width: 640px;
    margin: 0 auto;
}

.hidden { display: none !important; }