/* 글로 읽는 레슨 페이지(build-seo.py가 site/learn.css로 복사). 앱 v3 디자인과 같은 베이지, 검은 외곽선, 레몬 톤 */
:root{
  --ink:#111111; --sand:#E4DCCE; --card:#E9E2D5; --paper:#FFFFFF; --lemon:#F6F29C; --orange:#EE5A1F; --line:#D8CFBF;
  --text:#1B1B1B; --dim:#6B655B; --accent:#EE5A1F; --accent2:#EE5A1F; --warn:#B54708; --brass:#8A6420; --ok:#1F8A5B; --bad:#C93434;
  --panel:#FFFFFF; --panel2:#F3EEE5; --tint:#F7F3EA; --white-key:#FFFFFF; --black-key:#262A33;
}
*{box-sizing:border-box;}
html{background:var(--sand);}
body{margin:0; font-family:"IBM Plex Sans KR","Noto Sans KR",system-ui,sans-serif; color:var(--text); background:var(--sand); -webkit-text-size-adjust:100%; word-break:keep-all; overflow-wrap:anywhere;}
a{color:inherit;}
img,svg{max-width:100%; height:auto;}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:920px; margin:14px auto 0; padding:10px 16px 10px 18px;
  background:var(--paper); border:1.5px solid var(--ink); border-radius:999px;}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; text-decoration:none;}
.top nav, .foot nav{display:flex; flex-wrap:wrap; gap:6px;}
.top nav a, .foot nav a{text-decoration:none; font-size:13.5px; padding:6px 12px; border:1.5px solid var(--ink); border-radius:999px; background:var(--paper);}
.top nav a:hover, .foot nav a:hover{background:var(--lemon);}
.page{max-width:920px; margin:14px auto; padding:28px 32px 36px; background:var(--paper); border:1.5px solid var(--ink); border-radius:28px;}
.crumb{font-size:12.5px; color:var(--dim); margin-bottom:10px;}
.crumb a{color:var(--dim);}
h1{font-family:"Space Grotesk","IBM Plex Sans KR",sans-serif; font-weight:600; font-size:34px; line-height:1.2; letter-spacing:-.5px; margin:4px 0 16px;}
h1 small{display:block; font-family:"IBM Plex Sans KR",sans-serif; font-size:13px; font-weight:600; color:var(--orange); letter-spacing:0; margin-bottom:6px;}
h1 .sub{display:block; font-size:16px; font-weight:500; color:var(--dim); margin-top:6px; letter-spacing:0;}
.lead{font-size:16px; line-height:1.85;}
.goal{background:var(--lemon); border:1.5px solid var(--ink); border-radius:18px; padding:12px 16px; margin:12px 0;}
.goal p{margin:4px 0 0; line-height:1.75;}
.cta{display:block; text-align:center; text-decoration:none; font-weight:700; font-size:15.5px; color:#fff; background:var(--ink); border-radius:999px; padding:14px 18px; margin:16px 0;}
.cta:hover{background:var(--orange);}
.readnote{font-size:13px; color:var(--dim); line-height:1.7;}
.toc{border:1.5px solid var(--ink); border-radius:18px; padding:12px 18px; margin:16px 0 8px; background:var(--tint);}
.toc ol{margin:6px 0 0; padding-left:20px; columns:2; column-gap:28px; font-size:14px; line-height:1.9;}
.toc a{text-decoration:none;} .toc a:hover{color:var(--orange);}
.lesson h2, .tasks h2, .quiz h2, .grp h2, .faq h2{font-size:21px; font-weight:700; margin:38px 0 12px; padding-bottom:8px; border-bottom:1.5px solid var(--ink); scroll-margin-top:16px;}
.lesson h3{font-size:17px; margin:24px 0 8px;}
.lesson p, .grp p, .tasks p, .quiz p{font-size:15.5px; line-height:1.9; margin:12px 0;}
.lesson li{line-height:1.85;}
.term{color:var(--brass); font-weight:700;}
.kbd{background:var(--paper); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 7px; font-size:12px; font-family:ui-monospace,monospace;}
.gl{border-bottom:1.5px dotted var(--orange); cursor:help; font-weight:600;}
.xgo, .xref{color:var(--orange); font-weight:600; text-decoration:none; border-bottom:1.5px solid currentColor;}
.xref{display:inline-block; margin:4px 6px 4px 0; padding:5px 12px; border:1.5px solid var(--ink); border-radius:999px; color:var(--ink);}
.snd{display:inline-block; font-size:13px; font-weight:600; padding:4px 12px; margin:3px 6px 3px 0; border:1.5px dashed var(--line); border-radius:999px; color:var(--dim); background:var(--tint);}
.note-tip{background:#FBF6E9; border:1.5px solid #EBDCB2; border-radius:16px; padding:12px 16px; font-size:14.5px; margin:16px 0; line-height:1.8;}
.note-tip b, .story b{color:var(--warn);}
.candy{background:var(--lemon); border:1.5px solid var(--ink); border-radius:16px; padding:14px 18px; font-size:15px; margin:26px 0 8px; line-height:1.85;}
.story{background:var(--paper); border:1.5px solid var(--line); border-left:5px solid var(--orange); border-radius:16px; padding:14px 18px; margin:14px 0; font-size:14.5px; line-height:1.85;}
.alias{background:#E8F4F1; border:1.5px solid #BFE0D6; border-radius:16px; padding:13px 16px; margin:16px 0; font-size:14.5px; line-height:1.85;}
.alias b{color:#1E6F5C;}
.bx-sum::before,.bx-word::before,.bx-ask::before,.bx-do::before,.bx-acad::before,.bx-tip::before{display:table; font-size:11.5px; font-weight:700; line-height:1; padding:5px 11px 4px; border-radius:999px; margin:0 0 9px; border:1.5px solid var(--ink);}
.bx-sum::before{content:"꼭 기억"; background:var(--lemon); color:var(--ink);} .bx-sum{background:var(--ink); color:#fff;} .bx-sum b{color:var(--lemon);}
.bx-word::before{content:"용어"; background:var(--lemon); color:var(--ink);} .bx-word{background:#FAF7C9; border-color:var(--ink);} .bx-word b{color:var(--ink);}
.bx-ask::before{content:"궁금증"; background:var(--orange); color:#fff;} .bx-ask b{color:var(--orange);}
.bx-do::before{content:"해 보기"; background:#2D5C99; color:#fff;} .bx-do{background:#E4ECF6; border:1.5px solid #B9CBE3;} .bx-do b{color:#1F4C86;}
.bx-acad::before{content:"학원 연결"; background:#2E6B45; color:#fff;} .bx-acad{background:#E2EEDF; border:1.5px solid #B8D3B5;} .bx-acad b{color:#1F5E3A;}
.bx-tip::before{content:"도움말"; background:#fff; color:var(--ink);} .bx-tip{background:#F1EBDF; border:1.5px solid #DCCFB6;} .bx-tip b{color:var(--ink);}
table.tt, .lesson table{border-collapse:collapse; margin:14px 0; font-size:14px; background:var(--paper); display:block; max-width:100%; overflow-x:auto;}
table.tt td, table.tt th, .lesson td, .lesson th{border:1px solid var(--line); padding:8px 12px; text-align:center;}
table.tt th, .lesson th{background:var(--panel2); color:var(--dim);}
.tasks ol{line-height:1.9; font-size:15px;}
.qa{border:1.5px solid var(--ink); border-radius:16px; margin:10px 0; background:var(--paper);}
.qa summary{cursor:pointer; padding:12px 16px; font-weight:700; font-size:15px; list-style:none;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{content:"Q. "; color:var(--orange);}
.qa[open] summary{border-bottom:1.5px dashed var(--line);}
.qa p{padding:0 16px; font-size:14.5px; line-height:1.85;}
.qa .ans{color:var(--ok);}
.pager{display:flex; justify-content:space-between; gap:10px; margin-top:20px;}
.pager a{text-decoration:none; font-weight:600; padding:10px 14px; border:1.5px solid var(--ink); border-radius:999px;}
.pager a:hover{background:var(--lemon);}
.grp h2 small{font-size:13px; color:var(--dim); font-weight:500;}
.grp .hook{font-weight:700;}
.grp ul{line-height:1.9;}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin:12px 0;}
.lcard{display:flex; flex-direction:column; gap:4px; text-decoration:none; border:1.5px solid var(--ink); border-radius:18px; padding:12px 14px; background:var(--card);}
.lcard:hover{background:var(--lemon);}
.lcard span{font-size:13px; color:var(--dim); line-height:1.6;}
.after{background:var(--tint); border-radius:14px; padding:10px 14px;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 20px;}
.chips a{text-decoration:none; font-size:13px; padding:4px 10px; border:1.5px solid var(--ink); border-radius:999px;}
.chips a:hover{background:var(--lemon);}
.gloss dt{font-weight:700; font-size:17px; margin-top:18px; padding-top:14px; border-top:1.5px dashed var(--line); scroll-margin-top:16px;}
.gloss dd{margin:6px 0 0; font-size:15px; line-height:1.85;}
.more{font-size:14.5px;}
.foot{max-width:920px; margin:0 auto 30px; padding:0 16px; font-size:13px; color:var(--dim); line-height:1.7;}
.foot nav{margin-top:8px;}
@media (max-width:640px){
  .page{padding:20px 16px 28px; border-radius:22px; margin:10px 8px;}
  .top{margin:8px 8px 0; border-radius:24px;}
  h1{font-size:27px;}
  .toc ol{columns:1;}
  .pager{flex-direction:column;}
}
.secNo{display:inline-block; font-family:"Space Grotesk",sans-serif; font-size:.78em; font-weight:600; background:var(--ink); color:var(--lemon); border-radius:999px; padding:1px 11px; margin-right:8px; vertical-align:2px;}
.lesson h3 .secNo{background:var(--lemon); color:var(--ink); border:1.5px solid var(--ink);}
.toc li.t3{padding-left:18px; font-size:13px; color:var(--dim);}
.lesson h2.fin{border-bottom-style:dashed;}

.cta.cta2{background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); margin-top:-6px;}
/* 광고 칸: 글 아래쪽에만, 본문과 확실히 구분 */
.adbox{margin:26px 0 8px; padding:10px 10px 12px; border:1.5px dashed var(--line); border-radius:18px; text-align:center; min-height:60px;}
.adbox small{display:block; font-size:11px; color:var(--dim); margin-bottom:6px; letter-spacing:.04em;}
/* 개인정보처리방침, 건반 고르기 */
.policy h2, .gear h2{font-size:19px; margin:26px 0 8px;}
.policy p, .gear li, .gear p{font-size:15px; line-height:1.85;}
.gear ul, .gear ol{padding-left:20px;}
.gear li{margin:6px 0;}
.buy{display:inline-block; margin:6px 8px 4px 0; padding:9px 16px; border-radius:999px; border:1.5px solid var(--ink); background:var(--lemon); color:var(--ink); text-decoration:none; font-weight:700; font-size:14px;}
.disclose{font-size:13px; color:var(--dim); background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:8px 12px;}
.legal{margin-top:8px; font-size:12px;}
.legal a{color:inherit;}

/* 코드 카드(2026-10-14): 앱과 같은 그림. 근음 먹색 표지와 레몬 건반, 3음 주황, 5음 파랑, 7음과 6음 보라, 9음 자주, sus의 2음과 4음 초록 */
:root{--ccR:#1E1C19; --ccT:#E8521A; --ccF:#2F62B8; --ccV:#7647C2; --ccN:#C0306F; --ccS:#23885A;
  --ccRt:#F6EE7A; --ccTt:#F8BC9C; --ccFt:#B3C8EE; --ccVt:#CFBBF1; --ccNt:#EFB3CD; --ccSt:#ADDFC2;}
.ccGrid{margin:14px 0 18px;}
.ccCards{display:grid; grid-template-columns:repeat(auto-fill, minmax(156px, 1fr)); gap:12px;}
.ccard{margin:0; background:var(--paper); border:1.5px solid var(--ink); border-radius:18px; padding:10px 11px 9px; display:flex; flex-direction:column;}
.ccHead{display:flex; align-items:center; gap:6px; min-height:28px;}
.ccSym{display:inline-flex; align-items:baseline; line-height:1; margin-right:auto;}
.ccSym b{font-size:25px; font-weight:700; letter-spacing:-.5px;}
.ccQ{font-size:16px; font-weight:600; margin-left:1px; position:relative; top:-3px;}
.ccTag{font-size:11.5px; font-weight:700; color:var(--ink); background:var(--lemon); border:1.5px solid var(--ink); border-radius:6px; padding:1px 7px;}
.ccRead{display:block; font-size:11.5px; color:var(--dim); margin:3px 0 4px;}
.ccKb{width:100%; height:auto; display:block;}
.ccW{fill:#fff; stroke:var(--ink); stroke-width:1;} .ccB{fill:var(--ink); stroke:var(--ink);}
.ccW.ccK{stroke-width:1.4;} .ccW.ccK.r{fill:var(--ccRt);} .ccW.ccK.t{fill:var(--ccTt);} .ccW.ccK.f{fill:var(--ccFt);} .ccW.ccK.v{fill:var(--ccVt);} .ccW.ccK.n{fill:var(--ccNt);} .ccW.ccK.s{fill:var(--ccSt);}
.ccB.ccK{fill:#3a3631; stroke-width:2.2;} .ccB.ccK.r{stroke:#F6F29C;} .ccB.ccK.t{stroke:var(--ccT);} .ccB.ccK.f{stroke:#7FA4E6;} .ccB.ccK.v{stroke:#B496E8;} .ccB.ccK.n{stroke:#E57FAE;} .ccB.ccK.s{stroke:#5CC08C;}
.ccM.r{fill:var(--ccR); stroke:#F6F29C; stroke-width:1.2;} .ccM.t{fill:var(--ccT);} .ccM.f{fill:var(--ccF);} .ccM.v{fill:var(--ccV);} .ccM.n{fill:var(--ccN);} .ccM.s{fill:var(--ccS);}
.ccML{font-size:11px; font-weight:800; fill:#fff; text-anchor:middle;} .ccML.r{fill:#F6F29C;}
.ccArc{fill:none; stroke:#9A9284; stroke-width:1.1;} .ccArcN{font-size:10px; font-weight:800; fill:#6B655B; text-anchor:middle;}
.ccNotes{display:grid; gap:3px; margin-top:8px;}
.ccN{display:flex; flex-direction:column; align-items:center; min-width:0;}
.ccN i{font-style:normal; font-size:10px; font-weight:800; color:#fff; background:var(--cc); border-radius:999px; padding:1px 6px; line-height:1.4; min-width:20px; text-align:center;}
.ccN.r i{color:#F6F29C;}
.ccN b{font-size:15px; line-height:1.25; margin-top:3px;} .ccN small{font-size:11px; color:var(--dim); line-height:1.2;}
:is(.ccN,.ccLeg span).r{--cc:var(--ccR);} :is(.ccN,.ccLeg span).t{--cc:var(--ccT);} :is(.ccN,.ccLeg span).f{--cc:var(--ccF);} :is(.ccN,.ccLeg span).v{--cc:var(--ccV);} :is(.ccN,.ccLeg span).n{--cc:var(--ccN);} :is(.ccN,.ccLeg span).s{--cc:var(--ccS);}
.ccFx{display:flex; justify-content:space-between; align-items:center; gap:6px; margin-top:8px; padding-top:6px; border-top:1px dashed var(--line); font-size:11px; color:var(--dim);}
.ccFx b{font-size:12px; color:var(--text); letter-spacing:.3px;}
.ccLeg{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:12px; color:var(--dim); margin-top:10px;}
.ccLeg i{font-style:normal; font-size:10.5px; font-weight:800; color:#fff; background:var(--cc); border-radius:999px; padding:1px 7px; margin-right:4px;}
.ccLeg .r i{color:#F6F29C;}
.ccLeg .ccHint{flex-basis:100%; font-size:11.5px;}
.ccCap{font-size:13px; line-height:1.65; color:var(--dim); margin:5px 0 0;}
.ccFold{border:1.5px dashed var(--ink); border-radius:18px; padding:8px 12px;}
.ccFold > summary{cursor:pointer; font-weight:700; font-size:14px; padding:4px 0;}
@media (max-width:720px){ .ccCards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;} .ccard{padding:9px 8px 8px;} .ccSym b{font-size:22px;} .ccQ{font-size:14.5px;} }
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}