.breadcrumbs { padding-block: 22px; color: var(--muted); font-size: 12px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: 8px; color: #757575; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.detail-hero-section { background: var(--paper); border-block: 1px solid var(--line); }
.detail-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 90px; padding-block: 55px; }
.detail-hero h1 { font-size: clamp(39px, 4.3vw, 64px); margin: 20px 0 24px; max-width: 790px; }
.detail-hero h1 span { color: var(--text); }
.detail-lead { max-width: 640px; color: var(--muted); font-size: 18px; }
.detail-hero .app-store-badge { margin-left: 0; }
.detail-product { display: grid; justify-items: center; gap: 20px; margin: 0; padding: 28px; border: 1px solid #e2dba8; border-radius: 15px; background: #fffbea; }
.detail-product .phone-shot { width: 250px; max-width: 100%; }
.detail-product figcaption { color: #5f5f5f; font-size: 11px; text-align: center; }
.detail-section { padding-block: 70px; }
.detail-section h2 { font-size: clamp(30px, 3vw, 43px); margin: 15px 0 24px; }
.detail-section p { color: var(--muted); margin-top: 20px; max-width: 800px; }
.detail-overview { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 90px; }
.detail-records { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 30px; }
.detail-records h3 { font-size: 25px; }
.detail-records ul { margin: 24px 0 0; padding-left: 20px; color: #585858; }
.detail-records li { margin: 14px 0; padding-left: 4px; }
.detail-process { border-block: 1px solid var(--line); padding-block: 70px; }
.detail-process h2, .detail-related h2 { margin: 18px 0 35px; font-size: clamp(30px, 3vw, 43px); }
.detail-process ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; margin: 0; padding: 0; }
.detail-process h3 { font-size: 24px; margin: 20px 0 15px; }
.detail-process li > p { color: var(--muted); font-size: 14px; }
.detail-note { border-bottom: 1px solid var(--line); }
.detail-note .text-link { margin-top: 20px; }
.detail-faq { display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px; }
.detail-related { padding-block: 60px; margin-bottom: 55px; }
.detail-related .wrap > div { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.detail-related .wrap > div > a { display: block; padding: 28px; border: 1px solid #d2d2d2; border-radius: 12px; background: #fff; }
.detail-related .wrap > div > a:hover { border-color: var(--accent); }
.detail-related h3 { font-size: 24px; }
.detail-related p { color: var(--muted); font-size: 14px; margin-block: 18px; }
@media (max-width: 1024px) { .detail-hero, .detail-overview, .detail-faq { gap: 45px; } .detail-hero h1 { font-size: 45px; } .detail-lead { font-size: 16px; } }
@media (max-width: 800px) { .detail-hero, .detail-overview, .detail-faq { grid-template-columns: 1fr; gap: 32px; } .detail-product { width: min(100%, 490px); justify-self: center; } .detail-process ol { grid-template-columns: 1fr; gap: 30px; } .detail-process li > p { max-width: 700px; } .detail-process h3 { margin-top: 15px; } }
@media (max-width: 600px) { .breadcrumbs { padding-block: 18px; font-size: 11px; } .detail-hero { padding-block: 35px; } .detail-hero h1 { font-size: 39px; } .detail-lead { font-size: 15px; } .detail-hero .button { gap: 13px; padding-inline: 19px; } .detail-product { padding: 24px 20px; } .detail-product .phone-shot { width: 238px; } .detail-product figcaption { font-size: 10px; } .detail-section, .detail-process { padding-block: 48px; } .detail-records { padding: 25px; } .detail-records h3 { font-size: 23px; } .detail-records li, .detail-section p { font-size: 14px; } .detail-related .wrap > div { grid-template-columns: 1fr; } .detail-related .wrap > div > a { padding: 24px; } .detail-related { padding-block: 45px; margin-bottom: 35px; } }