/* =========================================================
   theme-a.css — 사이트 전체 기본 결(2026-10-06)
   메인(/ = hero-a)과 같은 머리·바닥·버튼·칩·색을 모든 페이지에 깐다.
   editorial.css · td.css 뒤, 페이지 전용 CSS(pageCss) 앞에 붙는다(fragments/layout :: pageHead).
   페이지 판형 CSS(services-a · contact-a · about-a)는 이 위에서 히어로·표제지만 더 덮는다.
   구역별 키컬러(빨강·파랑·노랑·초록)는 파랑 하나로 모은다 — 메인이 파랑·노랑·남색이라 그 계열에 맞춘다.
   ========================================================= */

/* ── 가로 규격 — 메인 기준으로 통일(2026-10-08 사장님). 메인 .wrap 은 안쪽 여백 없는 1200px 상자(1900px 이상 1320px).
   공용 .wrap 은 안쪽 여백(--pad 96px)이 있으므로 상자 최대 폭을 1200 + 여백 둘로 잡아 글 폭을 1200으로 맞춘다. 1440 화면에서 양쪽 바깥 여백이 메인과 같은 120px 이 된다. */
:root{--pad:24px;--maxw:calc(1200px + var(--pad) * 2)}   /* 바깥 여백도 메인과 같은 24px — 그래야 1280·1366 같은 좁은 화면에서도 머리·본문이 메인과 같은 자리에 선다 */
@media (min-width:1900px){:root{--maxw:calc(1320px + var(--pad) * 2)}}

