@charset "UTF-8";

:root {
  /* 메인컬러 & 서브컬러 지정 */
  --bs-primary: #3665c2;
  --Primary: #3665c2;
  --Primary1: #2977ea;

  /* 그레이스케일 컬러 */
  --Greyscale9: #222;
  --Greyscale8: #a2a2a2;

  /* 백그라운드 */
  --Background: #f5f7fa;
  --Background1: #f4f4f4;
  --Background2: #f5f5f5;

  /* 다크 */
  --dark: #35383f;

  /* 선 */
  --Stroke: #ddd;
  --Stroke1: #eaeaea;

  /* 모달 */
  --MdStroke: #a09080;
  --MdBg: #f7f3f0;

  /* 박스쉐도우 */
  --Shadow: 0 0 3px rgba(0, 0, 0, 0.15);

  /* 둥글기 */
  --Radius: 8px;
  --Radius-14: 14px;

  /* 폰트사이즈 */
  --font-size-xl: 23px;
  --font-size-lg: 22px;
  --font-size-big: 19px;
  --font-size: 17px;
  --font-size-s: 16px;
  --font-size-xs: 14px;

  /* 기본 시스템 컬러 */
  --Error: #ea5b5d;
  --Error2: #f14250;
  --Alert: #ff9b1f;
  --Warning: #ffcb33;
  --Success: #1181d3;
  --Success2: #2977ea;

  /* 스피너 */
  --bs-primary-rgb: 255, 135, 43;
}

html,
body,
a,
img,
button,
input {
  -webkit-touch-callout: none; /* 롱프레스 방지 (iOS/안드로이드 크롬) */
  -webkit-user-select: none; /* 텍스트 선택 방지 */
  user-select: none;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100%;
  overflow-x: hidden;
  letter-spacing: -0.4px;
}
body {
  background: #fff;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
    "맑은 고딕", sans-serif;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--Greyscale9);
  letter-spacing: -0.5px;
}

/* Basic */
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: var(--Greyscale9);
  text-decoration: none;
}
a:hover {
  color: inherit;
}
button {
  border: 0;
  border-radius: 0;
  background-color: unset;
  padding: 0;
  -webkit-appearance: none; /* iOS 기본 버튼 스타일 제거 */
  appearance: none; /* 표준 속성 */
  background: none; /* 배경 제거 (원하는 색상으로 변경 가능) */
  border: none; /* 기본 테두리 제거 */
  color: inherit; /* 텍스트 색상 상속 */
}
legend,
caption {
  line-height: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  text-indent: -99999px;
  overflow: hidden;
  font-size: 0;
}

:root {
  font-family: "Noto Sans KR", -apple-system, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.3;
  color: var(--Greyscale9);
}

/* Noto_Sans_KR - 한국어 */
@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-ExtraLight.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../../fonts/Noto_Sans_KR/NotoSansKR-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Noto_Sans - 영어/우즈벡어/베트남어 */
@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../../fonts/Noto_Sans/NotoSans-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Noto_Sans - 중국어 */
@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-ExtraLight.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../../fonts/Noto_Sans_SC/NotoSansSC-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Noto_Sans - 캄보디아어 */
@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-Thin.woff2")
    format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-ExtraLight.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-Light.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-Regular.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-Bold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../../fonts/Noto_Sans_Khmer/NotoSansKhmer-Black.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Noto_Sans - 네팔어 */
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-Thin.woff2")
    format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-ExtraLight.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-Light.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-Regular.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-Bold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../../fonts/Noto_Sans_Devanagari/NotoSansDevanagari-Black.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* table */
.table_type1 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px 0;
  padding: 20px 0;
}
.table_type1 table {
  border-top: 2px solid var(--Greyscale8);
}
.table_type1 td,
.table_type1 th {
  border-bottom: 1px solid var(--Stroke);
}
.table_type1 th {
  text-align: center;
  background: var(--Background);
  color: #000;
  vertical-align: middle;
  font-weight: 500;
  height: 55px;
}
.table_type1 td {
  padding: 15px 12px;
  line-height: 140%;
  text-align: center;
  letter-spacing: -1px;
}
.table_type1-thead tbody tr:first-child td {
  border-top: 0;
}
.table_type1 li {
  position: relative;
}
/* .table_type1 table{word-break:keep-all !Important}  */
.table_type1 table {
  width: 100%;
}
.table_type1 table th:first-child {
  margin-top: 0;
}
.table_type1 table td {
  border: 1px solid var(--Stroke);
  text-align: center;
  word-break: break-all;
}
.table_type1 table tr:first-child td {
  border-top: 0;
}
.table_type1 table thead th {
  border: 1px solid var(--Stroke);
}

