/* 심볼픽 공통 스타일 — 밝고 따뜻한 색, 큰 글씨, 손가락으로 누르기 쉬운 크기 */
:root {
  --bg: #fffaf3;
  --bg-soft: #fff3e4;
  --card: #ffffff;
  --line: #efdcc6;
  --text: #2d2219;
  --muted: #6b5a4c;
  --accent: #c2410c;
  --accent-ink: #ffffff;
  --accent-soft: #ffedd5;
  --warn: #ea8a0c;
  --focus: #2563eb;
  --c-heart: #ffe4e6; --c-heart-b: #fecdd3; --c-heart-i: #e11d48;
  --c-blank: #fef6c3; --c-blank-b: #fde68a; --c-blank-i: #b45309;
  --c-arrow: #e0f2fe; --c-arrow-b: #bae6fd; --c-arrow-i: #0369a1;
  --c-roman: #dcfce7; --c-roman-b: #bbf7d0; --c-roman-i: #15803d;
  --c-emo: #fce7f3; --c-emo-b: #fbcfe8; --c-emo-i: #be185d;
  --c-star: #ede9fe; --c-star-b: #ddd6fe; --c-star-i: #6d28d9;
  --c-num: #e0e7ff; --c-num-b: #c7d2fe; --c-num-i: #4338ca;
  --c-unit: #ccfbf1; --c-unit-b: #99f6e4; --c-unit-i: #0f766e;
  --c-box: #f1f0ee; --c-box-b: #e2ded8; --c-box-i: #57534e;
  --radius: 16px;
  --sym-font: "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", "Noto Sans Symbols 2", "Noto Sans Symbols", "Noto Color Emoji", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1713; --bg-soft: #261f19; --card: #231c16; --line: #3d3229;
    --text: #f6ece1; --muted: #c9b8a8;
    --accent: #fb923c; --accent-ink: #1c1007; --accent-soft: #3a2414;
    --warn: #fbbf24; --focus: #60a5fa;
    --c-heart: #3b1d24; --c-heart-b: #5b2a35; --c-heart-i: #fb7185;
    --c-blank: #3a3215; --c-blank-b: #5a4a1c; --c-blank-i: #fcd34d;
    --c-arrow: #14293a; --c-arrow-b: #1e3f58; --c-arrow-i: #7dd3fc;
    --c-roman: #15301f; --c-roman-b: #1f4a2e; --c-roman-i: #86efac;
    --c-emo: #3a1a2c; --c-emo-b: #5a2744; --c-emo-i: #f9a8d4;
    --c-star: #251d3d; --c-star-b: #3b2d60; --c-star-i: #c4b5fd;
    --c-num: #1c2140; --c-num-b: #2c3466; --c-num-i: #a5b4fc;
    --c-unit: #123430; --c-unit-b: #1b4d47; --c-unit-i: #5eead4;
    --c-box: #2a2724; --c-box-b: #403b36; --c-box-i: #d6d3d1;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.75 "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
a { color: inherit; }
.wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* 머리말: 핸드폰에서는 로고 아래에 메뉴 버튼이 한 줄로 크게 */
.site-h { background: var(--card); border-bottom: 2px solid var(--line); }
.site-h .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 10px; padding-bottom: 10px; }
.logo { font-weight: 800; font-size: 22px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.logo-m { color: #e11d48; font-family: var(--sym-font); font-size: 24px; }
.gnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; width: 100%; }
.gnav a {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 4px;
  text-decoration: none; border-radius: 12px; font-size: 17px; font-weight: 700; color: var(--text);
  background: var(--bg-soft); border: 2px solid transparent; text-align: center; line-height: 1.25; white-space: nowrap;
}
@media (max-width: 719px) {
  .gnav { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; }
  .gnav a.nav-guide { grid-column: 1 / -1; }
}
@media (max-width: 400px) { .gnav { gap: 5px; } .gnav a { font-size: 16px; padding: 6px 2px; letter-spacing: -0.02em; } }
.gnav a:hover { border-color: var(--accent); }
.gnav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
@media (min-width: 720px) {
  .gnav { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); }
  .gnav a { font-size: 18px; padding: 8px 10px; }
}

