/*********************
     아코디언 공통
*********************/
.accordion-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}

/* 개별 아코디언 아이템 영역 — 헤더/패널을 독립 카드로 띄우기 위해 flex column gap 처리 */
.accordion-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* 아코디언 탭 (클릭 영역 전체) — 자체 라운드 + 그림자 */
.accordion-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 5.6rem;
  padding: 1.4rem 1.8rem;
  background: #fff;
  border: 0;
  border-radius: 1.4rem;
  box-shadow: 0px 4px 10px 0px #0000000D;
  margin: 0;
  text-align: left;
  cursor: pointer;
  z-index: 1;
}

/* 탭 좌측 금지 아이콘 */
.accordion-header .icon-b/*********************
     아코디언 공통
*********************/
.accordion-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}

/* 개별 아코디언 아이템 영역 — 헤더/패널을 독립 카드로 띄우기 위해 flex column gap 처리 */
.accordion-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* 아코디언 탭 (클릭 영역 전체) — 자체 라운드 + 그림자 */
.accordion-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 5.6rem;
  padding: 1.4rem 1.8rem;
  background: #fff;
  border: 0;
  border-radius: 1.4rem;
  box-shadow: 0px 4px 10px 0px #0000000D;
  margin: 0;
  text-align: left;
  cursor: pointer;
  z-index: 1;
}

/* 탭 좌측 금지 아이콘 */
.accordion-header .icon-ban {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.accordion-header .icon-ban img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 탭 중앙 제목 */
.accordion-header .title {
  flex: 1;
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0;
}

/* 탭 우측 화살표 */
.accordion-header .icon-chev {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  transform: rotate(180deg);
}
.accordion-header .icon-chev img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.accordion-header.is-open .icon-chev {
  transform: rotate(0deg);
}

/* 펼쳐지는 내용 패널 영역 — 헤더와 분리된 자체 라운드 + 그림자 카드 */
.accordion-panel {
  display: none; /* jQuery slideDown 동작을 위해 초기 숨김 필수 */
  padding: 3rem 1.8rem 1.4rem;
  background: #fff;
  border-radius: 1.4rem;
  box-shadow: 0px 4px 10px 0px #0000000D;
  margin-top: -2rem;
}
.accordion-panel .panel-title {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 1.6rem 0 0.8rem;
}
.accordion-panel .panel-title:first-child {
  margin-top: 0;
}

.accordion-item-type2 .accordion-panel {
    /* display: flex; */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}
.accordion-item-type2 .accordion-panel .icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.accordion-item-type2 .accordion-panel .list-data {
  display: inline-flex;
  flex: 1;
}
.accordion-item-type2 .accordion-panel .list-data li {
    padding-left: 0;
}
.accordion-item-type2 .accordion-panel .list-data li::before {
  display: none;
}

.accordion-item-type2 .accordion-panel.is-open {
  display: flex !important
}


/*********************
   step 공통 (mpti.php / politicalParty.php 공용)
*********************/

/* step header */
.step-header {}
.step-header .step-badge {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-dark);
    display: inline-block;
    padding: .8rem 1.8rem;
    border-radius: 3rem;
    line-height: 1;
    background: var(--bg-light-gray);
}
.step-header .step-badge .current-step {
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--color-dark);
    line-height: 1;
}
.step-header .step-question {
    margin-top: 2.4rem;
}
.step-header .step-question h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-dark);
}

/* step content */
.step-con {
    margin: 3.5rem auto 5.5rem;
}
.step-con .step-list {
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
    width: 100%;
}
.step-con .step-list li {}
.step-con .step-list .step-btn {
    padding: 3rem 2rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-gray);
    line-height: 1.4;
    text-align: center;
}
.step-con .step-list .step-btn b {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-dark);
}


.step-item {}

.step-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.step-con .step-list .step-btn.is-selected {
    background: var(--bg-light-gray);
    border-color: var(--border-selected);
}

label.step-btn.box.is-selected {}
.step-con .step-list .step-btn.is-selected b {}

/* next button (.btn ê²°í•©) */
.next-btn {}
.next-btn span {}
.next-btn:disabled {}


/*********************
   mptiResult.php
*********************/
#mpti-result-section {}

.result-header {}
.result-header .result-label {}
.result-header .result-title {}
.result-header .result-sub {}

