:root {
  button{
      cursor: pointer;
      border: none;
      outline: none;
      background: none;
      color: black;
  }
}


/* 기본 스타일 */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: #000000;
  background: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 스크롤바 숨기기 */
/* Webkit 브라우저 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 0px;  /* 세로 스크롤바 너비 */
  height: 0px; /* 가로 스크롤바 높이 */
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

/* font */
.font-sample { margin-bottom: 24px; }
      .font-label { font-size: 12px; color: #888; margin-bottom: 4px; }
      /* Display */
      .display-noto-56 { font-family: var(--font-noto); font-size: var(--font-display-56-noto); line-height: var(--font-display-56-noto-line); }
      .display-noto-44 { font-family: var(--font-noto); font-size: var(--font-display-44-noto); line-height: var(--font-display-44-noto-line); }
      .display-bodoni-56 { font-family: var(--font-bodoni); font-size: var(--font-display-56-bodoni); line-height: var(--font-display-56-bodoni-line); }
      .display-bodoni-44 { font-family: var(--font-bodoni); font-size: var(--font-display-44-bodoni); line-height: var(--font-display-44-bodoni-line); }
      /* Title */
      .title-noto-40 { font-family: var(--font-noto); font-size: var(--font-title-40-noto); line-height: var(--font-title-40-noto-line); }
      .title-noto-36 { font-family: var(--font-noto); font-size: var(--font-title-36-noto); line-height: var(--font-title-36-noto-line); }
      .title-noto-28 { font-family: var(--font-noto); font-size: var(--font-title-28-noto); line-height: var(--font-title-28-noto-line); }
      .title-bodoni-40 { font-family: var(--font-bodoni); font-size: var(--font-title-40-bodoni); line-height: var(--font-title-40-bodoni-line); }
      .title-bodoni-36 { font-family: var(--font-bodoni); font-size: var(--font-title-36-bodoni); line-height: var(--font-title-36-bodoni-line); }
      .title-bodoni-28 { font-family: var(--font-bodoni); font-size: var(--font-title-28-bodoni); line-height: var(--font-title-28-bodoni-line); }
      /* Headline */
      .headline-noto-26 { font-family: var(--font-noto); font-size: var(--font-headline-26-noto); line-height: var(--font-headline-26-noto-line); }
      .headline-noto-24 { font-family: var(--font-noto); font-size: var(--font-headline-24-noto); line-height: var(--font-headline-24-noto-line); }
      .headline-noto-22 { font-family: var(--font-noto); font-size: var(--font-headline-22-noto); line-height: var(--font-headline-22-noto-line); }
      .headline-noto-18 { font-family: var(--font-noto); font-size: var(--font-headline-18-noto); line-height: var(--font-headline-18-noto-line); }
      .headline-bodoni-26 { font-family: var(--font-bodoni); font-size: var(--font-headline-26-bodoni); line-height: var(--font-headline-26-bodoni-line); }
      .headline-bodoni-24 { font-family: var(--font-bodoni); font-size: var(--font-headline-24-bodoni); line-height: var(--font-headline-24-bodoni-line); }
      .headline-bodoni-22 { font-family: var(--font-bodoni); font-size: var(--font-headline-22-bodoni); line-height: var(--font-headline-22-bodoni-line); }
      .headline-bodoni-18 { font-family: var(--font-bodoni); font-size: var(--font-headline-18-bodoni); line-height: var(--font-headline-18-bodoni-line); }
      /* Body */
      .body-noto-16-reading { font-family: var(--font-noto); font-size: var(--font-body-16-reading-noto); line-height: var(--font-body-16-reading-noto-line); }
      .body-noto-16-normal { font-family: var(--font-noto); font-size: var(--font-body-16-normal-noto); line-height: var(--font-body-16-normal-noto-line); }
      .body-noto-15-reading { font-family: var(--font-noto); font-size: var(--font-body-15-reading-noto); line-height: var(--font-body-15-reading-noto-line); }
      .body-noto-15-normal { font-family: var(--font-noto); font-size: var(--font-body-15-normal-noto); line-height: var(--font-body-15-normal-noto-line); }
      .body-noto-14-reading { font-family: var(--font-noto); font-size: var(--font-body-14-reading-noto); line-height: var(--font-body-14-reading-noto-line); }
      .body-noto-14-normal { font-family: var(--font-noto); font-size: var(--font-body-14-normal-noto); line-height: var(--font-body-14-normal-noto-line); }
      /* Caption */
      .caption-noto-14 { font-family: var(--font-noto); font-size: var(--font-caption-14-noto); line-height: var(--font-caption-14-noto-line); }
      .caption-noto-12 { font-family: var(--font-noto); font-size: var(--font-caption-12-noto); line-height: var(--font-caption-12-noto-line); }
      .caption-noto-11 { font-family: var(--font-noto); font-size: var(--font-caption-11-noto); line-height: var(--font-caption-11-noto-line); }
      /* Label */
      .label-noto-16 { font-family: var(--font-noto); font-size: var(--font-label-16-noto); line-height: var(--font-label-16-noto-line); }
      .label-noto-14 { font-family: var(--font-noto); font-size: var(--font-label-14-noto); line-height: var(--font-label-14-noto-line); }
      .label-noto-12 { font-family: var(--font-noto); font-size: var(--font-label-12-noto); line-height: var(--font-label-12-noto-line); }


      /* button */
      /* Button Component */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-sm-gap);
  border: none;
  outline: none;
  cursor: pointer;
  font-family: 'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(32px);
  overflow: hidden;
  position: relative;
}