.crumb { font-size: 15px; color: var(--muted); margin: 16px 0 0; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
h1 { font-size: 30px; line-height: 1.35; margin: 12px 0 10px; letter-spacing: -0.02em; }
.lead { color: var(--muted); margin: 0 0 18px; font-size: 17px; }

/* 사용법 한 줄 */
.howto {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 14px 16px;
  background: var(--accent-soft); border-radius: var(--radius); font-size: 18px; line-height: 1.55;
}
.howto strong { color: var(--accent); margin-right: 6px; }
.howto-ic { font-size: 24px; line-height: 1.2; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* 홈 첫 화면 */
.hero { text-align: center; padding: 28px 0 8px; }
.hero h1 { font-size: 30px; margin: 0 0 10px; }
.hero .lead { font-size: 18px; max-width: 560px; margin: 0 auto 22px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
.card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 168px; padding: 18px 10px; border-radius: 22px; text-decoration: none;
  border: 2px solid; transition: transform .1s, box-shadow .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(120, 60, 0, .12); }
.card:active { transform: scale(.98); }
.card .ic { font-family: var(--sym-font); font-size: 60px; line-height: 1.1; height: 70px; display: flex; align-items: center; }
.card .nm { font-size: 22px; font-weight: 800; }
.card .ds { font-size: 15px; color: var(--muted); }
.ic-blank span { display: block; width: 60px; height: 46px; border: 3px dashed currentColor; border-radius: 8px; }
.c-heart { background: var(--c-heart); border-color: var(--c-heart-b); } .c-heart .ic { color: var(--c-heart-i); }
.c-blank { background: var(--c-blank); border-color: var(--c-blank-b); } .c-blank .ic { color: var(--c-blank-i); }
.c-arrow { background: var(--c-arrow); border-color: var(--c-arrow-b); } .c-arrow .ic { color: var(--c-arrow-i); }
.c-roman { background: var(--c-roman); border-color: var(--c-roman-b); } .c-roman .ic { color: var(--c-roman-i); }
.c-emo { background: var(--c-emo); border-color: var(--c-emo-b); } .c-emo .ic { color: var(--c-emo-i); font-size: 40px; }
.c-star { background: var(--c-star); border-color: var(--c-star-b); } .c-star .ic { color: var(--c-star-i); }
.c-num { background: var(--c-num); border-color: var(--c-num-b); } .c-num .ic { color: var(--c-num-i); }
.c-unit { background: var(--c-unit); border-color: var(--c-unit-b); } .c-unit .ic { color: var(--c-unit-i); }
.c-box { background: var(--c-box); border-color: var(--c-box-b); } .c-box .ic { color: var(--c-box-i); }
.cards .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 40px; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cards .card:last-child:nth-child(odd) { grid-column: auto; }
  .c-emo .ic { font-size: 48px; }
  .card { min-height: 200px; }
  .card .ic { font-size: 72px; height: 84px; }
}

/* 도구 */
.sp-tool { margin: 8px 0 40px; }
.sec-t { font-size: 22px; margin: 36px 0 8px; }
.search { margin: 8px 0; }
.search-l { display: block; font-weight: 700; margin-bottom: 6px; }
.search input {
  width: 100%; font: inherit; font-size: 18px; padding: 14px 16px; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--card); color: var(--text); min-height: 54px;
}
.search input:focus { border-color: var(--accent); outline: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.chip { text-decoration: none; padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 999px; font-size: 16px; font-weight: 600; background: var(--card); }
.chip:hover { border-color: var(--accent); color: var(--accent); }

.grp { margin: 24px 0 0; scroll-margin-top: 16px; }
.grp-t { font-size: 18px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.grp-t a { text-decoration: none; }
.grp-t .more { font-size: 15px; font-weight: 600; color: var(--accent); margin-left: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.s {
  position: relative; min-height: 58px; padding: 4px; border: 2px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--text); font-family: var(--sym-font); font-size: 28px; line-height: 1.2;
  cursor: pointer; transition: transform .08s, border-color .12s, background .12s;
}
.s:hover { border-color: var(--accent); background: var(--accent-soft); }
.s:active { transform: scale(.94); }
.s.e { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.s.long { grid-column: span 2; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s.xl { grid-column: 1 / -1; white-space: normal; font-size: 18px; padding: 6px 12px; }
.s.w::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.s.ok { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.s.blank-s { font-family: inherit; font-size: 15px; color: var(--muted); }
.legend { font-size: 15px; color: var(--muted); margin: 18px 0 0; display: flex; align-items: center; gap: 8px; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); display: inline-block; flex: none; }

.results { background: var(--bg-soft); border-radius: var(--radius); padding: 14px; margin: 4px 0 8px; }
.results .rmeta { font-size: 16px; color: var(--muted); margin: 0 0 8px; }
.results .rcat { font-size: 15px; color: var(--muted); margin: 12px 0 6px; }
.results .rcat a { color: var(--accent); font-weight: 600; }

/* 공백 카드 속 치는 법·깨짐 위험 */
.facts { list-style: none; margin: 8px 0 12px; padding: 10px 12px; background: var(--bg-soft); border-radius: 12px; font-size: 15px; line-height: 1.6; }
.facts li + li { margin-top: 4px; }
.fk { font-weight: 700; margin-right: 6px; }

/* 이 문자 뭐야? 검사기 */
.checker { margin: 28px 0 0; padding: 18px 16px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--card); }
.checker .sec-t { margin-top: 0; }
.ck-desc { margin: 0 0 10px; color: var(--muted); font-size: 16px; }
.checker textarea {
  width: 100%; font: inherit; font-family: var(--sym-font); font-size: 24px; padding: 12px 14px; min-height: 64px; resize: vertical;
  border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--text);
}
.checker textarea:focus { border-color: var(--accent); outline: none; }
.ck-out { margin-top: 10px; display: grid; gap: 10px; }
.ck-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--bg-soft); }
.ck-ch { flex: none; min-width: 64px; min-height: 64px; display: flex; align-items: center; justify-content: center; font-family: var(--sym-font); font-size: 38px; background: var(--card); border-radius: 12px; border: 2px solid var(--line); padding: 4px; }
.ck-ch.inv { font-family: inherit; font-size: 12px; color: var(--muted); text-align: center; max-width: 80px; }
.ck-body { min-width: 0; flex: 1; }
.ck-row { margin: 0 0 4px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.ck-k { font-weight: 700; margin-right: 6px; color: var(--accent); }

/* 부가 기능 (맨 아래) */
.extras { margin-top: 36px; padding: 16px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--card); }
.ex-t { font-size: 18px; margin: 0 0 4px; }
.extras .recent { margin-top: 12px; }
.bar { margin: 12px 0 0; }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; cursor: pointer; user-select: none; min-height: 44px; }
.toggle input { width: 24px; height: 24px; accent-color: var(--accent); margin: 0; flex: none; }
.hint { color: var(--muted); font-size: 15px; margin: 2px 0 0 34px; }

