@charset "utf-8";
@font-face {font-family: "Pretendard"; font-weight: 100; font-display: swap; src: url("/assets/css/font/Pretendard-Thin.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 200; font-display: swap; src: url("/assets/css/font/Pretendard-ExtraLight.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 300; font-display: swap; src: url("/assets/css/font/Pretendard-Light.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url("/assets/css/font/Pretendard-Regular.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 500; font-display: swap; src: url("/assets/css/font/Pretendard-Medium.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url("/assets/css/font/Pretendard-SemiBold.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 700; font-display: swap; src: url("/assets/css/font/Pretendard-Bold.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 800; font-display: swap; src: url("/assets/css/font/Pretendard-ExtraBold.otf") format("opentype"),}
@font-face {font-family: "Pretendard"; font-weight: 900; font-display: swap; src: url("/assets/css/font/Pretendard-Black.otf") format("opentype"),}

/* ============================== [ 기본 리셋 ] ========================================================================================== */
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
a {text-decoration: none; color: inherit; cursor: pointer;}
html {line-height: 1; color: #111111; font-family: 'Pretendard'; font-weight: 400; background: #fff; height: 100%; font-size: 62.5%;}
@media screen and (max-width: 880px) {html::-webkit-scrollbar {display: none;}}
/* [CZC 260910-02] 모바일 크롬 pull-to-refresh(당겨서 새로고침) 방지. iOS 사파리는 overscroll-behavior 미지원이라 이 규칙만으로는 안 막힘 */
html, body {overscroll-behavior-y: contain;}
body {font-size: 1.6rem; font-family: 'Pretendard';}
button {border: 0; font-size: 1.6rem; font-weight: 400; cursor: pointer;}
button *, a * {pointer-events: none;}
input {font-size: 1.6rem; font-weight: 400;}
h1, h2, h3, h4, h5, h6 {font-family: 'Pretendard'; margin: 0; line-height: 1;}
table {border-spacing: 0px;}
select::-ms-expand {display: none;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type='number'] {-moz-appearance: textfield;}
input:focus {outline:none;}
figure img {width: 100%; height: 100%; object-fit: contain; display: block;}

/* ============================== [ 공통 ] ========================================================================================== */
.page-wrap {min-height: 100vh; display: flex; flex-direction: column; width: 100%;}

.pc {display: block;}
.mobile {display: none;}

/* text color */
.txt-red {color: #F1132D;}

/* border */
.bd-right {border-right: 1px solid #EEE;}
.bd-left {border-left: 1px solid #EEE;}

/* button */
.btn-main {display: flex; align-items: center; justify-content: center; column-gap: 0.4rem; border-radius: 0.2rem; background-color: #F1132D; padding: 0.8rem 1.6rem 0.8rem 1.2rem;}
.btn-main figure {width: 1.6rem; height: 1.6rem;}
.btn-main span {color: #fff; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-main:disabled {background-color: #EEE;}
.btn-main:disabled span {color: #A9A9A9;}
.btn-main.btn-lg {padding: 1.2rem 2rem; font-size: 1.6rem; border-radius: 0.4rem; justify-content: center;}
.btn-main.btn-whole {padding: 1.6rem 2.4rem; width: 100%;}
.btn-main.btn-whole span {font-size: 1.6rem;}
.btn-main-line {padding: 0.8rem 1.6rem; border-radius: 0.2rem; border: 1px solid #F1132D; display: flex; align-items: center; justify-content: center; background-color: #fff;}
.btn-main-line span {color: #F1132D; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-category {background: transparent;}
.btn-category figure {width: 3.2rem; height: 3.2rem;}
.btn-normal {display: none; padding: 0.8rem 1rem; border-radius: 0.4rem; border: 0.5px solid #ddd; background-color: #fff;}
.btn-normal.show {display: flex; align-items: center; column-gap: 0.4rem;}
.btn-normal figure {width: 1.6rem; height: 1.6rem;}
.btn-normal span {font-size: 1.4rem; color: #111; font-weight: 500; line-height: normal; letter-spacing: -0.07px;}
.btn-gray {display: flex; align-items: center; justify-content: center; column-gap: 0.8rem; padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #ddd; background-color: #f8f8f8;}
.btn-gray.no-border {border: none;}
.btn-gray.strong {background-color: #E4E4E4;}
.btn-gray figure {width: 1.6rem; height: 1.6rem;}
.btn-gray span {color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px;}
.btn-wh {padding: 1.1rem; border-radius: 0.4rem; border: 1px solid #ddd; background-color: #fff; display: flex; align-items: center; justify-content: center;}
.btn-wh figure {width: 2.4rem; height: 2.4rem;}
.btn-wh span {color: #222; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-wh-2 {background-color: #fff;}
.btn-wh-line {padding: 0.8rem 1.6rem; border-radius: 0.2rem; border: 1px solid #222; display: flex; align-items: center; justify-content: center; background-color: #fff;}
.btn-wh-line span {color: #222; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-more {padding: 0.8rem 1.6rem; width: 100%; background-color: #fff; border-radius: 0.2rem; border: 1px solid #ddd; color: #222; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-bk {padding: 0.8rem 1.6rem; display: flex; align-items: center; justify-content: center; column-gap: 0.4rem; border-radius: 0.2rem; background-color: #111; color: #eee; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-bk.btn-bk-2 {background-color: #333;}
.btn-bk figure {width: 1.6rem; height: 1.6rem;}
.btn-bk span {color: #eee; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.btn-line {border-radius: 0.2rem; border: 1px solid #F1132D; padding: 0.8rem 1.6rem; display: flex; align-items: center; justify-content: center; color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.014px; background-color: #fff;}
.btn-bookmark {background-color: transparent;}
.btn-bookmark figure {width: 2.4rem; height: 2.4rem;}

/* select */
.custom-select {position: relative;}
.custom-select .select-trigger {display: flex; align-items: center; padding: 0.4rem; cursor: pointer; transition: all 0.2s ease;}
.custom-select.active .select-trigger {border-color: #F5F5F5;}
.custom-select .select-text {color: #888; font-size: 1.4rem; font-weight: 400;}
.custom-select .select-text.active {color: #111;}
.custom-select .select-arrow {transition: transform 0.2s ease; display: flex; align-items: center;}
.custom-select.active .select-arrow {transform: rotate(180deg);}
.custom-select .select-options {position: absolute; top: 100%; right: 0; background: #fff; border-radius: 0.4rem; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); z-index: 1002; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; margin-top: 0.8rem; width: 12.6rem;}
.custom-select.active .select-options {opacity: 1; visibility: visible; transform: translateY(0);}
.custom-select .option {padding: 1.2rem 1.6rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}
.custom-select .option:hover {background-color: #F5F5F5;}
.custom-select .option.active {background-color: #F5F5F5; color: #222; font-weight: 600;}
.custom-select .option:first-child {border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem;}
.custom-select .option:last-child {border-bottom-left-radius: 0.4rem; border-bottom-right-radius: 0.4rem;}

.box-select {position: relative; width: 100%; min-height: 4.8rem;}
.box-select .select-trigger {display: flex; align-items: center; justify-content: space-between; padding: 1.2rem; border-radius: 0.4rem; border: 1px solid #E8E8E8; background-color: #fff; cursor: pointer; transition: all 0.2s ease; min-height: 4.8rem;}
.box-select .select-text {color: #aaa; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.box-select .select-text.active {color: #111;}
.box-select .select-text.active.text-red {color: #F1132D;}
.box-select .select-arrow {transition: transform 0.2s ease; display: flex; align-items: center; width: 1.6rem; height: 1.6rem;}
.box-select.active .select-arrow {transform: rotate(180deg);}
.box-select .select-options {position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0.8rem; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; margin-top: 0.8rem; max-height: 20rem; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;}
.box-select .select-options::-webkit-scrollbar {display: none;}
.box-select.active .select-options {opacity: 1; visibility: visible; transform: translateY(0);}
.box-select .option {padding: 1.2rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}
.box-select .option:hover {background-color: #F5F5F5;}
.box-select .option.active {background-color: #F5F5F5; color: #222; font-weight: 600;}

.box-select.engine .select-options {padding: 2.4rem 1.6rem; width: 48rem;}
.box-select.engine .option-title {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px; text-align: center; margin-bottom: 0.8rem;}
.box-select.engine .option {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}

.box-select.brand .select-options {width: 48rem; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; row-gap: 0.8rem; max-height: 48rem; }
.box-select.brand .option-title {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px; text-align: center; margin-bottom: 0.8rem;}
.box-select.brand .option {display: flex; align-items: center; column-gap: 0.8rem; background-color: #F8F8F8; border-radius: 1.2rem;}
.box-select.brand .option span {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}

/* radio button */
input[type="radio"].basic-radio {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="radio"].basic-radio + label {display: flex; align-items: center; cursor: pointer; font-size: 1.4rem; color: #111; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; position: relative; padding-left: 2.8rem;}
input[type="radio"].basic-radio + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background-image: url('/assets/image/mobile/icon/ic_radio_off.svg'); /* 선택 전 이미지 경로 */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease;}
input[type="radio"].basic-radio:checked + label::before {background-image: url('/assets/image/mobile/icon/ic_radio_on.svg');}

input[type="radio"].box-radio {display: none;}
input[type="radio"].box-radio + label {position: relative; cursor: pointer; padding: 0.95rem 1.2rem; border-radius: 0.4rem; border: 1px solid #E8E8E8; background-color: #fff; color: #AAA; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: all 0.2s ease; user-select: none; text-align: center;}
input[type="radio"].box-radio:checked + label {border: 1px solid #F1132D; background-color: #FFE8E8; color: #F1132D; font-weight: 600;}

input[type="radio"].circle-radio {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="radio"].circle-radio + label {display: flex; align-items: center; cursor: pointer; font-size: 1.6rem; color: #111; font-weight: 400; line-height: normal; letter-spacing: -0.016px; position: relative; padding-left: 2.8rem; padding-top: 0.2rem;}
input[type="radio"].circle-radio + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; background-image: url('/assets/image/mobile/icon/ic_circle_g.svg'); /* 선택 전 이미지 경로 */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease;}
input[type="radio"].circle-radio:checked + label::before {background-image: url('/assets/image/mobile/icon/ic_circle.svg');}

/* checkbox */
input[type="checkbox"].basic-chk {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="checkbox"].basic-chk + label {display: flex; align-items: center; cursor: pointer; font-size: 1.4rem; color: #111; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; position: relative; padding-left: 2.8rem;}
input[type="checkbox"].basic-chk + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background-image: url('/assets/image/mobile/icon/ic_radio_off.svg'); /* 선택 전 이미지 경로 */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease;}
input[type="checkbox"].basic-chk:checked + label::before {background-image: url('/assets/image/mobile/icon/ic_radio_on.svg');}

input[type="checkbox"].simple-chk {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="checkbox"].simple-chk + label {display: flex; align-items: center; cursor: pointer; font-size: 1.4rem; color: #888; font-weight: 400; line-height: 130%; letter-spacing: -0.014px; position: relative; padding-left: 2.6rem;}
input[type="checkbox"].simple-chk + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; transition: all 0.2s ease;background-image: none;border: none;}
input[type="checkbox"].simple-chk + label::after {content: ''; position: absolute; left: 0.7rem; top: 45%; transform: translateY(-50%) rotate(45deg); width: 0.4rem; height: 0.8rem; border: solid #888888; border-width: 0 2px 2px 0; transition: all 0.2s ease;}
input[type="checkbox"].simple-chk:checked + label::after {border-color: #F1132D;}

input[type="checkbox"].block-chk {position: absolute; opacity: 0; width: 0; height: 0;}
input[type="checkbox"].block-chk + label {display: flex; align-items: center; cursor: pointer; font-size: 1.6rem; color: #111; font-weight: 400; line-height: normal; letter-spacing: -0.014px; position: relative; background-color: #F7F7F7; padding: 1.4rem 1.2rem 1.2rem 4rem; border-radius: 0.8rem;}
input[type="checkbox"].block-chk + label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background-image: url('/assets/image/mobile/icon/ic_radio_off.svg'); /* 선택 전 이미지 경로 */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease; padding-left: 2rem;}
input[type="checkbox"].block-chk:checked + label {background-color: #333333; color: #eee;}
input[type="checkbox"].block-chk:checked + label::before {background-image: url('/assets/image/mobile/icon/ic_radio_on.svg');}

.chk-list {margin-top: 1.2rem; display: flex; flex-direction: column; row-gap: 0.8rem; margin-bottom: 2.8rem;}
.chk-list li {display: flex; align-items: center; justify-content: space-between;}
.chk-list li a {width: 1.6rem; height: 1.6rem;}

/* input:text, number */
.basic-text {padding: 1.2rem; width: 100%; border-radius: 0.4rem; border: 1px solid #E8E8E8; font-family: 'Pretendard'; font-size: 1.4rem; min-height: 4.8rem; line-height: 150%; letter-spacing: -0.014px;}
.basic-text::placeholder {color: #989898; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.basic-text:disabled {border: 1px solid #E8E8E8; background-color: #F4F4F4; color: #aaa;}

.attach-text {color: #111;}
.attach-text:disabled {background-color: #fff; color: #111;}

/* textarea */
.basic-textarea {padding: 1.2rem; width: 100%; resize: none; border-radius: 0.4rem; border: 1px solid #E8E8E8; font-family: 'Pretendard'; font-size: 1.4rem; height: 50rem;}
.basic-textarea::placeholder {color: #aaa; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}

.reply-textarea {padding: 1.6rem; width: 100%; resize: none; border-radius: 0.8rem; background-color: #f8f8f8; border: none; font-family: 'Pretendard'; font-size: 1.6rem; height: 17.5rem;}
.reply-textarea::placeholder {color: #aaa; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.reply-textarea.small {height: 11.3rem;}
/* [CZC 261103-0103] 커뮤니티 댓글 입력창 = 고장코드 댓글 입력창(.basic-textarea + inline height 8rem) 스펙. 비회원 이름/비번·답글창은 대상 아님 */
.reply-textarea.cmt-dtc-size {padding: 1.2rem; border-radius: 0.4rem; background-color: #fff; border: 1px solid #E8E8E8; font-size: 1.4rem; height: 8rem; min-height: 8rem;}
.reply-textarea.cmt-dtc-size::placeholder {font-size: 1.4rem;}
.reply-input-area .reply-input-box .reply-textarea.cmt-dtc-size + .txt-cnt {right: 2.4rem; bottom: 0.8rem;} /* 스크롤바(4줄↑)와 겹치지 않게 */

/* popup */
.bg {display: none; background-color: rgba(0, 0, 0, 0.60); width: 100%; height: 100%; z-index: 1001; position: fixed; top: 0; left: 0;}
.modal {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 61rem; z-index: 1001; background-color: #fff; padding: 2.4rem; border-radius: 1.6rem;}
.modal .inner {display: flex; flex-direction: column; row-gap: 2.4rem;}
.modal .modal-header {display: flex; align-items: center; justify-content: center;}
.modal .modal-header h5 {font-size: 2rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.modal .modal-body > ul {display: flex; flex-wrap: wrap; column-gap: 1.6rem; row-gap: 1.2rem;}
.modal .modal-body > ul li {width: calc(50% - 1.6rem); position: relative;}
.modal .modal-body p {color: #111; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px; text-align: center;}
.modal .modal-body p .find-id {color: #111; text-align: center; font-size: 1.6rem; font-weight: 700; line-height: 150%; letter-spacing: -0.016px;}
.modal .modal-body p .str {font-weight: 700;}
.modal .modal-body p .key {color: #F1132D;}
.modal .modal-body > a {margin: 0 auto; width: fit-content; color: #F1132D; font-size: 1.2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.012px;}
.modal .modal-body .return-info-content, .modal .modal-body .return-info-content p {text-align: left;}
.modal .modal-footer {display: flex; align-items: center; column-gap: 1rem;}
.modal .modal-footer button {width: calc(50% - 0.5rem);}
.modal .modal-footer button.wd-100 {width: 100%;}
.btn-modal {padding: 1.2rem 2rem; border-radius: 0.4rem;}
.btn-modal span {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.016px; line-height: 150%;}
.btn-modal.btn-gray {background-color: #E4E4E4; border: none;}
.btn-modal.btn-gray span {color: #252525;}

/* 문의하기 모달 */
.modal-body {display: flex; flex-direction: column; row-gap: 1.6rem;}
.modal-body .inquiry-content {display: flex; flex-direction: column; row-gap: 1.6rem;}
.modal-body .modal-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.modal-body .modal-group .txt-group {display: flex; align-items: center; column-gap: 0.8rem;}
.modal-body .modal-group .basic-textarea {height: 20rem;}
.modal-body .modal-group .title {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content;}
.modal-body .modal-group .title.req:after {content: '*'; font-size: 1.4rem; color: #F1132D; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: absolute; right: -0.6rem;}
.modal-body .modal-group .img-cnt {color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}
.modal-body .modal-group .img-cnt .cnt {position: relative;}
.modal-body .modal-group .img-cnt .cnt:after {content: '개';}
.modal-body .attach-content {display: flex; flex-direction: column; row-gap: 0.8rem;}
.modal-body .modal-group.attach {flex-direction: row; column-gap: 1.6rem;}
.modal-body .modal-group.attach .file-attach {padding: 2.4rem; border-radius: 1.2rem; border: 1px solid #E8E8E8; background-color: #F4F4F4;}
.attach-img-list {display: none; align-items: center; column-gap: 1.6rem;}
.attach-img-list.show {display: flex;}
.attach-img-list li {width: 7.1rem !important; height: 7.1rem !important; border-radius: 1.2rem; border: 1px solid #eee; position: relative; overflow: hidden; padding: 0 !important; flex-direction: row !important; row-gap: 0 !important; background-color: transparent !important;}
.attach-img-list li figure {width: 100%; height: 100%;}
.attach-img-list li figure img {object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
.attach-img-list li .delete {width: 3.6rem; height: 3.6rem; position: absolute; top: 0; right: 0;}

/* 지도에서 찾기 모달 */
#mapModal {padding: 0;}
#mapModal .inner {row-gap: 0;}
#mapModal .modal-header {padding: 2.4rem 0;}
#mapModal .modal-body {position: relative; border-radius: 0 0 1.6rem 1.6rem; overflow: hidden; height: 56rem;}
#mapModal .modal-body .map-box figure {width: 100%; height: 100%;}
#mapModal .modal-body .map-box figure img {object-fit: cover;}
#mapModal .modal-body .map-box .btn-map {position: absolute; bottom: 19rem; right: 2rem; background-color: #fff; padding: 0.8rem; border-radius: 100%; border: 1px solid #ddd; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);}
#mapModal .modal-body .map-box .btn-map figure {width: 2.4rem; height: 2.4rem;}
#mapModal .modal-map {border-radius: 1.6rem; background-color: #fff; overflow: hidden; position: absolute; bottom: 0; left: 0; width: 100%; padding: 2rem;}
.map-info {display: flex; flex-direction: column;}
.map-info .address-txt {color: #111; font-size: 1.6rem; font-weight: 600; line-height: 150%; letter-spacing: -0.016px;}
.map-info .address-jibeon {display: flex; align-items: center; column-gap: 0.8rem; margin-top: 0.8rem; margin-bottom: 1.2rem;}
.map-info .address-jibeon .jibeon {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f9f0; background-color: #F3F3F3; color: #7b7b7b; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.055px;}
.map-info .address-jibeon .address-txt-2 {color: #111; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.014px;}
#mapModal .modal-map .btn-main {border-radius: 0.4rem;}

/* 지원하기 모달 */
.apply-title {display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 2rem;}
.apply-title .category-box {display: flex; align-items: center; justify-content: space-between;}
.apply-title .category-box .txt {display: flex; align-items: center; column-gap: 0.6rem;}
.apply-title .category-box .txt .category {color: #7b7b7b; padding: 0.6rem 0.8rem 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.08px;}
.apply-title .category-box .txt .category.speed {color: #eee; border: none; background-color: #F1132D;}
.apply-title .job-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.apply-title .job-box .company {color: #555; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.07px;}
.apply-title .job-box .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; align-self: stretch; overflow: hidden; color: #111; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.apply-title .job-box .salary {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.apply-title .job-info {display: flex; align-items: center; column-gap: 0.4rem;}
.apply-title .job-info span {color: #888; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.07px;}
.apply-title .job-info span:after {content: '·'; padding-left: 0.4rem;}
.apply-title .job-info span:last-child:after {display: none;}
.apply-content {display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 2rem;}
.apply-content .title {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 130%; letter-spacing: -0.016px;}
.apply-attach {margin-top: 0.4rem; margin-bottom: 2rem;}
.apply-attach .modal-group .attach-txt {display: flex; align-items: center; justify-content: space-between;}
.apply-attach .modal-group .attach-txt .attach-file-name {color: #111; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px;}
.apply-attach .modal-group .btn-gray {border-radius: 0.2rem; background-color: #f8f8f8; line-height: 150%; letter-spacing: -0.014px;}

/* 아이디 찾기 모달 */
.modal.find .inner {row-gap: 0;}
.modal.find .inner .modal-header {margin-bottom: 2.4rem;}
.modal.find .inner .modal-body {margin-bottom: 1.4rem;}

/* 이미지 뷰어 모달 */
.modal.image-viewer {background-color: transparent; padding: 0; border-radius: 0; max-height: 70vh; height: 100%;}
.modal.image-viewer .inner {height: 100%; display: flex; flex-direction: column; row-gap: 0.8rem; align-items: center; justify-content: flex-end;}
.modal.image-viewer .inner > div {width: 100%; display: flex; align-items: center; justify-content: flex-end;}
.modal.image-viewer .inner .btn-cancel {background-color: transparent; width: 2.4rem; height: 2.4rem;}
.modal.image-viewer .inner .btn-cancel figure {width: 2.4rem; height: 2.4rem;}
.modal.image-viewer .inner figure {width: 100%; height: 100%;}

/* 단위 표시 */
.price:after {content: '원';}
.point:after {content: 'P';}
.hits:before {content: '조회수';}
.comment:before {content: '댓글'; padding-right: 0.5rem;}
.like:before {content: '좋아요'; padding-right: 0.5rem;}
.progress-cnt:after {content:'개';}
.plus:before {content: '+'; padding-right: 0.7rem;}
.minus:before {content: '-'; padding-right: 0.7rem;}
.person:after {content: '명 지원';}
.deadline:before {content: '마감일';}

@media screen and (max-width: 880px) {
    .pc {display: none;}
    .mobile {display: block;}

    .btn-bk {font-size: 1.2rem; letter-spacing: -0.012px; padding: 0.4rem 1.2rem;}

    .select .select-options {position: fixed; top: auto; bottom: 0; right: 0; margin-top: 0; margin-bottom: 0; z-index: 1002; width: 100%; border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.12);}
    .select.box-select .select-options {max-height: 27rem;}
    .option {padding: 1.6rem 0; font-size: 1.6rem; color: #111; letter-spacing: -0.016px; text-align: center;}
    .option:first-child {border-top-left-radius: 1.6rem; border-top-right-radius: 1.6rem;}
    .option:last-child {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

    .modal {width: 30rem; padding: 2.4rem 1.6rem 1.6rem 1.6rem;}
    .modal .modal-body p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
    .modal.image-viewer {width: 100%;}

    .box-select.brand .select-options {width: 100%; position: absolute; border-radius: 1.6rem; margin-top: 1rem; bottom: auto;}
    .box-select.brand .option-title {font-size: 1.6rem;}
    .box-select.brand .option span {font-size: 1.6rem;}

    .box-select.engine .select-options {width: 100%;}
}

/* ============================== [ header ] ========================================================================================== */
.header {width: 100%; background-color: #222222;}
.header.fixed {position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; background-color: #fff; color: #111; border-bottom: 1px solid #eee;}
.header .inner {display: flex; align-items: center; justify-content: space-between; max-width: 96.6rem; margin: 0 auto; padding: 2.4rem 0;}
.header .inner .gnb-menu {display: flex; align-items: center; column-gap: 1.6rem;}
.header .inner .gnb-menu h1 figure {width: 14.6rem; height: 2.1rem;}
.header .inner .gnb-menu .gnb {display: flex; align-items: center;}
.header .inner .gnb-menu .gnb li a {color: #fff; font-size: 1.8rem; font-weight: 600; padding: 0 1.3rem; display: inline-block;}
.header .inner .gnb-menu .gnb li.active a {color: #F1132D;}
.header .inner .user-menu .user-list {display: flex; align-items: center; column-gap: 0.8rem;}
.header .inner .user-menu .user-list li a {width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; position: relative;}
.header .inner .user-menu .user-list li a .badge {position: absolute; top: 1rem; right: 0; padding: 0 0.4rem; border-radius: 1rem; background-color: #F1132D; color: #fff; font-size: 1rem; font-weight: 500; line-height: 12px;}

.header.header-2 {background-color: #fff; border-bottom: 1px solid #eee;}
.header.header-2 .inner .gnb-menu .gnb li a {color: #222;}
.header.header-2 .inner .gnb-menu .gnb li.active a {color: #F1132D;}
.header-search-container {position: relative; padding: 1.2rem; background-color: #F3F3F3; border-radius: 0.8rem; margin-right: 0.4rem;}
.header-search-container:before {content:''; background: url('/assets/image/mobile/icon/ic_search_b.svg') no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: 1.2rem; width: 2.4rem; height: 2.4rem; z-index: 1;}
.header-search-container input[type="text"] {background-color: #F3F3F3; border: none; padding-left: 3.2rem; font-size: 1.4rem; width: 100%;}

.header.header-3 {background-color: #fff; border-bottom: 0.6rem solid #f7f7f7; position: relative; z-index: 1000;}
.header.header-3.no-border {border-bottom: none;}
.header.header-3.border-1 {border-bottom: none;}
.header.header-3.border-1.fixed {border-bottom: 0.1rem solid #eee;}
.header.header-3 .inner .gnb-menu .gnb li a {color: #222;}
.header.header-3 .inner .gnb-menu .gnb li.active a {color: #F1132D;}

/* 카테고리 메뉴 헤더 */
.category-menu {display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 96.6rem; margin: 0 auto; padding: 0.8rem 0; position: relative;}
.category-menu-wrapper {position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; column-gap: 1rem; max-width: 112rem; justify-content: space-between;}
.category-menu-list::before,
.category-menu-list::after {content: ''; position: absolute; top: 0; width: 4rem; height: 100%; pointer-events: none; z-index: 1; transition: opacity 0.3s ease;}
.category-menu-list::before {left: 0; background: linear-gradient(to right, #fff, transparent); opacity: 0;}
.category-menu-list::after {right: 4rem; background: linear-gradient(to left, #fff, transparent); opacity: 1;}
.category-menu-list.show-left-fade::before {opacity: 1;}
.category-menu-list.hide-right-fade::after {opacity: 0;}
.category-menu-list {display: flex; align-items: center; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; cursor: grab; user-select: none; white-space: nowrap;}
.category-menu-list:active {cursor: grabbing;}
.category-menu-list::-webkit-scrollbar {display: none;}
.category-menu-list li {flex-shrink: 0; width: fit-content; height: fit-content;}
.category-menu-list li a {padding: 1.2rem 1.6rem; white-space: nowrap; display: inline-block; color: #999; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.category-menu-list li.active a {color: #111; font-weight: 700;}

.category-dropdown {position: absolute; top: 120%; right: 12rem; width: 36rem; background-color: #fff; border-radius: 0.8rem; box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; overflow-y: auto; padding: 1.6rem 0 2.4rem 0;}
.category-dropdown.show {opacity: 1; visibility: visible; transform: translateY(0);}
.category-dropdown ul {display: flex; align-items: center; flex-wrap: wrap;}
.category-dropdown ul li {width: 50%;}
.category-dropdown ul li a {padding: 1.2rem 2rem; color: #999; font-size: 1.4rem; font-weight: 600; display: block; text-decoration: none; line-height: normal; letter-spacing: -0.07px;}
.category-dropdown ul li.active a {color: #111;}
#categoryMenuBtn {transition: transform 0.3s ease;}
#categoryMenuBtn.active {transform: rotate(180deg);}

/* 페이지 타이틀 옆 현재 카테고리명 표시 (모든 섹션 공통) */
.title-container .title-row {display: flex; align-items: baseline; gap: 0; flex-wrap: wrap;}
.title-container .title-sub-cate {font-size: 3.2rem; font-weight: 700; color: #d11; line-height: normal; margin: 0;}
.title-container .title-sub-cate::before {content: '·'; color: #888; margin: 0 0.8rem; font-weight: 400;}

/* 통일 카테고리 드롭다운 패널 (모든 섹션 공통) */
.category-dropdown.section-dropdown {width: 100%; right: 0; padding: 1.2rem 0 1.6rem; max-height: 70vh; overflow-y: auto;}
.section-dropdown .section-dropdown-quick {display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1.6rem 1.2rem; border-bottom: 1px solid #eee;}
.section-dropdown .section-dropdown-quick a {flex: 0 0 auto; text-align: center; padding: 0.8rem 1rem; color: #555; font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.07px; background: #f5f5f5; border-radius: 0.6rem; text-decoration: none;}
.section-dropdown .section-dropdown-quick a:hover {background: #e8e8e8; color: #111;}
.section-dropdown .section-dropdown-cates {display: block;}
.section-dropdown .section-dropdown-cates .cate-block {padding: 1.2rem 1.6rem; border-bottom: 1px solid #eee; display: flex; flex-direction: column; row-gap: 0.8rem;}
.section-dropdown .section-dropdown-cates .cate-block:last-child {border-bottom: 0;}
.section-dropdown .section-dropdown-cates .cate-block-title {color: #111; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.07px; line-height: normal;}
.section-dropdown .section-dropdown-cates .cate-block-title a {color: inherit; text-decoration: none;}
.section-dropdown .section-dropdown-cates .cate-block-subs {display: flex; flex-wrap: wrap; gap: 0.6rem;}
.section-dropdown .section-dropdown-cates .cate-flat-row {padding: 1.2rem 1.6rem; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap; gap: 0.6rem;}
.section-dropdown .section-dropdown-cates .cate-flat-row:last-child {border-bottom: 0;}
.section-dropdown .section-dropdown-cates .cate-round {display: inline-block; flex: 0 0 auto; width: auto; min-width: 0; padding: 0.8rem 1rem; color: #666; font-size: 1.3rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.06px; background: #f5f5f5; border-radius: 1.6rem; text-decoration: none; white-space: nowrap;}
.section-dropdown .section-dropdown-cates .cate-round:hover {background: #ececec; color: #111;}
.section-dropdown .section-dropdown-cates .cate-round.active {color: #fff; background: #d11; font-weight: 700;}
.section-dropdown .section-dropdown-cates .cate-round.active:hover {color: #fff; background: #d11;}
.section-dropdown .section-dropdown-cates .cate-block-title.active a {color: #d11;}

/* 목록 상위 카테고리 칩 (커뮤니티/마켓/지식인/SOS/구인구직/쇼핑 공통) */
/* 뎁스별 칩 나열(줄바꿈) — 폭을 넘어가면 자동으로 다음 줄로 흐름(가로 스크롤·꺽쇠 없음) */
.comm-sub-category-wrap {position: relative; padding: 1.2rem 1.6rem; border-bottom: 1px solid #eee;}
.comm-sub-category-list {list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem;}
.comm-sub-category-list > li {flex: 0 0 auto;}
.comm-sub-category-list > li > a {display: inline-block; white-space: nowrap; padding: 0.8rem 1.2rem; color: #666; font-size: 1.3rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.06px; background: #f5f5f5; border-radius: 1.6rem; text-decoration: none;}
.comm-sub-category-list > li > a:hover {background: #ececec; color: #111;}
.comm-sub-category-list > li.active > a {background: #d11; color: #fff;}

/* 모바일 통합 카테고리 패널 (1~3depth) — 커뮤니티 목록/상세 공통.
   FOUC 방지를 위해 인라인이 아닌 head 로드 style.css에 둠. */
.cate-tree {list-style:none; padding:0; margin:0;}
.cate-tree > .cate-l1 {margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px dashed #eee;}
.cate-tree > .cate-l1:last-child {border-bottom: 0;}
.cate-tree > .cate-l1 > .cate-l1-link {font-weight:700; font-size:1.5rem; color:#333; text-decoration:none; display:inline-block; margin-bottom: 0.6rem;}
.cate-tree > .cate-l1.active > .cate-l1-link {color:#d11;}
.cate-tree .cate-l2 {list-style:none; padding-left: 0; margin: 0.4rem 0; display:flex; flex-wrap:wrap; gap: 0.4rem 1rem;}
.cate-tree .cate-l2 > li {white-space: nowrap;}
.cate-tree .cate-l3 {list-style:none; padding-left: 1.4rem; margin: 0.3rem 0 0.3rem 0; display:flex; flex-wrap:wrap; gap: 0.3rem 0.8rem; flex-basis: 100%;}
.comm-cate-panel {display: none; position: relative; max-height: 33vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; margin: 1.2rem 1.6rem; padding: 1.2rem 1.6rem; border: 1px solid #eee; border-radius: 0.8rem; background: #fff; scrollbar-width: thin; scrollbar-color: #c9c9c9 #f0f0f0;}
.comm-cate-panel::-webkit-scrollbar {width: 6px; -webkit-appearance: none;}
.comm-cate-panel::-webkit-scrollbar-track {background: #f0f0f0; border-radius: 3px;}
.comm-cate-panel::-webkit-scrollbar-thumb {background: #c9c9c9; border-radius: 3px;}
.comm-cate-panel::-webkit-scrollbar-thumb:hover {background: #b0b0b0;}
.comm-cate-panel .cate-tree > .cate-l1 {margin-bottom: 1rem; padding-bottom: 0.8rem;}
.comm-cate-panel .cate-tree .cate-l2 {gap: 0.6rem;}
.comm-cate-panel .cate-tree .cate-l2 > li > a {display:inline-block; padding: 0.7rem 1.2rem; font-size: 1.3rem; font-weight: 500; line-height: 1.2; color: #666; background: #f5f5f5; border-radius: 1.6rem; text-decoration:none;}
.comm-cate-panel .cate-tree .cate-l2 > li > a:hover {background: #ececec; color: #111;}
.comm-cate-panel .cate-tree .cate-l2 > li > a.active {background: #d11; color: #fff; font-weight: 700;}
.comm-cate-panel .cate-tree .cate-l3 {gap: 0.5rem; padding-left: 1.2rem; margin-top: 0.5rem;}
.comm-cate-panel .cate-tree .cate-l3 > li > a {display: inline-block; padding: 0.5rem 1rem; font-size: 1.2rem; line-height: 1.2; color: #777; background: #fafafa; border: 1px solid #eee; border-radius: 1.4rem; text-decoration:none;}
.comm-cate-panel .cate-tree .cate-l3 > li > a:hover {background: #f0f0f0; color: #333;}
.comm-cate-panel .cate-tree .cate-l3 > li > a.active {background: #d11; color: #fff; border-color: #d11; font-weight: 700;}
@media screen and (max-width: 880px) {
    /* 1depth 스와이프 바는 모바일에서도 노출 (재능마켓과 동일) — 숨김 규칙 제거 */
    body.comm-cate-merged-page .comm-sub-category-wrap {display: none !important;}
    .comm-cate-panel {display: block;}
}

.mobile-title-wrapper {display: none;}

@media screen and (max-width: 880px) {
    .header .inner {padding: 0.8rem 2rem; max-width: 100%; width: 100%;}
    .header .inner .gnb-menu h1 figure {width: 11.8rem; height: 1.7rem;}
    .header .inner .gnb-menu .gnb {display: none;}
    .header .inner .user-menu .user-list li:last-child {display: none;}
    .header.header-2 {display: none;}
    .header .btn-main {display: none;}
    .header.header-3 {position: fixed; top: 0; left: 0;}
    .header-3 .inner {display: none;}
    .header.header-3.mobile-no-border {border-bottom: none; position: relative;}
    .mobile-title-wrapper {display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem;}
    .mobile-title-wrapper .mobile-title {display: flex; align-items: center; justify-content: space-between; column-gap: 0.8rem;}
    .mobile-title-wrapper .mobile-title figure {width: 2.4rem; height: 2.4rem;}
    .mobile-title-wrapper .mobile-title h2 {font-size: 2rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
    .mobile-title-wrapper .icon-box {display: flex; align-items: center; column-gap: 1.6rem;}
    .mobile-title-wrapper .icon-box a figure {width: 2.4rem; height: 2.4rem;}
    .category-menu {padding: 0 2rem; }
    .category-menu-list li a {padding: 1.2rem;}
    .category-menu-list li:first-child a {padding: 1.2rem 1.2rem 1.2rem 0;}
    .category-dropdown {top: 104%; right: 0; border-radius: 0 0 1.6rem 1.6rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); width: 100%;}
}

/* 에디터 본문 줄간격 */
.editor-view {line-height: 22px;}

/* 에디터 본문 유튜브 임베드 — 항상 width:100%, 16:9 비율(인라인 aspect-ratio가 HTMLPurifier에서 제거돼도 클래스로 보장) */
.editor-view iframe {max-width: 100%;}
.editor-view iframe.ch-yt-embed {display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 1rem 0;}

/* ============================== [ footer ] ========================================================================================== */
.footer {padding: 3.2rem 0; background-color: #f1f1f1; border-top: 1px solid #eee; margin-top: auto;}
.footer .inner {max-width: 96.6rem; width: 100%; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between;}
.footer .inner .company-box {display: flex; flex-direction: column; row-gap: 1.2rem;}
.footer .inner .company-box figure {width: 13.2rem; height: 1.9rem;}
.footer .inner .company-box .company-info p {color: #888; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.footer .inner .copyright-box {display: flex; flex-direction: column; align-items: flex-end;}
.footer .inner .copyright-box ul {display: flex; align-items: center; column-gap: 1.6rem;}
.footer .inner .copyright-box ul li {position: relative;}
.footer .inner .copyright-box ul li:first-child:after {content: '·'; position: absolute; top: 50%; transform: translateY(-50%); right: -1rem;}
.footer .inner .copyright-box ul li a {color: #555; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.footer .inner .copyright-box p {font-size: 1.2rem; color: #888; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; text-align: right;}

@media screen and (max-width: 880px) {
    .footer {display: none;}
}

/* ============================== [ 모바일 전용 메뉴 ] ========================================================================================== */
.mobile-menu {display: none;}

@media screen and (max-width: 880px) { 
    .mobile-menu {display: block; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; z-index: 1001; border-top: 1px solid #F4F4F4;}
    .mobile-gnb {display: flex; align-items: center; justify-content: center;}
    .mobile-gnb li a {display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 0.2rem; padding: 1rem 0 0.8rem 0; width: 7.2rem;}
    .mobile-gnb li a figure {width: 2.4rem; height: 2.4rem;}
    .mobile-gnb li a span {color: #999; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.11px;}
    .mobile-gnb li a span.active {color: #222;}
}

/* ============================== [ 마이페이지 오픈 메뉴 mypage ] ========================================================================================== */
.mypage-menu {position: fixed; top: 0; right: -110%; width: 34rem; height: 100vh; z-index: 1000; transition: right 0.3s ease-in-out; display: flex; flex-direction: column; background: #FFF; overflow-y: auto; overscroll-behavior: contain;}
.mypage-menu.open {right: 0;}
.mypage-menu-header {display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; background-color: #222222;}
.mypage-menu-header h2 {color: #fff; font-size: 2.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.024px; padding: 1.25rem 2rem; width: 100%;}
.mypage-menu-header.fixed h2 {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background-color: #fff; color: #111;}
.close-btn {background: none; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 2.4rem 2rem;}
.mypage-menu-info {display: flex; flex-direction: column; padding: 2rem; width: 100%;row-gap: 1.6rem;}
.mypage-menu-info .info-box {display: flex; align-items: center; justify-content: space-between;}
.mypage-menu-info .info-box .info-txt {display: flex; flex-direction: column; row-gap: 0.6rem;}
.mypage-menu-info .info-box .info-txt span {color: #fff; font-size: 2rem; font-weight: 600; line-height: 130%; letter-spacing: -0.02px;}
.mypage-menu-info .info-box .info-txt p {color: #888888; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px;}
.mypage-menu-info .info-box a figure {width: 2.4rem; height: 2.4rem;}
.mypage-gnb-group {display: flex; flex-direction: column; padding: 2.4rem 0 0 0; /* flex: 1; */}
.mypage-gnb-group .title {padding-left: 2.1rem; padding-bottom: 0.8rem; font-size: 1.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.014px; color: #aaa;}
.mypage-gnb > li > a {color: #111; font-size: 1.8rem; font-weight: 600; display: block; padding: 1.6rem 2rem; display: flex; justify-content: space-between;}
.mypage-gnb > li.active > a {color: #F1132D;}
.mypage-gnb > li > a figure {width: 1.6rem; height: 1.6rem;}
.mypage-gnb > li .submenu {display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}
.mypage-gnb > li.active .submenu {max-height: 300px;}
.mypage-gnb > li .submenu li a {padding: 1.2rem 2rem 1.2rem 4rem; width: 100%; display: inline-block; color: #666; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}
.mypage-gnb > li .submenu li.active a {color: #F1132D;}
.mypage-gnb > li .dropdown-toggle img {transition: transform 0.3s ease;}
.mypage-gnb > li.active .dropdown-toggle img {transform: rotate(180deg);}

.mypage-menu .account-container {display: flex; align-items: center; column-gap: 0.5rem;}
.mypage-menu .account-container .account-box {padding: 1.2rem 0.4rem 1.2rem 0.4rem; border-radius: 0.8rem; border: 1px solid #3F3F3F; background: #2F2F2F; width: 50%; display: flex; align-items: center; column-gap: 0.8rem; justify-content: space-between;}
.mypage-menu .account-container .account-box .account-info {display: flex; flex-direction: column; row-gap: 0.4rem;}
.mypage-menu .account-container .account-box .account-info .title {color: #888; font-size: 1.2rem; font-weight: 600; line-height: 130%; letter-spacing: -0.012px;}
.mypage-menu .account-container .account-box .account-info .status {display: flex; align-items: center;}
.mypage-menu .account-container .account-box .account-info .status figure {width: 1.6rem; height: 1.6rem;}
.mypage-menu .account-container .account-box .account-info .status span {color: #EEE; font-size: 1.4rem; font-weight: 600; line-height: 130%; letter-spacing: -0.014px; padding-left: 0.2rem; padding-top: 0.2rem;}
.mypage-menu .account-container .account-box > a figure {width: 1.6rem; height: 1.6rem;}

@media screen and (max-width: 880px) { 
    .mypage-menu {width: 100%; right: 0; position: relative; height: 100%; padding-bottom: 5.8rem; justify-content: space-between; overflow-y: visible; overscroll-behavior: auto;} /* [CZC 20261104-0930] 모바일 마이페이지(본문에 펼친 메뉴)가 손가락으로 스크롤 안 되던 문제 — PC 드로어 규칙(:483 overflow-y:auto + overscroll-behavior:contain)을 상속해, 스크롤할 게 없는 메뉴 상자가 터치 스크롤을 붙잡고 문서로 넘기지 않았음(고객센터 '공지사항' 아래·로그아웃이 안 보임). 본문형은 문서 스크롤을 쓰도록 해제. 모바일 드로어(.no-mobile.open)는 아래 규칙에서 다시 지정 */
    .mypage-menu.no-mobile {display: none;}
    .mypage-menu.no-mobile.open {display: flex; position: fixed; top: 0; right: 0; width: 100%; height: 100vh; z-index: 1000; padding-bottom: 0; overflow-y: auto; overscroll-behavior: contain;} /* [CZC 20261104-0930] 고정 드로어는 자체 스크롤 유지 */
    .mypage-menu-header .close-btn {display: none;}
    .mypage-menu.open .close-btn {display: flex;}
    .mypage-menu-header h2 {padding: 1.5rem 2rem; font-size: 2rem;}
    .mypage-menu-info {row-gap: 1.6rem;}
    .mypage-menu-info .info-box .info-txt span {font-size: 1.8rem; color: #eee; letter-spacing: -0.018px;}
    .mypage-menu-info .info-box .info-txt p {font-size: 1.2rem; letter-spacing: -0.014px;}
    .mypage-menu .company-container {display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 0.8rem; padding: 2rem 2rem 1.6rem 2rem;}
    .mypage-menu .company-container .company-info {padding: 1.6rem; border-radius: 8px; background: #F7F7F7; width: 100%; display: flex; flex-direction: column; row-gap: 0.4rem;}
    .mypage-menu .company-container .company-info li {display: flex; align-items: center; column-gap: 1.7rem;}
    .mypage-menu .company-container .company-info li span {font-size: 1.2rem; font-weight: 400; line-height: 130%; letter-spacing: -0.012px;}
    .mypage-menu .company-container .company-info li .subject {color: #aaa; width: 11rem;}
    .mypage-menu .company-container .company-info li .txt {color: #777;}
    .mypage-menu .company-container .copyright-box {display: flex; flex-direction: column; row-gap: 0.4rem; text-align: center;}
    .mypage-menu .company-container .copyright-box .privacy-box {display: flex; align-items: center; justify-content: center;}
    .mypage-menu .company-container .copyright-box .privacy-box a {color: #777; text-align: center; font-size: 1.2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.012px;}
    .mypage-menu .company-container .copyright-box .privacy-box a:first-child {padding-right: 1rem; position: relative;}
    .mypage-menu .company-container .copyright-box .privacy-box a:first-child:after {content: '•'; right: 0; position: absolute;}
    .mypage-menu .company-container .copyright-box p {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}

    .mypage-menu .account-container {display: flex; align-items: center; column-gap: 1.2rem;}
    .mypage-menu .account-container .account-box {padding: 1.2rem 0.8rem 1.2rem 1.2rem; border-radius: 0.8rem; border: 1px solid #3F3F3F; background: #2F2F2F; width: 50%; display: flex; align-items: center; column-gap: 0.8rem; justify-content: space-between;}
    .mypage-menu .account-container .account-box .account-info {display: flex; flex-direction: column; row-gap: 0.4rem;}
    .mypage-menu .account-container .account-box .account-info .title {color: #888; font-size: 1.2rem; font-weight: 600; line-height: 130%; letter-spacing: -0.012px;}
    .mypage-menu .account-container .account-box .account-info .status {display: flex; align-items: center;}
    .mypage-menu .account-container .account-box .account-info .status figure {width: 1.6rem; height: 1.6rem;}
    .mypage-menu .account-container .account-box .account-info .status span {color: #EEE; font-size: 1.4rem; font-weight: 600; line-height: 130%; letter-spacing: -0.014px;}
    .mypage-menu .account-container .account-box > a figure {width: 1.6rem; height: 1.6rem;}
}

/* ============================== [ 메인 상단 ] ========================================================================================== */
.main-section {background-color: #222;}
.main-section .inner {max-width: 96.6rem; display: flex; flex-direction: column; margin: 0 auto; padding: 5rem 0;}
.main-section .inner h2 {color: #eee; font-size: 4.8rem; font-weight: 700; letter-spacing: -0.24px; text-align: center; width: 100%;}
.main-section .inner h2 .txt-red {color: #F1132D;}
.main-section .main-menu {margin-top: 2.4rem; margin-bottom: 3.5rem;}
.main-section .main-menu-list {display: flex; align-items: center; justify-content: center;}
.main-section .main-menu-list li {width: 14rem;}
.main-section .main-menu-list li a {width: 100%; display: flex; flex-direction: column; padding: 1.45rem 2.4rem; align-items: center; justify-content: center;}
.main-section .main-menu-list li:first-child a figure {width: 9.2rem; height: 9.2rem;}
.main-section .main-menu-list li:nth-child(2) a figure {width: 6.7rem; height: 9.2rem;}
.main-section .main-menu-list li:nth-child(3) a figure {width: 6.3rem; height: 9.2rem;}
.main-section .main-menu-list li:last-child a figure {width: 6rem; height: 9.2rem; margin-left: 2rem;}
.main-section .main-menu-list li a span {color: #eee; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.main-section .main-search-container {width: 82rem; margin: 0 auto; position: relative;}
.main-section .main-search-container input[type="text"].main-search {border-radius: 0.8rem; border: 1px solid #3f3f3f; background-color: #2f2f2f; padding: 2.4rem 2.4rem 2.4rem 6rem; width: 100%; color: #eee;}
.main-section .main-search-container input[type="text"].main-search::placeholder {color: #808080; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.08px;}
.main-section .main-search-container button {position: absolute; top: 50%; transform: translateY(-50%); left: 2.4rem; display: flex; align-items: center; justify-content: center; padding: 0;}
.main-section .main-search-container figure {width: 2.4rem; height: 2.4rem;}
.main-section .main-sub-menu {display: flex; align-items: center; max-width: 96.6rem; justify-content: space-between; margin-top: 5.6rem; position: relative; column-gap: 2rem;}
.main-section .main-sub-menu.under-10 {justify-content: center;}
.main-section .main-sub-menu .arrow {border-radius: 100%; background-color: #e3e3e3; padding: 0.85rem 0.7rem 0.75rem 0.9rem; height: 3.2rem; width: 3.2rem;}
.main-section .main-sub-menu .arrow figure {width: 1.6rem; height: 1.6rem;}
.main-section .main-sub-menu .arrow.arrow-prev figure {transform: scaleX(-1);}
.main-section .main-sub-list-wrapper {position: relative; flex: 1; overflow: hidden;}
.main-sub-list-wrapper::before,
.main-sub-list-wrapper::after {content: ''; position: absolute; top: 0; width: 3rem; height: 100%; pointer-events: none; z-index: 1; transition: opacity 0.3s ease;}
.main-sub-list-wrapper::before {left: 0; background: linear-gradient(to right, #222, transparent); opacity: 0;}
.main-sub-list-wrapper::after {right: 0; background: linear-gradient(to left, #222, transparent); opacity: 1;}
.main-sub-list-wrapper.show-left-fade::before {opacity: 1;}
.main-sub-list-wrapper.hide-right-fade::after {opacity: 0;}
.main-section .main-sub-list {display: flex; align-items: center; column-gap: 4rem; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; cursor: grab; user-select: none;}
.main-section .main-sub-list:active {cursor: grabbing;}
.main-section .main-sub-list::-webkit-scrollbar {display: none;}
.main-section .main-sub-list li a {display: flex; flex-direction: column; align-items: center; justify-content: space-between; row-gap: 0.2rem; height: 7.9rem;}
.main-section .main-sub-list li a div {width: 6.1rem; height: 6rem; display: flex;}
.main-section .main-sub-list li a.code div {padding: 1.65rem 0.35rem;}
.main-section .main-sub-list li a.car div {padding: 1.65rem 0.4rem 1.35rem 0.65rem;}
.main-section .main-sub-list li a.engine div {padding: 1.2rem 0.7rem 1.5rem 0.8rem;}
.main-section .main-sub-list li a.tire div {padding: 0.9rem 0.85rem 0.9rem 0.95rem;}
.main-section .main-sub-list li a span {color: #e3e3e3; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px; white-space: nowrap;}

@media screen and (max-width: 880px) {
    .main-section .inner {max-width: 100%; width: 100%; padding: 0.6rem 0 2.6rem 0;}
    .main-section .inner h2 {display: none;}
    .main-section .main-menu {margin-top: 0; border-bottom: 2.4rem;}
    .main-section .main-menu-list {column-gap: 1.6rem;}
    .main-section .main-menu-list li {width: 6.8rem; height: 8.5rem;}
    .main-section .main-menu-list li a {padding: 0;}
    .main-section .main-menu-list li:first-child a figure {width: 4.8rem; height: 6.8rem;}
    .main-section .main-menu-list li:nth-child(2) a figure {width: 3.8rem; height: 6.8rem;}
    .main-section .main-menu-list li:nth-child(3) a figure {width: 3.6rem; height: 6.8rem;}
    .main-section .main-menu-list li:last-child a figure {width: 3.4rem; height: 6.8rem; margin-left: 1rem;}
    .main-section .main-menu-list li a span {font-size: 1.4rem;}
    .main-section .main-search-container {width: 100%; max-width: 55rem; padding: 0 2rem;}
    .main-section .main-search-container input[type="text"].main-search {padding: 1.2rem 1.2rem 1.2rem 4.4rem;}
    .main-section .main-search-container button {left: 3.4rem;}
    .main-section .main-sub-menu {margin-top: 1.6rem; width: 100%;}
    .main-sub-list-wrapper::before {display: none;}
    .main-sub-list-wrapper.hide-right-fade::after {display: none;}
    .main-section .main-sub-menu .arrow {display: none;}
    .main-section .main-sub-list {flex-wrap: wrap; width: 100%; padding: 0 2rem; justify-content: center; row-gap: 2rem; column-gap: 1.2rem;}
    .main-section .main-sub-list li a {height: 100%;}
    .main-section .main-sub-list li a div {display: flex; align-items: center; justify-content: center; height: 4rem; width: 5.4rem;}
    .main-section .main-sub-list li a.code div figure {width: 3.8rem;}
    .main-section .main-sub-list li a.standard div figure {width: 3.1rem;}
    .main-section .main-sub-list li a.car div figure {width: 3.3rem;}
    .main-section .main-sub-list li a.engine div figure {width: 3rem;}
    .main-section .main-sub-list li a.tire div figure {width: 2.8rem;}
    .main-section .main-sub-list li a span {font-size: 1.2rem;}
}

/* ============================== [ 메인 컨텐츠영역 ] ========================================================================================== */
.content-section {max-width: 96.6rem; margin: 0 auto; display: flex; align-items: flex-start;}
.content-section .content-box {display: flex; flex-direction: column; row-gap: 6.4rem; padding-top: 4rem; width: 100%;}
.banner-area {position: relative; width: 100%;}
.mySwiper .swiper-slide {width: 100%; border-radius: 1rem; overflow: hidden;}
.banner-area .swiper-pagination-custom {position: absolute; bottom: 1.6rem; left: auto; right: 1.6rem; z-index: 10; width: fit-content; background: rgba(68, 68, 68, 0.6); color: #fff; padding: 0.4rem 0.8rem; border-radius: 1rem; font-size: 1.2rem; font-weight: 400;}
.list-area {display: flex; flex-direction: column; row-gap: 1.6rem;}
.title-box {display: flex; align-items: flex-end; justify-content: space-between;}
.title-box .txt-title {display: flex; flex-direction: column; row-gap: 0.4rem;}
.title-box .txt-title .category {color: #F1132D; font-size: 1.6rem; font-weight: 700; line-height: normal; letter-spacing: -0.08px;}
.title-box .txt-title .title {color: #222; font-size: 2.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.12px;}
.title-box .txt-title p {color: #888; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.title-box .more-area a {display: flex; align-items: center; column-gap: 0.2rem; height: 2rem;}
.title-box .more-area a span {color: #888; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.014px;}
.title-box .more-area a figure {width: 1.6rem; height: 1.6rem;}

/* 메인, 재능마켓(market_list.html)에서 같이 사용 중 */
.product-list {display: flex; flex-wrap: wrap; column-gap: 1.6rem; row-gap: 2.4rem;}
.product-list li {width: calc(34% - 1.6rem);}
.product-list li a {display: flex; flex-direction: column;}
.product-list li a figure {width: 100%; height: 19.2rem; border-radius: 0.4rem; overflow: hidden;}
.product-list li a figure img {width: 100%; height: 100%; object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
.product-list li a .txt-box {padding: 0.8rem 0.2rem; display: flex; flex-direction: column; row-gap: 0.4rem;}
.product-list li a .txt-box .category {color: #F1132D; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.product-list li a .txt-box .subject {color: #111; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; align-self: stretch; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.product-list li a .txt-box .price-box {display: flex; align-items: center; column-gap: 0.4rem;}
.product-list li a .txt-box .price-box .percent {color: #FF0F2B; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.product-list li a .txt-box .price-box .price {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.product-list li a .txt-box .price-box .price:after {font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.product-list li a .txt-box .txt-info span {color: #888; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}
/* 재능마켓 가격(메인+목록 공용): 서비스형 옵션가/할인, 할인 시 할인전가 위·판매가 아래 2줄, 차입고·택배는 같은 줄에 나란히 */
.main-price-box {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; column-gap: 1.6rem; row-gap: 0.4rem;}
.main-price-box .mp-line {display: flex; flex-direction: column; row-gap: 0.1rem;}
.main-price-box .mp-label {color: #555; font-size: 1.2rem; font-weight: 400; line-height: 1.4;}
.main-price-box .mp-org {color: #C9C9C9; font-size: 1.3rem; font-weight: 500; text-decoration: line-through; line-height: 1.4;}
.main-price-box .mp-sale {display: flex; align-items: center; column-gap: 0.4rem;}
.main-price-box .mp-sale .percent {color: #FF0F2B; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.08px;}
.main-price-box .mp-sale .price {color: #111; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.08px;}
/* 무료공개(기술/매뉴얼) 표시 — 가격 자리 */
.main-price-box .mp-free {color: #F1132D; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.08px;}
.price-box .mp-free {color: #F1132D; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.08px;}
.product-list.style-2 li a figure {height: 17.8rem;}
.product-list.style-2 li a .txt-box {padding: 0.8rem 0.4rem;}
.product-list li a .txt-box .category-group {display: flex; align-items: center; column-gap: 0.4rem; margin-bottom: 0.4rem;}
.product-list li a .txt-box .category-group .emergency {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F1132D; color: #eee; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px;}
.product-list li a .txt-box .category-group .group {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #E4E4E4; color: #252525; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px;}
.product-list li a .txt-box .company {color: #555; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; align-self: stretch; text-overflow: ellipsis; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.product-list.style-2 li a .txt-box .subject {font-weight: 600;}

.product-list li.stop-selling {position: relative;}
.product-list li.stop-selling a figure {position: relative;}
.product-list li.stop-selling a figure:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: lightgray; opacity: 0.5;}
.product-list li.stop-selling a figure:after {content: '판매중지'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; padding: 0.4rem 0.8rem; color: #eee; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px; border-radius: 0.4rem; background-color: #222;}
.product-list li.stop-selling a .txt-box .category {color: #999;}
.product-list li.stop-selling a .txt-box .subject {color: #999;}
.product-list li.stop-selling a .txt-box .price-box .percent {color: #999;}
.product-list li.stop-selling a .txt-box .price-box .price {color: #999;}
.product-list li.stop-selling a .txt-box .price-box .org-price {color: #999;}
.product-list li.stop-selling a .txt-box .txt-info span {color: #999;}

/* [CZC 2608-24] 재능마켓 관리자 승인제 — 내 등록 재능(본인 목록)에서만 노출되는 승인대기/반려 표시.
   판매중지(stop-selling)와 같은 오버레이 방식을 쓰되 색으로 구분한다. 승인대기=주황, 반려=적색. */
.product-list li.mk-wait, .product-list li.mk-reject {position: relative;}
.product-list li.mk-wait a figure, .product-list li.mk-reject a figure {position: relative;}
.product-list li.mk-wait a figure:before, .product-list li.mk-reject a figure:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: lightgray; opacity: 0.5;}
.product-list li.mk-wait a figure:after {content: '승인대기'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; padding: 0.4rem 0.8rem; color: #fff; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px; border-radius: 0.4rem; background-color: #E58A00;}
.product-list li.mk-reject a figure:after {content: '반려'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; padding: 0.4rem 0.8rem; color: #fff; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px; border-radius: 0.4rem; background-color: #F1132D;}
.product-list li.mk-wait a .txt-box .category, .product-list li.mk-reject a .txt-box .category {color: #999;}
.product-list li.mk-wait a .txt-box .subject, .product-list li.mk-reject a .txt-box .subject {color: #999;}
.product-list li .mk-reject-reason {display: block; margin-top: 0.4rem; color: #F1132D; font-size: 1.2rem; font-weight: 500; line-height: 140%; letter-spacing: -0.06px;}

/* [CZC 2608-24] 재능마켓 장바구니 — 목록 카드에 선택 체크박스와 옵션/배송비 표기를 더한 형태 */
.product-list.cart-list li {position: relative;}
.product-list.cart-list li .cart-chk-box {position: absolute; top: 1.2rem; left: 1.2rem; z-index: 5;}
/* 체크박스 라벨에 텍스트가 없어 기본 스타일(display:flex + ::before 아이콘)만으로는 높이가 0이 되어
   클릭 자체가 되지 않는다. 아이콘 크기만큼 클릭 영역을 명시한다. */
.product-list.cart-list li .cart-chk-box label {width: 2.4rem; height: 2.4rem; padding-left: 0;}
.product-list.cart-list li .cart-chk-box label::before {left: 50%; transform: translate(-50%, -50%);}
.product-list.cart-list li .txt-box .cart-option {display: inline-block; margin-top: 0.4rem; padding: 0.2rem 0.8rem; border-radius: 0.4rem; background-color: #F3F3F3; color: #555; font-size: 1.2rem; font-weight: 500; line-height: 1.6;}
.product-list.cart-list li .txt-box .price-box .cart-fee {margin-left: 0.8rem; color: #888; font-size: 1.2rem; font-weight: 400;}
.product-list.cart-list li .setting-container {display: flex; justify-content: flex-end; padding: 0 1.2rem 1.2rem;}
/* 결제정보 요약 — 기본 .purchase-info 는 우측 약관영역(40rem)이 있는 결제화면 전제라 폭이 좁아진다.
   장바구니 요약에는 약관영역이 없으므로 한 단으로 펼친다. */
.purchase-container.cart-summary {margin-top: 3.2rem;}
.purchase-container.cart-summary .inner {display: block;}
.purchase-container.cart-summary .purchase-info {width: 100%; padding: 3.2rem 0 2.4rem;}
.purchase-container.cart-summary .purchase-info .payment-box {margin-top: 0;}
/* 장바구니 주문 페이지(sub-main-5)의 상품 목록도 결제영역과 같은 폭으로 맞춘다 */
.sub-main-5 .market-container {max-width: 96.6rem; margin: 0 auto; padding: 2.4rem 0;}

/* 상세페이지 장바구니 담기 버튼 — ic_cart.svg 는 세로로 긴 아이콘(17x24)이라 버튼 폭이 눌린다.
   하트/공유 버튼과 같은 정사각 크기로 고정한다. */
.fixed-btn-box .btn-cart-add {width: 4.8rem; min-width: 4.8rem; flex: 0 0 4.8rem; display: flex; align-items: center; justify-content: center;}
.fixed-btn-box .btn-cart-add figure {width: 2.4rem; height: 2.4rem;}
.fixed-btn-box .btn-cart-add figure img {width: 100%; height: 100%; object-fit: contain;}

.main-txt-list {display: flex; flex-direction: column; row-gap: 1.6rem; width: 100%;}
.main-txt-list li a {padding: 2rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-radius: 0.4rem; border: 1px solid #eee; background-color: #fff;}
.main-txt-list li a .subject-txt {display: flex; flex-direction: column; row-gap: 0.8rem;}
.main-txt-list li a .subject-txt .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F3F3F3; border: 1px solid #f0f0f0; width: fit-content; color: #7b7b7b; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}
.main-txt-list li a .subject-txt p {font-size: 1.6rem; font-weight: 700; color: #222; line-height: 140%; letter-spacing: -0.08px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; align-self: stretch; text-overflow: ellipsis;}
.main-txt-list li a .content-txt p {color: #666; text-overflow: ellipsis; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.07px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; align-self: stretch; text-overflow: ellipsis;}

/* 커뮤니티: 텍스트 카드 공통 스타일 */
.main-community-list li a {display: flex; flex-direction: column; justify-content: space-between; row-gap: 1.6rem; height: 100%; padding: 1.6rem; border: 1px solid #eee; border-radius: 0.8rem; background-color: #fff;}
.main-community-list li a .comm-card-top {display: flex; flex-direction: column; row-gap: 0.8rem;}
.main-community-list li a .comm-card-top .category {color: #F1132D; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.main-community-list li a .comm-card-top .subject {color: #111; font-size: 1.5rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.075px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.main-community-list li a .comm-card-info {display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.8rem; row-gap: 0.2rem; color: #888; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}

/* 메인(PC, 881px+): 섹션 카드 4개 x 2줄 그리드 */
@media screen and (min-width: 881px) {
  .content-box .list-area .product-list li {width: calc(25% - 1.2rem);}
  /* SOS: 텍스트 리스트 2열 유지 */
  .content-box .list-area.sos .main-txt-list {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.6rem; row-gap: 1.6rem;}
  .content-box .list-area.sos .main-txt-list li a {height: 100%;}
  /* 커뮤니티: 4열 wrap */
  .main-community-list {display: flex; flex-wrap: wrap; column-gap: 1.6rem; row-gap: 1.6rem;}
  .main-community-list li {width: calc(25% - 1.2rem);}
}

@media screen and (max-width: 880px) {
    /* 하단 고정 GNB(높이 5.8rem)에 본문이 가리지 않도록 전 페이지 공통 여백 */
    .page-wrap {padding-bottom: 5.8rem;}
    /* content-section 자체 하단여백은 page-wrap 전역 여백으로 대체(이중 방지) */
    .content-section .content-box {grid-template-columns: 1fr; width: 100%; display: flex; padding: 0; flex-direction: column; gap: 0;}
    .content-section .content-box:after {display: none;}
    .mySwiper .swiper-slide {border-radius: 0;}
    .banner-area .swiper-pagination-custom {bottom: 0.8rem; right: 0.8rem;}
    .list-area {padding-left: 2rem; padding-top: 3.2rem;}
    .list-area.market, .list-area.job, .list-area.shop {background-color: #fff; padding-bottom: 3.9rem;} /* [CZC 2608-17] 페이지 기본 배경 회색 → 흰색 */
    .list-area.sos, .list-area.community {padding-bottom: 3.2rem;}
    .title-box {padding-right: 2rem;}
    .title-box .txt-title .category {font-size: 1.4rem; margin-bottom: 0.4rem;}
    .title-box .txt-title .title {font-size: 2rem;}
    .title-box .more-area a span {font-size: 1.2rem;}
    .list-area {overflow: hidden;}
    .list-area .product-list {display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: row; grid-template-columns: repeat(3, 23.7rem); gap: 2.3rem 1.2rem; overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; padding-right: 2rem;}
    .list-area .product-list::-webkit-scrollbar {display: none;}
    .list-area .product-list li {width: 23.7rem;}
    /* [CZC 261022-0000] 모바일 홈 재능마켓 썸네일 퍼블대로 cover(꽉 채움)
       - 공통 contain(638줄) 상태에서 226x192 썸네일이 237px 박스 가운데 놓여 좌측 약 5.5px 들여쓰임 → 텍스트보다 오른쪽으로 밀려 보임
       - 모바일 홈 재능마켓(.list-area.market)만 적용, 다른 목록 페이지 contain 유지 */
    .list-area.market .product-list li a figure img {object-fit: cover;}
    .main-txt-list {display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: row; grid-template-columns: repeat(5, 23.7rem); gap: 1.6rem 1.2rem; overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; padding-right: 2rem;}
    /* SOS: 메인 노출 2개씩 2줄(총 4개) 고정 그리드 — 가로스크롤 없음 */
    .content-box .list-area.sos .main-txt-list {grid-template-rows: auto; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; overflow-x: visible;}
    .main-txt-list li a .subject-txt .category {font-size: 1.1rem;}
    .list-area .main-community-list {display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: row; grid-template-columns: repeat(3, 23.7rem); gap: 1.6rem 1.2rem; overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; padding-right: 2rem;}
    .list-area .main-community-list::-webkit-scrollbar {display: none;}
    .list-area .main-community-list li {width: 23.7rem;}

    .product-list li.stop-selling a figure:after {font-size: 1.1rem; letter-spacing: -0.055px;}
}

/* ============================== [ 알림 내역 - alarm.html ] ========================================================================================== */
.alarm-main {max-width: 96.6rem; margin: 0 auto; padding-top: 4.8rem; flex: 1; width: 100%;}
.alarm-main .title-container h2 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.alarm-main .title-container .mobile-title {display: none;}
.alarm-main .tab-container {display: flex; align-items: center; justify-content: space-between; margin-top: 3.2rem;}
.alarm-main .tab-container .tab-buttons {display: flex; align-items: center; column-gap: 1.2rem;}
.alarm-main .tab-container .tab-buttons .tab-btn {padding: 0.8rem 1.2rem; border: 1px solid #DDD; background-color: #fff; border-radius: 0.4rem; color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px;}
.alarm-main .tab-container .tab-buttons .tab-btn.active {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff; font-weight: 700;}
.alarm-main .tab-container .all-read {padding: 0.6rem 0.4rem; background-color: #fff; color: #aaa; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px; text-decoration: underline;}
.alarm-main .tab-contents-wrapper {margin-top: 2.4rem; margin-bottom: 6rem;}
.alarm-main .tab-contents-wrapper .tab-contents .tab-content {opacity: 0; display: none;}
.alarm-main .tab-contents-wrapper .tab-contents .tab-content.active {opacity: 1;}
.alarm-main .alarm-list {display: flex; flex-direction: column; row-gap: 1.2rem;}
.alarm-main .alarm-list li {padding-top: 1.2rem;}
.alarm-main .alarm-list li a {display: flex; flex-direction: column; row-gap: 0.4rem;}
.alarm-main .alarm-list li a .alarm-type {display: flex; align-items: center; justify-content: space-between;}
.alarm-main .alarm-list li a .alarm-type .category {color: #585858; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content; z-index: -1;}
.alarm-main .alarm-list li a.no-read .alarm-type .category:after {content:''; width: 0.4rem; height: 0.4rem; background-color: #F1132D; border-radius: 100%; position: absolute; top: 0; right: -0.8rem;}
.alarm-main .alarm-list li a .alarm-type .date {color: #aaa; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.alarm-main .alarm-list li a .alarm-content {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 150%; letter-spacing: -0.016px;}
.alarm-main .content-container.empty {width: 100%; display: flex; align-items: center; justify-content: center; margin: 17.5rem 0;}
.alarm-main .content-container.empty .empty-box {display: flex; flex-direction: column; row-gap: 1.6rem; align-items: center; justify-content: center;}
.alarm-main .content-container.empty .empty-box figure {width: 13.6rem; height: 13.6rem;}
.alarm-main .content-container.empty .empty-box span {color: #999; font-size: 1.8rem; font-weight: 400; line-height: 130%; letter-spacing: -0.018px;}

@media screen and (max-width: 880px) {
    .alarm-main {padding-top: 0;}
    .alarm-main .title-container {position: fixed; top: 0; background-color: #fff; width: 100%;}
    .alarm-main .title-container > h2 {display: none;}
    .alarm-main .title-container .mobile-title {display: flex; align-items: center; column-gap: 0.8rem; padding: 1.5rem 2rem;}
    .alarm-main .title-container .mobile-title.fixed {border-bottom: 1px solid #eee;}
    .alarm-main .title-container .mobile-title figure {width: 2.4rem; height: 2.4rem;}
    .alarm-main .title-container .mobile-title h2 {font-size: 2rem; line-height: 130%; letter-spacing: -0.02px;}
    .alarm-main .tab-container {margin-top: 6.4rem; padding: 0 2rem;}
    .alarm-main .tab-container .tab-buttons .tab-btn {font-size: 1.3rem; letter-spacing: -0.065px;}
    .alarm-main .content-container.empty {margin: 0;}
    .alarm-main .content-container.empty .empty-box {margin: 10rem auto;}
    .alarm-main .content-container.empty .empty-box span {font-size: 1.6rem; letter-spacing: -0.016px;}
    .alarm-main .tab-contents-wrapper {margin-top: 1.6rem; padding: 0 2rem;}
    .alarm-main .alarm-list li {padding: 0.4rem 0;}
    .alarm-main .alarm-list li a .alarm-type .date {font-size: 1.2rem; letter-spacing: -0.012px;}
}

/* ============================== [ 서브 공통 ] ========================================================================================== */
.sub-main {max-width: 96.6rem; margin: 0 auto; padding: 4.8rem 0 10rem 0; flex: 1; width: 100%;}
.sub-main .title-container {display: flex; flex-direction: column; row-gap: 0.7rem;}
.sub-main .title-container.mobile {display: none;}
.sub-main .title-container h2 {font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px; color: #222;}
.sub-main .title-container h2 .keyword {position: relative;}
.sub-main .title-container h2 .keyword:before {content: "'";}
.sub-main .title-container h2 .keyword:after {content: "'";}
.sub-main .title-container p {font-size: 1.6rem; color: #888; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.sub-main .filter-wrapper {display: flex; align-items: center; justify-content: space-between; margin-top: 3.2rem; margin-bottom: 1.6rem; position: relative;}
.sub-main .filter-wrapper .filter-box {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main .filter-wrapper .filter-box .filter-list {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main .filter-wrapper .filter-box .filter-list li a {padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #DDD; background-color: #fff; color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px; display: inline-block;}
.sub-main .filter-wrapper .filter-box .filter-list li.active a {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff;}

.sub-main .sort-wrapper {display: flex; align-items: center; justify-content: space-between;}
.sub-main .sort-wrapper .list-count p {color: #888; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.07px;}

.sub-main .title-container.add {display: flex; justify-content: space-between; align-items: center; flex-direction: row;}
.sub-main .title-container.add .title-txt-box {display: flex; flex-direction: column; row-gap: 0.7rem;}

.sub-main-2 {max-width: 96.6rem; margin: 0 auto; padding: 4.8rem 0 10rem 0; width: 100%;}
.sub-main-2 .title-container h2 {font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px; color: #222;}
.sub-main-2 .sort-wrapper {display: flex; align-items: center; justify-content: space-between;}
.sub-main-2 .sort-wrapper .list-count p {color: #888; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.07px;}
.sub-main-2 .filter-wrapper {display: flex; align-items: center; justify-content: space-between; margin-top: 3.2rem; margin-bottom: 1.6rem; position: relative;}
.sub-main-2 .filter-wrapper .filter-box {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main-2 .filter-wrapper .filter-box .filter-list {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main-2 .filter-wrapper .filter-box .filter-list li a {padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #DDD; background-color: #fff; color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px; display: inline-block;}
.sub-main-2 .filter-wrapper .filter-box .filter-list li.active a {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff;}

.sub-main-3 {background-color: #FAFAFA;}
.sub-main-3 .inner {max-width: 61rem; margin: 0 auto; padding: 4.8rem 0 13.9rem; display: flex; flex-direction: column; row-gap: 2.4rem;}
.sub-main-3 .inner .title-container.pc {display: flex; flex-direction: column; row-gap: 1.1rem;}
.sub-main-3 .inner .title-container.pc .category {color: #F1132D; font-size: 1.8rem; font-weight: 700; line-height: normal; letter-spacing: -0.09px;}
.sub-main-3 .inner .title-container.pc h2 {color: #111; font-size: 3rem; font-weight: 700; line-height: 130%; letter-spacing: -0.03px;}

.sub-main-4 {background-color: #fff;} /* [CZC 2608-17] 페이지 기본 배경 회색 → 흰색 */
.sub-main-4 .inner {max-width: 82rem; margin: 0 auto; padding: 4.8rem 0 20rem; display: flex; flex-direction: column; row-gap: 2.4rem;}
.sub-main-4 .inner .title-container {display: flex; flex-direction: column; row-gap: 0.7rem;}
.sub-main-4 .inner .title-container h2 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.sub-main-4 .inner .title-container .exp-box {display: flex; align-items: center; justify-content: space-between; width: 100%;}
.sub-main-4 .inner .title-container .exp-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.sub-main-4 .inner .title-container .exp-box .btn-box {width: fit-content; display: flex; align-items: center; column-gap: 1rem;}
.sub-main-4 .inner .title-container .exp-box .btn-box .btn-wh {padding: 0.4rem 1.2rem; border-radius: 0.2rem; color: #888; font-size: 1.2rem; font-weight: 600; line-height: 150%; letter-spacing: -0.012px;}

.sub-main-5 .title-inner {max-width: 96.6rem; margin: 0 auto; padding-top: 4.8rem;}
.sub-main-5 .title-inner .title-container.mobile {display: none;}
.sub-main-5 .title-inner .title-container {display: flex; align-items: center; justify-content: space-between;}
.sub-main-5 .title-inner .title-container h2 {font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px; color: #222;}
.sub-main-5 .title-inner .title-container h2 .keyword {position: relative;}
.sub-main-5 .title-inner .title-container h2 .keyword:before {content: "'";}
.sub-main-5 .title-inner .title-container h2 .keyword:after {content: "'";}
.sub-main-5 .filter-wrapper {display: flex; align-items: center; justify-content: space-between; position: relative; max-width: 96.6rem; width: 100%; margin: 0 auto; margin-top: 3.2rem;}
.sub-main-5 .filter-wrapper .filter-box {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main-5 .filter-wrapper .filter-box .filter-list {display: flex; align-items: center; column-gap: 1.2rem;}
.sub-main-5 .filter-wrapper .filter-box .filter-list li a {padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #DDD; background-color: #fff; color: #111; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: -0.07px; display: inline-block;}
.sub-main-5 .filter-wrapper .filter-box .filter-list li.active a {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff;}
.sub-main-5 .sort-wrapper {display: flex; align-items: center; justify-content: space-between;}
.sub-main-5 .sort-wrapper .list-count p {color: #888; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.07px;}

.sub-main-6 {display: flex; flex-direction: column;}

.filter-dropdown {position: absolute; top: 100%; left: 0; background-color: #fff; border-radius: 0.8rem; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); z-index: 1002; display: none; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; margin-top: 1.6rem; width: 67.2rem;}
.filter-dropdown.show {opacity: 1; visibility: visible; transform: translateY(0); display: flex; row-gap: 2.4rem; flex-direction: column;}
.filter-dropdown .close-btn {display: none;}
.filter-dropdown .inner {display: flex; flex-direction: column; row-gap: 2.4rem;}
.filter-group {display: flex; flex-direction: column; row-gap: 1.2rem; padding: 0 2rem;}
.filter-group:first-child {padding-top: 2.4rem;}
.filter-group h4 {color: #111; font-size: 1.8rem; font-weight: 600; line-height: normal; letter-spacing: -0.09px;}
.filter-options {display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem;}
.filter-options label {position: relative; cursor: pointer;}
.filter-options input[type="checkbox"],
.filter-options input[type="radio"] {display: none;}
.filter-options label {padding: 0.8rem 1.2rem; border-radius: 0.4rem; border: 1px solid #DDD; background-color: #fff; color: #111; font-size: 1.3rem; font-weight: 500; line-height: normal; letter-spacing: -0.065px; transition: all 0.2s ease; user-select: none;}
.filter-options label:hover {border-color: #ccc;}
.filter-options input[type="checkbox"]:checked + label,
.filter-options input[type="radio"]:checked + label {border: 0.5px solid #A90619; background-color: #F1132D; color: #fff; font-weight: 600;}
.filter-group.location input[type="radio"] + label,
.filter-group.location input[type="checkbox"] + label {width: 7.2rem; padding: 0.8rem; text-align: center; justify-content: center; display: flex; align-items: center;}
.filter-group.experience input[type="checkbox"] + label,
.filter-group.experience input[type="radio"] + label {width: 7.2rem; padding: 0.8rem 0; text-align: center; justify-content: center; display: flex; align-items: center;}
.filter-group.salary input[type="checkbox"] + label,
.filter-group.salary input[type="radio"] + label {min-width: 10rem; padding: 0.8rem; text-align: center; justify-content: center; display: flex; align-items: center;}
.filter-btn-box {display: flex; align-items: center; column-gap: 1.2rem; padding: 2rem; border-top: 1px solid #eee;}
.filter-btn-box .btn-main {border-radius: 0.4rem; width: calc(100% - 10rem); justify-content: center;}
.filter-btn-box .btn-main span {font-size: 1.6rem;}
.filter-btn-box .btn-normal span {font-size: 1.6rem; line-height: 150%; letter-spacing: -0.016px;}

.btn-box {width: 100%;}

@media screen and (max-width: 880px) {
    .sub-main {padding: 2.4rem 2rem;}
    .sub-main.no-padding {padding: 0; padding-top: 10rem; padding-bottom: 4.2rem;} /* GNB 5.8rem은 .page-wrap 전역여백이 담당 */
    .sub-main.no-padding.no-header {padding: 0;}
    .sub-main.no-padding .title-container {padding: 2.4rem 2rem 0 2rem;}
    .sub-main.no-padding .title-container.pc {display: none;}
    .sub-main.no-padding .sort-wrapper {padding: 0 2rem;}
    .sub-main.no-padding .filter-wrapper {padding-left: 2rem;}
    .sub-main .title-container h2 {font-size: 2rem; letter-spacing: -0.1px;}
    /* 현재 카테고리명(빨강)을 모바일에서 제목(검정)과 동일 크기로 */
    .title-container .title-sub-cate {font-size: 2rem; letter-spacing: -0.1px;}
    .sub-main .title-container p {font-size: 1.4rem; letter-spacing: -0.07px;}
    .sub-main .filter-wrapper {overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem; margin: 1.6rem 0;}
    .sub-main .filter-wrapper::-webkit-scrollbar {display: none;}
    /* 모바일: 헤더(탭) 아래로 카테고리·필터 고정(sticky). top 값은 luCommon.js가 누적 계산 */
    .sub-main.no-padding > .comm-sub-category-wrap.is-sticky-top,
    .sub-main.no-padding > .filter-wrapper.is-sticky-top {position: sticky; z-index: 50; background: #fff;}
    .sub-main .filter-wrapper .filter-box {white-space: nowrap; flex-shrink: 0;}
    .sub-main .filter-wrapper .filter-box .filter-list {white-space: nowrap;}
    .sub-main .filter-wrapper .filter-box .filter-list li {flex-shrink: 0;}
    .sub-main .filter-wrapper .filter-box .btn-reset {flex-shrink: 0;}
    .sub-main .filter-wrapper .btn-gray {flex-shrink: 0; margin-left: 1.2rem;}
    
    .sub-main-2 .filter-wrapper {overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem; margin: 1.6rem 0;}
    .sub-main-2 .filter-wrapper::-webkit-scrollbar {display: none;}
    .sub-main-2 .filter-wrapper .filter-box {white-space: nowrap; flex-shrink: 0;}
    .sub-main-2 .filter-wrapper .filter-box .filter-list {white-space: nowrap;}
    .sub-main-2 .filter-wrapper .filter-box .filter-list li {flex-shrink: 0;}
    .sub-main-2 .filter-wrapper .filter-box .btn-reset {flex-shrink: 0;}
    .sub-main-2 .filter-wrapper .btn-gray {flex-shrink: 0; margin-left: 1.2rem;}

    .sub-main-3 {background-color: #fff;}
    .sub-main-3 .inner {width: 100%; padding: 0; padding-bottom: 3.2rem; row-gap: 0;} /* GNB 5.8rem은 .page-wrap 전역여백이 담당 */
    .sub-main-3 .inner .title-container.pc {display: none;}

    .sub-main-4 .inner .title-container.pc {display: none;}
    .sub-main-4 .inner {padding: 0;}
    .sub-main-4.no-padding {padding-top: 10rem;}

    .sub-main-5 {padding: 0;}
    .sub-main-5 .title-inner {padding: 0;}
    .sub-main-5 .title-inner .title-container.pc {display: none;}
    .sub-main-5 .title-inner .title-container.mobile {display: block;}
    .sub-main-5 .title-inner .title-container.mobile .search-box {display: flex; align-items: center; column-gap: 0.8rem;}
    .sub-main-5 .title-inner .title-container.mobile .search-box a {width: 2.4rem; height: 2.4rem; padding: 0; column-gap: 0;}
    .sub-main-5 .title-inner .title-container.mobile .search-box a figure {width: 100%; height: 100%;}
    .sub-main-5 .title-inner .title-container.mobile .search-box .header-search-container {width: calc(100% - 2.4rem); margin-right: 0; margin: 0.4rem 0;}
    .sub-main-5 .title-inner .title-container.mobile .search-box .header-search-container .header-search {width: 100%;}
    .sub-main-5 .filter-wrapper {overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; margin: 1.6rem 0 0.8rem 0; padding-left: 2rem;}
    .sub-main-5 .filter-wrapper::-webkit-scrollbar {display: none;}
    .sub-main-5 .filter-wrapper .filter-box .filter-list {white-space: nowrap;}
    .sub-main-5 .filter-wrapper .filter-box .filter-list li {flex-shrink: 0;}
    .sub-main-5 .filter-wrapper .filter-box .btn-reset {flex-shrink: 0;}

    .sub-main-6 {margin-top: 10rem;}
    .sub-main-6.no-margin {margin-top: 0;}

    .filter-dropdown {position: fixed; width: 100%; top: auto; bottom: 0; max-height: 100svh; border-radius: 1.6rem 1.6rem 0 0;}
    .filter-dropdown .inner {overflow-y: scroll; width: 100%;}
    .filter-dropdown .close-btn {display: block; padding: 0; position: absolute; top: 2rem; right: 2rem;}

    .sub-main .title-container.add .btn-gray {display: none;}
}

/* ============================== [ 재능마켓 market_list.html ] ========================================================================================== */
/* 메인에 product-list 상속 받아서 사용 */
.market-container {padding: 0 0 3rem 0;}
.market-container .product-list {gap: 2.4rem 2rem; margin-top: 2rem;}
.market-container .product-list li {width: calc(25% - 1.5rem);}
.market-container .product-list li a .txt-box .price-box .org-price {color: #C9C9C9; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.07px; text-decoration: line-through;}
/* PC: 재능마켓 목록 제목 2줄 (모바일과 동일) — shop/통합검색 결과 제외 */
.market-container:not(.shop) .product-list:not(.search-list) li a .txt-box .subject {-webkit-line-clamp: 2;}

@media screen and (max-width: 880px) {
    .market-container {padding: 0 2rem 3rem 2rem;}
    .market-container .product-list {row-gap: 1.6rem;}
    .market-container .product-list li {width: 100%;}
    .market-container .product-list li a {flex-direction: row; column-gap: 1.2rem;}
    .market-container .product-list li a figure {width: 14rem; height: 10.5rem;}
    .market-container .product-list li a figure img {aspect-ratio: 4/3;}
    .market-container .product-list li a .txt-box {width: calc(100% - 15.2rem); padding: 0.4rem 0;}
    .market-container .product-list li a .txt-box .subject {-webkit-line-clamp: 2; font-size: 1.4rem;}
    .market-container .product-list li a .txt-box .txt-info span {font-size: 1.1rem;}
    .btn-location {display: none;}
    /* 할인 가격: 금액(숫자)은 한 줄 유지, 공간 부족 시 가격 요소 단위로만 줄바꿈 (금액 두줄 방지) */
    .market-container .product-list .price-box {flex-wrap: wrap; row-gap: 0.2rem;}
    .market-container .product-list .price-box .percent,
    .market-container .product-list .price-box .price,
    .market-container .product-list .price-box .org-price {white-space: nowrap;}
    .market-container .product-list .repair-line {align-items: flex-start !important;}
}

/* ============================== [ 재능마켓_상세 market_detail.html ] ========================================================================================== */
.product-container {display: flex; align-items: stretch; column-gap: 8rem; max-width: 96.6rem; margin: 0 auto; margin-top: 4.8rem;}
.product-container .product-detail {width: calc(100% - 44rem); display: flex; flex-direction: column; justify-content: space-between;}
.product-container .product-detail .product-info {display: flex; flex-direction: column; column-gap: 0.8rem;}
.product-container .product-detail .product-info .category {color: #F1132D; font-size: 2rem; font-weight: 600; line-height: normal; letter-spacing: -0.1px;}
.product-container .product-detail .product-info h3 {color: #111; font-size: 3.2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.16px;}
.product-container .product-detail .product-info p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.product-container .product-detail .product-price {display: flex; align-items: center; column-gap: 0.4rem;}
.product-container .product-detail .product-price .percent {color: #F1132D; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.product-container .product-detail .product-price .price {position: relative; color: #111; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.product-container .product-detail .product-price .org-price {color: #C9C9C9; font-size: 3.2rem; font-weight: 500; line-height: normal; letter-spacing: -0.16px; text-decoration: line-through;}
.product-container .product-img-box {width: 36rem; height: 27rem; border-radius: 1.2rem; overflow: hidden;}
.product-container .product-img-box figure {width: 100%; height: 100%;}
.product-container .product-img-box figure img {object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
.product-container .mobile {display: none;}

.section-tab {margin-top: 4rem; border-bottom: 1px solid #eee;}
.section-tab.fixed {position: fixed; top: 9rem; left: 0; right: 0; z-index: 1000; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-top: 0;}
.section-tab .section-list {max-width: 96.6rem; display: flex; align-items: center; column-gap: 0.8rem; justify-content: flex-start; margin: 0 auto;}
.section-tab .section-list li {width: fit-content; height: fit-content;}
.section-tab .section-list li a {padding: 1.2rem 1.6rem; display: inline-block; color: #999; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}
.section-tab .section-list li.active a {border-bottom: 2px solid #111; color: #111; font-weight: 700;}

.section-container {max-width: 96.6rem; margin: 0 auto; display: flex; align-items: flex-start; column-gap: 4rem;}
.section-container .info-area {width: calc(100% - 40rem); border-right: 1px solid #eee; padding-top: 4rem; display: flex; flex-direction: column; padding-bottom: 10rem;}

.info-section {display: flex; flex-direction: column;}
.info-section .txt-box {display: flex; flex-direction: column; row-gap: 2rem; padding-bottom: 2rem;}
.info-section .txt-box p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.16px;}
.info-section .attach-box {margin-bottom: 4.2rem;}
.info-section .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline; display: block;}
.info-section .attach-box .file-name {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 150%; display: block;}
.info-section .attach-box .attach-notice {color: #888; font-size: 1.3rem; margin-top: 0.5rem;}
.info-section .img-box {display: flex; flex-direction: column; row-gap: 2.5rem;}
.info-section .img-box figure {width: 50rem; height: 100%;}

.section-container .price-info-area {width: 36rem; padding-top: 4rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; row-gap: 2.4rem;}
.price-info-area.sticky {position: fixed; top: 14rem; right: calc((100vw - 96.6rem) / 2); z-index: 999;}
.info-list {padding: 1.6rem; background-color: #f4f4f4; border-radius: 0.8rem; display: flex; flex-direction: column; row-gap: 1.2rem;}
.info-list li {display: flex; align-items: flex-start; column-gap: 3.2rem;}
.info-list li .subject {width: 10rem; color: #888; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.info-list li .txt {width: calc(100% - 13.2rem); text-align: right; color: #111; font-size: 1.4rem; font-weight: 600; line-height: 140%; letter-spacing: -0.014px;}
.price-info-area .price-box {display: flex; flex-direction: column; row-gap: 1.6rem; width: 100%;}
.price-info-area .price-box .price-txt {display: flex; align-items: center; justify-content: flex-end; column-gap: 0.4rem; font-size: 2.4rem; line-height: normal; letter-spacing: -0.12px;}
.price-info-area .price-box .price-txt .percent {color: #F1132D; font-weight: 700;}
.price-info-area .price-box .price-txt .price {color: #111; font-weight: 700; position: relative;}
.price-info-area .price-box .price-txt .org-price {color: #C9C9C9; font-weight: 500; text-decoration: line-through;}
.fixed-btn-box {display: flex; align-items: stretch; column-gap: 1.2rem; width: 100%; justify-content: flex-start;}
.fixed-btn-box .btn-main.btn-lg {width: calc(100% - 12rem);}

.section {display: flex; flex-direction: column; row-gap: 2.4rem; padding-right: 4rem; padding-top: 8rem;}
.section .title-box {display: flex; align-items: center; justify-content: space-between;}
.section .title-box h4 {color: #111; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.section .title-box h4 span:after {content:'건';}
.review-list {display: flex; flex-direction: column; row-gap: 3.2rem;}
.review-list li {display: flex; flex-direction: column; row-gap: 1.6rem;}
.review-list li .review-group {display: flex; flex-direction: column; row-gap: 0.6rem;}
.review-list li .review-group .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.review-list li .review-group .star-box {display: flex; align-items: center; justify-content: space-between;}
.review-list li .review-group .star-box .star-group {display: flex; align-items: center; column-gap: 0.8rem;}
.review-list li .review-group .star-box .star-group .star-value {color: #111; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.014px;}
.review-list li .review-group .star-box .star-img {display: flex; align-items: center;}
.review-list li .review-group .star-box .star-img figure {width: 1.6rem; height: 1.6rem;}
.review-list li .review-group .star-box .date {color: #aaa; font-size: 1.2rem; text-align: right; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.review-list li .review-group .review-content p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.review-list li .review-block {display: flex; align-items: center; column-gap: 0.8rem;}
.review-list li .review-block a {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; position: relative; padding-right: 1rem;}
.review-list li .review-block a:first-child:after {content: '|'; position: absolute; right: 0;}

.inquiry-list {display: flex; flex-direction: column; row-gap: 1.6rem;}
.inquiry-list li {display: flex; flex-direction: column; row-gap: 0.8rem;}
.inquiry-list li .answer-status {display: flex; align-items: center; justify-content: space-between;}
.inquiry-list li .answer-status .answer-group {display: flex; align-items: center;}
.inquiry-list li .answer-status .answer-group .no-answer {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #aaa; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.inquiry-list li .answer-status .answer-group .user {padding-left: 0.8rem; color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.inquiry-list li .answer-status .answer-group .my-post {margin-left: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #111; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.inquiry-list li .answer-status .answer-group .done-answer {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F1132D; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.inquiry-list li .answer-status .answer-group .lock {margin-left: 0.8rem; width: 1.6rem; height: 1.6rem;}
.inquiry-list li .answer-status .date {color: #aaa; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.inquiry-list li .inquiry-content {display: flex; flex-direction: column; row-gap: 1.6rem;}
.inquiry-list li .inquiry-content .inquiry-txt {cursor: pointer; display: flex; align-items: flex-start; column-gap: 0.8rem;}
.inquiry-list li .inquiry-content .inquiry-txt figure { transition: transform 0.3s ease; width: 2.4rem !important; height: 2.4rem !important; flex-shrink: 0; margin-top: 0.2rem;}
.inquiry-list li .inquiry-content .inquiry-txt p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px; width: calc(100% - 3rem); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; align-self: stretch; text-overflow: ellipsis; margin: 0; width: 100%;}
.inquiry-list li .inquiry-content .answer-box {display: none; flex-direction: column; background-color: #F8F8F8; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease;}
.inquiry-list li .inquiry-content .answer-box p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.inquiry-list li .inquiry-content .answer-box > a {color: #5457ED; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; text-decoration: underline; margin-top: 0.7rem; margin-bottom: 1rem;}
.inquiry-list li .inquiry-content .answer-box .img-list {display: flex; align-items: center; column-gap: 1.2rem;}
.inquiry-list li .inquiry-content .answer-box .img-list li {width: 7.1rem; height: 7.1rem; border-radius: 0.2rem; border: 1px solid #eee; overflow: hidden;}
.inquiry-list li .inquiry-content .answer-box .img-list li figure {width: 100%; height: 100%;}
.edit-box {display: flex; align-items: center; column-gap: 0.8rem; margin: 1.2rem 0;}
.edit-box a {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; position: relative; padding-right: 1rem;}
.edit-box a:first-child:after {content: '|'; position: absolute; right: 0;}
.edit-box a:last-child {padding-right: 0;}
.inquiry-list li .inquiry-content .answer-box .answer-content {background-color: #fff; padding: 1.6rem; display: flex; flex-direction: column; row-gap: 0.8rem;}
.inquiry-list li .inquiry-content .answer-box .answer-content .answer-status .done-answer {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F1132D; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.inquiry-list li .inquiry-content .answer-box .answer-content .answer-status p {color: #555;}
.inquiry-list li .inquiry-content .inquiry-txt.expanded figure {transform: rotate(180deg);}
.inquiry-list li .inquiry-content .inquiry-txt .p-wrapper {overflow: hidden; transition: max-height 0.3s ease; flex: 1;}

.notice-box p {color: #555; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}

@media screen and (max-width: 880px) {
    .product-container {max-width: 100%; margin-top: 0; flex-direction: column;}
    .product-container .product-img-box {border-radius: 0; width: 100%; order: 1;margin-top:60px;}
    .product-container .product-detail {width: 100%; padding: 2rem; row-gap: 0.8rem; order: 2;}
    .product-container .product-detail .product-info {row-gap: 0.8rem;}
    .product-container .product-detail .product-info .category {font-size: 1.4rem;}
    .product-container .product-detail .product-info h3 {font-size: 2.2rem; letter-spacing: -0.11px;}
    .product-container .product-detail .product-price .percent {font-size: 2rem;}
    .product-container .product-detail .product-price .price {font-size: 2rem;}
    .product-container .product-detail .product-price .org-price {font-size: 2rem;}
    .product-container .mobile {display: block; order: 3; padding: 1.2rem 2rem 0 2rem;}

    .section-tab {margin-top: 2rem; width: 100%;}
    .section-tab.fixed {top: 5rem;}
    .section-tab .section-list {width: 100%; padding: 0 2rem; column-gap: 0;}
    .section-tab .section-list li a {padding: 1.2rem; font-size: 1.4rem; letter-spacing: -0.014px;}

    .section-container .info-area {width: 100%; padding-top: 2.2rem; border-right: none; row-gap: 2.4rem; padding-bottom: 15rem;}
    .info-section {padding: 0 2rem 2.4rem 2rem; border-bottom: 0.6rem solid #f7f7f7;}
    .info-section .img-box figure {width: 100%;}
    .section-container .price-info-area {display: none;}

    .section {padding-right: 0; padding: 0 2rem; border-bottom: 0.6rem solid #f7f7f7; padding-bottom: 2.4rem;}
    .section:last-child {border-bottom: none;}
    .section .title-box {padding-right: 0;}
    .section .title-box h4 {font-size: 1.8rem;}
    
    .review-list {row-gap: 1.6rem;}
    .review-list li {padding-bottom: 1.6rem; border-bottom: 1px solid #eee;}
    .review-list li:last-child {padding-bottom: 0; border-bottom: none;}
    .review-list li .review-group {row-gap: 0.4rem;}

    .section.inquiry {padding-left: 0; padding-right: 0;}
    .section.inquiry .title-box {padding: 0 2rem;}
    .inquiry-list li > .answer-status {padding: 0 2rem;}
    .inquiry-list li .inquiry-content .inquiry-txt {padding: 0 2rem;}
    .inquiry-list li .inquiry-content .inquiry-txt p {-webkit-line-clamp: 3;}
    .section.inquiry .btn-box {padding: 0 2rem;}

    .fixed-btn-box {position: fixed; bottom: 6rem; left: 0; background-color: #fff; z-index: 999; padding: 1.6rem 2rem;}
    .register-container > .fixed-btn-box {position: relative; bottom: auto; left: auto; z-index: auto; padding: 0; background-color: transparent;}
}

/* ============================== [ 재능마켓_상세(구매) market_purchase.html ] ========================================================================================== */
/* 재능마켓_상세 market_detail.html 상속 받아 사용 */
.product-container.purchase .price-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.product-container.purchase .price-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}

.purchase-container {border-top: 0.6rem solid #f7f7f7; margin-top: 4.8rem;}
.purchase-container .inner {max-width: 96.6rem; margin: 0 auto; display: flex; align-items: flex-start;}
.purchase-info {width: calc(100% - 40rem); padding: 4rem 23rem 10rem 0; display: flex; flex-direction: column;}
.purchase-info .point-box {display: flex; flex-direction: column;}
.purchase-info .point-box .my-point {display: flex; align-items: center; justify-content: space-between;}
.purchase-info .point-box .my-point .point-txt {display: flex; align-items: center; column-gap: 0.4rem;}
.purchase-info .point-box .my-point .point-txt figure {width: 2.4rem; height: 2.4rem;}
.purchase-info .point-box .my-point .point-txt span {color: #111; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.purchase-info .point-box .my-point .my-point-txt p {color: #444; font-size: 2rem; font-weight: 400; line-height: 140%; letter-spacing: -0.02px; position: relative;}
.purchase-info .point-box .my-point .my-point-txt span {color: #F1132D; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.02px;}
.purchase-info .point-box .my-point .my-point-txt span:after {color: #444; font-weight: 400;}
.purchase-info .point-box .use-point {display: flex; align-items: center; column-gap: 2rem; margin-top: 1.6rem;}
.purchase-info .point-box .use-point .point-input-box {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 1.2rem; border-radius: 0.44rem; border: 1px solid #E8E8E8; width: calc(100% - 10.5rem);}
.purchase-info .point-box .use-point .point-input-box span {color: #111; font-size: 1.4rem; font-weight: 500; line-height: 150%; letter-spacing: -0.014px; white-space: nowrap; flex-shrink: 0;}
.purchase-info .point-box .use-point .point-input-box input[type="text"] {border: none; text-align: right; padding-right: 2.4rem; color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; flex: 0 1 auto; min-width: 0;}
.purchase-info .point-box .use-point .point-input-box a {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; width: 2.4rem; height: 2.4rem;}
.purchase-info .point-box .use-point .btn-main {border-radius: 0.4rem; width: 8.5rem; height: 5rem;}
.purchase-info .payment-box {margin-top: 4.8rem; display: flex; flex-direction: column;}
.purchase-info .payment-box h4 {color: #111; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px; margin-bottom: 1.6rem;}
.purchase-info .payment-box .payment-info-list {width: 100%; display: flex; flex-direction: column; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #EEE; row-gap: 1.2rem;}
.purchase-info .payment-box .payment-info-list li {display: flex; align-items: center; justify-content: space-between;}
.purchase-info .payment-box .payment-info-list li span {font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px; position: relative; color: #555;}
.purchase-info .payment-box .payment-info-list li span.subject {color: #888; text-align: left; padding-left: 1.6rem;}
.purchase-info .payment-box .payment-info-list li span.subject:before {content: ''; background: url('/assets/image/mobile/icon/ic_depth.svg') no-repeat; width: 1.6rem; height: 1.6rem; position: absolute; top: 0; left: 0;}
.purchase-info .payment-box .payment-info-list li span.price {color: #555;}
.purchase-info .payment-box .payment-info-list li span.point {color: #555;}
.purchase-info .payment-box .total-price-box {display: flex; align-items: center; justify-content: space-between;}
.purchase-info .payment-box .total-price-box span {color: #111; font-size: 1.8rem; font-weight: 600; line-height: 130%; letter-spacing: -0.018px; position: relative;}
.purchase-info .payment-box .total-price-box span.total-price:after {content: '원';}
.purchase-info .payment-box .total-price-box span.total-point:after {content: 'P';}
.purchase-info .payment-box .btn-box {display: flex; align-items: center; column-gap: 1.2rem;}
.purchase-info .payment-box .btn-box button {width: 50%;}
.purchase-info .payment-box .btn-box button.btn-wh {padding: 1.2rem 2rem;}
.purchase-info .payment-box .btn-box button.btn-wh span {color: #222; font-size: 1.6rem; font-weight: 600; line-height: 150%; letter-spacing: -0.016px;}

.payment-agreement {padding: 4rem 0 0 4rem; width: 40rem; display: flex; flex-direction: column;}
.payment-agreement p {color: #888; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px; margin-bottom: 4.8rem; text-align: center;}

@media screen and (max-width: 880px) {
    .product-container.purchase {align-items: flex-start; flex-direction: row; column-gap: 1.2rem; padding: 1.6rem 2rem; margin-top: 6rem;}
    .product-container.purchase .product-img-box {width: 14rem; border-radius: 0.4rem; height: 10.5rem;}
    .product-container.purchase .product-detail {row-gap: 0.6rem; width: calc(100% - 14rem); padding: 0.4rem 0;}
    .product-container.purchase .product-info {row-gap: 0.6rem;}
    .product-container.purchase .product-info .category {font-size: 1.2rem; letter-spacing: -0.06px;}
    .product-container.purchase .product-detail .product-info h3 {font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  align-self: stretch; overflow: hidden; text-overflow: ellipsis;}
    .product-container.purchase .price-box {row-gap: 0.4rem;}
    .product-container.purchase .product-detail .product-price span {font-size: 1.6rem;}
    .product-container.purchase .price-box p {font-size: 1.1rem; letter-spacing: -0.055px; line-height: normal;}

    .purchase-container {margin-top: 0;}
    .purchase-container .inner {width: 100%; flex-direction: column; max-width: 100%;}
    .purchase-info {width: 100%; padding: 0;}
    .purchase-info .point-box {border-bottom: 0.6rem solid #f7f7f7; padding: 2rem;}
    .purchase-info .point-box .my-point .point-txt figure {width: 1.6rem; height: 1.6rem;}
    .purchase-info .point-box .my-point .point-txt span {font-size: 1.6rem; line-height: normal;}
    .purchase-info .point-box .my-point .my-point-txt span {font-size: 1.6rem;}
    .purchase-info .point-box .my-point .my-point-txt p {font-size: 1.6rem;}
    .purchase-info .point-box .use-point {column-gap: 0.8rem;}
    .purchase-info .point-box .use-point .point-input-box {width: calc(100% - 9rem);}
    .purchase-info .point-box .use-point .btn-main {width: 8.3rem; height: 5rem;}
    .purchase-info .point-box .use-point .point-input-box input[type="text"] {width: 50%;}
    .purchase-info .payment-box {margin-top: 2rem; border-bottom: 0.6rem solid #f7f7f7; padding: 0 2rem 2rem 2rem;}
    .purchase-info .payment-box h4 {font-size: 1.6rem;}
    .purchase-info .payment-box .total-price-box span {font-size: 1.6rem;}
    .purchase-info .payment-box .btn-box button {width: 100%;}
    .payment-agreement {padding: 2rem 2rem 2rem 2rem; width: 100%;}
    .payment-agreement p {margin-bottom: 0;}
    .fixed-btn-box.border {border-top: 1px solid #EEE;}
}

/* ============================== [ 재능마켓_결제완료 market_purchase_finish.html ] ========================================================================================== */
.purchase-finish-box {display: flex; flex-direction: column; max-width: 96.6rem; margin: 16rem auto 27rem; align-items: center; width: 100%;}
.purchase-finish-box > figure {width: 6.6rem; height: 6.6rem;}
.purchase-finish-box .finish-txt-box {display: flex; flex-direction: column; row-gap: 0.8rem; align-items: center; margin-top: 2.4rem;}
.purchase-finish-box .finish-txt-box h6 {color: #111; font-size: 3rem; font-weight: 700; line-height: 130%; letter-spacing: -0.03px;}
.purchase-finish-box .finish-txt-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}
.purchase-finish-box .btn-box {margin-top: 3.8rem; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.purchase-finish-box .btn-box a {width: 20rem;}
.purchase-finish-box .btn-box a.btn-main {padding: 1.1rem 2rem; width: 40rem;}
.purchase-finish-box .btn-box a.mobile {display: none;}

@media screen and (max-width: 880px) {
    .purchase-finish-box {margin: 14rem 0;}
    .purchase-finish-box .finish-txt-box h6 {font-size: 2.2rem;}
    .purchase-finish-box .btn-box {padding: 0 2rem;}
    .purchase-finish-box .btn-box a {border-radius: 0.2rem;}
    .purchase-finish-box .btn-box a.btn-main {width: 20rem;}
    .purchase-finish-box .btn-box a.mobile {display: flex;}
}

/* ============================== [ 재능마켓_등록 market_register.html ] ========================================================================================== */
/* register.html 로 되어있는 곳에서 모두 같이 사용 */
.register-container {padding: 4rem; background-color: #fff; border: 1px solid #eee; display: flex; flex-direction: column; row-gap: 2.4rem;}
.register-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.register-group h6 {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.register-group > p {color: #888; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.register-group .txt-group p {color: #555; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.register-group .subject {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content;}
.register-group .subject.req:after {content: '*'; font-size: 1.4rem; color: #F1132D; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: absolute; right: -0.6rem;}

.register-group .point-box {display: flex; align-items: center; justify-content: space-between; background-color: #333; border-radius: 0.8rem; padding: 1.6rem;}
.register-group .point-box .txt {display: flex; align-items: center; column-gap: 0.4rem;}
.register-group .point-box .txt figure {width: 1.6rem; height: 1.6rem;}
.register-group .point-box .txt span {color: #eee; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.register-group .point-box .point-txt .point {color: #eee; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.register-group .point-box .point-txt .point:after {font-weight: 400; padding-left: 0.4rem;}

.register-group .btn-main {border-radius: 0.4rem;}
.register-group .btn-main:disabled {background-color: #eee;}
.register-group .btn-main:disabled span {color: #a9a9a9;}

.register-group .title {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}

.register-group .info-box {display: flex; flex-direction: column; row-gap: 0.8rem; border-radius: 8px; background: #F7F7F7; padding: 1.6rem; margin-top: 12rem; width: 100%;}
.register-group .info-box p {color: #555; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}
.register-group .info-box ul li {color: #555; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.register-group .info-box ul li:first-child {font-weight: 600;}

.bank-area, .receipt-box, .personal-box, .company-box, .company-receipt {display: none; flex-direction: column; row-gap: 2.4rem;}
.bank-area.show, .receipt-box.show, .personal-box.show, .company-box.show, .company-receipt.show {display: flex;}
.register-group .bank-info-box {border-radius: 0.4rem; border: 1px solid #EEE; background: #F7F7F7; padding: 1.6rem;}
.register-group .bank-info-box ul {display: flex; flex-direction: column; row-gap: 0.8rem;}
.register-group .bank-info-box ul li {display: flex; align-items: center;}
.register-group .bank-info-box ul li .b-subject {width: 9.2rem; color: #888; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.register-group .bank-info-box ul li .account-txt {display: flex; align-items: center; column-gap: 1.6rem;}
.register-group .bank-info-box ul li .account-txt .btn-bk {border-radius: 0.2rem; background: #333; padding: 0.4rem 1.2rem; color: #eee; font-size: 1.2rem; font-weight: 600; line-height: 150%; letter-spacing: -0.012px;}
.register-group .bank-info-box ul li .b-value {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}

.subject-box {display: flex; align-items: center; justify-content: space-between;}
.subject-box .etc {color: #888; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.subject-box .etc span {font-weight: 700;}

.option-group {display: flex; column-gap: 1.2rem;}
.option-group input[type="radio"].box-radio + label {width: 50%;}
.option-group .input-box {position: relative; width: 100%;}
.option-group .input-box .basic-text {padding: 1.2rem 2.4rem 1.2rem 1.2rem;}
.option-group .input-box.attach .basic-text {padding: 1.2rem 6rem 1.2rem 1.2rem;}
.option-group .input-box .unit {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; color: #F1132D; font-size: 1.2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.012px;}
.option-group .input-box .btn-attach {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; border-radius: 0.2rem; padding: 0.4rem 1.2rem; width: fit-content;}
.option-group .input-box .btn-attach span {font-size: 1.2rem; letter-spacing: -0.012px;}
.option-group .input-box .time {position: absolute; top: 50%; transform: translateY(-50%); right: 7rem; color: #F1132D; font-size: 1.2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.012px;}
.option-group .basic-textarea {height: 35rem;}
.option-group .btn-line {width: 50%;}

.option-group .file-attach {padding: 2rem; border-radius: 1.2rem; border: 1px solid #E8E8E8; background-color: #F4F4F4; width: 7.1rem; height: 7.1rem;}

.option-group .point-input-box {display: flex; align-items: center; justify-content: flex-end; position: relative; padding: 1.2rem; border-radius: 0.44rem; border: 1px solid #E8E8E8; width: 100%;}
.option-group .point-input-box input[type="text"],
.option-group .point-input-box input[type="number"] {border: none; text-align: right; padding-right: 2.4rem; color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; width: 100%;}
.option-group .point-input-box a {position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; width: 2.4rem; height: 2.4rem;}

.option-group.validate {display: flex; flex-direction: column; row-gap: 0.8rem;}
.option-group.validate .validate-txt {display: none; width: 100%; text-align: right; color: #F1132D; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.option-group.validate .validate-txt.show {display: block;}

.option-group.ticket {display: flex; justify-content: space-between; align-items: center;}
.option-group.ticket .ticket-name {display: flex; align-items: center; column-gap: 0.4rem;}
.option-group.ticket .ticket-name figure {width: 2rem; height: 2rem;}
.option-group.ticket .ticket-name span {color: #111; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.016px;}
.option-group.ticket .price {color: #222; text-align: right; font-size: 2.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.12px;}
.register-group.fixed-btn-box.ticket {row-gap: 2rem;}

@media screen and (max-width: 880px) {
    .register-container {border: none; width: 100%; padding: 7.2rem 2rem 8rem 2rem; row-gap: 1.6rem;}
    .register-container.no-padding {padding: 1.2rem 0;}
    .register-container.no-padding .status-container {margin: 0 2rem;}
    .register-container.no-padding .register-group {padding: 0 2rem;}
    .register-container.no-padding .register-group.border {border-bottom: 6px solid #F7F7F7; padding-bottom: 1.6rem;}
    .register-container.no-padding .register-group.fixed-btn-box {padding: 2rem;}
    .register-group .info-box {margin-top: 5rem;}
}

/* ============================== [ 정비지식인_리스트 knowhow_list.html ] ========================================================================================== */
.qna-container {padding: 3.2rem 0 5rem 0;}
.qna-list {display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch;}
.qna-list li {width: calc(50% - 1rem); border-radius: 0.4rem; border: 1px solid #eee; background-color: #fff;}
/* 지식인/SOS 메인 목록: PC에서 한 줄에 1개씩 노출 */
.sub-main.no-padding .qna-list li {width: 100%;}
.qna-list li > a {padding: 2.4rem 2rem; display: flex; flex-direction: column; row-gap: 2.4rem; justify-content: space-between; height: 100%;}
.qna-list li > a .qna-info-box {display: flex; flex-direction: column; row-gap: 1.6rem;}
.qna-list li > a .qna-info-box .q-title-box {display: flex; align-items: center; justify-content: space-between; column-gap: 1.2rem;}
.qna-list li > a .qna-info-box .q-title-box .q-title {display: flex; flex-direction: column; row-gap: 1.2rem; width: calc(100% - 4.8rem);}
.qna-list li > a .qna-info-box .q-title-box .q-title .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #F3F3F3; color: #7b7b7b; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.055px; width: fit-content;}
/* 카테고리 + SOS채택글 칩을 한 줄에 배치 (지식인 목록/상세 공용) */
.q-cate-row {display: flex; align-items: center; column-gap: 0.6rem; flex-wrap: wrap;}
.chip-sos {flex-shrink: 0; padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #F1132D; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px; width: fit-content; white-space: nowrap;}
.qna-list li > a .qna-info-box .q-title-box .q-title .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; color: #222; text-overflow: ellipsis; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px; position: relative;}
.qna-list li > a .qna-info-box .q-title-box .q-title .title:before {content: 'Q.'; color: #F1132D; padding-right: 0.5rem;}
.qna-list li > a .qna-info-box .q-title-box .car-logo {border-radius: 0.8rem; border: 1px solid #eee; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center;}
.qna-list li > a .qna-info-box .q-content-box p {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; color: #444; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.qna-list li > a .btn-box {display: flex; flex-direction: column; row-gap: 2.4rem;}
.qna-list li > a .btn-box .q-info {display: flex; align-items: center; justify-content: space-between;}
.qna-list li > a .btn-box .q-info .q-info-subject {display: flex; align-items: center;}
.qna-list li > a .btn-box .q-info .q-info-subject .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.qna-list li > a .btn-box .q-info .q-info-subject .location {color: #111; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; padding-left: 0.4rem;}
.qna-list li > a .btn-box .q-info .q-info-subject .hits {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; padding-left: 0.8rem;}
.qna-list li > a .btn-box .q-info .q-info-subject .hits:before {padding-right: 0.5rem;}
.qna-list li > a .btn-box .q-info .q-info-date .date {color: #999; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.qna-list li > a .btn-box .btn-qna {width: 100%; padding: 0.8rem 1.6rem; border-radius: 0.2rem; border: 1px solid #ddd; background: #f5f5f5; color: #222; font-size: 1.4rem; font-weight: 500; line-height: 150%; letter-spacing: -0.14px;}
.qna-list li > a .btn-box .btn-qna:disabled {background-color: #eee; color: #A9A9A9;}
.qna-list li > a .btn-box .btn-qna.btn-yet {background-color: #eee; color: #A9A9A9; border: none;}
.qna-list li > a .btn-box .btn-qna.btn-done {background-color: #222; color: #eee;}
.qna-list li > a .btn-box .btn-qna.btn-red-line {display: flex; align-items: center; justify-content: center; border: 1px solid #F1132D; background-color: #fff; color: #F1132D;}

@media screen and (max-width: 880px) {
    .qna-container {padding: 0.8rem 0 0 0;}
    .qna-list {gap: 0;}
    .qna-list li {width: 100%; border: none; border-bottom: 6px solid #f7f7f7;}
    .qna-list li:last-child {border-bottom: none;}
    .qna-list li > a .qna-info-box .q-title-box {align-items: flex-start;}
    .qna-list li > a .qna-info-box .q-title-box .q-title .title {font-size: 1.6rem; letter-spacing: -0.08px;}
}

/* ============================== [ 정비지식인_상세 knowhow_detail.html ] ========================================================================================== */
.detail-container {background-color: #ffff; border: 1px solid #eee; display: flex; flex-direction: column;}
.detail-container .question-box {padding: 4rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #EEE;}
.detail-container .question-box .q-info {display: flex; align-items: center; justify-content: space-between;}
.detail-container .question-box .q-info .q-info-subject {display: flex; align-items: center;}
.detail-container .question-box .q-info .q-info-subject .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.detail-container .question-box .q-info .q-info-subject .location {color: #111; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; padding-left: 0.4rem;}
.detail-container .question-box .q-info .q-info-subject .hits {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; position: relative; padding-left: 0.8rem;}
.detail-container .question-box .q-info .q-info-subject .hits:before {padding-right: 0.5rem;}
.detail-container .question-box .q-info .q-info-date .date {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.detail-container .question-box .q-title-box {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 1.6rem;}
.detail-container .question-box .q-title-box .q-title {display: flex; flex-direction: column; row-gap: 1.2rem; width: calc(100% - 4.8rem);}
.detail-container .question-box .q-title-box .q-title .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; color: #7b7b7b; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.055px; width: fit-content;}
.detail-container .question-box .q-title-box .q-title .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; color: #222; font-size: 2.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.12px; position: relative;}
.detail-container .question-box .q-title-box .q-title .title:before {content: 'Q.'; color: #F1132D; padding-right: 0.5rem;}
.detail-container .question-box .q-title-box .car-logo {border-radius: 0.8rem; border: 1px solid #eee; width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center;}
.detail-container .question-box .q-title-box .car-logo figure {width: 100%; height: 100%;}
.detail-container .question-box .q-content-box {width: 100%;}
.detail-container .question-box .q-content-box p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.detail-container .question-box .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px; text-decoration: underline;}
.detail-container .question-box .image-box {width: 100%;}
.detail-container .question-box .image-box figure {width: 100%; height: 100%;}
.detail-container .question-box .answer-box {display: flex; flex-direction: column;}
.detail-container .question-box .answer-box .btn-bk {margin-top: 2rem;}
.detail-container .answer-content {display: none; flex-direction: column; border-bottom: 1px solid #eee; padding: 4rem 4rem 3.2rem 4rem;}
.detail-container .answer-content.show {display: flex;}
.detail-container .answer-content .a-title {color: #111; font-size: 2rem; font-weight: 700; line-height: normal; letter-spacing: -0.1px; margin-bottom: 1.6rem;}
.detail-container .answer-content .a-box {margin-top: 2.4rem; display: flex; flex-direction: column; row-gap: 1.2rem;}
.detail-container .answer-content .a-box .a-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.detail-container .answer-content .a-box .a-group .subject {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content;}
.detail-container .answer-content .a-box .a-group .subject.req:after {content: '*'; color: #F1132D;}
.detail-container .answer-content .a-box .a-group .file-attach {border-radius: 1.2rem; border: 1px solid #e8e8e8; background-color: #f4f4f4; padding: 2rem; display: flex; align-items: center; justify-content: center; width: 7.1rem; height: 7.1rem;}
.detail-container .answer-content .a-box .a-group .file-attach figure {width: 3.2rem; height: 3.2rem;}
.detail-container .answer-content .a-box .a-group .basic-textarea {height: 17.5rem;}
.detail-container .answer-content .btn-box {margin-top: 3.2rem; width: 100%;}
.detail-container .answer-content .btn-box .btn-main {padding: 1.2rem 2rem;}
.detail-container .answer-container .title-box {padding: 4rem 4rem 1.6rem 4rem;}
.detail-container .answer-container .title-box .subject {color: #111; font-size: 2rem; font-weight: 700; line-height: normal; letter-spacing: -0.1px;}
.detail-container .answer-container .answer-list {display: flex; flex-direction: column;}
.detail-container .answer-container .answer-list li {padding: 3.2rem 4rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #f3f3f3;}
.detail-container .answer-container .answer-list li .user-container {display: flex; align-items: center; justify-content: space-between;}
.detail-container .answer-container .answer-list li .user-container .user-info-box {display: flex; align-items: center; column-gap: 1.2rem;}
.detail-container .answer-container .answer-list li .user-container .user-info-box .user {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 140%; letter-spacing: -0.016px;}
.detail-container .answer-container .answer-list li .user-container .user-info-box .date {color: #999; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.detail-container .answer-container .answer-list li .user-container .btn-line {border-radius: 0.4rem; padding: 0.8rem 1.2rem; column-gap: 0.4rem;}
.detail-container .answer-container .answer-list li .user-container .btn-line figure {width: 1.2rem; height: 1.2rem;}
.detail-container .answer-container .answer-list li .user-container .btn-line span {font-size: 1.2rem; letter-spacing: -0.012px;}
.detail-container .answer-container .answer-list li .a-content p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.detail-container .answer-container .answer-list li .a-content .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}
.detail-container .answer-container .answer-list li .a-content figure {width: 100%; height: 100%; margin-top: 1.2rem;}
.detail-container .answer-container .answer-list li.choose {background-color: #F7F7F7;}
.detail-container .answer-container .answer-list li.choose .choose-answer {display: flex; align-items: center; justify-content: center; width: fit-content; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border-radius: 0.4rem; background-color: #F1132D;}
.detail-container .answer-container .answer-list li.choose .choose-answer figure {width: 1.6rem; height: 1.6rem;}
.detail-container .answer-container .answer-list li.choose .choose-answer span {color: #eee; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px;}

.mobile-more-list {opacity: 0; visibility: hidden; transition: all 0.2s ease; background-color: #fff; position: fixed; top: auto; bottom: 0; right: 0; margin-top: 0; margin-bottom: 0; z-index: 1003; width: 100%; border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);}
.mobile-more-list.show {opacity: 1; visibility: visible; transform: translateY(0);}
.mobile-more-list li {width: 100%;}
.mobile-more-list li a {display: inline-block; width: 100%; text-align: center; padding: 1.2rem 1.6rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}

@media screen and (max-width: 880px) {
    .category-menu.detail {display: none;}
    .detail-container {border: none;}
    .detail-container .question-box {padding: 2rem; border-bottom: 6px solid #eee;}
    .detail-container .question-box .q-info {margin-bottom: 1.2rem;}
    .detail-container .question-box .q-title-box .q-title .title {font-size: 1.6rem;}
    .detail-container .question-box .answer-box .btn-bk {margin-top: 0.8rem; padding: 1.2rem 2rem; font-size: 1.6rem;}
    .detail-container .answer-container .title-box {padding: 2rem;}
    .detail-container .answer-container .title-box .subject {font-size: 1.8rem;}
    .detail-container .answer-container .answer-list li {padding: 2rem; row-gap: 0.8rem;}
    .detail-container .answer-container .answer-list li:last-child {border-bottom: none;}

    .detail-container .answer-content {padding: 2rem 2rem 10rem 2rem;}
    .detail-container .answer-content .a-box {margin-top: 0;}
    .detail-container .answer-content .a-box .a-group .basic-textarea {height: 17.5rem;}
}

/* ============================== [ 정비SOS sos_list.html ] ========================================================================================== */
/* knowhow_list.html 상속 받아 사용 */
/* sos_detail.html 에서도 동일하게 사용 중 */
.category-box {display: flex; align-items: center; column-gap: 0.8rem;}
.category-box .point-box {display: flex; align-items: center; column-gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #F1132D;}
.category-box .point-box figure {width: 1.2rem; height: 1.2rem;}
.category-box .point-box .point {color: #F1132D; font-size: 1.1rem; line-height: normal; font-weight: 600; letter-spacing: -0.01px;}

/* ============================== [ 구인구직_리스트 job_list.html ] ========================================================================================== */
.job-container {margin-top: 1.6rem;}
.job-list {display: flex; align-items: stretch; gap: 2rem; flex-wrap: wrap;}
.job-list li {width: calc(50% - 1rem);}
/* 구인구직 메인 목록: PC에서 한 줄에 1개씩 노출 */
.sub-main.no-padding .job-list li {width: 100%;}
.job-list li a {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; row-gap: 1.2rem; padding: 2rem; border-radius: 0.4rem; border: 1px solid #eee;}
.job-list li a .category-box {display: flex; align-items: center; column-gap: 0.6rem;}
.job-list li a .category-box .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; color: #7b7b7b; font-size: 1.1rem; font-weight: 600; line-height: normal; letter-spacing: -0.055px;}
.job-list li a .category-box .category.speed {color: #eee; background-color: #F1132D; border: none;}
.job-list li a .job-box {display: flex; flex-direction: column; row-gap: 1.2rem;}
.job-list li a .job-box .company {color: #555; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.07px;}
.job-list li a .job-box .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; align-self: stretch; overflow: hidden; color: #111; text-overflow: ellipsis; font-size: 2rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.1px;}
.job-list li a .job-box .salary {color: #111; font-size: 1.6rem; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -0.08px;}
.job-list li a .job-info {display: flex; align-items: center; column-gap: 0.4rem;}
.job-list li a .job-info span {color: #888; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.07px;}
.job-list li a .job-info span:after {content: '·'; padding-left: 0.4rem;}
.job-list li a .job-info span:last-child:after {display: none;}

@media screen and (max-width: 880px) {
    .job-container {margin-top: 0; padding-bottom: 6rem;}
    .job-list {gap: 0;}
    .job-list li {width: 100%;}
    .job-list li a {border: none; border-bottom: 1px solid #EEE;}
    .job-list li:last-child a {border: none;}
    .job-list li a .job-box .title {font-size: 1.6rem;}
    .job-list li a .job-info span {font-size: 1.2rem;}
}

/* ============================== [ 구인구직_상세 job_detail.html ] ========================================================================================== */
/* market_detail.html 상속 받아 사용 */
.product-container.job .product-img-box {position: relative;}
.product-container.job .product-detail .product-info {row-gap: 0.8rem;}
.product-container.job .product-detail .product-info .category-box .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; color: #7b7b7b; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.product-container.job .product-detail .product-info .category-box .category.speed {background-color: #F1132D; color: #fff; border: none;}
.product-container.job .product-detail .product-info .company {color: #555; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}
.section-tab .job-inner {display: flex; align-items: center; justify-content: space-between; max-width: 96.6rem; margin: 0 auto;}
.section-tab .job-inner .section-list {width: fit-content; margin: 0;}
.section-tab .job-inner .btn-box {width: fit-content; display: flex; align-items: center; column-gap: 1rem;}
.section-tab .job-inner .btn-box .btn-wh {padding: 0.4rem 1.2rem; border-radius: 0.2rem; color: #888; font-size: 1.2rem; font-weight: 600; line-height: 150%; letter-spacing: -0.012px;}
.section-container .price-info-area .info-list {width: 100%;}
.price-info-area .price-box.job button {width: 50%;}

@media screen and (max-width: 880px) {
    .fixed-btn-box.job button {width: 50% !important;}
    .section-tab .job-inner .btn-box {display: none;}
    .section-tab .job-inner .section-list {width: 100%;}
    .section-tab .job-inner .section-list li {width: 50%;}
    .section-tab .job-inner .section-list li a {width: 100%; text-align: center;}

    .product-container .product-img-box .icon-box {position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 2rem; z-index: 2;}
    .product-container .product-img-box .icon-box.scroll {background-color: #fff;}
    .product-container .product-img-box > figure {position: relative;}
    .product-container .product-img-box > figure::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; z-index: 1;}

    /* 재능마켓·구인구직 상세 히어로 이미지: 헤더(56px) 아래 20px 갭 + 좌우 20px, 그라데이션은 이미지 뒤 배경(backdrop)으로 (purchase/sell 제외) */
    .sub-main-5 .product-container:not(.purchase) .product-img-box {margin-top: 76px; padding: 0 20px; box-sizing: border-box; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);}
    .sub-main-5 .product-container:not(.purchase) .product-img-box > figure {background: transparent;}
    .sub-main-5 .product-container:not(.purchase) .product-img-box > figure img {position: relative; z-index: 1;}
    .sub-main-5 .product-container:not(.purchase) .product-img-box > figure::before {display: none;}

    .product-container.job .product-detail .product-info .category-box .category {font-size: 1.4rem;}
    .product-container.job .product-detail .product-info .company {font-size: 1.4rem;}
    .product-container.job .mobile {padding: 0.4rem 2rem 0 2rem;}
}

/* ============================== [ 검색결과 search.html ] ========================================================================================== */
/* 기 작성된 코드 상속 받아 사용 */
.category-menu-container {border-bottom: 1px solid #f7f7f7;}
.sub-main-5 .category-menu-wrapper {width: 100%; max-width: 100%;}
.sub-main-5 .category-dropdown {right: 0;}
.tab-contents-wrapper.search .tab-contents .tab-content {display: none;}
.tab-contents-wrapper.search .tab-contents .tab-content.active {display: block;}
.tab-contents-inner {max-width: 96.6rem; margin: 1.6rem auto 14rem; width: 100%;}
.tab-contents-inner .qna-container {padding: 1.6rem 0 5rem 0;}
.empty-box {display: flex; flex-direction: column; row-gap: 1.6rem; align-items: center; justify-content: center; margin: 20rem auto;}
.empty-box figure {width: 13.6rem; height: 13.6rem;}
.empty-box span {color: #999; text-align: center; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}

@media screen and (max-width: 880px) {
    .search .market-container {padding: 0;}
    .section-tab.search {overflow-x: auto; overflow-y: hidden; padding: 0 2rem; scrollbar-width: none;  -ms-overflow-style: none; margin-top: 0; position: fixed; top: 4.9rem; background-color: #fff; z-index: 1000;}
    .tab-contents-wrapper.search {margin-top: 10rem;}
    .tab-contents-wrapper.search .tab-contents .tab-content {display: none;}
    .tab-contents-wrapper.search .tab-contents .tab-content.active {display: block;}
    .tab-contents-wrapper.search .tab-contents-inner {margin: 0;}
    .tab-contents-wrapper.search .tab-contents-inner .market-container .product-list {margin-top: 0.8rem;}
    .section-tab.search::-webkit-scrollbar {display: none;}
    .section-tab.search .section-list {display: flex; white-space: nowrap; min-width: max-content; padding: 0;}
    .section-tab.search .section-list li {flex-shrink: 0; white-space: nowrap;}
    .section-tab.search .section-list li a {padding: 1.2rem 1rem; display: inline-block; white-space: nowrap;}

    .category-menu-container {border-bottom: 6px solid #f7f7f7;}
    .search-fixed {position: fixed; top: 9.7rem; background-color: #fff; width: 100%; z-index: 1000;}
    .tab-contents-inner {width: 100%; padding: 0 2rem; padding-bottom: 7rem;}
    .tab-contents-inner.no-padding {padding: 0; margin: 0; margin-bottom: 6rem;}
    .tab-contents-inner.no-padding .sort-wrapper {padding: 0 2rem;}
    .tab-contents-inner .qna-container {padding: 0 0 5rem 0;}
}

/* ============================== [ 커뮤니티_리스트 community_list.html ] ========================================================================================== */
.community-container {margin-top: 1.6rem;}
.community-list {display: flex; flex-direction: column;}
.community-list li a {padding: 2.4rem 0.8rem; border-bottom: 1px solid #eee; background-color: #fff; display: flex; align-items: center; justify-content: space-between; column-gap: 1.6rem;}
.community-list li a .community-title-box {display: flex; flex-direction: column; row-gap: 1.2rem;}
.community-list li a .community-title-box .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; color: #222; text-overflow: ellipsis; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}
.community-list li a .community-title-box .user-box {display: flex; align-items: center; column-gap: 0.8rem;}
.community-list li a .community-title-box .user-box .user {color: #111; font-size: 1.6rem; font-weight: 700; line-height: normal;  letter-spacing: -0.016px;}
.community-list li a .community-title-box .user-box .hits {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; position: relative;}
.community-list li a .community-title-box .user-box .date {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
/* 커뮤니티 베스트 게시물 블록 (최근7일 인기글, 목록 상단) */
.community-best { border: 1px solid #eee; border-radius: 0.8rem; background: #fafafa; margin: 1.2rem 1.6rem; padding: 1.2rem 1.6rem; }
.community-best .best-head { display: flex; align-items: center; column-gap: 0.8rem; margin-bottom: 0.8rem; }
.community-best .best-head .best-badge { display: inline-flex; align-items: center; justify-content: center; height: 2rem; padding: 0 0.8rem; border-radius: 1rem; background-color: #F1132D; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; }
.community-best .best-head .best-title-txt { font-size: 1.5rem; font-weight: 700; color: #111; }
.community-best .best-list { list-style: none; padding: 0; margin: 0; }
.community-best .best-list > li > a { display: flex; align-items: center; column-gap: 1rem; padding: 0.7rem 0; text-decoration: none; }
.community-best .best-list > li + li > a { border-top: 1px solid #eee; }
.community-best .best-list .best-rank { flex: 0 0 auto; width: 2rem; text-align: center; font-size: 1.4rem; font-weight: 700; color: #F1132D; }
.community-best .best-list .best-tit { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 1.4; font-size: 1.4rem; font-weight: 500; color: #222; }
.community-best .best-list .best-meta { flex: 0 0 auto; display: flex; align-items: center; column-gap: 0.8rem; }
.community-best .best-list .best-meta > span { display: inline-flex; align-items: center; column-gap: 0.2rem; color: #999; font-size: 1.2rem; }
.community-best .best-list .best-meta img { width: 1.6rem; height: 1.6rem; }
.community-best .best-list .best-meta em { font-style: normal; }
@media (max-width: 768px) {
  .community-best { margin: 1.2rem 1.6rem; padding: 1rem 1.2rem; }
  .community-best .best-list .best-tit { font-size: 1.3rem; }
}

/* 커뮤니티 목록 한 줄 레이아웃 (comm-oneline) — 공지/QnA/마이페이지 목록 미영향 위해 클래스 스코프 */
.community-list.comm-oneline li a {padding: 1.4rem 1.2rem; display: flex; align-items: center; justify-content: space-between; column-gap: 1.6rem;}
.community-list.comm-oneline li a .title {flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; word-break: break-word; overflow: hidden; text-overflow: ellipsis; color: #222; font-size: 1.5rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.075px;}
/* NEW 배지(정사각형 N 한 글자) + 카테고리 라벨(볼드X·작게·회색) — 목록/상세 공용 */
.badge-new {display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 1.8rem; height: 1.8rem; margin-right: 0.4rem; border-radius: 0.3rem; background-color: #F1132D; color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1; letter-spacing: 0; flex: 0 0 auto;}
.cate-label {font-weight: 400; font-size: 0.85em; color: #888;}
.community-list.comm-oneline li a .meta-box {flex: 0 0 auto; display: flex; align-items: center; column-gap: 0.8rem; white-space: nowrap;}
.community-list.comm-oneline li a .meta-box .user {color: #555; font-size: 1.3rem; font-weight: 600; line-height: normal; letter-spacing: -0.013px;}
.community-list.comm-oneline li a .meta-box .hits,
.community-list.comm-oneline li a .meta-box .date {color: #999; font-size: 1.3rem; font-weight: 400; line-height: 150%; letter-spacing: -0.013px;}
.community-list.comm-oneline li a .meta-box .meta-view,
.community-list.comm-oneline li a .meta-box .meta-like,
.community-list.comm-oneline li a .meta-box .meta-dislike,
.community-list.comm-oneline li a .meta-box .meta-comment {display: inline-flex; align-items: center; column-gap: 0.2rem; color: #999; font-size: 1.3rem; font-weight: 400;}
.community-list.comm-oneline li a .meta-box img {width: 1.6rem; height: 1.6rem;}
.community-list.comm-oneline li a .meta-box .meta-view .ic-view {display: inline-block; width: 1.6rem; height: 1.6rem; background: url(/assets/image/icon/ic_view_g.svg) center / contain no-repeat;}
/* 전역 .hits:before(content:'조회수') 무효화 — 목록에선 아이콘+숫자만 */
.community-list.comm-oneline li a .meta-box .meta-view .hits::before {content: none;}
.community-list.comm-oneline li a .meta-box em {font-style: normal;}
@media (max-width: 768px) {
  /* 모바일: 제목 최대 2줄, 닉네임부터(메타 전체)는 다음 줄로 */
  .community-list.comm-oneline li a {flex-direction: column; align-items: flex-start; row-gap: 0.6rem; padding: 1.3rem 1.6rem; column-gap: 0;}
  .community-list.comm-oneline li a .title {width: 100%; font-size: 1.4rem;}
  .community-list.comm-oneline li a .meta-box {width: 100%; column-gap: 0.8rem;}
  /* 모바일에서도 등록일시 표시 (YY-MM-DD HH:mm) */
  .community-list.comm-oneline li a .meta-box .date {display: inline-flex; align-items: center;}
  .community-list.comm-oneline li a .meta-box .user,
  .community-list.comm-oneline li a .meta-box .hits,
  .community-list.comm-oneline li a .meta-box .date,
  .community-list.comm-oneline li a .meta-box .meta-view,
  .community-list.comm-oneline li a .meta-box .meta-like,
  .community-list.comm-oneline li a .meta-box .meta-dislike,
  .community-list.comm-oneline li a .meta-box .meta-comment {font-size: 1.1rem;}
  .community-list.comm-oneline li a .meta-box img {width: 1.4rem; height: 1.4rem;}
}
.community-list li a .comment-box {padding: 1.6rem 1.2rem; display: flex; flex-direction: column; row-gap: 0.4rem; justify-content: center; align-items: center; background-color: #f5f5f5; border-radius: 0.4rem;}
.community-list li a .comment-box .comment-cnt {color: #333; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.07px;}
.community-list li a .comment-box .subject {color: #888; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}

@media screen and (max-width: 880px) {
    .community-container {margin-top: 0; padding-bottom: 5.6rem;}
    .community-list li a {padding: 2rem;}
    .community-list li a .community-title-box {width: calc(100% - 5rem);}
    .community-list li a .community-title-box .title {font-size: 1.6rem;}
    .community-list li a .community-title-box .user-box .user {font-size: 1.4rem;}
    .community-list li a .community-title-box .user-box .hits {font-size: 1.2rem;}
    .community-list li a .community-title-box .user-box .date {font-size: 1.2rem;}
    .community-list li a .comment-box {width: 5rem;}
}

/* ============================== [ 커뮤니티_상세 community_list.html ] ========================================================================================== */
.community-box {padding: 4rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #EEE;}
.community-box .title {color: #222; font-size: 2.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.12px;}
.community-box .c-info {display: flex; align-items: center; justify-content: space-between;}
.community-box .c-info .c-info-subject {display: flex; align-items: center; column-gap: 0.8rem;}
.community-box .c-info .c-info-subject .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.community-box .c-info .c-info-subject .hits {color: #999; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.community-box .c-info .c-info-date .date {color: #999; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.community-box p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px;}
.community-box .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}
.community-box figure {width: 100%;}
.comment-status-box {padding: 1.6rem 4rem; display: flex; align-items: center; column-gap: 2.4rem; border-bottom: 1px solid #EEE;}
.comment-status-box .comment-box {display: flex; align-items: center; column-gap: 0.4rem;}
.comment-status-box .comment-box figure {width: 2.4rem; height: 2.4rem;}
.comment-status-box .comment-box span {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.comment-list {display: flex; flex-direction: column;}
.comment-list > li {border-bottom: 1px solid #F3F3F3; padding-bottom: 1.2rem;}
.comment-list > li .comment-area {display: flex; flex-direction: column; row-gap: 1.2rem; padding: 2rem 4rem 0.8rem 4rem;}
.comment-list > li .comment-area.new {padding-top: 0.8rem;}
.comment-list > li .comment-content {display: flex; flex-direction: column; row-gap: 0.8rem;}
.comment-list > li .comment-area.new .comment-content {padding-left: 2rem;}
/* [CZC 261025-2335] 댓글/답글 본문에 공백 없는 긴 URL 입력 시 화면 가로로 늘어나던 문제(문서폭 400→2704px) 수정
   - overflow-wrap:anywhere → 박스 폭을 넘는 긴 문자열만 줄바꿈, 일반 단어 줄바꿈은 기존과 동일 */
.comment-list > li .comment-content p {color: #444; font-size: 1.6rem; font-weight: 400; line-height: 140%; letter-spacing: -0.08px; overflow-wrap: anywhere;}
.comment-list > li .comment-content .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}
.comment-list > li .user-info {display: flex; align-items: center; justify-content: space-between;}
.comment-list > li .user-info .user-txt {display: flex; align-items: center; column-gap: 1.2rem;}
.comment-list > li .user-info .user-txt .user {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 140%; letter-spacing: -0.016px;}
.comment-list > li .user-info .user-txt .date {color: #999; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.comment-list > li .user-info .icon-box {position: relative;}
.comment-list > li .user-info .icon-box .more-list {position: absolute; top: 100%; right: 0; background: #fff; border-radius: 0.4rem; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; margin-top: 0.8rem; width: 12.6rem;}
.comment-list > li .user-info .icon-box .more-list.show {opacity: 1; visibility: visible; transform: translateY(0);}
.comment-list > li .user-info .icon-box .more-list li {width: 100%;}
.comment-list > li .user-info .icon-box .more-list li a {display: inline-block; width: 100%; text-align: center; padding: 1.2rem 1.6rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}
.comment-list > li .img-list {display: flex; align-items: center; column-gap: 0.8rem;}
.comment-list > li .img-list li {width: 7.1rem; height: 5.3rem; border-radius: 0.4rem; overflow: hidden;}
.comment-list > li .img-list li figure {width: 100%; height: 100%;}
.comment-list > li .img-list li figure img {object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
.comment-list > li .reply-box {display: flex; align-items: flex-start; flex-direction: column; column-gap: 1.6rem;}
.comment-list > li .comment-area.new .reply-box .reply-write-box {padding-left: 2rem;}
.comment-list > li .reply-box .reply-write-box {display: flex; align-items: center; column-gap: 1.6rem;}
.comment-list > li .reply-box .reply-write-box a {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.comment-list > li .reply-box .reply-write-box .like-box {display: flex; align-items: center;}
.comment-list > li .reply-box .reply-write-box .like-box a figure {width: 2.4rem; height: 2.4rem;}
.comment-list > li .reply-box .reply-write-box .like-box .like-cnt {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.comment-list > li .reply-box .reply-write-box .like-box .like-cnt.thumbs {color: #F1132D;}
.comment-list > li .reply-box .reply-write-box .dislike-box {display: flex; align-items: center;}
.comment-list > li .reply-box .reply-write-box .dislike-box a figure {width: 2.4rem; height: 2.4rem;}
.comment-list > li .reply-box .reply-write-box .dislike-box .dislike-cnt {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}

.mobile-reply-box {display: none;}
.mobile-reply-box {padding: 2rem; border-top: 1px solid #eee;}
.mobile-reply-box a {padding: 1.2rem; display: flex; align-items: center; column-gap: 0.8rem; border-radius: 0.8rem; background-color: #f8f8f8;}
.mobile-reply-box a figure {width: 2.4rem; height: 2.4rem;}
.mobile-reply-box a span {color: #999; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}

.reply-bottom {padding: 2.4rem 4rem 3.2rem 4rem;}
.reply-input-area {display: flex; flex-direction: column; row-gap: 1.2rem; width: 100%;}
.reply-input-area .reply-input-box {position: relative;}
.reply-input-area .reply-input-box .txt-cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; display: flex; align-items: center;}
.reply-input-area .reply-input-box .txt-cnt span {color: #AAA; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.012px;}
.reply-input-area .reply-btn-box {display: flex; align-items: flex-start; justify-content: space-between;}
.reply-input-area .reply-btn-box .attach-group {display: flex; flex-direction: column; width: calc(100% - 9.4rem);}
.reply-input-area .reply-btn-box .attach-group .attach-btn-box {display: flex; align-items: center; column-gap: 0.8rem;}
.reply-input-area .reply-btn-box .attach-group .attach-btn-box .attach-name {color: #555; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; align-self: stretch; text-overflow: ellipsis; height: fit-content; padding-top: 0.4rem;}
.reply-input-area .reply-btn-box .attach-group .attach-img-list {column-gap: 0.8rem; margin-top: 1.2rem;}
.reply-input-area .reply-btn-box .attach-group .attach-img-list li {width: 7.1rem; height: 7.1rem; border-radius: 1.2rem; border: 1px solid #eee; position: relative;}
.reply-input-area .reply-btn-box .btn-group {display: flex; align-items: center; column-gap: 0.8rem; width: 9.4rem;}
.reply-input-area .reply-btn-box .btn-group button {padding: 0.4rem 0.8rem; border-radius: 0.2rem;}
.reply-input-area .reply-btn-box .btn-group button span {font-size: 1.2rem; font-weight: 600; line-height: 150%; letter-spacing: -0.012px;}
.reply-input-area .reply-btn-box .btn-group .btn-gray {background-color: #e4e4e4;}
.reply-input-area .reply-btn-box .btn-group .btn-gray span {color: #252525;}

.org-reply {display: none; margin-top: 1.6rem;}
.org-reply.show {display: flex;}

.comment-bottom-box {display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 2rem; border-top: 1px solid #eee; background-color: #f9f9f9;}
.comment-bottom-box > a {display: flex; align-items: center;}
.comment-bottom-box > a figure {width: 2.4rem; height: 2.4rem;}
.comment-bottom-box > a span {color: #111; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.07px; padding-top: 0.2rem;}
.comment-bottom-box .status-box {display: flex; align-items: center; column-gap: 1.6rem;}
.comment-bottom-box .status-box .status {display: flex; align-items: center;}
.comment-bottom-box .status-box .status figure {width: 2.4rem; height: 2.4rem;}
.comment-bottom-box .status-box .status span {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px; padding-top: 0.25rem;}

@media screen and (max-width: 880px) {
    .community-box {padding: 0 2rem 2.4rem 2rem; border-bottom: 6px solid #f7f7f7; margin-top: 2rem;}
    .community-box .title {margin-top: 1.2rem; font-size: 1.6rem;}
    .community-box .c-info {justify-content: flex-start; column-gap: 0.8rem;}
    .community-box .attach-box a {font-size: 1.4rem;}
    .comment-status-box {padding: 1.6rem 2rem;}
    .comment-status-box .comment-box.pc {display: none;}
    .comment-status-box .comment-box a.mobile {display: inline-block;}
    .comment-status-box .comment-box a.mobile figure {width: 1.6rem; height: 1.6rem;}
    .comment-list > li .comment-area {padding: 2rem 2rem 0.8rem 2rem;}
    .comment-list > li .user-info .icon-box {position: static;}
    .comment-list > li .user-info .icon-box .more-list {position: fixed;  width: 100%;  top: auto;  bottom: 0; left: 0; right: 0; border-radius: 1.6rem 1.6rem 0 0; margin-top: 0; transform: translateY(100%); transition: all 0.3s ease; z-index: 1003;} /* [CZC 20261104-0845] 모바일 댓글 수정/삭제 시트가 하단 탭바(.mobile-menu z-index:1001)에 가려 '삭제'를 못 누르던 문제 — PC 규칙의 z-index:1000 을 상속받고 있었음. 게시글 더보기 시트(.mobile-more-list 1003)와 같은 값으로 올림 */

    /*.reply-bottom {display: none;}
    .mobile-reply-box {display: block;}*/
    .comment-area.new .org-reply.show {padding-left: 2rem;}
}

/* ============================== [ 로그인 h_login.html ] ========================================================================================== */
.register-container .logo {width: 31.2rem; margin: 0 auto; margin-top: 7.2rem; margin-bottom: 5.6rem;}
.register-container .input-group {display: flex; flex-direction: column; row-gap: 1.2rem;}
.register-container .register-group.row {flex-direction: row; justify-content: space-between;}
.register-container .register-group .txt-a {padding: 0.4rem 1.2rem; color: #222; font-size: 1.4rem; font-weight: 600; line-height: 150%; letter-spacing: -0.014px;}
.register-container .sns-group {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 5.6rem; margin-bottom: 7.2rem; row-gap: 1.2rem;}
.register-container .sns-group span {color: #AAA; text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.register-container .sns-group .btn-bookmark figure {width: 4.8rem; height: 4.8rem;}

@media screen and (max-width: 880px) {
    .register-container .logo {width: 22rem; margin: 4.3rem auto;}
    .register-container .sns-group {margin-top: 1.6rem;}
}

/* ============================== [ 회원가입 h_join.html ] ========================================================================================== */
.register-group .chk-list {row-gap: 1.6rem; margin-bottom: 0;}
.register-group .chk-list li {padding-left: 1.2rem;}
.register-group .chk-list li input[type="checkbox"].simple-chk + label {padding-left: 3.4rem;}

/* ============================== [ 아이디/비밀번호 찾기 h_find_id_password.html ] ========================================================================================== */
.find-container {background-color: #fff; border: 1px solid #eee; display: flex; flex-direction: column;}
.find-container .section-tab {margin-top: 0;}
.find-container .section-tab .section-list {width: 100%; max-width: 100%;}
.find-container .section-tab .section-list li {width: 50%;}
.find-container .section-tab .section-list li a {width: 100%; text-align: center;}
.find-container .tab-contents-wrapper {padding: 3.2rem 4rem 4rem 4rem;}
.find-container .find-box {display: flex; flex-direction: column; row-gap: 2.4rem;}

@media screen and (max-width: 880px) {
    .find-container {border: none; margin-top: 5rem;}
    .find-container .tab-contents-wrapper {padding: 2rem;}
}

/* ============================== [ 프로필 h_profile.html ] ========================================================================================== */
.profile-container {padding: 3.2rem 2.4rem; border-radius: 0.8rem; background-color: #222; width: 100%; margin-top: 3.2rem; display: flex; flex-direction: column; row-gap: 2.4rem;}
.profile-container .user-box {display: flex; align-items: center; justify-content: space-between;}
.profile-container .user-box h3 {color: #EEE; font-size: 2.4rem; font-weight: 600; line-height: 130%; letter-spacing: -0.024px;}
.profile-container .user-box a {display: flex; align-items: center; column-gap: 0.4rem;}
.profile-container .user-box a span {color: #BBB; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.016px; padding-top: 0.2rem;}
.profile-container .user-box a figure {width: 2.4rem; height: 2.4rem;}
.profile-container .explain-box {padding: 2.4rem 2rem; display: flex; flex-direction: column; row-gap: 1.6rem; border-radius: 0.8rem; background-color: #2F2F2F;}
.profile-container .explain-box .txt-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.profile-container .explain-box .txt-box .welcome {color: #F1132D; font-size: 1.2rem; font-weight: 600; line-height: 130%; letter-spacing: -0.012px;}
.profile-container .explain-box .txt-box p {color: #BBB; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}
.profile-container .explain-box .img-list {display: flex; align-items: center; column-gap: 1.2rem; flex-wrap: wrap; row-gap: 1.2rem;}
.profile-container .explain-box .img-list li {width: 8rem; height: 8rem; border-radius: 0.4rem; overflow: hidden;}
.profile-container .explain-box .img-list li figure {width: 100%; height: 100%;}
.profile-container .explain-box .img-list li figure img {object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
.profile-container .activity-box .activity-list {padding: 1.2rem; display: flex; align-items: center; column-gap: 3.2rem;}
.profile-container .activity-box .activity-list li {width: 25%; position: relative;}
.profile-container .activity-box .activity-list li:after {content:''; width: 1px; height: 2.4rem; background-color: #2f2f2f; position: absolute; right: -1.6rem; top: 50%; transform: translateY(-50%);}
.profile-container .activity-box .activity-list li:last-child:after {display: none;}
.profile-container .activity-box .activity-list li a {display: flex; flex-direction: column; row-gap: 0.8rem;}
.profile-container .activity-box .activity-list li a .status-cnt {color: #EEE; text-align: center; font-size: 2rem; font-weight: 600; line-height: 110%; letter-spacing: -0.02px;}
.profile-container .activity-box .activity-list li a .subject {color: #888; text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 110%; letter-spacing: -0.014px;}
.profile-container .sub-title.mobile {display: none;}
.progress-container {margin-top: 3.2rem; display: flex; flex-direction: column; row-gap: 1.6rem;}
.progress-container .title {color: #AAA; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px; padding-left: 2rem;}
.progress-container .progress-list {display: flex; flex-direction: column;}
.progress-container .progress-list li a {display: flex; justify-content: space-between; padding: 2.4rem 2rem;}
.progress-container .progress-list li a .subject {color: #111; font-size: 1.8rem; font-weight: 600; line-height: 130%; letter-spacing: -0.018px;}
.progress-container .progress-list li a .progress-box {display: flex; align-items: center; column-gap: 0.8rem;}
.progress-container .progress-list li a .progress-box .progress-cnt {color: #F1132D; font-size: 1.6rem; font-weight: 600; line-height: normal; padding-top: 0.2rem; letter-spacing: -0.016px;}
.progress-container .progress-list li a .progress-box figure {width: 1.6rem; height: 1.6rem;}

/* 미니홈피: 커버 이미지 + 인사말 HTML */
.profile-container .profile-cover {width: 100%; border-radius: 0.8rem; overflow: hidden; aspect-ratio: 16 / 9; background-color: #2f2f2f;}
.profile-container .profile-cover .cover-bg {width: 100%; height: 100%;}
.profile-container .profile-cover .cover-bg img {width: 100%; height: 100%; object-fit: cover;}
.profile-container .explain-box .txt-box .profile-greeting {color: #BBB; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px; word-break: break-word;}
.profile-container .explain-box .txt-box .profile-greeting img {max-width: 100%; height: auto;}
.profile-container .explain-box .txt-box .profile-greeting p {margin: 0 0 0.6rem;}
/* 사진첩 첨부: 동영상/오디오/파일도 노출(이미지는 8rem 썸네일 유지) */
.profile-container .explain-box .img-list li.att-video, .profile-container .explain-box .img-list li.att-audio, .profile-container .explain-box .img-list li.att-file {width: 100%; height: auto; border-radius: 0.4rem; overflow: visible;}
.profile-container .explain-box .img-list li.att-video video {width: 100%; height: auto; max-height: 40rem; border-radius: 0.4rem; background: #000; display: block;}
.profile-container .explain-box .img-list li.att-audio audio {width: 100%; display: block;}
.profile-container .explain-box .img-list li.att-file a {color: #BBB; font-size: 1.4rem; text-decoration: underline; word-break: break-all;}
/* 첨부 나열: 라운드박스(인사말) 밖에 — 이미지 그룹(썸네일) / 동영상·오디오는 각각 별도 라인 */
.profile-container .profile-attach {display: flex; flex-direction: column; row-gap: 1.6rem;}
.profile-container .profile-attach .att-images {display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 1.2rem; row-gap: 1.2rem;}
.profile-container .profile-attach .att-images li {width: 8rem; height: 8rem; border-radius: 0.4rem; overflow: hidden;}
.profile-container .profile-attach .att-images li figure {width: 100%; height: 100%;}
.profile-container .profile-attach .att-images li figure img {width: 100%; height: 100%; object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
.profile-container .profile-attach .att-media {width: 100%;}
.profile-container .profile-attach .att-media.att-video video {width: 100%; height: auto; max-height: 40rem; border-radius: 0.8rem; background: #000; display: block;}
.profile-container .profile-attach .att-media.att-audio audio {width: 100%; display: block;}
.profile-container .profile-attach .att-media.att-file a {color: #BBB; font-size: 1.4rem; text-decoration: underline; word-break: break-all;}
/* 마이프로필 타이틀바: 프로필 보기 + 공유 버튼 그룹 */
.title-container.add .title-btns {display: flex; align-items: center; gap: 0.8rem;}

/* 프로필수정 모달(팝업): 세로 길어지면 본문만 스크롤, 헤더/저장버튼 고정 */
#editProfileModal {max-height: 90vh;}
/* .modal 의 상하 패딩(2.4rem*2=4.8rem)을 빼야 form+패딩이 90vh를 넘지 않아 푸터가 안 밀림 */
#editProfileModal > form {display: flex; flex-direction: column; max-height: calc(90vh - 4.8rem);}
#editProfileModal .inner {flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;}
#editProfileModal .modal-header {flex: 0 0 auto;}
#editProfileModal .modal-footer {flex: 0 0 auto; padding-top: 1.6rem;}
#editProfileModal .modal-body {flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 0.4rem;}
#editProfileModal .url-input-box {display: flex; align-items: center; column-gap: 0.4rem; border: 1px solid #E8E8E8; border-radius: 0.4rem; padding: 0 1.2rem;}
#editProfileModal .url-input-box .url-prefix {color: #888; font-size: 1.4rem; white-space: nowrap;}
#editProfileModal .url-input-box .basic-text {border: 0; flex: 1; min-width: 0; padding: 1.2rem 0;}
#editProfileModal .url-help {color: #888; font-size: 1.2rem; margin-top: 0.4rem;}

@media screen and (max-width: 880px) {
    .sub-main .title-container.add.no-mobile {display: none;}
    .profile-container {margin-top: 0; border-radius: 0; row-gap: 0; padding-top: 0;}
    .profile-container .user-box {padding: 1.6rem 0;}
    .profile-container .user-box a span {display: none;}
    .profile-container .sub-title.mobile {display: block; padding: 1.6rem 0;}
    .profile-container .sub-title.mobile .sub-row {display: flex; align-items: center; justify-content: space-between;}
    .profile-container .sub-title.mobile .sub-row .subject {display: flex; align-items: center; column-gap: 0.8rem;}
    .profile-container .sub-title.mobile .sub-row .subject figure {width: 2.4rem; height: 2.4rem;}
    .profile-container .sub-title.mobile .sub-row .subject h2 {color: #EEE; font-size: 2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
    .profile-container .sub-title.mobile .sub-row .icon-box {display: flex; align-items: center; column-gap: 1.6rem;}
    .profile-container .sub-title.mobile .sub-row .icon-box .btn-bookmark figure {width: 2.4rem; height: 2.4rem;}
    .profile-container .explain-box {padding: 2rem 1.2rem 1.2rem 1.2rem;}
    .profile-container .explain-box .txt-box p {font-size: 1.4rem; letter-spacing: -0.014px;}
    .profile-container .explain-box .img-list li {width: 6.3rem; height: 6.3rem;}
    .profile-container .activity-box .activity-list {padding: 0.8rem 1.2rem 1.2rem 1.2rem; margin-top: 1.6rem;}
    .profile-container .activity-box .activity-list li a .status-cnt {font-size: 1.8rem;}
    .profile-container .activity-box .activity-list li a .subject {font-size: 1.1rem;}
    .progress-container {margin-top: 2.4rem; row-gap: 0;}
    .progress-container .title {font-size: 1.2rem;}
    .progress-container .progress-list li a {padding: 1.6rem 2rem;}
    .progress-container .progress-list li a .subject {font-size: 1.6rem;}
}

/* ============================== [ 정기이용권 h_regular_ticket.html ] ========================================================================================== */
.sub-container {display: flex; flex-direction: column; row-gap: 3.2rem; margin-top: 3.2rem;}
.status-container {display: flex; align-items: center; justify-content: space-between; padding: 3.2rem 2.4rem; border-radius: 0.8rem; border: 1px solid #3f3f3f; background-color: #2f2f2f;}
.status-container .status-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.status-container .status-box .subject {color: #888; font-size: 1.6rem; font-weight: 600; line-height: 130%; letter-spacing: -0.016px;}
.status-container .status-box .status-txt {display: flex; align-items: center; column-gap: 0.4rem;}
.status-container .status-box .status-txt figure {width: 2.4rem; height: 2.4rem;}
.status-container .status-box .status-txt .status {color: #EEE; font-size: 2.4rem; font-weight: 600; line-height: 130%; letter-spacing: -0.024px;}
.status-container > a {display: flex; align-items: center;}
.status-container > a span {color: #BBB; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}
.status-container > a figure {width: 2.4rem; height: 2.4rem;}

.history-container {display: flex; flex-direction: column;}
.history-container .title {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.history-container .empty {margin: 18rem auto;}
.history-container .empty span {color: #999; text-align: center; font-size: 1.8rem; font-weight: 400; line-height: 130%; letter-spacing: -0.018px;}

.history-container .history-list {display: flex; flex-direction: column;}
.history-container .history-list li {padding: 2.4rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee;}
.history-container .history-list.point-list li:last-child {border-bottom: none;}
.history-container .history-list li .duration-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.history-container .history-list li .duration-box .category {padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #f0f0f0; background-color: #f3f3f3; color: #7B7B7B; width: fit-content; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.history-container .history-list li .duration-box .category.earn {background-color: #555; border: 1px solid #444; color: #eee;}
.history-container .history-list li .duration-box .category.handle {background-color: #F1132D; color: #eee; border: none;}
.history-container .history-list li .duration-box .category.done {background-color: #fff; color: #F1132D; border: 1px solid #F1132D;}
.history-container .history-list li .duration-box .duration-txt {color: #111; font-size: 2rem; font-weight: 400; line-height: 140%; letter-spacing: -0.1px;}
.history-container .history-list li .duration-box .point-txt {color: #111; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}
.history-container .history-list li .payment-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.history-container .history-list li .payment-box .pay-date {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.history-container .history-list li .payment-box .price {color: #222; text-align: right; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}
.history-container .history-list li .payment-box .point {color: #222; text-align: right; font-size: 2rem; font-weight: 700; line-height: 140%; letter-spacing: -0.1px;}

.history-container .section-tab {margin-top: 0;}
.history-container .tab-contents-wrapper .tab-contents .tab-content {display: none;}
.history-container .tab-contents-wrapper .tab-contents .tab-content.active {display: flex; flex-direction: column;}
.history-container .fixed-btn-box {margin-top: 4rem; display: flex; align-items: center; justify-content: center;}
.history-container .fixed-btn-box button {width: 61rem;}

@media screen and (max-width: 880px) {
    .sub-main-2 {padding: 0;}
    .regular .sub-container {margin-top: 6rem;}
    .sub-container {margin-top: 1.2rem; row-gap: 2.4rem;}
    .sub-container.no-padding {padding: 0; margin-top: 0;}
    .sub-container.no-padding .status-container {margin: 0 2rem;}
    .status-container {padding: 2rem 1.6rem; margin: 0 2rem;}
    .sub-main-3 .status-container {margin: 0;}
    .status-container .status-box {row-gap: 0.4rem;}
    .status-container .status-box .subject {font-size: 1.2rem;}
    .status-container .status-box .status-txt figure {width: 1.6rem; height: 1.6rem;}
    .status-container .status-box .status-txt .status {font-size: 1.8rem;}
    .status-container > a span {font-size: 1.2rem;}
    .status-container > a figure {width: 1.6rem; height: 1.6rem;}
    .history-container .empty span {font-size: 1.4rem;}
    .history-container > .title {padding: 0 2rem;}
    .history-container .history-list li {padding: 1.6rem 2rem;}
    .history-container .history-list li .duration-box .category {font-size: 1.1rem; letter-spacing: -0.055px;}
    .history-container .history-list li .duration-box .duration-txt {font-size: 1.6rem; letter-spacing: -0.08px;}
    .history-container .history-list li .duration-box .point-txt {font-size: 1.6rem; letter-spacing: -0.08px;}
    .history-container .history-list li .payment-box .pay-date {font-size: 1.2rem; letter-spacing: -0.012px;}
    .history-container .history-list li .payment-box .price {font-size: 1.6rem; letter-spacing: -0.08px;}
    .history-container .history-list li .payment-box .point {font-size: 1.6rem; letter-spacing: -0.08px;}

    .sub-container.no-padding .history-container .history-list {padding: 0 2rem;}
    .sub-container.no-padding .history-container .history-list.point-list {padding: 0;}
    
    .history-container .section-tab .section-list li {width: 33%;}
    .history-container .section-tab .section-list li a {width: 100%; text-align: center;}
}

/* ============================== [ 정기이용권 구매 + 포인트 충전 / h_regular_ticket_purchase.html + h_point_purchase.html ] ========================================================================================== */

@media screen and (max-width: 880px) {
    .option-group.ticket .price {font-size: 1.8rem;}
    input[type="radio"].circle-radio + label::before {width: 2rem; height: 2rem;}
    .register-container.regular {margin-top: 6rem;}
    .sub-container.point-container {margin-top: 6rem; padding-bottom: 9rem;}
}

/* ============================== [ 내 등록 재능 - h_my_market.html ] ========================================================================================== */
.sub-main-2.mymenu {display: flex; align-items: stretch; padding: 0;}
.sub-main-2.mymenu .left-box {width: 24rem; padding-top: 4.8rem; padding-bottom: 4.8rem; border-right: 1px solid #eee;}
.sub-main-2.mymenu .left-box .top-title {color: #F1132D; font-size: 1.8rem; font-weight: 700; line-height: normal; letter-spacing: -0.09px;}
.sub-main-2.mymenu .left-box .mypage-gnb-group .title {padding-left: 0;}
.sub-main-2.mymenu .left-box .mypage-gnb > li > a {padding: 1.6rem 2rem 1.6rem 0;}
.sub-main-2.mymenu .left-box .mypage-gnb-group.dropdown-menu .mypage-gnb > li.active > a {color: #111;}
.sub-main-2.mymenu .left-box .mypage-gnb > li .submenu li a {padding: 1.2rem 2rem;}
.sub-main-2.mymenu .right-box {width: calc(100% - 24rem); padding-top: 4.8rem; padding-bottom: 10rem;}
.sub-main-2.mymenu .right-box .title-container.pc {display: flex; align-items: center; justify-content: space-between; padding-left: 4rem;}
.sub-main-2.mymenu .right-box .title-container.pc .btn-box {display: flex; align-items: center; column-gap: 1.6rem; width: fit-content;}
.sub-main-2.mymenu .right-box .section-tab {padding-left: 4rem;}
/* .sub-main-2.mymenu .right-box .tab-contents-wrapper {padding-left: 4rem;} */
.sub-main-2.mymenu .right-box .sort-wrapper {padding-top: 2.4rem; padding-left: 4rem;}
.sub-main-2.mymenu .right-box .market-container {padding: 0; padding-left: 4rem;}
.sub-main-2.mymenu .right-box .market-container .product-list {margin-top: 1.6rem;}
.sub-main-2.mymenu .right-box .history-container .my-question-list {margin-top: 1.6rem;}
.sub-main-2.mymenu .right-box .market-container .product-list li {width: calc(33.34% - 1.5rem);}

.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner {display: flex; flex-direction: column;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner figure {width: 100%; height: 19.2rem; border-radius: 0.4rem; overflow: hidden;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner figure img {object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box {padding: 0.8rem 0.2rem 0 0.2rem; display: flex; flex-direction: column; row-gap: 0.4rem;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .category {color: #F1132D; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .subject {color: #111; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; align-self: stretch; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .price-box {display: flex; align-items: center; column-gap: 0.4rem;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .price-box .percent {color: #FF0F2B; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .price-box .price {color: #111; font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .price-box .price:after {font-size: 1.6rem; font-weight: 600; line-height: normal; letter-spacing: -0.08px;}

.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box {display: flex; align-items: center; justify-content: space-between;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box .date {color: #888; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: -0.06px;}
.sell-status {padding: 0.4rem 0.8rem; border-radius: 0.4rem; font-size: 1.1rem; font-weight: 400; line-height: normal; letter-spacing: -0.055px;}
.sell-status.order-done {background-color: #3577DA; color: #eee;}
.sell-status.deal-done {background-color: #555; color: #eee;}
.sell-status.order-cancel {background-color: #F3F3F3; color: #7B7B7B;}
.sell-status.request-cancel {background-color: #F3F3F3; color: #555; border: 1px solid #555;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box .sell-id {color: #888; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box a {display: flex; align-items: center; flex-direction: row;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box a span {color: #888; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .sell-box a figure {width: 1.2rem; height: 1.2rem;}

.sell-container {display: flex; align-items: stretch; column-gap: 0.8rem;}
.sell-container button {flex: 1; padding: 0.8rem 1.6rem; border-radius: 0.2rem;}
.sell-container button.btn-gray {border: none; background-color: #E4E4E4;}
.sell-container button.btn-gray span {color: #252525; font-weight: 600; line-height: 150%;}

.my-question-list {display: flex; flex-direction: column;}
.my-question-list > li {padding: 1.6rem 0; display: flex; flex-direction: column; row-gap: 0.8rem; border-bottom: 1px solid #eee; padding-left: 4rem;}
.my-question-list > li:last-child {border-bottom: none;}
.my-question-list > li .title-box {padding: 2rem 0; display: flex; align-items: center; justify-content: space-between;}
.my-question-list > li .title-box h6 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; color: #111; text-overflow: ellipsis; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.my-question-list > li .title-box a figure {width: 1.6rem; height: 1.6rem;}
.my-question-list > li .answer-container .answer-box {display: flex; align-items: center; justify-content: space-between; column-gap: 4rem;}
.my-question-list > li .answer-container .answer-status {width: calc(100% - 9rem); padding-bottom: 2.4rem; display: flex; flex-direction: column; row-gap: 0.8rem;}
.my-question-list > li .answer-container .answer-box .answer-btn {width: 9rem;}
.my-question-list > li .answer-container .status-box {display: flex; align-items: center; justify-content: space-between;}
.user-status {display: flex; align-items: center; column-gap: 0.8rem;}
.user-status .status {padding: 0.4rem 0.8rem; border-radius: 0.4rem; background-color: #aaa; color: #FFF; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.user-status .status.done {background-color: #F1132D;}
.user-status .user {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.014px;}
.my-question-list > li .answer-container .status-box .date {color: #AAA; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.my-question-list > li .answer-container .answer-status .q-content {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 0.8rem; cursor: pointer;}
.my-question-list > li .answer-container .answer-status .q-content .p-wrapper {width: calc(100% - 2.4rem);}
.my-question-list > li .answer-container .answer-status .q-content .p-wrapper p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.my-question-list > li .answer-container .answer-status .q-content a {width: 2.4rem; height: 2.4rem;}
.my-question-list > li .answer-container .answer-status .q-content a figure {width: 100%; height: 100%;}
.my-question-list > li .answer-container .answer-btn button {padding: 0.8rem 1.6rem;}
.my-question-list > li .answer-container .answer-done-box {display: none; padding: 2rem; background-color: #F8F8F8;}
.my-question-list > li .answer-container .answer-done-box p {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.my-question-list > li .answer-container .answer-done-box .img-box ul {display: flex; align-items: center; column-gap: 0.6rem; margin-top: 1.2rem;}
.my-question-list > li .answer-container .answer-done-box .img-box ul li {width: 7.1rem; height: 7.1rem; border-radius: 0.2rem; border: 1px solid #eee;}
.my-question-list > li .answer-container .answer-done-box .img-box ul li figure {width: 100%; height: 100%;}
.my-question-list > li .answer-container .answer-done-box .img-box ul li figure img {object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
.my-question-list > li .answer-container .answer-done-txt {padding: 1.6rem; display: flex; flex-direction: column; row-gap: 0.8rem; background-color: #fff;}
.my-question-list > li .answer-container .answer-done-txt p {color: #555; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}

/* 모달 */
.question-group {display: flex; flex-direction: column; row-gap: 2.4rem; padding: 1.8rem 2rem; background-color: #f7f7f7;}
.question-group .question-title-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.question-group .question-title-box .question-user {display: flex; align-items: center; justify-content: space-between;}
.question-group .question-title-box .question-user .date {color: #AAA; text-align: right; font-size: 1.2rem; font-weight: 400; line-height: 150%; letter-spacing: -0.012px;}
.question-group .question-title-box p {text-align: left; color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.question-group .img-box ul {display: flex; align-items: center; column-gap: 0.8rem;}
.question-group .img-box ul li {width: 7.1rem; height: 7.1rem; border-radius: 0.2rem; border: 1px solid #eee;}
.question-group .img-box ul li figure {width: 100%; height: 100%;}
.question-group .img-box ul li figure img {object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */

@media screen and (max-width: 880px) {
    /* PC: 좌측 MY MENU + 본문 / 모바일: 좌측 숨김, 상단 뒤로가기+제목만 (첨부2 스타일) */
    .sub-main-2.mymenu .left-box {display: none;}
    .sub-main-2.mymenu .right-box .title-container.pc {display: none;}
    .sub-main-2.mymenu .right-box .title-container.mobile {display: flex !important; align-items: center; padding: 1.5rem 2rem; border-bottom: 1px solid #eee; background: #fff; position: sticky; top: 0; z-index: 100;}
    .sub-main-2.mymenu .right-box .title-container.mobile .mobile-title {display: flex; align-items: center; column-gap: 0.8rem; width: 100%;}
    .sub-main-2.mymenu .right-box .title-container.mobile .mobile-title figure {width: 2.4rem; height: 2.4rem; flex-shrink: 0;}
    .sub-main-2.mymenu .right-box .title-container.mobile .mobile-title h2 {font-size: 2rem; font-weight: 700; color: #111; line-height: 130%; letter-spacing: -0.02px;}
    .sub-main-2.mymenu .right-box .title-container.mobile .icon-box {display: flex; align-items: center; column-gap: 1.6rem; flex-shrink: 0; white-space: nowrap;}
    .sub-main-2.mymenu .right-box {width: 100%; padding-left: 0; border-left: 0; padding-top: 0; padding-bottom: 2rem;}

    .sub-main-2.mymenu .right-box .section-tab {padding-left: 0;}
    .sub-main-2.mymenu .right-box .sort-wrapper {padding: 1.6rem 2rem; padding-bottom: 0;}
    .sub-main-2.mymenu .right-box .market-container {padding: 0 2rem 8rem 2rem;}
    /* .sub-main-2.mymenu .right-box .tab-contents-wrapper {padding: 0 2rem;} */
    .sub-main-2.mymenu .right-box .market-container .product-list {flex-direction: column; margin-top: 0.8rem;}
    .sub-main-2.mymenu .right-box .history-container .my-question-list {margin-top: 0.8rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list li {width: 100%;}
    .sub-main-2.mymenu .right-box .market-container .product-list li a {flex-direction: row; column-gap: 1.2rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list li a figure {width: 14rem; height: 10.5rem; flex-shrink: 0;}
    .sub-main-2.mymenu .right-box .market-container .product-list li a figure img {aspect-ratio: 4/3; object-fit: contain; background-color: #fff;} /* [CZC 2608-14] 썸네일 표시 centercrop→center: cover(잘라서 채움)→contain(전체보임) + 여백 흰색 */
    .sub-main-2.mymenu .right-box .market-container .product-list li a .txt-box {width: calc(100% - 15.2rem); padding: 0.4rem 0;}
    .sub-main-2.mymenu .right-box .market-container .product-list li a .txt-box .subject {-webkit-line-clamp: 2; font-size: 1.4rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list li a .txt-box .txt-info span {font-size: 1.1rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner {flex-direction: row; column-gap: 1.2rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner figure {width: 14rem; height: 10.5rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner figure img {aspect-ratio: 4/3;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box {width: calc(100% - 15.2rem); padding: 0.4rem 0;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .subject {-webkit-line-clamp: 2; font-size: 1.4rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list.sell-list li .inner .txt-box .txt-info span {font-size: 1.1rem;}

    .sell-container button {padding: 0.8rem 1.6rem;}
    .sell-container button.btn-wh-line {height: 3.7rem;}

    .my-question-list li {padding: 0; border-bottom: 0.6rem solid #F7F7F7;}
    .my-question-list li .title-box {border-bottom: 1px solid #eee; padding: 2rem;}
    .my-question-list li .title-box h6 {font-size: 1.4rem; letter-spacing: -0.014px;}
    .my-question-list li .answer-container .answer-box {padding: 1.6rem 2rem; flex-direction: column;}
    .my-question-list li .answer-container .answer-status {width: 100%;}
    .my-question-list li .answer-container .answer-btn {width: 100% !important;}
    .my-question-list li .answer-container .answer-btn button {width: 100%; border-radius: 0.2rem;}
}

/* ============================== [ 등록재능관리 - 퍼블 h_my_market_setting.html / my_market_setting.tpl 그대로 ] ========================================================================================== */
.sub-main-2.mymenu .right-box .market-container .product-list li {display: flex; flex-direction: column; row-gap: 0.8rem;}
.sub-main-2.mymenu .right-box .market-container .product-list li.no-data {width: 100%; justify-content: center; align-items: center; padding: 4rem 2rem; color: #888; font-size: 1.6rem; text-align: center;}
.setting-container {display: flex; align-items: center; column-gap: 0.8rem; flex-wrap: nowrap;}
.setting-container .box-select {width: calc(33.33% - 0.5rem); min-height: auto; min-width: 11rem; flex-shrink: 0;}
.setting-container .box-select .select-trigger {padding: 0.8rem 1.2rem; min-height: auto; white-space: nowrap; min-width: 0;}
.setting-container .box-select .select-trigger .select-text {display: inline-block; white-space: nowrap; flex-shrink: 0; min-width: 6rem; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
.setting-container .box-select .select-trigger .select-arrow {flex-shrink: 0;}
.setting-container .status-select .select-trigger .select-text {display: inline-block !important; white-space: nowrap !important; flex-shrink: 0 !important; min-width: 6rem !important; word-break: keep-all !important;}
.setting-container button {width: calc(33.33% - 0.5rem); flex-shrink: 0;}
.setting-container button *, .setting-container .status-select * {pointer-events: auto;}
.market-container .btn-box button {width: 100%; margin-top: 3.6rem;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .right-box .section-tab.setting {display: none;}
    .sub-main-2.mymenu .right-box .sort-wrapper.setting {display: none;}
    .setting-container button {padding: 0.8rem 1.6rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list li.no-data {padding: 3rem 2rem; font-size: 1.4rem;}
}

/* ============================== [ 판매상세 - h_my_market_sell_detail.html ] ========================================================================================== */
/* 재능 구매 페이지 상속 */
.product-container.sell {margin-top: 1.6rem; position: relative;}
.product-container.sell .product-detail .product-info {row-gap: 0.8rem;}
.product-container .product-detail .product-info .sell-box {display: flex; align-items: center; justify-content: space-between; color: #888; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.purchase-container.sell .payment-agreement {padding-bottom: 8rem;}
.purchase-container.sell .payment-agreement ul {margin-bottom: 2.4rem;}

@media screen and (max-width: 880px) {
    .product-container.sell {margin-top: 6.8rem;}
    .purchase-container.sell .payment-agreement {display: none;}
    .purchase-container.sell .payment-box {border-bottom: none;}
    .mobile.sell .info-list {margin: 0 2rem; margin-bottom: 2rem;}
    .product-container.sell .product-detail .product-info .sell-box {position: absolute; top: -0.8rem; left: 0; width: 100%; padding: 0 2rem;}
}

/* ============================== [ 내 등록 정비지식인 - h_my_knowhow_q.html ] ========================================================================================== */
.sub-main-2.mymenu .qna-container {padding-left: 4rem;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .qna-container {padding: 0;}
}

/* ============================== [ 관심재능 - h_my_favorite_market.html ] ========================================================================================== */
.sub-main-2.mymenu .sub-container {margin-top: 0;}
.sub-main-2.mymenu .category-menu-container {padding-left: 4rem; border-bottom: none;}
.sub-main-2.mymenu .category-menu-container.job {padding-left: 3rem;}
/* 재능마켓 관심재능: category-menu를 container 없이 직접 사용 → 필터/정렬/목록(pl 4rem)과 좌측 정렬 맞춤 */
.sub-main-2.mymenu .category-menu.market-fav {padding-left: 4rem;}
.sub-main-2.mymenu .category-dropdown {right: 0;}
.sub-main-2.mymenu .filter-wrapper {margin-top: 1.2rem; padding-left: 4rem; margin-bottom: 0;}
.sub-main-2.mymenu .filter-dropdown {left: 4rem;}
.sub-main-2.mymenu .right-box .market-container .product-list li {position: relative;}
.sub-main-2.mymenu .right-box .market-container .product-list li .btn-bookmark {position: absolute; right: 2rem; top: 52%;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .category-menu-container {padding-left: 0; border-bottom: 0.6rem solid #F7F7F7;}
    .sub-main-2.mymenu .category-menu.market-fav {padding-left: 2rem;}
    .sub-main-2.mymenu .filter-wrapper {padding-left: 2rem;}
    .sub-main-2.mymenu .right-box .market-container .product-list li .btn-bookmark {right: auto; left: 10.4rem; top: 7.3rem;}
}

/* ============================== [ 구매내역 - h_my_purchase.html ] ========================================================================================== */
@media screen and (max-width: 880px) {
    #cancelModal textarea {height: 11rem;}
    .sub-main-2.mymenu .sub-container.m-margin {margin-top: 6rem;}
}

/* ============================== [ 내 리뷰 - h_my_review.html ] ========================================================================================== */
/* review-list 상속받아 사용 */
.review-list.myreview li {row-gap: 2rem; padding-left: 4rem; border-bottom: 1px solid #eee; padding-bottom: 2rem;}
.review-list.myreview li:last-child {border-bottom: none;}
.review-list.myreview li .review-title {display: flex; align-items: center; justify-content: space-between; column-gap: 1.2rem;}
.review-list.myreview li .review-title h6 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; font-size: 1.8rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}

@media screen and (max-width: 880px) {
    .review-list.myreview li {padding: 0; border-bottom: none;}
    .review-list.myreview li .review-title {padding: 2rem; border-bottom: 1px solid #eee; border-top: 6px solid #eee;}
    .review-list.myreview li:first-child .review-title {border-top: none;}
    .review-list.myreview li .review-group {padding: 0 2rem 1.6rem 2rem;}
    .review-list.myreview li .review-title h6 {font-size: 1.4rem; width: calc(100% - 6.2rem);}
    .review-list.myreview li .review-title .edit-box {width: 6.2rem; margin: 0;}
}

/* ============================== [ 내 구매내역 상세 - h_my_purchase_detail.html ] ========================================================================================== */
.sell-user-box {margin-bottom: 2rem; padding: 1.6rem; display: flex; align-items: center; justify-content: space-between; background-color: #DFECFF; border-radius: 0.8rem;}
.sell-user-box > span {color: #111; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.sell-user-box .sell-user-tel {display: flex; align-items: center; column-gap: 0.8rem;}
.sell-user-box .sell-user-tel figure {width: 1.6rem; height: 1.6rem;}
.sell-user-box .sell-user-tel span {color: #111; font-size: 1.4rem; font-weight: 600; line-height: 140%; letter-spacing: -0.014px;}
.sell .fixed-btn-box button {flex: 1;}

/* 리뷰 작성 모달 */
.review-box {display: flex; flex-direction: column; row-gap: 1.6rem; align-items: center; justify-content: center;}
.review-box .txt-box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.review-box .txt-box p {color: #111; text-align: center; font-size: 2rem; font-weight: 700; line-height: normal; letter-spacing: -0.1px;}
.review-box .txt-box p.sub {color: #888; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.08px;}
.review-box .review-star-box {display: flex; align-items: center; column-gap: 0.4rem;}
.review-box .review-star-box button figure {width: 3.2rem; height: 3.2rem;}

@media screen and (max-width: 880px) {
    .purchase-container {padding-bottom: 10rem;}
    .sell-user-box {margin: 0 2rem 1.2rem 2rem;}
}

/* ============================== [ 내 등록 게시물 - h_my_community.html ] ========================================================================================== */
.sub-main-2.mymenu .community-list li a {padding: 2.4rem 0 2.4rem 4rem;}
.sub-main-2.mymenu .community-list li:last-child a {border-bottom: none;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .community-list li a {padding: 2rem;}
}

/* ============================== [ 공지사항 - h_notice.html ] ========================================================================================== */
.sub-main-2.mymenu .community-list.notice li a {padding: 2rem 4rem;}
.sub-main-2.mymenu .community-list.notice li a:last-child {border-bottom: 1px solid #eee;}
.sub-main-2.mymenu .community-list.notice li a .community-title-box {row-gap: 0.8rem;}
.sub-main-2.mymenu .community-list.notice li a .community-title-box .title {font-size: 1.8rem;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .community-list.notice li a {padding: 2rem;}
    .sub-main-2.mymenu .community-list.notice li a .community-title-box {width: 100%;}
    .sub-main-2.mymenu .community-list.notice li a .community-title-box .title {font-size: 1.6rem;}
}

/* ============================== [ Q&A - h_qna.html ] ========================================================================================== */
.sub-main-2.mymenu .community-list.notice li a .user-box .answer-status {border-radius: 0.4rem; background-color: #aaa; padding: 0.4rem 0.8rem; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: normal; letter-spacing: -0.06px;}
.sub-main-2.mymenu .community-list.notice li a .user-box .answer-status.done {background-color: #F1132D;}

/* ============================== [ 공지사항_상세 - h_notice_detail.html ] ========================================================================================== */
.notice-container {display: flex; flex-direction: column;}
.notice-container .notice-title {display: flex; flex-direction: column; row-gap: 0.8rem; padding: 2rem 4rem; border-bottom: 1px solid #eee;}
.notice-container .notice-title .title {color: #222; font-size: 2.4rem; font-weight: 700; line-height: 140%; letter-spacing: -0.12px;}
.notice-container .notice-title .user-box {display: flex; align-items: center; column-gap: 0.8rem;}
.notice-container .notice-title .user-box span {color: #999; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px;}
.notice-container .notice-title .user-box span.hits:before {padding-right: 0.5rem;}
.notice-container .notice-content {display: flex; flex-direction: column; padding: 5.3rem 0 5.3rem 4rem; row-gap: 1rem;}
.notice-container .notice-content p {color: #222; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}
.notice-container .notice-content figure {width: 32rem; height: 100%;}
.notice-container .notice-content .attach-box a {color: #5457ED; font-size: 1.6rem; font-weight: 400; line-height: 150%; text-decoration: underline;}

@media screen and (max-width: 880px) {
    .notice-container .notice-title {padding: 2rem; border-bottom: none;}
    .notice-container .notice-title .title {font-size: 1.6rem;}
    .notice-container .notice-title .user-box span {font-size: 1.2rem;}
    .notice-container .notice-content {padding: 2rem; padding-top: 0; row-gap: 1.6rem;}
    .notice-container .notice-content p {font-size: 1.6rem;}
    .notice-container .notice-content figure {width: 100%; height: 100%;}
    .notice-container .notice-content .attach-box a {font-size: 1.4rem;}
}

/* ============================== [ Q&A 상세 - h_qna_detail.html ] ========================================================================================== */
.notice-container .notice-title .user-box span.answer-status {padding: 0.4rem 0.8rem; background-color: #aaa; border-radius: 0.4rem; color: #fff; font-size: 1.2rem; font-weight: 600;}
.notice-container .notice-title .user-box span.answer-status.done {background-color: #F1132D;}
.notice-container .notice-content.qna {padding: 3.2rem 0 3.2rem 4rem;}
.notice-container .qna-answer {border-top: 0.6rem solid #F7F7F7;}

@media screen and (max-width: 880px) {
    .notice-container .notice-content.qna {padding: 0 2rem 2rem 2rem;}
}

/* ============================== [ 내 등록 구인구직 - h_my_job.html ] ========================================================================================== */
/* job_list.html 상속받아 사용 */
.sub-main-2.mymenu .job-container {padding-left: 4rem;}
.job-list li.end a {background-color: #F8F8F8;}
.job-list li a .category-box .category.end {color: #eee; background-color: #222;}
.job-list li.end a .job-box span {color: #999;}

.applicant-list {display: flex; flex-direction: column;}
.applicant-list > li {padding: 2.4rem 2rem 2.4rem 4rem; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #eee;}
.applicant-list > li:last-child {border-bottom: none;}
.applicant-list > li .applicant-title {display: flex; align-items: center; justify-content: space-between;}
.applicant-list > li .applicant-title .title-txt {display: flex; flex-direction: column; row-gap: 0.4rem;}
.applicant-list > li .applicant-title .title-txt h6 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; align-self: stretch; overflow: hidden; color: #111; text-overflow: ellipsis; font-size: 2rem; font-weight: 600; line-height: normal; letter-spacing: -0.1px;}
.applicant-list > li.done .applicant-title .title-txt h6 {color: #999;}
.applicant-list > li .applicant-title .title-txt .applicant-cnt {display: flex; align-items: center; column-gap: 0.8rem;}
.applicant-list > li.done .applicant-title .title-txt .applicant-cnt span {color: #999;}
.applicant-list > li .applicant-title .title-txt .applicant-cnt .person {color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.07px;}
.applicant-list > li .applicant-title .title-txt .applicant-cnt .deadline {color: #888; font-size: 1.2rem; font-weight: 400; line-height: 130%; letter-spacing: -0.06px;}
.applicant-list > li .applicant-title .employment-status span {padding: 0.4rem 1.2rem; border-radius: 0.2rem; font-size: 1.2rem; font-weight: 500; line-height: 150%; letter-spacing: -0.012px;}
.applicant-list > li .applicant-title .employment-status span.end {color: #222; border: 1px solid #ddd; background-color: #f5f5f5;}
.applicant-list > li .applicant-title .employment-status span.done {color: #eee; border: none; background-color: #333;}
.applicant-list > li .applicant-container {display: none;}
.applicant-list > li .applicant-container.show {display: block;}
.applicant-list > li .person-list {display: flex; gap: 1.2rem; flex-wrap: wrap;}
.applicant-list > li .person-list li {width: calc(50% - 0.6rem); padding: 1.6rem; border-radius: 0.8rem; background-color: #f4f4f4; display: flex; flex-direction: column; row-gap: 1.2rem;}
.applicant-list > li .person-list li .row {display: flex; align-items: center; justify-content: space-between;}
.applicant-list > li .person-list li .row span {font-size: 1.4rem; line-height: 140%; letter-spacing: -0.014px;}
.applicant-list > li .person-list li .row span.subject {color: #888; font-weight: 400;}
.applicant-list > li .person-list li .row span.p-value {color: #111; font-weight: 600;}
.applicant-list > li .person-list li .btn-wh {padding: 0.4rem 1.2rem;}
.applicant-list > li .person-list li .btn-wh span {font-size: 1.2rem; letter-spacing: -0.012px; font-weight: 500;}
.applicant-list > li > .btn-wh {padding: 0.8rem 1.6rem; column-gap: 0.4rem;}
.applicant-list > li > .btn-wh span {padding-top: 0.2rem;}
.applicant-list > li > .btn-wh figure {width: 1.6rem; height: 1.6rem;}

@media screen and (max-width: 880px) {
    .sub-main-2.mymenu .job-container {padding-left: 0;}
    .sub-main-2.mymenu .section-tab .section-list li a {padding: 1.2rem 0.6rem;}

    .applicant-list > li {padding: 2rem;}
    .applicant-list > li .applicant-title {column-gap: 2rem;}
    .applicant-list > li .applicant-title .title-txt {width: calc(100% - 7.3rem);}
    .applicant-list > li .applicant-title .title-txt h6 {font-size: 1.6rem; font-weight: 400;}
    .applicant-list > li .applicant-title .employment-status {width: 8rem;}

    .applicant-list > li .person-list li {width: 100%;}
}

/* ============================== [ 관심 구인구직 - h_my_favorite_job.html ] ========================================================================================== */
.job-list li {position: relative;}
.job-list li > .btn-bookmark {position: absolute; top: 2rem; right: 2rem;}

/* ============================== [ 제휴 문의 - h_partnership.html ] ========================================================================================== */
.inquiry-section.partnership {padding: 0 0 0 4rem; margin-top: 4rem;}
.inquiry-section.partnership .attach-content {padding-bottom: 7rem;}
.inquiry-section.partnership .fixed-btn-box {justify-content: center;}
.inquiry-section.partnership .fixed-btn-box button {flex: none; max-width: 48rem; width: 100%;}

@media screen and (max-width: 880px) {
    .inquiry-section.partnership {padding: 0 2rem; margin-top: 0;}
}

/* ============================== [ 이용 약관 - terms_of_use.html ] ========================================================================================== */
.terms-container {display: flex; flex-direction: column; padding: 4.4rem 0 5.2rem 0;}
.terms-container p {color: #585858; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}

@media screen and (max-width: 880px) {
    .terms-container {padding-top: 5.6rem;}
    .terms-container p.bold.mobile {color: #222; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
    .terms-container p {font-size: 1.4rem; letter-spacing: -0.014px; color: #555;}
}

/* ============================== [ 조회서비스_고장코드 - service_fault_code.html ] ========================================================================================== */
/* + 자동차 규격조회 같이 사용 */
.category-menu.service .category-menu-wrapper {width: 100%; max-width: 96.6rem;}
.category-menu.service .category-dropdown {right: 0;}
.fault-search-container {background-color: #fff;} /* [CZC 2608-17] 페이지 기본 배경 회색 → 흰색 */
.fault-search-container .inner {padding: 4rem 0; max-width: 96.6rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; row-gap: 2.4rem;}
.fault-search-container .inner .title-txt {display: flex; flex-direction: column; row-gap: 0.7rem;}
.fault-search-container .inner .title-txt h2 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.fault-search-container .inner .title-txt p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.fault-search-container .inner .title-txt p .bold {font-weight: 700;}
.fault-search-container .inner .fault-search-box {width: 100%; padding: 3.2rem; background-color: #fff; border-radius: 1.2rem; border: 1px solid #eee; display: flex; flex-direction: column; row-gap: 1.6rem;}
.fault-search-container .inner .fault-search-box h3 {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.fault-search-container .inner .fault-search-box .fault-search-input {display: flex; align-items: stretch; position: relative;}
.fault-search-container .inner .fault-search-box .fault-search-input .input-box {position: relative; flex: 1; min-width: 0; margin-right: 1.6rem;}
.fault-search-container .inner .fault-search-box .fault-search-input .input-box:before {content:''; background: url('/assets/image/mobile/icon/ic_search_b.svg') no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: 1.2rem; width: 2.4rem; height: 2.4rem; z-index: 1;}
.fault-search-container .inner .fault-search-box .fault-search-input .fault-search {padding: 1.6rem 1.6rem 1.6rem 4.8rem; border-radius: 0.4rem; border: 1px solid #e8e8e8; background-color: #fff; width: 100%; height: 5.9rem;}
.fault-search-container .inner .fault-search-box .fault-search-input .btn-box {display: flex; align-items: center; width: auto; flex-shrink: 0;}
.fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-main {width: 20rem; margin-right: 1.2rem; height: 5.9rem;}
.fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-wh {column-gap: 0.4rem; width: 10rem; height: 5.9rem;}
.fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-wh figure {width: 1.6rem; height: 1.6rem;}
.brand-container {display: flex; flex-direction: column; row-gap: 2.4rem; max-width: 96.6rem; margin: 0 auto; padding: 5.6rem 0; align-items: flex-start; width: 100%;}
.brand-container > h3 {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.brand-container .title-box {display: flex; flex-direction: column; row-gap: 0.7rem; align-items: flex-start;}
.brand-container .title-box h3 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.brand-container .title-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.brand-container .title-box p .bold {font-weight: 700;}
.brand-container .brand-list {display: flex; flex-direction: column; row-gap: 1.2rem; width: 100%;}
.brand-container .brand-list .brand-group {display: flex; flex-direction: column;}
.brand-container .brand-list .brand-title-box {padding: 1.6rem 2rem; display: flex; align-items: center; justify-content: space-between; width: 100%; border-radius: 1.2rem; background-color: #f8f8f8; cursor: pointer;}
.brand-container .brand-list .brand-title-box .brand-name {display: flex; align-items: center; column-gap: 1.6rem;}
.brand-logo {width: 4rem; height: 4rem; padding: 0.6rem; background-color: #fff; border-radius: 100%; border: 1px solid #eee; display: flex; align-items: center; justify-content: center;}
.brand-logo.no-bg {padding: 0;}
.brand-logo.no-icon figure {width: 2.4rem; height: 100%;}
.brand-logo figure {width: 100%; height: 100%;}
.brand-container .brand-list .brand-title-box .brand-name span {color: #111; font-size: 1.8rem; font-weight: 700; line-height: 130%; letter-spacing: -0.018px;}
.brand-container .brand-list .brand-title-box .brand-num span {padding: 0.4rem 0.8rem; background-color: #333; border-radius: 0.4rem; color: #EEE; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: -0.07px;}
.brand-container .brand-list .brand-detail-box {display: none; border-radius: 0.8rem; border: 1px solid #eee; background-color: #fff; margin-top: 1.2rem; cursor: pointer;}
.brand-container .brand-list .brand-detail-box .title-box {padding: 1.6rem 2rem 0 2rem;}
.brand-container .brand-list .brand-detail-box .title {color: #F1132D; font-size: 1.2rem; font-weight: 700; line-height: 130%; letter-spacing: -0.012px;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li {display: flex; flex-direction: column;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .model-box {padding: 1.6rem 2rem; border-bottom: 1px solid #eee;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .model-box .model-num {color: #222; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li:last-child .model-box {border-bottom: none;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .type-box {display: none; flex-direction: column; row-gap: 1.2rem; padding: 1.6rem 2rem; border-bottom: 1px solid #eee;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .type-box .type-list {display: flex; flex-direction: column; row-gap: 0.4rem;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .type-box .type-list li {padding: 1.2rem; border-radius: 0.4rem; background-color: #F8F8F8;}
.brand-container .brand-list .brand-detail-box .brand-detail-list > li .type-box .type-list li .type-num {color: #111; font-size: 1.2rem; font-weight: 600; line-height: 130%;  letter-spacing: -0.012px;}

@media screen and (max-width: 880px) {
    .fault-search-container .inner {padding: 2.4rem 2rem; row-gap: 1.6rem;}
    .fault-search-container .inner .title-txt h2 {font-size: 2rem;}
    .fault-search-container .inner .title-txt p {font-size: 1.4rem;}
    .fault-search-container .inner .fault-search-box {padding: 2rem 1.6rem; row-gap: 1.2rem;}
    .fault-search-container .inner .fault-search-box .fault-search-input {flex-direction: column;}
    .fault-search-container .inner .fault-search-box .fault-search-input .input-box {width: 100%;}
    .fault-search-container .inner .fault-search-box .fault-search-input .btn-box {width: 100%; margin-top: 1.2rem;}
    .fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-wh {order: 1; margin-right: 1.2rem; height: 3.7rem;}
    .fault-search-container .inner .fault-search-box .fault-search-input .btn-box .btn-main {order: 2; margin-right: 0; height: 3.7rem;}
    .brand-container {padding: 2.4rem 2rem; padding-bottom: 4.2rem;} /* GNB 5.8rem은 .page-wrap 전역여백이 담당 */
    .brand-container .title-box h3 {font-size: 2rem;}
    .brand-container .title-box p {font-size: 1.4rem;}
}

/* ============================== [ 조회서비스_고장코드_검색완료 - service_fault_code_result.html ] ========================================================================================== */
.search-result-box {display: flex; flex-direction: column; max-width: 96.6rem; margin: 0 auto; padding: 5.6rem 0; width: 100%;}
.search-result-box .result-title {display: flex; flex-direction: column; row-gap: 0.8rem; align-items: center; justify-content: center;}
.search-result-box .result-title .sub {color: #F1132D; text-align: center; font-size: 1.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.014px;}
.search-result-box .result-title .title {color: #111; text-align: center; font-size: 5.6rem; font-weight: 700; line-height: normal; letter-spacing: -0.056px;}
.search-result-box .result-title .icon-box {display: flex; align-items: center; column-gap: 2.4rem;}
.search-result-box .result-title .icon-box figure {width: 1.6rem; height: 1.6rem;}
.search-result-box .result-title .result-txt {color: #111; text-align: center; font-size: 2rem; font-weight: 700; line-height: 150%; letter-spacing: -0.02px;}
.search-result-box .result-title .sub-txt {color: #555; text-align: center; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.016px;}
.search-result-box .section-tab {margin-top: 2.4rem; width: 100%;}
.search-result-box .section-tab .section-list li {width: 50%;}
.search-result-box .section-tab .section-list li a {width: 100%; text-align: center;}
.search-result-box .tab-contents-wrapper {margin-top: 4rem;}
.search-result-box .tab-content p {color: #000; font-size: 1.4rem; font-weight: 400; line-height: 140%; letter-spacing: -0.014px;}
.search-result-box .tab-content p .bold {font-weight: 700;}

.no-result-search {display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 3.2rem; padding: 20rem 0;}
.no-result-search figure {width: 13.6rem; height: 13.6rem;}
.no-result-search span {color: #999; text-align: center; font-size: 1.8rem; font-weight: 400; line-height: 130%; letter-spacing: -0.018px;}

@media screen and (max-width: 880px) {
    .search-result-box {padding: 3.2rem 0 10rem 0;}
    .search-result-box .result-title {padding: 0 2rem;}
    .search-result-box .result-title .sub {font-size: 1.2rem;}
    .search-result-box .result-title .title {font-size: 4rem;}
    .search-result-box .result-title .result-txt {font-size: 1.6rem;}
    .search-result-box .result-title .sub-txt {font-size: 1.4rem;}
    .search-result-box .section-tab {margin-top: 0;}
    .search-result-box .tab-contents-wrapper {margin-top: 0; padding: 2rem;}

    .no-result-search {row-gap: 1.8rem; padding: 8rem 0 14rem;}
    .no-result-search figure {width: 8rem; height: 8rem;}
    .no-result-search span {font-size: 1.4rem;}
}

/* ============================== [ 조회서비스_고장코드_브랜드선택 - service_fault_code_list.html ] ========================================================================================== */
.code-container {max-width: 96.6rem; width: 100%; margin: 0 auto; padding: 4.6rem 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: 3.2rem;}
.code-container .title-box {display: flex; flex-direction: column; row-gap: 0.7rem; align-items: flex-start;}
.code-container .title-box h3 {color: #222; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.16px;}
.code-container .title-box p {color: #888; font-size: 1.6rem; font-weight: 400; line-height: normal; letter-spacing: -0.08px;}
.code-container .title-box p .bold {font-weight: 700;}
.code-list {width: 100%; border: 1px solid #eee;}
.code-list thead tr th {border-bottom: 0.3rem solid #333; padding: 1.6rem; color: #111; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.07px;}
.code-list thead tr th:first-child,
.code-list tbody tr td:first-child {width: 13.5rem; text-align: center;}
.code-list tbody tr td {padding: 1.6rem; color: #111; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;}
.code-list tbody tr:nth-child(even) td {background-color: #F8F8F8;}

@media screen and (max-width: 880px) {
    .category-menu.hide {display: none;}
    .code-container {padding: 1.2rem 2rem 10rem 2rem; row-gap: 2.4rem;}
    .code-container .title-box h3 {font-size: 2rem;}
    .code-container .title-box p {font-size: 1.4rem;}
    .code-list {overflow-x: auto; overflow-y: visible; white-space: nowrap; width: 100%; display: block; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;}
    .code-list table, .code-list thead, .code-list tbody, .code-list tr {display: table; width: auto; min-width: 600px;}
    .code-list thead tr th:last-child {width: auto; min-width: 26rem; text-align: left;}
    .code-list tbody tr td {padding: 1.6rem; color: #111; font-size: 1.4rem; font-weight: 400; line-height: normal; letter-spacing: -0.07px;white-space: nowrap;}
    .code-list tbody tr td:last-child {white-space: normal; word-break: break-word; min-width: 30rem; max-width: 40rem;}
    .code-list::-webkit-scrollbar {display: none;}
}

/* ============================== [ 자동차 정보 조회 - service_car_search.html ] ========================================================================================== */
.car-search-container {max-width: 96.6rem; margin: 0 auto; padding: 5rem 0 23rem 0;}


/* ============================== [ 엔진넘버 조회 - service_engine_search.html ] ========================================================================================== */
.engine-search-container {max-width: 96.6rem; margin: 0 auto; padding: 2.4rem 0 5rem 0; width: 100%;}
.engine-search-container .search-result ul {display: flex; flex-direction: column;}
.engine-search-container .search-result ul li {padding: 1.6rem; display: flex; flex-direction: column; row-gap: 0.8rem; border-bottom: 1px solid #EEE;}
.engine-search-container .search-result ul li:last-child {border-bottom: none;}
.engine-search-container .search-result ul li .title {color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 130%; letter-spacing: -0.014px;}
.engine-search-container .search-result ul li .result {color: #222; font-size: 1.6rem; font-weight: 400; line-height: 130%; letter-spacing: -0.016px;}

@media screen and (max-width: 880px) {
    .engine-search-container {padding-top: 0;}
}

/* ============================== [ 모바일 전용 페이지 공통 ] ========================================================================================== */
.mobile-main {max-width: 96.6rem; margin: 0 auto;}
.mobile-main.before {height: 100vh;}
.mobile-main .title-container {display: flex; align-items: center; justify-content: space-between;}
.mobile-main .title-container a {display: flex; align-items: center; padding: 1.5rem 2rem; column-gap: 0.8rem;}
.mobile-main .title-container a h2{font-size: 2rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
.mobile-main .title-container a h2 .cnt {position: relative;}
.mobile-main .title-container a h2 .cnt:after {content: '건';}
.mobile-main .title-container a figure {width: 2.4rem; height: 2.4rem;}
.mobile-main .title-container button {margin-right: 2rem;}
.mobile-section {padding: 0 2rem; padding-top: 7.2rem;}

@media screen and (max-width: 880px) {
    .mobile-main {width: 100%;}
    .mobile-main .title-container {position: fixed; top: 0; background-color: #fff; width: 100%; z-index: 1000; border-bottom: 1px solid #eee;}
    .mobile-main .title-container.fixed {border-bottom: 1px solid #eee; width: 100%;}
    .mobile.title-container {display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; position: fixed; top: 0; background-color: #fff; width: 100%; z-index: 1000; border-bottom: 1px solid #eee;}
    .mobile.title-container.fixed {border-bottom: 1px solid #eee;}
    .mobile.title-container.search, .mobile.title-container.fixed.search {border-bottom: none;}
    .mobile.title-container.type-2 {display: block;}
    .mobile.title-container.type-2 > a {display: flex; align-items: center; justify-content: space-between;}
    .mobile.title-container.type-2 > a .inner {display: flex; align-items: center; column-gap: 0.8rem;}
    .mobile.title-container > a {display: flex; align-items: center; padding: 1.5rem 0; column-gap: 0.8rem;}
    .mobile.title-container > a h2 {font-size: 2rem; color: #111; font-weight: 700; line-height: 130%; letter-spacing: -0.02px;}
    .mobile.title-container > a figure {width: 2.4rem; height: 2.4rem;}
    .mobile.title-container .icon-box a span {color: #F1132D; font-size: 1.6rem; font-weight: 700; line-height: normal; letter-spacing: -0.08px;}
}

/* ============================== [ 모바일용 문의하기 - m_inquiry_write.html ] ========================================================================================== */
.inquiry-section {margin-top: 7.2rem; display: flex; flex-direction: column; padding: 0 2rem; row-gap: 1.6rem;}
.inquiry-section .inquiry-content {display: flex; flex-direction: column; row-gap: 1.6rem;}
.inquiry-section .inquiry-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.inquiry-section .inquiry-group .txt-group {display: flex; align-items: center; column-gap: 0.8rem;}
.inquiry-section .inquiry-group .title {color: #111; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: relative; width: fit-content;}
.inquiry-section .inquiry-group .title.req:after {content: '*'; font-size: 1.4rem; color: #F1132D; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: absolute; right: -0.6rem;}
.inquiry-section .inquiry-group .basic-textarea {height: 32rem;}
.inquiry-section .inquiry-group.answer .basic-textarea {height: 22.7rem;}
.inquiry-section .inquiry-group .img-cnt {color: #F1132D; font-size: 1.4rem; font-weight: 700; line-height: 150%; letter-spacing: -0.014px;}
.inquiry-section .inquiry-group .img-cnt .cnt {position: relative;}
.inquiry-section .inquiry-group .img-cnt .cnt:after {content: '개';}
.inquiry-section .attach-content {display: flex; flex-direction: column; row-gap: 0.8rem; padding-bottom: 10rem;}
.inquiry-section .inquiry-group.attach {flex-direction: row; column-gap: 1.6rem;}
.inquiry-section .inquiry-group.attach .file-attach {padding: 2rem; border-radius: 1.2rem; border: 1px solid #E8E8E8; background-color: #F4F4F4;}

/* ============================== [ 모바일용 문의리스트 - m_inquiry_list.html ] ========================================================================================== */
.inquiry-section.inquiry-2 {padding: 0; padding-bottom: 2rem;}

/* ============================== [ 모바일용 지도에서 찾기 - m_map.html ] ========================================================================================== */
.mobile-section.map {padding: 0;}
.mobile-section.map .map-box {position: relative; height: 100vh;}
.mobile-section.map .map-box .btn-map {position: absolute; bottom: 24rem; right: 2rem; background-color: #fff; padding: 0.8rem; border-radius: 100%; border: 1px solid #ddd; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);}
.mobile-section.map .map-box .btn-map figure {width: 2.4rem; height: 2.4rem;}
.mobile-section.map .map-box figure {width: 100%; height: 100%;}
.mobile-section.map .map-box figure img {object-fit: cover;}
.mobile-section.map .map-info-box {position: absolute; bottom: 0; background-color: #fff; width: 100%; padding: 2rem; border-radius: 1.6rem 1.6rem 0 0;}
@media screen and (max-width: 880px) {
    .mobile-section.map .map-box .btn-map {bottom: 18rem;}
}


/* ============================== [ 모바일용 지원하기 - m_apply_write.html ] ========================================================================================== */
/* 기존 지원하기 모달에서 상속받아 사용 */
.apply-section {display: flex; flex-direction: column; margin-top: 5.6rem;}
.apply-section .apply-title {padding: 2rem;}
.apply-section .apply-content {padding: 2rem;}
.apply-section .apply-attach {padding: 2rem;}
.apply-section .apply-group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.apply-section .apply-content .title {width: fit-content; position: relative; font-size: 1.4rem; line-height: 150%; letter-spacing: -0.014px;}
.apply-section .apply-content .title.req:after {content: '*'; font-size: 1.4rem; color: #F1132D; font-weight: 700; line-height: 150%; letter-spacing: -0.014px; position: absolute; right: -0.6rem;}
.apply-attach .apply-group .attach-txt {display: flex; align-items: center; justify-content: space-between;}
.apply-attach .apply-group .attach-txt .title {color: #111; font-size: 1.6rem; font-weight: 700; line-height: 130%; letter-spacing: -0.016px;}
.apply-attach .apply-group .attach-txt .attach-file-name {color: #111; text-align: right; font-size: 1.4rem; font-weight: 400; line-height: 130%; letter-spacing: -0.014px;}

@media screen and (max-width: 880px) {
    .apply-title {border-bottom: 6px solid #f7f7f7; padding-bottom: 1.7rem;}
    .apply-title .category-box .txt .category {font-size: 1.1rem;}
    .apply-title .job-info span {font-size: 1.2rem;}
    .apply-content {border-bottom: 6px solid #f7f7f7;}
    .apply-attach {margin-bottom: 10rem;}
}

/* ============================== [ 모바일용 커뮤니티_상세_댓글 - m_community_reply.html ] ========================================================================================== */
.reply-section {margin-top: 5.6rem;}
.reply-section > .reply-input-area {padding: 2rem; border-top: 1px solid #eee; border-bottom: 6px solid #f7f7f7; row-gap: 0.8rem;}
.reply-section > .reply-input-area .reply-textarea {height: 11.3rem;}

.reply-section .more-list {position: absolute; top: 100%; right: 0; background: #fff; border-radius: 0.4rem; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); z-index: 1005; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; margin-top: 0.8rem; width: 12.6rem;}
.reply-section .more-list.show {opacity: 1; visibility: visible; transform: translateY(0);}
.reply-section .more-list li {width: 100%;}
.reply-section .more-list li a {display: inline-block; width: 100%; text-align: center; padding: 1.2rem 1.6rem; cursor: pointer; color: #222; font-size: 1.4rem; font-weight: 400; line-height: 150%; letter-spacing: -0.014px; transition: background-color 0.2s ease;}

@media screen and (max-width: 880px) {
    .reply-section .more-list {position: fixed; width: 100%; top: auto; bottom: 0; left: 0; right: 0; border-radius: 1.6rem 1.6rem 0 0; margin-top: 0; transform: translateY(100%); transition: all 0.3s ease; z-index: 1003;}
}

/* ============================== [ 모바일용 검색 - m_search.html ] ========================================================================================== */
.search-category {display: flex; flex-direction: column; row-gap: 2.4rem; padding: 2.4rem 2rem 2rem 2rem;}
.search-category .category-box {display: flex; flex-direction: column; row-gap: 1.6rem; align-items: flex-start; justify-content: flex-start;}
.search-category .category-box h6 {color: #111; text-align: center; font-size: 1.8rem; font-weight: 600; line-height: normal; letter-spacing: -0.09px;}

/* ============================== [ 모바일용 리뷰 - m_review_write.html ] ========================================================================================== */
.mobile-main .product-container.purchase {padding: 0 2rem 2rem 2rem; border-bottom: 6px solid #F7F7F7;}
.mobile-main .review-box {padding: 3.2rem 2rem;}
.mobile-main .inquiry-content.review {padding: 0 2rem 10rem 2rem;}
.mobile-main .inquiry-content.review textarea {height: 22.7rem;}

/* ============================== [ 반응형 공백을 메우기 위한 부분 ] ========================================================================================== */
@media screen and (max-width: 1300px) and (min-width: 881px) {
    .header .inner {padding: 2.4rem 2rem;}
    .header.header-2 .inner {column-gap: 1.2rem;}
    .footer {padding: 3.2rem 2rem;}

    /* index.html */
    .main-section .main-sub-menu {padding: 0 2rem;}
    .content-section {padding: 0 2rem;}
    .content-section .content-box {display: flex; width: 100%; flex-direction: column;}
    .content-section .content-box:after {display: none;}
    .content-section .content-box > div {width: 100%; height: 100%;}
    .product-list li {width: calc(33.33% - 1.1rem);}
    .sos {padding-bottom: 0;}
    .job {padding-bottom: 8rem;}

    /* alarm.html */
    .alarm-main {padding: 4.8rem 2rem;}

    /* market_list.html + 공통 */
    .category-menu {padding: 0.8rem 2rem; column-gap: 1.6rem;}
    .sub-main .title-container {padding: 0 2rem;}
    .sub-main .filter-wrapper {padding: 0 2rem;}
    .sub-main .sort-wrapper {padding: 0 2rem;}
    .market-container {padding: 0 2rem 3rem 2rem;}

    .product-container {padding: 0 2rem;}
    .section-tab {padding: 0 2rem;}
    .section-container .info-area {padding-left: 2rem;}
    .section-container .price-info-area {padding-right: 2rem;}

    /* market_purchase.html */
    .purchase-info {padding-left: 2rem;}
    .payment-agreement {padding-right: 2rem;}

    /* sos_list.html */
    .qna-container {padding: 3.2rem 2rem 5rem 2rem;}

    /* job_list.html */
    .job-container {padding: 0 2rem;}

    /* search.html */
    .sub-main-5 .title-inner {padding: 4.8rem 2rem 0 2rem;}
    .sub-main-5 .filter-wrapper {padding: 0 2rem;}
    .sub-main-5 .sort-wrapper {padding: 0 2rem;}
    .tab-contents-inner .qna-container {padding: 1.6rem 2rem 5rem 2rem;}
    .community-list li a {padding: 2.4rem 2rem;}

    /* 회원가입 + 내 기본정보 h_join.html + h_my_account.html */
    .find-container .section-tab {padding: 0;}

    /* h_regular_ticket.html */
    .sub-main-2.regular .title-container {padding: 0 2rem;}
    .status-container {margin: 0 2rem;}
    .history-container > .title {padding: 0 2rem;}
    .history-container .history-list li {padding: 2.4rem 2rem;}

    .sub-main-3 .status-container {margin: 0;}

    /* 내등록재능 h_my_market.html */
    .sub-main-2.mymenu .left-box {padding-left: 2rem;}
    .sub-main-2.mymenu .right-box {padding-right: 2rem;}

    /* 내등록 SOS */
    .sub-main-2.mymenu .qna-container {padding: 0 2rem 5rem 2rem;}

    /* 관심 구인구직 */
    .sub-main-2.mymenu .category-menu-container.job {padding-left: 0.2rem; padding-bottom: 0;}
    
    /* 조회서비스 */
    .fault-search-container .inner {padding: 4rem 2rem;}
    .brand-container {padding: 5.6rem 2rem;}
    .search-result-box .tab-contents-wrapper {padding: 0 2rem;}
}

@media screen and (max-width: 1147px) and (min-width: 881px) {
    html {font-size: calc(100vw * 7.6 / 880);}
}

@media screen and (max-width: 325px) {
    html {font-size: calc(100vw * 9.2 / 325);}
}

/* ============================== [ 목록 빈 상태 공통 — 모든 섹션 동일 적용 ] ========================================================================================== */
.product-list > li.no-data,
.my-question-list > li.no-data,
.qna-list > li.no-data,
.job-list > li.no-data,
.market-list > li.no-data,
.review-list > li.no-data,
.shop-list > li.no-data {
  width: 100%;
  list-style: none;
  border: none !important;
  border-bottom: none !important;
  margin: 10rem 0 0 0 !important;
  padding: 0 !important;
  text-align: center;
  color: #888;
  font-size: 1.6rem;
  display: block;
  background: transparent;
}
/* [CZC 260817-16] 연관콘텐츠 태그 — 상세페이지 본문 아래 #태그 칩
 *  - 클릭 시 통합검색(/search.php?stx=태그)으로 이동
 *  - 디자인은 쇼핑몰 상세의 기존 태그칩(.sp-tag)과 동일 규격으로 맞춤
 */
.content-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.content-tags .tag-chip {
  display: inline-block; font-size: 1.3rem; color: #F1132D; background: #fff0f1;
  border: 1px solid #ffd5d9; border-radius: 1.4rem; padding: 0.3rem 1rem;
  text-decoration: none; line-height: 1.4;
}
.content-tags .tag-chip:hover { background: #ffe3e6; }

/* [CZC 260817-16] 연관 콘텐츠 섹션 (상세페이지 하단 공용)
 * [CZC 260818-01] 두 가지 보정
 *   1) 하단 고정바(구매버튼 80px + 모바일메뉴 58px)에 마지막 항목이 가려지던 문제
 *      → 섹션 아래 여백을 확보해 스크롤 끝에서도 가리지 않게 함
 *   2) 우측 부가정보(카테고리명)가 화면 밖으로 밀려 잘리던 문제
 *      → 제목은 남는 폭만 쓰고(min-width:0) 부가정보는 최대폭을 제한
 */
.relation-wrap {
  /* [CZC 260818-01] fieldset + legend 형태의 라운드 박스 */
  margin: 3.2rem 0 2.4rem;
  padding: 1.6rem 1.6rem 2rem;    /* 아래는 고정바 회피분을 따로 둠 */
  border: 1px solid #e5e7eb; border-radius: 1rem;
  display: flex; flex-direction: column; gap: 2rem;
  max-width: 100%; box-sizing: border-box;
  min-width: 0;                    /* fieldset 기본 min-width 해제 (내용 넘침 방지) */
}
/* [CZC 261025-2337] 연관 콘텐츠 타이틀(legend) 글씨색 #111 → 초록(#22A64A) — 요청사항.
   공용 섹션이라 6개 상세페이지 모두 동일 적용. 섹션 소제목(.relation-head)은 그대로 #111 유지 */
.relation-wrap > legend {
  padding: 0 0.8rem; margin-left: 0.4rem;
  color: #22A64A; font-size: 1.4rem; font-weight: 700; line-height: 150%;
  width: auto;
}
.relation-section { max-width: 100%; min-width: 0; }
.relation-section .relation-head { color: #111; font-size: 1.3rem; font-weight: 700; line-height: 150%; margin-bottom: 0.6rem; }
.relation-section .relation-list { display: flex; flex-direction: column; gap: 0.2rem; }
.relation-section .relation-list li { border-bottom: 1px solid #f5f5f5; }
.relation-section .relation-list li:last-child { border-bottom: 0; }
/* 각 서비스 목록 카드와 같은 구성(카테고리 칩 → 제목)을 작은 크기로 */
.relation-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.7rem 0; text-decoration: none; max-width: 100%; }
.relation-item .relation-sub {
  display: inline-block; max-width: 100%;
  padding: 0.1rem 0.6rem; border-radius: 0.9rem;
  background: #f4f5f7; color: #888; font-size: 1.1rem; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* [CZC 261012-0035] 고장코드 카드 — 브랜드 칩 + 코드 칩을 한 줄에 나란히 (칩 1개인 다른 타입은 기존과 동일) */
.relation-item .relation-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 100%; }
.relation-item .relation-title { width: 100%; min-width: 0; color: #333; font-size: 1.3rem; line-height: 150%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relation-item:hover .relation-title { color: #F1132D; }
/* [CZC 261016-0018] 섹션당 10건만 먼저 보이고 나머지는 더보기(.relation-more)로 펼친다 */
.relation-section .relation-list li.relation-fold { display: none; }
.relation-section.is-open .relation-list li.relation-fold { display: block; }
.relation-section .relation-more { margin-top: 0.8rem; font-size: 1.3rem; }
/* [CZC 260910-01] 하단 고정바(구매버튼 80px + 모바일메뉴 58px)에 가리지 않도록 박스 '바깥'에 여백을 준다.
   박스 안쪽에 주면 테두리 안에 빈 공간이 크게 생겨 어색하므로 margin 으로 처리.
   단, 이 여백은 실제로 .fixed-btn-box(구매하기/지원하기 고정바)가 있는 페이지
   (재능마켓 상세=market/view.tpl, 구인구직 상세=job/view.tpl, 둘 다 <main class="sub-main-5"> 사용)에만 필요하다.
   .product-container 는 .fixed-btn-box 와 형제(sibling)인 .section-container(연관 콘텐츠 위치)의
   조상이 아니므로 .product-container 로 한정하면 정작 필요한 재능마켓/구인구직에서도 여백이 빠진다
   (1차 수정 오류 — 실측 후 정정). 두 페이지 공통 상위 요소인 main.sub-main-5 로 한정한다.
   지식인(sub-main-4)/고장코드(sub-main-6)/커뮤니티(sub-main-4)/SOS(sub-main-4) 등 고정바가 없는
   페이지까지 전역 선택자로 적용되어 연관 콘텐츠 박스 아래에 불필요하게 큰 빈 공간이 생기던 문제 수정. */
main.sub-main-5 .relation-wrap { margin-bottom: 14rem; }

/* ==================================================================
   [CZC 260825-03] 전문가 Q&A — AI 답변 안내 (4차 지시 §8 디자인 기준)

   - AI 아이콘 + 회색·연한 파란색 계열 배경
   - 질문/일반 댓글과 구분되는 별도 카드
   - 상단 안내는 2~3줄 이내, 긴 내용은 "자세히 보기"
   - 부품교환 안내는 본문보다 작게, 지나치게 강한 경고 디자인은 쓰지 않는다
   - **색상만으로 정보를 구분하지 않고 아이콘과 문구를 함께 쓴다**
     (색각 이상 사용자도 구분할 수 있어야 하므로 이모지·라벨을 항상 동반)
   ================================================================== */

/* 공통 안내 (질문 등록 화면 / 답변 목록 직전)
 *
 * [CZC 260826-03] 디자인 개선 + PC 대응
 *   - 아이콘은 **CSS(::before)로만** 넣는다. 마크업에 이모지를 두면 등록 화면(register.tpl)처럼
 *     제목이 없는 곳과 구조가 갈려 유지가 어렵다.
 *   - flex 를 쓰지 않는 이유: register.tpl 은 래퍼(.qa-guide-main) 없이 p/a/div 가 바로 들어 있어
 *     .qa-guide 에 flex 를 주면 가로로 늘어서며 깨진다. 두 화면이 같은 클래스를 공유하므로
 *     **마크업 구조에 의존하지 않는 방식**으로 짠다.
 */
.qa-guide {
  position:relative;
  background:linear-gradient(180deg,#F8FBFF 0%,#F1F6FC 100%);
  border:1px solid #DDE7F4;
  border-radius:0.8rem;
  padding:1.5rem 1.6rem 1.5rem 1.8rem;
  margin:2rem 0;
  overflow:hidden;
}
/* 좌측 액센트 바 — 색상만으로 구분하지 않도록 아이콘·문구와 함께 쓴다 */
.qa-guide:before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:0.3rem;
  background:linear-gradient(180deg,#4A8BE0 0%,#2C5282 100%);
}
.qa-guide-title {
  display:flex; align-items:center; gap:0.6rem;
  font-size:1.4rem; font-weight:700; color:#1F4C86;
  letter-spacing:-0.02em; margin:0 0 0.6rem;
}
.qa-guide-title:before {
  content:'i';
  flex:0 0 auto;
  width:1.9rem; height:1.9rem; border-radius:50%;
  background:#2C5282; color:#fff;
  font-size:1.2rem; font-weight:700; font-style:italic;
  display:flex; align-items:center; justify-content:center;
}
.qa-guide-body { font-size:1.3rem; line-height:1.75; color:#48586C; margin:0; }
.qa-guide-body b { color:#1F4C86; font-weight:700; }
.qa-guide-more {
  display:inline-flex; align-items:center; gap:0.4rem;
  margin-top:1rem; padding:0.5rem 1.2rem;
  font-size:1.2rem; font-weight:600; color:#2B6CB0;
  background:#fff; border:1px solid #CFDEEF; border-radius:2rem;
  text-decoration:none; transition:background .15s, border-color .15s;
}
.qa-guide-more:after { content:''; width:0.5rem; height:0.5rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-0.1rem,-0.1rem); }
.qa-guide-more:hover { background:#EDF4FC; border-color:#B9D0E9; }
.qa-guide-full { margin-top:1.1rem; padding-top:1.1rem; border-top:1px dashed #CFDEEF; }
.qa-guide-full p {
  position:relative; padding-left:1.1rem;
  font-size:1.25rem; line-height:1.75; color:#57677B; margin:0 0 0.7rem;
}
.qa-guide-full p:before { content:''; position:absolute; left:0; top:0.85rem; width:0.4rem; height:0.4rem; border-radius:50%; background:#9FB6D0; }
.qa-guide-full p:last-child { margin-bottom:0; }

/* [CZC 260826-03] 상세 화면(질문 본문 ↔ 답변 목록 사이)용 변형
 *
 * 이 자리의 부모(.detail-container)는 padding 이 0 이고, 형제 블록들이
 * **각자 padding 2rem 으로** 안쪽 정렬을 만든다(.title-box, .answer-list li).
 * .qa-guide 는 배경·테두리가 있는 박스라 padding 을 키우면 박스 자체가 화면 끝에 붙는다.
 * → 좌우 **margin** 으로 들여쓴다.
 *
 * 등록 화면(register.tpl)의 .qa-guide 는 이미 padding 이 있는 부모 안에 있어
 * 같은 margin 을 주면 이중으로 들어간다. 그래서 **이 화면에서만** 붙이는 변형 클래스로 둔다.
 */
.qa-guide--between { margin-left:2rem; margin-right:2rem; }

/* PC — 여백과 글자를 키운다 (모바일 기준으로 짜여 있어 PC 에서 눌려 보였다) */
@media (min-width:1024px) {
  .qa-guide { padding:2rem 2.2rem 2rem 2.4rem; margin:2.4rem 0; border-radius:1rem; }
  .qa-guide--between { margin-left:4rem; margin-right:4rem; }
  .qa-guide:before { width:0.4rem; }
  .qa-guide-title { font-size:1.6rem; margin-bottom:0.8rem; }
  .qa-guide-title:before { width:2.2rem; height:2.2rem; font-size:1.4rem; }
  .qa-guide-body { font-size:1.45rem; line-height:1.8; }
  .qa-guide-more { font-size:1.3rem; padding:0.6rem 1.4rem; }
  .qa-guide-full p { font-size:1.4rem; }
}

/* AI / 공식답변 카드 — 일반 답변과 구분되는 별도 카드 */
.answer-list li.ai-answer { background:#F7FAFD; border:1px solid #D6E4F0; border-radius:0.8rem; }
.answer-list li.official-answer { background:#F6FAF7; border:1px solid #CFE3D4; border-radius:0.8rem; }

.ai-badge-row { display:flex; align-items:center; flex-wrap:wrap; gap:0.6rem; margin-bottom:0.6rem; }
.ai-badge { font-size:1.25rem; font-weight:700; color:#2C5282; }
.official-answer .ai-badge { color:#276749; }
.ai-badge-sub { font-size:1.1rem; color:#718096; background:#EDF2F7; border-radius:1rem; padding:0.2rem 0.8rem; }

.ai-notice { font-size:1.15rem; line-height:1.6; color:#5A6B7F; margin:0 0 0.8rem; }

/* ==================================================================
   [CZC 260826-05] AI/공식답변 본문 = github-markdown-css 적용 [사용자 지시]
   https://github.com/sindresorhus/github-markdown-css

   본체는 /assets/css/github-markdown.css (원본에서 다크모드 블록만 제거).
   여기서는 **사이트에 맞추는 조정만** 둔다. 본문 컨테이너는 .a-body.markdown-body.

   ── 왜 조정이 필요한가 (실측)
     1) .markdown-body 가 background-color 를 칠해 AI/공식답변 카드 배경색을 덮는다
     2) font-family 를 시스템 폰트로 교체해 사이트 한글 폰트와 어긋난다
     3) line-height:1.5 라 방금 늘린 줄간격(1.8)이 되돌아간다
     4) code/pre 가 12px 고정이라 한글 본문 대비 너무 작다
     5) 무엇보다, 사이트 기존 규칙이 **명시도로 이겨서** github CSS 가 안 먹는 곳이 있다
        .detail-container .answer-container .answer-list li { display:flex; padding:3.2rem 4rem; border }
        → 이 규칙이 본문 안의 <li> 까지 잡는다(후손 선택자). 되돌려야 목록이 정상으로 보인다.

   그래서 아래 규칙에는 .detail-container .answer-container 접두어를 붙여
   기존 규칙과 같은 무대에서 이기게 한다. !important 는 쓰지 않는다.
   ================================================================== */

/* 카드 배경을 살리고 폰트·줄간격을 사이트 기준으로 되돌린다 */
.detail-container .answer-container .answer-list li .a-body.markdown-body {
  background-color:transparent;
  font-family:inherit;
  font-size:1.5rem;
  line-height:1.8;
  color:#333;
  word-break:break-word;
}

/* 본문 안의 li — 답변 카드용 스타일이 새어 들어온 것을 되돌린다
 *  실측: 공식답변 본문 li 45개가 전부 display:flex / padding-left:40px 이 되어
 *        목록 마커가 사라지고 들여쓰기가 밀려 나왔다. */
.detail-container .answer-container .answer-list li .a-body.markdown-body li {
  display:list-item;
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  line-height:1.8;
}
/* 전역 리셋에 li { list-style:none } 이 있어 마커를 다시 켜준다 */
.detail-container .answer-container .answer-list li .a-body.markdown-body ul > li { list-style:disc outside; }
.detail-container .answer-container .answer-list li .a-body.markdown-body ol > li { list-style:decimal outside; }
.detail-container .answer-container .answer-list li .a-body.markdown-body ul,
.detail-container .answer-container .answer-list li .a-body.markdown-body ol { padding-left:2em; }

/* 소제목 — github 기본은 h4~h6 이 본문보다 작다(0.85~1em). 한글에서는 소제목이 묻힌다. */
.detail-container .answer-container .answer-list li .a-body.markdown-body h4 { font-size:1.15em; }
.detail-container .answer-container .answer-list li .a-body.markdown-body h5 { font-size:1.1em; }
.detail-container .answer-container .answer-list li .a-body.markdown-body h6 { font-size:1.05em; color:inherit; }
.detail-container .answer-container .answer-list li .a-body.markdown-body h4,
.detail-container .answer-container .answer-list li .a-body.markdown-body h5,
.detail-container .answer-container .answer-list li .a-body.markdown-body h6 {
  line-height:1.5; color:#1F2937;
}

/* 코드 — github 은 12px 고정. 한글 본문 옆에서 너무 작아 상대값으로 바꾼다. */
.detail-container .answer-container .answer-list li .a-body.markdown-body code,
.detail-container .answer-container .answer-list li .a-body.markdown-body tt { font-size:0.9em; }
.detail-container .answer-container .answer-list li .a-body.markdown-body pre,
.detail-container .answer-container .answer-list li .a-body.markdown-body pre code { font-size:0.9em; line-height:1.6; }

/* 문단 — github 기본 여백(16px)에 줄간격만 맞춘다 */
.detail-container .answer-container .answer-list li .a-body.markdown-body p { line-height:1.8; }
/* AiMarkdown 이 남길 수 있는 빈 문단이 여백을 두 번 만들지 않게 접는다 */
.detail-container .answer-container .answer-list li .a-body.markdown-body p:empty { display:none; }

/* 표가 좁은 화면을 밀지 않도록 가로 스크롤 */
.detail-container .answer-container .answer-list li .a-body.markdown-body table { display:block; overflow-x:auto; max-width:100%; }

/* PC — 본문 폭이 넓어지므로 줄간격을 조금 더 준다 */
@media (min-width:1024px) {
  .detail-container .answer-container .answer-list li .a-body.markdown-body,
  .detail-container .answer-container .answer-list li .a-body.markdown-body p,
  .detail-container .answer-container .answer-list li .a-body.markdown-body li { line-height:1.9; }
  .detail-container .answer-container .answer-list li .a-body.markdown-body { font-size:1.6rem; }
}

/* 본문 하단 주의 — 본문보다 작게, 과한 경고색은 쓰지 않는다 */
.ai-warn { margin-top:1.2rem; padding-top:1rem; border-top:1px solid #E2E8F0; }
.ai-warn-main { font-size:1.15rem; line-height:1.6; color:#8A5A00; background:#FFF8E8; border-radius:0.5rem; padding:0.8rem 1rem; margin:0 0 0.8rem; }
.ai-part { background:#F7F8FA; border-radius:0.5rem; padding:0.8rem 1rem; }
.ai-part-short { font-size:1.1rem; line-height:1.55; color:#4A5568; margin:0; }
.ai-more-btn { display:inline-block; margin-top:0.5rem; font-size:1.1rem; font-weight:600; color:#2B6CB0; text-decoration:underline; }
.ai-part-full { margin-top:0.6rem; padding-top:0.6rem; border-top:1px dashed #DDE3EA; }
.ai-part-full p { font-size:1.1rem; line-height:1.6; color:#5A6B7F; margin:0 0 0.4rem; }
.ai-part-full p:last-child { margin-bottom:0; }

/* 리빌드 가능성 — 해당되는 질문에만 붙는다. 확정 표현은 쓰지 않는다 */
.ai-rebuild { margin-top:1rem; background:#F5F3FB; border:1px solid #DED8F0; border-radius:0.5rem; padding:0.9rem 1.1rem; }
.ai-rebuild-title { font-size:1.2rem; font-weight:700; color:#553C9A; margin:0 0 0.5rem; }
.ai-rebuild p { font-size:1.1rem; line-height:1.6; color:#5A6B7F; margin:0 0 0.4rem; }
.ai-rebuild-note { color:#8B8B9E; }