/* V4 공통 표현: 실제 이미지, 대칭 외곽, 충분한 본문 폭 */
:root { --reading:840px; }
.skip { clip-path:inset(50%); pointer-events:none; }
.skip:focus { clip-path:none; pointer-events:auto; }
.wrap1280 { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }
.wrap1040 { width:min(1040px,calc(100% - 64px)); margin-inline:auto; }
.v3-support-page .wrap1240 { width:min(1280px,calc(100% - 64px)); }
.section { padding-block:80px; }
.v4-banner { position:relative; isolation:isolate; display:flex; align-items:center; min-height:320px; overflow:hidden; border-radius:24px; background:#07131a; color:#fff; }
.v4-banner__copy { position:relative; z-index:2; width:59%; padding:46px 52px; }
.v4-banner__copy .eyebrow { color:#ffad7a; margin-bottom:15px; }
.v4-banner__copy h1 { color:#fff; font-size:clamp(36px,3.3vw,48px); line-height:1.24; letter-spacing:-.045em; }
.v4-banner__copy > p:not(.eyebrow):not(.v4-banner__count) { margin-top:20px; color:#d5dfe4; font-size:17px; line-height:1.8; }
.v4-banner__copy .v4-banner__count { display:block; margin-top:24px; color:#ffc29d; font-size:14px; font-weight:650; }
.v4-banner__visual { position:absolute; z-index:0; inset:0; }
.v4-banner__visual > img { width:100%; height:100%; object-fit:cover; }
.v4-banner--panorama::after { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,#07131a66 35%,#07131a22 57%,transparent 74%); pointer-events:none; }
.v4-banner--split .v4-banner__visual { left:58%; }
.v4-banner--split .v4-banner__visual::before { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,#07131a,transparent 24%); }
.v4-banner--category .v4-banner__visual > img { object-fit:contain; }
.v4-case-mosaic { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:center; height:100%; padding:28px 20px 28px 0; }
.v4-case-mosaic > div { overflow:hidden; border-radius:12px; height:220px; }
.v4-case-mosaic > div:nth-child(2) { height:270px; }
.v4-case-mosaic img { width:100%; height:100%; object-fit:cover; }
.v4-banner--cases .v4-banner__copy { width:59%; }
.v4-case-heading { padding:40px 0 0; background:#fff; }
.v4-case-heading h1 { max-width:900px; font-size:clamp(36px,3.5vw,52px); line-height:1.25; }
.v4-case-heading__summary { max-width:840px; margin-top:22px; color:#58636e; font-size:20px; line-height:1.8; }
.v4-process-art { display:flex; align-items:center; width:96px; height:96px; margin-bottom:22px; }
.v4-process-art img { width:100%; height:100%; object-fit:contain; }
.process-list { gap:28px; }
.process-list li { border-color:#ffffff32; }
.process-list .process-number { margin-bottom:14px; color:#ffb180; }
.v4-contact { padding-block:80px; }
.v4-contact .contact-grid { grid-template-columns:minmax(0,1fr) 440px; gap:64px; }
.v4-contact .contact-copy h2 { max-width:650px; font-size:44px; }
.v4-contact .contact-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:30px 0; padding:0; list-style:none; }
.v4-contact .contact-checks li { display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:#d7e1e7; font-size:15px; line-height:1.6; }
.v4-contact-icon { width:66px; height:66px; object-fit:contain; }
.v4-contact .contact-card { padding:36px; border-radius:20px; }
.v4-contact .contact-number { font-size:38px; line-height:1.3; }
.v4-contact .contact-card .main-call { min-height:72px; }
.v4-contact .contact-copy > small { display:block; max-width:580px; line-height:1.8; }
.site-footer { padding-top:64px; }
.footer-grid { grid-template-columns:1fr 1.35fr 1.1fr .85fr; gap:40px; }
.footer-grid h2 { font-size:16px; margin-bottom:22px; }
.footer-grid dl,.footer-grid section > p,.footer-grid nav > a,.footer-brand > p { font-size:15px; }
.footer-grid dt { font-size:13px; }
.footer-phone { font-size:25px; }
.footer-grid nav > a { min-height:40px; }
.footer-bottom { font-size:13px; }
.footer-bottom nav { margin-left:auto; margin-right:0; }
.v4-document-page { background:#f3f3f1; }
@media(max-width:1100px) {
  .v4-banner__copy { padding:38px; width:62%; }
  .v4-banner--split .v4-banner__visual { left:58%; }
  .v4-contact .contact-grid { grid-template-columns:minmax(0,1fr) 370px; gap:36px; }
  .v4-contact .contact-number { font-size:32px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}
@media(max-width:767px) {
  body { font-size:17px; line-height:1.8; }
  .wrap,.wrap1240,.wrap1280,.wrap1040,.v3-support-page .wrap1240 { width:calc(100% - 40px); }
  .section { padding-block:56px; }
  .v4-banner { display:flex; flex-direction:column; align-items:stretch; min-height:0; border-radius:20px; }
  .v4-banner__copy,.v4-banner--cases .v4-banner__copy { width:100%; padding:30px 26px 20px; }
  .v4-banner__copy h1 { font-size:32px; line-height:1.3; }
  .v4-banner__copy > p:not(.eyebrow):not(.v4-banner__count) { margin-top:18px; font-size:16px; }
  .v4-banner__copy .v4-banner__count { margin-top:20px; }
  .v4-banner__visual,.v4-banner--split .v4-banner__visual { position:relative; inset:auto; height:190px; }
  .v4-banner__visual > img { object-position:85% center; }
  .v4-banner--panorama::after { display:none; }
  .v4-banner--panorama .v4-banner__visual > img { width:190%; max-width:none; transform:translateX(-44%); object-fit:cover; }
  .v4-banner--split .v4-banner__visual::before { background:linear-gradient(180deg,#07131a,transparent 30%); }
  .v4-case-mosaic { gap:10px; padding:12px 20px 0; }
  .v4-case-mosaic > div { height:150px; }
  .v4-case-mosaic > div:nth-child(2) { height:175px; }
  .v4-case-heading { padding-top:28px; }
  .v4-case-heading h1 { font-size:32px; }
  .v4-case-heading__summary { font-size:18px; margin-top:18px; }
  .v4-process-art { width:70px; height:70px; grid-column:1; grid-row:auto; margin:0; }
  .process-list li { grid-template-columns:72px minmax(0,1fr); gap:10px 20px; }
  .process-list .process-number { grid-column:2; grid-row:auto; margin:0; padding:0; }
  .process-list h3 { grid-column:2; }
  .process-list p { grid-column:2; }
  .v4-contact { padding-block:56px; }
  .v4-contact .contact-grid { grid-template-columns:1fr; gap:32px; }
  .v4-contact .contact-copy h2 { font-size:32px; }
  .v4-contact .contact-checks { gap:12px; }
  .v4-contact .contact-checks li { font-size:13px; }
  .v4-contact-icon { width:54px; height:54px; }
  .v4-contact .contact-card { padding:28px 22px; }
  .v4-contact .contact-number { font-size:32px; }
  .v4-contact .contact-card .main-call { min-height:64px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-grid nav > a { min-height:44px; }
  .footer-bottom nav { margin-left:0; }
}
@media(max-width:359px) {
  .wrap,.wrap1240,.wrap1280,.wrap1040,.v3-support-page .wrap1240 { width:calc(100% - 32px); }
  .v4-banner__copy { padding:26px 20px 20px; }
  .v4-banner__copy h1,.v4-case-heading h1 { font-size:30px; }
  .v4-contact .contact-number { font-size:29px; }
}
/* 실제 200% 확대에서 390px 창이 약 195 CSS px로 줄어드는 경우입니다. */
@media(max-width:280px) {
  .site-header { height:auto; min-height:64px; }
  .header-inner { display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:8px; padding-block:12px; }
  .header-inner .brand { min-width:0; gap:6px; white-space:nowrap; font-size:20px; }
  .header-inner .brand img { width:22px; height:auto; flex:0 0 22px; }
  .header-inner .brand > span { font-size:23px; white-space:nowrap; }
  .text-link { max-width:100%; white-space:normal; }
  .text-link svg { flex-shrink:0; }
  .header-call { grid-column:1/-1; grid-row:2; min-height:44px; padding:8px 12px; font-size:16px; white-space:nowrap; }
  .menu-toggle { grid-column:2; grid-row:1; }
  .header-inner .main-menu { top:100%; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
  .footer-grid > * { min-width:0; }
  .footer-phone { max-width:100%; font-size:clamp(16px,9vw,25px); white-space:normal; overflow-wrap:anywhere; }
  .footer-bottom nav { flex-direction:column; align-items:flex-start; gap:8px; }
  .v4-contact .contact-card { padding:24px 12px; min-width:0; }
  .v4-contact .contact-number { font-size:clamp(15px,8.7vw,23px); }
  .v4-contact .contact-checks { grid-template-columns:1fr; }
  .v4-contact .contact-checks li { flex-direction:row; align-items:center; }
  .v4-contact .contact-copy h2,.hero h1 { font-size:28px; }
  .btn { min-width:0; padding:14px 12px; }
  .btn > span { gap:8px; }
  .mobile-call { padding:8px; }
  .mobile-call .btn { min-height:64px; padding:12px 6px; font-size:16px; }
  .mobile-call .btn > span { gap:6px; }
  .mobile-call .btn svg { width:18px; height:18px; flex-basis:18px; }
  .v4-document-page .v4-document-head { padding:24px 16px; }
  .v4-document-page .v4-document__art { max-width:120px; width:100%; height:auto; }
  .v4-document-page .v4-document__toc { padding:14px; }
  .v4-document-page .v4-document__contact { padding:24px 12px; }
  .v4-directory-page .v4-directory-card > span { padding:16px; }
  .v4-directory-page .v4-directory-card__art { padding:16px; }
  .v4-directory-page .v4-directory-result > a { grid-template-columns:minmax(0,1fr) 18px; gap:10px; }
  .v4-directory-page .v4-directory-result__thumb { display:none; }
  .v4-case-detail-page .v4-case-detail-link--next { flex-wrap:wrap; }
  .hero-caption { left:16px; right:16px; bottom:80px; line-height:1.6; }
  .hero-copy { padding-bottom:180px; }
  .hero-controls { right:12px; bottom:18px; gap:6px; }
  .process-list li { display:block; }
  .v4-process-art { margin-bottom:16px; }
  .method-item { flex-direction:column; align-items:flex-start; }
}