/* Othello Lesson (2026-10-02). 보드 재질은 뷰어의 질감 보드(oc-board-materials.css)와 같은 사진·값을 쓴다. */
.fs-lesson-page{margin:0;background:#f6f8fa}
/* 앱(bare) 레슨은 사이트 테마·bootstrap 을 싣지 않아 본문이 브라우저 기본 세리프로 나왔다(라틴 문자 언어에서 눈에 띔).
   다른 앱 페이지(bootstrap 본문 폰트)와 같은 시스템 글꼴을 쓴다(2026-10-03). */
.fs-lesson-page,.fs-lesson-page button{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif}
.fs-lesson{--ls-fg:#20312c;--ls-mut:#64746e;--ls-bd:#dce5e0;--ls-card:#fff;--ls-soft:#f4f7f5;--ls-pri:#246653;--ls-on-pri:#fff;
  max-width:920px;margin:0 auto;padding:28px 24px 56px;color:var(--ls-fg);font-size:16px;line-height:1.8;box-sizing:border-box;overflow-wrap:anywhere}
.fs-lesson--index{max-width:1040px}
.fs-lesson.fs-lesson--detail{padding-top:0}
.fs-lesson *{box-sizing:border-box}
.fs-lesson a{color:var(--ls-pri)}
.fs-lesson a:focus-visible,.ls-btn:focus-visible{outline:2px solid var(--ls-pri);outline-offset:3px}
.fs-lesson__crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:760px;margin:0 auto 18px;font-size:13px;color:var(--ls-mut)}
.fs-lesson__crumb a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;font-weight:650}
.fs-lesson__header{margin:0 auto 28px}
.fs-lesson--index .fs-lesson__header{padding:28px 32px;border:1px solid var(--ls-bd);border-radius:20px;
  background:linear-gradient(120deg,var(--ls-card),var(--ls-soft))}
.fs-lesson--detail .fs-lesson__header{max-width:760px;padding-bottom:24px;border-bottom:1px solid var(--ls-bd)}
.fs-lesson__review{display:inline-flex;align-items:center;margin:0 0 18px;padding:3px 9px;border:1px solid #eadbb9;border-radius:6px;background:#fbf6e9;color:#8b6826;font-size:11px;font-weight:650;line-height:1.5}
/* 제목은 main.fs-lesson 으로 한 단계 구체적으로 쓴다(2026-10-07): 다국어 웹은 강의가 사이트 틀(play.css) 안에 들어가
   같은 구체도의 .contentsLeft h1(20px)·.contentsLeft h2(남색 바·고정 높이·흰 글자)·.video h2(보통 굵기)가 나중에 실려 이겼다.
   틀이 바꾸는 속성은 여기서 되돌린다. 한국어(head.php)와 앱은 같은 값이라 달라지지 않는다. */
main.fs-lesson h1,main.fs-lesson h2{display:block;height:auto;padding:0;background:none;color:inherit;text-align:left}
main.fs-lesson h2{font-weight:700}
main.fs-lesson h1{font-size:clamp(27px,3vw,34px);line-height:1.3;letter-spacing:-.035em;margin:4px 0 12px}
main.fs-lesson h2{font-size:22px;line-height:1.4;margin:36px 0 12px;letter-spacing:-.02em}
.fs-lesson h3{font-size:18px;line-height:1.5;margin:28px 0 8px}
.fs-lesson p{margin:12px 0}
.fs-lesson .fs-lesson__eyebrow{color:var(--ls-pri);font-size:12px;font-weight:750;letter-spacing:.06em;margin:0 0 8px}
.fs-lesson__intro{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:8px}
.fs-lesson .fs-lesson__intro .fs-lesson__eyebrow,.fs-lesson__intro .fs-lesson__review{margin:0}
.fs-lesson__intro .fs-lesson__review{flex:none;white-space:nowrap}
.fs-lesson .fs-lesson__lead{max-width:680px;color:var(--ls-mut);margin:0;line-height:1.75}
.fs-lesson__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;font-size:12px;font-weight:650;color:var(--ls-pri)}
.fs-lesson__meta span{padding:4px 10px;border:1px solid var(--ls-bd);border-radius:6px;background:var(--ls-card)}

/* 목차 */
.fs-lesson__chapters{display:grid;gap:16px}
.fs-lesson__chapter{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;padding:24px;
  border:1px solid var(--ls-bd);border-radius:16px;background:var(--ls-card)}