/* 공백 카드 */
.blank-list { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 720px) { .blank-list { grid-template-columns: 1fr 1fr; } }
.blank-card { border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--card); }
.bc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bc-head h3 { margin: 0; font-size: 19px; }
.bc-head code { font-size: 14px; color: var(--muted); flex: none; }
.bc-desc { margin: 6px 0; font-size: 16px; color: var(--muted); }
.bc-preview { margin: 10px 0; font-size: 22px; }
.bc-preview .lbl { font-size: 14px; color: var(--muted); margin-right: 8px; }
.bc-preview .mark { background: var(--accent-soft); outline: 2px dashed var(--accent); white-space: pre; }
.bc-act { display: flex; gap: 10px; align-items: center; }
.cnt { font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.cnt select { font: inherit; font-size: 17px; padding: 10px; min-height: 50px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--text); }

.btn {
  font: inherit; font-weight: 800; border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; min-height: 48px;
  background: var(--accent); color: var(--accent-ink); flex: none; font-size: 17px;
}
.btn.big { flex: 1; font-size: 19px; min-height: 54px; }
.btn.ghost { background: transparent; color: var(--text); border: 2px solid var(--line); }
.btn.sm { padding: 8px 16px; font-size: 16px; min-height: 44px; }

/* 로마숫자 변환 */
.roman { display: grid; gap: 12px; margin: 4px 0 8px; }
@media (min-width: 720px) { .roman { grid-template-columns: 1fr 1fr; } }
.rn-box { border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--card); }
.rn-l { display: block; font-weight: 800; font-size: 19px; margin-bottom: 8px; }
.rn-box input { width: 100%; font: inherit; font-size: 22px; padding: 12px 14px; min-height: 56px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--text); }
.rn-box input:focus { border-color: var(--accent); outline: none; }
.rn-out { margin-top: 10px; }
.rn-res { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.rn-res:first-child { border-top: 0; }
.rn-k { font-size: 15px; color: var(--muted); width: 112px; flex: none; }
.rn-v { font-size: 24px; letter-spacing: .04em; font-family: var(--sym-font); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rn-err { margin: 4px 0 0; color: var(--accent); font-size: 16px; font-weight: 600; }
.rn-v.muted { font-size: 15px; color: var(--muted); letter-spacing: 0; font-family: inherit; }

/* 숫자 모양 바꾸기 */
.numconv { border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--card); margin: 4px 0 8px; }
.numconv input { width: 100%; font: inherit; font-size: 22px; padding: 12px 14px; min-height: 56px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--text); }
.numconv input:focus { border-color: var(--accent); outline: none; }
.numconv .rn-k { width: 140px; }

