/* Smart Store Suite · 네이버 스토어 디자인 DNA (본문 전용)
   실측 출처: 네이버 브랜드스토어·스마트스토어 상품 화면(2026-10, 진단용으로 받은 페이지 사본)
   - 주 버튼 #00DE5A + 검은 굵은 글씨, 높이 48, 반경 8, 자간 -0.5px
   - 보조 버튼 테두리 #D3DADF, 호버 rgba(0,0,0,.04)
   - 글자 #121212 / #757575 / #949494, 구분선 #E8ECEF, 바닥 #F8F9FD
   - 판매가 빨강 #D40022 굵기 800, 할인율 검정 굵게
   - 글꼴 -apple-system · Apple SD Gothic Neo · Roboto · Noto Sans CJK KR · 맑은 고딕
   적용 범위: 본문(main, .wrap)과 단계 막대. GNB·앱 레일·풋터(공통 셸)는 건드리지 않는다.
   네이버 로고·N 아이콘·워드마크는 쓰지 않는다(공식 서비스로 오인되지 않도록). */

:root{
  --nv-green:#00DE5A;        /* 구매하기 버튼 */
  --nv-green-hover:#00C850;
  --nv-green-ink:#00873A;    /* 흰 바탕 위 초록 글자(대비 확보) */
  --nv-green-soft:#E5FBEE;
  --nv-red:#D40022;          /* 판매가 */
  --nv-red-soft:#FFF0F2;
  --nv-ink:#121212;
  --nv-ink-2:#3F3F3F;
  --nv-ink-3:#757575;
  --nv-ink-4:#949494;
  --nv-line:#E8ECEF;
  --nv-line-2:#D3DADF;
  --nv-bg:#F8F9FD;
  --nv-band:#F4F6F8;
  --nv-plus:#603CA9;         /* 멤버십 띠 보라 */
  --nv-plus-soft:#F4F0FF;
  --nv-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",Roboto,"Noto Sans CJK KR","Noto Sans KR","맑은 고딕","Malgun Gothic",sans-serif;
}

/* ── 1. 토큰 재지정: 본문 안에서만 패밀리 토큰을 네이버 값으로 ───────────────── */
body.lm-app > main,
body.lm-app > .wrap,
[data-suite-flow]{
  --lm-font:var(--nv-font);
  --lm-font-ko:var(--nv-font);
  --lm-ink:var(--nv-ink);
  --lm-ink-2:var(--nv-ink-2);
  --lm-ink-3:var(--nv-ink-3);
  --lm-muted:var(--nv-ink-4);
  --lm-line-strong:var(--nv-line-2);
  --lm-line:var(--nv-line);
  --lm-line-soft:#F1F3F5;
  --lm-surface:var(--nv-bg);
  --lm-coral:var(--nv-green-ink);
  --lm-coral-soft:var(--nv-green-soft);
  --lm-red-deep:var(--nv-red);
  --lm-grad-cta:linear-gradient(90deg,var(--nv-green) 0%,var(--nv-green) 100%);
  --lm-grad-rule:linear-gradient(90deg,var(--nv-green) 0%,rgba(0,222,90,0) 100%);
  --lm-violet:var(--nv-ink);
  --lm-violet-hover:#000;
  --lm-violet-soft:#F1F3F5;
  --lm-d-emph:var(--nv-red);
  --lm-neg:var(--nv-red);
  --lm-r-sm:4px;
  --lm-r:8px;
  --lm-r-lg:8px;
  --lm-r-pill:8px;
  --lm-shadow:0 0 0 1px var(--nv-line);
  /* 글자 묶음: 셸 값은 :root에서 계산되므로 여기서 다시 선언 */
  --lm-t-display:800 44px/56px var(--nv-font);
  --lm-t-h1:800 30px/40px var(--nv-font);
  --lm-t-h1-m:800 24px/32px var(--nv-font);
  --lm-t-h2:800 22px/30px var(--nv-font);
  --lm-t-h3:700 18px/26px var(--nv-font);
  --lm-t-eyebrow:700 14px/20px var(--nv-font);
  --lm-t-lead:400 16px/26px var(--nv-font);
  --lm-t-body:400 15px/24px var(--nv-font);
  --lm-t-small:400 14px/21px var(--nv-font);
  --lm-t-label:700 14px/20px var(--nv-font);
  --lm-t-nav:500 14px/20px var(--nv-font);
  --lm-t-caption:400 12px/17px var(--nv-font);
  --lm-t-chip:700 12px/16px var(--nv-font);
  --lm-t-micro:400 11px/14px var(--nv-font);
  /* Tailwind v4 팔레트(1단계 화면)도 같은 값으로 */
  --color-zinc-50:#F8F9FD;
  --color-zinc-100:#F1F3F5;
  --color-zinc-200:#E8ECEF;
  --color-zinc-300:#D3DADF;
  --color-zinc-400:#949494;
  --color-zinc-500:#757575;
  --color-zinc-600:#5C5C5C;
  --color-zinc-700:#3F3F3F;
  --color-zinc-800:#212121;
  --color-zinc-900:#121212;
  --color-red-500:#E8003A;
  --color-red-600:#D40022;
  --color-red-700:#B0001C;
  --color-emerald-50:#E5FBEE;
  --color-emerald-200:#B8F0CF;
  --color-emerald-600:#00A346;
  --color-emerald-700:#00873A;
  --color-violet-50:#F4F0FF;
  --color-violet-200:#DCD0FA;
  --color-violet-700:#603CA9;
  font-family:var(--nv-font);
  letter-spacing:-0.3px;
  color:var(--nv-ink);
  -webkit-font-smoothing:antialiased;
}

