@font-face { font-family: 'Pretendard'; src: url('fonts/PretendardVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Green-led palette from the cover: muted forest green dominates, apricot only as accent (easy on the eyes) */
  --navy: #2f6b4f;        /* primary green (buttons, stage) */
  --navy-2: #3b7d5e;
  --ink: #1e2621;
  --muted: #66716a;
  --line: #dde4da;
  --paper: #f4f6f1;
  --card: #ffffff;
  --gold: #e07a2e;        /* KEYTERM orange */
  --gold-2: #dba03a;      /* MASTER gold */
  --gold-soft: #fbefe0;   /* apricot wash */
  --arch: #2e8a55;
  --accent: #f0a35e;      /* route / pass marker (apricot) */
  --top-bg: #2c5a45;
  --top-fg: #f1f4ee;
  --top-line: rgba(255,255,255,.22);
  --hero-base: #386b52;
  --c1: rgba(255,255,255,.07); --c2: rgba(246,190,128,.38); --c3: rgba(246,190,128,.2); --c4: rgba(132,180,140,.35);
  --ok: #1f7a54; --ok-soft: #e4f3ec; --bad: #b3372f; --bad-soft: #f8e6e4;
  --radius: 14px;
  --serif: 'Nunito', 'Pretendard', -apple-system, sans-serif;
  --wm: #f6a469;          /* Keyterm Master wordmark (orange) */
  --sans: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy-2); }

