/* sub1-1-1 */
.sub-intro {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
  letter-spacing: 0;
}

.sub-intro-text:first-child {
  font-size: var(--H4);
  line-height: 160%;
}

.sub-intro-text:last-child {
  margin-left: auto;
  max-width: 620px;
  font-size: var(--H6);
  line-height: 160%;
}

.sub-content-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-height: 466px;
  margin-top: 176px;
  letter-spacing: 0;
  background: var(--basic-pattern), var(--violet-500);
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
}

.sub-chairman-photo {
  position: relative;
  bottom: 65px;
  max-width: 400px;
}

.sub-quote {
  position: absolute;
  right: 128px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  color: var(--white);
  font-size: var(--H5);
  font-weight: var(--bold);
  line-height: 160%;
}

.sub-quote-highlight {
  background: var(--violet-900);
  border-radius: var(--radius-s);
  font-size: var(--body-1);
  padding: var(--spacing-xs) var(--spacing-s);
  margin-right: var(--spacing-xs);
}

.sub-quote-wrapper {
  padding: 40px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.sub-quote-wrapper p {
  margin-bottom: 24px;
}

.sub-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-l);
  letter-spacing: 0;
  line-height: 160%;
}

.sub-footer-text {
  font-size: var(--H6);
  font-weight: var(--bold);
}

.sub-signature {
  display: flex;
  align-items: center;
  gap: 17px;
}

.sub-signature .sub-title {
  color: var(--earth-500);
  font-size: var(--body-1);
  font-weight: var(--bold);
}

.sub-signature .sub-image {
  width: 130px;
}

/* sub-1-1-2 */
.sub-profile-intro {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xl);
  letter-spacing: 0;
}

.sub-welcome {
  font-size: var(--H4);
  line-height: 160%;
  text-align: right;
  flex-shrink: 0;
}

.sub-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 466px;
}

.sub-visit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 84px;
  color: var(--white);
  font-size: var(--body-1);
  background: var(--violet-500);
  border-top-left-radius: 48px;
  border-top-right-radius: var(--radius-ms);
  border-bottom-right-radius: var(--radius-ms);
  border-top: 2px solid var(--peach);
  border-left: 2px solid var(--peach);
}

.sub-visit-btn img {
  width: 24px;
  width: 24px;
}

.sub-profile-title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 230px;
}

.sub-role {
  font-size: var(--H5);
  font-weight: var(--bold);
  color: var(--earth-500);
  line-height: 160%;
}

.sub-name {
  color: var(--gray-400);
  font-family: var(--font-secondary);
  font-size: var(--spacing-2xl);
  line-height: 140%;
}

.sub-kanji {
  font-size: var(--H6);
  color: var(--violet-500);
}

.sub-profile-info {
  display: flex;
  margin-top: var(--spacing-5xl);
  gap: var(--spacing-4xl);
  letter-spacing: 0;
}

.sub-info-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sub-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.sub-info-bubble {
  position: relative;
  padding: var(--spacing-2xs) var(--spacing-s);
  width: fit-content;
  color: var(--stat-point);
  font-size: var(--body-1);
  font-weight: var(--bold);
  line-height: 160%;
  letter-spacing: -0.5px;
  background: var(--violet-900);
  border-radius: var(--radius-s);
}

.sub-info-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 18px solid var(--violet-900);
}

.sub-info-text {
  font-size: var(--H5);
  line-height: 160%;
}

.sub-details {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.sub-details::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  box-shadow: inset 0 0 0 1px var(--civic-gold);
}

.sub-detail-section {
  position: relative;
  padding-left: 32px;
}

.sub-detail-section-title {
  margin-bottom: var(--spacing-xs);
  font-size: var(--H6);
  color: var(--gray-900);
}

.sub-detail-list {
  font-size: var(--Subtitle-2);
  line-height: 160%;
}

/* sub1-2-1 */

.sub-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 100%;
  padding: var(--spacing-3xl) var(--spacing-lm) var(--spacing-lm);
  z-index: 1;
}

.sub-leadership {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl);
}

