/* ===== 공통 스타일 (모든 화면 크기에 적용) ===== */
.button_wrap { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}

.button_box { border-radius: 20px; padding: 40px 0 40px 30px; box-sizing: border-box; position: relative; overflow: hidden; margin-bottom: 20px; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease;}
.button_box:nth-child(odd)  {background: linear-gradient(to right, #29aedc, #85bb2b);}
.button_box:nth-child(even) {background: linear-gradient(to right, #29aedc, #0267d8);}
.button_box h2 {color: #fff; font-weight: bold; font-size: 26px;}
.button_box p  {color: #fff; font-size: 16px; margin: 15px 0 25px 0;}
.button_box button { background: #fff; border-radius: 45px; border: none; padding: 5px 15px; color: #000; font-size: 18px; font-family: 'S-CoreDream'; cursor: pointer; position: relative; z-index: 1; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;}
.button_box img { position: absolute; bottom: 0; right: 0; transform-origin: bottom right; transition: transform 0.3s ease;}

/* ===== 호버 효과 ===== */
/* 박스: 살짝 떠오르고 그림자 */
.button_box:hover { transform: translateY(-8px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);}
/* 박스 호버 시 배경 아이콘 살짝 확대 */
.button_box:hover img { transform: scale(1.08);}
/* 버튼: 색 반전 */
.button_box button:hover { background: #111; color: #fff;}

/* ===== 클릭(액티브) 효과 ===== */
.button_box:active { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);}
.button_box button:active { transform: scale(0.94);}

/* ===== 키보드 접근성 (포커스 표시) ===== */
.button_box button:focus-visible {  outline: 3px solid rgba(255, 255, 255, 0.95); outline-offset: 2px;}

/* ===== 모션 최소화 설정 사용자 배려 ===== */
@media (prefers-reduced-motion: reduce) {
    .button_box, .button_box img, .button_box button {transition: none;}
    .button_box:hover, .button_box:active {transform: none;}}

/* ===== 반응형 : 화면 크기별 배치(칸 수)만 조정 ===== */

/* 모바일 : 1칸 */
@media only screen and (min-width: 1px) and (max-width: 640px) {
    .button_box {width: 100%; padding: 30px 0 30px 24px;}
    .button_box h2 {font-size: 22px;}
    .button_box p  {font-size: 15px;}
    .button_box img {max-width: 40%; height: auto; opacity: 0.85;}
}

/* 태블릿 : 2칸 */
@media only screen and (min-width: 640px) and (max-width: 1200px) {
    .button_box {width: 49%;}
}

/* 데스크탑 : 3칸 */
@media only screen and (min-width: 1200px) {
    .button_box {width: 32%;}
}


:root{
	--brand:#F89C27;
	--brand-dark:#f08b0a;
	--brand-soft:#fff5e9;
	--ink:#000;
	--muted:#666;
	--line:#e2e2e2;
	--bg-soft:#f6f8f9;
	--anchor-top:0px;
	--yt:#FF0000; --ig:#E4405F; --fb:#1877F2; --tt:#111;
}
.sub_contents_w2 { overflow:visible; height:auto; }
.sub_contents_w2::after{ content:""; display:block; clear:both; }

/* ===== 앵커탭 (기본) ===== */
.swhub-anchor{display:block; width:100%; clear:both; position:sticky; top:var(--anchor-top,0px); z-index:19; background:#fff; margin:0 0 20px; border-bottom:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.04);}
.swhub-anchor::after{content:""; position:absolute; top:0; right:0; bottom:0; width:34px; background:linear-gradient(to right,rgba(255,255,255,0),#fff); pointer-events:none; display:none;}
.swhub-anchor ul{display:flex; list-style:none; max-width:var(--maxw); margin:0; padding:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}
.swhub-anchor ul::-webkit-scrollbar{display:none;}
.swhub-anchor li{flex:1 1 0; min-width:0;}
.swhub-anchor a{display:block; text-align:center; padding:16px 0; font-size:15px; font-weight:500; color:#555; text-decoration:none; white-space:nowrap; border-right:1px solid var(--line); transition:background .15s,color .15s;}
.swhub-anchor a:hover{background:linear-gradient(to right,#29aedc,#0267d8); color:#fff;}
.swhub-anchor a.active{background:linear-gradient(to right,#29aedc,#85bb2b); color:#fff;}


/* ── 사업 섹션 ── */
.section {padding-top:44px; margin-bottom:60px; scroll-margin-top:170px;}

/* 사업목적 배너 */
.purpose {display:flex; gap:12px; align-items:flex-start; background:var(--brand-soft); border-radius:10px; padding:16px 18px; margin-bottom:18px; margin-top: 30px;}
.purpose .ico {flex:none; width:26px; height:26px; color:var(--brand-dark); margin-top:1px;}
.purpose .lbl {font-size:18px; font-weight:700; color:var(--brand-dark); letter-spacing:.5px; margin-bottom:7px;}
.purpose .txt {font-size:16px; color:var(--ink); line-height:1.55;}

/* 라벨행 (사업대상/주요내용/지원내용...) */
.field {display:flex; gap:14px; padding:12px 2px; border-bottom:1px solid var(--line);}
.field:last-of-type {border-bottom:none;}
.field .k {flex:none; width:84px; font-size:16px; font-weight:500; color:#fff; background:var(--brand); border-radius:5px; padding:5px 0; text-align:center; height:fit-content;}
.field .k.sub {color:var(--brand-dark); background:var(--brand-soft); border:1px solid var(--brand);} 
.field .v {font-size:16px; color:var(--ink); line-height:1.55; padding-top:2px; width: 100%;}
.field .v-col {display:flex; flex-direction:column; width:100%;}
.field .v-col .nm-process {margin-top:16px;}
.v .sub-list {list-style:none ;margin-top:7px;}
.v .sub-list li {position:relative; padding-left:15px; margin:4px 0; font-size:16px; line-height:1.5;}
.v .sub-list li::before {content:""; position:absolute; left:2px; top:9px; width:5px; height:5px; background:var(--brand); border-radius:50%;}

/* 사진 그리드 (4:3 통일) */
.photos {margin-top:22px;}
.photos .cap {font-size:16px; font-weight:500; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:6px;}
.photo-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.photo-grid.four {grid-template-columns:repeat(4,1fr);}
.photo-grid.side {grid-template-columns:2.5fr 1fr; align-items:start; gap:18px;}
.photo {margin:0;}
.ph {width:100%;aspect-ratio:4/3; background:var(--ph); border-radius:10px; display:flex; align-items:center; justify-content:center; object-fit:cover;}
.photo figcaption {font-size:12.5px; color:var(--muted); text-align:center; margin-top:8px;}

/* 비포애프터 */
.ba-pair {margin-bottom:20px;}
.ba-pair .case {font-size:13px; font-weight:600; color:var(--brand-dark); margin-bottom:9px;}
.ba-row {display:flex; align-items:center; gap:12px;}
.ba-item {flex:1; position:relative;}
.ba-item .ph {border:2px solid transparent;}
.ba-item.after .ph {background:var(--brand-soft); border-color:var(--brand);}
.ba-badge {position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; color:#fff; padding:3px 11px; border-radius:20px;}
.ba-badge.before {background:rgba(80,80,80,.85);}
.ba-badge.after {background:var(--brand);}
.ba-arrow {flex:none;color:var(--brand); width:22px; height:22px;}

/* ══════════ 연도별 포럼 카드 ══════════ */
.forum-list {display:flex; flex-direction:column; gap:12px; margin-bottom:6px;}
.forum-card {border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.forum-card .yhead {display:flex; align-items:center; gap:9px; background: #f0faff; padding:10px 15px;}
.forum-card .yhead .y {font-size:18x; font-weight:700; color: #2ca5ea;}
.forum-card .yhead .n {font-size:16px; color:var(--ink);}
.forum-card .ybody {padding:13px 15px;}
.forum-row {display:flex; gap:9px; font-size:16px; line-height:1.55;}
.forum-row:not(:last-child) {margin-bottom:6px;}
.forum-row svg {width:16px; height:16px; color: #4db7f3; flex:none; margin-top:5px;}
.forum-row .rk {flex:none; width:44px; color:var(--ink); font-weight: 500;}
.forum-row .rv {color:var(--ink);}
.forum-row .rv .sub {color:var(--muted);}

/* 상권리포트 다운로드 */
.report-block {margin-top:22px; padding:16px 20px; background:#f4fafd; border:1px solid #e3e9f0; border-radius:14px;}
.report-block__head {display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.report-block__head .dot {width:28px; height:28px; border-radius:6px; background:#2ca5ea; color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.report-block__head .dot svg {width:18px; height:18px;}
.report-block__title {font-size:18px; font-weight:700; color:#000; margin:0;}
.report-block__desc {margin:0 0 18px 32px; font-size:16px; color:var(--muted); line-height:1.6;}

.report-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.report-btn {display:flex; align-items:center; gap:13px; padding:12px 18px; background:#fff; border:1px solid #2ca5ea; border-radius:12px; text-decoration:none; color:inherit; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;}
.report-btn:hover {border-color:#2ca5ea; background: #4db7f3; box-shadow:0 4px 14px rgba(27,79,138,.12); transform:translateY(-2px); transition: .5s;}
.report-btn:hover .report-btn__icon {background: #fff; color: #2ca5ea;}
.report-btn:hover .report-btn__year, .report-btn:hover .report-btn__meta {color: #fff;}
.report-btn:focus-visible {outline:2px solid #2ca5ea; outline-offset:2px;}
.report-btn__icon {width:42px; height:42px; flex-shrink:0; border-radius:10px; background:#2ca5ea; color:#fff; display:flex; align-items:center; justify-content:center;}
.report-btn__icon svg {width:20px; height:20px;}
.report-btn__body {display:flex; flex-direction:column; min-width:0;}
.report-btn__year {font-size:17px; font-weight:700; color:#000; letter-spacing:-.01em;}
.report-btn__meta {font-size:14px; color:var(--muted);}

/* 최신 연도 강조 */
.report-btn--latest {border-color:#2ca5ea; background:#f5f9ff;}
.report-btn--latest .report-btn__icon {background:#2ca5ea; color:#fff;}
.report-btn--latest .report-btn__year::after {content:"NEW"; display:inline-block; margin-left:7px; vertical-align:2px; font-size:10px; font-weight:700; letter-spacing:.04em; color:#2ca5ea; background:#dfeafc; padding:2px 6px; border-radius:5px;}

/* SNS 카드 */
.sns-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-top:8px;}
.sns-card {border:1px solid #e2e2e2; border-radius:12px; padding:18px 12px; text-align:center; text-decoration:none; background:#fff; display:block; transition:box-shadow .15s, transform .15s;}
.sns-card:hover {box-shadow:0 6px 16px rgba(0,0,0,.08); transform:translateY(-2px);}
.sns-ico {width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 9px;}
.sns-ico svg {width:23px; height:23px; color:#fff;}
.fa-ico svg {width:30px; height:30px;}
.sns-name {font-size:16px; font-weight:600; color:#222;}
.sns-go {font-size:14px; color:#0f8f98; margin-top:4px; font-weight: 500;}

/* 표 */
.tbl-title {font-size:14px; font-weight:600; margin-bottom:9px;}
table.data {width:100%; border-collapse:collapse; font-size:14px;}
table.data th {background: #4db7f3; color:#fff; padding:12px 14px; text-align:left; font-weight:500; text-align: center;}
table.data td {padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.6; text-align: center;}
table.data tr:last-child td {border-bottom:none;}
table.data .rowhead {background: #f0faff; color: #2ca5ea; font-weight:600; white-space:nowrap;}
.mo-only{ display:none; }

.section .table_w table th {background: #f0faff; color: #2ca5ea;}
.section .table_w table th.or {background: #4db7f3; color: #fff;}
.section .table_w table td.bg {background: #2ca5ea; color: #fff;}
.section .table_w table td li.bs {box-shadow: inset 0 -0.5em 0 0 #2ca4ea42; font-size: 18px; font-weight: bold; width: fit-content; text-align: center; margin: 0 auto; margin-bottom: 7px;}

.section .table_w2 table th {background: #f8f8f8; color: #000;}
.sub_contents_w .table_w table th.c2 {color: var(--brand);}
.sub_contents_w .table_w table th.c1 {color: #2ca5ea; border-right: none;}

/* 다이어그램 */
.plb {width: 100%; margin: 20px 0 0 0;}
.plb ul {display: flex; flex-wrap: wrap;}
.plb li {background: #e8f7fe; border-radius: 10px; font-size: 18px; text-align: center; color: #000; display: flex; align-items: center; justify-content: center;}
.plb li.bt {width: 150px; height: 110px;}
.plb li.pc {background: #4db7f3; color: #fff;}
.plb li.ar {background: none; padding: 0 10px;}
.plb li img {width: 30px; height: 30px;}

/* ===== AI 안내 서비스 전용 컴포넌트 ===== */
.ai-service {display:flex; flex-direction:column; gap:22px; margin-top: 30px;}
.ai-concept {flex:1; min-width:0;}
.ai-flow {display:flex; align-items:center; justify-content:center; margin-bottom:28px;}
.ai-io {display:flex; gap:8px;}
.ai-chip {font-size:16px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:8px 15px; white-space:nowrap; text-align:center; color:var(--ink);}
.ai-chip::before {content:"✓ "; color: #4db7f3; font-weight:700;}
.ai-chip.out {background: #4db7f3; color:#fff; border-color: #4db7f3; font-weight:600;}
.ai-chip.out::before {content:none;}
.ai-plus {color: #4db7f3; font-weight:700; font-size:20px; flex:none; padding:0 4px;}
.ai-core {background:linear-gradient(135deg,#f0faff,#fff); border:1.5px solid  #4db7f3; border-radius:16px; padding:18px 16px; text-align:center; box-sizing: border-box;}
.ai-core-t {font-size:18px; font-weight:700; color: #2ca5ea; margin-bottom:6px;}
.ai-core-d {font-size:14px; color:var(--muted); line-height:1.55;}

.ai-cta {border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; margin-top:6px; max-width:640px;}
.ai-cta-head {background:linear-gradient(135deg, #4db7f3, #2ca5ea); padding:16px 20px; text-align:center; color:#fff;}
.ai-cta-sub {font-size:14px; opacity:.9; margin-bottom:3px;}
.ai-cta-title {font-size:19px; font-weight:700;}
.ai-cta-body {padding:20px; display:flex; align-items:center; gap:20px;}

.ai-cta-qr {width:112px; height:112px; flex:none; border:2px dashed  #4db7f3; border-radius:12px; display:flex; align-items:center; justify-content:center; color: #2ca5ea; font-size:12px; font-weight:600; text-align:center; background:#f0faff; object-fit:cover;}
.ai-cta-info {flex:1; min-width:0;}
.ai-cta-desc {font-size:14px; color:var(--ink); line-height:1.55; margin-bottom:12px;}
.ai-cta-line {display:flex; align-items:center; gap:8px; font-size:14px; text-decoration:none; color:var(--muted); margin-bottom:5px;}
.ai-cta-line svg {width:16px; height:16px; color: #4db7f3; flex:none;}
.ai-cta-line b {color: #2ca5ea;}
.ai-cta-line .num {color:var(--ink); font-weight:700;}
.ai-cta-foot {background:var(--bg-soft); padding:12px 20px; text-align:center; font-size:14px; color:var(--muted);}


/* 남문시장 */
.nm-kpi {display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px;}
.nm-kpi .card {border:1px solid var(--line); border-radius:12px; padding:18px 12px; text-align:center; background:#fff;}
.nm-kpi .ico {width:44px; height:44px; border-radius:50%; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; color:var(--brand-dark);}
.nm-kpi .ico .ti {font-size:22px;}
.nm-kpi .k {font-size:18px; font-weight:700; color:var(--brand-dark); margin-bottom:5px;}
.nm-kpi .v {font-size:16x; font-weight:700; color:var(--ink); line-height:1.3;}
.nm-kpi .sub {font-size:14px; color:var(--muted); margin-top:2px;}
/* 기본계획 프로세스 라인 */
.nm-process {position:relative; width: 100%;}
.nm-process::before {content:""; position:absolute; left:17px; top:16px; bottom:16px; width:2px; background:linear-gradient(var(--brand),var(--brand-soft));}
.nm-step {display:flex; gap:15px; position:relative;}
.nm-step:not(:last-child) {margin-bottom:16px;}
.nm-step .no {flex:none; width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:1; box-shadow:0 0 0 4px #fff;}
.nm-step .body {padding-top:4px;}
.nm-step .body b {font-size:16px; color:var(--brand-dark);}
.nm-step .body p {font-size:16px; color:var(--muted); line-height:1.55; margin-top:3px;}
/* 추진과제 3축 카드 */
.nm-task {border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:10px; padding:16px 18px; background:#fff;}
.nm-task:not(:last-child) {margin-bottom:12px;}
.nm-task .head {display:flex; align-items:center; gap:9px; margin-bottom:11px;}
.nm-task .head .ti {font-size:22px; color:var(--brand)}
.nm-task .head span {font-size:18px; font-weight:700; color:var(--ink);}
.nm-task .item {font-size:16px; color:var(--muted); line-height:1.7;}
.nm-task .item b {color:var(--ink);}

/* 연대상권 */
.biz-title {display:flex; align-items:center; gap:10px;}
.biz-title .dot {width:10px; height:10px; background:var(--brand); border-radius:2px;flex:none;}
.biz-title h2 {font-size:20px; letter-spacing:-.5px; color: #000 !important;}
/* 연도 탭 */
.year-tabs {display:flex; gap:8px; margin:30px 0 20px 0; border-bottom:2px solid var(--line);}
.year-tab {padding:11px 26px; border:1px solid var(--line); border-bottom:none; background:var(--bg-soft); color:var(--muted); font-size:15px; font-weight:600; cursor:pointer; border-radius:6px 6px 0 0; margin-bottom:-2px;}
.year-tab.active {background:#fff; color:var(--brand); border-color:var(--brand); border-bottom:2px solid #fff;}
.year-panel {display:none;}
.year-panel.active {display:block;}
/* 운영사업 카드 */
.op-cards {display:grid; grid-template-columns:1fr 1fr; gap:12px; padding: 0 0 12px 0; border-bottom: 1px solid var(--line);}
.op-card {border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:12px; padding:15px 16px; background:#fff;}
.op-badge {display:inline-block; font-size:13px; font-weight:600; color:#fff; background:var(--brand); border-radius:20px; padding:3px 13px; margin-bottom:8px;}
.op-card h4 {font-size:16px; color:var(--ink); margin-bottom:9px;}
.op-card ul {list-style:none;}
.op-card li {position:relative; padding-left:13px; font-size:14px; color:var(--muted); line-height:1.65;}
.op-card li::before {content:""; position:absolute; left:2px; top:8px; width:4px; height:4px; background:var(--brand); border-radius:50%;}
/* 추진상황 활동 블록 */
.subt {margin: 10px 0 20px 0;}
.subt span {background: #4db7f3; color: #fff; padding: 5px 10px; font-size: 16px; border-radius: 45px;}
.subt .ti {font-size:18px; padding-right: 5px;}
.activity {margin-bottom:24px;}
.activity .at {font-size:16px; font-weight:500; color:var(--ink); margin-bottom:15px; display:flex; align-items:center; gap:7px; border-left:3px solid #4db7f3; padding-left:10px;}
.activity .meta {background:var(--bg-soft); border-radius:9px; padding:12px 15px; margin-bottom:12px;}
.activity .meta div {font-size:15px; color:var(--ink); line-height:1.7;}
.activity .meta b {color: #2ca5ea; font-weight:600; margin-right:8px;}
/* ══════════ 비전-목표-전략 플로우 (도시조성) ══════════ */
.vgs {margin:30px 0 12px;}
.vgs-row {display:flex; align-items:center; gap:30px; margin-bottom:6px;}
.vgs-pill {flex:none; width:90px; text-align:center; background: var(--brand); color:#fff; font-weight:600; font-size:16px; border-radius:20px; padding:5px 0;}
.vgs-vision {flex:1; text-align:center; font-size:22px; font-weight:700; color:var(--ink); line-height:1.5;}
.vgs-vision b {color: #0f8f98; font-size: 24px;}
.vgs-goal {flex:1; border:1px solid #d7ebed; border-radius:12px; overflow:hidden;}
.vgs-goal .gh {background: #4db7f3; color:#fff; text-align:center; font-size:20px; font-weight:700; padding:12px;}
.vgs-goal .gsub {background: #f0faff; text-align:center; font-size:18px; color: #2ca5ea; padding:7px; font-weight: 600;}
.vgs-goal .gcols {display:grid; grid-template-columns:1fr 1fr 1fr; background: #f0faff;}
.vgs-goal .gcols div {padding:15px 10px; text-align:center; font-size:16px; color:var(--ink); line-height:1.5; border-right:1px solid #d7ebed; border-top:1px solid #d7ebed; align-content: center;}
.vgs-goal .gcols div:last-child {border-right:none;}
.vgs-divider {border-top:2px solid  #4db7f3; border-bottom:2px solid  #4db7f3; text-align:center; font-size:18px; font-weight:800; color:var(--ink); padding:12px 0; margin:12px 0 18px;}
.vgs-cards {flex:1; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.vgs-card {border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.vc-head {background: #4db7f3; color:#fff; padding:10px 13px; display:flex; align-items:center;gap:9px;}
.vc-no {flex:none; background:#fff; color: #2ca5ea; font-size:14px; font-weight:700; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center;}
.vc-t {font-size:16px; font-weight:700; line-height:1.3;}
.vc-body {padding:12px 14px; font-size:14px; color:var(--ink); line-height:1.6;}
/* 소제목 (그룹 헤딩) */
.subhead {display:flex; align-items:center; gap:9px; margin:28px 0 14px; font-size:18px; font-weight:700; color:var(--ink);}
.subhead::before {content:""; width:5px; height:18px; background:var(--brand); border-radius:2px;}
.activity .atp {font-size:16px; font-weight:500; color:var(--brand); margin-bottom:15px; display:flex; align-items:center; gap:7px;}
.activity .atp i{font-size:17px}
.unit-badge {display:inline-block; font-size:13px; font-weight:700; border-radius:20px; padding:3px 11px; vertical-align:middle; margin-left:6px;}
.unit-badge.foundation {background:var(--brand); color:#fff;}
.unit-badge.private {background:#4db7f3; color:#fff;}
.gl-unit .op-card h4 {display:flex; align-items:center; flex-wrap:wrap; gap:2px;}
.gl-note {font-size:12px; color:var(--muted); margin-top:4px;}

/* ── 모바일 (≤640) ── */
@media only screen and (min-width:1px) and (max-width:640px){
/* 앵커탭 : 균등분할 해제 → 가로 스크롤 + 우측 페이드 힌트 */
.swhub-anchor  li {flex:0 0 auto;}
.swhub-anchor  a {padding:14px 16px; font-size:14px;}
.swhub-anchor::after {display:block;}
/* 본문 레이아웃 */
.field {flex-direction:column; gap:6px;}
.field .k {width:84px;}
.photo-grid {grid-template-columns:1fr 1fr;}
.photo-grid.four {grid-template-columns:1fr 1fr;}
.photo-grid.side {grid-template-columns:1fr;}
.page-header h1 {font-size:26px;}
.pc-only { display:none; } 
.mo-only { display:block; }
table.data th, table.data td { padding:10px 10px; font-size:14px; }
/* AI 컴포넌트 : 세로 스택 */
.ai-flow {flex-direction:column; gap:10px;}
.ai-io {flex-direction:row; flex-wrap:wrap; justify-content:center; width:100%;}
.ai-plus {transform:rotate(90deg);}
.ai-core {width:100%;}
.ai-cta-body {flex-direction:column; text-align:center; gap:16px;}
.ai-cta-qr {margin:0 auto;}
.ai-cta-info {text-align:center;}
.ai-cta-line {justify-content:center;}
/* 다이어그램 */
.plb ul {width: 100%; margin: 20px 0 0 0;}
.plb li {width: 100%; padding: 0 10px; box-sizing: border-box; text-align: center; height: 40px; line-height: 40px; border-radius: 10px; font-size: 16px; color: #000;}
.plb li.bt {width: 100%; height: auto;}
.plb li.ar {background: none; padding: 5px 0 0 0; box-sizing: border-box; display: block; margin: 0 auto;}
.plb li br {display: none;}
.plb li img {width: 20px; height: 20px;}
.nm-kpi {grid-template-columns:1fr;}
.op-cards {grid-template-columns:1fr;}
.vgs-row {flex-direction:column; align-items:stretch; gap:10px; width: 100% !important; display: block;}
.vgs-goal .gh {font-size: 18px;}
.vgs-goal .gsub {font-size: 16px;}
.vgs-pill {display: block; width:100%!important; margin-bottom: 20px;}
.vgs-cards {display: block; width:100%!important; }
.vgs-goal .gcols {display: block; width:100%!important; }
.vgs-goal .gcols div {border-right:none;}
.vgs-goal .gcols div br {display: none;}

.report-grid{ grid-template-columns:1fr; }
.report-block{ padding:20px 18px; }
.report-block__desc{ margin-left:0; }
}

/* ── 태블릿 (640~1200) ── */
@media only screen and (min-width:640px) and (max-width:1200px){
/* 앵커탭 : 균등분할 유지, 폰트·여백 축소 */
.swhub-anchor li{flex:0 0 auto !important;}      /* 균등분할 해제 → 내용 폭 */
  .swhub-anchor ul{overflow-x:auto !important;}     /* 가로 스크롤 */
  .swhub-anchor::after{display:block !important;}   /* 우측 페이드 (공백 없음!) */
  .swhub-anchor a{padding:14px 16px; font-size:14px;}
/* 본문 레이아웃 */
.photo-grid {grid-template-columns:repeat(3,1fr);}
.strategy-grid {grid-template-columns:1fr 1fr;}
/* AI 컴포넌트 : 가로 유지 (간격 축소) */
.ai-flow {flex-direction:row; gap:10px;}
.ai-io {flex-direction:column;}
.ai-core {flex:1;}
.ai-core-d {font-size:12px;}
.ai-cta-body {flex-direction:row; text-align:left;}
.op-cards {grid-template-columns:1fr 1fr!important;}
}

/* ── 데스크톱 (≥1200) ── */
@media only screen and (min-width:1200px){
/* 개념도 + CTA 카드 : 좌우 한 줄 배치 */
.ai-service{flex-direction:row;align-items:center;gap:40px}
.ai-concept{flex:1.2;display:flex;flex-direction:column;justify-content:center}
.ai-concept .ai-flow-tag{margin-top:0}
.ai-concept .ai-flow{margin-bottom:0}
.ai-cta{flex:1;max-width:none;margin-top:0}
/* 개념도 : 세로 스택 (입력 행 → 플랫폼 → 출력 행) */
.ai-flow{flex-direction:column;align-items:center;gap:6px}
.ai-io{flex-direction:row;justify-content:center;flex-wrap:wrap}
.ai-core{width:100%}
.ai-cta-body{flex-direction:row;text-align:left}
}