.table_type1 table thead th:first-child,
.table_type1 table tbody td:first-child {
  border-left-width: 0;
}
.table_type1 table thead th:last-child,
.table_type1 table tbody td:last-child {
  border-right-width: 0;
}
.table_type1 .left {
  text-align: left;
}
@media (max-width: 1200px) {
  .table_type1 {
    overflow: hidden;
    overflow-x: scroll !important;
    width: 100%;
    margin-bottom: 20px;
  }
  .table_type1:before {
    display: block;
    margin-bottom: 10px;
    content: "모바일환경에서는 좌우로 스크롤하여 보실 수 있습니다.";
    font-weight: 500;
    color: var(--Success);
    font-size: var(--font-size-xs);
  }
  .table_type1 table {
    min-width: 500px;
    font-size: var(--font-size-xs);
  }
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1,
p,
ol,
ul,
dl,
dd {
  margin-bottom: 0;
}
.ellipsis {
  white-space: normal;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.ellipsis-2 {
  white-space: normal;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.ellipsis-3 {
  white-space: normal;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.ellipsis-4 {
  white-space: normal;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* hidden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* container */
.m-wrapper {
  /*  width: 390px; 배포시 100%로 변경 */
  /* height: 844px; 배포시 삭제 */
  overflow-y: auto;
  margin: 0 auto;
  height: 100%;
}
.content-wrapper {
  height: calc(100% - 72px);
  padding-bottom: 145px;
}
.container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  padding: 10px 16px 20px;
  overflow-x: hidden;
}
.container.type1 {
  padding-bottom: 130px;
}
.contain-100 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* header */
header {
  position: relative;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
header .logo {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
header button {
  width: 44px;
  height: 44px;
  display: flex;
}
header button.hd-prev {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: start;
}
header .mtb-util {
  display: flex;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
header .mtb-util button {
  justify-content: end;
  align-items: center;
}
header .mtb-util .finish {
  display: flex;
  align-items: center;
  gap: 3px;
}
header .mtb-util .finish .num {
  color: var(--Primary);
  font-weight: 800;
}
header .hd-tit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: var(--font-size-big);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -1px;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
}

header .hd-tit .marquee {
  display: inline-block;
}

/* 길 때만 활성화: JS가 .is-overflow 클래스를 붙임 */
header .hd-tit.is-overflow .marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 8s linear infinite;
}

/* 접근성: 모션 선호하지 않음이면 멈춤 */
@media (prefers-reduced-motion: reduce) {
  header .hd-tit.is-overflow .marquee {
    animation: none;
  }
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-200%);
  }
}

/* (옵션) 호버 시 일시정지 */
header .hd-tit.is-overflow .marquee:hover {
  animation-play-state: paused;
}

/* sub-tab 내부 marquee 효과 */
.sub-tab .nav-link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.sub-tab .nav-link .marquee {
  display: inline-block;
  white-space: nowrap;
  max-width: 80px;
}

/* 텍스트가 버튼 너비를 초과할 때 marquee 활성화 */
.sub-tab .nav-link.is-overflow .marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-scroll 6s linear infinite;
}

/* 호버 시 일시정지 */
.sub-tab .nav-link.is-overflow .marquee:hover {
  animation-play-state: paused;
}

/* 접근성: 모션 선호하지 않음이면 멈춤 */
@media (prefers-reduced-motion: reduce) {
  .sub-tab .nav-link.is-overflow .marquee {
    animation: none;
  }
}

/* badge */
.badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.badge.category1 {
  background: #fff7e5 !important;
  color: var(--Primary) !important;
}
.badge.category2 {
  background: #fff3f3 !important;
  color: #fe4e4e !important;
}
.badge.category3 {
  background: #f3f3ff !important;
  color: #5b88f5 !important;
}
.badge.category4 {
  background: #f2eefc !important;
  color: #632cce !important;
}
.badge.category5 {
  background: #f2fff2 !important;
  color: #2cce2c !important;
}

/* button */
.btn {
  font-weight: 500;
  white-space: nowrap;
  font-size: var(--font-size-s);
}
.btn:hover {
  transform: inherit;
}
.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  color: inherit;
  background-color: inherit;
  border-color: inherit;
}

.primary {
  background: var(--Primary);
  color: var(--bs-white);
  border-color: var(--Primary);
}
.primary:hover,
.primary:active {
  background: var(--Primary) !important;
  color: var(--bs-white) !important;
  border-color: var(--Primary) !important;
}
.line {
  border-color: var(--Primary);
  color: var(--Primary);
}
.line:hover,
.line:active {
  border-color: var(--Primary) !important;
  color: var(--Primary) !important;
}
.line-gray,
.line-gray:hover,
.line-gray:active {
  border-color: var(--Stroke) !important;
  color: var(--Greyscale9) !important;
}
.btn.dark {
  background: var(--dark);
  color: var(--bs-white);
  border-color: var(--dark);
}
.btn-bottom {
  padding: 13px 0;
  font-size: var(--font-size);
  font-weight: 500;
  flex: 1;
}
.btn-bottom.red,
.btn-bottom.red:hover,
.btn-bottom.red:focus {
  background: var(--Error);
  color: var(--bs-white);
  border: 1px solid var(--Error);
}
.btn-bottom.gray,
.btn-bottom.gray:hover,
.btn-bottom.gray:focus {
  background: #ededed;
  color: #696969;
  border: 1px solid #ededed;
}
.btn-label-secondary,
.btn-label-secondary:hover,
.btn-label-secondary:active {
  background: var(--Background1) !important;
  color: var(--Greyscale9) !important;
  border: none !important;
}
.l-gray,
.l-gray:hover,
.l-gray:active {
  background: var(--Background1) !important;
  border: none !important;
  color: var(--Greyscale9) !important;
}

/* 아이콘 버튼 */
.ico-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ico-btn.right {
  justify-content: end;
}

/* 폰트사이즈 */
.fs-sm {
  font-size: var(--font-size-xs);
}

/* form */
.form-label {
  font-size: var(--font-size-xs);
  color: var(--Greyscale9);
  font-weight: 500;
}
.form-control {
  padding: 14px;
  box-sizing: border-box;
  color: var(--Greyscale9);
  font-size: var(--font-size);
  font-weight: 500;
  border-color: var(--Stroke);
}
.form-control:focus {
  padding: 14px;
  box-shadow: none;
  border: 1px solid var(--Primary);
}
.form-control[readonly] {
  background-color: var(--Background2);
  border-color: #ddd;
  color: var(--Greyscale8);
}
.form-control::placeholder {
  font-weight: 400;
  color: var(--Greyscale8);
}
.input-group .form-control {
  padding: 14px;
  font-size: var(--font-size);
}
.input-group .input-group-text {
  padding: 14px;
}
.input-group:focus-within,
.input-group:focus {
  box-shadow: none;
}
.input-group:focus-within::before,
.input-group:focus::before {
  box-shadow: none;
}
.input-group:focus-within .input-group-text:hover,
.input-group:focus-within .form-control:hover,
.input-group:focus-within .form-select:hover,
.input-group:focus .input-group-text:hover,
.input-group:focus .form-control:hover,
.input-group:focus .form-select:hover {
  border-color: var(--Primary);
}
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .form-select,
.input-group:focus .input-group-text,
.input-group:focus .form-control,
.input-group:focus .form-select {
  border-color: var(--Primary) !important;
}
.input-group:hover .input-group-text,
.input-group:hover .form-control,
.input-group:hover .form-select {
  border-color: var(--Stroke);
}
/* 하단 버튼 */
.btn-submit {
  width: 100%;
  display: flex;
  padding: 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: var(--bs-white);
}
@media (max-width: 400px) {
  .btn-submit .opacity-50 {
    font-size: var(--font-size-xs) !important;
  }
}

/* 모달 */
.modal-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.6;
}
.modal-title {
  font-weight: 500;
  color: var(--Greyscale9);
}
.modal-content {
  padding: 30px 20px;
  border-radius: var(--Radius-14);
}
.modal.modal-bottom .modal-content {
  padding: 30px 20px !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.modal .modal-header {
  padding: 0;
  text-align: center;
  justify-content: center;
}
.modal-body {
  padding: 10px 0;
}
.modal .modal-footer {
  padding: 0;
}
.modal .modal-dialog:not(.modal-fullscreen) {
  padding: 0 !important;
}
.modal .btn-close::before {
  display: none;
}

/* 아래에서 올라오는 모달 (Bottom Sheet 스타일) */
.modal.modal-bottom .modal-dialog {
  position: fixed;
  bottom: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}
.modal.modal-bottom.show .modal-dialog {
  transform: translateY(0);
}
.modal.modal-bottom .modal-content {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.modal.modal-bottom .modal-content::before {
  content: "";
  display: inline-block;
  background: #e6e6ee;
  width: 54px;
  height: 4px;
  border-radius: 100px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  top: 14px;
}
.modal .modal-header .btn-close {
  right: 25px;
  box-shadow: none;
  top: 4px;
}
.modal .btn-close:hover,
.modal .btn-close:focus,
.modal .btn-close:active {
  transform: translate(23px, -25px);
}
.modal-footer {
  gap: 10px;
}
.modal-footer > * {
  margin: 0;
}

/* 체크박스 */
.md-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}
.md-btn-wrap-width {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-btn {
  width: calc(100% / 3 - 4px);
  display: flex;
}
.md-btn-2 {
  width: calc(100% / 2 - 4px);
}
.md-btn-width {
  width: 100%;
}
.region-button {
  border: 1px solid var(--Stroke);
  border-radius: 6px;
  padding: 12px 10px 13px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  transition: ease-in-out 0.2s;
  width: 100%;
  font-size: var(--font-size-s);
  display: flex;
  align-items: center;
  justify-content: center;
}
.region-check:checked + .region-button {
  background: hsl(216deg 82% 54% / 10%);
  border: 1px solid var(--Primary1);
  color: var(--Primary1);
}
.region-check {
  display: none;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
.form-check-type1-w {
  border-radius: var(--Radius);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-check-type1-w.bg {
  background: var(--Background1);
}
.form-check-type1-w button.text-decoration-underline {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--Greyscale9);
  word-break: keep-all;
}
.form-check-type1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
}
.form-check-type1 .form-check-input {
  width: 24px;
  height: 24px;
  border: 1px solid var(--Stroke);
  border-radius: 100%;
  background-color: var(--bs-white);
  background-image: url(../img/common/check_small_gray.svg);
}
.form-check-type1 .form-check-input:checked {
  background-color: var(--Primary);
  box-shadow: none;
  border-color: var(--Primary);
}
.form-check-type1 .form-check-input:checked[type="checkbox"] {
  background-image: url(../img/common/check_small.svg);
}
.form-check-type1 .form-check-input[type="checkbox"] {
  border-radius: 100% !important;
}
.form-check-input[type="checkbox"] {
  border-radius: var(--Radius) !important;
}

/* 라디오버튼 */
.form-check-input {
  border: 1px solid var(--Stroke);
}
.form-check-input:checked {
  --bs-form-check-input-checked-bg: var(--Primary);
  --bs-form-check-input-checked-border-color: var(--Primary);
  --bs-form-check-shadow-color: none;
  --bs-form-check-box-shadow: none;
}
.form-check-label {
  font-size: var(--font-size-s);
}

/* 라디오버튼, 체크박스 - 카테고리 */
.check-cate-w {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.check-cate {
  background: var(--Background1);
  width: 80px;
  height: 80px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* table */
.table_type1 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px 0;
  padding: 20px 0;
}
.table_type1 table {
  border-top: 2px solid var(--Greyscale8);
}
.table_type1 td,
.table_type1 th {
  border-bottom: 1px solid var(--Stroke);
}
.table_type1 th {
  text-align: center;
  background: var(--Background);
  vertical-align: middle;
  font-weight: 500;
}
.table_type1 td {
  padding: 15px 12px;
  line-height: 28px;
  text-align: center;
  letter-spacing: -1px;
}
.table_type1-thead tbody tr:first-child td {
  border-top: 0;
}
.table_type1 li {
  position: relative;
}
/* .table_type1 table{word-break:keep-all !Important}  */
.table_type1 table {
  width: 100%;
}
.table_type1 table th:first-child {
  margin-top: 0;
}
.table_type1 table td {
  border: 1px solid var(--Stroke);
  text-align: center;
  word-break: break-all;
}
.table_type1 table tr:first-child td {
  border-top: 0;
}
.table_type1 table thead th {
  border: 1px solid var(--Stroke);
}

.table_type1 table thead th:first-child,
.table_type1 table tbody td:first-child {
  border-left-width: 0;
}
.table_type1 table thead th:last-child,
.table_type1 table tbody td:last-child {
  border-right-width: 0;
}
.table_type1 .left {
  text-align: left;
}

/* 라디오버튼 - type1 */
.lang-select {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.lang-select input[type="radio"] {
  display: none;
}

.lang-select label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: var(--Radius);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
  flex-direction: column;
  justify-content: center;
}

.lang-select label img {
  width: 24px;
  height: 16px;
  object-fit: cover;
}

.lang-select input[type="radio"]:checked + label {
  border-color: var(--Primary1);
  background-color: hsl(216deg 82% 54% / 10%);
  color: var(--Primary1);
  font-weight: 500;
}

/* 셀렉트박스 */
#smallSelect {
  font-size: var(--font-size-xs) !important;
  padding-right: 24px;
  background-position: right 5px center;
}
.form-select,
.form-select:focus {
  padding: 14px;
  border-color: var(--Stroke);
  color: var(--Greyscale9);
  font-size: var(--font-size);
}
.form-select:focus {
  border: 1px solid var(--Primary);
  outline: 0;
  box-shadow: none;
}

/* 범위 */
.slider-container {
  position: relative;
  margin-bottom: 15px;
}
.slider-label {
  margin-bottom: 8px;
}
.range-value-label {
  margin-top: 10px;
  text-align: center;
  color: #333;
  font-size: 14px;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 0 5px;
  margin-top: 6px;
  color: #999;
}
input[type="range"] {
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: 100px;
  background: #ddd; /* JS에서 이 값이 덮어씌워짐 */
  outline: none;
  transition: background 0.3s ease;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bs-white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: none;
  position: relative;
  z-index: 2;
}

/* stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  margin-bottom: 16px;
}
.stepper .item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.stepper .item .circle {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  margin: 0 auto;
  border: 1px solid var(--Stroke);
  color: var(--bs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--Greyscale7);
}
.stepper .item.on .circle,
.stepper .item.finish .circle {
  background: var(--Primary);
  border: 1px solid var(--Primary);
  font-weight: 600;
  color: var(--bs-white);
}
.stepper .item.before .circle {
  background: #ffac6c;
  border-color: #ffac6c;
}
.stepper .item p {
  font-size: var(--font-size-xs);
  opacity: 0.5;
  font-weight: 500;
}
.stepper .item.on p {
  opacity: 1;
}
.stepper .item.on p {
  color: var(--bs-gray-600);
}
.stepper .step-line {
  background: url("/static/assets/jnitalk/img/app/common/step-line.svg") center
    no-repeat;
  width: 14px;
  height: 4px;
  position: relative;
  top: -11px;
}
.stepper .step-line.on {
  background: var(--Primary);
}

/* alertbox */
.alert-outline-primary {
  border-color: var(--Primary);
  color: var(--Primary);
}
.alert-primary {
  background: #ffeee3;
  box-shadow: none;
  border: none;
  font-size: var(--font-size-s);
  display: flex;
  align-items: center;
  color: var(--Greyscale9);
  border-radius: var(--Radius);
}
.alert-primary p {
  position: relative;
  padding-left: 27px;
}
.alert-primary p:before {
  content: "";
  display: inline-block;
  background: url("/static/assets/jnitalk/img/app/common/icon_exclamation_mark.svg")
    center no-repeat;
  width: 26px;
  height: 26px;
  position: absolute;
  left: 0;
  top: -1px;
}

/* 필수값 */
.asterisk {
  color: var(--Error);
  margin-left: 2px;
  display: inline-block;
}

/* footer */
footer {
  border-radius: 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #fff;
  height: 115px;
  width: 100%;
  box-shadow: 0 -1px 12px rgb(0 0 0 / 7%);
}
.m-footer {
  background: var(--Background1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 30px 20px;
  box-sizing: border-box;
  width: calc(100% + 40px);
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  margin-top: 30px;
}
.m-footer ul {
  display: flex;
  font-size: var(--font-size-s);
  flex-wrap: wrap;
}
.m-footer ul li a {
  opacity: 0.8;
  display: flex;
  align-items: center;
}
.m-footer ul li:first-child a {
  opacity: 1;
  font-weight: 500;
}
.m-footer ul li a:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 5px;
}
.m-footer ul li:last-child a:after {
  display: none;
}
.m-footer .info {
  font-size: var(--font-size-s);
  margin-top: 10px;
  opacity: 0.8;
  line-height: 160%;
}

/* 스피너 */
.text-primary {
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

/* 스플래시 */
.splash {
  background: #fffaf8;
  width: 100vw;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash .img {
  margin-top: -100px;
}
.splash .logo {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

/* 헤더 버튼 */
.hd-btn {
  font-size: var(--font-size-xs);
  white-space: nowrap;
  height: auto;
  width: fit-content;
  border: 1px solid var(--Stroke);
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--Greyscale8);
  font-weight: 500;
  border-radius: 100px;
}

/* 파일첨부 */
#file_wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.file_cus {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
}
.file_cus:first-child .file_remove {
  display: none;
}
.file_cus label {
  display: flex;
  align-items: center;
  font-size: 0;
  cursor: pointer;
  flex: 1;
  gap: 10px;
}
input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}
.file_name {
  flex-grow: 1;
  border: 1px solid var(--Stroke);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: var(--font-size-s) !important;
  padding: 12px 14px;
  border-radius: var(--Radius);
}
.file_remove {
  color: var(--Error) !important;
  border: 1px solid var(--Error) !important;
  position: relative;
  width: 47px;
  height: 47px;
  border: 1px solid var(--BackgroundDark);
  padding: 0;
}
.file_remove::before,
.file_remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 15px;
  background-color: var(--Error);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.file_remove::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.file_remove::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.file_cus .file_btn,
.file_cus .file_btn:active,
.file_cus .file_btn:hover {
  background: var(--Greyscale8);
  color: #fff;
  border: 1px solid var(--Greyscale8);
  box-sizing: border-box;
  padding: 12px 14px;
}
#file_add {
  position: relative;
  width: 47px;
  height: 47px;
  border: 1px solid var(--Greyscale8) !important;
  padding: 0;
}
#file_add::before,
#file_add::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  background-color: var(--Greyscale8);
  transform-origin: center;
  transition: transform 0.3s ease;
}
#file_add::before {
  transform: translate(-50%, -50%) rotate(0deg);
}
#file_add::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 커뮤니티 - 박스 */
.comm-cont {
  margin-top: 10px;
}

/* 커뮤니티>글쓰기버튼 */
.write-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--Primary);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 12px 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 1000;
  font-weight: 500;
}

.write-button .text {
  transition: opacity 0.3s ease;
}

.write-button.hide-text .text {
  display: none;
}

.write-button.hide-text {
  padding: 12px 13px;
  border-radius: 50%;
}

/* 스켈레톤 */
.skeleton-text {
  background: linear-gradient(90deg, #f0f0f0 25%, #e2e2e2 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
  color: transparent;
  border-radius: 4px;
  user-select: none;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* 개인정보처리방침 */
.privacy {
  font-size: var(--font-size-xs);
}
.privacy .con-tit1 {
  font-size: 15px;
  font-weight: 500;
  color: var(--Greyscale9);
  margin-bottom: 6px;
}
.agree-info-wrap {
  border: 1px solid var(--Stroke);
  margin-bottom: 20px;
  font-size: var(--font-size-t);
  border-radius: var(--Radius);
  overflow: hidden;
}

.agree-info-wrap .agree-info-box {
  padding: 20px;
  box-sizing: border-box;
}

.agree-info-wrap .agree {
  border-top: 1px solid var(--Stroke);
  background: var(--Background);
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}

.con-tit1 {
  font-size: var(--font-size);
  font-weight: 600;
  width: 100%;
}

/* 이용약관 */
ul.num_list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0;
}

ul.num_list li {
  position: relative !important;
  padding-left: 22px !important;
  font-size: 14px !important;
}

ul.num_list li::before {
  display: none;
}

ul.num_list span {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  text-align: center;
  border-radius: 50%;
  background: var(--Greyscale8);
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 색상 */
.c-primary {
  color: var(--Primary);
}

/* 검색폼 */
.serch-wrap {
  margin-bottom: 20px;
}
.search-form {
  position: relative;
}
.search-form .form-control {
  padding-right: 40px;
  box-sizing: border-box;
  height: 40px;
  border: 1px solid var(--Stroke) !important;
  background: var(--bs-white);
  font-size: var(--font-size-s);
}
.search-form .form-control:focus {
  box-shadow: inherit !important;
}
.search-form .search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
.filter {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.filter button {
  padding: 8px 15px 7px;
  border: 1px solid var(--Stroke);
  font-size: 14px;
  border-radius: 100px;
  font-weight: 500;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--Greyscale9);
}

/* 탑 */
.list-top {
  margin-bottom: 8px;
  font-size: var(--font-size-s);
  font-weight: 400;
}

/* 목록형 */
.s-box-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-box-list-wrap .box-list a {
  display: flex;
  border: 1px solid var(--Stroke);
  border-radius: var(--Radius-14);
  padding: 20px;
  box-sizing: border-box;
  gap: 10px;
  align-items: center;
}
.s-box-list-wrap .box-list .ico {
  width: 40px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.s-box-list-wrap .box-list .info {
  width: calc(100% - 40px);
}
.s-box-list-wrap .box-list .tit {
  margin: 10px 0 5px;
  text-align: left;

  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1.5;
  color: var(--Greyscale9);
}
.s-box-list-wrap .box-list .txt {
  display: flex;
}
.s-box-list-wrap .box-list dl {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--Greyscale8);
  text-align: left;
  margin-bottom: 1px;
  flex-wrap: wrap;
}
.s-box-list-wrap .box-list dl:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--Stroke);
  margin: 0 6px;
}
.s-box-list-wrap .box-list dl:last-child:after {
  display: none;
}
.s-box-list-wrap .box-list dl dt {
  position: relative;
  font-weight: 400;
  margin-right: 4px;
  word-break: keep-all;
}
.s-box-list-wrap .box-list dl dd {
  position: relative;
  font-weight: 400;
  word-break: keep-all;
  white-space: nowrap;
}
.s-box-list-wrap .box-list dl dd.ellipsis {
  width: 100px;
}

.s-box-list-wrap .box-list.type1 a {
  border-radius: var(--Radius-14);
  padding: 20px;
  border: none;
  background: var(--Background);
}
.s-box-list-wrap .box-list.type1 a .info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.s-box-list-wrap .box-list.type1 a .info div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-box-list-wrap .box-list.type1 a .info .txt dl {
  font-size: var(--font-size-s);
  color: var(--bs-gray-600);
}
.s-box-list-wrap .box-list.type1 a .info .txt dl:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--bs-gray);
  border-radius: 100px;
  margin-right: 6px;
  top: 1px;
  position: relative;
}
.s-box-list-wrap .box-list.type1 a .info .txt dl dt {
  font-weight: 600;
}
.s-box-list-wrap .box-list.type1 a .info .txt dl dd {
  font-weight: 600;
}

.s-box-list-wrap .box-list.type1 .tit {
  margin: 0;
  font-weight: 600;
  font-size: var(--font-size);
  line-height: 1.4;
  color: var(--Greyscale9);
  height: 45px;
}
.s-box-list-wrap .box-list.type1 a .bottom .badge {
  background: #fff !important;
  border-radius: 100px;
  padding: 10px;

  border: 1px dashed var(--bs-gray-300);
  font-weight: 600;
}
.s-box-list-wrap .box-list.type1 a .bottom .badge.category1 {
  color: var(--Primary) !important;
}
.s-box-list-wrap .box-list.type1 a .bottom .badge.category2 {
  color: var(--bs-gray) !important;
}
@media (max-width: 400px) {
}

/* 지원사업>상세 */
.detail-tit {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.detail-tit .badge {
  width: fit-content;
}
.detail-tit .tit {
  font-weight: 600;
  font-size: var(--font-size-big);
  margin-bottom: 3px;
  letter-spacing: -0.5px;
}
.detail-tit .txt {
  border: 1px solid var(--Stroke);
  border-radius: var(--Radius);
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-xs);
  background: var(--Background);
  margin-bottom: 16px;
}
.detail-tit .txt dl {
  display: flex;
  justify-content: space-between;
}
.detail-tit .txt dl dt {
  word-break: keep-all;
  width: 80px;
  color: var(--Greyscale8);
}
.detail-tit .txt dl dd {
  flex: 1;
  text-align: right;
}
.detail-box-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 10px;
}
.detail-box {
  border: 1px solid var(--Stroke);
  border-radius: var(--Radius);
  padding: 18px;
}
.detail-box .tit {
  font-weight: 500;
  margin-bottom: 7px;
  font-size: var(--font-size-s);
  display: flex;
  align-items: center;
}
.detail-box .tit span {
  font-size: var(--font-size-xs);
  margin-right: 2px;
}
.detail-box ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-box ul li {
  position: relative;
  font-size: 14px;
  padding-left: 10px;
}
.detail-box ul li:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--MdStroke);
  position: absolute;
  top: 7px;
  left: 0;
  border-radius: 100%;
}
.detail-cont {
  position: relative;
  overflow: hidden;
  transition: max-height 0.5s ease;
  max-height: 400px; /* 초기에 보이는 높이 */
}
.detail-cont:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--bs-white) 90%);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.detail-cont.expanded:before {
  visibility: hidden;
  z-index: -1;
  opacity: 0;
}
.detail-btn-wrap {
  position: relative;
}
.detail-btn {
  display: block;
  width: 100%;
  background: var(--bs-white);
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--Stroke);
  z-index: 1;
  position: relative;
  color: var(--Greyscale8);
  font-size: var(--font-size-s);
  font-weight: 400;
  padding: 11px 0;
}
.detail-btn:hover {
  border: 1px solid var(--Stroke);
}

/* 로그인 */
.con-tit {
  font-weight: 600;

  text-align: center;

  font-size: var(--font-size-xl);

  line-height: 1.4;

  margin-bottom: 24px;
}
.login-tit {
  position: relative;
}
.login-tit::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: var(--Primary1);
  right: -8px;
  bottom: 5px;
}
.login-tit {
  font-size: 24px;
  font-weight: 700;
}
.login-find {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.login-find li a {
  font-size: var(--font-size-s);
  font-weight: 500;
}
.login-find li a:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--Stroke);
  margin: 0 12px;
  position: relative;
  top: 1px;
}
.login-find li:last-child a:after {
  display: none;
}
.terms-box {
  font-size: var(--font-size-s);
  height: 200px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  scrollbar-width: auto; /* Firefox용 */
  padding-right: 10px;
  font-weight: 400;
  line-height: 1.5;
}
.terms-box::-webkit-scrollbar {
  width: 8px;
}
.terms-box::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.login-sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

/* 상단 말풍선 */
.sns-label {
  position: relative;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 100px;
  font-weight: 500;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  font-size: var(--font-size-xs);
}

.sns-label::after {
  content: "";
  position: absolute;
  bottom: -6px; /* 위치 조금 더 아래 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff; /* 아래로 향하는 삼각형 */
}

/* SNS 버튼 */
.login-button {
  display: flex;
  gap: 20px;
}

.login-button button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #f0f0f0;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
}

.login-button button:hover {
  transform: scale(1.05);
}

.login-button img {
  width: 28px;
  height: 28px;
}

/* 각 SNS별 배경색 */
.kko {
  background-color: #fee500 !important;
}
.gg {
  background-color: #fff !important;
  border: 1px solid var(--Stroke1) !important;
}
.fc {
  background-color: #1877f2 !important;
}
.ap {
  background-color: #000 !important;
}

/* 회원가입 버튼 */
.join-btn {
  background: none;
  border: none;
  color: #000;
  text-decoration: underline;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
}

/* 버튼형 탭 */
.btn-tabs {
  display: flex;
  margin-bottom: 10px;
}
.btn-tabs button {
  flex: 1;
  border-bottom: 2px solid var(--Stroke);
  box-sizing: border-box;
  padding: 12px;
  font-weight: 600;
  color: var(--Greyscale5);
}
.btn-tabs button.on {
  border-color: var(--Greyscale9);
  color: var(--Greyscale9);
}

/* 정보안내 */
.info-box {
}
.info-box .tit {
  font-weight: 600;
  margin-bottom: 12px;
}
.info-box .txt {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: var(--font-size-s);
}
.info-box .txt dl {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.info-box .txt dl dt {
  word-break: keep-all;
  width: 110px;
  color: #7e7e7e;
}
.info-box .txt dl dd {
  flex: 1;
  text-align: right;
}

@media (max-width: 400px) {
  .con-tit {
    font-size: var(--font-size-lg);
  }
}

/* 서브-상단 메뉴(스와이퍼) */
.sub-tab {
  position: relative;
  width: calc(100% + 20px);
  margin-bottom: 15px;
  overflow: visible;
  width: 100%; /* background: #fff; */
}
.sub-tab:before {
  content: "";
  display: inline-block;
  width: 100vw;
  height: 1px;
  background: var(--Stroke);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.sub-tab .swiper-slide {
  width: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  flex: 1;
}
.sub-tab button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 이게 중요 */
  width: 100%;
  padding: 0;
  background: none;
  text-align: center;
  color: var(--Greyscale9);
}

.sub-tab button span {
  display: block;
  text-align: center;
  padding: 0 16px 16px;
  font-weight: 500;
  font-size: var(--font-size-xs);
  color: var(--bs-gray);
  white-space: nowrap;
  width: 100%; /* 또는 min-width */
  box-sizing: border-box;
}
.sub-tab button.active:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background: var(--Greyscale9);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.sub-tab button.active span {
  color: var(--Greyscale9);
  font-weight: 600;
}

.sub-tab2 {
  display: flex;
  width: 100%;
  border-radius: 25px;
  background-color: #f4f4f4;
  padding: 4px;
  user-select: none;
  margin-bottom: 20px;
}
.sub-tab2 button {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 20px;
  color: #7e7e7e;
  transition: background-color 0.3s, color 0.3s;
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: var(--font-size-s);
}
.sub-tab2 button.active {
  background-color: white;
  z-index: 2;
  color: var(--Greyscale9);
}

/* 랭크 박스 */
.rank-swipe {
  position: relative;
  margin-bottom: 15px;
  overflow: visible;
  width: 100vw;
  padding-right: 150px;
}
.rank-swipe .swiper-wrapper {
  z-index: 0;
}
.rank-swipe .swiper-slide {
  width: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
  flex: 1;
  transition: all ease-in-out 0.2s;
}
.rank-swipe .rank-box {
  position: relative;
  color: var(--Greyscale9);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 17px;
  width: 100%;
  background: var(--Background1);
  border-radius: var(--Radius);
  align-items: start;
  font-size: var(--font-size-s);
}
.rank-swipe .swiper-slide-active .rank-box {
  background: #fff0e9;
}
.rank-swipe .swiper-slide-active .rank-box p.num {
  color: var(--Primary);
}
.rank-swipe .rank-box p.num {
  font-size: 14px;
  font-weight: 800;
}
.rank-swipe .rank-box p.txt {
  white-space: nowrap;
}

/* 박스 */
.border-box {
  border: 1px solid var(--Stroke);
  border-radius: var(--Radius);
  padding: 15px;
}

/* 리스트 */
ul.list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
}

ul.list li {
  position: relative;
  padding-left: 10px;
  font-size: var(--font-size-xs);
}

ul.list li::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: var(--Greyscale8);
  top: 9px;
  margin-right: 7px;
  left: 0;
}

ul.list-none {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--Greyscale8);
  font-size: var(--font-size-t);
}

/* 파일첨부 */
.custom-file-box {
  gap: 5px;
  background: #fdf9f6;
  border: 1px solid var(--MdStroke) !important;
  font-weight: 400;
  font-size: var(--font-size-s);
  padding: 9px;
  color: var(--Greyscale8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--Radius);
}
.custom-file-box .file-info {
  width: calc(100% - 80px);
}
.custom-file-box .file-info p {
  flex: 1;
  white-space: normal;
  word-break: break-word;
}
.custom-file-box .btn {
  background: var(--MdStroke);
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--bs-white);
  padding: 10px;
  width: 90px;
}
.custom-file-box .btn:active {
  background: var(--MdStroke);
  color: var(--bs-white);
}
.custom-file-box.upload {
  border: 1px solid #969696 !important;
  background: var(--Background1);
}
.custom-file-box.upload .btn {
  background: #969696;
}
.custom-file-box.upload .btn:active {
  color: var(--bs-white);
}
@media (max-width: 400px) {
  .custom-file-box .btn {
    width: 80px;
  }
}

