@charset "utf-8";
.sec-title {display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-20); padding-bottom: var(--space-20); border-bottom: 1px solid #ddd; font-size: var(--font-size-24); font-weight: 600; color: var(--dark-color);}
.sec-title:before {content: ''; display: block; width: 4px; height: 24px; background: var(--primary-color);}
.dot-list li {text-indent: -12px; padding-left: 12px;}
.dot-list li:not(:last-child) {margin-bottom: 5px;}
.dot-list li:before {content: '•'; margin-right: 5px;}
.num-list {list-style: decimal; padding-left: 27px;}
.num-list li {line-height: 32px;}
.sec-space {padding: var(--space-100) 0;}
.space-top {padding-top: var(--space-100);}
.space-bottom {padding-bottom: var(--space-100);}
.icon104 lord-icon, .icon104 img {width: clamp(50px, calc( 104 / var(--inner) * 100vw ), 104px); height: clamp(50px, calc( 104 / var(--inner) * 100vw ), 104px);}
.icon88 lord-icon, .icon88 img {width: clamp(40px, calc( 88 / var(--inner) * 100vw ), 88px); height: clamp(40px, calc( 88 / var(--inner) * 100vw ), 88px);}
.icon56 lord-icon, .icon56 img {width: clamp(30px, calc( 56 / var(--inner) * 100vw ), 56px); height: clamp(30px, calc( 56 / var(--inner) * 100vw ), 56px);}
.table-default {width: 100%; border-collapse: collapse; border-top: 2px solid var(--dark-color); text-align: center; font-size: var(--font-size-18);}
.table-default th, .table-default td {padding: var(--space-15) var(--space-10); border-bottom: 1px solid #ddd;}
.table-default thead th {background: #f8f8f8; font-size: var(--font-size-20); font-weight: 500; color: var(--dark-color);}
.table-default thead th, .table-default tbody td:not(:last-child) {border-right: 1px solid #ddd;}

.sec-information-welcome .icon {display: flex; align-items: center; justify-content: center; position: relative; width: fit-content; margin: 0 auto var(--space-40); padding: var(--space-40); border-radius: 100%; background: #FFFAEE;}
.sec-information-welcome .icon:before {content :''; position: absolute; top: var(--space-10); left: var(--space-10); bottom: var(--space-10); right: var(--space-10); border: 1px dashed #F99F00; border-radius: 100%; }
.sec-information-welcome h2 {position: relative; width: fit-content; margin: 0 auto var(--space-30); gap: var(--space-30);}
.sec-information-welcome h2:before, .sec-information-welcome h2:after {content: ''; display: block; width: 100px; height: 66px; background: url('/images/sub/information-emphasis.png') no-repeat center center / contain;;}
.sec-information-welcome h2:after {transform: rotate(180deg);}

.contact-list li {display: flex; align-items: center; gap: 12px; color: var(--dark-color);}
.contact-list li:not(:last-child) {margin-bottom: 15px;}
.contact-list .icon {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 100%; font-size: 16px; color: #fff;}
.contact-list a:hover {text-decoration: underline;}

.bg-gray {background: #f8f8f8;}
.fz40 {font-size: clamp(26px, calc(40 / var(--inner) * 100vw), 40px); line-height: 1.5em;}
.icon32 img {width: 32px; height: 32px;}

.course-header {display: flex; align-items: center; gap: 20px; padding: 23px; margin-bottom: var(--space-30); border-radius: var(--radius-16); background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: #fff;}
.course-header .course-icon .icon-box {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: #fff; border-radius: var(--radius-8);}
.course-header .course-icon .icon-box img {width: 40px; height: 40px;}
.course-header .course-txt {display: flex; flex-direction: column; gap: 5px;}
.course-header .course-txt strong {line-height: 32px;}
.course-header .course-txt span {line-height: 22px; opacity: 0.9;}
.course-info {display: flex; gap: var(--space-30); margin-bottom: var(--space-60);}
.course-info .info-box {flex: 1; display: flex; align-items: center; gap: 25px; padding: 27px; border: 1px solid #ddd; border-radius: var(--radius-16); background: #fff;}
.course-info .info-box .txt {display: flex; flex-direction: column; gap: 12px;}
.course-info .info-box .txt p {color: #454545; line-height: 22px;}
.course-detail .detail-item:not(:last-child) {margin-bottom: var(--space-60);}

.feature-list {display: flex; gap: 30px; justify-content: center;}
.feature-list li {position: relative; flex: 1;}
.feature-list .step-badge {position: relative; display: flex; align-items: center; justify-content: center; width: fit-content; padding: 8px 32px; margin: 0 auto -20px; background: var(--primary-color); border-radius: 50%; color: #fff; font-size: 20px; font-weight: 700;}
.feature-list .feature-box {display: flex; flex-direction: column; align-items: center; padding: var(--space-50) var(--space-20); background: #fff; border-radius: var(--radius-16); min-height: 214px;}
.feature-list .feature-box .icon {margin-bottom: var(--space-20);}
.feature-list-grid {flex-wrap: wrap; max-width: 1200px; margin: 0 auto;}
.feature-list-grid li {flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px);}

.book-list {display: flex; flex-wrap: wrap; gap: 30px 26px;}
.book-list li {width: calc((100% - 78px) / 4); text-align: center;}
.book-list .book-img {margin-bottom: var(--space-30); border: 1px solid #ddd; background: #fff;}
.book-list .book-img img {width: 100%; height: auto;}
.book-list-half li {width: calc(50% - 13px);}
.book-list .book-wide {width: calc(50% - 13px);}

/* 레벨테스트 */
.level-list {display: flex; gap: var(--space-30); justify-content: center;}
.level-list li {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 278px; height: 280px; padding: 35px; border-radius: var(--radius-24); text-align: center;}
.level-list li.bg-yellow {background: #fffaee;}
.level-list li.bg-orange {background: #fff7f4;}
.level-list li strong {line-height: 28px;}
.btn-test {display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 140px; height: 40px; border-radius: 60px; color: #fff; font-size: 16px; font-weight: 500;}
.btn-test.orange {background: #f99f00;}
.btn-test.red {background: var(--primary-color);}
.btn-test:hover {opacity: 0.9;}
.btn-test .arrow {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #fff; border-radius: 100%; font-weight: 300;}
.btn-test.orange .arrow {color: #f99f00;}
.btn-test.red .arrow {color: var(--primary-color);}

/* 레벨테스트 팝업 폼 */
.pop-level {max-width: 550px; width: 90vw; margin: 0 auto;}
.pop-level h2 {padding: var(--space-20) 30px; background: var(--primary-color); font-size: var(--font-size-28); line-height: 1.4286em; font-weight: 700; color: #fff; text-align: center;}
.pop-level .content {padding: var(--space-40); max-height: 70vh; overflow-y: auto;}
.level-form .form-group {margin-bottom: var(--space-40); gap: 0;}
.level-form .form-group label {display: block; margin-bottom: 15px; line-height: 16px;}
.level-form .form-input {width: 100%; height: 54px; padding: 19px 15px; border: 1px solid #ddd; border-radius: var(--radius-8); font-size: 16px; line-height: 16px;}
.level-form .form-input::placeholder {color: #bebebe;}
.level-form .form-btn {text-align: center;}
.btn-level-test {display: inline-flex; align-items: center; justify-content: center; gap: 15px; width: 250px; height: 60px; border: 2px solid var(--primary-color); border-radius: 60px; background: #fff; color: var(--primary-color); font-size: 18px; font-weight: 600; cursor: pointer;}
.btn-level-test .arrow {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--primary-color); border-radius: 100%; color: #fff; font-weight: 300; font-size: 14px;}
.btn-level-test:hover {background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: #fff;}
.btn-level-test:hover .arrow {background: #fff; color: var(--primary-color);}

/* O/X 퀴즈 */
.fz60 {font-size: clamp(36px, calc(60 / var(--inner) * 100vw), 60px); line-height: 1em;}
.fw800 {font-weight: 800;}
.secondary-color {color: var(--secondary-color);}

.quiz-wrap {max-width: 1200px; margin: 0 auto;}
.quiz-step {margin-bottom: var(--space-30);}
.quiz-step .current {line-height: 60px;}
.quiz-step .total {color: #c5c5c5;}
.quiz-progress {height: 4px; margin-bottom: var(--space-60); background: #ddd; border-radius: 60px;}
.quiz-progress .bar {height: 100%; background: var(--primary-color); border-radius: 60px;}
.quiz-desc {margin-bottom: var(--space-60); padding: 16px 15px; background: #f8f8f8; font-size: 16px; color: #454545;}

.quiz-table {margin-bottom: var(--space-60);}
.quiz-example {position: relative; border: 2px dashed var(--secondary-color); margin-bottom: -1px;}
.quiz-example .quiz-row:first-child .quiz-no {position: absolute; top: 0; bottom: 0; left: 0; border-right: 1px solid #ddd;}
.quiz-example .quiz-row:first-child {justify-content: flex-end;}
.quiz-example .quiz-no {background: #fffaee; border-right: 0;}
.quiz-row {display: flex; border: 1px solid #ddd; word-break: break-all;}
.quiz-row:not(:last-child) {border-bottom: none;}
.quiz-no {display: flex; align-items: center; justify-content: center; width: 16.6667%; border-right: 1px solid #ddd; text-align: center;}
.quiz-img {display: flex; align-items: center; justify-content: center; width: 29.1667%; height: 150px; padding: 10px; border-right: 1px solid #ddd; background: #fff;}
.quiz-img img {max-width: 100%; max-height: 100%; object-fit: contain;}
.quiz-txt {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 32.416667%; flex: 1; padding: 10px; border-right: 1px solid #ddd; text-align: center;}
.quiz-txt.quiz-passage {max-width: 61.6666%;}
.quiz-txt .pinyin {color: #686868;  line-height: 16px;}
.quiz-txt .hanzi {line-height: 28px;}
.quiz-ox {display: flex; align-items: center; justify-content: center; gap: 20px; width: 21.6667%; padding: 10px;}
.quiz-ox input[type="radio"] {position: absolute; opacity: 0; pointer-events: none;}

.btn-x, .btn-o {display: flex; align-items: center; justify-content: center; width:clamp(44px, calc(60 / var(--inner) * 100vw), 60px); height: clamp(44px, calc(60 / var(--inner) * 100vw), 60px); border-radius: 100%; border: 2px solid #ddd; background: #fff; font-size: 24px; cursor: pointer; transition: .2s;}
.btn-x span {color: #ddd;}
.btn-o span {color: #ddd;}
.btn-x:hover, input[type="radio"]:checked + .btn-x {border-color: var(--primary-color); background: var(--primary-color);}
.btn-x:hover span, input[type="radio"]:checked + .btn-x span {color: #fff;}
.btn-o:hover, input[type="radio"]:checked + .btn-o {border-color: #4CAF50; background: #4CAF50;}
.btn-o:hover span, input[type="radio"]:checked + .btn-o span {color: #fff;}
input[type="radio"]:disabled + .btn-x, input[type="radio"]:disabled + .btn-o {cursor: default;}
input[type="radio"]:disabled + .btn-x:hover {border-color: var(--primary-color); background: var(--primary-color);}
input[type="radio"]:disabled + .btn-o:hover {border-color: #4CAF50; background: #4CAF50;}

.quiz-nav {display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-60);}
.btn-prev {display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border: 1px solid #ddd; border-radius: 60px; background: #f8f8f8; color: #969696; font-size: 18px; font-weight: 500;}
.btn-prev .arrow {font-weight: 300;}
.btn-next {display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border: none; border-radius: 60px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: #fff; font-size: 18px; font-weight: 500; cursor: pointer;}
.btn-next .arrow {font-weight: 300;}
.btn-prev:hover {background: #eee;}
.btn-next:hover {opacity: 0.9;}

/* 이미지 맞추기 */
.quiz-img-cards {display: flex; flex-wrap: wrap; gap: var(--space-30); margin-bottom: var(--space-60);}
.quiz-img-cards li {width: calc((100% - var(--space-30) * 2) / 3);}
.quiz-img-cards .card-img {display: flex; align-items: center; justify-content: center; height: 250px; background: #fff; border: 1px solid #ddd; border-radius: var(--radius-16) var(--radius-16) 0 0;}
.quiz-img-cards .card-img img {max-width: 80%; max-height: 220px; object-fit: contain;}
.quiz-img-cards .card-label {display: flex; align-items: center; justify-content: center; height: 50px; background: var(--primary-color); border-radius: 0 0 var(--radius-16) var(--radius-16); color: #fff; font-size: 22px; font-weight: 600;}

.quiz-table-image .quiz-txt {flex: 1; max-width: 35%; border-right: 1px solid #ddd;}
.quiz-table-image .quiz-choice {display: flex; align-items: center; justify-content: center; gap: 20px; width: 48.3333%; padding: 10px;}
.quiz-table-image .quiz-choice input[type="radio"] {position: absolute; opacity: 0; pointer-events: none;}

.btn-choice {display: flex; align-items: center; justify-content: center; width: clamp(34px, calc(60 / var(--inner) * 100vw), 60px); height: clamp(34px, calc(60 / var(--inner) * 100vw), 60px); border-radius: 100%; border: 2px solid #ddd; background: #fff; font-size: var(--font-size-26); font-weight: 600; color: #969696; cursor: pointer; transition: .2s;}
input[type="radio"]:checked + .btn-choice {border-color: var(--primary-color); background: var(--primary-color); color: #fff;}
.btn-choice:hover {border-color: var(--primary-color); color: var(--primary-color);}
input[type="radio"]:disabled + .btn-choice {cursor: default;}
input[type="radio"]:disabled + .btn-choice:hover {border-color: var(--primary-color); background: var(--primary-color); color: #fff;}

/* 텍스트 맞추기 */
.quiz-txt-cards {display: flex; flex-wrap: wrap; gap: var(--space-30); margin-bottom: var(--space-60);}
.quiz-txt-cards li {width: calc((100% - var(--space-30) * 2) / 3);}
.quiz-txt-cards .card-txt {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 150px; background: #fff; border: 1px solid #ddd; border-radius: var(--radius-16) var(--radius-16) 0 0; text-align: center;}
.quiz-txt-cards .card-txt .pinyin {color: #686868;}
.quiz-txt-cards .card-label {display: flex; align-items: center; justify-content: center; height: 50px; background: var(--primary-color); border-radius: 0 0 var(--radius-16) var(--radius-16); color: #fff; font-size: 22px; font-weight: 600;}

/* 빈칸 맞추기 */
.blank {display: inline-block; width: clamp(30px, calc(60 / var(--inner) * 100vw), 60px); border-bottom: 2px solid #ddd; margin: 0 5px -2px;}
.quiz-row-tall .quiz-no, .quiz-row-tall .quiz-txt, .quiz-row-tall .quiz-choice {min-height: 220px;}
.quiz-txt .mt20 {margin-top: var(--space-20);}

/* N지선다 */
.quiz-table-nchoice .quiz-no {width: 12.5%;}
.quiz-table-nchoice .quiz-example .quiz-content {max-width: 87.5%; pointer-events: none;}
.quiz-table-nchoice .quiz-content {flex: 1; padding: var(--space-30) var(--space-40);}
.quiz-table-nchoice .quiz-passage {margin-bottom: var(--space-20); line-height: 50px;}
.quiz-table-nchoice .quiz-question {margin-top: 10px;}
.quiz-table-nchoice .quiz-choices {display: flex; gap: var(--space-30);}
.quiz-table-nchoice .quiz-choices input[type="radio"] {position: absolute; opacity: 0; pointer-events: none;}

.btn-nchoice {display: flex; align-items: center; gap: 15px; min-width: 200px; min-height: clamp(44px, calc(64 / var(--inner) * 100vw), 64px); padding: 0 var(--space-20); border: 1px solid #ddd; border-radius: 80px; background: #fff; cursor: pointer; transition: .2s;}
.btn-nchoice .choice-letter {display: flex; align-items: center; justify-content: center; width: clamp(30px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(30px, calc(40 / var(--inner) * 100vw), 40px); background: var(--primary-color); border-radius: 100%; color: #fff; font-size: 20px; font-weight: 600; flex-shrink: 0;}
.btn-nchoice .choice-txt {font-size: var(--font-size-20); font-weight: 500; color: #454545;}
.btn-nchoice:hover {border-color: var(--primary-color);}
input[type="radio"]:checked + .btn-nchoice {border: 2px solid var(--primary-color);}
input[type="radio"]:disabled + .btn-nchoice {cursor: default;}

/* 문장 작성하기 */
.quiz-table-sentence .quiz-no {width: 12.5%;}
.quiz-table-sentence .quiz-content {flex: 1; max-width: 87.5%; padding: var(--space-30) var(--space-40);}
.quiz-table-sentence .quiz-row {min-height: 235px;}
.quiz-table-sentence .quiz-example .quiz-content {pointer-events: none;}

.word-chips {display: flex; gap: var(--space-20); flex-wrap: wrap; justify-content: center; align-items: center; padding: var(--space-30) 0;}
.word-chip {display: flex; align-items: center; justify-content: center; min-width: auto; height: clamp(44px, calc(64 / var(--inner) * 100vw), 64px); padding: 0 20px; border: 2px solid #ddd; border-radius: var(--radius-8); background: #fff; font-size: var(--font-size-24); font-weight: 500; color: #454545; cursor: pointer; transition: .2s;}
.word-chip:hover {border-color: var(--primary-color); color: var(--primary-color);}
.word-chip.used {opacity: 0.3; pointer-events: none;}
.word-chip.active {background: var(--primary-color); border-color: var(--primary-color); color: #fff;}

.answer-area {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; min-height: clamp(50px, calc(70 / var(--inner) * 100vw), 70px); margin: 0 40px; padding: 0 40px; border: 2px dashed var(--primary-color); border-radius: var(--radius-8);}
.answer-area.completed {border-style: solid;}
.answer-area .placeholder {font-size: var(--font-size-20); font-weight: 500; color: #bebebe;}
.answer-word {font-size: var(--font-size-24); font-weight: 500; color: var(--dark-color); cursor: pointer; padding: 5px 10px; background: #fff3ef; border-radius: 4px;}
.answer-word:hover {background: #ffe0d6;}

/* 빈칸 작성하기 */
.quiz-table-blank-write .quiz-no {width: 12.5%;}
.quiz-table-blank-write .quiz-content {flex: 1; padding: var(--space-30) var(--space-40);}
.quiz-table-blank-write .quiz-row {min-height: 130px;}
.quiz-table-blank-write .quiz-example .quiz-content {max-width: 87.5%; pointer-events: none;}

.blank-sentence {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 70px; padding: 0 40px; border: 2px dashed var(--primary-color); border-radius: var(--radius-8); font-size: var(--font-size-24); font-weight: 500; color: var(--dark-color);}
.quiz-example .blank-sentence {border-color: var(--secondary-color);}
.blank-hint {display: inline-block; width: 40px;}
.input-wrap {display: inline-flex; align-items: center; justify-content: center;}
.blank-sentence .input-wrap {display: inline-flex; margin: 0 5px;}
.blank-sentence .input-wrap:before {content: '(';}
.blank-sentence .input-wrap:after {content: ')';}
.blank-input {width: 70px; height: auto; border: none; background: transparent; font-size: var(--font-size-24); font-weight: 500; color: var(--primary-color); text-align: center;}
.blank-input::placeholder {color: var(--primary-color); opacity: 1;}
.blank-input:focus {outline: none; background: #fff3ef; border-radius: 4px;}
.quiz-example .blank-input {color: var(--primary-color);}

/* 이미지 보고 문장 작성하기 */
.quiz-table-img-write .quiz-no {width: 12.5%;}
.quiz-table-img-write .quiz-content {flex: 1; max-width: 87.5%; display: flex; align-items: center; gap: var(--space-40); padding: var(--space-40);}
.quiz-table-img-write .quiz-row {min-height: 330px;}
.img-card {max-width: 380px; width: 40%; flex-shrink: 0; border-radius: var(--radius-16); overflow: hidden; border: 1px solid #ddd;}
.img-area {height: 200px; background: #fff; display: flex; align-items: center; justify-content: center;}
.img-area img {max-width: 100%; max-height: 100%; object-fit: contain;}
.img-label {height: 50px; background: var(--primary-color); color: #fff; font-size: 22px; font-weight: 600; display: flex; align-items: center; justify-content: center;}
.write-area {flex: 1; min-height: 250px; border: 2px dashed var(--primary-color); border-radius: var(--radius-8); display: flex; align-items: center; justify-content: center; padding: 20px;}
.write-area.completed {border-style: solid;}
.write-textarea {width: 100%; height: 100%; min-height: 210px; border: none; background: transparent; font-weight: 500; color: var(--dark-color); resize: none;}
.write-textarea::placeholder {color: #bebebe;}
.write-textarea:focus {outline: none;}
.btn-submit {background: linear-gradient(to right, #e94e1b, #f99f00);}

/* 테스트 완료 */
.complete-wrap {max-width: 1200px; margin: 0 auto;}
.score-circle {width: 180px; height: 180px; margin: 0 auto var(--space-40); background: #fff7f4; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.score-circle .score {font-size: 50px; line-height: 1;}
.result-box {background: #fffaee; border-radius: var(--radius-24); padding: var(--space-60) var(--space-40);}
.stat-cards {display: flex; gap: var(--space-30); margin-bottom: var(--space-40);}
.stat-card {flex: 1; position: relative; height: 100px; background: var(--secondary-color); border-radius: var(--radius-16); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;}
.stat-card:before {content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 0.5px dashed #fff; border-radius: 14px;}
.stat-label {font-size: 16px; font-weight: 500;}
.stat-value {font-size: 40px; font-weight: 600; line-height: 1.2;}
.result-divider {height: 1px; background: #ddd; margin-bottom: var(--space-40);}
.score-list {display: flex; flex-direction: column; gap: 20px;}
.score-list li {display: flex; align-items: center; justify-content: space-between; gap: 15px; height: 60px; padding: 0 30px; background: #fff; border-radius: var(--radius-8);}
.part-name {font-size: 18px; color: var(--dark-color);}
.part-name strong {font-weight: 600;}
.part-score {font-size: 22px; font-weight: 700; color: var(--primary-color);}
.part-score.exclude {font-size: 18px;}
.btn-retest {display: inline-flex; align-items: center; gap: 15px; height: 60px; padding: 0 40px; border: 2px solid var(--primary-color); border-radius: 60px; font-size: 18px; font-weight: 600; color: var(--primary-color); background: #fff;}
.btn-retest:hover {background: var(--primary-color); color: #fff;}
.btn-wrap {margin-top: var(--space-60);}

/* 무료 수업신청 */
.apply-form {max-width: 1200px; margin: 0 auto;}
.form-row {display: flex; gap: var(--space-60); margin-bottom: var(--space-60);}
.form-group {display: flex; flex-direction: column; gap: 18px;}
.form-group.half {flex: 1;}
.form-group.full {width: 100%;}
.form-label {font-size: 18px; font-weight: 600; color: var(--dark-color);}
.form-label em {color: var(--primary-color); font-style: normal;}
.form-input {height: 55px; padding: 0 20px; border: 1px solid #ddd; background: #fff; font-size: 16px; color: var(--dark-color);}
.form-input::placeholder {color: #b1b1b1;}
.form-textarea {height: 200px; padding: 20px; border: 1px solid #ddd; background: #fff; font-size: 16px; color: var(--dark-color); resize: none;}
.form-textarea::placeholder {color: #b1b1b1;}
.form-select {height: 55px; padding: 0 40px 0 20px; border: 1px solid #ddd; background: #fff url('/images/common/icon-arrow-down.png') no-repeat right 15px center / 10px auto; font-size: 16px; color: #454545; appearance: none; cursor: pointer;}
.time-picker {display: flex; align-items: center; gap: var(--space-40);}
.date-input {position: relative; max-width: 270px; flex:1;}
.date-input .form-input {width: 100%; padding-right: 55px;}
.btn-calendar {position: absolute; top: 0; right: 0; width: 55px; height: 55px; border: 1px solid #ddd; border-left: none; background: #fff; display: flex; align-items: center; justify-content: center;}
.btn-calendar img {width: 22px; height: auto;}
.time-select {display: flex; align-items: center; gap: var(--space-20);}
.time-select .form-select {width: 150px;}
.time-divider {font-size: 16px; color: var(--dark-color);}
.radio-group {display: flex; flex-wrap: wrap; gap: 20px 30px;}
.radio-label {display: flex; align-items: center; gap: 8px; cursor: pointer;}
.radio-label input[type="radio"] {width: 18px; height: 18px; margin: 0; accent-color: var(--primary-color);}
.radio-label span {font-size: 16px; color: #454545;}
.captcha-wrap {display: flex; gap: 10px;}
.captcha-img {width: 120px; height: 55px; border: 1px solid #ddd; overflow: hidden;}
.captcha-img img {width: 100%; height: 100%; object-fit: cover;}
.captcha-input {width: 440px;}
.privacy-box {height: 180px; padding: 18px 20px; border: 1px solid #ddd; background: #fff; overflow-y: auto;}
.privacy-box p {font-size: 16px; line-height: 24px; color: #686868;}
.checkbox-label {display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color: #454545; cursor: pointer;}
.checkbox-label input[type="checkbox"] {width: 20px; height: 20px; margin: 0; accent-color: var(--primary-color);}
.form-btn {margin-top: var(--space-60);}
.btn-apply {display: inline-flex; align-items: center; gap: 15px; height: 60px; padding: 0 40px; border: 2px solid var(--primary-color); border-radius: 60px; font-size: 18px; font-weight: 600; color: var(--primary-color); background: #fff;}
.btn-apply:hover {background: var(--primary-color); color: #fff;}

/* 수강안내 > 수강안내 */
.open-hours {padding: 15px 0;background: #FFF7F4;}
.open-hours, .open-hours strong {gap: 8px;}
.sec-price h2 {padding: 17px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); border-radius: var(--radius-24) var(--radius-24) 0 0;}
.price-table table {width: 100%; border-collapse: collapse; text-align: center; font-size: var(--font-size-18);}
.price-table thead th {height: 60px; font-size: var(--font-size-20); font-weight: 600; color: var(--dark-color); border-bottom: 1px solid #ddd;}
.price-table tbody td {height: 61px; color: #454545; border-bottom: 1px solid #ddd;}
.price-table tbody tr.highlight {background: rgba(249, 159, 0, 0.05); position: relative; border: 3px dashed var(--secondary-color);}
.price-table tbody tr.highlight td {color: var(--primary-color); font-weight: 700;}

/* 수강안내 > 강사소개 */
.page-teacher>ul {display: flex; flex-wrap: wrap; gap:var(--space-60) 0; margin: 0 calc(-1 * var(--space-15));}
.page-teacher>ul>li {width: 50%; padding: 0 var(--space-15);}
.teacher-card {display: flex; gap: 20px; height: 100%; padding: 20px; border-radius: var(--radius-16); overflow: hidden; border: 1px solid #ddd;}
.teacher-txt ul {flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap:var(--space-10);}
.teacher-txt li {display: flex;}
.teacher-txt li strong {min-width: 62px;}
.teacher-txt li div {font-size: var(--font-size-14);}
.teacher-name span {margin-left: 5px; color: #B5B5B5;}
.teacher-img {max-width: 170px; width: 32%;}

/* VOVO 설치 안내 */
.page-vovo .sec p {color: #454545;}
.install-boxes {display: flex; gap: 30px;}
.install-box {flex: 1; border-radius: var(--radius-16); overflow: hidden;}
.install-title {height: 60px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-20); font-weight: 700; color: #fff;}
.install-box.pc .install-title {background: var(--primary-color);}
.install-box.mobile .install-title {background: var(--secondary-color);}
.install-content {padding: 25px 30px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 var(--radius-16) var(--radius-16);}
.install-content ul li {display: flex; align-items: center; gap: 15px; height: 50px; font-size: var(--font-size-18); color: #454545;}
.install-content .no {flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff;}
.install-box.pc .no {background: var(--primary-color);}
.install-box.mobile .no {background: var(--secondary-color);}
.step-list {position: relative; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-40) 0;}
.step-list:before {content: ''; position: absolute; top: clamp(36px, calc(60 / var(--inner) * 100vw), 60px); left: 150px; right: 150px; height: 2px; border-top: 2px dashed rgba(233, 78, 27, 0.4);}
.step-item {flex: 1; position: relative; padding: 0 15px; z-index: 1; text-align: center; width: 200px;}
.step-item:not(:last-child):after {content: ''; position: absolute; top: calc(64px + 44px); right: 0; transform: translate(50%, -50%); display: flex; gap: 8px; width: 65px; height: 20px; background: url("/images/sub/step-arrow.png") no-repeat center center / contain;}
.step-badge {display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 44px; padding: 5px; border-radius: 50%; background: var(--primary-color); color: #fff; font-size: var(--font-size-18); font-weight: 700; margin-bottom: 20px;}
.step-icon {width: 88px; height: 88px; margin: 0 auto var(--space-20); background: #fff;}
.step-icon img {width: 100%; height: 100%; object-fit: contain;}
.step-txt {font-size: var(--font-size-18); color: #454545;}
.step-tip {display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 600px; height: 50px; margin: 0 auto; background: #fffaee; border-radius: 60px; font-size: 16px; color: var(--dark-color);}
.step-tip .icon {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--secondary-color); border-radius: 100%; color: #fff; font-weight: 700;}
.check-list {display: flex; flex-wrap: wrap; gap: 20px;}
.check-item {flex: 1 1 calc(50% - 10px); display: flex; align-items: center; justify-content: center; gap: 5px; height: 60px; background: #fff7f4; border-radius: var(--radius-8); font-size: 18px; font-weight: 500; color: #454545;}
.check-item .icon {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--primary-color); border-radius: 100%; color: #fff; font-weight: 700;}
.faq-list {display: flex; gap: 20px;}
.faq-item {flex: 1; height: fit-content; border: 1px solid #ddd; border-radius: 32px; overflow: hidden; transition: .2s;}
.faq-q {display: flex; align-items: center; gap: 5px; height: clamp(50px, calc(70 / var(--inner) * 100vw), 70px); padding: 0 30px; cursor: pointer;}
.faq-q .q {font-size: 24px; font-weight: 700; color: var(--primary-color);}
.faq-q .a {display: none; font-size: 24px; font-weight: 700; color: var(--primary-color);}
.faq-q .btn-toggle {margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: var(--primary-color); border: 2px solid var(--primary-color); transition: .2s;}
.faq-a {display: none; padding: 0 30px 20px 60px; color: #454545; line-height: 1.5em;}
.faq-item.active {border: 2px solid var(--primary-color);}
.faq-item.active .faq-q .q {display: none;}
.faq-item.active .faq-q .a {display: block;}
.faq-item.active .btn-toggle {background: var(--primary-color); color: #fff; transform: rotate(135deg);}
.contact-tel {display: flex; align-items: center; gap: 15px; font-size: 16px;}


.hanzi,
.quiz-txt p.fw500.dark-color,
.quiz-passage,
.quiz-choices .choice-txt,
.word-chip,
.answer-word,
.blank-sentence,
.answer-area,
.write-area,
.img-label {font-family: 'dengXian'; font-weight: 700 !important;}