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

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            overflow-x: hidden;
        }

        .main-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100vw;
            min-height: 100vh;
            justify-content: flex-start;
            position: relative;
        }

        .top-bar {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 1000;
            height: 50px;
            /* 높이 통일 */
        }

        .face-selector,
        .lang-selector {
            display: flex;
            align-items: center;
            position: relative;
        }

        /* 언어 선택기를 동그란 버튼으로 변경 */
        .clock-lang-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.95);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* 크롬 호환성 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: bold;
            position: relative;
            line-height: 1;
            padding: 0;
            vertical-align: middle;
            color: #333;
        }

        .clock-lang-btn span,
        .clock-lang-btn svg,
        .clock-lang-btn img {
            display: block;
            margin: 0 auto;
            line-height: 1;
            font-size: inherit;
        }

        .clock-lang-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* 페이스 버튼 스타일 (이름 표시 포함) */
        .clock-face-btn {
            min-width: 120px;
            height: 50px;
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.95);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            position: relative;
            line-height: 1;
            padding: 0 16px;
            vertical-align: middle;
            color: #333;
        }

        .clock-face-btn .face-icon {
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .clock-face-btn .face-name {
            white-space: nowrap;
            font-size: 0.85rem;
        }

        .clock-face-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* 페이스 드롭다운 스타일 */
        .face-dropdown {
            position: absolute;
            top: 60px;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            display: none;
            z-index: 1001;
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .face-dropdown.show {
            display: block;
        }

        .face-option {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: #333;
        }

        .face-option:last-child {
            border-bottom: none;
        }

        .face-option:hover {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
        }

        .face-option.selected {
            background: rgba(102, 126, 234, 0.15);
            color: #667eea;
            font-weight: bold;
        }

        /* 언어 드롭다운 스타일 */
        .lang-dropdown {
            position: absolute;
            top: 60px;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            display: none;
            z-index: 1001;
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .lang-dropdown.show {
            display: block;
        }

        .lang-option {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: #333;
        }

        .lang-option:last-child {
            border-bottom: none;
        }

        .lang-option:hover {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
        }

        .lang-option.selected {
            background: rgba(102, 126, 234, 0.15);
            color: #667eea;
            font-weight: bold;
        }

        .lang-selector {
            position: relative;
        }

        @media (max-width: 768px) {
            .top-bar {
                top: 15px;
                right: 15px;
                gap: 12px;
                height: 42px;
                /* 모바일에서 높이 통일 */
            }

            /* 모바일: 페이스 버튼 크기 조정 */
            .clock-face-btn {
                min-width: 90px;
                height: 42px;
                padding: 0 10px;
                gap: 5px;
                font-size: 0.75rem;
                border-radius: 21px;
            }

            .clock-face-btn .face-icon {
                font-size: 0.9rem;
            }

            .clock-face-btn .face-name {
                font-size: 0.7rem;
            }

            .clock-lang-btn {
                width: 42px;
                height: 42px;
                font-size: 0.8rem;
                font-weight: bold;
                border-radius: 50%;
            }

            .face-dropdown {
                top: 52px;
                min-width: 180px;
                max-height: 250px;
            }

            .lang-dropdown {
                top: 52px;
                min-width: 180px;
                max-height: 250px;
            }

            .clock-back-btn {
                width: 42px;
                height: 42px;
                font-size: 1.1rem;
                top: 15px;
                left: 15px;
            }

            .clock-pwa-btn {
                top: 15px;
                left: 67px;
                width: 42px;
                height: 42px;
                font-size: 1.1rem;
            }
        }

        .clock-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            min-height: 100vh !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 1;
        }

        /* 아날로그 시계 활성화 시 좌우 클리핑 */
        .clock-area.analog-mode {
            overflow-x: hidden;
        }

        .analog-clock {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border-radius: 50%;
            position: relative;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            width: min(60vw, 60vh, 350px);
            height: min(60vw, 60vh, 350px);
            min-width: 180px;
            min-height: 180px;
            z-index: 2;
            /* 시계가 확실히 보이도록 z-index 설정 */
        }

        /* 시계 컨테이너도 확실히 보이도록 설정 */
        .clock-container {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 !important;
            padding: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        /* 크롬 전용 시계 영역 조정 */
        @supports (-webkit-appearance: none) and (not (-webkit-backdrop-filter: blur(0px))) {
            .clock-area {
                margin-top: 12vh;
                /* 크롬에서 더 많은 상단 여백 */
                min-height: 70vh;
                /* 크롬에서 더 많은 최소 높이 */
                position: relative;
                z-index: 10;
                /* 크롬에서 더 높은 z-index */
            }

            .analog-clock {
                z-index: 11;
                /* 크롬에서 더 높은 z-index */
                position: relative;
                display: block !important;
                /* 크롬에서 강제 표시 */
            }

            .clock-container {
                z-index: 11;
                /* 크롬에서 더 높은 z-index */
                position: relative;
                display: flex !important;
                /* 크롬에서 강제 표시 */
                align-items: center;
                justify-content: center;
            }
        }

        /* 크롬 모바일 전용 조정 */
        @media (max-width: 768px) {
            @supports (-webkit-appearance: none) and (not (-webkit-backdrop-filter: blur(0px))) {
                .clock-area {
                    margin-top: 10vh;
                    /* 크롬 모바일에서 더 많은 상단 여백 */
                    min-height: 75vh;
                    z-index: 10;
                }
            }
        }

        /* 크롬 작은 화면 전용 조정 */
        @media (max-width: 480px) {
            @supports (-webkit-appearance: none) and (not (-webkit-backdrop-filter: blur(0px))) {
                .clock-area {
                    margin-top: 8vh;
                    /* 크롬 작은 화면에서 더 많은 상단 여백 */
                    min-height: 80vh;
                    z-index: 10;
                }
            }
        }

        /* 모바일에서 시계 크기 최적화 */
        @media (max-width: 768px) {
            .clock-area {
                margin-top: 6vh;
                min-height: 70vh;
                justify-content: center;
            }

            .analog-clock {
                width: min(70vw, 70vh, 300px);
                height: min(70vw, 70vh, 300px);
                min-width: 200px;
                min-height: 200px;
            }

            /* 사파리 모바일 전용 조정 */
            @supports (-webkit-appearance: none) {
                .clock-area {
                    margin-top: 8vh;
                    /* 사파리 모바일에서 더 많은 상단 여백 */
                    min-height: 75vh;
                }
            }
        }

        /* 작은 화면에서 시계 크기 추가 조정 */
        @media (max-width: 480px) {
            .clock-area {
                margin-top: 4vh;
                min-height: 75vh;
            }

            .analog-clock {
                width: min(75vw, 75vh, 250px);
                height: min(75vw, 75vh, 250px);
                min-width: 180px;
                min-height: 180px;
            }

            /* 사파리 작은 화면 전용 조정 */
            @supports (-webkit-appearance: none) {
                .clock-area {
                    margin-top: 6vh;
                    /* 사파리 작은 화면에서 더 많은 상단 여백 */
                    min-height: 80vh;
                }
            }

            .top-bar {
                top: 12px;
                right: 12px;
                gap: 10px;
                height: 40px;
                /* 작은 화면에서 높이 통일 */
            }


            .clock-lang-btn {
                width: 40px;
                height: 40px;
                font-size: 0.8rem;
                font-weight: bold;
                border-radius: 50%;
            }

            .clock-back-btn {
                width: 40px;
                height: 40px;
                font-size: 1rem;
                top: 12px;
                left: 12px;
            }

            .clock-pwa-btn {
                top: 12px;
                left: 62px;
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
        }

        /* 🎨 우아한 디스플레이 영역 스타일 - 자연스러운 공간 확보 */
        .display-zone {
            width: 380px !important;
            /* 데스크톱 크기 확장 */
            max-width: 92vw !important;
            /* 여백 확보 */
            min-width: 320px !important;
            /* 최소 크기 확장 */
            margin-top: 3vh !important;
            /* 상단 여백 증가 */
            margin-bottom: 0 !important;
            align-self: center !important;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.15) 100%) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border-radius: 20px !important;
            /* 모서리 둥글기 증가 */
            box-shadow: 0 6px 28px 0 rgba(0, 0, 0, 0.12) !important;
            /* 그림자 강화 */
            border: 1px solid rgba(200, 200, 200, 0.18) !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            min-height: 100px !important;
            /* 높이 확장 */
            height: 100px !important;
            /* 높이 확장 */
            transition: all 0.3s !important;
            /* 애니메이션 시간 증가 */
            z-index: 10 !important;
            position: relative !important;
        }

        /* 크롬 전용(데스크톱) - 더 큰 공간 확보 */
        @supports (-webkit-appearance: none) and (not (-webkit-backdrop-filter: blur(0px))) {
            .display-zone {
                width: 400px !important;
                /* 크롬에서 더 큰 크기 */
                min-width: 340px !important;
                max-width: 90vw !important;
                /* 더 많은 여백 */
                height: 110px !important;
                /* 크롬에서 더 큰 높이 */
                min-height: 110px !important;
                margin-top: 3.5vh !important;
                /* 크롬에서 더 많은 상단 여백 */
            }
        }

        /* 사파리 전용(데스크톱) - 더 큰 공간 확보 */
        @supports (-webkit-appearance: none) and (-webkit-backdrop-filter: blur(0px)) {
            .display-zone {
                width: 390px !important;
                /* 사파리에서 더 큰 크기 */
                min-width: 330px !important;
                max-width: 91vw !important;
                /* 사파리에서 적당한 여백 */
                height: 105px !important;
                /* 사파리에서 더 큰 높이 */
                min-height: 105px !important;
                margin-top: 3.2vh !important;
                /* 사파리에서 더 많은 상단 여백 */
            }
        }

        /* 태블릿(768px 이하) - 중간 크기 */
        @media (max-width: 768px) {
            .display-zone {
                width: 360px !important;
                min-width: 300px !important;
                max-width: 94vw !important;
                height: 90px !important;
                min-height: 90px !important;
                margin-top: 2.8vh !important;
                border-radius: 16px !important;
            }
        }

        /* 모바일(480px 이하) - 배터 테두리보다 큰 크기로 확장 */
        @media (max-width: 480px) {
            .display-zone {
                width: 340px !important;
                /* 모바일에서 크기 확장 */
                min-width: 280px !important;
                /* 최소 크기 확장 */
                max-width: 96vw !important;
                /* 여백 확보 */
                height: 70px !important;
                /* 모바일에서 높이 확장 */
                min-height: 70px !important;
                border-radius: 14px !important;
                margin-top: 2vh !important;
                /* 모바일에서 상단 여백 증가 */
            }
        }

        /* 작은 모바일(360px 이하) - 더 큰 공간 확보 */
        @media (max-width: 360px) {
            .display-zone {
                width: 320px !important;
                min-width: 260px !important;
                max-width: 97vw !important;
                height: 65px !important;
                min-height: 65px !important;
                border-radius: 12px !important;
                margin-top: 1.8vh !important;
            }
        }

        /* 우아한 콘텐츠 영역 스타일 */
        .display-zone .content-placeholder,
        .display-zone .content-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: #e57373;
            background: transparent;
        }

        .clock-numbers {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        .clock-number {
            position: absolute;
            color: white;
            font-size: 1.2em;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            /* 기본 위치를 제거하고 JavaScript에서 완전히 제어 */
            left: 0;
            top: 0;
            width: auto;
            height: auto;
            text-align: center;
        }

        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: bottom;
            border-radius: 4px;
            pointer-events: none;
        }

        .hour-hand {
            background: white;
            z-index: 8;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .minute-hand {
            background: white;
            z-index: 9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .second-hand {
            background: #ff6b6b;
            z-index: 10;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        /* 아날로그 시계 페이스에서만 중심점 표시 */
        .analog-clock:not(.flip-face)::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 11;
        }

        .weather-info {
            position: absolute;
            bottom: 20%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            color: white;
            z-index: 12;
            pointer-events: none;
            opacity: 0.9;
        }

        .weather-icon {
            font-size: 2.5rem;
            margin-bottom: 8px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .weather-temp {
            font-size: 1.2rem;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        .controls {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }

        .control-btn {
            background: rgba(102, 126, 234, 0.1);
            border: none;
            border-radius: 15px;
            padding: 12px 20px;
            font-size: 1rem;
            color: #667eea;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .control-btn:hover {
            background: rgba(102, 126, 234, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .control-btn.active {
            background: #667eea;
            color: white;
        }

        .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .floating-element {
            position: absolute;
            width: 15px;
            height: 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float-element 10s infinite linear;
        }

        .floating-element:nth-child(1) {
            top: 15%;
            left: 15%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 25%;
            right: 20%;
            animation-delay: 3s;
        }

        .floating-element:nth-child(3) {
            bottom: 35%;
            left: 25%;
            animation-delay: 6s;
        }

        .floating-element:nth-child(4) {
            bottom: 25%;
            right: 15%;
            animation-delay: 9s;
        }

        @keyframes float-element {
            0% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .clock-back-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 50%;
            color: #667eea;
            text-decoration: none;
            font-size: 1.3rem;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            backdrop-filter: blur(10px);
        }

        .clock-back-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }


        .clock-pwa-btn {
            position: fixed;
            top: 20px;
            left: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 50%;
            color: #667eea;
            text-decoration: none;
            font-size: 1.3rem;
            font-weight: bold;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            -webkit-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: transparent;
        }

        .clock-pwa-btn:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* PWA 웹앱(standalone) 모드 전용 스타일 */
        @media (display-mode: standalone) {

            /* iOS PWA에서 상태바 영역 회피 */
            .clock-back-btn {
                top: max(50px, calc(env(safe-area-inset-top, 0px) + 20px)) !important;
                left: max(20px, env(safe-area-inset-left, 20px)) !important;
                line-height: 1 !important;
                padding: 0 !important;
            }

            .clock-pwa-btn {
                top: max(50px, calc(env(safe-area-inset-top, 0px) + 20px)) !important;
                left: calc(max(20px, env(safe-area-inset-left, 20px)) + 60px) !important;
                line-height: 1 !important;
                padding: 0 !important;
            }

            /* 우측 상단 바 조정 */
            .top-bar {
                top: max(50px, calc(env(safe-area-inset-top, 0px) + 20px)) !important;
                right: max(20px, env(safe-area-inset-right, 20px)) !important;
            }

            /* 세로 스크롤바 방지 */
            body {
                overflow-y: hidden !important;
                height: 100vh !important;
            }

            .main-flex {
                height: 100vh !important;
                overflow: hidden !important;
            }
        }


        @media (max-width: 768px) {
            .clock-back-btn {
                width: 40px;
                height: 40px;
                font-size: 1.1rem;
                top: 15px;
                left: 15px;
            }

            .clock-pwa-btn {
                top: 15px;
                left: 65px;
                /* 모바일에서도 뒤로 가기 버튼 오른쪽에 배치 */
                width: 40px;
                /* 모바일에서 뒤로가기 버튼과 같은 크기 */
                height: 40px;
                /* 모바일에서 뒤로가기 버튼과 같은 크기 */
                font-size: 1.1rem;
                /* 모바일에서 뒤로가기 버튼과 같은 폰트 크기 */
            }
        }

        /* 안드로이드 터치 최적화 */
        @media (pointer: coarse) {

            button,
            .nav-button,
            .lang-option,
            .face-option {
                min-height: 44px;
                min-width: 44px;
                touch-action: manipulation;
            }

            .clock-back-btn,
            .clock-pwa-btn {
                min-height: 44px;
                min-width: 44px;
                touch-action: manipulation;
            }

            .lang-option,
            .face-option {
                padding: 12px 16px;
                font-size: 16px;
            }
        }

        /* 안드로이드 상태바 대응 */
        @supports (padding: max(0px)) {

            .clock-back-btn,
            .clock-pwa-btn {
                padding-top: max(0px, env(safe-area-inset-top));
                padding-bottom: max(0px, env(safe-area-inset-bottom));
                padding-left: max(0px, env(safe-area-inset-left));
                padding-right: max(0px, env(safe-area-inset-right));
            }

            .top-bar {
                padding-top: max(20px, env(safe-area-inset-top));
                padding-bottom: max(20px, env(safe-area-inset-bottom));
                padding-left: max(20px, env(safe-area-inset-left));
                padding-right: max(20px, env(safe-area-inset-right));
            }

            /* 모바일에서 안전 영역 고려한 조정 */
            @media (max-width: 768px) {

                .clock-back-btn,
                .clock-pwa-btn {
                    top: max(15px, env(safe-area-inset-top) + 5px);
                }

                .top-bar {
                    top: max(15px, env(safe-area-inset-top) + 5px);
                }

                .clock-area {
                    margin-top: max(6vh, env(safe-area-inset-top) + 4vh);
                }
            }

            @media (max-width: 480px) {

                .clock-back-btn,
                .clock-pwa-btn {
                    top: max(12px, env(safe-area-inset-top) + 3px);
                }

                .top-bar {
                    top: max(12px, env(safe-area-inset-top) + 3px);
                }

                .clock-area {
                    margin-top: max(4vh, env(safe-area-inset-top) + 2vh);
                }
            }
        }

        /* 안드로이드 가상 키보드 대응 */
        @media screen and (max-height: 400px) {
            .main-flex {
                min-height: 100vh;
                padding-bottom: 20px;
            }

            .clock-container {
                margin: 10px 0;
            }
        }

        /* 사파리 전용 시계 영역 조정 */
        @supports (-webkit-appearance: none) and (-webkit-backdrop-filter: blur(0px)) {
            .clock-area {
                margin-top: 10vh;
                /* 사파리에서 더 많은 상단 여백 */
                min-height: 65vh;
                /* 사파리에서 더 많은 최소 높이 */
            }
        }

        /* 사파리 모바일 전용 조정 */
        @media (max-width: 768px) {
            @supports (-webkit-appearance: none) and (-webkit-backdrop-filter: blur(0px)) {
                .clock-area {
                    margin-top: 8vh;
                    /* 사파리 모바일에서 더 많은 상단 여백 */
                    min-height: 75vh;
                }
            }
        }

        /* 사파리 작은 화면 전용 조정 */
        @media (max-width: 480px) {
            @supports (-webkit-appearance: none) and (-webkit-backdrop-filter: blur(0px)) {
                .clock-area {
                    margin-top: 6vh;
                    /* 사파리 작은 화면에서 더 많은 상단 여백 */
                    min-height: 80vh;
                }
            }
        }

        /* 시계와 광고 영역이 세로로 딱 붙도록 강제 */
        .clock-container>* {
            margin: 0 !important;
            padding: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        .ad-area {
            margin-top: 0 !important;
        }

        #secure-ad-container {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .ad-area,
        #secure-ad-container,
        #secure-ad-content {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        /* 우아한 간격 영역 스타일 - 새로운 크기에 맞게 조정 */
        .elegant-spacer {
            width: 100%;
            height: 40px;
            /* 데스크톱에서 spacer 높이 증가 */
            min-height: 20px;
            background: transparent;
            pointer-events: none;
        }

        /* 크롬 전용 spacer */
        @supports (-webkit-appearance: none) and (not (-webkit-backdrop-filter: blur(0px))) {
            .elegant-spacer {
                height: 45px;
                /* 크롬에서 더 큰 spacer */
                min-height: 22px;
            }
        }

        /* 사파리 전용 spacer */
        @supports (-webkit-appearance: none) and (-webkit-backdrop-filter: blur(0px)) {
            .elegant-spacer {
                height: 42px;
                /* 사파리에서 더 큰 spacer */
                min-height: 21px;
            }
        }

        @media (max-width: 768px) {
            .elegant-spacer {
                height: 28px;
                /* 태블릿에서 spacer 높이 증가 */
                min-height: 14px;
            }
        }

        @media (max-width: 480px) {
            .elegant-spacer {
                height: 20px;
                /* 모바일에서 spacer 높이 증가 */
                min-height: 10px;
            }
        }

        @media (max-width: 360px) {
            .elegant-spacer {
                height: 16px;
                /* 작은 모바일에서 spacer 높이 */
                min-height: 8px;
            }
        }

        .content-zone {
            width: 100%;
            max-width: 100%;
            min-width: 100%;
            margin: 0 auto;
            padding: 32px 0;
            /* 패딩 증가 */
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 0.0) 100%);
            box-shadow: 0 8px 32px 0 rgba(102, 126, 234, 0.10), 0 1.5px 8px 0 rgba(120, 120, 180, 0.08);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            /* 모서리 둥글기 조정 */
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100px;
            height: 100px;
            position: relative;
            /* 높이 확장 */
            transition: background 0.5s;
        }

        /* 크롬 전용 콘텐츠 박스 */
        @supports (-webkit-appearance: none) and (not (-webkit-backdrop-filter: blur(0px))) {
            .content-zone {
                min-height: 110px;
                height: 110px;
                /* 크롬에서 더 큰 높이 */
                padding: 36px 0;
                /* 크롬에서 더 많은 패딩 */
            }
        }

        /* 사파리 전용 콘텐츠 박스 */
        @supports (-webkit-appearance: none) and (-webkit-backdrop-filter: blur(0px)) {
            .content-zone {
                min-height: 105px;
                height: 105px;
                /* 사파리에서 더 큰 높이 */
                padding: 34px 0;
                /* 사파리에서 더 많은 패딩 */
            }
        }

        /* 태블릿 콘텐츠 박스 */
        @media (max-width: 768px) {
            .content-zone {
                min-height: 90px;
                height: 90px;
                padding: 30px 0;
                border-radius: 16px;
            }
        }

        /* 모바일 콘텐츠 박스 */
        @media (max-width: 480px) {
            .content-zone {
                min-height: 70px;
                height: 70px;
                /* 모바일에서 높이 확장 */
                padding: 24px 0;
                /* 모바일에서 패딩 조정 */
                border-radius: 14px;
            }
        }

        /* 작은 모바일 콘텐츠 박스 */
        @media (max-width: 360px) {
            .content-zone {
                min-height: 65px;
                height: 65px;
                padding: 22px 0;
                border-radius: 12px;
            }
        }

        .elegant-fallback {
            color: rgba(148, 163, 184, 0.8);
            font-size: 1.2rem;
            filter: drop-shadow(0 0 16px rgba(102, 126, 234, 0.13));
            text-shadow: 0 2px 12px rgba(120, 120, 180, 0.13);
            border-radius: 12px;
            background: transparent;
            padding: 0 16px;
            border: none;
        }