/* ========================================================================
   pages.css — 새 메인(index.html) · 회사·팀(team.html) · 1인·매장(solo.html) · 요금(pricing.html) 네 장 공용
   ⏱2026-10-12 신설. index-style.css(사이트 표준 · 변수·메뉴·버튼·섹션 머리·CTA·푸터) → index-v2.css(모바일 헤더 등) 뒤에 싣는다.
   이름 규칙: .ap-* = 대상별 페이지 부품(회사·팀·1인·매장이 먼저 썼다) · .mp-* = 새 메인에서 나온 부품 · .pp-* = 요금 페이지
   ★ 고치면 네 장의 링크 ?v=날짜 를 함께 올린다(라이브에 캐시 기간 설정이 없다) · 업로드는 CSS 먼저 → HTML 나중
   ⛔ 코랄(accent)은 포인트에만 — 표·목업 같은 데이터 영역은 크림+중립
   정본 = docs/MAIN-PAGE.md 「대상별 페이지·새 메인」
   ======================================================================== */
/* 메뉴 — 지금 페이지 표시 */
.nav-links a.on{color:var(--ink);font-weight:700;}
.nav-links a.on::after{width:100% !important;}
@media(max-width:860px){.nav-links a.on::after{width:0 !important;}}   /* ---------- Hero ---------- */
.ap-hero{min-height:auto;padding:9.5rem 2rem 4.5rem;}
.ap-hero .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3.5rem;}
.ap-hero .hero-lead{max-width:540px;}
.ap-hero .hero-content h1{font-size:2.75rem;text-wrap:balance;}   /* 줄 길이를 고르게 — 한 낱말만 남는 줄을 막는다 */
@media(min-width:921px) and (max-width:1180px){.ap-hero .hero-content h1{font-size:2.3rem;}}   /* 2열이 유지되는 좁은 폭 */
@media(max-width:920px){
  .ap-hero{padding:7.2rem 1.25rem 3rem;}
  .ap-hero .hero-inner{grid-template-columns:minmax(0,1fr);gap:2.4rem;}
  .ap-hero .hero-content h1{font-size:2.1rem;}
}
@media(max-width:480px){
  .ap-hero .hero-content h1{font-size:1.75rem;}
  .ap-hero .hero-lead{font-size:1.02rem;}
  .ap-hero .hero-buttons a{width:100%;justify-content:center;}
}

/* ---------- 공통 섹션 ---------- */
.ap-sec{padding:5rem 2rem;}
.ap-wrap{max-width:1240px;margin:0 auto;}
@media(max-width:640px){.ap-sec{padding:3.4rem 1.1rem;} .ap-sec .section-header{margin-bottom:2.2rem;padding:0;}}

/* ---------- 표(목업·미니) ---------- */
.ap-tbl{width:100%;border-collapse:collapse;font-size:0.84rem;table-layout:auto;}
.ap-tbl th{font-weight:700;font-size:0.72rem;letter-spacing:0.02em;color:var(--text-muted);text-align:left;padding:0.5rem 0.7rem;border-bottom:1px solid var(--line-strong);white-space:nowrap;}
.ap-tbl td{padding:0.55rem 0.7rem;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap;}
.ap-tbl tr:last-child td{border-bottom:none;}
.ap-tbl .num{text-align:right;font-family:'Outfit','Pretendard',sans-serif;}
.ap-tbl .auto{font-weight:700;}
.ap-tbl .muted{color:var(--text-muted);}
.ap-chip{display:inline-block;font-size:0.7rem;font-weight:700;padding:0.12rem 0.5rem;border-radius:20px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);white-space:nowrap;}

.ap-chip.ok{background:color-mix(in srgb,var(--success) 18%,transparent);}

/* ---------- Hero 그림: 파일 여러 개 → 테이블 하나 ---------- */
.ap-merge{display:flex;flex-direction:column;gap:0.9rem;min-width:0;}
.ap-files{display:flex;flex-wrap:wrap;gap:0.5rem;}
.ap-file{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.8rem;color:var(--text-muted);padding:0.4rem 0.7rem;border:1px dashed var(--line-strong);border-radius:9px;background:var(--paper);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-muted) 55%,transparent);}
.ap-file i{font-style:normal;font-weight:800;font-size:0.62rem;width:17px;height:17px;border-radius:4px;display:grid;place-items:center;background:color-mix(in srgb,var(--success) 22%,transparent);color:var(--ink);text-decoration:none;}
.ap-merge-arrow{font-size:0.82rem;font-weight:700;color:var(--accent);padding-left:0.2rem;}
.ap-win{border:1px solid var(--line-strong);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-card);overflow:hidden;min-width:0;}
.ap-win-bar{display:flex;align-items:center;gap:0.45rem;padding:0.6rem 0.9rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 4%,transparent);}
.ap-win-bar > i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none;}
.ap-win-bar span{font-weight:700;font-size:0.86rem;margin-left:0.4rem;}
.ap-who-list{margin-left:auto;display:flex;align-items:center;gap:0.3rem;font-size:0.74rem;color:var(--text-muted);white-space:nowrap;}
.ap-av{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:0.68rem;font-weight:700;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);border:1px solid var(--line);}
.ap-win-body{overflow:hidden;}
.ap-win-foot{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;font-size:0.76rem;color:var(--text-muted);padding:0.6rem 0.9rem;border-top:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,transparent);}
.ap-win-foot b{color:var(--ink);font-weight:700;}
.ap-hl td{background:color-mix(in srgb,var(--warning) 16%,transparent);}
@media(max-width:480px){
  .ap-hide-s{display:none;}
  .ap-tbl{font-size:0.78rem;}
  .ap-tbl th,.ap-tbl td{padding:0.5rem 0.5rem;}
}

/* ---------- 업무 장면 카드 ---------- */
.ap-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;}
@media(max-width:900px){.ap-scenes{grid-template-columns:minmax(0,1fr);}}
.ap-scene{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.ap-scene-head{display:flex;align-items:center;gap:0.7rem;padding:1.3rem 1.5rem 0.9rem;flex-wrap:wrap;}
.ap-no{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:'Outfit','Pretendard',sans-serif;font-weight:700;font-size:0.9rem;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);}
.ap-scene-head h3{font-size:1.22rem;margin:0;}
.ap-who{margin-left:auto;font-size:0.76rem;font-weight:600;color:var(--text-muted);padding:0.2rem 0.65rem;border:1px solid var(--line-strong);border-radius:20px;white-space:nowrap;}
.ap-ba{display:grid;grid-template-columns:minmax(0,1fr);}
.ap-b,.ap-a{padding:0.9rem 1.5rem;}
.ap-b{background:color-mix(in srgb,var(--text-muted) 6%,transparent);}
.ap-b p{color:var(--text-muted);}
.ap-ba p{font-size:0.93rem;line-height:1.65;margin:0;}
.ap-ba b{color:var(--ink);font-weight:700;}
.ap-lab{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.68rem;font-weight:800;letter-spacing:0.08em;margin-bottom:0.35rem;}
.ap-lab::before{content:"";width:6px;height:6px;border-radius:50%;}
.ap-b .ap-lab{color:var(--danger);} .ap-b .ap-lab::before{background:var(--danger);}
.ap-a .ap-lab{color:var(--accent);} .ap-a .ap-lab::before{background:var(--accent);}
.ap-mini{margin:0.2rem 1.5rem 0;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bg-primary);}
.ap-scene-foot{display:flex;align-items:center;gap:0.45rem;flex-wrap:wrap;padding:1rem 1.5rem 1.3rem;margin-top:auto;}
.ap-feat{font-size:0.72rem;font-weight:700;color:var(--ink);padding:0.2rem 0.6rem;border-radius:20px;background:color-mix(in srgb,var(--ink) 7%,transparent);white-space:nowrap;}
.ap-link{margin-left:auto;font-size:0.88rem;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;}
.ap-link:hover{text-decoration:underline;}
@media(max-width:480px){
  .ap-scene-head{padding:1.1rem 1.1rem 0.8rem;}
  .ap-b,.ap-a{padding:0.85rem 1.1rem;}
  .ap-mini{margin:0.2rem 1.1rem 0;}
  .ap-scene-foot{padding:0.9rem 1.1rem 1.1rem;}
  .ap-link{margin-left:0;width:100%;}
}

/* 다른 대장 칩 줄 */
.ap-more{margin-top:2.2rem;text-align:center;}
.ap-more p{font-size:0.92rem;color:var(--text-muted);margin-bottom:0.9rem;}
.ap-more-list{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;}
.ap-more-list a{font-size:0.86rem;font-weight:600;color:var(--ink);text-decoration:none;padding:0.45rem 0.95rem;border:1px solid var(--line-strong);border-radius:100px;background:var(--paper);transition:border-color 0.25s,color 0.25s;}
.ap-more-list a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- 달라지는 점 3칸 ---------- */
.ap-diff{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;}
@media(max-width:980px){.ap-diff{grid-template-columns:minmax(0,1fr);}}
.ap-diff-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.4rem;min-width:0;display:flex;flex-direction:column;gap:1rem;}
.ap-diff-card h3{font-size:1.12rem;margin:0 0 0.4rem;}
.ap-diff-card p{font-size:0.9rem;color:var(--text-muted);line-height:1.65;margin:0;}
.ap-diff-card p b{color:var(--ink);}
.ap-vis{border:1px solid var(--line);border-radius:12px;background:var(--bg-primary);overflow:hidden;min-height:150px;}
.ap-vis .ap-tbl td,.ap-vis .ap-tbl th{text-align:center;}
.ap-vis .ap-tbl td:first-child,.ap-vis .ap-tbl th:first-child{text-align:left;}