.sub-chairman-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.sub-chairman-card {
  position: relative;
  background-color: var(--violet-500);
  border-radius: var(--radius-l) var(--radius-l) var(--radius-l) 0;
  border: 1px solid var(--peach);
  padding: 0 var(--spacing-m) var(--spacing-ms);
}

.sub-chairman-card:last-child {
  background-color: var(--earth-500);
}

.sub-chairman-card:after,
.sub-chairman-card:last-child:before {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  background-color: var(--gray-400);
}

.sub-chairman-card:after {
  bottom: -64px;
  height: 64px;
}

.sub-chairman-card:last-child:before {
  bottom: calc(-1 * (64px + 285px));
  height: 285px;
}

.sub-chairman-profile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -32px;
}

.sub-chairman-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 102px;
  height: 148px;
  border-radius: var(--radius-l);
  overflow: hidden;
}

.sub-chairman-badge {
  position: absolute;
  bottom: calc(-1 * var(--spacing-2xs));
  right: calc(-1 * var(--spacing-2xs));
  width: 40px;
  height: 40px;
}

.sub-chairman-img img {
  width: 120%;
}

.sub-chairman-info {
  text-align: center;
}

.sub-chairman-title {
  font-weight: var(--bold);
  font-size: var(--H5);
  color: var(--white);
  line-height: 1.4;
  letter-spacing: -0.5px;
  margin-top: -12px;
}

.sub-chairman-name {
  color: var(--white);
  font-weight: var(--bold);
  font-size: var(--body-1);
  line-height: 1.4;
}

/* 위원회 섹션 */
.sub-committees-section {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-s);
  max-width: 1024px;
  width: 100%;
  margin-top: 32px;
}

.sub-committees-section-bottom {
  display: flex;
  justify-content: flex-end;
  max-width: 1024px;
  margin-top: var(--spacing-ml);
  gap: 51px;
  width: 100%;
}

.sub-committee {
  max-width: 308px;
  width: 100%;
}

.sub-committee-header h2 {
  font-size: inherit;
  font-weight: inherit;
}

.sub-committee-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-s) var(--spacing-ms);
  gap: var(--spacing-xs);
  color: var(--white);
  font-weight: var(--bold);
  font-size: var(--H6);
  line-height: 1.6;
  border-radius: var(--radius-xs);
  background-color: var(--violet-900);
}

.sub-committee-header:not(.sub-office-chief):not(.sub-expert-member):after {
  content: '';
  position: absolute;
  right: -203px;
  bottom: 50%;
  transform: translateY(50%);
  max-width: 203px;
  width: 100%;
  height: 1px;
  background-color: var(--gray-400);
  z-index: -1;
}

.sub-expert-member.mobile-only {
  display: none;
}

.sub-committee-header.special:after {
  left: -203px;
}

.sub-committee-content {
  margin-top: var(--spacing-2xs);
  padding: var(--spacing-ms);
  background-color: var(--gray-100);
  border-radius: var(--radius-xs);
}

.sub-committee-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.sub-committee-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.sub-committee-badge {
  width: 32px;
  height: 32px;
}

.sub-committee-name {
  font-weight: var(--bold);
  font-size: var(--Subtitle-2);
  line-height: 1.6;
  letter-spacing: -0.5px;
}

/* 사무국장, 전문의원 */
.sub-office-chief {
  position: relative;
  margin-top: auto;
  background-color: var(--earth-900);
}

.sub-office-chief:after {
  content: '';
  position: absolute;
  right: -49px;
  bottom: 50%;
  transform: translateY(50%);
  max-width: 49px;
  width: 100%;
  height: 1px;
  background-color: var(--gray-400);
  z-index: -1;
}

.sub-office-chief:before {
  left: -49px;
}

.sub-expert-member {
  color: var(--gray-900);
  font-weight: var(--medium);
  background-color: var(--earth-100);
}

/* 팀 목록 */
.sub-teams {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-s);
  max-width: 1024px;
  width: 100%;
  padding: 0;
  margin: var(--spacing-l) 0 0;
}

.sub-teams-list .mobile-only {
  display: none;
}

.sub-team-item.org-department {
  max-width: unset;
}

.sub-team-item {
  padding: var(--spacing-s) var(--spacing-ms);
  width: 100%;
  color: var(--gray-900);
  text-align: center;
  font-weight: var(--medium);
  font-size: var(--H6);
  line-height: 1.6;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xs);
}

