/* 나도스터디 KBS한국어 — 과정 색·과정 전용 모양 (app.css 등 공통 스타일 뒤에 불러온다)
   브랜드 티파니블루(#2dc4c4)는 그대로, 포인트 색 하나(쪽빛 #364fc7)를 더한다 (DESIGN 6절 · 결정 ⑩).
   영역 색 --k1 ~ --k7 : app.js subjColor() 가 var(--<영역id>) 를 쓴다. */

/* 옛한글(아래아 ᆞ·반치음 ㅿ·옛이응 ㆁ …) — 웹 글꼴(Pretendard·Google Noto Sans KR 나뉜 파일)은 옛 자모를 한 글자로 모아 주지 못한다.
   원고에 쓰인 옛한글만 뽑은 작은 글꼴(node build_font.js → assets/fonts/, Noto Sans KR · SIL OFL 1.1 — fonts/OFL.txt)을
   unicode-range 로 옛한글에만 걸어 글꼴 목록 맨 앞에 둔다. 현대 한글·영문은 이 글꼴을 받지 않는다(범위 밖).
   같은 파일을 'Noto Sans KR' 이름에도 덧붙인다 — Google 글꼴보다 뒤에 정의돼 옛한글 범위에서는 이쪽이 먼저 쓰인다(장면 글자 등 Noto Sans KR 을 직접 부르는 곳). */