.ap-vis-note{font-size:0.72rem;color:var(--text-muted);padding:0.45rem 0.7rem;border-top:1px solid var(--line);}
.ap-hist{list-style:none;margin:0;padding:0.3rem 0;}
.ap-hist li{display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap;padding:0.55rem 0.8rem;border-bottom:1px solid var(--line);font-size:0.8rem;}
.ap-hist li:last-child{border-bottom:none;}
.ap-hist .t{color:var(--text-muted);font-size:0.72rem;white-space:nowrap;}
.ap-hist .w{font-weight:700;}
.ap-hist .c{color:var(--text-muted);}
.ap-hist .c b{color:var(--ink);}
.ap-hist .r{margin-left:auto;font-size:0.72rem;font-weight:700;color:var(--ink);padding:0.1rem 0.5rem;border:1px solid var(--line-strong);border-radius:20px;}

/* ---------- 고치는 장면 ---------- */
.ap-fit{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:2rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:2rem;}
@media(max-width:900px){.ap-fit{grid-template-columns:minmax(0,1fr);padding:1.3rem;gap:1.3rem;}}
.ap-fit h3{font-size:1.35rem;margin:0 0 0.7rem;line-height:1.35;}
.ap-fit p{font-size:0.95rem;color:var(--text-muted);line-height:1.7;margin:0 0 1rem;}
.ap-fit p b{color:var(--ink);}
.ap-fit-links{display:flex;gap:1.1rem;flex-wrap:wrap;}
.ap-fit-links a{font-size:0.9rem;font-weight:700;color:var(--accent);text-decoration:none;}
.ap-fit-links a:hover{text-decoration:underline;}
.ap-build{border:1px solid var(--line);border-radius:12px;background:var(--bg-primary);overflow:hidden;min-width:0;}
.ap-build-row{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.8rem;border-bottom:1px solid var(--line);font-size:0.84rem;}
.ap-build-row:last-child{border-bottom:none;}
.ap-build-row .k{flex:none;font-size:0.68rem;font-weight:700;color:var(--text-muted);padding:0.12rem 0.45rem;border:1px solid var(--line-strong);border-radius:6px;white-space:nowrap;}
.ap-build-row .n{font-weight:700;}
.ap-build-row .d{margin-left:auto;font-size:0.76rem;color:var(--text-muted);text-align:right;}
.ap-build-row.new{background:color-mix(in srgb,var(--warning) 14%,transparent);}
.ap-build-row.new .k{border-color:var(--accent);color:var(--accent);}
.ap-build-add{padding:0.6rem 0.8rem;font-size:0.82rem;font-weight:700;color:var(--text-muted);}

/* ---------- 시작 3단계 ---------- */
.ap-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;}
@media(max-width:900px){.ap-steps{grid-template-columns:minmax(0,1fr);}}
.ap-step{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.5rem;min-width:0;}
.ap-step .ap-no{margin-bottom:0.9rem;}
.ap-step h3{font-size:1.1rem;margin:0 0 0.5rem;}
.ap-step p{font-size:0.9rem;color:var(--text-muted);line-height:1.65;margin:0 0 0.9rem;}
.ap-step p b{color:var(--ink);}
.ap-step a{font-size:0.88rem;font-weight:700;color:var(--accent);text-decoration:none;display:inline-block;margin-right:0.9rem;}
.ap-step a:hover{text-decoration:underline;}

/* ---------- 좋은 점 3칸(1인 페이지) ---------- */
.ap-goods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;}
@media(max-width:900px){.ap-goods{grid-template-columns:minmax(0,1fr);}}

/* ---------- 폰 그림(1인 페이지 Hero) ---------- */
.ap-phone-wrap{display:flex;justify-content:center;min-width:0;}
.ap-phone{width:min(290px,100%);border:1px solid var(--line-strong);border-radius:30px;background:var(--paper);box-shadow:var(--shadow-card);padding:0.7rem;}
.ap-phone-screen{border:1px solid var(--line);border-radius:22px;background:var(--bg-primary);overflow:hidden;}
.ap-phone-top{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0.9rem 0.6rem;font-weight:700;font-size:0.92rem;}
.ap-phone-top small{font-weight:600;font-size:0.72rem;color:var(--text-muted);}

.ap-phone-card{margin:0 0.8rem 0.6rem;padding:0.75rem 0.8rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);}
.ap-phone-card .h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:0.88rem;margin-bottom:0.35rem;}
.ap-phone-card .m{font-size:0.76rem;color:var(--text-muted);line-height:1.6;}
.ap-phone-card .m b{color:var(--ink);font-weight:700;}
.ap-phone-tabs{display:flex;justify-content:space-around;padding:0.6rem 0;border-top:1px solid var(--line);margin-top:0.3rem;}
.ap-phone-tabs i{width:22px;height:4px;border-radius:4px;background:var(--line-strong);}
.ap-phone-tabs i.on{background:var(--ink);}

/* ---------- 다른 쪽 페이지로 ---------- */
.ap-cross{max-width:880px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.3rem 1.6rem;border:1px dashed var(--line-strong);border-radius:16px;}
.ap-cross p{font-size:0.96rem;margin:0;color:var(--text-muted);}
.ap-cross p b{color:var(--ink);}
.ap-cross a{font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;}

/* CTA 둘째 줄 */
.ap-cta-sub{position:relative;z-index:1;margin-top:1.1rem;font-size:0.92rem;opacity:0.85;}
.ap-cta-sub a{color:inherit;font-weight:700;}

/* ---------- Hero 창: 왼쪽 프로젝트·테이블 목록 ---------- */
.ap-win-split{display:grid;grid-template-columns:150px minmax(0,1fr);}
.ap-side{border-right:1px solid var(--line);padding:0.6rem 0.5rem;background:color-mix(in srgb,var(--ink) 3%,transparent);font-size:0.78rem;}
.ap-side .p{font-weight:700;color:var(--ink);padding:0.35rem 0.4rem 0.2rem;}
.ap-side .t{padding:0.28rem 0.4rem 0.28rem 1rem;color:var(--text-muted);border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-side .t.on{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);font-weight:700;}
@media(max-width:560px){.ap-win-split{grid-template-columns:minmax(0,1fr);} .ap-side{display:none;}}

/* ---------- 조합해서 쓰기 ---------- */
.ap-people{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin-bottom:1.4rem;}
.ap-people button{font:inherit;font-size:0.9rem;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:100px;padding:0.5rem 1.05rem;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s;display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;}
.ap-people button small{font-weight:500;color:var(--text-muted);font-size:0.78rem;}
.ap-people button:hover{border-color:var(--ink);}
.ap-people button.on{background:var(--ink);color:var(--bg-primary);border-color:var(--ink);}
.ap-people button.on small{color:inherit;opacity:0.7;}
.ap-view-cap{text-align:center;font-size:0.95rem;color:var(--text-muted);margin:0 auto 1.4rem;max-width:760px;line-height:1.65;min-height:3.2em;}
.ap-view-cap b{color:var(--ink);}
.ap-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;}
@media(max-width:980px){.ap-projects{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.ap-projects{grid-template-columns:minmax(0,1fr);}}
.ap-pj{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.2rem;min-width:0;display:flex;flex-direction:column;gap:0.7rem;transition:opacity 0.25s,border-color 0.25s,box-shadow 0.25s;}
.ap-pj-top{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.ap-pj-top h3{font-size:1.08rem;margin:0;}
.ap-kind{font-size:0.68rem;font-weight:700;padding:0.12rem 0.5rem;border-radius:20px;border:1px solid var(--line-strong);color:var(--text-muted);white-space:nowrap;}
.ap-kind.solo{border-color:var(--ink);color:var(--ink);}
.ap-myrole{margin-left:auto;font-size:0.7rem;font-weight:700;padding:0.12rem 0.55rem;border-radius:20px;background:var(--accent);color:#fff;white-space:nowrap;display:none;}
.ap-pj-by{font-size:0.78rem;color:var(--text-muted);}
.ap-pj-by b{color:var(--ink);font-weight:700;}
.ap-pj-tbls{display:flex;flex-wrap:wrap;gap:0.35rem;}
.ap-pj-tbls span{font-size:0.78rem;font-weight:600;color:var(--ink);padding:0.25rem 0.6rem;border-radius:8px;background:color-mix(in srgb,var(--ink) 7%,transparent);white-space:nowrap;}
.ap-pj-mem{display:flex;align-items:center;gap:0.25rem;flex-wrap:wrap;margin-top:auto;padding-top:0.6rem;border-top:1px solid var(--line);font-size:0.76rem;color:var(--text-muted);}
.ap-pj-mem .ap-av{width:24px;height:24px;font-size:0.7rem;}
.ap-pj-mem .all{font-weight:600;}
.ap-projects.picked .ap-pj{opacity:0.32;}
.ap-projects.picked .ap-pj.in{opacity:1;border-color:var(--line-strong);box-shadow:var(--shadow-card);}
.ap-projects.picked .ap-pj.in .ap-myrole{display:inline-block;}
.ap-projects.picked .ap-pj .ap-av.me{background:var(--ink);color:var(--bg-primary);border-color:var(--ink);}
.ap-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:1.6rem;}
@media(max-width:900px){.ap-points{grid-template-columns:minmax(0,1fr);}}
.ap-point{padding:0.2rem 0.2rem 0;}
.ap-point h4{font-family:'Pretendard',sans-serif;font-size:0.98rem;font-weight:700;margin:0 0 0.35rem;letter-spacing:-0.01em;}
.ap-point p{font-size:0.9rem;color:var(--text-muted);line-height:1.65;margin:0;}
.ap-point p b{color:var(--ink);}

/* ---------- 함께 쓰기 미니 ---------- */
.ap-two{display:grid;gap:0.5rem;padding:0.7rem;}
.ap-two-row{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;padding:0.6rem 0.7rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:0.8rem;}
.ap-two-row .who{font-size:0.7rem;font-weight:700;color:var(--text-muted);width:100%;}
.ap-two-row .v{margin-left:auto;}
.ap-two-row.hl{background:color-mix(in srgb,var(--warning) 16%,var(--paper));}
.ap-two-arrow{text-align:center;font-size:0.74rem;font-weight:700;color:var(--text-muted);}
.ap-lock{color:var(--text-muted);letter-spacing:0.1em;}

/* ---------- 꽃집: 폰 주문 카드 · 사진 ---------- */
.ap-ord{display:flex;gap:0.6rem;align-items:center;margin:0 0.8rem 0.6rem;padding:0.55rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);}
.ap-ord img{width:54px;height:54px;border-radius:9px;object-fit:cover;flex:none;display:block;}
.ap-ord .b{min-width:0;flex:1;}
.ap-ord .h{display:flex;justify-content:space-between;align-items:center;gap:0.4rem;font-weight:700;font-size:0.84rem;}
.ap-ord .h span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.ap-ord .m{font-size:0.74rem;color:var(--text-muted);line-height:1.5;}
.ap-st{font-size:0.66rem;font-weight:700;padding:0.1rem 0.45rem;border-radius:20px;white-space:nowrap;border:1px solid var(--line-strong);color:var(--ink);flex:none;}
.ap-st.s1{background:color-mix(in srgb,var(--blue) 14%,transparent);}
.ap-st.s2{background:color-mix(in srgb,var(--warning) 20%,transparent);}
.ap-st.s3{background:color-mix(in srgb,var(--ink) 9%,transparent);}

.ap-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.6rem;padding:0.7rem;}
.ap-gal figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);min-width:0;}
.ap-gal img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.ap-gal figcaption{padding:0.4rem 0.5rem 0.5rem;font-size:0.74rem;line-height:1.45;}
.ap-gal figcaption b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-gal figcaption span{color:var(--text-muted);}
.ap-kan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.45rem;padding:0.7rem;}
.ap-kan-col{min-width:0;}
.ap-kan-h{font-size:0.7rem;font-weight:700;margin-bottom:0.35rem;display:flex;justify-content:space-between;gap:0.2rem;white-space:nowrap;}
.ap-kan-h small{color:var(--text-muted);font-weight:600;}
.ap-kan-c{font-size:0.7rem;line-height:1.35;padding:0.4rem 0.45rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);margin-bottom:0.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:480px){.ap-kan{grid-template-columns:repeat(2,minmax(0,1fr));} .ap-gal{gap:0.4rem;padding:0.5rem;}}
.ap-eg-note{max-width:760px;margin:0 auto 2rem;text-align:center;font-size:0.9rem;color:var(--text-muted);padding:0.8rem 1.1rem;border:1px dashed var(--line-strong);border-radius:12px;line-height:1.6;}
.ap-eg-note b{color:var(--ink);}

/* 한글은 낱말 중간에서 끊지 않는다(「담/는」「업/무」 꺾임 방지) */
.ap-sec .section-title,.ap-sec .section-desc,.ap-hero h1,.ap-hero .hero-lead,.ap-fit h3,.ap-fit p,.ap-view-cap,.ap-ba p,.ap-diff-card p,.ap-point p,.ap-step p,.ap-cross p,.cta-box h2,.cta-box p,.ap-eg-note,.ap-pj-mem,.ap-vis-note{word-break:keep-all;overflow-wrap:break-word;}

/* ---------- 새 메인 · 요금 페이지 ---------- */

/* 히어로 오른쪽 — PC(회사·팀) | 폰(1인·매장) */
.mp-demo{min-width:0;}
.mp-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line-strong);border-radius:100px;background:var(--paper);margin-bottom:0.9rem;max-width:100%;}
.mp-toggle button{font:inherit;font-size:0.84rem;font-weight:700;color:var(--text-muted);background:transparent;border:0;border-radius:100px;padding:0.5rem 1rem;cursor:pointer;white-space:nowrap;}
.mp-toggle button.on{background:var(--ink);color:var(--bg-primary);}
.mp-stage{display:grid;align-items:start;}
.mp-view{grid-area:1/1;min-width:0;}
.mp-view[hidden]{display:block;visibility:hidden;pointer-events:none;}
.mp-cap{margin-top:0.8rem;font-size:0.86rem;color:var(--text-muted);}
@media(max-width:480px){.mp-toggle button{padding:0.45rem 0.7rem;font-size:0.76rem;}}

/* 내 자리 찾기 — 카드 2장 */
.mp-route{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;}
@media(max-width:820px){.mp-route{grid-template-columns:minmax(0,1fr);}}
.mp-route-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.8rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:1rem;min-width:0;}
.mp-route-who{font-size:0.8rem;font-weight:700;color:var(--accent);letter-spacing:0.02em;}
.mp-route-card h3{font-size:1.5rem;margin:0;line-height:1.3;}
.mp-quotes{display:grid;gap:0.45rem;}
.mp-quotes span{font-family:'Fraunces','Pretendard',sans-serif;font-size:1rem;font-weight:600;color:var(--text-muted);padding:0.55rem 0.9rem;border-radius:12px;background:color-mix(in srgb,var(--text-muted) 7%,transparent);word-break:keep-all;}
.mp-route-go{margin-top:auto;font-weight:700;color:var(--accent);font-size:0.98rem;}

/* 데모 칩 두 줄 */

