:root {
    --bg-main: #E4F4F5;
    --header-mint: #75DEE6;
    --timer-purple: #6200AC;        
    --color-btn-passage: rgba(0,43,255,0.58);  /* 지문보기 상태 */
    --color-btn-question: rgba(128,0,255,0.58); /* 문제보기 상태 */
    --color-btn-text: #F0FF7F;
    
    --pause-bg: #5C5C5C;
    --pause-icon: #FEDD58;
    --nav-green: #4D8D63;

    font-family: 'NanumSquareRound', sans-serif;

    /* 창 가로폭 375px 기준 */
    --fs-14: clamp(12px, 3.732vw, 16.4px);
    --fs-16: clamp(14px, 4.266vw, 18.2px);
    --fs-17: clamp(15px, 4.533vw, 19.1px);
    --fs-18: clamp(16px, 4.8vw, 20px);
    --fs-19: clamp(17px, 5.07vw, 21.8px);
    --fs-20: clamp(17.9px, 5.33vw, 22.9px);
    --fs-21: clamp(18px, 5.6vw, 25.5px);
    --fs-28: clamp(20px, 7.47vw, 29.3px);
    --fs-30: clamp(24px, 8vw, 31.4px);
    --fs-33: clamp(26px, 8.8vw, 30px);
    --fs-35: clamp(30px, 9.33vw, 36.6px);
    --fs-40: clamp(30px, 10.67vw, 41.8px);
    --fs-42: clamp(37.6px, 11.2vw, 48.2px);
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0;
    -webkit-tap-highlight-color: transparent; 
}

@keyframes sceneFadeIn {
    from {
        opacity: 0;
        /*transform: translateY(20px); (등장 모션 주었다가 충돌나는 부분이 있어 제거)*/
    }
    to {
        opacity: 1;
        /*transform: translateY(0);*/
    }
}
/* 문항 및 탭 전환용 공통 페이드 효과 */
@keyframes pageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

html, body { 
    background-color: var(--bg-main);
    height: auto !important;
    min-height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    scroll-padding-top: 70px;   
}

/* 로딩 오버레이 스타일 */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease;
}
/* 스피너 스타일 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ffffff;
    border-top: 5px solid #00A7DF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}
.loader-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#app-container { 
    width: 100%; 
    min-height: 100dvh;
    min-width: 320px; 
    display: flex; 
    flex-direction: column; 
    overflow: visible; 
    position: relative;
}

.header { 
    width: 100%; 
    height: 70px; 
    background: var(--header-mint);
    position: fixed;
    top: 0;
    left: 0; 
    z-index: 1000; 
}

/* 문항 번호 박스 */
.idx-group { 
    position: absolute; left: 0; top: 19px; /*27px;*/ 
    width: max-content; 
    min-width: 100px; 
    height: 51px; 
    background: var(--bg-main); border-radius: 0 35px 35px 0; 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 0 8px 0 20px; 
    gap: 15px; 
    box-shadow: none;
}

.idx-group.no-btn {
    padding-right: 27px;
}

.idx-container { margin-bottom: -8px; }

.idx-digit { 
    font-family: 'NanumSquare', sans-serif;
    font-size: clamp(32px, 11.2vw, 42px); 
    font-weight: 800; 
    line-height: 1; 
    color: #000; 
    letter-spacing: -0.05em;
}

.idx-divider, .idx-total { 
    font-family: 'NanumSquare', sans-serif;
    font-size: clamp(16px, 5.33vw, 20px); 
    font-weight: 300; 
    color: #000; 
    letter-spacing: -0.03em;
}

/* 지문/문제 보기 버튼 */
.btn-passage-view { 
    width: 56px; 
    height: 39px; 
    border-radius: 20px; 
    border: none; 
    font-size: 13px; 
    font-weight: 800; 
    line-height: 1.1; 
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease; 
    
    background-color: var(--color-btn-passage);
    color: var(--color-btn-text);
}