/* ── 토큰 */
:root,.svc-theme,.art-theme,.case-theme,.doc-theme{--ink:#141827;--navy:#1b1f3a;--blue:#2e5bff;--blue2:#dfe6ff;--yellow:#f5b400;--yellow2:#fff1c2;--soft:#f5f6fa;--line:#e4e6ee;--sub:#6b7080;
  --key:#2e5bff;--key-fill:#2e5bff;--key-on-fill:#fff;--red:#2e5bff;--accent:#2e5bff;--rule:#e4e6ee}

/* ── 머리 — 반투명 흰 바탕, 밑줄 없는 메뉴, 남색 알약 문의하기 */
.site-header{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(20,24,39,.06)}
.site-header .wrap{height:66px}
.brand b{font-weight:800}
.gnb a{font-size:15px;font-weight:600;color:#3b4050;padding:0;border-bottom:0}
.gnb a:hover,.gnb a.on,
.gnb a[href$="/about"]:hover,.gnb a[href$="/about"].on,.gnb a[href$="/services"]:hover,.gnb a[href$="/services"].on,
.gnb a[href$="/cases"]:hover,.gnb a[href$="/cases"].on,.gnb a[href$="/article"]:hover,.gnb a[href$="/article"].on{color:var(--blue);border-bottom-color:transparent}
.header-cta,.header-cta.on{border:0;border-radius:999px;background:var(--navy);color:#fff;padding:10px 18px;font-size:14px;font-weight:700;letter-spacing:0}
.header-cta:hover{background:var(--blue);color:#fff}

/* ── 버튼 — 남색 알약 */
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border:0;border-radius:999px;font-size:16px;font-weight:700;transition:background .2s,color .2s,transform .2s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-ghost.on-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn-ghost.on-dark:hover{background:#fff;color:var(--navy)}

/* ── 칩 — 제목 안 강조(.r)는 색 글자가 아니라 메인의 칩 */
.page-hero h1 .r,.section h2 .r,.cta h2 .r,.av-hero h1 .r,.av-sh h2 .r{display:inline;background:var(--blue2);color:var(--blue);padding:.04em .22em;border-radius:.22em;text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.doc-theme .page-hero h1 .r{text-decoration:none}

/* ── 공용 히어로(pageHero) — 흰 바탕 + 부드러운 빛. 그림이 있는 구역(포트폴리오·아티클)은 글 왼쪽 / 3D 오른쪽 */
.page-hero{position:relative;overflow:hidden;border-bottom:0;padding:96px 0 72px;background:#fff}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 40%,#dfe7ff 0,rgba(223,231,255,0) 70%),radial-gradient(40% 50% at 12% 85%,#fff1c2 0,rgba(255,241,194,0) 70%),#fff}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--blue);font-weight:800}
.page-hero h1{font-size:clamp(40px,5vw,72px);line-height:1.08;letter-spacing:-.035em;color:var(--ink)}
.page-hero .lead{color:#3b4050;max-width:34em}
/* 포트폴리오 머리(2026-10-12): 공용 .pg-head > .pg-title(문의 카드식과 동일) + 제목 아래 분류 칩 가운데(.case-cats). 옛 띠(.case-band)·회색 분류 띠(.case-filters)는 뺌 */
.case-theme .page-hero.case-hero{display:none}
.case-cats{padding-top:40px}
.case-cats .chips{justify-content:center;gap:8px}
.case-cats .chip{background:#fff;font-size:14px;padding:10px 18px}
.case-cats .chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.case-cats .chip-cnt{font-size:12px;color:var(--sub)}
.case-cats .chip.on .chip-cnt{color:rgba(255,255,255,.7)}
.case-theme .br-m{display:none}   /* 제목 줄바꿈은 휴대폰에서만(아티클과 동일) */
.case-theme main > .section{padding-top:56px;border-top:0}
.case-note{margin-top:64px;text-align:center;font-size:15px;line-height:1.8;color:var(--sub)}   /* 목록 아래 공개 동의 두 문장(2026-10-12) */
.case-note b{font-weight:700;color:var(--ink)}   /* 칩 아래 56px — 문의 카드식의 제목 아래 서식과 같은 간격. editorial 의 .section 윗선은 첫 섹션(.pg-head)이 아니라서 붙던 것을 뺌 */
/* 사례 카드 — 기본 4칸(2026-10-06 사장님 결정). 합성 썸네일(1600×1000)을 그 비율 그대로, 잘리는 데 없이. 제목은 그림 안에 있으니 글 제목은 숨긴다 */
.case-grid{grid-template-columns:repeat(4,1fr);gap:36px 24px}            /* 창 폭과 무관하게 4칸이 기본 */
@media (max-width:899px){.case-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
@media (max-width:599px){.case-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.case-grid .post-thumb{aspect-ratio:3/2;border:0;border-radius:14px;background:var(--soft)}   /* A 판: 위 빈 띠를 잘라 3:2 로 맞춘 그림(2026-10-07) */
.case-grid.imgtitle .post-thumb{aspect-ratio:1/1}   /* B 판(?img=title)은 정사각 그대로 */
.case-grid .post-thumb img{object-fit:cover;object-position:center;transition:none}
.case-grid.imgtitle .post-thumb img{object-fit:contain}
.case-grid .post:hover .post-thumb{box-shadow:0 20px 40px -24px rgba(20,24,39,.35)}
.case-grid .post:hover .post-thumb img{transform:none}
/* 카드 글(2026-10-07): 썸네일에서 글자를 뺐으므로 제목은 아래 글로. B 판(?img=title)에서만 숨긴다 */
.case-grid .post-title{margin-top:14px;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.4;color:var(--ink);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;word-break:keep-all}   /* 제목은 가운데(2026-10-07 사장님) */
.case-grid .post:hover .post-title{color:var(--blue)}
.case-grid .post-plat{position:absolute;top:10px;right:10px;z-index:1;display:flex;gap:7px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(20,24,39,.12);line-height:0}   /* 플랫폼 로고(2026-10-12 사장님): 그림 오른쪽 위 흰 알약, 안드로이드·애플·웹 */
.case-grid .post-plat img{width:16px;height:16px;display:block}
.case-grid .post-plat .plat-ai{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:5px;background:linear-gradient(135deg,#2e5bff,#8b5cf6);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em;line-height:1}   /* AI 표시(2026-10-13 사장님) */
.case-grid .post-plat .plat-mvp{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:5px;background:var(--navy);color:var(--yellow);font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1}   /* MVP 표시(2026-10-13 사장님) */
.case-grid.imgtitle .post-plat{display:none}
.case-grid.imgtitle .post-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.case-grid .post{display:block;position:relative}
.case-grid .post-thumb{overflow:hidden}
.case-grid .post-thumb img{padding:0}
/* 칸 수 비교(?cols=) — 태블릿 폭부터 적용. 휴대폰은 공용 반응형 규칙(1칸)을 따른다 */
@media (min-width:768px){
  .case-grid.c2{grid-template-columns:repeat(2,1fr);gap:40px}
  .case-grid.c3{grid-template-columns:repeat(3,1fr);gap:32px}
  .case-grid.c4{grid-template-columns:repeat(4,1fr);gap:24px}
  .case-grid.c5{grid-template-columns:repeat(5,1fr);gap:18px}
  .case-grid.c2 .post-thumb,.case-grid.c3 .post-thumb{border-radius:20px}
}

/* ── 아티클 히어로(.av-hero) — 초록 사진 → 같은 흰 바탕 + 3D, 검색창은 알약 */
.av-hero{position:relative;color:var(--ink);background:#fff;min-height:min(70svh,620px);display:flex;flex-direction:column;justify-content:center}
.av-hero .av-bg,.av-hero .av-ov{display:none}
.av-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 40%,#dfe7ff 0,rgba(223,231,255,0) 70%),radial-gradient(40% 50% at 12% 85%,#fff1c2 0,rgba(255,241,194,0) 70%),#fff}
.av-hero::after{content:"";position:absolute;z-index:1;top:50%;right:max(24px,calc((100% - var(--maxw)) / 2 + 24px));width:min(40%,560px);aspect-ratio:3/2;transform:translateY(-50%);
  background:url('https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/img/svc-a/article.webp') center/contain no-repeat;filter:drop-shadow(0 30px 50px rgba(20,24,39,.16))}
.av-hero .wrap{position:relative;z-index:2;width:100%;padding:96px calc(var(--pad) + 42%) 72px var(--pad)}
.av-eyebrow{color:var(--blue)}
.av-hero h1{color:var(--ink);font-size:clamp(36px,4.8vw,64px);letter-spacing:-.035em;margin-top:0}
.av-hero .av-lead{color:#3b4050}
.av-search{border-radius:999px;border:1.5px solid var(--line);box-shadow:0 20px 50px -24px rgba(20,24,39,.25)}
.av-search input{padding-left:24px}
.av-search button{background:var(--navy)}
.av-search button:hover{background:var(--blue)}
.av-hot{color:var(--sub)}
.av-hot a{color:var(--ink);border-bottom-color:rgba(20,24,39,.3)}
.av-sh h2 small{color:var(--sub)}
.av-cbtn:hover{border-color:var(--blue);color:var(--blue)}
.av-hub:hover{border-color:var(--blue);box-shadow:0 24px 50px -28px rgba(46,91,255,.45)}
.av-hub .badge{background:rgba(27,31,58,.85)}
.av-hub.boss .badge{background:var(--blue)}
.av-chip{border-radius:999px}
.av-chip.on{background:var(--navy);border-color:var(--navy)}
.av-filters{background:var(--soft)}

/* ── 목록 카드·필터 — 모서리 둥글게, 선택은 남색 */
.chip{border-radius:999px}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.post-thumb{border-radius:16px;overflow:hidden}
.post-badge{border-radius:999px}
.tile .thumb,.tile .thumb img{border-radius:16px}
.cert-frame img{border-radius:10px}

/* ── 전환 띠·바닥 — 메인의 남색 면 */
/* 전환 띠 — 밝은 바탕(2026-10-07 사장님: 남색 띠가 바로 아래 남색 푸터와 겹쳐 보임) */
.cta-band{background:var(--soft);color:var(--ink);border-top:1px solid var(--line);padding:100px 0}
.cta h2{color:var(--ink)}
.cta h2 .r{background:var(--yellow);color:var(--navy)}
.cta .lead{color:#3b4050}
.cta-band .btn-primary{background:var(--navy);color:#fff}
.cta-band .btn-primary:hover{background:var(--blue);color:#fff}
.cta-band .btn-ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.cta-band .btn-ghost:hover{background:var(--navy);color:#fff}
/* 견적 문의 띠(quoteBand, 2026-10-12) — 회사소개 맨 아래(.a1-cta)와 같은 규칙: 흰 바탕, 윗선, 가운데 정렬, 96px */
.cta-band.cta-quote{background:var(--soft);border-top:1px solid var(--line);padding:96px 0;text-align:center}   /* 바탕 #f5f6fa(2026-10-12 사장님) */
.cta-quote h2{font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.cta-quote h2 .r{background:var(--yellow);color:var(--navy);padding:.02em .22em;border-radius:.22em}
.cta-quote .lead{margin:16px auto 28px;max-width:none;font-size:17px;color:var(--sub)}   /* editorial 의 .lead 최대 폭 700px 때문에 왼쪽에 서던 것을 가운데로 */
.cta-quote .cta-actions{justify-content:center;flex-wrap:wrap}
@media (max-width:768px){.cta-band.cta-quote{padding:64px 0}}
.site-footer{background:var(--navy);border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.site-footer .brand b{color:#fff}
.foot-tag,.site-footer .foot-brand .foot-tag{color:#fff}   /* editorial 의 .foot-brand .foot-tag(잉크색)보다 세게 — 남색 바닥에서 안 보이던 문제 */
.foot-contact,.foot-contact a{color:rgba(255,255,255,.6)}
.foot-contact a:hover{color:#fff}
.foot-contact i{display:inline-block;width:18px}   /* 전화와 메일 사이 간격(가운데점 제거, 2026-10-13) */
.foot-menu a{color:#fff}
.foot-menu a:hover{color:var(--yellow)}
.foot-menu a.cta{color:var(--yellow)}
.foot-legal{border-top-color:rgba(255,255,255,.12)}
.foot-legal .foot-legal-links a,.foot-legal-links a{color:rgba(255,255,255,.5)}
.foot-legal-links a:hover{color:#fff}

/* ── 휴대폰 */
@media (max-width:900px){
  .av-hero{min-height:0}
  .av-hero .wrap{padding:64px var(--pad) 32px}
  .av-hero::after{position:relative;order:2;top:auto;right:auto;transform:none;width:min(100%,440px);margin:0 auto 32px}
  .cta-band{padding:72px 0}
}
/* ── 머리 한 줄 유지(2026-10-08) — 옛 editorial.css 는 768px 이하를 바로 두 줄(로고·문의 / 메뉴)로 쪼갰다.
   로고 115 + 메뉴 330 + 문의 60 + 바깥 여백 48 = 553px 이면 한 줄에 들어가므로, 600px 까지는 한 줄을 그대로 둔다.
   사장님: "네비가 모니터 크기에 따라 무너지는 경우가 있네" → 창을 줄이거나 반쪽 창에서 메뉴가 아래로 떨어지던 것 */
@media (min-width:600px) and (max-width:768px){
  .site-header .wrap,.home-a .site-header .wrap{flex-wrap:nowrap;height:66px;padding-top:0;padding-bottom:0}
  .gnb{order:0;width:auto;gap:22px;margin-top:0;overflow:visible}
  .gnb a,.home-a .gnb a{font-size:15px;padding-bottom:0}
  .header-cta,.home-a .header-cta{padding:10px 18px;font-size:14px}
}
/* 599px 이하(휴대폰): 로고·문의 한 줄, 메뉴는 아래 한 줄에 고르게 */
@media (max-width:599px){
  .site-header .wrap,.home-a .site-header .wrap{height:auto;padding-top:12px}
  .gnb{justify-content:flex-start;gap:26px;margin-top:8px;padding-bottom:12px}
  .gnb a,.home-a .gnb a{font-size:14px;padding:0}
}

/* ── GNB 하위 메뉴(2026-10-07) — 서비스 아래 품목 넷. 데스크톱은 올리거나 포커스하면 열리고, 휴대폰은 /services 목록이 허브 */
.gnb .has-sub{position:relative;display:flex;align-items:center}
/* 하위 메뉴 표시 화살표는 뺌(2026-10-08 사장님). 올리면 열리는 동작은 그대로 */
.gnb .has-sub > a::after{content:none}
.gnb .sub{position:absolute;top:calc(100% + 14px);left:50%;z-index:60;min-width:232px;padding:8px;border-radius:16px;background:#fff;border:1px solid rgba(20,24,39,.08);box-shadow:0 18px 40px -18px rgba(20,24,39,.35);transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
.gnb .sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.gnb .has-sub:hover .sub,.gnb .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.gnb .sub a{display:block;padding:10px 14px;border:0;border-radius:10px;font-size:14px;font-weight:600;color:#3b4050;white-space:nowrap}
.gnb .sub a:hover,.gnb .sub a:focus-visible{background:#f5f6fa;color:var(--blue);border-bottom-color:transparent}
.gnb .sub a.more{margin-top:4px;padding-top:12px;border-top:1px solid #e4e6ee;border-radius:0 0 10px 10px;font-weight:500;color:#6b7080}
@media (max-width:599px){.gnb .sub{display:none}.gnb .has-sub > a::after{display:none}}
/* 휴대폰 머리 다듬기(2026-10-18 사장님 '모바일에서 네비게이션 좀 다듬어야 할것 같은데'): 메뉴 넷을 왼쪽에 몰지 않고 네 칸 같은 폭으로,
   누르기 쉬운 44px 높이, 지금 있는 메뉴는 파란 글자 + 아래 2px 선. 로고·견적 문의는 조금 작게 해서 머리 전체 높이는 전과 비슷하게 */
@media (max-width:599px){
  .site-header .wrap,.home-a .site-header .wrap{padding-top:8px;padding-bottom:0}
  .site-header .brand img.brand-logo{height:30px}
  .site-header .wrap .header-cta{padding:8px 15px;font-size:13px}
  .site-header .gnb{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%;margin-top:6px;padding:0;border-top:1px solid rgba(20,24,39,.06);overflow:visible}
  .site-header .gnb .has-sub{display:block}
  .site-header .gnb > a,.site-header .gnb > .has-sub > a{display:flex;align-items:center;justify-content:center;height:44px;padding:0;font-size:15px;font-weight:700;color:#3b4050;white-space:nowrap}
  .site-header .gnb > a.on,.site-header .gnb > .has-sub > a.on{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
}

/* ── 푸터 메뉴 두 묶음(2026-10-07) — 서비스 품목 넷 + 회사 */
.foot-menu.foot-cols{flex-direction:row;align-items:flex-start;justify-content:flex-end;gap:64px;text-align:left}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col .foot-h{margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.45)}
.foot-col a{font-size:14.5px;font-weight:600}
@media (max-width:768px){.foot-menu.foot-cols{justify-content:flex-start;gap:40px;flex-wrap:wrap;margin-top:8px}}

@media (max-width:768px){.case-theme .br-m{display:inline}.case-note{margin-top:40px;font-size:14px}.case-cats{padding-top:28px}.case-cats .chip{font-size:13px;padding:8px 14px}.case-theme main > .section{padding-top:40px}}   /* 휴대폰 — 문의 카드식과 동일 40px */

/* 줄바꿈 뒤에 오는 칩(.r)은 윗줄과 붙어 보여서 위에 여백을 준다 — 사이트 공통(2026-10-07 사장님: "BOUTZ 개발 마진 탑") */
h1 br + .r,h2 br + .r,.cv2-h1 br + .r{display:inline-block!important;margin-top:.28em!important;line-height:1.15}

/* ── 안쪽 페이지 머리 .pg-head(2026-10-08, 카카오 서비스 페이지 머리 실측을 우리 톤으로) —
   GNB 아래 74px 줄(왼쪽 페이지 이름 18px 굵게, 오른쪽 위치 탭, 아래 1px 선) → 가운데 라벨 18px → 제목 46px 두 줄 → 3D 한 장 */
.pg-head{background:#fff}
.pg-bar{border-bottom:1px solid var(--line)}
.pg-bar .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.pg-bar-name{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.pg-tabs{display:flex;align-items:center}
.pg-tabs a{position:relative;padding:0 18px;font-size:16px;font-weight:600;color:#3b4050;white-space:nowrap}
.pg-tabs a:last-child{padding-right:0}
.pg-tabs a + a::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;background:var(--line);transform:translateY(-50%)}
.pg-tabs a:hover,.pg-tabs a.on{color:var(--blue)}
.pg-title{text-align:center;padding:68px var(--pad) 0}   /* 좌우는 .wrap 과 같은 여백 — 단축형이 0 으로 덮어 휴대폰에서 제목이 양 끝에 붙던 문제(2026-10-12) */   /* 위치 탭 줄(.pg-bar)은 회사소개에서 뺌(2026-10-08) — 규칙은 다른 페이지용으로 둔다 */
.pg-title .eyebrow{font-size:18px;font-weight:500;letter-spacing:0;color:#3b4050}
.pg-title h1{margin:22px auto 0;max-width:816px;font-size:46px;font-weight:700;line-height:1.3;letter-spacing:-1px;color:var(--ink)}
.pg-title h1 .r{display:inline;background:var(--blue2);color:var(--blue);padding:.04em .22em;border-radius:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pg-art{display:block;width:min(100%,640px);height:auto;margin:56px auto 0}
@media (max-width:768px){
  .pg-bar .wrap{height:auto;flex-direction:column;align-items:flex-start;gap:6px;padding-top:14px;padding-bottom:12px}
  .pg-tabs{width:100%;overflow-x:auto;scrollbar-width:none}.pg-tabs::-webkit-scrollbar{display:none}
  .pg-tabs a{padding:6px 14px 6px 0;font-size:15px}.pg-tabs a + a::before{content:none}
  .pg-title{padding-top:44px}.pg-title .eyebrow{font-size:15px}.pg-title h1{font-size:30px;letter-spacing:-.6px}
  .pg-art{width:min(100%,360px);margin-top:32px}
}
/* 문의 띠 '영업일 기준 1일 이내' 문장 제거(2026-10-13 사장님) 뒤 제목과 단추 사이 간격 */
.cta-band h2 + .cta-actions,.sc-cta h2 + .sc-act,.s-cta h2 + .acts,.a1-cta h2 + .a1-cta-act{margin-top:48px}
@media (max-width:768px){.cta-band h2 + .cta-actions,.sc-cta h2 + .sc-act,.s-cta h2 + .acts,.a1-cta h2 + .a1-cta-act{margin-top:32px}}

/* ── 푸터 2026-10-13 (사장님: 문구 제거·이메일 무단수집 거부·네이버 단추·메뉴 정리) — .ft2 로 옛 규칙 위에 덮는다 ── */
.site-footer.ft2{padding:64px 0 32px}
.ft2 .foot-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:start}
.ft2 .brand b{font-size:18px;color:#fff}
.ft2 .foot-info{margin:22px 0 0;display:grid;gap:7px;font-size:13.5px;line-height:1.6}
.ft2 .foot-info div{display:flex;gap:14px}
.ft2 .foot-info dt{flex:0 0 92px;color:rgba(255,255,255,.42);font-weight:500}
.ft2 .foot-info dd{margin:0;color:rgba(255,255,255,.78)}
.ft2 .foot-info a{color:inherit}
.ft2 .foot-info a:hover{color:#fff}
.ft2 .foot-blog{margin-top:24px;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 11px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:13px;font-weight:600;color:#fff;transition:background .15s,border-color .15s}
.ft2 .foot-blog:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.36)}
.ft2 .foot-blog svg{display:block;border-radius:4.5px}
.ft2 .foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ft2 .foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ft2 .foot-col a{font-size:14px;font-weight:500;color:rgba(255,255,255,.62);letter-spacing:-.01em}
.ft2 .foot-col a:hover{color:#fff}
.ft2 .foot-col a.foot-h{margin-bottom:4px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:#fff}
.ft2 .foot-col a.foot-h:hover{color:var(--yellow)}
.ft2 .foot-col a.foot-h + a.foot-h{margin-top:2px}
.ft2 .foot-col a.foot-quote{margin-top:18px;display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:14px;font-weight:700}
.ft2 .foot-col a.foot-quote:hover{background:#ffc61a;color:var(--ink)}
.ft2 .foot-legal{margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 24px;font-size:12.5px;color:rgba(255,255,255,.45)}
.ft2 .foot-legal-links{display:flex;gap:18px}
.ft2 .foot-legal .foot-legal-links a{margin:0;color:rgba(255,255,255,.55)}
.ft2 .foot-legal .foot-legal-links a.b{color:rgba(255,255,255,.85);font-weight:700}
.ft2 .foot-legal .foot-legal-links a:hover{color:#fff}
@media (max-width:900px){
  .ft2 .foot-main{grid-template-columns:1fr;gap:44px}
}
@media (max-width:600px){
  .site-footer.ft2{padding:48px 0 28px}
  .ft2 .foot-cols{grid-template-columns:1fr 1fr;gap:32px 24px}
  .ft2 .foot-col:last-child{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 22px}
  .ft2 .foot-col:last-child a.foot-h,.ft2 .foot-col:last-child a.foot-h + a.foot-h{margin:0}
  .ft2 .foot-col a.foot-quote{margin-top:0}
  .ft2 .foot-info dt{flex-basis:84px}
  .ft2 .foot-legal{flex-direction:column;align-items:flex-start;margin-top:40px}
}

/* 바닥글 로고(2026-10-14 사장님 '푸터에 로고는 H 에 흰색 바탕을 주고 좀 깎아 줘') — 남색 바탕 위 H 표지에 흰 바탕 + 둥근 모서리 */
.site-footer .brand img{background:#fff;border-radius:8px;padding:1px;box-sizing:border-box;object-fit:contain}

/* 포트폴리오 목록 자주 묻는 질문(2026-10-15 사장님 '포트폴리오 목록에도 FAQ 넣어줘') — 머리처럼 가운데 제목, 폭 880 흰 카드, 열린 카드는 파란 테두리.
   바로 아래 견적 문의 띠가 연회색이라 바탕은 흰색, 목록과는 가는 선으로 구분 */
.case-theme main > .section.case-faq{padding:0 0 112px;background:#fff}
.case-faq .wrap{padding-top:96px;position:relative}
.case-faq .wrap::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--line)}
.case-faq .art-sh{text-align:center;margin-bottom:44px}
.case-faq .art-sh h2{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.25;color:var(--ink)}
.case-faq-list{max-width:880px;margin:0 auto;display:grid;gap:12px}
.case-faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;transition:border-color .2s,box-shadow .2s}
.case-faq-item[open]{border-color:var(--blue);box-shadow:0 10px 30px -18px rgba(46,91,255,.45)}
.case-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;cursor:pointer;list-style:none;font-size:18px;line-height:1.45;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.case-faq-item summary::-webkit-details-marker{display:none}
.case-faq-item summary .q::before{content:"Q";display:inline-block;width:1.5em;color:var(--blue);font-weight:800}
.case-faq-item summary:hover .q{color:var(--blue)}
.case-faq-item summary i{flex:none;position:relative;width:26px;height:26px;border-radius:50%;background:var(--soft);transition:background .2s}
.case-faq-item summary i::before,.case-faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;border-radius:1px;background:var(--ink);transform:translate(-50%,-50%)}
.case-faq-item summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.case-faq-item[open] summary i{background:var(--blue)}
.case-faq-item[open] summary i::before,.case-faq-item[open] summary i::after{background:#fff}
.case-faq-item[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.case-faq-a{padding:0 26px 24px calc(26px + 1.5em * 18 / 16)}
.case-faq-a p{font-size:16px;line-height:1.75;color:#3b4050;word-break:keep-all}
.case-faq-more{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:var(--blue)}
.case-faq-more::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.case-faq-more:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:768px){
  .case-theme main > .section.case-faq{padding:0 0 72px}
  .case-faq .wrap{padding-top:64px}
  .case-faq .art-sh{margin-bottom:28px}
  .case-faq-item summary{font-size:16px;padding:18px 18px;gap:14px}
  .case-faq-a{padding:0 18px 20px 18px}
  .case-faq-a p{font-size:15px}
}