.mp-demos-all{text-align:center;margin-top:0.4rem;}
.mp-demos-all a{font-weight:700;color:var(--accent);text-decoration:none;font-size:0.95rem;}

/* 요금 한 줄 띠 */
.mp-price{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:space-between;padding:1.6rem 2rem;border:1px solid var(--line);border-radius:18px;background:var(--paper);}
.mp-price h3{font-size:1.2rem;margin:0 0 0.2rem;word-break:keep-all;}
.mp-price p{margin:0;font-size:0.86rem;color:var(--text-muted);}
.mp-price-nums{display:flex;gap:1.6rem;align-items:baseline;flex-wrap:wrap;}
.mp-price-nums div{font-size:0.86rem;color:var(--text-muted);}
.mp-price-nums b{font-family:'Outfit','Pretendard',sans-serif;font-size:1.5rem;color:var(--ink);margin-left:0.35rem;}
.mp-price-nums small{font-size:0.8rem;}
.mp-price-links{display:flex;gap:1.1rem;flex-wrap:wrap;}
.mp-price-links a{font-weight:700;color:var(--accent);text-decoration:none;font-size:0.95rem;white-space:nowrap;}
@media(max-width:640px){.mp-price{padding:1.3rem 1.2rem;}}

/* 요금 페이지 머리 여백(고정 메뉴 아래) */
.pp-top{padding-top:8.5rem !important;}
@media(max-width:860px){.pp-top{padding-top:6.5rem !important;}}
.pp-safety{max-width:1080px;margin:0 auto;padding:0 2rem 4rem;box-sizing:content-box;}
.pp-safety .safety-band{margin:0;max-width:none;}
@media(max-width:640px){.pp-safety{padding:0 1.2rem 3rem;}}

/* ---------- 히어로 미리보기 — 대상과 기기를 따로 고른다(⛔ 「회사 = PC · 1인 = 폰」으로 짝짓지 말 것) ---------- */
.mp-controls{display:flex;gap:0.6rem;flex-wrap:wrap;align-items:center;margin-bottom:0.9rem;}
.mp-controls .mp-toggle{margin-bottom:0;}
.ap-phone-card.hl{background:color-mix(in srgb,var(--warning) 16%,var(--paper));}
.ap-tbl-thumb td img{width:26px;height:26px;border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:0.5rem;display:inline-block;}
@media(max-width:480px){.ap-tbl-thumb td img{width:22px;height:22px;margin-right:0.35rem;}}

/* ---------- 메인 「직접 만드는 프로그램」: 항목 블록 → 테이블 → 프로젝트 ---------- */
.mp-asm{display:grid;grid-template-columns:minmax(0,0.85fr) auto minmax(0,1.35fr);gap:1.4rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.8rem;box-shadow:var(--shadow-card);}
@media(max-width:1100px){.mp-asm{grid-template-columns:minmax(0,1fr);padding:1.2rem;gap:0.9rem;}}   /* 3열로는 1100px 아래에서 머리줄 블록이 잘린다 */
.mp-asm-cap{font-size:0.78rem;font-weight:700;color:var(--text-muted);margin-bottom:0.7rem;letter-spacing:0.02em;}
.mp-asm-cap b{color:var(--ink);font-size:0.92rem;margin-left:0.25rem;}
.mp-asm-side,.mp-asm-main{min-width:0;}
.mp-blks{display:flex;flex-wrap:wrap;gap:0.45rem;}
.mp-blk{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.82rem;font-weight:600;color:var(--ink);padding:0.42rem 0.7rem 0.42rem 0.45rem;border:1px solid var(--line-strong);border-radius:9px;background:var(--bg-primary);white-space:nowrap;}
.mp-blk i{font-style:normal;font-family:'Outfit','Pretendard',sans-serif;font-size:0.66rem;font-weight:700;min-width:22px;height:20px;padding:0 0.25rem;border-radius:5px;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);}
.mp-blk.used{border-color:var(--ink);background:var(--paper);box-shadow:0 2px 0 color-mix(in srgb,var(--ink) 18%,transparent);}
.mp-blk.used i{background:var(--ink);color:var(--bg-primary);}
.mp-blk.slot{border-style:dashed;color:var(--text-muted);padding-left:0.7rem;}
.mp-asm-arrow{text-align:center;}
@media(max-width:1100px){.mp-asm-arrow{transform:rotate(90deg);height:1.6rem;line-height:1.6rem;}}
.mp-asm-tabs{display:flex;gap:0.35rem;flex-wrap:wrap;margin-bottom:0.7rem;}
.mp-asm-tabs span{font-size:0.8rem;font-weight:600;padding:0.35rem 0.75rem;border-radius:8px;border:1px solid var(--line);color:var(--text-muted);background:var(--bg-primary);white-space:nowrap;}
.mp-asm-tabs span.on{background:var(--ink);color:var(--bg-primary);border-color:var(--ink);}
.mp-asm-tabs span.add{border-style:dashed;}
.mp-asm-table{border:1px solid var(--line);border-radius:12px;background:var(--bg-primary);overflow:hidden;}
.mp-asm-head,.mp-asm-row{display:grid;grid-template-columns:1.25fr 0.9fr 1.3fr 1fr 0.9fr;gap:0.45rem;align-items:center;padding:0.6rem 0.7rem;}
.mp-asm-head{border-bottom:1px solid var(--line-strong);}
.mp-asm-head .mp-blk{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:0.76rem;padding:0.36rem 0.5rem 0.36rem 0.36rem;}
.mp-asm-row{font-size:0.82rem;border-bottom:1px solid var(--line);}
.mp-asm-row:last-child{border-bottom:none;}
.mp-asm-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:0.4rem;}
@media(max-width:560px){
  .mp-asm-head,.mp-asm-row{grid-template-columns:1.2fr 0.8fr 1fr;}
  .mp-asm-head > :nth-child(3),.mp-asm-row > :nth-child(3){display:none;}
  .mp-blk{font-size:0.78rem;}
}

/* ---------- 엑셀 모양 조각(풀이 카드가 쓴다) · 대상 카드의 「바로 열어 보기」 ---------- */

.section-desc b{color:var(--ink);font-weight:700;}

/* B — 엑셀에 빗대기 */

.mp-lv{font-size:0.7rem;font-weight:800;color:#fff;background:var(--accent);border-radius:20px;padding:0.12rem 0.55rem;white-space:nowrap;}

.mp-xls-cells{display:flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;font-size:0.78rem;background:var(--bg-primary);max-width:100%;}
.mp-xls-cells span{padding:0.35rem 0.6rem;border-right:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.mp-xls-cells span:last-child{border-right:none;}
.mp-xls-tabs{display:flex;gap:2px;font-size:0.78rem;}
.mp-xls-tabs span{padding:0.3rem 0.7rem;border:1px solid var(--line-strong);border-radius:0 0 6px 6px;background:var(--bg-primary);color:var(--text-muted);white-space:nowrap;}
.mp-xls-tabs span.on{color:var(--ink);font-weight:700;background:var(--paper);}
.mp-xls-folder{display:flex;align-items:center;gap:0.3rem;flex-wrap:wrap;font-size:0.82rem;color:var(--text-muted);padding:0.5rem 0.7rem;border:1px dashed var(--line-strong);border-radius:9px;}
.mp-xls-folder.bn{border-style:solid;color:var(--ink);font-weight:700;background:var(--bg-primary);}

/* 대상 카드 안의 「바로 열어 보기」 */
.mp-route-demos{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center;}
.mp-route-demos b{font-size:0.78rem;font-weight:700;color:var(--text-muted);margin-right:0.2rem;white-space:nowrap;}
.mp-route-demos a{font-size:0.84rem;font-weight:600;color:var(--ink);text-decoration:none;padding:0.4rem 0.85rem;border:1px solid var(--line-strong);border-radius:100px;background:var(--bg-primary);white-space:nowrap;transition:border-color 0.25s,color 0.25s;}
.mp-route-demos a:hover{border-color:var(--accent);color:var(--accent);}
a.mp-route-go{text-decoration:none;}
a.mp-route-go:hover{text-decoration:underline;}

/* ---------- 「직접 만드는 프로그램」 ② 엑셀에 빗댄 풀이 카드 3장 ---------- */
.mp-eq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
@media(max-width:900px){.mp-eq{grid-template-columns:minmax(0,1fr);}}
.mp-eq-card{border:1px solid var(--line);border-radius:16px;padding:1.05rem 1.15rem 1.1rem;min-width:0;display:flex;flex-direction:column;gap:0.65rem;}
.mp-eq-top{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.92rem;font-weight:700;}
.mp-eq-top .x{color:var(--text-muted);font-weight:600;}
.mp-eq-top .eq{color:var(--accent);font-weight:700;}
.mp-eq-top .mp-lv{font-size:0.8rem;padding:0.16rem 0.7rem;}
.mp-eq-vis{display:flex;flex-direction:column;align-items:flex-start;gap:0.35rem;padding:0.2rem 0 0;min-width:0;}
.mp-eq-vis > *{max-width:100%;}
.mp-eq-arrow{font-size:0.8rem;font-weight:700;color:var(--accent);padding-left:0.5rem;line-height:1;}
.mp-eq-vis .mp-blk{font-size:0.76rem;padding:0.32rem 0.55rem 0.32rem 0.36rem;}
.mp-eq-vis .mp-blk i{min-width:20px;height:18px;font-size:0.62rem;}
.mp-eq-vis .mp-asm-tabs span,.mp-eq-vis .mp-xls-tabs span{font-size:0.74rem;padding:0.28rem 0.6rem;}
.mp-eq-vis .mp-xls-cells{font-size:0.74rem;}
.mp-eq-vis .mp-xls-folder{font-size:0.78rem;padding:0.38rem 0.6rem;}
.mp-eq-card p{font-size:0.86rem;color:var(--text-muted);line-height:1.6;margin:0;word-break:keep-all;}
.mp-eq-card p b{color:var(--ink);font-weight:700;}

/* ---------- 「직접 만드는 프로그램」 소제목(① · ②) — 그림 두 덩이가 붙어 보이지 않게 가른다 ---------- */
.mp-sub{display:flex;align-items:flex-start;gap:0.85rem;margin:0 0 1.2rem;}
.mp-sub .n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:'Outfit','Pretendard',sans-serif;font-weight:700;font-size:1rem;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);margin-top:0.05rem;}
.mp-sub h3{font-size:1.32rem;margin:0 0 0.25rem;line-height:1.35;word-break:keep-all;}
.mp-sub p{font-size:0.94rem;color:var(--text-muted);margin:0;line-height:1.6;word-break:keep-all;}
.mp-sub.second{margin-top:4.2rem;padding-top:3.2rem;border-top:1px solid var(--line);}

