@charset "utf-8";
/* gasys 디자인 시스템 기반 특구종합안내 2개 서브 페이지 전용 스타일 */

/* sub-visual 없이 sub-container가 최상위 콘텐츠일 때 고정 헤더 오프셋 */
.sub-container--lnb {
  --gasys-designer-sub-gap: 5rem;
  padding-top: calc(var(--gasys-fixed-header-bottom, 130px) + var(--gasys-designer-sub-gap));
}

/* ── 디자이너 기준 색상 보정 ── */
.sub_header .gnb__link[aria-current="page"] { color: inherit; }
.modal .memo-modal__submit.button--primary {
  background-color: #063A74; border-color: #063A74; color: #fff;
}

/* ── 2단 레이아웃 (LNB + 본문) ── */
.sub-layout { display: flex; gap: 5rem; }
.sub-layout .lnb { display: flex; flex-direction: column; width: 23rem; }
.sub-layout .sub-body { flex: 1 1; min-width: 0; }

/* ── LNB ── */
.lnb .lnb__title {
  display: flex; padding: 32px 0; justify-content: center; align-items: center;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(265deg, #DEE4F8 11.31%, #D3F3EE 88.99%);
  text-align: center; color: var(--color-text-bolder, #191919);
}
.lnb__list { display: flex; flex-direction: column; }
.lnb-item .lnb-item__link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 10px; gap: 10px; transition: all 0.3s;
  border-bottom: 1px solid var(--color-border-gray-light, #D7D7D7);
}
.lnb-item .lnb-item__link .lnb-item__text { color: var(--color-text-basic, #363636); }
.lnb-item .lnb-item__link:after {
  content: ''; width: 32px; height: 32px; aspect-ratio: 1/1;
  background: url(../images/sub/ico_arrow-right.svg) no-repeat center;
  transition: all 0.3s; opacity: 0;
}
.lnb-item--selected .lnb-item__link .lnb-item__text { color: #1C589C; font-weight: 700; }
.lnb-item .lnb-item__link:hover:after,
.lnb-item--selected .lnb-item__link:after { opacity: 1; }

/* ── 브레드크럼 (.sub-layout 스코프 — 전역 .breadcrumb와 충돌 방지) ── */
.sub-layout .breadcrumb { margin: 2.4rem 0 2rem 0; color: inherit; }
.sub-layout .breadcrumb__list { display: flex; gap: .2rem; }
.sub-layout .breadcrumb li::before { content: none; }
.sub-layout .breadcrumb__link { display: flex; gap: 1.2rem; }
.sub-layout .breadcrumb__link:after {
  content: ''; width: 20px; height: 20px;
  background: url(../images/sub/ico_arrow-right.svg) no-repeat center; background-size: 20px;
}
.sub-layout .breadcrumb__item:last-child .breadcrumb__link:after { display: none; }
.sub-layout .breadcrumb__item--home .breadcrumb__link::before {
  content: ''; width: 2.4rem; height: 2.4rem;
  background: url(../images/sub/ico_home.svg) no-repeat center;
}

/* ── 서브 메인 콘텐츠 ── */
.sub-content .sub-content__title {
  display: flex; padding-bottom: 20px; align-items: center; gap: 10px; align-self: stretch;
  border-bottom: 1px solid var(--color-border-gray-light, #D7D7D7); margin-bottom: 5rem;
}

/* ================================================
   3대 특구 한눈에 보기
================================================ */

/* ── 공통 유틸 ── */
.txt-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-text-point, #256ef4); white-space: nowrap;
  text-decoration: none;
}
.txt-btn img { width: 24px; height: 24px; flex-shrink: 0; }

.text-strong { font-weight: 700; }

.stit-badge {
  display: inline-flex; align-items: center;
  padding: 0 4px; border-radius: 4px; white-space: nowrap;
}
.stit-badge--danger  { background: var(--color-surface-danger-subtler, #ffecec); color: #ac1111; }
.stit-badge--warning { background: var(--color-surface-warning-subtler, #fff0dc); color: #a96e09; }

.tit-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px; border-radius: 4px; white-space: nowrap;
}
.tit-badge--danger { background: var(--color-surface-danger-subtler, #ffecec); color: #ac1111; }

/* ── badge (component.css 신규 증분) ── */
.badge { display: inline-flex; align-items: center; justify-content: center; }
.badge--industry {
  background-color: #868687; padding: .2rem .8rem; border-radius: .6rem;
  font-size: 1.4rem; font-weight: 500; color: #fff;
  letter-spacing: -0.04em; white-space: nowrap;
}

/* ── infobox ── */
.infobox { display: flex; flex-direction: column; gap: 32px; margin-bottom: 50px; }
.infobox__law { display: flex; flex-direction: column; gap: 10px; }
.infobox__law-label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 12px; border-radius: 4px;
  background: var(--color-surface-gray-dark, #eef2f7);
  font-size: 1.5rem; font-weight: 500; color: var(--color-text-basic, #363636);
  letter-spacing: -0.4px; line-height: 1.5; white-space: nowrap; align-self: flex-start;
}
.infobox__law-row { display: flex; align-items: center; gap: 20px; }
.infobox__law-name { white-space: nowrap; flex-shrink: 0; }
.infobox__law-name em { font-style: normal; color: #1c589c; }
.infobox__law-name a { color: inherit; text-decoration: none; }
.infobox__law-name a:hover { text-decoration: underline; }
.infobox__law-name span { color: var(--color-text-basic, #363636); }
.infobox__notice {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--color-surface-primary-subtler, #f5f9ff);
  border-radius: 16px; padding: 32px; min-height: 217px;
}
/* 설명 문구만 있고 title·button이 없는 사용처(정보마당 목록 안내)는 217px 최소높이가 불필요해 여백만 남는다 */
.infobox__notice--compact { min-height: 0; padding: 24px 32px; }
.infobox__notice-title { color: var(--color-text-basic, #363636); }
.infobox__notice-desc { color: var(--color-text-basic, #363636); }
.infobox__notice-btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-end;
  background: var(--color-gray-0, #fff); border: 1px solid var(--color-border-gray, #b6b7b7);
  border-radius: 12px; padding: 8px 20px; cursor: pointer; font-family: inherit;
  font-size: 1.5rem; font-weight: 700; color: var(--color-text-basic, #363636);
  letter-spacing: -0.4px; line-height: 1.5; white-space: nowrap;
}
.infobox__notice-btn:hover { background: #f4f5f6; }
.infobox__notice-btn img { width: 24px; height: 24px; }

/* ── 콘텐츠 영역 ── */
.conts-area { display: flex; flex-direction: column; gap: 50px; }
.g-conts-area { display: flex; flex-direction: column; gap: 20px; }
.sec-tit { display: flex; align-items: center; gap: 10px; }
.sec-tit__heading {
  font-size: 2.4rem; font-weight: 700; color: var(--color-gray-100, #000);
  letter-spacing: -0.8px; line-height: 1.4;
}

/* ── 3대 특구 개요 카드 (.sub-layout 스코프 — ft/gt/lt zone-overview와 충돌 방지) ── */
.sub-layout .zone-overview { display: flex; gap: 24px; }
.sub-layout .zone-card {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 18px;
  min-height: 311px; padding: 32px; border-radius: 20px; transition: none;
}
.sub-layout .zone-card:hover,
.sub-layout .zone-card:focus,
.sub-layout .zone-card:active { transform: none; box-shadow: none; }
.sub-layout .zone-card::before,
.sub-layout .zone-card::after { content: none; display: none; }
.sub-layout .zone-card--free   { background: var(--color-action-secondary-hover, #6b96c7); }
.sub-layout .zone-card--global { background: var(--color-action-secondary, #346fb2); }
.sub-layout .zone-card--local  { background: var(--color-surface-secondary-darker, #063a74); }
.sub-layout .zone-card__icon { width: 44px; height: 44px; flex-shrink: 0; }
.sub-layout .zone-card__icon img { width: 100%; height: 100%; }
.sub-layout .zone-card__info { display: flex; flex-direction: column; gap: 4px; }
.sub-layout .zone-card__name {
  font-size: 2.1rem; font-weight: 700; color: var(--color-text-inverse-static, #fff);
  letter-spacing: -0.4px; line-height: 1.5;
}
.sub-layout .zone-card__tag {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  padding: 2px 12px; border-radius: 4px;
  background: var(--color-surface-primary-subtler, #f5f9ff);
  font-size: 1.5rem; font-weight: 700; color: #1c589c;
  letter-spacing: -0.4px; line-height: 1.5; white-space: nowrap;
}
.sub-layout .zone-card__desc { color: var(--color-text-inverse-static, #fff); }

/* ── 비교 테이블 ── */
.compare-table-wrap { border-radius: 0; overflow: hidden; }
.compare-table { width: 100%; border-collapse: collapse; font-family: inherit; }
.compare-table thead { border-bottom: 1px solid var(--color-gray-100, #000); }
.compare-table thead tr { background: var(--color-surface-secondary-subtler, #ecf2fe); }
.compare-table thead th {
  height: 58px; padding: 16px; font-size: 1.7rem; font-weight: 700; color: var(--color-gray-100, #000);
  letter-spacing: -0.4px; line-height: 1.5; text-align: center;
  border-right: 1px solid var(--color-border-gray-light, #d7d7d7);
}
.compare-table thead th:first-child { width: 170px; }
.compare-table thead th:last-child  { border-right: none; }
.compare-table tr { border-bottom: 1px solid var(--color-border-gray, #B6B7B7); }
.compare-table td {
  padding: 0; vertical-align: middle;
  border-right: 1px solid var(--color-border-gray-lighter, #e7e7e7);
  font-size: 1.7rem; letter-spacing: -0.4px; line-height: 1.5;
  color: var(--color-text-basic, #505151); text-align: center;
  font-weight: 500;
}
.compare-table td:last-child { border-right: none; }
.compare-table td.label-cell { width: 170px; background: var(--color-surface-gray, #f9f9f9); padding: 16px; border-right: none; }
.compare-table td.label-cell > .label-inner {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px;
}
.compare-table td.label-cell .label-text { font-weight: 500; color: var(--color-gray-100, #000); white-space: nowrap; }
.compare-table td.data-cell { padding: 16px; text-align: center; vertical-align: middle; }
.compare-table td.data-cell.success-bg { background: var(--color-surface-success-subtler, #f4fbf5); }
.compare-table td.data-cell--law { text-align: left; border-right: none; }
.compare-table td.data-cell--finance { text-align: left; vertical-align: top; padding: 16px; }
.compare-table tbody tr:nth-child(1) { height: 84px; }
.compare-table tbody tr:nth-child(2),
.compare-table tbody tr:nth-child(3),
.compare-table tbody tr:nth-child(4),
.compare-table tbody tr:nth-child(5),
.compare-table tbody tr:nth-child(6),
.compare-table tbody tr:nth-child(8) { height: 81px; }
.compare-table tbody tr:nth-child(7) { height: 124px; }
.compare-table tbody tr:nth-child(9) { height: 84px; }

.cell-main { display: block; font-weight: 500; color: var(--color-text-basic, #363636); white-space: nowrap; }
.cell-main--bold   { font-weight: 700; }
.cell-main--blue   { color: #346FB2; }
.cell-main--green  { display: block; color: #0a8d1d; font-weight: 700; }
.cell-main--subtle { display: block; color: var(--color-text-subtle, #6b6c6c); font-weight: 700; }
.cell-main--wrap   { white-space: normal; text-align: center; }
.cell-sub { display: block; color: var(--color-text-subtle, #6b6c6c); white-space: nowrap; }
.cell-sub--spaced { margin-top: 4px; }
.cell-link {
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 700; color: var(--color-text-point, #256ef4); white-space: nowrap;
  background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit;
  letter-spacing: inherit; line-height: inherit;
}
.cell-link img { width: 24px; height: 24px; flex-shrink: 0; }

.law-row { display: flex; flex-direction: column; gap: 0; align-items: center; }
.law-row__main { display: flex; align-items: center; gap: 10px; }
.law-row__name em  { font-style: normal; color: #1c589c; }
.law-row__name span { color: var(--color-text-basic, #363636); }
.law-row__sub  { color: var(--color-text-basic, #363636); white-space: nowrap; }

.finance-list { list-style: none; padding: 0; margin: 0; text-align: left; color: var(--color-text-basic, #363636); }
.finance-list li + li { margin-top: 2px; }
.finance-list strong { font-weight: 700; }
.finance-list .c-blue { color: #346fb2; }

/* ── 특구 지정 사례 ── */
.case-list { display: flex; flex-direction: column; gap: 20px; }
.case-item {
  display: flex; gap: 32px; align-items: stretch;
  min-height: 186px; padding: 24px;
  border: 1px solid var(--color-border-gray, #b6b7b7); border-radius: 20px;
}
.case-item__meta { display: flex; flex-direction: column; gap: 8px; width: 290px; flex-shrink: 0; }
.case-item__badge {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  padding: 8px 20px; border-radius: 1000px;
  font-size: 1.5rem; font-weight: 500; color: #fff;
  letter-spacing: -0.4px; line-height: 1.5; white-space: nowrap;
}
.case-item__badge--free   { background: #6b96c7; }
.case-item__badge--global { background: #346fb2; }
.case-item__badge--local  { background: #063a74; }
.case-item__title { color: var(--color-text-basic, #363636); }
.case-item__divider { width: 1px; background: var(--color-border-gray-light, #d7d7d7); flex-shrink: 0; align-self: stretch; }
.case-item__body { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.case-item__body-title { color: var(--color-text-basic, #363636); white-space: nowrap; }
.dot-list { margin: 0; padding-left: 2.2rem; list-style: disc outside; color: var(--color-text-subtle, #6b6c6c); }
.dot-list li + li { margin-top: 0; }

/* ================================================
   특구 지정 현황 (통합, ti_st_010l.jsp 전용)
   지도(.ti-ov-map 등)는 WEB-INF/jsp/include/ti_st_map.jsp + resources/home/js/ti-map.js(window.TiMap)가
   그리는 전용 지도다. ft/gt/lt 지정현황이 쓰는 korea_map.jsp/korea-map.js(.mr/.ml)와는 완전히 분리돼 있어
   이 블록을 고쳐도 그 화면들에는 영향이 없다.
================================================ */

/* ── 좌(지도)/우(카운트 1x4) 2분할, 지도가 더 넓은 비율 ── */
.ti-ov { display: grid; grid-template-columns: 3fr 2fr; gap: 2.4rem; margin-bottom: 5.6rem; }

.ti-ov-map-card {
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
  padding: 3.2rem 2rem; border-radius: 2rem; border: 1px solid var(--color-border-gray-lighter, #E7E7E7);
  background: #fff;
}
.ti-ov-map { width: 100%; max-height: 46rem; }
.ti-ov-map .tmr { fill: #A7C4E8; stroke: #fff; stroke-width: 1.5; cursor: pointer; transition: fill .2s, stroke .2s; }
.ti-ov-map .tmr.z1, .ti-ov-map .tmr.z2 { fill: #8FB6E0; }
.ti-ov-map .tmr.z3, .ti-ov-map .tmr.z4 { fill: #4F7FBF; }
.ti-ov-map .tmr.z5 { fill: #1F4E96; }
.ti-ov-map .tmr.sel { fill: #FF8A3D; stroke: #B85C0F; stroke-width: 3; }
.ti-ov-map .tml { fill: #111; font-size: 1.1rem; font-weight: 700; text-anchor: middle; pointer-events: none; }
.ti-ov-map .tml.sm { font-size: .9rem; }

.ti-ov-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ti-ov-legend span { display: inline-flex; align-items: center; gap: .4rem; color: #6b6c6c; font-size: 1.2rem; font-weight: 500; line-height: 1.5; }
.ti-ov-legend__chip { width: 1rem; height: 1rem; border-radius: .2rem; }
.ti-ov-legend__chip--low      { background: #8FB6E0; }
.ti-ov-legend__chip--mid      { background: #4F7FBF; }
.ti-ov-legend__chip--high     { background: #1F4E96; }
.ti-ov-legend__chip--selected { background: #FF8A3D; border: 2px solid #B85C0F; }

.ti-ov-side { display: flex; flex-direction: column; gap: 1.2rem; }
.ti-ov-side__label { padding: 0 .4rem; }
.ti-ov-side__label strong { color: var(--color-text-bolder, #191919); font-size: 1.9rem; }
.ti-ov-side__label span { margin-left: .6rem; color: #868687; }
.ti-ov-counts { display: flex; flex: 1; flex-direction: column; gap: .8rem; }
/* 특구 건수 카드 (탭 연동 버튼) */
.ti-ov-count-card {
  display: flex; flex: 1; width: 100%; min-height: 8.4rem; align-items: center; justify-content: space-between;
  padding: 0 2.4rem; border: 1px solid var(--color-border-gray-lighter, #E7E7E7); border-radius: 1.6rem;
  background: #fff; color: var(--color-text-basic, #363636);
  font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s, background-color .15s;
}
.ti-ov-count-card__label { font-weight: 700; }
.ti-ov-count-card__number {
  display: inline-flex; align-items: baseline; gap: .4rem;
  color: var(--color-action-primary, #0b50d0);
  font-size: 3.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.8px;
}
.ti-ov-count-card__number span { font-size: 1.5rem; font-weight: 500; }
.ti-ov-count-card--total .ti-ov-count-card__number  { color: var(--color-gray-100, #000); }
.ti-ov-count-card--global .ti-ov-count-card__number { color: var(--color-text-point, #256ef4); }
.ti-ov-count-card--local .ti-ov-count-card__number  { color: var(--color-text-secondary, #1c589c); }
/* 건수 카드 선택 상태 */
.ti-ov-count-card.is-active {
  background: var(--color-surface-primary-subtle, #d8e5fd);
}

/* ── 최근 지정 특구 / 규제자유 / 글로벌혁신 / 지역특화 탭 + 표 ── */
.ti-tabs { display: flex; gap: .4rem; }
.ti-tab {
  display: flex; flex: 1 1; min-height: 5rem;
  align-items: center; justify-content: center;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--color-border-gray-light, #D7D7D7); border-bottom: 0;
  background: #F9F9F9; color: var(--color-text-basic, #363636); cursor: pointer;
}
.ti-tab.is-active { background: #346FB2; color: #fff; border-color: #346FB2; }
.ti-tab-panel {
  padding: 2.4rem; border-radius: 0 0 24px 24px;
  border: 1px solid var(--color-border-gray, #B6B7B7); border-top: 0;
}
.ti-tab-panel[hidden] { display: none; }
.ti-table-empty { padding: 6rem 0; text-align: center; color: #868687; }
/* 특구 지정 현황 목록 칸 폭 */
.sub-layout .ti-table { min-width: 72rem; }
.sub-layout .ti-table .ti-col-ztype,
.sub-layout .ti-table .ti-col-round,
.sub-layout .ti-table .ti-col-region,
.sub-layout .ti-table .ti-col-type,
.sub-layout .ti-table .ti-col-period { padding: 0 .8rem; white-space: nowrap; }
.sub-layout .ti-table .ti-col-ztype  { width: 14.8rem; }
.sub-layout .ti-table .ti-col-round  { width: 5.8rem; }
.sub-layout .ti-table .ti-col-region { width: 13.6rem; }
.sub-layout .ti-table .ti-col-type   { width: 8.8rem; }
.sub-layout .ti-table .ti-col-period { width: 11.8rem; line-height: 1.5; }

.status-latest { margin-bottom: 5rem; }
.status-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.status-table { min-width: 88rem; width: 100%; border-collapse: collapse; text-align: center; }
.status-table caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
}
.status-table thead { background: var(--color-surface-primary-subtler, #f5f9ff); }
.status-table th {
  height: 4.6rem; color: var(--color-text-basic, #363636);
  font-size: 1.5rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.4px;
}
.status-table td {
  height: 5.6rem; border-bottom: 1px solid var(--color-border-gray-light, #d7d7d7);
  color: var(--color-text-basic, #505151);
}
.status-table__name { font-weight: 700; }
/* 행 클릭 상세 페이지(/ti/tist010d.do)로 가는 특구명 링크. */
.status-table__name-link {
  font-weight: 700; color: var(--color-action-primary, #0b50d0); text-decoration: none;
}
.status-table__name-link:hover, .status-table__name-link:focus-visible { text-decoration: underline; }
/* 특구유형 배지 색은 통합검색(ti_sc_010l.jsp)의 존별 배지(.zone-result .badge--zone-free 등, main.css)와
   같은 팔레트(규제자유 #0082CA/글로벌혁신 #0050A0/지역특화 #B45309)를 쓴다. 다만 여기는 표 안에 놓이는
   배지라 그 배지처럼 배경을 채우지 않고 테두리+글자색만 그 색으로 맞춘다. */
.status-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 11rem; min-height: 2.5rem; padding: .2rem 1rem;
  border: 1px solid #0082CA; border-radius: .6rem; color: #0082CA;
}
.status-badge--global { border-color: #0050A0; color: #0050A0; }
.status-badge--local  { border-color: #B45309; color: #B45309; }

/* ================================================================
   정보마당 게시판 컴포넌트
   근거: 정보마당_5개화면_디자인스타일_업데이트_상세계획.md §4·§5·§6 Phase2
   ● 가이드 직접근거 / ◐ 프로젝트 기존 패턴 준용 / ○ 가이드 미정의(토큰 파생)
================================================================ */

/* ── 버튼 (가이드 03 버튼 :369-526, ●) ── */
.sub-layout .button { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.sub-layout .button--medium { height: 4.8rem; padding: 0 1.6rem; font-size: 1.8rem; font-weight: 500; border-radius: 1.2rem; }
.sub-layout .button--small  { height: 4rem;   padding: 0 1.2rem; font-size: 1.7rem; font-weight: 500; border-radius: 1.2rem; }
.sub-layout .button--primary { background: var(--rfz-color-primary-50, #256ef4); color: #fff; }
.sub-layout .button--primary:hover  { background: var(--rfz-color-action-primary, #0b50d0); }
.sub-layout .button--primary:active { background: var(--rfz-color-action-primary-hover, #083891); }
.sub-layout .button--primary:disabled { background: #d7d7d7; color: #868687; cursor: not-allowed; }
.sub-layout .button--tertiary { background: #f9f9f9; color: #363636; border-radius: 100rem; }
.sub-layout .button--tertiary:hover { background: #e7e7e7; }

/* ── 스몰탭 (가이드 06 스몰탭 :687-722, ●) — 정렬/탭/FAQ 분류에 공용 사용(Q3) ── */
.sub-layout .small-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 4rem; padding: 0 1.6rem; border-radius: 100rem; border: 0;
  background: #fff; box-shadow: inset 0 0 0 1px #d7d7d7;
  color: #363636; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.4px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.sub-layout .small-tab:hover { background: #6b96c7; box-shadow: none; color: #fff; }
.sub-layout .small-tab.is-active,
.sub-layout .small-tab[aria-selected="true"],
.sub-layout .small-tab[aria-pressed="true"] { background: #346fb2; box-shadow: none; color: #fff; }
.sub-layout .small-tab span { margin-left: .4rem; }
.sub-layout .board-tabs { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 2.4rem; }

/* ── 셀렉트박스 (가이드 04 셀렉트박스 :531-603, ●, medium 44px 고정) ── */
.sub-layout .form-select { position: relative; height: 4.4rem; background: #fff; border-radius: .6rem; box-shadow: inset 0 0 0 1px #b6b7b7; }
.sub-layout .form-select:focus-within { box-shadow: inset 0 0 0 1px #242424; }
.sub-layout .form-select select {
  width: 100%; height: 100%; padding: 0 4rem 0 1.6rem; border: 0; background: transparent;
  appearance: none; -webkit-appearance: none; font-family: inherit;
  font-size: 1.7rem; font-weight: 500; color: #505151; letter-spacing: -0.4px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23505151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.2rem center;
}
.sub-layout .form-select select:focus { outline: none; }

/* ── 검색 폼 (가이드 05 검색 :608-682 원리 준용 + 다중 필드 파생, ○, §3.3) ── */
.sub-layout .board-search { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; padding: 2rem; border-radius: 1.2rem; background: var(--color-surface-gray, #f9f9f9); }
.sub-layout .board-search__label { color: var(--color-text-basic, #363636); flex-shrink: 0; font-size: 1.5rem; font-weight: 700; }
.sub-layout .board-search input[type="date"],
.sub-layout .board-search input[type="text"] {
  height: 4.4rem; padding: 0 1.6rem; border: 0; border-radius: .6rem;
  background: #fff; box-shadow: inset 0 0 0 1px #b6b7b7;
  font-family: inherit; font-size: 1.7rem; font-weight: 500; color: #505151; letter-spacing: -0.4px;
}
.sub-layout .board-search input[type="date"] { width: 15rem; }
.sub-layout .board-search input[type="text"] { flex: 1 1 22rem; min-width: 18rem; }
.sub-layout .board-search input:focus { outline: none; box-shadow: inset 0 0 0 1px #242424; }
.sub-layout .board-search__sep { color: #868687; }
.sub-layout .board-search .form-select { width: 13rem; flex-shrink: 0; }
.sub-layout .board-search__actions { display: flex; gap: .8rem; margin-left: auto; }
.sub-layout .board-search__actions .button { height: 4.4rem; }

/* ── 총건수 + 정렬 유틸 ── */
.sub-layout .board-util { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin: 2.4rem 0 1.6rem; }
.sub-layout .board-util__total { color: var(--color-text-basic, #363636); font-size: 1.5rem; }
.sub-layout .board-util__total strong { color: var(--rfz-color-action-primary, #0b50d0); }
.sub-layout .board-util__sort { display: flex; gap: .8rem; }

/* ── 목록 테이블 (가이드 미정의 → status-table 토큰 준용, ○, §5-B) ── */
.sub-layout .board-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1.2rem; border: 1px solid var(--color-border-gray-light, #d7d7d7); }
.sub-layout .board-table { width: 100%; min-width: 78rem; border-collapse: collapse; text-align: center; }
.sub-layout .board-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.sub-layout .board-table thead { background: var(--color-surface-primary-subtler, #f5f9ff); }
.sub-layout .board-table th { height: 5rem; color: var(--color-text-basic, #363636); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.4px; }
.sub-layout .board-table td { height: 6rem; padding: 0 1.2rem; border-bottom: 1px solid var(--color-border-gray-light, #d7d7d7); color: var(--color-text-basic, #505151); font-size: 1.5rem; letter-spacing: -0.4px; }
.sub-layout .board-table tr:last-child td { border-bottom: 0; }
.sub-layout .board-table tr.is-pinned { background: var(--color-surface-primary-subtler, #f5f9ff); }
.sub-layout .board-table__title { text-align: left; }
.sub-layout .board-table__title-cell { display: inline-flex; align-items: center; gap: .8rem; max-width: 100%; }
.sub-layout .board-table__link { color: inherit; text-decoration: none; }
.sub-layout .board-table__link:hover { color: var(--rfz-color-action-primary, #0b50d0); text-decoration: underline; text-underline-offset: .2rem; }
.sub-layout .board-table__attach { color: #868687; }
.sub-layout .board-table__attach--yes { color: var(--rfz-color-action-primary, #0b50d0); font-weight: 700; }
/* 메뉴판식 규제특례 목록 열 폭 고정 */
.sub-layout .board-table--lw { table-layout: fixed; }
.sub-layout .board-table--lw .lw-col-no { width: 6rem; }
.sub-layout .board-table--lw .lw-col-ty { width: 10rem; }
.sub-layout .board-table--lw .lw-col-artcl { width: 13rem; }
.sub-layout .board-table--lw .lw-col-orig { width: 20%; }
.sub-layout .board-table--lw .lw-col-dt { width: 11rem; }
.sub-layout .board-table--lw .lw-col-cnt { width: 11rem; }
.sub-layout .board-table--lw td { padding-top: 1rem; padding-bottom: 1rem; word-break: keep-all; overflow-wrap: anywhere; }
.sub-layout .board-empty { padding: 3rem 0; color: #868687; }

/* ── 페이지네이션 (가이드 미정의 → 토큰 파생, ○, §5-B) ── */
.sub-layout .board-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; margin-top: 2.4rem; }
.sub-layout .board-pagination .page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.6rem; height: 3.6rem; padding: 0 .4rem; border-radius: .6rem;
  border: 0; background: transparent; color: var(--color-text-basic, #505151);
  font: inherit; font-size: 1.5rem; font-weight: 500; cursor: pointer; text-decoration: none;
}
.sub-layout .board-pagination .page.is-current { background: var(--rfz-color-primary-50, #256ef4); color: #fff; font-weight: 700; }
.sub-layout .board-pagination .page.is-disabled { opacity: .4; cursor: default; }

/* ── 배지 (가이드 01 System 컬러 파생, ○ — 목록용 배지는 가이드에 스펙 없음) ── */
.sub-layout .badge-system { display: inline-flex; align-items: center; justify-content: center; padding: .2rem .8rem; border-radius: .6rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.4px; white-space: nowrap; }
.sub-layout .badge-system--danger  { background: var(--color-surface-danger-subtler, #ffecec); color: #ac1111; }
.sub-layout .badge-system--info    { background: var(--color-surface-primary-subtler, #f5f9ff); color: #127cc7; }
.sub-layout .badge-system--gray    { background: var(--color-surface-gray, #f9f9f9); color: #6b6c6c; }
.sub-layout .badge-system--success { background: var(--color-surface-success-subtler, #f4fbf5); color: #08a21f; }
.sub-layout .badge-system--warning { background: var(--color-surface-warning-subtler, #fff0dc); color: #a96e09; }
.sub-layout .badge-system--pin     { background: var(--color-surface-secondary-subtler, #ecf2fe); color: #1c589c; }
.sub-layout .badge-new {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 .4rem; border-radius: 100rem;
  background: #c60f0f; color: #fff; font-size: 1.1rem; font-weight: 700;
}

/* 메뉴판식 규제특례 : 적용 특구 수 배지 */
.sub-layout .zone-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem; border-radius: 100rem;
  background: var(--color-surface-primary-subtler, #f5f9ff); color: var(--rfz-color-action-primary, #0b50d0);
  font-size: 1.3rem; font-weight: 700;
}

/* ── 날짜 배지 (가이드 02 배지 :347-364, ●) ── */
.sub-layout .date-badge { display: inline-flex; align-items: center; padding: .6rem 1rem; border-radius: .8rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.56px; white-space: nowrap; }
.sub-layout .date-badge--open-day  { background: #f5f9ff; color: #3da4ed; }
.sub-layout .date-badge--close-day { background: #fff0dc; color: #d68b0b; }

/* ── 언론 카드 (case-item 테두리/radius 언어 준용, ◐) ── */
.sub-layout .board-card-list { display: flex; flex-direction: column; gap: 1.6rem; }
.sub-layout .board-card { display: flex; gap: 2rem; align-items: flex-start; padding: 2.4rem; border: 1px solid var(--color-border-gray-light, #d7d7d7); border-radius: 1.6rem; transition: border-color .15s; }
.sub-layout .board-card:hover { border-color: var(--rfz-color-primary-50, #256ef4); }
.sub-layout .board-card__date { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 11rem; flex-shrink: 0; text-align: center; color: var(--color-text-subtle, #6b6c6c); font-size: 1.3rem; }
.sub-layout .board-card__date strong { display: block; color: var(--color-text-bolder, #191919); font-size: 1.8rem; }
.sub-layout .board-card__date--new strong { color: var(--rfz-color-primary-50, #256ef4); }
.sub-layout .board-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8rem; }
.sub-layout .board-card__title { display: flex; align-items: center; gap: .8rem; color: var(--color-text-bolder, #191919); font-size: 1.8rem; font-weight: 700; }
.sub-layout .board-card:hover .board-card__title { color: var(--rfz-color-primary-50, #256ef4); text-decoration: underline; text-underline-offset: .2rem; }
.sub-layout .board-card__excerpt { color: var(--color-text-subtle, #6b6c6c); font-size: 1.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sub-layout .board-card__meta { display: flex; align-items: center; gap: 1.6rem; color: #868687; font-size: 1.3rem; }
.sub-layout .board-card__meta .ico-attach { display: inline-block; width: 1.6rem; height: 1.6rem; background: url(../images/sub/ico_attach.svg) no-repeat center; background-size: 1.4rem; vertical-align: middle; }

/* ── FAQ 아코디언 (가이드 미정의 → 토큰 파생, ○, 화살표는 LNB 접힘과 동일 아이콘 재사용) ── */
.sub-layout .board-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--color-border-gray, #b6b7b7); }
.sub-layout .board-accordion__item { border-bottom: 1px solid var(--color-border-gray-light, #d7d7d7); }
.sub-layout .board-accordion__item[hidden] { display: none; }
.sub-layout .board-accordion__q { margin: 0; }
.sub-layout .board-accordion__q button { display: flex; align-items: center; width: 100%; gap: 1.6rem; padding: 2rem; border: 0; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sub-layout .board-accordion__item.is-open .board-accordion__q button { background: var(--color-surface-primary-subtler, #f5f9ff); }
.sub-layout .board-accordion__mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3.2rem; height: 3.2rem; border-radius: 100rem; background: var(--color-surface-secondary-subtler, #ecf2fe); color: var(--rfz-color-secondary-60, #1c589c); font-weight: 700; }
.sub-layout .board-accordion__title { flex: 1; color: var(--color-text-basic, #363636); font-size: 1.6rem; font-weight: 500; }
.sub-layout .board-accordion__arrow { width: 2rem; height: 2rem; flex-shrink: 0; background: url(../images/sub/ico_arrow-right.svg) no-repeat center / 2rem; transform: rotate(90deg); transition: transform .2s; }
.sub-layout .board-accordion__item.is-open .board-accordion__arrow { transform: rotate(-90deg); }
.sub-layout .board-accordion__a { padding: 0 2rem 2rem 6.8rem; background: var(--color-surface-primary-subtler, #f5f9ff); color: var(--color-text-basic, #363636); font-size: 1.5rem; line-height: 1.8; }
.sub-layout .board-accordion__a[hidden] { display: none; }
.sub-layout .board-accordion__a p { margin: 0; }
.sub-layout .board-accordion__a p + p { margin-top: 1.2rem; }
.sub-layout .board-accordion__a strong { color: var(--rfz-color-secondary-60, #1c589c); }
.sub-layout .board-accordion__a a { color: var(--rfz-color-primary-50, #256ef4); text-decoration: underline; text-underline-offset: .2rem; }
.sub-layout .board-accordion__a .rfz-text-subtle { display: block; font-size: 1.3rem; }

/* ── 상세 뷰 (가이드 미정의 → 목록 컴포넌트와 시각 언어 통일, ○) ── */
.sub-layout .board-view { border: 1px solid var(--color-border-gray-light, #d7d7d7); border-top: 3px solid var(--rfz-color-primary-50, #256ef4); border-radius: 1.2rem; overflow: hidden; }
.sub-layout .board-view__head { padding: 3.2rem 2.8rem 2.4rem; border-bottom: 1px solid var(--color-border-gray-light, #d7d7d7); }
.sub-layout .board-view__badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.sub-layout .board-view__badges:empty { display: none; }
.sub-layout .board-view__title { margin: 0; color: var(--color-text-bolder, #191919); font-size: 2.2rem; font-weight: 700; line-height: 1.45; letter-spacing: -0.4px; word-break: break-word; }
.sub-layout .board-view__meta { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sub-layout .board-view__meta li { display: inline-flex; align-items: center; gap: .6rem; color: #868687; font-size: 1.4rem; }
.sub-layout .board-view__meta li strong { color: var(--color-text-basic, #363636); font-weight: 700; }
.sub-layout .board-view__body { padding: 3.2rem 2.8rem; border-bottom: 1px solid var(--color-border-gray-light, #d7d7d7); color: var(--color-text-basic, #363636); font-size: 1.6rem; line-height: 1.9; word-break: break-word; }
.sub-layout .board-view__body p { margin: 0 0 1rem; }
.sub-layout .board-view__body p:last-child { margin-bottom: 0; }
.sub-layout .board-view__body img { max-width: 100%; height: auto; }
.sub-layout .board-view__body--press a { color: var(--rfz-color-primary-50, #256ef4); text-decoration: underline; text-underline-offset: .2rem; word-break: break-all; }
.sub-layout .board-view__body--press a:hover, .sub-layout .board-view__body--press a:focus-visible { color: var(--rfz-color-action-primary, #0b50d0); }
.sub-layout .board-view__files { padding: 2rem 2.8rem; border-bottom: 1px solid var(--color-border-gray-light, #d7d7d7); background: var(--color-surface-primary-subtler, #f5f9ff); }
.sub-layout .board-view__files-title { margin: 0 0 1.2rem; color: var(--color-text-basic, #363636); font-size: 1.5rem; font-weight: 700; }
.sub-layout .board-view__files ul { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.sub-layout .board-view__file { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.sub-layout .board-view__file-name { color: var(--color-text-basic, #363636); font-size: 1.5rem; font-weight: 500; }
.sub-layout .board-view__file-size { color: #868687; font-size: 1.3rem; }
.sub-layout .board-view__file-down { margin-left: auto; color: var(--rfz-color-action-primary, #0b50d0); font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.sub-layout .board-view__file-down:hover { text-decoration: underline; text-underline-offset: .2rem; }
.sub-layout .board-view__nav-row { display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 2.8rem; border-bottom: 1px solid var(--color-border-gray-light, #d7d7d7); font-size: 1.4rem; }
.sub-layout .board-view__nav-row:last-child { border-bottom: 0; }
.sub-layout .board-view__nav-label { flex-shrink: 0; width: 6.4rem; color: #868687; font-weight: 700; }
.sub-layout .board-view__nav-link { flex: 1; min-width: 0; overflow: hidden; color: var(--color-text-basic, #363636); white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.sub-layout .board-view__nav-link:hover { color: var(--rfz-color-action-primary, #0b50d0); text-decoration: underline; text-underline-offset: .2rem; }
.sub-layout .board-view__nav-date { flex-shrink: 0; color: #b6b7b7; }
.sub-layout .board-view__nav-empty { flex: 1; color: #b6b7b7; }
.sub-layout .board-view-btns { display: flex; justify-content: center; margin-top: 2.4rem; }

/* 특구 지정 현황 상세(ti_st_010d.jsp) — 관리자 등록 상세 화면처럼 항목을 번호 카드로 나눠 보여준다.
   표(규제특례/재원구성)는 status-table, 위치 목록은 dot-list를 그대로 재사용해서 새 CSS를 최소화했다. */
.sub-layout .zone-view { display: flex; flex-direction: column; gap: 2rem; }
.sub-layout .zone-view__card { padding: 2.4rem 2.8rem; border: 1px solid var(--color-border-gray-light, #d7d7d7); border-radius: 1.2rem; background: #fff; }
.sub-layout .zone-view__card-title {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1.6rem; padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--rfz-color-primary-50, #256ef4);
  color: var(--color-text-bolder, #191919); font-size: 1.7rem; font-weight: 700;
}
.sub-layout .zone-view__card-num { color: var(--rfz-color-primary-50, #256ef4); }
/* 카드 제목 오른쪽에 단위 등 보조 문구를 같은 줄에 붙일 때(총사업비 "(단위: 백만원)") 쓴다.
   밑줄은 이 줄(제목+문구) 전체에 걸고, 안쪽 제목(--flush)에서는 뺀다. */
.sub-layout .zone-view__card-title-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; margin: 0 0 1.6rem; padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--rfz-color-primary-50, #256ef4);
}
.sub-layout .zone-view__card-title--flush { margin: 0; padding: 0; border: 0; }
.sub-layout .zone-view__unit-note { flex-shrink: 0; color: #868687; font-size: 1.3rem; font-weight: 500; }
/* 규제특례 표 열 폭 */
.sub-layout .zone-view__cluse-table { min-width: 0; table-layout: fixed; }
.sub-layout .zone-view__cluse-table th:nth-child(1), .sub-layout .zone-view__cluse-table td:nth-child(1) { width: 22%; }
.sub-layout .zone-view__cluse-table th:nth-child(2), .sub-layout .zone-view__cluse-table td:nth-child(2) { width: 14%; }
.sub-layout .zone-view__cluse-table th:nth-child(3), .sub-layout .zone-view__cluse-table td:nth-child(3) { width: 64%; }
.sub-layout .zone-view__cluse-table td { white-space: normal; word-break: break-word; }
/* 규제특례 표 열 정렬 */
.sub-layout .zone-view__cluse-table td.zone-view__cluse-cn { text-align: left; }
.sub-layout .zone-view__cluse-table td.zone-view__cluse-name { vertical-align: middle; }
.sub-layout .zone-view__kv { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border-gray-light, #d7d7d7); }
.sub-layout .zone-view__kv tr + tr th, .sub-layout .zone-view__kv tr + tr td { border-top: 1px solid var(--color-border-gray-light, #d7d7d7); }
.sub-layout .zone-view__kv th {
  width: 18rem; padding: 1.4rem 1.8rem; background: var(--color-surface-primary-subtler, #f5f9ff);
  color: var(--color-text-bolder, #191919); font-size: 1.4rem; font-weight: 700; text-align: left; vertical-align: top; white-space: nowrap;
}
.sub-layout .zone-view__kv td { padding: 1.4rem 1.8rem; color: var(--color-text-bolder, #191919); font-weight: 500; font-size: 1.5rem; line-height: 1.6; word-break: break-word; }
.sub-layout .zone-view__kv td.kv-pre { white-space: pre-wrap; }
/* 규제특례·재원구성 표(status-table 재사용)와 위치 목록(dot-list 재사용)은 다른 화면과 공유하는 전역
   클래스라, 색만 이 상세 페이지(.zone-view) 안에서만 짙게 덮어써서 다른 화면에는 영향이 없게 한다. */
.sub-layout .zone-view .status-table th { color: var(--color-text-bolder, #191919); }
.sub-layout .zone-view .status-table td { color: var(--color-text-bolder, #191919); font-weight: 500; }
.sub-layout .zone-view .dot-list { color: var(--color-text-bolder, #191919); }
.sub-layout .zone-view__empty { margin: 0; color: #868687; }
.sub-layout .zone-view__bsns-card { margin-bottom: 1.6rem; padding: 1.6rem; border: 1px solid var(--color-border-gray-light, #d7d7d7); border-radius: 1.2rem; }
.sub-layout .zone-view__bsns-card:last-child { margin-bottom: 0; }
.sub-layout .zone-view__bsns-card-title { margin: 0 0 1rem; color: var(--color-text-bolder, #191919); font-size: 1.5rem; font-weight: 700; }
.sub-layout .zone-view__bsns-table { width: 100%; border-collapse: collapse; font-size: 1.4rem; }
.sub-layout .zone-view__bsns-table th { width: 11rem; padding: .8rem 1rem; border: 1px solid var(--color-border-gray-light, #d7d7d7); background: var(--color-surface-gray, #f9f9f9); color: #868687; font-weight: 700; text-align: left; vertical-align: top; white-space: nowrap; }
.sub-layout .zone-view__bsns-table td { padding: .8rem 1rem; border: 1px solid var(--color-border-gray-light, #d7d7d7); color: var(--color-text-bolder, #191919); font-weight: 500; line-height: 1.6; word-break: break-word; }

/* ── 게시판 반응형 ── */
@media (max-width: 768px) {
  .sub-layout .board-search { padding: 1.6rem; }
  .sub-layout .board-search__actions { width: 100%; margin-left: 0; }
  .sub-layout .board-search__actions .button { flex: 1; }
  .sub-layout .board-card { flex-direction: column; gap: 1.2rem; }
  .sub-layout .board-card__date { flex-direction: row; width: auto; gap: .8rem; }
  .sub-layout .board-view__head, .sub-layout .board-view__body, .sub-layout .board-view__files { padding-left: 1.6rem; padding-right: 1.6rem; }
  .sub-layout .board-view__nav-row { flex-wrap: wrap; padding-left: 1.6rem; padding-right: 1.6rem; }
  .sub-layout .board-view__nav-date, .sub-layout .board-view__nav-empty { width: 100%; padding-left: 7.6rem; }
  .sub-layout .zone-view__card { padding: 1.6rem; }
  .sub-layout .zone-view__kv, .sub-layout .zone-view__kv tbody, .sub-layout .zone-view__kv tr { display: block; width: 100%; }
  .sub-layout .zone-view__kv th, .sub-layout .zone-view__kv td { display: block; width: auto; }
  .sub-layout .zone-view__kv th { border-top: 1px solid var(--color-border-gray-light, #d7d7d7); }
  .sub-layout .zone-view__kv tr:first-child th { border-top: 0; }
  .sub-layout .zone-view__kv td { border-top: 0; padding-top: 0; }
}
@media (max-width: 480px) {
  .sub-layout .board-util { flex-direction: column; align-items: flex-start; }
  .sub-layout .board-accordion__a { padding: 0 1.6rem 1.6rem 1.6rem; }
}

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .sub-container--lnb {
    --gasys-designer-sub-gap: 5rem;
    padding-top: calc(var(--gasys-fixed-header-bottom, 122px) + var(--gasys-designer-sub-gap));
  }
  .sub-layout { gap: 3.2rem; }
  .sub-layout .zone-overview { gap: 1.6rem; }
  .sub-layout .zone-card { padding: 2.4rem; }
  .compare-table { min-width: 980px; }
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ti-ov { grid-template-columns: minmax(0, 3fr) minmax(28rem, 2fr); }
}

@media (max-width: 1024px) {
  .sub-container--lnb {
    --gasys-designer-sub-gap: 7rem;
    padding-top: calc(var(--gasys-fixed-header-bottom, 105px) + var(--gasys-designer-sub-gap));
  }
  .sub-layout { flex-direction: column; gap: 3.2rem; }
  .sub-layout .lnb { width: 100%; position: relative; }
  .lnb .lnb__title {
    justify-content: space-between; padding: 2rem 2.4rem; border-radius: 20px; cursor: pointer;
  }
  .lnb .lnb__title::after {
    content: ''; width: 2.4rem; height: 2.4rem; flex-shrink: 0;
    background: url(../images/sub/ico_arrow-right.svg) no-repeat center / 2.4rem;
    transform: rotate(90deg); transition: transform 0.25s;
  }
  .lnb.is-open .lnb__title { border-radius: 20px 20px 0 0; }
  .lnb.is-open .lnb__title::after { transform: rotate(-90deg); }
  .lnb__list {
    position: absolute; left: 0; top: 100%; width: 100%; background: #fff;
    display: none; flex-direction: column; overflow: visible;
    border: 1px solid var(--color-border-gray-light, #D7D7D7); border-top: 0;
    border-radius: 0 0 20px 20px;
  }
  .lnb-item .lnb-item__link:after { background-size: 20px; width: 20px; height: 20px; }
  .lnb.is-open .lnb__list { display: flex; }
  .lnb-item { flex: none; }
  .lnb-item .lnb-item__link { min-height: 5.6rem; padding: 1.4rem 2rem; border-bottom: 1px solid var(--color-border-gray-light, #D7D7D7); }
  .lnb-item:last-child .lnb-item__link { border-bottom: 0; }
  .sub-layout .breadcrumb { margin-top: 0; }
  .sub-content .sub-content__title { margin-bottom: 4rem; }
  .sub-layout .zone-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-layout .zone-card--local { grid-column: 1 / -1; }
  .infobox__law-row, .law-row__main { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .infobox__law-name, .law-row__name, .law-row__sub { white-space: normal; }
  .case-item { gap: 2.4rem; }
  .case-item__meta { width: 24rem; }
  .ti-ov { grid-template-columns: 1fr; }
  .ti-ov-map-card { min-height: 0; }
  .ti-ov-map { max-height: 42rem; }
  .ti-ov-counts { flex-direction: row; flex-wrap: wrap; }
  .ti-ov-count-card { flex: 1 1 calc(50% - .4rem); }
}

@media (max-width: 768px) {
  .sub-container--lnb {
    --gasys-designer-sub-gap: 6.4rem;
    padding-top: calc(var(--gasys-fixed-header-bottom, 90px) + var(--gasys-designer-sub-gap));
  }
  .sub-layout .breadcrumb__list { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .sub-content .sub-content__title { margin-bottom: 3.2rem; padding-bottom: 1.6rem; }
  .infobox { gap: 2.4rem; margin-bottom: 4rem; }
  .infobox__notice { min-height: 0; padding: 2.4rem; }
  .infobox__notice-btn { align-self: stretch; justify-content: center; }
  .conts-area { gap: 4rem; }
  .sub-layout .zone-overview { grid-template-columns: 1fr; }
  .sub-layout .zone-card, .sub-layout .zone-card--local { grid-column: auto; min-height: 0; padding: 2.4rem; border-radius: 1.6rem; }
  .compare-table { min-width: 880px; }
  .case-item { flex-direction: column; min-height: 0; padding: 2.4rem; gap: 1.6rem; border-radius: 1.6rem; }
  .case-item__meta { width: 100%; }
  .case-item__divider { width: 100%; height: 1px; }
  .case-item__body { justify-content: flex-start; }
  .case-item__body-title { white-space: normal; }
  .ti-ov { margin-bottom: 4rem; }
  .ti-ov-counts { flex-direction: column; }
  .ti-ov-count-card { min-height: 8.8rem; flex: none; }
  .ti-tab-panel { padding: 1.6rem; }
}

@media (max-width: 480px) {
  .sub-container--lnb {
    --gasys-designer-sub-gap: 5.6rem;
    padding-top: calc(var(--gasys-fixed-header-bottom, 80px) + var(--gasys-designer-sub-gap));
  }
  .lnb .lnb__title { padding: 2rem; }
  .lnb-item .lnb-item__link { min-height: 5.2rem; padding: 1.2rem 1.4rem; }
  .sec-tit { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .infobox__notice { padding: 2rem; border-radius: 1.2rem; }
  .compare-table { min-width: 820px; }
  .compare-table thead th, .compare-table td.data-cell,
  .compare-table td.label-cell, .compare-table td.data-cell--finance { padding: 1.2rem; }
  .case-item { padding: 2rem; }
  .dot-list { padding-left: 2rem; }
  .ti-ov-count-card__number { font-size: 2.6rem; }
  .status-table { min-width: 78rem; }
  .ti-ov-map-card { padding: 1.6rem; }
}