/* 한능검 pages /history/… (HD001 hub; HD005 set and answers; HD014: the v3 look of planning/history/design/v3_uiux/, approved 2026-11-09). Loaded after site.css on history
   pages only. The field colours are the ones of generator/home_fields.py TYPES["hist"] (a test compares them); they are scoped on .hp, nothing is redefined in :root.
   The buttons use the site's one navy (--navy-deep); green and red are not used here (right and wrong are words and a badge, never colour alone).
   Nothing is fixed or sticky except the answers page's 「빠른 정답」 box on a wide screen (.hp-quick; the build's check_css allows that one rule). */
.hp { --hp-c: #6B3FA0; --hp-bg: #F1EAF8; --hp-edge: #E6DCF2; --hp-light: #B79BDD; --hp-btn: #D9DCE3; word-break: keep-all; overflow-wrap: break-word; }
.hp a:focus-visible, .hp button:focus-visible, .hp summary:focus-visible, .hp [tabindex]:focus-visible { outline: 3px solid var(--navy-deep); outline-offset: 2px; }

/* the tinted head: breadcrumb, label (and chips), h1, one line, then the page's own block */
.hp-head { background: var(--hp-bg); border-bottom: 1px solid var(--hp-edge); }
.hp-head__in { max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 18px 24px 28px; box-sizing: border-box; }
.hp-head .breadcrumb { margin: 0 0 8px; color: var(--ink-2); }
.hp-head .breadcrumb a, .hp-head .breadcrumb .sep { color: var(--ink-2); }
.hp-head--tabs .hp-head__in { padding-bottom: 0; }
.hp-labels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hp-label { display: inline-block; font-size: 13px; font-weight: 800; color: #fff; background: var(--hp-c); border-radius: 6px; padding: 3px 9px; }
.hp-head h1 { margin: 10px 0 8px; font-size: 32px; line-height: 1.3; font-weight: 900; letter-spacing: -0.6px; color: var(--navy-deep); text-wrap: balance; }
.hp-lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 680px; }
.hp-extra { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); max-width: 680px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chip { font-size: 12px; font-weight: 800; color: var(--hp-c); background: var(--hp-bg); border-radius: 999px; padding: 3px 10px; }
.hp-chip--w { background: #fff; border: 1px solid var(--hp-edge); padding: 2px 10px; }

/* buttons: one navy, one outline */
.hp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14.5px; font-weight: 800;
          border: 1px solid transparent; text-align: center; cursor: pointer; }
.hp-btn:hover { text-decoration: none; }
.hp-btn--navy { background: var(--navy-deep); color: #fff; }
.hp-btn--navy:hover { background: #1B2F66; color: #fff; }
.hp-btn--line { background: #fff; color: var(--ink); border-color: var(--hp-btn); }
.hp-btn--line:hover { border-color: var(--hp-c); color: var(--hp-c); }
.hp-btn--out { background: #fff; color: var(--navy-deep); border-color: var(--hp-btn); }
.hp-btn--out:hover { border-color: var(--hp-c); color: var(--hp-c); }
.hp-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* the hub's head: the 심화/기본 switch and the 다음 시험 card */
.hp-hub .hp-head__in { display: flex; flex-wrap: wrap; gap: 24px 28px; align-items: center; padding-bottom: 30px; }
.hp-head__t { flex: 999 1 520px; min-width: 0; }
.hp-seg { display: inline-flex; margin-top: 18px; background: #fff; border: 1px solid var(--hp-edge); border-radius: 12px; padding: 4px; gap: 4px; }
.hp-seg[hidden], .hp-next[hidden], .hp-lv[hidden] { display: none; }
.hp-seg button { min-width: 96px; min-height: 44px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.hp-seg button[aria-pressed="true"] { background: var(--hp-c); color: #fff; }
.hp-next { flex: 1 1 300px; min-width: 0; background: #fff; border: 1px solid var(--hp-edge); border-radius: 14px; padding: 18px; display: flex; gap: 14px; align-items: center; }
.hp-next__d { flex: 0 0 64px; height: 64px; border-radius: 12px; background: var(--hp-bg); color: var(--hp-c); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.hp-next__d b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hp-next__d b:empty { display: none; }
.hp-next__d small { font-size: 12px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.hp-next__d b:empty + small { font-size: 16px; font-weight: 900; margin-top: 0; }
.hp-next__x { min-width: 0; display: block; }
.hp-next__k { display: block; font-size: 12.5px; font-weight: 800; color: var(--hp-c); }
.hp-next strong { display: block; font-size: 17px; color: var(--navy-deep); margin: 2px 0; }
.hp-next__s { display: block; font-size: 13px; color: var(--ink-2); }

/* sections */
.hp-sec { margin-top: 44px; }
.hp-sec:first-child { margin-top: 0; }
.hp-sec h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.35; font-weight: 900; letter-spacing: -0.4px; color: var(--navy-deep); text-wrap: balance; }
.hp-sub { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; max-width: 640px; }
.hp-h3 { margin: 8px 0 10px; font-size: 17px; line-height: 1.4; color: var(--navy-deep); scroll-margin-top: 16px; }
.hp-box { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 16px 18px; min-width: 0; }
.hp-box .hp-h3 { margin-top: 0; font-size: 15px; color: var(--ink-2); }
.hp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.hp-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 예상문제 cards (the hub; the era pages reuse them) */
.hp-sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }   /* 2 columns from 720px, 3 from 1024px, 1 on phones */
@media (min-width: 1024px) { .hp-sets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-set { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 18px; min-width: 0; }
.hp-set__t { margin: 0; font-size: 17.5px; line-height: 1.4; letter-spacing: -0.3px; }
.hp-set__t a { color: var(--navy-deep); display: inline-flex; align-items: center; min-height: 44px; }
.hp-set__m { margin: 0; font-size: 13px; color: var(--ink-2); }
.hp-set__act { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.hp-set__act .hp-btn { flex: 1 1 0; }
.hp-empty { margin: 0; border: 1px dashed var(--hp-btn); border-radius: 14px; padding: 22px; font-size: 14px; color: var(--ink-2); text-align: center; }
.hp-lv + .hp-lv { margin-top: 14px; }

/* the rounds: grouped by year, two columns on a wide screen */
.hp-rounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.hp-yr { grid-column: 1 / -1; font-size: 13px; font-weight: 800; color: var(--hp-c); padding: 14px 4px 6px; border-bottom: 1px solid var(--hp-edge); }
.hp-rw { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid #F1F2F4; padding: 0 4px; }
.hp-rw b { flex: 0 0 64px; font-size: 16px; color: var(--navy-deep); }
.hp-rw span { flex: 1 1 auto; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hp-ext { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--hp-btn); border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.hp-ext:hover { border-color: var(--hp-c); color: var(--hp-c); text-decoration: none; }

/* 시험 정보: two cards */
.hp-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hp-ic { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.hp-ic h3 { margin: 0; padding: 12px 16px; font-size: 15px; font-weight: 900; color: var(--hp-c); background: var(--hp-bg); }
.hp-ic dl { margin: 0; padding: 6px 16px 10px; display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.hp-ic dt, .hp-ic dd { margin: 0; padding: 9px 0; border-bottom: 1px solid #F1F2F4; font-size: 14px; }
.hp-ic dt { color: var(--ink-2); }
.hp-ic dd { color: var(--ink); font-weight: 600; }
.hp-ic dt:nth-last-of-type(1), .hp-ic dd:last-child { border-bottom: 0; }
.hp-wait { color: var(--muted); font-weight: 400; }

/* FAQ and the source line */
.hp-faq details { border-bottom: 1px solid var(--line); }
.hp-faq > div { border-top: 1px solid var(--line); }
.hp-faq summary { cursor: pointer; list-style: none; padding: 0 44px 0 4px; font-weight: 700; color: var(--navy-deep); position: relative; min-height: 56px; display: flex; align-items: center; font-size: 15.5px; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; position: absolute; right: 8px; font-size: 20px; color: var(--hp-c); }
.hp-faq details[open] summary::after { content: "−"; }
.hp-faq details p { margin: 0; padding: 0 4px 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.hp-cite { margin: 44px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.hp-foot { margin: 44px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.hp-foot a { display: inline-block; padding: 14px 2px; margin: -14px 0; }   /* a touch target of 44 px or more for the two links of the sentence; the negative margin keeps the line spacing */

/* the set page: four number tiles under the head, bars, the sample question, the other sets */
.hp-tiles { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hp-tiles li { background: #fff; border: 1px solid var(--hp-edge); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.hp-tiles strong { display: block; font-size: 20px; line-height: 1.35; font-weight: 900; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
.hp-tiles span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.hp-head .hp-actions { padding-bottom: 26px; }
.hp-head--tabs .hp-actions { padding-bottom: 0; }
.hp-tabs { display: flex; gap: 4px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; }
.hp-tabs a { min-height: 48px; display: inline-flex; align-items: center; padding: 0 18px; font-weight: 700; color: var(--ink-2); white-space: nowrap; border-radius: 10px 10px 0 0; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; }
.hp-tabs a:hover { color: var(--hp-c); text-decoration: none; }
.hp-tabs a[aria-current] { background: #fff; color: var(--navy-deep); border-color: var(--hp-edge); }
.hp-chart { list-style: none; margin: 0; padding: 0; }
.hp-chart__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 32px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.hp-chart__row > span:first-child { min-width: 0; }
.hp-chart__row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy-deep); }
.hp-bar { display: block; height: 12px; background: var(--hp-bg); border-radius: 6px; overflow: hidden; }
.hp-bar i { display: block; height: 100%; background: var(--hp-c); border-radius: 6px; }
.hp-sample { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px; }
.hp-sample__meta { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--hp-c); }
.hp-sample__q { margin: 0; font-size: 17px; font-weight: 700; color: var(--navy-deep); }
.hp-sample .hp-src { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 12px 14px; margin: 12px 0; font-size: 15px; }
.hp-sample .hp-src small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.hp-sample .hp-src p { margin: 0; }
.hp-choices { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 8px; }
.hp-choices li { border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font-size: 15px; }
.hp-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 18px; color: var(--navy-deep); }
.hp-more:hover { border-color: var(--hp-c); text-decoration: none; }
.hp-more small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; font-weight: 400; }
.hp-more b { font-size: 16px; }
.hp-more i { font-style: normal; font-size: 20px; color: var(--hp-c); }
p.hp-more { display: block; min-height: 0; border: 0; padding: 0; background: none; margin: 8px 0 0; }

/* the answers page: the 「빠른 정답」 box beside the explanations */
.hp-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.hp-quick { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 16px; }
.hp-quick h2 { margin: 0; font-size: 16px; }
.hp-quick .hp-sub { font-size: 13px; margin: 2px 0 12px; }
.hp-qa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hp-qa a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-qa a:hover { border-color: var(--hp-c); background: var(--hp-bg); text-decoration: none; }
.hp-qa small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.hp-qa b { font-size: 16px; line-height: 1.2; color: var(--navy-deep); }
.hp-redo { width: 100%; margin-top: 14px; min-height: 48px; }
.hp-expl h2 { margin: 0 0 12px; font-size: 20px; font-weight: 900; color: var(--navy-deep); }
.hp-exp { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px; margin-bottom: 14px; scroll-margin-top: 16px; }
.hp-exp:target { border-color: var(--hp-c); box-shadow: 0 0 0 3px var(--hp-bg); }
.hp-exp__h { display: flex; gap: 12px; align-items: baseline; }
.hp-exp__n { flex: 0 0 auto; font-weight: 900; font-size: 20px; color: var(--hp-c); font-variant-numeric: tabular-nums; }
.hp-exp__stem { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; color: var(--navy-deep); }
.hp-exp__ans { flex: 0 0 auto; align-self: flex-start; font-weight: 800; font-size: 14px; color: var(--hp-c); background: var(--hp-bg); border-radius: 8px; padding: 5px 12px; white-space: nowrap; }
.hp-exp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.hp-pill { display: inline-block; font-size: 12px; font-weight: 700; background: var(--hp-bg); color: var(--hp-c); border-radius: 999px; padding: 2px 10px; }
.hp-exp p { margin: 12px 0 0; color: var(--ink-2); }
.hp-exp p b { color: var(--ink); }
.hp-opts { list-style: none; margin: 12px 0 0; padding: 0; }
.hp-opts li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 10px 8px; border-bottom: 1px solid #F1F2F4; font-size: 14.5px; color: var(--ink-2); }
.hp-opts li:last-child { border-bottom: 0; }
.hp-opts li.hp-ok { background: var(--hp-bg); border-radius: 8px; border-bottom-color: transparent; color: var(--ink); font-weight: 700; }
.hp-opts li > span:first-child { color: var(--hp-c); }
.hp-badge { font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--hp-c); border-radius: 6px; padding: 2px 8px; }
.hp-exp .hp-more { font-size: 13.5px; }
.hp-exp__trap { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--navy); }
.hp-traps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: hp-t; }
.hp-trap { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 16px 18px; min-width: 0; counter-increment: hp-t; color: var(--ink-2); font-size: 15px; scroll-margin-top: 16px; }
.hp-trap:target { border-color: var(--hp-c); box-shadow: 0 0 0 3px var(--hp-bg); }
.hp-trap::before { content: counter(hp-t); display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; background: var(--hp-c); color: #fff; border-radius: 8px; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
@media (min-width: 761px) {
  .hp-quick { position: sticky; top: 16px; }
}

@media (max-width: 760px) {
  .hp-head__in { padding: 14px 16px 22px; }
  .hp-head--tabs .hp-head__in { padding-bottom: 0; }
  .hp-head h1 { font-size: 24px; }
  .hp-lead { font-size: 15px; }
  .hp-seg { display: flex; }
  .hp-seg button { flex: 1 1 0; }
  .hp-sets, .hp-two, .hp-infos, .hp-rounds, .hp-traps { grid-template-columns: minmax(0, 1fr); }
  .hp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-tiles strong { font-size: 17px; }
  .hp-actions .hp-btn { flex: 1 1 100%; }
  .hp-set__act .hp-btn { min-height: 48px; }
  .hp-ic dl { grid-template-columns: 84px minmax(0, 1fr); }
  .hp-chart__row { grid-template-columns: 92px minmax(0, 1fr) 32px; gap: 8px; }
  .hp-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hp-exp { padding: 16px; }
  .hp-exp__h { flex-wrap: wrap; }
  .hp-exp__stem { flex: 1 1 200px; }
  .hp-sec { margin-top: 36px; }
}
@media (max-width: 719px) { .hp-sets { grid-template-columns: 1fr; } }

/* HD015: the era pages /history/<era-slug>/ and the hub's 「시대별로 풀기」 strip */
.hp-eras { display: flex; gap: 6px; margin: 4px 0 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hp-eras::-webkit-scrollbar { display: none; }
.hp-eras a, .hp-eras span { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hp-eras__link { color: var(--ink-2); }
.hp-eras__link:hover { color: var(--hp-c); text-decoration: none; background: #fff; }
.hp-eras__on { background: var(--hp-c); color: #fff; }
.hp-eras__on:hover { color: #fff; text-decoration: none; }
.hp-eras__off { color: var(--muted); font-weight: 500; }
.hp-erarow { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.hp-era { display: flex; flex-direction: column; gap: 2px; min-height: 96px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; color: var(--ink); min-width: 0; }
.hp-era small { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.hp-era b { font-size: 15px; font-weight: 900; color: var(--navy-deep); line-height: 1.3; }
.hp-era span { font-size: 12px; color: var(--ink-2); }
.hp-era em { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 800; }
a.hp-era { border-color: #D9C8EE; }
a.hp-era em { color: var(--hp-c); }
a.hp-era:hover { border-color: var(--hp-c); box-shadow: 0 0 0 3px var(--hp-bg); text-decoration: none; }
.hp-era--off { background: #FAFAFC; }
.hp-era--off b { color: var(--ink-2); }
.hp-era--off em { color: var(--muted); }
.hp-sets--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-sets--two + .hp-empty, .hp-empty + .hp-empty { margin-top: 14px; }
.hp-flow { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.hp-flow::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--hp-edge); }
.hp-flow li { position: relative; display: grid; grid-template-columns: 64px 180px minmax(0, 1fr); gap: 0 16px; align-items: baseline; padding: 10px 0 10px 32px; }
.hp-flow li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hp-c); background: #fff; }
.hp-flow__y { font-weight: 900; color: var(--hp-c); font-variant-numeric: tabular-nums; }
.hp-flow b { color: var(--navy-deep); font-size: 16px; }
.hp-flow__t { color: var(--ink-2); font-size: 14.5px; min-width: 0; }
.hp-pts { display: flex; height: 40px; border-radius: 8px; overflow: hidden; }
.hp-pts span { flex-basis: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; min-width: 0; white-space: nowrap; }
.hp-pts__1 { background: #B79BDD; color: var(--navy-deep); }
.hp-pts__2 { background: #6B3FA0; color: #fff; }
.hp-pts__3 { background: var(--navy-deep); color: #fff; }
.hp-note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.hp-kws { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-kw { background: var(--hp-bg); color: var(--navy-deep); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 14.5px; }
.hp-kw b { color: var(--hp-c); margin-left: 2px; }
.hp-neighbours { margin-top: 44px; }
.hp-nb { min-height: 76px; }
.hp-nb small { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 400; margin: 0 0 2px; }
.hp-nb b { font-size: 17px; }
.hp-nb:last-child { justify-content: flex-end; text-align: right; }
.hp-nb--off { background: var(--bg-2); }
.hp-nb--off b { color: var(--muted); font-weight: 700; }
.hp-eralink { margin: 14px 0 0; }
.hp-eralink a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--navy); }
@media (max-width: 760px) {
  .hp-erarow { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .hp-era { flex: 0 0 112px; }
  .hp-sets--two { grid-template-columns: minmax(0, 1fr); }
  .hp-flow li { grid-template-columns: 52px minmax(0, 1fr); padding-left: 30px; }
  .hp-flow__t { grid-column: 2; }
}

/* 한능검 풀기 page /history/<level>/<set>/solve/ (HD011): one question at a time, built by static/js/history_solve.js. Same tokens. The only thing that sticks is the
   bottom navigation on a phone (the build's check allows `fixed`/`sticky` for `.hs-` selectors only). Text never breaks inside a word (keep-all), long
   unbroken strings still wrap (overflow-wrap). */
.hs-top { padding: 4px 0 0; }
.hs-top h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.35; font-weight: 900; letter-spacing: -0.6px; color: var(--navy-deep); text-wrap: balance; word-break: keep-all; }
.hs-guide { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.hs-noscript { margin: 16px 0 0; border: 1px solid var(--line); background: var(--bg-2); padding: 14px 16px; }
.hs { margin-top: 18px; word-break: keep-all; overflow-wrap: break-word; }
.hs-resume { margin: 0 0 12px; border: 1px solid var(--navy-pale-bd); background: var(--tint); padding: 10px 14px; font-size: 14px; color: var(--navy-deep); }
.hs-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.hs-prog { font-weight: 800; font-size: 17px; color: var(--navy-deep); }
.hs-pts { font-size: 14px; color: var(--ink-2); }
.hs-meter { height: 8px; margin: 8px 0 16px; background: var(--bg-2); border: 1px solid var(--line); }
.hs-meter i { display: block; height: 100%; background: var(--navy); }
.hs-q { border: 1px solid var(--line); background: var(--bg); padding: 20px; }
.hs-stem { margin: 0 0 12px; font-size: 18px; line-height: 1.65; }
.hs-stem:focus { outline: none; }
.hs-stem:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.hs-qn { font-weight: 900; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
.hs-src { border: 1px solid var(--line); background: var(--bg-2); padding: 12px 14px; margin: 0 0 14px; font-size: 15px; }
.hs-src small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.hs-src p { margin: 0 0 4px; }
.hs-src p:last-child { margin-bottom: 0; }
.hs-tlbox { border: 1px solid var(--line); background: var(--bg-2); padding: 12px 14px; margin: 0 0 14px; }
.hs-tlbox small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.hs-tl { list-style: none; margin: 0; padding: 0; }
.hs-tl__e { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-left: 4px solid var(--navy-deep); background: var(--bg); font-size: 15px; }
.hs-tl__e b { font-variant-numeric: tabular-nums; color: var(--navy-deep); }
.hs-tl__g { padding: 3px 10px 3px 12px; border-left: 4px dotted var(--navy); font-weight: 800; font-size: 14px; color: var(--navy); }
.hs-tl__g span { display: inline-block; min-height: 18px; }
.hs-choices { display: grid; gap: 8px; margin-top: 14px; }
.hs-choice { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; text-align: left;
             font: inherit; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.hs-choice:hover { background: var(--bg-2); }
.hs-choice[aria-disabled="true"] { cursor: default; }
.hs-choice[aria-disabled="true"]:hover { background: var(--bg); }
.hs-ctext { min-width: 0; }
.hs-tag { flex: 0 0 auto; font-size: 13px; font-weight: 800; }
.hs-choice--right, .hs-choice--right:hover { border-color: var(--navy-deep); box-shadow: inset 0 0 0 2px var(--navy-deep); background: var(--tint); }
.hs-choice--right .hs-tag { color: var(--navy-deep); }
.hs-choice--wrong { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.hs-choice--wrong .hs-tag { color: var(--red); }
.hs-fb { margin-top: 16px; }
.hs-fb:empty { margin: 0; }
.hs-verdict { margin: 0; padding: 10px 14px; border-left: 4px solid var(--navy-deep); background: var(--tint); font-size: 17px; color: var(--navy-deep); }
.hs-verdict--wrong { border-left-color: var(--red); background: var(--bg-2); color: var(--red); }
.hs-explain, .hs-notes { margin-top: 14px; }
.hs-explain h3, .hs-notes h3 { margin: 0 0 4px; font-size: 15px; color: var(--navy-deep); }
.hs-explain p { margin: 4px 0; color: var(--ink-2); }
.hs-opts { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px dashed var(--line); }
.hs-opts li { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }
.hs-opts li.hs-ok { color: var(--ink); font-weight: 700; }
.hs-opts li.hs-ok em { font-style: normal; color: var(--navy-deep); }
.hs-nav { display: flex; gap: 10px; margin-top: 16px; }
.hs-nav .btn { flex: 1 1 0; height: 52px; padding: 0 16px; font-size: 16px; }
.hs-nav .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.hs-result { border: 1px solid var(--line); background: var(--tint); padding: 24px 20px; text-align: center; }
.hs-score { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 900; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
.hs-score:focus { outline: none; }
.hs-score:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.hs-count { margin: 6px 0 0; color: var(--ink-2); }
.hs-wrong { margin-top: 24px; }
.hs-wrong h3 { margin: 0 0 10px; font-size: 17px; color: var(--navy-deep); }
.hs-wlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hs-wbtn { min-width: 64px; min-height: 48px; padding: 0 14px; font: inherit; font-weight: 700; color: var(--ink); background: var(--bg); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.hs-wbtn:hover { background: var(--bg-2); }
.hs-none { margin: 0; color: var(--ink-2); }
.hs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-bottom: 20px; }   /* the card (.hs, overflow hidden, rounded) must not clip the last button's border */
.hs-act { flex: 1 1 200px; height: 52px; padding: 0 18px; font-size: 16px; }
.hs-choice:focus-visible, .hs-wbtn:focus-visible, .hs-nav .btn:focus-visible, .hs-act:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 760px) {
  .hs-top h1 { font-size: 24px; }
  .hs-q { padding: 16px; }
  .hs-stem { font-size: 17px; }
  .hs-nav { position: sticky; bottom: 0; margin-top: 12px; padding: 10px 0; background: var(--bg); border-top: 1px solid var(--line); }
  .hs-score { font-size: 26px; }
  .hs-act { flex: 1 1 100%; }
}