@font-face { font-family: 'NadoOldHangul'; font-style: normal; font-weight: 100 599; font-display: swap; src: url(fonts/oldhangul-400.woff2?v=1) format('woff2'); unicode-range: U+1100-11FF, U+A960-A97F, U+D7B0-D7FF, U+3164-318E; }
@font-face { font-family: 'NadoOldHangul'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(fonts/oldhangul-700.woff2?v=1) format('woff2'); unicode-range: U+1100-11FF, U+A960-A97F, U+D7B0-D7FF, U+3164-318E; }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100 599; font-display: swap; src: url(fonts/oldhangul-400.woff2?v=1) format('woff2'); unicode-range: U+1100-11FF, U+A960-A97F, U+D7B0-D7FF, U+3164-318E; }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(fonts/oldhangul-700.woff2?v=1) format('woff2'); unicode-range: U+1100-11FF, U+A960-A97F, U+D7B0-D7FF, U+3164-318E; }
.scene text { font-family: 'NadoOldHangul', 'Noto Sans KR', 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; }
/* 장면 파일이 글자에 직접 'Malgun Gothic' 을 먼저 적은 곳(k6-t04 고전 원문 등) — 옛한글만 이 글꼴로(현대 한글은 그대로 맑은 고딕), PC·휴대폰 모양을 같게 */
.scene [style*="Malgun Gothic"] { font-family: 'NadoOldHangul', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans CJK KR', 'Noto Sans KR', sans-serif !important; }
.bl-title, .bl-head, .bl-end { font-family: 'NadoOldHangul', Gaegu, "Nanum Pen Script", inherit; }

:root {
  --point: #364fc7;
  --point-soft: #edf0ff;
  --k1: #0e9486; --k2: #2f6fed; --k3: #364fc7; --k4: #b7791f; --k5: #c7336a; --k6: #10915a; --k7: #7a4de0;
  /* 공통 코드가 쓰는 과목색 이름(--s1~--s6)도 이 과정 팔레트로 맞춘다 */
  --s1: var(--k2); --s2: var(--k7); --s3: var(--k1); --s4: var(--point); --s5: var(--k5); --s6: var(--k4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --point: #8c9eff; --point-soft: #1c2250;
    --k1: #3cc5b5; --k2: #6b9bff; --k3: #8c9eff; --k4: #e0b93a; --k5: #f06d9d; --k6: #3ccf8e; --k7: #a88bff;
  }
}
:root[data-theme="dark"] {
  --point: #8c9eff; --point-soft: #1c2250;
  --k1: #3cc5b5; --k2: #6b9bff; --k3: #8c9eff; --k4: #e0b93a; --k5: #f06d9d; --k6: #3ccf8e; --k7: #a88bff;
}

/* 포인트 색을 쓰는 자리 */
.brand-tag { color: var(--point); }
.hm-price-tag b { color: var(--point) !important; }
.hm-board h1 .hm-sub1 { display: inline-block; margin-top: 6px; font-size: .62em; letter-spacing: -.01em; color: #b9c6ff; }
.modal-h .kind.theory { color: var(--point); }

/* ===== 교안 표기 표시 (DESIGN 5-1) — 틀린 표기 span.ng(취소선·빨강) · 바른 표기 span.ok ===== */
.rich span.ng, .read-body span.ng, .modal-b span.ng, .qstem span.ng, .opt span.ng {
  color: var(--bad); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--bad) 80%, transparent);
}
.rich span.ok, .read-body span.ok, .modal-b span.ok, .qstem span.ok, .opt span.ok { color: var(--ok); font-weight: 800; }
@media print { span.ng { color: #c00 !important; } span.ok { color: #080 !important; } }
/* 읽기 지문 (build_data 가 문항 앞에 붙인다) */
.qstem .box.psg, .box.psg { font-weight: 500; line-height: 1.85; max-height: 60vh; overflow: auto; }
.box.psg p { margin: 0 0 .6em; }
.box.psg p:last-child { margin-bottom: 0; }

/* 헤더 과목명 — PC 는 "KBS한국어능력시험", 좁은 화면은 "KBS한국어" */
.hb-short { display: none; }
@media (max-width: 720px) { .hb-full { display: none; } .hb-short { display: inline; } }
@media (max-width: 560px) {
  .topbar .m-brand.hb img.hb-logo { height: 56px !important; }
  .hb-txt b { font-size: 17px; }
  .hdr-row .timer-pill { height: 32px; padding: 0 9px; font-size: 12px; gap: 4px; }
  .hdr-row .timer-pill svg { width: 14px; height: 14px; }
}
@media (max-width: 400px) {
  .hdr-row { gap: 4px !important; padding: 0 10px !important; }
  .topbar .m-brand.hb { gap: 7px !important; }
  .topbar .m-brand.hb img.hb-logo { height: 50px !important; }
  .hb-txt b { font-size: 16px; }
  .hdr-row .acct-btn { padding: 0 9px; }
}
@media (max-width: 360px) { .hb-exam { display: none; } .hdr-row .timer-pill { display: none; } }

/* 영역 팻말 7개 — 한 줄(PC), 휴대폰은 두 줄 */
.hm-signs { display: flex; flex-wrap: nowrap; justify-content: space-between; max-width: 1060px; gap: 6px; }
.hm-sign svg { height: 76px; }
.hm-sign:nth-child(5) { --dy: 6px; }
.hm-sign:nth-child(6) { --dy: -10px; }
.hm-sign:nth-child(7) { --dy: 4px; }
@media (max-width: 980px) {
  .hm-signs { flex-wrap: wrap; max-width: 560px; gap: 8px 6px; justify-content: space-around; }
  .hm-sign svg { height: 60px; }
}

/* 칠판 소품: 원고지 + 빨간 펜 교정 표시, 받침대 위 국어사전·빨간 펜 */
.hm-hero .hm-wongoji { position: absolute; right: 22px; bottom: 70px; width: 150px; opacity: .55; pointer-events: none; }
.hm-wg-cell { fill: none; stroke: #f3f6f1; stroke-width: 1.6; }
.hm-wg-row { fill: none; stroke: #f3f6f1; stroke-width: 2.2; }
.hm-hero .scene .hm-wg-t { fill: #f3f6f1; font-family: Gaegu, 'Nanum Pen Script', cursive; font-size: 17px; font-weight: 700; }
.hm-wg-red { fill: none; stroke: #ff7b7b; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-dict { width: 74px; margin-bottom: 1px; flex: none; }
.hm-dict svg, .hm-pen svg { display: block; width: 100%; height: auto; }
.hm-dict-cv { fill: var(--point); stroke: #3a2f28; stroke-width: 2.4; }
.hm-dict-pg { fill: #fffdf4; stroke: #3a2f28; stroke-width: 2; }
.hm-dict-t { fill: #fff; font-size: 11px; font-weight: 900; font-family: 'Noto Sans KR', 'Pretendard', sans-serif; letter-spacing: .02em; }
.hm-pen { width: 58px; margin-bottom: 2px; flex: none; }
.hm-pen-b { fill: #e0555a; stroke: #3a2f28; stroke-width: 2.2; }
.hm-pen-c { fill: #f7f2e6; stroke: #3a2f28; stroke-width: 2; }
@media (max-width: 860px) { .hm-hero .hm-wongoji { width: 118px; bottom: 66px; right: 14px; opacity: .4; } }
@media (max-width: 640px) { .hm-hero .hm-wongoji, .hm-pen { display: none; } .hm-dict { width: 60px; } }

/* 준비 중 화면 (모의고사 · 학습방법 화면 사진이 아직 없을 때 · 콘텐츠 준비 중) */
.mk-ready { text-align: center; padding: 34px 20px 30px; }
.mk-ready .mk-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: var(--point-soft); color: var(--point); }
.mk-ready .mk-ic svg { width: 30px; height: 30px; }
.mk-ready h2 { margin: 0 0 8px; font-size: 20px; }
.mk-ready p { margin: 6px auto; max-width: 560px; color: var(--muted); line-height: 1.7; }
.mk-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.mk-plan { list-style: none; padding: 0; margin: 18px auto 0; max-width: 520px; text-align: left; display: grid; gap: 8px; }
.mk-plan li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.mk-plan li b { color: var(--point); white-space: nowrap; }
.gd-ready { display: grid; place-items: center; min-height: 220px; border: 2px dashed var(--line-2, var(--line)); border-radius: 16px;
  color: var(--muted); font-weight: 700; background: var(--surface); text-align: center; padding: 20px; }
.prep-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 16px; margin: 0 0 16px; border-left: 4px solid var(--point); }
.prep-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
.prep-ic svg { width: 22px; height: 22px; }
.prep-t b { font-size: 16px; }
.prep-t p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.subj-card.is-prep { opacity: .72; }
.subj-card.is-prep .meta span:first-child { color: var(--point); font-weight: 800; }
.hm-cc.is-prep { opacity: .8; }
.lv-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--point); background: var(--point-soft); letter-spacing: 0; }

/* 푸터 상표 고지 */
.sf-notice { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-2); line-height: 1.6; }

/* 수강신청 문구 */
.ac-promo { margin: 6px 0 4px; font-weight: 800; color: var(--point); }
.ac-feenote { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

/* ===== 듣기 재생기 (assets/listen.js) ===== */
.ls { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--point) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--point) 22%, var(--line)); }
.ls-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--point); color: #fff; }
.ls-ic svg { width: 18px; height: 18px; }
.ls-play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--point); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--point) 35%, transparent); }
.ls-play svg { width: 18px; height: 18px; }
.ls-play:disabled { background: var(--line-2, var(--line)); color: var(--muted); box-shadow: none; cursor: default; }
.ls-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ls-top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.ls-top b { font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; white-space: nowrap; }
.ls-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ls-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--point); border-radius: 3px; transition: width .2s linear; }
.ls-note { font-size: 12px; color: var(--muted); line-height: 1.45; }
.ls-again { flex: none; }
.ls.is-wait .ls-note { color: var(--point); font-weight: 700; }
.ls.is-play .ls-play { background: var(--bad); }
@media (max-width: 520px) { .ls { gap: 8px; padding: 9px 10px; } .ls-again span { display: none; } }
.ls-script .ls-sp { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--point); background: var(--surface-2); border-radius: 0 8px 8px 0; line-height: 1.7; }
.ls-script .ls-sp b { display: block; font-size: 12.5px; color: var(--point); margin-bottom: 2px; }
.ls-script .ls-meta { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.ls-script .ls-pron { margin-top: 12px; }

/* ===== 모의고사 (assets/mock.js) — 100문항·120분 실전 / 연습 / 결과 ===== */
.mx-sets { display: grid; gap: 12px; }
.mx-set { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 16px 18px; }
.mx-set h3 { margin: 0 0 4px; font-size: 18px; }
.mx-set .mx-sub { font-size: 13.5px; color: var(--muted); }
.mx-set .mx-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .mx-set { grid-template-columns: 1fr; } .mx-set .mx-btns { justify-content: stretch; } .mx-set .mx-btns .btn { flex: 1 1 auto; justify-content: center; } }
.mx-bar { position: sticky; top: calc(var(--hdr-h) + 6px); z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.mx-clock { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--point); letter-spacing: -.02em; }
.mx-clock.low { color: var(--bad); }
.mx-prog { font-size: 13px; color: var(--muted); font-weight: 700; }
.mx-bar .grow { flex: 1 1 auto; }
.mx-bcast { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border-left: 4px solid var(--point); }
.mx-bcast .mx-bc-t { flex: 1 1 240px; min-width: 0; }
.mx-bcast .mx-bc-t b { display: block; font-size: 15.5px; }
.mx-bcast .mx-bc-t span { font-size: 13px; color: var(--muted); }
.mx-bcast.on { border-left-color: var(--bad); }
.mx-psg { margin: 18px 0 10px; }
.mx-psg-h { font-size: 14px; font-weight: 800; color: var(--point); margin: 0 0 6px; }
.mx-area-h { margin: 26px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--point-soft); color: var(--point); font-weight: 900; font-size: 15px; display: flex; gap: 10px; align-items: baseline; }
.mx-area-h small { font-weight: 700; color: var(--muted); font-size: 12.5px; }
.pq .opts.marked .opt.pick { border-color: var(--point); background: color-mix(in srgb, var(--point) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--point); }
.pq .opts.marked .opt.pick .on { background: var(--point); color: #fff; border-color: var(--point); }
.mx-sheet { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 10px 0 0; }
.mx-sheet a { display: grid; place-items: center; height: 30px; border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--muted);
  border: 1px solid var(--line); background: var(--surface); text-decoration: none; }
