/* style.css */
body { font-family: sans-serif; margin: 2em; }
.container { display: grid; grid-template-columns: max(500px, 40%) 1fr; gap: 2em; }
.form-container {}
.chart-container { position: relative; height: 600px; }
form { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; }
label { text-align: right; }
input, select, textarea { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }
button { grid-column: 2; padding: 10px; background-color: royalblue; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:disabled { background-color: #ccc; }
#status { margin-top: 10px; grid-column: 2; font-style: italic; color: #555; }
.stock-section { grid-column: 1 / -1; margin-top: 1em; margin-bottom: 1em; padding: 1em; border: 1px solid #eee; border-radius: 8px; }
.stock-section h4 { margin-top: 0; margin-bottom: 0.5em; }
#search-results { list-style-type: none; padding: 0; margin-top: 10px; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; border-radius: 4px; }
#search-results li { padding: 8px 12px; cursor: pointer; }
#search-results li:hover { background-color: #f0f0f0; }
#search-results li:not(:last-child) { border-bottom: 1px solid #eee; }
.log-container, .rolling-returns-container, .holdings-container { margin-top: 2em; }
#logTable, #rollingReturnsTable, #holdingsTable { width: 100%; border-collapse: collapse; margin-top: 1em; }
#logTable th, #logTable td, #rollingReturnsTable th, #rollingReturnsTable td, #holdingsTable th, #holdingsTable td { border: 1px solid #ddd; padding: 8px; text-align: left; }
#logTable th, #rollingReturnsTable th, #holdingsTable th { background-color: #f2f2f2; font-size: 0.9em; }
#logTable tr:nth-child(even), #rollingReturnsTable tr:nth-child(even), #holdingsTable tr:nth-child(even) { background-color: #f9f9f9; }
#rollingReturnsSummary { margin-top: 1em; font-weight: bold; }
form hr { grid-column: 1 / -1; border: 0; border-top: 1px solid #ccc; }
.slider-item { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.slider-item span { flex-grow: 1; min-width: 100px; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.slider-item input[type="range"] { width: 100px; flex-shrink: 0; margin: 0; }
.slider-item input[type="number"] { width: 70px; text-align: right; padding-right: 20px; position: relative; flex-shrink: 0; }
.slider-item .percent-sign { position: absolute; right: 15px; pointer-events: none; color: #888; }
.slider-item button { background: none; border: 1px solid #ccc; color: #888; padding: 2px 6px; border-radius: 4px; cursor: pointer; line-height: 1; flex-shrink: 0; }

/* --- [신규] 포트폴리오 액션 버튼 스타일 --- */
.portfolio-actions { display: flex; gap: 10px; margin-top: 1em; }
.portfolio-actions button { grid-column: auto; width: auto; font-size: 0.9em; padding: 6px 12px; }

/* --- [신규] 공유 모달 스타일 --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: white; padding: 20px 30px; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); position: relative; }
.modal-close-btn { position: absolute; top: 10px; right: 15px; font-size: 1.5em; cursor: pointer; color: #888; }
.share-url-container { display: flex; margin-top: 10px; }
.share-url-container input { flex-grow: 1; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.share-url-container button { border-top-left-radius: 0; border-bottom-left-radius: 0; width: auto; }
#qrcode { margin-top: 15px; display: flex; justify-content: center; }