.result-desc {}
.result-desc p {}

.result-breakdown {}
.result-breakdown h2 {}
.result-breakdown .breakdown-list {}
.result-breakdown .breakdown-item {}
.result-breakdown .breakdown-item.is-top {}
.result-breakdown .breakdown-label {}
.result-breakdown .breakdown-count {}

.result-cta {}
.result-cta .result-retry {}
an {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.accordion-header .icon-ban img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 탭 중앙 제목 */
.accordion-header .title {
  flex: 1;
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0;
}

/* 탭 우측 화살표 */
.accordion-header .icon-chev {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  transform: rotate(180deg);
}
.accordion-header .icon-chev img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.accordion-header.is-open .icon-chev {
  transform: rotate(0deg);
}

/* 펼쳐지는 내용 패널 영역 — 헤더와 분리된 자체 라운드 + 그림자 카드 */
.accordion-panel {
  display: none; /* jQuery slideDown 동작을 위해 초기 숨김 필수 */
  padding: 3rem 1.8rem 1.4rem;
  background: #fff;
  border-radius: 1.4rem;
  box-shadow: 0px 4px 10px 0px #0000000D;
  margin-top: -2rem;
}
.accordion-panel .panel-title {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 1.6rem 0 0.8rem;
}
.accordion-panel .panel-title:first-child {
  margin-top: 0;
}

.accordion-item-type2 .accordion-panel {
    /* display: flex; */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}
.accordion-item-type2 .accordion-panel .icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.accordion-item-type2 .accordion-panel .list-data {
  display: inline-flex;
  flex: 1;
}
.accordion-item-type2 .accordion-panel .list-data li {
    padding-left: 0;
}
.accordion-item-type2 .accordion-panel .list-data li::before {
  display: none;
}

.accordion-item-type2 .accordion-panel.is-open {
  display: flex !important
}


/*********************
   step 공통 (mpti.php / politicalParty.php 공용)
*********************/

/* step header */
.step-header {}
.step-header .step-badge {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-dark);
    display: inline-block;
    padding: .8rem 1.8rem;
    border-radius: 3rem;
    line-height: 1;
    background: var(--bg-light-gray);
}
.step-header .step-badge .current-step {
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--color-dark);
    line-height: 1;
}
.step-header .step-question {
    margin-top: 2.4rem;
}
.step-header .step-question h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-dark);
}

/* step content */
.step-con {
    margin: 3.5rem auto 5.5rem;
}
.step-con .step-list {
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
    width: 100%;
}
.step-con .step-list li {}
.step-con .step-list .step-btn {
    padding: 3rem 2rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-gray);
    line-height: 1.4;
    cursor: pointer;
}
.step-con .step-list .step-btn b {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-dark);
}

/* step item (한 번에 한 개만 노출 — hidden 속성으로 제어) */
.step-item {}

/* radio: 시각적으로 숨기고 label(.step-btn)을 클릭 타깃으로 사용 */
.step-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 선택된 상태 (스타일은 직접 작성) */
.step-con .step-list .step-btn.is-selected {}
.step-con .step-list .step-btn.is-selected b {}

/* next button (.btn ê²°í•©) */
.next-btn {}
.next-btn span {}
.next-btn:disabled {}


/*********************
   mptiResult.php — 결과 페이지
*********************/
/* sub-section을 flex column으로 펼쳐 확인 버튼이 하단에 붙도록 함 */
#mpti-result-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 결과 타이틀: "MPTI 테스트 결과" + "결과 타이틀" 2행 (center) */
.result-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    margin: 1rem 0 4rem;
}
.result-header .result-label {
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.4;
}
.result-header .result-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.4;
}

/* 본문 3블록: 라벨 + 본문, 2번째부터 상단 구분선 */
.result-con {
    display: flex;
    flex-direction: column;
}
.result-con .result-item {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 2.6rem 0;
}
.result-con .result-item + .result-item {
    border-top: 1px solid var(--border);
}
.result-con .result-item__label {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-gray);
    line-height: 1;
}
.result-con .result-item__text {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.5;
}

/* 확인 버튼: sub-section flex의 맨 아래로 push */
.result-cta {
    margin-top: auto;
}


