/* 랜딩 refund 화면 스타일. 원본 seanprep-landing-temp refund.html 의 <style> 을 순서대로 옮겼다. */
/* Sean Prep 웹 디자인 정본 v1.3 (2026-10-14c) — 동그라미 획 순서를 아래에서 시작하는 시계 방향으로
   (v1.0 파일 seanprep-ds-261014.css 는 그대로 보존)
   규정 문서: seanprep-design-system-261014.md
   폰트는 페이지 <head>에서 불러온다:
   Pretendard Variable · Libre Caslon Text 700 · Nanum Pen Script */

:root{
  /* 색 — 네이비·페이퍼·골드는 아이덴티티 킷 v1.1 값 그대로 */
  --sp-navy:#0b2545;
  --sp-navy-70:rgba(11,37,69,.70);
  --sp-navy-55:rgba(11,37,69,.55);
  --sp-paper:#f5f2eb;
  --sp-sheet:#fffdf8;
  --sp-grid:rgba(11,37,69,.075);
  --sp-line:#d9d4c5;
  --sp-red:#d7262b;
  --sp-blue:#1f4fbf;
  --sp-hl:#ffe77a;
  --sp-tape:rgba(255,214,102,.82);
  --sp-gold:#b8912f; /* 로고 눈 전용. UI에 쓰지 않는다 */

  --sp-sans:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  --sp-serif:"Libre Caslon Text",Georgia,serif;
  --sp-pen:"Nanum Pen Script",cursive;

  --sp-w:1200px;
  --sp-gut:32px;
  --sp-r:6px;
  --sp-shadow:7px 7px 0 rgba(11,37,69,.13);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sp-sans);color:var(--sp-navy);background:var(--sp-paper);
  word-break:keep-all;overflow-wrap:break-word;letter-spacing:-.02em;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* 모눈 바탕 — 첫 화면과 「채점」이 주제인 장에만 */
.sp-grid{background-image:linear-gradient(var(--sp-grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--sp-grid) 1px,transparent 1px);background-size:28px 28px}

.sp-w{max-width:var(--sp-w);margin:0 auto;padding:0 var(--sp-gut);position:relative}
.sp-sec{padding:140px 0}
.sp-sec--sheet{background:var(--sp-sheet);border-top:1.5px solid var(--sp-navy);border-bottom:1.5px solid var(--sp-navy)}

/* 글자 */
.sp-h1{font-size:clamp(56px,8.6vw,128px);font-weight:900;line-height:1.04;letter-spacing:-.05em}
.sp-h2{font-size:clamp(36px,5vw,68px);font-weight:900;line-height:1.14;letter-spacing:-.05em}
.sp-h3{font-size:clamp(22px,2.2vw,28px);font-weight:800;line-height:1.3;letter-spacing:-.04em}
.sp-lead{font-size:clamp(17px,1.6vw,20px);color:var(--sp-navy-70);margin-top:16px}
.sp-small{font-size:13.5px;color:var(--sp-navy-55);line-height:1.6}
.sp-num{font-family:var(--sp-serif);font-weight:700;letter-spacing:0;font-variant-numeric:lining-nums}

/* 빨간펜 — 강사의 목소리에만 쓴다 */
.sp-pen{font-family:var(--sp-pen);font-weight:400;color:var(--sp-red);letter-spacing:0;line-height:1.2}
.sp-pen--lead{font-size:clamp(32px,3.6vw,50px);display:inline-block;transform:rotate(-2deg);transform-origin:left}

/* 형광펜 밑줄 */
.sp-hl{background:linear-gradient(transparent 56%,var(--sp-hl) 0);padding:0 .08em}

/* 빨간펜 동그라미 — 진짜 크레파스로 그은 획(이미지 2장). 글자 위에 덧그린다: 주변 글자 간격을 바꾸지 않고, 옆 글자와 겹쳐도 둔다.
   그리기 = 아래쪽 안에서 시작해 시계 방향으로 한 바퀴(main), 이어서 오른쪽 아래에서 시작점을 지나 빠지는 꼬리(tail).
   conic 각도 115deg·꼬리 112deg~186deg 는 이미지 속 획 위치와 .cr 상자 비율(약 1.41:1)로 잰 값이라 이미지나 상자 크기를 바꾸면 다시 재야 한다. */
