/* ═════ OLIVE YOUNG · 화해 스타일 스킨 (이전 스타일을 덮어씀) ═════ */
:root { --ink: #111; --accent: #f2456d; --accent-d: #d93a5f; --gray: #f4f5f7; --gray-2: #e9eaee; --line: #eeeff2; --mute: #a2a3ab; --sub: #666870; }
body { letter-spacing: -.015em; }
#view { padding-bottom: 76px; }

/* 상단: 로고 줄 + 텍스트 탭 줄 */
.topbar { position: sticky; top: 0; z-index: 30; background: #fff; }
.hdr2 { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 12px 0 16px; }
.logo2 { display: flex; align-items: center; gap: 7px; }
.logo2 .lg { font-size: 25px; font-weight: 900; font-style: italic; letter-spacing: -.03em; line-height: 1; color: #111; }
.logo2 .bd { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; font-style: normal; }
.hsp { flex: 1; }
.hico { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: #111; }
.hico .ico { width: 25px; height: 25px; stroke-width: 1.8; }
.hico i { position: absolute; right: 3px; top: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; display: grid; place-items: center; }
.ttabs { display: flex; gap: 22px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.ttabs::-webkit-scrollbar { display: none; }
.ttabs a { position: relative; flex: none; padding: 6px 0 12px; font-size: 17px; font-weight: 600; color: #8b8c94; letter-spacing: -.03em; }
.ttabs a.on { color: #111; font-weight: 800; }
.ttabs a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: #111; }
.hdr, .bar { z-index: 30; }
.bar { top: 0; }
.stages { top: 52px; }

/* 배너: 양옆이 살짝 보이는 캐러셀 */
.banner { padding-top: 12px; }
/* 가운데 정렬 + 사진 원본 비율(4:5) 그대로 — 얼굴을 자르지 않고 어깨까지 보여 화장이 잘 보이게 */
.banner .slides { gap: 10px; padding: 0 8%; scroll-padding: 0 8%; }
.banner .slide { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; scroll-snap-align: center; }
.banner .slide .photo { object-position: 50% 0%; }
.slide .veil { background: linear-gradient(to top, rgba(20, 8, 12, .8), rgba(20, 8, 12, .35) 18%, rgba(20, 8, 12, 0) 34%); }
.slide .tx { bottom: 18px; left: 18px; right: 18px; }
.slide .kick { font-size: 10.5px; }
.slide h2 { margin-top: 4px; font-size: 21px; font-weight: 800; letter-spacing: -.045em; line-height: 1.32; }
.slide .nm { margin-top: 5px; font-size: 12.5px; opacity: .88; }
.banner .count { position: absolute; right: 34px; bottom: 20px; z-index: 4; display: flex; align-items: center; height: auto; padding: 0; background: none; backdrop-filter: none; font-size: 14px; font-weight: 500; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.banner .count b { font-weight: 800; }
.banner .count i { display: inline-block; width: 1px; height: 11px; margin: 0 7px; background: rgba(255, 255, 255, .7); }
.banner .count em { font-style: normal; margin-left: 8px; font-size: 16px; }

/* 퀵메뉴: 둥근 사각 타일 2줄 가로 스크롤 */
.qgrid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 62px; gap: 14px 14px; overflow-x: auto; padding: 18px 16px 6px; scrollbar-width: none; }
.qgrid::-webkit-scrollbar { display: none; }
.qgrid > * { display: grid; justify-items: center; align-content: start; gap: 7px; }
.qt { position: relative; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; color: #222; }
.qt .ico { width: 28px; height: 28px; stroke-width: 1.6; }
.qt u { position: absolute; right: -3px; top: -4px; width: 17px; height: 17px; border-radius: 50%; background: #ff3b4a; color: #fff; font-size: 9.5px; font-weight: 800; text-decoration: none; display: grid; place-items: center; border: 2px solid #fff; box-sizing: content-box; }
.ql { font-size: 12.5px; font-weight: 500; color: #222; white-space: nowrap; }
.p1 { background: #ffe9ee; } .p2 { background: #e4f1fb; } .p3 { background: #e3f5ee; } .p4 { background: #f0e8fb; } .p5 { background: #fff0dc; } .p6 { background: #fde6f4; } .p7 { background: #fff6cf; }
.p8 { background: #eaeef5; } .p9 { background: #e9f4e4; } .p10 { background: #ffe5e0; } .p11 { background: #e8e6fa; } .p12 { background: #ffe9ee; } .p13 { background: #f3ebe0; } .p14 { background: #fbe7ea; }

/* 추천 검색어 */
.ticker { display: flex; align-items: center; gap: 9px; width: calc(100% - 32px); margin: 12px 16px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.tpill { height: 26px; padding: 0 11px; border-radius: 13px; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; flex: none; }
.tn { color: var(--accent); font-weight: 800; font-size: 14px; width: 12px; text-align: center; }
.ticker b { flex: 1; font-size: 15px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker i { color: #111; display: grid; }
.ticker i .ico { width: 20px; height: 20px; }

/* 섹션 제목 */
.sec { padding-top: 34px; }
.sec-h h2 { font-size: 21px; font-weight: 800; letter-spacing: -.045em; }
.sec-h p { color: var(--sub); }
.sp { display: none; }
.pagehead h1, .vhead h1 { font-size: 26px; letter-spacing: -.045em; }

/* 랭킹 카드 */
.hprods.rk { gap: 12px; }
.rcard { position: relative; flex: none; width: 126px; }
.rcard .tile { border-radius: 14px; background: var(--gray); border: 0; }
.rcard .rk { position: absolute; left: 0; top: 0; z-index: 3; width: 25px; height: 27px; border-radius: 14px 0 10px 0; background: #111; color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.rcard .hb { position: absolute; right: 6px; top: 90px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); display: grid; place-items: center; color: #111; }
.rcard .hb .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.rcard .hb.on { background: var(--green); color: #fff; }
.rcard .brand { margin-top: 9px; font-size: 12px; }
.rcard b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.4; margin: 1px 0 6px; }

/* 룩 카드 */
.lcard { width: 150px; }
.lphoto { border-radius: 14px; }
.lcard h3, .gcard h3 { font-size: 14.5px; letter-spacing: -.03em; }

/* 하단 탭바: 흰 배경, 얇은 아이콘, 활성은 검정 채움 */
#tabbar { border-top: 1px solid var(--gray-2); background: #fff; box-shadow: 0 -4px 20px rgba(0, 0, 0, .03); }
#tabbar a { padding: 9px 0 8px; gap: 3px; font-size: 11px; font-weight: 500; color: #9a9ba3; }
#tabbar a .ico { width: 27px; height: 27px; stroke-width: 1.5; }
#tabbar a.on { color: #111; font-weight: 800; }
#tabbar a.on .ico { fill: #111; fill-opacity: 1; stroke: #111; stroke-width: 1.4; }

/* 플로팅 알림 pill, FAB */
.floatpill { position: fixed; z-index: 28; left: 50%; bottom: calc(68px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(448px, calc(100% - 24px)); display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 14px; border-radius: 26px; background: #fff; box-shadow: 0 4px 22px rgba(0, 0, 0, .16); }
.floatpill a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.floatpill .np { flex: none; height: 24px; padding: 0 11px; border-radius: 12px; background: #ff3b4a; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; }
.floatpill b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floatpill button { width: 34px; height: 34px; display: grid; place-items: center; }
.floatpill button .ico { width: 22px; height: 22px; }
.fab { position: fixed; z-index: 26; right: max(16px, calc(50% - 224px)); bottom: calc(76px + env(safe-area-inset-bottom)); height: 50px; padding: 0 20px 0 16px; border-radius: 25px; background: #111; color: #fff; display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
.fab .ico { width: 21px; height: 21px; }

/* 버튼: 기본은 검정, 주요 CTA(dock)는 포인트색 */
.btn { background: #111; border-radius: 12px; }
.btn:active { background: #000; }
.btn.line { background: #fff; color: #111; }
.dock .btn:not(.dark):not(.line) { background: var(--accent); }
.dock .btn:not(.dark):not(.line):active { background: var(--accent-d); }
.pcta { background: #111; }
.chips button.on, .opts button.on, .fol, .btn-s, .seg a.on { background: #111; }
.seg a.on { color: #fff; }
.pill.on { background: #111; }

/* 커뮤니티(질문·답변) */
.qlist > li > a { display: flex; gap: 14px; padding: 16px var(--gut); border-bottom: 1px solid var(--line); align-items: flex-start; }
.qb { flex: 1; min-width: 0; }
.qb b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; font-weight: 700; line-height: 1.4; margin: 5px 0 3px; letter-spacing: -.03em; }
.qb p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; color: var(--sub); line-height: 1.5; }
.qm { margin-top: 7px; font-size: 12px; color: var(--mute); }
.qth { position: relative; flex: none; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: var(--gray); }
.qth .face, .qth .photo, .qth img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.qc { display: inline-block; height: 21px; line-height: 21px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 800; background: var(--gray); color: var(--sub); }
.qc.ask { background: #e4f1fb; color: #1f6fb4; }
.qc.look { background: #ffe9ee; color: #c8284e; }
.qc.skin { background: #e3f5ee; color: #138a63; }
.qc.review { background: #fff4e0; color: #b9740f; }
.qv { padding: 18px var(--gut) 0; }
.qv h1 { font-size: 22px; font-weight: 800; letter-spacing: -.045em; line-height: 1.35; margin: 8px 0 14px; }
.qbody { margin-top: 14px; font-size: 15.5px; line-height: 1.7; white-space: pre-wrap; }
.qimg { display: block; width: 100%; margin-top: 14px; border-radius: 12px; }
.lk-card { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--gray); }
.lk-card .th { position: relative; width: 44px; height: 56px; border-radius: 8px; overflow: hidden; flex: none; background: #fff; }
.lk-card .th .face, .lk-card .th .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.lk-card span:not(.th) { flex: 1; min-width: 0; display: grid; }
.lk-card small { font-size: 11px; color: var(--accent); font-weight: 700; }
.lk-card b { font-size: 14px; font-weight: 700; }
.lk-card .ico { color: var(--mute); }
.qact { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 8px solid var(--gray); margin-bottom: -8px; font-size: 13px; color: var(--sub); }
.qact button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--gray-2); font-weight: 600; color: #333; }
.qact button.on { border-color: var(--accent); color: var(--accent); }
.qact .ico { width: 18px; height: 18px; }
.cms { padding: 22px var(--gut) 0; }
.cms h2 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.cm { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cm > div { flex: 1; min-width: 0; }
.cm p { font-size: 14.5px; line-height: 1.6; margin-top: 3px; white-space: pre-wrap; }
.cmh { display: flex; align-items: center; gap: 8px; }
.cmh b { font-size: 13.5px; font-weight: 700; }
.cmh small { font-size: 12px; color: var(--mute); }
.cmh button { margin-left: auto; color: var(--mute); }
.cmh button .ico { width: 17px; height: 17px; }
.av.sm { width: 32px; height: 32px; font-size: 13px; }
.cdock { gap: 8px; align-items: center; }
.cdock .field { flex: 1; height: 44px; border-radius: 22px; background: var(--gray); border-color: transparent; padding: 0 16px; }
.send { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.send .ico { width: 20px; height: 20px; }

/* 스킨케어 제품 예시 */
.cpl { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--gray-2); }
.cpt { font-size: 11.5px; color: var(--mute); font-weight: 700; margin-bottom: 4px; }
.cp { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.cp .tile { flex: none; width: 56px; height: 56px; border-radius: 10px; background: var(--gray); border: 0; }
.cp .tile .prod { width: 70%; height: 70%; }
.cpb { min-width: 0; display: grid; gap: 1px; }
.cpb b { font-size: 13.5px; font-weight: 600; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cpb small { font-size: 11.5px; color: var(--mute); line-height: 1.4; }
.rp { display: grid; gap: 14px; }
.rpg h4 { font-size: 13px; font-weight: 800; color: var(--accent); margin-bottom: 2px; }
.banner .count { right: calc(8% + 16px); }

/* 단순화: 빠른 메뉴 4칸 한 줄 */
.qgrid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; }
.qgrid .qt { width: 100%; max-width: 72px; aspect-ratio: 1; }

/* 배너가 1개일 때는 가운데 꽉 차게 */
.banner .slide:only-child { width: 100%; }
.banner .slides:has(.slide:only-child) ~ .count { right: 32px; }
.banner .slides:has(.slide:only-child) ~ .count em { display: none; }

/* ── 커뮤니티 안전장치: 약관 동의 · 신고/차단 시트 (js/moderation.js) ── */
.eula-ck{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:12.5px;line-height:1.5;color:#555;margin:4px 0 14px;padding:12px;border:1px solid #eee;border-radius:12px;background:#fafafa}
.eula-ck input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:#111}
.eula-ck a{color:#111;font-weight:700;text-decoration:underline}
.eula-ck.shake{animation:ckshake .4s;border-color:#f2456d}
@keyframes ckshake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.modbtn{background:none;border:0;padding:6px;margin-left:4px;color:#888;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.modbtn.sm{padding:2px 4px;margin-left:auto}
.cmh .modbtn.sm{margin-left:auto}
.modsheet{position:fixed;inset:0;z-index:1000}
.modsheet .ms-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modsheet .ms-card{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:#fff;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto;animation:msup .2s ease-out}
@keyframes msup{from{transform:translateY(30px);opacity:0}}
.ms-h{font-weight:700;font-size:16px;padding:4px 4px 10px}
.ms-p{font-size:12.5px;color:#666;line-height:1.55;margin:0 4px 10px}
.ms-row{display:block;width:100%;text-align:left;background:#f6f6f6;border:0;border-radius:12px;padding:14px;margin-bottom:8px;font-size:15px;color:#111;cursor:pointer}
.ms-row small{display:block;font-size:12px;color:#888;margin-top:3px}
.ms-row.warn{color:#d22c4a;font-weight:600}
.ms-row.cancel{background:#fff;border:1px solid #e5e5e5;text-align:center;color:#555}
.terms{font-size:14px;line-height:1.7;color:#333;padding-top:8px}
.terms h3{font-size:15px;margin:20px 0 6px;color:#111}
.terms ul{padding-left:18px;margin:6px 0}
.terms a{color:#111;text-decoration:underline}
.blist{list-style:none;padding:0;margin:0}
.blist li{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #f0f0f0}
.blist li b{flex:1}
.blist li small{color:#999;font-size:12px}