.mx-sheet a.done { background: var(--point); border-color: var(--point); color: #fff; }
.mx-sheet a.ok { background: var(--ok-soft, #e6f6ee); border-color: var(--ok); color: var(--ok); }
.mx-sheet a.ng { background: var(--bad-soft, #fdeceb); border-color: var(--bad); color: var(--bad); }
@media (max-width: 520px) { .mx-sheet { grid-template-columns: repeat(10, 1fr); gap: 3px; } .mx-sheet a { height: 26px; font-size: 11px; } }
.mx-res { padding: 22px 20px; }
.mx-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mx-score b { font-size: 52px; font-weight: 900; letter-spacing: -.04em; color: var(--point); line-height: 1; }
.mx-score span { font-size: 16px; color: var(--muted); font-weight: 700; }
.mx-cmp { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.65; }
.mx-cmp small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.mx-cmpbar { position: relative; height: 12px; margin: 10px 0 4px; border-radius: 6px; background: var(--line); }
.mx-cmpbar i { position: absolute; top: -4px; width: 3px; height: 20px; border-radius: 2px; }
.mx-cmpbar i.me { background: var(--point); }
.mx-cmpbar i.avg { background: var(--muted); }
.mx-cmpleg { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.mx-cmpleg em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.mx-cmpleg em::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.mx-cmpleg em.me { color: var(--point); }
.mx-areas { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.mx-areas th, .mx-areas td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.mx-areas th { font-size: 12.5px; color: var(--muted); font-weight: 800; }
.mx-areas td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-areas .mx-ab { position: relative; height: 8px; border-radius: 4px; background: var(--line); min-width: 60px; }
.mx-areas .mx-ab span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c, var(--point)); }
.mx-hist { font-size: 13.5px; }
.mx-noscore { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.ex-h3 { margin: 18px 0 8px; font-size: 16px; }
.ex-h3 small { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.ex-tm { color: var(--text-2); }
.xb-open { color: var(--ok); }
.mx-lstag { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--point); }
.mx-lstag svg { width: 14px; height: 14px; }
.ex-more { margin: 14px 0 4px; }
.ex-more summary { cursor: pointer; font-weight: 800; font-size: 15px; color: var(--point); padding: 8px 0; }
.ex-more summary small { font-size: 12.5px; color: var(--muted); font-weight: 700; }

/* ===== KBS한국어 과정 고유 모양 (2026-09-27 개성조) — 원고지 띠 · 국어 선생님(빨간 펜·원고지) · 자모 조각 · 영역 딱지 ===== */
/* 머리 맨 위 띠: 원고지 칸(쪽빛) + 빨간 교정 부호 두 개(띄어쓰기 ∨ · 붙여쓰기 ⌒) */
.topbar::before {
  height: 7px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7'%3E%3Cpath d='M4.5 1.2L7 5.6L9.5 1.2' fill='none' stroke='%23e03131' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 21% 0 / 14px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7'%3E%3Cpath d='M2.5 5.4Q7 .6 11.5 5.4' fill='none' stroke='%23e03131' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") 67% 0 / 14px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M0 .5H7M0 6.5H7M.5 0V7' stroke='%23364fc7' stroke-width='1' opacity='.75'/%3E%3C/svg%3E") 0 0 / 7px 7px repeat-x,
    #fbf6e6 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar::before { background-color: #1f2547 !important; }
}
:root[data-theme="dark"] .topbar::before { background-color: #1f2547 !important; }
.hm-bow rect, .hm-bow path, .hm-bow circle { fill: #4c63d9; }

/* 선생님: 쪽빛 카디건 · 흰 셔츠 · 원고지 한 장 · 커다란 빨간 펜 */
.hm-hero .hm-arm { stroke: #364fc7; }
.hm-cg-v { fill: #fbfaf6; stroke: #3a2f28; stroke-width: 1.8; stroke-linejoin: round; }
.hm-cg-c { fill: #fff; stroke: #3a2f28; stroke-width: 1.5; stroke-linejoin: round; }
.hm-cg-e { fill: none; stroke: #23359a; stroke-width: 2; stroke-linecap: round; }
.hm-cg-b { fill: #ffd43b; stroke: #3a2f28; stroke-width: 1.1; }
.hm-wgp-p { fill: #fffdf4; stroke: #3a2f28; stroke-width: 2; }
.hm-wgp-g { fill: none; stroke: #7c8fe8; stroke-width: 1.1; }
.hm-wgp-r { fill: none; stroke: #e03131; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-pen-o { stroke: #3a2f28; stroke-width: 12; stroke-linecap: round; }
.hm-pen-bd { stroke: #e0555a; stroke-width: 7.5; stroke-linecap: round; }
.hm-pen-cl { stroke: #f7f2e6; stroke-width: 2.4; stroke-linecap: round; }
.hm-pen-no { stroke: #3a2f28; stroke-width: 7; stroke-linecap: round; }
.hm-pen-ni { stroke: #dfe3ea; stroke-width: 3.2; stroke-linecap: round; }
.hm-pen-tp { fill: #e03131; stroke: #3a2f28; stroke-width: 1.4; }

/* 받침대 소품: 훈민정음 자모 나무 조각 */
.hm-jamo { width: 66px; margin-bottom: 1px; flex: none; }
.hm-jamo svg { display: block; width: 100%; height: auto; }
.hm-jm-b { fill: #edd3a0; stroke: #3a2f28; stroke-width: 2; }
.hm-jm-t { fill: none; stroke: #23359a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hm-jm-d { fill: #e03131; }

/* 영역 팻말 딱지: 헤드폰 · 사전 · 원고지(∨) · 연필 · 전구 · 책 · 천지인 */
.hm-medal > circle { fill: #eef1ff; stroke: #3a2f28; stroke-width: 2.4; }
.hm-mi * { stroke: #3a2f28; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hm-mi .si-w { fill: #fffdf6; }
.hm-mi .si-f { fill: #4c63d9; }
.hm-mi .si-y { fill: #ffd43b; }
.hm-mi .si-p { fill: #ff9fb3; }
.hm-mi .si-k { fill: #e03131; stroke-width: 0; }
.hm-mi .si-ln { fill: none; stroke-width: 1.8; }
.hm-mi .si-ln.w { stroke: #fff; }
.hm-mi .si-ln.g { stroke: #7c8fe8; stroke-width: 1.2; }
.hm-mi .si-ln.r { stroke: #e03131; stroke-width: 2.1; }
.hm-mi .si-ln.b { stroke: #23359a; stroke-width: 2.8; }

@media (max-width: 1100px) { .hm-jamo { width: 58px; } }
@media (max-width: 640px) { .hm-jamo { display: none; } }