/* ══ 문법 문제 출제 서비스 — 티저 페이지 스타일 ═══════════════════════════════
   이 화면의 스타일 전부가 이 한 파일에 있다. HTML 에는 CSS 가 없다.

   파일 한가운데 구분선이 하나 있다 —
     위  : 공용 토큰·리셋·타이포
     아래: 이 화면 전용. 뒤에 있으므로 위를 덮는다.
   같은 셀렉터가 위아래에 둘 다 있으면 **아래쪽이 적용된다.**
   순서가 바뀌면 캐스케이드가 어긋나므로 재배치하지 말 것(삭제·추가만).

   ⚑ 글꼴은 HTML 의 <link> 로 먼저 불러온다.
   ⚑ 값을 바꾸기 전에 doc/06_결정_기록.md 의 「건드리면 깨지는 것들」을 읽을 것. */

:root {
  --accent: #172e55;
  --accent-600: #0f1f3d;
  --accent-050: #eaeef5;
  --point: #22b8c4;
  --point-600: #0e7c8c;
  --point-050: #e2f4f6;
  --grad: linear-gradient(157deg, #345a8d 0%, #1f3d69 50%, #13284a 100%);
  --grad-sheen: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 10px 22px -12px rgba(19, 40, 74, 0.55);
  
  --ink: #1a1a1a;
  --body: #3b3b3b;
  --muted: #6a6a6a;
  --faint: #8a8a8a;
  --line: #e8e8e8;
  --line-soft: #f2f2f2;
  --bg: #ffffff;
  --bg-tint: #f6f6f6;
  --ok: #1e9245;
  --ok-bg: #d1f5de;
  --warn: #c48f00;
  --warn-bg: #ffe8aa;
  --sans: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --display:
    "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif; 
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(0.22, 0.7, 0.28, 1);
  --shadow: 0 1px 2px rgba(26, 26, 26, 0.03), 0 18px 38px -26px rgba(26, 26, 26, 0.22);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
@keyframes in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.at-gate .wrap {
  display: none;
}
body.at-gate .footbar {
  display: none;
}
@keyframes gbreath {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.07) translate(1.4%, -1.4%);
    opacity: 1;
  }
}
@keyframes hintBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@keyframes vocRow {
  0%,
  45%,
  100% {
    background: transparent;
  }
  15% {
    background: var(--accent-050);
  }
}
@keyframes okGlow {
  0%,
  50%,
  100% {
    box-shadow: 0 0 0 0 rgba(23, 46, 85, 0);
  }
  68% {
    box-shadow: 0 0 0 2px rgba(23, 46, 85, 0.38);
  }
}
@keyframes ckPop {
  0%,
  52% {
    transform: scale(0.4);
    opacity: 0.2;
  }
  66% {
    transform: scale(1.25);
    opacity: 1;
  }
  78%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes barGrow {
  0% {
    transform: scaleY(0.05);
  }
  28% {
    transform: scaleY(1);
  }
  88% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.05);
  }
}
@keyframes aimSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes aimBlob1 {
  0% {
    transform: translate(0, -9.5px);
  }
  38% {
    transform: translate(0, -10.5px);
  }
  52% {
    transform: translate(0, -1px);
  }
  58% {
    transform: translate(0, -1px);
  }
  70% {
    transform: translate(0, -16px);
  }
  84% {
    transform: translate(0, -8.5px);
  }
  100% {
    transform: translate(0, -9.5px);
  }
}
@keyframes aimBlob2 {
  0% {
    transform: translate(8.2px, 4.8px);
  }
  38% {
    transform: translate(9.1px, 5.3px);
  }
  52% {
    transform: translate(0.9px, 0.5px);
  }
  58% {
    transform: translate(0.9px, 0.5px);
  }
  70% {
    transform: translate(13.9px, 8px);
  }
  84% {
    transform: translate(7.4px, 4.3px);
  }
  100% {
    transform: translate(8.2px, 4.8px);
  }
}
@keyframes aimBlob3 {
  0% {
    transform: translate(-8.2px, 4.8px);
  }
  38% {
    transform: translate(-9.1px, 5.3px);
  }
  52% {
    transform: translate(-0.9px, 0.5px);
  }
  58% {
    transform: translate(-0.9px, 0.5px);
  }
  70% {
    transform: translate(-13.9px, 8px);
  }
  84% {
    transform: translate(-7.4px, 4.3px);
  }
  100% {
    transform: translate(-8.2px, 4.8px);
  }
}
@keyframes aimWave {
  0%,
  54% {
    transform: scale(0.18);
    opacity: 0;
  }
  60% {
    opacity: 0.75;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
@keyframes aimBreath {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes ocUp {
  0%,
  42% {
    transform: translateY(0);
  }
  50%,
  92% {
    transform: translateY(-115%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ocDn {
  0%,
  42% {
    transform: translateY(115%);
  }
  50%,
  92% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(115%);
  }
}
@keyframes drillFill {
  0%,
  14% {
    color: transparent;
    background: transparent;
  }
  28%,
  90% {
    color: var(--accent);
    background: var(--point-050);
  }
  100% {
    color: transparent;
    background: transparent;
  }
}

.check {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: none;
  place-items: center;
}
.check svg {
  width: 15px;
  height: 15px;
}

.lbl {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  margin: 24px 0 10px;
}
.lbl:first-child {
  margin-top: 0;
}

:root {
  
  --text-micro: 0.844rem; 
  --text-small: 0.984rem; 
  --text-body: 1.125rem; 
  --text-emphasis: 1.266rem; 
  --text-section: 1.406rem; 
  --text-title: 1.688rem; 
  --text-page: 2.25rem; 
  --line-ui: 1.4;
  --line-body: 1.55;

--sans:
    "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  --display:
    "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif; 
}

html {
  font-size: 100%;
}

button,
select,
input,
textarea {
  font-family: var(--sans);
}

.lp-wrap{max-width:1280px;margin:0 auto;padding:0 40px;}
.lp-sec{padding:148px 0;}
.lp-sec.tint{background:var(--bg-tint);}

.lp-shd{margin:0 0 82px;}
.lp-shd.center{text-align:center;}

.lp-eyebrow{display:inline-flex;align-items:center;font-size:21px;font-weight:800;letter-spacing:.08em;
  color:var(--accent);background:var(--accent-050);border:0;
  border-radius:999px;padding:11px 26px;margin-bottom:28px;}
.lp-shd h2{font-family:var(--display);font-size:50px;line-height:1.26;font-weight:800;
  letter-spacing:-.035em;color:var(--ink);margin:0;}
.lp-shd p{font-size:23px;line-height:1.7;color:var(--muted);margin:24px 0 0;max-width:56ch;}
.lp-shd.center p{margin-left:auto;margin-right:auto;}

.wf{position:relative;border:1px solid var(--line);background:var(--bg-tint);border-radius:8px;
  display:grid;place-items:center;overflow:hidden;}
.wf-band.tint .wf,
.lp-sec.tint .wf{background:var(--bg);}
.wf-rail::-webkit-scrollbar{height:8px;}
.wf-rail::-webkit-scrollbar-track{background:transparent;}
.wf-rail::-webkit-scrollbar-thumb{background:#C9D4E5;border-radius:999px;}

.wf-books{display:flex;flex-wrap:wrap;gap:18px;}
.wf-book{position:relative;width:128px;aspect-ratio:.72;border:1px solid var(--line);
  border-radius:5px;background:var(--bg);display:flex;align-items:center;justify-content:center;
  padding:16px 13px 16px 22px;overflow:hidden;}   
.wf-book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:var(--bg-tint);border-right:1px solid var(--line);}
.wf-book span{position:relative;z-index:1;font-size:15px;font-weight:700;line-height:1.4;
  color:var(--body);word-break:keep-all;text-align:center;}

.wf-book.cov{padding:0;border-color:#DCE0E7;background:center/cover no-repeat var(--bg-tint);
  box-shadow:0 1px 2px rgba(26,26,26,.05),0 10px 20px -14px rgba(26,26,26,.4);}
.wf-book.cov::before{display:none;}
.wf-book.cov > span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

.wf-row{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding:82px 0;}
.wf-row + .wf-row{border-top:1px solid var(--line);}
.wf-row.rev .wf-tx{order:2;}
.wf-row .wf-no{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:800;
  letter-spacing:.1em;color:var(--accent);}
.wf-no i{font-style:normal;letter-spacing:0;display:inline-grid;place-items:center;min-width:32px;height:27px;
  border-radius:999px;background:var(--accent);color:#fff;font-size:14px;padding:0 10px;}
.wf-row h3{font-family:var(--display);font-size:40px;line-height:1.3;font-weight:800;
  letter-spacing:-.035em;color:var(--ink);margin:20px 0 0;}
.wf-row .wf-lead{font-size:22px;line-height:1.7;color:var(--muted);margin:20px 0 0;max-width:38ch;}

.wf-band{padding:118px 0;}
.wf-band.tint{background:var(--bg-tint);}
.wf-item{text-align:center;}

.wf-item .wf-no{font-size:19px;letter-spacing:.09em;color:var(--accent);font-weight:800;
  background:none;border:0;border-radius:0;padding:0 0 9px;gap:.4em;
  border-bottom:4px solid var(--accent);}   
.wf-item .wf-no i{display:inline;min-width:0;height:auto;padding:0;border-radius:0;
  background:none;color:var(--accent);font-size:inherit;font-weight:800;}

.wf-item h2{font-family:var(--display);font-size:50px;line-height:1.26;font-weight:500;
  letter-spacing:-.025em;color:var(--ink);margin:30px 0 0;}   

.wf-item h2 b{font-weight:900;letter-spacing:-.04em;}
.wf-item .wf-lead{font-size:23px;line-height:1.7;color:var(--muted);margin:26px auto 0;max-width:52ch;}

.wf-item .wf-obj{margin-top:58px;}
.wf-item .wf-obj .wf{max-width:900px;margin:0 auto;}
.wf-item .wf-books{justify-content:center;gap:22px;}
.wf-item .wf-book{width:150px;}

.wf-item .wf-books.wide{gap:18px;}
.wf-item .wf-books.wide .wf-book{width:148px;padding:14px 11px 14px 20px;}
.wf-item .wf-books.wide .wf-book span{font-size:13.5px;line-height:1.4;}

body.user-mode [data-review-only="true"]{display:none!important;}

.lp-bottom{background:var(--accent);padding:142px 0;text-align:center;}
.lp-bottom h2{font-family:var(--display);font-size:52px;line-height:1.26;font-weight:800;
  letter-spacing:-.035em;color:#fff;margin:0;}
.lp-bottom p{font-size:23px;line-height:1.7;color:#C9D4E5;margin:26px auto 0;max-width:46ch;}

@media (max-width:1000px){
  .lp-wrap{padding:0 24px;}

.lp-wrap i{font-style:normal;}
  .lp-eyebrow{font-size:17px;padding:9px 20px;margin-bottom:22px;}
  .lp-sec{padding:88px 0;}
  .lp-shd{margin-bottom:46px;}
  .lp-shd h2{font-size:34px;}
  .lp-shd p{font-size:19px;}
  .wf-row{grid-template-columns:1fr;gap:34px;padding:52px 0;}
  .wf-band{padding:70px 0;}
  .wf-item h2{font-size:34px;margin-top:22px;}
  .wf-item .wf-no{font-size:16px;padding-bottom:7px;border-bottom-width:3px;}
  .wf-item .wf-lead{font-size:19px;margin-top:20px;}
  .wf-item .wf-obj{margin-top:36px;}
  .wf-item .wf-book{width:112px;}
  .wf-item .wf-books.wide{gap:12px;}
  .wf-item .wf-books.wide .wf-book{width:104px;padding:10px 8px 10px 17px;}
  .wf-item .wf-books.wide .wf-book span{font-size:11.5px;}
  .wf-row.rev .wf-tx{order:0;}
  .wf-row h3{font-size:30px;}
  .wf-row .wf-lead{font-size:19px;}
  .lp-bottom{padding:84px 0;}
  .lp-bottom h2{font-size:34px;}
  .lp-bottom p{font-size:19px;}
}
@media (max-width:560px){
  .wf-book{width:100px;}
}

html{scroll-behavior:smooth;}
#ways,
#new,
#check{scroll-margin-top:84px;}
body.nav-on .lp-fab{opacity:1;pointer-events:auto;transform:translateX(-50%);}

@media (max-width:860px){
  body.nav-on .lp-fab{transform:none;}
}

.lp-side{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;align-items:stretch;gap:12px;}

.lp-bnr{display:block;width:132px;text-align:left;font-family:inherit;cursor:pointer;   
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;
  box-shadow:0 4px 18px rgba(23,46,85,.12);transition:box-shadow .15s,transform .15s;}
.lp-bnr:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(23,46,85,.18);}
.lp-bnr:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.lp-bnr .bb-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.02em;
  color:#fff;background:#6A6A6A;border-radius:5px;padding:4px 7px;white-space:nowrap;}
.lp-bnr .bb-t{display:block;margin:9px 0 0;font-size:13.5px;font-weight:800;line-height:1.34;
  letter-spacing:-.03em;color:var(--ink);word-break:keep-all;}
.lp-bnr .bb-im{display:block;position:relative;margin:10px 0 0;height:82px;
  background:var(--bg-tint);border-radius:var(--r-sm);overflow:hidden;}

@media (max-width:860px){
  .lp-side{right:14px;gap:9px;}
  .lp-bnr{width:116px;padding:10px;}
  .lp-bnr .bb-t{font-size:12.5px;margin-top:8px;}
  .lp-bnr .bb-im{height:60px;margin-top:8px;}
}

/* ── 여기부터 이 화면 전용 ────────────────────────────────────────────────
   원래 HTML 의 인라인 <style> 이었다. 위쪽 규칙보다 **뒤에 있어 이긴다** —
   같은 셀렉터가 위아래에 둘 다 있으면 아래쪽이 적용된다. 순서를 바꾸지 말 것. */

.lp-side a.lp-bnr{ text-decoration:none; color:inherit; }

#check .dev{
    position:relative; width:232px; margin:0 auto;
    aspect-ratio:9/19; padding:9px;
    border-radius:38px; background:#1c2027;
    box-shadow:0 2px 6px rgba(26,26,26,.06), 0 26px 48px -28px rgba(23,46,85,.45);
  }
  
  #check .dev::after{
    content:""; position:absolute; top:19px; left:50%; transform:translateX(-50%);
    width:70px; height:18px; border-radius:99px; background:#1c2027; z-index:2;
  }
  #check .dev-scr{
    position:relative; width:100%; height:100%;
    border-radius:30px; overflow:hidden; background:#fff;
  }
  
  #check .dev-scr::after{
    content:""; position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
    width:92px; height:4px; border-radius:99px; background:rgba(23,46,85,.2); z-index:2;
  }
  #check .dev-img{
    display:block; width:100%; height:100%;
    object-fit:cover; object-position:top center;
  }

.wf-shots2{ display:flex; justify-content:center; align-items:flex-start; gap:20px; }
  .wf-shots2 .dev{ margin:0; }

#check .use-grid{
    display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line); border-left:1px solid var(--line);
    border-radius:16px; overflow:hidden;
    margin-top:8px;
  }