/*********************
   news.php — 정치 뉴스 리스트
*********************/
.news-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
}
.news-list > li {
    width: 100%;
}
.news-list a {
    display: flex;
    align-items: stretch;
    gap: 1.6rem;
    text-decoration: none;
    color: inherit;
}

/* 좌측 썸네일 (시안 135×109 → rem 환산) */
.news-list .news-thumb {
    flex-shrink: 0;
    width: 13.5rem;
    height: 10.9rem;
    overflow: hidden;
    /* border-radius: 0.6rem; */
    background: #d9d9d9;
}
.news-list .news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 우측 메타 영역 */
.news-list .news-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* 1줄 ellipsis */
.news-list .news-tit {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2줄 ellipsis */
.news-list .news-desc {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 날짜는 메타 영역 하단으로 push */
.news-list .news-date {
    margin-top: auto;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-light-gray);
    line-height: 1.2;
}

/* 무한 스크롤 트리거 (보이지 않는 sentinel) */
#newsSentinel {
    width: 100%;
    height: 1px;
}


/*********************
   vote.php — 찬반투표 리스트
*********************/
.vote-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.vote-list > li {
    position: relative;
    padding: 3rem 0;
}
.vote-list > li:first-child {
    padding-top: 0
}
/* 풀-블리드 5px 구분선 (.container 좌우 padding 만큼 음수 마진으로 확장) */
.vote-list > li + li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2rem;
    right: -2rem;
    height: 0.5rem;
    background: var(--border);
}

.vote-list .vote-item {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-decoration: none;
    color: inherit;
}
.vote-list .vote-tit {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
}
/* 주제 설명: 1줄 ellipsis */
.vote-list .vote-desc {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 찬성/반대 카운트 라벨 줄 (vote.php 리스트 + vote_detail.php 공용) */
.vote-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-light-gray);
    line-height: 1;
}
.vote-meta span {
  color: inherit;
  font-weight: 300;
  font-size: 1.3rem;
}
.vote-meta b {
    font-weight: 300;
    color: inherit;
}

/* 비율 바 (공용) */
.vote-bar {
    width: 100%;
    height: 0.7rem;
    border-radius: 3rem;
    background: #3a3a3a;
    overflow: hidden;
}
.vote-bar__fill {
    display: block;
    height: 100%;
    background: var(--bg-blue);
    border-radius: inherit;
    transition: width 0.3s ease;
}

/* 참여하기 버튼 (시안: radius 8, padding 15/20, 13px/500) */
.vote-list .vote-cta {
    margin-top: 0.6rem;
    border-radius: 0.8rem;
    padding: 1.5rem 2rem;
}
.vote-list .vote-cta > span {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
}


/*********************
   vote_detail.php — 찬반투표 상세
*********************/
#vote-detail-section {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

/* 투표 전: 결과 바·댓글 영역 숨김 */
#vote-detail-section:not(.has-voted) .vote-detail__result,
#vote-detail-section:not(.has-voted) .vote-comments {
    display: none;
}

/* 주제 헤더 */
.vote-detail__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* padding-top: 1rem; */
}
.vote-detail__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
}
.vote-detail__desc {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.6;
}

/* 찬성/반대 의견 블록 — 인라인 헤더 ("찬성 의견 : {title}") */
.vote-detail__args {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vote-arg {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem 0;
}
.vote-arg__head {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
}
.vote-arg--agree .vote-arg__head {
    color: var(--color-blue);
}
.vote-arg--disagree .vote-arg__head {
    color: #3a3a3a;
}
.vote-arg__desc {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.6;
}

.vote-arg__prefix {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit
}

/* 결과 영역 (카운트 + 바) — vote.php와 vote-meta/vote-bar 컴포넌트 공유 */
.vote-detail__result {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* CTA 버튼 그룹: 찬성 / 반대 가로 배치 (시안 padding 15/20, radius 8, 13/500) */
.vote-detail__cta {
    display: flex;
    gap: 1rem;
}
.vote-detail__cta .vote-btn {
    flex: 1;
    border-radius: 0.8rem;
    padding: 1.5rem 2rem;
}
.vote-detail__cta .vote-btn > span {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
}
.vote-detail__cta .vote-btn[disabled] {
    cursor: not-allowed;
    opacity: 1;
}

/* ---- 댓글 영역 ---- */
.vote-comments {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding-top: 2.4rem;
    position: relative;
}
/* 위쪽 풀-블리드 5px 구분선 */
.vote-comments::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2rem;
    right: -2rem;
    height: 0.5rem;
    background: var(--border);
}

.vote-comments__count {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.2;
}

.vote-comments__count span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.vote-comments__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}
.vote-comment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.5rem;
    background: var(--bg-light-gray);
    border-radius: 0.8rem;
}
.vote-comment__text {
    flex: 1;
    min-width: 0;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.4;
    word-break: break-word;
}
.vote-comment__date {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-light-gray);
    line-height: 1.2;
}