@property --sp-a{syntax:'<angle>';inherits:true;initial-value:0deg}
.sp-circle{position:relative;display:inline-block;white-space:nowrap}
.sp-circle .cr{position:absolute;left:-.34em;top:-.14em;width:calc(100% + .72em);height:calc(100% + .36em);
  pointer-events:none;transform:rotate(-3deg);--sp-a:434deg}
.sp-circle .cr img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.sp-circle .cr .m{-webkit-mask:conic-gradient(from 115deg,#000 0 min(var(--sp-a),360deg),transparent 0);
  mask:conic-gradient(from 115deg,#000 0 min(var(--sp-a),360deg),transparent 0)}
.sp-circle .cr .t{-webkit-mask:conic-gradient(from 112deg,#000 0 clamp(0deg,var(--sp-a) - 360deg,74deg),transparent 0);
  mask:conic-gradient(from 112deg,#000 0 clamp(0deg,var(--sp-a) - 360deg,74deg),transparent 0)}
.sp-draw .cr{--sp-a:0deg;animation:sp-draw 1s cubic-bezier(.45,.15,.4,1) .35s forwards}
@keyframes sp-draw{to{--sp-a:434deg}}
@media (prefers-reduced-motion:reduce){.sp-draw .cr{animation:none;--sp-a:434deg}}

/* 빨간펜 체크 · 빗금 */
.sp-check,.sp-slash{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.sp-check path,.sp-slash path{fill:none;stroke:var(--sp-red);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* 상단 띠 */
.sp-top{position:sticky;top:0;z-index:50;background:var(--sp-paper);border-bottom:2px solid var(--sp-navy)}
.sp-top .sp-w{display:flex;justify-content:space-between;align-items:center;height:64px;gap:16px}
.sp-top__note{font-size:14px;color:var(--sp-navy-70)}

/* 로고 — 교재와 같은 스택 락업(본 심볼 + 두 줄 워드마크). 비율 심볼 : 글자 : 간격 = 30 : 11.45 : 4.1 (교재 정본)
   크기는 --s(심볼 지름)만 바꾼다. 하단 역상은 .sp-brand--rev (심볼 64px 이상 = 킷 하한) */
.sp-brand{--s:40px;display:inline-flex;align-items:center;gap:calc(var(--s)*4.1/30);color:var(--sp-navy)}
.sp-brand svg{width:var(--s);height:var(--s);flex:none;display:block}
.sp-brand .bw{display:flex;flex-direction:column;font-family:var(--sp-serif);font-weight:700;
  font-size:calc(var(--s)*11.45/30);line-height:1;letter-spacing:.06em}
.sp-brand--rev{--s:64px;color:var(--sp-paper)}

/* 버튼 */
.sp-btn{display:inline-flex;align-items:center;gap:12px;background:var(--sp-navy);color:var(--sp-paper);
  font-size:18px;font-weight:800;padding:20px 32px;border-radius:12px;transition:transform .15s,box-shadow .15s}
.sp-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--sp-red)}
.sp-btn--sm{font-size:14px;padding:10px 18px;border-radius:10px}
.sp-link{text-decoration:underline;text-underline-offset:3px}

/* 시험지 카드 */
.sp-sheet{background:var(--sp-sheet);border:1.5px solid var(--sp-navy);border-radius:var(--sp-r);box-shadow:var(--sp-shadow)}
.sp-tilt-l{transform:rotate(-.6deg)}.sp-tilt-r{transform:rotate(.5deg)}
.sp-tape{position:relative}
.sp-tape:before{content:"";position:absolute;left:50%;top:-14px;width:92px;height:28px;margin-left:-46px;
  background:var(--sp-tape);transform:rotate(-3deg)}

/* 따옴말 — 부모님은 네이비, 학생은 파란색. 손글씨 금지(빨간펜과 섞이지 않게) */
.sp-quote{font-size:18px;font-weight:600;line-height:1.55}
.sp-quote small{display:block;font-size:12.5px;font-weight:700;color:var(--sp-navy-55);margin-bottom:2px}
.sp-quote--kid{color:var(--sp-blue)}

/* 플랜 카드 */
.sp-plan{padding:42px 36px}
.sp-plan--pick{border:3px solid var(--sp-red);box-shadow:9px 9px 0 var(--sp-red)}
.sp-badge{display:inline-block;font-size:12.5px;font-weight:800;background:var(--sp-red);color:#fff;padding:5px 11px;border-radius:999px;letter-spacing:0}

/* 하단 */
.sp-foot{background:var(--sp-navy);color:var(--sp-paper);padding:72px 0 56px;font-size:13.5px;line-height:1.8}
.sp-foot a{text-decoration:underline;text-underline-offset:3px}
.sp-foot__by{font-family:var(--sp-serif);font-size:13px;letter-spacing:.06em;opacity:.7}
.sp-foot__legal{margin-top:24px;opacity:.72}
.sp-foot__tm{margin-top:16px;opacity:.55;font-size:12px}

/* 나타나기 */
.sp-rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.sp-rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sp-rv{opacity:1;transform:none;transition:none}}

@media (max-width:860px){
  :root{--sp-gut:20px}
  .sp-sec{padding:88px 0}
  .sp-top__note{display:none}
  .sp-plan{padding:32px 24px}
  .sp-tilt-l,.sp-tilt-r{transform:none}
}

.sp-top__note{font-size:14px;color:var(--sp-navy-70)}
.sp-top .sp-w{gap:14px}
.tb-open{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:#fff;background:var(--sp-red);border-radius:999px;padding:4px 11px;white-space:nowrap;transform:rotate(-2deg)}
.tb-open b{font-weight:900}
.sp-top__note{margin-right:auto;color:var(--sp-navy)}
.sp-top__note b{font-weight:800}
.sp-top__note .tb-g{color:var(--sp-red)}
.sp-top__note .tb-seat{color:var(--sp-red);background:var(--sp-hl);padding:0 5px;border-radius:3px}
.tb-sep{display:inline-block;width:1px;height:12px;background:var(--sp-navy-55);margin:0 10px;vertical-align:-1px}
.sp-top .sp-brand{margin-right:4px}
@media(max-width:860px){.tb-open{font-size:12px;padding:3px 9px;margin-right:auto}}
.su{position:relative;display:inline-flex;cursor:not-allowed}
.su-off{opacity:.45;pointer-events:none;box-shadow:none}
.su-soon{position:absolute;top:-15px;right:-16px;z-index:2;font-size:14px;font-weight:800;line-height:1.2;color:#fff;background:var(--sp-red);border-radius:999px;padding:5px 12px;white-space:nowrap;transform:rotate(4deg);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.sp-top .su-soon{top:-10px;right:-10px;font-size:11px;padding:2px 8px}
@media(max-width:860px){.sp-top .su-soon{top:-10px;right:-8px;font-size:10.5px;padding:2px 7px}}
.sp-foot{padding:64px 0 40px}
.ft-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid rgba(245,242,235,.18)}
.ft-brand{display:flex;align-items:flex-end;gap:16px}
.ft-nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.sp-foot .ft-nav a{text-decoration:none;opacity:.85}
.sp-foot .ft-nav a:hover{opacity:1;text-decoration:underline}
.ft-nav b{font-weight:800}
.ft-grid{display:grid;grid-template-columns:1fr auto;gap:32px 56px;padding:28px 0;border-bottom:1px solid rgba(245,242,235,.18)}
.ft-info{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:10px 40px;margin:0}
.ft-info>div{display:flex;flex-direction:column;gap:2px}
.ft-info .w{grid-column:1/-1}
.ft-info dt{font-size:12px;opacity:.55}
.ft-info dd{margin:0;opacity:.9}
.sp-foot .ft-chk{margin-left:8px;font-size:12px;opacity:.7}
.ft-cs{text-align:right}
.ft-cs-h{font-size:12px;opacity:.55}
.ft-tel{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.ft-mail{display:block;margin-top:2px;font-size:14px;color:inherit;opacity:.85;text-decoration:none}
.ft-mail:hover{text-decoration:underline}
.sp-foot .ft-kakao{display:inline-block;margin-top:8px;text-decoration:none;background:#fee500;color:#191919;font-weight:700;font-size:13px;border-radius:999px;padding:6px 14px}
.ft-bot{padding-top:20px;font-size:12px;opacity:.7}
.ft-bot .sp-foot__tm{margin-top:4px}
@media(max-width:860px){.ft-grid{grid-template-columns:1fr}.ft-cs{text-align:left}.ft-info{grid-template-columns:1fr 1fr}}
.sp-foot .ft-chk{white-space:nowrap}

.rf-hero{padding:72px 0 36px}
.rf-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--sp-navy-70);margin-bottom:28px}
.rf-back:hover{color:var(--sp-navy)}
.rf-body{padding:8px 0 120px}
.rf-lay{display:grid;grid-template-columns:200px minmax(0,1fr);gap:64px;align-items:start}
.rf-toc{position:sticky;top:96px}
.rf-toc p{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--sp-navy-55);margin-bottom:12px}
.rf-toc ol{list-style:none;display:flex;flex-direction:column;gap:2px;border-left:1.5px solid var(--sp-line)}
.rf-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1.5px;border-left:2px solid transparent;font-size:14px;color:var(--sp-navy-55);line-height:1.4}
.rf-toc a:hover{color:var(--sp-navy)}
.rf-toc a.on{color:var(--sp-navy);font-weight:800;border-left-color:var(--sp-navy)}
.rf-main{max-width:760px}
.rf-sec{scroll-margin-top:96px}
.rf-sec+.rf-sec{margin-top:72px}
.rf-k{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--sp-red,#d62b2b);margin-bottom:8px}
.rf-sec h2{font-size:26px;font-weight:900;letter-spacing:-.04em;line-height:1.3;padding-bottom:14px;border-bottom:1.5px solid var(--sp-navy);margin-bottom:22px}
.rf-sec h3{font-size:18px;font-weight:800;letter-spacing:-.03em;margin:30px 0 10px}
.rf-sec p,.rf-sec li{font-size:16px;line-height:1.75;color:var(--sp-navy-85,var(--sp-navy))}
.rf-sec p+p{margin-top:10px}
.rf-ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.rf-ul li{position:relative;padding-left:18px}
.rf-ul li:before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--sp-navy)}
.rf-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rf-card{padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.rf-card b{font-size:13px;font-weight:800;color:var(--sp-navy-55);letter-spacing:.02em}
.rf-card strong{font-size:19px;font-weight:900;letter-spacing:-.03em;line-height:1.35}
.rf-card span{font-size:14.5px;line-height:1.6;color:var(--sp-navy-70)}
.rf-f{margin:16px 0;padding:18px 20px;background:#fff;border:1.5px solid var(--sp-navy);border-radius:8px;font-size:16px;font-weight:700;line-height:1.7}
.rf-f small{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--sp-navy-70)}
.rf-ex{margin-top:14px;padding:16px 20px;background:#efeadf;border-radius:8px;font-size:15px;line-height:1.7}
.rf-ex b{font-weight:800}
.rf-tbl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 4px}
.rf-tbl>div{padding:18px 18px 16px;text-align:center}
.rf-tbl em{display:block;font-style:normal;font-family:var(--sp-serif);font-size:40px;font-weight:700;line-height:1}
.rf-tbl em small{font-family:inherit;font-size:16px;margin-left:2px}
.rf-tbl span{display:block;margin-top:10px;font-size:15px;font-weight:800}
.rf-steps{counter-reset:s;list-style:none;display:flex;flex-direction:column;gap:12px}
.rf-steps li{counter-increment:s;position:relative;padding-left:40px}
.rf-steps li:before{content:counter(s);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--sp-navy);color:var(--sp-paper);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.rf-note{margin-top:14px;font-size:14px!important;color:var(--sp-navy-55)!important}
.rf-cs{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.rf-cs a.tel{font-size:22px;font-weight:800}
.rf-cs a.kk{background:#fee500;color:#191919;font-weight:700;font-size:14px;border-radius:999px;padding:8px 16px}
.rf-sec a.ln{text-decoration:underline;text-underline-offset:3px;font-weight:700}
@media (max-width:1000px){.rf-lay{grid-template-columns:1fr;gap:0}.rf-toc{display:none}}
@media (max-width:760px){.rf-hero{padding:48px 0 24px}.rf-sum{grid-template-columns:1fr;gap:12px}.rf-sec+.rf-sec{margin-top:56px}
 .rf-sec h2{font-size:22px}.rf-sec p,.rf-sec li{font-size:15.5px}.rf-f{font-size:15px;padding:16px}.rf-tbl{gap:8px}.rf-tbl>div{padding:14px 8px}.rf-tbl em{font-size:32px}.rf-tbl span{font-size:13.5px}}

.rf-tw{overflow-x:auto;margin:14px 0 6px;border:1.5px solid var(--sp-navy);border-radius:8px;background:#fff}
.rf-tw table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;line-height:1.6}
.rf-tw th,.rf-tw td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sp-line)}
.rf-tw th{background:#efeadf;font-weight:800;white-space:nowrap}
.rf-tw tr:last-child td{border-bottom:0}
/* 휴대폰 폭: 세 칸 표는 화면 안에서 줄바꿈해 보이게 한다(640px 고정이면 오른쪽 칸이 잘려 보였다). 네 칸 표만 가로로 밀어 본다 */
@media (max-width:560px){.rf-tw table{min-width:0;font-size:13.5px}.rf-tw th,.rf-tw td{padding:10px}.rf-tw table:has(th:nth-child(4)){min-width:560px}}
.rf-ol{list-style:none;counter-reset:o;display:flex;flex-direction:column;gap:8px}
.rf-ol>li{counter-increment:o;position:relative;padding-left:26px}
.rf-ol>li:before{content:counter(o) ".";position:absolute;left:0;font-weight:800}
.rf-meta{margin-top:14px;font-size:14px;color:var(--sp-navy-55)}
.rf-main{min-width:0}
@media (max-width:1000px){.rf-lay{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.sp-foot .ft-info dd{word-break:keep-all}}
@media (max-width:480px){.sp-foot .ft-info{grid-template-columns:minmax(0,1fr)}}

.nw{white-space:nowrap}@media(max-width:560px){.cp-sep{display:none}.cp-k{display:block}.ft-chk{display:table;margin:6px 0 0!important;padding:6px 0}}.sp-top .sp-btn--sm{white-space:nowrap}
@media (max-width:360px){.sp-top .sp-w{padding-left:14px;padding-right:14px;gap:6px}.sp-top .tb-open{font-size:11px;padding:4px 8px}.sp-top .sp-btn--sm{font-size:12px;padding:8px 9px}}
.kkm{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px}
.kkm[hidden]{display:none}
.kkm-bg{position:absolute;inset:0;background:rgba(11,37,69,.55)}
.kkm-box{position:relative;width:100%;max-width:420px;background:var(--sp-sheet);color:var(--sp-navy);border:2px solid var(--sp-navy);border-radius:14px;box-shadow:var(--sp-shadow);padding:26px 22px 20px}
.kkm-box h3{font-size:20px;font-weight:800;margin:0 0 14px;padding-right:24px;word-break:keep-all}
.kkm-ol{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.6;word-break:keep-all}
.kkm-ol li{margin:0 0 6px}
.kkm-msg{white-space:pre-wrap;font-size:15px;line-height:1.6;background:#fff;border:1px dashed var(--sp-line);border-radius:8px;padding:10px 12px;margin:0 0 14px}
.kkm-us{font-size:13px;line-height:1.55;color:var(--sp-navy-70);background:rgba(11,37,69,.05);border-radius:8px;padding:8px 12px;margin:-6px 0 14px;word-break:keep-all}
.kkm-go{display:flex;width:100%;justify-content:center}
.kkm-fine{font-size:13px;color:var(--sp-navy-55);margin:8px 0 0;text-align:center}
.kkm-x{position:absolute;top:8px;right:8px;border:0;background:none;font-size:26px;line-height:1;color:var(--sp-navy-70);cursor:pointer;padding:4px 8px}

.tb-login{font-size:14px;font-weight:800;color:var(--sp-navy);text-decoration:none;white-space:nowrap;padding:8px 2px}
.tb-login:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:860px){.tb-login{font-size:13px;padding:8px 0}}
@media(max-width:560px){.sp-top .sp-w{gap:8px}.sp-top .sp-btn--sm{font-size:13px;padding:8px 12px}}
@media(max-width:360px){.sp-top .sp-w{gap:6px}.sp-top .sp-btn--sm{font-size:12px;padding:8px 9px}}
.tb-login.tb-in{background:var(--sp-sheet);border:1.5px solid var(--sp-navy);border-radius:10px;padding:8.5px 16px;transition:transform .15s,box-shadow .15s}
.tb-login.tb-in:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--sp-red)}
@media(max-width:860px){.tb-login.tb-in{padding:9.5px 14px}.sp-top .sp-brand{margin-right:auto}}
@media(max-width:560px){.tb-login.tb-in{padding:7px 10px}}
@media(max-width:360px){.tb-login.tb-in{font-size:12px;padding:6.6px 8px}}