/*
 * Utility Classes (u- prefix)
 * ================================
 * 使用例: <p class="u-text-center u-text-primary">テキスト</p>
 */

/* ----------------------------------------
   Text Align
---------------------------------------- */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

/* ----------------------------------------
   Text Color
---------------------------------------- */
.u-text-white   { color: #ffffff; }
.u-text-black   { color: #000000; }
.u-text-gray    { color: #6b7280; }
.u-text-red     { color: #ef4444; }
.u-text-blue    { color: #3b82f6; }
.u-text-green   { color: #22c55e; }
.u-text-yellow  { color: #eab308; }
.u-text-orange  { color: #f97316; }
.u-text-primary { color: #2B5C9B; } /* テーマカラー */
.u-text-accent  { color: #FFCE46; } /* テーマアクセント */

/* ----------------------------------------
   Background Color
---------------------------------------- */
.u-bg-white   { background-color: #ffffff; }
.u-bg-black   { background-color: #000000; }
.u-bg-gray    { background-color: #6b7280; }
.u-bg-gray-light { background-color: #f3f4f6; }
.u-bg-red     { background-color: #ef4444; }
.u-bg-blue    { background-color: #3b82f6; }
.u-bg-green   { background-color: #22c55e; }
.u-bg-yellow  { background-color: #eab308; }
.u-bg-primary { background-color: #2B5C9B; } /* テーマカラー */
.u-bg-accent  { background-color: #FFCE46; } /* テーマアクセント */

/* ----------------------------------------
   Text Decoration
---------------------------------------- */
.u-underline      { text-decoration: underline; }
.u-overline       { text-decoration: overline; }
.u-line-through   { text-decoration: line-through; }
.u-no-underline   { text-decoration: none; }

.u-decoration-red    { text-decoration-color: #ef4444; }
.u-decoration-blue   { text-decoration-color: #3b82f6; }
.u-decoration-yellow { text-decoration-color: #eab308; }
.u-decoration-primary { text-decoration-color: #2B5C9B; } /* テーマカラー */
.u-decoration-accent  { text-decoration-color: #FFCE46; } /* テーマアクセント */
.u-decoration-2      { text-decoration-thickness: 2px; }
.u-decoration-4      { text-decoration-thickness: 4px; }
.u-underline-offset-2 { text-underline-offset: 2px; }
.u-underline-offset-4 { text-underline-offset: 4px; }

/* ----------------------------------------
   Font Size
---------------------------------------- */
.u-text-xs   { font-size: 0.75rem; }   /* 12px */
.u-text-sm   { font-size: 0.875rem; }  /* 14px */
.u-text-base { font-size: 1rem; }      /* 16px */
.u-text-lg   { font-size: 1.125rem; }  /* 18px */
.u-text-xl   { font-size: 1.25rem; }   /* 20px */
.u-text-2xl  { font-size: 1.5rem; }    /* 24px */
.u-text-3xl  { font-size: 1.875rem; }  /* 30px */
.u-text-4xl  { font-size: 2.25rem; }   /* 36px */

/* ----------------------------------------
   Font Weight
---------------------------------------- */
.u-font-light    { font-weight: 300; }
.u-font-normal   { font-weight: 400; }
.u-font-medium   { font-weight: 500; }
.u-font-semibold { font-weight: 600; }
.u-font-bold     { font-weight: 700; }

/* ----------------------------------------
   Margin (0 ~ 10, auto)
   1 = 0.25rem (4px)
---------------------------------------- */
.u-m-0  { margin: 0; }
.u-m-1  { margin: 0.25rem; }
.u-m-2  { margin: 0.5rem; }
.u-m-3  { margin: 0.75rem; }
.u-m-4  { margin: 1rem; }
.u-m-5  { margin: 1.25rem; }
.u-m-6  { margin: 1.5rem; }
.u-m-8  { margin: 2rem; }
.u-m-10 { margin: 2.5rem; }
.u-m-auto { margin: auto; }

.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-my-auto { margin-top: auto; margin-bottom: auto; }

.u-mt-0  { margin-top: 0; }
.u-mt-1  { margin-top: 0.25rem; }
.u-mt-2  { margin-top: 0.5rem; }
.u-mt-3  { margin-top: 0.75rem; }
.u-mt-4  { margin-top: 1rem; }
.u-mt-5  { margin-top: 1.25rem; }
.u-mt-6  { margin-top: 1.5rem; }
.u-mt-8  { margin-top: 2rem; }
.u-mt-10 { margin-top: 2.5rem; }

.u-mb-0  { margin-bottom: 0; }
.u-mb-1  { margin-bottom: 0.25rem; }
.u-mb-2  { margin-bottom: 0.5rem; }
.u-mb-3  { margin-bottom: 0.75rem; }
.u-mb-4  { margin-bottom: 1rem; }
.u-mb-5  { margin-bottom: 1.25rem; }
.u-mb-6  { margin-bottom: 1.5rem; }
.u-mb-8  { margin-bottom: 2rem; }
.u-mb-10 { margin-bottom: 2.5rem; }

.u-ml-0  { margin-left: 0; }
.u-ml-1  { margin-left: 0.25rem; }
.u-ml-2  { margin-left: 0.5rem; }
.u-ml-3  { margin-left: 0.75rem; }
.u-ml-4  { margin-left: 1rem; }
.u-ml-auto { margin-left: auto; }

.u-mr-0  { margin-right: 0; }
.u-mr-1  { margin-right: 0.25rem; }
.u-mr-2  { margin-right: 0.5rem; }
.u-mr-3  { margin-right: 0.75rem; }
.u-mr-4  { margin-right: 1rem; }
.u-mr-auto { margin-right: auto; }

/* ----------------------------------------
   Padding (0 ~ 10)
---------------------------------------- */
.u-p-0  { padding: 0; }
.u-p-1  { padding: 0.25rem; }
.u-p-2  { padding: 0.5rem; }
.u-p-3  { padding: 0.75rem; }
.u-p-4  { padding: 1rem; }
.u-p-5  { padding: 1.25rem; }
.u-p-6  { padding: 1.5rem; }
.u-p-8  { padding: 2rem; }
.u-p-10 { padding: 2.5rem; }

.u-px-0  { padding-left: 0; padding-right: 0; }
.u-px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
.u-px-4  { padding-left: 1rem; padding-right: 1rem; }
.u-px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.u-px-8  { padding-left: 2rem; padding-right: 2rem; }

.u-py-0  { padding-top: 0; padding-bottom: 0; }
.u-py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.u-py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.u-py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.u-py-8  { padding-top: 2rem; padding-bottom: 2rem; }

.u-pt-0  { padding-top: 0; }
.u-pt-2  { padding-top: 0.5rem; }
.u-pt-4  { padding-top: 1rem; }
.u-pt-6  { padding-top: 1.5rem; }
.u-pt-8  { padding-top: 2rem; }

.u-pb-0  { padding-bottom: 0; }
.u-pb-2  { padding-bottom: 0.5rem; }
.u-pb-4  { padding-bottom: 1rem; }
.u-pb-6  { padding-bottom: 1.5rem; }
.u-pb-8  { padding-bottom: 2rem; }

/* ----------------------------------------
   Flexbox
---------------------------------------- */
.u-flex        { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-flex-col    { flex-direction: column; }
.u-flex-row    { flex-direction: row; }
.u-flex-wrap   { flex-wrap: wrap; }
.u-flex-nowrap { flex-wrap: nowrap; }

.u-justify-start   { justify-content: flex-start; }
.u-justify-center  { justify-content: center; }
.u-justify-end     { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-justify-around  { justify-content: space-around; }

.u-items-start   { align-items: flex-start; }
.u-items-center  { align-items: center; }
.u-items-end     { align-items: flex-end; }
.u-items-stretch { align-items: stretch; }

.u-gap-1 { gap: 0.25rem; }
.u-gap-2 { gap: 0.5rem; }
.u-gap-3 { gap: 0.75rem; }
.u-gap-4 { gap: 1rem; }
.u-gap-5 { gap: 1.25rem; }
.u-gap-6 { gap: 1.5rem; }
.u-gap-8 { gap: 2rem; }

/* ----------------------------------------
   Width / Height
---------------------------------------- */
.u-w-full  { width: 100%; }
.u-w-auto  { width: auto; }
.u-w-1\/2  { width: 50%; }
.u-w-1\/3  { width: 33.333333%; }
.u-w-2\/3  { width: 66.666667%; }
.u-w-1\/4  { width: 25%; }
.u-w-3\/4  { width: 75%; }

.u-h-full  { height: 100%; }
.u-h-auto  { height: auto; }

.u-max-w-full { max-width: 100%; }
.u-max-w-screen-sm { max-width: 640px; }
.u-max-w-screen-md { max-width: 768px; }
.u-max-w-screen-lg { max-width: 1024px; }
.u-max-w-screen-xl { max-width: 1280px; }

/* ----------------------------------------
   Display
---------------------------------------- */
.u-block        { display: block; }
.u-inline-block { display: inline-block; }
.u-inline       { display: inline; }
.u-hidden       { display: none; }

/* ----------------------------------------
   Border
---------------------------------------- */
.u-border     { border: 1px solid #e5e7eb; }
.u-border-0   { border: none; }
.u-border-t   { border-top: 1px solid #e5e7eb; }
.u-border-b   { border-bottom: 1px solid #e5e7eb; }
.u-border-l   { border-left: 1px solid #e5e7eb; }
.u-border-r   { border-right: 1px solid #e5e7eb; }

.u-border-gray   { border-color: #e5e7eb; }
.u-border-red    { border-color: #ef4444; }
.u-border-blue   { border-color: #3b82f6; }
.u-border-yellow { border-color: #eab308; }
.u-border-primary { border-color: #2B5C9B; } /* テーマカラー */
.u-border-accent  { border-color: #FFCE46; } /* テーマアクセント */

.u-rounded      { border-radius: 0.25rem; }
.u-rounded-md   { border-radius: 0.375rem; }
.u-rounded-lg   { border-radius: 0.5rem; }
.u-rounded-xl   { border-radius: 0.75rem; }
.u-rounded-full { border-radius: 9999px; }

/* ----------------------------------------
   Misc
---------------------------------------- */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto   { overflow: auto; }

.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-fixed    { position: fixed; }

.u-cursor-pointer { cursor: pointer; }

.u-opacity-0   { opacity: 0; }
.u-opacity-50  { opacity: 0.5; }
.u-opacity-100 { opacity: 1; }

/* ----------------------------------------
   Hover Effects
---------------------------------------- */
.u-hover-dim:hover      { opacity: 0.7; }
.u-hover-bright:hover   { opacity: 1; filter: brightness(1.1); }
.u-hover-underline:hover { text-decoration: underline; }
.u-hover-no-underline:hover { text-decoration: none; }

/* Transition */
.u-transition { transition: all 0.2s ease; }