/* 파일첨부 view */
.file-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--Stroke);
  border-radius: var(--Radius);
  margin: 20px 0;
  padding: 5px;
  box-sizing: border-box;
}
.file-box a {
  background: var(--Background1);
  border-radius: var(--Radius);
  padding: 9px;
  font-size: var(--font-size-s);
  position: relative;
}
.file-box a:after {
  content: "";
  display: inline-block;
  background: url("/static/assets/jnitalk/img/app/common/download.svg") center
    no-repeat;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.file-box a .txt .size {
  font-size: var(--font-size-xs);
  color: var(--Greyscale5);
}

/* 이미지 박스 */
.img-box {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 아코디언 */
.accordion-item {
  border: none !important;
  margin-top: -1px;
}
.accordion-item:first-of-type {
  border-radius: 0;
}
.accordion-header {
  border-top: 1px solid var(--Stroke);
  border-bottom: 1px solid var(--Stroke);
}
.accordion-button,
.accordion-button:not(.collapsed) {
  background: #fff;
  box-shadow: none;
  font-size: var(--font-size-s);
  color: var(--Greyscale9) !important;
  padding: 20px;
  word-break: break-all;
  padding-left: 44px;
  gap: 30px;

  font-weight: 600;
}
.accordion-button::before {
  content: "Q";
  display: inline-block;
  font-weight: 800;
  font-size: var(--font-size-xl);
  color: var(--Greyscale6);
  vertical-align: baseline;
  position: absolute;
  top: 16px;
  left: 10px;

  font-weight: 600;
}
.accordion-custom-button .accordion-item .accordion-body {
  position: relative;
  border-bottom: 1px solid var(--Stroke);
  background: var(--bs-gray-60);
  font-size: var(--font-size-s);
  color: var(--Greyscale9);
  padding: 20px;
  padding-left: 44px;
}
.accordion-custom-button .accordion-item .accordion-body::before {
  content: "A";
  display: inline-block;
  font-size: var(--font-size-xl);
  color: var(--Primary);
  vertical-align: baseline;
  position: absolute;

  font-weight: 600;
  top: 23px;
  left: 10px;
}
.accordion .accordion-button::after {
  background: url(/static/assets/jnitalk/img/board/ico-arrow-bottom.svg) center
    no-repeat;
  mask-image: inherit;
}
.accordion .accordion-button:not(.collapsed)::after {
  background: url(/static/assets/jnitalk/img/board/ico-arrow-bottom.svg) center
    no-repeat;
  mask-image: inherit;
  transform: rotate(180deg);
}

/* 드롭다운 */
.dropdown-item.active,
.dropdown-item:active {
  background: var(--Background);
  color: var(--Greyscale9);
}

/* 알림 */
.alarm-box-w {
  width: 100vw;
  position: absolute;
  left: 0;
}
.alarm-box-w .item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--Stroke);
  flex-direction: column;
  display: flex;
  gap: 6px;
}
.alarm-box-w .item .top {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--bs-gray-500);
}
.alarm-box-w .item .top .ct {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
}
.alarm-box-w .item .top .ct:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
}
.alarm-box-w .item .top .ct.ct1:before {
  background: url("/static/assets/jnitalk/img/app/common/alarm-ct1.png") center
    no-repeat;
}
.alarm-box-w .item .top .ct.ct2:before {
  background: url("/static/assets/jnitalk/img/app/common/alarm-ct2.png") center
    no-repeat;
}
.alarm-box-w .item .top .ct.ct3:before {
  background: url("/static/assets/jnitalk/img/app/common/alarm-ct3.png") center
    no-repeat;
}
.alarm-box-w .item .board {
  font-size: var(--font-size-s);
  color: var(--bs-gray-600);
  font-weight: 400;
}

/* GIS 시설 지도 */
.map-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.map {
  flex: 1;
}
.map-cont {
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
.map-bottom-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--Greyscale9);
  background: var(--bs-white);
  border-radius: 100px;
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 15px 7px;
  font-size: var(--font-size-s);
  border: 1px solid var(--Stroke);
  display: flex;
  gap: 3px;
}
.map-wrap .filter button {
  background: var(--bs-white);
}
.md-btn-2 .region-button span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.md-btn-2 .region-button span:before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
}
.md-btn-2 .region-button span.map-type1:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico1.svg") center
    no-repeat;
}
.md-btn-2 .region-button span.map-type2:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico2.svg") center
    no-repeat;
}
.md-btn-2 .region-button span.map-type3:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico3.svg") center
    no-repeat;
}
.md-btn-2 .region-button span.map-type4:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico4.svg") center
    no-repeat;
}
.md-btn-2 .region-button span.map-type5:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico5.svg") center
    no-repeat;
}
.md-btn-2 .region-button span.map-type6:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico6.svg") center
    no-repeat;
}
.md-btn-2 .region-check:checked + .region-button {
  color: var(--MdStroke);
}
.md-btn-2 .region-check:checked + .region-button span.map-type1:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico1-on.svg")
    center no-repeat;
  color: var(--MdStroke);
}
.md-btn-2 .region-check:checked + .region-button span.map-type2:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico2-on.svg")
    center no-repeat;
  color: var(--MdStroke);
}
.md-btn-2 .region-check:checked + .region-button span.map-type3:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico3-on.svg")
    center no-repeat;
  color: var(--MdStroke);
}
.md-btn-2 .region-check:checked + .region-button span.map-type4:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico4-on.svg")
    center no-repeat;
  color: var(--MdStroke);
}
.md-btn-2 .region-check:checked + .region-button span.map-type5:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico5-on.svg")
    center no-repeat;
  color: var(--MdStroke);
}
.md-btn-2 .region-check:checked + .region-button span.map-type6:before {
  background: url("/static/assets/jnitalk/img/app/sub/map-type-ico6-on.svg")
    center no-repeat;
  color: var(--MdStroke);
}

.gis-list .item a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--Stroke);
}
.gis-list .item a .info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  font-weight: 500;
}
.tag {
  font-size: var(--font-size-xs);
  width: fit-content;
  border-radius: 100px;
  padding: 5px 11px 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag.tag1 {
  background: var(--Background);
  color: #45628e;
}
.tag.tag2 {
  background: #fff5f5;
  color: #d84949;
}
.tag.tag3 {
  background: #fef9e8;
  color: #c36304;
}
.tag.tag4 {
  background: #e8fbf0;
  color: #088f41;
}
.gis-list .item a .info p.tit {
  font-weight: 500;
}

.gis-list .item a .info p.address {
  font-size: var(--font-size-s);
  font-weight: 400;
}

.gis-list .item a .info p.tel {
  font-size: var(--font-size-s);
  font-weight: 400;
  color: var(--Greyscale8);
}

.gis-img {
  width: 96px;
  aspect-ratio: 1/1 auto;
  border-radius: var(--Radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--Stroke);
}
.map-cont .location-w {
  position: relative;
  width: fit-content;
}
.map-cont .location {
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.map-cont .location.active:before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  background: url("../../assets/img/contents/location_on.svg") center no-repeat;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.map-cont .location:before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  background: url("/static/assets/jnitalk/img/app/sub/location.svg") center
    no-repeat;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.map-cont .gis-lc-info {
  position: relative;
}
.map-cont .gis-lc-info p {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 11px;
  background: var(--bs-white);
  max-width: 150px;
  border-radius: 5px;
  margin-top: 23px;
  width: fit-content;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid var(--Greyscale8);
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
  position: relative;
}
.map-cont .gis-lc-info:before {
  content: "";
  position: absolute;
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--Greyscale9);
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
}
.map-cont .gis-lc-info .info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  flex: 1;
}
.map-cont .gis-lc-info .info p.tag {
  font-size: var(--font-size-m);
  width: fit-content;
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 7px;
  border: 1px solid var(--Stroke);
}
.map-cont .gis-lc-info .info p.tit {
  font-weight: 500;
}
.map-cont .gis-lc-info .info p.address {
  font-size: var(--font-size-t);
}
.map-cont .gis-lc-info .info p.tel {
  font-size: var(--font-size-t);
}
.map-cont .gis-lc-info .info p.lc {
  font-size: var(--font-size-t);
}
.map-cont .gis-lc-info .img {
  width: 96px;
  aspect-ratio: 1/1 auto;
  border-radius: 4px;
  overflow: hidden;
}
.map-cont .gis-lc-info .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.map-cont .gis-lc-info button {
  background: #f25a4b;
  color: var(--bs-white);
  width: 100%;
  border-radius: 4px !important;
}

/* 바텀시트 */
.bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transition: height 0.3s ease;
  overflow: hidden;
  touch-action: none; /* 터치 제스처 충돌 방지 */
  z-index: 10;
}

.bottom-sheet.expanded {
  height: 70%;
}

.handle-bar {
  width: 50px;
  height: 5px;
  background: #ccc;
  border-radius: 5px;
  margin: 10px auto 15px;
}

.sheet-content {
  padding: 10px 20px;
  overflow-y: auto;
  max-height: calc(100% - 30px);
  overscroll-behavior: contain; /* 내부 스크롤 끝에서 부모로 이벤트 전달 막기 */
}

/* 커뮤니티 - 글쓰기버튼 */
.write-btn {
  position: fixed;
  bottom: 180px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  gap: 2px;
  border: none;
  font-size: var(--font-size-s);
  border-radius: 50px;
  background-color: var(--Primary); /* 원하는 색상 */
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgb(0 0 0 / 20%);
}

.write-btn .label {
  display: inline-block; /* inline -> inline-block 변경 */
  transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease,
    height 0.3s ease;
}
.write-btn .icon {
  margin-top: -3px;
}
.write-btn.small {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  gap: 0; /* gap도 없애서 공간 제거 */
}

