/* 아티클 목록 — 톤 A 판형(2026-10-08 → 머리 2026-10-12). 공용 안쪽 페이지 머리 .pg-head > .pg-title(theme-a.css, 회사소개·견적 문의·포트폴리오와 동일)
   아래 검색창·분류 칩 가운데 → 단계 가이드(그림 없이 번호·제목·편수) → 글 목록 3칸 → 견적 문의 띠.
   body.v-art 범위에서만 적용. 옛 초록 판 규칙(.av-*, editorial.css)과 옛 어두운 띠(.case-band)는 더 쓰지 않는다. */

/* 검색창 — 제목 아래 40px, 흰 바탕 가운데(포트폴리오의 분류 칩 자리와 같은 간격). 분류 칩은 글 목록으로 내림(2026-10-12) */
.v-art .art-tools{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:40px}
.v-art .art-search{display:flex;width:min(100%,640px);background:#fff;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;box-shadow:0 14px 34px -26px rgba(20,24,39,.35)}
.v-art .art-search:focus-within{border-color:var(--blue)}
.v-art .art-search input{flex:1;min-width:0;padding:14px 24px;border:0;font:inherit;font-size:15px;color:var(--ink);background:#fff;outline:0;-webkit-appearance:none}
.v-art .art-search input::placeholder{color:#9aa1ac}
.v-art .art-search button{padding:0 28px;border:0;background:var(--navy);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.v-art .art-search button:hover{background:var(--blue)}
.v-art .chip{background:#fff;font-size:14px;padding:10px 18px}
.v-art .chip:hover{border-color:var(--blue);color:var(--blue)}
.v-art .chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.v-art .chip-cnt{font-size:12px;color:var(--sub)}
.v-art .chip.on .chip-cnt{color:rgba(255,255,255,.7)}

/* 제목 줄바꿈 — 휴대폰에서만(한 줄 15자가 342px 를 넘침) */
.v-art .br-m{display:none}
@media (min-width:769px){.v-art .pg-title h1 br + .r{display:inline!important;margin-top:0!important}}   /* 숨긴 br 뒤 칩에 theme-a 의 줄바꿈용 윗여백이 붙지 않게 */

/* 분류 칩 — 글 목록 제목 아래 왼쪽 */
.v-art .art-cats{gap:8px;margin:-8px 0 32px}

/* 섹션 공통 */
.v-art main > .section{border-top:0;padding:96px 0}
.v-art main > .pg-head + .section{padding-top:56px}   /* 칩 아래 56px — 문의·포트폴리오와 같은 간격 */
.v-art main > .art-hubs{padding-bottom:0}
.v-art .art-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:32px}
.v-art .art-sh h2{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.v-art .art-res{font-size:14px;color:var(--sub)}
.v-art .art-res b{color:var(--ink);font-weight:700}

/* 단계 가이드 — 일곱 칸 한 줄, 그림 배경에 흰 글자(2026-10-12 사장님). 남색 바탕 + 위쪽 파란 빛, 톤 A 3D 한 점이 위 60%, 글은 아래 */
.v-art .art-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.v-art .st{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:2/3;padding:16px;border-radius:16px;overflow:hidden;color:#fff;
  background:radial-gradient(90% 60% at 50% 0%,rgba(46,91,255,.55) 0,rgba(46,91,255,0) 70%),var(--navy);transition:box-shadow .18s,transform .18s}
.v-art .st:hover{box-shadow:0 24px 44px -24px rgba(20,24,39,.6);transform:translateY(-3px)}
.v-art .st .pic{position:absolute;left:8%;right:8%;top:6%;height:52%;background:center/contain no-repeat;transition:transform .25s;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.v-art .st:hover .pic{transform:scale(1.05)}
.v-art .st .txt{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:12px;background:linear-gradient(to top,rgba(20,24,39,.0),rgba(20,24,39,0))}
.v-art .st .no{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--yellow)}
.v-art .st.boss .no::after{content:"대표";padding:2px 8px;border-radius:999px;background:var(--yellow);color:var(--navy);font-size:11px;letter-spacing:0}
.v-art .st .t{font-size:15px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:#fff;word-break:keep-all}
.v-art .st .cn{font-size:12.5px;color:rgba(255,255,255,.65)}
/* 허브별 그림 — 톤 A 3D(img/svc-a). 모르는 허브는 cat-hero */
.v-art .st .pic{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/hub/cat-hero.webp')}
.v-art .st[data-hub="hub-desire"] .pic{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/hub/article.webp')}      /* 서비스 개발 전 검토 — 공책과 전구 */
.v-art .st[data-hub="hub-method"] .pic{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/hub/cut-wire.webp')}     /* 앱·홈페이지 개발 기획 — 화면 설계 */
.v-art .st[data-hub="hub-listup"] .pic{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/hub/p04.webp')}          /* 개발 방식과 업체 선정 — 갈림길 */
.v-art .st[data-hub="hub-verify"] .pic{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/hub/cat-web.webp')}      /* 견적과 제안 검토 — 돋보기 */
.v-art .st[data-hub="hub-contract"] .pic{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/hub/p05.webp')}        /* 계약 — 도장 */
.v-art .st[data-hub="hub-after"] .pic{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/hub/cat-sys.webp')}       /* 유지보수 운영 — 모니터와 톱니 */
.v-art .st[data-hub="hub-public"] .pic{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/hub/ab-p01.webp')}       /* 공공 — 인증서 */

/* 글 목록 — 3칸 글자 카드(2026-10-12). 그림 없이 분류·읽는 시간 / 제목 / 요약 / 읽기 */
.v-art .art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* 글 카드(2026-10-12): 위 .pic 은 단계 카드와 같은 남색 바탕 + 3D 물체(.img, 옛 썸네일 톤 A 변환본 또는 분류별 기본 그림) + 흰 분류 칩·제목, 아래 .body 는 요약·읽는 시간·읽기 */
.v-art .art-post{display:flex;flex-direction:column;padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--navy);color:var(--ink);transition:border-color .18s,box-shadow .18s,transform .18s}
.v-art .art-post:hover{box-shadow:0 22px 44px -24px rgba(27,31,58,.55);transform:translateY(-4px)}
.v-art .art-post .pic{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/3;padding:18px 20px 16px;color:#fff;background:radial-gradient(90% 60% at 50% 0%,rgba(46,91,255,.55) 0,rgba(46,91,255,0) 70%),var(--navy)}
.v-art .art-post .pic .img{position:absolute;left:8%;right:8%;top:15%;bottom:30%;background:center/contain no-repeat;filter:drop-shadow(0 16px 16px rgba(0,0,0,.35));transition:transform .25s}
.v-art .art-post:hover .pic .img{transform:translateY(-3px)}
.v-art .art-post .pic::before{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(27,31,58,0) 0,rgba(27,31,58,.85) 100%)}
.v-art .art-post .pic > *{position:relative}
.v-art .art-post .pic .img{position:absolute}
.v-art .art-post .cat{position:absolute;top:14px;left:16px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;background:rgba(27,31,58,.5);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.v-art .art-post .t{display:-webkit-box;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.02em;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;text-shadow:0 1px 10px rgba(0,0,0,.35)}
/* 카드 아래쪽 제거(2026-10-13 사장님 '카드 아래쪽은 없애고 위로 필요한 건 올려') — 이미지 카드만, 읽는 시간은 오른쪽 위 */
.v-art .art-post .pic{flex:1}
.v-art .art-post .pic > .rt{position:absolute;top:14px;right:16px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:rgba(27,31,58,.5);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.v-art .art-post .t{font-size:17px;line-height:1.45;-webkit-line-clamp:3;text-align:center;padding:0 6px}

/* 이미지와 제목을 한 덩어리로 카드 세로 가운데에(2026-10-13 사장님 '이미지가 좀 더 내려오고 글자가 더 올라와야, 비가 이상') — 칩 줄 아래 공간에서 가운데 */
.v-art .art-post .pic{justify-content:center;align-items:center;gap:26px;padding:54px 22px 30px}
.v-art .art-post .pic > .img{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:76%;height:auto;aspect-ratio:3/2;flex:0 0 auto;max-height:62%}
.v-art .art-post .pic::before{height:30%}
/* 변환본이 없는 글(S3 사진·썸네일 없음)의 분류별 기본 그림 — 단계 카드가 쓰지 않는 svc-a 3D */
.v-art .art-post .pic .img{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/cut-talk.webp')}
.v-art .art-post .pic[data-cat="START"] .img{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/cat-ai.webp')}
.v-art .art-post .pic[data-cat="PLAN"] .img{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/p01.webp')}
.v-art .art-post .pic[data-cat="PARTNER"] .img{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/p07.webp')}
.v-art .art-post .pic[data-cat="BUILD"] .img{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/p02.webp')}
.v-art .art-post .pic[data-cat="LAUNCH"] .img{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/ab-p02.webp')}
.v-art .art-post .pic[data-cat="IDEA_VALIDATION"] .img{background-image:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/cases.webp')}
.v-art .art-empty{padding:48px 0;text-align:center;font-size:15px;color:var(--sub)}
/* 검색 결과 맨 위 단계별 가이드(2026-10-15 SEO 점검) — 가이드 다음 단계 카드와 같은 남색 바탕 + 3D 그림 */
.v-art .art-ghit{display:grid;gap:12px;margin:0 0 24px}
.v-art .agh{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:24px;padding:0 28px 0 0;border-radius:18px;background:var(--navy);color:#fff;text-decoration:none;overflow:hidden;transition:transform .2s}
.v-art .agh:hover{transform:translateY(-2px)}
.v-art .agh-pic{display:grid;place-items:center;align-self:stretch;min-height:132px;background:radial-gradient(80% 70% at 50% 0%,rgba(46,91,255,.6) 0,rgba(46,91,255,0) 70%),#101a3d}
.v-art .agh-pic img{width:78%;height:auto;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35))}
.v-art .agh-tx{display:grid;gap:6px;padding:20px 0}
.v-art .agh-k{font-size:13px;font-weight:700;color:#9fb4ff}
.v-art .agh-t{font-size:19px;font-weight:800;line-height:1.4;color:#fff}
.v-art .agh-d{font-size:14px;line-height:1.6;color:rgba(255,255,255,.72)}
.v-art .agh-go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);font-size:17px}
@media (max-width:640px){
  .v-art .agh{grid-template-columns:96px 1fr;gap:14px;padding:0 16px 0 0}
  .v-art .agh-pic{min-height:0}
  .v-art .agh-t{font-size:16px}
  .v-art .agh-d,.v-art .agh-go{display:none}
}

/* 쪽 넘김 — 알약 */
.v-art .art-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:64px}
.v-art .art-pager a{padding:11px 24px;border:1.5px solid var(--ink);border-radius:999px;font-size:14px;font-weight:700;color:var(--ink);transition:background .15s,color .15s}
.v-art .art-pager a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.v-art .art-pager a.off{opacity:.3;pointer-events:none}
.v-art .art-pager .mid{font-size:14px;font-weight:600;color:var(--sub)}

@media (max-width:1100px){.v-art .art-steps{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.v-art .art-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:768px){
  .v-art main > .section{padding:64px 0}
  .v-art .art-tools{padding-top:28px}
  .v-art .br-m{display:inline}
  .v-art .art-cats{margin:-4px 0 24px}
  .v-art .chip{font-size:13px;padding:8px 14px}
  .v-art main > .pg-head + .section{padding-top:40px}
  .v-art .art-search input{padding:12px 18px;font-size:14px}
  .v-art .art-search button{padding:0 20px}
  .v-art .art-sh{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:24px}
}
@media (max-width:640px){
  .v-art .art-steps{grid-template-columns:repeat(2,1fr);gap:10px}
  .v-art .st{aspect-ratio:4/5;padding:14px}
  .v-art .st .t{font-size:14px}
}
@media (max-width:600px){.v-art .art-grid{grid-template-columns:1fr;gap:12px}}

/* =========================================================
   2026-10-14 글 목록 보기 전환 — 사장님 "궁금한 주제부터 골라 읽기를 리스트 형식, 썸네일은 우측, 카드와 리스트 변경, 기본은 리스트".
   카드 보기(.is-card) = 기존 남색 카드 그대로. 리스트 보기(.is-list) = 한 줄 한 글: 왼쪽 분류·읽는 시간·제목·요약, 오른쪽 남색 썸네일(3D 그림만)
   ========================================================= */
.v-art .art-res{display:flex;align-items:center;gap:16px}
.v-art .art-view{display:inline-flex;padding:3px;border-radius:999px;background:#eef0f6}
.v-art .art-view button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:7px 13px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer}
.v-art .art-view button svg{width:15px;height:15px}
.v-art .art-view button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(20,24,39,.12)}
.v-art .art-post .lx{display:none}
/* 리스트 보기 */
.v-art .art-grid.is-list{display:flex;flex-direction:column;gap:0;border-top:2px solid var(--ink)}
.v-art .art-grid.is-list .art-post{flex-direction:row;align-items:center;gap:32px;padding:26px 4px;border-radius:0;background:none;border-bottom:1px solid var(--line);transform:none;box-shadow:none}
.v-art .art-grid.is-list .art-post:hover{transform:none;box-shadow:none}
.v-art .art-grid.is-list .art-post:hover .lx-t{color:var(--blue)}
.v-art .art-grid.is-list .lx{display:flex;flex-direction:column;flex:1;min-width:0;order:1}
.v-art .art-grid.is-list .pic{order:2;flex:0 0 240px;width:240px;aspect-ratio:3/2;padding:0;border-radius:14px;overflow:hidden;align-items:center;justify-content:center}
.v-art .art-grid.is-list .pic::before,.v-art .art-grid.is-list .pic .cat,.v-art .art-grid.is-list .pic .rt,.v-art .art-grid.is-list .pic .t{display:none}
.v-art .art-grid.is-list .pic > .img{width:78%;max-height:78%;aspect-ratio:3/2}
.v-art .lx-meta{display:flex;gap:10px;align-items:center}
.v-art .lx-meta i{font-style:normal;font-size:13px;font-weight:700;color:var(--sub)}
.v-art .lx-meta .lx-cat{color:var(--blue)}
.v-art .lx-t{margin-top:8px;font-size:20px;line-height:1.45;font-weight:700;letter-spacing:-.02em;color:var(--ink);word-break:keep-all;transition:color .15s}
.v-art .lx-ex{display:-webkit-box;margin-top:8px;font-size:15.5px;line-height:1.65;color:#3b4050;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
@media (max-width:768px){
  .v-art .art-res{flex-wrap:wrap;gap:10px}
  .v-art .art-grid.is-list .art-post{gap:16px;padding:20px 0}
  .v-art .art-grid.is-list .pic{flex-basis:104px;width:104px;aspect-ratio:1/1;border-radius:12px}
  .v-art .lx-t{font-size:16.5px;margin-top:6px}
  .v-art .lx-ex{font-size:14px;-webkit-line-clamp:2}
}

/* 검색 결과 형광펜(2026-10-14) — 글자 아래 60% 높이에 노란 칠, 화면에 들어오면 왼쪽부터 칠해짐(.on) */
.v-art mark.hl{color:inherit;background:linear-gradient(transparent 40%, rgba(255,214,10,.62) 40%, rgba(255,214,10,.62) 92%, transparent 92%) no-repeat 0 0/0% 100%;border-radius:2px;padding:0 1px;margin:0 -1px;transition:background-size .6s cubic-bezier(.22,.61,.36,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.v-art mark.hl.on{background-size:100% 100%}
.v-art .art-post .t mark.hl{background-image:linear-gradient(#ffd60a,#ffd60a);padding:0 3px;margin:0 -1px;border-radius:3px;text-shadow:none;transition:background-size .6s cubic-bezier(.22,.61,.36,1),color .2s .3s}
.v-art .art-post .t mark.hl.on{color:#14183a}
.v-art .lx-hit i{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:5px;background:#eef2fb;color:var(--blue);font-size:12px;font-style:normal;font-weight:700;line-height:1.6;vertical-align:1px}
@media (prefers-reduced-motion: reduce){ .v-art mark.hl{transition:none} }

/* 자주 묻는 질문(2026-10-14) — 왼쪽 구간 제목(위에 붙어 따라옴), 오른쪽 흰 카드 펼침 목록. 번호는 단계별 가이드 카드와 같은 결(파란 숫자) */
.v-art .art-faq{background:var(--soft);padding:clamp(64px,10vh,104px) 0}
.v-art .art-faq-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(24px,5vw,72px);align-items:start}
.v-art .art-faq .art-sh{position:sticky;top:100px;margin:0}
.v-art .art-faq-list{display:grid;gap:12px}
.v-art .art-faq-item{background:#fff;border-radius:16px;box-shadow:0 1px 0 rgba(20,24,39,.04),0 10px 30px -18px rgba(20,24,39,.25);overflow:hidden}
.v-art .art-faq-item summary{display:flex;align-items:center;gap:14px;padding:22px 24px;cursor:pointer;list-style:none}
.v-art .art-faq-item summary::-webkit-details-marker{display:none}
.v-art .art-faq-item .no{flex:none;font-size:14px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums}
.v-art .art-faq-item .q{flex:1;font-size:18px;line-height:1.45;font-weight:700;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.v-art .art-faq-item summary:hover .q{color:var(--blue)}
.v-art .art-faq-item summary i{flex:none;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
.v-art .art-faq-item[open] summary i{transform:rotate(225deg) translate(-2px,-2px)}
.v-art .art-faq-a{padding:0 24px 24px 58px}
.v-art .art-faq-a p{margin:0;font-size:16px;line-height:1.75;color:#4a4f5e;word-break:keep-all}
.v-art .art-faq-more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;font-weight:700;color:var(--blue)}
.v-art .art-faq-more::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.v-art .art-faq-more:hover span{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){
  .v-art .art-faq-in{grid-template-columns:1fr}
  .v-art .art-faq .art-sh{position:static}
  .v-art .art-faq-item summary{padding:18px 18px;gap:10px}
  .v-art .art-faq-item .q{font-size:16px}
  .v-art .art-faq-a{padding:0 18px 20px 46px}
  .v-art .art-faq-a p{font-size:15px}
}

/* 글 상세 자주 묻는 질문(2026-10-17) — 목록 FAQ 카드(.art-faq-item) 재사용, 본문 폭 안에 제목 + 펼침 목록 */
.v-art .art-dfaq{margin-top:56px}
.v-art .art-dfaq-h{margin:0 0 18px;font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.6px;color:var(--ink)}