#check .use-item{
    padding:44px 38px; background:var(--bg); text-align:center;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  
  #check .use-item .u-k{
    display:inline-flex; align-items:center; justify-content:center;
    margin:0; padding:8px 18px;
    border:1.5px solid #5b86d6; border-radius:999px; background:none;
    color:#5b86d6; font-size:19px; font-weight:700; letter-spacing:-.38px; line-height:1.2;
  }
  
  #check .use-item h3{
    font-family:var(--display);
    margin:10px 0 0; font-size:34px; font-weight:700; color:#000;
    letter-spacing:-.68px; line-height:1.24;
  }
  #check .use-item p{ font-size:17px; line-height:1.65; color:var(--muted); margin:12px 0 0; }

  @media (max-width:860px){
    #check .dev{ width:200px; }
    #check .use-grid{ grid-template-columns:1fr; }
    #check .use-item{ padding:32px 24px; }
    #check .use-item h3{ font-size:28px; }   
  }

.wf-txcombo .wf-arrow,
  .wf-flowrow .wf-arrow{
    flex:0 0 auto; align-self:center;
    font-size:26px; font-weight:300; line-height:1;
    color:var(--muted,#6A6A6A); user-select:none;
  }

.wf-flowrow{
    display:flex; align-items:center; justify-content:center;
    gap:26px; height:472px;
  }

.wf-item .wf-obj .wf-flowrow .wf{
    flex:0 0 auto; height:100%; width:auto; max-width:none; margin:0;
  }

.tx-flowrow{ --txsc:1; }
  .tx-flowrow .wf-txgroup{
    flex:0 0 auto; height:100%; aspect-ratio:16/10;
    position:relative; overflow:hidden;
  }
  .tx-flowrow .wf-txgroup .wf-txcombo{
    position:absolute; left:0; top:0; width:755px; height:472px;
    transform:scale(var(--txsc)); transform-origin:0 0;
  }

  @media (max-width:1200px){
    .wf-flowrow{ height:380px; gap:20px; }
    .tx-flowrow{ --txsc:.805; }   
  }
  @media (max-width:860px){
    .wf-txcombo .wf-arrow,
    .wf-flowrow .wf-arrow{ font-size:22px; }
    .wf-flowrow{ gap:16px; height:300px; }
    .tx-flowrow{ --txsc:.636; }   
  }

.wf-item .wf-lead.wide1{ max-width:none; }
  .wf-item .wf-lead.wide1 .lead-spec{ display:block; white-space:nowrap; }
  
  .wf-item .wf-lead.oneline{ max-width:none; white-space:nowrap; }
  @media (max-width:1200px){
    .wf-item .wf-lead.wide1 .lead-spec{ white-space:normal; }
    .wf-item .wf-lead.oneline{ white-space:normal; }
  }

.wf-book.cov{ overflow:visible; }
  .wf-book.cov > span{
    position:absolute; left:-9px; right:-9px; top:calc(100% + 9px);
    width:auto; height:auto; margin:0; padding:0;
    clip-path:none; overflow:visible; white-space:normal;
    font-size:12px; font-weight:600; line-height:1.35; letter-spacing:-.02em;
    color:var(--muted,#6A6A6A); text-align:center; word-break:keep-all;
  }
  
  .wf-item .wf-books.wide{ row-gap:52px; }
  @media (max-width:860px){
    .wf-item .wf-books.wide:not(.tx-ne) .wf-book.cov > span{ font-size:11px; left:-6px; right:-6px; top:calc(100% + 7px); }
    .wf-item .wf-books.wide{ row-gap:46px; }   
  }

.wf-txcombo{
    display:flex; align-items:center; justify-content:center;
    gap:20px; flex-wrap:nowrap;
  }
  
  .wf-item .wf-txcombo .wf-books.tx-ne{
    display:flex; flex-direction:column; gap:34px; flex:0 0 auto; margin:0;
  }
  .wf-item .wf-txcombo .wf-books.tx-ne .tx-row{
    display:flex; justify-content:center; gap:12px;
  }
  
  .wf-item .wf-txcombo .wf-books.tx-ne .wf-book{ width:115px; }
  
  .wf-txcombo .wf-book.cov > span{
    font-size:11px; white-space:nowrap; left:-9px; right:-9px;
  }

.wf-txcombo .tx-ne-col{
    flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:18px;
  }
  .wf-txcombo .tx-nehd{
    font-size:20px; font-weight:700; line-height:1.4; color:var(--body);
    white-space:nowrap;
  }
  .wf-txcombo .tx-nehd em{ font-style:normal; font-size:1.1em; font-weight:800; color:var(--accent); }

.wf-txcombo .wf-plus{
    flex:0 0 auto; font-size:30px; font-weight:300; line-height:1;
    color:var(--muted,#8A8F98); user-select:none;
  }

.wf-txcombo .wf-etc{
    flex:0 0 auto; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px; text-align:center;
    width:180px; min-height:186px; padding:24px 14px;
    border:1px dashed var(--line); border-radius:8px; background:var(--bg-tint);
  }
  .wf-txcombo .wf-etc b{ font-size:15px; font-weight:700; line-height:1.4;
    color:var(--body); word-break:keep-all; }
  .wf-txcombo .wf-etc em{ font-style:normal; font-size:26px; font-weight:800;
    line-height:1; letter-spacing:-.02em; color:var(--body); }

#check .wf{ background:var(--bg); }

  #new .lp-shd h2, #check .lp-shd h2{
    font-size:64px; font-weight:700; letter-spacing:-.96px; line-height:1.2;
  }
  #new .lp-shd h2 .lead, #check .lp-shd h2 .lead{
    display:block; font-size:48px; font-weight:300;
  }
  
  @media (max-width:1000px){
    #new .lp-shd h2, #check .lp-shd h2{ font-size:44px; }
    #new .lp-shd h2 .lead, #check .lp-shd h2 .lead{ font-size:33px; }
  }

#check .wf-row .wf-no{
    background:#FFD69D; border-radius:999px;
    padding:9px 18px; letter-spacing:.06em;
  }
  @media (max-width:860px){
    #check .wf-row .wf-no{ padding:7px 15px; }
  }

.wf-item .bk-cap{ margin-top:82px; margin-bottom:58px; }
  @media (max-width:860px){
    .wf-item .bk-cap{ margin-top:46px; margin-bottom:36px; }
  }

.wf-flowrow .wf.a-book{
    flex:0 1 auto;
    aspect-ratio:1337/852;
    max-width:none; min-width:0;
    align-self:center;
  }

.wf-flowrow .sheet-col{
    position:relative; flex:0 1 auto; height:100%;
    display:flex; align-items:center;
  }

.wf-flowrow .wf.a-shot{
    flex:0 1 auto;
    aspect-ratio:1808/944;
    width:904px; height:472px; min-width:0;
    align-self:center;
  }
  
  .wf > img.shot{
    display:block; width:100%; height:100%; object-fit:contain;
  }

.wf-flowrow .wf.sheet,
  #check .wf.sheet.qq{
    aspect-ratio:210/297;
    max-width:none;
  }

#check .qq-stack{ position:relative; width:fit-content; margin:0 auto; }
  #check .qq-stack::before{
    content:""; position:absolute; inset:0;
    background:var(--bg); border:1px solid var(--line); border-radius:8px;
    box-shadow:0 12px 28px -20px rgba(23,46,85,.5);
    transform:rotate(-4.5deg) translate(-12px,-4px);
    transform-origin:50% 100%;
  }
  
  #check .wf.sheet.qq{
    height:472px; width:auto; margin:0 auto;
  }

#new .wf-row .wf.a-shot.feat{
    width:100%; height:auto;
    aspect-ratio:1164/608;
  }
  
  #new .wf-row .wf.a-shot.feat.g16{ aspect-ratio:16/9; }

  @media (max-width:1200px){
    
    .wf-flowrow .wf.a-shot{ width:auto; height:100%; max-width:100%; }
  }

.lp-side{ top:120px; transform:none; }
  @media (max-width:860px){
    .lp-side{ top:90px; }
  }

.lp-bnr{
    height:176px; overflow:hidden;
    
    display:flex; flex-direction:column;
  }
  @media (max-width:860px){
    .lp-bnr{ height:155px; }
  }
  
  .lp-bnr .bb-tag{ align-self:flex-start; }
  
  .lp-bnr .bb-im{ height:auto; aspect-ratio:auto; flex:1 1 0; min-height:0; }

.lp-bnr .bb-im{ box-sizing:border-box; background:var(--bg-tint); padding:10px 0 0; }
  .lp-bnr .bb-im > img.shot{
    display:block; width:70%; height:100%; margin:0 auto;
    object-fit:cover; object-position:center top;
  }

.bnr-flow .bb-im{ padding:0; }
  .bnr-flow .bb-im > img.shot{ object-fit:contain; object-position:center; }
  @media (max-width:860px){
    .lp-bnr .bb-im{ height:auto; }
  }
  
  /* 모바일 — 배너는 원본 높이를 유지한다. 세로로 눌러 쓰지 않는다.
     스택 483px(155 x 3 + gap 9 x 2)이 들어가지 않는 높이에서만 썸네일을 접는다.
     660px = 스택 483 + 상하 여백 178 (아래 max-height 와 같은 값) */
  @media (max-width:768px) and (max-height:660px){
    .lp-bnr .bb-im{ display:none; }
    .lp-bnr{ height:auto; }
  }

  /* 세로가 빠듯해지면 먼저 가운데 정렬로 돌린다 —
     .lp-side 의 기본값이 가운데 정렬이라 top 고정만 풀면 된다.
     탭바(하단 65px)와 맨 위로 버튼(상단 vh-74) 사이에 스택 552px 가 들어가는 하한이 702px */
  @media (min-width:769px) and (max-height:749px){
    .lp-side{ top:50%; transform:translateY(-50%); }
  }
  /* 가운데 정렬로도 안 들어가는 높이에서만 썸네일을 접는다 */
  @media (min-width:769px) and (max-height:701px){
    .lp-bnr .bb-im{ display:none; }

    .lp-bnr{ height:auto; }
  }

.hs-band{
    position:relative; width:min(1600px, 100%); margin:0 auto; overflow:hidden;
    container-type:inline-size;
    font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;
  }
  
  .hs-stage{
    position:absolute; left:0; top:0; width:1600px;
    transform-origin:0 0;
    /* 기준 폭 1600px 무대를 밴드 폭에 맞춰 줄인다.
       배율은 JS(fitStages)가 --hs-k 로 넣는다 — 모든 브라우저에서 동작한다. */
    transform:scale(var(--hs-k, 1));
  }
  /* typed arithmetic(길이÷길이=수) 지원 브라우저는 JS 없이 CSS 만으로 같은 결과를 낸다.
     Chrome/Edge 140+ · Safari 26+ · Firefox 미지원(2026-09 기준). */
  @supports (scale: calc(1px / 1px)){
    .hs-stage{ transform:scale(calc(100cqw / 1600px)); }
  }

#ways{ background:#fff; padding:0; }
  #ways .aw{ display:none; }
  #ways .aw{ display:block; }

.aw-band{ aspect-ratio:1600 / 1238.27; }   
  .aw-band .hs-stage{ height:1238.27px; color:#000;
    font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; }

