/* advanced.css v2 — 무리플로우 오버레이 · 효능 2열 · 원료 검색 · 제형 아이콘 · 상부 클램프 */
.stage{ min-height:100vh; background:#E7E7EC; padding:40px 28px; display:flex; gap:36px; align-items:flex-start; justify-content:center; }
.col{ display:flex; flex-direction:column; gap:12px; }
.colcap .k{ font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--accent); margin:0 0 4px; padding-left:6px; }
.colcap .t{ font-size:15px; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--ink); padding-left:6px; }
.colcap .d{ font-size:12px; color:var(--ink3); margin:3px 0 0; line-height:1.5; max-width:400px; padding-left:6px; }
.phone{ position:relative; width:412px; height:868px; background:var(--surface); border:1px solid var(--line2); border-radius:38px; overflow:hidden;
  box-shadow:0 26px 64px -28px rgba(20,20,26,.42), 0 3px 10px rgba(20,20,26,.05); display:flex; flex-direction:column; }
.arrowcol{ align-self:center; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink4); padding-top:120px; }
.arrowcol .a{ font-size:24px; color:var(--accent); }
.arrowcol .l{ font-size:11px; font-weight:800; writing-mode:vertical-rl; letter-spacing:.1em; }
#adv-list{ overflow-y:auto; scrollbar-width:none; } #adv-list::-webkit-scrollbar{ display:none; }

/* 헤더 + 모드 토글 */
.pg-hd{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
.pg-hd .t{ font-size:16px; font-weight:800; letter-spacing:-.02em; } .pg-hd .sp{ flex:1; }
.modeseg{ display:inline-flex; padding:2.5px; background:var(--raise); border-radius:9px; gap:2px; }
.modeseg .m{ height:28px; padding:0 13px; border-radius:7px; font-size:12px; font-weight:800; color:var(--ink3); display:flex; align-items:center; gap:5px; cursor:pointer; }
.modeseg .m.on{ background:var(--surface); color:var(--accent-ink); box-shadow:0 1px 2px rgba(0,0,0,.1); }
.modeseg .m .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }

.pg-scroll{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; } .pg-scroll::-webkit-scrollbar{ display:none; }
.sf-sec{ padding:15px 16px; border-bottom:8px solid var(--bg); position:relative; }
.sf-sec:last-child{ border-bottom:none; }
.sf-h{ font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.sf-h .sp{ flex:1; }
.hint-r{ font-size:11px; color:var(--ink4); font-weight:700; }

/* AND/OR */
.logic{ display:inline-flex; padding:2px; background:var(--raise); border-radius:7px; gap:1px; }
.logic .lg{ height:24px; padding:0 9px; border-radius:5px; font-size:10.5px; font-weight:800; color:var(--ink4); display:flex; align-items:center; cursor:pointer; }
.logic .lg.on{ background:var(--accent); color:#fff; }
.logic .lg small{ font-weight:700; opacity:.8; margin-left:3px; font-size:9px; }

/* ── 정렬: 기본 인플레이스 펼침(무리플로우) ── */
.sortpick{ position:relative; }
.sortcur{ display:flex; align-items:center; gap:10px; padding:13px 14px; border:1.5px solid var(--line2); border-radius:13px; cursor:pointer; background:var(--surface); }
.sortcur.open{ border-color:var(--accent); }
.sortcur .ic{ width:30px; height:30px; border-radius:9px; background:var(--accent-weak); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex:none; }
.sortcur .m{ flex:1; min-width:0; } .sortcur .m .nm{ font-size:13.5px; font-weight:800; } .sortcur .m .bs{ font-size:11px; color:var(--ink4); font-weight:600; margin-top:2px; }
.sortcur .dir{ font-size:11px; font-weight:800; color:var(--accent); background:var(--accent-weak); border-radius:7px; padding:4px 9px; flex:none; }
.sortcur .chev{ color:var(--ink4); font-size:12px; transition:transform .2s; } .sortcur.open .chev{ transform:rotate(180deg); }
.sortdrop{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30; background:var(--surface); border:1.5px solid var(--accent-line);
  border-radius:14px; box-shadow:0 18px 44px -16px rgba(20,20,26,.4); padding:7px; display:flex; flex-direction:column; gap:5px; }
.sortopt{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:10px; cursor:pointer; }
.sortopt:hover{ background:var(--bg); } .sortopt.on{ background:var(--accent-weak); }
.sortopt .nm{ font-size:13px; font-weight:800; flex:1; } .sortopt.on .nm{ color:var(--accent-ink); }
.sortopt .bs{ font-size:10.5px; color:var(--ink4); font-weight:600; } .sortopt .dir{ font-size:10.5px; font-weight:800; color:var(--ink3); flex:none; }
.sortopt .mtag{ font-size:9px; font-weight:800; color:var(--accent); background:var(--accent-weak); border-radius:5px; padding:1px 5px; }

/* 정렬 고급 1·2순위 */
.tiers{ display:flex; flex-direction:column; gap:9px; }
.tier{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1.5px solid var(--line2); border-radius:13px; cursor:pointer; background:var(--surface); }
.tier.set{ border-color:var(--accent-line); background:var(--accent-weak); }
.tier .no{ width:22px; height:22px; border-radius:6px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.tier.t2 .no{ background:var(--ink3); }
.tier .m{ flex:1; min-width:0; } .tier .m .nm{ font-size:13px; font-weight:800; } .tier.set .m .nm{ color:var(--accent-ink); } .tier .m .bs{ font-size:10.5px; color:var(--ink4); font-weight:600; margin-top:1px; }
.tier .dir{ font-size:10.5px; font-weight:800; color:var(--ink3); flex:none; } .tier .clr{ font-size:14px; color:var(--ink4); flex:none; }
.tierhint{ font-size:11px; color:var(--ink4); font-weight:600; margin-top:8px; line-height:1.5; }
/* 원료 타깃 선택 (정렬) */
/* 원료/효능 기준 타깃 (정렬) — 자동은 중앙 1줄, 다중은 칩 중앙 */
.mattarget{ margin-top:10px; padding:11px 12px; border:1.5px solid var(--accent-line); border-radius:12px; background:var(--accent-weak); }
.mattarget .l{ font-size:11px; font-weight:800; color:var(--accent-ink); margin-bottom:9px; display:flex; align-items:center; justify-content:center; gap:7px; }
.mattarget .l .auto{ font-size:9px; font-weight:800; color:#fff; background:var(--accent); border-radius:5px; padding:2px 6px; }
.mattarget .opts{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.mattarget.auto{ display:flex; align-items:center; justify-content:center; gap:8px; }
.mattarget.auto .mt-lab{ font-size:11px; font-weight:800; color:var(--accent); }
.mattarget.auto .mt-val{ font-size:13.5px; font-weight:800; color:var(--accent-ink); letter-spacing:-.01em; }
.mattarget.auto .mt-auto{ font-size:9px; font-weight:800; color:#fff; background:var(--accent); border-radius:5px; padding:2px 6px; }
.mtopt{ height:28px; padding:0 11px; border-radius:999px; border:1.5px solid var(--line2); background:var(--surface); font-size:11.5px; font-weight:700; color:var(--ink2); cursor:pointer; }
.mtopt.on{ border-color:var(--accent); background:var(--accent); color:#fff; }
.mtopt.lock{ border-color:var(--accent); background:var(--accent); color:#fff; cursor:default; }
/* 다중 선택 시: 깔끔한 세그먼트 선택기 */
.mattarget.pick{ display:flex; flex-direction:column; align-items:center; gap:9px; background:var(--surface); border:1.5px solid var(--accent-line); }
.mattarget.pick .mt-pl{ font-size:11px; font-weight:800; color:var(--accent-ink); display:flex; align-items:center; gap:6px; }
.mattarget.pick .mt-pl .mt-sub{ font-size:9.5px; font-weight:700; color:var(--ink4); }
.mtseg{ display:flex; flex-wrap:wrap; justify-content:center; gap:3px; padding:3px; background:var(--raise); border-radius:10px; max-width:100%; }
.mtseg-i{ height:30px; padding:0 12px; border-radius:8px; border:none; background:transparent; font-size:11.5px; font-weight:800; color:var(--ink3); cursor:pointer; white-space:nowrap; }
.mtseg-i.on{ background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12); }

/* ── 효능 10대분류 2열 + 확대창 ── */
.efftree{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.effmaj{ display:flex; align-items:center; gap:8px; padding:11px 12px; border:1.5px solid var(--line2); border-radius:12px; cursor:pointer; background:var(--surface); }
.effmaj.has{ border-color:var(--accent); background:var(--accent-weak); }
.effmaj .nm{ font-size:12.5px; font-weight:800; flex:1; min-width:0; letter-spacing:-.02em; } .effmaj.has .nm{ color:var(--accent-ink); }
.effmaj .badge{ font-size:10px; font-weight:800; color:#fff; background:var(--accent); border-radius:999px; min-width:17px; height:17px; padding:0 5px; display:flex; align-items:center; justify-content:center; flex:none; }
.effmaj .chev{ font-size:10px; color:var(--ink4); flex:none; }

/* ── 칩 옵션 (제형/원료) ── */
.uopts{ display:flex; flex-wrap:wrap; gap:7px; }
.uopt{ height:34px; padding:0 12px; border-radius:999px; border:1.5px solid var(--line2); background:var(--surface); display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink2); cursor:pointer; }
.uopt .c{ font-size:11px; font-weight:800; color:var(--ink4); } .uopt.on{ border-color:var(--accent); background:var(--accent-weak); color:var(--accent-ink); } .uopt.on .c{ color:var(--accent); }
.uopt.on::before{ content:"✓"; font-size:10px; } .uopt.zero{ opacity:.4; pointer-events:none; }
.uopt .mk{ font-size:9.5px; color:var(--ink4); font-weight:700; }
.uopt.rel{ box-shadow:inset 0 0 0 1px var(--accent-line); }
.uopt .relstar{ font-size:9px; color:var(--accent); font-weight:800; }
.formico{ width:20px; height:20px; flex:none; }

/* 원료 검색 */
.matsearch{ display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border:1.5px solid var(--line2); border-radius:11px; margin-bottom:11px; background:var(--surface); }
.matsearch svg{ width:15px; height:15px; color:var(--ink4); flex:none; }
.matsearch input{ flex:1; border:none; outline:none; font-size:13px; font-weight:600; color:var(--ink); background:transparent; }
.matsearch input::placeholder{ color:var(--ink4); font-weight:500; }
.matsearch .clr{ font-size:13px; color:var(--ink4); cursor:pointer; }
.matrel-lb{ font-size:10px; font-weight:800; color:var(--accent); margin:0 0 7px; letter-spacing:.02em; }

/* 성분별 함량 (고급) */
.markers{ display:flex; flex-direction:column; gap:9px; }
.marker{ display:flex; align-items:center; gap:11px; padding:10px 13px; border:1.5px solid var(--line2); border-radius:12px; }
.marker.set{ border-color:var(--accent-line); background:var(--accent-weak); }
.marker .nm{ font-size:12.5px; font-weight:800; flex:none; width:84px; }
.marker .track{ flex:1; position:relative; height:5px; background:var(--raise2); border-radius:3px; cursor:pointer; }
.marker .track .fill{ position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:3px; }
.marker .track .h{ position:absolute; top:50%; width:15px; height:15px; border-radius:50%; background:#fff; border:2.5px solid var(--accent); transform:translate(-50%,-50%); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.marker .val{ font-size:12px; font-weight:800; color:var(--ink2); flex:none; width:74px; text-align:right; font-variant-numeric:tabular-nums; } .marker.set .val{ color:var(--accent-ink); }

/* 가격 */
.uhist{ display:flex; align-items:flex-end; gap:3px; height:46px; margin-bottom:4px; }
.uhist .b{ flex:1; background:var(--raise2); border-radius:3px 3px 0 0; cursor:pointer; } .uhist .b.in{ background:var(--accent); } .uhist .b.dim{ background:var(--line2); } .uhist .b:hover{ background:var(--accent-line); }
.priceseg{ display:flex; gap:5px; margin:9px 0; }
.pseg{ flex:1; height:28px; border-radius:7px; border:1.5px solid var(--line2); background:var(--surface); font-size:10.5px; font-weight:700; color:var(--ink3); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pseg.on{ border-color:var(--accent); background:var(--accent-weak); color:var(--accent-ink); }
.priceinput{ display:flex; align-items:center; gap:8px; }
.priceinput .pin{ flex:1; display:flex; align-items:center; gap:5px; height:38px; padding:0 11px; border:1.5px solid var(--line2); border-radius:10px; }
.priceinput .pin .w{ font-size:10px; font-weight:700; color:var(--ink4); }
.priceinput .pin input{ width:100%; border:none; outline:none; font-size:13px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; background:transparent; }
.priceinput .pin input::placeholder{ color:var(--ink4); font-weight:600; }
.priceinput .dash{ color:var(--ink4); font-weight:800; }
.basisseg{ display:inline-flex; padding:2px; background:var(--raise); border-radius:7px; gap:1px; }
.basisseg .bs{ height:25px; padding:0 10px; border-radius:5px; font-size:10.5px; font-weight:800; color:var(--ink4); display:flex; align-items:center; cursor:pointer; }
.basisseg .bs.on{ background:var(--surface); color:var(--accent-ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.basisseg .bs.adv::after{ content:"고급"; font-size:8px; color:var(--accent); margin-left:3px; }

.pg-ft{ padding:12px 16px; border-top:1px solid var(--line); background:var(--surface); display:flex; gap:10px; }
.pg-ft .clr{ flex:none; height:46px; padding:0 16px; border-radius:13px; border:1.5px solid var(--line2); background:#fff; font-size:13px; font-weight:800; color:var(--ink2); cursor:pointer; }
.pg-ft .apply{ flex:1; height:46px; border-radius:13px; border:none; background:var(--accent); color:#fff; font-size:14px; font-weight:800; cursor:pointer; }

/* ── 확대창 모달(무리플로우, 폰 내부) ── */
.ovl{ position:absolute; inset:0; z-index:60; display:none; }
.ovl.show{ display:block; }
.ovl-scrim{ position:absolute; inset:0; background:rgba(20,20,26,.42); }
.ovl-card{ position:absolute; left:16px; right:16px; top:50%; transform:translateY(-50%); max-height:78%; background:var(--surface); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 60px -18px rgba(0,0,0,.45); }
.ovl-hd{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--hair); }
.ovl-hd .t{ font-size:15px; font-weight:800; } .ovl-hd .sp{ flex:1; }
.ovl-hd .logic{ } .ovl-hd .x{ width:28px; height:28px; border-radius:8px; background:var(--raise); color:var(--ink3); display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; }
.ovl-bd{ overflow-y:auto; padding:14px 16px; scrollbar-width:none; } .ovl-bd::-webkit-scrollbar{ display:none; }
.ovl-bd .kidwrap{ display:flex; flex-wrap:wrap; gap:8px; }
.kidchip{ height:34px; padding:0 13px; border-radius:999px; border:1.5px solid var(--line2); background:var(--surface); display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink2); cursor:pointer; }
.kidchip .c{ font-size:10.5px; font-weight:800; color:var(--ink4); } .kidchip.on{ border-color:var(--accent); background:var(--accent-weak); color:var(--accent-ink); } .kidchip.on .c{ color:var(--accent); }
.kidchip.on::before{ content:"✓"; font-size:9px; } .kidchip.zero{ opacity:.4; }
.ovl-ft{ padding:11px 16px; border-top:1px solid var(--hair); display:flex; gap:9px; }
.ovl-ft .done{ flex:1; height:42px; border-radius:11px; border:none; background:var(--accent); color:#fff; font-size:13px; font-weight:800; cursor:pointer; }
/* 확대보기(적용 칩 전체) */
.chipsall .grp + .grp{ margin-top:14px; }
.chipsall .glab{ font-size:11px; font-weight:800; color:var(--ink4); margin-bottom:8px; }
.chipsall .cw{ display:flex; flex-wrap:wrap; gap:6px; }

/* ════ 오른쪽: 리스트 상부 ════ */
.applied{ padding:11px 14px; border-bottom:1px solid var(--hair); background:var(--bg); }
.applied .arow{ display:flex; align-items:center; gap:7px; }
.applied .arow + .arow{ margin-top:8px; }
.applied .arow .rl{ font-size:10px; font-weight:800; color:var(--ink4); flex:none; width:30px; letter-spacing:.02em; }
.applied .chips{ flex:1; display:flex; gap:6px; min-width:0; overflow:hidden; flex-wrap:nowrap; }
.achip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 6px 0 11px; border-radius:999px; font-size:11.5px; font-weight:800; white-space:nowrap; flex:none; }
.achip.sort1{ background:var(--accent); color:#fff; } .achip.sort2{ background:var(--accent-weak); color:var(--accent-ink); border:1px solid var(--accent-line); }
.achip.filt{ background:var(--surface); color:var(--ink2); border:1.5px solid var(--line2); }
.achip .k{ font-size:9px; font-weight:800; opacity:.7; } .achip .lg{ font-size:8.5px; font-weight:800; background:rgba(255,255,255,.25); border-radius:4px; padding:1px 4px; } .achip.filt .lg{ background:var(--raise2); color:var(--ink3); }
.achip .x{ width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.25); color:inherit; font-size:10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .achip.filt .x{ background:var(--raise2); color:var(--ink3); }
.achip.none{ color:var(--ink4); font-weight:700; background:transparent; }
.morechip{ flex:none; height:28px; padding:0 11px; border-radius:999px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; }
.r-count{ display:flex; align-items:baseline; justify-content:space-between; padding:11px 16px 7px; }
.r-count .n{ font-size:13px; font-weight:800; } .r-count .n b{ color:var(--accent-ink); } .r-count .hint{ font-size:11px; color:var(--ink4); font-weight:700; }
.r-more{ padding:13px 16px 18px; text-align:center; background:linear-gradient(180deg,transparent,var(--bg)); } .r-more .txt{ font-size:12px; font-weight:800; color:var(--ink3); }
.r-empty{ padding:38px 24px; text-align:center; color:var(--ink4); font-size:13px; font-weight:600; line-height:1.6; }

/* 성분 칩에 지표성분 부착 */
.cl-igline .ig{ flex-direction:column; align-items:flex-start; gap:1px; padding:4px 9px; }
.cl-igline .ig .in{ font-size:11.5px; font-weight:700; color:var(--ink2); }
.cl-igline .ig .mks{ display:flex; gap:5px; flex-wrap:wrap; } .cl-igline .ig .mk{ font-size:9.5px; font-weight:700; color:var(--ink4); } .cl-igline .ig .mk b{ color:var(--ink3); font-weight:800; }
.cl-igline .ig .mk.hit{ color:var(--accent-ink); } .cl-igline .ig .mk.hit b{ color:var(--accent-ink); }
.cl-igline .ig.core-hot{ background:var(--accent-weak); } .cl-igline .ig.core-hot .in{ color:var(--accent-ink); }
.cl-igline .ig.more{ background:transparent; color:var(--ink4); font-weight:700; justify-content:center; }

/* 고급 카드: 2순위 */
.cl-metric.adv .tier2{ display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; color:var(--accent-ink); background:var(--accent-weak); border-radius:7px; padding:3px 8px; margin-top:1px; white-space:nowrap; }
.cl-metric.adv .tier2 .t2k{ font-size:8.5px; font-weight:800; color:var(--accent); opacity:.85; }
.cl-metric .tierbadge{ font-size:8.5px; font-weight:800; color:var(--accent); background:var(--accent-weak); border-radius:5px; padding:1px 5px; }

/* ══════════ v3: 통일된 인라인 펼침 메뉴 ══════════ */
/* 정렬: 다단 tier + 인라인 드롭(리플로우) */
.stiers{ display:flex; flex-direction:column; gap:9px; }
.stier{ border:1.5px solid var(--line2); border-radius:13px; background:var(--surface); overflow:hidden; transition:border-color .15s; }
.stier.open{ border-color:var(--accent); }
.stcur{ display:flex; align-items:center; gap:11px; padding:12px 13px; cursor:pointer; }
.stcur .ic{ width:30px; height:30px; border-radius:9px; background:var(--accent-weak); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex:none; }
.stcur .no{ width:24px; height:24px; border-radius:7px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.stcur .no.n2{ background:var(--ink3); }
.stcur .m{ flex:1; min-width:0; } .stcur .m .nm{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; } .stcur .m .bs{ font-size:11px; color:var(--ink4); font-weight:600; margin-top:2px; }
.stcur .dir{ font-size:11px; font-weight:800; color:var(--accent); background:var(--accent-weak); border-radius:7px; padding:4px 9px; flex:none; }
.stcur .trm{ width:22px; height:22px; border-radius:7px; background:var(--raise); color:var(--ink4); font-size:11px; display:flex; align-items:center; justify-content:center; flex:none; }
.stcur .trm:hover{ background:var(--accent-weak); color:var(--accent-ink); }
.stcur .chev{ color:var(--ink4); font-size:12px; transition:transform .2s; flex:none; } .stier.open .stcur .chev{ transform:rotate(180deg); }
.stierdrop{ border-top:1px solid var(--hair); padding:7px; display:flex; flex-direction:column; gap:5px; background:var(--bg); }
.sortadd{ height:42px; border-radius:13px; border:1.5px dashed var(--accent-line); background:var(--accent-weak); color:var(--accent-ink); font-size:12.5px; font-weight:800; cursor:pointer; }
.sortadd:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.sortopt .mtag.eff{ color:var(--accent-ink); }

/* 정렬 타깃 미선택 → 점프 박스 */
.jumpbox{ margin-top:10px; padding:11px 12px; border:1.5px dashed var(--line2); border-radius:12px; background:var(--bg); display:flex; align-items:center; gap:10px; }
.jumpbox .jb-l{ flex:1; display:flex; align-items:center; gap:9px; min-width:0; }
.jumpbox .jb-ic{ width:26px; height:26px; border-radius:8px; background:var(--accent-weak); color:var(--accent-ink); font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.jumpbox .jb-t{ font-size:12px; font-weight:800; color:var(--ink2); }
.jumpbox .jb-d{ font-size:10.5px; font-weight:600; color:var(--ink4); margin-top:1px; line-height:1.4; }
.jumpbox .jb-btn{ flex:none; height:34px; padding:0 13px; border-radius:9px; border:none; background:var(--accent); color:#fff; font-size:12px; font-weight:800; cursor:pointer; }
.mattarget.eff{ }

/* 효능: 인라인 행 아코디언 (대분류는 칸 유지, 같은 행 아래로 펼침) */
.effmaj .chev{ transition:transform .2s; } .effmaj.open .chev{ transform:rotate(90deg); color:var(--accent); }
.effmaj.open{ border-color:var(--accent); background:var(--accent-weak); }
.effmaj.open .nm{ color:var(--accent-ink); }
.effexpand{ grid-column:1 / -1; padding:12px; border:1.5px solid var(--accent-line); border-radius:12px; background:var(--bg); }
.effexpand .ee-h{ display:flex; align-items:baseline; gap:8px; font-size:12px; font-weight:800; color:var(--accent-ink); margin-bottom:10px; }
.effexpand .ee-h .ee-sub{ font-size:10.5px; font-weight:700; color:var(--ink4); }
.effexpand .kidwrap{ display:flex; flex-wrap:wrap; gap:7px; }

/* 원료: 한 줄 1개 행 + 성분 종류 — 177개 전부 펼치면 아래 제형·가격 필터가 안 보일 만큼 길어져서
   (2026-07-01, 사용자 지적) 이 목록만 자체 스크롤로 높이를 제한. 검색창으로 특정 원료를 바로 찾을 수 있음. */
.matlist{ display:flex; flex-direction:column; gap:7px; max-height:46vh; overflow-y:auto; padding-right:2px; }
.matrow{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1.5px solid var(--line2); border-radius:12px; background:var(--surface); cursor:pointer; transition:border-color .12s, background .12s; }
.matrow.on{ border-color:var(--accent); background:var(--accent-weak); }
.matrow.zero{ opacity:.4; pointer-events:none; }
.matrow.rel{ box-shadow:inset 0 0 0 1px var(--accent-line); }
.matrow .mr-body{ flex:1; min-width:0; }
.matrow .mr-top{ display:flex; align-items:center; gap:6px; }
.matrow .mr-n{ font-size:13.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em; } .matrow.on .mr-n{ color:var(--accent-ink); }
.matrow .relstar{ font-size:10px; color:var(--accent); font-weight:800; }
.matrow .mr-types{ font-size:10.5px; font-weight:600; color:var(--ink4); margin-top:3px; line-height:1.45; word-break:keep-all; }
.matrow.on .mr-types{ color:var(--accent-ink); opacity:.85; }
.matrow .mr-chk{ width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.matrow .mr-c{ font-size:13px; font-weight:800; color:var(--ink3); flex:none; min-width:20px; text-align:right; font-variant-numeric:tabular-nums; } .matrow.on .mr-c{ color:var(--accent); }

/* 성분별 함량 슬라이더 (원료 선택 시 인라인) — 최저→최대 드래그 */
.advtag{ font-size:10.5px; color:var(--accent); font-weight:800; }
.marker{ flex-direction:column; align-items:stretch; gap:8px; }
.mk-top{ display:flex; align-items:center; gap:8px; }
.mk-top .nm{ width:auto; font-size:12.5px; }
.mk-top .legal{ font-size:9.5px; font-weight:800; color:var(--accent-ink); background:var(--accent-weak); border-radius:5px; padding:2px 6px; }
.mk-top .sp{ flex:1; }
.mk-top .val{ width:auto; font-size:12px; }
.mk-top .mkx{ width:20px; height:20px; border-radius:6px; background:var(--raise); color:var(--ink4); font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.marker .track{ overflow:visible; touch-action:none; }
.marker .h{ cursor:grab; }
.marker .h.start{ background:#fff; border-color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.marker .scale{ display:flex; justify-content:space-between; font-size:9px; font-weight:700; color:var(--ink4); margin-top:6px; }

/* 섹션 점프 강조 */
.sf-sec.flash{ animation:secflash 1s ease; }
@keyframes secflash{ 0%,100%{ background:transparent; } 25%{ background:var(--accent-weak); } }

/* 리스트: 효능 칩의 원료 수 우측 숫자 */
.cl-effs .ef .efn{ margin-left:5px; padding-left:5px; border-left:1px solid currentColor; font-weight:800; font-variant-numeric:tabular-nums; opacity:.65; }
.cl-effs .ef.hot .efn{ opacity:.8; }

/* 리스트 상부: 선택 효능별 원료 수 요약 */
.effcount{ margin:0 14px 4px; padding:11px 13px; border:1px solid var(--accent-line); border-radius:13px; background:var(--accent-weak); }
.effcount .ecl-h{ font-size:10px; font-weight:800; color:var(--accent); letter-spacing:.02em; margin-bottom:8px; }
.effcount .ecl-row{ display:flex; align-items:center; gap:10px; }
.effcount .ecl-row + .ecl-row{ margin-top:6px; }
.effcount .ecl-n{ font-size:12.5px; font-weight:800; color:var(--accent-ink); flex:none; }
.effcount .ecl-bar{ flex:1; height:1px; background:var(--accent-line); }
.effcount .ecl-c{ flex:none; display:flex; align-items:baseline; gap:3px; } .effcount .ecl-c b{ font-size:15px; font-weight:800; color:var(--accent-ink); font-variant-numeric:tabular-nums; } .effcount .ecl-c small{ font-size:10px; font-weight:700; color:var(--accent); }
.capnote{ font-size:10px; font-weight:800; color:var(--accent); background:var(--accent-weak); border-radius:5px; padding:2px 6px; }

/* 정렬: 기준 추가 버튼 행 */
.sortaddrow{ margin-top:9px; } .sortaddrow .sortadd{ width:100%; }

/* 원료 셀: 선택 시 펼쳐지는 염·함량 (req3·5·6) */
.matnote{ font-size:10.5px; font-weight:600; color:var(--ink4); line-height:1.5; margin:-2px 0 9px; }
.matcell.open .matrow{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.matsub{ border:1.5px solid var(--accent); border-top:none; border-radius:0 0 12px 12px; background:var(--bg); padding:12px; display:flex; flex-direction:column; gap:14px; margin-top:-1px; }
.matsub .ms-block .ms-lab{ font-size:11px; font-weight:800; color:var(--ink2); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.matsub .ms-block .ms-lab .ms-hint{ font-size:10px; font-weight:600; color:var(--ink4); }
.matsub .ms-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.matsub .marker + .marker{ margin-top:10px; }
.saltchip{ height:30px; padding:0 11px; border-radius:999px; border:1.5px solid var(--line2); background:var(--surface); display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--ink2); cursor:pointer; }
.saltchip .sc{ font-size:10px; font-weight:800; color:var(--ink4); }
.saltchip.on{ border-color:var(--accent); background:var(--accent); color:#fff; } .saltchip.on .sc{ color:#fff; opacity:.85; }
.saltchip.on::before{ content:"\2713"; font-size:9px; }
.saltchip.zero{ opacity:.4; pointer-events:none; }