/* 댓글 입력창 (시안 frame-9: bg #f3f3f3, radius 10, padding 20, 가로형 input + 전송 아이콘) */
.vote-comment-form {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: var(--bg-light-gray);
    border-radius: 1rem;
    margin-top: 0.6rem;
}
.vote-comment-form__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.4;
    font-family: inherit;
}
.vote-comment-form__input::placeholder {
    color: var(--color-dark);
}
.vote-comment-form__submit {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-light-gray);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vote-comment-form__submit svg {
    width: 100%;
    height: 100%;
}


/*********************
   common header — 서브 헤더 우측 액션 슬롯 ($headerActions)
*********************/
.sub-header-bar .hd-actions {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
}
/* 헤더 더보기(⋯) 버튼 */
.hd-more-wrap {
    position: relative;
}
.hd-more {
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-dark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hd-more svg {
    width: 2.4rem;
    height: 2.4rem;
}
/* 더보기 드롭다운 */
.hd-more-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 13rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0px 4px 10px 0px #0000000D;
    padding: 0.4rem 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
}
.hd-more-menu[hidden] {
    display: none;
}
.hd-more-menu a {
    display: block;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
    color: var(--color-dark);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.hd-more-menu a + a {
    border-top: 1px solid var(--border);
}


/*********************
   community.php — 게시글 리스트
*********************/
/* 탭바: 좌측 카테고리 셀렉트 + 우측 액션 */
.community-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 0;
    padding-top: 0;
}

/* 카테고리 셀렉트 토글 */
.cat-select {
    position: static;
}
.cat-select__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: 0;
    padding: 0.4rem 0;
    cursor: pointer;
    line-height: 1;
}
.cat-select__toggle span {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-dark);
}
.cat-select__toggle .icon {
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    transition: transform 0.2s ease;
}
.cat-select__chev {
}
.cat-select.is-open .cat-select__toggle .icon {
    transform: rotate(180deg);
}

/* 카테고리 그리드 패널 (3×2, 전폭 풀-블리드) */
.cat-select__panel {
    position: absolute;
    top: 100%;
    left: -2rem;
    right: -2rem;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* border-top: 1px solid var(--border); */
    /* border-bottom: 1px solid var(--border); */
    z-index: 90;
    box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.12);
}
.cat-select__panel[hidden] {
    display: none;
}
.cat-select__opt {
    border: 0;
    background: transparent;
    padding: 1.6rem 0.6rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-dark);
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
}
.cat-select__opt + .cat-select__opt {
    border-left: 1px solid var(--border);
}
.cat-select__panel .cat-select__opt:nth-child(n+4) {
    border-top: 1px solid var(--border);
}
.cat-select__opt.is-current {
    font-weight: 700;
}

/* 우측 액션 그룹 */
.toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.btn-refresh {
    /* width: 3.6rem; */
    /* height: 3.6rem; */
    padding: 0;
    border: 0;
    border-radius: 0.8rem;
    background: var(--bg-light-gray);
    color: var(--color-dark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.3rem;
}
.btn-refresh svg {
    width: 1.6rem;
    height: 1.6rem;
}
.btn-write {
    padding: 0.6rem 1.3rem;
    background: var(--bg-light-gray);
    border-radius: 0.8rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: none;
    line-height: 1;
    border: 0;
    cursor: pointer;
}

/* 리스트 컨테이너 */
.post-list-wrap {
    width: 100%;
    transition: opacity 0.15s ease;
}
.post-list-wrap.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* 게시글 리스트 — myPost.php / myReview.php에서도 재사용 가능한 공통 컴포넌트 */
.post-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* .container 좌우 padding 너머까지 풀-블리드 */
.post-list > li {
    margin: 0 -2rem;
    padding: 2rem;
}
.post-list > li + li {
    border-bottom: 0.2rem solid #ededed
}
/* 조회수 TOP3 상단 고정 항목만 파란 배경 (is-hot) */
.post-list > li.is-hot {
    background: var(--bg-pale-blue);
    border: 2px solid #fff
}

.post-list > li > a {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-decoration: none;
    color: inherit;
}

/* 닉네임 + 일시 */
.post-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}
.post-item__head * {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-dark);
    line-height: 1.2;
}
/* 제목 1줄 일립시스 */
.post-item__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 내용 2줄 일립시스 */
.post-item__excerpt {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 카운트 메타 (좋아요·댓글·조회) */
.post-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 0.4rem;
}
.post-item__meta * {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-dark);
    line-height: 1;
}

