@charset "UTF-8";

/* ==========================================================================
   커뮤니티 서브페이지 공통 (공지사항/EL매거진/치료후기/상담신청)
   ========================================================================== */
.community .section-description{color: var(--color-text);}
.community .board-header .section-description{font-size: 2.2rem;}

/* 페이지 상단 타이틀 (히어로 이미지 없이 제목+설명만) */
.board-header {padding: 14rem 0 7rem; text-align: center;}
.board-header__title {font-size: 4rem; font-weight: 700; color: var(--black);}
.board-header__desc {margin-top: 1.2rem; font-size: 1.8rem; color: var(--color-muted-sub);}

/* 탭(.tab-group)과 목록 사이 간격 */
.tab-group {margin-bottom: 5rem;}

/* ==========================================================================
   게시판 리스트 (공지사항)
   ========================================================================== */
.board-list-section {padding-bottom: 10rem;}
/* EL매거진 목록 본문 폭 (PC 108rem) */
.community-magazine .board-list-section .container {max-width: 108rem;}
.board-list__meta {display: flex; align-items: baseline; gap: 0.5rem; padding: 2rem 0; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text); font-size: 1.6rem; line-height: 1; color: var(--color-muted-sub);}
.board-list__count {color: var(--color-primary); font-weight: 700;}

