@charset "utf-8";
/* 당근고양이 'ㅅ' */



/* for styles */
 @import url("default.css"); 

        :root {
            --brand-navy: #0f172a;
            --brand-blue: #2563eb;
            --bg-gray: #f1f5f9;
            --text-dark: #1e293b;
            --text-gray: #64748b;
            --white: #ffffff;
            --border: #e2e8f0;
            --highlight-bg: #eff6ff;
            --score-high: #2563eb;
            --score-mid: #f59e0b;
            --score-low: #ef4444;

            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary: #64748b;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #d97706; 
            --bg: #f8fafc;
            --card-bg: #ffffff;
            --text: #1e293b;
            --border: #e2e8f0;
            --exp-bg: #f1f5f9;
            
            /* 컬러 정의 */
            --box-right-color: #334155; 
            --box-wrong-color: #ef4444; 
            --opt-real-answer: #ef4444; 
            --opt-user-pick: #334155;       

			--indigo:#3B57D9;--indigo-deep:#2A3F9E;--indigo-tint:#EEF1FD;
			--navy:#1B2240;--ink:#3C465C;--muted:#8A92A8;--line:#E7EAF3;--page:#EEF0F6;
			--gate-bg1:#EFEDFB;--gate-bg2:#E7E9FA;--banner1:#5B52C9;--banner2:#473CAD;
		}
        
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        
        body {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--bg-gray);
            color: var(--text-dark);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        /* 헤더 */
        header {
            background: var(--white);
            height: 60px;
            display: flex; align-items: center; justify-content: center;
            padding: 0 20px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        header.exam_header { 
            padding: 0 15px; text-align: center; font-weight: 800; font-size: 1.1rem; 
            height: 56px; display: flex; align-items: center; justify-content: center;
        }
#app{position:relative;width:100%;min-height:100dvh;height:100dvh;overflow:hidden;background:#EEF1FB;}


        .logo-img { height: 48px; width: auto; object-fit: contain; }

        /* 메인 */
        main { flex: 1; overflow-y: auto;  padding: 20px; max-width: 600px; width: 100%; margin: 0 auto; padding-bottom: 100px; scroll-behavior: smooth; background:#fff !important;}

/* 메인 게이트 화면 */

#app.gate-page .gate-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%;margin:0!important;padding:0!important;background:transparent!important;}
#app.gate-page{position:relative;width:100%;max-width:450px;height:100svh;height:100dvh;min-height:100svh;min-height:100dvh;margin:0 auto;padding:22px 16px 92px;border-radius:24px;background:linear-gradient(180deg,#F3F1FC 0%,#FAF9F7 205px,#FAF9F7 100%)!important;overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;}
.gate-page{position:relative;width:100%;max-width:450px;height:100svh;height:100dvh;min-height:100svh;min-height:100dvh;margin:0 auto;padding:22px 16px 92px;border-radius:24px;background:linear-gradient(180deg,#F3F1FC 0%,#FAF9F7 205px,#FAF9F7 100%)!important;overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;}
.gate-head{position:static!important;top:auto!important;z-index:auto!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:auto;margin:0 0 10px!important;padding:0;background:transparent!important;border:0!important;box-shadow:none!important;flex:0 0 auto;}
.g-bot{order:-1;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex:0 0 48px;background:none;border-radius:0;filter:drop-shadow(0 8px 10px rgba(75,63,214,.20));}
.g-bot img{display:block;width:44px;height:44px;object-fit:contain;}
.logout-mark{position:absolute;top:32px;right:16px;z-index:5;display:flex;align-items:center;justify-content:center;gap:4px;height:28px;padding:0 8px;border:1px solid rgba(28,26,46,.12);border-radius:999px;background:rgba(255,255,255,.75);color:#1C1A2E;font-size:11px;font-weight:700;line-height:1;letter-spacing:-.04em;box-shadow:0 4px 10px rgba(28,26,46,.06);transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;}
.gate-banner{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:74px;margin:58px 0 16px!important;padding:19px 22px;border-radius:24px;background:linear-gradient(135deg,#4B3FD6 0%,#7A6FF0 100%);box-shadow:0 12px 28px rgba(75,63,214,.28);box-sizing:border-box;flex:0 0 auto;}

.gate-head > div:first-child{flex:0 0 auto;min-width:0;background:transparent!important;text-align:center;}
.gate-head-copy{flex:0 0 auto;min-width:0;background:transparent!important;text-align:center;}
.gate-title{margin:0;font-size:25px;font-weight:800;line-height:1.18;color:#1C1A2E;letter-spacing:-.055em;text-align:center;}
.gate-subtitle{margin:7px 0 0;font-size:18px;font-weight:500;line-height:1.35;color:#6B6B7A;letter-spacing:-.035em;text-align:center;}

.logout-mark:hover{border-color:#5B52E0;background:#5B52E0;color:#fff;box-shadow:0 6px 14px rgba(91,82,224,.25);}
.logout-ico{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:inherit;}
.logout-ico svg{display:block;width:16px;height:16px;}

.gate-banner-title{margin:0;font-size:17px;font-weight:800;line-height:1.25;color:#fff;letter-spacing:-.045em;}
.gate-banner-text{margin:7px 0 0;font-size:12px;font-weight:500;line-height:1.35;color:rgba(255,255,255,.75);letter-spacing:-.025em;}

.entry{width:100%;margin:0 0 14px;padding:18px 16px 16px;border:1px solid #F0EEE9;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(28,26,46,.08);box-sizing:border-box;}
.entry .lead{margin:0 0 12px;font-size:14px;font-weight:600;line-height:1.35;color:#1C1A2E;text-align:center;letter-spacing:-.04em;}
.entry .lead b{font-weight:800;color:#1C1A2E;}
.entry-btn{width:100%;height:48px;margin:0;padding:0 14px;border:0;border-radius:12px;background:linear-gradient(180deg,#4B3FD6 0%,#392FC1 100%);box-shadow:0 10px 20px rgba(75,63,214,.30);color:#fff;font-family:inherit;font-size:15px;font-weight:800;line-height:1;letter-spacing:-.04em;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;}
.entry-btn:hover{transform:none;}
.entry-btn:active{transform:scale(.99);}
.entry-sub{display:none;}

.gate-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%;margin:0!important;padding:0!important;background:transparent!important;}
.gate-main main{flex:1 1 auto;min-height:0;padding:0!important;}

.course-list{display:flex;flex-direction:column;gap:10px!important;width:100%;margin:0!important;padding:0!important;}
.course-list.extra{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin-top:14px!important;}

.course-card{position:relative;display:flex;align-items:center;width:100%!important;min-height:62px!important;margin:0!important;padding:12px 16px!important;border:1px solid #F0EEE9;border-radius:18px!important;background:#fff;box-shadow:0 4px 14px rgba(28,26,46,.045);box-sizing:border-box;overflow:hidden;}
.course-card.is-muted{background:#fff;}
.course-card::after{position:absolute;right:10px;bottom:-13px;font-size:70px;font-weight:800;line-height:1;letter-spacing:-.08em;pointer-events:none;}

.course-list:not(.extra) .course-card:nth-child(1){background:linear-gradient(90deg,#fff 0%,#fff 48%,rgba(214,83,122,.16) 100%);}
.course-list:not(.extra) .course-card:nth-child(2){background:linear-gradient(90deg,#fff 0%,#fff 48%,rgba(53,114,214,.16) 100%);}
.course-list:not(.extra) .course-card:nth-child(3){background:linear-gradient(90deg,#fff 0%,#fff 48%,rgba(47,158,92,.16) 100%);}
.course-list:not(.extra) .course-card:nth-child(1)::after{content:"01";color:#D6537A;opacity:.16;}
.course-list:not(.extra) .course-card:nth-child(2)::after{content:"02";color:#3572D6;opacity:.16;}
.course-list:not(.extra) .course-card:nth-child(3)::after{content:"03";color:#2F9E5C;opacity:.16;}

.course-icon{position:relative;z-index:1;width:46px!important;height:46px!important;border-radius:13px!important;display:flex;align-items:center;justify-content:center;flex:0 0 46px!important;margin:0 14px 0 0!important;}
.course-icon svg{width:22px!important;height:22px!important;display:block;}
.course-icon.pink{background:#FFE1E6!important;color:#D6537A!important;}
.course-icon.blue{background:#DBE9FF!important;color:#3572D6!important;}
.course-icon.green{background:#DCF5E6!important;color:#2F9E5C!important;}
.course-icon.purple{background:#ECE7FB!important;color:#6355E0!important;}
.course-icon.violet{background:#ECE7FB!important;color:#6355E0!important;}

.course-text{position:relative;z-index:1;min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;}
.course-name{display:block;width:100%;font-size:19px!important;font-weight:800;line-height:1.2!important;color:#1C1A2E;letter-spacing:-.055em;text-align:left;}
.course-desc{display:block;width:100%;margin-top:3px!important;font-size:11px!important;font-weight:500;line-height:1.25!important;color:#6B6B7A;letter-spacing:-.03em;text-align:left;}
.course-link-name{display:block;width:100%;font-size:12.5px!important;font-weight:700;line-height:1.3!important;color:#1C1A2E!important;letter-spacing:-.04em;word-break:keep-all;text-align:center;}
.course-arrow{display:none!important;}

.course-list.extra .course-card{min-height:92px!important;padding:14px 10px!important;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:16px!important;background:#fff!important;}
.course-list.extra .course-card::after{display:none;}
.course-list.extra .course-icon{width:36px!important;height:36px!important;flex:0 0 36px!important;margin:0 0 8px!important;border-radius:10px!important;background:#ECE7FB!important;color:#6355E0!important;}
.course-list.extra .course-icon svg{width:18px!important;height:18px!important;}
.course-list.extra .course-text{align-items:center;text-align:center;}
.course-list.extra .course-name{font-size:12.5px!important;font-weight:700!important;line-height:1.3!important;color:#1C1A2E!important;text-align:center;letter-spacing:-.04em;word-break:keep-all;}
.course-list.extra .course-desc{display:none;}

#app.gate-page .gate-nav{position:fixed;left:50%;right:auto;bottom:0;transform:translateX(-50%);width:100%;max-width:450px;height:72px;display:flex;align-items:flex-start;padding:8px 10px 0;border-top:1px solid #F0EEE9;background:#FAF9F7;z-index:999;box-sizing:border-box;}
.gate-nav-item{flex:1;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:999px;font-size:12px;font-weight:600;color:#A8A6B3;text-decoration:none;letter-spacing:-.04em;}
.gate-nav-item svg{width:20px;height:20px;display:block;stroke:currentColor;}
.gate-nav-item.is-active{background:#F0EDFD;color:#4B3FD6;font-weight:700;}


 /* 푸터 */
#app.gate-page{height:100dvh;max-height:none;padding-bottom:92px;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;}
#app.gate-page .gate-nav{position:fixed;left:50%;right:auto;bottom:0;transform:translateX(-50%);width:100%;max-width:450px;height:66px;display:flex;align-items:flex-start;padding:7px 10px 0;border-top:1px solid #E7E4EF;background:#fff;z-index:999;box-sizing:border-box;}
.gate-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;font-size:11px;font-weight:600;color:#9EA0B1;text-decoration:none;letter-spacing:-.035em;line-height:1.2;background:transparent!important;}
.gate-nav-item svg{width:20px;height:20px;display:block;stroke:currentColor;padding:4px 11px;border-radius:10px;box-sizing:content-box;background:transparent!important;}
.gate-nav-item span{display:block;margin-top:0;color:currentColor;background:transparent!important;}
.gate-nav-item.is-active{color:#5B52E0;font-weight:700;background:transparent!important;}
.gate-nav-item.is-active svg{background:#F0EDFD!important;}


  /* ===== the standing entry button (hero of un-authenticated gate) ===== */
  .entry{background:#fff;border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 6px 16px -8px rgba(30,40,90,.20);border:1px solid #E3E1F5;}
  .entry .lead{font-size:14px;color:var(--ink);font-weight:600;text-align:center;margin-bottom:11px;line-height:1.5;}
  .entry .lead b{color:var(--navy);font-weight:700;}
.entry-btn{width:100%;border:none;cursor:pointer;font-family:inherit;background:linear-gradient(180deg,#5A67F2 0%,#3B33C9 100%);color:#fff;font-size:15px;font-weight:800;padding:14px;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 18px rgba(67,55,202,.35);transition:transform .12s ease;}

  .entry-btn:hover{transform:translateY(-1px);}
  .entry-btn:active{transform:translateY(0);}
  .entry-sub{margin-top:9px;text-align:center;font-size:11.5px;font-weight:700;color:var(--indigo-deep);line-height:1.5;
    display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;}
  .entry-sub .pill{background:var(--indigo-tint);border-radius:6px;padding:2px 7px;}


        /* 배너 */
        .welcome-banner {
            background: linear-gradient(135deg, var(--brand-navy) 0%, #334155 100%);
            border-radius: 20px; padding: 30px 25px; color: white; margin-bottom: 30px;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3); text-align: center;
        }
        .welcome-banner h2 { margin: 0 0 8px 0; font-size: 1.15rem; font-weight: 800; }
        .welcome-banner p { margin: 0; font-size: 0.90rem; opacity: 0.9; font-weight: 300; }

        /* 메뉴 리스트 (세로형) */
        .menu-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .menu-card {
            background:linear-gradient(135deg, #f8fbff, #eef5ff);
            border-radius: 16px;
            padding: 20px 25px;
            cursor: pointer;
            border: 1.5px solid #dbeafe; 
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
            transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
		.menu-card { display:flex; align-items:center; justify-content:center; position:relative; }
		.menu-text { flex:none; display:flex; align-items:center; gap:10px; }

		.menu-card i.ph-caret-right { position:static; margin-left:12px; }
 

		.menu-card:active { transform: scale(0.98); background-color: #eff6ff; }
        
        
        .menu-icon { font-size: 2.2rem; margin-right: 12px; margin-bottom: 0; color: var(--brand-blue); transition: 0.3s; }
        .menu-title { font-weight: 800; font-size: 1.15rem; color: #1e3a8a; margin-bottom: 0;}
        .menu-sub { font-size: 0.85rem; color: var(--text-gray); }

		/* 학습 매뉴얼 카드 */
        .manual-card{
			display:flex;
			align-items:center;
			justify-content:center;
			position:relative;
			padding:14px 22px;
			margin-top:12px;
			border-radius:18px;
			background:#ffffff;
			border:1.5px solid #dbeafe;
			box-shadow:none;
			cursor:pointer;
			transition:all 0.25s ease;
		}

		.manual-icon{
			font-size:2.2rem;
			margin-right:12px;
			color:var(--brand-blue);
			transition:0.3s;
		}

		.manual-text{
			flex:none;
			display:flex;
			align-items:center;
			gap:10px;
		}

		.manual-title{
			font-weight:800;
			font-size:1.05rem;
			color:#1e3a8a;
			margin-bottom:0;
		}

		.manual-arrow{
			position:static;
			margin-left:12px;
			font-size:1.2rem;
			color:#cbd5e1;
		}

		/* 설문조사 카드 */
		.survey-card{
			display:flex;
			align-items:center;
			justify-content:center;
			position:relative;
			padding:16px 22px;
			margin-top:12px;
			border-radius:16px;
			background:#ffffff;
			border:1px solid #e2e8f0;
			box-shadow:none;
			cursor:pointer;
			transition:all 0.25s ease;
		}

		.survey-card:active{
			transform:scale(0.98);
			background:#f8fafc;
		}

		.survey-icon{
			font-size:1.7rem;
			margin-right:10px;
			color:#64748b;
			transition:0.3s;
		}

		.survey-text{
			flex:none;
			display:flex;
			align-items:center;
			gap:8px;
		}

		.survey-title{
			font-weight:700;
			font-size:0.98rem;
			color:#334155;
			margin-bottom:0;
		}

		.survey-arrow{
			position:static;
			margin-left:10px;
			font-size:1.05rem;
			color:#cbd5e1;
		}


        /* 사전 버튼 */
        .glossary-btn {
            background: var(--white);
            border-radius: 16px;
            padding: 18px 25px;
            margin-top: 25px;
            display: flex; align-items: center; justify-content: space-between;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03); border: 1px solid var(--border);
            cursor: pointer; transition: 0.2s;
        }
        .glossary-btn:active { background: #f8fafc; transform: scale(0.98); }
        .glossary-left { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--brand-navy); font-size: 1.05rem; }

        /* 모달 (용어사전용) */
        .modal-overlay {
            position: fixed; top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0.6); z-index: 100;
            display: flex; justify-content: center; align-items: flex-end;
            backdrop-filter: blur(2px);
        }
        .modal-sheet {
            background: var(--white); width: 100%; max-width: 600px; height: 90vh;
            border-radius: 24px 24px 0 0; padding: 25px;
            display: flex; flex-direction: column;
            animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
        }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-title { font-size: 1.3rem; font-weight: 800; color: var(--brand-navy); }
        .close-btn { background: none; border: none; font-size: 1.8rem; cursor: pointer; color: var(--text-gray); padding: 5px; }
        
        .search-box {
            width: 100%; padding: 16px;
            border: 2px solid var(--border); border-radius: 12px;
            font-size: 1.05rem; margin-bottom: 20px;
            background: #f8fafc; transition: 0.2s;
        }
        .search-box:focus { outline: none; border-color: var(--brand-blue); background: white; }

        .index-bar {
            display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 10px;
            -webkit-overflow-scrolling: touch; scrollbar-width: none;
        }
        .index-bar::-webkit-scrollbar { display: none; }
        .index-btn {
            flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
            border: 1px solid var(--border); background: white; color: var(--text-gray);
            font-weight: 700; font-size: 0.95rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center; transition: 0.2s;
        }
        .index-btn.active {
            background: var(--brand-navy); color: white; border-color: var(--brand-navy);
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2); transform: translateY(-2px);
        }

        .term-list { flex: 1; overflow-y: auto; padding-right: 5px; }
        .term-item { padding: 18px 0; border-bottom: 1px solid #f1f5f9; }
        .term-name { font-weight: 800; color: var(--brand-blue); margin-bottom: 6px; display:block; font-size: 1.05rem; }
        .term-desc { font-size: 0.95rem; color: var(--text-dark); line-height: 1.6; word-break: keep-all; }

        .container {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            padding-bottom: 90px;
			height: 99vh;
        }

        /* [수정] 헤더 영역 스타일 재정의 */
        .header {
            margin-bottom: 25px;
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
            position: relative;
        }
        
        /* 브랜드명 (FP Partners...) - 작게 상단 */
        .header-brand {
            margin: 0 0 10px 0;
            font-size: 1rem;
            color: var(--text-gray);
            font-weight: 700;
            letter-spacing: -0.01em;
        }

        /* 과정명 (OO보험 합격 가이드) - 크게 하단 */
        .header-title {
            margin: 0;
            font-size: 1.7rem;
            color: var(--brand-navy);
            font-weight: 900;
            line-height: 1.25;
            letter-spacing: -0.03em;
        }
        
        .header-back-btn { 
            position: absolute; left: 0; top: 0; height: 56px; width: 50px; 
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; color: var(--text); cursor: pointer; background: none; border: none;
        }


        .fixed-bottom {
            position: fixed; bottom: 0; width: 450px; max-width:100%;
            background: white; padding: 15px 20px; border-top: 1px solid var(--border);
            z-index: 100;  margin:0 auto;
        }

		.btn-start {
            display: block; width: 100%; padding: 16px;
            background: var(--brand-blue); color: white; border: none; border-radius: 12px;
            font-size: 1.1rem; font-weight: 700; cursor: pointer; text-align: center;
            box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); transition: transform 0.1s;
        }
        .btn-start:active { transform: scale(0.98); background: #1d4ed8; }
        
        .loading-overlay {
            position: fixed; inset: 0; background: rgba(255,255,255,0.9);
            z-index: 999; display: flex; flex-direction: column;
            justify-content: center; align-items: center;
        }

        /* 가이드 박스 */
        .ai-guide-box {
            background-color: var(--highlight-bg); border: 1px solid #dbeafe;
            border-radius: 16px; padding: 25px 20px; margin-bottom: 25px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
        }
        .guide-header-center { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; }
        .guide-badge {
            display: inline-block; background: var(--brand-blue); color: white;
            font-size: 0.8rem; font-weight: 700; padding: 5px 10px; border-radius: 20px;
            margin-bottom: 12px; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
        }
        .guide-title { font-size: 1.3rem; font-weight: 900; color: var(--brand-navy); line-height: 1.35; word-break: keep-all; }
		.guide-sub { font-size: 0.85rem; color: var(--brand-navy); line-height: 1.35; word-break: keep-all; }
        .guide-desc { font-size: 0.95rem; color: #475569; line-height: 1.6; margin-bottom: 25px; text-align: center; }

        .feature-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
        .feature-item {
            display: flex; align-items: flex-start; gap: 12px; background: white;
            padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .feature-icon { color: var(--brand-blue); font-size: 1.5rem; margin-top: 2px; flex-shrink: 0; }
        .feature-content strong { display: block; font-size: 1.05rem; color: var(--brand-navy); margin-bottom: 5px; }
        .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-gray); line-height: 1.5; }
        .guide-footer { text-align: center; font-size: 0.9rem; font-weight: 700; color: var(--brand-navy); padding-top: 15px; border-top: 1px dashed #cbd5e1; line-height: 1.6; }

        /* 리스트 스타일 */
        .exam-section-title {
            font-size: 1.1rem; font-weight: 700; margin-bottom: 15px;
            color: var(--text-dark); display: flex; align-items: center; gap: 6px;
        }
        .exam-section-btn { font-size: 0.9rem; font-weight: 700; color: white; background: var(--primary);    border: 1px solid var(--primary);
		padding: 3px 16px; border-radius: 15px; height:32px}

        .exam-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 90px;}
        .result_box { display: inline-block; padding-bottom: 90px;}
        
        .exam-item {
            background: var(--bg-gray); border-radius: 12px; padding: 20px;
            border: 1px solid var(--border); cursor: pointer; transition: 0.2s;
            display: flex; justify-content: space-between; align-items: center;
            position: relative; overflow: hidden;
        }
        .exam-item:active { background-color: #e2e8f0; transform: scale(0.98); }
        .exam-item.solved {
            background-color: #f0fdf4; border-color: var(--brand-blue);
            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1);
        }
        .exam-item.solved .exam-number {
            background-color: var(--brand-blue); color: white; border-color: var(--brand-blue);
        }

        .exam-info { display: flex; align-items: center; gap: 15px; }
        .exam-number {
            width: 36px; height: 36px; background: var(--white); border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem; font-weight: 800; color: var(--brand-blue);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e2e8f0;
            transition: 0.3s;
        }
        .exam-text h4 { margin: 0 0 4px 0; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
        .exam-text .exam_free { padding:0 10px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; color: white; background: #f59e0b; border: 1px solid #f59e0b;}
        .exam-text .exam_result { padding:0 10px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; color: white; background:  var(--brand-blue); border: 1px solid  var(--brand-blue);}
        .exam-text p { margin: 0; font-size: 0.85rem; color: var(--text-gray); }
        
        .arrow-icon { color: #cbd5e1; font-size: 1.2rem; }
        .solved-icon { color: var(--brand-blue); font-size: 1.4rem; font-weight: bold; }
        .solved-badge {
            font-size: 0.7rem; background: var(--brand-blue); color: white;
            padding: 2px 6px; border-radius: 4px; vertical-align: middle;
        }

        /* 분석 결과 버튼 */
        .btn-analysis-entry {
			position: absolute; bottom:10px; left:10px;  width: calc(100% - 20px);
            margin-top: 25px; padding: 18px 0px; border-radius: 16px; border: none;
            font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px;
            transition: all 0.2s;
        }
        .btn-analysis-entry.disabled {
            background: #1e293b; color: #64748b; cursor: not-allowed; opacity: 0.9;
        }
        .btn-analysis-entry.active {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white; cursor: pointer;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
            animation: pulse 2s infinite;
        }
        .btn-analysis-entry.active:active { transform: scale(0.98); }

        /* 분석 대시보드 */
        .chart-card {
            background: white; border: 1px solid #e2e8f0; border-radius: 16px;
            padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.02);
        }
        .chart-title { font-size: 1rem; font-weight: 800; color: var(--brand-navy); margin-bottom: 15px; display:flex; align-items:center; gap:6px; }
        .chart-wrapper { position: relative; height: 300px; width: 100%; display:flex; justify-content:center; align-items:center; }
        
        .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
        .summary-item { background: #f8fafc; padding: 10px; border-radius: 12px; text-align: center; border: 1px solid #e2e8f0; }
        .sum-label { font-size: 0.85rem; color: #64748b; margin-bottom: 5px; }
        .sum-val { font-size: 1.4rem; font-weight: 800; color: var(--brand-blue); }

        .subject-list { display: flex; flex-direction: column; gap: 16px; }
        .subject-item, .trend-subject-item { 
            border-bottom: 1px solid #f1f5f9; padding-bottom: 16px; margin-bottom: 16px; 
        }
        .subject-item:last-child, .trend-subject-item:last-child { 
            border-bottom: none; padding-bottom: 0; margin-bottom: 0; 
        }
        
        .subj-header, .trend-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: 0.95rem; color: #334155; }
        .progress-bg { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
        .progress-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease-out; }
        .subj-detail { display:flex; justify-content:space-between; font-size: 0.85rem; color: #94a3b8; }
        
        .trend-bars-container {
            display: flex; align-items: flex-end; justify-content: space-between;
            height: 100px; background: #f8fafc; border-radius: 8px;
            padding: 10px 10px 0 10px; border: 1px solid #f1f5f9;
        }
        .trend-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 14%; height: 100%; }
        .trend-bar-val { font-size: 0.7rem; color: #64748b; margin-bottom: 2px; }
        .trend-bar { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.5s ease-out; min-height: 4px; }
        .trend-label { margin-top: 6px; font-size: 0.75rem; color: #94a3b8; font-weight: 600; }

        .score-high { color: var(--score-high); }
        .score-mid { color: var(--score-mid); }
        .score-low { color: var(--score-low); }

		.guide_box {margin-bottom: 25px; text-align: left;}
		.guide_box .tit {font-size: 1.05rem; font-weight: 800; color: var(--brand-navy); margin-bottom: 12px; display:flex; align-items:center; gap:6px;}
		.guide_box .con {display: flex; flex-direction: column; gap: 8px;}
		.guide_box .con .box {background: white; padding: 14px; border-radius: 10px; border: 1px solid #e2e8f0;}
		.guide_box .con .box.type1 {border-left: 4px solid #2563eb;}
		.guide_box .con .box.type2 {border-left: 4px solid #10b981;}
		.guide_box .con .box.type3 {border-left: 4px solid #f59e0b;}
		.guide_box .con .box.type4 {border-left: 4px solid #ef4444;}
		.guide_box .con .box strong {display:block; font-size: 0.95rem; margin-bottom: 4px;}
		.guide_box .con .box span {font-size: 0.85rem; color: #475569; line-height: 1.4;}


        .card { background: var(--card-bg); border-radius: 16px; padding: 25px; margin-bottom: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid #f1f5f9; overflow: hidden; }
        .score-card { text-align: center; background: white; }
        .score-tit { font-size: 1rem; color: #777; margin-bottom: 5px; font-weight: 700;}
        .score-val { font-size: 1.5rem; font-weight: 900; line-height: 1.2; margin-top: 5px;color:#ef4444;}
        .score-txt { font-size: 1rem; color: #777; margin-top: 5px;}


		.passStep1 {background:#F1F8F3; border:1px solid #A7D7AE;}
		.passStep1 .score-val {color:#2E7D32;}
		.passStep2 {background:#EEF6FF; border:1px solid #9FC5F8;}
		.passStep2 .score-val {color:#1565C0;}
		.passStep3 {background:#FFF6EC; border:1px solid #FFD09A;}
		.passStep3 .score-val {color:#EF6C00;}
		.passStep4 {background:#FFF1F1; border:1px solid #E9A5A5;}
		.passStep4 .score-val {color:#C62828;}
		.passStep5 {background:#F5F5F5; border:1px solid #C9C9C9;}
		.passStep5 .score-val {color:#424242;}

        .filter-bar { display: flex; justify-content: space-between; margin-bottom: 15px; }
        .filter-btn {
            background: white; border: 1px solid var(--border);
            padding: 8px 16px; border-radius: 20px;
            font-size: 0.9rem; font-weight: 700; color: var(--secondary);
            display: flex; align-items: center; gap: 6px; cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: all 0.2s;
        }
        .filter-btn.active {
            background: var(--danger); color: white; border-color: var(--danger);
        }
        .report-btn { font-size: 0.9rem; font-weight: 700; color: #4f8b2f; background: #edf7e4;    border: 1px solid #4f8b2f; padding: 8px 16px; border-radius: 20px;}
        .no-wrong-msg {
            text-align: center; padding: 40px 20px; color: var(--secondary);
            font-size: 1rem; font-weight: 600; background: #fff; border-radius: 12px; border: 1px solid var(--border);
        }

        .scroll-hint {
            position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
            background: rgba(15, 23, 42, 0.95); color: #fff; padding: 10px 24px; border-radius: 50px;
            font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
            z-index: 9999; box-shadow: 0 4px 15px rgba(0,0,0,0.3); pointer-events: none;
            animation: floatUp 2s infinite; transition: opacity 0.5s;
        }
        .scroll-hint.hidden { opacity: 0; }

        .fab-container { position: fixed; bottom: 30px; right: 25px; display: flex; flex-direction: column; gap: 15px; z-index: 100; }
        
        .fab-btn {
            height: 50px; border-radius: 25px; border: none;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 1rem; font-weight: 700;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: transform 0.2s, background-color 0.2s;
            padding: 0 20px; gap: 8px;
        }
        .fab-btn:active { transform: scale(0.95); }
        .fab-btn.primary { background-color: var(--primary); color: white; }
        .fab-btn i { font-size: 1.3rem; }

        .btn-submit { 
            display: block; width: 100%; padding: 16px; border: none; border-radius: 12px; 
            font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; 
            background: var(--primary); color: white; margin: 0;
            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
        }
        .fixed-bottom-submit { padding: 20px; background: white; border-top: 1px solid #e2e8f0; position: sticky; bottom: 0; z-index: 50; }

        .q-label { color: #334155; font-size: 1.3rem; font-weight: 900; margin-right: 6px; display: inline-block; }
        .q-text { font-size: 1.15rem; font-weight: 800; color: #1e293b; line-height: 1.5; }

        .quiz-passage {
            background-color: #ffffff;
            border: 1px solid #cbd5e1; padding: 15px; border-radius: 8px; margin-bottom: 20px;
            font-size: 0.95rem; line-height: 1.6; color: #334155; white-space: pre-line;
        }

		.option_selects { }
		.option_selects label {width:100%; margin-bottom: 8px; cursor: pointer; display: flex; align-items: center; }
		.option_selects label input {display:none;}
		.option_selects label i {display:block; font-size:15px; padding: 15px; border: 2px solid #e2e8f0; border-radius: 10px; background: white; font-size: 0.90rem; width:100%;}
		.option_selects label i .opt-num { margin-right: 10px; font-weight: bold; color: var(--secondary); min-width: 20px; }
		.option_selects label input:checked + i {border-color: var(--primary); background: #eff6ff; color: var(--primary); font-weight: bold; }

        .option-item { padding: 15px; border: 2px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: white; font-size: 0.90rem; display: flex; align-items: center; }
        .option-item.active { border-color: var(--primary); background: #eff6ff; color: var(--primary); font-weight: bold; }
        .opt-num { margin-right: 10px; font-weight: bold; color: var(--secondary); min-width: 20px; }
        .option-item.active .opt-num { color: var(--primary); }

        .result-item { position: relative;     display: inline-block;border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px 20px; margin-bottom: 20px; background: white; }
        .result-item.correct { border-left: 6px solid #1677ff; }
        .result-item.wrong { border-left: 6px solid var(--box-wrong-color); }
		.result-item .soldout {position:absolute;display:none;z-index:1;top:0;left:0;width:100%;height:100%;background:#000;background:#fff9;text-align:center;line-height:215px;color:#fff;font-size:18px;font-weight:bold;letter-spacing:1px}
		.result-item .soldout.on {display:block}
    
		.result-item{display:block;width:100%;max-width:100%;overflow:hidden;}
		.result-box{display:block;width:100%;max-width:100%;overflow:hidden;}	
	
	
        .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
		.result-header2 { position: relative;     display: flex; gap:5px;}
		.result-box { position: relative;     display: inline-block;}
        .badge { padding: 5px 10px; border-radius: 6px; font-size: 0.85rem; font-weight: 800; color: white; }
        .badge.correct { background: #1677ff; }
        .badge.wrong { background: var(--box-wrong-color); }

        .res-option {
            padding: 12px 15px; border-radius: 8px; margin-bottom: 6px; 
            font-size: 0.95rem; display: flex; align-items: flex-start;
            border: 1px solid transparent; background: #f8fafc; color: #64748b;
        }
        .res-option.my-pick {
            background-color: #f1f5f9; border-color: var(--opt-user-pick); color: var(--opt-user-pick); font-weight: bold;
        }
        .res-option.missed-answer {
            background-color: #fef2f2; border-color: var(--opt-real-answer); color: var(--opt-real-answer); font-weight: bold;
        }
        
        .res-icon { margin-right: 10px; font-size: 1.1rem; min-width: 24px; font-weight: 800; }
        .icon-red { color: var(--opt-real-answer) !important; }
        .icon-black { color: var(--opt-user-pick) !important; }

        .explanation-box {
            background: var(--exp-bg); border: 1px solid #cbd5e1; color: #334155;
            padding: 20px; border-radius: 10px; margin-top: 20px; 
            font-size: 1rem; line-height: 1.7; 
        }
        .exp-title {
            font-weight: 800; color: var(--secondary); margin-bottom: 12px; 
            display:flex; align-items:center; justify-content: space-between; 
            font-size:1.05rem; min-height: 32px;
        }

        .summary-btn {
            background: white; border: 1px solid #cbd5e1; color: var(--primary);
            padding: 5px 10px; border-radius: 6px;
            font-size: 0.8rem; font-weight: 800; cursor: pointer;
            display: inline-flex; align-items: center; gap: 4px;
            transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .summary-btn:hover { background: #f1f5f9; }
        .summary-btn i { font-size: 0.95rem; }

        .lecture-link-btn { background: white; color: var(--primary); border: 1px solid var(--primary); padding: 12px; border-radius: 8px; margin-top: 15px; font-size: 0.9rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; transition: background 0.2s; }
        .lecture-link-btn.active { background: var(--primary); color: white; }

        .inline-video-area { margin-top: 15px; border-radius: 8px; overflow: hidden; background: #000; position: relative; animation: fadeIn 0.3s; }
        .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; }
        .vimeo-target { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        .vimeo-target iframe { width: 100%; height: 100%; border: none; }
        .video-content {
			width: 100%;  display:none;
        }
        .video-content.active {
            display:inline-block;
        }

        .overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.95); z-index: 999; display: flex; justify-content: center; align-items: center; flex-direction: column; }

        @media (max-width: 600px) {
            main { padding: 10px; }
            .card { padding: 20px 15px; }
            .explanation-box { padding: 15px; }
            .result-item { padding: 20px 15px; }
            .inline-video-area { margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); border-radius: 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
        }

        .dic-term { color: var(--primary); font-weight: 700; border-bottom: 2px dotted var(--primary); cursor: pointer; position: relative; }
        .dic-term:hover { background-color: #eff6ff; }

        .dict-modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000;
            display: flex; align-items: flex-end; justify-content: center;
            animation: fadeIn 0.2s;
        }
        .dict-modal-content {
            background: white; width: 100%; max-width: 600px;
            border-radius: 20px 20px 0 0; padding: 25px;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column;
        }
        .dict-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; flex-shrink: 0; }
        .dict-word { font-size: 1.3rem; font-weight: 800; color: var(--text); }
        .dict-close { background: none; border: none; font-size: 1.5rem; color: #94a3b8; cursor: pointer; padding: 5px; }
        .dict-desc { font-size: 1.05rem; line-height: 1.6; color: #475569; white-space: pre-line; }

        .summary-tab-header {
            display: flex; gap: 10px; margin-bottom: 20px; background: #f1f5f9; padding: 4px; border-radius: 12px;
        }
        .summary-tab-btn {
            flex: 1; border: none; background: transparent; padding: 10px;
            border-radius: 10px; font-weight: 700; color: #64748b; font-size: 0.95rem; cursor: pointer;
            transition: all 0.2s;
        }
        .summary-tab-btn.active {
            background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .summary-content {
            background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;
            flex: 1; overflow-y: auto;
        }
        .summary-content-tab {
               display:none;
        }
        .summary-content-tab.active {
            display:inline-block;
        }
        .summary-label {
                position: relative; display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 0.85rem; font-weight: 800; margin-bottom: 10px;
        }
        .summary-label.point { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }
        .summary-label.def { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
        
        .summary-text { font-size: 0.95rem; line-height: 1.7; color: #334155; }
      
      	.q-label { color: #334155; font-size: 1.3rem; font-weight: 900; margin-right: 6px; display: inline-block; }
        .q-text { font-size: 1.00rem; font-weight: 800; color: #1e293b; line-height: 1.5; white-space: pre-wrap; } /* white-space 추가 */

        .quiz-passage {
            background-color: #ffffff;
            border: 1px solid #cbd5e1; padding: 15px; border-radius: 8px; margin-bottom: 20px;
            font-size: 0.95rem; line-height: 1.6; color: #334155; white-space: pre-wrap; /* pre-line을 pre-wrap으로 변경 권장 */
        }

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

        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
        @keyframes floatUp { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
		@keyframes spin { 100% { transform: rotate(360deg); } }
		.toggle-wrap {
		  display: inline-flex;
		  align-items: center;
		  gap: 10px;
		}

		.toggle-switch {
		  position: relative;
		  display: inline-block;
		  width: 68px;
		  height: 30px;
		}

		.toggle-switch input {
		  opacity: 0;
		  width: 0;
		  height: 0;
		  display:none;
		}

		.toggle-slider {
		  position: absolute;
		  cursor: pointer;
		  inset: 0;
		  background-color: #cfcfcf;
		  border-radius: 999px;
		  transition: 0.3s;
		}

		.toggle-slider:before {
		  content: "";
		  position: absolute;
		  width: 22px;
		  height: 22px;
		  left: 4px;
		  top: 4px;
		  background-color: #fff;
		  border-radius: 50%;
		  transition: 0.3s;
		  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
		}

		.toggle-text {
		  position: absolute;
		  top: 50%;
		  transform: translateY(-50%);
		  right: 11px;
		  font-size: 12px;
		  font-weight: 700;
		  color: #fff;
		  z-index: 1;
		  pointer-events: none;
		}

		.toggle-switch .toggle-slider .toggle-text::before {
		  content: "이해";
		}


		.toggle-switch.on .toggle-slider {
		  background-color: #1677ff;
		}

		.toggle-switch.on .toggle-slider:before {
		  transform: translateX(36px);
		}

		.toggle-switch.on .toggle-slider .toggle-text {
		  left: 13px;
		  right: auto;
		}

		.toggle-switch.on .toggle-slider .toggle-text::before {
		  content: "이해";
		}


/* 마이페이지 */
.mypage-page{padding-top:18px!important;     background-color: #fff; }
.mypage-head{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;margin:0 0 34px!important;padding:6px 0 0!important;min-height:auto!important;}
.mypage-head-copy{position:relative;z-index:2;width:100%;margin:0;text-align:center;}
.mypage-head .gate-title{margin:0;font-size:24px;font-weight:800;line-height:1.18;color:#1C1A2E;letter-spacing:-.055em;}
.mypage-head .gate-subtitle{margin:6px 0 0;font-size:14px;font-weight:500;line-height:1.35;color:#6B6B7A;letter-spacing:-.035em;}
.mypage-robot{order:0!important;width:56px;height:56px;flex:0 0 56px;margin:0 auto 2px!important;}
.mypage-robot img{display:block;width:52px;height:52px;object-fit:contain;}
.mypage-main{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:8px 0 30px!important;background:transparent!important;overflow:visible!important;}

.mypage-section{width:100%;margin:0 0 34px;}
.mypage-course-section{margin-top:60px;}
.mypage-section-title{display:flex;align-items:flex-start;gap:11px;width:100%;margin:0 0 16px;padding:0 3px;}
.mypage-title-icon{display:flex;width:36px;height:36px;align-items:center;justify-content:center;flex:0 0 36px;border-radius:12px;background:#F0EDFD;color:#5B52E0;}
.mypage-title-icon svg{display:block;width:19px;height:19px;}
.mypage-section-copy{min-width:0;flex:1;text-align:left;}
.mypage-section-copy h2{margin:0;color:#1C1A2E;font-size:18px;font-weight:800;line-height:1.2;letter-spacing:-.045em;}
.mypage-section-copy p{margin:4px 0 0;color:#8A92A8;font-size:12px;font-weight:500;line-height:1.35;letter-spacing:-.025em;}

/* 신청강좌 */
.mypage-course-list{display:flex;flex-direction:column;gap:12px;width:100%;}
.mypage-course-card{position:relative;display:flex;width:100%;align-items:center;padding:13px 18px;border:1px solid transparent;border-radius:22px;box-sizing:border-box;overflow:hidden;box-shadow:0 8px 18px rgba(28,26,46,.04);}
.mypage-course-icon{position:relative;z-index:1;display:flex;width:50px;height:50px;align-items:center;justify-content:center;flex:0 0 50px;margin-right:16px;border-radius:16px;background:rgba(255,255,255,.78);}
.mypage-course-icon svg{display:block;width:23px;height:23px;}
.mypage-course-content{position:relative;z-index:1;display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;}
.mypage-course-title{display:block;font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.05em;}
.mypage-course-period{display:flex;width:100%;align-items:center;gap:12px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(28,26,46,.10);}
.mypage-course-period span{display:block;flex:0 0 auto;color:#7F87A0;font-size:13px;font-weight:700;line-height:1.3;}
.mypage-course-period strong{display:block;color:#2F3852;font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.02em;}

.course-life{border:1px solid #F6DCE5;background:#FFF8FA;}
.course-life .mypage-course-icon{background:rgba(214,83,122,.14)!important;color:#D6537A!important;}
.course-life .mypage-course-title{color:#1C1A2E;}

.course-nonlife{border:1px solid #DCE8FA;background:#F7FAFF;}
.course-nonlife .mypage-course-icon{background:rgba(53,114,214,.14)!important;color:#3572D6!important;}
.course-nonlife .mypage-course-title{color:#1C1A2E;}

.course-variable{border:1px solid #D9EDDF;background:#F7FCF9;}
.course-variable .mypage-course-icon{background:rgba(47,158,92,.14)!important;color:#2F9E5C!important;}
.course-variable .mypage-course-title{color:#1C1A2E;}

/* 응시내역 */
.mypage-history-section{margin-bottom:10px;}
.mypage-history-list{display:flex;flex-direction:column;gap:12px;width:100%;}
.mypage-history-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:100px;padding:16px 17px;border:1px solid transparent;border-radius:20px;color:inherit;text-decoration:none;box-sizing:border-box;overflow:hidden;box-shadow:0 5px 14px rgba(28,26,46,.035);transition:transform .2s ease,box-shadow .2s ease;}
.mypage-history-row::before{display:none;}
.mypage-history-left{position:relative;z-index:1;min-width:0;}
.mypage-history-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.mypage-history-badge{display:flex;height:25px;align-items:center;justify-content:center;padding:0 10px;border-radius:9px;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;}
.mypage-history-date{color:#7F8798;font-size:12px;font-weight:700;line-height:1;letter-spacing:-.02em;}
.mypage-history-title{display:block;margin-top:11px;font-size:17px;font-weight:800;line-height:1.3;letter-spacing:-.045em;word-break:keep-all;}
.mypage-history-scorepanel{position:relative;z-index:1;display:grid;width:158px;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;border:0;background:transparent;overflow:visible;}
.mypage-history-scoreitem{display:flex;min-width:0;min-height:62px;flex-direction:column;align-items:center;justify-content:center;padding:8px 5px;border:1px solid transparent;border-radius:13px;box-sizing:border-box;text-align:center;}
.mypage-history-scoreitem+.mypage-history-scoreitem{border-left-width:1px;}
.mypage-history-scoreitem span{display:flex;width:100%;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:-.035em;white-space:nowrap;}
.mypage-history-scoreitem strong{display:flex;width:100%;align-items:center;justify-content:center;margin-top:6px;font-size:20px;font-weight:900;line-height:1;letter-spacing:-.045em;white-space:nowrap;}
.mypage-history-row:hover{transform:translateY(-2px);box-shadow:0 9px 19px rgba(28,26,46,.065);}
.mypage-history-row:active{transform:scale(.99);}

/* 생명보험 */
.history-life{border-color:#F6DCE5;background:#ffffff;}
.history-life .mypage-history-badge{background:rgba(214,83,122,.14);color:#D6537A;}
.history-life .mypage-history-title{color:#1C1A2E;}
.history-life .mypage-history-scoreitem{border-color:rgba(214,83,122,.14);background:rgba(214,83,122,.08);}
.history-life .mypage-history-scoreitem span{color:#A94A6A;}
.history-life .mypage-history-scoreitem strong{color:#D6537A;}

/* 손해보험 */
.history-nonlife{border-color:#DCE8FA;background:#ffffff;}
.history-nonlife .mypage-history-badge{background:rgba(53,114,214,.14);color:#3572D6;}
.history-nonlife .mypage-history-title{color:#1C1A2E;}
.history-nonlife .mypage-history-scoreitem{border-color:rgba(53,114,214,.14);background:rgba(53,114,214,.08);}
.history-nonlife .mypage-history-scoreitem span{color:#2E63B9;}
.history-nonlife .mypage-history-scoreitem strong{color:#3572D6;}

/* 변액보험 */
.history-variable{border-color:#D9EDDF;background:#ffffff;}
.history-variable .mypage-history-badge{background:rgba(47,158,92,.14);color:#2F9E5C;}
.history-variable .mypage-history-title{color:#1C1A2E;}
.history-variable .mypage-history-scoreitem{border-color:rgba(47,158,92,.14);background:rgba(47,158,92,.08);}
.history-variable .mypage-history-scoreitem span{color:#27844E;}
.history-variable .mypage-history-scoreitem strong{color:#2F9E5C;}

.mypage-history-scorepanel:has(> .mypage-history-scoreitem:only-child){width:76px!important;grid-template-columns:1fr!important;justify-self:end!important;margin-left:auto!important;}
.mypage-history-scorepanel > .mypage-history-scoreitem:only-child{width:76px!important;min-width:76px!important;grid-column:1!important;}

@media screen and (max-width:420px){
.mypage-page{padding-left:14px!important;padding-right:14px!important;}
.mypage-head{margin-bottom:28px!important;}
.mypage-head .gate-title{font-size:22px;}
.mypage-head .gate-subtitle{font-size:13px;}
.mypage-robot{width:52px;height:52px;flex-basis:52px;}
.mypage-robot img{width:48px;height:48px;}
.mypage-course-section{margin-top:48px;}
.mypage-section{margin-bottom:28px;}
.mypage-section-title{gap:9px;margin-bottom:13px;}
.mypage-title-icon{width:34px;height:34px;flex-basis:34px;border-radius:11px;}
.mypage-title-icon svg{width:18px;height:18px;}
.mypage-section-copy h2{font-size:17px;}
.mypage-section-copy p{font-size:11px;}
.mypage-course-list{gap:10px;}
.mypage-course-card{padding:12px 14px;border-radius:18px;}
.mypage-course-icon{width:44px;height:44px;flex-basis:44px;margin-right:13px;border-radius:14px;}
.mypage-course-icon svg{width:21px;height:21px;}
.mypage-course-title{font-size:17px;}
.mypage-course-period{gap:9px;margin-top:10px;padding-top:10px;}
.mypage-course-period span{font-size:12px;}
.mypage-course-period strong{font-size:13px;}
.mypage-history-list{gap:10px;}
.mypage-history-row{grid-template-columns:minmax(0,1fr) 146px;gap:10px;min-height:94px;padding:14px;border-radius:18px;}
.mypage-history-meta{gap:7px;}
.mypage-history-badge{height:23px;padding:0 8px;border-radius:8px;font-size:10px;}
.mypage-history-date{font-size:10px;}
.mypage-history-title{margin-top:9px;font-size:15px;}
.mypage-history-scorepanel{width:146px;gap:5px;}
.mypage-history-scoreitem{min-height:56px;padding:7px 3px;border-radius:11px;}
.mypage-history-scoreitem span{font-size:10px;}
.mypage-history-scoreitem strong{margin-top:5px;font-size:18px;}
}

		/* 게시판 */
		.notice-page{position:relative;width:100%;max-width:450px;margin:0 auto;padding:52px 16px 44px;background:linear-gradient(180deg,#F3F1FC 0%,#FAF9F7 205px,#FAF9F7 100%)!important;overflow:visible!important;box-sizing:border-box;}
		.notice-main{width:100%;max-width:450px;margin:0 auto;padding:0;background:transparent!important;overflow:visible!important;box-sizing:border-box;}
		.notice-title-box{width:100%;margin:0 0 24px;text-align:center;}
		.notice-mark{display:inline-flex;align-items:center;justify-content:center;margin:0 0 10px;padding:0;background:transparent;color:#5B52E0;font-size:12px;font-weight:900;line-height:1;letter-spacing:.06em;box-shadow:none;border:0;border-radius:0;}
		.notice-title{margin:0;font-size:28px;font-weight:900;line-height:1.15;color:var(--text);letter-spacing:-.06em;text-align:center;}
		.notice-subtitle{margin:8px 0 0;font-size:15px;font-weight:500;line-height:1.35;color:var(--muted);letter-spacing:-.035em;text-align:center;}
		.notice-search{display:flex;align-items:center;width:100%;height:48px;margin:0 0 14px;padding:0 8px 0 16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(28,26,46,.045);box-sizing:border-box;}
		.notice-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.035em;outline:none;}
		.notice-search input::placeholder{color:#A8A6B3;}
		.notice-search button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--purple-soft);color:var(--purple);cursor:pointer;}
		.notice-search button svg{display:block;width:18px;height:18px;}
		.notice-list{display:flex;flex-direction:column;gap:10px;width:100%;margin:0;padding:0;}
		.notice-card{display:block;width:100%;padding:17px 16px 14px;border:1px solid var(--line);border-radius:18px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 4px 14px rgba(28,26,46,.045);box-sizing:border-box;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
		.notice-card:hover{transform:translateY(-2px);border-color:#DCD7F8;box-shadow:0 10px 22px rgba(28,26,46,.08);}
		.notice-card-head{display:block;width:100%;margin:5px 0 5px;}
		.notice-card-title{display:contents;font-size:16px;font-weight:800;line-height:1.35;color:var(--text);letter-spacing:-.052em;word-break:keep-all;}
		.notice-card-text{display:block;margin:0;font-size:13px;font-weight:500;line-height:1.5;color:var(--muted);letter-spacing:-.035em;word-break:keep-all;}
		.notice-card-bottom{display:flex;align-items:center;justify-content:flex-end;width:100%;margin:12px 0 0;}
		.notice-date{display:block;font-size:11px;font-weight:700;color:#8A92A8;letter-spacing:-.025em;text-align:right;}

		.notice-paging{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:24px 0 0;padding:0;}
		.page-num,.page-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #E1E5F0;border-radius:12px;background:#fff;color:#64748B!important;font-size:13px;font-weight:900;text-decoration:none;box-shadow:0 4px 12px rgba(28,26,46,.05);transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;}
		.page-num.active{border-color:#5B52E0;background:#5B52E0;color:#fff!important;box-shadow:0 8px 18px rgba(91,82,224,.24);}
		.page-num:hover,.page-btn:hover{border-color:#5B52E0;background:#F0EDFD;color:#5B52E0!important;}
		.page-btn svg{display:block;width:16px;height:16px;stroke:currentColor;}

		.bo_notice .notice_icon{display:inline-block;background:#4158d1;width:25px;line-height:25px;border-radius:5px;font-weight:normal;color:#fff;text-align: center;margin-right:5px;}
		.sound_only{display:none;}
		/* 상세 게시글 */
		.notice-view-page{padding-bottom:92px!important;}
		.review-view-card{position:relative;display:block;width:100%;padding:0;border:1px solid #E7EAF3;border-radius:22px;background:#fff;box-shadow:0 8px 24px rgba(28,26,46,.06);box-sizing:border-box;overflow:hidden;}
		.review-view-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,#5B52E0 0%,#9B8CFF 100%);}
		.review-view-head{position:relative;width:100%;padding:24px 18px 19px;background:linear-gradient(180deg,#FBFAFF 0%,#fff 100%);border-bottom:1px solid #EEF1F6;box-sizing:border-box;}
		.review-view-title{margin:0;font-size:20px;font-weight:800;line-height:1.42;color:#5B52E0;letter-spacing:-.055em;word-break:keep-all;}
		.review-view-date{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;margin:14px 0 0;padding:0 10px;border:1px solid #E7EAF3;border-radius:999px;background:#fff;color:#8A92A8;font-size:11px;font-weight:800;line-height:1;letter-spacing:-.025em;box-shadow:0 4px 12px rgba(28,26,46,.035);}
		.review-view-date svg{display:block;width:13px;height:13px;stroke:currentColor;}
		.review-view-content{position:relative;width:100%;padding:20px 18px 22px;box-sizing:border-box;}
		.review-view-content p{position:relative;z-index:1;margin:0;font-size:14px;font-weight:500;line-height:1.85;color:#3C465C;letter-spacing:-.04em;word-break:keep-all;}
		.review-view-btns{display:flex;align-items:center;justify-content:center;width:100%;margin:18px 0 0;}
		.review-list-btn{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border-radius:15px;background:#5B52E0;color:#fff;font-size:14px;font-weight:900;text-decoration:none;letter-spacing:-.045em;box-shadow:0 8px 18px rgba(91,82,224,.24);}
		.review-list-btn:hover{background:#4B3FD6;}

		.bbs_info{position:relative;margin:0 0 18px;padding:14px 16px 14px 42px;border:1px solid #DDD8FA;border-radius:14px;background:#F4F1FF;color:#5C5674;font-size:13px;font-weight:600;line-height:1.6;letter-spacing:-.035em;word-break:keep-all;box-shadow:0 5px 14px rgba(91,82,224,.07);}
		.bbs_info::before{content:"!";position:absolute;left:15px;top:50%;display:flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:#5B52E0;color:#fff;font-size:12px;font-weight:900;line-height:1;transform:translateY(-50%);}

		.notice-main .btns {margin:20px 10px; display:flex; justify-content:flex-end; gap:5px;}
		.notice-main .btns .btn {display:block; color:#5B52E0; border:1px solid #5B52E0; line-height:34px; height:34px; padding:0px 20px; text-align:center; border-radius:5px;}


		.bbs_inputs {position:relative;display:block;width:100%;padding:20px;border:1px solid #E7EAF3;border-radius:22px;background:#fff;box-shadow:0 8px 24px rgba(28,26,46,.06);box-sizing:border-box;overflow:hidden;}
		.bbs_inputs .text_area {margin-top:15px; border:#d7d7d7 1px solid; border-radius:5px; padding:20px 15px;}
		.bbs_inputs .text_area.mt {margin-top:30px;}
		.bbs_inputs .con {margin-top:20px; height:88px; font-size:14px; color:#666; line-height:22px; overflow:auto;}
		.bbs_inputs .btns_tac .btn {margin:0;}
		.bbs_inputs .dls {position:relative; border:0px; padding:0px 0;}
		.bbs_inputs .dls .inbox {position:relative; max-width:100%;}
		.bbs_inputs .dls dl {position:relative; padding:10px 0; line-height:1.5em; margin-bottom:10px;}
		.bbs_inputs .dls dl:last-child {margin-bottom:0;}
		.bbs_inputs .dls dt {display:inline-block; width:100%; font-size:1.1em; color:#222;  font-weight:500; margin-bottom:10px;}
		.bbs_inputs .dls dt p{font-size:0.8em;}
		.bbs_inputs .dls dd {display:inline-block; width:100%; display:flex; gap:6px; flex-wrap:wrap;}
		.bbs_inputs .dls dd .full {width:100%;}
		.bbs_inputs .dls dd .half {width:100%; display:flex; gap:6px; flex-wrap:wrap;}
		.bbs_inputs .dls dd .half span {width:calc((100% - 6px)/2);}
		.bbs_inputs .dls .text {display:block; height:40px; border-radius:5px; margin:0; font-size:14px; border:#e1e1e1 1px solid; }
		.bbs_inputs .dls .text::placeholder {text-align:center;}
		.bbs_inputs .dls .text2 {display:inline-block; height:30px; border-radius:5px; margin:0; font-size:14px; border:#e1e1e1 1px solid; }
		.text::placeholder {color:#999;}
		.bbs_inputs .text,
		.bbs_inputs .tooltip {font-size:0.9em; line-height:1.2em;}
		.bbs_inputs .btn_confirm {position:relative; display:block; width:100%; margin:30px 0px;}
		.bbs_inputs .btn_confirm .btn {display:block; width:100%;  padding:0px 30px; color:#fff; background:#222; font-weight:700;  border-radius:5px; font-size:1.2em; line-height:50px; height:52px;}

		.faq {
		  max-width: 700px;  margin: 40px auto;
		}

		.faq-item {
		  border: 1px solid #ddd;   border-radius: 8px;  margin-bottom: 12px;  overflow: hidden;
		}

		.faq-question {
		  width: 100%;  padding: 18px 20px;  background: #f8f9fa;
		  border: none;  text-align: left;  font-size: 1.1em;  font-weight: 600;
		  cursor: pointer;  position: relative;  transition: background 0.3s ease;
		}

		.faq-question:hover {
		  background: #eceff1;
		}

		.faq-question::after {
		  content: "+";  position: absolute; top:12px; right: 20px;  font-size: 22px;
		}

		.faq-item.active .faq-question::after {
		  content: "−";
		}

		.faq-answer {
		 display:none;  overflow: hidden;  transition: max-height 0.35s ease, padding 0.35s ease;  background: #fff;  
		 padding: 0 20px; font-size: 1.2em;
		}

		.faq-item.active .faq-answer {
			display:inline-block;    padding: 15px 20px;
		}

		.faq-answer p {
		  margin: 0;   color: #555;  line-height: 1.6;
		}


/* 팝업 */
	.popup,
	.popup .dm {position:fixed; top:0; width:450px; max-width:100%; height:100%; margin:0 auto;}
	.popup {z-index:101; display:none;}
	.popup .dm {background:#0009;}
	.popup .inbox {position:absolute; top:50%; left:50%; width:400px; max-width:calc(100vw - 40px); max-height:calc(100vh - 40px); background:#fff; transform:translate(-50%,-50%); padding:15px;}
	.popup .btn_close {position:absolute; top:0; right:0px; width:40px; aspect-ratio:1/1; background:#333 url('/images/btn_close.png') no-repeat 50% 50%; font-size:0; background-size:20px;}
	.popup .tit {color:#222; font-weight:700;  border-bottom:#ebebeb 1px solid; font-size:18px; line-height:26px; padding-bottom:10px; margin-bottom:10px;}
	.popup .scroll {max-height:calc(100vh - 117px); overflow:hidden auto;}