/* 빈 상태 */
.community-empty {
    width: 100%;
    padding: 6rem 2rem;
    font-size: 1.4rem;
    color: var(--color-light-gray);
    text-align: center;
    line-height: 1.6;
}


/*********************
   닉네임 입력 공용 (nicknameField.php — write.php / 댓글 입력)
*********************/
.nick-field {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.4rem 1.6rem;
    background: var(--bg-light-gray);
    border-radius: 1rem;
}
.nick-field__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.4;
}
.nick-field__input::placeholder {
    color: var(--color-light-gray);
}
/* 랜덤 닉네임 토글: 기본 회색 → .is-active 파란색 */
.nick-random {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-light-gray);
}
.nick-random__check {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
    flex-shrink: 0;
}
.nick-random__label {
    font-size: 1.3rem;
    font-weight: 400;
    color: inherit;
    line-height: 1;
    white-space: nowrap;
}
.nick-random.is-active {
    color: var(--color-positive);
}


/*********************
   write.php — 글쓰기 폼
*********************/
.write-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.form-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1;
}

/* 공통 입력 박스 (select / input / textarea) */
.form-select,
.form-input,
.form-textarea {
    width: 100%;
    padding: 1.4rem 1.6rem;
    background: var(--bg-light-gray);
    border: 0;
    border-radius: 1rem;
    outline: none;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.4;
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-light-gray);
}
.form-textarea {
    min-height: 18rem;
    resize: vertical;
}

/* select: 네이티브 화살표 숨기고 커스텀 chevron */
.form-select-wrap {
    position: relative;
    width: 100%;
}
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 4rem;
    cursor: pointer;
}
/* placeholder("카테고리 선택") 선택 상태 → 다른 인풋 placeholder와 동일 회색 */
.form-select:invalid {
    color: var(--color-light-gray);
}
/* 드롭다운 옵션 폰트 사이즈를 셀렉트와 동일하게 */
.form-select option {
    font-size: 1.4rem;
    color: var(--color-dark);
}
.form-select__chev {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
    color: var(--color-gray);
    pointer-events: none;
}

.write-submit {
    margin-top: 1rem;
    border-radius: 1rem;
}


/*********************
   communityDetail.php — 게시글 상세
*********************/
/* 탭바 우측: 이전 / 다음 / 목록 */
.detail-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}
.detail-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.4rem;
    padding: 0 1.4rem;
    border-radius: 0.8rem;
    background: var(--bg-light-gray);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.detail-nav__btn.is-disabled {
    color: var(--color-light-gray);
    cursor: default;
    pointer-events: none;
}

/* 게시글 본문 — 상단/하단 풀-블리드 5px 구분선 */
.post-detail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.4rem 0;
    margin-top: 1rem;
}
.post-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2rem;
    right: -2rem;
    height: 0.5rem;
    background: var(--border);
}

.post-detail__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.post-detail__head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.2;
}
.post-detail__head-top * {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.post-detail__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.4;
}
.post-detail__content {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.7;
    word-break: break-word;
}