.sub-teams .org-lines {
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  max-width: 833px;
  width: 82%;
  height: 24px;
  border-top: 1px solid var(--gray-400);
}

.sub-team-item.org-department:before {
  content: '';
  position: absolute;
  top: -24px;
  left: 50%;
  width: 1px;
  height: 24px;
  background-color: var(--gray-400);
}

.sub-team-item:nth-child(4).org-department:before {
  top: -48px;
  height: 48px;
}

/* sub1-2-2-1 */

/* 상단 섹션 - 상임위원회란? */

.intro-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4xl) 68px var(--spacing-4xl) var(--spacing-lm);
  min-height: 380px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.intro-section.bg-olive {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('/site/basic/img/sub-intro/img-intro-2.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.intro-section.bg-gold {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('/site/basic/img/sub-intro/img-intro-1.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.intro-section-content {
  display: flex;
  gap: var(--spacing-3xl);
  width: 100%;
}

.intro-title {
  flex-shrink: 0;
  color: var(--white);
}

.intro-list {
  width: 100%;
  color: var(--white);
}

/* 위원회 역할 섹션 */

/* 위원회 카드 */
.committee-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.committee-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-l) var(--spacing-m);
  border-bottom: 1px solid var(--gray-100);
  gap: 108px;
}

.committee-card:last-child {
  border-bottom: none;
}

.committee-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-m);
  width: 143px;
}

.committee-badge-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.committee-badge {
  margin-bottom: var(--spacing-xs);
  width: 64px;
  height: 64px;
}

.committee-name {
  font-size: var(--H5);
  font-weight: var(--bold);
  text-align: center;
  white-space: nowrap;
}

.committee-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lm);
  flex: 1;
}

.committee-scope {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.scope-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-2xs);
}

.scope-tag {
  padding: var(--spacing-2xs) var(--spacing-xs);
  background: var(--gray-100);
  font-size: var(--body-1);
  font-weight: var(--semi-bold);
  line-height: 1.6;
  letter-spacing: -0.5px;
  border-radius: var(--radius-xs);
}

/* sub1-3-1 */

/* 직원현황 섹션 */

.staff-card {
  padding: var(--spacing-ml) 0 var(--spacing-ml) var(--spacing-ml);
  background-color: var(--stat-content-bg);
  border-radius: var(--radius-l);
  color: var(--white);
}

.staff-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 var(--spacing-ml) var(--spacing-xs) 0;
}

.staff-status-text {
  color: #9ba5c3;
  font-size: var(--H5);
  font-weight: var(--medium);
}

.staff-status-percentage {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-2xs);
}

.staff-percentage-number {
  font-size: var(--H3);
  font-weight: var(--bold);
  color: var(--stat-point);
}

.staff-percentage-sign {
  padding: var(--spacing-xs) 0;
  font-size: var(--H5);
  font-weight: var(--bold);
  color: var(--white);
}

.staff-color-bar {
  display: flex;
  margin: 0 var(--spacing-ml) var(--spacing-m) 0;
  padding: var(--spacing-xs);
  gap: var(--spacing-2xs);
  border-radius: var(--radius-s);
  background-color: var(--stat-age-bg);
}

.staff-color-bar-item {
  height: 16px;
  border-radius: var(--radius-xs);
  background-color: var(--rank-color);
}

.staff-rank-cards {
  display: flex;
  gap: var(--spacing-2xs);
  margin-right: var(--spacing-ml);
}

.staff-rank-card {
  background-color: var(--stat-card-bg);
  border-radius: var(--radius-s);
  padding: var(--spacing-s);
  flex: 1;
}

.staff-rank-circle {
  margin-bottom: var(--spacing-xs);
  width: 8px;
  height: 8px;
  background-color: var(--rank-color);
  border-radius: 50%;
}

.staff-rank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-s);
}

.staff-rank-title {
  font-size: var(--H6);
  font-weight: var(--bold);
  line-height: 1.4;
  letter-spacing: -0.5px;
}

.staff-rank-card:last-child .staff-rank-title {
  font-size: var(--body-1);
}

