@charset "utf-8";
/* ============================================================
   서브 페이지 (index 가 아닌 화면에서만 로드)
   타입 스케일: H1(--fs-h1) > H2(--fs-h2) > H3(--fs-h3) > 리드(--fs-lead) > 본문(--fs-body) > 작은 글씨(--fs-small) > 라벨(--fs-label)
   ============================================================ */
.sub-hero {padding: 6rem 0 0;background: var(--paper);}
.sub-top {display: flex;align-items: center;justify-content: space-between;gap: 2rem;font-size: var(--fs-small);color: var(--mute);}
.crumb ol {display: flex;flex-wrap: wrap;gap: .4rem 1rem;}
.crumb li + li::before {content: '/';margin-right: 1rem;color: var(--line);}
.crumb a:hover {color: var(--accent);}
.crumb [aria-current] {color: var(--ink);font-weight: 600;}
.sub-idx {font-size: var(--fs-label);font-weight: 700;letter-spacing: var(--ls-label);text-transform: uppercase;}
.sub-idx b {color: var(--accent);}
.sub-h1 {margin-top: 7rem;font-size: var(--fs-h1);font-weight: 800;line-height: 1.04;letter-spacing: var(--ls-tight);}
.sub-visual {height: clamp(22rem, 32vw, 48rem);margin-top: 6rem;overflow: hidden;background: var(--line);}
.sub-visual img {width: 100%;height: 100%;object-fit: cover;}
/* 서브메뉴 (헤더 아래에 붙는 탭) */
#sh_aside {position: sticky;top: var(--header-height);z-index: 40;background: var(--paper);border-bottom: .1rem solid var(--ink);transition: top .4s var(--ease);}
#sh_hd.is-hide ~ #sh_container #sh_aside {top: 0;}
#sh_snb {display: flex;gap: 4rem;overflow-x: auto;scrollbar-width: none;}
#sh_snb::-webkit-scrollbar {display: none;}
#sh_snb li a {position: relative;display: block;padding: 2.2rem 0;font-size: 1.7rem;font-weight: 600;white-space: nowrap;color: var(--mute);transition: color .3s;}
#sh_snb li a::after {content: '';position: absolute;left: 0;right: 0;bottom: -.1rem;height: .4rem;background: var(--accent);scale: 0 1;transform-origin: left center;transition: scale .4s var(--ease);}
#sh_snb li a:hover, #sh_snb li a:focus-visible, #sh_snb li.snb_on a {color: var(--ink);}
#sh_snb li a:hover::after, #sh_snb li.snb_on a::after {scale: 1 1;}
#sh_content {padding-block: 14rem 16rem;}
.sub-board {padding-block: 8rem 12rem;}
.sub-gap {height: 10rem;}
/* 섹션 제목: 왼쪽 라벨 + 오른쪽 큰 제목 */
.sub-tit {display: grid;grid-template-columns: 3fr 9fr;column-gap: 4rem;margin-bottom: 8rem;padding-top: 3rem;border-top: .1rem solid var(--ink);}
.sub-tit span {grid-column: 1;grid-row: 1 / 3;padding-top: 1.2rem;font-size: var(--fs-label);font-weight: 700;letter-spacing: var(--ls-label);text-transform: uppercase;color: var(--accent);}
.sub-tit h2 {grid-column: 2;max-width: 110rem;font-size: var(--fs-h2);font-weight: 800;line-height: 1.14;letter-spacing: var(--ls-tight);}
.sub-tit .para {grid-column: 2;max-width: 76rem;margin-top: 3rem;font-size: var(--fs-lead);line-height: 1.75;color: var(--mute);}
/* 카드: 모서리 없는 격자 */
.cards {display: grid;gap: 0;margin-bottom: 4rem;border-top: .1rem solid var(--ink);border-left: .1rem solid var(--line);}
.cards.cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.cards.cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.cards.cols-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}
.cards li {position: relative;display: flex;flex-direction: column;gap: 2rem;min-height: 32rem;padding: 4rem 3.6rem;border-right: .1rem solid var(--line);border-bottom: .1rem solid var(--line);transition: background .4s, color .4s;}
.cards li:hover {background: var(--ink);color: #fff;}
.card-no {margin-bottom: auto;font-size: var(--fs-small);font-weight: 700;color: var(--accent);}
.cards h3 {font-size: var(--fs-h3);font-weight: 800;line-height: 1.25;letter-spacing: -.03em;}
.cards p {font-size: var(--fs-body);line-height: 1.7;color: var(--mute);transition: color .4s;}
.cards li:hover p {color: rgba(255, 255, 255, .75);}
/* 분할 (이미지 + 글) */
.split {display: grid;grid-template-columns: 7fr 5fr;gap: 8rem;align-items: end;margin-bottom: 10rem;}
.split-ph {overflow: hidden;aspect-ratio: 4 / 3;background: var(--line);}
.split-ph img {width: 100%;height: 100%;object-fit: cover;transition: scale 1s var(--ease);}
.split-ph:hover img {scale: 1.05;}
.split-tx h3 {margin-bottom: 2.4rem;font-size: var(--fs-h2);font-weight: 800;line-height: 1.15;letter-spacing: var(--ls-tight);}
.split-tx p {font-size: var(--fs-lead);line-height: 1.8;color: var(--mute);}
.split:has(.split-tx:first-child) {grid-template-columns: 5fr 7fr;}
/* 단계: 가로 칸 + 외곽선 숫자 */
.steps {display: grid;grid-auto-flow: column;grid-auto-columns: minmax(0, 1fr);border-top: .1rem solid var(--ink);}
.steps li {padding: 4rem 3rem 5rem 0;}
.steps li + li {padding-left: 3rem;border-left: .1rem solid var(--line);}
.st-no {display: block;margin-bottom: 4rem;font-size: clamp(6rem, 7vw, 11rem);font-weight: 800;line-height: 1;letter-spacing: -.05em;color: transparent;-webkit-text-stroke: .1rem var(--ink);transition: color .3s;}
.steps li:hover .st-no {color: var(--accent);-webkit-text-stroke-color: var(--accent);}
.steps h3 {margin-bottom: 1.6rem;font-size: var(--fs-h3);font-weight: 800;line-height: 1.25;letter-spacing: -.03em;}
.steps p {font-size: var(--fs-body);line-height: 1.7;color: var(--mute);}
/* 항목 표 */
.rows {border-top: .1rem solid var(--ink);}
.rows > div {display: grid;grid-template-columns: 3fr 9fr;gap: 4rem;padding: 3.2rem 0;border-bottom: .1rem solid var(--line);transition: padding .4s var(--ease), background .3s;}
.rows > div:hover {padding-left: 2rem;background: #fff;}
.rows dt {font-size: var(--fs-small);font-weight: 700;letter-spacing: .04em;color: var(--mute);}
.rows dd {font-size: var(--fs-h3);font-weight: 600;line-height: 1.4;letter-spacing: -.02em;}
/* 연혁 */
.tl {border-top: .1rem solid var(--ink);}
.tl li {display: grid;grid-template-columns: 3fr 9fr;gap: 4rem;padding: 4.4rem 0;border-bottom: .1rem solid var(--line);transition: padding .4s var(--ease), background .3s;}
.tl li:hover {padding-left: 2rem;background: #fff;}
.tl-yr {font-size: clamp(4rem, 5vw, 8rem);font-weight: 800;line-height: 1;letter-spacing: var(--ls-tight);color: var(--accent);}
.tl h3 {margin-bottom: 1rem;font-size: var(--fs-h3);font-weight: 800;letter-spacing: -.03em;}
.tl p {font-size: var(--fs-body);color: var(--mute);}
/* 오시는길 */
#sh_map_v .tit_area {display: flex;align-items: baseline;gap: 3rem;margin-bottom: 3rem;}
#sh_map_v .tit_area span {font-size: var(--fs-label);font-weight: 700;letter-spacing: var(--ls-label);color: var(--accent);}
#sh_map_v .tit_area p {font-size: var(--fs-h3);font-weight: 700;letter-spacing: -.02em;}
#sh_map_v .map_box {display: grid;place-items: center;width: 100%;aspect-ratio: 16 / 7;border: .1rem solid var(--ink);font-size: var(--fs-body);text-align: center;color: var(--mute);background: repeating-linear-gradient(45deg, #fff, #fff 1.4rem, var(--paper) 1.4rem, var(--paper) 2.8rem);}
/* 게시판형 목록 */
.tbl-wrap {width: 100%;overflow-x: auto;}
.tbl {width: 100%;border-top: .1rem solid var(--ink);}
.tbl th {padding: 2rem 1.6rem;font-size: var(--fs-label);font-weight: 700;letter-spacing: var(--ls-label);text-align: center;color: var(--mute);border-bottom: .1rem solid var(--line);}
.tbl td {padding: 3rem 1.6rem;border-bottom: .1rem solid var(--line);text-align: center;font-size: var(--fs-small);color: var(--mute);}
.tbl .tbl-tt {text-align: left;font-size: var(--fs-h3);font-weight: 700;letter-spacing: -.02em;color: var(--ink);}
.tbl .c-no {width: 10rem;}
.tbl .c-date {width: 18rem;}
.tbl tbody tr {transition: background .2s;}
.tbl tbody tr:hover {background: #fff;}
/* 자료실 */
.docs {border-top: .1rem solid var(--ink);}
.docs li {display: flex;align-items: center;justify-content: space-between;gap: 2rem;padding: 3.6rem 0;border-bottom: .1rem solid var(--line);transition: padding .4s var(--ease), background .3s;}
.docs li:hover {padding-inline: 2rem;background: #fff;}
.docs h3 {font-size: var(--fs-h3);font-weight: 800;letter-spacing: -.03em;}
.docs p {margin-top: .4rem;font-size: var(--fs-small);color: var(--mute);}
.doc-btn {flex: none;padding: 1.2rem 2.6rem;border: .1rem solid var(--ink);border-radius: 3rem;font-size: var(--fs-small);font-weight: 700;}
.doc-btn.is-off {border-color: var(--line);color: var(--mute);}
/* FAQ */
.faq {border-top: .1rem solid var(--ink);}
.faq-item {border-bottom: .1rem solid var(--line);}
.faq-q {display: flex;align-items: center;gap: 3rem;width: 100%;padding: 3.6rem 0;font-size: var(--fs-h3);font-weight: 700;line-height: 1.35;letter-spacing: -.03em;text-align: left;transition: color .3s;}
.faq-q:hover {color: var(--accent);}
.faq-tt {flex: 1;}
.faq-no {font-size: var(--fs-small);font-weight: 800;color: var(--accent);}
.faq-q i {position: relative;flex: none;width: 2.8rem;height: 2.8rem;}
.faq-q i::before, .faq-q i::after {content: '';position: absolute;left: 0;top: 1.3rem;width: 100%;height: .2rem;background: currentColor;transition: rotate .3s;}
.faq-q i::after {rotate: 90deg;}
.faq-q[aria-expanded='true'] i::after {rotate: 0deg;}
.faq-a {padding: 0 6rem 4rem 5.6rem;font-size: var(--fs-lead);line-height: 1.8;color: var(--mute);}
.faq-a:not([hidden]) {animation: fade_in .4s var(--ease);}
@keyframes fade_in {from {opacity: 0;translate: 0 1.2rem;} to {opacity: 1;translate: 0 0;}}
/* 폼: 밑줄 입력 */
.form {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 4rem 6rem;max-width: 130rem;}
.fld {display: flex;flex-direction: column;gap: 1rem;}
.fld-wide {grid-column: 1 / -1;}
.fld label {font-size: var(--fs-label);font-weight: 700;letter-spacing: var(--ls-label);text-transform: uppercase;}
.fld input[type='text'], .fld input[type='tel'], .fld input[type='email'], .fld select, .fld textarea {width: 100%;padding: 1.4rem 0;border: 0;border-bottom: .2rem solid var(--ink);border-radius: 0;background: transparent;font-size: var(--fs-h3);font-weight: 600;letter-spacing: -.02em;transition: border-color .3s;}
.fld input::placeholder, .fld textarea::placeholder {color: #b8b3a8;font-weight: 500;}
.fld textarea {min-height: 18rem;font-size: var(--fs-lead);font-weight: 500;resize: vertical;}
.fld input:focus, .fld select:focus, .fld textarea:focus {border-bottom-color: var(--accent);outline: 0;}
.fld [aria-invalid='true'] {border-bottom-color: #d6293e;}
.chk {display: flex;align-items: center;gap: 1.2rem;font-size: var(--fs-body) !important;font-weight: 500 !important;letter-spacing: 0 !important;text-transform: none !important;}
.chk input {width: 2.2rem;height: 2.2rem;accent-color: var(--accent);}
.err {min-height: 2rem;font-size: var(--fs-small);color: #d6293e;}
.done {padding: 2.4rem 3rem;border-left: .4rem solid var(--accent);background: #fff;font-size: var(--fs-lead);font-weight: 600;}
/* 포트폴리오 갤러리: 직각 이미지 + 캡션 */
.gal img {width: 100%;height: 100%;object-fit: cover;transition: scale 1s var(--ease);}
.gal article:hover img {scale: 1.06;}
.gal-img {overflow: hidden;background: var(--line);}
.gal-cate {display: inline-block;margin-bottom: 1.2rem;font-size: var(--fs-label);font-weight: 700;letter-spacing: var(--ls-label);text-transform: uppercase;color: var(--accent);}
.gal h3 {font-size: var(--fs-h3);font-weight: 800;line-height: 1.3;letter-spacing: -.03em;}
.gal-desc {margin-top: 1rem;font-size: var(--fs-small);color: var(--mute);}
.gal-tx {padding-top: 2.4rem;}
.gal-a {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 8rem 3rem;}
.gal-a .gal-img {aspect-ratio: 4 / 5;}
.gal-a li:nth-child(3n + 2) {margin-top: 8rem;}
.gal-a li:nth-child(3n) {margin-top: 16rem;}
.gal-b {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 8rem 4rem;}
.gal-b .gal-img {aspect-ratio: 4 / 3;}
.gal-b li:nth-child(even) {margin-top: 12rem;}
.gal-c {display: flex;flex-direction: column;gap: 10rem;}
.gal-c article {display: grid;grid-template-columns: 7fr 5fr;gap: 8rem;align-items: end;}
.gal-c li:nth-child(even) article {grid-template-columns: 5fr 7fr;}
.gal-c li:nth-child(even) .gal-img {order: 2;}
.gal-c .gal-img {aspect-ratio: 4 / 3;}
.gal-c h3 {font-size: var(--fs-h2);letter-spacing: var(--ls-tight);}
.gal-c .gal-tx {padding-top: 0;}
.gal-d {columns: 3;column-gap: 3rem;}
.gal-d li {break-inside: avoid;margin-bottom: 6rem;}
.gal-d li:nth-child(3n + 1) .gal-img {aspect-ratio: 3 / 4;}
.gal-d li:nth-child(3n + 2) .gal-img {aspect-ratio: 1 / 1;}
.gal-d li:nth-child(3n) .gal-img {aspect-ratio: 4 / 3;}
/* 하단 문의 */
.sub-cta {padding: 14rem 0;background: var(--ink);color: var(--paper);overflow: clip;}
.sub-cta .cta-big:hover, .sub-cta .cta-big:focus-visible {color: var(--accent);}
.sub-cta .cta-big:hover i {background: var(--accent);color: var(--ink);}
.sub-cta .cta-sub {color: rgba(255, 255, 255, .7);}
@media (max-width: 1280px) {
.sub-tit {grid-template-columns: 2fr 10fr;}
.cards.cols-4 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.split {gap: 5rem;}
.gal-c article {gap: 5rem;}
}
@media (max-width: 1024px) {
.sub-hero {padding-top: 4rem;}
.sub-h1 {margin-top: 5rem;}
.sub-visual {margin-top: 4rem;}
#sh_content {padding-block: 9rem 10rem;}
#sh_snb {gap: 3rem;}
.sub-tit {grid-template-columns: 1fr;row-gap: 2rem;margin-bottom: 5rem;}
.sub-tit span {grid-row: auto;padding-top: 0;}
.sub-tit h2, .sub-tit .para {grid-column: 1;}
.sub-gap {height: 7rem;}
.cards.cols-3 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.cards li {min-height: 26rem;}
.split, .split:has(.split-tx:first-child) {grid-template-columns: 1fr;gap: 4rem;margin-bottom: 7rem;}
.steps {grid-auto-flow: row;grid-auto-columns: auto;grid-template-columns: repeat(2, minmax(0, 1fr));}
.steps li:nth-child(odd) {padding-left: 0;border-left: 0;}
.steps li:nth-child(n+3) {border-top: .1rem solid var(--line);}
.rows > div, .tl li {grid-template-columns: 1fr;gap: 1rem;}
.form {grid-template-columns: 1fr;gap: 3.4rem;}
.gal-a {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 6rem 3rem;}
.gal-a li:nth-child(n) {margin-top: 0;}
.gal-b li:nth-child(even) {margin-top: 6rem;}
.gal-c {gap: 7rem;}
.gal-c article, .gal-c li:nth-child(even) article {grid-template-columns: 1fr;gap: 3rem;}
.gal-c li:nth-child(even) .gal-img {order: 0;}
.gal-d {columns: 2;}
.sub-cta {padding: 9rem 0;}
}
@media (max-width: 768px) {
.sub-top {flex-direction: column;align-items: flex-start;}
.sub-h1 {margin-top: 4rem;}
.sub-visual {height: 24rem;}
#sh_snb li a {padding: 1.8rem 0;font-size: 1.6rem;}
#sh_content {padding-block: 6rem 8rem;}
.sub-board {padding-block: 5rem 8rem;}
.cards.cols-2, .cards.cols-3, .cards.cols-4 {grid-template-columns: 1fr;}
.cards li {min-height: 0;padding: 3rem 2.4rem;}
.steps {grid-template-columns: 1fr;}
.steps li:nth-child(n) {padding: 3rem 0 4rem;border-left: 0;border-top: .1rem solid var(--line);}
.steps li:first-child {border-top: 0;}
.docs li {flex-direction: column;align-items: flex-start;gap: 2rem;}
.faq-q {gap: 1.6rem;padding: 2.6rem 0;}
.faq-a {padding: 0 0 3rem;}
.gal-a, .gal-b {grid-template-columns: 1fr;gap: 5rem;}
.gal-b li:nth-child(even) {margin-top: 0;}
.gal-d {columns: 1;}
.tbl .tbl-tt {font-size: 1.8rem;}
.tbl .c-no, .tbl .c-date {width: auto;white-space: nowrap;}
#sh_map_v .tit_area {flex-direction: column;gap: .6rem;}
#sh_map_v .map_box {aspect-ratio: 4 / 3;}
.sub-cta {padding: 7rem 0;}
}