/* Source Smith 페이지: 틀(kit.css)의 색을 앱의 어두운 바탕 + 빨강(#ff453a)으로 바꾸고, 실제 결과 이미지용 부품을 더한다. */
.kit--smith {
  --k-bg: #0b0909;
  --k-bg-2: #1a0f0e;
  --k-glow-1: #c4321f;
  --k-glow-2: #7a2a18;
  --k-brand: #d6281e;          /* 앱 빨강(#ff453a)을 흰 글자 대비 4.5:1 이상이 되게 낮춤 */
  --k-brand-hover: #bf2016;
  --k-frame: rgba(255, 120, 100, 0.1);
  --k-frame-line: rgba(255, 200, 190, 0.12);
  --k-panel-a: #171313;
  --k-panel-b: #5a2420;
  --k-band: #3a1512;
  --k-foot-a: #120c0c;
  --k-foot-b: #7a241c;
  --k-word: #ffd9d4;
  --ss-check: conic-gradient(#2a2a2e 25%, #1c1c20 0 50%, #2a2a2e 0 75%, #1c1c20 0) 0 0 / 18px 18px;
}
.kit--smith .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kit--smith a:where(.k-final__info a, .ss-faq a) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }

/* 첫 화면: 실제 앱 창 */
.ss-window { margin: 0; border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: #0e0e0e; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85); }
.ss-window img { width: 100%; height: auto; }
.ss-price:empty { display: none; }

/* 투명 결과 뒤 체크무늬 */
.ss-cmp-wide.is-alpha > .k-cmp__img, .ss-cmp.is-alpha > .ss-after, .k-gl__tile.ss-alpha .k-gl__shot { background: var(--ss-check); }
.ss-cmp-wide { max-width: 900px; }

/* 카드 안의 작은 전후 비교: 판 높이 안에 원본 비율로 */
.ss-cmp { width: min(100%, calc(460px * var(--ar))); max-width: 100%; margin: 0 auto; border-radius: 18px; }
.ss-cmp .k-cmp__img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: contain; }
.ss-cmp .k-cmp__top .k-cmp__img { height: 100%; }
.ss-cmp .k-cmp__bar b { height: 38px; font-size: 14px; }
@media (max-width: 600px) { .ss-cmp { width: min(100%, calc(360px * var(--ar))); } }

/* 카드 판 안의 실제 앱 화면: 잘리지 않게 전체를 */
.ss-shot { width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8); }

.ss-float { border-radius: 22px; image-rendering: pixelated; }
.ss-mark { image-rendering: pixelated; border-radius: 10px; }

/* 한눈에 보기: 결과 이미지를 크게. 투명 결과는 체크무늬 위에 잘리지 않게 */
.kit--smith .k-gl__shot { height: clamp(150px, 17vw, 230px); }
.kit--smith .k-gl__tile.ss-alpha .k-gl__shot img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: contain; padding: 10px; border-radius: 0; }

/* 사양 */
.ss-specs { padding-block: clamp(72px, 9vw, 140px) 0; }
.ss-spec-grid { display: grid; gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .ss-spec-grid { grid-template-columns: 1fr 1fr; } }
.ss-spec { padding: clamp(22px, 3vw, 36px); border-radius: 28px; border: 1px solid var(--k-frame-line); background: rgba(255, 255, 255, 0.03); }
.ss-spec h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ss-spec__sub { margin: 4px 0 18px; color: var(--k-ink-2); font-size: 15px; }
.ss-spec table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ss-spec th, .ss-spec td { padding: 11px 8px 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; vertical-align: top; }
.ss-spec thead th { color: var(--k-ink-2); font-weight: 500; font-size: 13px; }
.ss-spec tbody th { color: var(--k-ink-2); font-weight: 400; width: 30%; }
.ss-spec tbody tr:last-child > * { border-bottom: 0; }
.ss-spec__note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--k-ink-2); }
.ss-facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .ss-facts { grid-template-columns: repeat(3, 1fr); } }
.ss-facts li { display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--k-frame-line); font-size: 15px; line-height: 1.6; }
.ss-facts strong { color: #ff8a80; font-size: 13px; font-weight: 600; }
.ss-facts span { color: var(--k-ink-2); }

/* 질문 */
.ss-faq { padding-block: clamp(72px, 9vw, 140px); }
.ss-faq__list { max-width: 860px; margin: clamp(28px, 4vw, 48px) auto 0; display: grid; gap: 10px; }
.ss-faq__item { border-radius: 18px; border: 1px solid var(--k-frame-line); background: rgba(255, 255, 255, 0.03); }
.ss-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; }
.ss-faq__item summary::-webkit-details-marker { display: none; }
.ss-faq__item summary .ico { transition: transform 0.25s var(--k-ease); color: #ff8a80; }
.ss-faq__item[open] summary .ico { transform: rotate(45deg); }
.ss-faq__item p { margin: 0; padding: 0 22px 20px; color: var(--k-ink-2); font-size: 16px; line-height: 1.7; }

/* 마지막 구매 구역 */
.ss-final-price { display: grid; justify-items: center; gap: 4px; margin: -20px 0 32px; }
.ss-final-price span { font-family: var(--k-display); font-weight: 600; font-size: clamp(36px, 4vw, 54px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ss-final-price small { color: var(--k-ink-2); font-size: 14px; }
.ss-final-shot { margin-top: clamp(48px, 6vw, 80px); }
.ss-final-shot img { width: 100%; height: auto; border-radius: 20px 20px 0 0; border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 0; box-shadow: 0 -24px 80px -40px rgba(0, 0, 0, 0.9); }
.k-btn.is-buy .buy-price { margin-left: 2px; font-variant-numeric: tabular-nums; opacity: 0.7; font-weight: 600; }
.k-btn.is-buy .buy-price::before { content: '· '; }