/* =========================================
   Utility CSS
   汎用クラス定義
   ========================================= */

/* ----------------------------------
   テキストカラー (Text Color)
   ---------------------------------- */
/* 基本色 */
.u-text-main { color: var(--color-text-main); }
.u-text-white { color: #ffffff; }
.u-text-black { color: #000000; }

/* ブランドカラー */
.u-text-pink { color: var(--color-main); }     /* #f48fb1 or #F5AAA7 */
.u-text-green { color: var(--color-accent); }  /* #00a968 */
.u-text-brown { color: #594739; }              /* 濃い茶色（見出し用） */

/* 強調色 */
.u-text-red { color: #e60012; }                /* 赤 */
.u-text-orange { color: #e64a3d; }             /* 朱色（価格など） */
.u-text-blue-gray { color: #5c6b8c; }          /* 青グレー */

/* ----------------------------------
   背景色 (Background Color)
   ---------------------------------- */
.u-bg-white { background-color: #ffffff; }
.u-bg-pink { background-color: #F5AAA7; }      /* 見出し帯のピンク */
.u-bg-base { background-color: var(--color-bg-base); } /* 薄いベージュ */
.u-bg-brown { background-color: #6d4c41; }     /* 濃い茶色 */
.u-bg-beige { background-color: #F6E9E1; }     /* 小見出しの薄茶 */
.u-bg-pale-pink { background-color: #FFF9F9; } /* 極薄いピンク */

/* ----------------------------------
   フォントサイズ (Font Size)
   ---------------------------------- */
.u-fz-xs { font-size: 10px; }
.u-fz-sm { font-size: 12px; }
.u-fz-md { font-size: 14px; }
.u-fz-lg { font-size: 16px; }
.u-fz-xl { font-size: 18px; }
.u-fz-20 { font-size: 20px; }
.u-fz-24 { font-size: 24px; }
.u-fz-32 { font-size: 32px; }

/* ----------------------------------
   フォントウェイト (Font Weight)
   ---------------------------------- */
.u-fw-bold { font-weight: 700; }
.u-fw-medium { font-weight: 500; }
.u-fw-normal { font-weight: 400; }

/* ----------------------------------
   テキスト配置 (Text Align)
   ---------------------------------- */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

/* ----------------------------------
   文字装飾 (Decoration)
   ---------------------------------- */
/* 下線（直線） */
.u-underline { text-decoration: underline; }

/* 赤い波線 */
.u-wavy-red {
    text-decoration: underline wavy #e60012;
    text-underline-offset: 4px;
}

/* ピンクの波線 */
.u-wavy-pink {
    text-decoration: underline wavy #F5AAA7;
    text-underline-offset: 4px;
}

/* 蛍光ペン風マーカー（黄色） */
.u-marker-yellow {
    background: linear-gradient(transparent 60%, #ffffbc 60%);
    font-weight: 700;
}

/* 蛍光ペン風マーカー（オレンジ） */
.u-marker-orange {
    background: linear-gradient(transparent 60%, #ffdecb 60%);
    font-weight: 700;
}

/* 白抜き文字（茶色の縁取り） */
.u-text-outline {
    color: #ffffff;
    text-shadow: 
        1px 1px 0 #594739, -1px -1px 0 #594739, 
        -1px 1px 0 #594739, 1px -1px 0 #594739;
    font-weight: 700;
}

/* ----------------------------------
   余白 (Margin & Padding)
   ---------------------------------- */
/* Margin Top */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-5 { margin-top: 5px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-15 { margin-top: 15px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-30 { margin-top: 30px; }
.u-mt-40 { margin-top: 40px; }
.u-mt-50 { margin-top: 50px; }
.u-mt-auto { margin-top: auto; }

/* Margin Bottom */
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-5 { margin-bottom: 5px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-15 { margin-bottom: 15px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-30 { margin-bottom: 30px; }
.u-mb-40 { margin-bottom: 40px; }
.u-mb-50 { margin-bottom: 50px; }
.u-mb-60 { margin-bottom: 60px; }
.u-mb-auto { margin-bottom: auto; }

/* ----------------------------------
   ディスプレイ・レイアウト (Display & Flex)
   ---------------------------------- */
.u-d-block { display: block; }
.u-d-inline-block { display: inline-block; }
.u-d-flex { display: flex; }
.u-d-none { display: none; }

/* Flex Helper */
.u-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.u-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.u-flex-col {
    display: flex;
    flex-direction: column;
}
.u-gap-10 { gap: 10px; }
.u-gap-20 { gap: 20px; }

/* ----------------------------------
   レスポンシブ表示切り替え (PC/SP)
   ---------------------------------- */
/* PCのみ表示（スマホで消す） */
.u-pc-only { display: none; }

/* スマホのみ表示（PCで消す） */
.u-sp-only { display: block; }

@media screen and (min-width: 768px) {
    .u-pc-only { display: block; }
    .u-sp-only { display: none; }
}

/* ----------------------------------
   その他 (Others)
   ---------------------------------- */
/* 画像の中央寄せ */
.u-img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 角丸 */
.u-rounded { border-radius: 10px; }
.u-rounded-full { border-radius: 9999px; }