.boxdemo { font-family: Consolas, "D2Coding", "Courier New", monospace; font-size: 18px; line-height: 1.2; background: var(--bg-soft); padding: 12px 16px; border-radius: 12px; overflow-x: auto; }

/* 이모티콘 만들기 */
.emaker { border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--card); margin: 18px 0 8px; }
.emaker .sec-t { margin-top: 0; }
.em-desc { margin: 0 0 10px; color: var(--muted); }
.em-out { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--accent-soft); border-radius: 12px; margin-bottom: 8px; }
.em-out output { flex: 1; min-width: 0; font-family: var(--sym-font); font-size: 28px; overflow-wrap: anywhere; }
.em-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--line); }
.em-k { width: 56px; flex: none; font-weight: 800; font-size: 16px; padding-top: 10px; }
.em-pts { display: flex; flex-wrap: wrap; gap: 6px; }
.pt { font: inherit; font-family: var(--sym-font); font-size: 18px; min-width: 48px; min-height: 44px; padding: 4px 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.pt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }

/* 자음 표 (2차 페이지용) */
.ktable { margin: 28px 0 0; }
.tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
.tabs button { font: inherit; font-size: 19px; font-weight: 800; min-height: 48px; border-radius: 12px; cursor: pointer; border: 2px solid var(--line); background: var(--card); color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.kdesc { margin: 0 0 8px; font-size: 16px; color: var(--muted); }
.kdesc strong { color: var(--text); }
.note { font-size: 15px; color: var(--muted); }

/* 모은 문자 칸 (화면 아래 고정) */
.basket {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 2px solid var(--accent);
  box-shadow: 0 -6px 18px rgba(120, 60, 0, .12);
}
.basket[hidden] { display: none; }
.basket input { flex: 1 1 100%; min-width: 0; font: inherit; font-family: var(--sym-font); font-size: 20px; padding: 10px 12px; min-height: 50px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--text); }
.basket .btn { flex: 1; }
@media (min-width: 720px) { .basket input { flex: 1; } .basket .btn { flex: none; } }
body.multi { padding-bottom: 150px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #2d2219; color: #fff; padding: 14px 20px; border-radius: 18px; font-size: 17px; font-weight: 700; z-index: 40;
  transition: opacity .15s, transform .15s; width: max-content; max-width: min(560px, calc(100% - 32px)); text-align: left; line-height: 1.5;
  white-space: pre-line;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
body.multi .toast { bottom: 160px; }

/* 설명글 — 핸드폰에서 읽기 쉽게: 짧은 문단, 넉넉한 줄 간격, 눈에 띄는 소제목 */
.article { border-top: 2px solid var(--line); padding-top: 8px; max-width: 760px; font-size: 17px; line-height: 1.85; }
.article p { margin: 0 0 1.05em; }
.article h2 { font-size: 22px; line-height: 1.4; margin: 40px 0 12px; letter-spacing: -0.01em; padding-left: 12px; border-left: 5px solid var(--accent); }
.article h3 { font-size: 19px; margin: 26px 0 8px; }
.article ul, .article ol { padding-left: 1.25em; margin: 0 0 1.1em; }
.article li { margin: 0 0 .55em; }
.article li::marker { color: var(--accent); font-weight: 700; }
.article strong { background: linear-gradient(transparent 62%, var(--accent-soft) 62%); }
.sum, .tip, .warn-box { border-radius: var(--radius); padding: 14px 16px; margin: 16px 0 20px; font-size: 16px; line-height: 1.7; }
.sum { background: var(--accent-soft); }
.sum > p:first-child, .tip > p:first-child, .warn-box > p:first-child { margin-top: 0; }
.sum-t { display: block; font-weight: 800; margin-bottom: 6px; color: var(--accent); }
.sum ul { margin: 0; }
.tip { background: var(--c-arrow); }
.warn-box { background: var(--c-blank); }
.tip p, .warn-box p { margin: 0; }
.steps { counter-reset: st; list-style: none; padding-left: 0; }
.steps > li { counter-increment: st; position: relative; padding-left: 44px; min-height: 32px; margin-bottom: .8em; }
.steps > li::before { content: counter(st); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.symrow { font-family: var(--sym-font); font-size: 22px; letter-spacing: .12em; overflow-wrap: anywhere; word-break: break-all; }
.symrow .inv { font-family: inherit; font-size: 12px; letter-spacing: 0; color: var(--muted); }
.symtable table { display: table; min-width: 0; }
.symtable th[scope="row"] { white-space: nowrap; font-size: 16px; }
.symtable td small { color: var(--muted); }

/* 가이드 목록 */
.guides { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .guides { grid-template-columns: 1fr 1fr; } }
.guides a { display: flex; gap: 12px; align-items: center; text-decoration: none; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); min-height: 72px; }
.guides a:hover { border-color: var(--accent); }
.guides .gi { font-size: 26px; flex: none; width: 40px; text-align: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--sym-font); }
.guides strong { display: block; font-size: 17px; line-height: 1.4; }
.guides span.gd { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.home-guides { margin: 40px 0 0; }
.article kbd { font: inherit; font-size: 15px; padding: 1px 7px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; background: var(--card); white-space: nowrap; }
.article code { font-size: 15px; background: var(--bg-soft); padding: 1px 5px; border-radius: 5px; }
.article table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 12px 0; display: block; overflow-x: auto; }
.article th, .article td { border: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: top; }
.article th { background: var(--bg-soft); white-space: nowrap; }
.article a { color: var(--accent); font-weight: 600; }
.info { border-top: 0; }
.todo { background: #fef3c7; color: #92400e; padding: 1px 6px; border-radius: 4px; }

.related { margin: 44px 0; }
.related h2 { font-size: 21px; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .related ul { grid-template-columns: 1fr 1fr; } }
.related a { display: block; text-decoration: none; border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--card); }
.related a:hover { border-color: var(--accent); }
.related strong { display: block; font-size: 18px; }
.related span { font-size: 15px; color: var(--muted); }

.site-f { border-top: 2px solid var(--line); margin-top: 40px; padding: 22px 0 36px; font-size: 16px; color: var(--muted); background: var(--card); }
.site-f nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-f a { text-decoration: none; display: inline-flex; min-height: 40px; align-items: center; }
.site-f a:hover { text-decoration: underline; }

@media (min-width: 720px) {
  body { font-size: 18px; }
  h1 { font-size: 36px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .s { min-height: 64px; font-size: 30px; }
  .tabs { grid-template-columns: repeat(18, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }