/* SkinMatch — 설문과 리포트 */

.sm-app {
	--sm-ink: #24282a;
	--sm-muted: #6b7075;
	--sm-line: #dde3df;
	--sm-bg: #fff;
	--sm-soft: #f1f6f3;
	--sm-accent: #4f8362;
	--sm-accent-deep: #2f5b43;
	--sm-accent-soft: #9dbcaa;
	--sm-warn: #b26a00;
	--sm-bad: #b8452f;
	--sm-radius: 16px;

	max-width: 900px;
	margin: 0 auto;
	color: var(--sm-ink);
	line-height: 1.65;
	word-break: keep-all;
}

.sm-h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); letter-spacing: -.025em; margin: 0 0 10px; line-height: 1.3; }
.sm-h3 { font-size: 1.05rem; letter-spacing: -.015em; margin: 0 0 14px; }
.sm-lead { color: var(--sm-muted); margin: 0 0 18px; }
.sm-muted { color: var(--sm-muted); }
.sm-small { font-size: .84rem; }
.sm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sm-notes { margin: 0 0 22px; padding-left: 1.1em; font-size: .86rem; color: var(--sm-muted); }
.sm-notes li { margin-bottom: 4px; }

.sm-btn {
	display: inline-block;
	padding: 12px 26px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--sm-accent-deep);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}
.sm-btn:hover { background: var(--sm-accent); }
.sm-btn[disabled] { opacity: .6; cursor: progress; }
.sm-btn:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 3px; }

/* ------------------------------------------------------------- 설문 */

.sm-progress {
	position: sticky;
	top: 0;
	height: 4px;
	background: var(--sm-line);
	border-radius: 999px;
	margin-bottom: 26px;
	overflow: hidden;
	z-index: 2;
}
.sm-progress__bar { height: 100%; width: 0; background: var(--sm-accent); transition: width .25s ease; }

.sm-q { border: 0; margin: 0 0 26px; padding: 0; }
.sm-q__text { display: block; font-size: 1.02rem; font-weight: 600; margin-bottom: 10px; padding: 0; }
.sm-q__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; margin-right: 7px;
	font-size: .76rem; font-weight: 700;
	color: var(--sm-accent-deep); background: var(--sm-soft);
	border-radius: 50%;
}
.sm-q__hint { margin-left: 6px; font-size: .74rem; font-weight: 500; color: var(--sm-muted); }

.sm-opts { display: grid; gap: 7px; }
.sm-opt {
	display: flex; align-items: flex-start; gap: 9px;
	padding: 11px 14px;
	background: var(--sm-bg);
	border: 1px solid var(--sm-line);
	border-radius: 12px;
	cursor: pointer;
	font-size: .94rem;
}
.sm-opt:hover { border-color: var(--sm-accent-soft); }
.sm-opt input { margin: 3px 0 0; accent-color: var(--sm-accent-deep); flex: 0 0 auto; }
.sm-opt:has(input:checked) { border-color: var(--sm-accent); background: var(--sm-soft); }

.sm-actions { margin-top: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sm-actions__hint { margin: 0; font-size: .84rem; color: var(--sm-muted); }
.sm-inline-error { width: 100%; margin: 6px 0 0; color: var(--sm-bad); font-size: .88rem; }

/* ----------------------------------------------------------- 리포트 */

.sm-report__head { margin-bottom: 22px; }
.sm-report__eyebrow { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--sm-muted); }
.sm-report__title { font-size: clamp(1.3rem, 3.2vw, 1.75rem); letter-spacing: -.025em; line-height: 1.35; margin: 0 0 8px; }
.sm-report__conf { margin: 0; font-size: .86rem; color: var(--sm-muted); }

.sm-card {
	background: var(--sm-bg);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	padding: 22px;
	margin-bottom: 18px;
}
.sm-card--warn { border-color: #e8d4b0; background: #fdfaf4; }

.sm-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 18px; }
.sm-grid2 .sm-card { margin-bottom: 0; }

/* 레이더 */
.sm-radar__wrap { display: block; }
.sm-radar { width: 100%; height: auto; max-width: 340px; margin: 0 auto; display: block; overflow: visible; }
.sm-radar__grid { fill: none; stroke: var(--sm-line); stroke-width: 1; }
.sm-radar__spoke { stroke: var(--sm-line); stroke-width: 1; }
.sm-radar__area { fill: var(--sm-accent); fill-opacity: .18; stroke: var(--sm-accent); stroke-width: 2; stroke-linejoin: round; }
.sm-radar__dot { fill: var(--sm-accent-deep); }
.sm-radar__label { font-size: 10px; fill: var(--sm-muted); }
.sm-radar__table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .82rem; }
.sm-radar__table th { text-align: left; font-weight: 500; color: var(--sm-muted); padding: 4px 0; }
.sm-radar__table td { text-align: right; font-variant-numeric: tabular-nums; padding: 4px 0; }

/* 상위 고민 */
.sm-concerns { list-style: none; counter-reset: c; margin: 0; padding: 0; display: grid; gap: 12px; }
.sm-concerns li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name val" "bar bar"; gap: 4px 10px; align-items: center; }
.sm-concerns__name { grid-area: name; font-size: .92rem; font-weight: 500; }
.sm-concerns__val { grid-area: val; font-size: .82rem; color: var(--sm-muted); font-variant-numeric: tabular-nums; }
.sm-bar { grid-area: bar; display: block; height: 6px; background: var(--sm-soft); border-radius: 999px; overflow: hidden; }
.sm-bar__fill { display: block; height: 100%; background: var(--sm-accent-soft); }

/* 성분 */
.sm-ing { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sm-ing__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sm-ing__why { margin: 3px 0 0; font-size: .88rem; color: var(--sm-muted); }
.sm-ing__note { margin: 5px 0 0; font-size: .83rem; color: var(--sm-muted); padding-left: 10px; border-left: 2px solid var(--sm-line); }

.sm-tag { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

/* 전성분 뒤쪽에 있어 양이 적을 때 — 있다는 사실은 알리되 무게는 덜어낸다 */
.sm-tag--trace {
	background: transparent;
	color: var(--sm-muted);
	border: 1px dashed var(--sm-line);
}
.sm-tag--strong { background: #e3efe7; color: #2f5b43; }
.sm-tag--moderate { background: #f2eddf; color: #7a6326; }
.sm-tag--limited { background: #efeeec; color: #6b7075; }

.sm-avoid { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: .92rem; }

/* 제품 */
.sm-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sm-product { padding: 16px 18px; border: 1px solid var(--sm-line); border-radius: 14px; background: var(--sm-bg); }
.sm-product--good { border-left: 4px solid var(--sm-accent); }
.sm-product--mid { border-left: 4px solid var(--sm-accent-soft); }
.sm-product--low { border-left: 4px solid var(--sm-line); }

.sm-product__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sm-product__brand { display: block; font-size: .76rem; color: var(--sm-muted); }
.sm-product__name { font-size: 1rem; font-weight: 600; color: var(--sm-ink); text-decoration: none; }
.sm-product__name:hover { color: var(--sm-accent-deep); }
.sm-product__fit { flex: 0 0 auto; text-align: center; line-height: 1.1; }
.sm-product__score { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.sm-product__scorelab { display: block; font-size: .68rem; color: var(--sm-muted); }
.sm-product__rank { margin: 2px 0 0; font-size: .78rem; color: var(--sm-muted); }

.sm-why { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; font-size: .87rem; }
.sm-why li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sm-why__ing { font-weight: 600; }
.sm-why__for { color: var(--sm-muted); }
.sm-why__dose { font-size: .7rem; padding: 1px 7px; border-radius: 999px; }
.sm-why__dose--effective { background: #e3efe7; color: #2f5b43; }
.sm-why__dose--trace { background: #efeeec; color: #6b7075; }

.sm-product__risk { margin: 10px 0 0; font-size: .86rem; color: var(--sm-warn); }
.sm-product__conflict { margin: 6px 0 0; font-size: .86rem; color: var(--sm-bad); }

.sm-product__foot {
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sm-line);
	font-size: .78rem; color: var(--sm-muted);
}

.sm-reviewlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; font-size: .86rem; }
.sm-reviewlist li { display: flex; gap: 9px; align-items: baseline; }
.sm-reviewlist__sim { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--sm-accent-deep); background: var(--sm-soft); padding: 1px 7px; border-radius: 999px; }

.sm-disclaimer { margin: 18px 0 0; font-size: .78rem; color: var(--sm-muted); }

@media (max-width: 560px) {
	.sm-card { padding: 17px; }
	.sm-product__top { flex-direction: row; }
}

/* ------------------------------------------------------------- 사진 단계 */

.sm-privacy {
	margin: 0 0 18px;
	padding: 13px 15px;
	background: #eef5f0;
	border: 1px solid #cfe0d5;
	border-radius: 12px;
	font-size: .89rem;
	line-height: 1.6;
}
.sm-privacy strong { display: block; margin-bottom: 3px; color: var(--sm-accent-deep); }

.sm-photo__pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

.sm-btn--outline {
	background: transparent;
	color: var(--sm-accent-deep);
	border: 1.5px solid var(--sm-accent-deep);
}
.sm-btn--outline:hover { background: var(--sm-soft); }

.sm-btn--ghost {
	background: transparent;
	color: var(--sm-muted);
	padding: 12px 18px;
}
.sm-btn--ghost:hover { background: var(--sm-soft); color: var(--sm-ink); }

.sm-photo__out:empty { display: none; }
.sm-photo__out { margin-top: 20px; }

.sm-photo__result { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.sm-photo__thumb {
	width: 132px; height: auto; flex: 0 0 auto;
	border-radius: 12px; border: 1px solid var(--sm-line);
}
.sm-photo__nums { flex: 1 1 260px; min-width: 0; display: grid; gap: 11px; }

.sm-photo__row {
	display: grid;
	grid-template-columns: 88px 1fr 32px;
	grid-template-areas: "lab bar val" "conf conf conf";
	gap: 3px 10px;
	align-items: center;
	font-size: .88rem;
}
.sm-photo__lab { grid-area: lab; }
.sm-photo__row .sm-bar { grid-area: bar; }
.sm-photo__val { grid-area: val; text-align: right; font-variant-numeric: tabular-nums; color: var(--sm-muted); }
.sm-photo__conf { grid-area: conf; font-size: .74rem; color: var(--sm-muted); }

.sm-photo__warn {
	margin: 16px 0 0; padding: 11px 15px 11px 30px;
	background: #fdf7ec; border: 1px solid #e8d4b0; border-radius: 11px;
	font-size: .85rem; color: #7a5a1e;
}
.sm-photo__warn li { margin-bottom: 3px; }

.sm-photo__err {
	margin: 0; padding: 12px 15px;
	background: #fbf0ee; border: 1px solid #e5c3bb; border-radius: 11px;
	color: var(--sm-bad); font-size: .9rem;
}

@media (max-width: 560px) {
	.sm-photo__thumb { width: 100px; }
	.sm-photo__row { grid-template-columns: 74px 1fr 30px; }
}

/* 식약처 기능성 보고 표시 — 우리 판단이 아니라 인용이라 다른 색을 쓴다 */
.sm-badge--gov {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 8px;
	border: 1px solid #c7d9cd;
	border-radius: 999px;
	background: #f0f6f2;
	color: #2f5b43;
	font-size: 11px;
	line-height: 1.7;
	white-space: nowrap;
}

/* 시장 선택 — 어느 나라에서 살 수 있는 제품을 보고 있는지 */
.sm-market {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: -4px 0 16px;
	padding: 10px 14px;
	background: var(--sm-soft);
	border-radius: 12px;
}
.sm-market-pick {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .88rem;
	font-weight: 600;
}
.sm-market-pick select {
	font: inherit;
	font-weight: 600;
	color: var(--sm-accent-deep);
	padding: 4px 8px;
	border: 1px solid var(--sm-line);
	border-radius: 8px;
	background: var(--sm-bg);
	max-width: 100%;
}
.sm-market-pick select:disabled { opacity: .6; }
.sm-market-note {
	margin: 0;
	font-size: .82rem;
	color: var(--sm-muted);
}
@media (max-width: 480px) {
	.sm-market { flex-direction: column; align-items: stretch; }
}
[data-sm-products] { transition: opacity .15s ease; }

/* 제품 카드 — 여기서 살 수 있는 물건인지 */
.sm-product__market {
	display: inline-block;
	margin: -4px 0 10px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: .76rem;
	line-height: 1.6;
	letter-spacing: -.01em;
}
.sm-product__market--away {
	color: #7a5a12;
	background: #fdf3dc;
}
.sm-product__market--unknown {
	color: var(--sm-muted);
	background: var(--sm-soft);
}

/* 변화 추적 — 지난 측정과 견주기 */
.sm-change { margin-bottom: 20px; }
.sm-chg__h { font-size: .92rem; margin: 14px 0 6px; letter-spacing: -.01em; }
.sm-chg__h--up { color: var(--sm-accent-deep); }
.sm-chg__h--down { color: var(--sm-warn); }
.sm-chg { list-style: none; margin: 0; padding: 0; }
.sm-chg li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--sm-line);
}
.sm-chg li:last-child { border-bottom: 0; }
.sm-chg__name { font-weight: 600; font-size: .9rem; }
.sm-chg__val { color: var(--sm-muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.sm-chg__d { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.sm-chg__d--up { color: var(--sm-accent-deep); }
.sm-chg__d--down { color: var(--sm-warn); }
.sm-chg__routine { margin: 14px 0 4px; }

/* 쓰는 중 표시 */
.sm-use {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 10px;
	padding: 5px 12px;
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	color: var(--sm-accent-deep);
	background: var(--sm-bg);
	border: 1px solid var(--sm-accent-soft);
	border-radius: 999px;
	cursor: pointer;
}
.sm-use:hover { background: var(--sm-soft); }
.sm-use.is-on {
	color: #fff;
	background: var(--sm-accent);
	border-color: var(--sm-accent);
}
.sm-use:disabled { opacity: .55; cursor: default; }


/* ---------------------------------------------------- 카메라 직접 촬영 */
/* 테마가 요소에 display 를 강제로 걸어두면 hidden 속성이 무시된다. */
.sm-photo [hidden],
.sm-cam [hidden] { display: none !important; }

.sm-photo__why {
	margin: .6rem 0 0;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--sm-muted);
}

.sm-cam {
	margin-top: 1.1rem;
}

.sm-cam__stage {
	position: relative;
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	aspect-ratio: 3 / 4;
	min-height: 260px;
	background: #14171a;
	border-radius: var(--sm-radius);
	overflow: hidden;
}

.sm-cam__video,
.sm-cam__still {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 앞 카메라는 거울처럼 보여야 얼굴을 맞추기 쉽다. 저장되는 프레임은
	   뒤집지 않으므로 측정값에는 영향이 없다. */
	transform: scaleX(-1);
}

.sm-cam.is-rear .sm-cam__video,
.sm-cam.is-rear .sm-cam__still { transform: none; }

.sm-cam__guide {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sm-cam__guide::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 47%;
	width: 66%;
	height: 62%;
	transform: translate(-50%, -50%);
	border: 2px dashed rgba(255, 255, 255, .8);
	border-radius: 50%;
	/* 타원 바깥을 어둡게 덮어 얼굴을 어디에 맞춰야 하는지 바로 보이게 한다. */
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38);
}

.sm-cam__hint {
	margin: .75rem auto 0;
	max-width: 340px;
	text-align: center;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--sm-muted);
}
.sm-cam__hint.is-good { color: var(--sm-accent-deep); }
.sm-cam__hint.is-warn { color: var(--sm-warn); }
.sm-cam__hint.is-bad  { color: var(--sm-bad); }

/* 실시간 안내: 조건이 다 맞으면 색과 굵기로 "지금"을 알린다.
   깜빡임은 쓰지 않는다. 얼굴을 고정하는 동안 시선을 빼앗는다. */
.sm-cam__hint.is-ready {
	color: var(--sm-accent-deep);
	font-weight: 600;
}

/* 셔터는 어느 경우에도 화면 한가운데에 있어야 한다.
   전환 버튼이 숨겨져도 자리는 남도록 3열 그리드로 잡는다. */
.sm-cam__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: .75rem;
	max-width: 340px;
	margin: .9rem auto 0;
}

.sm-cam__bar [data-sm-cam-close] { justify-self: start; }
.sm-cam__bar [data-sm-cam-flip]  { justify-self: end; }
.sm-cam__bar .sm-cam__shutter    { grid-column: 2; justify-self: center; }

/* 찍은 뒤 나오는 줄은 버튼 두 개를 나란히 가운데 둔다. */
.sm-cam__bar--still {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.sm-cam__side { min-width: 4.75rem; }

.sm-cam__shutter {
	position: relative;
	flex: 0 0 auto;
	width: 66px;
	height: 66px;
	padding: 0;
	border: 3px solid var(--sm-accent);
	border-radius: 50%;
	background: var(--sm-bg);
	cursor: pointer;
}

.sm-cam__shutter::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var(--sm-accent);
	transition: transform .12s ease;
}

/* 안내를 통과하면 셔터에 테가 생긴다. 통과 전에도 셔터는 눌린다.
   안내는 권유이지 잠금이 아니다. */
.sm-cam__shutter.is-armed {
	border-color: var(--sm-accent-deep);
	box-shadow: 0 0 0 4px rgba(224, 81, 111, .24);
}

.sm-cam__shutter.is-armed::after { background: var(--sm-accent-deep); }

.sm-cam__shutter:active::after { transform: scale(.86); }
.sm-cam__shutter:disabled { opacity: .5; cursor: default; }
.sm-cam__shutter:disabled::after { transform: none; }

@media (max-width: 480px) {
	.sm-cam__stage { max-width: 100%; }
	.sm-cam__side  { min-width: 4.5rem; font-size: .9rem; }
}

/* ================================================== 피부 고민 레이어 */

.sm-concernhub,
.sm-concern,
.sm-inghub { max-width: 900px; margin: 0 auto; }

.sm-concern-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
	margin: 1.25rem 0 1rem;
}

.sm-concern-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: 1rem .95rem;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	background: var(--sm-bg);
	color: var(--sm-ink);
	text-decoration: none;
	font-weight: 600;
	transition: border-color .15s ease, transform .15s ease;
}

.sm-concern-card:hover {
	border-color: var(--sm-accent);
	transform: translateY(-2px);
	color: var(--sm-ink);
}

.sm-concern-card__go {
	width: .5rem;
	height: .5rem;
	border-top: 2px solid var(--sm-accent-soft);
	border-right: 2px solid var(--sm-accent-soft);
	transform: rotate(45deg);
	flex: 0 0 auto;
}

.sm-concern-card:hover .sm-concern-card__go { border-color: var(--sm-accent); }

.sm-concern-hint { font-size: .9rem; color: var(--sm-muted); }

/* ---- 고민 상세 ---- */

.sm-concern__back { font-size: .88rem; margin: 0 0 .4rem; }
.sm-concern__back a { color: var(--sm-muted); text-decoration: none; }
.sm-concern__back a::before { content: "\2190"; margin-right: .35rem; }
.sm-concern__back a:hover { color: var(--sm-accent); }

.sm-stepblock { margin: 2rem 0; }

.sm-stepblock .sm-h3,
.sm-boundary .sm-h3 {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: 1.12rem;
	margin: 0 0 .9rem;
}

.sm-stepno {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--sm-accent);
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
}

/* ---- 성분 목록 ---- */

.sm-cinglist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .7rem;
}

.sm-cing {
	padding: .85rem .9rem;
	border: 1px solid var(--sm-line);
	border-radius: 12px;
	background: var(--sm-soft);
}

.sm-cing__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .3rem;
}

.sm-cing__head strong { font-size: .95rem; line-height: 1.3; }
.sm-cing__ko { font-size: .84rem; color: var(--sm-muted); }

.sm-cing__note {
	margin: .25rem 0 .45rem;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--sm-ink);
}

.sm-cing__ev {
	display: inline-block;
	font-size: .74rem;
	padding: .12rem .45rem;
	border-radius: 999px;
	background: var(--sm-bg);
	border: 1px solid var(--sm-line);
	color: var(--sm-muted);
}

/* ---- 홈케어 기기 ---- */

.sm-devlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.sm-dev {
	padding: .9rem 1rem;
	border: 1px solid var(--sm-line);
	border-radius: 12px;
}

.sm-dev__label { display: block; margin-bottom: .3rem; }
.sm-dev__what { margin: 0 0 .35rem; font-size: .9rem; line-height: 1.55; }

.sm-dev__ev {
	margin: 0;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--sm-muted);
	padding-left: .7rem;
	border-left: 2px solid var(--sm-line);
}

/* ---- 화장품 밖의 경계 ---- */

.sm-boundary {
	margin: 2rem 0;
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--sm-line);
	border-left: 3px solid var(--sm-warn);
	border-radius: 12px;
	background: var(--sm-soft);
}

.sm-boundary p { margin: 0 0 .5rem; line-height: 1.6; }
.sm-boundary p:last-child { margin-bottom: 0; }
.sm-boundary .sm-small { font-size: .82rem; color: var(--sm-muted); }

.sm-concern__cta { margin-top: 2rem; }

/* ---- 성분 허브 ---- */

.sm-inghub__row {
	padding: .9rem 0;
	border-top: 1px solid var(--sm-line);
}

.sm-inghub__concern { margin: 0 0 .5rem; font-size: 1rem; }
.sm-inghub__concern a { color: var(--sm-ink); text-decoration: none; }
.sm-inghub__concern a:hover { color: var(--sm-accent); }

.sm-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.sm-chip {
	font-size: .85rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	background: var(--sm-soft);
	border: 1px solid var(--sm-line);
}

@media (max-width: 782px) {
	.sm-concern-grid { grid-template-columns: repeat(2, 1fr); }
	.sm-cinglist      { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
	.sm-concern-card { padding: .85rem .8rem; font-size: .95rem; }
}

/* ================================================== 홈 진입부 · 피부 점수 */

.sm-hero { padding: .5rem 0 1.5rem; }

.sm-hero__sub {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--sm-muted);
	margin: 0 0 1.25rem;
}