@media(max-width:640px){
  .mp-sub h3{font-size:1.12rem;}
  .mp-sub.second{margin-top:2.8rem;padding-top:2.2rem;}
  
}
/* ---------- 「직접 만드는 프로그램」 ① 블록 통 → 테이블 그림 ---------- */
.mp-asm{position:relative;}
.mp-asm-side{background:color-mix(in srgb,var(--ink) 3%,transparent);border:1px dashed var(--line-strong);border-radius:16px;padding:1.1rem 1.1rem 1.2rem;}
.mp-asm-cap small{font-weight:500;margin-left:0.4rem;opacity:0.85;}
.mp-asm-arrow svg{width:52px;height:16px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto;}
.mp-asm-arrow .dash{stroke-dasharray:4 5;animation:mpDash 0.9s linear infinite;}
@keyframes mpDash{to{stroke-dashoffset:-9;}}
.mp-asm-note{font-size:0.86rem;color:var(--text-muted);margin:0.85rem 0 0;word-break:keep-all;}
.mp-asm-note b{color:var(--ink);font-weight:700;}
.mp-slot{display:block;min-width:0;border-radius:9px;}
.mp-slot > .mp-blk{display:block;width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-slot > .mp-blk i{vertical-align:-0.24em;margin-right:0.4rem;}
.mp-blk{transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s,background 0.25s;}
.mp-blk.pick{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 16px -8px var(--accent);}

@keyframes mpSnap{0%{transform:scale(1.14);}60%{transform:scale(0.97);}100%{transform:scale(1);}}

.mp-fly{position:absolute;left:0;top:0;margin:0;z-index:5;pointer-events:none;box-shadow:0 14px 26px -10px rgba(34,31,46,0.4);}

@keyframes mpPulse{50%{transform:scale(1.06);}}
@media (prefers-reduced-motion: reduce){.mp-asm-arrow .dash{animation:none;}}

/* ---------- ① 의 움직임 — 테이블은 그대로, 「＋ 블록」 자리에 항목 하나만 더해졌다 빠진다(⛔ 머리줄 전체를 차례로 끼우는 움직임으로 되돌리지 말 것 · 스크립트 = index.html 끝) ---------- */

.mp-slot-add > .mp-blk.new{display:none;}
.mp-asm.added .mp-slot-add > .mp-blk.slot{display:none;}
.mp-asm.added .mp-slot-add > .mp-blk.new{display:block;animation:mpSnap 0.32s ease-out;}
.mp-asm-row span.c-add{opacity:0;transition:opacity 0.4s;}
.mp-asm.added .mp-asm-row span.c-add{opacity:1;}
.mp-asm.is-anim:not(.added) .mp-slot-add > .mp-blk.slot{border-color:var(--accent);color:var(--accent);animation:mpPulse 1.8s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){.mp-asm.is-anim:not(.added) .mp-slot-add > .mp-blk.slot{animation:none;}}
/* 폰: 좁은 폭에서는 거래처명·등급 + 더해지는 자리만 보인다(연락처·다음 예정 감춤) */
@media(max-width:560px){
  .mp-asm-head > :nth-child(4),.mp-asm-row > :nth-child(4){display:none;}
  
}

/* ---------- 좁은 PC 폭 보정(코드 리뷰 · 실측) ---------- */
/* 메뉴 항목이 옛 메인보다 하나 많다 → 861~1000px 에서 글자가 두 줄로 꺾이지 않게 간격·크기를 줄인다(☰ 전환점 860px 은 index-style 그대로) */
.nav-links a{white-space:nowrap;}
@media(min-width:861px) and (max-width:1000px){
  .nav-links{gap:1.05rem;}
  .nav-links a{font-size:0.85rem;}
  .nav-links a.btn-nav{padding:0.55rem 1rem;font-size:0.82rem;}
}
/* 2열이 유지되는 좁은 폭(901~1100px)에서는 표가 창 밖으로 잘린다(칸이 nowrap · 감싸는 상자가 overflow:hidden) → 덜 중요한 열을 감추고 왼쪽 목록을 줄인다 */
@media(min-width:901px) and (max-width:1100px){
  .ap-hide-s{display:none;}
  .ap-win-split{grid-template-columns:118px minmax(0,1fr);}
  .ap-tbl th,.ap-tbl td{padding-left:0.55rem;padding-right:0.55rem;}
}