@charset "utf-8";

/* 상단 고정 바 스타일 */
.sticky-session-bar { position: fixed; top: 0; left: 0; width: 100%; height: 42px; background-color: #183358; color: #ffffff; z-index: 9999; transform: translateY(-100%); transition: transform 0.3s ease-in-out; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
.sticky-session-bar.active { transform: translateY(0);}
.sticky-bar-content { max-width:1200px; min-width: auto; height:100%; margin:0 auto; padding:0 10px; display:flex; align-items:center; justify-content:space-between; font-size:14px;}
.sticky-bar-content .session-timer { color: #ffeb3b; /* 고정 바 내부 타이머 노란색 강조 */ font-weight: 700;
}
.timer-highlight {font-weight:bold; color:##eaba39;}
.session-buttons {display:flex; gap:8px;}
.session-buttons button {height:28px; padding:0 12px; font-size:13px; line-height:12px; border-radius:3px; cursor:pointer; transition:background-color 0.2s;}
.sticky-bar-content .btn-extend {background-color:#fff; color:#183358; border:1px solid #fff; font-weight:600;}
.sticky-bar-content .btn-extend:hover {background-color:#f0f4f9;}
.sticky-bar-content .btn-logout {background-color:transparent; color:#fff; border:1px solid #ddd;}
.sticky-bar-content .btn-logout:hover {background-color:rgba(255, 255, 255, 0.15);}

/* 세션 인라인 영역 스타일 */
.session-inline { display:inline-flex; align-items:center; gap:10px; font-size:13px; color:#333; }
.session-time-text { background:url("/images/k2common/ico-file/ico-timer.svg") 0 50% no-repeat; background-size:12px; padding-left:18px;}
.session-time-text:before {content:'' !important; margin:0 !important;}
.session-time-text strong { color:#014b92; font-weight:600; margin-left:4px;}
.session-inline.timer-red .session-time-text strong { color:#e1483c;}
.btn-time-extend { background-color:#fff; border:1px solid #ccc; padding:2px 8px; font-size:12px; border-radius:2px; cursor:pointer; transition:all 0.2s ease;}
.btn-time-extend:hover { background-color:#f5f5f5; border-color:#b0b0b0; color:#333; }
/* 헤더 내 텍스트형 로그아웃 버튼 */
.timer-pr{position: relative;}
.timer-pr1{position: relative; display: flex; align-items: center; justify-content: space-between;}
.timer-box {float:right; position: absolute; right: 0; top: 5px;}
.timer-box1 {float:right; position: absolute; right: 0; top: 25px;}
.timer-box2 {position: absolute; right: 80px; top: -30px;}
.timer-box3 {position: absolute; top: 27px; right: 200px}
.timer-box3 .session-time-text, .timer-box3 .session-time-text strong {color:#fff; background: none; padding-left: 0;}
.pop-warp .session-inline {z-index:99; position:absolute; right:195px; top:22px; background:#183358; padding:8px 10px; border-radius:8px;}
.pop-warp .session-time-text, .pop-warp .session-time-text strong {color:#fff; background: none; padding-left: 0;}


/* 팝업 전체 배경 (화면 중앙 정렬) */
.modal-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); /* 어두운 반투명 배경 */
  display: flex; justify-content: center; align-items: center; z-index: 9999;}

/* 팝업 카드의 기본 스타일 */
.modal-card {background-color: #fff; width: 400px; padding: 32px 24px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); text-align: center; box-sizing: border-box;}
.modal-card .modal-title {font-size: 20px; font-weight: bold; color: #222; margin: 0 0 24px 0;}

/* 원형 타이머 (Border로 테두리 구현) */
.timer-circle {width: 130px; height: 130px; border: 4px solid #e1483c; /* 포인트 레드 컬러 */
  border-radius: 50%; margin: 0 auto 20px auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.timer-label {font-size: 13px; color: #666; margin-bottom: 2px;}
.timer-time {font-size: 28px; font-weight: bold; color: #e1483c; line-height: 1;}
.modal-desc {font-size: 14px; color: #444; line-height: 1.5; margin: 0 0 24px 0;}

/* 버튼 스타일링 */
.timer-btn-group {display: flex; gap: 10px; justify-content: center;}
.timer-btn-group .btn {flex: 1; padding: 12px 0; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer;}
.btn-secondary {background-color: #8e959e; color: #fff;}
.btn-primary {background-color: #0d407f; color: #fff;}
.btn:hover {opacity: 0.9;}
.timer-container {position: relative; width: 130px; height: 130px; margin: 0 auto 20px auto;}
.timer-svg {width: 100%; height: 100%; transform: rotate(-90deg); /* 12시 방향부터 시작하도록 회전 */}

.timer-container circle {fill: none; stroke-width: 6; /* 테두리 두께 */}
.circle-bg {stroke: #eee; /* 바탕 회색 원 */}
.circle-progress {stroke: #e1483c; stroke-linecap: round; stroke-dasharray: 326.72; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; /* 부드럽게 감소 */}
.timer-text {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.timer-label { font-size: 13px; color: #666; }
.timer-time { font-size: 28px; font-weight: bold; color: #e1483c; }