:root {
            --main-brown: #4E342E;
            --point-beige: #F5E6CC;
            --accent-orange: #FB923C;
            --warning-red: #B91C1C;
            --bg-sand: #FAFAF9;
            --text-deep-brown: #1C1917;
        }
        body { font-family: 'Noto Sans KR', sans-serif; background-color: var(--bg-sand); color: var(--text-deep-brown); margin: 0; }
        .hidden { display: none !important; }

        /* --- Setup Screen --- */
        #setup-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; text-align: center; }
        #setup-screen h2 { font-size: 28px; color: var(--main-brown); }
        .setup-options button { display: block; width: 300px; padding: 15px; margin: 10px 0; font-size: 18px; font-weight: 700; border: 2px solid var(--point-beige); border-radius: 8px; background-color: white; color: var(--text-deep-brown); cursor: pointer; transition: all 0.2s ease; }
        .setup-options button:hover { background-color: var(--point-beige); border-color: var(--main-brown); }

        /* --- Main Tracker --- */
        #main-tracker { display: flex; flex-direction: column; height: 100vh; }
        .container { display: flex; justify-content: center; align-items: center; position: relative; padding: 20px; }
        .container h1 { margin: 0; font-size: 42px; color: var(--main-brown); text-align: center; }
        .top-panel { display: flex; flex: 1; gap: 20px; padding: 0 20px 20px; }
        .panel { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding: 20px; }
        .controls-panel { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 15px; }
        #add-2shots { grid-row: 1 / 3; grid-column: 1 / 2; }
        #add-1shot { grid-row: 1 / 2; grid-column: 2 / 3; }
        #add-4shots { grid-row: 2 / 3; grid-column: 2 / 3; }
        #add-past-btn { grid-row: 3 / 4; grid-column: 1 / 3; background-color: var(--main-brown); color: white; }
        .graph-panel { flex: 2; margin: 0 20px 20px 20px; background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding: 20px; }
        #caffeine-status h1 { font-size: 24px; font-weight: 700; color: var(--main-brown); }
        #caffeine-level { font-size: 48px; font-weight: 700; color: var(--accent-orange); margin: 0; }
        #caffeine-status { text-align: center; margin-bottom: 15px; }
        #history-btn { width: 100%; padding: 8px 12px; font-size: 14px; font-weight: 700; border: 1px solid var(--point-beige); border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; background-color: #fff; color: var(--text-deep-brown); }
        #history-btn:hover { background-color: var(--point-beige); }
        .controls-panel button { width: 100%; height: 100%; padding: 15px 20px; margin: 0; font-size: 16px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; background-color: var(--point-beige); color: var(--text-deep-brown); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .controls-panel button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
        #reset-btn { position: absolute; bottom: 15px; right: 15px; width: 32px; height: 32px; padding: 0; background-color: transparent; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
        #reset-btn svg { fill: #aaa; transition: fill 0.2s ease; }
        #reset-btn:hover { background-color: #f0f0f0; }
        #reset-btn:hover svg { fill: #555; }
        #help-btn { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; color: #888; transition: all 0.2s ease; }
        #help-btn:hover { background-color: #e0e0e0; }

        /* --- Modal Styles --- */
        .modal { position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
        .modal-content { background-color: #fefefe; margin: auto; padding: 30px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 12px; position: relative; line-height: 1.6; }
        .modal-content h2 { margin-top: 0; color: var(--main-brown); }
        .modal-content h3 { color: var(--main-brown); border-bottom: 2px solid var(--point-beige); padding-bottom: 5px; margin-top: 20px; }
        .close-btn { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; }
        .close-btn:hover, .close-btn:focus { color: black; text-decoration: none; cursor: pointer; }
        #past-entry-modal .modal-controls { display: flex; gap: 10px; margin-bottom: 15px; }
        #past-entry-modal .modal-controls button { flex: 1; padding: 10px; font-size: 14px; border: 2px solid transparent; }
        #past-entry-modal input[type="datetime-local"] { width: 100%; padding: 8px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; }
        #past-entry-modal .save-btn { background-color: var(--accent-orange); color: white; width: 100%; padding: 12px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; }
        
        #history-modal .history-list { list-style: none; padding: 0; margin-top: 20px; max-height: 300px; overflow-y: auto; }
        #history-modal .history-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee; }
        #history-modal .history-list li:last-child { border-bottom: none; }
        #history-modal .history-list .amount { font-weight: bold; color: var(--accent-orange); }
        #history-modal .history-list .time { font-size: 14px; color: #555; }
        #history-modal .history-list .delete-log-btn { background: #ff4d4d; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-weight: bold; line-height: 24px; text-align: center; }
        #history-modal .empty-history { text-align: center; color: #888; padding: 20px; }