.staff-rank-percent {
  padding: 8px 6px;
  color: var(--stat-percent-bg);
  font-size: var(--body-2);
  font-weight: var(--bold);
  background-color: var(--rank-color);
  border-radius: var(--radius-xs);
}

.staff-rank-detail {
  border-top: 1px solid var(--stat-age-bg);
  padding-top: var(--spacing-s);
}

.staff-rank-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.staff-rank-count-label {
  font-size: var(--body-2);
  font-weight: var(--bold);
  line-height: 1.6;
  letter-spacing: -0.5px;
}

.staff-rank-numbers {
  display: flex;
  align-items: flex-end;
}

.staff-rank-current {
  font-size: var(--body-1);
  font-weight: var(--bold);
  color: var(--rank-color);
  line-height: 1.6;
  letter-spacing: -0.5px;
}

.staff-rank-total {
  font-size: var(--body-2);
  font-weight: var(--bold);
  color: var(--gray-400);
  line-height: 1.6;
  letter-spacing: -0.5px;
  padding-bottom: 1px;
}

.staff-rank-ratio {
  padding: var(--spacing-xs);
  text-align: center;
  color: var(--stat-text);
  font-size: var(--body-2);
  font-weight: var(--bold);
  background-color: var(--stat-age-bg);
  border-radius: 8px;
  margin-top: var(--spacing-xs);
}

.staff-additional-text {
  margin-top: var(--spacing-m);
  font-size: var(--body-2);
  font-weight: var(--bold);
}

/* 조직도 섹션 */

.org-chart-container {
  padding: var(--spacing-lm);
}

.org-chart-header {
  padding: var(--spacing-s);
  max-width: 308px;
  width: 100%;
  font-size: var(--H6);
  font-weight: var(--bold);
  text-align: center;
  line-height: 1.6;
  letter-spacing: -0.5px;
  border-radius: var(--radius-xs);
  color: var(--white);
}

.org-top {
  position: relative;
  background-color: var(--earth-900);
}

.org-top:before {
  content: '';
  position: absolute;
  bottom: 50%;
  right: -257px;
  width: 257px;
  height: 1px;
  background-color: var(--gray-400);
}

.org-top:after {
  content: '';
  position: absolute;
  bottom: -24px;
  left: 50%;
  width: 1px;
  height: 24px;
  background-color: var(--gray-400);
}

.org-chart {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1090px;
}

.org-chart-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  margin-right: 40px;
  width: 100%;
}

.org-committees-title {
  background-color: var(--earth-100);
  color: var(--gray-900);
}

.org-departments {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-s);
  width: 100%;
}

.org-department {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 136px;
  padding: var(--spacing-s) var(--spacing-ms);
  background-color: var(--white);
  box-shadow: inset 0 0 0 1px var(--gray-200);
  border-radius: var(--radius-xs);
  color: var(--gray-900);
  font-size: var(--H6);
  font-weight: var(--medium);
  line-height: 1.6;
  letter-spacing: -0.5px;
  word-break: keep-all;
}

.org-lines {
  position: absolute;
  margin: 0 auto;
  top: -24px;
  left: 0;
  right: 0;
  max-width: 609px;
  width: 83%;
  height: 24px;
  border-top: 1px solid var(--gray-400);
}

.org-department:before {
  content: '';
  position: absolute;
  top: -24px;
  left: 50%;
  width: 1px;
  height: 24px;
  background-color: var(--gray-400);
}

.org-chart-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xs);
  max-width: 308px;
  width: 100%;
  z-index: 1;
}

.org-chart-right.mobile-only {
  display: none;
}

.org-committees {
  padding: var(--spacing-ms);
  width: 100%;
  background-color: var(--gray-100);
  border-radius: var(--radius-xs);
}

.org-committee {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-s);
  flex-wrap: wrap;
}

.org-committee:last-child {
  margin-bottom: 0;
}

.org-committee-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.org-committee-name {
  font-size: var(--body-1);
  font-weight: var(--bold);
  word-break: keep-all;
}

.org-notice {
  margin: var(--spacing-m) auto 0;
}

/* 부서안내 섹션 */

