/* 재고실사 도우미 상품 소개 — 전용 스타일.
 *
 * 이 페이지가 파는 것은 기능 목록이 아니라 **창고에서 센 숫자가 조서가 되는 과정**이다.
 * 그래서 화면(장면 그림)이 주인공이고 글은 그 옆을 지킨다.
 *
 * 색은 제품 화면과 같은 말을 쓴다 — 짙은 남색 바탕에 숫자가 서고, 차이는 붉게 드러난다.
 * 모든 클래스는 .sc-page 안에서만 살아 사이트의 다른 화면을 건드리지 않는다.
 */

.scp-body { background: var(--scp-bg); }

.sc-page {
  --scp-ink: #0b1b2b;
  --scp-ink-2: #12304a;
  --scp-navy: #16365a;
  --scp-navy-deep: #0d2440;
  --scp-blue: #2f6fd0;
  --scp-blue-soft: #e8f0fc;
  --scp-mint: #5fd0b4;
  --scp-amber: #c88a2e;
  --scp-red: #c94a3f;
  --scp-red-soft: #fdeceb;
  --scp-bg: #f5f7fa;
  --scp-panel: #ffffff;
  --scp-line: #e3e9f0;
  --scp-line-soft: #eef2f7;
  --scp-text: #1b2d3c;
  --scp-muted: #5d7183;
  --scp-faint: #8699a8;
  --scp-radius: 18px;
  --scp-shadow: 0 24px 60px -34px rgba(11, 27, 43, .45);
  --scp-pad: clamp(1.25rem, 4vw, 2.75rem);

  color: var(--scp-text);
  background: var(--scp-bg);
  font-feature-settings: "tnum" 0;
  line-height: 1.68;
}
.sc-page * { box-sizing: border-box; }
.sc-page h1, .sc-page h2, .sc-page h3, .sc-page h4 {
  margin: 0; line-height: 1.22; letter-spacing: -0.021em; color: var(--scp-ink);
  font-family: "Gowun Batang", "Pretendard Variable", Pretendard, "Malgun Gothic", serif; font-weight: 700;
}
.sc-page p { margin: 0; }
.sc-page ol, .sc-page ul { margin: 0; padding: 0; list-style: none; }
.scp-num { font-variant-numeric: tabular-nums; }

/* ── 소목차 ─────────────────────────────────────────────── */
.scp-subnav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(.8rem, 2vw, 1.3rem); border-radius: 0 0 14px 14px;
  padding: .6rem clamp(.9rem, 2.5vw, 1.4rem);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--scp-line);
}
.scp-brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.25; }
.scp-brand strong { font-size: .97rem; color: var(--scp-ink); }
.scp-brand small { font-size: .72rem; color: var(--scp-faint); letter-spacing: .02em; }
.scp-subnav-links { display: flex; flex: 1; flex-wrap: wrap; gap: .25rem; }
.scp-subnav-links a {
  padding: .34rem .62rem; border-radius: 9px; font-size: .84rem; font-weight: 600;
  color: var(--scp-muted); text-decoration: none; white-space: nowrap;
}
.scp-subnav-links a:hover { background: var(--scp-blue-soft); color: var(--scp-blue); }
.scp-subnav-links a.is-current { background: var(--scp-blue-soft); color: var(--scp-blue); }
.scp-subnav-manual { color: var(--scp-blue) !important; }
@media (max-width: 860px) { .scp-subnav-links { display: none; } }

/* ── 단추 ───────────────────────────────────────────────── */
.scp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 46px; padding: .62rem 1.2rem; border-radius: 12px;
  font-size: .95rem; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease;
}
.scp-btn:hover { transform: translateY(-1px); }
.scp-btn--primary { background: var(--scp-blue); color: #fff; box-shadow: 0 10px 24px -14px rgba(47, 111, 208, .9); }
.scp-btn--ghost { border-color: rgba(255, 255, 255, .34); color: #fff; }
.scp-btn--line { border-color: var(--scp-line); background: #fff; color: var(--scp-ink); }
.scp-btn--small { min-height: 38px; padding: .4rem .85rem; font-size: .86rem; }
.scp-btn--block { width: 100%; }

/* ── 히어로 ─────────────────────────────────────────────── */
/* 사이트 공용 .site-main 이 폭을 1168px 로 가둔다. 가장자리까지 번지는 배경 대신
 * 라운드 패널로 앉혀 사이트의 다른 화면과 같은 리듬을 지킨다. */
.scp-hero {
  position: relative; overflow: hidden; border-radius: 22px;
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 4vw, 3rem) clamp(2.4rem, 6vw, 3.4rem);
  color: #e9f1f8;
  background:
    radial-gradient(120% 120% at 88% 4%, rgba(95, 208, 180, .20) 0%, transparent 54%),
    radial-gradient(100% 120% at 4% 96%, rgba(47, 111, 208, .26) 0%, transparent 56%),
    linear-gradient(152deg, #0a1a2b 0%, #122c47 52%, #0b2036 100%);
}
/* 창고 선반 느낌의 격자 — 아주 옅게, 글자를 방해하지 않는 선에서. */
.scp-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(130% 90% at 76% 10%, #000 0%, transparent 70%);
}
.scp-hero-inner {
  position: relative; z-index: 1; margin: 0 auto; max-width: 1180px;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center;
}
.scp-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07);
  font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: #bcd8e8;
}
.scp-kicker i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--scp-mint); }
.scp-hero h1 {
  margin: 1.05rem 0 .95rem; color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.15rem); line-height: 1.16;
}
.scp-hero h1 em { display: block; font-style: normal; color: var(--scp-mint); }
.scp-lead { max-width: 47ch; color: rgba(233, 241, 248, .82); font-size: clamp(.97rem, 1.3vw, 1.07rem); }
.scp-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.scp-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }
.scp-facts li {
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(255, 255, 255, .09); color: rgba(233, 241, 248, .86);
}
.scp-disclaimer { margin-top: .9rem; font-size: .76rem; color: rgba(233, 241, 248, .55); text-align: center; }
@media (max-width: 900px) {
  .scp-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .scp-hero h1 em { display: inline; }
}

/* ── 폰 재생기 ──────────────────────────────────────────── */
.scp-phone {
  position: relative; width: min(300px, 78vw); margin: 0 auto;
  border-radius: 38px; padding: 10px;
  background: linear-gradient(160deg, #27384a 0%, #16222f 100%);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}
.scp-phone::before {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .16); z-index: 3;
}
.scp-screen {
  position: relative; overflow: hidden; border-radius: 29px; background: #f4f6f9;
  aspect-ratio: 390 / 844;
}
.scp-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.scp-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.scp-layer.is-active { opacity: 1; }

/* 탭 물결 — 손가락이 닿은 자리 */
.scp-tap {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; opacity: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(circle, rgba(95, 208, 180, .5) 0%, rgba(95, 208, 180, 0) 68%);
}
.scp-tap.is-on { animation: scp-tap 900ms ease-out; }
@keyframes scp-tap {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.scp-player-foot {
  display: flex; align-items: center; gap: .55rem;
  margin: .95rem auto 0; max-width: 330px;
}
.scp-count {
  flex: none; padding: .16rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: rgba(233, 241, 248, .8);
  font-size: .73rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.scp-cap { flex: 1; font-size: .8rem; line-height: 1.5; color: rgba(233, 241, 248, .78); }
.scp-ctl {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; padding: 0;
}
.scp-ctl:hover { background: rgba(255, 255, 255, .16); }
.scp-ctl svg { width: 13px; height: 13px; fill: currentColor; }
.scp-player[data-paused="1"] .scp-ico-pause { display: none; }
.scp-player:not([data-paused="1"]) .scp-ico-play { display: none; }

/* 밝은 바탕에 놓이는 재생기(흐름·기능 구역) */
.scp-player--light .scp-count { background: var(--scp-blue-soft); color: var(--scp-blue); }
.scp-player--light .scp-cap { color: var(--scp-muted); }
.scp-player--light .scp-ctl { border-color: var(--scp-line); background: #fff; color: var(--scp-ink-2); }

/* ── 데스크톱 창 ────────────────────────────────────────── */
.scp-window {
  border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--scp-line); box-shadow: var(--scp-shadow);
}
.scp-titlebar {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem; background: #f1f4f8; border-bottom: 1px solid var(--scp-line);
}
.scp-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6dde5; }
.scp-titlebar span { margin-left: .35rem; font-size: .75rem; font-weight: 600; color: var(--scp-faint); }
.scp-window img { display: block; width: 100%; height: auto; }

/* ── 구역 공통 ──────────────────────────────────────────── */
.scp-section { padding: clamp(2.6rem, 6vw, 4.2rem) 0; }
.scp-section--tint {
  margin: clamp(.8rem, 2vw, 1.4rem) 0; padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.3rem, 3.5vw, 2.6rem);
  background: #fff; border: 1px solid var(--scp-line); border-radius: 20px;
}
.scp-wrap { margin: 0 auto; max-width: 1180px; }
.scp-head { max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.scp-eyebrow {
  margin-bottom: .6rem; font-size: .79rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--scp-blue);
}
.scp-head h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); }
.scp-head p { margin-top: .8rem; color: var(--scp-muted); font-size: clamp(.95rem, 1.2vw, 1.03rem); }

