/* 배움터·사용 방법 페이지 — 앱 토큰(web/src/styles/tokens.css)과 같은 값 (ADDENDUM_02 1장, ADDENDUM_05 2-3). 글꼴 Pretendard Variable 1종 */
:root { color-scheme: light; --brand: #f5a524; --brand-pressed: #c77f0a; --brand-tint: rgba(245,165,36,.12); --canvas: #fdf2e1; --surface: #ffffff; --ink: #1c1c1d; --ink-2: #535253; --hairline: #e8d9bb; --info: #1cb0f6; --weak-bg: rgba(28,28,29,.06); }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Pretendard Variable", Pretendard, system-ui, Roboto, "Noto Sans KR", sans-serif; font-size: 17px; line-height: 26px; color: var(--ink); background: var(--canvas); word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
header.site { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); box-shadow: inset 0 -1px 0 0 var(--hairline); }
header.site .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; text-decoration: none; }
header.site .brand img { border-radius: 8px; }
header.site nav { display: flex; align-items: center; gap: 8px; }
header.site .lang { padding: 6px 12px; border-radius: 9999px; background: var(--weak-bg); color: var(--ink-2); font-size: 14px; text-decoration: none; font-weight: 500; }
header.site .open { padding: 8px 14px; border-radius: 12px; background: var(--brand); color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 0 var(--brand-pressed); }
nav.tabs { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; padding: 12px 16px 0; }
nav.tabs a { padding: 8px 16px; border-radius: 9999px; background: var(--surface); color: var(--ink-2); text-decoration: none; font-weight: 500; box-shadow: inset 0 0 0 2px var(--hairline); }
nav.tabs a[aria-current] { background: var(--brand-tint); color: var(--ink); box-shadow: inset 0 0 0 2px var(--brand); font-weight: 700; }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { font-size: 26px; line-height: 35px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; margin: 8px 0 12px; }
h2 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 17px; line-height: 26px; font-weight: 700; margin: 16px 0 8px; }
p { text-wrap: pretty; margin: 0 0 12px; }
a { color: var(--brand-pressed); }
.lead, .meta, .crumb { color: var(--ink-2); }
section, article, .card { background: var(--surface); border-radius: 24px; padding: 20px 16px; margin: 0 0 12px; }
.tip { background: var(--brand-tint); }
ul, ol { padding-left: 22px; margin: 0 0 12px; }
li { margin: 4px 0; }
ul.cards { list-style: none; padding: 0; display: grid; gap: 8px; }
ul.cards li { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--canvas); }
ul.cards li a { font-weight: 700; text-decoration: none; color: var(--ink); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.grid2 .cell { padding: 12px; border-radius: 16px; background: var(--canvas); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.grid2 .cell b { display: block; }
.grid2 .cell span { display: block; color: var(--ink-2); font-size: 14px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: 6px 12px; border-radius: 9999px; background: var(--surface); text-decoration: none; color: var(--ink); font-size: 15px; box-shadow: inset 0 0 0 2px var(--hairline); }
dl.faq dt { font-weight: 700; margin-top: 12px; }
dl.faq dd { margin: 0; color: var(--ink-2); }
small { color: var(--ink-2); font-size: 14px; }
.steps li { margin: 6px 0; }
.next { margin: 24px 0 8px; }
footer.play { text-align: center; padding: 32px 16px 48px; background: var(--surface); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; max-width: 100%; padding: 12px 24px; border-radius: 16px; background: var(--brand); color: var(--ink); font-size: 18px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 0 var(--brand-pressed); }
.cta:active { transform: translateY(4px); box-shadow: none; }
.cta.small { font-size: 16px; }
.links { font-size: 14px; }
/* 훈련 노트 (ADDENDUM_29 2장): 본문 17px · 줄간격 1.7 · 폰 가로 여백 20px */
nav.tabs { flex-wrap: wrap; }
body.tips main { padding: 16px 20px; }
body.tips article.note { background: none; border-radius: 0; padding: 0; margin: 0 0 24px; font-size: 17px; line-height: 1.7; }
body.tips article.note h1 { margin-top: 12px; }
body.tips article.note h2 { margin: 32px 0 12px; }
body.tips article.note p, body.tips article.note li { line-height: 1.7; }
body.tips article.note strong { background: linear-gradient(transparent 62%, var(--brand-tint) 62%); }
.note-meta { color: var(--ink-2); font-size: 15px; margin: 0 0 20px; }
.related ul { margin: 0; }
.related li a { font-weight: 700; }
.play-card p:last-child { margin: 0; }
nav.prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px 0 8px; }
nav.prevnext a { display: block; padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 22px; box-shadow: inset 0 0 0 2px var(--hairline); }
nav.prevnext a small { display: block; }
nav.prevnext .next-a { text-align: right; grid-column: 2; }
body.tips ul.cards li { background: var(--surface); padding: 16px; }
ul.cards li .date { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }