body { background-color: #E5E5E5; color: #121212; font-family: 'Inter', sans-serif; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 80px; }
.page-wrapper { max-width: 1400px; margin: 0 auto; padding: 40px; }
::selection { background-color: #121212; color: #E5E5E5; }
::-moz-selection { background-color: #121212; color: #E5E5E5; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #d1d1d1; }
::-webkit-scrollbar-thumb { background: #121212; }
::-webkit-scrollbar-thumb:hover { background: #333333; }
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(229, 229, 229, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-sizing: border-box; }
.header-container { max-width: 1560px; margin: 0 auto; padding: 20px; display: flex; justify-content: space-between; border-bottom: 1px solid #121212; align-items: center; }
.logo-link { text-decoration: none; color: inherit; margin-right: auto; }
.logo { font-weight: 600; font-size: 16px; letter-spacing: 0.1em; }

.lang-switcher { display: flex; align-items: center; margin-left: 40px; }
.lang-btn { background: none; border: none; padding: 5px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0.1em; font-weight: 400; color: #999999; transition: color 0.3s ease; }
.lang-btn.active { color: #121212; font-weight: 600; }
.lang-btn:hover:not(.active) { opacity: 0.7; }

.filter-controls { display: flex; justify-content: flex-start; gap: 15px; margin: 40px 0; flex-wrap: wrap; }
.filter-btn { background: none; border: 1px solid #c0c0c0; color: #555555; padding: 10px 20px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s ease; }
.filter-btn:hover { background-color: #121212; border-color: #121212; color: #E5E5E5; }
.filter-btn.is-active { background-color: #121212; border-color: #121212; color: #E5E5E5; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }
.case-item { background-color: #222222; color: #E5E5E5; border: 1px solid #121212; overflow: hidden; position: relative; }
.case-item.is-hidden { display: none; }
.case-info { padding: 25px; }
.case-info h3 { margin: 0 0 8px 0; font-size: 1.25em; font-weight: 200; letter-spacing: 0.05em; color: #E5E5E5; }
.case-info p { margin: 0; font-size: 1em; color: #999999; line-height: 1.6; }
.video-placeholder { position: relative; cursor: pointer; overflow: hidden; aspect-ratio: 16 / 9; background-color: #111; }
.video-preview-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.case-item:hover .video-preview-image { transform: scale(1.05); }
.play-icon-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.8); transition: background-color 0.3s, color 0.3s; }
.case-item:hover .play-icon-overlay { background-color: rgba(0, 0, 0, 0.5); color: #fff; }
.play-icon-overlay svg { width: 60px; height: 60px; }
.audio-case { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; }
.case-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.4s ease; }
.case-item:hover .case-background-image { transform: scale(1.05); }
.case-content-overlay { position: relative; z-index: 2; width: 100%; padding: 25px; box-sizing: border-box; background: linear-gradient(to top, rgba(18, 18, 18, 0.95) 0%, rgba(18, 18, 18, 0.7) 40%, transparent 100%); }
.audio-source { display: none; }
.custom-audio-player { display: flex; align-items: center; gap: 15px; width: 100%; margin-top: 20px; }
.play-pause-btn { background: none; border: 1px solid #999999; color: #999999; border-radius: 50%; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s ease; padding: 0; flex-shrink: 0; }
.play-pause-btn:hover { color: #E5E5E5; border-color: #E5E5E5; transform: scale(1.05); }
.play-pause-btn svg { width: 24px; height: 24px; }
.progress-bar-container { width: 100%; }
.progress-bar { background-color: rgba(229, 229, 229, 0.2); height: 5px; width: 100%; cursor: pointer; overflow: hidden; }
.progress { background-color: #E5E5E5; height: 100%; width: 0; transition: width 0.1s linear; }
.time-display { font-size: 0.8em; color: #999999; margin-top: 8px; font-variant-numeric: tabular-nums; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(18, 18, 18, 0.9); backdrop-filter: blur(5px); justify-content: center; align-items: center; }
.modal-content { position: relative; width: 90%; max-width: 1200px; }
.video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.close-btn { position: absolute; top: -45px; right: 0; color: #999999; font-size: 40px; font-weight: normal; cursor: pointer; transition: color 0.2s; }
.close-btn:hover { color: #fff; }
footer { text-align: center; margin-top: 80px; padding-top: 40px; border-top: 1px solid #555555; color: #999999; }
@media (max-width: 768px) { .portfolio-grid { grid-template-columns: 1fr; gap: 50px; } .page-wrapper { padding: 20px; } .audio-case, .video-placeholder { aspect-ratio: 4 / 5; } }
@media (max-width: 768px) { .custom-audio-player { padding-top: 10px; gap: 10px; } .play-pause-btn { width: 54px; height: 54px; } .play-pause-btn svg { width: 30px; height: 30px; } .progress-bar { height: 8px; } .time-display { font-size: 1em; margin-top: 10px; } .video-container--vertical { position: relative; width: 100%; padding-bottom: 137.77%; height: 0; } .video-container--vertical iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }