* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

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

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;
}

/* Modal */
.css-1kxic87-MuiPaper-root-MuiDialog-paper{
  border-radius: 24px !important;
  background-color: var(--cool-neutral-97) !important;
}
  
/* 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--solid.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;
    backdrop-filter: blur(32px);
    border: none;
  }
  .btn--solid.btn--assistive.btn--md:hover {
    background: var(--assistive-bg-hover);
    color: var(--assistive-text-hover);
  }
  .btn--solid.btn--assistive.btn--md:active {
    background: var(--assistive-bg-action);
    color: var(--assistive-text-action);
  }


  .btn--solid.btn--assistive.btn--lg {
    background: var(--assistive-bg-default);
    color: var(--assistive-text-default);
    padding: var(--unit-16) var(--unit-28);
    font-size: 16px;
    line-height: 18px;
    border-radius: 14px;
    backdrop-filter: blur(32px);
    border: none;
  }
  .btn--solid.btn--assistive.btn--lg:hover {
    background: var(--assistive-bg-hover);
    color: var(--assistive-text-hover);
  }
  .btn--solid.btn--assistive.btn--lg: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--line.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;
    border: 1px solid var(--assistive-border-default);
    backdrop-filter: blur(32px);
  }
  .btn--line.btn--assistive.btn--sm:hover {
    background: var(--assistive-bg-hover);
    color: var(--assistive-text-hover);
    border-color: var(--assistive-border-hover);
  }
  .btn--line.btn--assistive.btn--sm: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: var(--assistive-text-default);
    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;
} 

/* input */
.innocode-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  color: black !important;
}
.innocode-input-label {
  font-size: 15px;
  font-family: 'SUIT Variable', sans-serif;
  font-weight: 500;
  color: var(--cool-neutral-80, #434356) !important;
  margin-bottom: 2px;
}
.innocode-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'SUIT Variable', sans-serif;
  font-size: 16px;
  color: black !important;
  background: #FCFCFD;
  border: 1.5px solid #E2E2E9 !important;
  border-radius: 10px !important;
  padding: 12px 14px  !important;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.innocode-input:focus {
  border-color: var(--blue-60) !important;
  box-shadow: 0 0 0 2px rgba(127,166,75,0.12) !important;
}
.innocode-input--error {
  border-color: #F83A3A;
  background: #F6F6F8 !important;
}
.innocode-input--success {
  border-color: var(--blue-60) !important;
  background: #F6F6F8 !important;
}
.innocode-input--disabled {
  background: #F6F6F8 !important;
  color: #B0B0C0 !important;
  border-color: #E2E2E9 !important;
  cursor: not-allowed;
}
.innocode-input-helper {
  font-size: 13px;
  color: #8F8FA3;
  margin-top: 2px;
}
.innocode-input--sm {
  font-size: 14px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}
.innocode-input--md {
  font-size: 16px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
}
.innocode-input--lg {
  font-size: 18px;
  padding: 16px 18px;
  border-radius: 12px;
}
.innocode-input-icon-left,
.innocode-input-icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #B0B0C0;
  pointer-events: none;
}
.innocode-input-icon-left {
  left: 14px;
}
.innocode-input-icon-right {
  right: 14px;
}
.innocode-input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.innocode-input[disabled], .innocode-input--disabled {
  background: #F6F6F8;
  color: #B0B0C0;
  border-color: #E2E2E9;
  cursor: not-allowed;
} 

.label-inner-row {
  align-self: stretch;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 16px;
  display: flex;
}
.form-input-group {
  width: 100%;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  display: flex;
}
.form-label-inner {
  align-self: stretch;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}
.label-inner {
  color: #73738C;
  font-size: 16px;
  font-family: Pretendard;
  font-weight: 500;
  line-height: 18px;
  word-wrap: break-word;
}
.form-required {
  color: #F83A3A;
  font-size: 16px;
  font-family: Pretendard;
  font-weight: 500;
  line-height: 18px;
  word-wrap: break-word;
}
.input-group {
  width: 100%;
  align-self: stretch; 
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}
.input-row {
  flex: 1;
  align-self: stretch;
  height: 48px;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #FCFCFD;
  box-shadow: 0px 2px 4px rgba(32,32,44,0.12);
  overflow: hidden;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.input {
  flex: 1 1 0;
  color: #8F8FA3;
  font-size: 16px;
  font-family: Noto Sans KR;
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
}

/* checkbox */

.checkbox-list-label-row {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
}
.checkbox-list-checkbox {
  width: 20px;
  height: 20px;
  padding: 8px;
  background: #FCFCFD;
  border-radius: 96px;
  border: 1px #C7C7D1 solid;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  position: relative;
}
.checkbox-list-checkbox:checked {
  background: var(--blue-50);
  border-color: var(--blue-50);
}
.checkbox-list-label {
  flex: 1 1 0;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #393939;
  font-size: 14px;
  font-family: Noto Sans KR;
  font-weight: 400;
  line-height: 22px;
  word-wrap: break-word;
}

/* error */
.error-message{ 
  color: var(--red-40);
}

.verify-message{ 
  color: var(--green-40);
}

/* term of service */
 
.title-depth-1{
  font-weight: 700;
}

.title-depth-1, .body-medium{
  color: var(--cool-neutral-50);
}

.term-of-service-section-inner{
  width: 100%; height: 100%; padding-left: 16px; padding-right: 16px; padding-top: 40px; padding-bottom: 40px; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; display: inline-flex;
}

.term-of-service-section-inner-depth1-item{
  align-self: stretch; 
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: flex-start; 
  gap: 8px; 
  display: flex;
}

.term-of-service-section-inner-depth2-item{
  align-self: stretch; 
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: flex-start; 
  gap: 8px; 
  display: flex;
  padding-left: 16px;
}

.dot-list-item {
  color: var(--cool-neutral-50);
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}
.dot-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: #21212C;
  border-radius: 50%;
  transform: translateY(-50%);
  display: inline-block;
}

