/* 랜딩 syllabus 화면 스타일. 원본 seanprep-landing-temp syllabus.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}}

.sy-hero{padding:72px 0 40px}
.sy-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--sp-navy-70);margin-bottom:28px}
.sy-back:hover{color:var(--sp-navy)}
.sy-list{padding:8px 0 120px}
.sy-g+.sy-g{margin-top:56px}
.sy-g h2{font-size:22px;font-weight:900;letter-spacing:-.04em;margin-bottom:18px;padding-bottom:10px;border-bottom:1.5px solid var(--sp-navy)}
.sy-g ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.sy-c{display:flex;flex-direction:column;padding:24px 24px 22px}
.sy-c h3{font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.03em}
.sy-m{display:flex;gap:14px;margin-top:12px;font-size:14.5px;color:var(--sp-navy-70)}
.sy-m b{font-size:18px;color:var(--sp-navy);margin-right:2px}
.sy-d{font-size:13.5px;color:var(--sp-navy-55);margin-top:4px}
.sy-b{margin-top:auto;align-self:flex-start;box-shadow:none}
.sy-c h3+.sy-m{margin-top:12px}
.sy-c .sy-d{margin-bottom:20px}
.sy-note{margin-top:48px}
@media (max-width:860px){.sy-hero{padding:48px 0 28px}.sy-g ul{gap:16px}.sy-c{padding:20px}}

.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}}