* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #5a5ce0 0%, #4a2e7a 100%);
    height: 100vh;
    width: 100vw;  /* 120vw → 100vw로 수정 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
}

/* ===== CSS 변수 정의 ===== */
:root {
    /* 메인 컨테이너 위치 조절 변수 */
    --main-container-x: 0px;      /* 가로 위치: 0=중앙 */
    --main-container-y: 0px;      /* 세로 위치: 0=중앙 */
    --main-container-scale: 0.8rem
    ;    /* 크기 조절: 1=100%, 0.5=50%, 2=200% */
    
    /* ===== 계산기 버튼 글자 크기 조절 변수 ===== */
    --button-font-size: 5rem;   /* 버튼 메인 글자 크기 (기본값) */
    --button-shortcut-size: 0.6rem; /* 버튼 서브 글자 크기 (ESC, Enter 등) */
    
    /* ===== 메모리 버튼 크기 조절 변수 ===== */
    --memory-button-width: 10px;     /* 메모리 버튼 가로 크기 */
    --memory-button-height: 30px;     /* 메모리 버튼 세로 크기 (60px → 50px) */
    --memory-button-font: 0.8rem;       /* 메모리 버튼 글자 크기 (1rem → 0.8rem) */
    --memory-button-sub-font: 0rem; /* 메모리 버튼 서브 글자 크기 (0.6rem → 0.5rem) */
    
    /* ===== 메모리 버튼 간격 조절 변수 ===== */
    --memory-button-gap: 3px;        /* 메모리 버튼 사이 간격 */
    --memory-button-margin: 3px;     /* 메모리 버튼 그룹 마진 */
    
    /* ===== 메모리 섹션 크기 조절 변수 ===== */
    --memory-section-height: 25%;    /* 메모리 섹션 높이 (50% → 55%) */
    --memory-panel-padding: 8px;     /* 메모리 패널 내부 패딩 */
    --memory-led-gap: 4px;           /* LED 디스플레이 간격 (3px → 1px) */
    --memory-led-height: 60px;      /* LED 디스플레이 높이 */
    
    /* ===== 메모리 LED 아이템 패딩 조절 변수 ===== */
    --memory-led-padding: 6px 8px;   /* LED 아이템 내부 패딩 */
    --memory-led-item-gap: 2px;     /* LED 아이템 내부 요소 간격 */
    
    /* ===== 계산기 버튼 간격 조절 변수 ===== */
    --button-gap: 0px;               /* 버튼 사이 간격 (가로+세로) */
    --button-row-gap: 4px;           /* 버튼 세로 간격만 */
    --button-column-gap: 8px;        /* 버튼 가로 간격만 */
    
    /* ===== 등호 버튼 크기 조절 변수 ===== */
    --equals-button-rows: 2.5;   /* 등호 버튼이 차지할 행 수 (명확한 값으로 테스트) */
}

/* ===== 메인 컨테이너 (전체 레이아웃) ===== */
.main-container {
    /* 플렉스박스 레이아웃 설정 */
    display: flex;              /* 플렉스 컨테이너로 설정 */
    flex-direction: column;     /* 세로 방향으로 배치 (위아래) */
    gap: 8px;                   /* 자식 요소들 사이 간격 */
    
    /* 크기 설정 */
    width: 100vw;               /* 뷰포트 너비의 100% 사용 */
    height: calc(100vw * 844 / 390); /* 390:844 비율로 높이 자동 계산 */
    max-width: 390px;           /* 최대 너비 제한 (iPhone 12 Pro 기준) */
    max-height: 844px;          /* 최대 높이 제한 (iPhone 12 Pro 기준) */
    aspect-ratio: 390/844;      /* 비율 강제 고정 (모든 브라우저에서) */
    
    /* 위치 및 변형 */
    position: relative;          /* 상대 위치 (자식 요소 기준점) */
    transform: scale(var(--main-container-scale)) translate(var(--main-container-x), var(--main-container-y)); /* 크기 조절 + 위치 이동 */
    transform-origin: center;   /* 변형 기준점을 중앙으로 */
    
    /* 레이아웃 제어 */
    flex-shrink: 0;             /* 축소 방지 */
    box-sizing: border-box;     /* 패딩/보더를 크기에 포함 */
    overflow: hidden;           /* 넘치는 내용 숨김 */
    padding: 5px;               /* 내부 여백 */
    
    /* ===== 가이드 테두리 - 나중에 삭제할 것 ===== */
  
    /* ===== 가이드 테두리 끝 ===== */
}

/* ===== 계산기 섹션 (상단 영역) ===== */
.calculator-section {
    /* ===== 세로 크기 조절: 여기서 직접 수정하세요 ===== */
    flex: 0 0 75%;              /* 세로 크기: 75%=75%, 70%=70%, 80%=80% 등 */
    /* ===================================================== */
    
    /* 플렉스 컨테이너 설정 */
    display: flex;              /* 내부 요소들을 플렉스로 배치 */
    justify-content: center;    /* 가로 중앙 정렬 */
    align-items: center;        /* 세로 중앙 정렬 */
    
    /* 크기 제한 */
    min-height: 0;              /* 최소 높이 제한 (플렉스 아이템 축소 허용) */
    overflow: hidden;           /* 넘치는 내용 숨김 */
    
    /* ===== 가이드 테두리 - 나중에 삭제할 것 ===== */

    /* ===== 가이드 테두리 끝 ===== */
}

/* ===== 계산기 패널 (글래스모피즘 디자인) ===== */
.calculator {
    /* 글래스모피즘 배경 효과 */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15)); /* 반투명 그라데이션 */
    backdrop-filter: blur(15px); /* 배경 블러 효과 (글래스 효과) */
    border-radius: 5px;         /* 둥근 모서리 */
    
    /* 내부 여백 */
    padding: 10px;               /* 내부 패딩 (버튼과 디스플레이 사이 간격) */
    
    /* 그림자 효과 (깊이감) */
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.2),    /* 외부 그림자 (떠있는 효과) */
        0 5px 10px rgba(0, 0, 0, 0.1),     /* 가까운 그림자 */
        inset 0 2px 0 rgba(255, 255, 255, 0.4); /* 내부 하이라이트 (빛 반사 효과) */
    
    /* 테두리 */
   
    
    /* 크기 설정 */
    width: 200%;                 /* 부모의 200% 너비 (scale 0.5와 함께 사용) */
    height: 200%;                /* 부모의 200% 높이 */
    max-width: 200%;             /* 최대 너비 제한 */
    max-height: 200%;            /* 최대 높이 제한 */
    scale: 0.5;                  /* 50% 크기로 축소 (실제 크기는 100%) */
    
    /* 레이아웃 제어 */
    flex-shrink: 0;              /* 축소 방지 */
    box-sizing: border-box;      /* 패딩/보더를 크기에 포함 */
    position: relative;          /* 상대 위치 (자식 요소 기준점) */
    overflow: hidden;            /* 넘치는 내용 숨김 */
}

.calculator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 25px;
    pointer-events: none;
}

/* ===== 메모리 섹션 (하단 영역) ===== */
.memory-section {
    /* ===== 세로 크기 조절: 여기서 직접 수정하세요 ===== */
    flex: 0 0 20%;              /* 세로 크기: 25%=25%, 30%=30%, 20%=20% 등 */
    /* ===================================================== */
    
    /* 플렉스 컨테이너 설정 */
    position: relative;         /* 단축키 안내 absolute 위치 기준 */
    display: flex;              /* 내부 요소들을 플렉스로 배치 */
    justify-content: center;    /* 가로 중앙 정렬 */
    align-items: center;        /* 세로 중앙 정렬 */
    
    /* 크기 제한 */
    min-height: 0;              /* 최소 높이 제한 (플렉스 아이템 축소 허용) */
    
    /* ===== 크기 조절: 여기서 직접 수정하세요 ===== */
    width: 100%;                /* 가로 크기: 100%=전체, 120%=120%, 150%=150% */
    scale: 1;                /* 전체 크기: 1=100%, 0.9=90%, 1.1=110% */
    /* ================================================= */
    
    /* ===== 위치 조절: 여기서 직접 수정하세요 ===== */
    margin-left: 0px;           /* 좌우 위치: -50px=왼쪽, 0px=중앙, 50px=오른쪽 */
    margin-top: 0px;            /* 상하 위치: -20px=위, 0px=중앙, 20px=아래 */
    /* ================================================= */
    
    overflow: visible;          /* 단축키 안내가 보이도록 변경 */
    
    /* ===== 가이드 테두리 - 나중에 삭제할 것 ===== */
     /* 파란색 테두리로 메모리 섹션 위치 확인 */
    /* ===== 가이드 테두리 끝 ===== */
}