.dept-container {
  border-top: 2px solid var(--gray-900);
  line-height: 1.6;
  letter-spacing: -0.5px;
}

.dept-item {
  display: flex;
  border-bottom: 2px solid var(--gray-100);
  padding: var(--spacing-lm) 0;
  gap: var(--spacing-2xl);
}

.dept-item:last-child {
  border-bottom: none;
}

/* 처음엔 전부 감추기 */
.dept-item { display: none; }
/* 클릭해서 활성화된 것만 보이기 */
.dept-item.is-active { display: block; }

/* 선택 강조(선택사항) */
.org-department.is-active,
.org-committee.is-active { outline: 2px solid #ddd; border-radius: 8px; }



.dept-header {
  max-width: 271px;
  width: 100%;
}

.dept-title-box {
  background-color: var(--violet-900);
  margin-bottom: var(--spacing-s);
  color: var(--white);
  padding: var(--spacing-s) var(--spacing-ms);
  border-radius: var(--radius-xs);
  text-align: center;
  font-size: var(--H6);
  font-weight: var(--bold);
}

.dept-fax {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  line-height: 1.4;
}

.dept-fax-label {
  background-color: var(--gray-100);
  padding: var(--spacing-2xs) var(--spacing-xs);
  font-size: var(--body-2);
  font-weight: var(--bold);
  border-radius: var(--radius-xs);
}

.dept-fax-number {
  font-size: var(--body-1);
  font-weight: var(--medium);
}

.dept-details {
  flex: 1;
}

.dept-employee {
  padding: var(--spacing-xs) 0;
  margin-bottom: var(--spacing-m);
}

.dept-employee:last-child {
  margin-bottom: 0;
}

.dept-employee-task {
  font-size: var(--H5);
  font-weight: var(--medium);
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.dept-employee-info {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dept-employee-position,
.dept-employee-contact {
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-xs);
  font-size: var(--body-1);
}

.dept-employee-position {
  background-color: var(--violet-500);
  color: var(--white);
  font-weight: var(--bold);
}

.dept-employee-contact {
  background-color: var(--gray-100);
  font-weight: var(--medium);
}

/* sub1-4-1 */

.assembly-status-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-lm);
}

.assembly-status-card {
  flex: 1;
}

.assembly-status-card .info-chip {
  width: 100%;
}

.assembly-election {
  margin-top: var(--spacing-s);
}

.assembly-election-title {
  font-size: var(--Subtitle-2);
  font-weight: var(--bold);
  color: var(--earth-500);
  margin-bottom: var(--spacing-xs);
}

.assembly-election-cards {
  display: flex;
  gap: 10px;
}

/* sub1-4-2 */

.session-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
}

.session-description {
  font-size: var(--H6);
}

.session-card {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lm);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.session-card:first-child .session-header {
  background-color: var(--violet-500);
}

.session-card:last-child .session-header {
  background-color: var(--earth-500);
}

.session-title {
  margin-bottom: var(--spacing-xs);
  font-size: var(--H4);
  font-weight: var(--bold);
  color: var(--white);
  line-height: 1.4;
  letter-spacing: -0.5px;
}

.session-card:first-child .session-content {
  border: 2px solid var(--violet-500);
}

.session-card:last-child .session-content {
  border: 2px solid var(--earth-500);
}

.session-icon {
  width: 96px;
  height: 96px;
}

.session-content {
  padding: var(--spacing-l) var(--spacing-ml);
  background-color: var(--white);
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}

.session-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lm);
}

.session-info-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.session-info-title {
  padding-left: var(--spacing-xs);
  font-size: var(--Subtitle-1);
  font-weight: var(--semi-bold);
}

/* sub1-4-3 */
/* 의안 개요 */

.bill-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.bill-type-item {
  width: 100%;
}

/* 의안발의자 및 발의정족수 테이블 스타일은 styles.css의 table- 클래스를 사용 */

.refer-btn-container {
  position: relative;
  margin-bottom: var(--spacing-2xl);
  z-index: 5;
}

.refer-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-s);
  background-color: var(--violet-900);
  border-radius: var(--radius-xs);
}

.refer-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
}

.refer-text {
  font-weight: var(--bold);
  font-size: var(--body-2);
  line-height: 1.6;
  letter-spacing: -0.5px;
  color: var(--white);
}

/* sub1-4-4 */

.table-audit-section .table-cell {
  font-size: var(--body-1);
}

.table-audit-section .table-cell {
  padding: var(--spacing-s) var(--spacing-ms);
}

.table-audit-section .table-cell-inner {
  display: flex;
  gap: 10px;
}

.table-audit-section .table-cell-title {
  margin-bottom: var(--spacing-s);
  font-size: var(--Subtitle-2);
  font-weight: var(--bold);
}

.table-audit-section .table-header-cell:first-child {
  width: 291px;
}

.bill-steps-section:last-child {
  margin-top: var(--spacing-5xl);
}

.bill-steps-title {
  padding: var(--spacing-ml);
  border-radius: var(--radius-l);
  margin-bottom: var(--spacing-lm);
  background-color: var(--bill-steps-background-color);
  text-align: center;
}

.bill-steps-title-sm {
  margin-bottom: var(--spacing-xs);
  color: var(--peach);
  font-size: var(--Subtitle-1);
  font-weight: var(--bold);
}

.bill-steps-title-lg {
  color: var(--white);
  font-size: var(--H4);
  font-weight: var(--bold);
  line-height: 1.4;
}

/* sub1-4-5 */

.petition-process-img {
  display: flex;
  justify-content: center;
  background-color: var(--gray-50);
  border-radius: var(--radius-l);
  padding: var(--spacing-2xl) var(--spacing-lm);
}

.petition-process-img img {
  max-width: 978px;
}

/* sub1-5-1 */

.signature-symbol {
  display: flex;
  flex-direction: column;
  background-color: var(--violet-900);
  background: url('/site/basic/img/sub/img-simbol-signature-bg.png') no-repeat center center;
  background-size: cover;
  border-radius: var(--radius-2xl);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-m);
  gap: 75px;
}

.signature-symbol-title {
  font-size: var(--H5);
  font-weight: var(--bold);
  color: var(--white);
  margin-bottom: var(--spacing-s);
  flex-shrink: 0;
  margin-right: var(--spacing-2xl);
}

.signature-symbol-view {
  display: flex;
  justify-content: space-between;
}

.signature-symbol-img {
  max-width: 881px;
}

/* 규격 섹션 */
.signature-specs-container {
  background: var(--gray-600);
  border-radius: var(--radius-l);
  padding: var(--spacing-lm);
}

.signature-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 11px 30px;
}

.signature-spec-item {
  padding-bottom: var(--spacing-xs);
}

.signature-spec-label {
  font-weight: var(--bold);
  color: var(--white);
  background-color: var(--gray-600);
  padding-bottom: 2px;
}

.signature-spec-value {
  color: var(--gray-400);
  font-size: var(--body-2);
}

.signature-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-m);
  padding-right: var(--spacing-xs);
}

.signature-download-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--spacing-xs);
}

/* 서체 섹션 */
.signature-font-container {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}

.signature-font {
  display: flex;
  flex-direction: column;
  gap: 59px;
}

.signature-font-label {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-s);
}

.signature-font-sample {
  max-width: 336px;
}

.signature-font-label-text {
  flex-shrink: 0;
  color: var(--gray-600);
  font-weight: var(--bold);
  font-size: var(--H6);
  line-height: 1.4;
}

.signature-font-label-code {
  color: var(--gray-400);
  font-size: var(--body-2);
}

.signature-font-description {
  padding: var(--spacing-s) 0;
  max-width: 651px;
}

.signature-font-name {
  margin-bottom: var(--spacing-xs);
  font-size: var(--H5);
  font-weight: var(--bold);
  color: var(--gray-600);
}

.signature-font-text {
  font-size: var(--body-1);
  color: var(--gray-600);
}

/* 타입 섹션 */
.signature-types {
  display: flex;
  gap: var(--spacing-s);
}

.signature-type-item {
  flex: 1;
}

.signature-type-item-view {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 276px;
  background-color: var(--gray-50);
}

.signature-type-item-view::before,
.signature-type-item-view::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0;
  box-shadow: 0 0 0 1px var(--civic-gold);
}

.signature-type-item-view::before {
  top: 0;
}