main.fs-lesson .fs-lesson__chapter h2{display:flex;gap:10px;align-items:center;margin:0 0 12px;font-size:18px}
.fs-lesson__chapter-num{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;background:var(--ls-soft);color:var(--ls-pri);font-size:15px;font-variant-numeric:tabular-nums}
.fs-lesson__chapter p{margin:0 0 10px;color:var(--ls-mut);font-size:14px;line-height:1.7}
.fs-lesson__chapter-count{font-size:12px;color:var(--ls-mut)}
.fs-lesson__chapter ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.fs-lesson__chapter li{min-width:0}
.fs-lesson__chapter li a{display:grid;grid-template-columns:32px minmax(0,1fr) 12px;gap:8px;align-items:center;min-height:52px;height:100%;
  padding:12px;border:1px solid var(--ls-bd);border-radius:10px;background:var(--ls-soft);color:var(--ls-fg);text-decoration:none;font-weight:650;font-size:14px;line-height:1.5}
.fs-lesson__chapter li a:hover{border-color:var(--ls-pri);background:var(--ls-card)}
.fs-lesson__lesson-num{color:var(--ls-mut);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.fs-lesson__lesson-name{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.fs-lesson__chevron{color:var(--ls-mut);font-size:22px;font-weight:400;text-align:right}
.fs-lesson__chapter li.is-locked .fs-lesson__lesson-link{display:grid;grid-template-columns:32px minmax(0,1fr) 12px;gap:8px;align-items:center;min-height:52px;height:100%;
  padding:12px;border:1px dashed var(--ls-bd);border-radius:10px;background:transparent;color:var(--ls-mut);font-weight:650;font-size:14px;line-height:1.5;cursor:not-allowed}
.fs-lesson__writing{display:inline-block;margin-left:6px;padding:0 7px;border:1px solid #eadbb9;border-radius:999px;background:#fbf6e9;color:#8b6826;font-size:.72rem;font-weight:700;line-height:1.6;vertical-align:middle;white-space:nowrap}
.fs-lesson__chapter.is-upcoming{display:block;background:transparent;border-style:dashed}
main.fs-lesson .fs-lesson__chapter.is-upcoming h2{font-size:15px;color:var(--ls-mut)}
.fs-lesson__chapter.is-upcoming p{margin:0;font-size:13px}
.fs-lesson__tag{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:#ede9fe;color:#6d28d9;font-size:.72rem;font-weight:700;vertical-align:middle}

/* 본문 블록 */
.fs-lesson__article{max-width:760px;margin:0 auto}
main.fs-lesson .fs-lesson__article>h2:first-child{margin-top:0}
.fs-lesson__tip,.fs-lesson__key{margin:22px 0;padding:16px 20px;border:1px solid #e9dfc7;background:#fbf8ef;border-radius:12px;font-size:15px}
.fs-lesson__key{background:#eef5f1;border-color:#d2e4d9}
.fs-lesson__callout-label{display:block;margin-bottom:4px;font-size:12px;font-weight:750;color:#8b6826}
.fs-lesson__key .fs-lesson__callout-label{color:var(--ls-pri)}
.fs-lesson ul.fs-lesson__list{margin:12px 0;padding-left:1.3em}
.fs-lesson__list li+li{margin-top:8px}
.fs-lesson__fig{margin:24px auto 28px;max-width:440px;min-width:0}
.fs-lesson__fig figcaption{margin:0 auto 12px;font-size:13px;line-height:1.7;color:var(--ls-mut);text-align:left}
.fs-lesson__quiz{margin:28px 0;padding:24px;border:1px solid var(--ls-bd);border-radius:16px;background:var(--ls-soft)}
.fs-lesson .fs-lesson__quiz-title{color:var(--ls-pri);font-size:12px;font-weight:750;margin:0 0 8px;letter-spacing:.04em}
.fs-lesson .fs-lesson__quiz-prompt{margin:0;font-weight:600;line-height:1.75}
.fs-lesson__quiz .fs-lesson__fig{max-width:620px;margin:20px auto 0}
.fs-lesson__quiz .ls-board{max-width:none}
.fs-lesson__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:760px;margin:40px auto 0;padding-top:20px;border-top:1px solid var(--ls-bd)}
.fs-lesson__nav a{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:76px;padding:14px 16px;
  border:1px solid var(--ls-bd);border-radius:12px;background:var(--ls-card);color:var(--ls-fg);text-decoration:none;font-weight:650;font-size:14px;line-height:1.6;word-break:keep-all}
.fs-lesson__nav a:hover{border-color:var(--ls-pri);background:var(--ls-soft)}
.fs-lesson__nav a small{display:block;margin-bottom:4px;color:var(--ls-mut);font-weight:500;font-size:11px}
.fs-lesson__nav .next{grid-column:2;text-align:right}

/* 보드: 뷰어 #frame/#board 와 같은 규격(칸 44px, 테두리 14px, 돌 38px, 좌표 11px)을 비율 그대로.
   --ls-cell 은 lesson-board.js 가 폭에 맞춰 정한다(최대 = 뷰어 원래 크기 380px). 레일 재질은
   oc-board-materials.css 의 html[data-oc-board-style="texture"] .oc-frame-wood 규칙을 그대로 쓴다. */
.ls-board{--ls-cell:44px;--ls-rail:calc(var(--ls-cell) * 14 / 44);--ls-size:calc(var(--ls-cell) * 8);
  width:100%;max-width:380px;margin:0 auto;user-select:none;-webkit-user-select:none;text-align:center}
.ls-frame{position:relative;display:inline-block;vertical-align:top;border:var(--ls-rail) solid #feedc2;
  --oc-material-rail:var(--ls-rail);--oc-material-length:calc(var(--ls-size) + var(--ls-rail) * 2);
  box-shadow:inset 0 0 0 1px #14362b,0 0 0 1px #d4bc91,0 4px 8px rgba(0,0,0,.22)}
.ls-frame .oc-frame-wood{position:absolute;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,#feedc2 0px,#feedc2 1.5px,#eedeb6 2.5px,#feedc2 4.5px,#eedeb6 5px,#feedc2 7px,#eedeb6 8.5px)}
.ls-frame .oc-frame-wood-top{left:calc(var(--ls-rail) * -1);right:calc(var(--ls-rail) * -1);top:calc(var(--ls-rail) * -1);height:var(--ls-rail)}
.ls-frame .oc-frame-wood-right{top:0;right:calc(var(--ls-rail) * -1);bottom:0;width:var(--ls-rail)}
.ls-frame .oc-frame-wood-bottom{left:calc(var(--ls-rail) * -1);right:calc(var(--ls-rail) * -1);bottom:calc(var(--ls-rail) * -1);height:var(--ls-rail)}
.ls-frame .oc-frame-wood-left{top:0;left:calc(var(--ls-rail) * -1);bottom:0;width:var(--ls-rail)}
.ls-coords{position:absolute;z-index:2;display:flex;color:#5d3a1a;font:400 calc(var(--ls-cell) * 11 / 44)/1 'Lato',system-ui,sans-serif;text-transform:uppercase;pointer-events:none}
.ls-coords--top{left:0;top:calc(var(--ls-rail) * -1);width:var(--ls-size);height:var(--ls-rail);align-items:center}
.ls-coords--left{top:0;left:calc(var(--ls-rail) * -1);width:var(--ls-rail);height:var(--ls-size);flex-direction:column}
.ls-coords span{flex:1;display:flex;align-items:center;justify-content:center}
.ls-frame-label{position:absolute;left:0;right:0;bottom:calc(var(--ls-cell) * -10 / 44);
  height:calc(var(--ls-cell) * 10 / 44);font:700 calc(var(--ls-cell) * 12 / 44)/calc(var(--ls-cell) * 13 / 44) 'Lato',system-ui,sans-serif;
  text-align:center;color:#5d3a1a;z-index:4;pointer-events:none}
.ls-surface{position:relative;z-index:1;width:var(--ls-size);height:var(--ls-size);background-color:#008563;
  background-image:linear-gradient(rgba(3,132,99,.65),rgba(3,132,99,.65)),linear-gradient(rgb(3,26,17),rgb(3,26,17)),url('/flipsight/image/board-velvet-photo-v4.webp');
  background-size:auto,auto,640px 640px;background-blend-mode:normal,screen,luminosity;box-shadow:inset 0 0 0 1px #000}
.ls-canvas{position:absolute;inset:0;width:100%;height:100%}
.ls-overlay{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
/* 돌 뒤집기(lesson-board.js startFlip): 뷰어와 같은 24장 프레임 띠(oc-disc-flip.js)를 칸 위에서 WAAPI steps 로 재생. */
.ls-flip{position:absolute;overflow:hidden;pointer-events:none}
.ls-flip__strip{position:absolute;left:0;top:0;background-repeat:no-repeat;will-change:transform}
.ls-cell{--ls-mark-offset-y:0px;position:relative;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;background:transparent;font:inherit;color:inherit;isolation:isolate;-webkit-tap-highlight-color:transparent}
.ls-cell.on-black,.ls-cell.on-white{--ls-mark-offset-y:var(--ls-disc-center-y,0px)}
button.ls-cell.is-legal{cursor:pointer}
button.ls-cell:disabled{opacity:1;background:transparent;cursor:default}
button.ls-cell:focus-visible{outline:2px solid #f5c861;outline-offset:-3px;border-radius:calc(var(--ls-cell) * .12)}
button.ls-cell.is-legal:hover{background:rgba(255,255,255,.08)}
/* 표시는 칸 크기에 비례한다. 밝은 윤곽과 작은 배지를 사용해 판·돌의 질감을 보존한다. */
.ls-cell.is-last::after{content:"";position:absolute;z-index:3;width:13%;height:13%;border-radius:1px;
  background:#f8f4e9;pointer-events:none;transform:translateY(var(--ls-mark-offset-y))}
.ls-cell.is-last.on-white::after{background:#24352e}
.ls-mark{--ls-mark-color:#f5c861;--ls-mark-fill:rgba(245,200,97,.14);position:absolute;z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:center;color:var(--ls-mark-color);
  font:650 clamp(9px,calc(var(--ls-cell) * .29),13px)/1 system-ui,-apple-system,sans-serif}
/* Match the photographed body, including labels and replay numbers. Area
   highlights describe a square and deliberately stay on the grid. */
.ls-mark--ring,.ls-mark--flip,.ls-mark--dot,.ls-mark--legal,.ls-mark--x,.ls-mark--label,
.ls-mark--num,.ls-mark--yb-counted,.ls-mark--frontier-counted{transform:translateY(var(--ls-mark-offset-y))}
.ls-color--red{--ls-mark-color:#ff9b91;--ls-mark-fill:rgba(255,155,145,.14)}
.ls-color--blue{--ls-mark-color:#9cd9ff;--ls-mark-fill:rgba(156,217,255,.14)}
.ls-color--green{--ls-mark-color:#93e4ba;--ls-mark-fill:rgba(147,228,186,.14)}
/* Analysis putEnablePrint: SIZE 200%, (200 / 400) * .28 = 14%, square, opacity .7. */
.ls-mark--legal{z-index:3;width:14%;height:14%;border:0;border-radius:0;background:#196619;opacity:.7}
.ls-mark--legal-reply{width:18%;height:18%;border:1.5px solid rgba(255,250,235,.85);border-radius:50%;background:rgba(8,37,29,.16);opacity:1}
.ls-mark--dot{width:16%;height:16%;border-radius:50%;background:var(--ls-mark-color);box-shadow:0 0 0 1px rgba(8,37,29,.45)}
.ls-mark--ring{width:62%;height:62%;border-radius:50%;border:max(1.5px,calc(var(--ls-cell) * .045)) solid var(--ls-mark-color);
  box-shadow:0 0 0 1px rgba(8,37,29,.32)}
.ls-mark--ring.on-black,.ls-mark--ring.on-white{width:94%;height:94%}
.ls-mark--flip{z-index:2;width:94%;height:94%;border:1.5px dashed rgba(245,200,97,.9);border-radius:50%}
.ls-mark--x{width:46%;height:46%;background:transparent;border:0;box-shadow:none}
.ls-mark--x.on-white{--ls-mark-color:#bc3434}
.ls-mark--x::before,.ls-mark--x::after{content:"";position:absolute;width:64%;height:max(2px,calc(var(--ls-cell) * .055));border-radius:1px;background:var(--ls-mark-color);transform:rotate(45deg)}
.ls-mark--x::after{transform:rotate(-45deg)}
.ls-mark--label{max-width:94%;padding:calc(var(--ls-cell) * .09) calc(var(--ls-cell) * .1);border:1px solid rgba(255,250,235,.22);
  border-radius:calc(var(--ls-cell) * .12);background:#173d33;color:#fff8e7;white-space:nowrap;letter-spacing:.01em}
.ls-mark--label.ls-mark--long{font-size:clamp(7px,calc(var(--ls-cell) * .2),9px);padding-left:calc(var(--ls-cell) * .05);padding-right:calc(var(--ls-cell) * .05);letter-spacing:0}
/* 분석 다이어그램처럼 번호는 배지 없이 돌 위에 바로 표시한다. */
.ls-mark--num{inset:0;background:transparent;border:0;box-shadow:none;color:#fff;
  font:400 calc(var(--ls-cell) * 18 / 44)/1 'Lato',Arial,sans-serif;font-variant-numeric:tabular-nums}
.ls-mark--num.on-white{color:#000}
.ls-mark--area,.ls-mark--openness,.ls-mark--yb-empty{z-index:1;inset:8%;border:1px solid var(--ls-mark-color);border-radius:calc(var(--ls-cell) * .12);background:var(--ls-mark-fill)}
.ls-mark--yb-counted,.ls-mark--frontier-counted{z-index:3;width:74%;height:74%;border:1.5px solid var(--ls-mark-color);border-radius:50%;background:transparent}
/* 흰 돌 위의 연한 하늘색은 대비가 낮다: 범례와 같은 진한 파랑·조금 굵게 */
.ls-mark--yb-counted.on-white,.ls-mark--frontier-counted.on-white{--ls-mark-color:#347ea7;border-width:2px}
.ls-mark--area.on-black,.ls-mark--area.on-white{inset:3%;background:transparent}
.ls-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:10px 0 2px;color:var(--ls-mut,#5b6474);font-size:.76rem;line-height:1.4}
.ls-legend[hidden]{display:none}
.ls-legend__item{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.ls-legend__symbol{display:inline-block;flex:none;width:12px;height:12px}
.ls-legend__symbol--legal{width:6px;height:6px;border:0;border-radius:0;background:currentColor;opacity:.7}
.ls-legend__symbol--legal-reply{width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%}
.ls-legend__symbol--last{width:6px;height:6px;border-radius:1px;background:currentColor}
.ls-legend__symbol--flip{border:1.5px dashed #9a6a16;border-radius:50%}
.ls-legend__symbol--openness,.ls-legend__symbol--yb-empty{border:1px solid #347ea7;border-radius:2px;background:rgba(156,217,255,.18)}
.ls-legend__symbol--yb-counted,.ls-legend__symbol--frontier-counted{border:1.5px solid #347ea7;border-radius:50%}
.ls-bar{display:flex;flex-direction:column;gap:12px;align-items:stretch;margin-top:12px;text-align:left}
.ls-bar--replay .ls-legend{margin:0}
.ls-bar__row{display:flex;align-items:center;gap:10px;min-height:44px}
.ls-bar__row .ls-status{flex:1 1 auto;font-size:clamp(12px,calc(var(--ls-cell,44px) * .32),14px);line-height:1.5}
.ls-bar__row .ls-status:empty{display:block}
.ls-bar__row .ls-buttons{flex:0 0 auto;flex-wrap:nowrap;margin-left:auto}
.ls-status{min-width:0;font-size:14px;line-height:1.75}
.ls-status:empty{display:none}
.ls-status--good b{color:#15803d}.ls-status--ok b{color:#1d4ed8}.ls-status--bad b{color:#b91c1c}
.ls-muted{color:var(--ls-mut,#5b6474);font-size:12px}
.ls-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.ls-btn{min-width:44px;min-height:44px;padding:8px 14px;border:1px solid var(--ls-bd,#dce5e0);border-radius:10px;
  background:var(--ls-card,#fff);color:var(--ls-fg,#20312c);font-weight:650;font-size:13px;line-height:1.4;cursor:pointer}
.ls-btn:not(:disabled):hover{border-color:var(--ls-pri);background:var(--ls-soft)}
.ls-btn:disabled{opacity:.4;cursor:default}

/* 앱 다크 테마 */
html.fs-app-theme-dark .fs-lesson{--ls-fg:var(--fs-app-text,#f1f5f9);--ls-mut:var(--fs-app-muted,#94a3b8);
  --ls-bd:var(--fs-app-border,#3a414c);--ls-card:var(--fs-app-surface,#151d2a);--ls-soft:var(--fs-app-surface-2,#1c2635);--ls-pri:#9ddbbe;--ls-on-pri:#0b1018}
html.fs-app-theme-dark body{background:var(--fs-app-bg,#0b1018)}
html.fs-app-theme-dark .fs-lesson__tip{background:#2a2517;border-color:#51442a}
html.fs-app-theme-dark .fs-lesson__tip .fs-lesson__callout-label{color:#e0bf76}
html.fs-app-theme-dark .fs-lesson__key{background:var(--ls-card);border-color:var(--ls-bd);border-left-color:var(--ls-pri)}
html.fs-app-theme-dark .ls-legend__symbol--flip{border-color:#f5c861}
html.fs-app-theme-dark .ls-legend__symbol--openness,html.fs-app-theme-dark .ls-legend__symbol--yb-empty,html.fs-app-theme-dark .ls-legend__symbol--yb-counted,html.fs-app-theme-dark .ls-legend__symbol--frontier-counted{border-color:#9cd9ff}
html.fs-app-theme-dark .ls-status--good b{color:#86ddb1}
html.fs-app-theme-dark .ls-status--ok b{color:#9cd9ff}
html.fs-app-theme-dark .ls-status--bad b{color:#ff9b91}
html.fs-app-theme-dark .fs-lesson__review,html.fs-app-theme-dark .fs-lesson__writing{background:#2a2517;color:#e0bf76;border-color:#51442a}

@media (max-width:760px){
  .fs-lesson__chapter{grid-template-columns:minmax(0,1fr);gap:16px}
  main.fs-lesson .fs-lesson__chapter h2{margin-bottom:8px}
}
@media (max-width:600px){
  .fs-lesson{padding:16px max(16px,env(safe-area-inset-right)) 36px max(16px,env(safe-area-inset-left))}
  .fs-lesson--index .fs-lesson__header{padding:22px 20px;border-radius:16px}
  .fs-lesson__chapter{padding:18px}
  .fs-lesson__chapter ol{grid-template-columns:minmax(0,1fr)}
  .fs-lesson__chapter li a,.fs-lesson__chapter li.is-locked .fs-lesson__lesson-link{min-height:50px}
  .fs-lesson__quiz{padding:16px 12px}
  .fs-lesson__tip,.fs-lesson__key{padding:14px 16px}
  main.fs-lesson h2{font-size:20px}
  .fs-lesson__nav{gap:8px}
  .fs-lesson__nav a{padding:12px;font-size:13px}
}

/* 진도와 종반 연습: 작은 화면에서는 보드의 사용 가능한 폭을 따른다. */
.fs-lesson__completion{max-width:760px;margin:32px auto 0;padding:20px 0;border-top:1px solid var(--ls-bd)}
.fs-lesson .fs-lesson__progress{color:var(--ls-mut);font-size:13px;margin:12px 0 4px}
.fs-lesson__completion small{color:var(--ls-mut);font-size:12px}
/* 학습 완료: 목차 카드는 채운 원형 체크 배지 + 테두리 강조, 강의 끝 버튼은 채운 버튼(2026-10-03 사용자 요청: 더 눈에 띄게). */
.fs-lesson__chapter li a.is-complete{border-color:var(--ls-pri)}
.fs-lesson__chapter a.is-complete .fs-lesson__lesson-name::after{content:'';display:inline-block;width:1em;height:1em;margin-left:5px;border-radius:50%;
  background:#18a058 center/100% no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.4l2.5 2.5 4.9-5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");vertical-align:-.12em}   /* 인증마크(ocpv-verified-badge)와 같은 1em·#18a058, 체크는 SVG */
.fs-lesson__completion .ls-btn[data-lesson-complete]{min-height:48px;padding:10px 20px;font-size:15px}
.fs-lesson__completion .ls-btn[data-lesson-complete][aria-pressed="true"]{border-color:var(--ls-pri);background:var(--ls-pri);color:var(--ls-on-pri)}
.ls-endgame-host{width:100%;max-width:380px;margin:20px auto 0}
.ls-endgame-host:empty{display:none}
.ls-endgame-host iframe{display:block;width:100%;border:0;background:var(--ls-card)}
.ls-endgame [hidden]{display:none!important}