@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Noto+Sans+KR:wght@400;700;900&display=swap');

:root {
    --primary-color: #00e5ff;
    /* Cyan */
    --secondary-color: #d500f9;
    /* Purple */
    --point-color: #ffea00;
    /* Yellow */
    --correct-color: #00e676;
    --wrong-color: #ff1744;
    --text-color: #ffffff;
    --holo-bg: rgba(10, 15, 30, 0.85);
    --holo-border: 2px solid var(--primary-color);
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--text-color);
    background-color: #050510;
    overflow-y: auto;
}

/* 배경 애니메이션 레이어 */
.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('bg.jpg') no-repeat center center;
    background-size: cover;
    z-index: -2;
    animation: deepSpace 20s infinite alternate ease-in-out;
    transform: scale(1.1);
}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(10, 10, 30, 0.4), rgba(0, 0, 0, 0.9));
    z-index: -1;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

@keyframes deepSpace {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.2) rotate(1deg);
    }
}

/* 기하학적 배경 효과 */
.bg-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    animation: floatShape 15s infinite linear;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.shape-1 {
    width: 150px;
    height: 150px;
    top: 10%;
    left: 10%;
    border: 3px solid rgba(0, 229, 255, 0.5);
    background: transparent;
    border-radius: 20%;
    animation-duration: 20s;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

.shape-2 {
    width: 80px;
    height: 80px;
    top: 60%;
    right: 15%;
    background: rgba(213, 0, 249, 0.3);
    border-radius: 50%;
    animation-duration: 25s;
    animation-delay: -5s;
    box-shadow: 0 0 20px rgba(213, 0, 249, 0.4);
}

.shape-3 {
    width: 120px;
    height: 120px;
    bottom: 20%;
    left: 20%;
    border: 3px solid rgba(255, 234, 0, 0.5);
    background: transparent;
    transform: rotate(45deg);
    animation-duration: 18s;
    animation-delay: -2s;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.3);
}

.shape-4 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 90px solid rgba(0, 229, 255, 0.4);
    top: 30%;
    right: 30%;
    background: none;
    backdrop-filter: none;
    animation-duration: 22s;
    animation-delay: -8s;
    box-shadow: none;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
}

.shape-5 {
    width: 100px;
    height: 20px;
    background: rgba(255, 23, 68, 0.5);
    top: 15%;
    right: 10%;
    transform: rotate(45deg);
    animation-duration: 30s;
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.4);
}

.shape-5::after {
    content: '';
    position: absolute;
    background: inherit;
    width: 100%;
    height: 100%;
    transform: rotate(90deg);
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.4);
}

.shape-6 {
    width: 60px;
    height: 60px;
    bottom: 10%;
    right: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation-duration: 12s;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

@keyframes floatShape {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-50px) rotate(180deg) scale(1.1);
        opacity: 0.9;
    }

    100% {
        transform: translateY(0) rotate(360deg) scale(1);
        opacity: 0.4;
    }
}

/* 메인 컨테이너 - 홀로그램 UI */
.container {
    width: 90%;
    max-width: 580px;
    background: var(--holo-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Chamfered Corners (Cut corners) */
    clip-path: polygon(20px 0, 100% 0,
            100% calc(100% - 20px), calc(100% - 20px) 100%,
            0 100%, 0 20px);

    /* To simulate the border on a clip-path element, we rely on the pseudo-elements or a wrapper. 
       However, since we can't put a border on a clipped element easily, we will use an inset box-shadow 
       on a child or use the ::before element as the border frame if possible, 
       BUT standard practice for "Hologram" cut corners is often using a background image or SVG.
       Here we will try a "fake" border approach using ::before/::after or just simple borders where possible 
       and decorative "brackets" for the corners.
    */

    border: none;
    /* Removed standard border */
    border-radius: 0;
    /* Removed radius */

    box-shadow: none;
    /* Clip-path clips shadow too, so we need a filter drop-shadow potentially or use wrapper */

    display: flex;
    flex-direction: column;
    position: relative;
    padding: 3rem 2rem;
    /* More padding for frame */
    min-height: auto;
    overflow: visible;
    /* Needed for outer decorations */
    transition: all 0.3s ease;
    margin: 20px 0;
    margin-top: 80px;
    color: #fff;
}

/* We need a wrapper or pseudo-element to create the visible border line that follows the cut shape. 
   Simplest "Tech" look is often just corner brackets or straight lines that don't fully close.
   Let's create the "Tech Frame" using ::before and ::after.
*/

/* Top-Left and Top-Right Brackets */
.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;

    /* Using linear-gradients to draw lines */
    background:
        /* Top Horizontal */
        linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 100%) top left / 100% 2px no-repeat,
        /* Bottom Horizontal */
        linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 100%) bottom left / 100% 2px no-repeat,
        /* Left Vertical */
        linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%) top left / 2px 100% no-repeat,
        /* Right Vertical */
        linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%) top right / 2px 100% no-repeat;

    /* MASKING to create the cut effect on the border */
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    /* Actually, standard gradients conform to the box, not the clip-path. 
       Let's use a simpler approach for the border visual: a separate div or just clever positioning.
       Given the complexity, let's switch to "Corner Decorations" style which is very common in Sci-Fi UI.
    */
    background: none;
    /* Reset */
    border: none;
}