.btn-passage-view.is-question {
    background-color: var(--color-btn-question);
    color: var(--color-btn-text);
}

.btn-passage-view:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.passage-btn-wrapper.hidden { display: none !important; }

/* 타이머, 일시정지 */
.header-right-tools { 
    position: absolute; 
    right: 17px; 
    top: 20px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}
.timer-display { 
    font-family: 'NanumSquareRound', sans-serif; 
    color: var(--timer-purple); 
    font-size: clamp(26px, 8.8vw, 33px); 
    font-weight: 800; 
}
.btn-pause-small { 
    width: 30px; 
    height: 30px; 
    background: var(--pause-bg); 
    border-radius: 5px; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 5px; 
    margin-top: -5px; 
}
.pause-icon-bar { 
    width: 5px; 
    height: 18px; 
    background: var(--pause-icon); 
    border-radius: 2px; 
}

.main-wrapper { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    padding-top: 70px; /* fixed 헤더 영역 만큼 간격 띄움 */
    scroll-margin-top: 70px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
    overflow: visible; 
}

/* 레이아웃 여백 보정 */
.left-section { padding: 20px 17px 0; }
.right-section { padding: 20px 17px 0; }

@media screen and (min-width: 700px) {
    .main-wrapper { flex-direction: row !important; }
    /* 가로모드(2열)에서 개별 스크롤을 제거, 브라우저 전체 스크롤을 사용 */
    .left-section { 
        flex: 1; /*1.1;*/ 
        height: auto;
        overflow: visible; 
        border-right: 1px solid rgba(0,0,0,0.05); 
    }
    .right-section { 
        flex: 1; 
        height: auto;
        overflow: visible; 
        display: flex; 
        flex-direction: column; 
    }

    /* 가로모드(2열)에서는 지문/문제 보기 버튼 숨김 */
    .passage-btn-wrapper {
        display: none !important;
    }
    /* 사라진 버튼 자리 여백 보정 */
    .idx-group {
        padding-right: 27px !important;
    }
}

@media screen and (max-width: 699px) { 
    .main-wrapper {
        overflow: visible; 
    }
}

/* 일시정지 오버레이 */
.overlay { 
    position: fixed; 
    top: 70px;          
    left: 0; 
    width: 100%; 
    height: calc(100% - 70px); 
    z-index: 999; 
    background: rgba(228,244,245,0.9); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    touch-action: none;
}

.btn-pause-small {
    width: 30px;
    height: 30px;
    margin-top: -5px; 
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    background-image: url('../images/btn_pause.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
    background-color: transparent; 
}

.btn-pause-small.is-paused {
    background-image: url('../images/btn_play.svg');
}

.pause-char {
    width: 57.33vw; 
    height: 72vw;
    max-width: 220px;
    display: block;
    object-fit: contain; 
    margin-top: -5vh; 
}

/* 일시정지 오버레이 시 콘텐츠 스크롤 방지 */
html.no-scroll, body.no-scroll {
    overflow: hidden !important;
    height: 100dvh;
    touch-action: none; 
    overscroll-behavior: none;
}

/* 화면 전환 페이드 효과 */
.fade-in-scene {
    animation: sceneFadeIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: flex !important; /* hidden 해제와 동시에 확실히 보이게 함 */
}
/* 문제, 탭 전환 페이드 효과 */
.effect-fade-in {
    animation: pageFadeIn 0.5s ease-out forwards;
}

/* 버튼 터치 제스쳐 관련 */
.btn-touch, .grid-item {    
    transition: transform 0.1s ease-out !important;     
    cursor: pointer; 
    -webkit-tap-highlight-color: transparent; 
    -webkit-user-select: none;
    user-select: none;
}

/* 버튼 터치 효과 */
.btn-touch:active, .grid-item:active {    
    transform: scale(0.95) !important;
}

.hidden { display: none !important; }