@font-face {
  font-family: 'Bodoni 72';
  src: url('../fonts/Bodoni/OpenType/Bodoni-72-Medium.otf') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* effect */
  --opacity-12: #21212C1E;
  --opacity-16: #21212C28;
  --opacity-22: #21212C38;
  --opacity-24: #21212C3D;
  --opacity-32: #21212C51;
  --opacity-36: #21212C5B;
  --opacity-40: #21212C66;
  --opacity-48: #21212C7A;
  --opacity-5: #21212C0C;
  --opacity-56: #21212C8E;
  --opacity-64: #21212CA3;
  --opacity-72: #21212CB7;
  --opacity-8: #21212C14;
  --opacity-80: #21212CCC;
  --opacity-88: #21212CE0;
  --opacity-96: #21212CF4;

  /* color */
  --black: #000000FF;
  --blue-opacity-10: #3781FB19;
  --blue-opacity-20: #3781FB33;
  --blue-opacity-40: #3781FB66;
  --blue-10: #022D73FF;
  --blue-20: #0445AFFF;
  --blue-30: #175DCFFF;
  --blue-40: #3781FBFF;
  --blue-5: #021D4BFF;
  --blue-50: #5592F6FF;
  --blue-60: #82B1FCFF;
  --blue-70: #9BC0FDFF;
  --blue-80: #B4D0FDFF;
  --blue-90: #CDE0FEFF;
  --blue-95: #E6EFFEFF;
  --bx-green-10: #121A07FF;
  --bx-green-20: #172209FF;
  --bx-green-30: #23330EFF;
  --bx-green-35: #2D4112FF;
  --bx-green-40: #385016FF;
  --bx-green-5: #060902FF;
  --bx-green-50: #45621EFF;
  --bx-green-55: #567829FF;
  --bx-green-60: #7FA64BFF;
  --bx-green-65: #96BD61FF;
  --bx-green-70: #A9CD78FF;
  --bx-green-80: #B8D68FFF;
  --bx-green-90: #C7DEA6FF;
  --bx-green-95: #DDEBCAFF;
  --bx-yellow-10: #2E1707FF;
  --bx-yellow-15: #45230AFF;
  --bx-yellow-20: #5C2E0EFF;
  --bx-yellow-25: #733A11FF;
  --bx-yellow-30: #87450DFF;
  --bx-yellow-40: #9A500AFF;
  --bx-yellow-5: #170C03FF;
  --bx-yellow-50: #B36507FF;
  --bx-yellow-55: #D18604FF;
  --bx-yellow-60: #EFA601FF;
  --bx-yellow-65: #F5BA1BFF;
  --bx-yellow-70: #FCCD35FF;
  --bx-yellow-75: #FFDD57FF;
  --bx-yellow-80: #FFE882FF;
  --bx-yellow-90: #FFF3ADFF;
  --bx-yellow-95: #FFF8CEFF;
  --cool-neutral-15: #21212CFF;
  --cool-neutral-17: #252532FF;
  --cool-neutral-20: #2B2B3BFF;
  --cool-neutral-23: #323243FF;
  --cool-neutral-25: #363649FF;
  --cool-neutral-30: #434356FF;
  --cool-neutral-35: #4F4F64FF;
  --cool-neutral-40: #5A5A72FF;
  --cool-neutral-50: #73738CFF;
  --cool-neutral-55: #818198FF;
  --cool-neutral-60: #8F8FA3FF;
  --cool-neutral-65: #9D9DAFFF;
  --cool-neutral-70: #ABABBAFF;
  --cool-neutral-75: #B9B9C6FF;
  --cool-neutral-80: #C7C7D1FF;
  --cool-neutral-85: #D3D3DEFF;
  --cool-neutral-90: #E2E2E9FF;
  --cool-neutral-93: #EAEAF0FF;
  --cool-neutral-95: #F0F0F4FF;
  --cool-neutral-97: #F6F6F8FF;
  --cool-neutral-99: #FCFCFDFF;
  --cyan-10: #024D5AFF;
  --cyan-20: #036B7DFF;
  --cyan-30: #0992AAFF;
  --cyan-40: #1CC6E3FF;
  --cyan-5: #01333CFF;
  --cyan-50: #37DEFBFF;
  --cyan-60: #69E7FCFF;
  --cyan-70: #9BEFFDFF;
  --cyan-80: #B4F3FDFF;
  --cyan-90: #CDF7FEFF;
  --cyan-95: #E6FBFEFF;
  --green-opacity-40: #DDEBCA66;
  --green-opacity-60: #DDEBCA99;
  --green-10: #034923FF;
  --green-20: #04622EFF;
  --green-30: #06793AFF;
  --green-40: #14B85EFF;
  --green-5: #02361AFF;
  --green-50: #26D977FF;
  --green-60: #47EB91FF;
  --green-70: #75F0ACFF;
  --green-80: #9DFBC7FF;
  --green-90: #CEFDE3FF;
  --green-95: #E7FEF1FF;
  --light-blue-10: #004F70FF;
  --light-blue-20: #0B678EFF;
  --light-blue-30: #008FCCFF;
  --light-blue-40: #25B6F4FF;
  --light-blue-5: #00364DFF;
  --light-blue-50: #4DC9FFFF;
  --light-blue-60: #80D9FFFF;
  --light-blue-70: #99E0FFFF;
  --light-blue-80: #B2E8FFFF;
  --light-blue-90: #CCF0FFFF;
  --light-blue-95: #E5F7FFFF;
  --orange-10: #6D2603FF;
  --orange-20: #9F3804FF;
  --orange-30: #D14905FF;
  --orange-40: #ED570CFF;
  --orange-5: #3C1501FF;
  --orange-50: #F9681FFF;
  --orange-60: #FA8042FF;
  --orange-70: #FCA174FF;
  --orange-80: #FDC3A5FF;
  --orange-90: #FEE4D7FF;
  --orange-95: #FEEEE6FF;
  --pink-10: #610520FF;
  --pink-20: #920731FF;
  --pink-30: #B91345FF;
  --pink-40: #E51957FF;
  --pink-5: #490318FF;
  --pink-50: #F53D74FF;
  --pink-60: #F76E97FF;
  --pink-70: #FA9EB9FF;
  --pink-80: #FCB6CBFF;
  --pink-90: #FDCEDCFF;
  --pink-95: #FEE7EEFF;
  --purple-10: #341971FF;
  --purple-20: #49239FFF;
  --purple-30: #6439C6FF;
  --purple-40: #7D52E0FF;
  --purple-5: #18024AFF;
  --purple-50: #966BFAFF;
  --purple-60: #A883FBFF;
  --purple-70: #B99CFCFF;
  --purple-80: #CBB5FDFF;
  --purple-90: #DCCEFDFF;
  --purple-95: #EEE6FEFF;
  --red-10: #620404FF;
  --red-20: #940505FF;
  --red-30: #C50707FF;
  --red-40: #F83A3AFF;
  --red-5: #310202FF;
  --red-50: #F95353FF;
  --red-60: #FA6B6BFF;
  --red-70: #FB9D9DFF;
  --red-80: #FCB5B5FF;
  --red-90: #FDCECEFF;
  --red-95: #FEE6E6FF;
  --teal-10: #015043FF;
  --teal-20: #026454FF;
  --teal-30: #027E69FF;
  --teal-40: #16B69BFF;
  --teal-5: #013C32FF;
  --teal-50: #17CFB0FF;
  --teal-60: #47EBCFFF;
  --teal-70: #71F4DEFF;
  --teal-80: #9DFBEBFF;
  --teal-90: #CEFDF5FF;
  --teal-95: #E7FEFAFF;
  --white: #FFFFFFFF;
  --yellow-10: #663600FF;
  --yellow-20: #995200FF;
  --yellow-30: #CC6D00FF;
  --yellow-40: #F49A25FF;
  --yellow-5: #4D2B00FF;
  --yellow-50: #FFB92EFF;
  --yellow-60: #FFCA61FF;
  --yellow-70: #FFDB94FF;
  --yellow-80: #FFE6B2FF;
  --yellow-90: #FFEECCFF;
  --yellow-95: #FFF7E5FF;

  /* Responsive grid & spacing variables - 기본값은 mobile */
  --grid-breakpoint: var(--mobile-grid-breakpoint);
  --grid-column: var(--mobile-grid-column);
  --grid-gutter: var(--mobile-grid-gutter);
  --grid-layout: var(--mobile-grid-layout);
  --grid-margin: var(--mobile-grid-margin);
  --unit--16: var(--mobile-unit--16);
  --unit--24: var(--mobile-unit--24);
  --unit--32: var(--mobile-unit--32);
  --unit--40: var(--mobile-unit--40);
  --unit--48: var(--mobile-unit--48);
  --unit--56: var(--mobile-unit--56);
  --unit--64: var(--mobile-unit--64);
  --unit--8: var(--mobile-unit--8);
  --unit-10: var(--mobile-unit-10);
  --unit-12: var(--mobile-unit-12);
  --unit-14: var(--mobile-unit-14);
  --unit-16: var(--mobile-unit-16);
  --unit-2: var(--mobile-unit-2);
  --unit-20: var(--mobile-unit-20);
  --unit-24: var(--mobile-unit-24);
  --unit-28: var(--mobile-unit-28);
  --unit-32: var(--mobile-unit-32);
  --unit-36: var(--mobile-unit-36);
  --unit-4: var(--mobile-unit-4);
  --unit-40: var(--mobile-unit-40);
  --unit-48: var(--mobile-unit-48);
  --unit-52: var(--mobile-unit-52);
  --unit-56: var(--mobile-unit-56);
  --unit-6: var(--mobile-unit-6);
  --unit-60: var(--mobile-unit-60);
  --unit-64: var(--mobile-unit-64);
  --unit-8: var(--mobile-unit-8);
  --unit-80: var(--mobile-unit-80);
  --unit-96: var(--mobile-unit-96);

  /* grid & spacing - mobile */
  --mobile-grid-breakpoint: 375px;
  --mobile-grid-column: 4px;
  --mobile-grid-gutter: 16px;
  --mobile-grid-layout: 2px;
  --mobile-grid-margin: 16px;
  --mobile-unit--16: -16px;
  --mobile-unit--24: -24px;
  --mobile-unit--32: -32px;
  --mobile-unit--40: -40px;
  --mobile-unit--48: -48px;
  --mobile-unit--56: -56px;
  --mobile-unit--64: -64px;
  --mobile-unit--8: -8px;
  --mobile-unit-10: 10px;
  --mobile-unit-12: 12px;
  --mobile-unit-14: 14px;
  --mobile-unit-16: 16px;
  --mobile-unit-2: 2px;
  --mobile-unit-20: 20px;
  --mobile-unit-24: 24px;
  --mobile-unit-28: 28px;
  --mobile-unit-32: 32px;
  --mobile-unit-36: 36px;
  --mobile-unit-4: 4px;
  --mobile-unit-40: 40px;
  --mobile-unit-48: 48px;
  --mobile-unit-52: 52px;
  --mobile-unit-56: 56px;
  --mobile-unit-6: 6px;
  --mobile-unit-60: 60px;
  --mobile-unit-64: 64px;
  --mobile-unit-8: 8px;
  --mobile-unit-80: 80px;
  --mobile-unit-96: 96px;


  /* grid & spacing - tablet-vertical */
  --tablet-v-grid-breakpoint: 768px;
  --tablet-v-grid-column: 6px;
  --tablet-v-grid-gutter: 16px;
  --tablet-v-grid-layout: 3px;
  --tablet-v-grid-margin: 32px;
  --tablet-v-unit--16: -16px;
  --tablet-v-unit--24: -24px;
  --tablet-v-unit--32: -32px;
  --tablet-v-unit--40: -40px;
  --tablet-v-unit--48: -48px;
  --tablet-v-unit--56: -56px;
  --tablet-v-unit--64: -64px;
  --tablet-v-unit--8: -8px;
  --tablet-v-unit-10: 10px;
  --tablet-v-unit-12: 12px;
  --tablet-v-unit-14: 14px;
  --tablet-v-unit-16: 16px;
  --tablet-v-unit-2: 2px;
  --tablet-v-unit-20: 20px;
  --tablet-v-unit-24: 24px;
  --tablet-v-unit-28: 28px;
  --tablet-v-unit-32: 32px;
  --tablet-v-unit-36: 36px;
  --tablet-v-unit-4: 4px;
  --tablet-v-unit-40: 40px;
  --tablet-v-unit-48: 48px;
  --tablet-v-unit-52: 52px;
  --tablet-v-unit-56: 56px;
  --tablet-v-unit-6: 6px;
  --tablet-v-unit-60: 60px;
  --tablet-v-unit-64: 64px;
  --tablet-v-unit-8: 8px;
  --tablet-v-unit-80: 80px;
  --tablet-v-unit-96: 96px;

  /* grid & spacing - tablet-horizental */
  --tablet-h-grid-breakpoint: 1024px;
  --tablet-h-grid-column: 8px;
  --tablet-h-grid-gutter: 24px;
  --tablet-h-grid-layout: 4px;
  --tablet-h-grid-margin: 64px;
  --tablet-h-unit--16: -16px;
  --tablet-h-unit--24: -24px;
  --tablet-h-unit--32: -32px;
  --tablet-h-unit--40: -40px;
  --tablet-h-unit--48: -48px;
  --tablet-h-unit--56: -56px;
  --tablet-h-unit--64: -64px;
  --tablet-h-unit--8: -8px;
  --tablet-h-unit-10: 10px;
  --tablet-h-unit-12: 12px;
  --tablet-h-unit-14: 14px;
  --tablet-h-unit-16: 16px;
  --tablet-h-unit-2: 2px;
  --tablet-h-unit-20: 20px;
  --tablet-h-unit-24: 24px;
  --tablet-h-unit-28: 28px;
  --tablet-h-unit-32: 32px;
  --tablet-h-unit-36: 36px;
  --tablet-h-unit-4: 4px;
  --tablet-h-unit-40: 40px;
  --tablet-h-unit-48: 48px;
  --tablet-h-unit-52: 52px;
  --tablet-h-unit-56: 56px;
  --tablet-h-unit-6: 6px;
  --tablet-h-unit-60: 60px;
  --tablet-h-unit-64: 64px;
  --tablet-h-unit-8: 8px;
  --tablet-h-unit-80: 80px;
  --tablet-h-unit-96: 96px;

  /* grid & spacing - web */
  --web-grid-breakpoint: 1440px;
  --web-grid-column: 12px;
  --web-grid-gutter: 24px;
  --web-grid-layout: 4px;
  --web-grid-margin: 120px;
  --web-unit--16: 0px;
  --web-unit--24: 0px;
  --web-unit--32: 0px;
  --web-unit--40: 0px;
  --web-unit--48: 0px;
  --web-unit--56: 0px;
  --web-unit--64: 0px;
  --web-unit--8: 0px;
  --web-unit-10: 10px;
  --web-unit-12: 12px;
  --web-unit-14: 14px;
  --web-unit-16: 16px;
  --web-unit-2: 2px;
  --web-unit-20: 20px;
  --web-unit-24: 24px;
  --web-unit-28: 28px;
  --web-unit-32: 32px;
  --web-unit-36: 36px;
  --web-unit-4: 4px;
  --web-unit-40: 40px;
  --web-unit-48: 48px;
  --web-unit-52: 52px;
  --web-unit-56: 56px;
  --web-unit-6: 6px;
  --web-unit-60: 60px;
  --web-unit-64: 64px;
  --web-unit-8: 8px;
  --web-unit-80: 80px;
  --web-unit-96: 96px;

  /* Button Component Tokens */
  /* Button Style Variants */
  --button-solid-bg: var(--bx-green-60);
  --button-solid-color: var(--cool-neutral-99);
  --button-line-bg: var(--green-opacity-40);
  --button-line-bg-sm: var(--green-opacity-60);
  --button-line-border: var(--bx-green-60);
  --button-line-color: var(--bx-green-60);
  --button-opacity-bg: var(--opacity-12);
  --button-opacity-color: var(--bx-green-60);
  --button-opacity-hover-bg: var(--bx-green-55);
  --button-opacity-action-bg: var(--green-opacity-60);
  --button-opacity-action-color: var(--bx-green-50);

  /* Button Type Variants */
  --button-primary-bg: var(--bx-green-60);
  --button-primary-color: var(--cool-neutral-99);
  --button-secondary-bg: var(--green-opacity-40);
  --button-secondary-border: var(--bx-green-60);
  --button-secondary-color: var(--bx-green-60);

  /* Button Size Variants */
  --button-sm-padding-x: var(--unit-10);
  --button-sm-padding-y: var(--unit-8);
  --button-sm-font-size: 12px;
  --button-sm-line-height: 16px;
  --button-sm-border-radius: 8px;
  --button-sm-gap: var(--unit-2);

  --button-md-padding-x: var(--unit-24);
  --button-md-padding-y: var(--unit-12);
  --button-md-font-size: 14px;
  --button-md-line-height: 18px;
  --button-md-border-radius: 10px;
  --button-md-gap: var(--unit-2);

  --button-lg-padding-x: var(--unit-28);
  --button-lg-padding-y: var(--unit-16);
  --button-lg-font-size: 16px;
  --button-lg-line-height: 18px;
  --button-lg-border-radius: 14px;
  --button-lg-gap: var(--unit-2);

  /* Button States */
  --button-hover-opacity: 0.9;
  --button-active-opacity: 0.8;
  --button-disabled-opacity: 0.5;
  --button-solid-primary-hover-bg: var(--bx-green-55);
  --button-solid-primary-hover-color: var(--cool-neutral-95);
  --button-solid-primary-action-bg: var(--bx-green-50);
  --button-solid-primary-action-color: var(--cool-neutral-85);

  --assistive-bg-default: rgba(32,32,44,0.05);
  --assistive-bg-hover: rgba(32,32,44,0.08);
  --assistive-bg-action: rgba(32,32,44,0.12);
  --assistive-text-default: rgba(32,32,44,0.56);
  --assistive-text-hover: rgba(32,32,44,0.64);
  --assistive-text-action: rgba(32,32,44,0.72);
  --assistive-text-action-strong: #434356;
  --assistive-border-default: rgba(32,32,44,0.22);
  --assistive-border-hover: rgba(32,32,44,0.16);
  --assistive-border-action: rgba(32,32,44,0.24);

  /* Icon Button Tokens */
  --icon-btn-radius: 96px;
  --icon-btn-gap: 8px;
  --icon-btn-icon-size: 14px;
  --icon-btn-wrapper-size: 20px;
  --icon-btn-md-padding: 6px;
  --icon-btn-lg-padding: 10px;
  /* opacity/assistive */
  --icon-btn-opacity-assistive-bg: transparent;
  --icon-btn-opacity-assistive-hover-bg: rgba(32,32,44,0.08);
  --icon-btn-opacity-assistive-action-bg: rgba(32,32,44,0.12);
  --icon-btn-opacity-assistive-icon: #818198;
  --icon-btn-opacity-assistive-hover-icon: #5A5A72;
  --icon-btn-opacity-assistive-action-icon: #434356;
  /* solid/primary */
  --icon-btn-solid-primary-bg: var(--bx-green-65);
  --icon-btn-solid-primary-icon: var(--cool-neutral-99);
  --icon-btn-solid-primary-hover-bg: var(--bx-green-60);
  --icon-btn-solid-primary-hover-icon: var(--cool-neutral-90);
  --icon-btn-solid-primary-action-bg: var(--bx-green-55);
  --icon-btn-solid-primary-action-icon: var(--cool-neutral-80);
  /* line/assistive */
  --icon-btn-line-assistive-bg: rgba(32,32,44,0.05);
  --icon-btn-line-assistive-hover-bg: rgba(32,32,44,0.08);
  --icon-btn-line-assistive-action-bg: rgba(32,32,44,0.12);
  --icon-btn-line-assistive-border: rgba(32,32,44,0.08);
  --icon-btn-line-assistive-icon: #818198;
  --icon-btn-line-assistive-hover-icon: #5A5A72;
  --icon-btn-line-assistive-action-icon: #434356;

  /* Link Button Tokens */
  --link-btn-padding-y: 8px;
  --link-btn-padding-x: 0;
  --link-btn-gap: 8px;
  --link-btn-font-size: 16px;
  --link-btn-font-weight: 500;
  --link-btn-line-height: 18px;
  --link-btn-font-family: 'Pretendard', 'SUIT Variable', sans-serif;
  --link-btn-text-decoration: underline;
  /* assistive */
  --link-btn-assistive-default: rgba(32,32,44,0.56);
  --link-btn-assistive-hover: rgba(32,32,44,0.48);
  --link-btn-assistive-active: rgba(32,32,44,0.72);
  /* primary */
  --link-btn-primary-default: #3781FB;
  --link-btn-primary-hover: #5592F6;
  --link-btn-primary-active: #175DCF;

  /* Social Button Tokens */
  --social-btn-md-size: 48px;
  --social-btn-lg-size: 64px;
  --social-btn-radius: 50px;
  --social-btn-radius-full: 9999px;
  /* Instagram */
  --social-btn-instagram-bg: linear-gradient(315deg, #FBE18A 0%, #FCBB45 21%, #F75274 38%, #D53692 52%, #8F39CE 74%, #5B4FE9 100%);
  --social-btn-instagram-icon-md-size: 24px;
  --social-btn-instagram-icon-lg-size: 32px;
  --social-btn-instagram-icon-color: #fff;
  /* Apple */
  --social-btn-apple-bg: #283544;
  --social-btn-apple-icon-md-width: 24px;
  --social-btn-apple-icon-md-height: 27.43px;
  --social-btn-apple-icon-lg-width: 32px;
  --social-btn-apple-icon-lg-height: 36.57px;
  --social-btn-apple-icon-color: #fff;
  /* Spotify */
  --social-btn-spotify-bg: #1ED760;
  --social-btn-spotify-icon-md-width: 32.57px;
  --social-btn-spotify-icon-md-height: 20.57px;
  --social-btn-spotify-icon-lg-width: 43.43px;
  --social-btn-spotify-icon-lg-height: 27.43px;
  --social-btn-spotify-icon-color: #fff;

  /* Profile Image Tokens */
  --profile-xs: 16px;
  --profile-sm: 24px;
  --profile-md: 32px;
  --profile-lg: 40px;
  --profile-xl: 48px;
  --profile-2xl: 56px;
  --profile-3xl: 64px;
  --profile-4xl: 80px;
  --profile-5xl: 96px;
  --profile-radius: 999px;

  /* Tabbar Tokens */
  --tabbar-font-family: 'Pretendard', 'SUIT Variable', sans-serif;
  --tabbar-font-size: 14px;
  --tabbar-font-weight: 500;
  --tabbar-line-height: 18px;
  --tabbar-gap: 14px;
  --tabbar-indicator-height: 4px;
  --tabbar-indicator-radius: 2px;
  --tabbar-default-color: #818198;
  --tabbar-default-indicator: #E2E2E9;
  --tabbar-selected-color: #567829;
  --tabbar-selected-indicator: #567829;

  /* Font Family */
  --font-noto: 'Noto Sans KR', sans-serif;
  --font-bodoni: 'Bodoni 72', serif;
  /* Display */
  --font-display-56-noto: 56px;
  --font-display-56-noto-line: 72px;
  --font-display-44-noto: 44px;
  --font-display-44-noto-line: 64px;
  --font-display-56-bodoni: 56px;
  --font-display-56-bodoni-line: 72px;
  --font-display-44-bodoni: 44px;
  --font-display-44-bodoni-line: 64px;
  /* Title */
  --font-title-40-noto: 40px;
  --font-title-40-noto-line: 56px;
  --font-title-36-noto: 36px;
  --font-title-36-noto-line: 48px;
  --font-title-28-noto: 28px;
  --font-title-28-noto-line: 38px;
  --font-title-40-bodoni: 40px;
  --font-title-40-bodoni-line: 56px;
  --font-title-36-bodoni: 36px;
  --font-title-36-bodoni-line: 48px;
  --font-title-28-bodoni: 28px;
  --font-title-28-bodoni-line: 38px;
  /* Headline */
  --font-headline-26-noto: 26px;
  --font-headline-26-noto-line: 34px;
  --font-headline-24-noto: 24px;
  --font-headline-24-noto-line: 32px;
  --font-headline-22-noto: 22px;
  --font-headline-22-noto-line: 26px;
  --font-headline-18-noto: 18px;
  --font-headline-18-noto-line: 26px;
  --font-headline-26-bodoni: 26px;
  --font-headline-26-bodoni-line: 34px;
  --font-headline-24-bodoni: 24px;
  --font-headline-24-bodoni-line: 32px;
  --font-headline-22-bodoni: 22px;
  --font-headline-22-bodoni-line: 26px;
  --font-headline-18-bodoni: 18px;
  --font-headline-18-bodoni-line: 26px;
  /* Body */
  --font-body-16-reading-noto: 16px;
  --font-body-16-reading-noto-line: 26px;
  --font-body-16-normal-noto: 16px;
  --font-body-16-normal-noto-line: 24px;
  --font-body-15-reading-noto: 15px;
  --font-body-15-reading-noto-line: 24px;
  --font-body-15-normal-noto: 15px;
  --font-body-15-normal-noto-line: 22px;
  --font-body-14-reading-noto: 14px;
  --font-body-14-reading-noto-line: 22px;
  --font-body-14-normal-noto: 14px;
  --font-body-14-normal-noto-line: 20px;
  /* Caption */
  --font-caption-14-noto: 14px;
  --font-caption-14-noto-line: 16px;
  --font-caption-12-noto: 12px;
  --font-caption-12-noto-line: 14px;
  --font-caption-11-noto: 11px;
  --font-caption-11-noto-line: 14px;
  /* Label */
  --font-label-16-noto: 16px;
  --font-label-16-noto-line: 18px;
  --font-label-14-noto: 14px;
  --font-label-14-noto-line: 18px;
  --font-label-12-noto: 12px;
  --font-label-12-noto-line: 16px;
}

/* Tablet Vertical (768px 이상) */
@media (min-width: 768px) {
:root {
  --grid-breakpoint: var(--tablet-v-grid-breakpoint);
  --grid-column: var(--tablet-v-grid-column);
  --grid-gutter: var(--tablet-v-grid-gutter);
  --grid-layout: var(--tablet-v-grid-layout);
  --grid-margin: var(--tablet-v-grid-margin);
  --unit--16: var(--tablet-v-unit--16);
  --unit--24: var(--tablet-v-unit--24);
  --unit--32: var(--tablet-v-unit--32);
  --unit--40: var(--tablet-v-unit--40);
  --unit--48: var(--tablet-v-unit--48);
  --unit--56: var(--tablet-v-unit--56);
  --unit--64: var(--tablet-v-unit--64);
  --unit--8: var(--tablet-v-unit--8);
  --unit-10: var(--tablet-v-unit-10);
  --unit-12: var(--tablet-v-unit-12);
  --unit-14: var(--tablet-v-unit-14);
  --unit-16: var(--tablet-v-unit-16);
  --unit-2: var(--tablet-v-unit-2);
  --unit-20: var(--tablet-v-unit-20);
  --unit-24: var(--tablet-v-unit-24);
  --unit-28: var(--tablet-v-unit-28);
  --unit-32: var(--tablet-v-unit-32);
  --unit-36: var(--tablet-v-unit-36);
  --unit-4: var(--tablet-v-unit-4);
  --unit-40: var(--tablet-v-unit-40);
  --unit-48: var(--tablet-v-unit-48);
  --unit-52: var(--tablet-v-unit-52);
  --unit-56: var(--tablet-v-unit-56);
  --unit-6: var(--tablet-v-unit-6);
  --unit-60: var(--tablet-v-unit-60);
  --unit-64: var(--tablet-v-unit-64);
  --unit-8: var(--tablet-v-unit-8);
  --unit-80: var(--tablet-v-unit-80);
  --unit-96: var(--tablet-v-unit-96);
}
}