/* top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--top-bg); color: var(--top-fg); border-bottom: 1px solid var(--top-line); }
.top .in { max-width: 1040px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--top-fg); text-decoration: none; }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; }
.brand b { font-family: var(--serif); font-size: 19px; letter-spacing: -.2px; font-weight: 800; color: var(--wm); }
.brand small { display: block; font-family: var(--serif); font-size: 9.5px; letter-spacing: 2px; color: #b9d2c1; font-weight: 700; margin-top: -2px; }
.top .sp { flex: 1; }
.top .who { font-size: 13px; opacity: .85; }
.iconbtn { white-space: nowrap; text-decoration: none; background: transparent; border: 1px solid var(--top-line); color: var(--top-fg); border-radius: 9px; padding: 6px 10px; cursor: pointer; font-size: 13px; }

main { max-width: 1040px; margin: 0 auto; padding-block: 20px 80px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body::before { content: ''; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--navy); }

/* hero: topographic "pass" with a route of 4 stops (Level 1 → Final) */
.topo { background-color: var(--hero-base); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27480%27%20height%3D%27240%27%20viewBox%3D%270%200%20480%20240%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-opacity%3D%27.09%27%20stroke-width%3D%271.2%27%3E%3Cpath%20d%3D%27M-10%20200%20C%2080%20170%20120%20210%20200%20180%20S%20330%20120%20490%20150%27/%3E%3Cpath%20d%3D%27M-10%20170%20C%2070%20140%20130%20180%20210%20150%20S%20330%2090%20490%20120%27/%3E%3Cpath%20d%3D%27M-10%20140%20C%2060%20110%20140%20150%20220%20120%20S%20330%2060%20490%2090%27/%3E%3Cpath%20d%3D%27M-10%20110%20C%2050%2080%20150%20120%20230%2090%20S%20330%2030%20490%2060%27/%3E%3Cpath%20d%3D%27M-10%2080%20C%2040%2050%20160%2090%20240%2060%20S%20330%200%20490%2030%27/%3E%3Cpath%20d%3D%27M-10%2050%20C%2030%2020%20170%2060%20250%2030%20S%20330%20-30%20490%200%27/%3E%3Cellipse%20cx%3D%27380%27%20cy%3D%2770%27%20rx%3D%2740%27%20ry%3D%2718%27/%3E%3Cellipse%20cx%3D%27380%27%20cy%3D%2770%27%20rx%3D%2722%27%20ry%3D%279%27/%3E%3C/svg%3E"); background-size: 480px 240px; color: #fff; }
.hero { border-radius: var(--radius); padding: 26px 26px 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 28px; align-items: center; overflow: hidden; }
.hero .hl { min-width: 0; }
.hero .hr { min-width: 0; }
.word { display: flex; flex-direction: column; }
.word .ey { font-size: 12px; color: #cfe2d4; font-weight: 600; letter-spacing: .5px; }
.word .nick { font-family: var(--serif); font-size: 46px; font-weight: 900; letter-spacing: -.8px; line-height: 1.05; margin-top: 4px; color: var(--wm); }
.word .en { font-family: var(--serif); font-size: 12px; letter-spacing: 3.5px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.word .slogan { font-size: 14px; color: #e3eee6; margin-top: 12px; }
svg.route { width: 100%; height: auto; max-width: 100%; display: block; overflow: visible; }
svg.route text { font-family: var(--sans); }
svg.route text.n { fill: #2f6b4f; font-size: 12px; font-weight: 800; }
svg.route text.n.f { fill: #fff; font-size: 13px; }
svg.route text.l { fill: #fff; font-size: 12.5px; font-weight: 700; }
svg.route text.k { fill: #cfe2d4; font-size: 11px; font-weight: 500; }
.hero .stats { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.hero .stats div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 9px 14px; min-width: 96px; }
.hero .stats div b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.hero .stats div span { font-size: 12px; color: #cfe2d4; }
/* chapter list as a route: numbered stops joined by a dotted line */
.chaps.routeline { position: relative; }
.chaps.routeline::before { content: ''; position: absolute; left: 32px; top: 24px; bottom: 24px; border-left: 2px dotted var(--accent); }
.chaps.routeline .chap .num { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 2px solid var(--navy); color: var(--navy); font-size: 15px; display: grid; place-items: center; }

h2.sec { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 28px 2px 10px; font-weight: 700; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 10px; min-height: 118px; cursor: pointer; transition: transform .12s, box-shadow .12s; text-align: left; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,42,74,.08); }
.tile .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); color: var(--navy); display: grid; place-items: center; }
.tile b { font-size: 15px; }
.tile span { font-size: 12px; color: var(--muted); margin-top: -6px; }
.tile.locked { opacity: .45; }
.tile.locked .ic { background: #eee; }

/* chapter list */
.chaps { display: grid; gap: 8px; }
.chap { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; text-align: left; width: 100%; }
.chap:hover { border-color: var(--navy-2); }
.chap .num { font-family: var(--serif); font-size: 20px; width: 36px; color: var(--navy); font-weight: 800; text-align: center; }
.chap .tx { flex: 1; min-width: 0; }
.chap .tx b { display: block; font-size: 15px; }
.chap .tx span { font-size: 12px; color: var(--muted); }
.chap .cnt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.chap.on { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--gold); }

/* page head */
.ph { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.back { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.ph h1 { font-size: 20px; margin: 0; font-family: var(--serif); font-weight: 600; color: var(--navy); }

/* cards & form */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 12px; }
.seg { display: inline-flex; background: #ebe8e0; border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 8px 12px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--navy); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { background: var(--navy); color: #fff; border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer; font-weight: 600; font-size: 15px; }
.btn:hover { background: var(--navy-2); }
.btn.ghost { background: var(--card); color: var(--navy); border: 1px solid var(--line); }
.btn.gold { background: var(--gold); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: default; }
input[type=text], input[type=password], input[type=url], textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: #fff; font-size: 15px; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--navy-2); outline-offset: -1px; }
label.f { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; font-weight: 600; }
.muted { color: var(--muted); font-size: 13px; }
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--gold-soft); color: #7a5b17; font-weight: 700; letter-spacing: .3px; }
.tag.navy { background: #e3eaf4; color: var(--navy); }

/* quiz */
.qbar { height: 4px; background: #e8e5dd; border-radius: 4px; overflow: hidden; margin: 14px 0 18px; }
.qbar i { display: block; height: 100%; background: var(--gold); transition: width .25s; }
.prompt { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.qterm { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--navy); line-height: 1.2; }
.qdef { font-size: 19px; line-height: 1.5; }
.opts { display: grid; gap: 8px; margin-top: 18px; }
.opt { text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; cursor: pointer; font-size: 15px; display: flex; gap: 10px; align-items: flex-start; }
.opt:hover:not(:disabled) { border-color: var(--navy-2); }
.opt .k { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.opt.ok { border-color: var(--ok); background: var(--ok-soft); }
.opt.bad { border-color: var(--bad); background: var(--bad-soft); }
.hint { display: flex; gap: 6px; margin: 12px 0; }
.hint i { display: inline-block; height: 32px; min-width: 56px; border-bottom: 2px solid var(--navy); }
.fb { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.fb.ok { background: var(--ok-soft); color: var(--ok); }
.fb.bad { background: var(--bad-soft); color: var(--bad); }
.fb .src { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
.result { text-align: center; padding: 26px 10px; }
.result .big { font-family: var(--serif); font-size: 54px; color: var(--navy); font-weight: 600; }

/* shadowing */
.shadow-stage { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 26px 20px; text-align: center; min-height: 250px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.shadow-stage .t { font-family: var(--serif); font-size: 32px; font-weight: 600; }
.shadow-stage .d { font-size: 17px; opacity: .88; margin-top: 12px; max-width: 640px; margin-left: auto; margin-right: auto; }
.shadow-stage .d.hide { filter: blur(7px); }
.shadow-stage .ko { color: var(--gold); font-size: 14px; margin-top: 6px; }
.ring { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: rgba(255,255,255,.18); }
.ring .fg { stroke: var(--gold); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .1s linear; }
.ring text { fill: #fff; font-size: 14px; font-weight: 700; }
.stage-idx { position: absolute; top: 18px; left: 18px; font-size: 12px; opacity: .6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.chips button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.chips button.done { border-color: var(--gold); }

/* mock exam */
.item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.item .meta { display: flex; gap: 6px; margin-bottom: 10px; }
.dialog { background: #faf9f6; border-left: 3px solid var(--gold); padding: 10px 14px; margin: 10px 0; font-family: var(--serif); font-size: 16px; }
.dialog p { margin: 3px 0; }
.note { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 10px 0; }
.task { font-weight: 600; font-size: 15px; margin-top: 10px; }
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.levels button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 4px; cursor: pointer; font-size: 13px; line-height: 1.25; }
.levels button b { display: block; font-size: 15px; color: var(--navy); }
.levels button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.levels button.on b { color: var(--gold); }
.check { list-style: none; padding: 0; margin: 10px 0 0; }
.check li { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0eee8; font-size: 14px; }
.check li:last-child { border: 0; }
.check .m { flex: none; width: 20px; text-align: center; font-weight: 700; }
.check .y { color: var(--ok); }
.check .n { color: var(--bad); }
.score { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.score b { font-family: var(--serif); font-size: 36px; color: var(--navy); }
.counter { text-align: right; font-size: 12px; color: var(--muted); margin-top: 4px; }
.counter.over { color: var(--bad); font-weight: 700; }

/* video */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.vcard .frame { aspect-ratio: 16/9; background: #0b1a2e; display: grid; place-items: center; color: rgba(255,255,255,.5); }
.vcard iframe { width: 100%; height: 100%; border: 0; display: block; }
.vcard .cap { padding: 10px 12px; font-size: 14px; }
.empty { text-align: center; color: var(--muted); padding: 34px 10px; font-size: 14px; }
.empty svg { opacity: .35; margin-bottom: 8px; }

/* tables (admin) */
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { padding: 9px 8px; border-bottom: 1px solid #efece5; text-align: center; }
table.t th { font-size: 12px; color: var(--muted); font-weight: 600; }
table.t td:first-child, table.t th:first-child { text-align: left; }
.tablewrap { overflow-x: auto; }
.sw { width: 18px; height: 18px; accent-color: var(--navy); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 50; }
.foot { margin-top: 40px; font-size: 11px; color: var(--muted); line-height: 1.7; border-top: 1px solid var(--line); padding-top: 14px; }
.demo-badge { background: var(--gold); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 700; }

/* login */
.login { max-width: 380px; margin: 40px auto; }
.login .logo { margin: 0 auto 0; }
.loginpage { padding-top: 30px; }
.logowrap { border-radius: var(--radius) var(--radius) 0 0; padding: 26px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.login .card { border-radius: 0 0 var(--radius) var(--radius); }
.login h1.x { font-family: var(--serif); font-weight: 600; color: var(--navy); margin: 10px 0 2px; font-size: 26px; }

@media (max-width: 560px) {
  .hero { grid-template-columns: 1fr; padding: 22px 18px 18px; }
  .hero .stats div { min-width: 0; padding: 8px 12px; flex: 1; }
  .word .nick { font-size: 38px; }
  .qterm { font-size: 25px; }
  .shadow-stage .t { font-size: 26px; }
  .top .who, .brand small, .demo-badge { display: none; }
  .brand b { font-size: 17px; white-space: nowrap; }
  .top .in { gap: 8px; }
  .levels button { font-size: 11px; }
}

/* about */
.about-why p { margin: 0 0 8px; font-size: 15px; max-width: 62ch; }
.about-why p:last-child { margin: 0; }
.feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.fi { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fi .ic, .aboutlink .ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); color: var(--navy); display: grid; place-items: center; }
.fi b { display: block; font-size: 14px; }
.fi span span { font-size: 12px; color: var(--muted); }
.director { display: flex; gap: 16px; align-items: flex-start; }
.director .avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--hero-base); color: #fff; display: grid; place-items: center; }
.director b { display: block; font-size: 20px; margin: 4px 0 4px; }
.director span span { display: block; font-size: 14px; color: var(--muted); }
.aboutlink { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink); }
.aboutlink > span:nth-child(2) { flex: 1; }
.aboutlink b { display: block; font-size: 14px; }
.aboutlink span span { font-size: 12px; color: var(--muted); }
.director span.tag { display: inline-block; font-size: 11px; color: var(--navy); }
.hero .hr svg.route { max-width: 440px; margin-left: auto; }

/* term cards */
.tlist { display: grid; gap: 10px; }
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tcard.compact { background: transparent; border: 0; padding: 0; }
.tcard .th { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.tcard .th b { font-size: 17px; color: var(--navy); }
.tcard .th .ko { font-size: 13px; color: var(--muted); }
.tcard .kp { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #8a4b12; background: var(--gold-soft); border-radius: 6px; padding: 2px 8px; }
.tcard .df { margin-top: 6px; font-size: 15px; }
.tcard .kx { margin-top: 6px; font-size: 14px; color: #3d4a42; background: var(--paper); border-left: 3px solid var(--navy); padding: 7px 10px; border-radius: 0 8px 8px 0; }
.tcard .src { margin-top: 6px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.blank { display: inline-block; border-bottom: 2px solid var(--navy); color: transparent; min-width: 40px; }
.fig { margin-top: 10px; }
.fig.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fig.flow span { border: 1.5px solid var(--line); background: var(--card); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; }
.fig.flow span.on { border-color: var(--accent); background: var(--gold-soft); }
.fig.flow i { font-style: normal; color: var(--accent); font-weight: 700; }
.fig.tree .root { display: inline-block; background: var(--navy); color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; }
.fig.tree div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-left: 14px; border-left: 2px dotted var(--accent); }
.fig.tree div span { border: 1.5px solid var(--line); background: var(--card); border-radius: 8px; padding: 4px 9px; font-size: 12.5px; }
.fig.tree div span.on { border-color: var(--accent); background: var(--gold-soft); font-weight: 700; }
.figsvg { width: 100%; max-width: 320px; height: auto; display: block; }
.figsvg text { font-size: 11px; text-anchor: middle; fill: var(--ink); font-family: var(--sans); font-weight: 600; }
.figsvg .c3 { fill: var(--paper); stroke: var(--line); }
.figsvg .c2 { fill: var(--gold-soft); stroke: var(--accent); stroke-width: 1.5; }
.figsvg .c1 { fill: var(--navy); }
.figsvg text.w { fill: #fff; }
.figsvg .ln { fill: none; stroke: var(--accent); stroke-width: 3; }
.figsvg .dot { fill: var(--navy); }
.figsvg .ax { fill: var(--muted); font-weight: 400; }

/* ---------- 뒤로 · 홈 (MMEA와 같은 모양) ---------- */
.navrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.backbtn { display: inline-block; background: var(--card); color: var(--navy); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-size: 14px; font-weight: 800; line-height: 1.6; text-decoration: none; cursor: pointer; }
.backbtn:hover { background: var(--ok-soft); }
.linkbtn { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ph h1 { font-family: var(--sans); font-weight: 800; }

/* ---------- 오래 보는 화면(퀴즈·용어·쉐도잉·모의고사 등): 눈이 편한 밝은 색 ---------- */
body.calm {
  --paper: #f5f3ec; --card: #fffdf8; --ink: #2b302c; --muted: #6b706a; --line: #e5e1d6;
  --top-bg: #e8efe9; --top-fg: #2e5a47; --top-line: #d5e2d8; --wm: #c9632b;
}
body.calm::before { background: #e8efe9; }
body.calm .brand .mark { background: #d6e5da; color: #2f6b4f; }
body.calm .brand small { color: #6d8a78; }
body.calm .iconbtn { border-color: #c7d8cc; color: #2e5a47; }
body.calm .demo-badge { filter: none; }
body.calm .opt { background: var(--card); }
body.calm .qdef { font-size: 20px; line-height: 1.65; }
body.calm .df { line-height: 1.65; }

/* 개념 비교 */
.cmp { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; }
.cmp summary { cursor: pointer; font-weight: 800; color: var(--navy); }
.cmpbox { margin-top: 14px; }
.cmpbox table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 14px; }
.cmpbox th { text-align: left; vertical-align: top; width: 38%; padding: 7px 10px 7px 0; border-top: 1px solid var(--line); color: var(--ink); }
.cmpbox td { padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink); }
@media (max-width: 560px) { .cmpbox th { width: 42%; font-size: 13px; } }
/* 기출 원문 그림 · 변형 지문 */
.pimg { display: block; width: 100%; max-width: 820px; height: auto; margin: 10px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-sizing: border-box; }
.vpass { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 10px 0; line-height: 1.7; font-size: 15.5px; }
.vpass p { margin: 0 0 10px; }
.vpass .box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
table.t { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 14px; }
table.t th, table.t td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
table.t th { background: var(--paper); }
.pwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pimg { cursor: zoom-in; }
.pimg.zoom { width: 820px; max-width: none; cursor: zoom-out; }
/* 별점 */
.stars { display: inline-block; font-size: 14px; letter-spacing: 1px; line-height: 1; vertical-align: 1px; background: linear-gradient(90deg, #e0a526 var(--p), #d6d1c4 var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.starrow { gap: 8px; margin-bottom: 6px; }
.notice { font-size: 12.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 14px; line-height: 1.6; }
.notice b { color: var(--ink); }

.ana h3{font-size:15px;margin:14px 0 6px;color:var(--navy)}.ana h3:first-child{margin-top:0}.ana p,.ana li,.ana .model{line-height:1.65;font-weight:400}.ana b{font-weight:700}.ana ol,.ana ul{padding-left:20px;margin:0}.ana .model{background:var(--bg2,#f4f6f5);border-radius:10px;padding:10px 12px;line-height:1.6}
.slotk{display:block;margin-top:10px}.slotk b{color:var(--navy);margin-right:4px}


/* ================= Ivy League theme (2026-10-30, Rochelle picked A) =================
   navy #14213d · crimson #8a1c22 · gold #b08d57 · ivory #faf7f0
   headings: EB Garamond (+ Noto Serif KR for Korean); body stays Pretendard for legibility */
:root, body.calm {
  --navy: #14213d; --navy-2: #24365e; --ink: #1f2430; --muted: #5f6573; --line: #e3dccb;
  --paper: #faf7f0; --card: #ffffff; --gold: #8a1c22; --gold-2: #b08d57; --gold-soft: #f5ecdc;
  --arch: #14213d; --accent: #b08d57; --crimson: #8a1c22;
  --top-bg: #ffffff; --top-fg: #14213d; --top-line: #e3dccb; --hero-base: #14213d;
  --ok: #1f6b4a; --ok-soft: #e5f1ea; --bad: #8a1c22; --bad-soft: #f7e7e7;
  --radius: 6px;
  --serif: 'EB Garamond', 'Noto Serif KR', Georgia, serif;
  --wm: #14213d;
}
body::before, body.calm::before { background: var(--crimson); }
.top, body.calm .top { background: #fff; border-top: 4px solid var(--crimson); border-bottom: 1px solid var(--line); }
.brand .mark, body.calm .brand .mark { background: none; width: auto; height: auto; border-radius: 0; }
.brand b { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.brand small, body.calm .brand small { font-family: var(--sans); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--crimson); font-weight: 600; margin-top: 1px; }
.iconbtn, body.calm .iconbtn { border-color: var(--line); color: var(--navy); border-radius: 4px; }
.demo-badge { background: var(--crimson); border-radius: 3px; }
.topo { background-color: var(--navy); background-image: radial-gradient(circle at 88% 12%, rgba(176,141,87,.18), transparent 60%); background-size: auto; background-repeat: no-repeat; }
.chap, .fi, .aboutlink, .tcard, .back { border-radius: 6px; }
.hero { border-top: 3px solid var(--accent); }
.word .ey { color: #d6b98a; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.word .nick { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 46px; letter-spacing: .02em; color: #fff; line-height: 1.02; margin-top: 8px; }
.word .rule { display: block; width: 64px; height: 1px; background: var(--accent); margin: 14px 0 8px; }
.word .en { font-family: 'EB Garamond', serif; font-size: 12px; letter-spacing: .3em; color: #d6b98a; text-transform: uppercase; margin-top: 0; }
svg.route text.n { fill: var(--navy); font-family: 'EB Garamond', serif; font-weight: 600; font-size: 13px; }
svg.route text.k { fill: #c9cfdc; }
.hero .stats div { background: rgba(255,255,255,.06); border-color: rgba(176,141,87,.35); border-radius: 4px; }
.hero .stats div b { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 24px; }
.hero .stats div span { color: #c9cfdc; }
h2.sec { font-family: 'EB Garamond', serif; text-transform: none; letter-spacing: .01em; font-size: 22px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--accent); padding-bottom: 6px; margin: 32px 0 14px; }
.tile { border-radius: 4px; border-left: 3px solid var(--crimson); }
.tile .ic { background: var(--paper); border-color: var(--line); color: var(--navy); }
.tile:hover { box-shadow: 0 8px 22px rgba(20,33,61,.10); }
.chap { border-radius: 4px; }
.chap .num, .chaps.routeline .chap .num { font-family: 'EB Garamond', serif; font-weight: 600; color: var(--crimson); }
.chaps.routeline::before { border-left: 1px solid var(--accent); }
.chaps.routeline .chap .num { border: 1.5px solid var(--accent); background: var(--card); }
.ph h1 { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 24px; letter-spacing: .01em; }
.btn { border-radius: 4px; background: var(--navy); }
.btn.ghost { border-radius: 4px; }
.seg, body.calm .seg { background: #efe9dc; border-radius: 6px; }
.tag { border-radius: 3px; background: var(--gold-soft); color: #6e5326; }
.tag.navy { background: #e6e9f0; color: var(--navy); }
.qterm, .result .big, .score b, .shadow-stage .t, .login h1.x { font-family: var(--serif); }
.shadow-stage { border-top: 3px solid var(--accent); }
.stars { background: linear-gradient(90deg, var(--accent) var(--p), #ddd6c6 var(--p)); -webkit-background-clip: text; background-clip: text; }
.dialog { border-left-color: var(--crimson); background: #fbf8f1; }
.director .avatar { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.fi .ic, .aboutlink .ic { border-radius: 6px; }
.logowrap { border-top: 3px solid var(--accent); }
.tcard .kp { color: #6e5326; }
.tcard .kx { border-left-color: var(--crimson); }
body.calm { --paper: #faf7f0; --card: #fffefb; }
@media (max-width: 560px) {
  .word .nick { font-size: 38px; }
  .brand b { font-size: 15px; letter-spacing: .05em; }
}
.shadow-stage .ko { color: #d6b98a; }
.levels button.on b { color: #d6b98a; }
.word .ey { line-height: 1.6; }

.diff { display: inline-flex; align-items: center; gap: 5px; color: var(--muted, #6b7068); font-size: 12px; font-weight: 600; white-space: nowrap; }
.diff .dbar { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.diff .dbar i { display: block; width: 4px; border-radius: 1px; background: #ddd6c6; }
.diff .dbar i.on { background: var(--accent); }
.item .meta .diff { margin-left: 6px; }
.vpass .lbl { text-align: center; font-weight: 700; color: var(--navy); margin: 0 0 6px; letter-spacing: .02em; }
.vpass .ex { font-family: 'Noto Sans', 'Segoe UI', sans-serif; background: var(--bg, #faf7f0); border-radius: 6px; padding: 8px 10px; margin: 6px 0 10px; overflow-x: auto; white-space: normal; line-height: 1.8; }
.vpass .note { font-size: 13px; color: var(--muted, #6b6b6b); margin-top: 6px; }
.vpass .cm { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.vpass .poem { white-space: pre-line; font-family: 'EB Garamond', Georgia, serif; font-size: 16.5px; line-height: 1.65; margin: 6px 0 10px 8px; }
.vpass .ln { color: var(--muted, #888); font-size: 12px; float: right; }
.vpass table.ft { border-collapse: collapse; margin: 4px 0; font-size: 14px; }
.vpass table.ft th, .vpass table.ft td { border: 1px solid var(--line); padding: 3px 8px; text-align: center; font-weight: 400; }
.vpass table.ft tr:first-child th { font-weight: 600; }
.vpass table.ft tr th:first-child { text-align: left; font-weight: 600; }
.item .meta .tag { white-space: nowrap; }
.item .meta { flex-wrap: wrap; align-items: center; }
.item .meta .tag { flex: none; }
@media (max-width: 520px) { .vpass table.ft { font-size: 12.5px; } .vpass table.ft th, .vpass table.ft td { padding: 2px 5px; } }
.extimer { position: sticky; top: 0; z-index: 5; background: var(--navy); color: #fff; text-align: center; font-weight: 700; padding: 8px; border-radius: 8px; margin: 0 0 12px; }
.extimer.over { background: #a33; }
.exitem .exno { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.exitem textarea.exa { min-height: 150px; margin-top: 8px; }
.exitem input.exa { margin-top: 8px; }
.exana summary { cursor: pointer; font-weight: 600; color: var(--navy); margin-top: 10px; }

/* 시험지 글꼴: Times New Roman (한글·IPA는 다음 글꼴로) */
.vpass, .task, .exno, .vpass .poem, .paper { font-family: "Times New Roman", Times, "Noto Serif KR", serif; }
.vpass .ex { font-family: "Times New Roman", Times, "Noto Sans", serif; }
.vpass { font-size: 16.5px; }
.task { font-size: 16px; }

/* 인쇄 */
.prow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.prow label { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; }
.prow input[type=checkbox] { width: auto; margin: 0; }
#printArea { display: none; }
body.printing > *:not(#printArea) { display: none !important; }
body.printing #printArea { display: block; background: #fff; min-height: 100vh; }
.ptool { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; background: #f3f1ec; border-bottom: 1px solid #ddd; }
.ptool .muted { font-size: 12px; }
.paper { max-width: 800px; margin: 0 auto; padding: 22px 16px 40px; color: #000; font-size: 15.5px; line-height: 1.6; }
.paper .phd { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 16px; font-size: 17px; }
.paper .phd span { font-size: 14px; }
.paper .pitem { margin: 0 0 26px; }
.paper .exno { margin-bottom: 6px; }
.paper .ptag { font-size: 12px; border: 1px solid #999; padding: 0 6px; border-radius: 3px; }
.paper .vpass { border: none; background: none; padding: 0; margin: 6px 0; font-size: 15.5px; }
.paper .vpass .box { border: 1px solid #000; border-radius: 0; }
.paper .vpass .ex { background: none; }
.paper .task { font-weight: 400; font-size: 15.5px; }
.paper .pimgp { display: block; max-width: 100%; margin: 6px 0; }
.paper .pline { border: 1px solid #000; height: 160px; margin-top: 10px; }
.paper .pline.s { height: 42px; width: 50%; }
.paper .pans { border-top: 1px dashed #888; margin-top: 10px; padding-top: 6px; font-family: inherit; }
.paper .pana .card { box-shadow: none; border: 1px solid #bbb; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; font-size: 13px; }
.paper .pnotes { border-top: 2px solid #000; padding-top: 10px; margin-top: 10px; break-before: page; }
.paper .pnotes .pn { margin: 0 0 8px; font-size: 13.5px; }
.paper .pnotes .pn span { color: #555; font-size: 12px; }
.paper .pfoot { text-align: center; font-size: 11px; color: #555; margin-top: 24px; }
@media print {
  .ptool { display: none !important; }
  .paper { padding: 0; max-width: none; }
  .paper .pline, .paper .pimgp, .paper .exno { break-inside: avoid; }
  .paper .exno { break-after: avoid; }
  @page { margin: 14mm; }
}

/* 오답노트 */
.wngrid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.wnside { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.wnside summary { font-weight: 700; cursor: pointer; margin-bottom: 8px; color: var(--navy); }
.cnote { display: block; text-decoration: none; color: inherit; background: #fff8e6; border: 1px solid #ecdcae; border-left: 3px solid var(--gold); border-radius: 6px; padding: 8px 10px; margin: 0 0 8px; font-size: 13px; }
.cnote.done { background: var(--bg); border-left-color: var(--ok); opacity: .8; }
.cnote .ct { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.cnote .cn { margin-top: 4px; line-height: 1.5; color: var(--ink); }
.cstar { color: var(--gold-2); white-space: nowrap; font-size: 12.5px; }
.cdiv { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; border-top: 1px dashed var(--line); padding-top: 8px; }
.wnitem textarea.wna { min-height: 130px; margin-top: 8px; }
.wnitem input.wna { margin-top: 8px; }
.tag.badt { background: var(--bad-soft); color: var(--bad); }
.tag.okt { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 860px) {
  .wngrid { grid-template-columns: 1fr; }
  .wnside { position: static; max-height: none; order: -1; }
}

/* ---------- 학습 흐름 (이해 → 쉐도잉 → 혼자 말하기 → 연습 → 기출·실전) ---------- */
.flow5 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; margin: 0 0 12px; font-size: 13px; }
.flow5 a { padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--muted); text-decoration: none; white-space: nowrap; }
.flow5 a.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.flow5 i { color: var(--muted); font-style: normal; padding: 0 2px; }
.spk { border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 2px 9px; font-size: 13px; cursor: pointer; line-height: 1.5; color: var(--navy); }
.spk.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tcard .th .spk { margin-left: auto; }
.subs { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--paper); }
.sublbl { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.sub { padding: 8px 0; border-top: 1px dashed var(--line); }
.sub:first-of-type { border-top: 0; }
.sub .sn { display: flex; align-items: center; gap: 8px; }
.sub .sn b { color: var(--navy); font-size: 14.5px; }
.sub .en, .apply .en { font-size: 14px; margin-top: 3px; }
.sub .ko, .apply .ko { font-size: 13px; color: var(--muted); margin-top: 3px; }
.sub .eg { font-size: 13px; margin-top: 4px; padding: 5px 9px; border-left: 3px solid var(--gold-2); background: var(--card); font-style: italic; }
.apply { margin-top: 10px; display: grid; gap: 8px; }
.apply .ap { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.apply .ap .spk { margin-left: 6px; }
.tag.gold { background: #fde3cc; color: #8a4b12; }
.tgo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.tgo .btn { text-decoration: none; }
.mast { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.mast i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); background: var(--card); }
.mast i.on { background: var(--arch); border-color: var(--arch); color: #fff; font-weight: 700; }
.lcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.lcard .lt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.lcard .lt b { font-family: var(--serif); font-size: 26px; color: var(--navy); }
.lcard .lt .ko { color: var(--muted); font-size: 14px; }
.shtxt { font-size: 18px; line-height: 1.75; padding: 14px 16px; background: var(--paper); border-radius: 10px; min-height: 70px; }
.shtxt.sm { font-size: 15.5px; padding: 10px 12px; }
.shtxt b.kw { color: var(--navy); background: var(--gold-soft); border-radius: 4px; padding: 0 3px; }
.shtxt i { color: var(--muted); font-style: normal; }
.lbtn { gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn.rec { background: #b3261e !important; border-color: #b3261e !important; color: #fff !important; animation: recp 1.2s infinite; }
@keyframes recp { 50% { opacity: .75; } }
.lhelp { font-size: 12.5px; margin: 10px 0 0; line-height: 1.6; }
.lnav { justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.lq { margin: 8px 0; font-size: 15px; }
.hints { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; }
.said { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; font-size: 14px; color: var(--ink); }
.said::before { content: '받아 적은 내 말: '; color: var(--muted); font-size: 12px; }
.rmodel { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.kplist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kpi { border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.kpi.hit { background: #e3f1e8; border-color: var(--arch); color: var(--arch); font-weight: 700; }
.kpi input { margin: 0 4px 0 0; vertical-align: -1px; }
@media (max-width: 560px) { .lcard .lt b { font-size: 22px; } .shtxt { font-size: 16.5px; } .flow5 { font-size: 12px; } .flow5 a { padding: 4px 8px; } }
/* 과목별 챕터 묶음 (2026-10-31) */
.subhd { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.subhd:first-child { margin-top: 0; }
.tcard .tex { margin-top: 8px; font-size: 13.5px; line-height: 1.6; padding: 8px 10px; border-radius: 8px; background: var(--paper, #f4f6f1); }
.tcard .tex .tag { margin-right: 4px; }
/* 과목 묶음 (접고 펴기, 음영 머리줄) 2026-10-31 */
.sblk { margin: 0 0 10px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.sblk > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; background: #e7ece4; font-weight: 700; }
.sblk > summary::-webkit-details-marker { display: none; }
.sblk.sb-ling > summary { background: #e4e9f1; }
.sblk.sb-lit > summary { background: #f1e8de; }
.sblk .sbn { font-size: 16px; color: var(--navy); }
.sblk .sbc { flex: 1; font-size: 12px; font-weight: 500; color: var(--muted); }
.sblk .sbi { font-size: 20px; color: var(--muted); transition: transform .2s; }
.sblk[open] .sbi { transform: rotate(90deg); }
.sblk > .chaps { padding: 10px; background: var(--paper); }
.chap.allsubj { background: var(--navy); border-color: var(--navy); margin-bottom: 12px; }
.chap.allsubj .num, .chap.allsubj .tx b, .chap.allsubj .tx span, .chap.allsubj .cnt { color: #fff; }
/* Keyterm Master 슬로건 (2026-10-31) */
.word .en.slg { text-transform: none; letter-spacing: .02em; font-size: 17px; font-style: italic; margin-top: 2px; }
.word .slgk { font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 6px; letter-spacing: .01em; }
@media (max-width: 560px) { .word .en.slg { font-size: 15px; } .word .slgk { font-size: 11.5px; } }
/* 사이트 소개: 편지 + 5단계 (2026-10-31) */
.about-why.letter p { line-height: 1.85; margin-bottom: 12px; }
.about-why.letter .closing { font-weight: 700; color: var(--navy); }
.about-why.letter .sign { text-align: right; color: var(--muted); font-family: 'EB Garamond', serif; font-size: 17px; }
.stepfig { padding: 12px; }
.stepsvg { width: 100%; height: auto; display: block; }
.stepsvg .sl { fill: none; stroke: #b08d57; stroke-width: 3; }
.stepsvg .sl.loop { stroke-dasharray: 6 6; stroke-width: 2; }
.stepsvg .ahd { fill: #b08d57; }
.stepsvg .sc { fill: #fff; stroke: #14213d; stroke-width: 2.5; }
.stepsvg .sc.s4 { fill: #14213d; }
.stepsvg .si { color: #14213d; }
.stepsvg g:last-of-type .si { color: #fff; }
.stepsvg .sn { font: 700 13px Pretendard, sans-serif; fill: #8a1c22; }
.stepsvg .sc.s4 + .si + .sn { fill: #d6b98a; }
.stepsvg .se { font: 600 17px 'EB Garamond', serif; fill: #14213d; }
.stepsvg .sk { font: 500 12.5px Pretendard, sans-serif; fill: #6b6b6b; }
.steps5 { display: grid; gap: 8px; margin-top: 10px; }
.st5 { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; color: inherit; text-decoration: none; }
.st5:hover { border-color: var(--navy); }
.st5 .n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.st5 .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st5 b { font-family: 'EB Garamond', serif; font-size: 18px; color: var(--navy); }
.st5 b small { font-family: Pretendard, sans-serif; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.st5 em { font-style: normal; font-weight: 700; font-size: 14px; }
.st5 .tx > span { font-size: 13px; color: var(--muted); line-height: 1.6; }
/* 오류 신고 버튼·창 */
.repbtn { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; border: 1px solid #e3c9c9; background: #fff; color: #8a1c22; font-weight: 700; font-size: 13px; padding: 9px 13px; border-radius: 99px; box-shadow: 0 4px 14px rgba(20,33,61,.15); cursor: pointer; }
.repbtn:disabled { opacity: .6; }
.repm { position: fixed; inset: 0; z-index: 70; background: rgba(20,33,61,.45); display: grid; place-items: center; padding: 16px; }
.repbox { background: #fff; border-radius: 10px; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 16px; }
.repimg { display: block; font-size: 13px; }
.repimg img { display: block; width: 100%; max-height: 220px; object-fit: contain; object-position: top; border: 1px solid var(--line); border-radius: 6px; margin-top: 6px; background: #f5f5f5; }
.foot { padding-bottom: 56px; }

/* ---------- KM logo (2026-10-31) ---------- */
.word.lg { align-items: flex-start; gap: 10px; }
.logocard { display: block; background: #fff; border-radius: 10px; padding: 14px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: 100%; }
.logocard .kmlogo { display: block; width: 100%; max-width: 440px; height: auto; }
.logowrap .logocard { align-self: center; padding: 16px 22px; }
.logowrap .logocard .kmlogo { max-width: 260px; }
.logowrap .word.lg { align-items: center; text-align: center; }
.word.lg .slgk { color: rgba(255,255,255,.9); font-size: 13px; margin-top: 0; }
.brand .mark .kmlogo.hm { height: 34px; width: auto; display: block; }
.brand .bw b { letter-spacing: .04em; }
.brand .kmk { color: #0f2a5c; } .brand .kmm { color: #b3121f; }
.aboutlink .ic.km, .director .avatar.km { background: #fff; overflow: hidden; }
.aboutlink .ic.km .kmlogo { width: 30px; height: auto; }
.director .avatar.km .kmlogo { width: 40px; height: auto; }
/* 홈 메뉴: 굵고 큰 글씨 + 색깔 그림 아이콘 */
.tile { gap: 12px; min-height: 132px; }
.tile .ic.art { width: 56px; height: 56px; border-radius: 14px; background: #f6f7fb; border: 0; }
.tile .ic.art svg { width: 44px; height: 44px; }
.tile b { font-size: 17.5px; font-weight: 800; color: #14213d; letter-spacing: -.01em; }
.tile span:not(.ic) { font-size: 13.5px; color: #475569; font-weight: 500; line-height: 1.45; margin-top: -4px; }
.tile.t-key { border-left-color: #f2b632; } .tile.t-key .ic.art { background: #fff7e0; }
.tile.t-wave { border-left-color: #14b8a6; } .tile.t-wave .ic.art { background: #e6faf7; }
.tile.t-past { border-left-color: #4f46e5; } .tile.t-past .ic.art { background: #eef0ff; }
.tile.t-mock { border-left-color: #ef4444; } .tile.t-mock .ic.art { background: #fff0f0; }
.tile.t-exam { border-left-color: #d97706; } .tile.t-exam .ic.art { background: #fff6e6; }
.tile.t-wrong { border-left-color: #8b5cf6; } .tile.t-wrong .ic.art { background: #f3efff; }
.tile.t-demo { border-left-color: #15803d; } .tile.t-demo .ic.art { background: #ebf8ef; }
.tile.t-lecture { border-left-color: #94a3b8; } .tile.t-lecture .ic.art { background: #f1f5f9; }
@media (max-width: 560px) { .tile b { font-size: 16.5px; } .tile span:not(.ic) { font-size: 13px; } .logocard { padding: 10px 12px; } }
.word.lg .slgk { word-break: keep-all; }
.chap { touch-action: manipulation; }
/* 퀴즈 시작 버튼: 별점 줄 오른쪽 */
.starrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.starrow .seg { flex: 0 1 auto; min-width: 0; }
.starrow .qgo { margin-left: auto; white-space: nowrap; padding: 10px 16px; font-weight: 800; }
/* 영역별 키텀: 설명 / 퀴즈 나누기 */
.kthub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.kthub .kth { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px; border-radius: 14px; border: 2px solid #e2e8f0; background: #fff; color: #1e293b; text-decoration: none; }
.kthub .kth .ic { grid-row: span 2; width: 40px; height: 40px; }
.kthub .kth .ic svg { width: 40px; height: 40px; }
.kthub .kth b { font-size: 16.5px; font-weight: 800; }
.kthub .kth span:not(.ic) { font-size: 12.5px; color: #475569; line-height: 1.35; }
.kthub .kth.on { border-color: #1f3a68; background: #eef3fb; box-shadow: 0 2px 0 #1f3a68; }
@media (max-width: 420px) { .kthub .kth { grid-template-columns: 1fr; text-align: center; justify-items: center; } .kthub .kth .ic { grid-row: auto; } }
/* 읽을거리 */
.tile.t-read { border-left-color: #e11d48; } .tile.t-read .ic.art { background: #fff1f3; }
.story { background: #fff; border-radius: 16px; padding: 20px 18px; border: 1px solid #ece7dc; font-size: 16px; line-height: 1.85; color: #1f2937; }
.story .stt { font-size: 21px; line-height: 1.4; margin: 0 0 6px; color: #1f3a68; }
.story .lead { color: #64748b; font-size: 14px; margin: 0 0 14px; }
.story p { margin: 0 0 14px; word-break: keep-all; }
.story ul { margin: 0 0 14px; padding-left: 20px; } .story li { margin-bottom: 6px; }
.story i { font-family: Georgia, serif; }
.story a.rk { color: #b42318; font-weight: 800; background: #fff1f0; border-radius: 6px; padding: 1px 5px; cursor: pointer; text-decoration: none; border-bottom: 2px solid #fda29b; }
.story .frame { background: #f1f5f9; border: 1px dashed #94a3b8; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-family: Georgia, serif; }
.story .recap { background: #fffbeb; border: 1px solid #f2d27a; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.9; }
.rkpop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 9999; display: flex; align-items: flex-end; justify-content: center; }
.rkpop[hidden] { display: none; }
.rkbox { background: #fff; width: min(640px, 100%); max-height: 78vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 14px 14px 22px; position: relative; }
.rkx { position: sticky; top: 0; float: right; border: 0; background: #f1f5f9; border-radius: 50%; width: 34px; height: 34px; font-size: 16px; cursor: pointer; }

/* 일반영어·문학 읽을거리 */
.sblk.sb-gen > summary { background: #e3eee6; }
.gstory .gsec { font-weight: 800; color: #1f3a68; font-size: 15px; margin: 18px 0 8px; border-bottom: 2px solid #e5e7eb; padding-bottom: 4px; }
.gstory .gfield { display: inline-block; background: #1f3a68; color: #fff; border-radius: 999px; padding: 1px 10px; font-size: 12.5px; font-weight: 700; }
.gstory .gp { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px 18px; margin-bottom: 14px; }
.gstory .gt { font-family: Georgia, 'Times New Roman', serif; font-size: 16.5px; line-height: 1.8; color: #111827; min-width: 0; }
.gstory .gp.poem .gt { line-height: 1.7; }
.gstory .gw { border-bottom: 2px dotted #b45309; }
.gstory .gw sup { color: #b45309; font-weight: 800; font-family: system-ui, sans-serif; font-size: 10.5px; margin-left: 1px; }
.gstory .gg { list-style: none; margin: 0; padding: 6px 10px; font-size: 13px; line-height: 1.55; background: #fffbeb; border-radius: 10px; color: #374151; }
.gstory .gg li { margin: 2px 0; } .gstory .gg b { color: #b45309; } .gstory .gk { font-family: Georgia, serif; font-weight: 700; color: #111827; }
.gstory .gsrc { font-size: 12.5px; color: #64748b; margin-top: 4px; }
.gstory .gko { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 14px; margin: 10px 0; }
.gstory .gko summary { cursor: pointer; font-weight: 700; color: #1f3a68; }
.gstory .gko[open] summary { margin-bottom: 8px; }
@media (min-width: 760px) { .gstory .gp { grid-template-columns: minmax(0,1fr) 200px; } .gstory .gg { background: none; border-left: 2px solid #f2d27a; border-radius: 0; padding: 2px 0 2px 10px; } }

/* 읽을거리 번호 (1-1, L1-2) 2026-11-04 */
.chap .num.rn, .chaps.routeline .chap .num.rn { width: auto; min-width: 44px; padding: 0 6px; font-size: 15px; white-space: nowrap; border-radius: 18px; }

/* 학습 계획 (오늘 할 일 창 · 연간 계획) 2026-11-04 */
.pov { position: fixed; inset: 0; z-index: 60; background: rgba(20, 30, 25, .45); display: grid; place-items: center; padding: 16px; }
.pbox { background: var(--card); color: var(--ink); width: min(560px, 100%); max-height: 86vh; overflow: auto; border-radius: 14px; padding: 16px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.pbh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 18px; }
.pday { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--card); }
.pday.done { border-color: var(--ok); background: var(--ok-soft); }
.pdh { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 16px; }
.pdh .ptag { font-size: 12.5px; padding: 2px 8px; border-radius: 10px; background: var(--gold-soft); color: var(--ink); }
.pphl { font-size: 12.5px; margin: 2px 0 6px; }
.psec { margin-top: 8px; font-size: 14px; line-height: 1.55; }
.psec > b { display: block; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; margin-bottom: 2px; }
.psec a { color: var(--navy); }
.pcount { font-weight: 700; }
.plock { color: var(--muted); }
.pkl summary { cursor: pointer; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.pkl div { font-size: 13px; color: var(--muted); margin-top: 4px; }
.pchk { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-weight: 600; cursor: pointer; }
.pnote { background: var(--gold-soft); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; font-size: 14px; }
.pnote.warn { background: var(--bad-soft); }
.pwk { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; background: var(--card); }
.pwk summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.pwk .pwd { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.pbar { height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--accent); }
.pflow { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }

/* 오류 신고 답장 */
.myrep summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.rpi { border-top: 1px solid rgba(0,0,0,.08); padding: 10px 0; }
.card.rpi { border-top: 0; padding: 14px 16px; }
.rpm { white-space: pre-wrap; margin-top: 6px; }
.rpa { margin-top: 8px; padding: 8px 10px; border-left: 3px solid #2f7d5d; background: rgba(47,125,93,.08); border-radius: 6px; white-space: pre-wrap; }

/* 사이트 소개: 비교표 · 효과 */
.cmp th, .cmp td { vertical-align: top; font-size: 13.5px; line-height: 1.55; }
.cmp tr > th:first-child { white-space: nowrap; }
.cmp .me { background: rgba(47,107,79,.08); font-weight: 600; }
.cmp th.me { color: var(--navy); }
.feat.ben .fi { align-items: flex-start; }
.feat.ben .fi span span { font-size: 12.5px; line-height: 1.55; }
.about-why.letter.intro p { max-width: none; margin: 0; line-height: 1.75; }
.feat.ben a.fi { text-decoration: none; color: inherit; }
.feat.ben .bmenu { display: block; font-style: normal; font-size: 12px; color: var(--navy); font-weight: 600; margin-top: 6px; }

/* ---------- 키텀 오답노트 (2026-11-08) ---------- */
.kthub.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .kthub.k3 { grid-template-columns: 1fr; } .kthub.k3 .kth { grid-template-columns: auto 1fr; text-align: left; justify-items: start; } .kthub.k3 .kth .ic { grid-row: span 2; } }
.twsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; text-align: center; }
.twsum .twn { background: #fbf3f1; border-radius: 12px; padding: 10px 6px; }
.twsum .twn.ok { background: #eef6f0; }
.twsum .twn b { display: block; font-size: 26px; color: var(--navy); line-height: 1.2; }
.twsum .twn span { font-size: 12.5px; color: var(--muted); }
.twsum p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; text-align: left; }
.twgo { margin-top: 12px; gap: 10px; flex-wrap: wrap; align-items: center; }
.seg.sm button { padding: 6px 10px; font-size: 12.5px; }
.twi { background: var(--card); border: 1px solid var(--line); border-left: 5px solid #d9534f; border-radius: 14px; padding: 12px 14px; margin-top: 12px; }
.twi.fixed { border-left-color: #3f9a62; }
.twh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.twh .sp { flex: 1; }
.twmy { font-size: 13.5px; color: #8a3a32; margin: 2px 0 8px; }
.twmy s { text-decoration-color: rgba(217, 83, 79, .7); }
.twi .tcard { border: 0; padding: 0; box-shadow: none; }
.card.empty { margin-top: 12px; text-align: center; color: var(--muted); }

/* ---------- 하이라이트 · 필기 (ink.js) ---------- */
mark.kmhl { color: inherit; border-radius: 3px; padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; cursor: pointer; }
canvas.kmink { position: fixed; inset: 0; z-index: 58; pointer-events: none; mix-blend-mode: multiply; touch-action: none; }
.kmdock { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 8px)); z-index: 70; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 8px; box-shadow: 0 8px 28px rgba(20, 33, 61, .18); max-width: calc(100vw - 24px); }
.kmdock.closed { padding: 0; border: 0; background: none; box-shadow: none; }
.kmfab { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 700; color: var(--navy); box-shadow: 0 4px 16px rgba(20, 33, 61, .16); cursor: pointer; }
.kmfab span { font-size: 13.5px; }
.kmrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kmdock button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.kmt { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; min-height: 52px; border: 1.5px solid transparent; background: #f4f3ef; border-radius: 12px; cursor: pointer; padding: 4px 6px; color: var(--ink); }
.kmt b { font-size: 19px; line-height: 1.2; }
.kmt span { font-size: 11.5px; font-weight: 600; }
.kmt.on { border-color: var(--navy); background: #eef3fb; }
.kmcol { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; background: var(--c); box-shadow: 0 0 0 1.5px #cfd5dc; cursor: pointer; }
.kmcol.on { box-shadow: 0 0 0 3px var(--navy); }
.kmsz { width: 46px; height: 40px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.kmsz.on { border-color: var(--navy); background: #eef3fb; }
.kmsz i { display: block; border-radius: 50%; }
.kmhint { font-size: 12.5px; color: var(--muted); max-width: 270px; padding: 2px 4px; }
.kmact button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 11px; min-height: 40px; font-size: 13px; cursor: pointer; color: var(--ink); }
.kmact button.on { background: #eef3fb; border-color: var(--navy); }
.kmact .kmclr.warn { background: #fdecea; border-color: #d9534f; color: #a52a22; font-weight: 700; }
.kmact .kmdone { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; margin-left: auto; }
.kmbub { position: fixed; z-index: 80; display: flex; align-items: center; gap: 6px; background: #1f2a3a; padding: 7px 9px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.kmbub .kmbt { font-size: 16px; padding: 0 2px; }
.kmdot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; padding: 0; }
.kmdot.on { box-shadow: 0 0 0 2.5px #f0a35e; }
.kmdel { background: none; border: 0; color: #fff; font-size: 13px; font-weight: 700; padding: 4px 8px; cursor: pointer; }
body.kminking .repbtn { opacity: .35; }
@media print { .kmdock, canvas.kmink, .kmbub { display: none !important; } }

.twh .linkbtn { display: inline; margin: 0; font-size: 13px; }

/* ---------- 태블릿 최적화 (손가락·펜으로 누르는 기기) 2026-11-08 ---------- */
button, a, .chap, .opt, .tile { touch-action: manipulation; -webkit-tap-highlight-color: rgba(31, 58, 104, .08); }
@media (pointer: coarse) {
  input[type=text], input[type=password], input[type=url], input[type=search], input[type=number], textarea, select { font-size: 16px; } /* iPad에서 입력할 때 화면이 확대되지 않게 */
  .seg button { min-height: 40px; padding: 9px 14px; font-size: 14px; }
  .seg.sm button { min-height: 36px; padding: 7px 11px; }
  .btn { min-height: 46px; }
  .btn.sm { min-height: 40px; padding: 9px 14px; font-size: 14px; }
  .iconbtn, .backbtn { min-height: 40px; display: inline-flex; align-items: center; }
  .opt { padding: 15px 16px; min-height: 56px; font-size: 16px; }
  .chap { min-height: 60px; }
  .linkbtn { padding: 10px 6px; }
  .spk { min-width: 40px; min-height: 40px; }
  main button:not(.opt):not(.chap):not(.kmt):not(.kmcol):not(.kmsz):not(.kmdot) { min-height: 36px; }
  .tile:hover, .chap:hover, .opt:hover { transform: none; }
  button, .btn, .seg, .tag, .chap .num { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* 태블릿 화면(세로·가로): 글자를 조금 키워서 오래 읽어도 편하게 */
@media (pointer: coarse) and (min-width: 700px) {
  body { font-size: 17px; }
  .tcard .df, .qdef, .shtxt { font-size: 1.06em; line-height: 1.65; }
  .vpass, .task, .exno, .paper { font-size: 1.04em; }
  main { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
}
/* 태블릿 가로: 양옆 여백을 줄이고 화면을 넓게 */
@media (pointer: coarse) and (min-width: 1100px) { main { max-width: 1180px; } }

/* ---------- 무료 체험판 ---------- */
.trialbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: #fff7e8; border: 1px solid #f3d29b; color: #6b4a12; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.trialbar span { font-size: 13px; color: #8a6a2e; }
.trialbar a { color: #8a4b0f; font-weight: 700; }
.trialoffer { background: #fff7e8; border: 1px solid #f3d29b; border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.trialoffer b { font-size: 16px; color: #6b4a12; }
.trialoffer ul { margin: 8px 0 6px; padding-left: 18px; line-height: 1.7; font-size: 14px; }
.trialoffer p { margin: 0; font-size: 12.5px; }
.chap.tlock { opacity: .55; filter: grayscale(.6); cursor: not-allowed; position: relative; }
.chap.tlock::after { content: '🔒'; margin-left: auto; font-size: 15px; }

/* ---------- 정식 이용 신청 ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.plan { display: flex; flex-direction: column; gap: 4px; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; color: var(--ink); }
.plan b { font-size: 16px; }
.plan .pr { font-size: 22px; font-weight: 800; color: var(--navy); }
.plan .muted { font-size: 12.5px; }
.plan.on { border-color: var(--navy); background: #eef3fb; box-shadow: 0 2px 0 var(--navy); }
.bank { display: grid; gap: 8px; margin-top: 10px; background: #f7f6f1; border-radius: 12px; padding: 12px 14px; }
.bank > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bank .muted { width: 64px; font-size: 13px; }
.bank b { font-size: 16.5px; }
.plrow input { min-width: 0; }
/* 참고문헌 */
.refl{margin:0;padding-left:1.4em;display:grid;gap:10px;line-height:1.6}
.refl li{padding-left:2px}
.src .srcref{margin-left:6px;font-size:12px;white-space:nowrap}
.kicebox{border:1px dashed var(--line,#d9d2c3);border-radius:12px;padding:14px 16px;background:var(--bg,#faf7f0);line-height:1.6}
.kicebox b{display:block;margin-bottom:4px}
.kicebox p{margin:0 0 8px;font-size:14px}
.kicebox a{font-weight:700}
/* ---------- 실전모의고사 B4 2단 시험지 ---------- */
#printArea.b4wrap { background: #e9e9e9; padding: 12px 0 40px; color: #000; }
.b4tool { position: sticky; top: 0; z-index: 5; }
.b4p { width: 257mm; height: 364mm; margin: 0 auto 14px; background: #fff; position: relative; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.18);
  display: flex; flex-direction: column; padding: 14mm 15mm 0; box-sizing: border-box; font-family: "Times New Roman", Times, "Noto Serif KR", serif; font-size: 10.5pt; line-height: 1.5; color: #000; }
.b4hd { text-align: center; flex: none; }
.b4t1 { font-family: "Noto Serif KR", "Batang", serif; font-size: 13pt; font-weight: 700; letter-spacing: .02em; }
.b4t2 { font-family: "Noto Serif KR", "Batang", serif; font-size: 26pt; font-weight: 700; margin: 2mm 0 3mm; }
.b4who { display: flex; justify-content: space-between; padding: 0 12mm; font-family: "Noto Serif KR", serif; font-size: 12pt; font-weight: 700; }
.b4who i { display: inline-block; width: 34mm; }
.b4tb { width: 100%; border-collapse: collapse; margin: 3mm 0 2mm; font-family: "Noto Serif KR", serif; font-size: 10.5pt; }
.b4tb td { border: 1px solid #000; padding: 2.4mm 2mm; text-align: center; width: 25%; }
.b4note { text-align: left; font-family: "Noto Sans KR", "Pretendard", sans-serif; font-size: 8.5pt; line-height: 1.6; padding: 1mm 0 2mm; border-bottom: 1.5px solid #000; width: calc(50% - 5mm); }
.b4cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 10mm 1fr; border-top: 1.5px solid #000; margin-top: 1mm; padding-top: 4mm; }
.b4p .b4hd + .b4cols { border-top: none; padding-top: 3mm; }
.b4col { overflow: hidden; min-height: 0; height: 100%; }
.b4mid { position: relative; overflow: hidden; }
.b4mid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid #000; }
.b4wm { position: absolute; top: 0; bottom: 0; left: 50%; width: 6.4mm; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; background: #ececec; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.b4wm span { writing-mode: vertical-rl; white-space: nowrap; color: rgba(0,0,0,.16); font-family: "Pretendard", sans-serif; font-size: 8.5pt; letter-spacing: .08em; font-weight: 600;
  background: rgba(0,0,0,.045); padding: 2mm .6mm; border-radius: 1mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.b4ft { flex: none; height: 15mm; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1.5px solid #000; margin: 2mm -15mm 0; padding: 0 15mm; font-family: "Noto Serif KR", serif; font-size: 9.5pt; }
.b4ft .b4fc b:last-child { font-size: 15pt; }
.b4ft .b4fr { text-align: right; } .b4fl, .b4fr { font-family: "EB Garamond", serif; font-size: 9pt; letter-spacing: .08em; color: #333; }
.b4b { border: none !important; background: none !important; padding: 0 !important; margin: 0 0 2.2mm !important; font-size: 10.5pt !important; line-height: 1.5 !important; }
.b4b.b4last { margin-bottom: 7mm !important; }
.b4h { font-size: 10.5pt; margin: 0 0 2mm; padding-left: 1.2em; text-indent: -1.2em; }
.b4h b { font-size: 12pt; }
.b4pt { white-space: nowrap; }
.b4b .box { border: 1px solid #000 !important; border-radius: 0 !important; padding: 2mm 3mm !important; margin: 1.5mm 0 !important; background: none !important; }
.b4b .box.b4cut { border-bottom: none !important; margin-bottom: 0 !important; }
.b4b .box.b4cont { border-top: none !important; margin-top: 0 !important; }
.b4b .task, .b4b .kdir { font-weight: 400 !important; font-size: 10.5pt !important; margin: 2mm 0 !important; }
.b4b p { margin: 0 0 1.4mm !important; text-align: justify; }
.b4b .lbl { color: #000 !important; }
.b4b table.ft th, .b4b table.ft td, .b4b table.kt td { border-color: #000 !important; }
.b4b .dialog, .b4b .ex { background: none !important; }
.b4ans { border-top: 1px dashed #666; padding-top: 1.5mm; font-size: 9.5pt; }
@media print {
  body.b4printing #printArea.b4wrap { background: none; padding: 0; }
  body.b4printing .b4tool { display: none !important; }
  .b4p { margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .b4p:last-child { break-after: auto; page-break-after: auto; }
}
@media screen and (max-width: 1000px) { #printArea.b4wrap { overflow-x: auto; } }
.b4b .note { border: none !important; padding: 0 !important; margin: 1mm 0 !important; font-size: 9pt !important; color: #000 !important; }
.b4b .note[style*="right"], .b4b .note.r { text-align: right; }
.b4wm span { color: #9a9a9a; background: none; font-size: 10pt; letter-spacing: .12em; padding: 0; }

/* ---------- 기출 문항 새 조판 (past/kx.js) ---------- */
.vpass.kx p{margin:0 0 8px}
.vpass.kx p.kti{margin-top:-7px}
.vpass .kbl{display:inline-block;min-width:4em;border-bottom:1px solid currentColor;height:1.05em;vertical-align:-.15em;margin:0 2px}
.vpass .kc{display:inline-block;white-space:nowrap;vertical-align:top}
.vpass p.kspk,.vpass p.khg{padding-left:var(--hw);text-indent:calc(-1 * var(--hw))}
.vpass p.kspk>b:first-child,.vpass p.khg>.kld{display:inline-block;min-width:var(--hw);text-indent:0}
.vpass p.kspk .ksep{display:inline-block;width:.35em}
.vpass p.krow{white-space:normal}
.vpass .kdir{font-weight:600;margin:10px 0}
.vpass .kdir p{margin:0 0 6px}
.vpass .lbox{display:inline-block;border:1px solid var(--ink,#222);border-radius:8px;padding:2px 12px;margin:4px 0 8px}
.vpass .lbox p{margin:0}
.vpass table.kt{border-collapse:collapse;width:100%;font-size:.88em;margin:6px 0 10px;line-height:1.35}
.vpass table.kt td{border:1px solid var(--ink,#333);padding:3px 6px;vertical-align:middle}
.vpass .ktw{overflow-x:auto}
.vpass svg.kfig{display:block;margin:8px auto;width:100%;height:auto;font-family:"Times New Roman",Times,serif;overflow:visible}
.vpass svg.kfig text{fill:currentColor}
.vpass .box .lbl b{font-weight:700}
.vpass p.kab{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:700;margin:10px 0 6px}
.vpass p.kab::before,.vpass p.kab::after{content:"";flex:1;border-top:1px solid currentColor;opacity:.6}
.vpass .kwave{height:8px;margin:6px 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 4 Q4 0 8 4 T16 4' fill='none' stroke='%23888' stroke-width='1'/%3E%3C/svg%3E") repeat-x center}
.vpass .kpic{width:100%;margin:6px auto;border:1px dashed #bbb;border-radius:6px}
.vpass .kpic svg{display:block;width:100%;height:100%}
.vpass .kbl.kbn{text-align:center;vertical-align:-.05em;height:auto;line-height:1.2}
.vpass .kline{border-bottom:1px solid currentColor;height:1.4em;margin:2px 0 8px}
.vpass .kpic.kdraw{border:0;border-radius:0;height:auto}
.vpass .kpic.kdraw svg{height:auto}
.vpass svg[data-g]{overflow:visible}
.ksr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.task.kxhd{margin:10px 0 0}
.kxsrc{font-size:12px;margin-top:6px}
.paper .kxsrc{font-size:10.5px;color:#555}
.vpass.kx{overflow-x:auto}
.vpass.kx svg.kfig{cursor:zoom-in}
.vpass.kx svg.kfig.zoom{width:760px!important;max-width:none!important;cursor:zoom-out}
.kxzoom{font-size:12px;margin-top:4px}
@media (min-width:821px){.kxzoom{display:none}}
@media print{.kxzoom{display:none}.vpass.kx svg.kfig.zoom{width:100%!important}}

/* ---------- 학습 계획 v2 (11개월, 할 일 체크) ---------- */
.phc { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; letter-spacing: .02em; white-space: nowrap; }
.ph1 { background: #2f5d8a; } .ph2 { background: #8a1c22; } .ph3 { background: #3f7a5a; } .ph4 { background: #b0662a; } .ph5 { background: #5b4a8c; } .ph6 { background: #14213d; } .ph7 { background: #b08d57; }
.phero { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; background: var(--navy); color: #fff; border-radius: 12px; padding: 18px 20px; margin: 0 0 12px; background-image: radial-gradient(circle at 92% 10%, rgba(176,141,87,.35), transparent 55%); }
.phero.fin { background-color: #3a2a12; background-image: radial-gradient(circle at 90% 0%, rgba(176,141,87,.55), transparent 60%); }
.phero small { font-size: 10.5px; letter-spacing: .22em; color: #e6d3ad; font-weight: 600; }
.phero h2 { margin: 4px 0 2px; font-family: var(--serif); font-size: 28px; font-weight: 600; color: #fff; }
.phero p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.82); }
.phero .pnote-s { margin: 6px 0 0; font-size: 11.5px; color: rgba(255,255,255,.66); letter-spacing: .01em; }
.pnote-s.pop { margin: 0 0 8px; font-size: 11.5px; color: var(--muted, #6b6f7a); }
.phero-s { min-width: 150px; text-align: right; }
.phero-s b { font-size: 30px; font-family: var(--serif); }
.phero-s span { font-size: 13px; color: rgba(255,255,255,.8); margin-left: 4px; }
.phero .pbar { background: rgba(255,255,255,.2); margin-top: 6px; }
.phero .pbar i { background: #e6c88f; }
.pmsg { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-soft); border: 1px solid #e6d3ad; border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.pmsg p { margin: 0; font-size: 14.5px; line-height: 1.6; font-weight: 600; color: var(--ink); }
.pmi { color: var(--accent); font-size: 16px; line-height: 1.5; }
.pd2 { border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin: 10px 0; overflow: hidden; }
.pd2.done { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.pd2.locked { padding-bottom: 12px; }
.pd2.locked p { padding: 0 14px; }
.pd2h { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fbf8f1; border-bottom: 1px solid var(--line); }
.pd2.done .pd2h { background: var(--ok-soft); }
.pd2n { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 54px; height: 54px; border-radius: 10px; background: var(--navy); color: #fff; line-height: 1; }
.pd2n small { font-size: 9.5px; letter-spacing: .2em; color: #e6d3ad; font-weight: 700; }
.pd2n b { font-family: var(--serif); font-size: 24px; font-weight: 600; margin-top: 2px; }
.pd2.done .pd2n { background: var(--ok); }
.pd2m { flex: 1; min-width: 0; }
.pd2d { font-weight: 700; font-size: 15px; }
.pd2p { font-size: 13px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pring { width: 46px; height: 46px; flex: none; }
.pring .bg { fill: none; stroke: var(--line); stroke-width: 3.5; }
.pring .fg { fill: none; stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .3s; }
.pring text { font-size: 9.5px; font-weight: 700; fill: var(--ink); font-family: var(--sans); }
.pslot { padding: 8px 14px 6px; border-left: 4px solid transparent; }
.pslot + .pslot { border-top: 1px dashed var(--line); }
.pslot.am { border-left-color: #2f5d8a; } .pslot.pm { border-left-color: #b0662a; } .pslot.ev { border-left-color: #5b4a8c; background: #faf8fc; }
.psh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.pst { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px; background: #eef2f7; color: #2f5d8a; }
.pslot.pm .pst { background: #f8eee4; color: #8a4c18; } .pslot.ev .pst { background: #eeebf6; color: #4a3b78; }
.psh b { font-size: 14.5px; }
.ptm { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ptk { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.ptk + .ptk { border-top: 1px solid #f0ebe0; }
.ptk input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--ok); cursor: pointer; }
.ptx { flex: 1; min-width: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ptx label { cursor: pointer; }
.ptk.on .ptx label { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.pdsc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.plv { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; background: #eef1ec; color: var(--muted); vertical-align: 1px; text-decoration: none; }
.plv.hi { background: #f7e7e7; color: #8a1c22; } .plv.lo { background: #e5f1ea; color: #1f6b4a; }
.plks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.plink { display: inline-flex; align-items: center; font-size: 12.5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); background: #fff; text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.4; }
.plink:hover { border-color: var(--navy); }
.plink.pq { background: var(--navy); color: #fff; border-color: var(--navy); }
.plink.plock { color: var(--muted); cursor: default; }
.pkl summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-top: 4px; }
.pkl div { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.pweek { display: grid; gap: 0; padding: 4px 16px; }
.pwkr { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 0; font-size: 14px; }
.pwkr + .pwkr { border-top: 1px solid var(--line); }
.pwkr b { color: var(--navy); }
@media (max-width: 520px) { .pwkr { grid-template-columns: 1fr; gap: 2px; } }
.ptl { margin: 2px 0 6px; }
.ptlb { position: relative; display: flex; height: 14px; border-radius: 7px; overflow: visible; gap: 2px; }
.ptlb > span { display: block; height: 100%; border-radius: 3px; }
.ptlb > span:first-child { border-radius: 7px 3px 3px 7px; } .ptlb > span:last-of-type { border-radius: 3px 7px 7px 3px; }
.pnow { position: absolute; top: -5px; width: 3px; height: 24px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); }
.pnow::after { content: "오늘"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: var(--ink); font-style: normal; white-space: nowrap; }
.ptll { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ptll li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; }
.ptll li .phc { text-align: center; margin-top: 1px; }
.pphase { margin: 14px 0 6px; }
.pphh { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 6px; }
.pphh b { font-size: 15px; }
.pwk { border: 1px solid var(--line); border-radius: 10px; padding: 0; margin: 6px 0; background: var(--card); }
.pwk > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 9px 12px; list-style: none; }
.pwk > summary::-webkit-details-marker { display: none; }
.pwk > summary::before { content: "▸"; color: var(--muted); font-size: 12px; }
.pwk[open] > summary::before { content: "▾"; }
.pwk[open] > summary { border-bottom: 1px solid var(--line); }
.pwkb { padding: 0 10px 2px; }
.pchips { display: flex; gap: 4px; flex-wrap: wrap; }
.pchip { min-width: 30px; text-align: center; font-size: 11.5px; font-weight: 700; padding: 3px 5px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-variant-numeric: tabular-nums; }
.pchip.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.pchip.now { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pwk .pwd { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.fin3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 6px; }
.fin1 { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; border-top: 4px solid var(--accent); }
.fin1 b { font-size: 15.5px; color: var(--navy); }
.fin1 span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.fin1 em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--crimson, #8a1c22); margin-top: auto; padding-top: 4px; }
.fins { display: grid; gap: 8px; margin-top: 10px; }
.finc { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 2px 10px 10px; }
.finc .tcard { border: 0; box-shadow: none; margin: 0; padding-left: 0; padding-right: 0; }
.finc.ok { border-color: var(--ok); background: var(--ok-soft); }
.finc.re { border-color: #d9a3a3; background: #fbf1f1; }
.finb { display: flex; gap: 8px; justify-content: flex-end; }
.finc.ok [data-fk="1"] { background: var(--ok); color: #fff; border-color: var(--ok); }
.finc.re [data-fk="2"] { background: #8a1c22; color: #fff; border-color: #8a1c22; }
@media (max-width: 520px) { .phero-s { text-align: left; width: 100%; } }
.pnote.gate { background: #eef1f7; border: 1px solid #d7deea; }