/* /study/sipseong-meaning 십성 뜻 암기표 */
body.study-body.sm-body .study-main.sm-main { max-width: 1100px; }
body.study-body .sm-title { margin-bottom: 6px; }
.sm-sub { margin: 0 0 16px; font-size: 14px; color: var(--study-muted); line-height: 1.55; }

.sm-intro { margin-bottom: 16px; border: 1px solid var(--study-border); border-radius: 12px; background: var(--study-card-bg); overflow: hidden; }
.sm-intro-head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 14px; border: 0; background: none; color: var(--study-title); font: inherit; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer; }
.sm-intro-head:hover { background: rgba(31, 42, 68, .04); }
.sm-intro-body { padding: 4px 14px 14px; border-top: 1px solid var(--study-border); font-size: 13.5px; line-height: 1.7; color: var(--study-text); }
.sm-intro-body[hidden] { display: none; }
.sm-p { margin: 8px 0 0; }
.sm-sec { margin-top: 14px; }
.sm-sec-title { margin: 0; font-size: 13.5px; color: var(--study-title); }
.sm-tbl-wrap { margin-top: 6px; overflow-x: auto; }
.sm-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.sm-tbl th, .sm-tbl td { border: 1px solid var(--study-border); padding: 5px 8px; text-align: left; vertical-align: top; line-height: 1.55; }
.sm-tbl th { background: rgba(31, 42, 68, .05); font-weight: 700; }

.sm-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.sm-card-btn { display: inline-flex; align-items: center; text-decoration: none; }
a.sm-card-name { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sm-pdf-btn { height: 36px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--study-accent); background: transparent; color: var(--study-accent); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sm-pdf-btn:hover:not(:disabled) { background: rgba(31, 42, 68, .05); }

.sm-group { margin-bottom: 22px; }
.sm-group-head { margin: 0 0 10px; font-family: var(--study-serif); font-size: 18px; font-weight: 600; color: var(--study-title); }
.sm-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sm-card { padding: 14px; border: 1px solid var(--study-border); border-radius: 12px; background: var(--study-card-bg); }
.sm-card-head { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--study-border); font-size: 15px; line-height: 1.5; color: var(--study-title); }
.sm-card-name { font-family: var(--study-serif); font-size: 17px; font-weight: 700; }
.sm-card-hanja { font-size: 11.5px; font-weight: 500; color: var(--study-muted); }
.sm-line { margin: 0 0 7px; font-size: 13.5px; line-height: 1.65; color: var(--study-text); }
.sm-line:last-child { margin-bottom: 0; }
.sm-line-label { display: inline-block; padding: 0 6px; border-radius: 4px; background: rgba(31, 42, 68, .07); font-size: 12px; font-weight: 700; color: var(--study-title); }
.sm-error { color: var(--study-wrong-text); font-size: 13.5px; }

@media (min-width: 900px) {
  .sm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .sm-card { padding: 16px 18px; }
  .sm-line { font-size: 14px; }
}

@media print {
  @page { margin: 12mm; }
  html, body, body.study-body, body.study-body .study-main, .sm-intro, .sm-card, .sm-tbl th { background: #fff !important; }
  body.study-body { color: #111; }
  .study-header, .study-footer, .sm-toolbar { display: none !important; }
  body.study-body.sm-body .study-main.sm-main { max-width: none; padding: 0; }
  body.study-body .sm-title, .sm-card-head, .sm-group-head, .sm-sec-title, .sm-intro-head, .sm-card-name, .sm-line-label { color: #111 !important; }
  .sm-sub, .sm-card-hanja { color: #333 !important; }
  .sm-line, .sm-intro-body, .sm-p, .sm-tbl { color: #111 !important; }
  .sm-intro { border-color: #999; }
  .sm-intro-head { cursor: default; }
  .sm-intro-caret { display: none; }
  .sm-intro-body[hidden] { display: block !important; }
  .sm-intro-body { font-size: 10.5pt; }
  .sm-tbl th, .sm-tbl td { border-color: #999; font-size: 10pt; }
  .sm-line-label { border: 1px solid #999; background: #fff; }
  .sm-group { break-inside: avoid; page-break-inside: avoid; margin-bottom: 14px; }
  .sm-intro { break-after: page; page-break-after: always; }
  .sm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sm-card { padding: 8px 10px; border-color: #999; break-inside: avoid; }
  .sm-card-head { font-size: 11pt; }
  .sm-line { font-size: 9.5pt; line-height: 1.5; margin-bottom: 4px; }
  .sm-group-head { font-size: 13pt; margin-bottom: 6px; }
}