:root {
    --dark-bg: #1A1A1A;
    --on-dark: radial-gradient(circle at 60% 30%, #91D372, #35651E);
    --off-dark: radial-gradient(circle at 60% 30%, #343434, #484848);
    --off-dark-shadow: inset 0 0 37px 0 rgb(0,0,0,1), 15px -20px 38px 0 rgb(0,0,0,0.14);
    --red: #FF7676;
    --television-width: 430px;
    --television-height: 420px;
    --television-bgcolor: #585858;
    --television-bgcolor-dark: #7c7c7c;
    --antenna-gradient: linear-gradient(to top, #444 10%, #999 25% 40%, #444 70%, #2224 90%);
    --gutter: 1.5rem;
    --columns: 6;
}

a { text-decoration: none;color: black; }

body { background-color: black;width: 100%; height: 100%; font-family: 'MinGothic','GTAmerica',sans-serif;}
body:before { content: "";top: -10rem;left: -10rem;width: calc(100% + 20rem);height: calc(100% + 20rem);z-index: 9999;position: fixed;background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png");opacity: 0.15;pointer-events: none;-webkit-animation: noise 1s steps(2) infinite;animation: noise 1s steps(2) infinite;}
         
header { mix-blend-mode: difference;z-index:99;transform: rotate(-8deg);margin: 0;padding: 0;width: 100%;display: flex;flex-direction: column;position: fixed;left: 0;top: 0;margin-top: -2rem;margin-left: 2rem; }
.header-menu { margin-left:3rem}
.header-menu ul { display: flex;mix-blend-mode: difference; background: transparent;gap: 2.1rem; }
.header-menu ul li { background: transparent;mix-blend-mode: difference;color: black;}
.header-menu a { font-size: 2.1rem; font-size: 2.1rem;background: transparent; color:white}
.header-logo a { font-size: 8.1rem;background: transparent; color:white;font-family: 'OSSame'; position: relative ; z-index: 100;}
.header-logo { display: flex;mix-blend-mode: difference;background: transparent;}
header a:hover { transition: 0.5s; letter-spacing: 0.3rem; }

@-webkit-keyframes noise {to { transform: translate3d(-7rem,0,0); }}
@keyframes noise {0% { transform: translate3d(0,9rem,0); }10% { transform: translate3d(-1rem,-4rem,0); }20% { transform: translate3d(-8rem,2rem,0); }30% { transform: translate3d(9rem,-9rem,0); }40% { transform: translate3d(-2rem,7rem,0); }50% { transform: translate3d(-9rem,-4rem,0); }60% { transform: translate3d(2rem,6rem,0); }70% { transform: translate3d(7rem,-8rem,0); }80% { transform: translate3d(-9rem,1rem,0); }90% { transform: translate3d(6rem,-5rem,0); }to { transform: translate3d(-7rem,0,0); }}

.toggle { height: 75px; width: 150px; border-radius: 75px;background-color: var(--dark-bg);display: flex;flex-direction: column;justify-content: center;position: relative;cursor: pointer;box-shadow: inset 0 -2.5px 2.5px 0 rgb(0,0,0,0.5);  position: fixed;right: 0; top:0;margin:2.5rem; z-index: 99; }
.switch { height: 56px; width: 56px;border-radius: 50%;  position: absolute; transition: all ease 0.3s; right: 10px; }
.switch-dark { background: var(--on-dark); box-shadow: inset 0 0 9.5px 0 rgb(0,0,0,1); }
.switch.off-dark { transform: translateX(-75px);background: var(--red); box-shadow: var(--off-dark-shadow); }

/* 토글 시에만 애니메이션 적용하기 위한 클래스 */
.switch.animating-left {
    animation: bounce-left 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.switch.animating-right {
    animation: bounce-right 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 툴팁 스타일 */
.toggle-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}

/* 툴팁 화살표 */
.toggle-tooltip:after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}

/* 호버 시 툴팁 표시 */
.toggle:hover .toggle-tooltip {
    opacity: 1;
    visibility: visible;
}

@keyframes bounce-left { 
    0% {transform: translateX(0px);}
    50% {transform: translateX(-85px);}
    70% {transform: translateX(-65px);}
    85% {transform: translateX(-78px);}
    100% {transform: translateX(-75px);}
}
@keyframes bounce-right { 
    0% {transform: translateX(-75px);} 
    50% {transform: translateX(10px);}
    70% {transform: translateX(-5px);}
    85% {transform: translateX(3px);}
    100% {transform: translateX(0);}
}

.works-gallery { position: relative; width: 100%; height: 100vh; }

.tv {width: var(--television-width);height: var(--television-height);display: flex;flex-direction: column;align-items: center;}
.antenna-container {width: 235px;height: 85px;display: flex;flex-direction: column;justify-content: flex-end;}
.antenna {width: 100%;height: 4px;background: var(--antenna-gradient);transform-origin: 100% 50%;transform: rotate(20deg) translateY(3px);z-index: 0;display: flex;align-items: center;}
.antenna::before {content: "";display: block;width: 8px;height: 10px;background: var(--antenna-gradient);border-radius: 24% 53% 53% 24% / 36% 40% 40% 36%;border: 1px solid #444;border-left: 0;border-bottom: 0;transform: translateY(-1px);}
.television-container {display: flex;flex-direction: column;align-items: center;z-index: 1;}
.television {width: 425px;height: 300px;border-radius: 35px / 45px;box-shadow:2px 2px 5px #0004, 2px -2px 2px rgb(181, 181, 181) inset, 2px 1px 1px #fff inset,0 0 3px 5px #0002;background: var(--television-bgcolor);background: linear-gradient(var(--television-bgcolor), var(--television-bgcolor-dark));display: flex;justify-content: center;align-items: center;z-index: 2;}
.television-inner {width: 93%;height: 90%;background: linear-gradient(to bottom, #454c45 5%, #232522 35% 45%);border-bottom: 1px solid #fff;box-shadow: 0 1px 2px #470404 inset;border-radius: 25px / 25px;position: relative;display: grid;grid-template-columns: 3fr 1fr;grid-template-rows: 0.8fr;align-content: center;gap: 3px;}
.television-screen-container {border: 1px solid #222;box-shadow: 0 2px 2px #888, 2px 0 2px #444, -2px 0 2px #444, 0 -2px 2px #111;border-radius: 35px / 25px;margin: 10px;overflow: hidden;display: flex;justify-content: center;align-items: center;background: linear-gradient(70deg, #555 15%, transparent 30%),repeating-conic-gradient(#222 0 30deg, #333 60deg, #222 90deg);}
.television-crt {width: 99%;height: 95%;background: #111;box-shadow: 0 0 5px 2px #111,0 0 10px 2px #1112;border-radius: 85px 85px 85px 85px / 100px 100px 100px 100px;overflow: hidden;display: flex;justify-content: center;align-items: center;}
.television-screen {background: #302d30;width: 95%;height: 95%;border-radius: 30%;box-shadow: 0 0 5px 2px #111 inset;overflow: hidden;position: relative;}
.noise {width: 100%;height: 100%;background: linear-gradient(to bottom, transparent, #aaa4, #8881, #6664, #4445, #2228, #4443, transparent),repeating-linear-gradient(transparent 0 2px, #25242950 2px 4px);animation: moveBand 8s linear infinite;z-index: 4;position: relative;}
.off {width: 100%;height: 100%;background: radial-gradient(#222, #1a1a1a, #111);z-index: 5;position: absolute;top: 0;}
.logo-container {position: absolute;z-index: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
.play {width: 15px;height: 15px;background: #fff;clip-path: polygon(0 0, 100% 50%, 0 100%);}
.text {color: white;}
.tv {
    .text {
        padding:0
    }
}
.television-lateral {display: grid;grid-template-rows: 1.1fr 1fr;gap: 12px;margin: 15px;margin-left: 0;}
.dial-container {border: 2px solid #333;border-left: 1px solid #444;border-bottom: 2px solid #444;border-radius: 5px;box-shadow: -2px 2px 6px #111 inset,-1px 2px 3px #aaa;display: flex;flex-direction: column;justify-content: center;gap: 6px;align-items: center;}
.dial {width: 42px;height: 42px;border: 2px solid #6e706f;border-radius: 50%;box-shadow: -4px 2px 4px #111, 0 0 1px 2px #000;display: flex;justify-content: center;align-items: center;position: relative;cursor: grab;}
.data-container {display: flex;justify-content: center;width: 100%;height: 100%;}
.data {color: #888;font-size: 6px;text-shadow: 0 0 2px #888;position: absolute;top: 0;height: 100%;transform-origin: 50% 50%;}
.dial-core {width: 28px;height: 28px;border-radius: 50%;background: conic-gradient(#eee 0deg 45deg, #666 70deg 285deg, #eee 320deg);position: absolute;}
.selector {position: absolute;width: 75%;background: linear-gradient(#666 30%, #aaa 40%);height: 4px;border: 1px solid #666;border-radius: 4px / 8px;transform: rotate(calc(var(--value) - 90deg));transition: transform 0.25s linear;}
.speaker-container {display: grid;grid-template-columns: repeat(6, 1fr);gap: 1px 0;margin-bottom: 12px;margin-left: 2px;margin-right: 2px;}
.speaker-container div {width: 10px;height: 10px;background: radial-gradient(#000, #222);border-radius: 50%;border-bottom: 1px solid #fff;}
.buttons {position: absolute;bottom: 5px;right: 30px;width: 60px;display: flex;justify-content: space-between;}
.button-container {width: 20px;height: 20px;background: linear-gradient(to bottom, #fff 40%, #aaa 50% 55%, #666 70%);border-radius: 50%;display: flex;justify-content: center;align-items: center;}
.button {width: 10px;height: 10px;border-radius: 50%;background: linear-gradient(to top, #fff 40%, #aaa 50% 55%, #666 70%);box-shadow: -1px -1px 1px 2px #000;transform: translate(2px, 1px);transition: transform 0.1s,box-shadow 0.1s;cursor: pointer;}
.button:active {transform: translate(0, 0);box-shadow: 0 0 1px 2px #000;}
.television-base {width: 350px;height: 25px;background: linear-gradient(var(--television-bgcolor), var(--television-bgcolor-dark));display: flex;justify-content: space-between;align-items: center;box-shadow: 0 8px 4px #0009;}
.television-base::before, .television-base::after {content: "";display: block;width: 8px;height: 100%;background-color: var(--television-bgcolor);background-image: linear-gradient(var(--television-bgcolor), var(--television-bgcolor-dark));transform: translateX(var(--x)) skewX(var(--skew-x));}
.television-base::before {--skew-x: 10deg;--x: -2px;}
.television-base::after {--skew-x: -10deg;--x: 2px;}
.slots {width: 50%;height: 15px;display: flex;justify-content: center;}
.slot {width: 4px;height: 100%;background: #0b0000;margin-left: 3px;border-radius: 2px / 1px;}
.foot-container {width: 70%;display: flex;justify-content: space-between;}
.foot {width: 20px;height: 10px;background: var(--television-bgcolor);}
.foot.left {box-shadow: 4px 0 #414141;}
.foot.right {box-shadow: -4px 0 #888888;}
.tv .off {transition: opacity 0.5s;opacity: 1;}
.tv:not(.on) .off {opacity: 0;}
@keyframes moveBand {0% {background-position-y: 0, 0;}100% {background-position-y: -221px, -150px;}}
.created {background: url(https://assets.codepen.io/154065/internal/avatars/users/default.png),linear-gradient(to bottom, #884ced, #ec1cce);background-size: 75px 75px, cover;background-repeat: no-repeat;position: absolute;top: 0;right: 0;width: 250px;height: 75px;display: flex;flex-direction: column;align-items: center;padding-left: 2em;}
.created a, .created p, .created span {color: #fff;}
.created h2 {font-weight: 700;transform: translate(0, -4px);}
.created a {text-decoration-color: rgba(255,255,255,0.4);}
.created a:hover {color: #e6e82a;}

.works { margin-top:13rem; padding:3rem; width: 100%; height:100%;display: grid; grid-template-columns: 1fr 4fr; gap: 3rem; }
.works-nav {     height: 67vh;top: 21vh;position: sticky;padding: 0 1rem;}
.subheading, .subdescription { color: white; }
.works-con { display: flex; flex-direction: column; gap: 3rem;}
.work-item-desc { width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 1.5rem 0;}
.subdescription { text-align: right;}
.subheading { font-size: 1.7rem; }
.subdescription { font-size: 1.1rem; }
.work-item img { width: 100%; }

.work { color: white; margin-bottom: 13rem;
    .text { padding-top:0 } }
.work-head {  width: 100%;gap: 1.5rem;margin: 3rem auto 11rem;display: grid;grid-template-columns: 1fr 1fr;height: fit-content; position: absolute;align-items: center;top: 46%;}
.grid {--columns: 12;--gutter: 1rem;display: grid;grid-gap: var(--gutter);grid-template-columns: repeat(12, 1fr);}
.grid > .column {margin-bottom: 1.5rem;grid-column: span var(--columns);}
.work-con {max-width:1400px; width: 100%; margin: 0 auto;padding-bottom: 2rem; }
.text { font-size: 1rem;line-height: 1.5;    padding: 3rem; padding-top:27vh }
.work-head-title { font-size: 2.1rem;text-align: right; }
.work-cover { height: 100vh;    margin-bottom: 30vh; }
.work-cover img { width: 100%; height: 100%; object-fit: cover; }
.text-con { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;gap: 3rem; }
.text-cover { height: 100vh;  }
.text-cover img { width: 100%; height: 100%; object-fit: contain; }

.cv {color: white;width: 100%;padding: 0 3rem;margin: 13rem 0;display: grid;grid-template-columns: 1fr 1fr;gap: 3rem}
.cv-left { font-size: 1.2rem; line-height: 1.5; text-align: right; }
.cv-left h1 { font-size: 1.7rem; }
.cv-right {     padding-top: 9rem;line-height: 1.5;font-size: 1rem;display: flex;flex-direction: column;}
.cv-right table { margin-bottom:3rem }
.cv-right td:nth-child(1) { width: 7rem;}

.contact {    color: white;width: 100%;padding: 0 3rem;display: grid;grid-template-columns: 1fr 1fr;gap: 3rem;height: 100vh;align-items: center;}
.contact-form {display: flex;flex-direction: column;max-width: 700px;padding: 20px;background-color: rgba(255, 255, 255, 0.05); /* Slight transparency for contrast */border-radius: 10px;}
.contact-form .form-group { margin-bottom: 20px; }
.contact-form label {display: block;font-size: 18px;color: #fff; margin-bottom: 8px;}
.contact-form input,
.contact-form textarea {width: 100%;padding: 12px;background-color: rgba(0, 0, 0, 0.8); border: none;border-radius: 5px;color: #fff;font-size: 16px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);}
.contact-form input:focus,
.contact-form textarea:focus { outline: none;box-shadow: 0 0 10px #00ff00; }
.contact-form button {padding: 12px 20px;background-color: #00ff00;  border: none;
    border-radius: 5px;font-size: 16px;color: #000;cursor: pointer;transition: background-color 0.3s ease;}
.contact-form button:hover {background-color: #00cc00; /* Slightly darker on hover */}
.contact-form input::placeholder,
.contact-form textarea::placeholder {color: #bbb; }

footer { position: fixed; bottom: 0; right: 0; color:white; margin: 2.5rem;mix-blend-mode: difference;}

@media (orientation:portrait) {
    header { margin-top: 1rem;    margin-left: 1rem; }
    .header-logo a { font-size: 2.1rem; }
    .header-menu a { font-size: 1.2rem; }
    .toggle { transform: scale(0.5) translateX(8rem) translateY(-5rem)}
    .header-menu {
        margin-left: 2rem;
        ul {
            gap: 1rem;
        }
    }

    .works { display: flex;flex-direction: column;padding:1.5rem; margin: 7rem 0; }
    .works-nav { display: none; }
    .work-item-desc { display: flex; flex-direction: column;gap: 0.5rem;}
    .subdescription { text-align: left; font-size: 0.9rem; }
    .text {
        padding: 11rem 2rem;
    }
    .work {
        .text {
            padding: 0;
        }
    }
    .text-con {
        display: flex;
        flex-direction: column;
    }
    
    .subheading {
        font-size: 1.5rem;
    }

    .work-head { display: flex; flex-direction: column; align-items: start; padding: 1.5rem;justify-content: center; height: 40vh; }
    .work-con {     display: flex;flex-direction: column; padding: 0 1.5rem;}

    .contact {         
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 1.5rem;
        height: 100vh;
        justify-content: center;
    }
    .contact-form {
        max-width: unset;
        width: 100%;
    }
    .contact-con { width: 100%;}

    .cv { display: flex; flex-direction: column; gap: 0;padding: 0 1.5rem;}

    footer {    margin: 1.5rem; font-size: 0.8rem;}
}