/* 나타나는 움직임 — 줄이기를 요청한 사람에게는 그냥 보인다. */
[data-scp-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-scp-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-scp-reveal] { opacity: 1; transform: none; transition: none; }
  .scp-layer { transition: none; }
  .scp-tap.is-on { animation: none; }
}

/* ── 다섯 걸음 ──────────────────────────────────────────── */
.scp-flow { display: grid; gap: clamp(2.4rem, 5vw, 4rem); }
.scp-step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center;
}
.scp-step:nth-child(even) .scp-step-art { order: -1; }
.scp-step-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.scp-step-no {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--scp-navy); color: #fff; font-size: .83rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.scp-step-label {
  padding: .24rem .6rem; border-radius: 999px; background: var(--scp-blue-soft);
  color: var(--scp-blue); font-size: .79rem; font-weight: 700;
}
.scp-step h3 { font-size: clamp(1.18rem, 2vw, 1.5rem); }
.scp-step p { margin-top: .75rem; color: var(--scp-muted); }
.scp-step-art { min-width: 0; }
.scp-step-art .scp-phone { width: min(258px, 70vw); }
@media (max-width: 880px) {
  .scp-step { grid-template-columns: minmax(0, 1fr); }
  .scp-step:nth-child(even) .scp-step-art { order: 0; }
}

/* ── 블라인드 ───────────────────────────────────────────── */
.scp-blind {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center;
}
.scp-blind-points { display: grid; gap: 1.05rem; margin-top: 1.6rem; }
.scp-blind-points li { padding-left: 1.15rem; position: relative; }
.scp-blind-points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--scp-mint);
}
.scp-blind-points h3 { font-size: 1rem; }
.scp-blind-points p { margin-top: .3rem; color: var(--scp-muted); font-size: .93rem; }
@media (max-width: 880px) { .scp-blind { grid-template-columns: minmax(0, 1fr); } }

/* 가려짐 → 공개 모션 */
.scp-reveal-demo {
  display: grid; gap: .7rem; padding: 1.1rem; border-radius: 14px;
  background: var(--scp-panel); border: 1px solid var(--scp-line); box-shadow: var(--scp-shadow);
}
.scp-reveal-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: .6rem; align-items: center;
  padding: .55rem .7rem; border-radius: 10px; background: #fafbfd; font-size: .86rem;
}
.scp-reveal-row b { font-weight: 700; color: var(--scp-ink); }
.scp-reveal-row small { display: block; color: var(--scp-faint); font-size: .74rem; font-weight: 500; }
.scp-cell {
  min-width: 62px; padding: .26rem .5rem; border-radius: 7px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 700; background: #eef2f7; color: var(--scp-ink-2);
}
.scp-cell--hidden { color: transparent; background: repeating-linear-gradient(135deg, #dde4ec 0 6px, #e7edf4 6px 12px); }
.scp-cell--diff { background: var(--scp-red-soft); color: var(--scp-red); }
.scp-reveal-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.scp-reveal-head span { font-size: .78rem; font-weight: 700; color: var(--scp-faint); }
.scp-reveal-btn {
  padding: .34rem .72rem; border-radius: 8px; border: 1px solid var(--scp-blue);
  background: #fff; color: var(--scp-blue); font-size: .8rem; font-weight: 700; cursor: pointer;
}
.scp-reveal-demo[data-open="1"] .scp-reveal-btn { background: var(--scp-blue); color: #fff; }

/* ── 조서 ───────────────────────────────────────────────── */
.scp-report { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.6rem, 4vw, 3rem); }
.scp-sheets { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: 1.4rem; }
.scp-sheet {
  padding: .34rem .68rem; border-radius: 8px; font-size: .83rem; font-weight: 600;
  background: #fff; border: 1px solid var(--scp-line); color: var(--scp-ink-2);
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease;
}
.scp-sheet.is-in { opacity: 1; transform: none; }
.scp-report-notes { display: grid; gap: .55rem; margin-top: 1.5rem; }
.scp-report-notes li { padding-left: 1.3rem; position: relative; color: var(--scp-muted); font-size: .93rem; }
.scp-report-notes li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--scp-mint); font-weight: 800;
}
@media (max-width: 880px) { .scp-report { grid-template-columns: minmax(0, 1fr); } }

