/* White image panels preserve the appearance of the original device photos. */
#equipment .equip { grid-template-columns:200px minmax(0,1fr); }
#equipment .equip-media,#equipment .equip-media.no-img,#equipment .equip-media img { background:#fff; }
#equipment .equip-media img { height:300px; padding:10px; }
#equipment .equip-media.full img { height:100%; padding:0; }
#equipment .yulgak-card { grid-column:1/-1; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
#equipment .yulgak-media { min-height:0; padding:0; display:block; }
#equipment .yulgak-media::before { display:none; }
#equipment .yulgak-card .equip-body { align-self:center; padding:38px; }
.yg-animation { color:#42634e; padding:23px; width:100%; }
.yg-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.yg-top > span { font-size:9px; letter-spacing:.12em; color:#71816a; }
.yg-play { border:1px solid #dce3d6; background:#f7f8f3; color:#60775e; font:inherit; font-size:10px; border-radius:20px; padding:6px 10px; cursor:pointer; }
.yg-scene { display:block; width:100%; height:auto; max-height:270px; overflow:visible; margin:12px 0; }
.yg-caption { position:relative; padding-right:62px; min-height:79px; }
.yg-count { position:absolute; right:0; top:5px; font-size:11px; color:#899881; }
.yg-title { font-family:'Gowun Batang',serif; font-size:21px; font-weight:700; }
#equipment .yg-description { font-size:12px; margin-top:7px; line-height:1.8; }
.yg-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
.yg-steps button { padding:10px 3px; background:#f7f8f3; border:1px solid #dce3d6; border-radius:9px; color:#71816a; font:inherit; font-size:9px; cursor:pointer; }
.yg-steps button span { display:block; font-size:11px; margin-top:4px; white-space:nowrap; }
.yg-steps button[aria-pressed=true] { background:#3e6049; color:white; border-color:#3e6049; }
.yg-animation button:focus-visible { outline:3px solid #86a17d; outline-offset:3px; }
#equipment .yg-note { font-size:10px; color:#899381; margin-top:12px; }
.yg-channels,.yg-herbs,.yg-herb-layer,.yg-shedding,.yg-finish,.yg-sparkles,.yg-roller { opacity:0; transition:opacity .65s ease; }
.yg-roller { transform:translate(125px,100px); }
[data-yg-step="0"] .yg-roller { opacity:1; animation:yg-roll 3.8s ease-in-out infinite; }
[data-yg-step="0"] .yg-channels { opacity:.5; }
[data-yg-step="1"] .yg-herbs,[data-yg-step="1"] .yg-herb-layer { opacity:.9; }
[data-yg-step="2"] .yg-shedding { opacity:1; animation:yg-lift 2s ease-in-out infinite; }
[data-yg-step="3"] .yg-finish,[data-yg-step="3"] .yg-sparkles { opacity:1; }
[data-yg-step="3"] .yg-sparkles { animation:yg-glow 2.5s ease-in-out infinite; }
.yg-animation.is-paused * { animation-play-state:paused !important; }
@keyframes yg-roll { 0%,100% { transform:translate(125px,100px); } 50% { transform:translate(350px,100px); } }
@keyframes yg-lift { 0%,100% { transform:translateY(0); opacity:.4; } 60% { transform:translateY(-10px); opacity:1; } }
@keyframes yg-glow { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@media(max-width:1100px) { #equipment .equip { grid-template-columns:160px minmax(0,1fr); } #equipment .yulgak-card { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
@media(max-width:800px) { #equipment .equip { grid-template-columns:200px minmax(0,1fr); } #equipment .yulgak-card { grid-template-columns:1fr; } #equipment .yulgak-media { border-right:0; border-bottom:1px solid #dce3d6; } }
@media(max-width:600px) { #equipment .equip { grid-template-columns:1fr; } #equipment .equip-media { height:260px; } #equipment .equip-media img { height:100%; padding:10px; } #equipment .equip-media.full img { padding:0; } #equipment .yulgak-media { height:auto; } #equipment .yulgak-card .equip-body { padding:24px; } .yg-animation { padding:18px; } .yg-top > span { font-size:8px; } .yg-caption { min-height:90px; } }
@media(prefers-reduced-motion:reduce) { .yg-animation * { animation:none !important; transition:none !important; } }

/* Eighth treatment card, sharing the same two-column grid as cards 1–7. */
#equipment .yulgak-card { grid-column:auto; grid-template-columns:1fr; }
#equipment .yulgak-media { border-right:0; border-bottom:1px solid #dce3d6; }
#equipment .yulgak-media::before { display:grid; top:18px; left:18px; }
#equipment .yulgak-card .equip-body { padding:28px; align-self:start; }
#equipment .yulgak-card .yg-top { padding-left:42px; }
#equipment .yulgak-card .yg-scene { max-height:220px; }
@media(max-width:600px) { #equipment .yulgak-card .equip-body { padding:24px; } #equipment .yulgak-card .yg-top > span { letter-spacing:.04em; } }

/* Match card 07: compact visual on the left, original treatment copy on the right. */
#equipment .yulgak-card { grid-template-columns:200px minmax(0,1fr); }
#equipment .yulgak-media { display:flex; align-items:center; border-right:1px solid #dce3d6; border-bottom:0; }
#equipment .yulgak-card .equip-body { padding:28px; align-self:start; }
#equipment .yulgak-card .yg-animation { padding:58px 12px 20px; }
#equipment .yulgak-card .yg-top { padding:0; position:absolute; top:20px; right:12px; }
#equipment .yulgak-card .yg-top > span { display:none; }
#equipment .yulgak-card .yg-scene { margin:15px 0; max-height:170px; }
#equipment .yulgak-card .yg-caption { min-height:0; padding:0; text-align:center; }
#equipment .yulgak-card .yg-count { position:static; display:block; margin-bottom:6px; font-size:10px; }
#equipment .yulgak-card .yg-title { font-size:15px; }
#equipment .yulgak-card .yg-description,#equipment .yulgak-card .yg-steps { display:none; }
#equipment .yulgak-card .yg-note { text-align:center; font-size:9px; line-height:1.6; margin-top:13px; }
#equipment .yulgak-card .yg-play { font-size:9px; padding:5px 7px; }
@media(max-width:1100px) { #equipment .yulgak-card { grid-template-columns:160px minmax(0,1fr); } #equipment .yulgak-card .equip-body { padding:22px; } }
@media(max-width:800px) { #equipment .yulgak-card { grid-template-columns:200px minmax(0,1fr); } }
@media(max-width:600px) {
 #equipment .yulgak-card { grid-template-columns:1fr; }
 #equipment .yulgak-card .yulgak-media { height:260px; border-right:0; border-bottom:1px solid #dce3d6; }
 #equipment .yulgak-card .yg-animation { padding:38px 16px 10px; }
 #equipment .yulgak-card .yg-scene { height:130px; margin:0; }
 #equipment .yulgak-card .yg-count { display:inline; margin-right:8px; }
 #equipment .yulgak-card .yg-title { font-size:14px; }
 #equipment .yulgak-card .yg-note { margin-top:6px; }
 #equipment .yulgak-card .equip-body { padding:24px; }
}