.signature-type-item-view::after {
  bottom: 0;
}

.signature-type-item:first-child .signature-type-img {
  width: 301px;
  height: auto;
}

.signature-type-item:last-child .signature-type-img {
  width: 111px;
  height: auto;
}

.signature-type-name {
  display: block;
  margin-top: var(--spacing-s);
  text-align: center;
  width: 100%;
  font-size: var(--H6);
  font-weight: var(--bold);
  color: var(--gray-600);
}

/* 색상 섹션 */
.signature-colors {
  display: flex;
  gap: var(--spacing-s);
}

.signature-colors-item {
  flex: 1;
}

.signature-color-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-lm);
  height: 331px;
  color: var(--white);
  border-radius: var(--radius-2xl);
}

.signature-color-primary {
  background-color: #bd9d4b;
}

.signature-color-secondary {
  background-color: #132b46;
}

.signature-color-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.signature-color-category {
  font-size: var(--H6);
  font-weight: var(--bold);
  line-height: 1.4;
}

.signature-color-name {
  font-size: var(--H4);
  font-weight: var(--bold);
  line-height: 1.4;
}

.signature-color-specs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-width: 272.5px;
  width: 100%;
  margin-left: auto;
}

.signature-color-spec {
  display: flex;
  gap: var(--spacing-s);
}

.signature-color-spec-label {
  width: 80px;
  font-size: var(--Subtitle-2);
  font-weight: var(--bold);
}

.signature-color-spec-value {
  font-size: var(--Subtitle-2);
}

.signature-color-example {
  margin: var(--spacing-s) auto 0;
  width: 213px;
}

/* sub1-5-1 청사안내 */

.facility-map-section {
  padding: var(--spacing-l) var(--spacing-lm);
  background-color: var(--gray-50);
  border-radius: var(--radius-l);
}

.facility-floor-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-m);
}

.facility-floor-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  padding-left: var(--spacing-m);
}

.facility-floor-button {
  color: var(--gray-400);
  font-size: var(--H4);
  font-weight: var(--medium);
  line-height: 100%;
  transition: var(--basic-transition);
}

.facility-floor-button.active {
  color: var(--gray-900);
  font-weight: var(--bold);
}

.facility-legend {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
}

.facility-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.facility-legend-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.facility-legend-label {
  font-size: var(--body-2);
  font-weight: var(--bold);
  color: var(--gray-600);
}

.facility-map-description {
  margin-top: var(--spacing-m);
  padding-left: var(--spacing-m);
  font-size: var(--H6);
}

/* 시설 안내 섹션 */

.facility-items {
  display: flex;
  flex-direction: column;
  padding-top: var(--spacing-s);
  gap: var(--spacing-m);
  border-top: 2px solid var(--violet-900);
}

.facility-item {
  display: flex;
  gap: var(--spacing-m);
  padding: var(--spacing-s) 0;
  border-top: 1px solid var(--gray-100);
}

.facility-item:first-child {
  border-top: 0;
}

.facility-item-title {
  min-width: 148px;
  font-size: var(--H6);
  font-weight: var(--bold);
  line-height: 100%;
  letter-spacing: 0;
}

.facility-map-caption {
  display: none;
}

/* sub1-6-2 */

.dir-address-card {
  position: relative;
  display: flex;
  padding: 0 var(--spacing-lm) 28px 28px;
  height: 564px;
  background: url('/site/basic/img/sub/img-naver-map.png') no-repeat center center;
  background-size: cover;
  border-radius: var(--radius-2xl);
  box-shadow: inset 0px 0px 0px 8px var(--white), 10px 10px 40px 0px rgba(0, 0, 0, 0.1);
}

.dir-address-tooltip {
  position: absolute;
  top: calc(50% - 18px);
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.dir-address-tooltip img {
  width: 64px;
  height: 65px;
  filter: drop-shadow(10px 10px 40px rgba(0, 0, 0, 0.5));
}

.dir-address-tooltip-label {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--body-1);
  font-weight: var(--bold);
}

.dir-address-tooltip::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 13px solid var(--white);
}

.dir-address-tooltip::before {
  content: '';
  position: absolute;
  bottom: -18px; /* 화살표 바로 아래 */
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #2c2c2c;
  border-radius: 50%;
}