.memory-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 2px;
    padding: var(--memory-panel-padding);  /* CSS 변수로 패딩 조절 */
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
    
    /* ===== 크기 조절: 여기서 직접 수정하세요 ===== */
    width: 100%;            /* 가로 크기: 100%=전체, 90%=90%, 80%=80% 등 */
    height: 100%;           /* 세로 크기: 100%=전체, 90%=90%, auto=자동 */
    /* ============================================= */
    
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.6s ease-out;
    box-sizing: border-box;
    overflow: visible;     /* 단축키 안내가 잘리지 않도록 */
    flex-shrink: 0;
}

.display {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    border-radius: 2px;            /* 둥근 모서리 줄임 */
    padding: 20px;                   /* 충분한 패딩 */
    padding-right: 1.5rem;           /* 오른쪽 패딩 */
    margin-bottom: 20px;             /* 하단 마진 */
    text-align: right;               /* 오른쪽 정렬 */
    min-height: 80px;                /* 충분한 높이 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border-radius: 20px;
    pointer-events: none;
}

.previous-operand {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin-bottom: 5px;
    min-height: 1.2rem;
}

.current-operand {
    color: rgba(255, 255, 255, 0.9);
    font-size: 5rem;
    font-weight: 600;
    word-wrap: break-word;
    word-break: break-all;
    max-width: 100%;
    overflow: hidden;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    box-sizing: border-box;
    transform-origin: right center;
}

/* 숫자 길이에 따른 동적 폰트 크기 조정 */
.current-operand.long-number {
    font-size: 3rem;
}

.current-operand.very-long-number {
    font-size: 2rem;
}

.current-operand.extremely-long-number {
    font-size: 1rem;
}

.current-operand.super-long-number {
    font-size: 3rem;
}

/* 극도로 긴 숫자를 위한 추가 클래스들 */
.current-operand.ultra-long-number {
    font-size: 0.8rem;
}

.current-operand.extreme-number {
    font-size: 0.6rem;
}

.current-operand.minimal-number {
    font-size: 0.5rem;
}

/* ===== 버튼 그리드 레이아웃 (노란색 영역 전체 활용) ===== */
.buttons {
    display: grid;                  /* 그리드 레이아웃 사용 */
    grid-template-columns: repeat(4, 1fr); /* 4열 균등 분할 */
    gap: var(--button-gap);         /* CSS 변수로 버튼 사이 간격 조절 */
    row-gap: var(--button-row-gap); /* CSS 변수로 세로 간격만 조절 */
    column-gap: var(--button-column-gap); /* CSS 변수로 가로 간격만 조절 */
    padding: 1px;                  /* 그리드 내부 패딩 */
    height: 87%;                   /* 부모 컨테이너 높이 전체 사용 */
    width: 100%;                    /* 부모 컨테이너 너비 전체 사용 */
}

/* ===== 기본 버튼 스타일 (작은 화면에 최적화) ===== */
.btn {
    /* 글래스모피즘 배경 */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
    backdrop-filter: blur(10px);    /* 배경 블러 효과 */
    border: 1px solid rgba(255, 255, 255, 0.25); /* 반투명 테두리 */
    
    /* 모양과 크기 (노란색 영역 전체 활용) */
    border-radius: 12px;            /* 둥근 모서리 */
    min-height: 25;               /* 충분한 높이로 노란색 영역 활용 */
    width: 100%;                    /* 그리드 셀에 맞게 너비 */
    height: 80%;                   /* 그리드 셀 높이 전체 사용 */
    
    /* 텍스트 스타일 (가독성 확보) */
    color: rgba(255, 255, 255, 0.95); /* 반투명 흰색 텍스트 */
    font-size: var(--button-font-size); /* CSS 변수로 글자 크기 조절 */
    font-weight: 600;              /* 굵은 글씨 */
    
    /* 상호작용 */
    cursor: pointer;                /* 마우스 포인터 */
    transition: all 0.2s ease;     /* 부드러운 전환 효과 */
    
    /* 그림자 효과 (가벼운 그림자) */
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),    /* 가벼운 외부 그림자 */
        inset 0 1px 0 rgba(255, 255, 255, 0.3); /* 내부 하이라이트 */
    
    /* 플렉스 레이아웃 */
    display: flex;                  /* 플렉스 컨테이너 */
    flex-direction: column;         /* 세로 방향 배치 (메인 텍스트 + 서브 텍스트) */
    align-items: center;            /* 가로 중앙 정렬 */
    justify-content: center;        /* 세로 중앙 정렬 */
    
    /* 레이아웃 */
    position: relative;              /* 상대 위치 (호버 효과용) */
    overflow: hidden;               /* 넘치는 내용 숨김 */
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
    transform: translateY(-3px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn:hover::before {
    opacity: 1;
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-number {
    background: rgba(255, 255, 255, 0.15);
}

.btn-number:hover {
    background: rgba(255, 255, 255, 0.25);
}

.btn-operator {
    background: linear-gradient(145deg, rgba(255, 200, 0, 0.4), rgba(255, 150, 0, 0.2));
    color: #fff;
    font-weight: 600;
    border-color: rgba(255, 200, 0, 0.3);
}

.btn-operator:hover {
    background: linear-gradient(145deg, rgba(255, 200, 0, 0.6), rgba(255, 150, 0, 0.4));
    border-color: rgba(255, 200, 0, 0.5);
}

.btn-equals {
    background: linear-gradient(145deg, #34d399, #059669);
    color: #fff;
    grid-row: span 2;              /* 2행 차지 */
    font-weight: 600;
    border-color: rgba(52, 211, 153, 0.3);
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(52, 211, 153, 0.2);
}

.btn-equals:hover {
    background: linear-gradient(145deg, #10b981, #047857);
    transform: translateY(-3px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 30px rgba(52, 211, 153, 0.4);
    border-color: rgba(52, 211, 153, 0.5);
}

.btn-clear {
    background: linear-gradient(145deg, rgba(220, 53, 69, 0.4), rgba(180, 43, 59, 0.2));
    border-color: rgba(220, 53, 69, 0.3);
}

.btn-clear:hover {
    background: linear-gradient(145deg, rgba(220, 53, 69, 0.6), rgba(180, 43, 59, 0.4));
    border-color: rgba(220, 53, 69, 0.5);
}

.btn-zero {
    grid-column: span 2;
}

/* 버튼 내부 텍스트 스타일 */
.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ===== 버튼 내부 텍스트 스타일 (CSS 변수 사용) ===== */
.btn-main {
    font-size: var(--button-font-size); /* CSS 변수로 메인 글자 크기 조절 */
    font-weight: 500;                   /* 중간 굵기 */
    line-height: 1;                     /* 줄 간격 */
}

.btn-shortcut {
    font-size: var(--button-shortcut-size); /* CSS 변수로 서브 글자 크기 조절 */
    font-weight: 300;                   /* 얇은 글씨 */
    opacity: 0.6;                       /* 반투명 효과 */
    position: absolute;                 /* 절대 위치 */
    bottom: 4px;                        /* 하단에서 4px */
    right: 6px;                         /* 우측에서 6px */
    line-height: 1;                     /* 줄 간격 */
}

/* 단축키가 없는 버튼들 */
.btn:not(.btn-clear):not(.btn-equals) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 메모리 기능 설명 */
.memory-description {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

.memory-description p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 300;
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 15px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 메모리 패널 헤더 */
.memory-panel-header {
    text-align: center;
    margin-bottom: 10px;  /* 마진 줄임 (20px → 10px) */
    flex-shrink: 0;
}

.memory-panel-header h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 8px 0;
    opacity: 0.9;
}

.memory-panel-header .memory-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 300;
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}




.shortcut-row {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.shortcut-key {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.6rem;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 20px;
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* 메모리 버튼 컨테이너 */
.memory-buttons, .memory-recall-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 5개 → 4개로 변경 */
    gap: var(--memory-button-gap);  /* CSS 변수로 간격 조절 */
    margin-bottom: var(--memory-button-margin);  /* CSS 변수로 마진 조절 */
    flex-shrink: 0;
}

/* 메모리 저장 버튼 */
.btn-memory {
    background: rgba(100, 200, 255, 0.25);
    height: var(--memory-button-height);  /* CSS 변수로 높이 조절 */
    font-size: 1rem;
}

.btn-memory:hover {
    background: rgba(100, 200, 255, 0.4);
}

/* 메모리 불러오기 버튼 */
.btn-memory-recall {
    background: rgba(255, 150, 150, 0.25);
    height: var(--memory-button-height);  /* CSS 변수로 높이 조절 */
    font-size: 1rem;
}

.btn-memory-recall:hover {
    background: rgba(255, 150, 150, 0.4);
}

/* ===== 메모리 버튼 내부 텍스트 (CSS 변수 사용) ===== */
.btn-memory .btn-main,
.btn-memory-recall .btn-main {
    font-size: var(--memory-button-font);       /* CSS 변수로 메인 글자 크기 조절 */
    font-weight: 500;
}

.btn-memory .btn-shortcut,
.btn-memory-recall .btn-shortcut {
    font-size: var(--memory-button-sub-font);   /* CSS 변수로 서브 글자 크기 조절 */
    font-weight: 300;
    opacity: 0.7;
    margin-top: 1px;
}

/* 모바일 미디어 쿼리 제거 - 웹 버전 우선 */

/* 모바일 미디어 쿼리 제거 - 웹 버전 우선 */

/* 모바일 미디어 쿼리 제거 - 웹 버전 우선 */

/* 모바일 미디어 쿼리 제거 - 웹 버전 우선 */

/* 툴팁 스타일 */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* 메모리 값 미리보기 */
.memory-value:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 4rem;
    padding: 2px 4px;
    transition: all 0.2s ease;
    
}

/* 애니메이션 효과 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calculator {
    animation: fadeIn 0.6s ease-out;
}

/* 버튼 클릭 애니메이션 */
@keyframes buttonPress {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.btn.pressed {
    animation: buttonPress 0.1s ease;
}

/* LED 스타일 메모리 표시 */
.memory-led-display {
    display: grid;                  /* 그리드 레이아웃으로 변경 */
    grid-template-columns: repeat(2, 1fr);  /* 2열 그리드 */
    grid-template-rows: repeat(2, 1fr);     /* 2행 그리드 */
    gap: var(--memory-led-gap);  /* CSS 변수로 간격 조절 */
    margin-top: auto;
    padding: 5px;  /* 패딩 줄임 (12px → 8px) */
    background: rgba(0, 0, 0, 0.3);  /* 배경 더 진하게 */
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);  /* 테두리 더 진하게 */
    flex: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5rem;  /* 3rem → 0.5rem (단축키 안내 공간 확보) */
    min-height: 5rem;  /* CSS 변수로 높이 조절 */
    max-height: 5rem;  /* CSS 변수로 높이 조절 */
    overflow: visible;  /* 오버플로우 보이게 */
    box-sizing: border-box;
}

.memory-status-title {
    color: white;
    font-size: 0.7rem;
    font-weight: 200;
    margin: 0 0 10px 0;
    text-align: center;
    opacity: 0.9;
}

.memory-led-item {
    display: flex;
    align-items: center;
    gap: var(--memory-led-item-gap);  /* CSS 변수로 내부 요소 간격 조절 */
    padding: var(--memory-led-padding);  /* CSS 변수로 패딩 조절 */
    background: rgba(255, 255, 255, 0.1);  /* 배경 더 진하게 */
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);  /* 테두리 더 진하게 */
    transition: all 0.3s ease;
    min-height: 30px;  /* 높이 늘림 (25px → 30px) */
    max-height: 35px;  /* 높이 늘림 (30px → 35px) */
    box-sizing: border-box;
    overflow: visible;  /* 오버플로우 보이게 */
}

.memory-led-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(3px);
}

/* LED 인디케이터 */
.led-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    box-shadow: 0 0 0 rgba(23, 162, 184, 0);
    flex-shrink: 0;
}

.led-indicator.active {
    background: radial-gradient(circle at center, #00f6ff, #0077ff);
    border-color: #00f6ff;
    box-shadow: 0 0 6px #00f6ff, 0 0 12px rgba(0, 246, 255, 0.4);
    animation: ledPulse 2s infinite;
}

.memory-value {
    color: white;
    font-size: 0.48rem;
    font-weight: 500;
    text-align: right;
    flex: 1;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memory-value.empty {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

/* 단축키 안내 */
.shortcut-guide {
    position: absolute;
    
    /* ===== 위치 조절: 여기서 직접 수정하세요 ===== */
    bottom: -60%;               /* 상하 위치: 0%=최하단, 50%=중앙, 100%=최상단 */
    left: 50%;                /* 좌우 위치: 0%=최좌측, 50%=중앙, 100%=최우측 */
    /* ================================================= */
    
    transform: translateX(-50%);
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 100;
}


.shortcut-guide-content {
    display: flex;
    flex-direction: row;        /* column → row: 가로 배치 */
    gap: 2rem;                /* 간격 조금 늘림 */
    justify-content: center;    /* 가운데 정렬 */
}

.shortcut-row {
    display: flex;
    flex-direction: column;      /* 세로 배치 */
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    gap: 0.3rem;                 /* 라벨과 키 사이 간격 */
    min-width: 120px;            /* 최소 너비 */
}

.shortcut-label {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 800;
    text-align: center;          /* 중앙 정렬 */
}

.shortcut-keys {
    font-size: 1rem;
    font-weight: bold;
    color: #667eea;
    letter-spacing: 5px;
    font-family: 'Courier New', monospace;
    text-align: center;          /* 중앙 정렬 */
}

/* 버전 정보 */
.version-info {
    position: absolute;
    top: 5%;              /* 상단에서 1% */
    right: 20%;            /* 우측에서 2% */
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    z-index: 1000;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

/* 피드백 링크 영역 (독립) */
.feedback-section {
    position: fixed;
    
    /* ===== 위치 조절: 여기서 직접 수정하세요 ===== */
    bottom: 1%;               /* 상하 위치: 0%=최하단, 2%=하단, 50%=중앙 */
    left: 50%;                /* 좌우 위치: 0%=최좌측, 50%=중앙, 100%=최우측 */
    /* ================================================= */
    
    transform: translateX(-50%);
    text-align: center;
    padding: 0.8rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.3);
    z-index: 1000;
}

.feedback-section a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    letter-spacing: 0.5px;
}

.feedback-section a:hover {
    color: #667eea;
    transform: scale(1.05);
}

.feedback-section a:active {
    transform: scale(0.98);
}

.memory-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.35rem;
    font-weight: 500;
    min-width: 16px;
    max-width: 20px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* LED 펄스 애니메이션 */
@keyframes ledPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(23, 162, 184, 0.6);
    }
    50% {
        box-shadow: 0 0 15px rgba(23, 162, 184, 0.8);
    }
}

/* 푸터 스타일 */
.footer {
    display: none;
}

.footer p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 300;
    margin: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer:hover p {
    opacity: 1;
}

/* ===== 모바일 모드 스케일 조절 ===== */
@media (max-width: 480px) {
    /* ===== 스케일 조절: 여기서 직접 수정하세요 ===== */
    .main-container {
        transform: scale(0.8);     /* 모바일 스케일: 1.0=100%, 0.9=90%, 1.1=110% */
        transform-origin: center;  /* 중앙 기준으로 스케일 */
    }
    /* ================================================= */
}