.aw-head, .tw-head, .bw-head, .pw-head, .dw-head{
    position:absolute; left:367px; width:866px; text-align:center; }
  .aw-no, .tw-no, .bw-no, .pw-no, .dw-no{
    margin:0; font-size:64px; font-weight:700; letter-spacing:-1.28px; line-height:normal; }
  
  .aw-h,  .tw-h,  .bw-h,  .pw-h,  .dw-h{
    margin:12px 0 0; font-size:64px; font-weight:700; letter-spacing:-.96px;
    line-height:1.2; white-space:nowrap; }
  .aw-h .lead, .tw-h .lead, .bw-h .lead, .pw-h .lead, .dw-h .lead{
    display:block; font-size:48px; font-weight:300; }
  
  .aw-p,  .tw-p,  .bw-p,  .pw-p,  .dw-p{
    margin:30px 0 0; font-size:24px; font-weight:400; letter-spacing:-.48px; line-height:32px; }
  .aw-p b, .tw-p b, .bw-p b, .pw-p b, .dw-p b{ font-weight:600; }

  .aw-head{ top:140px; }
  .aw-no{ color:#97baff; }
  .aw-p { color:#2a2626; }

.aw-mac, .dw-mac{ position:absolute; left:180px; top:518px; width:1240px; height:702px;
    transition:opacity .55s ease, transform .55s ease; }
  
  .aw.aw-done .aw-mac, .dw.aw-done .dw-mac{ opacity:0; transform:scale(.985); pointer-events:none; }
  .aw-mac .lid, .dw-mac .lid{ position:absolute; left:53px; top:0; width:1134px; height:674px;
    background:#1C2E52; border-radius:18px 18px 4px 4px; }
  .aw-mac .cam, .dw-mac .cam{ position:absolute; left:50%; top:5.5px; width:7px; height:7px; margin-left:-3.5px;
    border-radius:50%; background:rgba(255,255,255,.32); }
  .aw-mac .scr, .dw-mac .scr{ position:absolute; left:17px; top:17px; width:1100px; height:618.75px;
    background:#fff; overflow:hidden; }
  .aw-mac .scr img, .dw-mac .scr img{ display:block; width:100%; height:100%; object-fit:cover; }
  
  .aw-mac .base, .dw-mac .base{ position:absolute; left:0; top:674px; width:1240px; height:28px;
    background:#1C2E52; border-radius:0 0 15px 15px; box-shadow:0 24px 50px rgba(28,46,82,.22); }
  .aw-mac .base::after, .dw-mac .base::after{ content:""; position:absolute; left:50%; top:0; width:150px; height:11px;
    margin-left:-75px; border-radius:0 0 8px 8px; background:rgba(255,255,255,.15); }

.aw-sheet, .dw-sheet{ position:absolute; left:313.75px; top:558px; width:972.5px; height:622px;
    opacity:0; transform:translateY(52px) scale(.97); pointer-events:none;
    transition:opacity .5s ease .22s, transform .7s cubic-bezier(.2,.85,.3,1) .22s; }
  .aw-sheet .sh, .dw-sheet .sh{ position:absolute; border:.75px solid #909090; background:#fff;
    box-shadow:0 14px 40px rgba(28,46,82,.18); }
  .aw-sheet .sh img, .dw-sheet .sh img{ display:block; width:100%; height:100%; object-fit:cover; }
  .aw-sheet .s-l, .dw-sheet .s-l{ left:  0.64px; top:23.09px; width:413.13px; height:575.77px; }
  .aw-sheet .s-r, .dw-sheet .s-r{ left:560.02px; top:23.09px; width:413.13px; height:575.77px; }
  .aw-sheet .s-c, .dw-sheet .s-c{ left:263.82px; top:0;       width:446.26px; height:621.95px; }
  .aw-sheet .s-l::after, .aw-sheet .s-r::after,
  .dw-sheet .s-l::after, .dw-sheet .s-r::after{ content:""; position:absolute; inset:0;
    background:rgba(0,0,0,.1); pointer-events:none; }
  .aw.aw-done .aw-sheet, .dw.aw-done .dw-sheet{ opacity:1; transform:translateY(0) scale(1); }

.aw-sheet .sh-note, .dw-sheet .sh-note{
    position:absolute; left:50%; top:100%; transform:translateX(-50%);
    margin:0; white-space:nowrap; font-weight:400; line-height:1.2;
    letter-spacing:-.32px; color:#4a5165; }
  .aw-sheet .sh-note{ margin-top:16.667px; font-size:22.222px; }
  .dw-sheet .sh-note{ margin-top:15.873px; font-size:21.164px; }

.aw{ --obj:.72; }
  
  .aw .aw-mac  { top:433.12px; }   
  .aw .aw-sheet{ top:473.12px; }   
  .aw .aw-mac  { transform:scale(var(--obj)); }
  .aw .aw-sheet{ transform:translateY(52px) scale(calc(var(--obj) * .97)); }
  .aw.aw-done .aw-mac  { transform:scale(calc(var(--obj) * .985)); }
  .aw.aw-done .aw-sheet{ transform:translateY(0) scale(var(--obj)); }

#w-textbook{ background:#E0EAFF; padding:0; overflow:hidden; }
  #w-textbook .tw{ display:none; }
  #w-textbook .tw{ display:block; }
  
  .tw-band{ aspect-ratio:1600 / 1184.76; }
  .tw-band .hs-stage{ height:1184.76px; color:#000;
    font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; }

  .tw-head{ top:140px; }
  .tw-no{ color:#1c2e52; }
  .tw-p { color:#2a2626; }

.tw-support{ position:absolute; left:620px; top:456.4px; width:360px; height:76px;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    background:#fff; border:3px solid #000; color:#000; cursor:pointer;
    border-radius:999px;
    animation:tw-support-float 2.6s ease-in-out infinite;
    font-family:inherit; font-size:25px; font-weight:800;
    letter-spacing:-.5px; line-height:1; white-space:nowrap;
    transition:background-color .18s ease, border-color .18s ease; }
  /* 화살표는 흰색. 선이 늘었다 줄고 촉이 그 끝을 따라간다 */
  .tw-support i{ display:inline-flex; align-items:center; justify-content:center;
    color:#000; }
  .tw-support i svg{ overflow:visible; }
  .tw-support i svg path{ transform-box:view-box; transform-origin:5px 12px; }
  .tw-support i .ln{ animation:tw-support-line 1.5s ease-in-out infinite; }
  .tw-support i .hd{ animation:tw-support-head 1.5s ease-in-out infinite; }
  .tw-support:hover{ background:#f2f4f7; border-color:#000;
    animation-play-state:paused; }
  .tw-support:hover i .ln,
  .tw-support:hover i .hd{ animation-play-state:paused; }

  /* 버튼만 조용히 떠다닌다. 동작 줄이기 설정에서는 파일 끝 블록이 멈춘다 */
  @keyframes tw-support-float{
    0%, 100%{ transform:translateY(0); }
    50%     { transform:translateY(-5px); }
  }
  /* 선은 왼쪽 끝을 고정한 채 길이만 변한다 — scaleX 라 굵기는 그대로다.
     기본이 원래 길이(1)이고 거기서 더 늘어난다 */
  @keyframes tw-support-line{
    0%, 100%{ transform:scaleX(1); }
    55%     { transform:scaleX(1.45); }
  }
  @keyframes tw-support-head{
    0%, 100%{ transform:translateX(0); }
    55%     { transform:translateX(6.3px); }
  }
  .tw-support:focus-visible{ outline:3px solid #1c2e52; outline-offset:3px; }

.tw-g{ position:absolute; inset:0; pointer-events:none; }

.tw-book{ position:absolute; padding:0; border:1px solid #c4c4c4; background:none; }
  .tw-book img{ display:block; width:100%; height:100%; object-fit:cover; }
  
  .tw-b1{ left:248.652px; top:604.879px; width:170.784px; height:222.019px; z-index:3; }
  .tw-b2{ left:367.088px; top:604.4px;   width:171.520px; height:222.976px; z-index:4; }
  .tw-b3{ left:486.262px; top:604.4px;   width:171.520px; height:222.976px; z-index:5; }
  .tw-b4{ left:200px;     top:801.426px; width:171.520px; height:222.976px; z-index:6; }
  .tw-b5{ left:319.172px; top:801.426px; width:171.520px; height:222.976px; z-index:7; }
  .tw-b6{ left:438.346px; top:801.426px; width:171.520px; height:222.976px; z-index:8; }

.tw-card{ position:absolute; z-index:9; }
  .tw-card i{ position:absolute; display:block; background:#fe5d65; }
  
  .tw-card .tab-l{ left:580px;    top:695.399px; width:79.269px; height:14.007px;
    border-radius:4.25px 4.25px 0 0; }
  .tw-card .tab-r{ left:629.568px; top:695.399px; width:84.908px; height:15.004px;
    background:#ff949a; border-radius:4.25px 4.25px 0 0; }
  .tw-card .body { left:580.001px; top:709.405px; width:232.104px; height:315.161px;
    border-radius:0 4.25px 4.25px 0; }
  .tw-card p{ position:absolute; left:593px; top:757.4px;
    width:205.909px; height:144.253px; margin:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:#fff;
    font-size:23.267px; font-weight:600; letter-spacing:-.4155px; line-height:76.863px; }
  .tw-card p b{ display:block; position:relative; top:-18px; font-size:74.453px; font-weight:800; }

  /* 카드 안 출판사 표기 — 가로선 아래 2행 3열. 세로 구분선은 가운데 열의 좌우 테두리다 */
  .tw-card .tw-pubs{ position:absolute; left:603px; top:944.4px; width:180px;
    display:grid; grid-template-columns:60px 73px 47px; row-gap:5px;
    color:#fff; text-align:center;
    font-size:18px; font-weight:700; letter-spacing:-.3px; line-height:27px; }
  .tw-card .tw-pubs::before{ content:""; position:absolute; left:0; top:-28px;
    width:100%; height:1px; background:rgba(255,255,255,.55); }
  /* 구분선은 글자 높이의 70% 다. border 로는 길이를 못 줄여 의사요소로 긋는다 */
  .tw-card .tw-pubs span:nth-child(3n+2){ position:relative; }
  .tw-card .tw-pubs span:nth-child(3n+2)::before,
  .tw-card .tw-pubs span:nth-child(3n+2)::after{
    content:""; position:absolute; top:50%; transform:translateY(-50%);
    width:1px; height:18.9px; background:rgba(255,255,255,.55); }
  .tw-card .tw-pubs span:nth-child(3n+2)::before{ left:0; }
  .tw-card .tw-pubs span:nth-child(3n+2)::after { right:0; }

.tw-arrow{ position:absolute; left:825px; top:703.4px; width:175.907px; height:223.712px;
    z-index:10; display:flex; align-items:center; justify-content:center; }
  .tw-arrow img{ display:block; width:223.712px; height:175.907px; flex:none;
    transform:rotate(-90deg); }

.tw-arrow span{ position:absolute; left:10px; top:85.46px; width:150px;
    text-align:center; color:#1c2e52;
    font-size:22px; font-weight:800; letter-spacing:0; line-height:1.2; }

.tw-sheet{ position:absolute; border:.575px solid #909090; background:#fff; }
  .tw-sheet img{ display:block; width:100%; height:100%; object-fit:cover; }
  .tw-sheet::after{ content:""; position:absolute; inset:0; pointer-events:none; }
  
  .tw-s2{ left:1084.488px; top:669.4px; width:316.977px; height:441.581px; z-index:1; }
  .tw-s1{ left:1021.531px; top:589.4px; width:342.401px; height:477px;      z-index:2; }

.tw-note{ position:absolute; left:1211.498px; top:1122.981px;
    transform:translateX(-50%); margin:0; white-space:nowrap;
    font-size:16px; font-weight:400; line-height:1.2; letter-spacing:-.32px;
    color:#4a5165; z-index:4; opacity:0; transition:opacity .38s ease; }
  .tw.t4 .tw-note{ opacity:1; }
  .tw-s2::after{ background:rgba(0,0,0,.1); }

.tw-book, .tw-card, .tw-arrow, .tw-sheet{
    opacity:0; transform:translateY(26px);
    transition:opacity .38s ease, transform .5s cubic-bezier(.2,.85,.3,1); }

  .tw.t1 .tw-book{ opacity:1; transform:none; }
  .tw.t1 .tw-book:nth-child(2){ transition-delay:.07s; }
  .tw.t1 .tw-book:nth-child(3){ transition-delay:.14s; }
  .tw.t1 .tw-book:nth-child(4){ transition-delay:.21s; }
  .tw.t1 .tw-book:nth-child(5){ transition-delay:.28s; }
  .tw.t1 .tw-book:nth-child(6){ transition-delay:.35s; }

.tw-card{ transform:translateX(-34px); }
  .tw.t2 .tw-card{ opacity:1; transform:none; }

  .tw.t3 .tw-arrow{ opacity:1; transform:none; }

.tw-sheet{ transform:translateX(64px); }
  .tw.t4 .tw-sheet{ opacity:1; transform:none; }
  .tw.t4 .tw-s2{ transition-delay:.13s; }        

.tw-chips{ position:absolute; left:954px; top:871.4px; z-index:11;
    display:flex; flex-direction:column; align-items:flex-start; gap:19px; }
  .tw-chips i{ display:inline-flex; align-items:center; justify-content:center;
    padding:12px 25px; border-radius:100px; background:#fe5d65; color:#fff;
    font-style:normal; font-size:22px; font-weight:700;
    letter-spacing:-.44px; line-height:1.161; white-space:nowrap;
    opacity:0; transform:scale(.6);
    transition:opacity .25s ease, transform .36s cubic-bezier(.34,1.56,.64,1); }
  .tw.t5 .tw-chips i{ opacity:1; transform:none; }
  .tw.t5 .tw-chips i:nth-child(2){ transition-delay:.16s; }
  .tw.t5 .tw-chips i:nth-child(3){ transition-delay:.32s; }

  @media (prefers-reduced-motion: reduce){
    .tw-book, .tw-card, .tw-arrow, .tw-sheet, .tw-chips i{ transition:none; }
  }

#w-bookmap{ background:#1c2e52; padding:0; overflow:hidden; }
  #w-bookmap .bw{ display:none; }
  #w-bookmap .bw{ display:block; }

.bw-band{ aspect-ratio:1600 / 1138.34; overflow:visible; }
  .bw-band .hs-stage{ height:1138.34px; color:#fff;
    font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; }

  .bw-head{ top:140px; }
  .bw-no{ color:#97baff; }
  .bw-h { color:#fff; }
  .bw-p { color:#efefef; }

.bw-grid{ position:absolute; top:531.4px;
    left:min(0px, calc(800px - 50vw));        
    width:max(1600px, 100vw);
    overflow:hidden;
    cursor:grab; touch-action:pan-y; }        
  .bw-grid{ cursor:grab; touch-action:pan-y; }
  .bw-grid.dragging{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
  .bw-track{ display:flex; align-items:flex-start; gap:100px; width:max-content;
    transform:translate3d(var(--bw-x, 0px), 0, 0);
    transition:transform .62s cubic-bezier(.22,.85,.3,1); }
  .bw-grid.dragging .bw-track{ transition:none; }   

.bw-g{ display:flex; flex-direction:column; align-items:center; gap:30px; }
  
  .bw-g > .lbl{ margin:0; display:inline-flex; align-items:center; justify-content:center;
    padding:12px 25px; border-radius:100px; background:#97baff; color:#1c2e52;
    font-size:22px; font-weight:700; letter-spacing:-.44px; line-height:1.161; white-space:nowrap; }
  
  .bw-g > .row{ display:flex; align-items:flex-start; }
  
  .bw-g .row > div{ height:278px; flex:0 0 auto; position:relative; }
  .bw-g .row > div + div{ margin-left:-150px; }
  .bw-g .row > div:nth-child(1){ z-index:6; }
  .bw-g .row > div:nth-child(2){ z-index:5; }
  .bw-g .row > div:nth-child(3){ z-index:4; }
  .bw-g .row > div:nth-child(4){ z-index:3; }
  .bw-g .row > div:nth-child(5){ z-index:2; }
  .bw-g .row > div:nth-child(6){ z-index:1; }
  
  .bw-g .row img{ display:block; height:100%; width:auto;
    -webkit-user-drag:none; user-select:none;    
    box-shadow:10px 0 18px -4px rgba(0,0,0,.45), 0 4px 12px -4px rgba(0,0,0,.32); }

.bw-dots{ position:absolute; left:0; top:920.94px; width:100%;
    display:flex; justify-content:center; align-items:center; gap:6px; }
  .bw-dots button{
    width:24px; height:24px; padding:0; border:0; background:none;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .bw-dots button::before{
    content:""; display:block; width:8px; height:8px; border-radius:100px;
    background:rgba(255,255,255,.34);
    transition:width .35s cubic-bezier(.22,.85,.3,1), background .25s ease; }
  .bw-dots button:hover::before{ background:rgba(255,255,255,.62); }
  .bw-dots button[aria-current="true"]::before{ width:26px; background:#97baff; }
  .bw-dots button:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:100px; }

  @media (prefers-reduced-motion: reduce){
    
    .bw-track, .bw-dots button::before{ transition:none; }
  }

#w-twin{ background:#c6d9ff; padding:0; overflow:hidden; }
  #w-twin .pw{ display:none; }
  #w-twin .pw{ display:block; }
  
  .pw-band{ aspect-ratio:1600 / 1243.06; }
  .pw-band .hs-stage{ height:1243.06px; color:#000;
    font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; }

.pw-head{ top:140px; }
  .pw-no{ color:#1c2e52; }
  .pw-p { color:#2a2626; }

.pw-inner{ position:absolute; left:291.291px; top:499.4px;
    width:378.898px; height:511.064px; z-index:5;
    border:1px solid #c4c4c4; }
  .pw-inner img{ display:block; width:100%; height:100%; object-fit:cover; }

.pw-dot{ position:absolute; left:249.1px; top:779.887px;
    width:230.577px; height:230.577px; border-radius:50%;
    background:#fe5d65; opacity:.33; mix-blend-mode:multiply; z-index:6; }

  .pw-cov{ position:absolute; left:200px; top:808.198px;
    width:149.827px; height:202.266px; z-index:7; }
  .pw-cov img{ display:block; width:100%; height:100%; object-fit:cover; }

  .pw-sheet{ position:absolute; left:999px; top:499.4px;
    width:361.008px; height:511.064px; z-index:3;
    border:1px solid #c4c4c4; }
  .pw-sheet img{ display:block; width:100%; height:100%; object-fit:cover; }

.pw-note{ position:absolute; left:1179.504px; top:1022.464px;
    transform:translateX(-50%); margin:0; white-space:nowrap;
    font-size:16px; font-weight:400; line-height:1.2; letter-spacing:-.32px;
    color:#4a5165; z-index:4;
    opacity:0; transition:opacity .38s ease; }
  .pw.t3 .pw-note{ opacity:1; }

.pw-arrow{ position:absolute; left:710px; top:623.196px; width:206px; height:286.467px;
    z-index:2; display:flex; align-items:center; justify-content:center; }
  .pw-arrow img{ display:block; width:286.467px; height:206px; flex:none;
    transform:rotate(-90deg); }
  .pw-arrow span{ position:absolute; left:37px; top:129px; width:111.863px;
    text-align:center; color:#1c2e52;
    font-size:23.6px; font-weight:800; letter-spacing:0; line-height:normal; }

.pw-inner, .pw-cov, .pw-arrow, .pw-sheet{
    opacity:0; transform:translateY(26px);
    transition:opacity .38s ease, transform .5s cubic-bezier(.2,.85,.3,1); }
  .pw-dot{ opacity:0; transform:scale(.7);
    transition:opacity .38s ease, transform .5s cubic-bezier(.2,.85,.3,1); }
  
  .pw-sheet{ transform:translateX(64px); }

  .pw.t1 .pw-inner{ opacity:1; transform:none; }
  .pw.t1 .pw-cov  { opacity:1; transform:none; transition-delay:.12s; }
  .pw.t1 .pw-dot  { opacity:.33; transform:none; transition-delay:.22s; }
  .pw.t2 .pw-arrow{ opacity:1; transform:none; }

#check .lp-eyebrow{ background:#FFA53D; color:#1c2e52; }
  
  #check .use-item .u-k{
    background:#FFA53D; border-color:#FFA53D; color:#1c2e52;
  }

.pw-chips{ position:absolute; left:922px; top:822.465px; z-index:4;
    display:flex; flex-direction:column; align-items:flex-start; gap:19px; }
  .pw-chips i{ display:inline-flex; align-items:center; justify-content:center;
    padding:12px 25px; border-radius:100px; background:#fe5d65; color:#fff;
    font-style:normal; font-size:22px; font-weight:700;
    letter-spacing:-.44px; line-height:1.161; white-space:nowrap;
    opacity:0; transform:scale(.6);
    transition:opacity .25s ease, transform .36s cubic-bezier(.34,1.56,.64,1); }
  .pw.t3 .pw-sheet{ opacity:1; transform:none; }
  .pw.t4 .pw-chips i{ opacity:1; transform:none; }
  .pw.t4 .pw-chips i:nth-child(2){ transition-delay:.16s; }
  .pw.t4 .pw-chips i:nth-child(3){ transition-delay:.32s; }

  @media (prefers-reduced-motion: reduce){
    .pw-cov, .pw-inner, .pw-dot, .pw-arrow, .pw-sheet, .pw-chips i{ transition:none; }
  }

#w-drill{ background:#fff; padding:0; overflow:hidden; }
  #w-drill .dw{ display:none; }
  #w-drill .dw{ display:block; }

.dw{ --obj:.72; }
  .dw .dw-mac  { top:401.12px; }   
  .dw .dw-sheet{ top:441.12px; }   
  .dw .dw-mac  { transform:scale(var(--obj)); }
  .dw .dw-sheet{ transform:translateY(52px) scale(calc(var(--obj) * .97)); }
  .dw.aw-done .dw-mac  { transform:scale(calc(var(--obj) * .985)); }
  
  .dw.aw-done .dw-sheet{ transform:translateY(11.196px) scale(calc(var(--obj) * 1.05)); }
  
  .dw-band{ aspect-ratio:1600 / 1206.27; }   
  .dw-band .hs-stage{ height:1206.27px; color:#000;
    font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; }

  .dw-head{ top:140px; }
  .dw-no{ color:#97baff; }
  .dw-p { color:#2a2626; }

#new{ background:#c6d9ff; padding-bottom:120px;
    overflow:hidden; }
  
  #new .lp-eyebrow{ background:#fff; }
  .fw-band{ height:400px; position:relative; z-index:1; }
  .fw-band .hs-stage{ height:400px; color:#fff;
    font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; }
  .fw-t{ position:absolute; left:0; top:130.7px; width:1600px; margin:0; text-align:center;
    font-size:64px; font-weight:700; letter-spacing:-1.28px; line-height:1.161; white-space:nowrap; }
  .fw-s{ position:absolute; left:0; top:222.6px; width:1600px; margin:0; text-align:center;
    font-size:40px; font-weight:500; letter-spacing:-.8px; line-height:1.161; white-space:nowrap; }

#new .wf-tx h3 .lead{ display:block; }        
  #new .fw-track h3 .lead{ font-size:44px; font-weight:700; }
  .fw-view, .fw-track, .fw-scale, .fw-zoom{ display:contents; }
  .fw-nav, .fw-stage{ display:none; }
  
  #new > .lp-wrap{ max-width:none; padding:0; }
  
  #new .fw-scale{ display:block; }
  #new .fw-zoom{
    display:block; width:1200px; max-width:100%; margin:0 auto;
  }

#new .fw-view{
    display:block; position:relative; overflow:visible; padding:8px 0 26px;
  }
  
  #new .fw-track{
    display:flex; align-items:stretch; gap:28px;
    transition:transform .5s cubic-bezier(.22,.61,.36,1); will-change:transform;
  }
  
  #new .fw-track > .wf-row{
    flex:none; display:block; width:848px; max-width:none;
    margin:0; padding:40px 36px 44px; border-top:0; box-sizing:border-box;
    background:#fff; border-radius:20px;
    box-shadow:0 18px 40px -24px rgba(28,46,82,.34);
    
    opacity:.42; transform:scale(.8); transform-origin:50% 50%;
    transition:opacity .5s cubic-bezier(.22,.61,.36,1),
               transform .5s cubic-bezier(.22,.61,.36,1);
  }
  #new .fw-track > .wf-row.on{ opacity:1; transform:scale(1); }

#new .fw-track .wf.a-shot.feat, #new .fw-track .wf.a-shot.feat.g16{
    display:block; position:relative; margin:26px auto 0;
    width:707px; height:421px; padding:10.5px; box-sizing:border-box;
    background:#1C2E52; border:0; border-radius:11px 11px 3px 3px; aspect-ratio:auto;
  }
  #new .fw-track .wf.a-shot.feat > img.shot{
    display:block; width:100%; height:100%; object-fit:cover; background:#fff; border-radius:0;
  }
  #new .fw-track .wf.a-shot.feat::before{
    content:""; position:absolute; left:50%; top:3.4px; width:4.4px; height:4.4px;
    margin-left:-2.2px; border-radius:50%; background:rgba(255,255,255,.32);
  }
  
  #new .fw-track .wf.a-shot.feat::after{
    content:""; position:absolute; left:50%; top:421px; width:774px; height:17.5px;
    margin-left:-387px; background:#1C2E52; border-radius:0 0 9px 9px;
    box-shadow:0 15px 31px rgba(28,46,82,.22);
  }
  #new .fw-track .wf-tx{ text-align:center; }
  
  #new .fw-track .wf-no{
    display:inline-flex; align-items:center; justify-content:center;
    margin:0; padding:8px 18px;
    border:1.5px solid #5b86d6; border-radius:999px; background:none;
    color:#5b86d6; font-size:19px; font-weight:700; letter-spacing:-.38px; line-height:1.2;
  }
  #new .fw-track .wf-no i{ display:none; }
  
  #new .fw-track h3{
    margin:10px 0 0; font-size:34px; font-weight:700; color:#000;
    letter-spacing:-.68px; line-height:1.24;
  }
  #new .fw-track h3 .lead{ font-size:34px; font-weight:700; }

#new .fw-track .wf-lead{
    margin:14px auto 0; max-width:none; font-size:17px; font-weight:400; color:#2a2626;
    letter-spacing:-.34px; line-height:25px;
  }

#new .fw-scale{ position:relative; }
  
  #new .fw-scale::before, #new .fw-scale::after{
    content:""; position:absolute; top:0; bottom:56px; z-index:2; pointer-events:none;
    width:max(100px, calc(50% - 430px));
  }
  
  #new .fw-scale::before{
    left:0;
    background:linear-gradient(90deg,
      #c6d9ff 0%, rgba(198,217,255,.62) 55%, rgba(198,217,255,0) 100%);
  }
  #new .fw-scale::after{
    right:0;
    background:linear-gradient(270deg,
      #c6d9ff 0%, rgba(198,217,255,.62) 55%, rgba(198,217,255,0) 100%);
  }
  #new .fw-stage{
    display:block; position:absolute; left:0; right:0; top:0; bottom:56px;
    margin:0; pointer-events:none; z-index:3;
  }
  
  #new .fw-stage .fw-arw{
    position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto;
    box-shadow:0 8px 20px -10px rgba(28,46,82,.55);
  }
  
  #new .fw-stage .fw-prev{ left:max(14px, calc(50% - 536px)); }
  #new .fw-stage .fw-next{ right:max(14px, calc(50% - 536px)); }

#new .fw-nav{
    display:flex; align-items:center; justify-content:center; margin-top:30px;
  }

.fw-arw{ width:92px; height:92px; padding:0; border:3px solid #1c2e52; border-radius:50%;
    background:#1c2e52; color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s, color .15s, border-color .15s; }
  .fw-arw svg{ width:44px; height:44px; stroke-width:2.2; }   
  
  .fw-arw:hover{ background:#284174; border-color:#284174; color:#fff; }
  .fw-arw:disabled{ opacity:.28; cursor:default; }            
  .fw-arw:disabled:hover{ background:#1c2e52; border-color:#1c2e52; color:#fff; }
  .fw-dots{ display:flex; align-items:center; gap:10px; }
  .fw-dots button{ width:9px; height:9px; padding:0; border:0; border-radius:50%;
    background:#b9c2d8; cursor:pointer; transition:background .2s, width .2s; }
  .fw-dots button[aria-selected="true"]{ width:26px; border-radius:5px; background:#1c2e52; }
  .fw-arw:focus-visible, .fw-dots button:focus-visible{ outline:3px solid #97baff; outline-offset:3px; }
  
  #new .wf-row .wf.a-shot.feat{
    position:relative; max-width:none; width:100%; height:auto; aspect-ratio:auto;
    padding:20px; border-radius:26px; background:#1C2E52;
    box-shadow:0 18px 44px rgba(28,46,82,.20);
  }
  
  #new .wf-row .wf.a-shot.feat > img.shot{
    display:block; width:100%; height:auto; border-radius:6px;
    object-fit:cover; aspect-ratio:16/9;
  }
  
  #new .wf-row .wf.a-shot.feat::before{
    content:""; position:absolute; left:50%; top:8px; width:6px; height:6px; margin-left:-3px;
    border-radius:50%; background:rgba(255,255,255,.35);
  }

#new .fw-bg{ display:none; }

.scroll-hint{ display:none; }
  .scroll-hint{
    display:flex; align-items:center; justify-content:center;
    position:fixed; left:50%; transform:translateX(-50%); bottom:26px;
    z-index:30; width:48px; height:30px;
    color:#1C2E52; opacity:.42; text-decoration:none;
    transition:opacity .3s ease, visibility .3s;
  }
  .scroll-hint svg{ width:26px; height:22px; display:block;
    animation:sh-bob 2.4s ease-in-out infinite; }
  .scroll-hint:hover{ opacity:.8; }
  body.scrolled .scroll-hint{ opacity:0; visibility:hidden; pointer-events:none; }
  @keyframes sh-bob{
    0%, 100%{ transform:translateY(-3px); }
    50%    { transform:translateY(4px); }
  }
  @media (prefers-reduced-motion: reduce){ .scroll-hint svg{ animation:none; } }
  
  @media (max-width:1080px){
    .scroll-hint{ display:none; }
  }

.ha-tabs{ display:none; }
  .ha-tabs{
    display:block; position:fixed; left:0; right:0; top:0; z-index:35;
    height:65px; background:#fff; box-shadow:0 2px 15px 1px rgba(0,0,0,.2);
    font-family:var(--sans);
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-100%);
    transition:opacity .22s ease, transform .28s cubic-bezier(.2,.85,.3,1), visibility .28s;
  }
  .ha-tabs::-webkit-scrollbar{ display:none; }
  .ha-tabs.past-hero{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .ha-tabs-in{
    display:flex; align-items:center; gap:8px;
    height:65px; width:max-content; max-width:1280px; margin:0 auto;   
  }
  
  .ha-tabs a{
    display:flex; align-items:center; justify-content:center;
    position:relative; height:65px; padding:0 20px;
    text-decoration:none; white-space:nowrap;
    font-weight:700; color:#000;
    font-size:17px; letter-spacing:-.34px; line-height:normal;
    transition:background-color .18s ease, color .18s ease;
  }
  .ha-tabs a:hover{ color:#182e55; }
  
  .ha-tabs a.on{ background:#fe5d65; color:#fff; }
  
  .ha-tabs a[data-tab="check"].on{ background:#ff9112; color:#182e55; }
  
  .ha-tabs .t-div{ flex:none; width:1px; height:24px; background:rgba(28,46,82,.28); }
  .ha-tabs a:focus-visible{ outline:2px solid #182e55; outline-offset:-6px; }
  @media (max-width:1360px){
    .ha-tabs-in{ gap:5px; }
    .ha-tabs a{ padding:0 13px; font-size:16px; letter-spacing:-.32px; }
  }
  @media (prefers-reduced-motion: reduce){
    .ha-tabs{ transition:none; transform:none; }
    .ha-tabs a{ transition:none; }
  }

#ways, #w-textbook, #w-bookmap, #w-twin, #w-drill{ scroll-margin-top:-37px; }
  #new, #check{ scroll-margin-top:-59px; }

.lp-side > .bnr-wrap{ position:relative; }
  .lp-side > .bnr-wrap.closed{ display:none; }

.lp-side > .bnr-wrap > .x{
    position:absolute; right:-7px; top:-7px; width:24px; height:24px;
    padding:0 0 3px; border:0; border-radius:50%; background:#8f95a3; color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-family:var(--sans); font-size:14px; line-height:1;
    box-shadow:0 2px 6px rgba(23,46,85,.18);
  }
  .lp-side > .bnr-wrap > .x:hover{ background:#6f7686; }
  .lp-side > .bnr-wrap > .x:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.to-top{
    position:fixed; right:26px; bottom:26px; z-index:40;
    width:48px; height:48px; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg); color:#1C2E52;
    border:1px solid var(--line); border-radius:50%;
    box-shadow:0 4px 18px rgba(23,46,85,.12);
    cursor:pointer;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px) scale(.92);
    transition:opacity .28s ease, transform .28s cubic-bezier(.2,.85,.3,1),
               visibility .28s, box-shadow .15s;
  }
  
     .to-top.show{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
     
  .to-top.show:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(23,46,85,.18); }
  .to-top:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .to-top svg{ width:20px; height:20px; display:block; }
  @media (max-width:768px){
    
    .to-top{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); width:44px; height:44px; }
    .to-top svg{ width:18px; height:18px; }
  }

.bnr-fab{ display:none; }
  @media (max-width:768px){
    
    .bnr-fab{
      display:flex; align-items:center; justify-content:center; gap:5px;
      position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:41;
      
      transform:translate3d(0,0,0);
      transition:transform .34s cubic-bezier(.34,1.12,.5,1), box-shadow .15s;
      height:44px; padding:0 15px;
      background:#1C2E52; color:#fff;
      border:0; border-radius:100px;
      box-shadow:0 4px 18px rgba(23,46,85,.22);
      cursor:pointer; white-space:nowrap;
      font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:-.26px;
    }
    body.has-totop .bnr-fab{ transform:translate3d(0,-54px,0); }

body::after{
      content:""; position:fixed; inset:0; z-index:39;
      background:rgba(16,24,40,.42);
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .24s ease, visibility .24s;
    }
    body.bnr-open::after{ opacity:1; visibility:visible; pointer-events:auto; }
    .bnr-fab svg{ width:16px; height:16px; display:block; transition:transform .28s cubic-bezier(.2,.85,.3,1); }
    .bnr-fab.is-open svg{ transform:rotate(45deg); }
    .bnr-fab:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  }
  
  @media (min-width:769px) and (max-height:500px){
    .to-top{ display:none; }
  }

.lp-bnr .bb-tag{ background:rgba(84,245,216,.25); color:var(--ink); }
  .bnr-nelt .bb-tag{ background:rgba(255,145,18,.25); }
  .bnr-flow .bb-tag{ background:rgba(232,56,40,.25); }

.lp-bnr .bb-tag{ font-size:12px; letter-spacing:-.03em; }
  
  .lp-bnr .bb-t{
    font-family:"Paperlogy","Pretendard Variable",system-ui,sans-serif;
    font-size:15px; letter-spacing:-.03em; font-weight:900;
  }
  @media (max-width:860px){
    .lp-bnr .bb-tag{ font-size:11px; }
    .lp-bnr .bb-t{ font-size:13.5px; }
  }

@property --hvA{ syntax:'<color>'; inherits:false; initial-value:#97BAFF; }
  @property --hvB{ syntax:'<color>'; inherits:false; initial-value:#2E4B85; }

@keyframes bookInA{ from{ transform:translate(-64px,-64px); } to{ transform:translate(0,0); } }
  @keyframes bookInB{ from{ transform:translate( 64px, 64px); } to{ transform:translate(0,0); } }

@keyframes hbVeil{        
    0%, 29%{ opacity:0; }
    46%, 72%{ opacity:.9; }
    88%, 100%{ opacity:1; }
  }
  @keyframes introFadeIn{   
    0%, 78%{ opacity:0; }
    94%, 100%{ opacity:1; }
  }

  @keyframes introDrift{                     
    0%   { transform:translate(-70px,-70px); animation-timing-function:cubic-bezier(.17,.84,.44,1); }
    50%  { transform:translate(0,0); }
    100% { transform:translate(0,0); }
  }
  
  @keyframes haVeil{
    0%, 29%{ opacity:0;  --hvA:#1c2e52; --hvB:#1c2e52; }
    46%, 72%{ opacity:.9; --hvA:#1c2e52; --hvB:#1c2e52; }
    88%, 100%{ opacity:.9; --hvA:#97BAFF; --hvB:#2E4B85; }
  }
  @keyframes introText{                      
    0%, 47%{ opacity:0; transform:translateX(-50%) translateY(16px);
               animation-timing-function:cubic-bezier(.2,.9,.3,1); }
    56%, 66%{ opacity:1; transform:translateX(-50%) translateY(0); }   
    76%, 100%{ opacity:0; transform:translateX(-50%) translateY(-10px); }
  }
  @keyframes introCopyIn{
    0%, 78%{ opacity:0; transform:translateY(18px); animation-timing-function:cubic-bezier(.2,.8,.3,1); }
    94%, 100%{ opacity:1; transform:translateY(0); }
  }
  @keyframes introCardIn{
    0%, 82%{ opacity:0; transform:translateY(18px); animation-timing-function:cubic-bezier(.2,.8,.3,1); }
    97%, 100%{ opacity:1; transform:translateY(0); }
  }

@keyframes hn-roll{
    from{ transform:translateX(0); }
    to  { transform:translateX(calc(-1696.260 * var(--u))); }
  }

.hb2{
    
    --hb2-s:.8333;   
    --hb2-fw:calc(1440px * var(--hb2-s));
    --u:calc(min(100cqw - 80px, var(--hb2-fw)) / 1440);
    position:relative; overflow:hidden; isolation:isolate;
    container-type:inline-size;
    background:#E8EDFF;
    font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;
  }
  
  .hb2{ padding-top:calc(36.8 * var(--u)); }
  .hb2 *{ box-sizing:border-box; }
  .hb2 img{ display:block; }
  .hb2-stage{
    position:relative; width:min(100%, var(--hb2-fw)); margin:0 auto;
    container-type:inline-size; background:#E8EDFF;
    aspect-ratio:1440 / 876.5;
  }
  .hb2-stage > *{ position:absolute; margin:0; }

.hb2-grid{
    top:calc(-36.8cqw / 14.4); bottom:0; left:50%; width:100vw; transform:translateX(-50%);
    background-image:
      linear-gradient(rgba(255,255,255,.5) 0 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px);
    
    background-size:100% calc(22.434cqw/14.4), calc(25.898cqw/14.4) 100%;

background-position:0 calc(59.063cqw/14.4), calc(7.324cqw/14.4 + (100vw - 100cqw)/2) 0;
    background-repeat:repeat-y, repeat-x;
  }

.hb2-mask{
    left:calc(96.869cqw/14.4); top:calc(326.585cqw/14.4);
    width:calc(1342.41cqw/14.4); height:calc(549.542cqw/14.4);
    overflow:hidden;
    
  }
  .hb2-mask > *{ position:absolute; }
  
  .hb2-dev{ left:calc(-9.856cqw/14.4); top:calc(44.48cqw/14.4);
    width:calc(1303.195cqw/14.4); height:calc(753.817cqw/14.4); }
  .hb2-dev > *{ position:absolute; }
  
  .hb2-lid{ left:calc(90.417cqw/14.4); top:calc(82.52cqw/14.4);
    width:calc(823.583cqw/14.4); height:calc(559.148cqw/14.4);
    background:#1A202C; border:calc(2cqw/14.4) solid #4A5568;
    border-radius:calc(28cqw/14.4) calc(28cqw/14.4) calc(4cqw/14.4) calc(4cqw/14.4); }
  .hb2-blk{ left:calc(95.464cqw/14.4); top:calc(87.567cqw/14.4);
    width:calc(813.49cqw/14.4); height:calc(532.907cqw/14.4);
    background:#000; border-radius:calc(22cqw/14.4) calc(22cqw/14.4) 0 0; }
  .hb2-scr{ left:calc(111.506cqw/14.4); top:calc(113.59cqw/14.4);
    width:calc(777.948cqw/14.4); height:calc(392.013cqw/14.4); object-fit:cover; }

.hb2-glow{ left:calc(660.761cqw/14.4); top:calc(44.48cqw/14.4);
    width:calc(526.52cqw/14.4); height:calc(526.52cqw/14.4);
    border-radius:50%; background:#FE5D65; opacity:.15; mix-blend-mode:multiply;
    transform:translate(calc(var(--gx,0) * 1cqw / 14.4), calc(var(--gy,0) * 1cqw / 14.4));
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }

.hb2-sheetbox{ left:calc(766.081cqw/14.4); top:calc(99.49cqw/14.4);
    width:calc(527.254cqw/14.4); height:calc(698.807cqw/14.4);
    display:flex; align-items:center; justify-content:center; }
  .hb2-sheet{ width:calc(475.237cqw/14.4); height:calc(662.549cqw/14.4);
    transform:rotate(4.64deg); box-shadow:0 calc(4cqw/14.4) calc(13cqw/14.4) rgba(0,0,0,.25);
    object-fit:cover; }

.hb2-dev{ animation:hb2-dev-in 1.05s cubic-bezier(.2,.85,.25,1) .1s backwards; }
  .hb2-sheet{ transform-origin:18% 100%;
    animation:hb2-sheet-in 1.15s cubic-bezier(.2,.85,.25,1) .42s backwards; }
  @keyframes hb2-dev-in{
    from{ transform:translateY(calc(78cqw/14.4)) scale(.965); opacity:0; }
    60% { opacity:1; }
    to  { transform:translateY(0) scale(1); opacity:1; }
  }
  @keyframes hb2-sheet-in{
    from{ transform:rotate(17deg) translateY(calc(54cqw/14.4)) scale(.86); opacity:0; }
    45% { opacity:1; }
    to  { transform:rotate(4.64deg) translateY(0) scale(1); opacity:1; }
  }

@media (prefers-reduced-motion: reduce){
    .hb2-dev, .hb2-sheet{ animation:none; }
    .hb2-glow{ transition:none; }
    .hb2-glow{ transform:none; }
    .hb2-sheet{ transform:rotate(4.64deg); }
  }

.hb2-open{
    left:calc(1164.968cqw/14.4); top:calc(67.562cqw/14.4);
    width:calc(163.122cqw/14.4); height:calc(163.122cqw/14.4);
    border-radius:50%; background:#F63645;
  }
  .hb2-open span{
    position:absolute; left:calc(80.352cqw/14.4); top:calc(40.591cqw/14.4);
    transform:translateX(-50%); text-align:center; white-space:nowrap;
    font-weight:900; font-size:calc(34cqw/14.4); line-height:calc(37.6cqw/14.4); color:#fff;
  }

.hb2-ci{ position:absolute;
    left:calc(60.864 * var(--u)); top:calc(38.073 * var(--u));
    width:calc(96.359 * var(--u)); height:calc(30.802 * var(--u)); display:block; }
  .hb2-ci img{ position:absolute; }
  .hb2-ci-m{ left:0; top:calc(0.666 * var(--u)); width:calc(42.289 * var(--u)); height:calc(28.7 * var(--u)); }
  .hb2-ci-w{ left:calc(48.384 * var(--u)); top:0; width:calc(47.998 * var(--u)); height:calc(30.802 * var(--u)); }
  
  .hb2-eb{
    left:calc(679.08cqw/14.4); top:calc(73.555cqw/14.4); transform:translateX(-50%);
    text-align:center;
    font-weight:700; font-size:calc(40cqw/14.4); line-height:calc(48cqw/14.4);
    letter-spacing:calc(-0.96cqw/14.4); color:#001E3D; white-space:nowrap;
  }
  .hb2-eb span{ color:#fff;
    background:#001E3D; padding:calc(2cqw/14.4) calc(6.8cqw/14.4);
    border-radius:calc(2cqw/14.4); }

.hb2-title{
    left:calc(679.08cqw/14.4); top:calc(134.585cqw/14.4); transform:translateX(-50%);
    width:calc(964.161cqw/14.4); text-align:center; white-space:nowrap;
    font-family:"Paperlogy","Pretendard Variable",system-ui,sans-serif;
    font-weight:900; font-size:calc(105cqw/14.4); line-height:calc(120cqw/14.4);
    color:#001E3D; letter-spacing:0;
  }

.hb2-p1{ top:calc(286.585cqw/14.4); transform:translateX(-50%); text-align:center; white-space:nowrap;
    font-weight:600; font-size:calc(24cqw/14.4); line-height:calc(33.6cqw/14.4);
    letter-spacing:calc(-0.4cqw/14.4); color:#001E3D; }
  
  .hb2-pa{ left:calc(429.26cqw/14.4); }    
  .hb2-pb{ left:calc(646.528cqw/14.4); }   
  .hb2-pc{ left:calc(895.22cqw/14.4); }    
  
  .hb2-div{ top:calc(293.575cqw/14.4); width:calc(2cqw/14.4); height:calc(19.61cqw/14.4);
    background:#211464; }
  .hb2-d1{ left:calc(529.669cqw/14.4); }   
  .hb2-d2{ left:calc(757.957cqw/14.4); }   
  .hb2-p2{ left:calc(679.5cqw/14.4); top:calc(326.185cqw/14.4); transform:translateX(-50%);
    text-align:center; white-space:nowrap;
    font-weight:900; font-size:calc(24cqw/14.4); line-height:calc(33.6cqw/14.4);
    letter-spacing:calc(-0.4cqw/14.4); color:#001E3D; }

@media (max-width:1080px){
    
    .hb2{ display:flex; flex-direction:column; align-items:center; padding:120px 20px 0;
      container-type:normal; }
    .hb2 .lp-wrap{ display:contents; }
    .hb2-stage{ display:contents; container-type:normal; }
    .hb2 > *, .hb2-stage > *{ position:static; transform:none; }
    
    .hb2-grid{ display:none; }              

.hb2-ci{ position:absolute; left:24px; top:29px; width:68.82px; height:22px; }
    .hb2-ci img{ position:absolute; }
    .hb2-ci-m{ left:0; top:.48px; width:30.2px; height:20.5px; }
    .hb2-ci-w{ left:34.56px; top:0; width:34.28px; height:22px; }

.hb2-eb{ order:2; margin-top:12px; width:auto; display:inline-block;
      background:rgba(255,255,255,.72); border-radius:99px; padding:11px 20px;
      font-size:clamp(12.5px,4vw,18px); font-weight:800; line-height:1.3;
      letter-spacing:-.4px; text-align:center; white-space:normal; word-break:keep-all; }
    
    .hb2-eb span{ background:none; padding:0; border-radius:0; color:inherit; font-weight:inherit; }
    
    .hb2-title{ order:3; margin-top:28px; width:auto; text-align:center; white-space:normal;
      font-size:clamp(48px,14vw,76px); line-height:1.08; }

.hb2-p1, .hb2-p2{ margin:0; width:auto; text-align:center; white-space:normal;
       font-size:16px; line-height:1.55; letter-spacing:-.24px; }
       .hb2-p2{ order:4; margin-top:14px; margin-bottom:10px;
       font-size:clamp(15.2px,4.44vw,24px); line-height:1.45; }
       
    .hb2-p1::before{ content:"#"; }
    .hb2-pa{ order:5; }
    .hb2-pb{ order:6; }
    .hb2-pc{ order:7; }
    .hb2-div{ display:none; }
    .hb2-open{ position:absolute; left:auto; right:24px; top:20px; margin:0;
      width:82px; height:82px; border-radius:50%; }
    .hb2-open span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      font-size:17px; font-weight:800; line-height:1.15; }

    .hb2-mask{ order:9; position:relative; left:auto; top:auto; align-self:stretch;
      width:auto; margin:18px -20px 0; aspect-ratio:1342.41 / 529.542; height:auto;
      container-type:inline-size; }
    .hb2-mask > *{ position:absolute; }
    .hb2-dev{ left:calc(-9.856cqw/13.4241); top:calc(44.480cqw/13.4241);
      width:calc(1303.195cqw/13.4241); height:calc(753.817cqw/13.4241); }
    
    .hb2-lid{ left:calc(90.417cqw/13.4241); top:calc(82.520cqw/13.4241);
      width:calc(823.583cqw/13.4241); height:calc(559.148cqw/13.4241);
      border-width:calc(2cqw/13.4241);
      border-radius:calc(28cqw/13.4241) calc(28cqw/13.4241) calc(4cqw/13.4241) calc(4cqw/13.4241); }
    .hb2-blk{ left:calc(95.464cqw/13.4241); top:calc(87.567cqw/13.4241);
      width:calc(813.490cqw/13.4241); height:calc(532.907cqw/13.4241);
      border-radius:calc(22cqw/13.4241) calc(22cqw/13.4241) 0 0; }
    .hb2-scr{ left:calc(111.506cqw/13.4241); top:calc(113.590cqw/13.4241);
      width:calc(777.948cqw/13.4241); height:calc(392.013cqw/13.4241); }
    .hb2-glow{ left:calc(660.761cqw/13.4241); top:calc(24.480cqw/13.4241);
      width:calc(526.520cqw/13.4241); height:calc(526.520cqw/13.4241); }
    .hb2-sheetbox{ left:calc(766.081cqw/13.4241); top:calc(79.490cqw/13.4241);
      width:calc(527.254cqw/13.4241); height:calc(698.807cqw/13.4241); }
    .hb2-sheet{ width:calc(475.237cqw/13.4241); height:calc(662.549cqw/13.4241);
      box-shadow:0 3px 10px rgba(0,0,0,.25); }

}
  @media (max-width:420px){
    .hb2{ padding:116px 16px 0; }
    .hb2-ci{ left:20px; }
    .hb2-open{ right:20px; }
    .hb2-eb{ padding:10px 16px; }
    .hb2-mask{ margin:14px -16px 0; }
  }

body{
    --display:"Paperlogy","Pretendard Variable","Pretendard",system-ui,sans-serif;
  }
  .aw-no, .tw-no, .bw-no, .pw-no, .dw-no, .aw-h, .tw-h, .bw-h, .pw-h, .dw-h, .fw-t{
    font-family:"Paperlogy","Pretendard Variable","Pretendard",system-ui,sans-serif;
  }

.m-br{ display:none; }
  .d-br{ display:inline; }

@media (max-width:768px){

.m-br{ display:inline; }
    .d-br{ display:none; }

.lp-wrap{ padding:0 16px; }

.ha-tabs{ height:48px; }
    .ha-tabs-in{ height:48px; gap:6px; margin:0; padding:0 16px; }
    .ha-tabs a{ height:48px; padding:0 14px; font-size:15px; letter-spacing:-.3px; }
    #ways, #w-textbook, #w-bookmap, #w-twin, #w-drill, #new, #check{ scroll-margin-top:48px; }

#check .wf-row > *{ min-width:0; }

#check .wf-shots2{ gap:12px; }
    #check .wf-shots2 .dev{ width:auto; flex:1 1 0; min-width:0; max-width:150px; }

#check .dev{ border-radius:24.6px; padding:5.8px; }
    
    #check .dev-scr{
      position:absolute; inset:5.8px; width:auto; height:auto;
      border-radius:19.4px;
    }
    #check .dev::after{ width:45.3px; height:11.6px; top:12.3px; }
    #check .dev-scr::after{ width:59.5px; height:2.6px; bottom:5.2px; }

#check .qq-stack{ width:230px; max-width:100%; }
    #check .wf.sheet.qq{ height:auto; width:100%; }
    #check .qq-stack::before{ transform:rotate(-4.5deg) translate(-8.3px, -2.8px); }

#check .wf-tx h3 br{ display:none; }
    
    #check #q-share .wf-tx h3 br{ display:inline; }
    
    #check #q-sheet .wf-tx h3 br{ display:inline; }
    #check .wf-tx h3,
    #check .wf-tx .wf-lead{ word-break:keep-all; }
    
    #check .wf-row h3{ font-size:32px; letter-spacing:-.4456px; line-height:1.161; }
    #check .wf-row .wf-lead{
      font-size:16px; line-height:22px; letter-spacing:-.28px;
      margin-inline:auto;                      
    }

#check .wf-tx{ text-align:center; }

    #check .lp-shd h2{
      font-size:32px; font-weight:800; letter-spacing:-.4456px; line-height:1.161;
    }
    #check .lp-shd h2 .lead{ font-size:32px; font-weight:800; }
    
    #check .lp-shd p{ margin-top:16px; font-size:16px; line-height:22px; }

#check .use-item{ padding:26px 18px; }
    #check .use-item h3{ font-size:22px; }
    #check .use-item p{ font-size:15px; }

#lp-side{
      display:flex; flex-direction:column;
      left:auto; right:14px; top:auto; transform:none;
      bottom:calc(68px + env(safe-area-inset-bottom));
      max-height:calc(100vh - 178px); overflow-y:auto;
      opacity:0; visibility:hidden; pointer-events:none;
      
      transition:opacity .2s ease, visibility .2s,
                 transform .34s cubic-bezier(.34,1.12,.5,1);
    }
    body.has-totop #lp-side{ transform:translate3d(0,-54px,0); }
    #lp-side.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
    
    .lp-side > .bnr-wrap > .x{ display:none; }
    /* 닫기 버튼이 없는 폭이라 데스크톱에서 붙은 .closed 를 되살린다 —
       클래스는 그대로 두므로 데스크톱으로 돌아가면 닫은 상태가 유지된다 */
    .lp-side > .bnr-wrap.closed{ display:block; }

#new .lp-shd{ padding:0 16px; }
    
    #new .lp-shd h2{ font-size:32px; font-weight:800; letter-spacing:-.4456px; line-height:1.161; }
    #new .lp-shd h2 .lead{ font-size:32px; font-weight:800; }
    #new{ padding-bottom:64px; }

#new .fw-track > .wf-row{
      width:calc(100vw - 32px);
      padding:24px 18px 28px; border-radius:16px;
    }

#new .fw-track .wf-no{ font-size:14px; padding:6px 13px; }
    #new .fw-track h3, #new .fw-track h3 .lead{ font-size:21px; letter-spacing:-.4px; }
    #new .fw-track .wf-lead{ font-size:14px; line-height:1.6; }

#new .fw-track .wf.a-shot.feat, #new .fw-track .wf.a-shot.feat.g16{
      width:100%; height:auto; aspect-ratio:707 / 421;
      margin-top:16px; padding:6px; border-radius:8px 8px 2px 2px;
    }
    
    #new .fw-track .wf.a-shot.feat::after{
      top:100%; width:109.5%; margin-left:-54.75%; height:9px; border-radius:0 0 5px 5px;
    }

#new .fw-stage{ display:none; }   
    #new .fw-scale::before, #new .fw-scale::after{ display:none; }

    #new .fw-view{
      overflow-x:auto; overflow-y:hidden;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding:8px 16px 26px;
      overscroll-behavior-x:contain;
    }
    #new .fw-view::-webkit-scrollbar{ display:none; }
    #new .fw-track{
      transform:none !important; transition:none !important;
      gap:12px;
    }
    #new .fw-track > [aria-hidden="true"]{ display:none; }
    #new .fw-track > .wf-row{
      scroll-snap-align:center;
      opacity:1 !important; transform:none !important;
    }

#new .fw-nav{ margin-top:20px; }
    #new .fw-dots{
      position:relative; gap:0;
      width:120px; height:4px; border-radius:99px;
      background:#b9c2d8; overflow:hidden;
    }
    #new .fw-dots button{ display:none; }
    #new .fw-dots::after{
      content:""; position:absolute; left:0; top:0; bottom:0; width:100%;
      background:#1c2e52; border-radius:99px;
      transform:scaleX(var(--fwp, .25)); transform-origin:0 50%;
    }

.lp-bottom{ padding:64px 0; }
    .lp-bottom h2{ font-size:32px; word-break:keep-all; }
    .lp-bottom p{ font-size:15px; margin-top:18px; }

.aw-band{
      width:100%; max-width:100%;
      aspect-ratio:auto; height:auto;          
      overflow:visible;                        
      padding:44px 16px 52px;                  
    }

.aw-band .hs-stage{
      position:static; left:auto; top:auto;
      width:100%; height:auto;                 
      transform:none;                          
      display:grid; grid-template-columns:minmax(0,1fr);
      align-items:center;
    }

.aw-band .aw-head{
      grid-row:1; grid-column:1;
      position:static; left:auto; top:auto; width:auto;   
      text-align:center;
    }
    .aw-band .aw-no{
      font-size:30px; letter-spacing:-.6px;    
    }
    .aw-band .aw-h{
      margin-top:6px;                          
      font-size:32px; font-weight:800; line-height:1.161; letter-spacing:-.4456px;   
      white-space:normal;                      
      word-break:keep-all;                     
    }
    .aw-band .aw-h .lead{
      font-size:32px; font-weight:800;         
    }
    
    .aw-band .aw-p{
      margin-top:16px;                         
      font-size:16px; line-height:22px; letter-spacing:-.28px;      
      word-break:keep-all;
    }

.aw-band .aw-mac{
      grid-row:3; grid-column:1;
      position:relative;                       
      left:auto; top:auto;                     
      width:100%; height:auto; aspect-ratio:1240 / 702;   
      margin-top:calc(40px - 3.673%);
      
    }
    .aw-band .aw-mac .lid{
      left:4.2742%;                            
      width:91.4516%;                          
      height:96.0114%;                         
      border-radius:5px 5px 1px 1px;           
    }
    .aw-band .aw-mac .cam{
      top:.816%;                               
      width:.6173%;                            
      height:1.0386%;                          
      margin-left:-.3086%;                     
    }
    .aw-band .aw-mac .scr{
      left:1.4991%;                            
      top:2.5223%;                             
      width:97.0018%;                          
      height:91.8027%;                         
    }
    .aw-band .aw-mac .base{
      top:96.0114%;                            
      width:100%;                              
      height:3.9886%;                          
      border-radius:0 0 4px 4px;               
      box-shadow:0 8px 18px rgba(28,46,82,.22);
    }
    .aw-band .aw-mac .base::after{
      width:12.0968%;                          
      height:39.2857%;                         
      margin-left:-6.0484%;                    
      border-radius:0 0 2px 2px;               
    }

.aw-band .aw-sheet{
      grid-row:3; grid-column:1;
      position:relative;                       
      left:auto; top:auto;                     
      width:100%; height:auto; aspect-ratio:972.5 / 622;  
      margin-top:calc(40px - 3.673%);          
    }
    .aw-band .aw-sheet .sh{
      box-shadow:0 5px 14px rgba(28,46,82,.18);
    }
    .aw-band .aw-sheet .s-l{
      left:.0658%;                             
      top:3.7122%;                             
      width:42.4812%;                          
      height:92.5675%;                         
    }
    .aw-band .aw-sheet .s-r{
      left:57.5856%;                           
      top:3.7122%; width:42.4812%; height:92.5675%;
    }
    .aw-band .aw-sheet .s-c{
      left:27.128%;                            
      top:0;
      width:45.8879%;                          
      height:100%;                             
    }

.aw{ --obj:1; }                       
    .aw .aw-sheet{
      transform:translateY(18px) scale(.97);   
    }
    .aw.aw-done .aw-sheet{
      transform:translateY(0) scale(1);        
    }

.dw .dw-band{
    aspect-ratio:auto;          
    height:auto;
    overflow:visible;           
    padding:44px 16px 52px;     
  }

.dw .dw-band .hs-stage{
    position:static; left:auto; top:auto;
    width:auto; height:auto;        
    transform:none;                 
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "obj";   
  }

.dw .dw-band .dw-head{
    grid-area:head;
    position:static; left:auto; top:auto;   
    width:auto;                             
    text-align:center;                      
  }
  .dw .dw-band .dw-no{
    font-size:30px;            
    font-weight:700;
    letter-spacing:-.6px;      
  }
  .dw .dw-band .dw-h{
    margin:6px 0 0;            
    font-size:32px;            
    font-weight:800;           
    line-height:1.161;         
    letter-spacing:-.4456px;   
    white-space:normal;        
    word-break:keep-all;       
  }
  .dw .dw-band .dw-h .lead{
    font-size:32px;            
    font-weight:800;           
    line-height:1.161;         
  }
  .dw .dw-band .dw-p{
    margin:16px 0 0;           
    font-size:16px;            
    line-height:22px;          
    letter-spacing:-.28px;     
    word-break:keep-all;
  }

.dw-band .dw-mac{
    position:static; left:auto; top:auto;   
    width:100%;                             
    height:auto;                            
  }
  
  .dw-band .dw-mac .lid{
    position:relative; left:auto; top:auto; 
    width:91.4516%;                         
    height:auto;                            
    aspect-ratio:1134 / 674;
    margin:0 auto;                          
    border-radius:8px 8px 2px 2px;          
  }
  
  .dw-band .dw-mac .cam{
    left:49.6914%;             
    margin-left:0;
    top:.816%;                 
    width:.6173%;              
    height:auto; aspect-ratio:1 / 1;
  }
  
  .dw-band .dw-mac .scr{
    left:1.4991%;              
    top:2.5223%;               
    width:97.0018%;            
    height:auto; aspect-ratio:16 / 9;
  }
  
  .dw-band .dw-mac .base{
    position:relative; left:auto; top:auto; 
    width:100%;                             
    height:auto; aspect-ratio:1240 / 28;    
    border-radius:0 0 4px 4px;              
    box-shadow:0 10px 24px rgba(28,46,82,.22);   
  }
  
  .dw-band .dw-mac .base::after{
    left:43.9516%;             
    margin-left:0;             
    width:12.0968%;            
    height:auto; aspect-ratio:150 / 11;
    border-radius:0 0 3px 3px; 
  }

.dw-band .dw-sheet{
    position:relative; left:auto; top:auto; 
    width:100%;                             
    height:auto; aspect-ratio:972.5 / 622;  
  }
  .dw-band .dw-sheet .sh{
    box-shadow:0 5px 14px rgba(28,46,82,.18);    
  }
  
  .dw-band .dw-sheet .s-l{
    left:.0658%;               
    top:3.7122%;               
    width:42.4812%;            
    height:auto; aspect-ratio:413.13 / 575.77;
  }
  .dw-band .dw-sheet .s-r{
    left:57.5856%;             
    top:3.7122%;
    width:42.4812%;
    height:auto; aspect-ratio:413.13 / 575.77;
  }
  
  .dw-band .dw-sheet .s-c{
    left:27.1280%;             
    top:0;
    width:45.8879%;            
    height:auto; aspect-ratio:446.26 / 621.95;
  }

.dw{ --obj:1; }                 

.dw .dw-band .dw-mac{
    grid-area:obj;
    align-self:center;
    margin-top:calc(40px - 3.673%);   
    top:auto;                     
    transform:none;               
  }
  .dw .dw-band .dw-sheet{
    grid-area:obj;
    align-self:center;
    margin-top:calc(40px - 3.673%);   
    top:auto;                     
    transform:translateY(18px) scale(.97);   
  }
  
  .dw.aw-done .dw-band .dw-mac{
    transform:scale(.985);        
  }
  .dw.aw-done .dw-band .dw-sheet{
    transform:none;               
  }

.tw-band{
      width:min(402px, 100%); margin-inline:auto;
      aspect-ratio:402 / 1236.9;
      height:auto; overflow:hidden;
    }
    .tw-band .hs-stage{
      width:402px; height:1236.9px;
      transform:scale(var(--hs-k, 1));
    }
    @supports (scale: calc(1px / 1px)){
      .tw-band .hs-stage{ transform:scale(calc(100cqw / 402px)); }
    }

.tw-head{ left:16px; top:44px; width:370px; }
    .tw-no{ font-size:30px; letter-spacing:-.6px; }
    .tw-h{
      margin:5.57px 0 0; font-size:32px; font-weight:800; line-height:1.161; letter-spacing:-.4456px;
      white-space:normal; word-break:keep-all;   
    }
    .tw-h .lead{ font-size:32px; font-weight:800; }
    .tw-p{ margin:16px 0 0; font-size:16px; line-height:22px; letter-spacing:-.28px; }

.tw-support{ left:82px; top:221.84px; }

.tw-book{ border-width:.577px; }
    .tw-b1{ left:45.41px;  top:311.13px; width:103.234px; height:134.204px; }
    .tw-b2{ left:117px;    top:310.84px;    width:103.679px; height:134.783px; }
    .tw-b3{ left:189.04px; top:310.84px;    width:103.679px; height:134.783px; }
    .tw-b4{ left:16px;     top:429.94px;  width:103.679px; height:134.783px; }
    .tw-b5{ left:88.04px;  top:429.94px;  width:103.679px; height:134.783px; }
    .tw-b6{ left:160.07px; top:429.94px;  width:103.679px; height:134.783px; }

.tw-card .tab-l{ left:245.7px;  top:365.85px; width:47.916px; height:8.467px;
      border-radius:2.569px 2.569px 0 0; }
    .tw-card .tab-r{ left:275.66px; top:365.85px; width:51.325px; height:9.069px;
      border-radius:2.569px 2.569px 0 0; }
    .tw-card .body{ left:245.7px;   top:374.31px; width:140.3px;  height:190.506px;
      border-radius:0 2.569px 2.569px 0; }
    .tw-card p{
      left:253.56px; top:403.33px; width:124.466px; height:87.197px;
      font-size:14px; font-weight:600; letter-spacing:-.2511px; line-height:40.5px;
    }
    .tw-card p b{ top:-8px; font-size:36px; font-weight:800; }

    .tw-card .tw-pubs{ left:263.1px; top:513.6px; width:108.8px;
      grid-template-columns:36.3px 44.1px 28.4px;
      row-gap:3px; font-size:12.5px; letter-spacing:-.2px; line-height:16.3px; }
    .tw-card .tw-pubs span:nth-child(3n+2)::before,
    .tw-card .tw-pubs span:nth-child(3n+2)::after{ height:11.4px; }

    .tw-support i svg{ width:20px; height:20px; }
    .tw-card .tw-pubs::before{ top:-17px; }

.tw-arrow{ left:92px; top:587.84px; width:223.712px; height:175.907px; }
    .tw-arrow img{ width:223.712px; height:175.907px; transform:none; }
    
    .tw-arrow span{ left:31.36px; top:61.8px; width:161px; font-size:22px; line-height:1.2; }

.tw-sheet{ border-width:.399px; }
    .tw-s1{ left:82px; top:775.84px; width:237.641px; height:331.059px; }
    .tw-s2{ display:none; }

.tw-note{ left:16px; top:1168.9px; width:370px; transform:none;
      text-align:center; white-space:normal; font-size:14px; }
    .aw-sheet .sh-note, .dw-sheet .sh-note{ margin-top:10px; font-size:14px; }

.tw .tw-book, .tw .tw-card{
      opacity:0; transform:translateY(22px);
      transition:opacity .42s ease, transform .5s cubic-bezier(.2,.85,.3,1);
      
      transition-delay:0s !important;
    }
    .tw.m1 .tw-book, .tw.m1 .tw-card{ opacity:1; transform:none; }

.tw .tw-arrow{
      opacity:0; transform:translateY(-200px); z-index:1;
      transition:opacity .3s ease, transform .6s cubic-bezier(.2,.85,.3,1);
    }
    .tw.m2 .tw-arrow{ opacity:1; transform:none; }

.tw .tw-sheet{
      opacity:0; transform:translateY(22px); transition-delay:0s;
      transition:opacity .42s ease, transform .5s cubic-bezier(.2,.85,.3,1);
    }
    .tw .tw-chips i{
      opacity:0; transform:translateY(14px); transition-delay:0s;
      transition:opacity .34s ease, transform .42s cubic-bezier(.2,.85,.3,1);
    }
    .tw.m3 .tw-sheet, .tw.m3 .tw-chips i{ opacity:1; transform:none; }
    
    .tw.m3 .tw-note{ opacity:1; }

.tw-chips{
      left:17px; top:1036.9px; width:368px; gap:10px;
      flex-direction:row; align-items:center; justify-content:center;
    }
    .tw-chips i{
      width:116px; height:116px; flex:none; padding:8px;
      border-radius:50%;
      text-align:center; white-space:normal; word-break:keep-all;
      font-size:17px; font-weight:700; letter-spacing:-.34px; line-height:1.3;
    }

.pw-band{
      width:min(402px, 100%); margin-inline:auto;
      aspect-ratio:402 / 1515.71;   
      height:auto; overflow:hidden;
    }
    .pw-band .hs-stage{
      width:402px; height:1515.71px;
      transform:scale(var(--hs-k, 1));
    }
    @supports (scale: calc(1px / 1px)){
      .pw-band .hs-stage{ transform:scale(calc(100cqw / 402px)); }
    }

.pw-head{ left:16px; top:44px; width:370px; }
    .pw-no{ font-size:30px; letter-spacing:-.6px; }
    .pw-h{
      margin:5.57px 0 0; font-size:32px; font-weight:800; line-height:1.161; letter-spacing:-.4456px;
      white-space:normal; word-break:keep-all;   
    }
    .pw-h .lead{ font-size:32px; font-weight:800; }
    .pw-p{ margin:16px 0 0; font-size:16px; line-height:22px; letter-spacing:-.28px; }

.pw-inner{ left:87.84px; top:273.98px; width:298.16px; height:402.17px; }
    .pw-dot{ left:54.64px; top:494.7px; width:181.45px; height:181.45px; }
    .pw-cov{ left:16px; top:516.98px; width:117.9px; height:159.17px; }

.pw-arrow{ left:89.14px; top:706.15px; width:223.712px; height:175.907px; }
    .pw-arrow img{ width:223.712px; height:175.907px; transform:none; }
    .pw-arrow span{ left:55.78px; top:75px; width:111.863px; font-size:22px; }

.pw-sheet{ left:58.96px; top:912.05px; width:284.08px; height:402.17px; }

.pw .pw-inner, .pw .pw-cov{
      opacity:0; transform:translateY(22px);
      transition:opacity .42s ease, transform .5s cubic-bezier(.2,.85,.3,1);
    }
    .pw .pw-dot{
      opacity:0; transform:scale(.7);
      transition:opacity .42s ease, transform .5s cubic-bezier(.2,.85,.3,1);
    }
    .pw.m1 .pw-inner, .pw.m1 .pw-cov{ opacity:1; transform:none; }
    .pw.m1 .pw-dot{ opacity:.33; transform:none; }

.pw .pw-arrow{
      opacity:0; transform:translateY(-200px); z-index:0;
      transition:opacity .3s ease, transform .6s cubic-bezier(.2,.85,.3,1);
    }
    .pw.m2 .pw-arrow{ opacity:1; transform:none; }

    .pw .pw-sheet{
      opacity:0; transform:translateY(22px); transition-delay:0s;
      transition:opacity .42s ease, transform .5s cubic-bezier(.2,.85,.3,1);
    }
    .pw .pw-chips i{
      opacity:0; transform:translateY(14px); transition-delay:0s;
      transition:opacity .34s ease, transform .42s cubic-bezier(.2,.85,.3,1);
    }
    .pw.m3 .pw-sheet, .pw.m3 .pw-chips i{ opacity:1; transform:none; }
    
    .pw.m3 .pw-note{ opacity:1; }

.pw-note{
      left:16px; top:1376.2px; width:370px;
      transform:none; text-align:center; white-space:normal;
      font-size:14px; line-height:1.2; letter-spacing:-.28px;
    }

.pw-chips{
      left:17px; top:1244.2px; width:368px; gap:10px;
      flex-direction:row; align-items:center; justify-content:center;
    }
    .pw-chips i{
      width:116px; height:116px; flex:none; padding:8px;
      border-radius:50%;
      text-align:center; white-space:normal; word-break:keep-all;
      font-size:16px; letter-spacing:-.32px; line-height:1.3;
    }

.bw-band{ aspect-ratio:auto; height:auto; overflow:visible; padding:44px 16px 52px; }
    .bw-band .hs-stage{
      position:static; width:auto; height:auto; transform:none;
    }

.bw-head{ position:static; left:auto; top:auto; width:auto; }
    .bw-no{ font-size:30px; letter-spacing:-.6px; }
    .bw-h{
      margin:6px 0 0; font-size:32px; font-weight:800; letter-spacing:-.4456px; line-height:1.161;
      white-space:normal; word-break:keep-all;   
    }
    .bw-h .lead{ font-size:32px; font-weight:800; }
    .bw-p{ margin:16px 0 0; font-size:16px; line-height:22px; letter-spacing:-.28px; }

.bw-grid{
      position:static; left:auto; top:auto;
      width:calc(100% + 32px); margin:40px -16px 0;   
      display:block; overflow:hidden;
      scrollbar-width:none;
      cursor:grab; touch-action:pan-y;
    }
    .bw-grid::-webkit-scrollbar{ display:none; }
    .bw-track{
      display:flex; align-items:flex-start; gap:32px; width:max-content;
      padding:0 16px;
      transform:translate3d(var(--bw-x, 0px), 0, 0);
    }
    .bw-g{ gap:20px; }
    .bw-g > .lbl{
      padding:8px 20px; border-radius:35.399px;
      color:#1b114c; font-size:18px; letter-spacing:-.36px;
    }
    
    .bw-g .row > div{ height:215.9px; }
    .bw-g .row > div + div{ margin-left:-116.49px; }
    
    .bw-g .row img{ box-shadow:8px 0 14px -4px rgba(0,0,0,.45), 0 3px 9px -3px rgba(0,0,0,.32); }

.bw-dots{ display:none; }

.tw-band .tw-support{
      width:238px; max-width:100%; height:56px;
      padding:0 14px; gap:8px; border-width:2px;
      font-size:18px; letter-spacing:-.36px;
    }
    .tw-band .tw-support svg{
      width:15.48px; height:15.48px;
    }
  }

.tsm{ position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center; padding:24px;
    font-family:var(--sans); }
  .tsm[hidden]{ display:none; }
  .tsm-back{ position:absolute; inset:0; background:rgba(16,24,40,.55); }
  .tsm-panel{ position:relative; display:flex; flex-direction:column;
    width:min(1200px, 100%); height:88vh; background:var(--bg);
    border:1px solid var(--line); border-radius:16px;
    box-shadow:0 30px 80px -20px rgba(16,24,40,.5); overflow:hidden; }
  .tsm-panel:focus{ outline:none; }
  .tsm-hd{ flex:none; position:relative; padding:30px 60px 24px;
    text-align:center; border-bottom:1px solid var(--line); }
  .tsm-hd h2{ font-family:var(--display); margin:0;
    font-size:30px; font-weight:700; letter-spacing:-.6px; line-height:1.2; color:var(--ink); }
  .tsm-hd h2 i{ font-style:normal; margin-left:10px;
    font-size:19px; font-weight:700; color:var(--accent); }
  .tsm-x{ position:absolute; right:18px; top:20px; width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line); border-radius:10px;
    color:var(--body); cursor:pointer; transition:background-color .18s ease; }
  .tsm-x:hover{ background:var(--bg-tint); }
  .tsm-x:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .tsm-tools{ flex:none; display:flex; align-items:center; justify-content:center;
    flex-wrap:wrap; gap:10px 14px; padding:18px 34px;
    border-bottom:1px solid var(--line); background:var(--bg-tint); }
  .tsm-chips{ display:flex; gap:6px; flex:none; }
  .tsm-chip{ font-family:inherit; font-size:var(--text-body); line-height:var(--line-ui);
    font-weight:600; color:var(--muted); background:#fff;
    border:1.5px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer;
    transition:background-color .16s ease, border-color .16s ease, color .16s ease; }
  .tsm-chip:hover{ border-color:#b9c0cd; }
  .tsm-chip.on{ border-color:var(--accent); background:var(--accent); color:#fff; }
  .tsm-chip:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .tsm-sbox{ display:flex; align-items:center; gap:8px; width:260px;
    border:1.5px solid var(--line); border-radius:9px; padding:0 12px; background:#fff; }
  .tsm-sbox:focus-within{ border-color:var(--accent); }
  .tsm-sbox svg{ flex:none; width:16px; height:16px; color:var(--faint); }
  .tsm-sbox input{ flex:1; min-width:0; border:0; outline:none; font-family:inherit;
    font-size:var(--text-body); height:40px; background:transparent; color:var(--ink); }
  .tsm-sbox input::-webkit-search-cancel-button{ cursor:pointer; }
  .tsm-body{ flex:1; min-height:0; overflow-y:auto;
    display:flex; flex-direction:column; padding:30px 34px 81px; }
  .tsm-empty{ margin:auto 0; text-align:center;
    font-size:17px; line-height:1.6; color:var(--muted); }
  .tsm-grp + .tsm-grp{ margin-top:56px; padding-top:44px; border-top:1px solid var(--line); }
  .tsm-cap{ margin:0 0 34px; text-align:center;
    font-size:22px; line-height:1.7; color:var(--muted); }
  .tsm-cap b{ font-weight:700; color:var(--ink); }
  .tsm-books{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; row-gap:52px; }
  .tsm-b{ position:relative; width:128px; aspect-ratio:.72;
    border:1px solid var(--line); border-radius:5px; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    padding:16px 13px 16px 22px;
    overflow:visible; }
  .tsm-b::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:9px;
    background:rgba(255,255,255,.28); border-right:1px solid rgba(0,0,0,.14);
    border-radius:5px 0 0 5px; }
  .tsm-b > i{ position:relative; z-index:1; font-style:normal;
    font-size:15px; font-weight:700; line-height:1.4;
    color:inherit; word-break:keep-all; text-align:center; }
  .tsm-b.cov{ padding:0; border-color:#DCE0E7;
    background:center/cover no-repeat var(--bg-tint);
    box-shadow:0 1px 2px rgba(26,26,26,.05), 0 10px 20px -14px rgba(26,26,26,.4); }
  .tsm-b.cov::before{ display:none; }
  .tsm-b[hidden]{ display:none; }
  .tsm-grp[hidden]{ display:none; }
  .tsm-grp[hidden] + .tsm-grp{ margin-top:0; padding-top:0; border-top:0; }
  .tsm-b > b{ position:absolute; left:-6px; right:-6px; top:calc(100% + 7px);
    font-size:11px; font-weight:700; line-height:1.4; letter-spacing:-.02em;
    color:var(--body); word-break:keep-all; text-align:center; }
  .tsm-b > b em{ display:block; font-style:normal; font-weight:500; color:var(--muted); }
  @media (max-width:1000px){
    .tsm-hd{ padding:24px 56px 20px; }
    .tsm-hd h2{ font-size:25px; }
    .tsm-hd h2 i{ font-size:16px; margin-left:8px; }
    .tsm-x{ right:14px; top:16px; }
    .tsm-tools{ padding:14px 18px; gap:8px 10px; }
    .tsm-chip{ font-size:15px; padding:3px 10px; }
    .tsm-sbox{ width:200px; }
    .tsm-sbox input{ font-size:15px; height:36px; }
    .tsm-body{ padding:24px 22px 69px; }
    .tsm-cap{ font-size:17px; margin-bottom:26px; }
    .tsm-grp + .tsm-grp{ margin-top:40px; padding-top:32px; }
    .tsm-books{ gap:14px; row-gap:46px; }
    .tsm-b{ width:calc((100% - 42px) / 4); }
    .tsm-b > i{ font-size:13px; }
  }
  @media (max-width:640px){
    .tsm{ padding:0; }
    .tsm-panel{ width:100%; height:100%; border:0; border-radius:0; }
    .tsm-b{ width:calc((100% - 42px) / 4); }
  }

.ne_footer_common *{ box-sizing:border-box;
    font-family:"Pretendard Variable","Pretendard",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
  .ne_footer_common{ background:#efefec; padding:50px 0 120px; position:relative;
    text-align:left; margin-top:-1px; border-top:0; font-size:16px; }
  .ne_footer_common a{ color:inherit; text-decoration:none; }
  .ne_footer_common ul{ list-style:none; margin:0; }
  
  .ne_footer_common .inner{ max-width:1280px; margin:0 auto; padding:0 40px; position:relative; }
  .ne_footer_common .footer_logo{ position:absolute; right:40px; bottom:0; width:80px; height:24px; margin:0; }
  .ne_footer_common .footer_logo img{ width:100%; filter:brightness(0.66); }
  .ne_footer_common .footer_list{ display:flex; justify-content:space-between; }
  .ne_footer_common .footer_menu{ display:flex; gap:0 23px; flex:1 0 auto; padding:0; height:40px; flex-wrap:wrap; }
  .ne_footer_common .footer_menu li{ position:relative; }
  .ne_footer_common .footer_menu li:after{ content:''; display:inline-block; width:1px; height:14px;
    background:#d6d3cf; position:absolute; top:2px; left:-12px; }
  .ne_footer_common .footer_menu li:nth-child(1):after{ display:none; }
  .ne_footer_common .footer_menu li a{ color:#77736f; font-size:15px; line-height:18px; letter-spacing:-0.04rem; }
  .ne_footer_common .footer_menu li a span{ color:#1d1717; font-weight:650; }
  .ne_footer_common .family_site{ position:relative; float:none; z-index:5; }
  .ne_footer_common .btn_familysite{ position:relative; display:inline-block; width:160px; height:40px;
    border-radius:40px; line-height:36px; border:2px solid #c9c6c1; color:#77736f; padding:0 20px; cursor:pointer; }
  .ne_footer_common .btn_familysite.active{ border-radius:0 0 20px 20px; border-top:2px solid #efefec; }
  .ne_footer_common .btn_familysite:after{ content:''; display:inline-block; width:24px; height:24px;
    background:url(https://pic.neungyule.com/neneungyule/img/common/ico_chevron_x24.png) center / 100% auto no-repeat;
    filter:brightness(0.72); position:absolute; top:6px; right:14px; transform:rotate(-180deg); }
  .ne_footer_common .btn_familysite.active:after{ transform:rotate(0); }
  .ne_footer_common .list_familysite{ display:none; width:160px; border:2px solid #c9c6c1; position:absolute;
    left:0; bottom:38px; border-radius:20px 20px 0 0; padding:10px; border-bottom:0; background:#efefec;
    transform:translate3d(0,0,0); z-index:5; }
  .ne_footer_common .list_familysite li a{ display:block; width:100%; height:40px; line-height:40px;
    color:#77736f; padding:0 14px; white-space:nowrap; }
  .ne_footer_common .list_familysite li a:hover{ background:#fff; border-radius:5px; color:#1d1717; }
  .ne_footer_common .info_list{ margin:22px 0 0; list-style:none; }
  .ne_footer_common .info_list .info{ color:#77736f; margin-bottom:9px; line-height:19px; }
  .ne_footer_common .info_list .info a{ color:#77736f; }
  .ne_footer_common .info_list .info em{ color:#1d1717; font-weight:700; font-style:normal; }
  .ne_footer_common .info_list .bar{ display:inline-block; width:1px; height:19px;
    background:rgba(119,115,111,0.28); vertical-align:bottom; margin:0 6px; }
  .ne_footer_common .copyright{ font-size:15px; letter-spacing:-0.04rem; color:#77736f; }

@media (max-width:1000px){
    .ne_footer_common .inner{ padding:0 24px; }
    .ne_footer_common .footer_logo{ right:24px; }
  }
  
  @media (max-width:768px){
    .ne_footer_common{ padding:36px 0 88px; }
    .ne_footer_common .footer_logo{ display:none; }
    .ne_footer_common .info_list{ display:none; }
    .ne_footer_common .footer_list{ flex-direction:column; align-items:flex-start; gap:22px; }
    .ne_footer_common .footer_menu{ width:100%; flex:0 1 auto; gap:13px 20px; height:auto; }
    .ne_footer_common .footer_menu li:after{ display:none; }
    .ne_footer_common .footer_menu li a{ font-size:14px; line-height:1.4; }
    .ne_footer_common .family_site{ width:100%; }
    .ne_footer_common .btn_familysite{ display:block; width:100%; }
    .ne_footer_common .list_familysite{ width:100%; }
    .ne_footer_common .copyright{ margin-top:24px; font-size:13px; color:#77736f; }
  }
  
  .lp-bottom h2{ font-weight:500; }
  .lp-bottom h2 b{ font-weight:800; }

/* 02 — 교과서 정보 이용 고지 (무대 밖 · 일반 흐름)
   배경 상자 없이 본문처럼 둔다. 위쪽 1px 선이 오브제와 경계를 만든다. */
.tw-legal{ border-top:1px solid rgba(28,46,82,.14); padding:26px 0 0; margin:0 0 80px; }
.tw-legal p{ display:flex; gap:.34em; margin:0; font-size:14px; line-height:1.72;
             letter-spacing:-.01em; color:#4a5165; }
.tw-legal p > span:first-child{ flex:none; }
.tw-legal p + p{ margin-top:5px; }
@media (max-width:768px){
  .tw-legal{ padding:20px 0 0; margin:0 0 56px; }
  .tw-legal p{ font-size:13px; line-height:1.68; }
  .tw-legal p + p{ margin-top:4px; }
}

/* ══ 동작 줄이기 — 마지막에 한 번 더 걷어낸다 ════════════════════════════════
   위쪽 @media (prefers-reduced-motion) 블록들보다 **뒤에** 선언된 전환 규칙이
   12곳 있다(모바일 02·04 의 .tw-book · .tw-arrow · .tw-sheet · .pw-inner 등).
   캐스케이드상 앞 블록의 transition:none 으로는 그것들을 되돌릴 수 없어,
   파일 맨 끝에서 한 번 더 무력화한다. 문서(doc/02)의 「최종 상태로 바로 표시」와
   코드를 일치시키기 위한 것이다.
   ⚑ 새 규칙은 반드시 이 블록 **위에** 추가할 것. 아래에 쓰면 이 설정이 안 먹는다. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:1ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}