.write-btn.small .label {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden; /* 혹시 내용이 남을까 대비 */
  display: inline-block;
}

/* 타이틀 */
.tit-box-type1 {
  margin-top: -100px;
}

/*탭버튼*/
.btn-submit flex-column gap-2 {
  width: 100%;
  display: flex;
  padding: 15px 20px 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: var(--bs-white);
}
.btn-bottom.cancel {
  color: #f57932;
  border: 1px solid #f57932;
}
.bottom_save_btn {
  width: 100%;
  background: #f57932;
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

.tab-bar {
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 10px;
}
.tabnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid #e9e9e9;
}
.tabnav li {
  flex: 1;
  height: 39px;
  text-align: center;
  line-height: 39px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  list-style: none;
}
@media (hover: hover) {
  .tabnav li:hover {
    border-bottom: 2px solid #f57932;
  }
}
.tabnav li.active {
  border-bottom: 2px solid #f57932;
  font-weight: bold;
}
.tabnav a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: #333;
}
.tabcontent {
  margin-top: 23px;
}
.tabcontent > div {
  display: none;
}
.tabcontent > div.active {
  display: block;
}
/*체크박스
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    cursor: pointer;
}

input[type="checkbox"] + label > span {
    vertical-align: middle;
    padding-left: 5px;
}
*/
/* 체크 전 상태
input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    vertical-align: middle;
}
 */
/* 체크 됐을 때 상태
input[type="checkbox"]:checked + label:before {
    content: "";
    background-color: #FF872B;
    border-color: #FF872B;
    background-image: url('/static/assets/jnitalk/img/sub/Vector_icon7.png');
    background-repeat: no-repeat;
    background-position: 50%;
} */
/*동그라미 체크박스
.circle_list{
    display: flex;
    align-items: center;
    gap: 15px;
}
.circle-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 7px;
    margin-bottom: 10px;
}
.circle-option input {
    display: none;
}
.circle-option .checkmark {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
.circle-option input:checked + .checkmark::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #FF872B;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
}
.circle-option input:checked + .checkmark {
    border-color: #FF872B;
}
.circle-option .label-text {
    font-size: 15px;
}*/

.mypage_item_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*on/off스위치*/
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  margin-right: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 22px;
  transition: 0.3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider {
  background-color: var(--Primary1);
}

.switch input:checked + .slider:before {
  transform: translateX(18px);
}

/* 바텀시트 */

.btn-category-select {
  width: 100%;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
/* 딤드 배경 */
.dimmed-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 999;
}
.dimmed-layer.active {
  opacity: 1;
  visibility: visible;
}

.sheet-category-select {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 25px 25px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  transition: bottom 0.5s ease;
  z-index: 1000;
}

.sheet-category-select.active {
  bottom: 0;
}

.sheet-category-select .sheet-content {
  padding: 20px;
}

.sheet-category-select .sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 800;
}
.list-category-option {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-category-option li {
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 16px;
}

.list-category-option li:hover {
  background: #f9f9f9;
}

.btn-close-category-sheet {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
.sheet-action-menu {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 25px 25px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  transition: bottom 0.5s ease;
  z-index: 1000;
}

.sheet-action-menu.active {
  bottom: 0;
}

.sheet-action-menu .sheet-content {
  padding: 20px;
}

.sheet-action-menu .sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.list-action-option {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-action-option li {
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
}

.list-action-option li:hover {
  background: #f9f9f9;
}

.sheet-handler {
  width: 35%;
  height: 5px;
  background: #d9d9d9;
  border-radius: 3px;
  margin: -2px auto 16px auto;
}

/*전문가 상담 메인*/
.list-top {
  margin-top: 20px;
}
.list-top2 {
  margin-bottom: 8px;
  font-weight: 800;
  display: flex;
  gap: 6px;
  margin-top: 20px;
}
.list-top2 > img {
  width: 18px;
  height: 23px;
}
.list-top3 {
  height: 55px;
  padding: 20px 0 20px 0;
  display: flex;
  align-items: center;
}
.counsel_HOT {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.counsel_HOT_content a {
  position: relative;
  width: 100%;
  height: 55px;
  background-color: #fdf2ed;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.counsel_HOT_content a:after {
  content: "";
  background: url("/static/assets/jnitalk/img/app/common/arrow-small-right-red.svg")
    center no-repeat;
  width: 24px;
  height: 24px;
}
.counsel_HOT_content a .Q_Text {
  color: var(--Error);
}
.title_wrap {
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: 10px;
  flex: 1;
}
.title_wrap p {
  width: 80%;
}
.Q_Text {
  font-weight: bold;
  color: var(--Greyscale7);
  font-size: 20px;
}
.A_Text {
  font-weight: bold;
  color: var(--Primary);
  font-size: 20px;
}
.counsel_content a {
  position: relative;
  width: 100%;
  height: 55px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.counsel_content a:after {
  content: "";
  background: url("/static/assets/jnitalk/img/app/common/arrow-small-right.svg")
    center no-repeat;
  width: 24px;
  height: 24px;
}
.counsel_content.private:after {
  content: "";
  display: inline-block;
  background: url("/static/assets/jnitalk/img/sub/Vector_icon2.png");
  width: 14px;
  height: 15px;
  position: absolute;
  right: 20px;
  top: 18px;
}
.tab02_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.tab02_box_content {
  width: 50%;
  height: 79px;
  background: #f4f4f4;
  border-radius: var(--Radius-14);
  padding: 18px;
  position: relative;
  font-size: var(--font-size-s);
}
.numbertext {
  position: absolute;
  right: 30px;
  bottom: 14px;
  font-weight: 800;
  font-size: 24px;
  color: #f57932;
}

/*전문가상담-일반사용자*/
.tab_category {
  font-size: 14px;
  color: #a5a5a5;
  font-weight: 500;
}
.tab_expert {
  padding: 16px 0;
}
.tab_title {
  font-weight: 500;
  padding-bottom: 16px;
}
.text_button {
  display: flex;
  justify-content: space-between;
}
.text_button > img {
  width: 4px;
  height: 16px;
}
.answer_wrap {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.answer_text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size);
  font-weight: 500;
}
.bt_Text {
  margin-top: 8px;
}
.bt_Text > ul {
  display: flex;
}
.bt_Text > ul > li {
  font-size: var(--font-size-s);
  font-weight: 400;
  color: var(--Greyscale8) !important;
}
.bt_Text > ul > li:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--Greyscale6);
  margin: 0 6px;
}
.bt_Text > ul > li:last-child:after {
  display: none;
}
.tab_img {
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: var(--Radius);
  overflow: hidden;
}
.tab_img img {
  width: 100%;
}
.tab_expert > p {
  margin: 18px 0;
  font-weight: 400;
}
.tab_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.tab_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-s);
  color: #545454;
  border-radius: 100px;
  padding: 5px 13px 4px;
  cursor: pointer;
  border: 1px solid var(--Stroke);
}
.tab_btn:before {
  content: "";
  display: inline-block;
  background: url("/static/assets/jnitalk/img/app/sub/bookmark.svg") center
    no-repeat;
  width: 16px;
  height: 17px;
  transition: ease-in-out 0.2s;
}
.tab_btn.active {
  border-color: var(--Primary);
  color: var(--Primary);
}
.tab_btn.active:before {
  background: url("/static/assets/jnitalk/img/app/sub/bookmark-on.svg") center
    no-repeat;
}
.tab_btn.heart:before {
  background: url("/static/assets/jnitalk/img/app/sub/heart.svg") center
    no-repeat;
}
.tab_btn.heart.active:before {
  background: url("/static/assets/jnitalk/img/app/sub/heart-on.svg") center
    no-repeat;
}