/* ── 2. 머리말: 굵고 크게 ──────────────────────────────────────────────── */
body.lm-app > main h1,body.lm-app > .wrap h1{letter-spacing:-1px}
body.lm-app > main h2,body.lm-app > .wrap h2,
body.lm-app > main h3,body.lm-app > .wrap h3{letter-spacing:-0.6px}
.pagehead__eyebrow,.lm-eyebrow,.lm-section-eyebrow{color:var(--nv-green-ink)!important;font-weight:800!important}
.pagehead h1 .hl,.lm-h1 .lm-hl,.lm-hl{color:var(--nv-green-ink)}
.pagehead{padding-bottom:20px;border-bottom:8px solid var(--nv-band);margin-bottom:24px!important}

/* ── 3. 버튼: 초록 구매하기 / 회색 테두리 ─────────────────────────────── */
body.lm-app > main .lm-btn,body.lm-app > .wrap .lm-btn{letter-spacing:-0.5px;font-weight:800}
body.lm-app > main .lm-btn--cta,body.lm-app > .wrap .lm-btn--cta,
body.lm-app > main .lm-btn--product,body.lm-app > .wrap .lm-btn--product,
body.lm-app > main .btn.primary,body.lm-app > .wrap .btn.primary,
body.lm-app > main .btn-primary,body.lm-app > .wrap .btn-primary,
body.lm-app > main button.bg-zinc-900,body.lm-app > main a.bg-zinc-900{
  background:var(--nv-green)!important;color:#000!important;border-color:transparent!important;
  border-radius:8px!important;box-shadow:none!important;font-weight:800!important;letter-spacing:-0.5px}
body.lm-app > main .lm-btn--cta:hover,body.lm-app > .wrap .lm-btn--cta:hover,
body.lm-app > main .lm-btn--product:hover,body.lm-app > .wrap .lm-btn--product:hover,
body.lm-app > main button.bg-zinc-900:hover,body.lm-app > main a.bg-zinc-900:hover{background:var(--nv-green-hover)!important;opacity:1}
body.lm-app > main .lm-btn--cta,body.lm-app > .wrap .lm-btn--cta{height:48px;padding:0 24px;font-size:16px}
body.lm-app > main .lm-btn--outline,body.lm-app > .wrap .lm-btn--outline{
  height:48px;padding:0 22px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--nv-line-2);color:#000;font-size:15px}
