/* GENERAL */

.layout-A {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.sentence-A, .sentence-B {
    display: flex;
}
.sentence-A {
    align-items: baseline;
    margin-top: 0.5vw;
}
.sentence-B {
    align-items: center;
    margin-left: 3vw;
}
.sentence-C {
    margin-left: 5vw;
}
.box-rounded {
    font-family: 'NanumMyeongjo';
    display: inline-block;
    width: max-content;
    margin-left: 3vw;
    padding: 2vw;
    border: 0.2vw solid lightgrey;
    border-radius: 0.5vw;
}
.box-plain {
    font-family: 'NanumMyeongjo';
    display: inline-block;
    width: max-content;
    margin-left: 3vw;
}
.solo {
    margin-top: 1.5vw;
}
.subconcept-number, .subconcept-term, .subterm {
    margin-right: 1.5vw;
    font-family: 'NanumGothic';
    font-weight: 700;
}
.subconcept-number  {
    margin-right: 1vw;
}
.description {
    display: inline-block;
    margin: 0;
    font-family: 'NanumMyeongjo';
    font-weight: 300;
    transform: translateY(0.1vw);
    line-height: 3.5vw;
}
.indicator {
    font-family: 'NanumGothic';
    margin-right: 1vw;
    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;
}
.ex-box {
    background-color: #9999ff
}
.concept-topic-box {
    margin: 0 1vw 0 0;
    background-color: purple;
    vertical-align: 0.32vw;
    padding-bottom: 0.05vw;
}
.ex-contents {
    display: inline-flex;
    flex-direction: column;
    transform: translateY(0.15vw);
    font-size: 2vw;
    font-family: 'NanumMyeongjo';
    font-weight: 300;
}
.concept-plus-container,
.term-container,
.exs-container {
    display: flex;
    flex-direction: column;
}
.exs-container {
    margin-left: 3vw;
}
.concept-plus-sign,
.term-box,
.exs-box,
.explain-box {
    margin-top: 1vw;
    background-color: darkslateblue;
    text-align: center;
    width: max-content;
    outline: 0.1vw solid darkslateblue;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.exs-box {
    margin-top: 0vw;
}
.concept-plus-contents,
.term-contents,
.exs-contents {
    font-family: 'NanumMyeongjo';
    padding: 2vw;
    font-size: 2vw;
    display: inline-flex;
    flex-direction: column;
    gap: 2vw;
    outline: 0.1vw solid darkslateblue;
    border: 0.1vw solid darkslateblue;
    border-radius: 0.5vw;
    border-top-left-radius: 0;
    width: 97vw;
    height: auto;
}

.term-contents {
    gap: 1vw;
}

.exs-contents {
    width: max-content;
}

.exs-box {
    background-color: #9999ff;
    outline: 0.1vw solid #9999ff;
    border-radius: 0.3vw;
}
.exs-contents {
    outline: none;
    border: none;
    padding-left: 0;
}
.explain-box {
    background-color: goldenrod;
    outline: 0.1vw solid goldenrod;
}
.explain-contents {
    outline: 0.1vw solid goldenrod;
    border: 0.1vw solid goldenrod;
}
.term-box {
    background-color: lightseagreen;
    outline: 0.1vw solid lightseagreen;
}
.term-contents {
    outline: 0.1vw solid lightseagreen;
    border: 0.1vw solid lightseagreen;
}
.concept-plus-number {
    color: darkslateblue;
    font-weight: 900;
}
.concept-plus-warning {
    color: orangered;
    display: inline-block;
    border: 0.1vw solid orangered;
    border-radius: 0.5vw;
    font-size: 1.5vw;
    line-height: 2.5vw;
    padding: 0 0.5vw;
    margin-right: 0.5vw;
}

.cases {
    gap: 1vw;
    display: flex;
    flex-direction: column;
}
.margin-l1 {
    margin-left: 1vw;
}
.margin-l3 {
    margin-left: 3vw;
}
.margin-l5 {
    margin-left: 5vw;
}
.margin-l7 {
    margin-left: 7vw;
}
.margin-l9 {
    margin-left: 9vw;
}
.margin-t1 {
    margin-top: 1vw;
}
.margin-ti1 {
    margin-top: -1vw;
}
.margin-b1 {
    margin-bottom: 1vw;
}
.background01 {
    background: antiquewhite;
}
.background02 {
    background: #9999ff30;
}
.background03 {
    background: #ec590030;
}
.noBackground {
    background: none;
}
.dot-detail {
    padding-top: 0.5vw;
}
.translateY-detail {
    transform: translateY(0.1vw);
    font-size: 110%;
}
.flex-row {
    display: flex;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-row-base {
    display: flex;
    gap: 1vw;
    align-items: baseline;
}
.normalFont2 {
    font-size: 1.8vw;
}
.flex-row-base > .ex-box,
.explain-box {
    border-radius: 0.3vw;
    margin-left: 3vw;
    margin-right: 0vw;
}
.NanumMyeongjo {
    font-family: 'NanumMyeongjo';
}
.NanumGothic {
    font-family: 'NanumMyeongjo';
}
.SansSerif {
    font-family: sans-serif;
}
.backsim {
    padding: 0 0.2vw;
    font-weight: 100;
}




ar{
    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;
}

ox{
    font-size: 2vw;
    font-family: sans-serif;
    background: var(--g, linear-gradient(90deg, salmon, crimson));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding: 0 0.5vw;
}

ver, vera, verb, verc, description {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 자식 가로 늘어짐(stretch) 방지 */
    font-family: 'NanumMyeongjo';
    line-height: 2.5vw;
}
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;
}

ex {
    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 {
    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: goldenrod;
    color: white;
    transform: translateY(-0.2vw);  /* 미세조정 */
}
explain::before { content: "설명"; }

warning {
    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: orangered;
    color: white;
    transform: translateY(-0.2vw);  /* 미세조정 */
}
warning::before { content: "주의"; }

concept {
    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: purple;
    color: white;
    transform: translateY(-0.3vw);  /* 미세조정 */
}
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;
}

subtopic {
    font-family: 'NanumGothic';
    font-weight: 700;
    transform: translateY(-0.1vw);  /* 미세조정 */
}