body {
    font-family: 'NanumMyeongjo';
    font-size: 2vw;
    line-height: 3vw;
    margin: 0 1vw;
    padding: 0;
    color: black;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
}

ar {
    display: inline-block;
    font-family: "Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","DejaVu Sans",sans-serif;
    background: var(--g, linear-gradient(90deg, #9999ff, darkslateblue));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding: 0 0.5vw;
    width: max-content;
}
ar:empty::before { content: "➜"; }

ar-reversed {
    display: inline-block;
    font-family: "Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","DejaVu Sans",sans-serif;
    background: var(--g, linear-gradient(90deg, #9999ff, darkslateblue));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding: 0 0.5vw;
    width: max-content;
    transform: rotate(180deg);
    transform-origin: center 55%;
}
ar-reversed:empty::before { content: "➜"; }

ar-downward {
    display: inline-block;
    font-family: "Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","DejaVu Sans",sans-serif;
    background: var(--g, linear-gradient(90deg, #9999ff, darkslateblue));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; 
    -webkit-text-fill-color: transparent;
    padding: 0 0.5vw;
    width: max-content;
    transform: rotate(90deg);
    transform-origin: center center;
}
ar-downward:empty::before { content: "➜"; }

ar-upward {
    display: inline-block;
    font-family: "Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","DejaVu Sans",sans-serif;
    background: var(--g, linear-gradient(90deg, #9999ff, darkslateblue));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding: 0 0.5vw;
    width: max-content;
    transform: rotate(270deg);
    transform-origin: center center;
}
ar-upward:empty::before { content: "➜"; }

sign, sign-o, sign-x {
    font-size: 2vw;
    font-family: sans-serif;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding: 0 0.5vw;
}
sign {
    background: var(--g, linear-gradient(90deg, #9999ff, darkslateblue));
    background-clip: text;
    -webkit-background-clip: text;
}
sign-o {
    background: var(--g, linear-gradient(90deg, salmon, crimson));
    background-clip: text;
    -webkit-background-clip: text;
}
sign-o::before { content: '⭕' }
sign-x {
    background: var(--g, linear-gradient(90deg, rgb(0, 0, 255), black));
    background-clip: text;
    -webkit-background-clip: text;
}
sign-x::before { content: '❌' }

ver, vera, verb, verc, description {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 자식 가로 늘어짐(stretch) 방지 */
    font-family: 'NanumMyeongjo';
    line-height: 2.5vw;
    gap: 0;
}
vera {
    gap: 2vw;
}
verb {
    gap: 1.5vw;
}
verc {
    gap: 1vw;
}
description {
    gap: 0.7vw;
}

hor { /* hor의 경우, hora, horb, .. 등으로 나누지 않는 이유는 수평으로 배열할 때는 기본적으로 0.5vw로 일관되게 많이 사용하고 어차피 커스터마이징 해야 하는 경우는 케이스가 다양해서 그 gap을 일반적으로 정형화할 수 없기 떄문 */
    display: flex;
    flex-direction: row;
    align-items: first baseline; /* 자식 세로 늘어짐(stretch) 방지 */
    font-family: 'NanumMyeongjo';
    line-height: 2.5vw;
    gap: 1vw;
}

concept, ex, explain, warning {
    width: max-content;
    font-family: 'NanumGothic';
    padding: 0 0.5vw;
    font-size: 1.5vw;
    font-weight: 700;
    line-height: 2.5vw;
    display: inline-block;
    border-radius: 0.3vw;
    background-color: #99f;
    color: white;
    transform: translateY(-0.2vw);  /* 미세조정 */
}
ex::before { content: "예"; }

explain {
    background-color: goldenrod;
    transform: translateY(-0.2vw);  /* 미세조정 */
}
explain::before { content: "설명"; }

warning {
    background-color: orangered;
    transform: translateY(-0.2vw);  /* 미세조정 */
}
warning::before { content: "주의"; }

concept {
    background-color: purple;
    transform: translateY(-0.25vw);  /* 미세조정 */
}
concept::before { content: "개념"; }

n{  /* numbering style a 1., 2., ... */
    --temp: none;
}
na {  /* numbering style a (1), (2), ... */
    transform: translateY(0.1vw);
}
nb {  /* numbering style b ①, ②, ...*/
    --temp: none;
}
nc {  /* numbering style c i), ii), ... */
    --temp: none;
}
cpn {  /* concept-plus 전용 numbering style a 1., 2., ... */
    color: darkslateblue;
    font-weight: 900;
}
wn {
    /* concept-plus 전용 numbering style a 1., 2., ... */
    color: orangered;
    font-weight: 900;
}

subtopic {
    font-family: 'NanumGothic';
    font-weight: 700;
}

box-rounded, box-transparent {
    display: inline-block;
    width: max-content;
    padding: 2vw;
    border: 0.2vw solid lightgrey;
    border-radius: 0.5vw;
}

box-transparent {  /* v1의 box-plain과 동일 기능*/
    border: 0.2vw solid #00000000;
}

ml3 {
    display: inline-block;
    margin-left: 3vw;
}

vl {
    background-color: lightgray;
    width: 0.1vw;
    align-self: stretch; /* 세로로 부모 높이만큼 늘어남 */
}
hl {
    background-color: lightgray;
    height: 0.1vw;
    align-self: stretch; /* 가로로 부모 높이만큼 늘어남 */
}

concept-plus-container, term-container {
    display: flex;
    flex-direction: column;
}
concept-plus-sign, term-sign {
    color: white;
    text-align: center;
    width: max-content;
    font-family: 'NanumGothic';
    padding: 0 0.5vw;
    font-size: 1.5vw;
    font-weight: 700;
    line-height: 2.5vw;
    border-radius: 0.3vw 0.3vw 0 0;
    background-color: darkslateblue;
    outline: 0.1vw solid darkslateblue;
}
concept-plus-contents, term-contents {
    font-family: 'NanumMyeongjo';
    display: inline-flex;
    flex-direction: column;
    gap: 2vw;
    padding: 2vw;
    font-size: 2vw;
    border-radius: 0 0.5vw 0.5vw 0.5vw;
    width: 97vw;
    border: 0.1vw solid darkslateblue;
    outline: 0.1vw solid darkslateblue;
}
concept-plus-sign::before { content: '개념 더하기' }
term-sign {
    background-color: lightseagreen;
    outline-color: lightseagreen;
}
term-contents {
    border-color: lightseagreen;
    outline-color: lightseagreen;
}
term-sign::before { content: '용어' }

term-highlighted {
    font-family: 'NanumGothic';
    font-weight: 900;
}

central { /* width와 height는 상황별로 알맞게 지정해서 사용  */
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
}