body.lm-app > main .lm-btn--outline:hover,body.lm-app > .wrap .lm-btn--outline:hover{background:rgba(0,0,0,.04)}
body.lm-app > main button.border-zinc-300{border-color:var(--nv-line-2)}
body.lm-app > main .lm-btn[disabled],body.lm-app > .wrap .lm-btn[disabled],
body.lm-app > main button:disabled{background:#F1F3F5!important;color:#B5B5B5!important;opacity:1!important}

/* ── 4. 카드: 그림자 대신 선, 반경 8 ─────────────────────────────────── */
body.lm-app > main .card,body.lm-app > .wrap .card,
body.lm-app > main .dv-card,body.lm-app > main .lm-sigcard,body.lm-app > .wrap .lm-sigcard,
body.lm-app > main .flow-card,body.lm-app > main .rounded-xl{
  border-radius:8px!important;box-shadow:none!important;border:1px solid var(--nv-line)!important}
body.lm-app > main .shadow-sm,body.lm-app > main .shadow{box-shadow:none!important}

/* ── 5. 입력: 네이버 검색창처럼 초록 2px ───────────────────────────── */
body.lm-app > main input[type=text],body.lm-app > main input[type=url],body.lm-app > main input[type=search],
body.lm-app > main input:not([type]),body.lm-app > .wrap input[type=text],body.lm-app > .wrap input[type=url],
body.lm-app > .wrap input:not([type]),body.lm-app > main textarea,body.lm-app > .wrap textarea,
body.lm-app > main select,body.lm-app > .wrap select{
  border-radius:8px;border:1px solid var(--nv-line-2);font-family:var(--nv-font);letter-spacing:-0.3px}
body.lm-app > main input:focus,body.lm-app > .wrap input:focus,
body.lm-app > main textarea:focus,body.lm-app > .wrap textarea:focus,
body.lm-app > main select:focus,body.lm-app > .wrap select:focus{
  outline:none!important;border-color:var(--nv-green)!important;box-shadow:inset 0 0 0 1px var(--nv-green)!important}
/* 주 입력칸(스토어 주소·키워드·상품명)은 처음부터 초록 테두리 */
body.lm-app > main .dv-input,body.lm-app > main [data-nv-search],
body.lm-app > main input[placeholder*="스토어 URL"],body.lm-app > main input[placeholder*="스토어 주소"]{
  height:48px;border:2px solid var(--nv-green)!important;font-size:16px}

/* ── 6. 표: 촘촘하고 또렷하게 ──────────────────────────────────────── */
body.lm-app > main table,body.lm-app > .wrap table{border-collapse:collapse;font-size:14px}
body.lm-app > main thead th,body.lm-app > .wrap thead th{
  background:var(--nv-bg);color:var(--nv-ink-2);font-weight:700;font-size:13px;letter-spacing:-0.3px;
  border-top:1px solid var(--nv-ink);border-bottom:1px solid var(--nv-line-2)}
body.lm-app > main tbody td,body.lm-app > .wrap tbody td{border-bottom:1px solid var(--nv-line)}
body.lm-app > main tbody tr:hover td,body.lm-app > .wrap tbody tr:hover td{background:#FAFBFC}

/* ── 7. 숫자: 판매가처럼 굵게 ──────────────────────────────────────── */
body.lm-app > main .num,body.lm-app > main .lm-num,body.lm-app > .wrap .num,
body.lm-app > main .tabular-nums{font-variant-numeric:tabular-nums;letter-spacing:-0.3px}
body.lm-app > main .nv-price,body.lm-app > .wrap .nv-price,
body.lm-app > .wrap .gt-s,body.lm-app > .wrap .bigscore{font-weight:800;letter-spacing:-1px}

/* ── 8. 뱃지·칩: 4px 상자 ─────────────────────────────────────────── */
body.lm-app > main .rounded-full.border,body.lm-app > main .lm-chip,body.lm-app > .wrap .lm-chip,
body.lm-app > main .dv-chip,body.lm-app > .wrap .chip,body.lm-app > .wrap .badge{
  border-radius:4px!important;font-weight:700;letter-spacing:-0.3px}

/* ── 9. 링크: 초록 글자 ───────────────────────────────────────────── */
body.lm-app > main .lm-link,body.lm-app > .wrap .lm-link{color:var(--nv-green-ink);font-weight:700}

/* ── 10. 단계 막대: 멤버십 띠처럼 ───────────────────────────────────── */
[data-suite-flow]{background:#fff;border-bottom:1px solid var(--nv-line)}
[data-suite-flow] .ssf__step.is-current a{background:var(--nv-green-soft);color:#000}
[data-suite-flow] .ssf__step.is-current .ssf__n{background:var(--nv-green);color:#000;box-shadow:none;font-weight:800}
[data-suite-flow] .ssf__step.is-done .ssf__n{border-color:var(--nv-green-ink);color:var(--nv-green-ink)}
[data-suite-flow] .ssf__line.is-on{background:var(--nv-green)}
[data-suite-flow] .ssf__ctx{margin:10px calc(-1 * var(--lm-gutter)) -10px;padding:10px var(--lm-gutter);
  border-top:0;background:var(--nv-plus-soft)}
[data-suite-flow] .ssf__lab{background:var(--nv-plus);color:#fff;border-radius:4px}
[data-suite-flow] .ssf__next{border-radius:8px;height:40px;font-weight:800;letter-spacing:-0.5px;border-color:var(--nv-line-2);color:#000}
[data-suite-flow] .ssf__next.is-primary{background:var(--nv-green);color:#000;box-shadow:none}
[data-suite-flow] .ssf__next.is-primary:hover{background:var(--nv-green-hover);opacity:1}
[data-suite-flow] .ssf__t b em{background:var(--nv-red);color:#fff;border-radius:4px}
[data-suite-flow] .ssf__step.is-rec .ssf__n{border-color:var(--nv-red);color:var(--nv-red)}

/* ── 11. 구획 띠: 상품 상세처럼 굵은 회색 띠로 단락을 나눈다 ───────────── */
body.lm-app > main .lm-section + .lm-section{border-top:8px solid var(--nv-band)}

@media (max-width:760px){
  body.lm-app > main,body.lm-app > .wrap{--lm-t-h1:800 24px/32px var(--nv-font)}
  .pagehead{border-bottom-width:6px}
}