@charset "UTF-8";
/* typography.scss */
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
[data-v-b7d10496]:root {
  --font-primary: "Spoqa Han Sans Neo", sans-serif;
}

/* Common Mixin */
/* ✅ Title */
/* ✅ Subtitle */
/* ✅ Body */
/* ✅ Label */
/* 모달 전체 배경은 투명하게 처리 */
.custom-modal[data-v-b7d10496] {
  --background: transparent;
  --width: 90vw;
  --height: auto;
}

/* scoped 환경에서도 Ionic 내부 .ion-page에 접근하도록 :deep 사용 */
.custom-modal[data-v-b7d10496] .ion-page {
  height: auto !important;
}

/* 모달 내부 실제 content 부분을 Flexbox로 가로/세로 중앙 정렬 */
.custom-modal[data-v-b7d10496]::part(content) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-modal[data-v-b7d10496] .ion-page:focus {
  outline: none !important;
  box-shadow: none !important;
}
.popup-container[data-v-b7d10496]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 실제 팝업 영역 스타일 */
.popup-container[data-v-b7d10496] {
  width: 90vw;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
}
.title-text[data-v-b7d10496] {
  font-size: 20px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .title-text[data-v-b7d10496] {
  font-size: 26px;
}
.title-text[data-v-b7d10496] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .title-text[data-v-b7d10496] {
  font-size: 20px;
}
.title-text[data-v-b7d10496] {
  color: var(--ion-grey-dark);
  margin-bottom: 8px;
  white-space: pre-line;
}
.content-text[data-v-b7d10496] {
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .content-text[data-v-b7d10496] {
  font-size: 22px;
}
.content-text[data-v-b7d10496] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .content-text[data-v-b7d10496] {
  font-size: 16px;
}
.content-text[data-v-b7d10496] {
  color: var(--ion-grey-medium);
}
.buttons[data-v-b7d10496] {
  margin-top: 32px;
  display: flex;
  gap: 12px;
}
.cancel-button[data-v-b7d10496]::part(native) {
  background-color: var(--ion-wh);
  border: 1.5px solid var(--ion-Grey-Medium, #6c757d);
  color: var(--ion-Grey-Medium, #6c757d);
}
/* typography.scss */
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
[data-v-f93d3a27]:root {
  --font-primary: "Spoqa Han Sans Neo", sans-serif;
}
/* Common Mixin */
/* ✅ Title */
/* ✅ Subtitle */
/* ✅ Body */
/* ✅ Label */
.family-list[data-v-f93d3a27] {
  --background: transparent;
  display: grid;
  gap: 12px;
  padding: 0;
}
.card-item[data-v-f93d3a27] {
  margin: 0;
  min-width: 280px;
  --inner-padding-end: 0;
}
.current-profile-card.card-item.owner[data-v-f93d3a27]::part(native) {
  border-color: var(--ion-primary-base);
}
.current-profile-card.card-item[data-v-f93d3a27]:not(.owner)::part(native) {
  border-color: var(--ion-secondary-base);
}
.card-item[data-v-f93d3a27]::part(native) {
  align-items: stretch;
  border-radius: 12px;
  border: 1.5px solid var(--ion-grey-light);
  padding: 16px;
  gap: 16px;
}
.add-item[data-v-f93d3a27]::part(native) {
  border: none;
  background: var(--ion-grey-extra-light);
}
.add-item .icon-box[data-v-f93d3a27] {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box[data-v-f93d3a27] {
  background: var(--ion-wh);
}
.material-symbols-outlined.filled[data-v-f93d3a27] {
  color: var(--ion-grey-medium);
  font-size: 42px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.add-item .ttl[data-v-f93d3a27] {
  color: var(--ion-grey-dark);
  font-size: 20px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .add-item .ttl[data-v-f93d3a27] {
  font-size: 26px;
}
.add-item .ttl[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .add-item .ttl[data-v-f93d3a27] {
  font-size: 20px;
}
.add-item .sub[data-v-f93d3a27] {
  color: var(--ion-grey-medium);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .add-item .sub[data-v-f93d3a27] {
  font-size: 22px;
}
.add-item .sub[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .add-item .sub[data-v-f93d3a27] {
  font-size: 16px;
}
/* 목록 아이템 */
.avatar[data-v-f93d3a27] {
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--ion-grey-light);
  background: var(--ion-grey-extra-light);
}
.info[data-v-f93d3a27] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 8px;
  min-width: 0;
}
.row1[data-v-f93d3a27] {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
}
.title-wrap[data-v-f93d3a27] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.name[data-v-f93d3a27] {
  color: var(--ion-grey-dark);
  font-size: 22px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .name[data-v-f93d3a27] {
  font-size: 24px;
}
.name[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .name[data-v-f93d3a27] {
  font-size: 22px;
}
.name[data-v-f93d3a27] {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-name[data-v-f93d3a27] {
  color: var(--ion-grey-dark);
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .active-name[data-v-f93d3a27] {
  font-size: 26px;
}
.active-name[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .active-name[data-v-f93d3a27] {
  font-size: 22px;
}
.badge[data-v-f93d3a27] {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .badge[data-v-f93d3a27] {
  font-size: 16px;
}
.badge[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .badge[data-v-f93d3a27] {
  font-size: 12px;
}
.badge[data-v-f93d3a27] {
  flex: none;
  padding: 3px 8px;
  border-radius: 16px;
  background: var(--ion-secondary-base);
  color: var(--ion-grey-extra-light);
}
.badge.owner[data-v-f93d3a27] {
  background: var(--ion-primary-base);
}
.close-ic[data-v-f93d3a27] {
  flex: none;
  font-size: 22px;
  color: var(--ion-grey-medium);
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.row2[data-v-f93d3a27] {
  display: flex;
  gap: 6px;
  align-items: center;
}
.meta[data-v-f93d3a27] {
  color: var(--ion-grey-medium);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .meta[data-v-f93d3a27] {
  font-size: 22px;
}
.meta[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .meta[data-v-f93d3a27] {
  font-size: 16px;
}
.active-meta[data-v-f93d3a27] {
  color: var(--ion-grey-dark);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .active-meta[data-v-f93d3a27] {
  font-size: 22px;
}
.active-meta[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .active-meta[data-v-f93d3a27] {
  font-size: 16px;
}
.active-meta-gender[data-v-f93d3a27] {
  color: var(--ion-grey-dark);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .active-meta-gender[data-v-f93d3a27] {
  font-size: 22px;
}
.active-meta-gender[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .active-meta-gender[data-v-f93d3a27] {
  font-size: 16px;
}
.warn[data-v-f93d3a27] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.material-symbols-outlined.warn-ic[data-v-f93d3a27] {
  font-size: 20px;
  color: var(--ion-error);
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.warn-txt[data-v-f93d3a27] {
  color: var(--ion-error);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .warn-txt[data-v-f93d3a27] {
  font-size: 20px;
}
.warn-txt[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .warn-txt[data-v-f93d3a27] {
  font-size: 14px;
}
.kid-item.need-link .info[data-v-f93d3a27] {
  gap: 4px;
  justify-content: space-between;
}
.kid-item.need-link .avatar img[data-v-f93d3a27] {
  opacity: 0.5;
}
.kid-item.need-link[data-v-f93d3a27]::part(native) {
  background: var(--ion-grey-extra-light);
}
.kid-item.need-link .name[data-v-f93d3a27] {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .kid-item.need-link .name[data-v-f93d3a27] {
  font-size: 24px;
}
.kid-item.need-link .name[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .kid-item.need-link .name[data-v-f93d3a27] {
  font-size: 18px;
}
.kid-item.need-link .name[data-v-f93d3a27] {
  color: var(--ion-grey-medium);
}
.kid-item.need-link .badge[data-v-f93d3a27] {
  background: var(--ion-grey-medium-light);
}
.kid-item.need-link .meta[data-v-f93d3a27] {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .kid-item.need-link .meta[data-v-f93d3a27] {
  font-size: 16px;
}
.kid-item.need-link .meta[data-v-f93d3a27] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .kid-item.need-link .meta[data-v-f93d3a27] {
  font-size: 12px;
}

.qr-area[data-v-10564cf6] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* typography.scss */
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
[data-v-8f1ec218]:root {
  --font-primary: "Spoqa Han Sans Neo", sans-serif;
}
/* Common Mixin */
/* ✅ Title */
/* ✅ Subtitle */
/* ✅ Body */
/* ✅ Label */
.family-list[data-v-8f1ec218] {
  --background: transparent;
  display: grid;
  gap: 12px;
  padding: 0;
}
.card-item[data-v-8f1ec218] {
  margin: 0;
  min-width: 280px;
  --inner-padding-end: 0;
}
.current-profile-card.card-item.owner[data-v-8f1ec218]::part(native) {
  border-color: var(--ion-primary-base);
}
.current-profile-card.card-item[data-v-8f1ec218]:not(.owner)::part(native) {
  border-color: var(--ion-secondary-base);
}
.card-item[data-v-8f1ec218]::part(native) {
  align-items: stretch;
  border-radius: 12px;
  border: 1.5px solid var(--ion-grey-light);
  padding: 16px;
  gap: 16px;
}
.add-item[data-v-8f1ec218]::part(native) {
  border: none;
  background: var(--ion-grey-extra-light);
}
.add-item .icon-box[data-v-8f1ec218] {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box[data-v-8f1ec218] {
  background: var(--ion-wh);
}
.material-symbols-outlined.filled[data-v-8f1ec218] {
  color: var(--ion-grey-medium);
  font-size: 42px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.add-item .ttl[data-v-8f1ec218] {
  color: var(--ion-grey-dark);
  font-size: 20px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .add-item .ttl[data-v-8f1ec218] {
  font-size: 26px;
}
.add-item .ttl[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .add-item .ttl[data-v-8f1ec218] {
  font-size: 20px;
}
.add-item .sub[data-v-8f1ec218] {
  color: var(--ion-grey-medium);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .add-item .sub[data-v-8f1ec218] {
  font-size: 22px;
}
.add-item .sub[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .add-item .sub[data-v-8f1ec218] {
  font-size: 16px;
}
/* 목록 아이템 */
.avatar[data-v-8f1ec218] {
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--ion-grey-light);
  background: var(--ion-grey-extra-light);
}
.info[data-v-8f1ec218] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 8px;
  min-width: 0;
}
.row1[data-v-8f1ec218] {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
}
.title-wrap[data-v-8f1ec218] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.name[data-v-8f1ec218] {
  color: var(--ion-grey-dark);
  font-size: 22px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .name[data-v-8f1ec218] {
  font-size: 24px;
}
.name[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .name[data-v-8f1ec218] {
  font-size: 22px;
}
.name[data-v-8f1ec218] {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-name[data-v-8f1ec218] {
  color: var(--ion-grey-dark);
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .active-name[data-v-8f1ec218] {
  font-size: 26px;
}
.active-name[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .active-name[data-v-8f1ec218] {
  font-size: 22px;
}
.badge[data-v-8f1ec218] {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .badge[data-v-8f1ec218] {
  font-size: 16px;
}
.badge[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .badge[data-v-8f1ec218] {
  font-size: 12px;
}
.badge[data-v-8f1ec218] {
  flex: none;
  padding: 3px 8px;
  border-radius: 16px;
  background: var(--ion-secondary-base);
  color: var(--ion-grey-extra-light);
}
.badge.owner[data-v-8f1ec218] {
  background: var(--ion-primary-base);
}
.close-ic[data-v-8f1ec218] {
  flex: none;
  font-size: 22px;
  color: var(--ion-grey-medium);
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.row2[data-v-8f1ec218] {
  display: flex;
  gap: 6px;
  align-items: center;
}
.meta[data-v-8f1ec218] {
  color: var(--ion-grey-medium);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .meta[data-v-8f1ec218] {
  font-size: 22px;
}
.meta[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .meta[data-v-8f1ec218] {
  font-size: 16px;
}
.active-meta[data-v-8f1ec218] {
  color: var(--ion-grey-dark);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .active-meta[data-v-8f1ec218] {
  font-size: 22px;
}
.active-meta[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .active-meta[data-v-8f1ec218] {
  font-size: 16px;
}
.active-meta-gender[data-v-8f1ec218] {
  color: var(--ion-grey-dark);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .active-meta-gender[data-v-8f1ec218] {
  font-size: 22px;
}
.active-meta-gender[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .active-meta-gender[data-v-8f1ec218] {
  font-size: 16px;
}
.warn[data-v-8f1ec218] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.material-symbols-outlined.warn-ic[data-v-8f1ec218] {
  font-size: 20px;
  color: var(--ion-error);
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.warn-txt[data-v-8f1ec218] {
  color: var(--ion-error);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .warn-txt[data-v-8f1ec218] {
  font-size: 20px;
}
.warn-txt[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .warn-txt[data-v-8f1ec218] {
  font-size: 14px;
}
.kid-item.need-link .info[data-v-8f1ec218] {
  gap: 4px;
  justify-content: space-between;
}
.kid-item.need-link .avatar img[data-v-8f1ec218] {
  opacity: 0.5;
}
.kid-item.need-link[data-v-8f1ec218]::part(native) {
  background: var(--ion-grey-extra-light);
}
.kid-item.need-link .name[data-v-8f1ec218] {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .kid-item.need-link .name[data-v-8f1ec218] {
  font-size: 24px;
}
.kid-item.need-link .name[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .kid-item.need-link .name[data-v-8f1ec218] {
  font-size: 18px;
}
.kid-item.need-link .name[data-v-8f1ec218] {
  color: var(--ion-grey-medium);
}
.kid-item.need-link .badge[data-v-8f1ec218] {
  background: var(--ion-grey-medium-light);
}
.kid-item.need-link .meta[data-v-8f1ec218] {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .kid-item.need-link .meta[data-v-8f1ec218] {
  font-size: 16px;
}
.kid-item.need-link .meta[data-v-8f1ec218] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .kid-item.need-link .meta[data-v-8f1ec218] {
  font-size: 12px;
}

/* typography.scss */
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
[data-v-97d51037]:root {
  --font-primary: "Spoqa Han Sans Neo", sans-serif;
}
/* Common Mixin */
/* ✅ Title */
/* ✅ Subtitle */
/* ✅ Body */
/* ✅ Label */
.accord-wrapper[data-v-97d51037]::part(native) {
  background: var(--ion-grey-extra-light);
  border-radius: 8px;
  cursor: pointer;
}
.safeqr-header[data-v-97d51037] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ion-grey-dark);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .safeqr-header[data-v-97d51037] {
  font-size: 20px;
}
.safeqr-header[data-v-97d51037] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .safeqr-header[data-v-97d51037] {
  font-size: 14px;
}
.safeqr-header .material-symbols-outlined[data-v-97d51037] {
  font-size: 24px;
  color: var(--ion-grey-medium);
}
.qr-content[data-v-97d51037] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}
.qr-content .qr[data-v-97d51037] {
  padding: 8px;
  border: 8px solid var(--ion-secondary);
}
.qr-content .qr.owner[data-v-97d51037] {
  border-color: var(--ion-primary);
}
.qr-content .meta[data-v-97d51037] {
  text-align: center;
}
.qr-content .time[data-v-97d51037] {
  display: block;
  color: var(--ion-grey-dark);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .qr-content .time[data-v-97d51037] {
  font-size: 16px;
}
.qr-content .time[data-v-97d51037] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .qr-content .time[data-v-97d51037] {
  font-size: 12px;
}
.qr-content .time[data-v-97d51037] {
  margin: 8px 0 8px;
}
.qr-content .hint[data-v-97d51037] {
  display: block;
  color: var(--ion-grey-light);
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .qr-content .hint[data-v-97d51037] {
  font-size: 24px;
}
.qr-content .hint[data-v-97d51037] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .qr-content .hint[data-v-97d51037] {
  font-size: 18px;
}
.user-panel[data-v-97d51037] {
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 500;
}
.user-panel .user-panel.open[data-v-97d51037] {
  background: transparent;
  pointer-events: none;
}
.user-panel.open .user-panel__body[data-v-97d51037] {
  pointer-events: auto;
  transform: translateY(40px);
}
.user-panel__body[data-v-97d51037] {
  position: absolute;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ion-wh);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.user-panel.open .user-panel__body[data-v-97d51037] {
  transform: translateY(0);
  top: calc(env(safe-area-inset-top) + 48px);
}
.content-area[data-v-97d51037] {
  flex: 1;
  overflow: auto;
  padding: 20px;
}
.content-area .current-profile[data-v-97d51037] {
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .content-area .current-profile[data-v-97d51037] {
  font-size: 22px;
}
.content-area .current-profile[data-v-97d51037] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .content-area .current-profile[data-v-97d51037] {
  font-size: 16px;
}
.content-area .current-profile[data-v-97d51037] {
  color: var(--ion-grey-dark);
  margin: 12px 0px;
}
.section-header[data-v-97d51037] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0 8px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .section-header[data-v-97d51037] {
  font-size: 22px;
}
.section-header[data-v-97d51037] {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .section-header[data-v-97d51037] {
  font-size: 16px;
}
.section-header span[data-v-97d51037] {
  color: var(--ion-grey-dark);
}
.section-header a[data-v-97d51037] {
  color: var(--ion-grey-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
ion-button[data-v-97d51037] {
  position: relative;
  bottom: env(safe-area-inset-bottom, 16px);
  margin: 16px;
  flex-shrink: 0;
}

/* layout-top 이 변수로 배경을 읽도록 */
.layout-top[data-v-990a4c49] {
  background: var(--layout-top-bg, var(--ion-wh));
  transition: background 0.2s ease;
  z-index: 100;
}

/* 선택되지 않은 라디오 버튼(외부 원형) 색상 변경 */
ion-radio[data-v-446041e9]::part(container) {
  border-color: red !important;
}

/* typography.scss */
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
:root {
  --font-primary: "Spoqa Han Sans Neo", sans-serif;
}

/* Common Mixin */
/* ✅ Title */
/* ✅ Subtitle */
/* ✅ Body */
/* ✅ Label */
body ion-col {
  padding: 0;
}
body ion-label {
  margin: 0;
}
body ion-avatar,
body ion-img {
  border-radius: 0;
}
body ion-list {
  padding: 0 !important;
}
body ion-segment-button {
  --indicator-color: var(--ion-primary);
  --color-checked: var(--ion-primary);
}
body ion-checkbox {
  --checkbox-background-checked: var(--ion-primary);
  --border-color-checked: var(--ion-primary);
  --checkmark-color: var(--ion-wh);
}
body ion-select {
  --border-radius: 8px;
  --background: var(--ion-wh);
}
body ion-select.select-expanded {
  --border-color: var(--ion-primary);
  --border: 1.5px solid var(--ion-primary);
}
body ion-select.select-expanded::part(label),
body ion-select.ion-focused::part(label),
body ion-select.select-expanded::part(icon),
body ion-select.ion-focused::part(icon) {
  color: var(--ion-primary);
}
body {
  --ion-color-primary: #0050e5;
  --ion-color-secondary: #3dc2ff;
  --ion-background-color: #ffffff;
  --ion-text-color: #000000;
}
body ion-footer {
  box-shadow: none !important;
  --box-shadow: none;
}
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
strong,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
tbody,
thead,
tr,
th,
td,
footer,
header,
section,
.card-content-md,
.card-content-ios {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* colors.scss */
:root {
  /* Transparent Colors */
  --ion-transparent: transparent;
  /* Grey Colors */
  --ion-wh: #ffffff;
  --ion-grey-extra-light: #f8f9fa;
  --ion-grey-light: #dee2e6;
  --ion-grey-medium-light: #adb5bd;
  --ion-grey-medium: #6c757d;
  --ion-grey-dark: #191f28;
  --ion-bk: #000000;
  /* 유저 선택 판넬 베이스 유지 */
  --ion-primary-base: #0050e5;
  --ion-secondary-base: #fdb02f;
  /* Primary Colors */
  --ion-primary-extra-tint: #80b3ff;
  --ion-primary-tint: #377eff;
  --ion-primary: #0050e5;
  --ion-primary-shade: #003cb8;
  --ion-primary-extra-shade: #002a80;
  --ion-pink-tint: #eb6496;
  /* Secondary Colors */
  --ion-secondary-tint: #ffcf6b;
  --ion-secondary: #fdb02f;
  --ion-secondary-shade: #eb9f10;
  /* Tertiary Colors */
  --ion-tertiary-tint: #a0e4e4;
  --ion-tertiary: #5cc6c6;
  --ion-tertiary-shade: #308f8f;
  /* State Colors */
  --ion-success: #52cd57;
  --ion-caution: #f8d93d;
  --ion-error: #e53f3f;
  /* Shadow Colors */
  --ion-shadow-small: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  --ion-shadow-large: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
}

/* typography.scss */
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("/static/fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
:root {
  --font-primary: "Spoqa Han Sans Neo", sans-serif;
}

/* Common Mixin */
/* ✅ Title */
/* ✅ Subtitle */
/* ✅ Body */
/* ✅ Label */
.with-footer-padding {
  --page-footer-padding: 0px;
  --padding-bottom: var(--page-footer-padding);
}

/* ====== IonSelect(popover) 옵션 줄바꿈 강제 ====== */
ion-popover ion-select-popover ion-radio::part(label) {
  white-space: normal !important;
}

ion-button {
  --padding-top: 12px;
  --padding-bottom: 12px;
  --padding-start: 24px;
  --padding-end: 24px;
  --background: var(--ion-primary);
  /* hover */
  --background-hover: var(--ion-primary);
  --background-hover-opacity: 1;
  /* pressed/activated */
  --background-activated: var(--ion-primary);
  --background-activated-opacity: 1;
  /* focus */
  --background-focused: var(--ion-primary);
  --background-focused-opacity: 1;
  /* ripple (MD) */
  --ripple-color: var(--ion-primary);
  margin: 0px;
  --border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] ion-button {
  font-size: 24px;
}
ion-button {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] ion-button {
  font-size: 18px;
}

ion-infinite-scroll.infinite-scroll-enabled {
  display: block !important;
}

ion-toast.material-info {
  --background: var(--ion-wh);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] ion-toast.material-info {
  font-size: 20px;
}
ion-toast.material-info {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] ion-toast.material-info {
  font-size: 14px;
}
ion-toast.material-info {
  --color: var(--ion-grey-dark) !important;
}

ion-toast.material-info .toast-wrapper {
  border-radius: 12px !important;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
}

ion-toast.material-info::part(icon) svg {
  display: none;
}

ion-toast.material-info::part(icon)::before {
  content: "info";
  font-family: "Material Symbols Outlined";
  font-feature-settings: "liga";
  width: 24px;
  height: 24px;
  line-height: 0.8;
  vertical-align: middle;
  color: var(--ion-primary);
  display: inline-block;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.layout {
  max-width: 767px;
  min-width: 280px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.layout.map-fullscreen {
  margin: 0 !important;
  max-width: 100% !important;
  touch-action: pan-x pan-y;
}

.my-location-marker {
  position: relative;
  width: 32px;
  height: 32px;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  background-color: #0066ff;
  border-radius: 50%;
  opacity: 0.5;
  transform: translate(-50%, -50%);
  animation: pulse 2.5s infinite ease-in-out;
  mix-blend-mode: lighten;
  z-index: 10;
}

.center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background-color: #0066ff;
  border: 4px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
}

@keyframes pulse {
  0% {
    width: 32px;
    height: 32px;
    opacity: 0.5;
  }
  50% {
    width: 48px;
    height: 48px;
    opacity: 0;
  }
  100% {
    width: 32px;
    height: 32px;
    opacity: 0.5;
  }
}
/* MyVax 화면 + 가족 모드일 때만 반전 */
:root[data-variant=family] .myvax-page .layout-top {
  background: var(--ion-primary);
}

:root[data-variant=family] .myvax-page .layout-bottom .container {
  background: var(--ion-wh);
}

/* 헤더(AppTopNav) 내부만 타겟팅해 과도한 범위 방지 */
:root[data-variant=family] .myvax-page .layout-top .left-layout p {
  color: var(--ion-wh) !important;
}

:root[data-variant=family] .myvax-page .layout-top .left-layout .material-symbols-outlined,
:root[data-variant=family] .myvax-page .layout-top .left-layout svg,
:root[data-variant=family] .myvax-page .layout-top .left-layout svg * {
  color: var(--ion-wh) !important;
  fill: var(--ion-wh) !important;
  stroke: var(--ion-wh) !important;
}

:root[data-variant=family] .myvax-page .layout-top .right-layout .material-symbols-outlined {
  color: var(--ion-wh) !important;
}

:root[data-variant=family] .myvax-page .layout-top .right-layout .user-select {
  border-color: var(--ion-wh) !important;
  color: var(--ion-wh) !important;
}

:root[data-variant=family] .myvax-page .layout-top .right-layout .user-select .material-symbols-outlined {
  color: var(--ion-wh) !important;
}

:root[data-variant=family] .myvax-page .layout-top .right-layout .user-select.open {
  background: transparent !important;
  color: var(--ion-wh) !important;
}

.layout-top {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  padding: 12px 20px;
  box-sizing: border-box;
  width: 100%;
  min-width: auto;
  max-width: 767px;
}
.layout-top .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  width: 100%;
}
.layout-top .container .left-layout {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
}
.layout-top .container .left-layout .left-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.layout-top .container .left-layout .left-icon-box.icon > * {
  width: 24px;
  height: 24px;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.layout-top .container .left-layout .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
}
.layout-top .container .left-layout svg {
  height: 24px;
}
.layout-top .container .left-layout p {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .layout-top .container .left-layout p {
  font-size: 20px;
}
.layout-top .container .left-layout p {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .layout-top .container .left-layout p {
  font-size: 14px;
}
.layout-top .container .left-layout p {
  color: var(--ion-grey-dark);
}
.layout-top .container .right-layout {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex: 0 0 auto;
}
.layout-top .container .right-layout .user-select {
  display: inline-flex;
  white-space: nowrap;
  height: 32px;
  padding: 6px 6px 6px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  border: 1.5px solid var(--ion-primary);
  color: var(--ion-primary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .layout-top .container .right-layout .user-select {
  font-size: 20px;
}
.layout-top .container .right-layout .user-select {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .layout-top .container .right-layout .user-select {
  font-size: 14px;
}
.layout-top .container .right-layout .user-select {
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.layout-top .container .right-layout .user-select.open {
  background: var(--ion-primary);
  color: var(--ion-wh);
}
.layout-top .container .right-layout .user-select.open .material-symbols-outlined {
  color: var(--ion-wh) !important;
}
.layout-top .container .right-layout .material-symbols-outlined {
  display: inline-block;
  vertical-align: middle;
  font-size: 24px;
  color: var(--ion-primary);
}
.layout-top .container .right-layout svg {
  width: 24px;
  height: 24px;
}

.layout-top .container .right-layout > span:not(.user-select) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: hidden;
}

.layout-top .container .right-layout .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
}

.layout-container {
  flex: 1;
  width: 100%;
}

.layout-bottom {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: auto;
  max-width: 767px;
  background: var(--ion-wh);
  border-radius: 12px 12px 0px 0px;
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
}
.layout-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 8px 10px;
}
.layout-bottom .container li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px;
  gap: 4px;
  margin: 0;
  border-radius: 8px;
  background: var(--ion-wh);
  cursor: pointer;
}
.layout-bottom .container li .material-symbols-outlined {
  font-size: 24px;
  color: var(--ion-grey-medium);
}
.layout-bottom .container li p {
  color: var(--ion-grey-medium);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .layout-bottom .container li p {
  font-size: 16px;
}
.layout-bottom .container li p {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .layout-bottom .container li p {
  font-size: 12px;
}
.layout-bottom .container li.active {
  background: var(--ion-grey-extra-light);
}
.layout-bottom .container li.active .material-symbols-outlined {
  color: var(--ion-primary);
}
.layout-bottom .container li.active p {
  color: var(--ion-primary);
}

.plus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 12px;
  border-top: 1px solid var(--ion-grey-light);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  /* 큰 글씨 모드 활성화 */
}
[data-text-mode=true] .plus {
  font-size: 20px;
}
.plus {
  /* 작은 글씨 모드 활성화 */
}
[data-text-mode=false] .plus {
  font-size: 14px;
}
.plus {
  color: var(--ion-grey-medium);
  cursor: pointer;
}