:root {
--mk-ink: #111111;
--mk-sub: #4a5a74;
--mk-line: rgba(15, 23, 42, 0.12);
--mk-blue: #0a84ff;
--mk-blue-ink: #0a4fa8;
--mk-card-bg: #fff;
--mk-card-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.mk-lead { color: var(--mk-ink); margin: 2px 0 12px; font-size: 15px; line-height: 1.55; }
.mk-body { color: var(--mk-ink); margin: 4px 0 10px; font-size: 15px; line-height: 1.6; }
.mk-subhead { color: var(--mk-ink); margin: 16px 0 6px; font-size: 16px; font-weight: 800; }
.mk-subhead__note { font-weight: 600; color: var(--mk-sub); font-size: 14px; }
.mk-group__title.mk-group__title,
.mk-blocktitle.mk-blocktitle {
display: block;
margin: 0 0 10px;
color: var(--mk-ink);
font-size: 18px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.01em;
}
.mk-subhead.mk-subhead {
color: var(--mk-ink);
font-size: 16.5px;
font-weight: 800;
line-height: 1.4;
}
.mk-group__note.mk-group__note,
.mk-subhead__note.mk-subhead__note {
font-size: 14px;
font-weight: 600;
color: var(--mk-sub);
letter-spacing: 0;
}
.mk-group__title .cav-term,
.mk-blocktitle .cav-term,
.mk-subhead .cav-term,
.mk-fig__title .cav-term,
.mk-figslide__title .cav-term {
color: var(--mk-ink);
font-weight: 800;
border-bottom-color: rgba(17, 17, 17, 0.5);
}
.mk-linkbtn {
display: inline-flex; align-items: center; gap: 4px;
align-self: flex-start; width: auto; max-width: max-content;
padding: 7px 14px; border-radius: 999px;
border: 1px solid rgba(10, 132, 255, 0.3); background: rgba(10, 132, 255, 0.08);
color: var(--mk-blue-ink); font-size: 13px; font-weight: 700; cursor: pointer;
transition: background .15s, border-color .15s;
}
@media (hover: hover) and (pointer: fine) {
.mk-linkbtn:hover { background: rgba(10, 132, 255, 0.15); border-color: rgba(10, 132, 255, 0.45); }
}
.mk-linkbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.mk-linkbtn[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
.mk-linkbtn[disabled]:hover { background: rgba(10, 132, 255, 0.08); border-color: rgba(10, 132, 255, 0.3); }
}
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.mk-chip {
display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
border: 1px solid rgba(10, 132, 255, 0.24); background: rgba(10, 132, 255, 0.07);
color: var(--mk-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.mk-symptoms { list-style: none; margin: 4px 0 0; padding: 0; }
.mk-symptoms > li { position: relative; padding-left: 26px; color: var(--mk-ink); font-size: 15px; line-height: 1.45; margin-bottom: 5px; }
.mk-symptoms > li > .mk-emoji { position: absolute; left: 0; top: 0; font-size: 15.5px; line-height: 1.45; }
.mk-symptoms--titled > li > strong:first-of-type { font-size: 15px; font-weight: 800; }
.mk-symptoms.mk-symptoms--2col { display: block; columns: 2; column-gap: 34px; max-width: 620px; }
.mk-symptoms--2col > li { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 640px) { .mk-symptoms.mk-symptoms--2col { columns: 1; max-width: none; } }
.mk-symptoms + .mk-subhead { margin-top: 20px; padding-top: 15px; position: relative; }
.mk-symptoms + .mk-subhead::before {
content: ""; position: absolute; top: 0; left: 0;
width: 108px; height: 1px; background: rgba(15, 23, 42, 0.14);
}
.mk-titled-list > li > strong:first-of-type,
.mk-symptoms > li > strong:first-of-type { font-size: 14.5px; }
.mk-titled-list > li { margin-bottom: 6px; line-height: 1.5; }
.mk-titled-list > li > strong:first-of-type .cav-term,
.mk-titled-list > li > .cav-term:first-of-type,
.mk-symptoms > li > strong:first-of-type .cav-term,
.mk-symptoms > li > .cav-term:first-of-type {
color: var(--mk-ink); font-weight: 800;
border-bottom-color: rgba(17, 17, 17, 0.5);
}
.cav-term.cav-term--ink { color: var(--mk-ink); border-bottom-color: rgba(17, 17, 17, 0.5); }
.mk-pill-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mk-pill-list > li { color: var(--mk-ink); font-size: 15px; line-height: 1.75; margin-bottom: 10px; }
.mk-pill-list > li > .cav-term.mk-pill:first-child,
.mk-pill-list > li > .mk-pill:first-child { margin-right: 4px; }
.mk-card {
margin: 4px 0 0; padding: 16px 18px; border-radius: 16px;
border: 1px solid rgba(10, 132, 255, 0.16);
background: linear-gradient(180deg, rgba(238, 245, 255, 0.55), rgba(255, 255, 255, 0.96));
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
overflow: visible;
}
.mk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-grid--vdivide { position: relative; }
.mk-grid--vdivide::before {
content: ""; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 1px; height: 64px; background: rgba(15, 23, 42, 0.16);
pointer-events: none;
}
@media (max-width: 460px) { .mk-grid--vdivide::before { display: none; } }
.mk-factor {
display: flex; flex-direction: column; padding: 14px 16px; border-radius: 14px;
border: 1px solid var(--mk-line); background: var(--mk-card-bg);
box-shadow: var(--mk-card-shadow); overflow: visible; min-width: 0;
}
.mk-factor--hero {
margin-top: 14px; border-color: rgba(10, 132, 255, 0.28);
background: linear-gradient(180deg, rgba(238, 245, 255, 0.6), #fff);
}
.mk-factor__name {
margin: 0; color: var(--mk-ink); font-weight: 800; line-height: 1.3;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 17px;
}
.mk-factor__name--lg { font-size: 19px; }
.mk-factor__abbr {
display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.03em;
color: #1f2a3d; background: rgba(15, 23, 42, 0.07); border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 6px; padding: 1px 6px; vertical-align: 2px;
}
.mk-factor__flag {
display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
text-transform: uppercase; color: #fff; background: var(--mk-blue);
border-radius: 6px; padding: 2px 8px; vertical-align: 2px;
}
.mk-factor__role { margin: 8px 0 9px; font-size: 13px; font-weight: 700; color: var(--mk-sub); }
.mk-factor__body { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--mk-ink); }
.mk-factor__effects-label { margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: var(--mk-ink); }
.mk-factor__name .cav-term,
.mk-pill {
display: inline-block; padding: 3px 11px; border-radius: 9px;
background: var(--mk-pill-bg, rgba(15, 23, 42, 0.05));
border: 1px solid var(--mk-pill-bd, rgba(15, 23, 42, 0.16));
color: var(--mk-ink); font-weight: 800;
text-decoration: underline dotted rgba(17, 17, 17, 0.45); text-underline-offset: 3px;
}
.mk-factor__name .cav-term:focus-visible { text-decoration-color: rgba(17, 17, 17, 0.85); filter: brightness(0.97); }
@media (hover: hover) and (pointer: fine) {
.mk-factor__name .cav-term:hover { text-decoration-color: rgba(17, 17, 17, 0.85); filter: brightness(0.97); }
}
.mk-hue-teal   { --mk-pill-bg: #d7f5ef; --mk-pill-bd: #5fc9b6; }
.mk-hue-violet { --mk-pill-bg: #ece3ff; --mk-pill-bd: #a78bfa; }
.mk-hue-amber  { --mk-pill-bg: #fdeecb; --mk-pill-bd: #e6b24d; }
.mk-hue-blue   { --mk-pill-bg: #d9ecff; --mk-pill-bd: #6aaef0; }
.mk-hue-rose   { --mk-pill-bg: #ffe0ea; --mk-pill-bd: #f18cae; }
.mk-hue-green  { --mk-pill-bg: #ddf4d9; --mk-pill-bd: #7bc86a; }
.mk-hue-orange { --mk-pill-bg: #ffe6d1; --mk-pill-bd: #f2a565; }
.mk-hue-indigo { --mk-pill-bg: #e0e3ff; --mk-pill-bd: #8a92ee; }
.mk-hue-red    { --mk-pill-bg: #ffe0e0; --mk-pill-bd: #ef8a8a; }
.mk-group {
margin: 16px 0 0; padding: 14px 16px 16px; border-radius: 16px;
border: 1px solid rgba(10, 132, 255, 0.16); background: rgba(238, 245, 255, 0.4);
}
.mk-group__note { display: inline; }
.mk-drop { margin-top: auto; border-radius: 10px; }
.mk-factor--hero > .mk-drop { margin-top: 4px; }
.mk-drop > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(10, 132, 255, 0.28);
background: rgba(10, 132, 255, 0.06); color: var(--mk-blue-ink); font-size: 13px; font-weight: 700;
transition: background .15s, border-color .15s;
}
.mk-drop > summary::-webkit-details-marker { display: none; }
.mk-drop > summary::after { content: "▸"; font-size: 11px; transition: transform .15s; }
.mk-drop[open] > summary::after { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
.mk-drop > summary:hover { background: rgba(10, 132, 255, 0.12); border-color: rgba(10, 132, 255, 0.45); }
}
.mk-drop__body {
margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.03);
border: 1px solid rgba(15, 23, 42, 0.08); font-size: 14px; line-height: 1.55; color: var(--mk-ink);
}
.mk-drop--effect { width: 100%; }
.mk-drop--effect > summary {
width: 100%; justify-content: space-between; padding: 12px 16px; border-radius: 11px; font-size: 15.5px;
font-weight: 800; color: var(--mk-ink);
}
.mk-drop--effect > summary::after { margin-left: 8px; }
.mk-drop--effect > summary .cav-term { color: var(--mk-ink); border-bottom-color: rgba(17, 17, 17, 0.5); }
.mk-drop--effect .mk-drop__body { font-size: 14.5px; }
.mk-drop + .mk-drop { margin-top: 10px; }
.mk-fig-row { display: flex; gap: 22px; align-items: flex-start; margin-top: 6px; }
.mk-fig-row--vcenter { align-items: center; }
.mk-fig-row__text { flex: 1 1 auto; min-width: 0; }
.mk-fig-row__text .mk-subhead:first-child { margin-top: 0; }
.mk-fig-row__text > .section-label:first-child,
.mk-fig-row__text > h3:first-child { margin-top: 0; }
.mk-fig-row > .mk-fig { flex: 0 0 clamp(220px, 40%, 340px); margin-top: 0; }
.mk-fig-row > .mk-fig--sm { flex: 0 0 clamp(170px, 28%, 230px); }
.mk-fig-row > .mk-fig--wide { flex: 0 0 clamp(320px, 52%, 680px); }
.mk-fig-row > .mk-fig--mid { flex: 0 0 clamp(280px, 42%, 490px); }
@media (max-width: 820px) { .mk-fig-row { flex-direction: column; } .mk-fig-row > .mk-fig { width: 100%; } }
.mk-figwrap { margin-top: 18px; }
.mk-figwrap .cardslider__track > * { flex: 0 0 min(90%, 760px); }
.mk-figslide__title, .mk-fig__title {
font-size: 15px; font-weight: 800; color: var(--mk-ink); text-align: center; margin-bottom: 8px;
}
.mk-figslide__hint, .mk-fig__hint { font-weight: 600; color: var(--mk-sub); font-size: 13px; }
.mk-figstack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 12px; align-items: start; margin-top: 16px; }
.mk-figstack__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 720px) { .mk-figstack { grid-template-columns: 1fr; } }
.mk-figpair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; margin-top: 16px; }
.mk-figpair > .mk-fig .atl-figure__img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 620px) { .mk-figpair { grid-template-columns: 1fr; } }
.mk-fig--band { width: 100%; max-width: 940px; margin: 12px auto 16px; }
.mk-card > .mk-fig-row, .mk-group > .mk-fig-row { margin-top: 8px; }
.mk-fig-row > .mk-fig--incard { flex: 0 0 clamp(170px, 30%, 250px); align-self: center; }
.mk-fig { margin: 0; min-width: 0; }
.mk-fig.mk-fig--band { margin: 12px auto 16px; }
.mk-fig .atl-figure__img, .mk-figstack .atl-figure__img, .mk-figwrap .atl-figure__img {
width: 100%; height: auto; max-width: 100%; border-radius: 12px; display: block;
}
.mk-fig figcaption { margin-top: 8px; font-size: 12.5px; color: var(--mk-sub); text-align: center; line-height: 1.45; }
.mk-labrow { display: flex; gap: 18px; align-items: flex-start; margin-top: 4px; }
.mk-labrow > .mk-card { flex: 1 1 auto; margin: 0; }
.mk-labrow > .mk-fig { flex: 0 0 300px; max-width: 320px; }
@media (max-width: 760px) {
.mk-labrow { flex-direction: column; }
.mk-labrow > .mk-fig { flex-basis: auto; max-width: 100%; }
.mk-grid--2, .mk-grid--3, .mk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) { .mk-grid--2, .mk-grid--3, .mk-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.mk-tips-on .cav-term::after { display: none !important; }
.mk-tip {
position: fixed; z-index: 2147483000; max-width: min(300px, 82vw);
padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--mk-ink);
font-size: 12.5px; font-weight: 600; line-height: 1.45; text-align: left;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18); border: 1px solid rgba(15, 23, 42, 0.08);
opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
pointer-events: none;
}
.mk-tip.is-on { opacity: 1; transform: translateY(0); }
.mk-cmp-wrap {
overflow-x: auto;
margin: 10px 0 4px;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 16px;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.mk-cmp {
width: 100%;
border-collapse: collapse;
font-size: 15px;
line-height: 1.5;
color: var(--mk-ink, #111111);
}
.mk-cmp th,
.mk-cmp td {
padding: 11px 16px;
text-align: left;
vertical-align: top;
color: var(--mk-ink, #111111);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.mk-cmp thead th {
font-size: 15.75px;
font-weight: 800;
background: rgba(15, 23, 42, 0.035);
border-bottom: 2px solid rgba(15, 23, 42, 0.18);
}
.mk-cmp tbody th {
font-size: 15.75px;
font-weight: 800;
white-space: nowrap;
}
.mk-cmp tbody tr:last-child th,
.mk-cmp tbody tr:last-child td { border-bottom: 0; }
.mk-cmp .mk-cmp__pos { background: rgba(123, 200, 106, 0.10); }
.mk-cmp .mk-cmp__neg { background: rgba(239, 138, 138, 0.10); }
.mk-cmp thead th.mk-cmp__pos { box-shadow: inset 0 -2px 0 rgba(123, 200, 106, 0.55); }
.mk-cmp thead th.mk-cmp__neg { box-shadow: inset 0 -2px 0 rgba(239, 138, 138, 0.55); }
.mk-cmp tr.mk-cmp__key th,
.mk-cmp tr.mk-cmp__key td { background: rgba(230, 178, 77, 0.13); font-weight: 700; }
.mk-cmp tr.mk-cmp__key th { font-weight: 800; }
@media (max-width: 700px) {
.mk-fig--dense {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mk-fig--dense > svg {
min-width: 640px;
}
}