.dir-address-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: flex-end;
  padding: 13px var(--spacing-s) 13px var(--spacing-m);
  width: 100%;
  color: var(--white);
  background-color: var(--violet-900);
  border-radius: var(--radius-l);
  box-shadow: 0px 0px 40px 0px rgba(179, 178, 197, 1);
}

.dir-address-info {
  display: flex;
  align-items: center;
}

.dir-address-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

.dir-address-label-text {
  width: 55px;
  font-weight: var(--bold);
  font-size: var(--H6);
  flex-shrink: 0;
  line-height: 24px;
  letter-spacing: -0.5px;
}

.dir-address-icon {
  width: 32px;
  height: 32px;
}

.dir-address-text {
  font-size: var(--body-1);
  font-weight: var(--regular);
  line-height: 24px;
  letter-spacing: -0.5px;
}

.dir-map-link {
  display: flex;
  align-items: center;
  background-color: var(--naver_color);
  color: var(--white);
  padding: var(--spacing-2xs) var(--spacing-s) var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-xl);
  text-decoration: none;
  font-weight: var(--bold);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.5px;
}

.dir-map-link-icon {
  width: 32px;
  height: 32px;
}

.dir-contact-section {
  display: flex;
  justify-content: stretch;
  gap: var(--spacing-lm);
  margin-top: var(--spacing-xl);
}

.dir-contact-column {
  flex: 1;
}

.dir-contact-title {
  margin: 28px 0 var(--spacing-m);
  color: var(--gray-600);
  font-size: var(--H4);
  font-weight: var(--bold);
  line-height: 24px;
  letter-spacing: -0.05em;
}

.dir-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.dir-contact-item {
  font-size: var(--body-1);
  line-height: 24px;
  letter-spacing: -0.05em;
}

.dir-transport {
  display: flex;
  gap: var(--spacing-3xl);
  background-color: var(--gray-100);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-4xl);
}

.dir-bus-card-icon img {
  width: 157px;
  height: 182px;
}

.dir-transport-title {
  margin-bottom: var(--spacing-s);
  font-size: var(--H5);
  font-weight: var(--bold);
  letter-spacing: -0.05em;
}

.dir-bus-cards-container {
  width: 100%;
}

.dir-bus-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px var(--spacing-s);
  margin-top: var(--spacing-s);
}

.dir-bus-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-m);
  padding-bottom: 18px;
  flex: 1;
  background-color: var(--white);
  border-radius: var(--radius-ms);
}

.dir-bus-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-2xs);
}

.dir-bus-stop-name {
  font-size: var(--body-1);
  font-weight: var(--bold);
}

.dir-bus-number {
  width: fit-content;
  padding: 0 var(--spacing-xs);
  color: var(--gray-600);
  font-weight: var(--medium);
  font-size: var(--body-2);
  border-radius: var(--radius-s);
  background-color: var(--gray-100);
  letter-spacing: -0.05em;
}

.dir-bus-detail {
  margin: var(--spacing-s) 0 26px;
  color: var(--gray-600);
  font-size: var(--body-2);
  line-height: 24px;
  letter-spacing: -0.05em;
}

.dir-bus-detail .dir-bus-detail-distance {
  color: #00c300;
  font-weight: var(--bold);
}

.dir-bus-card .section-cta-link .actions-btn {
  width: 100%;
  justify-content: space-between;
}

.dir-bus-card .section-cta-link {
  width: 100%;
}

.dir-parking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
  margin-top: var(--spacing-m);
}

.dir-parking-card {
  flex: 1;
  padding: var(--spacing-m);
  background-color: var(--white);
  box-shadow: inset 0 0 0 2px var(--gray-100);
  border-radius: var(--radius-ms);
}

.dir-parking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-m);
}

.dir-parking-type {
  flex-shrink: 0;
  font-size: var(--H6);
  font-weight: var(--bold);
}

.dir-parking-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.dir-parking-floors {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.dir-parking-floor {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-600);
  font-weight: var(--bold);
  font-size: var(--Subtitle-2);
}

.dir-parking-floor-number {
  width: 32px;
}