/* Button Size Variants */
.btn--sm {
  padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
  font-size: var(--button-sm-font-size);
  line-height: var(--button-sm-line-height);
  border-radius: var(--button-sm-border-radius);
  gap: var(--button-sm-gap);
}

.btn--md {
  padding: var(--button-md-padding-y) var(--button-md-padding-x);
  font-size: var(--button-md-font-size);
  line-height: var(--button-md-line-height);
  border-radius: var(--button-md-border-radius);
  gap: var(--button-md-gap);
}

.btn--lg {
  padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
  font-size: var(--button-lg-font-size);
  line-height: var(--button-lg-line-height);
  border-radius: var(--button-lg-border-radius);
  gap: var(--button-lg-gap);
}

/* Button Style Variants */
.btn--solid {
  background: var(--button-solid-bg);
  color: var(--button-solid-color);
}

.btn--line {
  background: var(--button-line-bg);
  border: 1px solid var(--button-line-border);
  color: var(--button-line-color);
}

.btn--opacity,
.btn--opacity.btn--primary,
.btn--opacity.btn--secondary {
  background: transparent;
  color: var(--button-opacity-color);
  backdrop-filter: none;
  border: none;
}

.btn--opacity:hover {
  background: var(--button-opacity-hover-bg);
  backdrop-filter: blur(32px);
}

/* Button Type Variants */
.btn--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-color);
}

.btn--secondary {
  background: var(--button-secondary-bg);
  border: 1px solid var(--button-secondary-border);
  color: var(--button-secondary-color);
}

/* Button States */
.btn:hover {
  opacity: var(--button-hover-opacity);
}

.btn:active {
  opacity: var(--button-active-opacity);
}

.btn:disabled {
  opacity: var(--button-disabled-opacity);
  cursor: not-allowed;
}

/* Button with Icons */
.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.btn__icon--leading {
  margin-right: var(--unit-2);
}

.btn__icon--trailing {
  margin-left: var(--unit-2);
}

/* Button Text */
.btn__text {
  flex: 1 1 0;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
}

/* Specific combinations for exact Figma match */
.btn--solid.btn--primary.btn--sm {
  background: var(--button-solid-bg);
  color: var(--button-solid-color);
  padding: var(--unit-8) var(--unit-10);
  font-size: 12px;
  line-height: 16px;
  border-radius: 8px;
}

.btn--line.btn--secondary.btn--sm {
  background: var(--green-opacity-60);
  border: 1px solid var(--bx-green-60);
  color: var(--bx-green-60);
  padding: var(--unit-8) var(--unit-10);
  font-size: 12px;
  line-height: 16px;
  border-radius: 8px;
}

.btn--line.btn--secondary.btn--md {
  background: var(--green-opacity-40);
  border: 1px solid var(--bx-green-60);
  color: var(--bx-green-60);
  padding: var(--unit-12) var(--unit-24);
  font-size: 14px;
  line-height: 18px;
  border-radius: 10px;
}

.btn--line.btn--secondary.btn--lg {
  background: var(--green-opacity-40);
  border: 1px solid var(--bx-green-60);
  color: var(--bx-green-60);
  padding: var(--unit-16) var(--unit-28);
  font-size: 16px;
  line-height: 18px;
  border-radius: 14px;
}

.btn--opacity.btn--secondary.btn--sm {
  background: transparent;
  color: var(--bx-green-60);
  padding: var(--unit-8) var(--unit-10);
  font-size: 12px;
  line-height: 16px;
  border-radius: 8px;
  backdrop-filter: none;
  border: none;
}

.btn--opacity.btn--secondary.btn--sm:hover {
  background: var(--button-opacity-hover-bg);
  backdrop-filter: blur(32px);
  border: none;
}

.btn--opacity.btn--secondary.btn--md {
  background: transparent;
  color: var(--bx-green-60);
  padding: var(--unit-12) var(--unit-24);
  font-size: 14px;
  line-height: 18px;
  border-radius: 10px;
  backdrop-filter: none;
  border: none;
}

.btn--opacity.btn--secondary.btn--md:hover {
  background: var(--green-opacity-20);
  backdrop-filter: blur(32px);
  border: none;
}

.btn--opacity.btn--secondary.btn--lg {
  background: transparent;
  color: var(--bx-green-60);
  padding: var(--unit-16) var(--unit-28);
  font-size: 16px;
  line-height: 18px;
  border-radius: 14px;
  backdrop-filter: none;
  border: none;
}

.btn--opacity.btn--secondary.btn--lg:hover {
  background: var(--green-opacity-20);
  backdrop-filter: blur(32px);
  border: none;
}

.btn--opacity.btn--secondary.btn--sm:active {
  background: var(--button-opacity-action-bg);
  color: var(--button-opacity-action-color);
  backdrop-filter: none;
  border: none;
}

.btn--opacity.btn--secondary.btn--md:active,
.btn--opacity.btn--secondary.btn--lg:active {
  background: var(--button-opacity-action-bg);
  color: var(--button-opacity-action-color);
  backdrop-filter: blur(32px);
  border: none;
}

.btn--solid.btn--primary.btn--md {
  background: var(--bx-green-60);
  color: var(--cool-neutral-99);
  padding: var(--unit-12) var(--unit-24);
  font-size: 14px;
  line-height: 18px;
  border-radius: 10px;
}

.btn--solid.btn--primary.btn--lg {
  background: var(--bx-green-60);
  color: var(--cool-neutral-99);
  padding: var(--unit-16) var(--unit-28);
  font-size: 16px;
  line-height: 18px;
  border-radius: 14px;
} 

.btn--solid.btn--primary.btn--sm:hover,
.btn--solid.btn--primary.btn--md:hover,
.btn--solid.btn--primary.btn--lg:hover {
  background: var(--button-solid-primary-hover-bg);
  color: var(--button-solid-primary-hover-color);
  backdrop-filter: blur(32px);
}

.btn--solid.btn--primary.btn--sm:active,
.btn--solid.btn--primary.btn--md:active,
.btn--solid.btn--primary.btn--lg:active {
  background: var(--button-solid-primary-action-bg);
  color: var(--button-solid-primary-action-color);
  backdrop-filter: blur(32px);
} 

.btn--solid.btn--assistive.btn--sm {
  background: var(--assistive-bg-default);
  color: var(--assistive-text-default);
  padding: var(--unit-8) var(--unit-10);
  font-size: 12px;
  line-height: 16px;
  border-radius: 8px;
  backdrop-filter: blur(32px);
  border: none;
}
.btn--solid.btn--assistive.btn--sm:hover {
  background: var(--assistive-bg-hover);
  color: var(--assistive-text-hover);
}
.btn--solid.btn--assistive.btn--sm:active {
  background: var(--assistive-bg-action);
  color: var(--assistive-text-action);
}

.btn--line.btn--assistive.btn--md {
  background: var(--assistive-bg-default);
  color: var(--assistive-text-default);
  padding: var(--unit-12) var(--unit-24);
  font-size: 14px;
  line-height: 18px;
  border-radius: 10px;
  border: 1px solid var(--assistive-border-default);
  backdrop-filter: blur(32px);
}
.btn--line.btn--assistive.btn--md:hover {
  background: var(--assistive-bg-hover);
  color: var(--assistive-text-hover);
  border-color: var(--assistive-border-hover);
}
.btn--line.btn--assistive.btn--md:active {
  background: var(--assistive-bg-action);
  color: var(--assistive-text-action-strong);
  border-color: var(--assistive-border-action);
}

.btn--opacity.btn--assistive.btn--lg {
  background: transparent;
  color: var(--assistive-text-default);
  padding: var(--unit-16) var(--unit-28);
  font-size: 16px;
  line-height: 18px;
  border-radius: 14px;
  border: none;
  backdrop-filter: none;
}
.btn--opacity.btn--assistive.btn--lg:hover {
  background: var(--assistive-bg-hover);
  color: var(--assistive-text-hover);
  backdrop-filter: blur(32px);
}
.btn--opacity.btn--assistive.btn--lg:active {
  background: var(--assistive-bg-action);
  color: var(--assistive-text-action);
  backdrop-filter: blur(32px);
} 

.btn--opacity.btn--assistive.btn--md {
  background: transparent;
  color: var(--assistive-text-default);
  padding: var(--unit-16) var(--unit-28);
  font-size: 16px;
  line-height: 18px;
  border-radius: 14px;
  border: none;
  backdrop-filter: none;
}
.btn--opacity.btn--assistive.btn--md:hover {
  background: var(--assistive-bg-hover);
  color: var(--assistive-text-hover);
  backdrop-filter: blur(32px);
}
.btn--opacity.btn--assistive.btn--md:active {
  background: var(--assistive-bg-action);
  color: var(--assistive-text-action);
  backdrop-filter: blur(32px);
} 

.btn--opacity.btn--assistive.btn--sm {
  background: transparent;
  color: rgba(252, 252, 253, 0.56);
  padding: var(--unit-8) var(--unit-10);
  font-size: 12px;
  line-height: 16px;
  border-radius: 14px;
  border: none;
  backdrop-filter: none;
}
.btn--opacity.btn--assistive.btn--sm:hover {
  background: var(--assistive-bg-hover); 
  backdrop-filter: blur(32px);
}
.btn--opacity.btn--assistive.btn--sm:active {
  background: var(--assistive-bg-action);
  color: var(--assistive-text-action);
  backdrop-filter: blur(32px);
} 

.icon-btn {
  color: black;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--icon-btn-gap);
  border-radius: var(--icon-btn-radius);
  border: none;
  background: transparent;
  padding: var(--icon-btn-md-padding);
  transition: background 0.2s, color 0.2s; 
}
.icon-btn--md { padding: var(--icon-btn-md-padding); }
.icon-btn--lg { padding: var(--icon-btn-lg-padding); }

.icon-btn__wrapper {
  width: var(--icon-btn-wrapper-size);
  height: var(--icon-btn-wrapper-size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.icon-btn__icon {
  width: var(--icon-btn-icon-size);
  height: var(--icon-btn-icon-size);
  border-radius: 50%;
  background: var(--icon-btn-opacity-assistive-icon);
}

.icon-btn .button-icon{
    font-size: 20px !important;
}
/* opacity/assistive */
.icon-btn--opacity.icon-btn--assistive { background: var(--icon-btn-opacity-assistive-bg); }
.icon-btn--opacity.icon-btn--assistive:hover { background: var(--icon-btn-opacity-assistive-hover-bg); }
.icon-btn--opacity.icon-btn--assistive:active { background: var(--icon-btn-opacity-assistive-action-bg); }
.icon-btn--opacity.icon-btn--assistive .icon-btn__icon { background: var(--icon-btn-opacity-assistive-icon); }
.icon-btn--opacity.icon-btn--assistive:hover .icon-btn__icon { background: var(--icon-btn-opacity-assistive-hover-icon); }
.icon-btn--opacity.icon-btn--assistive:active .icon-btn__icon { background: var(--icon-btn-opacity-assistive-action-icon); }
/* solid/primary */
.icon-btn--solid.icon-btn--primary { background: var(--icon-btn-solid-primary-bg); }
.icon-btn--solid.icon-btn--primary .material-symbols-outlined,
.icon-btn--solid.icon-btn--primary .button-icon {
  color: var(--icon-btn-solid-primary-icon);
}
.icon-btn--solid.icon-btn--primary:hover .material-symbols-outlined,
.icon-btn--solid.icon-btn--primary:hover .button-icon {
  color: var(--icon-btn-solid-primary-hover-icon);
}
.icon-btn--solid.icon-btn--primary:active .material-symbols-outlined,
.icon-btn--solid.icon-btn--primary:active .button-icon {
  color: var(--icon-btn-solid-primary-action-icon);
}
/* line/assistive */
.icon-btn--line.icon-btn--assistive {
  background: var(--icon-btn-line-assistive-bg);
  border: 1px solid var(--icon-btn-line-assistive-border);
}
.icon-btn--line.icon-btn--assistive .material-symbols-outlined,
.icon-btn--line.icon-btn--assistive .button-icon {
  color: var(--icon-btn-line-assistive-icon);
}
.icon-btn--line.icon-btn--assistive:hover {
  background: var(--icon-btn-line-assistive-hover-bg);
}
.icon-btn--line.icon-btn--assistive:hover .material-symbols-outlined,
.icon-btn--line.icon-btn--assistive:hover .button-icon {
  color: var(--icon-btn-line-assistive-hover-icon);
}
.icon-btn--line.icon-btn--assistive:active {
  background: var(--icon-btn-line-assistive-action-bg);
}
.icon-btn--line.icon-btn--assistive:active .material-symbols-outlined,
.icon-btn--line.icon-btn--assistive:active .button-icon {
  color: var(--icon-btn-line-assistive-action-icon);
} 


/* connect widget */ 
.connect-widget {
  background: var(--connect-bg, #D5F2C0);
  border-radius: var(--connect-radius-web, 40px);
  padding: var(--connect-padding-web, 48px 24px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--connect-gap-web, 24px);
  min-width: 320px;
}

.connect-widget__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.connect-widget__icon-btn {
  position: relative;
  width: 64px; height: 64px;
}
.connect-widget__icon-btn .social-btn__bg {
  width: 64px; height: 64px;
  border-radius: 50px;
  background: var(--social-btn-instagram-bg);
  position: absolute; left: 0; top: 0;
}
.connect-widget__icon-btn .social-btn__icon {
  position: absolute; left: 16px; top: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.connect-widget__icon-btn .social-btn__icon i {
  color: #fff;
  font-size: 32px;
}
.connect-widget__title {
  color: var(--connect-title-color, #7FA64B);
  font-size: var(--connect-title-font-size-web, 14px);
  font-weight: var(--connect-title-font-weight, 500);
  line-height: var(--connect-title-line-height-web, 16px);
}
.connect-widget__id {
  color: var(--connect-id-color, #567829);
  font-size: var(--connect-id-font-size-web, 18px);
  font-weight: var(--connect-id-font-weight-web, 700);
  line-height: var(--connect-id-line-height-web, 26px);
}
.connect-widget__button {
  height: 48px;
  min-width: 52px;
  padding: 0 28px;
  background: #385016;
  border-radius: 14px;
  backdrop-filter: blur(32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FCFCFD;
  font-size: 16px;
  font-family: Pretendard, sans-serif;
  font-weight: 500;
  line-height: 18px;
  border: none;
  cursor: pointer;
}
/* 모바일 버전 */
.connect-widget--mobile {
  border-radius: var(--connect-radius-mobile, 24px);
  padding: var(--connect-padding-mobile, 16px 12px);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.connect-widget--mobile .connect-widget__profile {
  flex-direction: row;
  align-items: center;
  gap: var(--connect-gap-mobile, 12px);
}
.connect-widget--mobile .connect-widget__icon-btn {
  width: 48px; height: 48px;
}
.connect-widget--mobile .connect-widget__icon-btn .social-btn__bg {
  width: 48px; height: 48px;
}
.connect-widget--mobile .connect-widget__icon-btn .social-btn__icon {
  left: 12px; top: 12px;
  width: 24px; height: 24px;
}
.connect-widget--mobile .connect-widget__icon-btn .social-btn__icon i {
  font-size: 24px;
}
.connect-widget--mobile .connect-widget__title {
  font-size: var(--connect-title-font-size-mobile, 12px);
  line-height: var(--connect-title-line-height-mobile, 14px);
}
.connect-widget--mobile .connect-widget__id {
  font-size: var(--connect-id-font-size-mobile, 16px);
  line-height: var(--connect-id-line-height-mobile, 18px);
}
.connect-widget--mobile .connect-widget__profile-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  display: inline-flex;
}
.connect-widget--mobile .connect-widget__button {
  height: 36px;
  min-width: 36px;
  padding: 0 16px;
  font-size: 14px;
}

/* link button */
.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--link-btn-gap);
  padding: var(--link-btn-padding-y) var(--link-btn-padding-x);
  font-size: var(--link-btn-font-size);
  font-family: var(--link-btn-font-family);
  font-weight: var(--link-btn-font-weight);
  line-height: var(--link-btn-line-height);
  text-decoration: var(--link-btn-text-decoration);
  background: none;
  border: none; 
  transition: color 0.2s;
  cursor: pointer;
}
.link-btn--assistive {
  color: var(--link-btn-assistive-default);
}
.link-btn--assistive:hover {
  color: var(--link-btn-assistive-hover);
}
.link-btn--assistive:active {
  color: var(--link-btn-assistive-active);
}
.link-btn--primary {
  color: var(--link-btn-primary-default);
}
.link-btn--primary:hover {
  color: var(--link-btn-primary-hover);
}
.link-btn--primary:active {
  color: var(--link-btn-primary-active);
}
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}
.button-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.button-label {
  font-size: 12px;
  color: #888;
  text-align: center;
}
/* 시각적 샘플용 강제 hover/active 스타일 */
.hover-sample.link-btn--assistive { color: var(--link-btn-assistive-hover) !important; pointer-events: none; }
.active-sample.link-btn--assistive { color: var(--link-btn-assistive-active) !important; pointer-events: none; }
.hover-sample.link-btn--primary { color: var(--link-btn-primary-hover) !important; pointer-events: none; }
.active-sample.link-btn--primary { color: var(--link-btn-primary-active) !important; pointer-events: none; }

/* profile */
.profile-img {
  display: inline-block;
  border-radius: var(--profile-radius);
  object-fit: cover;
  position: relative;
}
.profile-img--xs { width: var(--profile-xs); height: var(--profile-xs); }
.profile-img--sm { width: var(--profile-sm); height: var(--profile-sm); }
.profile-img--md { width: var(--profile-md); height: var(--profile-md); }
.profile-img--lg { width: var(--profile-lg); height: var(--profile-lg); }
.profile-img--xl { width: var(--profile-xl); height: var(--profile-xl); }
.profile-img--2xl { width: var(--profile-2xl); height: var(--profile-2xl); }
.profile-img--3xl { width: var(--profile-3xl); height: var(--profile-3xl); }
.profile-img--4xl { width: var(--profile-4xl); height: var(--profile-4xl); }
.profile-img--5xl { width: var(--profile-5xl); height: var(--profile-5xl); }
.profile-group { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.profile-label { font-size: 12px; color: #888; text-align: center; margin-top: 4px; }
.profile-example { display: flex; flex-direction: column; align-items: center; gap: 2px; }


/* social button */
.social-btn {
  position: relative;
  display: inline-block;
  overflow: visible;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}
.social-btn__bg {
  position: absolute;
  left: 0; top: 0;
  border-radius: var(--social-btn-radius);
  width: var(--social-btn-md-size);
  height: var(--social-btn-md-size);
}
.social-btn--lg .social-btn__bg {
  width: var(--social-btn-lg-size);
  height: var(--social-btn-lg-size);
}
.social-btn--instagram .social-btn__bg {
  background: var(--social-btn-instagram-bg);
}
.social-btn--apple .social-btn__bg {
  background: var(--social-btn-apple-bg);
}
.social-btn--spotify .social-btn__bg {
  background: var(--social-btn-spotify-bg);
  border-radius: var(--social-btn-radius-full);
}
.social-btn__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 인스타그램 아이콘 위치/크기 */
.social-btn--instagram .social-btn__icon {
  left: 12px; top: 12px;
  width: var(--social-btn-instagram-icon-md-size);
  height: var(--social-btn-instagram-icon-md-size);
}
.social-btn--instagram.social-btn--lg .social-btn__icon {
  left: 16px; top: 16px;
  width: var(--social-btn-instagram-icon-lg-size);
  height: var(--social-btn-instagram-icon-lg-size);
}
.social-btn--instagram .social-btn__icon i {
  color: #fff;
  font-size: 24px;
}
.social-btn--instagram.social-btn--lg .social-btn__icon i {
  font-size: 32px;
}
/* 애플 아이콘 위치/크기 */
.social-btn--apple .social-btn__icon {
  left: 12px; top: 8.57px;
  width: var(--social-btn-apple-icon-md-width);
  height: var(--social-btn-apple-icon-md-height);
}
.social-btn--apple.social-btn--lg .social-btn__icon {
  left: 16px; top: 11.43px;
  width: var(--social-btn-apple-icon-lg-width);
  height: var(--social-btn-apple-icon-lg-height);
}
.social-btn--apple .social-btn__icon i {
  color: #fff;
  font-size: 24px;
}
.social-btn--apple.social-btn--lg .social-btn__icon i {
  font-size: 32px;
}
/* 스포티파이 아이콘 위치/크기 */
.social-btn--spotify .social-btn__icon {
  left: 8.57px; top: 13.71px;
  width: var(--social-btn-spotify-icon-md-width);
  height: var(--social-btn-spotify-icon-md-height);
}
.social-btn--spotify.social-btn--lg .social-btn__icon {
  left: 11.43px; top: 18.29px;
  width: var(--social-btn-spotify-icon-lg-width);
  height: var(--social-btn-spotify-icon-lg-height);
}
.social-btn--spotify .social-btn__icon i {
  color: #fff;
  font-size: 24px;
}
.social-btn--spotify.social-btn--lg .social-btn__icon i {
  font-size: 32px;
}
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 32px;
}
.button-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.button-label {
  font-size: 12px;
  color: #888;
  text-align: center;
}

/* tabbar */
.tabbar {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--tabbar-gap); 
  min-width: 100px;
  width: 100%;
}
.tabbar__label {
  color: var(--tabbar-default-color);
  font-size: var(--tabbar-font-size);
  font-family: var(--tabbar-font-family);
  font-weight: var(--tabbar-font-weight);
  line-height: var(--tabbar-line-height);
  word-break: keep-all;
  text-align: center;
  transition: color 0.2s;
}
.tabbar__indicator {
  align-self: stretch;
  height: var(--tabbar-indicator-height);
  background: var(--tabbar-default-indicator);
  border-radius: var(--tabbar-indicator-radius);
  transition: background 0.2s;
  position: relative;
}
.tabbar--selected .tabbar__label {
  color: var(--tabbar-selected-color);
}
.tabbar--selected .tabbar__indicator {
  background: var(--tabbar-selected-indicator);
}
.tabbar-group {
  display: flex; 
}


/* contents info */
.contents-info { 
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}
.contents-info__icon-md {
  width: 16px;
  height: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents-info__icon-lg {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents-info__icon-bg1-md {
  width: 16px;
  height: 16px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: #D9D9D9;
}
.contents-info__icon-bg2-md {
  width: 12.8px;
  height: 12.8px;
  left: 1.6px;
  top: 1.6px;
  position: absolute;
  background: #8F8FA3;
}
.contents-info__icon-bg1-lg {
  width: 24px;
  height: 24px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: #D9D9D9;
}
.contents-info__icon-bg2-lg {
  width: 19.2px;
  height: 19.2px;
  left: 2.4px;
  top: 2.4px;
  position: absolute;
  background: #8F8FA3;
}
.contents-info__text-md {
  color: #8F8FA3;
  font-size: 16px;
}
.contents-info__text-lg {
  color: #8F8FA3;
  font-size: 24px;
}