/* chip */
.custom-chip{
  cursor: pointer;
  width: 100%; height: 100%; padding-left: 8px; padding-right: 8px; padding-top: 6px; padding-bottom: 6px; background-color: var(--bx-green-95); overflow: hidden; border-radius: 999px; justify-content: center; align-items: center; gap: 4px; display: inline-flex;
}

.custom-chip-label{
  color: var(--bx-green-55); font-size: 12px; font-family: Pretendard; font-weight: 400; line-height: 16px; word-wrap: break-word;
}

.keyword-list-star.selected {
    color: var(--yellow-60);
    font-variation-settings: "FILL" 1;
}

.keyword-list-star {
    width: 24px;
    height: 24px;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* toggle */
.innocode-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.innocode-toggle input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}
.innocode-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #EAEAF0;
  border-radius: 12px;
  transition: background 0.2s;
}

.innocode-toggle-slider:before {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0px 3px 3px rgba(32,32,44,0.16);
  transition: transform 0.2s;
}
.innocode-toggle input:checked + .innocode-toggle-slider {
  background: #567829;
}
.innocode-toggle input:checked + .innocode-toggle-slider:before {
  transform: translateX(20px);
}

/* empty post */
.empty-post-container{
  padding: 40px; 
  width: 100%; 
  height: 100%; 
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: center; 
  gap: 24px; 
  display: inline-flex;
}

.empty-post-icon-box{
  width: 48px; 
  height: 48px; 
  position: relative; 
  overflow: hidden;
}

.empty-post-icon{
  font-size: 48px; 
  color:var(--cool-neutral-70);
}

.empty-post-text{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color:var(--cool-neutral-70);
  font-size: 16px;
  font-family: Noto Sans KR;
  font-weight: 500;
  line-height: 26px;
  word-wrap: break-word;
}

/* selectbox */
/* Custom Selectbox Component Styles */

.custom-select {
  position: relative;
  width: 100%;
  font-family: 'Noto Sans KR', sans-serif;
}

.select-trigger {
  background-color: var(--cool-neutral-95) !important;
  height: 48px;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-family: Noto Sans KR;
  font-weight: 400;
  color: #434356;
  width: 100%; 
  display: flex;
  align-items: center;
  justify-content: space-between; 
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.select-trigger:hover {
  background-color: #e8eaf0;
}

.custom-select.open .select-trigger {
  background-color: #e8eaf0;
  box-shadow: 0 0 0 2px rgba(55, 129, 251, 0.2);
}

.select-text {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: #8F8FA3;
  text-align: left;
}

.custom-select.has-value .select-text {
  color: #434356;
}

.select-search {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 400;
  color: #434356;
  outline: none;
}

.select-search::placeholder {
  color: #8F8FA3;
}

.select-arrow {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.custom-select.open .select-arrow {
  transform: rotate(180deg);
}

.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
}

.custom-select.open .select-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.select-option {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  color: #434356;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 4px 8px;
}

.select-option:first-child {
  margin-top: 8px;
}

.select-option:last-child {
  margin-bottom: 8px;
}

.select-option:hover {
  background-color: #F0F0F4;
  color: #3781FB;
}

.select-option.selected {
  background-color: var(--blue-90);
  color: #ffffff;
}

.select-option.selected:hover {
  background-color: var(--blue-90);
}

.select-option.hidden {
  display: none;
}

/* 검색 가능한 셀렉트박스 */
.custom-select.searchable .select-search {
  cursor: text;
}

.custom-select.searchable.open .select-search {
  cursor: text;
}

/* 스크롤바 스타일링 */
.select-dropdown::-webkit-scrollbar {
  width: 6px;
}

.select-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.select-dropdown::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.select-dropdown::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 포커스 상태 */
.custom-select:focus-within .select-trigger {
  box-shadow: 0 0 0 2px rgba(55, 129, 251, 0.2);
}

/* 비활성화 상태 */
.custom-select.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.custom-select.disabled .select-trigger {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

/* 반응형 */
@media (max-width: 768px) {
  .select-trigger {
      height: 44px;
      padding: 10px 12px;
  }
  
  .select-text,
  .select-search {
      font-size: 14px;
  }
  
  .select-option {
      padding: 10px 14px;
      font-size: 14px;
  }
  
  .select-dropdown {
      max-height: 160px;
  }
}

/* 키보드 내비게이션 */
.select-option.focused {
  background-color: #F0F0F4;
  color: #3781FB;
  outline: 2px solid #3781FB;
  outline-offset: -2px;
}

/* 애니메이션 */
@keyframes slideDown {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
      opacity: 1;
      transform: translateY(0);
  }
  to {
      opacity: 0;
      transform: translateY(-10px);
  }
}