/* ═════ 대체 추천 · 응급처치 · 화장 기록 · 제품 등록 ═════ */
.noanim { animation: none !important; }

/* ① 내 제품으로 대체 */
.altrow { margin-top: 12px; }
.altrow:first-child { margin-top: 0; }
.altrow > b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.altrow p { font-size: 13.5px; color: #4a4b52; line-height: 1.55; margin-bottom: 4px; }
.subcard { margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.sc-top { display: flex; align-items: center; gap: 12px; }
.sc-top .tile { flex: none; width: 54px; height: 54px; border-radius: 10px; background: var(--gray); border: 0; }
.sc-top .tile .prod { width: 70%; height: 70%; }
.sc-info { min-width: 0; display: grid; gap: 1px; }
.sc-info b { font-size: 14px; font-weight: 700; line-height: 1.35; }
.mt { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 700; }
.mt i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.mt i + i { margin-left: -6px; margin-right: 3px; }
.mt.good { color: var(--green); } .mt.warn { color: #d9780f; } .mt.bad { color: #e5484d; }
.sc-dl { display: grid; gap: 2px; margin-top: 10px; font-size: 13px; line-height: 1.55; }
.sc-dl dt { font-size: 11.5px; font-weight: 800; color: var(--accent); margin-top: 6px; }
.sc-dl dt:first-child { margin-top: 0; }
.sc-dl dd { margin: 0; color: #3d3d44; }

/* ② 응급처치 */
.stepbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px var(--gut) 0; }
.stepbtns .timer, .stepbtns .rescuebtn { margin: 0; }
.rescuebtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; background: #ffe9ee; color: #c8284e; font-size: 13px; font-weight: 700; }
.rescuebtn .ico { width: 16px; height: 16px; }
.rs-h { font-size: 12px; font-weight: 800; color: var(--mute); margin: 16px 0 6px; letter-spacing: .02em; }
.rs { border-bottom: 1px solid var(--line); }
.rs summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 0; cursor: pointer; font-size: 14.5px; }
.rs summary::-webkit-details-marker { display: none; }
.rs summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border: solid #a2a3ab; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .2s; flex: none; margin-right: 4px; }
.rs[open] summary::after { transform: rotate(-135deg); }
.rs summary b { font-weight: 700; letter-spacing: -.02em; }
.rsa { flex: none; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--gray); font-size: 11px; font-weight: 800; color: var(--sub); display: inline-flex; align-items: center; }
.rsb { padding: 0 2px 16px; }
.rsb h4 { font-size: 12px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.rsb ol { counter-reset: r; display: grid; gap: 8px; }
.rsb li { counter-increment: r; position: relative; padding-left: 26px; font-size: 14px; line-height: 1.6; }
.rsb li::before { content: counter(r); position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #111; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.rsb p { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: var(--gray); font-size: 13px; line-height: 1.55; }
.rsb p b { display: block; font-size: 11px; color: var(--sub); margin-bottom: 1px; }
.rsb p.avoid { background: #fff1f1; } .rsb p.avoid b { color: #e5484d; }
.rsb p.mine { background: var(--accent-soft); } .rsb p.mine b { color: var(--accent); }
.rslist { padding: 4px var(--gut) 0; }
.sheet .rs { margin: 0; }

/* ④ 화장 기록 */
.logform { margin: 18px var(--gut) 0; padding: 18px; border-radius: 14px; background: var(--gray); }
.logform h3 { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.lf-l { font-size: 12.5px; font-weight: 700; color: var(--sub); margin: 16px 0 8px; }
.lf-l small { font-weight: 500; color: var(--mute); }
.logform .opts button { background: #fff; border-color: transparent; }
.logform .opts button.on { background: #111; color: #fff; }
.logform .field { background: #fff; border-color: transparent; }
.lgcard { padding: 14px; border-radius: 12px; background: var(--accent-soft); display: grid; gap: 8px; }
.lgs { display: flex; align-items: center; gap: 8px; }
.lgs b { color: var(--accent); letter-spacing: 1px; font-size: 15px; }
.lgs span { font-size: 12.5px; color: var(--sub); font-weight: 600; }
.lgh { font-size: 12.5px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lgh span { height: 22px; padding: 0 8px; border-radius: 11px; background: #fff; color: #333; font-weight: 600; display: inline-flex; align-items: center; }
.lgm { font-size: 14.5px; font-weight: 600; line-height: 1.55; color: #a6304c; }
.memocard { display: grid; gap: 3px; margin: 14px var(--gut) 0; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); }
.memocard small { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.memocard b { font-size: 15px; font-weight: 700; color: #7d1f39; line-height: 1.45; }
.memocard span { font-size: 12px; color: #a6304c; text-decoration: underline; text-underline-offset: 3px; }
.loglist { display: grid; }
.loglist > li { position: relative; }
.loglist > li > a { display: flex; gap: 14px; align-items: center; padding: 12px var(--gut); padding-right: 56px; border-bottom: 1px solid var(--line); }
.ld { flex: none; width: 44px; font-size: 13px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.lb { flex: 1; min-width: 0; display: grid; gap: 1px; }
.lb b { font-size: 14.5px; font-weight: 700; }
.lb small { font-size: 12px; color: var(--sub); }
.lb em { font-style: normal; font-size: 12.5px; color: #a6304c; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loglist img { flex: none; width: 42px; height: 52px; border-radius: 8px; object-fit: cover; }

/* ⑤ 제품 등록 */
.srl { margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.srl button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.srl li:last-child button { border-bottom: 0; }
.srl .tile { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--gray); border: 0; }
.srl .tile .prod { width: 70%; height: 70%; }
.srl button > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.srl b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.srl em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent); }
.recent { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.recent::-webkit-scrollbar { display: none; }
.recent button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 10px; border-radius: 18px; border: 1px solid var(--gray-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.recent i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.shades.named button { width: auto; height: 38px; padding: 0 13px 0 8px; border-radius: 19px; box-shadow: none; border: 1.5px solid var(--gray-2); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; background: #fff; }
.shades.named button i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.shades.named button.on { border-color: #111; font-weight: 700; }
.shades.named button.on::after { display: none; }




/* 단계 탭: 8단계가 넘어가므로 가로 스크롤 */
.stages { justify-content: flex-start; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.stages::-webkit-scrollbar { display: none; }
.stages button { flex: none; padding-left: 4px; padding-right: 4px; }
.stages i { flex: none; }

/* 동작 다시 보기 */
.vis .replay { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: none; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 9px; border-radius: 14px; background: rgba(20, 14, 14, .72); color: #fff; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(4px); }
.vis .replay svg { width: 13px; height: 13px; }
.vis.has-demo .replay { display: inline-flex; }
.vis.done .replay { display: none; }

/* 난이도 · 손동작 · 어려운 점 */
.diffrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; font-size: 13px; }
.diffrow b { font-weight: 800; color: var(--ink); }
.diff { display: inline-flex; gap: 3px; }
.diff i { width: 14px; height: 6px; border-radius: 3px; background: var(--gray-2, #ddd); }
.diff.d1 i:nth-child(-n+1), .diff.d2 i:nth-child(-n+2), .diff.d3 i { background: var(--accent); }
.diffrow .motion { flex-basis: 100%; color: var(--mute); font-size: 13px; line-height: 1.5; }
.hardcard { margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: #fff4f1; border: 1px solid #ffd9d0; }
.hardcard b { display: block; font-size: 13px; color: var(--accent); margin-bottom: 6px; }
.hardcard ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.diffrow { padding: 0 var(--gut); }
.hardcard { margin: 14px var(--gut); }

.rsquick{margin:10px 16px 4px;padding:14px 16px;background:#FFF4F6;border-radius:12px}
.rsquick b{display:block;font-size:14px;margin-bottom:6px}
.rsquick ol{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:#444}
.rsquick small{display:block;margin-top:6px;color:#888;font-size:12px}


/* 맨얼굴부터 전체 과정 재생 */
.vis .playall { position: absolute; left: 10px; top: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px 0 8px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: #111; font-size: 11.5px; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.vis .playall svg { width: 13px; height: 13px; }
.vis.playing .playall { background: #111; color: #fff; }
.vis.playing .playall span { font-size: 0; }
.vis.playing .playall span::after { content: '멈추기'; font-size: 11.5px; }
.vis .pa-cap { position: absolute; left: 50%; bottom: 12px; z-index: 3; transform: translateX(-50%); display: none; max-width: calc(100% - 100px); padding: 6px 12px; border-radius: 16px; background: rgba(20, 14, 14, .75); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(4px); }
.vis .pa-cap b { margin-right: 6px; color: #ffb3c4; font-weight: 800; }
.vis.playing .pa-cap { display: block; }
.vis.playing .replay, .vis.playing .ref { display: none; }

/* ── 광고·협찬 / AI 생성 표시, 표현 점검, 운영정책 (js/adrules.js) ── */
.adtag { display: inline-block; vertical-align: 2px; margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: #111; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.lphoto, .hero { position: relative; }
.adbadge { position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 2px 8px; border-radius: 999px; background: rgba(17,17,17,.82); color: #fff; font-size: 11px; font-weight: 700; }
.adbadge.big { bottom: auto; top: 56px; left: 14px; font-size: 12px; padding: 3px 10px; }
.aibadge { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.85); color: #333; font-size: 10.5px; font-weight: 600; pointer-events: none; }
.vis.ph { position: relative; }
.vis.ph > .aibadge { top: 10px; bottom: auto; right: 10px; }
.adwarn { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #fff4f0; color: #7a2e1a; font-size: 12.5px; line-height: 1.55; }
.adwarn ul { margin: 6px 0; padding-left: 16px; }
.adwarn em { font-style: normal; font-weight: 700; }
.adwarn small { display: block; color: #9a5a48; }
.policy { padding: 8px var(--gut, 16px) 40px; font-size: 14px; line-height: 1.7; color: #222; }
.policy .lead { padding: 14px 16px; border-radius: 12px; background: #f6f6f6; }
.policy h2 { margin: 26px 0 8px; font-size: 16px; font-weight: 800; }
.policy ul { margin: 0; padding-left: 18px; }
.policy li { margin: 4px 0; }
.policy .small { margin-top: 8px; color: #777; font-size: 12px; }
.policy a { color: var(--accent, #F2456D); text-decoration: underline; }
.ptable { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.5; }
.ptable th, .ptable td { padding: 8px 6px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.ptable thead th { color: #888; font-weight: 600; font-size: 11.5px; }
.ptable tbody th { white-space: nowrap; font-weight: 700; }
.ptable td:last-child { color: #2a7a4b; }
.foot-note a { color: inherit; text-decoration: underline; }