* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Roboto, sans-serif; background: #ffffff; color: #444; line-height: 1.7; padding: 40px 20px; } .container { max-width: 1200px; margin: 0 auto; } .page-header { text-align: center; margin-bottom: 40px; } .page-header h1 { font-size: 42px; color: #b89a46; margin-bottom: 15px; letter-spacing: 1px; font-weight: 500; } .page-header p { font-size: 16px; color: #666; max-width: 900px; margin: 0 auto; line-height: 1.8; } .divider { height: 1px; background: #e0d8c0; margin: 30px 0; } .brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 50px; } .brand-clarification { background: #f7f5f0; padding: 35px; border-radius: 16px; font-size: 15px; line-height: 1.8; height: 100%; transition: all 0.4s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } .brand-clarification:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); } .brand-clarification h2 { color: #b89a46; font-size: 18px; margin-bottom: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .brand-clarification p { margin-bottom: 15px; } .brand-clarification p:last-child { margin-bottom: 0; } .brand-gold { color: #b89a46; font-weight: 500; } /* ✅ UPDATED: Teal changed to brand color #006180 */ .brand-teal { color: #006180; font-weight: 500; } .brand-clarification a { color: #b89a46; text-decoration: none; font-weight: 500; transition: color 0.3s ease; } /* ✅ UPDATED: Link hover color to #006180 */ .brand-clarification a:hover { color: #006180; } .grade-section { background: #ffffff; border-radius: 16px; padding: 35px; margin-bottom: 40px; transition: all 0.4s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.02); } .grade-section:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0,0,0,0.1); } .grade-section h2 { color: #b89a46; font-size: 24px; margin-bottom: 20px; font-weight: 500; letter-spacing: 0.3px; } .grade-section .description { font-size: 15px; margin-bottom: 20px; color: #666; line-height: 1.8; } .unified-config { background: #f7f5f0; padding: 15px 20px; margin-bottom: 25px; font-size: 14px; color: #555; font-weight: 500; border-radius: 12px; line-height: 1.6; } .grade-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 20px; border-radius: 12px; overflow: hidden; } .grade-table th { background: #f1f1f1; color: #b89a46; padding: 15px 20px; text-align: left; font-size: 14px; font-weight: 500; border: none; } .grade-table td { padding: 15px 20px; font-size: 14px; border: none; vertical-align: top; line-height: 1.6; background: #f8f8f8; } .grade-table tbody tr:nth-child(even) td { background: #f4f4f4; } .grade-table td:first-child { font-weight: 500; color: #444; white-space: nowrap; } .usage-list { list-style: none; padding-left: 0; } .usage-list li { position: relative; padding-left: 18px; margin-bottom: 6px; text-align: left; color: #666; } .usage-list li::before { content: "・"; position: absolute; left: 0; top: 0; color: #999; } .auction-price { font-size: 16px; font-weight: 500; color: #b89a46; margin-top: 20px; display: block; letter-spacing: 0.5px; padding: 10px 15px; background: #f7f5f0; border-radius: 8px; } @media (max-width: 768px) { .brand-grid { grid-template-columns: 1fr; gap: 20px; } .page-header h1 { font-size: 32px; } .grade-table { font-size: 13px; } .grade-table th, .grade-table td { padding: 12px 15px; } .grade-section:hover { transform: translateY(-4px); box-shadow: 0 8px 15px rgba(0,0,0,0.08); } .brand-clarification:hover { transform: translateY(-4px); } } @media (max-width: 576px) { .grade-section { padding: 25px; } .brand-clarification { padding: 25px; } }