.sm-hero__cta { margin: 0 0 2rem; }

.sm-btn--lg {
	font-size: 1.02rem;
	padding: .85rem 1.6rem;
}

.sm-entry {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
}

.sm-entry__card {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1rem .95rem;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	background: var(--sm-bg);
	color: var(--sm-ink);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.sm-entry__card:hover {
	border-color: var(--sm-accent);
	transform: translateY(-2px);
	color: var(--sm-ink);
}

.sm-entry__card strong { font-size: 1rem; }

.sm-entry__card span {
	font-size: .82rem;
	line-height: 1.5;
	color: var(--sm-muted);
}

.sm-homedev,
.sm-homepro { margin: 2.5rem auto; }

.sm-homepro p { line-height: 1.7; color: var(--sm-muted); }

/* ---- 피부 점수 ---- */

.sm-scorebar {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin: 1.25rem 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	background: var(--sm-soft);
}

.sm-scorebar__num {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: .12rem;
	color: var(--sm-accent-deep);
}

.sm-scorebar__val { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.sm-scorebar__unit { font-size: .95rem; font-weight: 600; }

.sm-scorebar__body { flex: 1 1 auto; min-width: 0; }

.sm-scorebar__note {
	margin: 0 0 .5rem;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--sm-muted);
}

.sm-scorebar__concerns {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
}

.sm-scorebar__lab {
	font-size: .82rem;
	color: var(--sm-muted);
	margin-right: .15rem;
}

.sm-chip--link {
	text-decoration: none;
	color: var(--sm-accent-deep);
	border-color: var(--sm-accent-soft);
	background: var(--sm-bg);
}

.sm-chip--link:hover {
	background: var(--sm-accent);
	border-color: var(--sm-accent);
	color: #fff;
}

@media (max-width: 782px) {
	.sm-entry { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.sm-scorebar { flex-direction: column; align-items: flex-start; gap: .6rem; }
	.sm-hero__sub { font-size: .98rem; }
}

/* 테마가 a 태그 색을 잡고 있어서, 링크로 쓰인 버튼은 글자가 배경색과 같아진다.
   유령·아웃라인 변형은 밝은 바탕에 어두운 글자라 건드리지 않는다. */
.sm-app a.sm-btn:not(.sm-btn--outline):not(.sm-btn--ghost),
.sm-app a.sm-btn:not(.sm-btn--outline):not(.sm-btn--ghost):hover,
.sm-app a.sm-btn:not(.sm-btn--outline):not(.sm-btn--ghost):focus { color: #fff; }

.sm-app a.sm-btn,
.sm-app a.sm-entry__card,
.sm-app a.sm-concern-card { text-decoration: none; }

/* 카데스는 첫 화면에서 페이지 제목을 숨긴다. 히어로 안에 직접 둔다. */
.sm-hero__title {
	font-size: clamp(1.9rem, 4.2vw, 2.7rem);
	line-height: 1.28;
	letter-spacing: -0.02em;
	margin: 0 0 .85rem;
}

/* ==========================================================
   측정 레이어 — 점수, 미터, 심각도 막대
   ----------------------------------------------------------
   UI 초록(--sm-accent)은 채도가 낮아서 넓은 면에는 잘 어울리지만
   가는 데이터 마크로 쓰면 회색으로 읽힌다. 검증기로 확인한 결과
   채도 하한에 걸려서, 차트 전용 초록을 따로 둔다.
   ========================================================== */

.sm-app {
	--sm-data: #1f7a55;        /* 마크 전용 — 대비 3:1 이상, 채도 하한 통과 */
	--sm-data-track: #e3efe9;  /* 같은 색 계열의 밝은 단계 */
	--sm-tick: #8a908c;

	/* 제목과 숫자에만 쓴다. 본문은 시스템 폰트 그대로 두어 첫 로딩을 지킨다. */
	--sm-display: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

/* 히어로 숫자는 디스플레이 서체를 쓰되 같은 산세리프 계열로 — 장식체는 브랜드에서 겉돈다. */
.sm-hero__title,
.sm-app .sm-h2,
.sm-app .sm-h3,
.sm-report__title,
.sm-concern-card__label,
.sm-entry__card strong,
.sm-inghub__concern,
.sm-cing__head strong {
	font-family: var(--sm-display);
	letter-spacing: -0.015em;
}

/* ---- 점수: 히어로 숫자 + 미터 ---- */

.sm-score {
	margin: 1.25rem 0 1.5rem;
	padding: 1.25rem 1.35rem 1.15rem;
	background: var(--sm-bg);
	border: 1px solid var(--sm-line);
	border-radius: 10px;
}

.sm-score__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .7rem;
}

.sm-score__label {
	margin: 0;
	font-size: .84rem;
	letter-spacing: .02em;
	color: var(--sm-muted);
}

.sm-score__figure {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: .15rem;
	color: var(--sm-ink);
}

/* 큰 숫자는 비례 폭을 쓴다. 등폭을 주면 자간이 벌어져 헐거워 보인다. */
.sm-score__val {
	font-family: var(--sm-display, inherit);
	font-size: 3.25rem;
	font-weight: 650;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: proportional-nums;
}

.sm-score__unit {
	font-size: 1rem;
	font-weight: 600;
	color: var(--sm-muted);
}

.sm-meter {
	position: relative;
	height: 10px;
	border-radius: 0 4px 4px 0;
	background: var(--sm-data-track);
	overflow: hidden;
}

.sm-meter__fill {
	display: block;
	height: 100%;
	background: var(--sm-data);
	/* 기준선 쪽은 각지게, 값 끝만 둥글게 */
	border-radius: 0 4px 4px 0;
}

.sm-meter__scale {
	display: flex;
	justify-content: space-between;
	margin-top: .3rem;
	font-size: .7rem;
	color: var(--sm-tick);
	font-variant-numeric: tabular-nums;
}

.sm-score__note {
	margin: .9rem 0 0;
	font-size: .84rem;
	line-height: 1.65;
	color: var(--sm-muted);
}

/* ---- 심각도 막대 ---- */

.sm-sev {
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--sm-line);
}

.sm-sev__title {
	margin: 0 0 .6rem;
	font-size: .84rem;
	color: var(--sm-muted);
}

.sm-sev__list { list-style: none; margin: 0; padding: 0; }

.sm-sev__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr 2.2rem;
	align-items: center;
	gap: .7rem;
	padding: .3rem 0;
}

.sm-sev__name {
	font-size: .88rem;
	color: var(--sm-ink);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sm-sev__name:hover { color: var(--sm-data); text-decoration: underline; }

.sm-sev__track {
	display: block;
	height: 10px;
	background: var(--sm-data-track);
	border-radius: 0 4px 4px 0;
	overflow: hidden;
}

.sm-sev__bar {
	display: block;
	height: 100%;
	background: var(--sm-data);
	border-radius: 0 4px 4px 0;
}

/* 세로로 줄지어 읽는 숫자라 여기서는 등폭이 맞다 */
.sm-sev__num {
	font-family: var(--sm-display, inherit);
	font-size: .88rem;
	font-weight: 600;
	text-align: right;
	color: var(--sm-ink);
	font-variant-numeric: tabular-nums;
}

.sm-sev__foot {
	margin: .7rem 0 0;
	font-size: .78rem;
	line-height: 1.6;
	color: var(--sm-muted);
}

@media (max-width: 480px) {
	.sm-score__val { font-size: 2.75rem; }
	.sm-sev__row   { grid-template-columns: 4.5rem 1fr 2rem; gap: .5rem; }
	.sm-sev__name  { font-size: .82rem; }
}

/* ---- 계측기 느낌으로: 모서리를 줄이고 면을 희게 ---- */

.sm-concern-card,
.sm-entry__card,
.sm-cing,
.sm-dev,
.sm-boundary { border-radius: 10px; }

.sm-cing { background: var(--sm-bg); }

/* 값이 줄지어 나오는 곳은 등폭 */
.sm-photo__val,
.sm-product__fit,
.sm-chg__num { font-variant-numeric: tabular-nums; }


/* ================================================== 아침·저녁 루틴 */

.sm-routine {
	margin: 1.5rem 0;
	padding: 1.25rem 1.35rem 1.15rem;
	background: var(--sm-bg);
	border: 1px solid var(--sm-line);
	border-radius: 10px;
}

.sm-routine__lead {
	margin: 0 0 1.25rem;
	font-size: .88rem;
	line-height: 1.65;
	color: var(--sm-muted);
}

.sm-routine__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.sm-routine__when {
	margin: 0 0 .75rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--sm-line);
	font-family: var(--sm-display);
	font-size: .95rem;
	font-weight: 650;
	color: var(--sm-ink);
}

/* 저녁 칸은 살짝 눌러서 시간대가 구분되게 한다 */
.sm-routine__col--pm .sm-routine__when { color: var(--sm-accent-deep); }

.sm-steps { list-style: none; margin: 0; padding: 0; }

.sm-step2 {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: .65rem;
	padding: .65rem 0;
	border-bottom: 1px dashed var(--sm-line);
}

.sm-step2:last-child { border-bottom: 0; }

.sm-step2__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--sm-data-track);
	color: var(--sm-data);
	font-size: .75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sm-step2__body { min-width: 0; }

.sm-step2__cat {
	margin: 0 0 .15rem;
	font-size: .75rem;
	letter-spacing: .03em;
	color: var(--sm-muted);
}

.sm-step2__pick {
	margin: 0 0 .3rem;
	font-size: .92rem;
	line-height: 1.45;
}

.sm-step2__brand {
	display: block;
	font-size: .76rem;
	color: var(--sm-muted);
}

.sm-step2__pick a {
	color: var(--sm-ink);
	text-decoration: none;
	font-weight: 600;
}

.sm-step2__pick a:hover { color: var(--sm-data); text-decoration: underline; }

.sm-step2__mine {
	display: inline-block;
	margin-left: .35rem;
	padding: .05rem .4rem;
	border-radius: 999px;
	background: var(--sm-data-track);
	color: var(--sm-data);
	font-size: .7rem;
	font-weight: 600;
	vertical-align: middle;
}

.sm-step2__none {
	margin: 0 0 .3rem;
	font-size: .85rem;
	color: var(--sm-muted);
}

.sm-step2__why {
	margin: 0;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--sm-muted);
}

.sm-routine__caution {
	margin: 1.25rem 0 0;
	padding: .8rem .95rem;
	border-left: 3px solid var(--sm-warn);
	border-radius: 0 8px 8px 0;
	background: var(--sm-soft);
	font-size: .84rem;
	line-height: 1.65;
}

.sm-routine__foot {
	margin: .9rem 0 0;
	font-size: .78rem;
	line-height: 1.6;
	color: var(--sm-muted);
}

@media (max-width: 680px) {
	.sm-routine__cols { grid-template-columns: 1fr; gap: 1.25rem; }
}


/* ================================================== 지금 쓰는 화장품 진단 */

.sm-shelf {
	margin: 1.5rem 0;
	padding: 1.25rem 1.35rem 1.15rem;
	background: var(--sm-bg);
	border: 1px solid var(--sm-line);
	border-radius: 10px;
}

.sm-shelf__empty {
	margin: 0;
	font-size: .88rem;
	line-height: 1.7;
	color: var(--sm-muted);
}

.sm-shelf__list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.sm-shelf__item {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4rem;
	padding: .55rem .75rem;
	background: var(--sm-soft);
	border-radius: 8px;
	font-size: .9rem;
}

.sm-shelf__brand { font-size: .78rem; color: var(--sm-muted); }

.sm-shelf__name {
	color: var(--sm-ink);
	text-decoration: none;
	font-weight: 600;
}

.sm-shelf__name:hover { color: var(--sm-data); text-decoration: underline; }

.sm-shelf__fams { display: inline-flex; gap: .25rem; flex-wrap: wrap; }

.sm-tag {
	font-size: .7rem;
	font-weight: 600;
	padding: .08rem .42rem;
	border-radius: 999px;
	background: var(--sm-data-track);
	color: var(--sm-data);
}

/* ---- 발견 사항 ---- */

.sm-finding {
	margin: 0 0 .9rem;
	padding: .85rem 1rem;
	border: 1px solid var(--sm-line);
	border-radius: 8px;
}

.sm-finding--warn {
	border-left: 3px solid var(--sm-warn);
	background: var(--sm-soft);
}

.sm-finding__head {
	margin: 0 0 .5rem;
	font-family: var(--sm-display);
	font-size: .84rem;
	font-weight: 650;
	color: var(--sm-ink);
}

.sm-finding__row {
	margin: 0 0 .55rem;
	font-size: .85rem;
	line-height: 1.65;
	color: var(--sm-muted);
}

.sm-finding__row:last-child { margin-bottom: 0; }

.sm-finding__row strong {
	display: block;
	color: var(--sm-ink);
	font-weight: 600;
	margin-bottom: .1rem;
}

.sm-finding__in {
	display: block;
	margin-top: .2rem;
	font-size: .78rem;
	color: var(--sm-tick);
}

.sm-shelf__foot {
	margin: .9rem 0 0;
	font-size: .78rem;
	line-height: 1.6;
	color: var(--sm-muted);
}


/* ================================================== 목표 · 빼야 할 것 */

.sm-goal {
	margin: .9rem 0 0;
	padding: .7rem .85rem;
	background: var(--sm-data-track);
	border-radius: 8px;
	font-size: .85rem;
	line-height: 1.65;
	color: var(--sm-ink);
}

.sm-goal__go {
	display: inline-block;
	margin-left: .3rem;
	color: var(--sm-data);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sm-goal__go:hover { text-decoration: underline; }

.sm-goal__depth {
	margin: .6rem 0 0;
	font-size: .82rem;
	line-height: 1.65;
	color: var(--sm-muted);
}

/* 기존 리포트에 .sm-avoid 가 이미 있어서 이름을 따로 쓴다 */
.sm-cut {
	margin: 1.5rem 0;
	padding: 1.25rem 1.35rem 1.15rem;
	background: var(--sm-bg);
	border: 1px solid var(--sm-line);
	border-left: 3px solid var(--sm-warn);
	border-radius: 10px;
}

.sm-cut__list { list-style: none; margin: 0; padding: 0; }

.sm-cut__row {
	padding: .6rem 0;
	border-bottom: 1px dashed var(--sm-line);
	font-size: .87rem;
	line-height: 1.65;
	color: var(--sm-muted);
}

.sm-cut__row:last-child { border-bottom: 0; }

.sm-cut__row strong {
	display: block;
	margin-bottom: .15rem;
	color: var(--sm-ink);
	font-weight: 600;
}

.sm-cut__foot {
	margin: .9rem 0 0;
	font-size: .78rem;
	line-height: 1.6;
	color: var(--sm-muted);
}


/* ================================================== 얼굴 도식 */

.sm-face {
	margin: 1.5rem 0;
	padding: 1.25rem 1.35rem 1.15rem;
	background: var(--sm-bg);
	border: 1px solid var(--sm-line);
	border-radius: 10px;
}

.sm-face__wrap {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}

.sm-face__svg {
	flex: 0 0 auto;
	width: 150px;
	height: auto;
}

/* 값은 색이 아니라 숫자가 말한다. 어느 단계 위에서도 읽히도록 흰 테두리를 깐다. */
.sm-face__num {
	font-family: var(--sm-display);
	font-size: 15px;
	font-weight: 700;
	fill: var(--sm-ink);
	stroke: #fff;
	stroke-width: 3px;
	paint-order: stroke fill;
	font-variant-numeric: tabular-nums;
}

.sm-face__side { flex: 1 1 200px; min-width: 0; }

.sm-face__keys { list-style: none; margin: 0; padding: 0; }

.sm-face__keys li {
	display: grid;
	grid-template-columns: 12px 1fr auto;
	align-items: center;
	gap: .55rem;
	padding: .3rem 0;
	font-size: .86rem;
}

.sm-face__sw {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, .08);
}

.sm-face__lab { color: var(--sm-muted); }

.sm-face__v {
	font-family: var(--sm-display);
	font-weight: 600;
	color: var(--sm-ink);
	font-variant-numeric: tabular-nums;
}

.sm-face__wholelab {
	margin: .9rem 0 .2rem;
	padding-top: .7rem;
	border-top: 1px solid var(--sm-line);
	font-size: .78rem;
	color: var(--sm-tick);
}

.sm-face__foot {
	margin: 1rem 0 0;
	font-size: .78rem;
	line-height: 1.65;
	color: var(--sm-muted);
}

@media (max-width: 480px) {
	.sm-face__wrap { gap: 1.1rem; }
	.sm-face__svg  { width: 120px; }
}


/* 대화형 설문 ===========================================================
   메신저를 흉내 내지 않는다. 한 번에 한 질문만 보이는 것, 고른 답이
   위로 쌓여 "내가 뭐라고 답했는지"가 남는 것. 그 둘이면 충분하다. */

/* hidden 속성이 display 선언에 지는 자리가 있어 한 번에 막는다. */
.sm-app [hidden] { display: none !important; }

.sm-modebar {
	display: flex;
	gap: 6px;
	margin: 0 0 22px;
	padding: 4px;
	border: 1px solid var(--sm-line);
	border-radius: 999px;
	background: var(--sm-bg);
}

.sm-modebar__btn {
	flex: 1 1 0;
	padding: 9px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--sm-muted);
	font: inherit;
	font-size: .88rem;
	cursor: pointer;
}

.sm-modebar__btn.is-on {
	background: var(--sm-soft);
	color: var(--sm-accent-deep);
	font-weight: 600;
}

.sm-ct__log {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 22px;
}

.sm-ct__bub {
	max-width: 85%;
	padding: 11px 15px;
	border-radius: 18px;
	font-size: .95rem;
	line-height: 1.55;
	animation: sm-ct-in .18s ease-out;
}

.sm-ct__bub--bot {
	align-self: flex-start;
	border-bottom-left-radius: 6px;
	background: var(--sm-soft);
}

.sm-ct__bub--me {
	align-self: flex-end;
	border-bottom-right-radius: 6px;
	background: var(--sm-accent);
	color: #fff;
}

@keyframes sm-ct-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sm-ct__bub { animation: none; }
}

/* 묶음이 바뀔 때만 나오는 한 줄. 말풍선이 아니라 장 제목에 가깝다. */
.sm-ct__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 4px;
	color: var(--sm-muted);
	font-size: .82rem;
}

.sm-ct__head::before,
.sm-ct__head::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--sm-line);
}

/* 고를 것은 아래에 모은다. 긴 한국어 보기를 가로로 늘어놓으면 줄이
   깨져 읽기 어렵다. 한 줄에 하나씩 쌓고 탭 영역을 넓게 둔다. */
.sm-ct__dock {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--sm-line);
}

.sm-ct__chips {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sm-ct__chip {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--sm-line);
	border-radius: 14px;
	background: var(--sm-bg);
	color: inherit;
	font: inherit;
	font-size: .95rem;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}

.sm-ct__chip:hover  { border-color: var(--sm-accent-soft); }
.sm-ct__chip:active { background: var(--sm-soft); }

.sm-ct__chip[aria-pressed="true"] {
	border-color: var(--sm-accent);
	background: var(--sm-soft);
	font-weight: 600;
}

.sm-ct__go {
	align-self: flex-start;
	margin-top: 4px;
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--sm-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sm-ct__go:hover { background: var(--sm-accent-deep); }

.sm-ct__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 4px;
}

.sm-ct__nav:empty { display: none; }

.sm-ct__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sm-muted);
	font: inherit;
	font-size: .85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sm-ct__link:hover { color: var(--sm-accent-deep); }

.sm-modebar__btn:focus-visible,
.sm-ct__chip:focus-visible,
.sm-ct__go:focus-visible,
.sm-ct__link:focus-visible {
	outline: 2px solid var(--sm-accent-deep);
	outline-offset: 2px;
}

@media (min-width: 640px) {
	.sm-ct__bub { max-width: 72%; }
}