/* 서브페이지 공통 (body.sub) — 메인의 다크 테마를 라이트 테마로 덮어씀 */
body.sub {background: #fff; color: #111;}
.sub #smooth-content {background: #fff;}

.sub #header {opacity: 1; pointer-events: auto;}
.sub #header.scroll {background-color: rgba(255, 255, 255, 0.85);}
.sub #header .menu .anchor {color: #111;}
/* 서브(흰 배경)는 검정 로고. 메인(어두운 배경)은 common.css 의 흰색 로고 */
.sub #header .logo .anchor {background-image: url('../images/common/d3_logo_b.png');}

@media all and (min-width: 1001px) {
    .sub #header .menu .li:hover .anchor {color: var(--key-color);}
}
@media all and (max-width: 1000px) {
    .sub #header .btn_menu:not(.active) {background-image: url('../images/icon/m_menu_b.svg');}
}


/* ==========================================================================
   .sub-split — 서브페이지 공통 "좌측 타이틀·필터 / 우측 콘텐츠" 레이아웃
   사용: <div class="portfolio sub-split"> / <div class="faq sub-split">
   구조: .wrap > .left(.head > .title, .desc, .filter) + .right(.list > .item, .empty)
   ※ default.css가 :before/:after 전체에 display:none을 걸어서, 가상요소마다 display를 직접 지정해야 보임
   ========================================================================== */
.sub-split {padding: 150px 0 160px;}
.sub-split .wrap {display: flex; align-items: flex-start; gap: 60px;}
.sub-split ul {margin: 0; padding: 0; list-style: none;}
.sub-split button {font-family: inherit; cursor: pointer;}

.sub-split .left {position: sticky; top: 120px; flex: 0 0 320px;}
.sub-split .head {display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.sub-split .title {margin: 0; font-size: clamp(40px, 3.4vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #111;}
.sub-split .total {display: inline-block; margin-left: 6px; vertical-align: top; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--key-color); font-variant-numeric: tabular-nums;}
.sub-split .desc {margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: #555;}

/* 필터: 세로 리스트 + 개수, active는 키컬러 막대 / 2차(.sub)는 들여쓰기 + 점 */
.sub-split .filter {margin-top: 48px !important; border-top: 1px solid #111;}
.sub-split .filter > li {border-bottom: 1px solid #e5e5e5;}
.sub-split .chip {position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 4px 0 0; background: none; font-size: 17px; font-weight: 500; color: #999; text-align: left; transition: color 0.25s ease, padding 0.3s ease;}
.sub-split .chip::before {content: ""; display: block; position: absolute; top: 50%; left: 0; width: 0; height: 2px; background: var(--key-color); transition: width 0.3s ease;}
.sub-split .chip:hover {color: #111;}
.sub-split .chip.active {padding-left: 28px; font-weight: 700; color: #111;}
.sub-split .chip.active::before {width: 16px;}
.sub-split .cnt {font-size: 13px; font-weight: 500; color: #aaa; font-variant-numeric: tabular-nums;}
.sub-split .chip.active .cnt {color: var(--key-color);}
/* 2차 아코디언: grid-template-rows 0fr↔1fr로 높이 auto까지 부드럽게 (.is-open은 sub.js가 토글) */
.sub-split .filter .has-sub {display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 0.35s ease;}
.sub-split .filter .has-sub.is-open {grid-template-rows: auto 1fr;}
.sub-split .filter .sub {min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.35s;}
.sub-split .filter .has-sub.is-open .sub {visibility: visible; transition-delay: 0s;}
.sub-split .filter .sub li:last-child {padding-bottom: 12px;}
.sub-split .has-sub > .chip .name::after {content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; vertical-align: middle; transform: rotate(45deg); transition: transform 0.3s ease;}
.sub-split .has-sub.is-open > .chip .name::after {margin-bottom: -1px; transform: rotate(-135deg);}
.sub-split .chip--sub {height: 36px; padding-left: 40px; font-size: 15px;}
.sub-split .chip--sub::before {left: 26px; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #ccc; transition: background-color 0.25s ease;}
.sub-split .chip--sub.active {padding-left: 40px; font-weight: 600; color: var(--key-color);}
.sub-split .chip--sub.active::before {width: 4px; background: var(--key-color);}

.sub-split .right {flex: 1; min-width: 0;}
.sub-split .item.is-hidden {display: none;}
.sub-split .empty {display: none; padding: 120px 0; font-size: 18px; color: #888; text-align: center;}
.sub-split .right.is-empty .empty {display: block;}


/* ==========================================================================
   Portfolio (.portfolio) — 우측: 2열 지그재그 카드
   ========================================================================== */
.portfolio {--gap: 40px; --offset: 0px; --row-gap: 80px;} /* --offset: 오른쪽 열 시작을 내리는 지그재그 값. 지금은 좌우 최상단을 맞추려고 0 (되살리려면 데스크톱 140px / 1024px 이하 80px) */
.portfolio .view {display: flex; gap: 6px; margin-top: 6px;}
.portfolio .view .btn {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: #d4d4d4; color: #fff; transition: background-color 0.2s ease;}
.portfolio .view .btn.active {background: #111;}
.portfolio .view .btn svg {width: 16px; height: 16px;}

.portfolio .list {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); row-gap: var(--row-gap); padding-bottom: var(--offset) !important;}
/* 보이는 카드 중 짝수 번째만 아래로 — 필터로 숨긴 카드(.is-hidden)는 순번에서 빠져서 지그재그가 안 깨짐 */
.portfolio .list:not(.is-masonry) .item:nth-child(even of :not(.is-hidden)) {transform: translateY(var(--offset));}
/* 썸네일 높이가 제각각일 때: sub.js 가 .is-masonry 를 붙이면 1px 단위 행 + 항목별 grid-row span 으로 두 열이 서로 독립적으로 촘촘히 쌓임(자동 배치가 짧은 열부터 채움). 오른쪽 열(둘째 카드) 시작은 --offset 만큼 내려 지그재그 유지.
   JS 가 없으면 이 규칙이 안 붙어서 위의 정렬된 2열 그리드로 보임 */
.portfolio .list.is-masonry {grid-auto-rows: 1px; grid-auto-flow: dense; row-gap: 0; align-items: start; padding-bottom: 0 !important;}
/* 순서는 좌→우→좌→우 (보이는 카드 기준 홀수=왼쪽 열, 짝수=오른쪽 열). 열을 고정하고 dense 로 두면 각 열이 서로 독립적으로 위에서부터 촘촘히 쌓임 */
.portfolio .list.is-masonry .item:nth-child(odd of :not(.is-hidden)) {grid-column: 1;}
.portfolio .list.is-masonry .item:nth-child(even of :not(.is-hidden)) {grid-column: 2;}
.portfolio .list.is-masonry .item {align-self: start; padding-bottom: var(--row-gap);}
.portfolio .list.is-masonry .item:nth-child(2 of :not(.is-hidden)) {margin-top: var(--offset);}
.portfolio .link {display: block; color: #111; text-decoration: none !important;}
.portfolio .thumb {position: relative; overflow: hidden; border-radius: 20px; background: #eceef1;}
.portfolio .thumb:not(:has(img)) {aspect-ratio: 4 / 5;}
.portfolio .thumb img {display: block; width: 100%; height: auto; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);}
.portfolio .thumb::after {content: ""; display: block; position: absolute; right: 20px; bottom: 20px; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: var(--key-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / 24px; transform: scale(0); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);}
.portfolio .link:hover .thumb img {transform: scale(1.05);}
.portfolio .link:hover .thumb::after {transform: scale(1);}
/* 홈페이지 카드(data-pf 없는 링크): hover 시 우하단 버튼이 "사이트 바로가기" 글자가 붙은 알약으로 나타남. 디자인/솔루션은 원형 아이콘 그대로 */
.portfolio .link:not([data-pf]) .thumb::after {content: "사이트 바로가기"; width: auto; height: 56px; padding: 0 56px 0 26px; border-radius: 999px; background-position: right 17px center; background-size: 22px; transform-origin: right bottom; font-size: 15px; font-weight: 700; line-height: 56px; letter-spacing: -0.02em; white-space: nowrap; color: #fff;}
.portfolio .info {margin-top: 22px;}
/* 검색창 (왼쪽 컬럼, 카테고리 위). 입력하면 #태그 자동완성이 아래로 열림 */
.portfolio .search {position: relative; margin: 32px 0 24px;}
.portfolio .search .ico {position: absolute; top: 50%; left: 18px; width: 18px; height: 18px; margin-top: -9px; color: #8a8f98; pointer-events: none;}
.portfolio .search_input {display: block; width: 100%; height: 52px; padding: 0 44px 0 46px; border: 1px solid #d9dce1; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; color: #111; letter-spacing: -0.01em; transition: border-color 0.2s ease;}
.portfolio .search_input::placeholder {color: #9aa0aa; font-weight: 400;}
.portfolio .search_input:hover {border-color: #b9bec7;}
.portfolio .search_input:focus {outline: none; border-color: #111;}
.portfolio .search_input::-webkit-search-cancel-button {display: none; -webkit-appearance: none;}
.portfolio .search_clear {position: absolute; top: 50%; right: 12px; width: 28px; height: 28px; margin-top: -14px; padding: 0; border: 0; border-radius: 50%; background: #eceef1; font-size: 16px; line-height: 28px; text-align: center; color: #555; cursor: pointer; transition: background-color 0.2s ease;}
.portfolio .search_clear[hidden] {display: none;}
.portfolio .search_clear:hover {background: #dde0e5;}
.portfolio .suggest {position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; margin: 0; padding: 8px; list-style: none; border: 1px solid #e3e6ea; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);}
.portfolio .suggest[hidden] {display: none;}
.portfolio .suggest .head {padding: 8px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: #9aa0aa;}
.portfolio .suggest [data-suggest] {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: #111; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;}
.portfolio .suggest [data-suggest] .c {font-size: 12px; font-weight: 600; color: #9aa0aa;}
.portfolio .suggest [data-suggest]:hover, .portfolio .suggest [data-suggest].is-active {background: #f3f5f8; color: var(--key-color);}
.portfolio .hash {position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; padding-left: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #8a8f98;}
.portfolio .hash button {padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; transition: color 0.2s ease;}
.portfolio .hash button:hover, .portfolio .hash button.is-on {color: var(--key-color);}
/* 태그 필터 중일 때 목록 위에 보이는 칩 (hidden 속성이 풀릴 때만 표시) */
.portfolio .tag-now {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 28px;}
.portfolio .tag-now .chips {display: flex; flex-wrap: wrap; gap: 8px;}
.portfolio .tag-reset {padding: 6px 4px; border: 0; background: none; font-size: 13px; font-weight: 500; color: #8a8f98; text-decoration: underline !important; text-underline-offset: 3px; cursor: pointer; transition: color 0.2s ease;}
.portfolio .tag-reset:hover {color: #111;}
.portfolio .tag-now[hidden] {display: none;}
.portfolio .tag-now .lb {font-size: 14px; font-weight: 600; color: #8a8f98;}
.portfolio .tag-chip {display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 16px; border: 0; border-radius: 999px; background: #111; font-size: 15px; font-weight: 600; line-height: 1; color: #fff; cursor: pointer; transition: background-color 0.25s ease;}
.portfolio .tag-chip .x {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); font-size: 14px; line-height: 1;}
.portfolio .tag-chip:hover {background: var(--key-color);}
.portfolio .tit {min-width: 0; overflow: hidden; padding-left: 12px; font-size: 24px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; transition: color 0.25s ease;}
.portfolio .link:hover .tit {color: var(--key-color);}
/* 카테고리 라벨: 썸네일 좌상단, 반투명 화이트 글래스 알약 + 키컬러 점 (어떤 이미지 위에서도 읽히도록 흰 배경 + 옅은 그림자) */
.portfolio .tags {position: absolute; top: 18px; left: 18px; right: 18px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none;}
.portfolio .tags li {display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: #111; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);}
.portfolio .tags li::before {content: ""; display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--key-color);}
.portfolio .link:hover .tags li {transform: translateY(2px);}

/* 등장 모션: sub.js가 .is-anim을 붙인 뒤에만 숨김 → JS가 실패해도 카드는 보임 */
.portfolio.is-anim .item .link {opacity: 0; transform: translateY(60px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);}
.portfolio.is-anim .item.is-in .link {opacity: 1; transform: none;}
.portfolio .right.is-empty .list {padding-bottom: 0 !important;}


/* ==========================================================================
   FAQ (.faq) — 우측: 질문/답변 아코디언 (.is-open은 sub.js가 토글, 한 번에 하나만 열림)
   ========================================================================== */
.faq .list {border-top: 1px solid #111;}
.faq .item {border-bottom: 1px solid #e5e5e5;}
.faq .q {display: flex; align-items: center; gap: 20px; width: 100%; padding: 30px 4px; background: none; font-size: 20px; font-weight: 600; line-height: 1.4; color: #111; text-align: left; transition: color 0.25s ease;}
.faq .q:hover, .faq .item.is-open .q {color: var(--key-color);}
.faq .mark {flex: none; width: 22px; font-size: 20px; font-weight: 700; line-height: 1; color: var(--key-color);}
.faq .q .txt {flex: 1; min-width: 0;}
/* 화살표: 닫힘 ↘, 열림 ↗ (같은 ↗ 아이콘을 90도 돌려서 사용) */
.faq .arw {flex: none; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233885F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / 24px; transform: rotate(90deg); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);}
.faq .item.is-open .arw {transform: rotate(0deg);}

/* 답변: grid-template-rows 0fr↔1fr로 높이 auto까지 부드럽게. 닫혀 있을 땐 visibility:hidden이라 Tab 포커스도 안 들어감 */
.faq .a {display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.4s;}
.faq .item.is-open .a {grid-template-rows: 1fr; visibility: visible; transition-delay: 0s;}
.faq .a-in {min-height: 0; overflow: hidden;}
.faq .a-box {display: flex; gap: 20px; margin: 0 0 28px; padding: 28px 24px 28px 4px; border-radius: 14px; background: #f6f7f9;}
.faq .a-box .mark {padding-left: 20px; width: 42px; color: #111;}
.faq .a-box .txt {flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.75; color: #444;}
.faq .right.is-empty .list {border-top: 0;}


@media all and (max-width: 1240px) {
    .sub-split .wrap {gap: 40px;}
    .sub-split .left {flex-basis: 260px;}
    .portfolio .list {--gap: 28px;}
    .portfolio .tit {font-size: 20px;}
    .faq .q {font-size: 18px;}
}
@media all and (max-width: 1024px) {
    .sub-split {padding-top: 110px;}
    .sub-split .wrap {flex-direction: column; gap: 48px;}
    .sub-split .left {position: static; flex: none; width: 100%;}
    .sub-split .right {width: 100%;}
    /* 1차는 알약 한 줄, 2차는 디자인 선택 시에만 그 아래 줄에 노출 (.has-sub를 display:contents로 풀어서 .sub를 flex 줄바꿈) */
    .sub-split .filter {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px !important; border-top: 0;}
    .sub-split .filter > li {flex: none; border-bottom: 0;}
    .sub-split .filter .has-sub {display: contents;}
    .sub-split .chip {gap: 8px; width: auto; height: 44px; padding: 0 18px; border: 1px solid #ddd; border-radius: 999px; font-size: 15px; color: #555;}
    .sub-split .chip::before {display: none;}
    .sub-split .chip.active {padding-left: 18px; border-color: #111; background: #111; color: #fff;}
    .sub-split .chip.active .cnt {color: var(--key-color-light);}
    .sub-split .filter .sub {display: none; flex-basis: 100%; flex-wrap: wrap; gap: 6px; order: 1; padding: 4px 0 0; overflow: visible;}
    .sub-split .filter .sub li:last-child {padding-bottom: 0;}
    .sub-split .filter .has-sub.is-open .sub {display: flex;}
    .sub-split .chip--sub {height: 36px; padding: 0 14px; border-color: transparent; background: #f2f3f5; font-size: 14px;}
    .sub-split .chip--sub.active {padding-left: 14px; border-color: transparent; background: #e6f0fe; color: var(--key-color);}
    .sub-split .chip--sub.active .cnt {color: var(--key-color);}
    .portfolio {--offset: 0px; --row-gap: 56px;}
    .portfolio .list {row-gap: 56px;}
}
@media all and (max-width: 640px) {
    .sub-split {padding: 90px 0 100px;}
    .sub-split .title {font-size: 36px;}
    .sub-split .desc {font-size: 15px;}
    /* 1차 4개가 한 줄에 들어가도록 개수는 숨김 (전체 개수는 타이틀 옆 .total로 확인) */
    .sub-split .filter {gap: 6px;}
    .sub-split .cnt {display: none;}
    .sub-split .chip {height: 40px; padding: 0 16px; font-size: 14px;}
    .sub-split .chip.active {padding-left: 16px;}
    .sub-split .chip--sub {height: 34px; padding: 0 14px; font-size: 13px;}
    .sub-split .chip--sub.active {padding-left: 14px;}
    .portfolio {--row-gap: 44px;}
    .portfolio .list {grid-template-columns: 1fr; row-gap: 44px; padding-bottom: 0 !important;}
    .portfolio .list .item:nth-child(even of :not(.is-hidden)) {transform: none;}
    .portfolio .list.is-masonry .item:nth-child(2 of :not(.is-hidden)) {margin-top: 0;}
    .portfolio .list.is-masonry .item:nth-child(odd of :not(.is-hidden)), .portfolio .list.is-masonry .item:nth-child(even of :not(.is-hidden)) {grid-column: 1;}
    .portfolio .thumb {border-radius: 14px;}
    .portfolio .thumb::after {right: 14px; bottom: 14px; width: 52px; height: 52px; background-size: 18px;}
    .portfolio .link:not([data-pf]) .thumb::after {width: auto; height: 44px; padding: 0 44px 0 18px; background-position: right 13px center; background-size: 18px; font-size: 13px; line-height: 44px;}
    .portfolio .tags {top: 12px; left: 12px; right: 12px;}
    .portfolio .tags li {padding: 6px 11px 6px 9px; font-size: 11px;}
    .portfolio .info {margin-top: 16px;}
    .portfolio .tit {font-size: 20px;}
    .faq .q {gap: 14px; padding: 22px 0; font-size: 16px;}
    .faq .mark {width: 18px; font-size: 17px;}
    .faq .arw {width: 24px; height: 24px; background-size: 20px;}
    .faq .a-box {gap: 14px; margin-bottom: 20px; padding: 20px 16px 20px 0;}
    .faq .a-box .mark {width: 34px; padding-left: 14px;}
    .faq .a-box .txt {font-size: 14px;}
}


/* ==========================================================================
   Contact (.contact) — 좌측: 연락처 정보 / 우측: 문의 폼 (.is-sent면 폼 대신 .done)
   ========================================================================== */
.contact .info {margin: 48px 0 0; border-top: 1px solid #111;}
.contact .info .row {display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #e5e5e5;}
.contact .info dt {flex: 0 0 72px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--key-color);}
.contact .info dd {flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.6; color: #222;}
.contact .info a {color: #222; text-decoration: none !important; transition: color 0.25s ease;}
.contact .info a:hover {color: var(--key-color);}

.contact .form {display: flex; flex-direction: column; gap: 36px; max-width: 820px;}
.contact .grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 32px;}
.contact .field {position: relative; min-width: 0; margin: 0; padding: 0; border: 0;}
.contact .label {display: block; margin: 0 0 12px; padding: 0; font-size: 15px; font-weight: 700; color: #111;}
/* default.css가 legend를 1px로 숨겨서(접근성용 초기화), 보이는 제목으로 쓰려면 되돌려야 함 */
.contact legend.label {position: static; width: auto; height: auto; overflow: visible; font-size: 15px !important; line-height: 1.3; color: #111;}
.contact .req {margin-left: 3px; color: var(--key-color);}
.contact .input {display: block; width: 100%; height: 56px; padding: 0 16px; border: 1px solid #dcdfe4; border-radius: 10px; background: #fff; font-size: 16px; color: #111; transition: border-color 0.25s ease, box-shadow 0.25s ease;}
.contact .input::placeholder {color: #b2b6bd;}
.contact .input:hover {border-color: #b9bec6;}
.contact .input:focus {outline: 0; border-color: var(--key-color); box-shadow: 0 0 0 4px rgba(56, 133, 244, 0.14);}
.contact .textarea {height: auto; min-height: 180px; padding: 16px; line-height: 1.7; resize: vertical;}

/* 문의 유형: 라디오를 알약 버튼처럼 */
.contact .types {display: flex; flex-wrap: wrap; gap: 8px;}
.contact .types label {position: relative; display: block; cursor: pointer;}
.contact .types input {position: absolute; opacity: 0; width: 1px; height: 1px;}
.contact .types span {display: block; padding: 0 24px; border: 1px solid #dcdfe4; border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 46px; color: #555; transition: all 0.25s ease;}
.contact .types label:hover span {border-color: #111; color: #111;}
.contact .types input:checked + span {border-color: #111; background: #111; color: #fff;}
.contact .types input:focus-visible + span {box-shadow: 0 0 0 4px rgba(56, 133, 244, 0.25);}

/* 개인정보 동의: 체크박스 커스텀 */
.contact .agree {display: flex; align-items: center; gap: 12px; cursor: pointer;}
.contact .agree input {position: absolute; opacity: 0; width: 1px; height: 1px;}
.contact .agree .box {position: relative; flex: none; width: 24px; height: 24px; border: 1.5px solid #c9cdd3; border-radius: 6px; background: #fff; transition: all 0.25s ease;}
.contact .agree .box::after {content: ""; display: block; position: absolute; top: 4px; left: 8px; width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transition: transform 0.2s ease;}
.contact .agree input:checked + .box {border-color: var(--key-color); background: var(--key-color);}
.contact .agree input:checked + .box::after {transform: rotate(45deg) scale(1);}
.contact .agree input:focus-visible + .box {box-shadow: 0 0 0 4px rgba(56, 133, 244, 0.25);}
.contact .agree .txt {font-size: 15px; font-weight: 500; color: #222;}
.contact .agree-note {margin: 10px 0 0 36px; font-size: 13px; line-height: 1.6; color: #8a8f98;}

/* 검증 오류: .field.is-error일 때만 메시지 + 빨간 테두리 */
.contact .error {display: none; margin: 8px 0 0; font-size: 13px; font-weight: 500; color: #e5484d;}
.contact .agree + .agree-note + .error {margin-left: 36px;}
.contact .field.is-error .error {display: block;}
.contact .field.is-error .input {border-color: #e5484d;}
.contact .field.is-error .input:focus {box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.14);}
.contact .field.is-error .types span {border-color: #f3b4b6;}
.contact .field.is-error .agree .box {border-color: #e5484d;}

.contact .submit {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 64px; padding: 0 28px; border-radius: 12px; background: #111; font-size: 17px; font-weight: 700; color: #fff; cursor: pointer; transition: background-color 0.3s ease;}
.contact .submit svg {width: 22px; height: 22px; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);}
.contact .submit:hover {background: var(--key-color);}
.contact .submit:hover svg {transform: translate(4px, -4px);}

/* 접수 완료 */
.contact .done {display: none; flex-direction: column; align-items: center; max-width: 820px; padding: 100px 20px; border-radius: 20px; background: #f6f7f9; text-align: center;}
.contact .right.is-sent .form {display: none;}
.contact .right.is-sent .done {display: flex;}
.contact .check {position: relative; display: block; width: 72px; height: 72px; margin-bottom: 28px; border-radius: 50%; background: var(--key-color);}
.contact .check::after {content: ""; display: block; position: absolute; top: 18px; left: 27px; width: 14px; height: 26px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(45deg);}
.contact .done-tit {font-size: 28px; font-weight: 700; color: #111;}
.contact .done-txt {margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: #555;}
.contact .again {margin-top: 36px; height: 48px; padding: 0 26px; border: 1px solid #111; border-radius: 999px; background: none; font-size: 15px; font-weight: 600; color: #111; cursor: pointer; transition: all 0.25s ease;}
.contact .again:hover {background: #111; color: #fff;}

.contact .m-head {display: none;}
@media all and (max-width: 1024px) {
    .contact .form, .contact .done {max-width: none;}
    /* 세로로 쌓일 때(<=1024px): 제목+설명(.m-head) → 문의 폼 → 연락처 정보 순서. 왼쪽 컬럼의 제목/설명은 숨기고 연락처 정보만 폼 아래에 둠 (PC는 좌우 배치 그대로) */
    .contact .right {order: -1;}
    .contact .m-head {display: block; margin-bottom: 36px;}
    .contact .left .head, .contact .left .desc {display: none;}
    .contact .info {margin-top: 0;}
}
@media all and (max-width: 640px) {
    .contact .info .row {flex-direction: column; gap: 6px; padding: 16px 0;}
    .contact .info dt {flex: none;}
    .contact .info dd {font-size: 15px;}
    .contact .form {gap: 28px;}
    .contact .grid {grid-template-columns: 1fr; gap: 28px;}
    .contact .input {height: 52px; font-size: 15px;}
    .contact .types span {padding: 0 20px; font-size: 14px; line-height: 42px;}
    .contact .agree-note {margin-left: 0;}
    .contact .agree + .agree-note + .error {margin-left: 0;}
    .contact .submit {height: 58px; font-size: 16px;}
    .contact .done {padding: 70px 20px;}
    .contact .done-tit {font-size: 22px;}
}

.contact .agree-note .more {padding: 0 0 1px; border: 0; border-bottom: 1px solid currentColor; background: none; font-size: inherit; color: #555; cursor: pointer; transition: color 0.25s ease;}
.contact .agree-note .more:hover {color: var(--key-color);}


/* ==========================================================================
   Portfolio 클릭 동작 — 유형별로 다른 반응 (홈페이지=새 탭 / 솔루션=설명 모달 / 디자인=썸네일에서 커지는 확대 모달)
   모달은 포트폴리오 전용(.pf_*)이고 sub.js 가 제어. 공통 모달(.modal_overlay)과 코드를 분리한 이유: 닫을 때 썸네일 자리로 돌아가는 모션 때문
   ========================================================================== */
html {scrollbar-gutter: stable;}
html.pf-lock {overflow: hidden;}

/* 마우스 올릴 때 우하단 아이콘: 홈페이지 ↗(기본) / 디자인 확대 / 솔루션 + */
.portfolio .link[data-pf="design"] .thumb::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");}
.portfolio .link[data-pf="solution"] .thumb::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");}

.pf_modal {position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; pointer-events: none; transition: visibility 0s 0.5s;}
.pf_modal.is-open {visibility: visible; pointer-events: auto; transition-delay: 0s;}
.pf_dim {position: absolute; inset: 0; background: rgba(8, 10, 20, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.45s ease;}
.pf_modal.is-open .pf_dim {opacity: 1;}
.pf_box {position: relative; z-index: 1; overflow: hidden; border-radius: 24px; background: #fff; color: #111; letter-spacing: -0.02em;}
.pf_box:focus {outline: 0;}
.pf_close {position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #f2f3f5; cursor: pointer; transition: background-color 0.25s ease;}
.pf_close:hover {background: #e4e6ea;}
.pf_close::before, .pf_close::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: #111;}
.pf_close::before {transform: rotate(45deg);}
.pf_close::after {transform: rotate(-45deg);}
.pf_tit {display: block; font-weight: 700; color: #111;}

/* 솔루션 모달: 좌(작은 이미지) / 우(제목+설명). 아래에서 살짝 떠오르며 나타남 */
.pf_modal--solution .pf_box {display: flex; gap: 40px; width: min(880px, 100%); max-height: 100%; overflow-y: auto; padding: 44px; opacity: 0; transform: translateY(28px) scale(0.97); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);}
.pf_modal--solution.is-open .pf_box {opacity: 1; transform: none;}
.pf_modal--solution .pf_close {position: absolute; top: 18px; right: 18px; z-index: 2;}
.pf_media {display: flex; flex: 0 0 300px; align-items: center; justify-content: center; align-self: flex-start; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #f1f3f6;}
.pf_media img {display: block; max-width: 100%; max-height: 100%; object-fit: contain;}
.pf_body {flex: 1; min-width: 0; padding: 6px 36px 0 0;}
.pf_eyebrow {display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--key-color);}
.pf_modal--solution .pf_tit {font-size: 30px; line-height: 1.3;}
.pf_desc {margin-top: 20px; font-size: 16px; line-height: 1.75; color: #444; white-space: pre-line;}

/* 디자인 모달: 썸네일(.pf_ghost)이 카드 자리에서 이 박스 크기로 커진 뒤 박스 내용이 나타남(.is-ready). 확대 이미지는 크기 제각각이라 세로로 쌓아 스크롤 */
.pf_modal--design {padding: 24px;}
.pf_modal--design .pf_box {display: flex; flex-direction: column; width: min(1100px, 100%); height: min(100%, 960px); opacity: 0; transition: opacity 0.2s ease;}
.pf_modal--design.is-ready .pf_box {opacity: 1; transition-duration: 0.3s;}
.pf_head {display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 28px; border-bottom: 1px solid #eceef1; background: #fff;}
.pf_modal--design .pf_tit {min-width: 0; overflow: hidden; font-size: 20px; white-space: nowrap; text-overflow: ellipsis;}
.pf_scroll {flex: 1; min-height: 0; overflow-y: auto; background: #f1f3f6; overscroll-behavior: contain;}
.pf_imgs {display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 24px; list-style: none;}
.pf_imgs li {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 100%;}
.pf_fig {display: flex; max-width: 100%; min-width: min(100%, 360px); min-height: 220px; border-radius: 6px; background: #e1e4ea;}
.pf_imgs li.is-loaded .pf_fig {min-width: 0; min-height: 0; background: none;}
/* 이미지별 제목 알약: 이미지 위(바깥) 가운데 정렬. 카드 라벨(.tags)과 같은 알약 + 파란 점. 길면 한 줄 말줄임.
   .pf_cap 은 width:0 + min-width:100% 로 li(=이미지) 폭에 맞춰 늘어나되 li 폭을 키우지 않고, 알약(.pf_pill)은 그 안에서 글자만큼만 차지(최대 이미지 폭) */
.pf_cap {display: block; width: 0; min-width: 100%; text-align: center;}
.pf_pill {display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 15px 8px 13px; border: 1px solid #e0e4ea; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; line-height: 1; color: #111; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);}
.pf_pill::before {content: ""; display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--key-color);}
.pf_pill .t {min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.pf_imgs img {display: block; max-width: 100%; height: auto; opacity: 0; transition: opacity 0.4s ease;}
.pf_imgs li.is-loaded img {opacity: 1;}
.pf_ghost {position: fixed; z-index: 2101; margin: 0; overflow: hidden; background: #dfe3ea; pointer-events: none;}
.pf_ghost img {display: block; width: 100%; height: 100%; object-fit: cover;}

@media all and (max-width: 640px) {
    .pf_modal {padding: 12px;}
    .pf_modal--solution .pf_box {flex-direction: column; gap: 24px; padding: 20px 20px 28px;}
    .pf_media {flex: none; width: 100%; margin-top: 44px;}
    .pf_body {padding-right: 0;}
    .pf_modal--solution .pf_tit {font-size: 24px;}
    .pf_modal--design {padding: 10px;}
    .pf_head {padding-left: 20px;}
    .pf_imgs {padding: 12px; gap: 18px;}
    .pf_pill {padding: 7px 13px 7px 11px; font-size: 12px;}
}
@media (prefers-reduced-motion: reduce) {
    .pf_dim, .pf_modal--solution .pf_box, .pf_modal--design.is-ready .pf_box {transition-duration: 0.01s;}
}

/* 문의 폼: 서버 전송 실패 안내 */
.contact .form-error {margin: 16px 0 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: #e5484d;}
.contact .form-error[hidden] {display: none;}
.contact .submit:disabled {opacity: 0.6; cursor: default;}