.gray_box {
  width: 100vw;
  height: 12px;
  background: var(--Background1);
  margin: 24px 0;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

/*전문가 상담글 - 게시글 작성*/
.write_expert {
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: #545454;
}
.write_title {
  width: 100%;
  height: 52px;
  border-radius: 6px;
  border: 1px solid #e9e9e9;
  padding: 20px;
  color: #c4c4c4;
  display: flex;
  align-items: center;
}

.write_detail {
  width: 100%;
  height: 225px;
  border-radius: 6px;
  border: 1px solid #e9e9e9;
  padding: 20px;
  color: #c4c4c4;
  display: flex;
}

.write_bottom > p {
  font-size: 14px;
  color: #7e7e7e;
  margin-top: 5px;
}
.image_plus {
  margin-top: 15px;
  overflow-x: auto; /* 가로 스크롤 가능 */
  -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
  display: flex;
  gap: 10px;
  padding-bottom: 10px; /* 스크롤바 공간 확보 */
}
.plus_tab {
  flex: 0 0 110px; /* 고정 너비 */
  height: 110px;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  gap: 2px;
  background-color: #fff;
  box-sizing: border-box;
  text-align: center; /* 텍스트 중앙 정렬 */
}
.plus_tab > p {
  font-size: 12px;
  color: #7e7e7e;
  margin: 0;
}
.image_tab {
  position: relative;
  flex: 0 0 110px; /* 고정 너비 */
  height: 110px;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  background-color: #f1f3f5;
  box-sizing: border-box;
  overflow: hidden;
}
.image_tab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image_tab button {
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  object-fit: contain;
  cursor: pointer;
  border: none;
  padding: 0;
}

/*커뮤니티*/
.notice_contents_wrap {
  border-top: 2px solid var(--Greyscale9);
}
.notice_contents a {
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--Stroke);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  padding: 18px 0;
}
.langbox {
  font-size: var(--font-size-xs);
  color: var(--Greyscale8);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.langbox.type1 {
  color: var(--Greyscale9);
  font-size: var(--font-size-big);
}
.langbox .lang {
  width: 26px;
  height: 26px;
  border-radius: 100%;
  border: 1px solid var(--Stroke);
  overflow: hidden;
}
.langbox .lang img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.notice_contents .notice_fix {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}
.notice_contents .notice_fix .tag {
  border: 1px solid var(--Primary);
  font-size: var(--font-size-xs);
  color: var(--Primary);
  border-radius: 100px;
  padding: 4px 9px;
  font-weight: 500;
}
.notice_contents .notice_fix .tag.type1 {
  border-color: var(--Error);
  color: var(--Error);
}
.notice_contents .notice_fix .tit {
  position: relative;
  font-size: var(--font-size);
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 9px;
}
.notice_contents .notice_fix .tit p {
  font-weight: 500;
  width: 90%;
}
.notice_contents .notice_fix .tit .tit2 {
  display: flex;
  align-items: center;
  width: 100%;
}
.notice_contents .notice_fix .tit.new .tit2:after {
  content: "N";
  background: var(--Error);
  width: 17px;
  height: 17px;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-white);
  font-weight: 800;
  font-size: 12px;
  line-height: 19px;
  flex-shrink: 0;
  margin-left: 4px;
}
.notice_contents .notice_fix .txt {
  font-size: var(--font-size-s);
  font-weight: 400;
}
.board_heart {
  font-size: 14px;
  color: var(--bs-gray-400);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.board_heart::before {
  content: "";
  display: inline-block;
  background: url(../img/contents/board_heart.svg) center no-repeat;
  width: 13px;
  height: 13px;
}
.board_comment {
  font-size: 14px;
  color: var(--bs-gray-400);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.board_comment::before {
  content: "";
  display: inline-block;
  background: url(../img/contents/board_comment.svg) center 1px no-repeat;
  width: 13px;
  height: 13px;
}
.date_text {
  font-size: var(--font-size-xs);
  color: var(--Greyscale8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 400;
}
.date_text.heart {
  background: url("/static/assets/jnitalk/img/app/sub/txt-heart.png") left
    center no-repeat;
  padding-left: 16px;
}
.date_text.comment {
  background: url("/static/assets/jnitalk/img/app/sub/txt-comment.png") left
    center no-repeat;
  padding-left: 16px;
}
.date_text.view {
  background: url("/static/assets/jnitalk/img/app/sub/txt-view.png") left center
    no-repeat;
  padding-left: 16px;
}
.notice_contents > img {
  width: 6px;
  height: 11px;
}
.post_contents_top {
  width: 100%;
  height: 132px;
  border-bottom: 1px solid #e9e9e9;
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
}
.post_contents {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #e9e9e9;
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
}
.top_post {
  width: 56px;
  height: 25px;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #f57932;
  background: #fdf2ed;
  border-radius: 6px;
  margin-bottom: 6px;
}
.post_write {
  font-size: 14px;
  color: #7e7e7e;
}
.post_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
}
.post_text {
  display: flex;
  align-items: center;
  gap: 10px;
}
.post_text > ul {
  display: flex;
  gap: 10px;
}
.post_text > ul > li {
  color: #a5a5a5;
  font-size: 14px;
  gap: 6px;
  display: flex;
  align-items: center;
}
.post_text > ul > li.heart {
  background: url(../../assets/img/contents/comm-heart.svg) left center
    no-repeat;
  padding-left: 17px;
}
.post_text > ul > li.heart.on {
  background: url(../../assets/img/contents/comm-heart-on.svg) left center
    no-repeat;
}

/*댓글*/
.comment {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 25%;
}
.comment_item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.comment_profile_left {
  display: flex;
  gap: 14px;
  flex: 1;
  align-items: center;
}
.profile-set {
  background: #f7f7f5;
  font-size: var(--font-size-xs);
  padding: 6px 10px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.comment_profile_right {
  display: flex;
  align-items: center;
  gap: 5px;
}
.comment_profile_right button {
  width: 24px;
  display: flex;
  justify-content: end;
  height: 24px;
}
.profile_icon {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #f8f9fd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  flex: 1;
}
.pf_body_top {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.comment_item_bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 50px;
}
.comment_tag {
  color: var(--Primary1);
  font-weight: 500;
  margin-right: 7px;
}
.comment_btn1 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9e9e9;
  color: #717171;
  font-size: 12px;
  border-radius: 4px;
  line-height: 12px;
  padding: 4px 6px;
}
.comment_btn2 {
  width: 42px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff3f3;
  color: #fe4e4e;
  font-size: 12px;
  border-radius: 4px;
  line-height: 12px;
}
.comment_btn3 {
  width: 42px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff7e5;
  color: #fe6029;
  font-size: 12px;
  border-radius: 4px;
  line-height: 12px;
}
.comment_send {
  height: 59px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
}
.send_text {
  width: 85%;
  height: 40px;
  border: 1px solid #d9d9d9;
  padding: 18px;
  color: #d9d9d9;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.send_btn {
  width: 20%;
  height: 48px;
  border: 1px solid #f57932;
  background: #f57932;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*커뮤니티 정책정보 상세보기*/

.file_down {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  margin-bottom: 30px;
}
.file_down_page {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #e9e9e9;
  border-radius: var(--Radius);
}
.file_item {
  width: 100%;
  background: var(--Background);
  border-radius: var(--Radius);
  color: #545454;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file_item a {
  width: 100%;
  display: flex;
  align-content: center;
  padding: 14px;
  box-sizing: border-box;
  align-items: center;
  gap: 4px;
}
.file_content_text {
  flex: 1;
  white-space: normal;
  word-break: break-word;
}
.file_item_text {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.file_item_btn {
  background-color: #969696;
  color: #fff;
  border-radius: 7px;
  font-size: 13px;
  padding: 6px 19px;
  text-align: center;
}

/*마이페이지*/
.mypage {
  display: flex;
  flex-direction: column;
  position: relative;
}
.mypage_profile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--bs-white);
  align-items: center;
}
.mypage_profile a {
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.mypage_btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  background: var(--bs-white);
}
.mypage_btn_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
}
.mypage_btn_item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.mypage_btn_item a .ico {
  width: 70px;
  height: 70px;
  border: 1px solid var(--Stroke);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mypage_list {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}
.mypage_list_item {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border-radius: 10px;
  gap: 10px;
}
.mypage_list_item > ul {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
  width: 100%;
}
.mypage_list_item > ul > li {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 5px;
  color: #424242;
}
.mypage_list_item > ul > li a {
  width: 100%;
  display: flex;
  align-content: center;
  gap: 5px;
  font-size: var(--font-size-s);
  padding: 10px 0;
}
.mypage_list_item > ul > li:last-child a {
  padding-bottom: 0;
}
.mypage_icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mypage_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.mypage_push {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.box_content {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
  line-height: 20px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box_content_black {
  width: 35%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #35383f;
  background-color: #35383f;
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box_content_none {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
  background: #e9e9e9;
  line-height: 20px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6b6b6b;
}
.box_content_top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.box_content_plus {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #f4f4f4;
  background: #f4f4f4;
  line-height: 20px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #495057;
  font-weight: bold;
}
.box_content_gray {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
  line-height: 20px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c4c4c4;
}
.box_content_textbox {
  width: 100%;
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
  font-size: 15px;
  display: flex;
  align-items: center;
  color: #c4c4c4;
  background-color: #fff;
  box-sizing: border-box; /* 추가 */
}

/* input 스타일 유지 */
.box_content_textbox input[type="text"] {
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  line-height: 20px;
  color: #333;
  background-color: transparent;
}

/* 포커스 시 박스 테두리 주황색으로 변경 */
.box_content_textbox input[type="text"]:focus {
  outline: none;
}

/* input 포커스 시 부모 박스 테두리 색 변경 (JS 없이 CSS만 가능하면 좋으나 :has 지원 브라우저 한정) */
.box_content_textbox:has(input[type="text"]:focus) {
  border: 1px solid #ff7a00;
}

/* placeholder 색상 */
.box_content_gray input::placeholder {
  color: #c4c4c4;
}

/* textarea 박스 스타일 유지 */
.box_content_textbox2 {
  width: 100%;
  height: 225px;
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
  font-size: 15px;
  color: #c4c4c4;
  box-sizing: border-box;
}

/* textarea 스타일 */
.box_content_textbox2 textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  line-height: 20px;
  resize: none; /* 크기 조절 비활성화 */
  color: #333;
  background-color: transparent;
}

/* textarea 포커스 시 박스 테두리 주황색 변경 */
.box_content_textbox2:has(textarea:focus) {
  border: 1px solid #ff7a00;
}

/* placeholder 색상 textarea */
.box_content_textbox2 textarea::placeholder {
  color: #c4c4c4;
}

.mypage_item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  position: relative;
  display: inline-flex;
  margin: 0 auto;
}
.mypage_item button.profile {
  width: 82px;
  height: 82px;
}
.mypage_item button.profile .profile_icon {
  width: 100%;
  height: 100%;
}
.mypage_item button.profile .profile_icon.basic::before {
  background-size: 34px;
}
.mypage_item button.delete {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--Stroke);
  border-radius: 100%;
  background: #fff url("../../assets/img/contents/profile-delete.svg") center
    no-repeat;
}
.mypage_title {
  font-size: 14px;
  color: #222222;
}
.orange_text {
  color: #ff872b;
}
.green_text {
  color: #39d196;
  font-size: 13px;
}
.bold_text {
  font-weight: bold;
}
.medium_text {
  font-size: 14px;
}
.mypage_list_item2 {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border-radius: 10px;
  gap: 10px;
}
.mypage_center_item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}
.mypage_align_item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mypage_item_between a {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.profile_change {
  padding: 5px 8px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}

.mypage_list_item_between {
  width: 100%;
}
.mypage_list_item_left {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}
.mypage_list_item_between > ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mypage_list_item_between > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mypage_list_item_between > ul > li a {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
  padding: 5px 0;
}
.bottom_line {
  border-bottom: 1px solid #e9e9e9;
}
.bottom_line2 {
  border-bottom: 1px solid #e9e9e9;
  height: 30px;
  margin-bottom: 15px;
}
.top_title {
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.top_title_left {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.top_title_left > img {
  margin-right: 5px;
}
.mypage_item_box {
  width: 100%;
  padding: 12px;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile_del {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.profile_del > img {
  width: 43px;
  height: 43px;
}
.profile_del_box {
  font-size: 13px;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  color: #a5a5a5;
  padding: 5px 7px;
}

/*이용약관*/
.terms_section {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}

/*저장한글*/
.mypage_save_content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.toggle-switch {
  display: flex;
  width: 100%;
  border-radius: 25px;
  background-color: #f4f4f4;
  padding: 4px;
  user-select: none;
}

.toggle-switch label {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 20px;
  color: #7e7e7e;
  transition: background-color 0.3s, color 0.3s;
  position: relative;
  z-index: 1;
}

.toggle-switch input[type="radio"] {
  display: none;
}

.toggle-switch input[type="radio"]:checked + label {
  background-color: white;
  color: #252525;
  z-index: 2;
}

.toggle-switch label:hover:not(.active) {
  background-color: #f5f5f5;
}

.file_upload {
  position: absolute;
  gap: 7px;
  width: 100%;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.file_upload_camera {
  width: 33vw;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.file_upload_item {
  width: 33vw;
  aspect-ratio: 1 / 1;
  display: flex;
  background-color: #f6f6f6;
  overflow: hidden;
}
.file_upload_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*반응형*/

@media screen and (max-width: 800px) {
  .tab02_box_content {
    padding: 15px;
  }
  .numbertext {
    right: 15px;
    bottom: 15px;
    font-size: 18px;
  }
}

@media screen and (max-width: 360px) {
  .box_content_black {
    font-size: 13px;
  }
  .date_text {
    font-size: 12px;
  }
}

/* 커뮤니티 버튼 탭 */
.language-swiper {
  padding: 0 0 20px 0;
}

.language-swiper .swiper-slide {
  width: auto; /* 내용 크기만큼 */
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  color: #333;
}

.lang-btn.active {
  background-color: #343b4d;
  color: #fff;
  border-color: #343b4d;
}

.lang-btn img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* 언어 선택 */
.main-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  color: #333;
  width: calc(25% - 4px);
  flex-shrink: 1;
}

.main-lang-btn.active {
  background-color: rgba(41, 119, 234, 0.1);
  border: 1px solid #2977ea;
}

/* 앱바 */
.appbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  padding: 14px 0;
  border-radius: 16px 16px 0 0;
}

.appbar-item {
  background: none;
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #999;
  gap: 4px;
  cursor: pointer;
}

.appbar-item img {
  width: 24px;
  height: 24px;
}

.appbar-item.active {
  color: var(--Primary);
  font-weight: 600;
}

.appbar-item.active img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(86%) saturate(564%)
    hue-rotate(208deg) brightness(96%) contrast(99%);
}

/* 커뮤니티>글쓰기버튼 */
.write-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--Primary);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 10px 20px 12px 16px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 1000;
  font-weight: 500;
}

.write-button .text {
  transition: opacity 0.3s ease;
}

.write-button.hide-text .text {
  display: none;
}

.write-button.hide-text {
  padding: 12px 13px;
  border-radius: 50%;
}

/* 앱라인 */
.app-line {
  width: calc(100% + 40px);
  left: 50%;
  background: var(--Background);
  height: 9px;
  position: relative;
  transform: translateX(-50%);
}
.app-line2 {
  width: calc(100% + 40px);
  left: 50%;
  background: var(--Stroke);
  height: 1px;
  position: relative;
  transform: translateX(-50%);
}

/* 차단회원 */
.blocked-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--Stroke1);
  border-radius: var(--Radius-14);
  padding: 13px;
  box-sizing: border-box;
}
.blocked-user .name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-s);
}

