body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 40px auto; max-width: 800px; color: #333; }
.card { border: 1px solid #dfe1e6; padding: 24px; border-radius: 8px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
h2, h3, h4 { color: #172b4d; margin-top: 0; }
label { display: block; margin-top: 12px; font-weight: bold; font-size: 14px; }
input { width: 100%; padding: 10px; margin-top: 6px; border: 2px solid #dfe1e6; border-radius: 4px; box-sizing: border-box; font-size: 14px; }
input:focus { border-color: #4c9aff; outline: none; }
input:disabled { background-color: #f4f5f7; cursor: not-allowed; color: #a5adba; }
button { margin-top: 16px; padding: 10px 16px; background-color: #0052CC; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold; }
button:hover { background-color: #0047B3; }
button:disabled { background-color: #a5adba; cursor: not-allowed; }
pre { background: #f4f5f7; padding: 16px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #dfe1e6; font-family: inherit; font-size: 14px; line-height: 1.5; }
.notice { font-size: 12px; color: #6b778c; margin-top: 4px; }
.header-flex { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; margin-bottom: 8px; }
.header-flex h3, .header-flex h4 { margin: 0; }
.copy-btn { margin-top: 0; background-color: #36B37E; padding: 8px 12px; font-size: 13px; }
.copy-btn:hover { background-color: #2b8e65; }

/* 💡 직관적인 퀵 스위처 토글 버튼 스타일 */
.toggle-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.toggle-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid #dfe1e6; border-radius: 20px; background-color: white; color: #42526e; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; margin-top: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.toggle-btn:hover { background-color: #f4f5f7; }
.toggle-btn.active { background-color: #E6FCFF; color: #0065FF; border-color: #4C9AFF; }
.toggle-btn.add-new-btn { border-style: dashed; color: #5e6c84; background: transparent; box-shadow: none; }
.toggle-btn.add-new-btn:hover { border-style: solid; color: #0052CC; }

/* 💡 버튼 내부의 수정(톱니바퀴) 아이콘 */
.toggle-btn .edit-icon { display: inline-block; padding: 2px 4px; border-radius: 4px; color: #a5adba; font-size: 12px; transition: all 0.2s; margin-left: 4px; }
.toggle-btn .edit-icon:hover { background-color: #dfe1e6; color: #172b4d; }
.toggle-btn.active .edit-icon { color: #4C9AFF; }
.toggle-btn.active .edit-icon:hover { background-color: #B3D4FF; color: #0052CC; }

/* 💡 플로팅 버튼 스타일 */
#help-fab {
    position: fixed; bottom: 30px; right: 30px;
    width: 50px; height: 50px;
    background-color: #0052CC; color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: bold; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.2s; z-index: 999;
}
#help-fab:hover { transform: scale(1.1); background-color: #0047B3; }

/* 💡 모달 배경 스타일 */
.modal {
    display: none; position: fixed; z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
}

/* 💡 모달 박스 스타일 */
.modal-content {
    background-color: white; margin: 10% auto; padding: 0;
    width: 90%; max-width: 500px; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header { padding: 16px 24px; border-bottom: 1px solid #dfe1e6; display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 24px; max-height: 60vh; overflow-y: auto; }
.modal-footer { padding: 12px 24px; border-top: 1px solid #dfe1e6; text-align: right; }
.close-modal { font-size: 28px; font-weight: bold; color: #a5adba; cursor: pointer; }
.close-modal:hover { color: #172b4d; }

.help-list { margin: 0; padding-left: 20px; font-size: 14px; color: #42526e; line-height: 1.8; }
.help-list h4 { color: #0052CC; margin-bottom: 8px; }