/* Re-implementing "Frame" using dedicated absolute positioned elements in HTML might be safer, 
   but let's try to stick to CSS if possible.
   New Strategy: Use ::before/::after for corner accents.
*/

/* Outer Glow Container (simulated via filter) */
.container {
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
}

/* Decorative Corner - Top Left */
.deco-corner-tl {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-top: 2px solid var(--primary-color);
    border-left: 2px solid var(--primary-color);
    box-shadow: -2px -2px 10px var(--primary-color);
    z-index: 10;
}

/* Cut corner cover */
.deco-corner-tl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary-color);
    transform-origin: 0 0;
    transform: rotate(45deg);
    display: none;
    /* Managed via main clip path, just accent here */
}

/* Add specialized borders via background gradients on the container itself? 
   No, let's use the provided reference image logic: 
   - A main distinct border that has cuts.
   - Inner glow.
*/

/* Let's try a full-size pseudo-element that *is* the border, also clipped */
.container::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    z-index: -1;
    background: rgba(0, 0, 0, 0.5);
    clip-path: polygon(20px 0, 100% 0,
            100% calc(100% - 20px), calc(100% - 20px) 100%,
            0 100%, 0 20px);
    pointer-events: none;
}

/* Actual Border Line simulation */
.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: var(--primary-color);
    clip-path: polygon(20px 0, 100% 0,
            100% calc(100% - 20px), calc(100% - 20px) 100%,
            0 100%, 0 20px,
            0 20px,
            /* inner loop to create thickness */
            2px 21px,
            2px calc(100% - 2px),
            calc(100% - 21px) calc(100% - 2px),
            calc(100% - 2px) calc(100% - 21px),
            calc(100% - 2px) 2px,
            21px 2px,
            20px 0);
    opacity: 0.8;
}

/* Additional Tech Decos */
.tech-deco-line {
    position: absolute;
    left: -10px;
    top: 50%;
    width: 4px;
    height: 40px;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
    transform: translateY(-50%);
}

.tech-deco-line.right {
    left: auto;
    right: -10px;
}

/* 화면 전환용 */
.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    animation: slideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
}

.active {
    display: flex;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 텍스트 스타일 */
h1 {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

/* 시작 화면 콘텐츠 스타일 */
.event-badge {
    background: rgba(0, 229, 255, 0.15);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    backdrop-filter: blur(5px);
}

.main-title {
    font-size: 2.8rem;
    line-height: 1.2;
    margin: 0 0 2rem 0;
    background: linear-gradient(to right, #fff, var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
    animation: pulseTitle 3s infinite ease-in-out;
}

@keyframes pulseTitle {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.5));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.8));
        transform: scale(1.02);
    }
}

.info-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.2rem;
    width: 100%;
    margin-bottom: 2rem;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
}

.info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0.5rem 0;
    font-size: 1rem;
    color: #ddd;
}