/* 인기글 */
.board-hot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.board-hot .item {
}
.board-hot .item a {
  display: flex;
  flex-direction: column;
  background: var(--Background1);
  padding: 15px;
  box-sizing: border-box;
  border-radius: var(--Radius);
  gap: 6px;
}
.board-hot .item a .tit {
  display: flex;
  gap: 6px;
}
.board-hot .item a .tit .num {
  font-weight: 500;
}
.board-hot .item a .date_text {
  padding-left: 0;
}

/* 좋아요 버튼 */
.good-btn {
  position: relative;
  border: 1px solid var(--Stroke);
  border-radius: 100px;
  padding: 11px 14px 12px;
  font-size: var(--font-size-s);
}
.good-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.good-btn span::before {
  content: "";
  display: inline-block;
  background: url(../img/contents/good-btn.svg) center no-repeat;
  width: 18px;
  height: 18px;
  top: 1px;
  position: relative;
}
.good-btn.on span::before {
  background: url(../img/contents/good-btn-on.svg) center no-repeat;
}

/* 등록페이지 */
.file-add {
  border: 1px solid var(--Stroke);
  padding: 10px 12px 9px;
  box-sizing: border-box;
  font-size: var(--font-size-xs);
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 정보제공>유관기관 */
.org {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.org .item {
}
.org .item a {
  border: 1px solid var(--Stroke);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  border-radius: var(--Radius);
  gap: 10px;
}
.org .item a .tag {
  border: 1px solid var(--Primary);
  font-size: var(--font-size-xs);
  color: var(--Primary);
  border-radius: 100px;
  padding: 4px 9px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1px;
}
.org .item a .tag.lc {
  background: #f5f7fa;
  color: #45628e;
  border-color: #f5f7fa;
}
.org .item a p {
  font-weight: 500;
}
.org .item a ul.info {
  font-size: var(--font-size-s);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.org .item a ul.info li {
}
.org .item a ul.info li span {
  width: auto;
  display: inline-block;
  min-width: 58px;
}
.org .item a .cont {
  padding-top: 10px;
  border-top: 1px dashed var(--Stroke);
  display: flex;
  gap: 12px;
}
.org .item a .cont .tag.gray {
  background: #f8f8f8;
  border-color: #f8f8f8;
  color: #777;
  word-break: keep-all;
  display: inline-block;
}
.org .item a .cont ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #666;
}
.org .item a .cont ul li {
  font-size: var(--font-size-s);
  position: relative;
  padding-left: 10px;
}
.org .item a .cont ul li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--Greyscale8);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 10px;
}
@media (max-width: 330px) {
  .org .item a .cont {
    flex-direction: column;
    gap: 5px;
  }
}

/* 모달-공유하기 */
.share-btn {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 한 줄에 4개 */
  gap: 0; /* 버튼 사이 간격 */
  text-align: center;
}

.share-btn button {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 10px 0;
}

.share-btn img {
  width: 48px;
  height: 48px;
}

.share-btn p {
  font-size: var(--font-size-xs);
  margin: 0;
  letter-spacing: -1.5px;
}

/* 개인정보처리방침 */
.pri_box {
  border-top: 2px solid var(--Greyscale9);
  padding: 16px 0;
  border-bottom: 1px solid var(--Stroke);
}

/* 일림내역 */
.notification-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.notification-item .icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--Background);
  border-radius: var(--Radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--Stroke);
}

.notification-item .icon img {
  width: 20px;
  height: 20px;
}

.notification-item .content {
  flex: 1;
}

.notification-item .message {
}

.notification-item .time {
  font-size: var(--font-size-xs);
  color: var(--Greyscale8);
}

/* 스플래시 */
.splash-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 댓글 박스 스크롤바 숨기기 */
#commentBox {
  height: 60px; /* 고정 높이 */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

#commentBox::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome, Safari, Opera */
}

/* sos */
.sos-box {
  display: flex;
  gap: 12px;
}
.sos-box button {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  height: 110px;
  color: var(--bs-white);
  border-radius: var(--Radius);
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  min-width: 0;
}
.sos-box button .ico {
  font-size: 26px;
}
.sos-box button p {
  font-weight: 500;
  font-size: 13px;
  word-break: keep-all;
  text-align: center;
  line-height: 1.2;
}
.sos-box button.type1 {
  background: #3182f7;
}
.sos-box button.type2 {
  background: var(--Error2);
}
.sos-box button.type3 {
  background: #00a86b;
}

/* 관리자 - 지역선택 */
.sch-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  width: 100%;
}
.sch-btn-wrap .md-btn {
  width: calc(100% / 8 - 4px);
  height: 48px;
}
@media (max-width: 768px) {
  .sch-btn-wrap .md-btn {
    width: calc(100% / 4 - 3px);
  }
}
@media (max-width: 576px) {
  .sch-btn-wrap .md-btn {
    width: calc(100% / 3 - 3px);
  }
}
@media (max-width: 400px) {
  .sch-btn-wrap .md-btn {
    width: calc(100% / 2 - 2px);
  }
}

.info-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}