.concept-interactive {
  --bg:#faf6ef;
  --card:#fffdf8;
  --ink:#2a1f30;
  --sub:#6b5d72;
  --line:#e6dccd;
  --plum:#48275c;
  --wine:#831f2e;
  --study:#1a7f78;
  --study-tint:#e2f3f1;
  --hl:#ffd43b;
  --hl-ink:#5a3d00;
  --hidden:#efe7da;
  --hidden-ink:#8a7a6a;
  --sans:"Noto Sans KR",system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  * {
    box-sizing: border-box;
  }
  & {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.65;
    word-break: keep-all;
    overflow-wrap: anywhere;
    padding-block: 20px 64px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .wrap {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 34px;
  }
  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--sub);
  }
  h1 {
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(24px, 4vw, 34px);
    margin: 4px 0 6px;
    color: var(--plum);
    text-wrap: balance;
  }
  .titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .videobtn {
    font-size: 13px;
    font-weight: 800;
    padding: 6px 14px;
    min-height: 36px;
    border-radius: 999px;
    background: var(--plum);
    color: #fff;
    border: 0;
    cursor: pointer;
  }
  .videobtn:focus-visible {
    outline: 3px solid var(--sub);
    outline-offset: 2px;
  }
  .intro {
    margin: 0;
    color: var(--sub);
    max-width: 64ch;
  }
  /* 머리 한 줄(1차 레이아웃 수리 · 결-282) — 절 고르기 · 진행 하나 · ⏱ · ⋯ (ConceptStudyBar.tsx) */
  nav.toc {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 6;
    background: var(--bg);
    min-height: 44px;
    padding-block: 4px;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .meter {
    font-size: 12.5px;
    color: var(--study);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  section.stop {
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-margin-top: 60px;
  }
  h2 {
    font-family: var(--serif);
    font-size: 23px;
    margin: 0;
    color: var(--wine);
    text-wrap: balance;
  }
  h2 small {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--sub);
    margin-left: 8px;
  }
  h3 {
    font-size: 15.5px;
    margin: 0;
    color: var(--plum);
  }
  .def {
    background: var(--card);
    border-left: 4px solid var(--plum);
    border-radius: 0 10px 10px 0;
    padding: 10px 14px;
    max-width: 72ch;
  }
  .def b {
    color: var(--wine);
  }
  .how {
    font-size: 13px;
    color: var(--sub);
    margin: 0;
  }
  .block {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  button {
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  button:focus-visible,
  a:focus-visible {
    outline: 3px solid var(--study);
    outline-offset: 2px;
  }
  .ghost {
    border: 1px solid var(--line);
    background: transparent;
    border-radius: 8px;
    min-height: 34px; /* 2026-10-23: 폰 터치 28px → 34px */
    padding: 3px 10px;
    font-size: 12px;
    color: var(--sub);
  }

  /* 가림 표 */
  .tw {
    overflow-x: auto;
  }
  table.rv {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 520px;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: clip; /* hidden 은 스크롤 상자가 되어 첫 열 고정(sticky)을 막는다 */
  }
  .rv th {
    background: var(--study-soft);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid var(--line);
  }
  .rv td {
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    vertical-align: middle;
  }
  .rv tr:last-child td {
    border-bottom: 0;
  }
  .rv td.lab {
    font-weight: 700;
    color: var(--plum);
    text-align: center;
    white-space: nowrap;
  }
  .rv td.txt {
    text-align: center;
    font-size: 13.5px;
  }
  .rv .g {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
  }
  .rv small {
    display: block;
    font-size: 12px; /* 2026-10-23: 본문 최소 12px */
    color: var(--sub);
  }
  .rv tr.on td {
    background: var(--study-soft);
  }
  /* 가린 칸 — 누르는 것처럼 보이게(흰 바탕 · 와인 실선 · «?» 16/800 · 최소 44×56) · 1차 레이아웃 수리 */
  .cover {
    width: 100%;
    min-height: 44px;
    min-width: 56px;
    border: 1.5px solid var(--wine);
    background: #fff;
    color: var(--wine);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 8px;
    touch-action: manipulation;
    transition:
      transform 0.16s ease,
      background-color 0.16s ease;
  }
  .cover:hover {
    background: var(--study-soft);
  }
  .cover:active {
    transform: scale(0.97);
  }
  .open {
    animation: pop 0.15s ease-out;
  }
  /* 연 칸 — 틴트 + ✓ 를 남긴다(원래 굵은 글자와 가르기) */
  .got1 {
    display: inline-block;
    position: relative;
    max-width: 100%;
    background: var(--study-soft);
    border-radius: 8px;
    padding: 2px 8px 2px 20px;
    animation: pop 0.15s ease-out;
  }
  .got1::before {
    content: "✓";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 900;
    color: var(--wine);
  }

  /* 체계표 + 입 그림 */
  .jamo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
  }
  .mouth {
    position: sticky;
    top: 64px;
    border: 1.5px solid var(--line);
    background: var(--card);
    border-radius: 14px;
    padding: 10px;
  }
  .mouth svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .mouth .mtitle {
    text-align: center;
    font-family: var(--serif);
    font-weight: 900;
    font-size: 15.5px;
    color: var(--plum);
    margin: 2px 0 6px;
  }
  .mouth .cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    font-weight: 700;
    min-height: 3.2em;
    font-size: 13.5px;
  }
  .mouth .cap .big {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 900;
    color: var(--wine);
    line-height: 1.3;
  }
  .mouth .cap .desc {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sub);
    line-height: 1.5;
  }
  .mouth .cap em {
    font-style: normal;
    color: var(--wine);
    font-size: 22px;
    font-weight: 900;
    margin-left: 6px;
  }
  .spot {
    fill: var(--hl);
    opacity: 0;
    transition: opacity 0.25s;
  }
  .spot.on {
    opacity: 1;
  }
  .spot .ring {
    fill: var(--hl);
    opacity: 0.55;
  }
  .spot.on .ring {
    animation: ring 1.2s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .spot .dot {
    fill: var(--wine);
  }
  .cavity {
    fill: #fff;
    opacity: 0.6;
  }
  .face {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .palate,
  .velum,
  .throat {
    fill: none;
    stroke: var(--sub);
    stroke-width: 2.2;
    stroke-linecap: round;
  }
  .velum {
    stroke-dasharray: 4 3;
  }
  .tooth {
    fill: #fff;
    stroke: var(--sub);
    stroke-width: 1.6;
  }
  .lip {
    fill: #f1c7c0;
    stroke: var(--sub);
    stroke-width: 1.4;
  }
  .organ {
    fill: none;
    stroke: var(--sub);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tongue {
    fill: var(--hidden);
    stroke: var(--sub);
    stroke-width: 2;
  }
  .olab {
    font-size: 10.5px;
    font-weight: 700;
    fill: var(--sub);
    font-family: var(--sans);
  }

  /* 시기 띠 */
  .tl {
    position: relative;
    min-width: 760px;
    padding-top: 92px;
  }
  .band {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--hidden);
    border-radius: 6px 0 0 6px;
    position: relative;
    margin-right: 46px;
  }
  .band::after {
    content: "";
    position: absolute;
    right: -46px;
    top: -14px;
    border-left: 46px solid var(--hidden);
    border-top: 38px solid transparent;
    border-bottom: 38px solid transparent;
  }
  .era {
    padding: 14px 6px;
    text-align: center;
    font-weight: 900;
    font-size: 15.5px;
  }
  .era + .era {
    border-left: 2px dotted var(--line);
  }
  .era span {
    display: block;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--sub);
  }
  .gate {
    position: absolute;
    top: 0;
    width: 126px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .gate button {
    border: 2px dashed var(--wine);
    background: var(--card);
    border-radius: 10px;
    padding: 5px 8px;
    min-height: 52px;
    width: 100%;
    font-size: 12.5px;
    line-height: 1.35;
  }
  .gate button.done {
    border-style: solid;
  }
  .gate .q {
    color: var(--wine);
    font-weight: 700;
  }
  .gate b {
    display: block;
    font-size: 14px;
  }
  .gate .arrow {
    color: var(--wine);
    line-height: 1;
  }

  /* 뒤집기 카드 */
  .flips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
  }
  .flip {
    perspective: 900px;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    display: grid;
  }
  .inner {
    display: grid;
    transition: transform 0.45s;
    transform-style: preserve-3d;
  }
  .flip.on .inner {
    transform: rotateY(180deg);
  }
  .face {
    grid-area: 1/1;
    border-radius: 14px;
    padding: 14px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 170px;
  }
  .front {
    background: var(--card);
    border: 1.5px solid var(--study);
  }
  .front .tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--study);
    letter-spacing: 0.04em;
  }
  .front .ask {
    font-family: var(--serif);
    font-size: 18.5px;
    font-weight: 900;
    line-height: 1.4;
  }
  .front .tap {
    margin-top: auto;
    font-size: 12px;
    color: var(--sub);
  }
  .back {
    background: var(--study-soft);
    border: 1.5px solid var(--study);
    transform: rotateY(180deg);
  }
  .back .ans {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.05em;
  }
  .back .ans.s {
    font-size: 14.5px;
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.55;
  }
  .tip {
    margin-top: auto;
    background: var(--hl);
    color: var(--hl-ink);
    border-radius: 9px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 700;
  }
  .tip.warn {
    background: var(--card);
    color: var(--wine);
    border: 1px solid var(--wine);
  }

  /* 단계 사슬 */
  .chain {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .chain .node {
    border: 1.5px solid var(--line);
    background: var(--card);
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    min-width: 110px;
  }
  .chain .node .w {
    font-size: 22px;
    font-weight: 900;
  }
  .chain .node small {
    display: block;
    font-size: 11px;
    color: var(--sub);
  }
  .chain .to {
    color: var(--wine);
    font-weight: 900;
  }

  .check {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .check label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
  }
  .check input {
    margin-top: 5px;
    accent-color: var(--study);
  }
  .src {
    font-size: 11.5px;
    color: var(--sub);
  }
  .old {
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  }

  /* 28자 한눈에 */
  .ov {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
  .ovc {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ovh {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 900;
    color: var(--plum);
  }
  .ovh span {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--sub);
    margin-left: 8px;
  }
  .ovr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 10px;
    align-items: center;
  }
  .ovd {
    font-size: 14px;
    line-height: 1.5;
  }
  .ovs .cover {
    min-height: 44px;
  }
  .ovs.open {
    font-size: 20px;
    font-weight: 900;
    color: var(--wine);
    text-align: center;
  }
  .ovdown {
    color: var(--sub);
    text-align: right;
    padding-right: 52px;
    line-height: 1;
  }
  .ovf {
    margin-top: 4px;
    font-size: 12px;
    color: var(--sub);
    border-top: 1px dashed var(--line);
    padding-top: 8px;
  }
  /* 승부처 */
  .points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
  .point {
    background: var(--card);
    border: 1.5px solid var(--wine);
    border-radius: 16px;
    padding: 16px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .point.open {
    background: var(--study-soft);
    border-color: var(--study);
  }
  .pno {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 900;
    color: var(--wine);
    line-height: 1;
  }
  .pask {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
  }
  .pask em {
    font-style: normal;
    color: var(--wine);
    background: linear-gradient(transparent 60%, color-mix(in srgb, var(--hl) 55%, transparent) 0);
  }
  .pans {
    font-size: 15px;
    line-height: 1.6;
  }
  .pans strong {
    font-size: 20px;
    color: var(--study);
  }
  .ptap {
    font-size: 12px;
    color: var(--sub);
  }
  /* 설명 → 용어 */
  .terms {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .term {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px 150px;
    gap: 10px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
  }
  .tdesc {
    font-size: 14.5px;
  }
  .tarrow {
    color: var(--wine);
    font-weight: 900;
    text-align: center;
  }
  .tslot .cover {
    min-height: 42px;
  }
  .tslot.open {
    font-size: 19px;
    font-weight: 900;
    color: var(--wine);
    text-align: center;
  }
  .tnote {
    grid-column: 1/-1;
    font-size: 12px;
    color: var(--sub);
  }
  .rv.nw td,
  .rv.nw th {
    white-space: nowrap;
  }
  .rv .g {
    white-space: nowrap;
  }
  .rv th .big,
  .big {
    font-size: 16px;
    font-weight: 900;
    color: var(--plum);
  }
  .rv th .cover {
    min-height: 34px;
  }
  .tile {
    touch-action: none;
    cursor: grab;
    user-select: none;
  }
  .tile.lift {
    opacity: 0.35;
  }
  .tile.drag {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.25);
    background: var(--hl);
    color: var(--hl-ink);
    border-color: var(--hl);
  }
  .bin.over {
    background: var(--study-soft);
    border-style: solid;
  }
  .chain .node .q {
    color: var(--hidden-ink);
  }
  @media (max-width: 560px) {
    .term {
      grid-template-columns: 1fr;
    }
    .tarrow {
      display: none;
    }
    .ovr {
      grid-template-columns: 1fr;
    }
    .ovdown {
      text-align: center;
      padding: 0;
    }
  }
  .lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .lines li {
    font-size: 14.5px;
    line-height: 1.45;
    padding: 6px 10px;
    background: var(--card);
    border-radius: 8px;
  }
  .lines strong {
    color: var(--wine);
    font-size: 16px;
  }
  .front .ask em {
    font-style: normal;
    color: var(--wine);
    background: linear-gradient(transparent 60%, color-mix(in srgb, var(--hl) 55%, transparent) 0);
  }
  .chain button.node {
    cursor: pointer;
    border-style: dashed;
    border-color: var(--hidden-ink);
    background: var(--hidden);
    font: inherit;
    color: inherit;
  }
  .chain button.node.open {
    border-style: solid;
    background: var(--card);
  }
  .auditbad {
    background: var(--wine);
    color: #fff;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
  }
  .wrap > *,
  .stop,
  .block,
  .stop > * {
    min-width: 0;
    max-width: 100%;
  }
  .front .ask em,
  .lines strong {
    white-space: nowrap;
  }
  .lines .to2 {
    display: block;
    padding-left: 2px;
    margin-top: 2px;
  }
  /* 가르기 게임 */
  .sorts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
  }
  .sort {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sort.done {
    border-color: var(--study);
  }
  .sort .crit {
    font-weight: 700;
    font-size: 14px;
  }
  .sort .crit span {
    color: var(--study);
  }
  .pool {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 44px;
  }
  .tile {
    border: 1.5px solid var(--plum);
    background: var(--bg);
    border-radius: 9px;
    min-width: 44px;
    height: 42px;
    padding: 0 10px;
    font-size: 19px;
    font-weight: 900;
  }
  .tile.sel {
    background: var(--hl);
    color: var(--hl-ink);
    border-color: var(--hl);
  }
  .tile.ok {
    border-color: var(--study);
    color: var(--study);
    cursor: default;
  }
  .tile.bad {
    animation: shake 0.3s;
  }

  .bins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .bin {
    border: 1.5px dashed var(--study);
    border-radius: 10px;
    padding: 8px;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    background: transparent;
  }
  .bin b {
    font-size: 13px;
    color: var(--study);
  }
  .bin .got {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .msg {
    font-size: 12.5px;
    min-height: 1.4em;
    color: var(--wine);
  }
  .msg.good {
    color: var(--study);
  }
  .allbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .tile.bad {
      animation: none;
    }
  }

  @media (max-width: 760px) {
    .jamo {
      grid-template-columns: 1fr;
    }
    .mouth {
      position: static;
      order: -1;
      max-width: 320px;
      margin: 0 auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .inner,
    .spot {
      transition: none;
    }
    .open {
      animation: none;
    }
  }
}

@keyframes ring {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@keyframes pop {
  from {
    transform: scale(0.92);
    opacity: 0.3;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* Body portal: independent of dialog transforms and inherited theme tokens. */
.ci-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.12);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans KR", system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.65;
  border: 1.5px solid #ffd43b;
  border-radius: 9px;
  min-width: 44px;
  height: 42px;
  padding: 0 10px;
  background: #ffd43b;
  color: #5a3d00;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.25);
}
.ci-drag-ghost .old {
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.concept-interactive {
.clozes{display:flex;flex-direction:column;gap:8px}
.cz{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.cz .pno{font-size:24px}
.cztext{font-size:15.5px;line-height:2}
.czslot{display:inline-block;min-width:120px;vertical-align:middle;margin:0 4px}
.czslot .cover{min-height:34px}
.czslot.open{font-weight:900;color:var(--wine);min-width:0}
&[data-unit="hist_mk2_phon"] .bins,&[data-unit="hist_mk3_noun_josa"] .bins{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))!important}
.verse2{font-size:17px;line-height:1.9;font-weight:700;max-width:none}
/* 문학 개념어 «시의 소통구조» 도식(교재 9쪽) — 시제품 docs/mockup/개념공부_인터랙티브_시의소통구조_시제품_20261023.html 과 같은 값 */
.dgw{overflow-x:auto}
.dg{min-width:760px;display:flex;flex-direction:column;gap:10px;padding:6px 2px}
.dg-top{display:flex;justify-content:center}
.dg-label{font-family:var(--serif);font-weight:900;color:var(--wine);font-size:17px;min-width:160px;text-align:center}
.dg-label.sm{font-size:13px;font-family:var(--sans);font-weight:800;color:var(--plum);min-width:180px}
.dg-r3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dg-box{background:var(--card);border:1.5px solid #ecc3d2;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.dg-h{background:#f9e3ec;font-weight:800;text-align:center;padding:7px 8px;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;font-size:14px}
.dg-b{padding:8px 10px;display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;font-size:13px}
.dg-ex{color:#b84c70;font-weight:600} /* 2026-10-23: #c2557a 흰 바탕 4.31:1 → 4.88:1 */
.dg-ex::before{content:"예";display:inline-block;background:#ecc3d2;color:#fff;border-radius:4px;font-size:11px;padding:0 5px;margin-right:6px}
.dg-s{min-width:110px;display:flex;justify-content:center}
.dg-s .cover{width:100%}
.dg-band{background:#fbeef3;border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 22%}
.dg-pair{display:flex;align-items:center;gap:0;width:100%;justify-content:center}
.dg-node{background:var(--card);border:1.5px solid #ecc3d2;border-radius:10px;padding:6px 26px;font-weight:800}
.dg-line{flex:0 0 90px;height:2px;background:#ecc3d2}
.dg-r2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.dg-col{display:flex;flex-direction:column;gap:8px}
.dg-cap{text-align:center;font-weight:900;color:var(--plum)}
.dg-crit{display:flex;flex-direction:column;gap:6px}
.dg-k{text-align:center;font-size:12.5px;font-weight:800;color:var(--sub)}
.dg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dg-two.wide{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.dg-stack{display:flex;flex-direction:column;gap:8px}
.dg-box.mid .dg-h{background:#fbeef3}
.dg small{font-size:12px}
/* 폰(≤560px): 760px 도식을 숨은 가로 스크롤로 두지 않고 칸을 한 줄로 쌓는다(2026-10-23 실측 — 390px 에서 오른쪽 칸이 잘려 보였다) */
@media (max-width:767.98px){
  .dg{min-width:0}
  .dg-r3,.dg-r2,.dg-two,.dg-two.wide{grid-template-columns:minmax(0,1fr)}
  .dg-band{margin:0}
  .dg-line{flex-basis:40px}
  .dg-label,.dg-label.sm{min-width:0}
}
.rule{background:var(--card);border:1.5px solid var(--study);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;max-width:72ch}
.rule .rtag{font-size:12px;font-weight:700;color:var(--study);letter-spacing:.04em}
.rule .lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:15px}
.rule .lines strong{color:var(--wine)}
.rule .to2{display:block;padding-left:1em}
.rule .tip{align-self:flex-start}
.picks{display:flex;flex-direction:column;gap:6px}
.pk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:8px 12px}
.pk .q{font-size:15.5px;font-weight:700}
.pk .opts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pk .opts button{border:1.5px solid var(--plum);background:var(--bg);border-radius:9px;padding:4px 14px;min-height:38px;min-width:44px;font-weight:700}
.pk .opts button:disabled{cursor:default}
.pk .opts button.right{background:var(--study);border-color:var(--study);color:#fff}
.pk .opts button.wrongpick{color:var(--wine);border-color:var(--wine);text-decoration:line-through}
.pk .why{grid-column:1/-1;font-size:13.5px;color:var(--sub)}
.pk .why:empty{display:none}
.pk.ok{border-color:var(--study)} .pk.no{border-color:var(--wine)}
.pk.ok .why{color:var(--study)} .pk.no .why{color:var(--wine)}
.pick-meter{color:var(--wine)}

@media (max-width:560px){.pk{grid-template-columns:1fr}.pk .opts{justify-content:flex-start}}
}

.concept-interactive {
  --box:#2d3fb5;
  --head:#f6e4e6;
  --memo:#c2667a;
  /* 2026-10-23 결-280 «국어=국어색 · 영어=틸» — 위 :root 묶음은 시제품 팔레트 그대로 두고(conceptInteractive.test 가 대조) 여기서 앱 토큰으로 덮는다.
     --study = 앱 --study-ac(국어 기본 --wine · .theme-en 래퍼 = --teal-ac). 안쪽 --study-tint 는 바깥 토큰을 가리므로 연한 배경은 --study-soft 로 쓴다.
     --hidden-ink: #8a7a6a 는 --hidden 위 3.37:1(AA 미달) → #6f6152 = 4.88:1. */
  --study:var(--study-ac,#1a7f78);
  --study-soft:var(--wine-tint,#f9ebec);
  --hidden-ink:#6f6152;
  /* 2026-10-29 결-298 — 원장 «영어 틸색으로 바꾸자»: 영어 화면(.theme-en 래퍼 · 품어줘 개념 등)에서는 제목·가린 칸·표 머리의
     버건디(--wine)·플럼(--plum)·연분홍 머리(--head)까지 틸로 바꾼다. 국어(래퍼 없음·.theme-ko)는 그대로. */
  &:where(.theme-en *) {
    --study-soft:var(--teal-tint,#eaf6f0);
    --wine:var(--teal-dp,#146b5f);
    --plum:var(--teal-dp,#146b5f);
    --head:var(--teal-tint,#e3f3f0);
  }
  &.text-cards {
    .wrap {max-width:1100px;gap:26px}
    .intro {max-width:none}
    nav.toc {gap:10px}
    nav.toc .meter {margin-left:0;margin-right:auto}
    h2 {font-family:var(--serif);font-size:21px;margin:0;color:var(--wine)}
    main {display:flex;flex-direction:column;gap:22px}
    .text-preface {display:flex;flex-direction:column;gap:14px}
.ttl{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ttl .th{background:var(--head);text-align:center;font-size:20px;font-weight:700;padding:10px;font-family:var(--serif)}
.ttl table{width:100%;border-collapse:collapse}
.ttl td{border-top:1px solid var(--line);padding:8px 12px;font-size:14px;vertical-align:middle}
.ttl td.k{width:200px;text-align:center;font-weight:700;color:var(--plum);background:color-mix(in srgb,var(--head) 50%,transparent)}
.ttl .md{text-align:center;color:var(--wine);font-weight:700;padding:10px;border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.card .o{background:var(--head);text-align:center;font-size:20px;font-weight:700;padding:8px;font-family:var(--serif)}
.card .a{text-align:center;font-size:17px;font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line);min-height:38px}
.uw{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top}
.uw .um{font-size:13px;line-height:1.3;color:var(--memo);font-weight:500}
.card .memo{display:block;font-size:12px;color:var(--memo);font-weight:500}
.card .n{padding:8px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:14px}
.card ul li{padding-left:.9em;text-indent:-.9em}
.card ul li::before{content:"• ";color:var(--sub)}
.card ul li.cont::before{content:"";}
.card strong{color:var(--wine)}
.sbox{border:1.5px solid color-mix(in srgb,var(--memo) 55%,transparent);border-radius:10px;padding:6px 10px;font-size:13.5px}
.sbox b.t{display:block;color:var(--memo);font-size:13px;margin-bottom:2px}
.sbox div{line-height:1.7}
.card .m{text-align:center;color:var(--wine);font-weight:700;padding:8px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--head) 40%,transparent)}
.ref{background:var(--card);border:1.5px solid color-mix(in srgb,var(--memo) 55%,transparent);border-radius:14px;padding:10px 14px}
.ref b.t{color:var(--memo);display:block;margin-bottom:4px}
.ref div{line-height:1.9}
.bx{display:inline-block;vertical-align:middle;min-height:26px;border:1.5px dashed var(--box);background:var(--hidden);color:var(--hidden-ink);border-radius:5px;font-size:12px;line-height:1;padding:3px 6px;margin:1px 2px;text-indent:0}
.bx:hover{background:var(--study-soft);color:var(--study)}
.ans{display:inline-block;border:1.5px solid var(--box);border-radius:4px;padding:0 5px;margin:1px 2px;font-weight:700;color:var(--box);text-indent:0;animation:pop .25s ease}

.verse{background:color-mix(in srgb,var(--head) 45%,var(--card));border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.verse .vo{font-family:var(--serif);font-size:17px;font-weight:700;margin-top:6px}
.verse .vt{font-size:13.5px;color:var(--sub)}
.red{color:var(--wine)}
.card ul li.red{color:var(--wine)}
.ttail{font-size:13.5px}
.rtab{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px}
.rtab td{border:1px solid var(--line);padding:6px 10px;text-align:center}
.rtab td.k{background:color-mix(in srgb,var(--head) 50%,transparent);font-weight:700;color:var(--plum)}
.mempty{min-height:38px}
@media (max-width:560px){.ttl td.k{width:110px}.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ans{animation:none}}
  }
}

/* 회독(원장 10/23) — 지난 회독에 안 본 칸(점선, 다음 회독까지) · 기준 문구는 ⋯ › «회독이란?»(결-282) */
.concept-interactive .missed{outline:2.5px dashed var(--wine);outline-offset:2px}
/* 선생님 «학생 상세»(review) — 칸마다 ✓ 이번 회독에 엶 · ○ 아직 안 엶 · ↻n 연 횟수. 색만이 아니라 기호로도 가른다. */
.concept-interactive.review [data-rv]{position:relative}
.concept-interactive.review [data-rv]::after{content:attr(data-badge);position:absolute;top:-9px;right:-6px;z-index:3;font:800 10.5px/16px var(--sans);padding:0 5px;border-radius:999px;white-space:nowrap;pointer-events:none}
.concept-interactive.review .rvwrap[data-rv]::after,.concept-interactive.review .ans[data-rv]::after{position:static;display:inline-block;margin-left:3px;vertical-align:super}
.concept-interactive.review [data-rv="seen"]::after{background:var(--study-soft);color:var(--study);border:1px solid var(--study)}
.concept-interactive.review [data-rv="unseen"]{outline:2px dashed var(--wine);outline-offset:2px;border-radius:6px}
.concept-interactive.review [data-rv="unseen"]::after{background:var(--wine);color:#fff}
.concept-interactive.review.only-unseen [data-rv="seen"]{opacity:.28}

/* ───────── 1차 레이아웃 수리(원장 결-282 · 2026-10-23) ─────────
   머리 한 줄(ConceptStudyBar) · 가린 칸 어포던스 · 절 끝 한 줄 · 폰 넓은 자료(세로 시기 띠 · 줄→카드 표) · 회독 완료 시트.
   «<768px» = max-width:767.98px. */
.concept-interactive {
  /* 집중 틀 안 — 틀이 이미 16px 여백을 준다(이중 여백 32px → 16px) · 머리 줄은 스크롤 상자 맨 위에 붙는다 */
  &.in-focus { padding-inline: 0; padding-top: 0; }
  &.in-focus nav.toc { top: -16px; }

  /* 절 고르기 */
  .secpick { position: relative; flex: 0 1 auto; min-width: 0; max-width: 44%; }
  .secpick summary {
    list-style: none; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer;
    font-size: 13px; font-weight: 800; color: var(--plum); white-space: nowrap;
  }
  .secpick summary::-webkit-details-marker { display: none; }
  .secpick .secname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .secpick .secof { font-size: 12px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }
  .secpick .caret { font-size: 11px; color: var(--sub); }
  .secmenu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 8; min-width: 230px; max-width: min(340px, calc(100vw - 32px));
    max-height: 60vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 10px 28px rgba(42, 31, 48, 0.16); padding: 6px; display: flex; flex-direction: column;
  }
  .secmenu a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 10px;
    border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700;
  }
  .secmenu a:hover { background: var(--study-soft); }
  .secmenu a[aria-current] { background: var(--study-soft); color: var(--wine); }
  .secmenu .sc { font-size: 12px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }

  /* 진행 — 숫자 하나 */
  .prog { flex: 1 1 auto; min-width: 72px; display: flex; flex-direction: column; gap: 4px; }
  .ptop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
  .plabel { font-weight: 800; color: var(--plum); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pcount { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
  .pbar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
  .pbar i { display: block; height: 100%; border-radius: inherit; background: var(--wine); transition: width 0.2s ease-out; }
  .prog.off .plabel { color: var(--sub); white-space: normal; }
  .prog.off .pbar i { background: var(--sub); opacity: 0.55; }
  .prog.done .plabel { color: var(--wine); }

  .clock {
    flex: none; font-size: 12px; font-weight: 700; color: var(--sub); white-space: nowrap; padding: 4px 8px;
    border-radius: 999px; background: color-mix(in srgb, var(--line) 55%, transparent);
  }
  .more { position: relative; flex: none; }
  .morebtn {
    width: 44px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
    font-size: 20px; font-weight: 900; line-height: 1; color: var(--plum);
  }
  .moremenu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; width: min(300px, calc(100vw - 32px));
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(42, 31, 48, 0.16);
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
  }
  .moremenu > button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; min-height: 44px; padding: 8px 12px;
    border: 0; background: transparent; border-radius: 8px; font-size: 14px; font-weight: 800; color: var(--ink);
  }
  .moremenu > button:hover { background: var(--study-soft); }
  .moremenu small { font-size: 12px; font-weight: 500; color: var(--sub); }
  .moremenu .help { padding: 2px 12px 8px; font-size: 13px; line-height: 1.6; color: var(--sub); }
  .moremenu .help p { margin: 0 0 6px; }
  .moremenu .help .now { color: var(--wine); font-weight: 700; }
  .clockdetail { border-top: 1px solid var(--line); margin-top: 4px; padding: 8px 12px 4px; font-size: 12.5px; color: var(--sub); }

  /* 첫 방문 안내(기기당 한 번) */
  .coach {
    margin: 8px 0 14px; display: flex; align-items: center; gap: 10px;
    background: var(--plum); color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5;
    box-shadow: 0 8px 24px rgba(42, 31, 48, 0.22);
  }
  .coach span { flex: 1; }
  .coach button { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 800; }

  /* 절 끝 한 줄 */
  .secend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
  .secmeter { font-size: 12.5px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }
  .secend .ghost { min-height: 40px; font-size: 13px; }
  .secend .nextsec { margin-left: auto; color: var(--plum); font-weight: 800; border-color: var(--plum); }

  /* 가린 칸 문구 «눌러서 확인» — 같은 행동, 같은 모양 */
  .front .tap, .ptap { font-size: 12.5px; font-weight: 700; color: var(--wine); }
  .chain button.node { border: 1.5px solid var(--wine); background: #fff; transition: transform 0.16s ease; }
  .chain button.node .q { color: var(--wine); font-size: 22px; font-weight: 900; }
  .chain button.node small { color: var(--wine); font-weight: 700; }
  .chain button.node.open { border-color: var(--wine); background: var(--study-soft); }
  .chain button.node.open small { color: var(--sub); font-weight: 400; }
  .chain button.node:active, .point:active, .tlv-gate button:active, .gate button:active { transform: scale(0.97); }
  .point { transition: transform 0.16s ease; }
  .gate button, .tlv-gate button { border: 1.5px solid var(--wine); background: #fff; min-height: 52px; font-size: 12.5px; transition: transform 0.16s ease; }
  .gate .q, .tlv-gate .q { font-size: 16px; font-weight: 800; color: var(--wine); }
  .gate button.done, .tlv-gate button.done { background: var(--study-soft); }
  .tlv-gate button { width: 100%; border-radius: 10px; padding: 6px 10px; line-height: 1.35; color: var(--wine); font-weight: 700; }
  .tlv-gate button.done { color: var(--ink); font-weight: 400; }
  .tlv-gate button b { display: block; font-size: 14px; }
  /* 글 카드 빈칸 — text-cards 묶음(.concept-interactive.text-cards .bx)보다 세게 */
  &.text-cards .bx { border: 1.5px solid var(--wine); background: #fff; color: var(--wine); font-size: 15px; font-weight: 800; min-height: 34px; border-radius: 6px; transition: transform 0.16s ease; }
  &.text-cards .bx:hover { background: var(--study-soft); color: var(--wine); }
  &.text-cards .bx:active { transform: scale(0.97); }

  /* 시기 띠 — 폰 = 세로(시대 · 경계 사건 · 시대 …) */
  .tlv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .tlv-era { background: var(--hidden); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
  .tlv-era b { font-size: 15.5px; font-weight: 900; }
  .tlv-era span { font-size: 12.5px; color: var(--sub); line-height: 1.45; }
  .tlv-gate { position: relative; display: flex; flex-direction: column; padding-left: 22px; }
  .tlv-gate::before { content: "↓"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); color: var(--wine); font-weight: 900; }
  .tlv-gate .arrow { display: none; }

  /* 넓은 자료 가로 스크롤 — 가장자리 그림자 + «옆으로 밀기 →»(밀면 사라짐) */
  .hs { position: relative; min-width: 0; }
  .hs.over:not(.end)::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
    background: linear-gradient(to left, rgba(42, 31, 48, 0.18), rgba(42, 31, 48, 0)); border-radius: 0 12px 12px 0;
  }
  .hs-hint {
    position: absolute; right: 10px; top: -11px; z-index: 2; pointer-events: none; background: var(--plum); color: #fff;
    font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; box-shadow: 0 2px 8px rgba(42, 31, 48, 0.22);
  }
  .tw .rv :is(td, th):first-child { position: sticky; left: 0; z-index: 1; }
  .tw .rv td:first-child { background: var(--card); }
  .tw .rv tr.on td:first-child { background: var(--study-soft); }

  /* 회독 완료 시트 */
  .donewrap { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
  .doneback { position: absolute; inset: 0; background: rgba(42, 31, 48, 0.32); }
  .donesheet {
    position: relative; width: min(480px, 100%); background: var(--card); border-radius: 18px 18px 0 0;
    padding: 20px 20px max(20px, env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(42, 31, 48, 0.2);
    display: flex; flex-direction: column; gap: 6px; animation: ci-sheetup 0.22s ease-out;
  }
  .dtitle { font-size: 20px; font-weight: 900; color: var(--plum); }
  .dline { font-size: 14.5px; }
  .dline b { color: var(--wine); }
  .dline.sub { font-size: 12.5px; color: var(--sub); }
  .dacts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .dacts button { min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 15px; font-weight: 800; }
  .dacts .primary { background: var(--wine); border-color: var(--wine); color: #fff; }
  .dacts .quiet { border: 0; min-height: 40px; color: var(--sub); font-weight: 700; }

  @media (min-width: 768px) {
    /* 시기 띠 — 가로(위 줄 = 경계 사건, 아래 줄 = 시대) */
    .tlv { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px 0; min-width: 680px; }
    .tlv-era { grid-row: 2; border-radius: 0; align-items: center; text-align: center; padding: 14px 6px; }
    .tlv li:first-child .tlv-era { border-radius: 10px 0 0 10px; }
    .tlv li:last-child .tlv-era { border-radius: 0 10px 10px 0; }
    .tlv li + li .tlv-era { border-left: 2px dotted var(--line); }
    .tlv-gate { grid-row: 1; padding: 0 6px; align-items: center; }
    .tlv-gate::before { content: none; }
    .tlv-gate .arrow { display: block; color: var(--wine); line-height: 1; margin-top: 2px; }
    .donewrap { align-items: center; }
    .donesheet { border-radius: 18px; }
  }
  @media (max-width: 767.98px) {
    .secpick { max-width: 36%; }
    .prog.done .pcount, .prog.off .pcount { display: none; }
    .tw:not(.sticky1) table.rv { min-width: 0; }
    /* 표 — 칸 4개 이상은 줄 → 카드(칸마다 머리 이름표) */
    .tw.cardy { overflow: visible; }
    .cardy table.rv { display: block; min-width: 0; border: 0; background: none; border-radius: 0; overflow: visible; }
    .cardy .rv thead { display: none; }
    .cardy .rv tbody { display: flex; flex-direction: column; gap: 10px; }
    .cardy .rv tr { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
    .cardy .rv tr td {
      display: grid; grid-template-columns: minmax(76px, 32%) minmax(0, 1fr); gap: 4px 10px; align-items: center;
      text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); position: static; background: none;
    }
    .cardy .rv tr td:last-child { border-bottom: 0; }
    .cardy .rv tr td::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--sub); line-height: 1.35; }
    .cardy .rv tr td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
    .cardy .rv tr td[data-label=""]::before { display: none; }
    .cardy .rv tr td:first-child { background: var(--study-soft); font-weight: 800; }
    .cardy .rv td.lab { white-space: normal; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cover, &.text-cards .bx, .point, .chain button.node, .gate button, .tlv-gate button, .pbar i { transition: none; }
    .got1, .donesheet { animation: none; }
  }
}
@keyframes ci-sheetup {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* 집중 틀 띠 오른쪽 자리(ConceptFocusFrame) — 단원 영상 단추를 띠 색에 맞춘다 */
.ci-focus-slot .videobtn {
  font-size: 12.5px; font-weight: 800; padding: 6px 12px; min-height: 36px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer;
}