/* =========================================================================
   index-v2.css — 메인 모바일 개편(⏱2026-09-28 · 2026-09-29 메인 승격) · index.html 만 싣는다(index-style.css 뒤)
   -------------------------------------------------------------------------
   ⭐ 이 파일은 index-style.css 를 「덮어쓰는」 쪽이다 — 같은 선택자·같은 폭이면 여기가 이긴다.
      ⇒ index-style.css 의 ≤640 규칙(섹션 제목·CTA 등)을 고쳐도 메인에선 조용히 무시될 수 있다.
   ⭐ 이름은 v2(모바일만이 아니다) — PC 에도 「PC 화면 | 폰 화면」 전환·테마 동그라미·요금 인라인 스타일 이관이 들어 있다(폰을 PC 목업에 겹치지 않는다 — Ⅱ).
   ⛔ 갤럭시 가로 넘침 수정(히어로 minmax · 목업 탭 줄 · 서식 배너 · 칩)은 index-style.css 에 있다 —
      여기 다시 쓰지 말 것(두 벌이 되면 한쪽만 고쳐져 갈라진다).
   승격 경위(2026-09-29 · 구 index2.html → index.html) = docs/TEMPLATE-DEMO.md §7 · WORKLOG 2026-09-29
   ========================================================================= */

/* ---------- 인라인 스타일 이관(동작·모양 동일) ---------- */
.tpl-actions{text-align:center;margin-top:2rem;display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center;}
.tpl-actions a{display:inline-block;padding:0.85rem 2rem;text-decoration:none;font-weight:600;}
.price-quote{text-align:center;margin-top:1.2rem;font-size:0.95rem;color:var(--text-muted);}
.price-quote a{color:var(--accent);font-weight:700;text-decoration:none;}

/* =========================================================================
   Ⅰ 모바일 헤더 — 로그인 · 무료 시작 · ☰  (≤860 = 기존 ☰ 전환점과 같다)
   ========================================================================= */
.nav-actions{display:none;}
@media(max-width:860px){
  .nav-actions{display:flex;align-items:center;gap:min(0.8rem,3vw);margin-left:auto;margin-right:min(0.7rem,2.5vw);}
  .na-login{font-size:min(0.9rem,3.9vw);font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;padding:0.5rem 0.15rem;}
  .na-start{
    font-size:min(0.84rem,3.6vw);font-weight:700;white-space:nowrap;text-decoration:none;
    color:var(--bg-primary);background:var(--ink);padding:min(0.55rem,2.2vw) min(0.95rem,3.6vw);border-radius:100px;
  }
  /* ☰ 안에서는 헤더로 올라간 둘을 뺀다 → 기능·템플릿·무료 서식·요금·매뉴얼·테마 6개 */
  .nav-links a.nav-login,.nav-links a.btn-nav{display:none;}
}
/* 헤더 한 줄 보장 — 폰 글자 크게(150%)에서도 ☰ 가 화면 밖으로 밀리지 않게 헤더 글자만 화면 폭 기준 상한(min(rem, vw))
   (실측: 상한 없으면 360px·150% 에서 ☰ 가 401~445px = 화면 밖) */
@media(max-width:480px){
  nav{padding-left:min(1.2rem,4.5vw);padding-right:min(1.2rem,4.5vw);}
  .logo{font-size:min(1.55rem,6.4vw);}
  .mobile-menu-btn{font-size:min(1.5rem,7vw);}
}

/* =========================================================================
   Ⅱ 히어로 — 폰 목업(「모바일 지원」 칩 대체) · PC|폰 전환 · 테마 6종
   크기는 전부 em — .hm-phone 의 font-size 하나로 폰 크기를 바꾼다
   ========================================================================= */
/* PC 화면 | 폰 화면 전환(전 폭) — PC 목업과 폰 목업을 **겹치지 않고 하나씩** 보여 준다
   (⏱2026-09-28 🙋 「PC 에서 폰이 너무 작다 · 카드가 세로로 길다」 → 🙋 PC 에도 전환 채택)
   ⛔ 폰을 PC 목업에 겹치지 말 것 — 겹치면 표가 좁아지거나(칸 꺾임) 「상태」 열이 가려지거나 카드가 길어졌다(검수 3회 실측)
   ⭐ 무대 = 두 목업을 **같은 grid 칸**에 쌓고 안 보이는 쪽은 visibility:hidden — 칸 높이가 늘 둘 중 큰 쪽이라
      전환해도 카드·히어로 글이 안 흔들린다. 또 PC 목업 높이를 **폰 높이로 고정**한다 — 표 5행이 업종마다 꺾이는 정도가 달라
      무대 높이가 업종 클릭마다 바뀌면 카드·히어로 글이 튄다(921px 교육 +96px 실측). 넘치는 행은 창 안에서 잘린다(앱 창처럼).
   보기 = .hero-mockup[data-view="pc|phone"] — 목업 바로 뒤 인라인 스크립트가 첫 값을 정한다(≤640 폰 · 그 밖 PC).
   JS 가 없으면(data-view 없음) = PC 목업(정적 행이 있다) · 전환 버튼·테마 줄은 숨김(.hm-ready 가 붙어야 보임) */
.hero-mockup{display:grid;grid-template-columns:minmax(0,1fr);}
.hero-mockup>.hm-toggle{grid-row:1;}
.hero-mockup>.mockup-window,.hero-mockup>.hm-phone{grid-row:2;grid-column:1;}
.hero-mockup>.hm-themes{grid-row:3;}
/* PC 목업은 칸 높이만큼 늘고(본문이 채운다) 폰은 가운데 위 */
.hero-mockup{--hp-fs:10.8px;}   /* 폰 크기 한 곳 — 폰 높이 = 이것 × 39.1em(화면 38em + 테두리 0.55em×2) */
.hero-mockup>.mockup-window{display:flex;flex-direction:column;height:calc(var(--hp-fs) * 39.1);}
.hero-mockup .mockup-body{flex:1;}
.hm-toggle{display:flex;visibility:hidden;width:max-content;margin:0 auto 0.8rem;border:1px solid var(--line-strong);border-radius:99px;padding:0.2rem;background:var(--paper);}
.hm-ready .hm-toggle{visibility:visible;}   /* JS 가 없으면 자리만 비어 있다 */
.hm-toggle button{border:0;background:transparent;font:inherit;font-size:0.8rem;font-weight:600;color:var(--text-muted);padding:0.5rem 1.05rem;border-radius:99px;cursor:pointer;}
.hm-toggle button.on{background:var(--ink);color:var(--bg-primary);}
.hm-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.hm-phone{
  visibility:hidden;justify-self:center;align-self:start;position:relative;font-size:var(--hp-fs);width:20em;
  background:#0d0c12;border-radius:2.7em;padding:0.55em;
  box-shadow:0 1.8em 3.6em -1.2em rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06) inset;
}
.hero-mockup[data-view="phone"] .hm-phone{visibility:visible;}
.hero-mockup[data-view="phone"] .mockup-window{visibility:hidden;}
/* 폰 색 = 제품 m/css/app.css 3종(밝게·어둡게·세피아) — .hm-phone[data-pt] 가 고른다 */
.hm-phone,.hm-phone[data-pt="light"]{
  --p-canvas:#f2f5f9;--p-paper:#fff;--p-ink:#1c2b3a;--p-sub:#5b6b7d;--p-line:#dbe3ec;--p-soft:#e9eef4;
  --p-brand:#2563eb;--p-brand-ink:#1d4ed8;--p-brand-soft:#e4edfc;
  --p-ok:#15803d;--p-ok-bg:#e2f3e7;--p-warn:#b45309;--p-warn-bg:#fcefd9;--p-bad:#b91c1c;--p-bad-bg:#fbe3e3;
}
.hm-phone[data-pt="dark"]{
  --p-canvas:#0f1723;--p-paper:#192432;--p-ink:#e7edf5;--p-sub:#93a3b5;--p-line:#28374a;--p-soft:#22303f;
  --p-brand:#659df5;--p-brand-ink:#93bcfa;--p-brand-soft:#1d3358;
  --p-ok:#5fd08a;--p-ok-bg:#143224;--p-warn:#e8a13d;--p-warn-bg:#3a2b12;--p-bad:#f08a8a;--p-bad-bg:#3d1c1c;
}
.hm-phone[data-pt="sepia"]{
  --p-canvas:#f3f1ec;--p-paper:#fffdf8;--p-ink:#2c2419;--p-sub:#86745e;--p-line:rgba(184,134,11,.24);--p-soft:rgba(184,134,11,.10);
  --p-brand:#b8860b;--p-brand-ink:#8a6608;--p-brand-soft:rgba(184,134,11,.14);
  --p-ok:#6b8e23;--p-ok-bg:rgba(107,142,35,.16);--p-warn:#a85a12;--p-warn-bg:rgba(190,95,25,.15);--p-bad:#a1442e;--p-bad-bg:rgba(161,68,46,.14);
}
.hp-screen{position:relative;height:38em;overflow:hidden;border-radius:2.2em;background:var(--p-canvas);font-family:'Pretendard',sans-serif;transition:background 0.3s;}
.hp-notch{width:5.6em;height:1.15em;border-radius:1em;background:#000;margin:0.55em auto 0.35em;}
.hp-head{display:flex;align-items:baseline;justify-content:space-between;padding:0.35em 1.1em 0.6em;}
.hp-title{font-size:1.4em;font-weight:800;color:var(--p-ink);letter-spacing:-0.01em;}
.hp-count{font-size:0.9em;color:var(--p-sub);}
.hp-tabs{display:flex;gap:0.4em;padding:0 1.1em 0.75em;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent);}
.hp-tabs span{flex:none;font-size:0.9em;padding:0.3em 0.8em;border-radius:99px;background:var(--p-soft);color:var(--p-sub);}
.hp-tabs span.on{background:var(--p-brand-soft);color:var(--p-brand-ink);font-weight:700;}
.hp-list{display:flex;flex-direction:column;gap:0.55em;padding:0 0.85em;transition:opacity 0.3s;}
.hp-list.fade-out{opacity:0;}
.hp-rec{background:var(--p-paper);border:1px solid var(--p-line);border-radius:1.05em;padding:0.8em 0.95em;}
.hp-top{display:flex;align-items:center;justify-content:space-between;gap:0.5em;}
.hp-t{font-size:1.12em;font-weight:700;color:var(--p-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.hp-top .mock-badge{flex:none;font-size:0.82em;}
.hp-top .mock-amount{flex:none;font-size:0.95em;font-weight:700;color:var(--p-ink);}   /* 배지 없는 업종(뷰티)은 금액이 이 자리에 온다 */
.hp-meta{margin-top:0.3em;font-size:0.92em;color:var(--p-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hp-meta .mock-amount{color:var(--p-ink);font-weight:700;}
.hp-meta .mock-badge{font-size:0.9em;}
.hp-sep{font-weight:400;margin:0 0.35em;opacity:0.5;}
.hm-phone .mock-badge-green{background:var(--p-ok-bg);color:var(--p-ok);}
.hm-phone .mock-badge-orange{background:var(--p-warn-bg);color:var(--p-warn);}
.hm-phone .mock-badge-red{background:var(--p-bad-bg);color:var(--p-bad);}
.hm-phone .mock-badge-blue,.hm-phone .mock-badge-cyan,.hm-phone .mock-badge-purple{background:var(--p-brand-soft);color:var(--p-brand-ink);}
.hp-fab{position:absolute;right:1em;bottom:4em;width:3.2em;height:3.2em;border-radius:50%;background:var(--p-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25em;font-weight:500;box-shadow:0 0.6em 1.2em -0.4em var(--p-brand);}
.hp-tabbar{position:absolute;left:0;right:0;bottom:0;height:3.2em;display:flex;align-items:center;justify-content:space-around;background:var(--p-paper);border-top:1px solid var(--p-line);}
.hp-tabbar i{width:1.1em;height:1.1em;border-radius:0.3em;background:var(--p-line);}
.hp-tabbar i.on{background:var(--p-brand);}

/* PC 목업 테마 6종 — 값 = 제품 S260705Ke wp-core/css/workpage.css #wp[data-theme] + 셸 THEMES 의 상단 띠 h
   ⚠️ 제품 테마 값이 바뀌면 손으로 맞출 것(기계 대조 없음 · 승격 때 §7 에서 재대조) */
/* 테마 행 공통 기본값 — 제품 #wp 기본(--sb = 바탕 · --sbline = 선 · --prit = 흰 글자 · --inp = 컨트롤 선)과 같은 뜻.
   어두운 둘(다크·슬레이트)만 아래 행에서 덮는다(제품 셸 = 메뉴가 상단 띠 색인 「ㄱ자 틀」 · 강조색 위 어두운 글자). ⛔ 이 줄은 테마 행들보다 앞에 둘 것 */
.hero-mockup[data-mt]{--t-sb:var(--t-g);--t-sbline:var(--t-bd);--t-prit:#fff;--t-inp:var(--t-bds);}
.hero-mockup[data-mt="light"]{--t-h:#1c2b45;--t-g:#f0f5fc;--t-sf:#fff;--t-soft:#f8fafd;--t-head:#f4f8fd;--t-tx:#1e293b;--t-mut:#64748b;--t-sub:#94a3b8;--t-ac:#3b82f6;--t-acs:#2563eb;--t-acbg:#eff6ff;--t-bd:#dbe4f0;--t-bds:#e9eff8;--t-okb:#dcfce7;--t-okt:#15803d;--t-ingb:#fef3c7;--t-ingt:#b45309;--t-nob:#fee2e2;--t-not:#b91c1c;}
.hero-mockup[data-mt="dark"]{--t-h:#121212;--t-g:#161616;--t-sf:#1e1e1e;--t-soft:#252525;--t-head:#252525;--t-tx:#ececec;--t-mut:#9aa0a6;--t-sub:#6e7379;--t-ac:#4d9fff;--t-acs:#58a6ff;--t-acbg:#0d2742;--t-bd:#3a3a3a;--t-bds:#2e2e2e;--t-okb:#0e4429;--t-okt:#4ade80;--t-ingb:#4a3510;--t-ingt:#fcd34d;--t-nob:#5c1a1a;--t-not:#fca5a5;--t-sb:var(--t-h);--t-sbline:rgba(255,255,255,.07);--t-prit:#0b0b0b;--t-inp:#4d4d4d;}
/* 슬레이트(키 navy · ⏱2026-10-06 = 제품 v1.99.455/456 — 옛 네이비 남색을 회청색으로 교체 · ⛔ 키 개명 금지) */
.hero-mockup[data-mt="navy"]{--t-h:#1f2a2e;--t-g:#232f34;--t-sf:#2c3b41;--t-soft:#26343a;--t-head:#263338;--t-tx:#ffffff;--t-mut:#d0dade;--t-sub:#7f8f96;--t-ac:#5ba8d0;--t-acs:#8cc6e4;--t-acbg:#1f3540;--t-bd:#1f2a2e;--t-bds:#232f34;--t-okb:#1d4a33;--t-okt:#6ee7a0;--t-ingb:#4f4220;--t-ingt:#f5d061;--t-nob:#5a2a2a;--t-not:#f4a5a5;--t-sb:var(--t-h);--t-sbline:rgba(255,255,255,.07);--t-prit:#10232b;--t-inp:#3f5259;}
.hero-mockup[data-mt="sepia"]{--t-h:#322a21;--t-g:#f3f1ec;--t-sf:#fffdf8;--t-soft:#f9f8f4;--t-head:#f4f0e7;--t-tx:#2c2419;--t-mut:#625340;--t-sub:#867860;--t-ac:#b8860b;--t-acs:#8b6508;--t-acbg:#fbf5e6;--t-bd:#e3dcce;--t-bds:#eee9df;--t-okb:#e3edcc;--t-okt:#56711c;--t-ingb:#f7e3b0;--t-ingt:#84600f;--t-nob:#f5d5c8;--t-not:#a03d2e;}
.hero-mockup[data-mt="classic"]{--t-h:#0a246a;--t-g:#d4d0c8;--t-sf:#fff;--t-soft:#f0efeb;--t-head:#e4e2dc;--t-tx:#000;--t-mut:#5d6066;--t-sub:#8f9095;--t-ac:#316ac5;--t-acs:#2a5db4;--t-acbg:#dce6f5;--t-bd:#a6a39c;--t-bds:#c8c5bd;--t-okb:#dff0d8;--t-okt:#3c763d;--t-ingb:#fcf8e3;--t-ingt:#8a6d3b;--t-nob:#f2dede;--t-not:#a94442;}
.hero-mockup[data-mt="contrast"]{--t-h:#000;--t-g:#e4e7eb;--t-sf:#fff;--t-soft:#f1f3f6;--t-head:#e8ebef;--t-tx:#000;--t-mut:#374151;--t-sub:#4b5563;--t-ac:#0043ce;--t-acs:#003dbb;--t-acbg:#dde6ff;--t-bd:#6b7280;--t-bds:#9ca3af;--t-okb:#e7f6e7;--t-okt:#0f5d2d;--t-ingb:#fff3c4;--t-ingt:#6f4a09;--t-nob:#fde2e2;--t-not:#961717;}
.hero-mockup[data-mt] .mockup-window{background:var(--t-sf);border-color:var(--t-bd);transition:background 0.3s;}
.hero-mockup[data-mt] .mockup-titlebar{background:var(--t-h);}
.hero-mockup[data-mt] .mockup-url{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.65);}
.hero-mockup[data-mt] .mockup-sidebar{background:var(--t-sb);border-right:1px solid var(--t-sbline);}
.hero-mockup[data-mt] .mockup-sidebar-logo{color:var(--t-tx);}
.hero-mockup[data-mt] .mockup-sidebar-logo .icon{background:var(--t-ac);color:var(--t-prit);}
.hero-mockup[data-mt] .mockup-menu-section{color:var(--t-sub);}
.hero-mockup[data-mt] .mockup-menu-item{color:var(--t-mut);}
.hero-mockup[data-mt] .mockup-menu-item.active{background:var(--t-acbg);color:var(--t-acs);font-weight:600;}
.hero-mockup[data-mt] .mockup-menu-item.active .mi{background:var(--t-ac);}
.hero-mockup[data-mt] .mockup-content{background:var(--t-sf);}
.hero-mockup[data-mt] .mock-toolbar-title{color:var(--t-tx);}
.hero-mockup[data-mt] .mock-toolbar-count{background:var(--t-soft);color:var(--t-mut);}
.hero-mockup[data-mt] .mock-btn{background:var(--t-soft);color:var(--t-mut);border:1px solid var(--t-inp);}
.hero-mockup[data-mt] .mock-btn:first-child{background:var(--t-ac);color:var(--t-prit);border-color:var(--t-ac);}
.hero-mockup[data-mt] .mock-thead{background:var(--t-head);color:var(--t-mut);border-bottom-color:var(--t-bd);}
.hero-mockup[data-mt] .mock-trow{color:var(--t-tx);border-bottom-color:var(--t-bds);}
.hero-mockup[data-mt] .mockup-window .mock-amount{color:var(--t-tx);}   /* .mockup-window 로 좁힌다 — 안 좁히면 폰 목업 금액까지 PC 색으로 칠한다(폰도 .hero-mockup 안) */
.hero-mockup[data-mt] .mockup-window .mock-badge-green{background:var(--t-okb);color:var(--t-okt);}
.hero-mockup[data-mt] .mockup-window .mock-badge-orange{background:var(--t-ingb);color:var(--t-ingt);}
.hero-mockup[data-mt] .mockup-window .mock-badge-red{background:var(--t-nob);color:var(--t-not);}
.hero-mockup[data-mt] .mockup-window .mock-badge-blue,.hero-mockup[data-mt] .mockup-window .mock-badge-cyan,.hero-mockup[data-mt] .mockup-window .mock-badge-purple{background:var(--t-acbg);color:var(--t-acs);}

/* 테마 고르기 줄 — 제품 테마 선택기처럼 「바탕/강조색」 반반 동그라미. 누르는 영역 32px(점은 22px) */
.hm-themes{display:flex;visibility:hidden;align-items:center;justify-content:center;gap:0.1rem;margin-top:0.8rem;flex-wrap:wrap;}
.hm-ready .hm-themes{visibility:visible;}
.hm-themes-l{font-size:0.78rem;font-weight:600;color:var(--text-muted);margin-right:0.35rem;}
.hm-themes-l .ph{display:none;}
/* 폰 보기엔 폰에 있는 3종만(폰 보기로 바꿀 때 JS 가 테마를 폰 3종 안으로 맞춘다 → 고른 표시·aria 가 늘 보이는 버튼에) */
.hero-mockup[data-view="phone"] .hm-themes button:not([data-p]){display:none;}
.hero-mockup[data-view="phone"] .hm-themes-l .pc{display:none;}
.hero-mockup[data-view="phone"] .hm-themes-l .ph{display:inline;}
.hm-themes button{position:relative;width:32px;height:32px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;}
.hm-themes button::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid var(--line-strong);background:linear-gradient(135deg,var(--sw-bg) 55%,var(--sw-ac) 55%);transition:box-shadow 0.2s;}
.hm-themes button.on::before{box-shadow:0 0 0 2px var(--bg-primary),0 0 0 3.5px var(--ink);}
.hm-themes button:focus-visible{outline:2px solid var(--accent);outline-offset:0;}
/* 동그라미 색 = 제품 THEMES 의 g(바탕)/ac(강조) 그대로 — 위 data-mt 블록의 --t-g/--t-ac 와 같은 값 */
.hm-themes button[data-t="light"]{--sw-bg:#f0f5fc;--sw-ac:#3b82f6;}
.hm-themes button[data-t="dark"]{--sw-bg:#161616;--sw-ac:#4d9fff;}
.hm-themes button[data-t="navy"]{--sw-bg:#232f34;--sw-ac:#5ba8d0;}
.hm-themes button[data-t="sepia"]{--sw-bg:#f3f1ec;--sw-ac:#b8860b;}
.hm-themes button[data-t="classic"]{--sw-bg:#d4d0c8;--sw-ac:#316ac5;}
.hm-themes button[data-t="contrast"]{--sw-bg:#e4e7eb;--sw-ac:#0043ce;}

/* ---------- 히어로 PC 배치(⏱2026-09-28 🙋 목업 비교 뒤 확정) ---------- */
/* 좌우 비율 0.85 : 1.15 — 1180px 이상만(그보다 좁으면 제목이 3줄 → 4줄로 늘어난다 · 실측). 컨테이너 1240·nav 정렬선은 그대로 */
@media(min-width:1180px){ .hero-inner{grid-template-columns:0.85fr 1.15fr;gap:3rem;} }
/* 도구 줄 한 줄 — 「PC 화면 | 폰 화면」 왼쪽 · 「화면 테마」 오른쪽. 카드 속폭이 넉넉한 폭(1열 641~920 · 2열 1180+)만
   ⛔ 이 grid 칸에 align-items:center 를 주지 말 것 — PC 목업이 무대 높이만큼 안 늘어 위아래가 뜬다(항목별 align-self 로) */
@media(min-width:640.02px) and (max-width:920px),(min-width:1180px){
  .hero-mockup{grid-template-columns:max-content minmax(0,1fr);column-gap:0.6rem;}
  .hero-mockup>.hm-toggle{grid-row:1;grid-column:1;justify-self:start;align-self:center;margin:0 0 0.7rem;}
  .hero-mockup>.hm-themes{grid-row:1;grid-column:2;justify-self:stretch;justify-content:flex-end;align-self:center;margin:0 0 0.7rem;flex-wrap:wrap;}
  .hero-mockup>.mockup-window,.hero-mockup>.hm-phone{grid-row:2;grid-column:1/-1;}
}
/* 카드 하단 — 641px 이상 한 줄(「비즈노트 화면 미리보기」 왼쪽 · 「직접 만들 수도 있어요」 오른쪽) · 좁으면 세로 */
.hero-foot{display:flex;flex-direction:column;gap:0.7rem;align-items:flex-start;}
@media(min-width:640.02px){ .hero-foot{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;} }
/* 업종 버튼 한 줄 — 넓으면 5개 · 좁으면(휴대폰 ≤640 · 좁은 2열 921~1179) 앞 3개. 순서가 곧 우선순위(index.html 마크업) */
.industry-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
@media(max-width:640px),(min-width:920.02px) and (max-width:1179.98px){
  .industry-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .industry-btn:nth-child(n+4){display:none;}
}
/* 5개인데 버튼이 좁아지는 폭은 아이콘을 빼 「건설/인테리어」가 두 줄로 꺾이지 않게 — 윈도 스크롤바(≈15px)만큼 여유를 둔 범위(701~714 꺾임 실측) */
@media(min-width:640.02px) and (max-width:730px),(min-width:1180px) and (max-width:1310px){
  .industry-btn .ind-icon{display:none;}
  .industry-btn{white-space:nowrap;}
}

/* 3중 안전망 띠는 섹션 밖(body 직속)이라 좌우 여백이 없다 — 1240+여백 이하 폭에선 화면 끝에 붙는다 → 섹션과 같은 2rem */
@media(min-width:640.02px) and (max-width:1304px){
  .safety-band{margin-left:2rem;margin-right:2rem;}
}

/* =========================================================================
   Ⅲ 모바일(≤640) 축약 — 섹션별 처리는 사장님 목업 확정(⏱2026-09-28)
   ========================================================================= */
@media(max-width:640px){
  /* 공통 여백·제목 */
  .reallife,.ways3,.features,.templates,.comparison,.pricing,.faq,.cta{padding:3.2rem 1.2rem;}
  .section-header,.rl-header{margin-bottom:1.6rem;}
  .section-title{font-size:1.55rem;}
  .section-desc{font-size:0.95rem;}
  .section-title,.section-desc,.rl-header p{word-break:keep-all;}

  /* 히어로 */
  .hero{padding:5.4rem 1.2rem 2.4rem;min-height:0;}
  .hero-inner{gap:1.8rem;}
  .hero-content h1{font-size:2.05rem;}
  .hero-lead br{display:none;}
  .industry-grid{margin-bottom:0.8rem;}
  .track-foot{padding:0.9rem 1.1rem;}
  /* PC 목업이 무대 높이만큼 늘 때 탭 줄(사이드바) 행이 같이 늘지 않게 */
  .hero-mockup .mockup-body{align-content:start;}
  /* PC 보기(테마 적용 시): 사이드바가 표 위 탭 줄이 되므로 세로 구분선 → 가로 구분선 */
  .hero-mockup[data-mt] .mockup-sidebar{border-right:0;border-bottom:1px solid var(--t-sbline);}

  /* 숨김 — 무료 서식 배너(☰·푸터에 링크 있음). ※「3단계로 끝」은 메인에서 마크업째 삭제(PC·모바일 모두 · 🙋 3가지 방법과 중복) */
  .forms-strip{display:none;}

  /* 실제 업무 이야기 — 세로 압축 카드: 위 회색=고민 한 줄 / 아래=해결+설명 */
  .rl-grid{display:flex;flex-direction:column;gap:0.65rem;}
  .rl-card{border-radius:14px;}
  .rl-card:hover{transform:none;box-shadow:var(--shadow-card);}
  .rl-state,.rl-tag{display:none;}
  .rl-before{padding:0.8rem 1rem 0.95rem;}
  .rl-before .rl-quote{font-family:'Pretendard',sans-serif;font-size:0.86rem;font-weight:500;line-height:1.45;margin:0;word-break:keep-all;}
  .rl-before .rl-detail{display:none;}
  .rl-arrow-circle{width:24px;height:24px;top:-12px;box-shadow:0 4px 10px -3px var(--accent);}
  .rl-arrow-circle svg{width:12px;height:12px;}
  .rl-after{padding:0.9rem 1rem 0.95rem;}
  .rl-after .rl-quote{font-size:1.02rem;line-height:1.35;margin-bottom:0.25rem;word-break:keep-all;}
  .rl-after .rl-detail{font-size:0.8rem;line-height:1.5;margin:0;word-break:keep-all;}

  /* 3가지 방법 — 카드 속 장식 목업 숨김 + 압축 */
  .way3-demo{display:none;}
  .ways3-grid{gap:0.65rem;}
  .way3-card{padding:1.05rem 1.1rem 1.1rem;border-radius:14px;}
  .way3-card:hover{transform:none;}
  .way3-top{gap:0.6rem;margin-bottom:0.85rem;}
  .way3-num{font-size:1.35rem;width:22px;}
  .way3-titles h3{font-size:1.05rem;margin-bottom:0.15rem;}
  .way3-sub{display:block;font-size:0.82rem;line-height:1.45;word-break:keep-all;}
  .way3-cta{padding:0.68rem;font-size:0.88rem;}

  /* 핵심 기능 — 한 패널 안 세로 목록(아이콘 좌측 · 제목+설명 우측) */
  .features-grid{grid-template-columns:1fr;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);}
  .feature-card{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:0.85rem;align-items:start;padding:0.9rem 1rem;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;}
  .feature-card:last-child{border-bottom:0;}
  .feature-card:hover{transform:none;box-shadow:none;border-color:var(--line);}
  .feature-icon{width:36px;height:36px;border-radius:10px;margin:0;grid-row:span 2;}
  .feature-icon svg{width:18px;height:18px;}
  .feature-card h3{font-size:0.95rem;margin:0.05rem 0 0.2rem;}
  .feature-card p{font-size:0.8rem;line-height:1.5;word-break:keep-all;}

  /* 3중 안전망(접었을 때 제목 한 줄 · 펼치면 원래 내용) */
  .safety-band{margin:1.2rem 1.2rem 0;padding:1.4rem 1.2rem;}   /* 섹션 밖(body 직속)이라 좌우 여백을 직접 — 없으면 화면 끝에 붙는다 */
  .safety-steps{gap:0.55rem;}
  .safety-step{padding:0.8rem 0.9rem;}
  .ss-desc{font-size:0.8rem;}

  /* 템플릿 — 업종 칩 3열 격자 + 세로 목록 (가로 스크롤 없음) */
  .template-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.4rem;margin-bottom:1rem;}
  .template-tab{padding:0.55rem 0.2rem;font-size:0.78rem;border-radius:10px;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis;}
  .template-cards{display:flex;flex-direction:column;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);}
  .template-cards .tpl-card{position:relative;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0.85rem 2.2rem 0.85rem 1rem;border-bottom:1px solid var(--line);}
  .template-cards .tpl-card:last-child{border-bottom:0;}
  .template-cards .tpl-card:hover{transform:none;box-shadow:none;}
  .template-cards .tpl-card::after{content:"›";position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--text-muted);line-height:1;}
  .tpl-card-top{margin-bottom:0.2rem;}
  .tpl-card-name{font-size:0.95rem;}
  .tpl-card-desc{min-height:0;margin-bottom:0;font-size:0.8rem;line-height:1.5;word-break:keep-all;}
  .tpl-card-tags{display:none;}
  .tpl-actions{margin-top:1.1rem;flex-direction:column;gap:0.55rem;}
  .tpl-actions a{display:block;text-align:center;padding:0.75rem 1rem;font-size:0.9rem;}

  /* 비교표(펼쳤을 때) — 외주·일반앱 열 숨김 → 엑셀 vs 비즈노트 */
  .comparison-table{min-width:0;}
  .comparison-table th:nth-child(3),.comparison-table td:nth-child(3),
  .comparison-table th:nth-child(4),.comparison-table td:nth-child(4){display:none;}
  .comparison-table th,.comparison-table td{padding:0.65rem 0.55rem;font-size:0.8rem;}

  /* 요금표(「자세히 비교」로 펼쳤을 때) — 화면 폭에 맞춤 */
  .price-table{min-width:0;word-break:keep-all;}
  .price-table col.col-feat{width:34%;}
  .price-table th,.price-table td{padding:0.65rem 0.5rem;font-size:0.8rem;}
  .price-table th.pt-plan{padding-top:1.6rem;}
  .pt-badge{top:0.4rem;right:50%;transform:translateX(50%);font-size:0.56rem;padding:0.12rem 0.5rem;}
  .pt-plan-price{font-size:1.25rem;}
  .pt-plan-desc{font-size:0.7rem;}
  .pt-cta{display:block;line-height:1.3;border-radius:12px;padding:0.45rem 0.3rem;font-size:0.72rem;}
  .pt-corner-q{font-size:0.84rem;}
  .pt-corner-a{font-size:0.72rem;}
  .price-scroll-hint{display:none;}
  /* 표를 폭에 맞췄으니 ? 도움말 말풍선도 좁게 — 안 그러면 표 밖으로 6~20px 삐져 가로 스크롤이 생긴다(실측) */
  .pt-help:hover::after,.pt-help:focus::after{max-width:min(200px,55vw);}

  /* FAQ·CTA·푸터 */
  .faq-question{padding:0.95rem 1.05rem;font-size:0.95rem;}
  .cta-box{padding:2.4rem 1.4rem;}
  footer{padding:2.6rem 1.2rem 1.6rem;}
  .footer-top{margin-bottom:1.6rem;gap:1.2rem;}
}

/* =========================================================================
   Ⅳ 접기(≤640) — 비교표·3중 안전망: 제목 한 줄 → 누르면 펼침
   ⭐ 숨김(display:none)이 아니라 접기인 이유 = 글이 페이지에 남아 모바일 우선 색인에 그대로 반영(비교표 = 「엑셀 대체」)
   ========================================================================= */
.m-fold-bar{display:none;}
/* .m-ready = JS 가 접기 버튼을 연결한 뒤 붙인다 — JS 가 없거나 앞 코드가 죽으면 접지 않고 그대로 펼쳐 둔다(열 수 없는 죽은 버튼 방지) */
@media(max-width:640px){
  .m-foldable.m-ready:not(.m-open)>:not(.m-fold-bar){display:none;}
  .comparison.m-foldable.m-ready:not(.m-open){padding-top:0.5rem;padding-bottom:0.5rem;}
  .safety-band.m-foldable.m-ready:not(.m-open){padding:0;border:0;background:none;}
  /* 펼치면 바는 오른쪽 「접기 ▴」만 남기고 제목은 원래 제목(h2 등)이 맡는다 — 제목을 숨기면 그 섹션에 제목 요소가 없어진다(접근성) */
  .m-bar-close{display:none;}
  .m-open>.m-fold-bar .m-bar-t{display:none;}
  .m-open>.m-fold-bar .m-bar-close{display:inline;font-size:0.85rem;font-weight:600;color:var(--text-muted);}
  .m-ready.m-open>.m-fold-bar{justify-content:flex-end;gap:0.35rem;width:auto;margin-left:auto;padding:0.45rem 0.8rem;box-shadow:none;}
  .m-ready>.m-fold-bar{
    display:flex;align-items:center;justify-content:space-between;gap:0.8rem;width:100%;
    background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);
    padding:0.9rem 1.1rem;font:inherit;font-size:0.95rem;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;
  }
  .m-open>.m-fold-bar{margin-bottom:1.3rem;}
  .m-fold-bar .m-lab{display:block;font-size:0.72rem;font-weight:700;color:var(--accent);margin-bottom:0.15rem;letter-spacing:0.04em;}
  .m-fold-bar .m-arr{flex:none;color:var(--text-muted);font-size:0.9rem;transition:transform 0.2s;}
  .m-open>.m-fold-bar .m-arr{transform:rotate(180deg);}
}

/* =========================================================================
   Ⅴ 요금(≤640) — 요약 카드 2장 + 「요금 자세히 비교하기」 (PC 는 표 그대로)
   ⚠️ 카드 숫자 = 요금표와 같은 값 — 요금이 바뀌면 둘 다(CLAUDE.md 좌석제 요금)
   ========================================================================= */
.pm-cards,.pm-more{display:none;}
@media(max-width:640px){
  .pm-cards{display:flex;flex-direction:column;gap:0.8rem;}
  .pm-card{background:var(--paper);border:1px solid var(--line-strong);border-radius:16px;padding:1.15rem 1.15rem 1.2rem;box-shadow:var(--shadow-card);}
  .pm-card.pm-pro{border:1.5px solid var(--ink);}
  .pm-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0.2rem 0.6rem;}
  .pm-name{font-family:'Fraunces','Pretendard',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink);display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;}
  .pm-badge{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.58rem;font-weight:800;letter-spacing:0.06em;background:var(--accent);color:#fff;padding:0.14rem 0.5rem;border-radius:100px;}
  .pm-price{font-family:'Outfit','Pretendard',sans-serif;font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:-0.02em;white-space:nowrap;}
  .pm-price small{font-size:0.72rem;font-weight:500;color:var(--text-muted);margin-left:0.15rem;}
  .pm-desc{font-size:0.82rem;color:var(--text-muted);margin:0.15rem 0 0.7rem;}
  .pm-feats{list-style:none;margin:0 0 0.95rem;padding:0.75rem 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:0.4rem;}
  .pm-feats li{position:relative;padding-left:1.1rem;font-size:0.84rem;color:var(--text);line-height:1.5;word-break:keep-all;}
  .pm-feats li::before{content:"✓";position:absolute;left:0;top:0;font-size:0.78rem;color:var(--success,#2f8f5b);font-weight:700;}
  .pm-cta{display:block;text-align:center;padding:0.72rem 1rem;border-radius:100px;font-weight:700;font-size:0.88rem;text-decoration:none;}
  .pm-cta-ghost{border:1px solid var(--line-strong);color:var(--ink);}
  .pm-cta-fill{background:var(--accent);color:#fff;}
  .pm-foot{font-size:0.78rem;color:var(--text-muted);text-align:center;margin:0.2rem 0 0;line-height:1.7;word-break:keep-all;}
  .pm-foot a{color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap;}
  .pm-more{
    display:flex;align-items:center;justify-content:center;gap:0.4rem;width:100%;margin:1rem 0 0;
    background:transparent;border:1px solid var(--line-strong);border-radius:100px;padding:0.75rem 1rem;
    font:inherit;font-size:0.88rem;font-weight:600;color:var(--ink);cursor:pointer;
  }
  .pm-arr{transition:transform 0.2s;color:var(--text-muted);}
  .pricing.pm-open .pm-arr{transform:rotate(180deg);}
  .pricing.pm-open .pm-more{margin-bottom:1rem;}
  /* 접힌 상태 = 표·엔터프라이즈·안내·견적서(.pm-detail) 숨김 — 내용은 페이지에 남는다 / 펼치면 요약 카드를 접고 전체 표로
     .pm-ready = JS 가 버튼을 연결한 뒤 붙인다 — 없으면 카드와 전체 표를 둘 다 보여 준다(버튼은 숨김) */
  .pricing:not(.pm-ready) .pm-more{display:none;}
  .pricing.pm-ready:not(.pm-open) .pm-detail{display:none;}
  .pricing.pm-ready.pm-open .pm-cards{display:none;}
}
@media(max-width:300px){
  .template-tab{font-size:0.72rem;letter-spacing:-0.02em;}
}

/* =========================================================================
   Ⅴ 함께 쓰기 배너(.sync-band) — 「직원이 고치면, 내 화면도 저절로」(⏱2026-10-06)
   · 틀 = 3중 안전망과 **같은 클래스**(`class="safety-band sync-band"` — 여백 규칙 사본을 두지 않는다 · ⛔ m-foldable 은 붙이지 않는다) · 머리(.safety-head·.safety-badge·.safety-title·.safety-sub)·.ss-num·.safety-foot 은 index-style.css 것을 빌려 쓴다
   · 그림 = PC 두 대(직원 → 사장님) — ⛔ 휴대폰→PC 로 되돌리지 말 것(1인 PC↔폰은 순차 사용이라 차별점이 아니다 · 🙋 확정)
   · 알림 문구는 제품 화면 문구 그대로(「다른 곳에서 바뀐 내용을 반영했습니다」 — 제품 wp-core.js `merged`)
   · 폰(≤640)에서도 접지 않는다(홍보 축이라 펼친 채)
   ========================================================================= */
.sync-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.4rem;align-items:center;}
@media(max-width:860px){.sync-body{grid-template-columns:minmax(0,1fr);}}

/* 그림 — 김실장 PC → 사장님 PC */
.sync-visual{
  display:flex;align-items:center;justify-content:center;gap:0.9rem;min-width:0;
  padding:1.6rem 1.2rem 1.5rem;background:var(--bg-primary);border:1px solid var(--line);border-radius:14px;
}
.sv-dev{flex:1 1 0;max-width:330px;display:flex;flex-direction:column;align-items:center;gap:0.45rem;min-width:0;}
.sv-cap{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.74rem;font-weight:700;color:var(--text-muted);white-space:nowrap;}
.sv-who{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:0.6rem;font-weight:800;background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue);}
.sv-who.sv-me{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);}
.sv-pc{
  position:relative;width:100%;overflow:hidden;
  background:var(--bg-secondary);border:1.5px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow-card);
}
.sv-pc-bar{display:flex;align-items:center;gap:0.3rem;padding:0.42rem 0.6rem;border-bottom:1px solid var(--line);font-size:0.66rem;font-weight:700;color:var(--text-muted);}
.sv-pc-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);}
.sv-pc-bar span{margin-left:0.3rem;}
.sv-pc-body{padding-bottom:3rem;}   /* 아래 저장 표시·알림 자리 — 알림이 두 줄로 접혀도(실측 39px) 표 줄을 덮지 않게 */
.sv-tbl{width:100%;border-collapse:collapse;font-size:0.68rem;color:var(--ink);}
.sv-tbl th{text-align:left;font-weight:700;font-size:0.62rem;color:var(--text-muted);padding:0.42rem 0.6rem;border-bottom:1px solid var(--line);}
.sv-tbl td{padding:0.44rem 0.6rem;border-bottom:1px solid var(--line);white-space:nowrap;}
.sv-tbl tr:last-child td{border-bottom:0;}
.sv-chip{display:inline-block;font-size:0.6rem;font-weight:700;padding:0.1rem 0.42rem;border-radius:20px;white-space:nowrap;line-height:1.5;}
.sv-wait{background:color-mix(in srgb,var(--warning) 18%,transparent);color:color-mix(in srgb,var(--warning) 70%,var(--ink));}
.sv-done{background:color-mix(in srgb,var(--success) 16%,transparent);color:color-mix(in srgb,var(--success) 72%,var(--ink));}
.sv-swap{display:inline-grid;justify-items:start;}
.sv-swap>b{grid-area:1/1;}
.sv-swap>.sv-b{opacity:0;}
.sv-saved{
  position:absolute;left:50%;bottom:0.55rem;transform:translateX(-50%);
  font-size:0.6rem;font-weight:700;white-space:nowrap;padding:0.16rem 0.55rem;border-radius:20px;
  background:var(--ink);color:var(--bg-primary);opacity:0;
}
.sv-toast{
  position:absolute;left:0.55rem;right:0.55rem;bottom:0.5rem;
  display:flex;align-items:center;gap:0.35rem;padding:0.38rem 0.55rem;border-radius:8px;
  font-size:0.62rem;font-weight:600;line-height:1.35;word-break:keep-all;background:var(--ink);color:var(--bg-primary);opacity:0;
}
.sv-toast svg{flex:none;width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.sv-flow{flex:none;display:flex;flex-direction:column;align-items:center;gap:0.25rem;color:var(--accent);font-size:0.66rem;font-weight:700;text-align:center;line-height:1.3;}
.sv-flow svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* 움직임 — 7초 한 바퀴: ①김실장이 상태를 바꿔 저장 → ②사장님 화면의 같은 줄이 바뀌고 색 강조 + 알림
   ⚠ 정적 그림이다(버튼·hover 없음 — Hero 목업과 같은 원칙: 눌러도 반응 없는 것엔 클릭 신호를 주지 않는다) */
.sv-src .sv-a{animation:svSrcA 7s infinite;}
.sv-src .sv-b{animation:svSrcB 7s infinite;}
.sv-tap td{animation:svTap 7s infinite;}
.sv-saved{animation:svSaved 7s infinite;}
.sv-flow{animation:svFlow 7s infinite;}
.sv-dst .sv-a{animation:svDstA 7s infinite;}
.sv-dst .sv-b{animation:svDstB 7s infinite;}
.sv-hl td{animation:svHl 7s infinite;}
.sv-toast{animation:svToast 7s infinite;}
.sync-band:not(.visible) .sync-visual *{animation-play-state:paused;}
@keyframes svSrcA{0%,15%{opacity:1}17%,96%{opacity:0}100%{opacity:1}}
@keyframes svSrcB{0%,15%{opacity:0}17%,96%{opacity:1}100%{opacity:0}}
@keyframes svTap{0%,11%{background:transparent}13%,24%{background:color-mix(in srgb,var(--ink) 7%,transparent)}28%,100%{background:transparent}}
@keyframes svSaved{0%,16%{opacity:0}19%,32%{opacity:1}36%,100%{opacity:0}}
@keyframes svFlow{0%,22%{opacity:0.35;transform:none}28%{opacity:1;transform:translateX(3px)}36%,100%{opacity:0.35;transform:none}}
@keyframes svDstA{0%,37%{opacity:1}39%,96%{opacity:0}100%{opacity:1}}
@keyframes svDstB{0%,37%{opacity:0}39%,96%{opacity:1}100%{opacity:0}}
@keyframes svHl{0%,37%{background:transparent}40%{background:color-mix(in srgb,var(--warning) 34%,transparent)}48%,92%{background:color-mix(in srgb,var(--warning) 16%,transparent)}97%,100%{background:transparent}}
@keyframes svToast{0%,39%{opacity:0;transform:translateY(6px)}43%,82%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(6px)}}
/* 움직임을 줄인 기기 = 바뀐 뒤 모습으로 멈춘 그림 */
@media(prefers-reduced-motion:reduce){
  .sync-visual *{animation:none!important;}
  .sv-swap>.sv-a{opacity:0;}
  .sv-swap>.sv-b{opacity:1;}
  .sv-hl td{background:color-mix(in srgb,var(--warning) 16%,transparent);}
  .sv-toast{opacity:1;}
  .sv-flow{opacity:1;}
}

/* 연락처 칸 = 창이 넓을 때만(실측: 1180 에서 표 220 = 창 220 로 딱 맞음 → 1200 까지 뺀다 · 641~860 1열 구간도 함께 — 구간을 쪼개지 않는다) */
@media(max-width:1200px){ .sv-tbl .c-tel{display:none;} }

/* 장점 3줄 */
.sync-points{list-style:none;margin:0;padding:0;display:grid;gap:0.75rem;}
.sync-points li{display:flex;gap:0.85rem;padding:1.05rem 1.1rem;background:var(--bg-primary);border:1px solid var(--line);border-radius:13px;}
.sync-points .ss-num svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.sp-name{font-weight:700;font-size:1rem;margin-bottom:0.3rem;color:var(--ink);}
.sp-desc{font-size:0.86rem;color:var(--text-muted);line-height:1.55;margin:0;}
.sp-desc b{color:var(--text);font-weight:700;}

/* 휴대폰 — 안전망과 같은 여백 · 표는 연락처 칸을 빼고 두 칸만 */
@media(max-width:640px){
  .sync-band .safety-head{margin-bottom:1.1rem;align-items:flex-start;}
  .sync-band .safety-title,.sync-band .safety-sub,.sync-band .safety-foot{word-break:keep-all;}
  .sync-visual{gap:0.4rem;padding:1.2rem 0.6rem 1.3rem;}
  .sv-cap{font-size:0.66rem;}
  .sv-chip{font-size:0.56rem;padding:0.08rem 0.32rem;}
  .sv-flow span{display:none;}
  .sv-pc-body{padding-bottom:3.6rem;}
  .sv-toast{left:0.4rem;right:0.4rem;bottom:0.4rem;padding:0.32rem 0.4rem;font-size:0.56rem;}
  .sv-toast svg{display:none;}
  .sv-flow svg{width:20px;height:20px;}
  .sv-tbl th,.sv-tbl td{padding:0.38rem 0.34rem;}
  .sync-points{gap:0.55rem;}
  .sync-points li{padding:0.8rem 0.9rem;}
  .sp-name{font-size:0.95rem;}
  .sp-desc{font-size:0.82rem;word-break:keep-all;}
}