/* ── 안전장치 ───────────────────────────────────────────── */
.scp-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.scp-trust li {
  padding: 1.25rem; border-radius: 14px; background: #fff;
  border: 1px solid var(--scp-line);
}
.scp-trust h3 { font-size: 1rem; }
.scp-trust p { margin-top: .5rem; color: var(--scp-muted); font-size: .92rem; }

/* ── 시작·요금 ──────────────────────────────────────────── */
.scp-start { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: start; }
.scp-steps { display: grid; gap: 1rem; counter-reset: scp-step; }
.scp-steps li { position: relative; padding-left: 2.6rem; counter-increment: scp-step; }
.scp-steps li::before {
  content: counter(scp-step); position: absolute; left: 0; top: -.1rem;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--scp-blue-soft); color: var(--scp-blue); font-size: .82rem; font-weight: 800;
}
.scp-steps strong { display: block; color: var(--scp-ink); }
.scp-steps p { margin-top: .25rem; color: var(--scp-muted); font-size: .93rem; }
.scp-price {
  padding: clamp(1.3rem, 3vw, 1.9rem); border-radius: var(--scp-radius);
  background: linear-gradient(158deg, #10273f 0%, #16365a 100%); color: #e9f1f8;
  box-shadow: var(--scp-shadow);
}
.scp-price-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: rgba(233, 241, 248, .6); }
.scp-price-amount { margin: .45rem 0 .5rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; color: #fff; }
.scp-price-note { font-size: .87rem; color: rgba(233, 241, 248, .76); }
.scp-price-items { display: grid; gap: .55rem; margin: 1.2rem 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.scp-price-items div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.scp-price-items dt { color: rgba(233, 241, 248, .62); }
.scp-price-items dd { margin: 0; font-weight: 600; text-align: right; }
.scp-price-help { margin-top: .85rem; font-size: .79rem; color: rgba(233, 241, 248, .55); }
@media (max-width: 880px) { .scp-start { grid-template-columns: minmax(0, 1fr); } }

/* ── 자주 묻는 질문 ─────────────────────────────────────── */
.scp-faq { display: grid; gap: .6rem; max-width: 880px; }
.scp-faq details {
  border: 1px solid var(--scp-line); border-radius: 12px; background: #fff; overflow: hidden;
}
.scp-faq summary {
  padding: .95rem 1.1rem; cursor: pointer; font-weight: 700; color: var(--scp-ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.scp-faq summary::-webkit-details-marker { display: none; }
.scp-faq summary::after { content: "+"; color: var(--scp-faint); font-weight: 400; font-size: 1.2rem; }
.scp-faq details[open] summary::after { content: "−"; }
.scp-faq p { padding: 0 1.1rem 1.05rem; color: var(--scp-muted); font-size: .93rem; }

/* ── 마무리 ─────────────────────────────────────────────── */
.scp-final {
  margin-top: clamp(1rem, 2.5vw, 1.8rem); border-radius: 22px;
  padding: clamp(2.4rem, 5.5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem); text-align: center; color: #e9f1f8;
  background: radial-gradient(90% 140% at 50% 0%, rgba(47, 111, 208, .28) 0%, transparent 60%), #0b2036;
}
.scp-final h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); }
.scp-final p { margin: .85rem auto 0; max-width: 54ch; color: rgba(233, 241, 248, .78); }
.scp-final .scp-actions { justify-content: center; }

/* ── 릴리스·연관 ────────────────────────────────────────── */
.scp-release { padding: .9rem 0; border-top: 1px solid var(--scp-line); }
.scp-release strong { color: var(--scp-ink); }
.scp-release p { margin-top: .3rem; color: var(--scp-muted); font-size: .92rem; }
.scp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.scp-related a {
  display: block; padding: 1.2rem; border-radius: 14px; background: #fff;
  border: 1px solid var(--scp-line); text-decoration: none;
}
.scp-related a:hover { border-color: var(--scp-blue); }
.scp-related h3 { font-size: 1rem; }
.scp-related p { margin-top: .45rem; color: var(--scp-muted); font-size: .9rem; }

/* ── 틀에서 쓰는 보조 ───────────────────────────────────── */
.scp-blind-lead { margin-top: .85rem; color: var(--scp-muted); }
.scp-blind-shot { margin-top: 1rem; }
.scp-releases { margin-bottom: 2.5rem; }
.scp-reveal-row--head span {
  font-size: .73rem; font-weight: 700; color: var(--scp-faint); text-align: right;
}
.scp-reveal-row--head span:first-child { text-align: left; }