/* =========== SodaSlim — components.css (pure CSS) =========== */
.trust-strip{background:var(--c-white);border-bottom:1px solid var(--c-line);padding:20px 0}
.trust-row{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.trust-row img{height:34px;width:auto;opacity:.85}

.card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);padding:26px 22px;box-shadow:var(--shadow-sm);transition:transform .22s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card .ico{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--c-cream-100);font-size:1.3rem;margin-bottom:14px}
.card h3{margin-bottom:.4rem}.card p{margin-bottom:0;font-size:.94rem}

.step{position:relative;padding-left:58px;margin-bottom:28px}
.step .num{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--c-orange-500),var(--c-orange-600));color:#fff;font-weight:800;font-family:var(--ff-head);display:flex;align-items:center;justify-content:center;font-size:1rem}
.step h3{margin-bottom:.3rem}.step p{margin-bottom:0}
.step-line{position:absolute;left:19px;top:40px;bottom:-28px;width:2px;background:var(--c-line)}

.offer{background:var(--c-white);border-radius:var(--r-lg);border:1px solid var(--c-line);box-shadow:var(--shadow-md);padding:28px;text-align:center;position:relative}
.offer.best{border:2px solid var(--c-orange-500)}
.offer-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--c-orange-500),var(--c-orange-600));color:#fff;font-weight:800;font-size:.72rem;padding:7px 18px;border-radius:var(--r-pill);box-shadow:var(--shadow-glow);white-space:nowrap}
.offer img{max-height:170px;margin:8px auto 14px}
.offer-price{font-family:var(--ff-head);font-size:2.1rem;color:var(--c-navy-900);font-weight:800}
.offer-price small{font-size:.95rem;color:var(--c-ink-soft);font-weight:400}
.offer-old{text-decoration:line-through;color:#a9a49c;font-size:.88rem}
.offer ul{list-style:none;padding:0;margin:12px 0;text-align:left}
.offer li{padding:5px 0 5px 24px;position:relative;font-size:.9rem}
.offer li::before{content:"✓";position:absolute;left:0;color:var(--c-ok);font-weight:800}
.guarantee{display:flex;align-items:center;gap:22px;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);padding:22px;box-shadow:var(--shadow-sm)}
.guarantee img{width:72px;flex-shrink:0}
@media(max-width:767px){.guarantee{flex-direction:column;text-align:center}}

.review{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);padding:22px;box-shadow:var(--shadow-sm)}
.review-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.review-top img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.review-name{font-weight:800;color:var(--c-navy-900);font-family:var(--ff-head)}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;color:var(--c-ok);background:#e4f8ec;padding:4px 10px;border-radius:var(--r-pill);margin-top:8px}
.stars{color:var(--c-orange-500);letter-spacing:2px}

.ing{display:flex;gap:14px;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-sm)}
.ing-badge{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--c-navy-800),var(--c-navy-700));color:var(--c-orange-400);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--ff-head);font-size:.9rem}
.ing h3{font-size:1rem;margin-bottom:3px}.ing p{font-size:.9rem;margin-bottom:0}

.cta-band{background:linear-gradient(135deg,var(--c-navy-800),var(--c-navy-700));border-radius:var(--r-lg);padding:52px 38px;text-align:center;color:#fff;box-shadow:var(--shadow-md)}

.tbl-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--c-line)}
table.tbl{width:100%;border-collapse:collapse;background:var(--c-white);min-width:480px}
table.tbl th{background:var(--c-navy-900);color:#fff;padding:12px 16px;text-align:left;font-size:.82rem}
table.tbl td{padding:11px 16px;border-top:1px solid var(--c-line);font-size:.9rem;color:var(--c-ink-soft)}
table.tbl tr:nth-child(even) td{background:var(--c-cream-50)}

.author{display:flex;gap:16px;align-items:flex-start;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);padding:22px}
.author img{width:56px;height:56px;border-radius:50%;flex-shrink:0;object-fit:cover}
.author h4{margin:0 0 2px;font-weight:800;font-size:1rem}.author .role{font-size:.78rem;color:var(--c-orange-600);font-weight:700;margin-bottom:6px}.author p{font-size:.86rem;margin-bottom:0}
@media(max-width:767px){.author{flex-direction:column;align-items:center;text-align:center}}

.blog-card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.blog-card img{width:100%;height:170px;object-fit:cover}
.blog-card .body{padding:18px;display:flex;flex-direction:column;flex:1}
.blog-card .tag{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-orange-600);margin-bottom:6px}
.blog-card h3{font-size:.98rem;margin-bottom:6px}
.blog-card p{font-size:.86rem;flex:1}
.blog-card .date{font-size:.74rem;color:#999;margin-top:10px}

.faq-item{border:1px solid var(--c-line);border-radius:var(--r-sm);margin-bottom:10px;overflow:hidden;background:var(--c-white)}
.faq-q{width:100%;text-align:left;background:var(--c-white);border:0;padding:16px 18px;font-weight:700;color:var(--c-navy-900);display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;font-size:.96rem;font-family:var(--ff-body)}
.faq-q .plus{transition:transform .25s var(--ease);color:var(--c-orange-500);font-size:1.3rem;flex-shrink:0}
.faq-q[aria-expanded="true"] .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a-inner{padding:0 18px 16px}

.blog-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:32px}
.blog-filter span{background:var(--c-white);border:1px solid var(--c-line);color:var(--c-navy-800);font-weight:700;font-size:.78rem;padding:7px 14px;border-radius:var(--r-pill)}
.blog-filter span.active{background:var(--c-navy-900);color:#fff;border-color:var(--c-navy-900)}

.usage-item{display:flex;gap:18px;padding:18px 0;border-bottom:1px dashed var(--c-line)}.usage-item:last-child{border-bottom:0}
.usage-time{flex-shrink:0;width:88px;font-family:var(--ff-head);font-weight:700;color:var(--c-orange-600);font-size:1rem}
.usage-item h3{font-size:1rem;margin-bottom:3px}.usage-item p{margin-bottom:0}
@media(max-width:767px){.usage-item{flex-direction:column;gap:4px}.usage-time{width:auto}}