/* 푸터: 카운트 메타 + 추천/반대 */
.post-detail__footer {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
.post-meta {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-dark);
    line-height: 1;
}
.post-meta * {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.post-meta b { font-weight: 400; color: inherit; }

/* 추천/반대 버튼 행 */
.react-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    /* margin-top: 2rem; */
}
.react-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.react-btn__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.react-btn__label {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-gray);
    line-height: 1;
}
.react-btn__label b { font-weight: 500; color: inherit; }
.react-btn--like .react-btn__label b {
    color: var(--color-positive)
}
.react-btn--dislike .react-btn__label b {
    color: var(--color-negative)
}
.react-btn--like   .react-btn__ico { color: var(--color-positive); }
.react-btn--dislike .react-btn__ico { color: var(--color-negative); }
.react-btn.is-locked { cursor: default; }

/* 게시글 푸터 추천/반대: 회색 박스 버튼 (시안) */
.react-row--post .react-btn {
    flex: 1;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.8rem 1.7rem;
    border-radius: 0.8rem;
    background: var(--bg-light-gray);
}


/*********************
   communityDetail.php — 댓글
*********************/
.comment-area {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-top: 2.4rem;
}
/* 상단 풀-블리드 5px 구분선 */
.comment-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2rem;
    right: -2rem;
    height: 0.5rem;
    background: var(--border);
}

.comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comment-head__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.2;
}
.comment-head__title * {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.comment-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width: 3.4rem; */
    /* height: 3.4rem; */
    padding: 0;
    border: 0;
    border-radius: 0.8rem;
    background: var(--bg-light-gray);
    color: var(--color-gray);
    cursor: pointer;
    padding: 0.6rem 1.3rem;
}

/* 댓글 입력 */
.comment-write {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.comment-write__text {
    width: 100%;
    min-height: 14rem;
    padding: 1.4rem 1.6rem;
    background: var(--bg-light-gray);
    border: 0;
    border-radius: 1rem;
    outline: none;
    resize: vertical;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.5;
}
.comment-write__text::placeholder { color: var(--color-light-gray); }
.comment-write__submit {
    border-radius: 1rem;
}

/* 댓글 리스트 */
.comment-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.comment-empty {
    padding: 2rem;
    font-size: 1.3rem;
    color: #747474;
    text-align: center;
    font-weight: 300;
    line-height: 1.6;
}
.comment-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.8rem 0;
}
.comment-item + .comment-item {
    border-top: 1px solid var(--border);
}
.comment-item__head {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.comment-item__author {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.2;
}
.comment-item__text {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.5;
    word-break: break-word;
}
.comment-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.comment-item__date {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-light-gray);
    line-height: 1.2;
}


/*********************
   myPost.php — 내 게시글
*********************/
/* post-list 재사용 + 삭제 버튼 추가 */
.my-post-list .post-item {
    position: relative;
}
/* 게시글 링크 영역: 삭제 버튼 공간 확보 */
.my-post-list .post-item__link {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-decoration: none;
    color: inherit;
    padding-right: 4rem;   /* 삭제 버튼 너비만큼 오른쪽 여백 */
}
/* 삭제 버튼: 우측 중앙 고정 */
.post-item__del {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-light-gray);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.post-item__del:hover,
.post-item__del:focus-visible {
    background: #fff0f0;
    color: var(--color-negative);
}


/*********************
   myReview.php — 내 댓글
*********************/
.review-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.review-item {
    display: flex;
    flex-direction: column;
    margin: 0 -2rem;
    padding: 0 2rem;
}
.review-item + .review-item {
    border-top: 1px solid var(--border);
}

/* 원글 제목 링크 */
.review-item__post {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.4rem 0 1rem;
    text-decoration: none;
}
.review-item__post-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-gray);
    line-height: 1.4;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-item__post-arr {
    flex-shrink: 0;
    color: var(--color-light-gray);
}
.review-item__post:hover .review-item__post-title {
    color: var(--color-dark);
}

/* 댓글 본문 */
.review-item__body {
    padding-bottom: 1.4rem;
}
.review-item__content {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.6;
    word-break: break-word;
    margin-bottom: 1rem;
}

/* 메타 + 삭제 버튼 */
.review-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.review-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-light-gray);
    line-height: 1;
}
.review-item__meta * {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.review-item__nick {
    color: var(--color-gray);
    font-weight: 400;
}
.review-item__react {
    color: var(--color-light-gray);
}

/* 댓글 삭제 버튼 */
.review-item__del {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-light-gray);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.review-item__del:hover,
.review-item__del:focus-visible {
    background: #fff0f0;
    color: var(--color-negative);
}