*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#f5f5f5;--text-primary:#111;--text-secondary:#444;--border-color:#ccc;--card-bg:#fff;--card-border:#d1d5db;--input-bg:#fff;--input-border:#ccc;--placeholder-color:#6b7280;--header-text:#111;--header-toggle-bg:#e5e7eb;--header-toggle-border:#d1d5db;--note-date-color:#6b7280;--icon-filter:brightness(0);--save-btn-bg:#fff;--save-btn-border:#111;--save-btn-text:#111;--search-bg:#fff;--search-border:#ccc;--color-1:#dc2626;--color-2:#2563eb;--color-3:#7c3aed;--color-4:#ea580c;--color-5:#16a34a}[data-theme=dark]{--bg-primary:#0f0f0f;--text-primary:#f0f0f0;--text-secondary:#aaa;--border-color:#333;--card-bg:#1e2022;--card-border:#ffffff14;--input-bg:#1e2022;--input-border:#333;--placeholder-color:#ffffff80;--header-text:#f0f0f0;--header-toggle-bg:#1a1a1a;--header-toggle-border:#333;--note-date-color:#aaa;--icon-filter:brightness(0) invert(1);--save-btn-bg:#1e2022;--save-btn-border:#555;--save-btn-text:#f0f0f0;--search-bg:#1e2022;--search-border:#333;--color-1:#ff9aa2;--color-2:#b3eaff;--color-3:#e8cfff;--color-4:#ffdac1;--color-5:#c7ceea}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:background-color .3s,color .3s}#root{min-height:100vh}.notesContainer{justify-content:center;width:100%;margin-top:30px;padding-bottom:20px;display:flex}.noteContainer-inside{grid-template-columns:repeat(2,1fr);gap:20px;width:100%;height:auto;min-height:auto;margin-left:20px;margin-right:20px;display:grid}.InputData,.note{box-sizing:border-box;background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;width:100%;height:auto;min-height:250px;padding:20px}.note{text-align:left;flex-direction:column;justify-content:space-between;font-size:1.1rem;display:flex}.InputData{display:flex}.InputData-Content{flex-direction:column;flex-grow:1;display:flex}.InputDataText{resize:none;width:100%;min-height:140px;color:var(--text-primary);background:0 0;border:none;outline:none;font-size:1.1rem}.InputDataText::placeholder{color:var(--placeholder-color);font-size:.9rem}.submit-textColor{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.color-text{cursor:pointer;font-size:1.2rem}.SaveButton{border:1px solid var(--save-btn-border);cursor:pointer;background-color:var(--save-btn-bg);color:var(--save-btn-text);border-radius:10px;padding:8px 15px;font-size:1rem}.note-text-content{word-break:break-word;white-space:pre-wrap;overflow-wrap:break-word;color:var(--text-primary);flex-grow:1;padding:5px 0;font-size:1rem;line-height:1.5}.note-date{color:var(--note-date-color);justify-content:space-between;align-items:center;margin-top:15px;font-size:.85rem;display:flex}.edit-icon{cursor:pointer;width:28px;height:28px;filter:var(--icon-filter);margin-left:50%}.trash-pic{cursor:pointer;width:24px;height:24px;filter:var(--icon-filter)}.saveMessage{color:#22c55e;margin-top:10px;margin-left:10px;font-size:1rem}@media (width<=900px){.noteContainer-inside{grid-template-columns:1fr;justify-items:center}.InputData,.note{max-width:500px}}@media (width<=600px){.notesContainer{margin-top:20px;padding:0 10px}.InputData,.note{width:100%;min-height:220px;padding:15px}.InputDataText{min-height:120px;font-size:1rem}.submit-textColor{flex-wrap:wrap;gap:10px}.SaveButton{width:100%}.note-text-content{font-size:1rem}.note-date{font-size:.8rem}.edit-icon{width:24px;height:24px}.trash-pic{width:22px;height:22px}}@media (width<=400px){.InputData,.note{padding:12px}.InputDataText,.SaveButton{font-size:.9rem}.note-text-content{font-size:.95rem}.note-date{font-size:.75rem}}.main-app-container{text-align:center;border:1px solid var(--border-color);width:47%;height:auto;min-height:90vh;color:var(--text-primary);background-color:var(--bg-primary);border-radius:10px;margin:50px auto;padding-bottom:20px;overflow:visible}.Header-part{justify-content:space-between;align-items:center;margin:20px;display:flex}.Header-part p{color:var(--header-text);font-size:2rem;font-weight:600}.Header-part span{border:1px solid var(--header-toggle-border);cursor:pointer;background-color:var(--header-toggle-bg);border-radius:10px;padding:8px 12px;font-size:1rem}.toggle-image{width:30px;height:30px;display:block}.Search-bar-container{box-sizing:border-box;width:100%;padding:0 20px}.search-container-Inside{border:1px solid var(--search-border);background:var(--search-bg);border-radius:10px;align-items:center;min-height:50px;padding:5px 15px;display:flex}.searchIcon{object-fit:contain;width:22px;height:22px;margin-right:10px}.SearchBar-Input{width:100%;color:var(--text-primary);background:0 0;border:none;outline:none;font-size:1rem}.SearchBar-Input::placeholder{color:var(--placeholder-color)}.noteFlex{box-sizing:border-box;grid-template-columns:repeat(2,1fr);gap:20px;width:100%;padding:20px;display:grid}@media (width<=1024px){.main-app-container{width:70%}}@media (width<=768px){.main-app-container{width:85%;margin:30px auto}.Header-part p{font-size:1.7rem}.Header-part span{font-size:.9rem}.noteFlex{gap:15px}}@media (width<=600px){.main-app-container{width:95%;min-height:auto;margin:15px auto}.Header-part{gap:15px;margin:15px;display:flex}.Header-part p{font-size:1.5rem}.Header-part span{box-sizing:border-box}.Search-bar-container{padding:0 10px}.search-container-Inside{min-height:45px;padding:8px 12px}.SearchBar-Input{font-size:1rem}.searchIcon{width:20px;height:20px}.noteFlex{grid-template-columns:1fr;gap:15px;padding:15px}}@media (width<=400px){.Header-part p{font-size:1.3rem}.Header-part span{padding:8px;font-size:.85rem}.SearchBar-Input{font-size:.9rem}.searchIcon{width:18px;height:18px}}