/* ----------------------------------------------------- Calculator Modal Styling ----------------------------------------------------- */ /* CSS variable definitions */ :root { --calculator-width: 20rem; --display-height: 5rem; --key-height: 3.5rem; --gap-keys: 0.6rem; --gap-display-to-keys: 1.8rem; } /* ----------------------------------------------------- Overlay and Modal Container ----------------------------------------------------- */ #calculatorOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 9999; display: none; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* Active overlay state */ #calculatorOverlay.active { opacity: 1; pointer-events: auto; background-color: rgba(0, 0, 0, 0.5); } /* Calculator modal window (container) */ #calculatorModal { position: absolute; z-index: 10000; padding: 4rem 1rem 1rem 1rem; border-radius: 16px; background-color: var(--modal-bg); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); border: 1px solid var(--modal-border); backdrop-filter: blur(12px); pointer-events: auto; width: fit-content; max-width: 90vw; white-space: normal; cursor: grab; } /* ----------------------------------------------------- Close button ----------------------------------------------------- */ #calculatorModal .close-btn { all: unset; position: absolute; top: 12px; right: 6px; width: 28px; height: 28px; background: var(--close-btn-bg); color: white; border-radius: 50%; font-size: 16px; text-align: center; cursor: pointer; transition: background-color 0.2s ease; } #calculatorModal .close-btn:hover { background: var(--close-btn-hover-bg); } /* Calculator body (actual calculator area including buttons and display) */ #calculatorOverlay .calculator { width: var(--calculator-width); display: flex; flex-direction: column; gap: var(--gap-display-to-keys); background-color: #0E2211; transition: opacity 0.01; border-radius: 12px; padding: 1rem; /* backdrop-filter: blur(12px);*/ border-right: 1px solid rgba(255, 255, 255, 0.4); /* 위쪽 – 흰색 */ border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* 왼쪽 – 흰색 */ border-left: 1px solid rgba(0, 0, 0, 0.8); /* 오른쪽 – 검은색 */ border-top: 1px solid rgba(0, 0, 0, 0.8); /* 아래쪽 – 검은색 */ } /* Calculator display */ #calculatorOverlay .display { transition: opacity 0.3s ease; height: var(--display-height); background: rgba(0, 0, 0, 0.6); color: #e0e0e0; font-family: 'DS-Digital', sans-serif; font-size: 3rem; padding: 0.25rem 0.5rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.5); text-align: right; direction: ltr; white-space: nowrap; overflow-x: auto; /* Allow horizontal scrolling to see hidden content */ overflow-y: hidden; /* Keep vertical overflow hidden */ text-overflow: clip; scrollbar-width: none; /* Hide scrollbar for Firefox */ -ms-overflow-style: none; /* Hide scrollbar for IE 10+ */ user-select: text; /* Allow text selection */ -webkit-user-select: text; /* Safari support */ -moz-user-select: text; /* Firefox support */ -ms-user-select: text; /* IE/Edge support */ cursor: text; /* Change mouse cursor to text selection */ pointer-events: auto; /* Allow events on the display itself */ } #calculatorOverlay .display::-webkit-scrollbar { display: none; /* Hide scrollbar for Chrome, Safari */ } /* Button grid container */ #calculatorOverlay .keys { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: var(--key-height); gap: var(--gap-keys); } /* Base style for all buttons */ #calculatorOverlay button { border-radius: 10px; font-size: 1.4rem; color: #BFBFBF; padding: 0.375rem 0; font-weight: normal; cursor: pointer; /* border: 1px solid rgba(255, 255, 255, 0.25);*/ border-top: 1px solid rgba(255, 255, 255, 0.5); /* 위쪽 – 흰색 */ border-left: 1px solid rgba(255, 255, 255, 0.5); /* 왼쪽 – 흰색 */ border-right: 1px solid rgba(0, 0, 0, 0.8); /* 오른쪽 – 검은색 */ border-bottom: 1px solid rgba(0, 0, 0, 0.8); /* 아래쪽 – 검은색 */ background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); transition: all 0.1s ease-in-out; } /* Specific button group color overrides */ #calculatorOverlay .control.ac { background: rgba(255, 0, 0, 0.5); } #calculatorOverlay .control.enter { background: rgba(0, 128, 0, 0.4); } #calculatorOverlay .control { background: rgba(85, 85, 85, 0.35); } #calculatorOverlay .operator-button, #calculatorOverlay .number { font-size: 1.8rem; } #calculatorOverlay .operator-button { background: rgba(136, 136, 136, 0.5); } #calculatorOverlay .number { background: rgba(200, 200, 200, 0.45); } /* Visual feedback when button is pressed */ #calculatorOverlay .oerator-button:active, #calculatorOverlay .number:active, #calculatorOverlay .number.pressed, #calculatorOverlay .oerator-button.pressed { transform: scale(0.97) translate(2px, 2px); /* 크기 축소 + 오른쪽 아래 이동 */ color: white !important; box-shadow: inset 2px 0 2px rgba(0, 0, 0, 0.3), /* 왼쪽 그림자 */ inset 0 2px 2px rgba(0, 0, 0, 0.3); /* 위쪽 그림자 */ } #calculatorOverlay button:active, #calculatorOverlay button.pressed { transform: scale(0.97) translate(2px, 2px); /* 크기 축소 + 오른쪽 아래 이동 */ color: white !important; border-right: 1px solid rgba(255, 255, 255, 0.5); /* 위쪽 – 흰색 */ border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 왼쪽 – 흰색 */ border-left: 1px solid rgba(0, 0, 0, 0.8); /* 오른쪽 – 검은색 */ border-top: 1px solid rgba(0, 0, 0, 0.8); /* 아래쪽 – 검은색 */ box-shadow: inset 2px 0 2px rgba(0, 0, 0, 0.3), /* 왼쪽 그림자 */ inset 0 2px 2px rgba(0, 0, 0, 0.3); /* 위쪽 그림자 */ } /* Layout related */ #calculatorOverlay .span-2 { grid-column: span 2; }