/* ═════ 커뮤니티 · 업로드 · 구매 · 스킨케어 ═════ */
.av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.av.lg { width: 64px; height: 64px; font-size: 26px; }
.auth { display: flex; align-items: center; gap: 10px; }
.auth span { display: grid; line-height: 1.3; }
.auth b { font-size: 14px; font-weight: 700; }
.auth small { font-size: 12px; color: var(--sub); }
.sample-note { font-size: 12px !important; color: var(--mute) !important; margin-top: 6px; }
.pbadge { position: absolute; left: 7px; top: 7px; z-index: 3; height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(25, 25, 25, .82); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 3px; backdrop-filter: blur(4px); }
.pbadge .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.pbadge.own { background: var(--green); }
.promo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px var(--gut) 0; padding: 16px; border-radius: 12px; background: var(--accent-soft); }
.promo b { display: block; font-size: 15px; font-weight: 800; color: #b02a4d; letter-spacing: -.02em; }
.promo span { font-size: 12.5px; color: #8a4357; line-height: 1.45; display: block; margin-top: 2px; }
.promo .ico { color: #b02a4d; }
.promo.alt { background: var(--gray); }
.promo.alt b { color: var(--ink); }
.promo.alt span { color: var(--sub); }
.promo.alt .ico { color: var(--sub); }
.cchip { flex: none; width: 168px; text-align: left; padding: 14px; border-radius: 12px; background: var(--gray); display: grid; gap: 3px; align-content: start; min-height: 92px; }
.cchip b { font-size: 14.5px; font-weight: 800; }
.cchip span { font-size: 12px; color: var(--sub); line-height: 1.4; }
.cchip:active { background: var(--gray-2); }

/* 탭바 가운데 올리기 버튼 */
#tabbar a.up { color: var(--ink); font-weight: 700; }
#tabbar a.up .upc { width: 38px; height: 38px; margin-top: -14px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(242, 69, 109, .4); }
#tabbar a.up .upc .ico { width: 20px; height: 20px; fill: none; }
#tabbar a.up span:last-child { margin-top: 1px; }

/* 피드 */
.post { padding: 18px 0 6px; border-bottom: 8px solid var(--gray); }
.ph { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut) 10px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who span:last-child { display: grid; line-height: 1.3; }
.who b { font-size: 14px; font-weight: 700; }
.who small { font-size: 12px; color: var(--sub); }
.fol { height: 30px; padding: 0 13px; border-radius: 15px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; }
.fol.on { background: var(--gray); color: var(--sub); }
.pimg4 { display: block; }
.pimg4 .lphoto { border-radius: 0; aspect-ratio: 4 / 5; }
.pimg4 .lphoto .photo { object-position: 50% 18%; }
.pact { display: flex; align-items: center; gap: 4px; padding: 8px var(--gut) 2px; }
.pact button { width: 38px; height: 38px; display: grid; place-items: center; margin-left: -8px; }
.pact button + button { margin-left: -4px; }
.pact .ico { width: 24px; height: 24px; }
.pcta { margin-left: auto; height: 36px; padding: 0 16px; border-radius: 18px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; }
.cap { padding: 4px var(--gut) 0; font-size: 14px; line-height: 1.55; }
.cap b { margin-right: 6px; font-weight: 800; }
.ptags { padding: 4px var(--gut) 0; font-size: 13px; color: #3b6fb0; }
.pmeta { padding: 6px var(--gut) 14px; font-size: 12px; color: var(--mute); }
.cprof { display: flex; gap: 14px; align-items: center; padding: 18px var(--gut) 0; }
.cprof h1 { font-size: 20px; font-weight: 800; }
.cprof p { color: var(--sub); font-size: 13.5px; margin-top: 2px; }

/* 룩 상세: 잠금 */
.tl li.lk .t, .tl li.lk .z { color: var(--mute); }
.tl li.lk .n { background: var(--gray-2); color: var(--sub); }
.tl li.lk .n .ico { width: 13px; height: 13px; }
.paywall { margin: 8px var(--gut) 0; padding: 26px 20px; border-radius: 14px; background: var(--gray); text-align: center; }
.paywall .lk { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.paywall h2 { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.paywall p { color: var(--sub); margin: 6px 0 16px; font-size: 13.5px; }
.paywall ul { text-align: left; display: grid; gap: 8px; }
.paywall li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; color: var(--mute); font-size: 14px; }
.paywall .n { width: 22px; height: 22px; border-radius: 50%; background: var(--gray-2); color: var(--sub); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; flex: none; }

/* 구매 시트 */
.buyrow { display: flex; gap: 12px; align-items: center; margin: 12px 0 14px; }
.buyrow .th { position: relative; width: 64px; height: 80px; border-radius: 10px; overflow: hidden; flex: none; background: var(--gray); }
.buyrow .th .face, .buyrow .th .photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.buyrow .th .photo { object-fit: cover; object-position: 50% 15%; }
.buyrow b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.buyrow span:not(.th) { font-size: 12.5px; color: var(--sub); }
.buylist { display: grid; gap: 6px; margin-bottom: 14px; }
.buylist li { font-size: 13.5px; padding-left: 20px; position: relative; }
.buylist li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 6px; height: 10px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.8); }
.demo { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: #fff4e5; color: #8a5a12; font-size: 12.5px; line-height: 1.5; }
.demo b { display: block; margin-bottom: 1px; }
.demo .ico { width: 18px; height: 18px; margin-top: 1px; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 2px; font-size: 14px; }
.total b { font-size: 22px; font-weight: 800; }

/* 업로드 */
.upform { padding-bottom: 8px; }
.fsec { padding: 22px var(--gut) 22px; border-bottom: 8px solid var(--gray); }
.fsec h3 { font-size: 15px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.fsec h3 small { font-weight: 500; color: var(--mute); font-size: 12px; }
.hint { font-size: 12.5px; color: var(--mute); line-height: 1.5; margin-top: 8px; }
.lab2 { font-size: 12.5px; color: var(--sub); font-weight: 600; margin: 12px 0 6px; }
.field.ta { height: auto; min-height: 84px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.phpick { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--gray); border: 1.5px dashed var(--gray-2); overflow: hidden; cursor: pointer; color: var(--sub); text-align: center; }
.phpick.has { aspect-ratio: 4 / 5; border: 0; }
.phpick img { width: 100%; height: 100%; object-fit: cover; }
.phpick span { display: grid; gap: 3px; justify-items: center; }
.phpick b { color: var(--ink); font-size: 14px; }
.phpick small { font-size: 12px; }
.phpick .ico { width: 30px; height: 30px; }
.ustep { display: grid; gap: 12px; margin-bottom: 12px; }
.ustep li { padding: 12px; border-radius: 12px; border: 1px solid var(--gray-2); display: grid; gap: 8px; }
.uh { display: flex; align-items: center; gap: 6px; }
.uh .n { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.uh select { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--gray-2); border-radius: 8px; padding: 0 8px; background: #fff; font-size: 14px; }
.uh button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--sub); }
.uh button[disabled] { opacity: .3; }
.uh button .ico { width: 18px; height: 18px; }
.ustep .field { height: 42px; font-size: 14px; }
.ustep .field.ta { min-height: 72px; font-size: 14px; }
.ustep ::placeholder { color: #b9b9c0; }

/* 토스트 */
.toast { position: fixed; z-index: 90; left: 50%; bottom: 96px; transform: translateX(-50%); max-width: 86%; padding: 11px 18px; border-radius: 22px; background: rgba(25, 25, 25, .92); color: #fff; font-size: 13.5px; font-weight: 500; animation: toast 2.4s ease both; white-space: nowrap; }
@keyframes toast { 0%, 100% { opacity: 0; transform: translate(-50%, 8px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } }

/* 스킨케어 */
.seg { display: flex; margin: 14px var(--gut) 0; padding: 4px; border-radius: 10px; background: var(--gray); }
.seg a { flex: 1; height: 38px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--sub); }
.seg a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.opts.sm button { height: 34px; padding: 0 12px; font-size: 13px; }
.ingl > li { margin: 0 var(--gut) 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
.ih { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ih b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.tm { flex: none; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; background: var(--gray); color: var(--sub); }
.tm.AM { background: #fff4e5; color: #d9780f; }
.tm.PM { background: #ece9fb; color: #5a4cc2; }
.iw p { font-size: 13.5px; color: #3d3d44; line-height: 1.55; margin-top: 6px; }
.in { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.in span { height: 20px; padding: 0 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.ia { margin-top: 8px; font-size: 11.5px; color: var(--mute); }
.routine { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--gut); }
.rcol { padding: 14px 12px; border-radius: 12px; background: var(--gray); }
.rcol h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.rcol ol { counter-reset: r; display: grid; gap: 10px; }
.rcol li { counter-increment: r; display: grid; gap: 1px; padding-left: 22px; position: relative; }
.rcol li::before { content: counter(r); position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.rcol li b { font-size: 13.5px; font-weight: 700; }
.rcol li span { font-size: 12px; color: var(--sub); line-height: 1.5; }
.rules { display: grid; gap: 10px; }
.rule { padding: 14px; border-radius: 12px; border: 1px solid var(--line); border-left-width: 4px; }
.rule.bad { border-left-color: #e5484d; }
.rule.warn { border-left-color: #f5a524; }
.rule.good { border-left-color: var(--green); }
.rule.info { border-left-color: #8b8b95; }
.rh { display: flex; align-items: center; gap: 8px; }
.rh b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.lvl { flex: none; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; color: #fff; background: #8b8b95; }
.lvl.bad { background: #e5484d; }
.lvl.warn { background: #f5a524; }
.lvl.good { background: var(--green); }
.ri { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.ri span { height: 22px; padding: 0 8px; border-radius: 11px; background: var(--gray); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; }
.ri .sp2 { background: #ece9fb; color: #5a4cc2; }
.rule p { font-size: 13.5px; color: #3d3d44; line-height: 1.55; margin-top: 6px; }
.rule p.tip { background: var(--gray); padding: 9px 11px; border-radius: 8px; }
.rule p.tip b { color: var(--accent); margin-right: 4px; }
.avoid li { position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.avoid li::before { content: '×'; position: absolute; left: 2px; top: 8px; color: #e5484d; font-weight: 800; }
.note.care { background: #fff4e5; }
.urow { position: relative; }
.udel { position: absolute; right: 14px; top: 50%; margin-top: -17px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--mute); }
.urow .ico.r { display: none; }
.urow > a { padding-right: 52px; }