/* 셀온365 상세페이지 v3 — 배경 이미지(img/product/bg-*.png) 위에 문구·선·아이콘을 코드로 올린 섹션들. 2026-11-06
   모든 치수는 860px 디자인 기준 px 값에 --u(디자인 1px)를 곱해 쓴다. 화면 폭이 줄면 이미지처럼 같은 비율로 축소된다.
   --h: 배경 이미지 높이(디자인 px). 각 섹션 배경은 top center / 100% auto. */
.cellon-detail .page{container-type:inline-size}
.cellon-detail .v3{--u:calc(100cqw / 860);position:relative;width:100%;min-height:calc(var(--h) * var(--u));background-repeat:no-repeat;background-position:top center;background-size:100% auto;font-family:var(--font);line-height:1.6;word-break:keep-all}
.cellon-detail .v3 h1,.cellon-detail .v3 h2,.cellon-detail .v3 h3{font-weight:800}
.cellon-detail .v3 em{font-style:normal}
.cellon-detail .v3 .c{text-align:center}

/* ───── A. 핵심 원료 도입 (원료 3종 장의 제목) ───── */
/* 2026-11-08 재구성: 배경 PNG(bg-core) 대신 흰 바탕 + 원 하나를 120°씩 3등분한 원료 사진(wedge-palm/octa/gink.jpg, 700×700).
   조각: .wc 왼쪽(쏘팔메토, 150°~270°), .wb 아래(옥타코사놀, 30°~150°), .wa 오른쪽 위(은행잎, -90°~30°). 조각 사이 흰 선은 .cut SVG.
   모바일(기본) = 원 184px, 라벨을 좌·우·아래 조각 옆에. PC(641px~) = 원 300px, 같은 배치, 리더선 없음 */