.info-icon {
    font-size: 1.2rem;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.desc {
    font-size: 1rem;
    color: #b0b0c0;
    margin-bottom: 2rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 버튼 스타일 - 홀로그램 */
.btn-start {
    background: linear-gradient(135deg, var(--primary-color), #2979ff);
    color: #000;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 1rem 3rem;
    border: none;
    /* Chamfered Button */
    clip-path: polygon(15px 0, 100% 0,
            100% calc(100% - 15px), calc(100% - 15px) 100%,
            0 100%, 0 15px);
    border-radius: 0;

    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn-start::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
}

.btn-start:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.8);
    background: linear-gradient(135deg, #2979ff, var(--primary-color));
}

.btn-start:hover::before {
    transform: translateX(100%);
}

.btn-start:active {
    transform: translateY(1px);
}

/* 퀴즈 UI */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 0 10px var(--primary-color);
    width: 0%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.question-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: bold;
    color: var(--point-color);
    margin-bottom: 2rem;
    backdrop-filter: blur(5px);
}

.question-text {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 3.5rem;
    word-break: keep-all;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* OX 버튼 - 홀로그램 */
.ox-buttons {
    display: flex;
    gap: 25px;
    width: 100%;
    justify-content: center;
}

.btn-ox {
    flex: 1;
    max-width: 150px;
    /* Limit size */
    aspect-ratio: 1;
    border: none;
    font-size: 5rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;

    /* Hollow Hexagon/Chamfered Look */
    clip-path: polygon(20% 0, 80% 0,
            100% 20%, 100% 80%,
            80% 100%, 20% 100%,
            0 80%, 0 20%);
    border-radius: 0;

    background: rgba(255, 255, 255, 0.05);
    /* Border simulation involves layout tricks or inset box shadows which don't work with clip-path well 
       Using specific gradients for borders on the background
    */
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

    color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add specialized borders via pseudo element for buttons too? Maybe overkill.
   Let's just toggle active states strongly.
*/

.btn-o {
    border-bottom: 4px solid #2196f3;
    /* Fallback if clip removed */
}

.btn-x {
    border-bottom: 4px solid #f44336;
}

.btn-o:hover {
    color: #fff;
    background: rgba(33, 150, 243, 0.4);
    box-shadow: 0 0 30px rgba(33, 150, 243, 0.6);
    transform: scale(1.1);
    text-shadow: 0 0 20px #2196f3;
}

.btn-x:hover {
    color: #fff;
    background: rgba(244, 67, 54, 0.4);
    box-shadow: 0 0 30px rgba(244, 67, 54, 0.6);
    transform: scale(1.1);
    text-shadow: 0 0 20px #f44336;
}

.btn-ox:active {
    transform: translateY(2px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 결과/랭크 텍스트 */
.score-display {
    font-size: 5rem;
    font-weight: 900;
    background: linear-gradient(to bottom, var(--point-color), var(--correct-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 1rem 0;
    filter: drop-shadow(0 0 10px rgba(0, 230, 118, 0.3));
}

.rank-text {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 3rem;
}

/* 결과 피드백 오버레이 */
.feedback-overlay {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 40%;
    background: rgba(10, 10, 20, 0.95);
    backdrop-filter: blur(15px);
    border-top: 2px solid var(--primary-color);
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    z-index: 100;
    color: white;
    padding: 2rem 1.5rem;
    border-radius: 30px 30px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.feedback-content {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1.5rem;
    text-align: left;
    width: 100%;
}

.feedback-icon {
    font-size: 3rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.text-group {
    flex: 1;
}

.feedback-text {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--point-color);
}

.feedback-rationale {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #ddd;
    background: transparent;
    padding: 0;
    border: none;
    margin-bottom: 0;
}

.btn-next {
    background: var(--primary-color);
    color: #000;
    width: 100%;
    padding: 1.2rem;
    border: none;
    border-radius: 15px;
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
    transition: all 0.2s;
    margin-top: auto;
}

.btn-next:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.5);
}

/* 헤더 및 내비게이션 */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    box-sizing: border-box;
    z-index: 1000;
    background: rgba(5, 5, 16, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-area img {
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.5));
}

.nav-tabs {
    display: flex;
    gap: 15px;
}

.tab-item {
    color: #aaa;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 5px 10px;
    border-radius: 15px;
}

.tab-item.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
    color: var(--primary-color);
}

/* 일정 탭 - 타임라인 스타일 */
.schedule-container {
    width: 100%;
    text-align: left;
    padding: 1rem 0;
}

.schedule-title {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.schedule-location {
    font-size: 1rem;
    color: #aaa;
    text-align: center;
    margin-bottom: 2rem;
    display: block;
}

.timeline {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 10px;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 15px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color);
}

.time {
    font-size: 0.9rem;
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: 4px;
    display: block;
}

.event-name {
    font-size: 1.1rem;
    color: #fff;
}

/* 하이라이트 세션 (퀴즈) */
.timeline-item.highlight {
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 1rem;
    margin-left: -10px;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
    animation: pulseGlow 2s infinite ease-in-out;
}

.timeline-item.highlight::before {
    left: -16px;
    top: 20px;
    background: var(--point-color);
    box-shadow: 0 0 15px var(--point-color);
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 229, 255, 0.5);
    }
}