.cs-guide{--guide-fallback-bg:url('/assets/img/guide/fallback/default-guide-bg.webp')}
.cs-guide--serum{--guide-fallback-bg:url('/assets/img/guide/fallback/serum-guide-bg.webp')}
.cs-guide--toner{--guide-fallback-bg:url('/assets/img/guide/fallback/toner-guide-bg.webp')}
.cs-guide--cleanser{--guide-fallback-bg:url('/assets/img/guide/fallback/cleanser-guide-bg.webp')}
.cs-guide--moisturizer{--guide-fallback-bg:url('/assets/img/guide/fallback/moisturizer-guide-bg.webp')}
.cs-guide--sunscreen{--guide-fallback-bg:url('/assets/img/guide/fallback/sunscreen-guide-bg.webp')}
.cs-guide--mask{--guide-fallback-bg:url('/assets/img/guide/fallback/mask-guide-bg.webp')}
.cs-guide--spot{--guide-fallback-bg:url('/assets/img/guide/fallback/spot-guide-bg.webp')}

.cs-guide{padding:14px 0 4px}
.cs-guide__container{max-width:1320px;display:grid;grid-template-columns:268px minmax(0,1fr);gap:14px;align-items:start}
.cs-guide__sidebar{display:grid;gap:12px;align-self:start;align-content:start}
.cs-guide-card{position:relative;display:grid;gap:7px;min-height:132px;padding:18px 20px 16px;border-radius:20px;background:linear-gradient(180deg,#fffdfa 0%,#fbf5ec 100%);border:1px solid rgba(197,165,121,.16);box-shadow:0 8px 22px rgba(35,26,18,.035)}
.cs-guide-card__no{font-size:15px;line-height:1;font-weight:700;letter-spacing:.06em;color:#b28143}
.cs-guide-card h3{margin:0;font-family:var(--serif);font-size:23px;line-height:1.04;font-weight:400;color:#1b1712}
.cs-guide-card p{margin:0;max-width:166px;font-size:12.5px;line-height:1.45;color:#62594f}
.cs-guide-card__icon{position:absolute;right:18px;bottom:16px;width:34px;height:34px;object-fit:contain}

.cs-guide__main{display:grid;gap:12px}
.cs-guide-hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:14px;padding:20px 20px 14px;border-radius:24px;background:linear-gradient(180deg,#fffdfa 0%,#fbf5ec 100%);border:1px solid rgba(197,165,121,.16);box-shadow:0 10px 28px rgba(35,26,18,.035)}
.cs-guide__eyebrow{margin:0 0 7px;font-size:12.5px;line-height:1;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#b28143}
.cs-guide__title{margin:0 0 10px;font-family:var(--serif);font-size:clamp(35px,3.45vw,52px);line-height:.95;letter-spacing:-.04em;color:#13100d;max-width:640px}
.cs-guide__lead{margin:0 0 12px;max-width:610px;font-size:13px;line-height:1.55;color:#5f574f}
.cs-guide-note{max-width:540px;border:1px solid rgba(197,165,121,.16);border-radius:16px;background:rgba(255,250,243,.82)}
.cs-guide-note__head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:12px 14px 10px}
.cs-guide-note__icon{width:34px;height:34px;padding:7px;border-radius:999px;background:#f3e5d3;object-fit:contain}
.cs-guide-note h4{margin:0 0 5px;font-family:var(--serif);font-size:17px;line-height:1;font-weight:500;color:#1a1611}
.cs-guide-note p{margin:0;font-size:12.5px;line-height:1.45;color:#5f574f}
.cs-guide-note__foot{padding:7px 14px 8px;border-top:1px solid rgba(197,165,121,.16);font-size:12px;line-height:1.2;font-weight:600;color:#53473b}
.cs-guide-meta{display:grid;grid-template-columns:minmax(0,.92fr) 1px minmax(0,1.08fr);gap:13px;align-items:start;margin-top:10px;padding-top:11px;border-top:1px solid rgba(197,165,121,.14)}
.cs-guide-meta__divider{width:1px;height:100%;min-height:52px;background:rgba(197,165,121,.22)}
.cs-guide-meta__block h5,.cs-guide-panel h5{margin:0 0 8px;font-size:11.5px;line-height:1;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#b28143}
.cs-guide-chips{display:flex;flex-wrap:wrap;gap:6px}
.cs-guide-chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:999px;border:1px solid rgba(197,165,121,.18);background:#fff8ef;font-size:12.5px;line-height:1;font-weight:500;color:#383028}
.cs-guide-benefits{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.cs-guide-benefit{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:1;font-weight:500;color:#383028;white-space:nowrap}
.cs-guide-benefit img{width:23px;height:23px;object-fit:contain}

.cs-guide-hero__visual{position:relative;min-height:360px;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#fdf9f2 0%,#f8efe3 100%)}
.cs-guide-hero__bg{position:absolute;inset:0;background:var(--guide-fallback-bg) center center/cover no-repeat;opacity:.9}
.cs-guide-hero__bg::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 20%, rgba(255,255,255,.88), transparent 28%),radial-gradient(circle at 28% 78%, rgba(255,255,255,.58), transparent 18%)}
.cs-guide-hero__orb{display:none}
.cs-guide-hero__orb::before{display:none}
.cs-guide-hero__puddle{position:absolute;left:55.5%;transform:translateX(-50%);bottom:52px;width:226px;height:64px;border-radius:50%;background:radial-gradient(ellipse at center, rgba(117,215,233,.36) 0 44%, rgba(117,215,233,.19) 45% 62%, rgba(117,215,233,.07) 63% 78%, transparent 79%);z-index:1}
.cs-guide-hero__drop{position:absolute;border-radius:50%;background:radial-gradient(circle at 36% 32%, rgba(255,255,255,.96) 0 34%, rgba(197,225,229,.66) 50%, rgba(177,209,214,.22) 72%, rgba(177,209,214,0) 100%);box-shadow:0 6px 14px rgba(126,157,168,.12);z-index:2}
.cs-guide-hero__drop--a{left:32px;bottom:42px;width:18px;height:18px}
.cs-guide-hero__drop--b{left:186px;bottom:30px;width:12px;height:12px}
.cs-guide-hero__drop--c{right:18px;bottom:70px;width:14px;height:14px}
.cs-guide-hero__product{position:absolute;left:55.5%;transform:translateX(-50%);bottom:68px;width:min(58%,305px);height:auto;max-height:290px;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(67,96,118,.16));z-index:3}

.cs-guide-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-guide-panel{padding:14px 16px;border-radius:20px;background:linear-gradient(180deg,#fffdfa 0%,#fbf6ee 100%);border:1px solid rgba(197,165,121,.16);box-shadow:0 8px 22px rgba(35,26,18,.035)}
.cs-guide-panel__inner{display:grid;grid-template-columns:126px minmax(0,1fr);gap:13px;align-items:center}
.cs-guide-panel__art img{display:block;width:100%;max-width:112px;height:auto}
.cs-guide-list{margin:0;padding-left:17px}
.cs-guide-list li{margin:0 0 8px;color:#5f574f;font-size:12.5px;line-height:1.42}
.cs-guide-list li::marker{color:#b28143}
.cs-guide-list strong{display:block;font-size:13.2px;line-height:1.2;color:#1a1611}
.cs-guide-list span{display:block}

.cs-guide-routine{display:grid;grid-template-columns:auto 18px auto 18px auto 18px auto;gap:5px;align-items:center;justify-content:space-between;margin-bottom:12px}
.cs-guide-routine__step{display:grid;justify-items:center;gap:6px;text-align:center}
.cs-guide-routine__icon{display:grid;place-items:center;width:68px;height:68px;border-radius:999px;border:1px solid rgba(197,165,121,.16);background:#fffdf9}
.cs-guide-routine__step.is-current .cs-guide-routine__icon{background:#f6e8d6;border-color:rgba(197,165,121,.34)}
.cs-guide-routine__icon img{width:30px;height:30px;object-fit:contain}
.cs-guide-routine__step span{font-size:12.5px;line-height:1;font-weight:500;color:#3b332b}
.cs-guide-routine__step.is-current span{color:#13100d;font-weight:600}
.cs-guide-routine__arrow{font-size:23px;line-height:1;color:#a88759;transform:translateY(-6px)}
.cs-guide-usage{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:#fff4e5;border:1px solid rgba(197,165,121,.16);font-size:12.5px;line-height:1.35;color:#4d4339}
.cs-guide-usage img{width:21px;height:21px;object-fit:contain;flex:0 0 auto}
.cs-guide-usage strong{color:#1a1611}
.cs-guide-usage__sep{padding:0 6px;color:#a88759}

@media (max-width:1260px){.cs-guide__container{grid-template-columns:252px minmax(0,1fr)}.cs-guide-hero{grid-template-columns:minmax(0,1fr) minmax(330px,.9fr)}.cs-guide__title{font-size:clamp(34px,3.8vw,48px)}.cs-guide-hero__visual{min-height:330px}.cs-guide-hero__orb{display:none}.cs-guide-hero__product{width:min(58%,278px);left:55.5%;transform:translateX(-50%);bottom:58px}.cs-guide-hero__puddle{left:55.5%;transform:translateX(-50%);bottom:42px;width:210px;height:58px}}
@media (max-width:1100px){.cs-guide__container{grid-template-columns:1fr}.cs-guide__sidebar{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.cs-guide-hero,.cs-guide-panels,.cs-guide-meta{grid-template-columns:1fr}.cs-guide-meta__divider{display:none}.cs-guide-hero__visual{min-height:330px}.cs-guide-hero__product{left:50%;right:auto;transform:translateX(-50%);bottom:48px}.cs-guide-hero__orb{display:none}.cs-guide-hero__puddle{left:50%;transform:translateX(-50%);bottom:32px;width:200px;height:54px}.cs-guide-panel__inner{grid-template-columns:110px minmax(0,1fr)}}
@media (max-width:760px){.cs-guide{padding-top:16px}.cs-guide__sidebar{grid-template-columns:1fr}.cs-guide-card{min-height:auto}.cs-guide-hero{padding:16px}.cs-guide__title{font-size:clamp(31px,10vw,40px)}.cs-guide-hero__visual{min-height:285px}.cs-guide-hero__product{width:min(64%,250px);left:50%;right:auto;transform:translateX(-50%);bottom:40px}.cs-guide-hero__orb{display:none}.cs-guide-hero__puddle{left:50%;transform:translateX(-50%);bottom:24px;width:176px;height:48px}.cs-guide-panel__inner{grid-template-columns:1fr}.cs-guide-routine{grid-template-columns:1fr}.cs-guide-routine__arrow{display:none}}