.cellon-detail .v3-core{--gold:var(--c-gold-d);min-height:0;padding:48px 20px 44px;background:#fff;color:var(--t-body);text-align:center}
.cellon-detail .v3-core .lead{font-size:15px;color:var(--t-lead)}
.cellon-detail .v3-core h2{margin-top:8px;font-size:26px;line-height:1.35;letter-spacing:-.04em;color:var(--c-navy)}
.cellon-detail .v3-core h2 em{color:var(--gold)}
.cellon-detail .v3-core .wheel{position:relative;height:254px;margin-top:30px}
.cellon-detail .v3-core .disc{position:absolute;left:50%;top:0;transform:translateX(-50%);width:184px;height:184px;border-radius:50%;overflow:hidden;background:#eef0f3}
.cellon-detail .v3-core .w{position:absolute;inset:0;background-size:cover;background-position:center}
.cellon-detail .v3-core .wa{clip-path:polygon(50% 50%, 50.0% -2.0%, 55.4% -1.7%, 60.8% -0.9%, 66.1% 0.5%, 71.2% 2.5%, 76.0% 5.0%, 80.6% 7.9%, 84.8% 11.4%, 88.6% 15.2%, 92.1% 19.4%, 95.0% 24.0%, 97.5% 28.8%, 99.5% 33.9%, 100.9% 39.2%, 101.7% 44.6%, 102.0% 50.0%, 101.7% 55.4%, 100.9% 60.8%, 99.5% 66.1%, 97.5% 71.2%, 95.0% 76.0%);background-image:url(../img/product/wedge-gink.jpg)}
.cellon-detail .v3-core .wb{clip-path:polygon(50% 50%, 95.0% 76.0%, 92.1% 80.6%, 88.6% 84.8%, 84.8% 88.6%, 80.6% 92.1%, 76.0% 95.0%, 71.2% 97.5%, 66.1% 99.5%, 60.8% 100.9%, 55.4% 101.7%, 50.0% 102.0%, 44.6% 101.7%, 39.2% 100.9%, 33.9% 99.5%, 28.8% 97.5%, 24.0% 95.0%, 19.4% 92.1%, 15.2% 88.6%, 11.4% 84.8%, 7.9% 80.6%, 5.0% 76.0%);background-image:url(../img/product/wedge-octa.jpg)}
.cellon-detail .v3-core .wc{clip-path:polygon(50% 50%, 5.0% 76.0%, 2.5% 71.2%, 0.5% 66.1%, -0.9% 60.8%, -1.7% 55.4%, -2.0% 50.0%, -1.7% 44.6%, -0.9% 39.2%, 0.5% 33.9%, 2.5% 28.8%, 5.0% 24.0%, 7.9% 19.4%, 11.4% 15.2%, 15.2% 11.4%, 19.4% 7.9%, 24.0% 5.0%, 28.8% 2.5%, 33.9% 0.5%, 39.2% -0.9%, 44.6% -1.7%, 50.0% -2.0%);background-image:url(../img/product/wedge-palm.jpg)}
.cellon-detail .v3-core .cut{position:absolute;inset:0;width:100%;height:100%}
.cellon-detail .v3-core .cut path{fill:none;stroke:#fff;stroke-width:2.2}
.cellon-detail .v3-core .lab{position:absolute}
.cellon-detail .v3-core .lab b{display:block;font-size:13px;font-weight:700;line-height:1.35;letter-spacing:-.04em;color:var(--t-head);white-space:nowrap}
.cellon-detail .v3-core .lab span{display:block;margin-top:3px;font-size:11.5px;color:var(--t-sub);white-space:nowrap}
/* 라벨 위치 클래스는 lt/rt/bt (style.css의 버튼 클래스 .b와 충돌 방지) */
.cellon-detail .v3-core .lab.lt{right:calc(50% + 100px);top:58px;text-align:right}
.cellon-detail .v3-core .lab.rt{left:calc(50% + 100px);top:58px;text-align:left}
.cellon-detail .v3-core .lab.bt{left:0;right:0;top:200px;text-align:center}
@media (min-width:641px){
.cellon-detail .v3-core{padding:90px 48px 84px}
.cellon-detail .v3-core .lead{font-size:20px}
.cellon-detail .v3-core h2{margin-top:14px;font-size:44px;line-height:1.3}
/* PC: 원 500u(페이지 폭 860의 58%)를 가운데 두고, 좌우 라벨이 양옆 가장자리(패딩 48px 안쪽)까지의 남은 폭을 채움 (2026-11-08: 300px 고정 → 420u → 500u 전폭 구성) */
.cellon-detail .v3-core .wheel{width:100%;height:calc(610 * var(--u));margin-top:calc(48 * var(--u))}
.cellon-detail .v3-core .disc{width:calc(500 * var(--u));height:calc(500 * var(--u))}
.cellon-detail .v3-core .cut path{stroke-width:1.3}
.cellon-detail .v3-core .lab b{font-size:calc(23 * var(--u))}
.cellon-detail .v3-core .lab span{margin-top:calc(5 * var(--u));font-size:calc(16 * var(--u))}
.cellon-detail .v3-core .lab.lt{left:0;right:calc(50% + 268 * var(--u));top:calc(222 * var(--u));text-align:right}
.cellon-detail .v3-core .lab.rt{left:calc(50% + 268 * var(--u));right:0;top:calc(222 * var(--u));text-align:left}
.cellon-detail .v3-core .lab.bt{top:calc(520 * var(--u))}
}


/* 구조식 자리: data-rv 등장 효과가 transform을 쓰므로 가운데 정렬은 transform 대신 left/top 계산으로 (폭 W, 높이 H = W×viewBox 비율) */



/* ───── 하루 한 번 2캡슐 루틴 (bg-routine 860×1112, 연회색) ───── */
.cellon-detail .v3-routine{--h:1112;background-image:url(../img/product/bg-routine.png);background-color:#ebedf0;padding:calc(115 * var(--u)) calc(75 * var(--u)) 0;text-align:center;color:var(--t-head)}
.cellon-detail .v3-routine .lead{font-size:calc(18 * var(--u));line-height:1.75;color:#666}
.cellon-detail .v3-routine h2{margin-top:calc(34 * var(--u));font-size:calc(37 * var(--u));line-height:1.4;letter-spacing:-.04em}
.cellon-detail .v3-routine h2 em{color:var(--c-navy)}
.cellon-detail .v3-routine .band{display:inline-block;margin-top:calc(42 * var(--u));padding:calc(10 * var(--u)) calc(26 * var(--u));background:var(--c-navy);font-size:calc(17 * var(--u));font-weight:600;letter-spacing:-.02em;color:#fff}
.cellon-detail .v3-routine .pts{display:grid;grid-template-columns:1fr 1fr;max-width:calc(560 * var(--u));margin:calc(52 * var(--u)) auto 0}
.cellon-detail .v3-routine .pts div+div{border-left:1px dashed #bdbdbd}
.cellon-detail .v3-routine .pts p{font-size:calc(15 * var(--u));line-height:1.65;color:#666}
.cellon-detail .v3-routine .pts b{display:block;margin-top:calc(12 * var(--u));font-size:calc(26 * var(--u));font-weight:800;letter-spacing:-.03em}
.cellon-detail .v3-routine .close{margin-top:calc(60 * var(--u));font-size:calc(19 * var(--u));color:var(--t-body)}
.cellon-detail .v3-routine .close strong{font-size:calc(22 * var(--u));color:var(--c-navy)}

/* ───── 이런 분들께 권합니다 (히어로 바로 다음) ───── */
/* 2026-11-08: 배경 PNG(bg-recommend) 대신 인물 사진 img/product/rec-person.jpg(1086×1448, 인물 왼쪽·오른쪽 네이비 여백)를 .ph로 깔고 글자는 코드.
   바탕색 #1f2431 = 사진 배경색. 모바일(기본) = 사진 위 330px, 얼굴 오른쪽에 헤드라인, 아래 전체 폭 반투명 카드(사진 끝을 28px 덮음).
   PC(641px~) = 사진이 왼쪽에 섹션 높이를 채우고 오른쪽으로 바탕색에 녹음, 오른쪽에 헤드라인 + 카드 절대 배치. 강조어·체크는 금색 #e6c88e */
.cellon-detail .v3-rec{--gold:var(--c-gold);--rbg:#1f2431;min-height:0;padding:0 0 36px;background-color:var(--rbg);color:#fff}
.cellon-detail .v3-rec .ph{position:relative;height:330px;background:url(../img/product/rec-person.jpg) 0 18%/cover no-repeat}
.cellon-detail .v3-rec .ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(31,36,49,0),var(--rbg))}
.cellon-detail .v3-rec .v3hd{position:absolute;left:52%;right:18px;top:92px;z-index:1}
.cellon-detail .v3-rec .v3hd .lead{font-size:15px;color:var(--gold);letter-spacing:-.01em}
.cellon-detail .v3-rec .v3hd h2{margin-top:6px;font-size:26px;line-height:1.3;letter-spacing:-.04em;color:#fff}
.cellon-detail .v3-rec ul{list-style:none;position:relative;z-index:1;margin:-28px 20px 0;padding:6px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;backdrop-filter:blur(6px)}
.cellon-detail .v3-rec li{display:grid;grid-template-columns:30px 1fr;align-items:start;padding:13px 0 14px}
.cellon-detail .v3-rec li+li{border-top:1px solid rgba(255,255,255,.1)}
.cellon-detail .v3-rec .ck{width:22px;height:22px;margin-top:2px;border-radius:50%;border:1.5px solid var(--gold)}
.cellon-detail .v3-rec .ck path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cellon-detail .v3-rec li b{display:block;font-size:15px;font-weight:400;line-height:1.5;letter-spacing:-.03em;color:#fff}
.cellon-detail .v3-rec li b mark{background:none;color:var(--gold);font-weight:700}
.cellon-detail .v3-rec li span{display:block;margin-top:3px;font-size:13px;color:#9aa3b5}
@media (min-width:641px){
.cellon-detail .v3-rec{min-height:calc(1060 * var(--u));padding:0}
.cellon-detail .v3-rec .ph{position:absolute;inset:0;height:auto;background:url(../img/product/rec-person.jpg) left top/auto 100% no-repeat}
.cellon-detail .v3-rec .ph::before{content:'';position:absolute;top:0;bottom:0;left:calc(430 * var(--u));width:calc(260 * var(--u));background:linear-gradient(90deg,rgba(31,36,49,0),var(--rbg))}
.cellon-detail .v3-rec .ph::after{height:calc(220 * var(--u));background:linear-gradient(rgba(31,36,49,0),var(--rbg) 85%)}
.cellon-detail .v3-rec .v3hd{left:calc(430 * var(--u));right:calc(70 * var(--u));top:calc(110 * var(--u))}
.cellon-detail .v3-rec .v3hd .lead{font-size:calc(22 * var(--u))}
.cellon-detail .v3-rec .v3hd h2{margin-top:calc(10 * var(--u));font-size:calc(50 * var(--u));line-height:1.25}
.cellon-detail .v3-rec ul{position:absolute;left:calc(372 * var(--u));right:calc(70 * var(--u));top:calc(330 * var(--u));margin:0;padding:calc(8 * var(--u)) calc(24 * var(--u));border-radius:calc(16 * var(--u))}
.cellon-detail .v3-rec li{grid-template-columns:calc(38 * var(--u)) 1fr;padding:calc(17 * var(--u)) 0 calc(18 * var(--u))}
.cellon-detail .v3-rec .ck{width:calc(24 * var(--u));height:calc(24 * var(--u));margin-top:calc(4 * var(--u))}
.cellon-detail .v3-rec li b{font-size:calc(19 * var(--u));white-space:nowrap}
.cellon-detail .v3-rec li span{margin-top:calc(4 * var(--u));font-size:calc(15 * var(--u))}
}

/* ───── 누가 설계하고 만들었나 (.v3-co, 2026-11-08 신설, 모바일 우선): GN바이오 22·23 구조. 어두운 네이비 바탕 + 연한 금색 포인트, 흰 제목, 밝은 회색 본문. .one 안국약품(설계) / .two 한미양행(제조, CERTIFIED 마크 + 인증서 실물) ───── */
.cellon-detail .v3-co{--h:0;--cbg:#1f2431;--g1:#c9ced8;--g2:#8d93a0;--ln:rgba(255,255,255,.14);min-height:0;background:var(--cbg);color:var(--g1);line-height:1.6;text-align:center;padding:0 20px 52px;position:relative}
.cellon-detail .v3-co.two{border-top:1px solid rgba(230,200,142,.35)}
.cellon-detail .v3-co .ph{position:relative;margin:0 -20px;height:230px;overflow:hidden}
.cellon-detail .v3-co .ph .bg{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.7) brightness(.72)}
.cellon-detail .v3-co .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,36,49,.25) 0%,rgba(31,36,49,0) 35%,var(--cbg) 100%)}
.cellon-detail .v3-co .ph .lg{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:150px;height:auto;z-index:1;filter:brightness(0) invert(1);opacity:.95}
.cellon-detail .v3-co .ph .lg.raw{filter:none;width:140px;background:rgba(255,255,255,.92);padding:10px 16px;border-radius:8px}
.cellon-detail .v3-co .hd{position:relative;z-index:1;margin-top:-10px}
.cellon-detail .v3-co .lead{font-size:15px;color:var(--g1)}
.cellon-detail .v3-co h2{margin-top:8px;font-size:26px;font-weight:800;line-height:1.35;letter-spacing:-.04em;color:#fff}
.cellon-detail .v3-co h2 em{font-style:normal;color:var(--c-gold)}
.cellon-detail .v3-co .sub{margin-top:14px;font-size:14px;line-height:1.7;color:var(--g2)}
.cellon-detail .v3-co .vl{width:1px;height:44px;margin:26px auto 0;background:linear-gradient(var(--ln),var(--c-gold))}
.cellon-detail .v3-co .vl::after{content:'';display:block;width:5px;height:5px;margin:0 0 0 -2px;border-radius:50%;background:var(--c-gold)}
.cellon-detail .v3-co .qt{margin-top:18px;font-size:17px;line-height:1.55;letter-spacing:-.02em;color:#fff}
.cellon-detail .v3-co .qt b{display:block;margin-top:6px;font-size:24px;font-weight:800;letter-spacing:-.04em}
.cellon-detail .v3-co .qt small{display:block;margin-top:6px;font-size:11px;color:var(--g2)}
.cellon-detail .v3-co .tg{display:inline-block;margin-top:30px;padding:6px 14px;background:var(--c-gold);color:#1f2431;font-size:12.5px;font-weight:800;letter-spacing:-.01em}
.cellon-detail .v3-co .ls{margin-top:14px;text-align:left}
.cellon-detail .v3-co .ls.top{margin-top:30px}
.cellon-detail .v3-co .ls .it{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-top:1px solid var(--ln)}
.cellon-detail .v3-co .ls .it:last-child{border-bottom:1px solid var(--ln)}
.cellon-detail .v3-co .ls .k{font-size:17px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.3}
.cellon-detail .v3-co .ls .d{font-size:13px;line-height:1.6;color:var(--g1)}
.cellon-detail .v3-co .bd{margin:30px -20px 0;padding:9px 0;background:var(--c-gold);color:#1f2431;font-size:14px;font-weight:800;letter-spacing:.14em}
.cellon-detail .v3-co .mk{display:grid;grid-template-columns:1fr 1fr}
.cellon-detail .v3-co .mk .m{padding:22px 10px 20px;border-bottom:1px solid var(--ln)}
.cellon-detail .v3-co .mk .m:nth-child(odd){border-right:1px solid var(--ln)}
.cellon-detail .v3-co .mk img{width:82px;height:82px;margin:0 auto;object-fit:contain;background:#fff;border-radius:50%;padding:6px}
.cellon-detail .v3-co .mk .o{margin-top:10px;font-size:11.5px;color:var(--g2)}
.cellon-detail .v3-co .mk .n{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.3}
.cellon-detail .v3-co .ct{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:28px}
.cellon-detail .v3-co .ct img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cellon-detail .v3-co .ct .n{margin-top:10px;font-size:13.5px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.3}
.cellon-detail .v3-co .ct .o{margin-top:3px;font-size:11px;color:var(--g2);line-height:1.4}
.cellon-detail .v3-co .conote{margin-top:26px;font-size:11px;line-height:1.6;color:var(--g2)}
@media (min-width:641px){
.cellon-detail .v3-co{padding:0 48px 96px}
.cellon-detail .v3-co .ph{margin:0 -48px;height:380px}
.cellon-detail .v3-co .ph .lg{width:220px}
.cellon-detail .v3-co .ph .lg.raw{width:200px}
.cellon-detail .v3-co .hd{margin-top:-20px}
.cellon-detail .v3-co .lead{font-size:20px}
.cellon-detail .v3-co h2{margin-top:14px;font-size:44px;line-height:1.3}
.cellon-detail .v3-co .sub{margin-top:22px;font-size:18px;line-height:1.75}
.cellon-detail .v3-co .vl{height:64px;margin-top:40px}
.cellon-detail .v3-co .qt{margin-top:26px;font-size:22px}
.cellon-detail .v3-co .qt b{font-size:36px;margin-top:10px}
.cellon-detail .v3-co .qt small{font-size:13px}
.cellon-detail .v3-co .tg{margin-top:56px;font-size:14px;padding:8px 18px}
.cellon-detail .v3-co .ls{margin-top:22px}
.cellon-detail .v3-co .ls.top{margin-top:56px}
.cellon-detail .v3-co .ls .it{grid-template-columns:360px 1fr;gap:0 40px;align-items:center;padding:24px 0}
.cellon-detail .v3-co .ls .k{font-size:24px}
.cellon-detail .v3-co .ls .d{font-size:16px}
.cellon-detail .v3-co .bd{margin:56px -48px 0;padding:12px 0;font-size:16px}
.cellon-detail .v3-co .mk{grid-template-columns:repeat(4,1fr)}
.cellon-detail .v3-co .mk .m{padding:34px 10px 30px;border-right:1px solid var(--ln)}
.cellon-detail .v3-co .mk .m:last-child{border-right:0}
.cellon-detail .v3-co .mk img{width:110px;height:110px}
.cellon-detail .v3-co .mk .o{font-size:13px;margin-top:14px}
.cellon-detail .v3-co .mk .n{font-size:20px}
.cellon-detail .v3-co .ct{grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.cellon-detail .v3-co .ct .n{font-size:18px;margin-top:14px}
.cellon-detail .v3-co .ct .o{font-size:13px}
.cellon-detail .v3-co .conote{font-size:13px;margin-top:40px}
}
/* 모션: 세로선은 위에서 아래로 그어짐(공통 reveal의 translateY 대신 scaleY) */
.cellon-detail.motion .v3-co .vl[data-rv]{opacity:1;transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.cellon-detail.motion .v3-co .vl[data-rv].in{transform:none}

/* ───── C. 구매 구성과 혜택 (2026-11-09 재구성, 모바일 우선): 레퍼런스 A(카드 3장, 추천 카드 색 반전) + C(항목을 같은 자리에 체크/엑스). 연한 회색 바탕, 6개월 추천 카드만 네이비 + 금색 배지·버튼. 헤드라인은 하루 가격 프레임 ───── */
.cellon-detail .v3-opt{--h:0;--line:#e3e7ee;min-height:0;background:#f2f2f2;color:var(--t-body);line-height:1.6;text-align:center;padding:52px 20px 52px}
.cellon-detail .v3-opt .lead{font-size:15px;color:var(--t-lead)}
.cellon-detail .v3-opt h2{margin-top:8px;font-size:26px;font-weight:800;line-height:1.35;letter-spacing:-.04em;color:var(--t-head)}
.cellon-detail .v3-opt h2 em{font-style:normal;color:var(--c-navy)}
.cellon-detail .v3-opt .cards{display:grid;gap:14px;margin-top:30px;text-align:left}
.cellon-detail .v3-opt .cd{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px 22px;display:flex;flex-direction:column}
.cellon-detail .v3-opt .cd .nm{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--t-head);line-height:1.2}
.cellon-detail .v3-opt .cd .ds{margin-top:4px;font-size:13px;color:var(--t-sub)}
/* 하루 가격(주인공) → 월 × 개월 → 정가·할인율·혜택가 → 카드 추가 할인 */
.cellon-detail .v3-opt .cd .dy{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:8px}
.cellon-detail .v3-opt .cd .dy span{font-size:14px;font-weight:600;color:var(--t-sub)}
.cellon-detail .v3-opt .cd .dy em{font-size:34px;font-weight:800;font-style:normal;letter-spacing:-.04em;line-height:1.1;color:var(--c-navy);font-variant-numeric:tabular-nums}
.cellon-detail .v3-opt .cd .dy em small{font-size:17px;font-weight:700;margin-left:2px}
.cellon-detail .v3-opt .cd .mo{margin-top:6px;font-size:13.5px;color:var(--t-body);font-variant-numeric:tabular-nums;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cellon-detail .v3-opt .cd .mo .pill{display:inline-block;padding:2px 9px;border-radius:999px;background:#eef1f7;color:var(--c-navy);font-size:11px;font-weight:800;font-style:normal;line-height:1.5}
.cellon-detail .v3-opt .cd .cc{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:700;color:var(--c-navy)}
.cellon-detail .v3-opt .cd .cc::before{content:'↓';margin-right:6px;font-weight:800}
.cellon-detail .v3-opt .cd .mo.fin{margin-top:4px;font-weight:800;color:var(--t-head)}
.cellon-detail .v3-opt .cd ul{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;font-size:14px;letter-spacing:-.02em}
.cellon-detail .v3-opt .cd li{display:flex;align-items:center;gap:9px;color:var(--t-body)}
.cellon-detail .v3-opt .cd li i{flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-style:normal;font-weight:800;background:var(--c-navy);color:#fff}
.cellon-detail .v3-opt .cd li.x{color:var(--t-note)}
.cellon-detail .v3-opt .cd li.x i{background:#e6e9ee;color:#9aa3b5}
.cellon-detail .v3-opt .ft{margin-top:22px;font-size:11.5px;line-height:1.7;color:var(--t-sub)}
.cellon-detail .v3-opt .ft b{color:var(--t-body);font-weight:700}
@media (min-width:641px){
.cellon-detail .v3-opt{padding:100px 48px 96px}
.cellon-detail .v3-opt .lead{font-size:20px}
.cellon-detail .v3-opt h2{margin-top:14px;font-size:44px;line-height:1.3}
.cellon-detail .v3-opt .cards{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;align-items:stretch}
.cellon-detail .v3-opt .cd{padding:30px 28px 28px;border-radius:22px}
.cellon-detail .v3-opt .cd .nm{font-size:24px}
.cellon-detail .v3-opt .cd .ds{font-size:14px}
.cellon-detail .v3-opt .cd .dy em{font-size:40px}
.cellon-detail .v3-opt .cd .dy em small{font-size:19px}
.cellon-detail .v3-opt .cd .mo{font-size:15px}
.cellon-detail .v3-opt .cd .mo .pill{font-size:12px}
.cellon-detail .v3-opt .cd .cc{font-size:13.5px}
.cellon-detail .v3-opt .cd ul{font-size:15px;gap:11px}
.cellon-detail .v3-opt .ft{margin-top:40px;font-size:13px}
}

/* ───── F. 마무리 (2026-11-09, 모바일 우선): 생성 배경 이미지 end-m.jpg 1000×1333(모바일) / end-pc.jpg 1619×971(PC)에 제품·받침대·조명이 포함. 코드로 올리는 것은 슬로건 세 줄뿐. 모바일은 위쪽 어두운 여백에 가운데 정렬, PC는 왼쪽 38%에 왼쪽 정렬(제품은 이미지 오른쪽 43~91%) ───── */
.cellon-detail .v3-end{--h:0;--g1:#c9ced8;min-height:0;overflow:hidden;background:#141826 url(../img/product/end-m.jpg) center top/cover no-repeat;aspect-ratio:1000/1333;color:#fff;text-align:center;padding:52px 20px 0;line-height:1.5}
.cellon-detail .v3-end .lead{font-size:14px;letter-spacing:.02em;color:var(--c-gold)}
.cellon-detail .v3-end h2{margin-top:8px;font-size:32px;font-weight:800;line-height:1.22;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.cellon-detail .v3-end .sub{margin-top:12px;font-size:13px;line-height:1.65;color:var(--g1)}
@media (min-width:641px){
.cellon-detail .v3-end{background-image:url(../img/product/end-pc.jpg);background-position:center;aspect-ratio:1619/971;text-align:left;padding:0 48px;display:flex;align-items:center}
.cellon-detail .v3-end .tx{width:38%}
.cellon-detail .v3-end .lead{font-size:18px}
.cellon-detail .v3-end h2{margin-top:12px;font-size:54px;line-height:1.18}
.cellon-detail .v3-end .sub{margin-top:20px;font-size:16px;line-height:1.8}
}

/* ───── D. FAQ (2026-11-09 재구성, 모바일 우선): 아이보리 단색, 묶음 띠 2개, 네이비 Q 표시, 답변 핵심어만 네이비 굵게. PC 2열 ───── */
.cellon-detail .v3-faq{--h:0;min-height:0;background:#f7f8f4;padding:56px 20px;color:var(--t-body);line-height:1.6}
.cellon-detail .v3-faq .lead{text-align:center;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--c-navy)}
.cellon-detail .v3-faq h2{margin-top:8px;text-align:center;font-size:24px;letter-spacing:-.04em;line-height:1.3;color:var(--t-head)}
.cellon-detail .v3-faq .grp{display:block;margin-top:32px;text-align:center;padding:9px 12px;background:#e8eaf0;font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--c-navy)}
.cellon-detail .v3-faq dl+.grp{margin-top:36px}
.cellon-detail .v3-faq .q{display:grid;grid-template-columns:26px 1fr;gap:0 10px;padding:20px 0;border-bottom:1px solid #dcdfd8}
.cellon-detail .v3-faq .q:last-of-type{border-bottom:0}
.cellon-detail .v3-faq .q i{font-style:normal;font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--c-navy)}
.cellon-detail .v3-faq .q dt{font-size:16.5px;font-weight:700;letter-spacing:-.03em;line-height:1.4;color:var(--t-head)}
.cellon-detail .v3-faq .q dd{grid-column:2;margin-top:9px;font-size:14px;line-height:1.75;color:var(--t-lead)}
.cellon-detail .v3-faq .q dd b{font-weight:700;color:var(--c-navy)}
@media (min-width:641px){
.cellon-detail .v3-faq{padding:96px 48px}
.cellon-detail .v3-faq .lead{font-size:15px}
.cellon-detail .v3-faq h2{margin-top:12px;font-size:36px}
.cellon-detail .v3-faq .grp{margin-top:48px;padding:11px;font-size:16px}
.cellon-detail .v3-faq dl+.grp{margin-top:56px}
.cellon-detail .v3-faq .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.cellon-detail .v3-faq .q{grid-template-columns:30px 1fr;padding:26px 0}
.cellon-detail .v3-faq .q i{font-size:24px}
.cellon-detail .v3-faq .q dt{font-size:19px}
.cellon-detail .v3-faq .q dd{margin-top:10px;font-size:15.5px}
}

/* ───── I. 배송·교환·반품 안내 (2026-11-09 재구성, 모바일 우선): 흰색 단색, DAY 0·1·2~4 날짜형 흐름(모바일 세로·PC 가로), 안내 3줄, 소비자상담 ───── */
.cellon-detail .v3-ship{--h:0;min-height:0;background:#fff;padding:56px 20px;color:var(--t-body);line-height:1.6}
.cellon-detail .v3-ship h2{text-align:center;font-size:24px;letter-spacing:-.04em;color:var(--t-head)}
.cellon-detail .v3-ship .sub{margin-top:8px;text-align:center;font-size:13.5px;color:var(--t-sub)}
.cellon-detail .v3-ship .tl{position:relative;margin:30px 0 0;padding:0;list-style:none}
.cellon-detail .v3-ship .tl li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:0 14px;padding-bottom:22px}
.cellon-detail .v3-ship .tl li::before{content:'';position:absolute;left:21px;top:44px;bottom:0;border-left:2px dashed #d7dbe4}
.cellon-detail .v3-ship .tl li:last-child::before{display:none}
.cellon-detail .v3-ship .tl .d{width:44px;height:44px;border-radius:50%;background:var(--c-navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1;font-size:15px;letter-spacing:-.02em}
.cellon-detail .v3-ship .tl .d small{font-size:9px;font-weight:600;opacity:.8;margin-bottom:2px;letter-spacing:.04em}
.cellon-detail .v3-ship .tl .t{padding-top:3px}
.cellon-detail .v3-ship .tl .t b{display:block;font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--t-head)}
.cellon-detail .v3-ship .tl .t p{margin-top:4px;font-size:13.5px;line-height:1.6;color:var(--t-lead)}
.cellon-detail .v3-ship .tl .t p em{color:var(--c-navy);font-weight:700}
.cellon-detail .v3-ship .nt{margin-top:-4px;font-size:11.5px;color:var(--t-note)}
.cellon-detail .v3-ship dl{margin-top:30px;border-top:1px solid #e3e6eb}
.cellon-detail .v3-ship .it{display:grid;grid-template-columns:92px 1fr;gap:0 12px;padding:16px 0;border-bottom:1px solid #e3e6eb}
.cellon-detail .v3-ship .it dt{font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--c-navy)}
.cellon-detail .v3-ship .it dd{font-size:13.5px;line-height:1.7;color:var(--t-body)}
.cellon-detail .v3-ship .foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cellon-detail .v3-ship .foot b{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--t-head)}
.cellon-detail .v3-ship .foot p{text-align:right;font-size:11.5px;line-height:1.5;color:var(--t-sub)}
@media (min-width:641px){
.cellon-detail .v3-ship{padding:96px 48px}
.cellon-detail .v3-ship h2{font-size:36px}
.cellon-detail .v3-ship .sub{margin-top:12px;font-size:16px}
.cellon-detail .v3-ship .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;margin-top:48px}
.cellon-detail .v3-ship .tl li{display:block;text-align:center;padding:0}
.cellon-detail .v3-ship .tl li::before{left:calc(50% + 36px);right:calc(-50% + 36px);top:30px;bottom:auto;border-left:0;border-top:2px dashed #d7dbe4}
.cellon-detail .v3-ship .tl .d{width:60px;height:60px;margin:0 auto;font-size:19px}
.cellon-detail .v3-ship .tl .d small{font-size:10px}
.cellon-detail .v3-ship .tl .t{padding-top:16px}
.cellon-detail .v3-ship .tl .t b{font-size:19px}
.cellon-detail .v3-ship .tl .t p{font-size:15px}
.cellon-detail .v3-ship .nt{text-align:center;margin-top:18px;font-size:13px}
.cellon-detail .v3-ship dl{margin-top:48px}
.cellon-detail .v3-ship .it{grid-template-columns:200px 1fr;padding:22px 0}
.cellon-detail .v3-ship .it dt{font-size:17px}
.cellon-detail .v3-ship .it dd{font-size:15.5px}
.cellon-detail .v3-ship .foot{margin-top:32px}
.cellon-detail .v3-ship .foot b{font-size:26px}
.cellon-detail .v3-ship .foot p{font-size:13.5px}
}
.cellon-detail .v3-ship .foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:calc(34 * var(--u));font-size:calc(15 * var(--u));line-height:1.8;color:#666}
.cellon-detail .v3-ship .foot b{font-size:calc(18 * var(--u));font-weight:500;color:var(--t-head)}
.cellon-detail .v3-ship .foot p{text-align:right}

/* ───── 원료 섹션 공통(.v3-ingx): 2026-11-07 재구성, 모바일 우선(기본값이 모바일, 641px 이상에서 PC 값). 섹션별 차이는 아래 .v3-palm/.v3-octa 블록 ───── */
.cellon-detail .v3-ingx{--h:0;--navy:#14295c;--gold:var(--c-gold-d);min-height:0;background:#fff;color:var(--t-body);text-align:center;padding:44px 20px 44px}
.cellon-detail .v3-ingx .lead{font-size:15px;color:var(--t-lead)}
.cellon-detail .v3-ingx h2{margin-top:8px;font-size:26px;line-height:1.35;letter-spacing:-.04em;color:var(--navy)}
.cellon-detail .v3-ingx h2 em{color:var(--gold)}
.cellon-detail .v3-ingx .art{position:relative;margin:14px -20px 0;aspect-ratio:860/470;background-size:100% auto;background-repeat:no-repeat;background-position:0 calc(-310 * var(--u))}
.cellon-detail .v3-ingx .molw{position:absolute;left:calc(50% - 190 * var(--u));top:calc(54% - 31 * var(--u));width:calc(380 * var(--u))}
.cellon-detail .v3-ingx .mol{display:block;width:100%;height:auto;overflow:visible}
.cellon-detail .v3-ingx .mol path,.cellon-detail .v3-ingx .mol line{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cellon-detail .v3-ingx .mol text{font:500 13px var(--font);fill:var(--navy);paint-order:stroke;stroke:rgba(255,255,255,.6);stroke-width:3px;stroke-linejoin:round}
.cellon-detail .v3-ingx .molcap{position:absolute;left:0;right:0;top:68%;font-size:calc(17 * var(--u));color:var(--navy)}
/* 범위 게이지 */
.cellon-detail .v3-ingx .gauge{margin:20px auto 0;max-width:560px}
.cellon-detail .v3-ingx .ends{display:flex;justify-content:space-between;align-items:flex-end}
.cellon-detail .v3-ingx .e{text-align:left}
.cellon-detail .v3-ingx .e.max{text-align:right}
.cellon-detail .v3-ingx .chip{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:#eceef2;color:#888}
.cellon-detail .v3-ingx .chip.on{background:var(--navy);color:#fff}
.cellon-detail .v3-ingx .e b{display:block;margin-top:6px;font-size:26px;font-weight:800;line-height:1;letter-spacing:-.03em;color:#9a9a9a;font-variant-numeric:tabular-nums}
.cellon-detail .v3-ingx .e b small{font-size:13px;font-weight:700;margin-left:1px}
.cellon-detail .v3-ingx .e.max b{font-size:48px;color:var(--navy)}
.cellon-detail .v3-ingx .e.max b small{font-size:20px}
.cellon-detail .v3-ingx .track{position:relative;height:12px;margin:16px 8px 0;border-radius:999px;background:#e6e9ef}
.cellon-detail .v3-ingx .fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#d6dce8,var(--navy))}
.cellon-detail .v3-ingx .dot{position:absolute;right:-8px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:#fff;border:6px solid var(--navy);box-shadow:0 2px 8px rgba(20,41,92,.3)}
.cellon-detail .v3-ingx .std{margin-top:14px;font-size:12px;color:var(--t-note)}
/* 쏘팔메토란? 박스: 높이는 글에 맞추고 사진은 오른쪽에 붙박이 */
.cellon-detail .v3-ingx .box{position:relative;margin:28px -4px 0;padding:22px 108px 22px 20px;border-radius:14px;background:#f3f6f1;text-align:left;overflow:hidden}
.cellon-detail .v3-ingx .bt h3{font-size:24px;font-weight:700;letter-spacing:-.04em;line-height:1.2;color:var(--t-head)}
.cellon-detail .v3-ingx .bt h3 b{font-weight:800;color:var(--navy)}
.cellon-detail .v3-ingx .bt p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--t-body)}
.cellon-detail .v3-ingx .bt p+p{margin-top:8px}
.cellon-detail .v3-ingx .bt p b{font-weight:800;color:#111}
.cellon-detail .v3-ingx .bt br.pc{display:none}
.cellon-detail .v3-ingx .bi{position:absolute;top:0;right:0;bottom:0;width:112px}
.cellon-detail .v3-ingx .bi img{display:block;width:100%;height:100%;object-fit:cover;object-position:28% 32%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
@media (min-width:641px){
.cellon-detail .v3-ingx{padding:95px 48px 70px} /* 2026-11-08: 좌우 75→48, 게이지·박스 폭 제한 해제 (모바일처럼 양옆 꽉 채움) */
.cellon-detail .v3-ingx .lead{font-size:20px}
.cellon-detail .v3-ingx h2{margin-top:14px;font-size:44px;line-height:1.3}
.cellon-detail .v3-ingx .art{margin:16px -48px 0}
.cellon-detail .v3-ingx .gauge{margin-top:36px;max-width:none}
.cellon-detail .v3-ingx .chip{font-size:14px;padding:4px 14px}
.cellon-detail .v3-ingx .e b{font-size:34px;margin-top:8px}
.cellon-detail .v3-ingx .e b small{font-size:16px}
.cellon-detail .v3-ingx .e.max b{font-size:72px}
.cellon-detail .v3-ingx .e.max b small{font-size:28px}
.cellon-detail .v3-ingx .track{height:14px;margin-top:22px}
.cellon-detail .v3-ingx .dot{width:30px;height:30px;margin-top:-15px;right:-9px}
.cellon-detail .v3-ingx .std{font-size:13px;margin-top:18px}
.cellon-detail .v3-ingx .box{margin:52px 0 0;padding:34px 320px 34px 40px}
.cellon-detail .v3-ingx .bt h3{font-size:38px}
.cellon-detail .v3-ingx .bt p{font-size:19px;margin-top:18px;line-height:1.65}
.cellon-detail .v3-ingx .bt p+p{margin-top:12px}
.cellon-detail .v3-ingx .bt br.pc{display:inline}
.cellon-detail .v3-ingx .bi{width:300px}
}
/* 게이지 모션: 막대가 왼쪽에서 차오른 뒤 끝점이 튀어나옴 (숫자는 data-num 카운트) */
.cellon-detail.motion .v3-ingx .fill{transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .2s}
.cellon-detail.motion .v3-ingx .gauge.in .fill{transform:none}
.cellon-detail.motion .v3-ingx .dot{opacity:0;transform:scale(.4);transition:opacity .3s ease 1.3s,transform .45s cubic-bezier(.2,.8,.2,1.3) 1.3s}
.cellon-detail.motion .v3-ingx .gauge.in .dot{opacity:1;transform:none}
/* 섹션별 차이 */
.cellon-detail .v3-palm .art{background-image:url(../img/product/bg-ing-palmetto.png)}
.cellon-detail .v3-octa .art{background-image:url(../img/product/bg-ing-octacosanol.png)}
.cellon-detail .v3-octa .molw{left:calc(50% - 270 * var(--u));top:calc(57% - 44 * var(--u));width:calc(540 * var(--u))}
.cellon-detail .v3-octa .mol{transform:rotate(-16deg)}
.cellon-detail .v3-octa .molcap{top:80%}
.cellon-detail .v3-octa .box{background:#f7f4ec}
.cellon-detail .v3-octa .bi img{object-position:45% 50%}
.cellon-detail .v3-gink .art{background-image:url(../img/product/bg-ing-ginkgo.png)}
.cellon-detail .v3-gink .molw{left:calc(50% - 165 * var(--u));top:calc(55% - 110 * var(--u));width:calc(330 * var(--u))}
.cellon-detail .v3-gink .molcap{top:82%}
.cellon-detail .v3-gink .box{background:#eef5ea}
.cellon-detail .v3-gink .bi img{object-position:50% 50%}

/* ───── 연구 근거(.v3-evi, 2026-11-08 신설, 모바일 우선): 안국약품 섹션 회색 바탕, 큰 숫자 7,500(카운트 후 연한 금색 띠 .hl), 오픈액세스 논문 표지 5장 더미, 원료 카드 3장, 출처 접힘. 네이비는 7,500과 원료명에만 ───── */
.cellon-detail .v3-evi{--gold-l:rgba(230,200,142,.55);min-height:0;background:var(--c-gray);color:var(--t-body);text-align:center;padding:52px 20px 56px;overflow:hidden}
.cellon-detail .v3-evi i{font-style:normal}
.cellon-detail .v3-evi .lead{font-size:15px;color:var(--t-lead)}
.cellon-detail .v3-evi h2{margin-top:8px;font-size:26px;line-height:1.35;letter-spacing:-.04em;color:var(--t-head)}
.cellon-detail .v3-evi .sum{margin-top:26px}
.cellon-detail .v3-evi .n{font-size:64px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--c-navy);font-variant-numeric:tabular-nums}
.cellon-detail .v3-evi .n em{position:relative;z-index:0;display:inline-block;padding:0 .04em}
.cellon-detail .v3-evi .n em::before{content:'';position:absolute;left:-.02em;right:-.02em;bottom:-.02em;height:.36em;background:var(--gold-l);border-radius:2px;z-index:-1}
/* 띠는 모션 없이 항상 그어진 상태 (2026-11-08 사용자 요청으로 모션 삭제) */
.cellon-detail .v3-evi .n small{font-size:22px;font-weight:700;margin-left:4px;letter-spacing:-.02em}
.cellon-detail .v3-evi .cap{margin-top:10px;font-size:13px;color:var(--t-sub);letter-spacing:-.01em}
/* 표지 더미 */
.cellon-detail .v3-evi .stack{position:relative;height:226px;margin:28px auto 0;width:335px;max-width:100%}
.cellon-detail .v3-evi .stack img{position:absolute;bottom:10px;width:136px;height:auto;border-radius:3px;box-shadow:0 10px 26px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);transform-origin:50% 100%}
.cellon-detail .v3-evi .stack img:nth-child(1){left:15px;transform:rotate(-7deg);z-index:1}
.cellon-detail .v3-evi .stack img:nth-child(2){left:57px;transform:rotate(-3.5deg) translateY(-6px);z-index:2}
.cellon-detail .v3-evi .stack img:nth-child(3){left:99px;transform:translateY(-10px);z-index:3}
.cellon-detail .v3-evi .stack img:nth-child(4){left:141px;transform:rotate(3.5deg) translateY(-6px);z-index:2}
.cellon-detail .v3-evi .stack img:nth-child(5){left:183px;transform:rotate(7deg);z-index:1}
.cellon-detail .v3-evi .stack::after{content:'';position:absolute;left:12%;right:12%;bottom:2px;height:16px;border-radius:50%;background:rgba(0,0,0,.10);filter:blur(8px);z-index:0}
/* 원료 카드 */
.cellon-detail .v3-evi .grid{margin-top:26px}
.cellon-detail .v3-evi .evc{margin-top:12px;background:#fff;border-radius:18px;padding:18px 18px 16px;box-shadow:0 6px 18px rgba(0,0,0,.06);text-align:left}
.cellon-detail .v3-evi .hd{display:flex;align-items:center;gap:14px}
.cellon-detail .v3-evi .hd img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px #fff,0 0 0 4px #e6e8ec}
.cellon-detail .v3-evi .hd b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--c-navy);line-height:1.3}
.cellon-detail .v3-evi .hd small{display:block;font-size:12px;color:#8a8f99;margin-top:2px}
.cellon-detail .v3-evi .hd .fn{margin-top:3px;font-size:12px;color:var(--t-lead)}
.cellon-detail .v3-evi .st{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid #eef0f3}
.cellon-detail .v3-evi .st b{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--t-head);font-variant-numeric:tabular-nums;white-space:nowrap}
.cellon-detail .v3-evi .st b small{font-size:13px;font-weight:700;margin-left:2px;color:var(--t-body)}
.cellon-detail .v3-evi .st i{font-size:11.5px;color:var(--t-sub);text-align:right;line-height:1.4}
/* 출처 접힘 + 각주 */
.cellon-detail .v3-evi .src{margin:22px auto 0;max-width:560px;text-align:left}
.cellon-detail .v3-evi .src summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t-sub);padding:4px 0}
.cellon-detail .v3-evi .src summary::-webkit-details-marker{display:none}
.cellon-detail .v3-evi .src summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.cellon-detail .v3-evi .src[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.cellon-detail .v3-evi .src ol{list-style:none;margin-top:8px;padding:12px 14px;background:rgba(255,255,255,.6);border-radius:10px;font-size:11px;line-height:1.5;color:var(--t-sub)}
.cellon-detail .v3-evi .src li{padding-left:16px;text-indent:-16px;margin-top:3px}
.cellon-detail .v3-evi .src li:first-child{margin-top:0}
.cellon-detail .v3-evi .src li b{color:var(--t-lead);font-weight:600}
.cellon-detail .v3-evi .src li.lic{margin-top:8px;padding-left:0;text-indent:0;color:var(--t-note)}
.cellon-detail .v3-evi .evnote{margin-top:14px;font-size:11px;line-height:1.6;color:var(--t-note)}
.cellon-detail .v3-evi .evnote b{color:var(--t-sub);font-weight:600}
@media (min-width:641px){
.cellon-detail .v3-evi{padding:100px 48px 100px}
.cellon-detail .v3-evi .lead{font-size:20px}
.cellon-detail .v3-evi h2{margin-top:14px;font-size:44px;line-height:1.3}
.cellon-detail .v3-evi .sum{margin-top:40px}
.cellon-detail .v3-evi .n{font-size:calc(120 * var(--u))}
.cellon-detail .v3-evi .n small{font-size:calc(36 * var(--u));margin-left:8px}
.cellon-detail .v3-evi .cap{font-size:15px;margin-top:16px}
.cellon-detail .v3-evi .stack{width:100%;height:calc(320 * var(--u));margin-top:56px}
.cellon-detail .v3-evi .stack img{width:calc(180 * var(--u));bottom:calc(14 * var(--u))}
.cellon-detail .v3-evi .stack img:nth-child(1){left:50%;margin-left:calc(-360 * var(--u));transform:rotate(-8deg)}
.cellon-detail .v3-evi .stack img:nth-child(2){left:50%;margin-left:calc(-225 * var(--u));transform:rotate(-4deg) translateY(calc(-14 * var(--u)))}
.cellon-detail .v3-evi .stack img:nth-child(3){left:50%;margin-left:calc(-90 * var(--u));transform:translateY(calc(-22 * var(--u)))}
.cellon-detail .v3-evi .stack img:nth-child(4){left:50%;margin-left:calc(45 * var(--u));transform:rotate(4deg) translateY(calc(-14 * var(--u)))}
.cellon-detail .v3-evi .stack img:nth-child(5){left:50%;margin-left:calc(180 * var(--u));transform:rotate(8deg)}
.cellon-detail .v3-evi .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.cellon-detail .v3-evi .evc{margin:0;padding:26px 22px 22px;border-radius:20px}
.cellon-detail .v3-evi .hd{flex-direction:column;align-items:center;text-align:center;gap:14px}
.cellon-detail .v3-evi .hd img{width:96px;height:96px}
.cellon-detail .v3-evi .hd b{font-size:20px}
.cellon-detail .v3-evi .hd small{font-size:13px}
.cellon-detail .v3-evi .hd .fn{font-size:13.5px;margin-top:6px}
.cellon-detail .v3-evi .st{flex-direction:column;align-items:center;gap:8px;margin-top:20px;padding-top:18px}
.cellon-detail .v3-evi .st b{font-size:38px}
.cellon-detail .v3-evi .st b small{font-size:15px}
.cellon-detail .v3-evi .st i{font-size:12.5px;text-align:center}
.cellon-detail .v3-evi .src{margin-top:40px;max-width:760px}
.cellon-detail .v3-evi .src summary{font-size:13px}
.cellon-detail .v3-evi .src ol{font-size:12px;columns:2;column-gap:32px;padding:16px 20px}
.cellon-detail .v3-evi .src li{break-inside:avoid}
.cellon-detail .v3-evi .src li.lic{column-span:all}
.cellon-detail .v3-evi .evnote{margin-top:18px;font-size:13px}
}

/* ───── 인체적용시험 결과 (2026-11-08 신설, 모바일 우선): 원료명 라벨 + 지표명·큰 숫자 한 줄, 아래 가로 막대 2개 비교(점·점선 없음), 옆 원료 사진. 순서 쏘팔메토→옥타코사놀→은행잎. 네이비는 키워드·숫자·결과 막대에만 ───── */
.cellon-detail .v3-trial{--h:0;--line:#e3e7ee;min-height:0;background:#fff;color:var(--t-body);padding:52px 20px 48px;line-height:1.6}
.cellon-detail .v3-trial .hd{text-align:center}
.cellon-detail .v3-trial .lead{font-size:15px;color:var(--t-lead)}
.cellon-detail .v3-trial h2{margin-top:8px;font-size:26px;font-weight:800;line-height:1.35;letter-spacing:-.04em;color:var(--t-head)}
.cellon-detail .v3-trial .cap{margin-top:10px;font-size:13px;letter-spacing:-.01em;color:var(--t-sub)}
/* 결과 블록 */
.cellon-detail .v3-trial .blk{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.cellon-detail .v3-trial .blk:first-of-type{margin-top:30px;border-top:0;padding-top:0}
.cellon-detail .v3-trial .tl{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cellon-detail .v3-trial .no{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--t-sub)}
.cellon-detail .v3-trial .ttl{margin-top:4px;font-size:21px;font-weight:800;letter-spacing:-.04em;line-height:1.3;color:var(--t-head)}
.cellon-detail .v3-trial .ttl em{font-style:normal;color:var(--c-navy)}
.cellon-detail .v3-trial .ttl b{display:block;margin-top:2px;font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--c-navy);font-variant-numeric:tabular-nums}
.cellon-detail .v3-trial .ttl b small{font-size:18px;font-weight:700;margin-left:2px}
.cellon-detail .v3-trial .ph{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.cellon-detail .v3-trial .pic{display:none}
/* 가로 막대 차트 */
.cellon-detail .v3-trial .ch{position:relative;margin-top:18px;padding:0 0 26px}
.cellon-detail .v3-trial .bar{position:relative;height:34px;display:flex;align-items:center;margin-top:8px}
.cellon-detail .v3-trial .bar:first-child{margin-top:0}
.cellon-detail .v3-trial .bar .fl{height:100%;border-radius:0 3px 3px 0;background:#eef1f6;border:1px solid #d7dde8;display:flex;align-items:center;padding-left:12px;font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--t-body);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.cellon-detail .v3-trial .bar.on .fl{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.cellon-detail .v3-trial .ax{position:relative;height:18px;margin-top:6px;border-top:1px solid #cfd5e0}
.cellon-detail .v3-trial .ax span{position:absolute;top:3px;transform:translateX(-50%);font-size:11px;color:var(--t-sub);font-variant-numeric:tabular-nums}
.cellon-detail .v3-trial .ax span:nth-last-child(2){transform:translateX(-100%)}
.cellon-detail .v3-trial .ax .un{right:-18px;left:auto;transform:none;font-weight:600;color:var(--t-lead)}
.cellon-detail .v3-trial .lg{position:absolute;left:0;bottom:0;display:flex;gap:12px;font-size:11.5px;color:var(--t-lead)}
.cellon-detail .v3-trial .lg i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:5px;background:#eef1f6;border:1px solid #d7dde8}
.cellon-detail .v3-trial .lg i.n{background:var(--c-navy);border-color:var(--c-navy)}
/* 결론 + 시험 정보 + 각주 */
.cellon-detail .v3-trial .cc{margin-top:12px;font-size:15px;font-weight:600;line-height:1.5;letter-spacing:-.02em;color:var(--t-body)}
.cellon-detail .v3-trial .cc b{font-weight:800;color:var(--t-head)}
.cellon-detail .v3-trial .mt{margin-top:10px;font-size:11px;line-height:1.7;color:var(--t-sub)}
.cellon-detail .v3-trial .mt span{display:inline}
.cellon-detail .v3-trial .mt span+span::before{content:'|';margin:0 7px;color:#cfd5e0}
.cellon-detail .v3-trial .trnote{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--t-note);text-align:center}
.cellon-detail .v3-trial .trnote b{color:var(--t-sub);font-weight:600}
/* 모션: 블록이 보이면 막대가 왼쪽에서 자람 */
.cellon-detail.motion .v3-trial .blk[data-rv] .fl{transition:width .9s cubic-bezier(.2,.7,.2,1) .15s}
.cellon-detail.motion .v3-trial .blk[data-rv]:not(.in) .fl{width:0!important}
@media (min-width:641px){
.cellon-detail .v3-trial{padding:100px 48px 90px}
.cellon-detail .v3-trial .lead{font-size:20px}
.cellon-detail .v3-trial h2{margin-top:14px;font-size:44px;line-height:1.3}
.cellon-detail .v3-trial .cap{font-size:15px;margin-top:16px}
.cellon-detail .v3-trial .blk{display:grid;grid-template-columns:1fr 260px;gap:0 56px;align-items:center;margin-top:44px;padding-top:44px}
.cellon-detail .v3-trial .blk:first-of-type{margin-top:56px}
.cellon-detail .v3-trial .tl{display:block}
.cellon-detail .v3-trial .ph{display:none}
.cellon-detail .v3-trial .pic{display:block;grid-column:2;grid-row:1/4;justify-self:end;width:260px;height:260px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #fff,0 0 0 7px var(--line)}
.cellon-detail .v3-trial .tl,.cellon-detail .v3-trial .ch,.cellon-detail .v3-trial .cc{grid-column:1}
.cellon-detail .v3-trial .mt{grid-column:1/-1;margin-top:18px;font-size:12.5px}
.cellon-detail .v3-trial .no{font-size:12px}
.cellon-detail .v3-trial .ttl{font-size:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cellon-detail .v3-trial .ttl b{display:inline;margin:0;font-size:52px}
.cellon-detail .v3-trial .ttl b small{font-size:24px}
.cellon-detail .v3-trial .ch{margin-top:22px;max-width:560px}
.cellon-detail .v3-trial .bar{height:38px}
.cellon-detail .v3-trial .bar .fl{font-size:15px;padding-left:14px}
.cellon-detail .v3-trial .ax span{font-size:12px}
.cellon-detail .v3-trial .cc{font-size:18px;margin-top:16px}
.cellon-detail .v3-trial .trnote{margin-top:56px;font-size:13px}
.cellon-detail .v3-trial .trnote b{display:block;margin-bottom:4px}
}

/* ───── 비타민·미네랄 5종 (2026-11-08 재구성, 모바일 우선): 제품 상자 누끼(box-cut.png)를 흰 원 가운데, 둘레 원 위에 이름 칩 5개, 아래 주원료 표. 레퍼런스: 일양약품 POINT 1 원형 배치 + 주원료 표 ───── */
.cellon-detail .v3-vit{--h:0;--line:#d5dfeb;min-height:0;background:#edf5fc;color:var(--t-body);text-align:center;padding:52px 20px 52px;overflow:hidden}
.cellon-detail .v3-vit .lead{font-size:15px;color:var(--t-lead)}
.cellon-detail .v3-vit h2{margin-top:8px;font-size:26px;font-weight:800;line-height:1.35;letter-spacing:-.04em;color:var(--t-head)}
.cellon-detail .v3-vit .sub{margin-top:12px;font-size:14px;line-height:1.65;color:var(--t-body)}
/* 원형 다이어그램 */
.cellon-detail .v3-vit .dg{position:relative;width:300px;height:300px;margin:36px auto 0}
.cellon-detail .v3-vit .dg .ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #b9c8dc}
.cellon-detail .v3-vit .dg .ring.o{width:80%;height:80%}
.cellon-detail .v3-vit .dg .ring.i{width:62%;height:62%;border-color:#cfdbe9;border-style:dashed}
.cellon-detail .v3-vit .dg .pic{position:absolute;left:50%;top:50%;width:166px;height:166px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;object-fit:contain;box-shadow:0 0 0 1px #dbe4ef,0 10px 24px rgba(20,41,92,.14)}
.cellon-detail .v3-vit .dg .ch{position:absolute;transform:translate(-50%,-50%);display:inline-block;white-space:nowrap;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(20,41,92,.08);font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--t-head)}
.cellon-detail .v3-vit .dg .ch sub{font-size:.7em;vertical-align:-.25em;margin-left:1px}
/* 주원료 표 */
.cellon-detail .v3-vit .tb{margin-top:34px;text-align:left;border-top:2px solid #b9c8dc}
.cellon-detail .v3-vit .tb .r{display:grid;grid-template-columns:86px 1fr 86px;gap:0 12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.cellon-detail .v3-vit .tb .r.h{padding:9px 0;font-size:11.5px;font-weight:600;color:var(--t-sub);letter-spacing:.02em}
.cellon-detail .v3-vit .tb .r.h span:last-child{text-align:right}
.cellon-detail .v3-vit .tb .nm{font-size:15px;font-weight:800;letter-spacing:-.03em;line-height:1.3;color:var(--t-head)}
.cellon-detail .v3-vit .tb .nm sub{font-size:.7em;vertical-align:-.25em}
.cellon-detail .v3-vit .tb .fn{font-size:12.5px;line-height:1.55;color:var(--t-body)}
.cellon-detail .v3-vit .tb .am{text-align:right;font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--t-head);font-variant-numeric:tabular-nums}
.cellon-detail .v3-vit .tb .am small{display:block;font-size:12px;font-weight:800;color:var(--c-navy)}
.cellon-detail .v3-vit .tb .am i{font-style:normal;font-size:11px;font-weight:600;color:var(--t-sub);margin-left:2px}
/* 마무리 */
.cellon-detail .v3-vit .all{margin-top:30px;font-size:20px;font-weight:800;letter-spacing:-.04em;line-height:1.35;color:var(--t-head)}
.cellon-detail .v3-vit .all em{font-style:normal;color:var(--c-navy)}
.cellon-detail .v3-vit .plus{margin-top:10px;font-size:14px;line-height:1.6;letter-spacing:-.02em;color:var(--t-lead)}
.cellon-detail .v3-vit .std{margin-top:8px;font-size:11.5px;color:var(--t-sub)}
@media (min-width:641px){
.cellon-detail .v3-vit{padding:100px 48px 96px}
.cellon-detail .v3-vit .lead{font-size:20px}
.cellon-detail .v3-vit h2{margin-top:14px;font-size:44px;line-height:1.3}
.cellon-detail .v3-vit .sub{margin-top:22px;font-size:19px;line-height:1.7}
.cellon-detail .v3-vit .bd{display:grid;grid-template-columns:420px 1fr;gap:0 56px;align-items:center;margin-top:56px}
.cellon-detail .v3-vit .dg{width:420px;height:420px;margin:0}
.cellon-detail .v3-vit .dg .pic{width:236px;height:236px;box-shadow:0 0 0 1px #dbe4ef,0 14px 32px rgba(20,41,92,.16)}
.cellon-detail .v3-vit .dg .ch{font-size:15px;padding:8px 18px}
.cellon-detail .v3-vit .tb{margin-top:0}
.cellon-detail .v3-vit .tb .r{grid-template-columns:120px 1fr 112px;gap:0 18px;padding:15px 0}
.cellon-detail .v3-vit .tb .r.h{font-size:12.5px}
.cellon-detail .v3-vit .tb .nm{font-size:17px}
.cellon-detail .v3-vit .tb .fn{font-size:14px}
.cellon-detail .v3-vit .tb .am{font-size:17px}
.cellon-detail .v3-vit .tb .am small{font-size:13px}
.cellon-detail .v3-vit .all{margin-top:56px;font-size:30px}
.cellon-detail .v3-vit .plus{margin-top:14px;font-size:17px}
.cellon-detail .v3-vit .std{margin-top:10px;font-size:13px}
}
/* 모션: 다이어그램 요소(원·사진·칩)는 가운데 정렬 transform을 유지해야 하므로 공통 reveal을 덮어씀. 원은 살짝 커지며, 칩은 작게 시작해 차례로 켜짐. 표 행은 공통 reveal */
.cellon-detail.motion .v3-vit .dg .ring[data-rv]{opacity:0;transform:translate(-50%,-50%) scale(.85)}
.cellon-detail.motion .v3-vit .dg .pic[data-rv]{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.cellon-detail.motion .v3-vit .dg .ch[data-rv]{opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .5s ease var(--d,0s),transform .5s cubic-bezier(.2,.8,.2,1.2) var(--d,0s)}
.cellon-detail.motion .v3-vit .dg .ring[data-rv].in,.cellon-detail.motion .v3-vit .dg .pic[data-rv].in,.cellon-detail.motion .v3-vit .dg .ch[data-rv].in{opacity:1;transform:translate(-50%,-50%)}
/* ───── 모션 (detail.js가 .cellon-detail에 .motion을 붙이면 켜짐) ───── */
/* 가로선: 왼쪽에서 그어짐 */
.cellon-detail.motion .v3 .ln[data-rv]{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.cellon-detail.motion .v3 .ln[data-rv].in{transform:none}
/* 체크 아이콘: 획이 그려짐 */
.cellon-detail.motion .v3-rec .ck path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s ease-out calc(var(--d,0s) + .35s)}
.cellon-detail.motion .v3-rec li.in .ck path{stroke-dashoffset:0}
/* 특별한 이유: 점선 연결선이 위에서 아래로 그려짐 */
/* 아이콘 원: 살짝 커지며 등장 */
/* 알약 칸·라벨: 살짝 커지며 등장 */
/* 숫자 강조: 등장 뒤 한 번 튕김 */
.cellon-detail.motion [data-num].in{animation:v3-pop .5s cubic-bezier(.2,.8,.2,1.3) 1.25s both}
@keyframes v3-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.cellon-detail .v3 [data-num]{display:inline-block}