/* --- 기본 스타일 설정 --- */
        body {
            font-family: 'Noto Sans JP', sans-serif;
            background-color: #F9FAFB; /* bg-gray-50 */
            color: #374151; /* text-gray-700 */
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        p {
            font-size: 1rem;
        }

        /* --- 레이아웃 --- */
        .container {
            max-width: 896px; /* max-w-4xl */
            margin: 0 auto;
            padding: 1rem;
        }

        .main-content {
            background-color: #ffffff; /* bg-white */
            padding: 1.5rem;
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
        }
        
        /* --- 공통 요소 --- */
        .section {
            margin-bottom: 2.5rem; /* mb-10 */
        }

        .section-title {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 700; /* font-bold */
            text-align: center; /* text-center */
            color: #1F2937; /* text-gray-800 */
            margin-bottom: 1.5rem; /* mb-6 */
        }

        /* --- 개별 섹션 스타일 --- */
        .header-banner {
            margin-bottom: 2rem; /* mb-8 */
        }
        .header-banner img {
            width: 100%;
            height: auto;
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
        }

        .intro-section {
            text-align: center;
        }
        .intro-section h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1F2937;
            margin-bottom: 1rem;
            margin-top: 1rem;
            text-align: center;

        }
        .intro-section p {
            max-width: 672px; /* max-w-2xl */
            margin: 0 auto;
            line-height: 1.625; /* leading-relaxed */
            color: #4B5563; /* text-gray-600 */
            text-align: center;
            font-size: 1rem;
        }

        .period-box {
            text-align: center;
        }
        .period-box-inner {
            display: inline-block;
            background-color: #FDF2F8; /* bg-pink-100 */
            border: 2px dashed #FBCFE8; /* border-2 border-dashed border-pink-300 */
            border-radius: 0.5rem;
            padding: 0.75rem 1.5rem;
        }
        .period-box h2 {
            font-weight: 700;
            font-size: 1.125rem; /* text-lg */
            color: #9D174D; /* text-pink-800 */
            margin: 15px 0px;
            text-align: center;
        }
        .period-box p {
            font-size: 1.25rem; /* text-xl */
            font-weight: 700;
            color: #D63384;
            margin-top: 0.25rem; /* mt-1 */
            margin-bottom: 20px;
        }

        .benefits-grid {
            display: grid;
            gap: 1.5rem; /* gap-6 */
        }
        .benefit-card {
            background-color: #FFF0F5; /* highlight-bg */
            border: 1px solid #FBCFE8; /* border border-pink-200 */
            border-radius: 0.5rem;
            padding: 1.5rem;
        }
        .benefit-card h3 {
            font-weight: 700;
            font-size: 1.125rem;
            color: #9D174D;
            margin-bottom: 0.75rem;
            margin-top: 18px;
        }
        .benefit-card .points {
            font-weight: 700;
            color: #D63384;
        }
        .benefit-card .points-big {
            font-size: 2.25rem; /* text-4xl */
        }
        .benefit-card .points-medium {
            font-size: 1.5rem; /* text-2xl */
        }
        .benefit-card .note {
            font-size: 0.875rem; /* text-sm */
            color: #6B7280; /* text-gray-500 */
            margin-top: 1rem;
            margin-bottom: 12px;
        }
        
        .how-to-box {
            background-color: #F3F4F6; /* bg-gray-100 */
            padding: 1.5rem;
            border-radius: 0.5rem;
        }
        .how-to-box .step {
            margin-bottom: 1.5rem;
        }
        .how-to-box .step:last-child {
            margin-bottom: 0;
        }
        .how-to-box h3 {
            font-weight: 700;
            font-size: 1.125rem;
            color: #374151;
            margin-bottom: 0.5rem;
            margin-top: 1rem;
        }
        .how-to-box p {
            color: #4B5563;
            margin-bottom: 1rem;
            margin-top: 1rem;
        }
        .cta-button {
            box-sizing: border-box;
            display: block;
            width: 100%;
            text-align: center;
            background-color: #EC4899; /* bg-pink-500 */
            color: white !important;
            font-weight: 700;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-size: 1rem;
            transition: background-color 0.3s;
        }
        .cta-button:hover {
            background-color: #DB2777; /* hover:bg-pink-600 */
        }

        .notice-box {
            background-color: #FEFCE8; /* bg-yellow-50 */
            border: 1px solid #FDE68A; /* border-yellow-300 */
            border-radius: 0.5rem;
            padding: 1.5rem;
            font-size: 0.875rem;
            color: #854D0E; /* text-yellow-800 */
        }
        .notice-box p {
            margin: 0;
            font-size: 0.9rem;
        }
        .notice-box p + p {
            margin-top: 0.75rem;
            font-size: 0.9rem;
        }
        .notice-box span {
            font-weight: 700;
        }

        .footer {
            text-align: center;
            margin-top: 2.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid #E5E7EB; /* border-t */
        }
        .footer p {
            color: #4B5563;
            text-align: center;
            margin: 1rem 0rem;
        }

        /* --- 반응형 디자인 --- */
        @media (min-width: 640px) {
            .container {
                padding: 2rem;
            }
            .main-content {
                padding: 2.5rem;
            }
            .intro-section h1, .section-title {
                font-size: 1.875rem; /* sm:text-3xl */
                text-align: center;
                margin-top: 1.3rem;
            }
        }
        
        @media (min-width: 768px) {
            .benefits-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
            }
        }