html,
body,
textarea {font-family: 'Pretendard', sans-serif;}


.inner {max-width: 1262px;}

.portfolio-tit-section {position: relative; margin-bottom: clamp(50px, 4.58vw, 88px);}
.portfolio-tit-section span {display: block; margin-bottom: 20px; font-size: clamp(12px, 0.73vw, 14px); font-weight: 500; letter-spacing: 0.18em; line-height: 103%; color: #2563FF;}
.portfolio-tit-section h2 {max-width: calc(100% - 200px); word-break: keep-all; display: block; margin: 0; font-size: clamp(32px, 3vw + 0.5rem, 64px); line-height: 103%; font-weight: 800; color: #FAFAFA;}
.portfolio-tit-section p {word-break: keep-all; font-size: clamp(18px, 1.15vw, 22px); line-height: 150%; color: #D4D4D4; margin-top: 20px;}
.portfolio-tit-section .request-project {padding-bottom: 5px; margin-bottom: -5px; position: absolute; right: 0; bottom: 0; display: flex; align-items: center;}
.portfolio-tit-section .request-project::after {transition: width 0.4s ease; height: 2px; width: 0; content: ''; position: absolute; left: 0; bottom: 0; background-color: #E5E5E5;}
.portfolio-tit-section .request-project span {margin-bottom: 0; font-size: clamp(16px, 1.04vw, 20px); line-height: 150%; color: #E5E5E5; letter-spacing: normal;}
.portfolio-tit-section .request-project:hover::after {width: 100%;}
/* 포폴 리스트 */
.sub-container:has(.portfolio-list-section) {min-height: 100vh; background-color: #0A0A0A; padding-block: clamp(100px, 9.896vw, 190px) clamp(60px, 5.208vw, 100px);}
.portfolio-list-section .portfolio-tab {margin-bottom: clamp(30px, 3.13vw, 60px); margin-top: -14px; padding-inline: 20px; display: flex; align-items: center; column-gap: 40px;}
.portfolio-list-section .portfolio-tab .tab-btn {position: relative; transition: color 0.2s; padding-block: clamp(8px, 0.73vw, 14px); padding-inline: clamp(4px, 0.52vw, 10px); font-size: clamp(17px, 1.04vw, 20px); font-weight: 500; line-height: 150%; color: #A3A3A3;}
.portfolio-list-section .portfolio-tab .tab-btn::after {transition: width 0.2s; content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #FAFAFA;}
.portfolio-list-section .portfolio-tab .tab-btn.active {color: #FAFAFA; font-weight: 600;}
.portfolio-list-section .portfolio-tab .tab-btn:hover::after,
.portfolio-list-section .portfolio-tab .tab-btn.active::after {width: 100%;}
.portfolio-list-section .portfolio-tab .tab-btn:hover {color: #FAFAFA;}
.portfolio-list-section .portfolio-list {margin-bottom: clamp(60px, 5.21vw, 100px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.08vw, 40px) clamp(16px, 1.25vw, 24px);}
.portfolio-list-section .portfolio-card {cursor: pointer; position: relative; width: 100%; height: auto; aspect-ratio: 619 / 396; overflow: hidden;}
.portfolio-list-section .portfolio-card img {width: 100%; height: 100%; object-fit: cover;}
.portfolio-list-section .portfolio-card .portfolio-info {transition: background-color 0.4s ease, padding-bottom 0.4s ease; display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; justify-content: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0A0A0A99; padding: 32px;}
.portfolio-list-section .portfolio-card .portfolio-info span {font-size: 14px; font-weight: 500; line-height: 103%; color: #FAFAFACC;}
.portfolio-list-section .portfolio-card .portfolio-info strong {font-size: clamp(24px, 1.46vw, 28px); font-weight: 700; line-height: 103%; color: #FAFAFACC;}
.portfolio-list-section .portfolio-card:hover .portfolio-info {background-color: #0A0A0A1A; padding-bottom: 38px;}
.portfolio-list-section .more-btn {transition: transform 0.4s ease; font-size: clamp(16px, 0.94vw, 18px); font-weight: 500; line-height: 150%; color: #fff; margin-inline: auto; display: flex; align-items: center; column-gap: 4px;}
.portfolio-list-section .more-btn:hover {transform: translateY(8px);}

/* 포폴 뷰 */
.sub-container:has(.portfolio-view-section) {background-color: #0A0A0A; padding-block: clamp(100px, 9.896vw, 190px) clamp(115px, 10.417vw, 200px);}
.portfolio-list-section .portfolio-tab {margin-bottom: clamp(30px, 3.13vw, 60px); margin-top: -14px; padding-inline: 20px; display: flex; align-items: center; column-gap: 40px;}
.portfolio-list-section .portfolio-tab .tab-btn {position: relative; transition: color 0.2s; padding-block: clamp(8px, 0.73vw, 14px); padding-inline: clamp(4px, 0.52vw, 10px); font-size: clamp(17px, 1.04vw, 20px); font-weight: 500; line-height: 150%; color: #A3A3A3;}
.portfolio-list-section .portfolio-tab .tab-btn::after {transition: width 0.2s; content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #FAFAFA;}
.portfolio-list-section .portfolio-tab .tab-btn.active {color: #FAFAFA; font-weight: 600;}
.portfolio-list-section .portfolio-tab .tab-btn:hover::after,
.portfolio-list-section .portfolio-tab .tab-btn.active::after {width: 100%;}
.portfolio-list-section .portfolio-tab .tab-btn:hover {color: #FAFAFA;}
.portfolio-list-section .portfolio-list {margin-bottom: clamp(60px, 5.21vw, 100px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.08vw, 40px) clamp(16px, 1.25vw, 24px);}
.portfolio-list-section .portfolio-card {cursor: pointer; position: relative; width: 100%; height: auto; aspect-ratio: 619 / 396; overflow: hidden;}
.portfolio-list-section .portfolio-card img {width: 100%; height: 100%; object-fit: cover;}
.portfolio-list-section .portfolio-card .portfolio-info {transition: background-color 0.4s ease, padding-bottom 0.4s ease; display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; justify-content: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0A0A0A99; padding: 32px;}
.portfolio-list-section .portfolio-card .portfolio-info span {font-size: 14px; font-weight: 500; line-height: 103%; color: #FAFAFACC;}
.portfolio-list-section .portfolio-card .portfolio-info strong {font-size: clamp(24px, 1.46vw, 28px); font-weight: 700; line-height: 103%; color: #FAFAFACC;}
.portfolio-list-section .portfolio-card:hover .portfolio-info {background-color: #0A0A0A1A; padding-bottom: 38px;}
.portfolio-list-section .more-btn {transition: transform 0.4s ease; font-size: clamp(16px, 0.94vw, 18px); font-weight: 500; line-height: 150%; color: #fff; margin-inline: auto; display: flex; align-items: center; column-gap: 4px;}
.portfolio-list-section .more-btn:hover {transform: translateY(8px);}

/* 포폴 뷰 */
.sub-container:has(.portfolio-view-section) {padding-block: clamp(100px, 9.896vw, 190px) clamp(115px, 10.417vw, 200px);}
.portfolio-view-section .portfolio-info-tit span {font-size: clamp(12px, 0.73vw, 14px); font-weight: 500; line-height: 103%; letter-spacing: 0.18em; color: #A3A3A3;}
.portfolio-view-section .portfolio-info-tit h3 {font-size: clamp(24px, 1.88vw, 36px); font-weight: 700; color: #FAFAFA; margin-top: 12px;}
.portfolio-view-section .portfolio-info-tit p {font-size: clamp(16px, 0.94vw, 18px); font-weight: 400; color: #FAFAFA; line-height: 150%; margin-top: 24px;}
.portfolio-view-section .design-box {width: 100%; height: auto; overflow: hidden;}
.portfolio-view-section .design-box img {width: 100%; height: 100%; object-fit: cover; object-position: top center;}
.portfolio-view-section .preview-wrap,
.portfolio-view-section .design-system-wrap,
.portfolio-view-section .sub-design-wrap {margin-bottom: clamp(120px, 10.42vw, 200px);}
.portfolio-view-section .main-design-wrap,
.portfolio-view-section .faq-wrap {margin-bottom: clamp(80px, 8.33vw, 160px);}
.portfolio-view-section .summary-wrap {margin-bottom: clamp(100px, 7.29vw, 140px);}
.portfolio-view-section .preview-wrap .design-box {aspect-ratio: 1262 / 720;}
.portfolio-view-section .preview-wrap .preview-info {margin-top: 48px; display: flex; align-items: flex-start; justify-content: space-between;}
.portfolio-view-section .preview-wrap .preview-info .info-wrap span {font-size: clamp(12px, 0.73vw, 14px); font-weight: 500; color: #A3A3A3; line-height: 103%; letter-spacing: 0.18em;}
.portfolio-view-section .preview-wrap .preview-info .info-wrap strong {display: block; margin-top: clamp(8px, 0.63vw, 12px); font-weight: 500; font-size: clamp(20px, 1.25vw, 24px); line-height: 29px; color: #FAFAFA;}
.portfolio-view-section .preview-wrap .preview-info .link-wrap {display: flex; column-gap: 32px; align-items: center;}
.portfolio-view-section .preview-wrap .preview-info .link-wrap > * {position: relative; padding-bottom: 5px; margin-bottom: -5px; display: flex; align-items: center; column-gap: 6px;}
.portfolio-view-section .preview-wrap .preview-info .link-wrap > *::after {transition: width 0.4s ease; height: 2px; width: 0; content: ''; position: absolute; left: 0; bottom: 0; background-color: #D4D4D4;}
.portfolio-view-section .preview-wrap .preview-info .link-wrap > * span {font-size: clamp(16px, 0.94vw, 18px); color: #D4D4D4;}
.portfolio-view-section .preview-wrap .preview-info .link-wrap > *:hover::after {width: 100%;}
.portfolio-view-section .design-system-wrap .design-guide {margin-top: 100px; display: flex; align-items: flex-start; justify-content: space-between;}
.portfolio-view-section .design-system-wrap .design-guide > * {width: 50%;}
.portfolio-view-section .design-system-wrap .design-guide .guide-tit {margin-bottom: 40px; font-size: 16px; font-weight: 500; line-height: 103%; letter-spacing: 0.18em; color: #FAFAFA;}
.portfolio-view-section .design-system-wrap .typography-wrap .typo-info {margin-bottom: 60px;}
.portfolio-view-section .design-system-wrap .typography-wrap .typo-info span {font-size: clamp(36px, 3.75vw, 72px); font-weight: 600; line-height: 130%; color: #FAFAFA;}
.portfolio-view-section .design-system-wrap .typography-wrap .typo-info p {margin-top: 8px; font-size: clamp(16px, 0.94vw, 18px); line-height: 150%; color: #D4D4D4;}
.portfolio-view-section .design-system-wrap .typography-wrap .typo-ex {display: flex; align-items: center; column-gap: 30px;}
.portfolio-view-section .design-system-wrap .typography-wrap .typo-ex span {font-size: clamp(36px, 3.75vw, 72px); font-weight: 700; line-height: 150%; color: #FAFAFA;}
.portfolio-view-section .design-system-wrap .typography-wrap .typo-ex ul {display: flex; flex-direction: column; row-gap: 6px;}
.portfolio-view-section .design-system-wrap .typography-wrap .typo-ex li {font-size: 14px; line-height: 150%; font-weight: 500; letter-spacing: 0.15em; color: #A3A3A3;}
.portfolio-view-section .design-system-wrap .color-wrap h5 {font-size: 16px; line-height: 150%; color: #D4D4D4; margin-bottom: 20px;}
.portfolio-view-section .design-system-wrap .color-wrap .color-preview {height: auto; aspect-ratio: 1/1; border-radius: 2px;}
.portfolio-view-section .design-system-wrap .color-wrap .color-info strong {font-size: 14px; font-weight: 600; line-height: 150%; color: #FAFAFA;}
.portfolio-view-section .design-system-wrap .color-wrap .color-info span {display: block; margin-top: 10px; font-size: 14px; line-height: 150%; color: #A3A3A3;}
.portfolio-view-section .design-system-wrap .color-wrap .primary-color .color-box {display: flex;align-items: center; column-gap: 40px;}
.portfolio-view-section .design-system-wrap .color-wrap .primary-color .color-preview {width: 100px;}
.portfolio-view-section .design-system-wrap .color-wrap .txt-color {margin-top: 60px;}
.portfolio-view-section .design-system-wrap .color-wrap .txt-color .color-list {display: flex; align-items: center; column-gap: 20px;}
.portfolio-view-section .design-system-wrap .color-wrap .txt-color .color {display: flex; flex-direction: column; align-items: center;}
.portfolio-view-section .design-system-wrap .color-wrap .txt-color .color-preview {width: 60px;}
.portfolio-view-section .main-design-wrap .design-box {margin-top: clamp(24px, 2.6vw, 50px); aspect-ratio: 1262/680;}
.portfolio-view-section .sub-design-wrap {display: flex; align-items: flex-start; column-gap: 60px; row-gap: clamp(24px, 2.6vw, 50px);}
.portfolio-view-section .sub-design-wrap .portfolio-info-tit {flex-shrink: 0;}
.portfolio-view-section .sub-design-wrap .sub-design-list {padding-top: 36px; display: flex; flex-direction: column; row-gap: clamp(24px, 4.17vw, 80px);}
.portfolio-view-section .sub-design-wrap .design-box {aspect-ratio: 1028 / 620;}
.portfolio-view-section .summary-wrap p {word-break: keep-all; margin-top: clamp(24px, 2.08vw, 40px); padding-left: 24px; border-left: 2px solid #A3A3A3; font-size: clamp(16px, 0.94vw, 18px); line-height: 150%; color: #D4D4D4;}
.portfolio-view-section .faq-wrap .faq-list {margin-top: clamp(40px, 3.13vw, 60px); display: flex; flex-direction: column;}
.portfolio-view-section .faq-wrap .faq-list .faq + .faq {margin-top: 48px; padding-top: 48px; border-top: 1px solid #404040;}
.portfolio-view-section .faq-wrap .faq-list .faq strong {word-break: keep-all; font-size: clamp(20px, 1.15vw, 22px); font-weight: 600; line-height: 103%; color: #FAFAFA;}
.portfolio-view-section .faq-wrap .faq-list .faq p {word-break: keep-all; margin-top: 24px; font-size: clamp(16px, 0.94vw, 18px); line-height: 150%; color: #A3A3A3;}
.portfolio-view-section .nav-wrap {display: flex; align-items: center; column-gap: 24px;}
.portfolio-view-section .nav-wrap a {display: flex; flex-direction: column; row-gap: clamp(20px, 1.56vw, 30px);}
.portfolio-view-section .nav-wrap .project-label {width: fit-content; transition: transform 0.4s ease; position: relative; padding-bottom: 5px; margin-bottom: -5px; display: flex; align-items: center; column-gap: 12px; font-size: clamp(12px, 0.94vw, 18px); font-weight: 500; line-height: 103%; letter-spacing: 0.18em; color: #FAFAFA;}
.portfolio-view-section .nav-wrap .project-label::after {transition: width 0.4s ease; height: 2px; width: 0; content: ''; position: absolute; left: 0; bottom: 0; background-color: #FAFAFA;}
.portfolio-view-section .nav-wrap a:hover .project-label::after {width: 100%;}
.portfolio-view-section .nav-wrap .project-label img {width: clamp(24px, 1.875vw, 36px); height: clamp(24px, 1.875vw, 36px);}
.portfolio-view-section .nav-wrap .project-preview {cursor: pointer; position: relative; width: 100%; height: clamp(200px, 18.75vw, 360px); overflow: hidden;}
.portfolio-view-section .nav-wrap .project-preview img {width: 100%; height: 100%; object-fit: cover;}
.portfolio-view-section .nav-wrap .project-preview .project-info {transition: background-color 0.4s ease, padding-bottom 0.4s ease; display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; justify-content: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0A0A0A; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 1) 100%); padding: clamp(16px, 1.56vw, 30px) clamp(18px, 1.56vw, 30px);}
.portfolio-view-section .nav-wrap .project-preview .project-info span {font-size: clamp(12px, 0.729vw, 14px); font-weight: 500; line-height: 103%; color: #FAFAFACC;}
.portfolio-view-section .nav-wrap .project-preview .project-info strong {font-size: clamp(18px, 1.875vw, 36px); font-weight: 700; line-height: 103%; color: #FAFAFACC;}
.portfolio-view-section .nav-wrap a:hover .project-preview .project-info {padding-bottom: clamp(24px, 2.08vw, 40px);}
.portfolio-view-section .nav-wrap .prev-project {width: calc(30% - 24px);}
.portfolio-view-section .nav-wrap .prev-project .project-label {color: #737373;}
.portfolio-view-section .nav-wrap .prev-project .project-label::after {background-color: #737373;}
.portfolio-view-section .nav-wrap .next-project {width: 70%; align-items: flex-end;}
.portfolio-view-section .nav-wrap .next-project .project-label {color: #FAFAFA;}

.portfolio-view-section .preview-wrap .design-box.video-design-box {position: relative;}
.portfolio-view-section .preview-wrap .design-box.video-design-box img {position: absolute; top: 0; left: 0; object-fit: contain;}
.portfolio-view-section .preview-wrap .design-box.video-design-box.is-ready img {display: none;}
.portfolio-view-section .preview-wrap .design-box.video-design-box video {width: 100%; height: 100%; object-fit: contain;}

@media screen and (max-width: 1024px) {
    .portfolio-view-section .design-system-wrap .design-guide {flex-direction: column; align-items: flex-start;}
    .portfolio-view-section .design-system-wrap .design-guide > * {width: 100%;}
    .portfolio-view-section .design-system-wrap .color-wrap {margin-top: clamp(44px, 3.13vw, 60px); padding-top: clamp(44px, 3.13vw, 60px); border-top: 1px solid #404040;}
}

@media screen and (max-width: 768px) {
    .portfolio-tit-section .request-project {display: none;}
    .portfolio-tit-section h2 {max-width: unset;}
    .portfolio-tit-section .request-project::after,
    .portfolio-view-section .preview-wrap .preview-info .link-wrap > *::after {height: 1px;}

    .portfolio-list-section .portfolio-tab {max-width: 435px; column-gap: 0; justify-content: space-between; padding-inline: 0;}
    .portfolio-list-section .portfolio-list {grid-template-columns: repeat(1, 1fr);}
    .portfolio-list-section .portfolio-card .portfolio-info {padding: 28px;}
    .portfolio-list-section .portfolio-card .portfolio-info span {font-size: 13px;}
    .portfolio-list-section .portfolio-card:hover .portfolio-info {padding-bottom: 34px;}

    .portfolio-view-section .preview-wrap .preview-info {margin-top: 40px; flex-direction: column;}
    .portfolio-view-section .preview-wrap .preview-info .info-wrap + .info-wrap {margin-top: 24px;}
    .portfolio-view-section .preview-wrap .preview-info .link-wrap {margin-top: 36px;}
    .portfolio-view-section .sub-design-wrap {flex-direction: column;}
    .portfolio-view-section .sub-design-wrap .sub-design-list {padding-top: 0;}

    .portfolio-view-section .nav-wrap {flex-direction: column-reverse; row-gap: clamp(12px, 1.25vw, 24px);}
    .portfolio-view-section .nav-wrap a {position: relative;}
    .portfolio-view-section .nav-wrap .project-label::after {display: none;}
    .portfolio-view-section .nav-wrap .project-label {position: absolute; top: clamp(16px, 1.56vw, 30px); right: clamp(18px, 1.56vw, 30px); z-index: 10;}
    .portfolio-view-section .nav-wrap .project-label img {filter: brightness(0) invert(1);}
    .portfolio-view-section .nav-wrap .prev-project,
    .portfolio-view-section .nav-wrap .next-project {width: 100%;}
    .portfolio-view-section .nav-wrap .prev-project {height: 110px;}
    .portfolio-view-section .nav-wrap .next-project {height: 160px;}
    .portfolio-view-section .nav-wrap .prev-project .project-label {color: #FAFAFA; left: clamp(18px, 1.56vw, 30px); right: unset;}
    .portfolio-view-section .nav-wrap .prev-project .project-info {align-items: flex-end;}
    .portfolio-view-section .nav-wrap .prev-project .project-info span {font-size: 10px;}
    .portfolio-view-section .nav-wrap .prev-project .project-info strong {font-size: 16px;}
}

@media screen and (max-width: 375px) {
    .portfolio-list-section .portfolio-tab .tab-btn.active {font-size: 14px;}
}