@charset "euc-kr";

:root{
	--primary:#1362A3;
	--text:#333333;
	--border:#dbdbdb;
}
/* common
---------------------------------------------------- */
.mo-only { display:none; }
.story-wrap {position:relative;overflow:hidden;background:#fff;color:#333;font-family:"Pretendard","Noto Sans KR","Malgun Gothic",Dotum,sans-serif}
.story-wrap * {box-sizing:border-box}
.story-inner {position:relative;width:1024px;margin:0 auto}
.story-wrap p,.story-wrap h2,.story-wrap h3 {margin:0}
.story-wrap a {text-decoration:none}
.story-wrap:before {content:"";position:absolute;top:-140px;left:50%;z-index:0;width:2000px;height:1247px;background:url("https://russeldata.megastudy.net/campus/images/russel/campus_common/2026/grade_story/visual_bg.svg") no-repeat 50% 0 / 2000px 1247px;transform:translateX(-50%);pointer-events:none}
.visual,.story-section,.story-textbar {position:relative;z-index:1}

/* visual
---------------------------------------------------- */
.visual {overflow:hidden;padding:clamp(40px, calc(40px + (90 - 40) * ((100vw - 360px) / 840)), 90px) 0 clamp(16px, calc(16px + (32 - 16) * ((100vw - 360px) / 840)), 32px);background:transparent;text-align:center}
.visual-title {position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(16px, calc(16px + (32 - 16) * ((100vw - 360px) / 840)), 32px)}
.visual-title p {color:#333;font-size:clamp(17px, calc(17px + (24 - 17) * ((100vw - 360px) / 840)), 24px);font-weight:400;line-height:1.333;letter-spacing:-0.02em;word-break:keep-all}
.visual-title p strong {font-weight:700}
.visual-title h2 {background:linear-gradient(168.47deg,#00f0ff 4.3792%,#18418e 62.944%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(50px, calc(50px + (84 - 50) * ((100vw - 360px) / 840)), 84px);font-weight:800;line-height:1;letter-spacing:-0.02em;white-space:nowrap}
.visual-summary {margin-top:clamp(-8px, calc(-8px + (0 - -8) * ((100vw - 360px) / 840)), 0px)}
.visual-summary p {font-size:clamp(16px, calc(16px + (20 - 16) * ((100vw - 360px) / 840)), 20px);font-weight:400;line-height:1.4;letter-spacing:-0.02em;word-break:keep-all}
.visual-summary strong {font-weight:600}

/* section
---------------------------------------------------- */
.story-section {position:relative;padding:clamp(40px, calc(40px + (60 - 40) * ((100vw - 360px) / 840)), 60px) 0;background:#fff}
.story-section:nth-child(2n+1){background: #F8F8F8;}
.section-campus {padding-top:0;background:transparent}
.section-label {position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.section-label-line:before {content:"";display:block;width:12px;height:52px;margin-bottom:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='53' viewBox='0 0 12 53' fill='none'%3E%3Ccircle opacity='.2' cx='6' cy='46.5' r='6' fill='%231362A3'/%3E%3Ccircle cx='6' cy='46.5' r='3' fill='%231362A3'/%3E%3Cpath d='M6 46.5V.5' stroke='url(%23a)' stroke-linecap='round' stroke-dasharray='3 3'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='6.5' y1='3.95' x2='6.5' y2='33.85' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%230071A1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");}
.section-label-line:after {display:none}
.section-label span {display:inline-flex;align-items:center;justify-content:center;min-width:160px;height:46px;padding:4px clamp(24px, calc(24px + (32 - 24) * ((100vw - 360px) / 840)), 32px);border-radius:999px;background:linear-gradient(127deg, #00F0FF -12.43%, #18418E 76.59%);color:#fff;font-size:clamp(22px, calc(22px + (28 - 22) * ((100vw - 360px) / 840)), 28px);font-weight:700;line-height:1.35;letter-spacing:-0.02em}
.section-label p {width:100%;color:#999;font-size:12px;font-weight:400;line-height:18px;text-align:right}
.story-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.btn-more {display:flex;align-items:center;justify-content:center;gap:5px;width:160px;height:40px;margin:24px auto 0;border:1px solid #777;border-radius:4px;background:#fff;color:#222;font-size:15px;font-weight:500;line-height:1.4;letter-spacing:-0.02em}
.btn-more:after {content:"";width:8px;height:8px;border-right:1px solid #222;border-bottom:1px solid #222;transform:rotate(45deg);margin-top:-4px}

/* graph
---------------------------------------------------- */
.graph-wrap {display:flex;justify-content:center;width:100%}
.graph-box {position:relative;display:flex;align-items:flex-end;justify-content:center;gap:100px;width:252px;max-width:100%;height:214px;margin:0 auto}
.graph-box .left-bar,.graph-box .right-bar {position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;text-align:center;white-space:nowrap}
.graph-box .score {font-size:15px;font-weight:400;line-height:22px;letter-spacing:-0.15px;color:#555}
.graph-box .right-bar .score {font-size:16px;font-weight:700;line-height:24px;letter-spacing:-0.16px;color:#1362a3}
.graph-box .left-bar .score {position:absolute;left:50%;z-index:3;width:60px;margin-left:-30px;margin-bottom:0;text-align:center}
.graph-box .bar-name {font-size:13px;font-weight:400;line-height:18px;color:#777}
.graph-box .bar-3d {position:relative;width:76px;overflow:hidden}
.graph-box .bar-3d.gray {height:var(--gray-total,98px)}
.graph-box .bar-3d.gray .bar-top {position:absolute;left:16.84px;top:var(--gray-top,10.66px);z-index:2;width:42.686px;height:42.686px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.6863 42.6863' fill='none'%3E%3Cpath d='M12.0208 12.0208L42.6863 0L30.6655 30.6655L0 42.6863L12.0208 12.0208Z' fill='%23E9E9E9'/%3E%3C/svg%3E") no-repeat center/100% 100%;transform:rotate(45deg);transform-origin:center}
.graph-box .bar-3d.gray .bar-body {position:absolute;left:8px;top:var(--gray-body-top,32px);width:60.184px;height:var(--gray-body,66px)}
.graph-box .bar-3d.gray .bar-left {position:absolute;left:0;top:0;width:30px;height:var(--gray-body,66px);background:#d3d3d3;clip-path:polygon(0 0,100% 0,100% 100%,0 var(--gray-cut,51px))}
.graph-box .bar-3d.gray .bar-right {position:absolute;left:30px;top:0;width:30.184px;height:var(--gray-body,66px);background:#979797;clip-path:polygon(0 0,100% 0,100% var(--gray-cut,51px),0 100%)}

.graph-box .bar-3d.blue {height:159px;background:none;overflow:visible}
.graph-box .bar-3d.blue:before {content:"";position:absolute;left:0;top:0;width:76px;height:159px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='159' viewBox='0 0 76 159' fill='none'%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M4 13L38 13V159L4 144V13Z' fill='%231362A3'/%3E%3Cpath d='M38 13.0001H72.1838V144L38 159L38 13.0001Z' fill='%23004A87'/%3E%3Cpath d='M38.1838 7.14193e-07L72.3675 13.1838L38.1838 26.3675L4.00001 13.1838L38.1838 7.14193e-07Z' fill='%233676AC'/%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='76' height='159' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat 0 0/76px 159px}

.graph-box .score-up {position:absolute;left:calc(50% + 18px);top:18px;z-index:2;display:flex;align-items:flex-start;justify-content:center;width:140px;height:128px;transform:translateX(-50%)}
.graph-box .score-up .circle {position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;height:84px;margin-right:-83px;border:1.244px solid rgba(237,32,36,0.4);border-radius:999px;background:rgba(237,32,36,0.1);color:#333;font-size:16.588px;line-height:24.882px;text-align:center;letter-spacing:-0.1659px}
.graph-box .score-up .circle strong {display:block;margin-bottom:-4px;font-size:20.735px;font-weight:700;line-height:29.029px;letter-spacing:-0.4147px}
.graph-box .score-up .arrow {position:relative;z-index:1;width:130.632px;height:128.559px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='131' height='129' viewBox='0 0 131 129' fill='none'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.46484 108.293S55.9018 99.3741 80.295 50.668L71.371 45.4469S101.414 26.7948 107.003 7.41687C107.003 7.41687 111.848 100.623 2.46484 108.293Z' fill='%23C33639'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.46484 108.293S59.9349 116.916 98.0793 61.6258L105.792 66.7824S113.67 50.7827 107.003 7.41687C107.003 7.41687 103.434 88.5046 2.46484 108.293Z' fill='%23E37A7C'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='2.46484' y='7.41687' width='121.732' height='120.025' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='10.3676' dy='14.5147'/%3E%3CfeGaussianBlur stdDeviation='2.07353'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") no-repeat center/100% 100%}

/* card °øÅë
---------------------------------------------------- */
.story-card {display:flex;flex-direction:column;overflow:hidden;border-radius:8px}
.story-card.is-hidden {display:none}
.card-top {display:flex;flex-direction:column;gap:24px;min-height:308px;padding:24px;border:1px solid var(--border);border-bottom:0;border-radius:8px 8px 0 0;background:#fff}
.student-info {word-break:keep-all}
.student-info .school {color:#222;font-size:clamp(20px, calc(20px + (24 - 20) * ((100vw - 360px) / 840)), 24px);font-weight:700;line-height:1.333;letter-spacing:-0.02em}
.student-info .result {margin-top:4px;color:#777;font-size:16px;font-weight:400;line-height:24px;letter-spacing:-0.01em}
.student-info .result strong {color:#333;font-weight:700}
.score-chart {position:relative;display:flex;align-items:flex-end;justify-content:center;gap:100px;min-height:198px;padding-top:18px}
.score-bar {position:relative;width:60px;height:var(--prev-h);background:#cfcfcf;transform:skewY(0deg)}
.score-bar:before {content:"";position:absolute;left:0;top:-15px;width:60px;height:30px;background:#eee;transform:skewY(-24deg)}
.score-bar:after {content:var(--prev-score);position:absolute;left:50%;top:-34px;width:56px;margin-left:-28px;color:#555;font-size:15px;line-height:22px;text-align:center;letter-spacing:-0.01em}
.score-bar span {position:absolute;left:50%;top:calc(100% + 10px);width:70px;margin-left:-35px;color:#777;font-size:13px;line-height:18px;text-align:center}
.score-bar.next {height:var(--next-h);background:#0a5b98}
.score-bar.next:before {background:#2c84c4}
.score-bar.next:after {content:var(--next-score);top:-32px;color:#1362a3;font-size:16px;font-weight:700;line-height:24px}
.card-bottom {flex:1;padding:24px;border:1px solid var(--border);border-radius:0 0 8px 8px;background:rgba(24,65,142,0.05);word-break:keep-all}
.card-bottom h3 {color:#333;font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em}
.card-bottom .tag {margin-top:2px;color:#1362a3;font-size:16px;font-weight:700;line-height:24px;letter-spacing:-0.01em}
.card-bottom .desc {margin-top:12px;color:#555;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.01em}

/* ÇÏ´Ü ¹®±¸ ¹è³Ê */
.story-textbar {padding:clamp(24px, calc(24px + (40 - 24) * ((100vw - 360px) / 840)), 40px) 16px;background:#15589c;color:#fff;text-align:center;word-break:keep-all}
.story-textbar p {font-size:clamp(18px, calc(18px + (24 - 18) * ((100vw - 360px) / 840)), 24px);font-weight:400;line-height:1.333;letter-spacing:-0.48px;}
.story-textbar strong {display:block;color:#fff;font-size:clamp(24px, calc(24px + (32 - 24) * ((100vw - 360px) / 840)), 32px);font-weight:700;line-height:1.3125;letter-spacing:-0.64px}

/* ====================================================
   RESPONSIVE (Media Queries)
==================================================== */
/* ÅÂºí¸´ ÀÌÇÏ (1199px ÀÌÇÏ) */
@media (max-width:1199px) {
	.mo-only { display:none; }
	.story-inner {width: auto; margin: 0 2%;}
	.card-top {min-height:328px}
}
/* ¸ð¹ÙÀÏ ÀÌÇÏ (767px ÀÌÇÏ) */
@media (max-width:767px){
	.mo-only { display:inline-block; }
	.pc-ta-only {display: none;}
	.story-inner {width:auto;margin:0 16px}
	.story-grid {grid-template-columns:1fr}
	.story-textbar p{margin-bottom: 8px;}
}