.board-list {list-style: none; padding: 0; margin: 0;}
.board-list__row {display: flex; align-items: center; gap: 2rem; padding: 2.8rem 4rem 2.8rem 3rem; border-bottom: 1px solid #c1c1c1;}
.board-list__row:last-child{border-color: var(--color-text);}
.board-list__row a {display: flex; align-items: center; gap: 2rem; width: 100%; color: inherit;}
.board-list__badge {flex: none; display: inline-flex; align-items: center; justify-content: center; width: 7.2rem; height: 3.3rem; padding: 0 2rem; border: 1px solid #cbcbcb; border-radius: 9999px; font-size: 1.6rem; font-weight: 500; color: #616161;}
.board-list__badge--event {border-color: rgba(0,101,115,.4); color: var(--color-primary);}
.board-list__title {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2rem; color: var(--black); font-weight: 500; transition: color 0.2s ease;}
.board-list__row a:hover .board-list__title {color: var(--color-primary);}
.board-list__date {flex: none; font-size: 1.5rem; color: var(--color-muted-sub);}
.board-list__row.is-pinned{background: #f8f8f8;}
.board-list__row.is-pinned .board-list__badge{border-color: rgba(0,101,115,.4); color: var(--color-primary); font-weight: 600;}
.board-list__row.is-pinned .board-list__title{font-weight: 700; color: var(--color-primary);}
.board-list__row--empty .board-list__title {text-align: center;}

  /* 검색/필터 바 — 셀렉트+구분선+입력창+검색아이콘이 하나의 알약 모양 테두리 안에 이어지는 형태 */
.board-search {display: flex; align-items: center; max-width: 40rem; height: 5rem; margin: 4rem auto 0; border: 1px solid #c1c1c1; background: var(--white);}
.board-search__select {flex: none; width: auto; height: 100%; padding: 0 2.8rem 0 1.6rem; border: none; border-radius: 0; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23acacac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-position: right 0 center; background-size: 1.8rem; font-size: 1.8rem; font-weight: 500; color: var(--color-muted-sub);}
.board-search__divider {flex: none; width: 1px; height: 2.4rem; background: #c1c1c1; margin: 0 1.6rem;}
input[type=text].board-search__input {flex: 1; height: 100%; padding: 0; border: none; background: transparent; font-size: 1.8rem; font-weight: 500;}
.board-search__submit {flex: none; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.board-search__submit img {width: 1.5rem; height: 1.5rem; opacity: 0.55;}

/* ==========================================================================
   게시판 상세 (공지사항 상세 / EL매거진 상세)
   ========================================================================== */
.board-detail-section {padding-top: 5rem; padding-bottom: 10rem;}
.board-detail__meta {display: flex; align-items: center; gap: 1.1rem; padding: 3rem 0; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text);}
.board-detail__meta .board-list__badge{width: 9.2rem; height: 4.2rem;}
.board-detail__meta .board-list__title {font-weight: 600; font-size: 2.6rem;}
.board-detail__meta .board-list__date{font-size: 1.5rem;}

.board-detail__head {display: flex; align-items: center; justify-content: flex-end;  margin: 3rem 0 0.3rem;}
.board-detail__tools {flex: none; display: flex; gap: 1.2rem;}
.board-detail__tool {display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 50%; background: #e5eff1; color: var(--color-text);}
.board-detail__tool--download {background: var(--color-primary); color: var(--white);}
.board-detail__tool img {width: 2.4rem;}

.board-detail__body {margin: 0 auto; max-width: 114rem; min-height: 50rem; color: var(--color-text); }
.board-detail__body--spaced {margin-top: 6rem;}

.board-detail__nav {display: flex; align-items: center; margin-top: 8rem; padding: 1.8rem 0; border-top: 1px solid #7a7a7a; border-bottom: 1px solid #7a7a7a; font-size: 2rem; font-weight: 500; color: var(--black);}
.board-detail__nav-row {flex: 1; min-width: 0; display: flex; align-items: center; gap: 2rem;}
.board-detail__nav-divider {flex: none; width: 1px; height: 4rem; background: #7a7a7a; margin: 0 5rem;}
.board-detail__nav-arrow {flex: none; display: flex; align-items: center; justify-content: center; width: 5.6rem; height: 5.6rem; border-radius: 50%; border: 1px solid #7a6e66; color: #7a6e66;}
.board-detail__nav-arrow svg {width: 2rem; height: 2rem;}
.board-detail__nav-label {flex: none; font-size: 1.8rem; font-weight: 600;}
.board-detail__nav-link {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit;}
.board-detail__nav-link:hover {color: var(--color-primary);}
.board-detail__nav-row--prev .board-detail__nav-link{text-align: right;}

.board-detail__list-btn {display: flex; justify-content: center; margin-top: 2rem;}
.board-detail__list-btn .btn{color: var(--black);}

/* ==========================================================================
   온라인 상담 (목록 / 작성 / 비밀글 확인 / 상세) — .community-online
   ========================================================================== */
.community-online .board-header .section-description {color: var(--color-muted-sub);}
.online-list-section,
.online-form-section,
.online-secret-section,
.online-view-section {padding: 5rem 0 17rem;}

/* 목록 표 */
.online-table {width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text); text-align: center;}
.online-table__col-cat {width: 20rem;}
.online-table__col-writer {width: 15rem;}
.online-table__col-date {width: 17rem;}
.online-table__col-status {width: 13rem;}
.online-table th {height: 6.3rem; border-bottom: 1px solid var(--color-text); font-size: 1.8rem; font-weight: 500; color: var(--color-muted-sub);}
.online-table td {height: 9rem; padding: 0 1rem; border-bottom: 1px solid #c1c1c1; font-size: 1.8rem; color: var(--black);font-weight: 500;}
.online-table tbody tr:last-child td {border-bottom: 0;}
/* 빈 목록 문구 — PC 는 공지사항·매거진 빈 줄(.board-list__title)과 같은 2rem */
@media (min-width: 1025px) {.online-table td.online-table__empty {font-size: 2rem;}}
.online-table__cat {color: var(--color-primary) !important; }
.online-table__title {text-align: left; }
.online-table__title a {display: inline-block; max-width: calc(100% - 2.4rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; padding-left: 5rem; font-size: 2rem; color: inherit; transition: color 0.2s ease;}
.online-table__title a:hover {color: var(--color-primary);}
/* 비밀글 자물쇠 — 채워진 자물쇠 아이콘(ico-lock-fill.svg)을 mask로 써서 색만 바꿈 */
.online-table__lock {display: inline-block; width: 1.4rem; height: 1.4rem; margin-left: 0.8rem; vertical-align: middle; background: var(--color-muted-sub); -webkit-mask: url("../images/common/ico-lock-fill.svg") no-repeat center / contain; mask: url("../images/common/ico-lock-fill.svg") no-repeat center / contain;}
.online-table__date {color: var(--color-muted-sub) !important;}
.online-status {display: inline-flex; align-items: center; justify-content: center; width: 9.3rem; height: 3.8rem; border-radius: 9999px; background: #f5f5f5; font-size: 1.7rem; font-weight: 500; color: #8b8b8b;}
.online-status--done {background: #ecf5f6; color: var(--color-primary);}

/* 페이지네이션(가운데) + 상담하기(오른쪽) 한 줄 */
.online-list__foot {position: relative; display: flex; align-items: center; justify-content: center; min-height: 6rem; margin-top: 4rem;}
.online-list__foot .pagination {margin-top: 0;}
.online-list__write {flex: none; width: 14rem; height: 5rem; padding: 0; font-size: 1.8rem;}
/* 목록 위: 검색(분류 선택 + 검색어) 왼쪽, 상담하기 오른쪽 */
.online-list__top {display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem;}
.online-list__top .board-search {flex: 1; max-width: 40rem; margin: 0;}

/* 하단 버튼 줄 (등록하기 / 취소·확인 / 목록·수정) — 보조 버튼은 옅은 테두리 */
.online-actions {display: flex; justify-content: center; gap: 1.2rem;}
.online-actions__btn {width: 19.4rem; padding: 0; font-size: 1.8rem;}
.online-actions__btn--wide {width: 26rem;}
.online-actions__btn--sub {border-color: #c9c9c9; color: var(--color-muted-sub);}
.community-online .checkbox:checked {background-color: var(--color-primary);}

/* 작성 폼 */
.online-form__rows {border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text);}
.online-form__row {display: flex; align-items: center; padding: 2rem 0; border-bottom: 1px solid #dcdcdc;}
.online-form__row:last-child {border-bottom: 0;}
.online-form__label {flex: none; width: 16.2rem; font-size: 2rem; font-weight: 600; color: var(--color-text);}
.online-form__req {color: var(--color-primary);}
.online-form__field {flex: 1; min-width: 0; display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap;}
input.online-form__control,
select.online-form__control,
.online-form__control {flex: none; width: 42rem; height: 5.2rem; padding: 0 1.8rem; border: 1px solid #afafaf; border-radius: 0.4rem; font-size: 1.6rem; background-color: var(--white);}
select.online-form__control {background-position: right 2rem center; background-size: 1.6rem;}
/* 아직 고르지 않은 상태("선택")는 placeholder 색 */
select.online-form__control:has(option[value=""]:checked) {color: var(--color-muted-lighter);}
textarea.online-form__control--textarea {flex: 1; width: auto; height: 30rem; padding: 1.6rem 1.8rem; resize: none;}
.online-form__hint {font-size: 1.5rem; color: var(--color-muted-sub);}
/* 본문 폭이 118rem으로 고정되는 PC에서는 시안처럼 한 줄(비밀번호 안내가 칸 끝까지 딱 맞는 길이) */
@media (min-width: 1281px) {
  .online-form__hint {white-space: nowrap;}
}
.online-form__sms {align-items: center; flex: none; font-size: 1.6rem; color: var(--black);}
/* SMS 동의~안내 문구 간격 (줄바꿈돼도 입력칸과 정렬 유지) */
.online-form__sms {margin-right: -1rem;}
.online-form__file {display: flex; align-items: center; gap: 1.2rem; padding: 0 1rem; cursor: pointer;}
.online-form__file-btn {flex: none; display: inline-flex; align-items: center; height: 3rem; padding: 0 1.2rem; border: 1px solid #c9c9c9; border-radius: 0.2rem; background: #ececec; font-size: 1.4rem; font-weight: 500; color: var(--color-text);}
.online-form__file-name {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.6rem; color: var(--color-muted-lighter);}
.online-form__file.has-file .online-form__file-name {color: var(--color-text);}
.online-form__file:focus-within {outline: 2px solid var(--color-primary); outline-offset: 2px;}
.online-form__agree {display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 5rem;}
.online-form__agree .agree-item {align-items: center; font-size: 1.6rem; color: var(--black);}
.online-form__terms {font-size: 1.6rem; color: var(--black); text-decoration: underline; text-underline-offset: 0.3rem;}
.online-form .online-actions {margin-top: 2.8rem;}

/* 비밀글 확인 */
.online-secret {display: flex; flex-direction: column; align-items: center; padding: 6rem 0 7rem; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text); text-align: center;}
.online-secret__icon {display: flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; border-radius: 50%; background: #eaf4f4;}
.online-secret__icon::before {content: ""; width: 3.6rem; height: 3.6rem; background: var(--color-primary); -webkit-mask: url("../images/common/ico-lock-fill.svg") no-repeat center / contain; mask: url("../images/common/ico-lock-fill.svg") no-repeat center / contain;}
.online-secret__text {margin-top: 2rem; font-size: 1.8rem; line-height: 1.5; color: var(--black);}
input.online-secret__input {width: 40rem; height: 5.2rem; margin-top: 4rem; padding: 0 1.8rem; border: 1px solid #bcbcbc; border-radius: 0.4rem; font-size: 1.6rem;}
.online-secret .online-actions {margin-top: 4.8rem;}

/* 상세 (문의 내역 / 답변 내역) */
.online-view {border-top: 1px solid var(--black);}
.online-view__heading {padding: 4.8rem 1rem 3.2rem; font-size: 2.8rem; font-weight: 700; color: var(--color-text);}
.online-view__info {display: flex; flex-direction: column; gap: 4.8rem; padding: 4.4rem 0 4.4rem; border-top: 1px solid #cfcfcf;}
.online-view__row {display: flex; align-items: flex-start;}
.online-view__row dt {flex: none; width: 16.2rem; padding-left: 1rem; font-size: 2rem; font-weight: 600; line-height: 1.8; color: var(--color-text);}
.online-view__row dd {flex: 1; min-width: 0; font-size: 2rem; line-height: 1.8; color: var(--color-muted-sub);}
.online-view__files {display: flex; align-items: center; gap: 2rem;}
.online-view__file {color: inherit; text-decoration: underline; text-underline-offset: 0.3rem;}
.online-view__answer {padding: 4rem; border-radius: 0.5rem; background: #f5f5f5; font-size: 2rem; line-height: 1.6; color: var(--color-text);}
.online-view-section .online-actions {margin-top: 4.8rem; padding-top: 4.8rem; border-top: 1px solid var(--black);;}

/* ==========================================================================
   EL매거진 목록 (.magazine-grid) — 메인페이지 .news-card와 같은 시각언어를
   ========================================================================== */
.magazine-grid {list-style: none; max-width: 98rem; margin: 4rem auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6rem 4rem; padding-bottom: 6rem; border-bottom: 1px solid var(--color-text);}
.magazine-card {display: block; color: inherit;}
/* PC 시안 470x470 정사각 썸네일 — 그리드 폭 98rem = 47rem 2칸 + 칸 사이 4rem */
.magazine-card__thumb {display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-bg-soft); position: relative;}
.magazine-card__thumb::before{content: ''; display: block; width: 6rem; height: 3.4rem; background: url("../images/common/el.svg") no-repeat center; background-size: contain; position: absolute; bottom: 1.5rem; right: 1.2rem; z-index: 1;}
.magazine-card__thumb img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}
.magazine-card:hover .magazine-card__thumb img {transform: scale(1.04);}
.magazine-card__type {display: block; margin-top: 3rem; font-size: 1.4rem; font-weight: 500; color: var(--color-primary);}
.magazine-card__title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-top: 1rem; font-size: 2rem; font-weight: 500; line-height: 1.4; color: var(--black);}
.magazine-card__desc {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-top: 0.6rem; font-size: 1.6rem; font-weight: 500; line-height: 1.6; color: var(--color-muted-sub);}
.magazine-card__date {display: block; margin-top: 1.5rem; font-size: 1.3rem; color: #a1a1a1;font-weight: 500; }

/* ==========================================================================
   치료후기 (.review-gallery)
   ========================================================================== */
.review-gallery-section {padding-bottom: 16.5rem;}
.review-gallery {list-style: none; padding: 5rem 0 0; border-top: 1px solid var(--color-text); display: grid; grid-template-columns: repeat(4, 1fr); gap: 5rem 2rem;}
/* grid 칸이 긴 시술명 때문에 넓어지지 않도록 */
.review-gallery__item {display: block; min-width: 0; cursor: pointer;}
.review-gallery__compare {position: relative; display: flex; aspect-ratio: 34 / 19; overflow: hidden;}
.review-gallery__compare img {width: 100%; height: 100%; object-fit: cover;}
.review-gallery__lock {position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.7rem; color: var(--white); font-size: 1.6rem; font-weight: 600;}
.review-gallery__lock img {width: 3rem; height: 4rem;}
.review-gallery__caption {display: block; margin-top: 2.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2rem; font-weight: 600; color: var(--color-text);}
.review-gallery__period {display: block; margin-top: 1rem; font-size: 1.6rem; font-weight: 500; color: var(--color-muted-sub);}

/* ==========================================================================
   치료 전후 상세 팝업 (.review-modal)
   ========================================================================== */
.review-modal {position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem; padding: 2rem;}
.review-modal[hidden] {display: none;}
.review-modal__backdrop {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75);}

.review-modal__dialog {position: relative; z-index: 1; width: min(84rem, 92vw); border-radius: 1.2rem;}
/* 각도 버튼이 dialog 밖으로 나와야 해서 모서리 클리핑은 이 래퍼에만 */
.review-modal__content {border-radius: 1rem; overflow: hidden;}
.review-modal__header {position: relative; display: flex; align-items: center; justify-content: center; height: 5.6rem; background: var(--color-primary);}
.review-modal__header::before {content: ""; position: absolute; bottom: -35%; left: 50%; transform: translateX(-50%); width: 65%; height: 85%; background: radial-gradient(ellipse at center, rgba(80, 190, 190, 0.8) 0%, rgba(80, 190, 190, 0.25) 45%, transparent 75%); pointer-events: none;}
/* 시술명이 길어도 한 줄 — 넘치면 말줄임(좌우 padding은 닫기 버튼 자리) */
.review-modal__title {width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2rem; font-weight: 600; color: var(--white); padding: 0 5.6rem; text-align: center;}
/* 닫기 X — 상담신청 시술 선택 팝업(.procedure-modal__close)과 같은 얇은 svg 아이콘 */
.review-modal__close {position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--white); cursor: pointer;}
.review-modal__close svg {width: 100%; height: 100%;}

.review-modal__body {position: relative;}
.review-modal__compare {display: flex;}
.review-modal__half {position: relative; flex: 1; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-bg-soft);}
.review-modal__half::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); pointer-events: none;}
.review-modal__img {width: 100%; height: 100%; object-fit: cover; display: block;}
.review-modal__badge {position: absolute; z-index: 2; left: 50%; bottom: 4rem; transform: translateX(-50%); font-size: 2.5rem; font-weight: 700; color: var(--white);}

/* 촬영 각도 토글 — dialog 오른쪽 바깥 모서리에 겹쳐서 세로로 배치 */
.review-modal__angle-toggle {position: absolute; top: 50%; right: -8.5rem; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 1.2rem;}
.review-modal__angle-btn {width: 7rem; height: 7rem; padding: 0; border-radius: 0.5rem; background: rgba(255,255,255,.1); backdrop-filter: blur(1px); border: 1px solid var(--white); color: var(--white); font-size: 1.6rem; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15); transition: background-color 0.2s ease, color 0.2s ease;}
.review-modal__angle-btn[aria-pressed="true"] {background: var(--color-primary); color: var(--white); border-color: var(--color-primary);}

.review-modal__nav {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2.4rem;}
/* nav 줄 안의 Swiper 화살표/점: 위치 기본값만 해제 */
.review-modal__arrow.swiper-button-prev,
.review-modal__arrow.swiper-button-next {
  position: relative; top: auto; left: auto; right: auto; margin: 0;
  width: auto; height: auto; color: var(--white); border: none;
}
.review-modal__arrow svg {width: 1.4rem; height: 2.4rem;}
.review-modal__dots.swiper-pagination {
  position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto;
  display: flex; align-items: center;
  --swiper-pagination-bullet-size: 0.8rem;
  --swiper-pagination-bullet-horizontal-gap: 0.4rem;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.4;
  --swiper-pagination-color: #fff;
}

@media (max-width: 640px) {
  /* 헤더 바(5.6rem) 위로 겹치지 않게 이미지 영역 상단으로 내려서 가로로 배치 */
  .review-modal__angle-toggle {top: 6.8rem; right: 1.2rem; left: auto; transform: none; flex-direction: row;}
  .review-modal__angle-btn {width: 4.6rem; height: 3rem; font-size: 1.2rem;}
}

/* 고객 후기 — 메인 EL Media(.media-section)와 같은 컴포넌트를 재사용, 배경/타이틀만 이 페이지용으로 보정 */
.community-review .media-section {background: #f8f8f6; padding: 17rem 0;}
.community-review .media-section .section-title {font-size: 4rem; margin-bottom: 4rem;}

.community-review .media-featured__body {flex-direction: row; align-self: center; gap: 1.6rem; position: absolute; z-index: 2; left: 0; bottom: 0.8rem; width: 100%; padding: 3rem 6rem;}
.community-review .media-featured__body .media-list__type {color: var(--white); font-size: 2.8rem; font-weight: 700;}
.community-review .media-featured__body .media-list__title {color: var(--white); -webkit-line-clamp: 1; font-weight: 300; font-size: 2rem; line-height: 1.8;}
.community-review .media-list__title {font-weight: 400;}


/* ==========================================================================
   상담신청 (.consult-*)
   ========================================================================== */
.consult-section {width: 100%; background: url("../images/sub/community/consult_bg.png") no-repeat center center/cover;padding: 17rem 0;}
.consult-panel {display: flex; align-items: stretch; gap: 4rem;}




.community-review .ba-section{padding-top: 0; padding-bottom: 7rem;}


@media (max-width: 1280px) {
  /* 온라인 상담 목록 — 제목 칸이 좁아지지 않게 나머지 칸 폭을 줄임 */
  .online-table__col-cat {width: 15rem;}
  .online-table__col-writer {width: 10rem;}
  .online-table__col-date {width: 13rem;}
  .online-table__col-status {width: 12rem;}
  .online-table__title a {padding-left: 2rem;}
  .review-gallery {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 1024px) {
  /* 1024 비율 그룹: 게시판 타이틀은 섹션 타이틀과 같은 3.6 */
  .board-header__title {font-size: 3.6rem;}
  .community-review .media-section .section-title {font-size: 3.6rem;}

  /* 공지사항 목록 — 모바일 시안: 뱃지 왼쪽, 제목·날짜 세로 스택 */
  .board-list__row {padding: 3rem 0;}
  .board-list__row a {display: grid; grid-template-columns: auto 1fr; column-gap: 2rem; row-gap: 0.4rem; align-items: center;}
  .board-list__badge {grid-row: 1 / 3; width: 8rem; height: 3.6rem; padding: 0; font-size: 1.6rem;}
  .board-list__title {grid-column: 2; font-size: 2rem;}
  .board-list__date {grid-column: 2; font-size: 1.5rem;}
  .community.community-notice .tab-pills--chip .tab-pills__btn {min-width: 16rem;}

  /* 검색창 전체 폭 */
  .board-search {max-width: none; height: 8rem; margin-top: 5rem; border-radius: 0.5rem;}
  .board-search__select {padding: 0 4rem 0 3.6rem; background-size: 2.4rem; font-size: 1.8rem;}
  .board-search__divider {height: 4rem; margin: 0 4.8rem 0 2rem;}
  input[type=text].board-search__input {font-size: 1.8rem;}
  .board-search__submit {width: 6rem; height: 6rem; margin-right: 2rem;}
  .board-search__submit img {width: 3.2rem; height: 3.2rem;}

  /* 게시판 상세 모바일: 메타 가운데 스택, 이전/다음 글 두 줄 */
  .board-detail-section {padding-top: 4rem; padding-bottom: 25rem;}
  .board-detail__body--spaced {margin-top: 3rem;}
  .board-detail__meta {flex-direction: column; align-items: center; gap: 0; padding: 5.1rem 0; text-align: center;}
  .board-detail__meta .board-list__badge {width:8rem; height: 3.6rem; padding: 0 2.4rem; font-size: 1.6rem;}
  .board-detail__meta .board-list__title {flex: none; width: 100%; margin-top: 2rem; white-space: normal; font-size: 2.4rem;}
  .board-detail__meta .board-list__date {display: block; margin-top: 1.2rem; font-size: 1.6rem;}
  .board-detail__head {justify-content: center; margin: 4.2rem 0 5rem;}
  .board-detail__tools {gap: 2rem;}
  .board-detail__tool {width: 8rem; height: 8rem;}
  .board-detail__tool img {width: 3.2rem;}

  .board-detail__nav {flex-direction: column; align-items: stretch; margin-top: 15rem; padding: 0; border-color: rgba(0,0,0,.5);}
  .board-detail__nav-row {display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 2.6rem; row-gap: 0.4rem; align-items: center; padding: 3rem 0;}
  .board-detail__nav-row--prev .board-detail__nav-arrow {grid-column: 1; grid-row: 1 / 3;}
  .board-detail__nav-row--prev .board-detail__nav-label {grid-column: 2; grid-row: 1;}
  .board-detail__nav-row--prev .board-detail__nav-link {grid-column: 2; grid-row: 2; text-align: left;}
  .board-detail__nav-row--next {grid-template-columns: 1fr auto; text-align: right;}
  .board-detail__nav-row--next .board-detail__nav-label {grid-column: 1; grid-row: 1;}
  .board-detail__nav-row--next .board-detail__nav-link {grid-column: 1; grid-row: 2;}
  .board-detail__nav-row--next .board-detail__nav-arrow {grid-column: 2; grid-row: 1 / 3;}
  .board-detail__nav-divider {width: 100%; height: 1px; margin: 0; background: rgba(0,0,0,.5);}
  .board-detail__nav-arrow {width: 6.4rem; height: 6.4rem;}
  .board-detail__nav-label {font-size: 1.8rem; font-weight: 700;}
  .board-detail__nav-link {font-size: 2rem; font-weight: 500;}
  .board-detail__list-btn {margin-top: 4rem;}
  .board-detail__list-btn .btn {min-width: 20rem; height: 6rem; font-size: 1.8rem; font-weight: 600;}

  .magazine-grid {grid-template-columns: repeat(2, 1fr);}
  .review-gallery {grid-template-columns: repeat(2, 1fr);}
  /* 치료후기 BA 캡션 — 모바일 시안: 왼쪽 세로선 없이 시술명/기간 가운데 정렬 */
  .community-review .ba-slide__caption-info {width: 100%; align-items: center; max-width: none; padding-left: 0; border-left: 0; text-align: center;}
  /* 긴 시술명은 한 줄 말줄임 — 가운데 정렬이라 폭을 잡아주지 않으면 글자 길이만큼 화면 밖으로 넘친다 */
  .community-review .ba-slide__caption-text {width: 100%; justify-content: center; padding: 0 4rem;}
  .community-review .ba-slide__category {min-width: 0;}

  /* 전후 사진 팝업(1024 이하): 각도 버튼을 화살표 줄 아래로, 길면 딤 영역 스크롤 */
  .review-modal {justify-content: flex-start; gap: 3.4rem; padding: 3.2rem 4rem; overflow-y: auto; overscroll-behavior: contain;}
  .review-modal__backdrop {position: fixed;}
  .review-modal__dialog {flex: none; margin-top: auto;}
  .review-modal__nav {flex: none; margin-bottom: auto; padding-bottom: 13.2rem;}
  /* top = 팝업~nav 간격(3.4) + nav 높이(화살표 2.4) + nav~버튼 간격(4.2) */
  .review-modal__angle-toggle {top: calc(100% + 10rem); left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; gap: 1.6rem;}
  .review-modal__angle-btn {width: 9rem; height: 9rem; font-size: 2.6rem;}

  /* 커뮤니티 칩 탭: 공지/매거진은 가운데 정렬, 치료후기는 가로 스크롤 */
  .community .tab-pills--chip .tab-pills__btn {min-width: 13.2rem;}
  /* safe center: 한 줄에 안 들어가면 왼쪽부터 정렬 */
  .tab-pills--center.swiper.swiper-initialized .swiper-wrapper {justify-content: safe center;}
  /* 가운데 정렬 탭: 마지막 칩의 spaceBetween 여백 제거 */
  .tab-pills--center.swiper .swiper-slide:last-child {margin-right: 0 !important;}

  /* 상담신청 — 모바일 시안: 폼 1열, 사진은 섹션 배경 아래쪽(m_consult_bg) */
  /* 아래 여백은 배경(폭 100%)과 같은 비율로 늘어나야 사진이 폼 뒤로 올라오지 않는다 — 768에서 36rem */
  .consult-section {padding: 10rem 0 36rem; background: #f7f5f3 url("../images/sub/community/m_consult_bg.png") no-repeat center bottom / 100% auto;}
  .consult-panel {flex-direction: column;}


  /* 온라인 상담 목록: 1024 이하 카드형 (769~1024는 768 값 고정) */
  .online-table,
  .online-table tbody {display: block;}
  .online-table colgroup {display: none;}
  .online-table thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
  .online-table tr {display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "cat cat status" "title title status" "date writer status"; align-items: center; column-gap: 2rem; padding: 3.6rem 0; border-bottom: 1px solid #c1c1c1; text-align: left;}
  .online-table tbody tr:last-child {border-bottom: 0;}
  .online-table td {display: block; height: auto; padding: 0; border: 0;}
  .online-table__cat {grid-area: cat; font-size: 1.6rem !important;}
  .online-table__title {grid-area: title; min-width: 0; margin-top: 0.8rem;}
  .online-table__title a {max-width: calc(100% - 3.6rem); padding-left: 0; font-size: 2rem; font-weight: 500;}
  .online-table__lock {width: 2rem; height: 2rem; margin-left: 1.2rem;}
  .online-table__date {grid-area: date; margin-top: 2rem; font-size: 1.5rem !important; color: #a1a1a1 !important;}
  .online-table__writer {grid-area: writer; margin-top: 2rem; font-size: 1.5rem !important; color: #a1a1a1 !important;}
  .online-table td:last-child {grid-area: status;}
  .online-status {width: 9.3rem; height: 3.8rem; font-size: 1.6rem;}

  /* 목록 위: 검색(전체 폭) → 상담하기(전체 폭) 세로로 */
  .online-list__top {flex-direction: column; align-items: stretch; gap: 2rem; margin-bottom: 4rem;}
  .online-list__top .board-search {width: 100%; max-width: none;}
  .online-list__write {width: 100%; height: 6rem; font-size: 1.8rem; border-radius: 0.5rem;}
  .online-list__foot {margin-top: 5rem;}

  /* 온라인 상담 글쓰기·비밀글·상세: 1024 이하 모바일 배치 (크기는 PC 값) */
  .online-form__row {flex-direction: column; align-items: stretch;}
  .online-form__label {width: auto; margin-bottom: 1.2rem;}
  .online-form__field {flex-direction: column; align-items: stretch; gap: 1.2rem;}
  input.online-form__control,
  select.online-form__control,
  .online-form__control {width: 100%;}
  textarea.online-form__control--textarea {flex: none; width: 100%;}
  .online-form__sms {margin-right: 0;}
  .online-actions__btn,
  .online-actions__btn--wide {flex: 1; width: auto;}
  input.online-secret__input {width: 100%;}
  .online-secret .online-actions {align-self: stretch;}
}

@media (max-width: 768px) {
  /* 페이지 제목만 (공통 섹션 제목에는 영향 없게) */
  .community .board-header .section-title {font-size: clamp(3rem, 6.5vw, 7rem);}
  .community .board-header .section-description{font-size: clamp(1.6rem, 4.17vw, 3.2rem); margin-top: clamp(1.5rem, 3.91vw, 3rem); line-height: 1.5;}

  .board-header {padding: clamp(6.5rem, 16.93vw, 13rem) 0 clamp(4rem, 10.42vw, 8rem);}
  .board-header__title {font-size: clamp(2.4rem, 6.25vw, 4.8rem);}
  .board-header__desc {font-size: clamp(1.3rem, 3.39vw, 2.6rem); margin-top: clamp(0.6rem, 1.56vw, 1.2rem);}

  .tab-group {margin-bottom: clamp(4.5rem, 11.72vw, 9rem);}
  .board-list__meta {padding: clamp(1rem, 2.6vw, 2rem) clamp(0.3rem, 0.78vw, 0.6rem); font-size: clamp(1.2rem, 3.2vw, 2.3rem);}

  .board-list__row {padding: clamp(1.5rem, 3.91vw, 3rem) 0;}
  .board-list__row a {column-gap: clamp(1rem, 2.6vw, 2rem);}
  .board-list__date {font-size: clamp(1.2rem, 3.2vw, 1.8rem);}
  .community.community-notice .tab-pills--chip .tab-pills__btn {min-width: clamp(6.6rem, 20.83vw, 16rem);}
  .board-search {height: clamp(4.4rem, 10.42vw, 8rem); margin-top: clamp(2.5rem, 6.51vw, 5rem); border-radius: clamp(0.25rem, 0.65vw, 0.5rem);}
  .board-search__select {padding: 0 clamp(2.4rem, 5.21vw, 4rem) 0 clamp(1.2rem, 4.69vw, 3.6rem); background-size: clamp(1.4rem, 3.13vw, 2.4rem); font-size: clamp(1.3rem, 3.13vw, 2.4rem);}
  .board-search__divider {height: clamp(2rem, 5.21vw, 4rem); margin: 0 clamp(1.2rem, 6.25vw, 4.8rem) 0 clamp(0.8rem, 2.6vw, 2rem);}
  input[type=text].board-search__input {font-size: clamp(1.3rem, 3.13vw, 2.4rem);}
  .board-search__submit {width: clamp(3.4rem, 7.81vw, 6rem); height: clamp(3.4rem, 7.81vw, 6rem); margin-right: clamp(0.6rem, 2.6vw, 2rem);}
  .board-search__submit img {width: clamp(1.8rem, 4.17vw, 3.2rem); height: clamp(1.8rem, 4.17vw, 3.2rem);}
  .board-list__title {font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .board-list__badge {width: clamp(5.6rem, 13.02vw, 10rem); height: clamp(2.6rem, 6.25vw, 4.8rem); font-size: clamp(1.2rem, 3.2vw, 2.3rem);}

  .board-detail-section {padding-top: clamp(2rem, 5.21vw, 4rem); padding-bottom: clamp(12.5rem, 32.55vw, 25rem);}
  .board-detail__body--spaced {margin-top: clamp(1.5rem, 3.91vw, 3rem);}
  .board-detail__meta {padding: clamp(2.55rem, 6.64vw, 5.1rem) 0;}
  .board-detail__meta .board-list__badge {width: clamp(5.6rem, 13.02vw, 10rem); height: clamp(2.8rem, 6.25vw, 4.8rem); padding: 0 clamp(1.2rem, 3.13vw, 2.4rem); font-size: clamp(1.2rem, 3.2vw, 2.3rem);}
  .board-detail__meta .board-list__title {margin-top: clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem);}
  .board-detail__meta .board-list__date {margin-top: clamp(0.6rem, 1.56vw, 1.2rem); font-size: clamp(1.2rem, 3.2vw, 2rem);}
  .board-detail__head {margin: clamp(2.1rem, 5.47vw, 4.2rem) 0 clamp(2.5rem, 6.51vw, 5rem);}
  .board-detail__tools {gap: clamp(1rem, 2.6vw, 2rem);}
  .board-detail__tool {width: clamp(4rem, 10.42vw, 8rem); height: clamp(4rem, 10.42vw, 8rem);}
  .board-detail__tool img {width: clamp(1.6rem, 4.17vw, 3.2rem);}
  .board-detail__nav {margin-top: clamp(7.5rem, 19.53vw, 15rem);}
  .board-detail__nav-row {column-gap: clamp(1.3rem, 3.39vw, 2.6rem); padding: clamp(1.5rem, 3.91vw, 3rem) 0;}
  .board-detail__nav-arrow {width: clamp(3.2rem, 8.33vw, 6.4rem); height: clamp(3.2rem, 8.33vw, 6.4rem);}
  .board-detail__nav-arrow svg {width: clamp(1.4rem, 2.6vw, 2rem); height: clamp(1.4rem, 2.6vw, 2rem);}
  .board-detail__nav-label {font-size: clamp(1.3rem, 3.13vw, 2.4rem); font-weight: 700;}
  .board-detail__nav-link {font-size: clamp(1.4rem, 3.65vw, 2.8rem); font-weight: 500;}
  .board-detail__list-btn {margin-top: clamp(2rem, 5.21vw, 4rem);}
  .board-detail__list-btn .btn {min-width: clamp(10rem, 26.04vw, 20rem); height: clamp(4rem, 10.42vw, 8rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem);}
  .board-detail__body {font-size: clamp(1.3rem, 3.39vw, 2.6rem);}

  /* 최소값 5.6rem — 320px에서도 칩 4개가 한 줄에 */
  .community .tab-pills--chip .tab-pills__btn {min-width: clamp(5.6rem, 17.19vw, 13.2rem);}

  /* 매거진 목록: 모바일 시안은 1열 카드, 카드마다 아래 구분선(그리드 전체 구분선 대신) */
  .magazine-grid {margin-top: clamp(2rem, 5.21vw, 4rem); grid-template-columns: 1fr; gap: clamp(3.5rem, 9.11vw, 7rem); padding: 0 clamp(0.2rem, 0.52vw, 0.4rem); border-bottom: 0; }
  .magazine-card {padding-bottom: clamp(2.5rem, 6.51vw, 5rem); border-bottom: 1px solid var(--color-text);}
  .magazine-card__thumb {aspect-ratio: 68 / 66;}
  .magazine-card__thumb::before{width: clamp(4rem, 10.42vw, 8rem); height: clamp(2.25rem, 5.86vw, 4.5rem); bottom: clamp(2rem, 5.21vw, 4rem); right: clamp(1.8rem, 4.69vw, 3.6rem);}
  .magazine-card__type {margin-top: clamp(1.5rem, 3.91vw, 3rem); font-size: clamp(1.3rem, 3.13vw, 2.4rem);}
  .magazine-card__title {margin-top: clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.5rem, 3.91vw, 3rem);}
  .magazine-card__desc {margin-top: clamp(0.3rem, 0.78vw, 0.6rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .magazine-card__date {margin-top: clamp(0.8rem, 2.08vw, 1.6rem); font-size: clamp(1.2rem, 3.2vw, 2.3rem);}

  /* 치료후기 갤러리 — 모바일 시안: 위아래 구분선 안에 2열, 아래 구분선 다음 페이지네이션 */
  .review-gallery-section {padding-bottom: clamp(7.5rem, 19.53vw, 15rem);}
  .review-gallery {grid-template-columns: repeat(2, 1fr); gap: clamp(2.3rem, 5.99vw, 4.6rem) clamp(1rem, 2.6vw, 2rem); padding: clamp(2.5rem, 6.51vw, 5rem) 0 clamp(2.5rem, 6.51vw, 5rem); border-bottom: 1px solid var(--color-text);}
  .review-gallery__lock {gap: clamp(0.3rem, 0.78vw, 0.6rem); font-size: clamp(1.2rem, 3.2vw, 1.6rem);}
  .review-gallery__lock img {width: clamp(1.3rem, 3.39vw, 2.6rem); height: clamp(1.6rem, 4.17vw, 3.2rem);}
  .review-gallery__caption {margin-top: clamp(1.4rem, 3.65vw, 2.8rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .review-gallery__period {margin-top: clamp(0.6rem, 1.56vw, 1.2rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem);}

  /* 치료후기 BA — 캡션/각도 버튼 크기(768 기준: 시술명 3.2rem, 기간 2.8rem, 각도 버튼 10rem 정사각) */
  /* 탭 아래 여백은 .ba-panel 여백만 사용 */
  .community-review .ba-section {padding: clamp(2.7rem, 7.03vw, 5.4rem) 0 clamp(4rem, 10.42vw, 8rem);}
  .community-review .ba-header .tab-group {margin-bottom: 0;}
  .community-review .ba-slide__caption-text {padding: 0 clamp(2rem, 5.21vw, 4rem);}
  .sub-page.community-review .ba-slide__badge {bottom: clamp(1.3rem, 3.39vw, 2.6rem); font-size: clamp(1.3rem, 3.26vw, 2.5rem);}
  .community-review .ba-slide__caption-text {font-size: clamp(1.6rem, 4.17vw, 3.2rem);}
  .community-review .ba-slide__category {font-weight: 600; text-align: center;}
  .community-review .ba-slide__duration {font-size: clamp(1.4rem, 3.65vw, 2.8rem); font-weight: 500;}
  .community-review .ba-slide__caption {gap: clamp(2rem, 5.21vw, 4rem);}
  .community-review .ba-slide__caption-info {gap: clamp(1.4rem, 3.65vw, 2.8rem);}
  .community-review .ba-angle-toggle {gap: clamp(0.6rem, 1.56vw, 1.2rem);}
  .community-review .ba-angle-toggle__btn {width: clamp(5rem, 13.02vw, 10rem); height: clamp(5rem, 13.02vw, 10rem); padding: 0; font-size: clamp(1.2rem, 3.2vw, 2.4rem);}

  /* 고객 후기: PC 보정값을 모바일 시안으로 */
  .community-review .media-section {padding: clamp(6.5rem, 16.93vw, 13rem) 0 clamp(7.5rem, 19.53vw, 15rem);}
  .community-review .media-section .section-title {margin-bottom: 0; font-size: clamp(2.2rem, 5.73vw, 4.4rem); line-height: 1.6; text-align: center;}
  .community-review .media-section .section-title b {display: block;}
  .community-review .media-grid {gap: clamp(1.5rem, 3.91vw, 3rem);}
  .community-review .media-featured__body {flex-direction: column; gap: clamp(0.4rem, 1.04vw, 0.8rem); bottom: 0; padding: 0 clamp(2rem, 5.21vw, 4rem) clamp(2.4rem, 6.25vw, 4.8rem);}
  .community-review .media-featured__body .media-list__type {font-size: clamp(1.6rem, 4.17vw, 3.2rem);}
  .community-review .media-featured__body .media-list__title {font-size: clamp(1.4rem, 3.65vw, 2.8rem); font-weight: 400; line-height: 1.5;}
  .community-review .media-list {max-height: clamp(33.5rem, 87.24vw, 67rem);}
  .community-review .media-list__item:first-child {border-top: 0;}
  .community-review .media-list__type {font-size: clamp(1.2rem, 3.2vw, 2rem);}
  .community-review .media-list__title {font-size: clamp(1.4rem, 3.7vw, 2.6rem); font-weight: 500;}
  .community-review .media-section .btn-wrap {margin-top: clamp(1.6rem, 4.17vw, 3.2rem);}
  .community-review .media-section .btn-wrap .btn {width: 100%; border-color: #d7d4d2;}

  /* 치료 전후 상세 팝업 — 모바일 시안: 양옆 딤 4rem 전체 폭, 버튼 배치는 1024 이하 규칙과 같고 크기만 축소 */
  .review-modal {gap: clamp(1.7rem, 4.43vw, 3.4rem); padding: clamp(1.6rem, 4.17vw, 3.2rem) clamp(2rem, 5.21vw, 4rem);}
  .review-modal__dialog {width: 100%;}
  .review-modal__content{border-radius: 0.5rem;}
  .review-modal__header {height: clamp(3.6rem, 9.38vw, 7.2rem);}
  /* 좌우 여백 = 닫기 버튼 자리(오른쪽 2.8 + 버튼 2.2 + 여유) — 1rem이면 긴 시술명 말줄임이 X 밑으로 들어간다 */
  .review-modal__title {padding: 0 clamp(2.8rem, 7.29vw, 5.6rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem); font-weight: 600;}
  .review-modal__close {right: clamp(1.4rem, 3.65vw, 2.8rem); width: clamp(1.1rem, 2.86vw, 2.2rem); height: clamp(1.1rem, 2.86vw, 2.2rem);}
  .review-modal__half {aspect-ratio: 344 / 448;}
  .review-modal__badge {bottom: clamp(1.4rem, 3.65vw, 2.8rem); font-size: clamp(1.2rem, 3.13vw, 2.4rem);}
  .review-modal__nav {gap: clamp(1.4rem, 3.65vw, 2.8rem); padding-bottom: clamp(6.6rem, 17.19vw, 13.2rem);}
  .review-modal__arrow svg {width: clamp(0.8rem, 1.82vw, 1.4rem); height: clamp(1.2rem, 3.13vw, 2.4rem);}
  .review-modal__dots.swiper-pagination {--swiper-pagination-bullet-size: clamp(0.6rem, 1.43vw, 1.1rem); --swiper-pagination-bullet-horizontal-gap: clamp(0.45rem, 1.11vw, 0.85rem);}
  /* top = 팝업 아래 간격(3.4) + nav 높이(화살표 2.4) + nav~버튼 간격(4.2) */
  .review-modal__angle-toggle {top: calc(100% + clamp(5rem, 13.02vw, 10rem)); gap: clamp(0.8rem, 2.08vw, 1.6rem);}
  .review-modal__angle-btn {width: clamp(4.5rem, 11.72vw, 9rem); height: clamp(4.5rem, 11.72vw, 9rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem);}

  .consult-section {padding: clamp(5rem, 13.02vw, 10rem) 0 clamp(18rem, 46.87vw, 36rem);}




  /* ==========================================================================
     온라인 상담 모바일 (768 시안 기준 최대값)
     ========================================================================== */
  /* 페이지 설명 — 온라인 상담 시안은 공지/매거진(3.2rem)보다 작은 2.8rem, 한 줄 */
  .community-online .board-header .section-description {font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .online-list-section,
  .online-form-section,
  .online-secret-section,
  .online-view-section {padding: clamp(2rem, 5.21vw, 4rem) 0 clamp(9rem, 23.44vw, 18rem);}

  /* 목록 — 카드형 레이아웃은 1024 이하 블록, 여기서는 크기만 축소 */
  .online-table,
  .online-table tbody {display: block;}
  .online-table colgroup {display: none;}
  .online-table thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
  .online-table tr {display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "cat cat status" "title title status" "date writer status"; align-items: center; column-gap: clamp(1rem, 2.6vw, 2rem); padding: clamp(1.8rem, 4.69vw, 3.6rem) 0; border-bottom: 1px solid #c1c1c1; text-align: left;}
  .online-table tbody tr:last-child {border-bottom: 0;}
  .online-table td {display: block; height: auto; padding: 0; border: 0;}
  .online-table__cat {grid-area: cat; font-size: clamp(1.2rem, 3.2vw, 2.2rem) !important;}
  .online-table__title {grid-area: title; min-width: 0; margin-top: clamp(0.4rem, 1.04vw, 0.8rem);}
  .online-table__title a {max-width: calc(100% - clamp(2.4rem, 4.69vw, 3.6rem)); padding-left: 0; font-size: clamp(1.4rem, 3.65vw, 2.8rem); font-weight: 500;}
  .online-table__lock {width: clamp(1.2rem, 2.6vw, 2rem); height: clamp(1.2rem, 2.6vw, 2rem); margin-left: clamp(0.6rem, 1.56vw, 1.2rem);}
  .online-table__date {grid-area: date; margin-top: clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.2rem, 3.2vw, 1.8rem) !important; color: #a1a1a1 !important;}
  .online-table__writer {grid-area: writer; margin-top: clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.2rem, 3.2vw, 1.8rem) !important; color: #a1a1a1 !important;}
  .online-table td:last-child {grid-area: status;}
  .online-status {width: clamp(6rem, 15.63vw, 12rem); height: clamp(2.6rem, 6.77vw, 5.2rem); font-size: clamp(1.2rem, 3.2vw, 2.3rem);}

  /* 목록 위: 검색(전체 폭) → 상담하기(전체 폭) 세로로 */
  .online-list__top {gap: clamp(1rem, 2.6vw, 2rem); margin-bottom: clamp(2rem, 5.21vw, 4rem);}
  .online-list__write {height: clamp(4rem, 10.42vw, 8rem); font-size: clamp(1.5rem, 3.91vw, 3rem); border-radius: clamp(0.25rem, 0.65vw, 0.5rem);}
  .online-list__foot {margin-top: clamp(2.5rem, 6.51vw, 5rem);}

  /* 하단 버튼 — 전체 폭(두 개면 반씩) */
  .online-actions {gap: clamp(0.9rem, 2.34vw, 1.8rem);}
  .online-actions__btn,
  .online-actions__btn--wide {flex: 1; width: auto; height: clamp(5.2rem, 13.54vw, 10.4rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem); border-radius: clamp(0.5rem, 1.3vw, 1rem); font-weight: 600;}
  .online-actions__btn--wide {font-size: clamp(1.6rem, 4.17vw, 3.2rem);}

  /* 작성 폼 — 라벨 위, 입력칸 전체 폭 */
  .online-form__rows {padding: clamp(0.4rem, 1.04vw, 0.8rem) 0;}
  .online-form__row {flex-direction: column; align-items: stretch; padding: clamp(1.8rem, 4.69vw, 3.6rem) 0;}
  .online-form__label {width: auto; margin-bottom: clamp(1.2rem, 3.13vw, 2.4rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem); font-weight: 600;}
  .online-form__field {flex-direction: column; align-items: stretch; gap: 0;}
  input.online-form__control,
  select.online-form__control,
  .online-form__control {width: 100%; height: clamp(4.8rem, 12.5vw, 9.6rem); padding: 0 clamp(1.5rem, 3.91vw, 3rem); border-radius: clamp(0.5rem, 1.3vw, 1rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  select.online-form__control {background-position: right clamp(1.5rem, 3.91vw, 3rem) center; background-size: clamp(1.4rem, 3.13vw, 2.4rem);}
  textarea.online-form__control--textarea {flex: none; width: 100%; height: clamp(13.9rem, 36.2vw, 27.8rem); padding: clamp(1.2rem, 3.13vw, 2.4rem) clamp(1.5rem, 3.91vw, 3rem);}
  .online-form__hint {margin-top: clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem); line-height: 1.6;}
  .online-form__sms {margin-top: clamp(1.2rem, 3.13vw, 2.4rem); gap: clamp(0.9rem, 2.34vw, 1.8rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem); font-weight: 500;}
  .online-form__sms {margin-right: 0;}
  .online-form__file {gap: clamp(1rem, 2.6vw, 2rem); padding: 0 clamp(1rem, 2.6vw, 2rem);}
  .online-form__file-btn {height: clamp(2.8rem, 7.29vw, 5.6rem); padding: 0 clamp(1.2rem, 3.13vw, 2.4rem); border-radius: clamp(0.3rem, 0.65vw, 0.5rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem); font-weight: 600;}
  .online-form__file-name {font-size: clamp(1.4rem, 3.39vw, 2.6rem);}
  .online-form__agree {gap: clamp(1rem, 2.6vw, 2rem); margin-top: clamp(4rem, 10.42vw, 8rem);}
  .online-form__agree .agree-item {gap: clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .online-form__terms {font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .online-form .online-actions {margin-top: clamp(2.5rem, 6.51vw, 5rem);}
  .community-online .checkbox {width: clamp(2rem, 4.69vw, 3.6rem); height: clamp(2rem, 4.69vw, 3.6rem); border-radius: clamp(0.4rem, 0.78vw, 0.6rem); background-size: clamp(1.1rem, 2.6vw, 2rem);}

  /* 비밀글 확인 */
  .online-secret {padding: clamp(4rem, 10.42vw, 8rem) 0 clamp(5rem, 13.02vw, 10rem);}
  .online-secret__icon {width: clamp(8rem, 20.83vw, 16rem); height: clamp(8rem, 20.83vw, 16rem);}
  .online-secret__icon::before {width: clamp(3.8rem, 9.9vw, 7.6rem); height: clamp(3.8rem, 9.9vw, 7.6rem);}
  .online-secret__text {margin-top: clamp(2rem, 5.21vw, 4rem); font-size: clamp(1.5rem, 3.91vw, 3rem);}
  input.online-secret__input {width: 100%; height: clamp(4.7rem, 12.24vw, 9.4rem); margin-top: clamp(3.3rem, 8.59vw, 6.6rem); border-radius: clamp(0.5rem, 1.3vw, 1rem); font-size: clamp(1.4rem, 3.39vw, 2.6rem);}
  .online-secret .online-actions {align-self: stretch; margin-top: clamp(3.6rem, 9.38vw, 7.2rem);}

  /* 상세 */
  .online-view__heading {padding: clamp(3rem, 7.81vw, 6rem) 0 clamp(2rem, 5.21vw, 4rem); font-size: clamp(2rem, 5.21vw, 4rem);}
  .online-view__info {gap: clamp(2.4rem, 6.25vw, 4.8rem); padding: clamp(3rem, 7.81vw, 6rem) 0;}
  .online-view__row dt {width: clamp(6rem, 15.63vw, 12rem); padding-left: 0; font-size: clamp(1.4rem, 3.65vw, 2.8rem); line-height: 1.6;}
  .online-view__row dd {font-size: clamp(1.4rem, 3.65vw, 2.8rem); line-height: 1.6;}
  .online-view__files {gap: clamp(1rem, 2.6vw, 2rem);}
  .online-view--answer .online-view__heading {padding-top: clamp(3rem, 7.81vw, 6rem); padding-bottom: clamp(2rem, 5.21vw, 4rem);}
  .online-view__answer {padding: clamp(1.6rem, 4.17vw, 3.2rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem); line-height: 1.6;}
  .online-view-section .online-actions {margin-top: clamp(3rem, 7.81vw, 6rem); padding-top: clamp(3rem, 7.81vw, 6rem);}
}