/* front-page.css — 메인 페이지 섹션별 스타일 */
/* 원본 poedit.co.kr에서 추출한 값 그대로 사용 */

/* ========== 프론트페이지 헬퍼 ========== */
.section-label {
    font-size: 24px;
    font-weight: 700;
    color: #d6d6d6;
    letter-spacing: -0.025em;
    line-height: var(--lh-1);
}
.section-heading {
    font-size: 40px;
    font-weight: 700;
    line-height: var(--lh-40);
    margin-top: 15px;
    color: #111111;
    letter-spacing: -0.025em;
}

/* ========== 섹션 1: 히어로 ========== */
.hero-section {
    position: relative;
    overflow: hidden;
}
.mobile-hero { display: none; }
.swiper-container {
    width: 100%;
    height: 692px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.swiper-container .swiper-wrapper,
.swiper-container .swiper-slide { height: 100%; }
.swiper-container .swiper-slide {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.content-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    position: relative;
    z-index: 2;
}
.slide-left {
    width: 43.3333%;
    height: 596px;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 1.5s ease 0.7s, transform 1.5s ease 0.7s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.swiper-slide-active .slide-left {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.slide-left h2 {
    font-size: 48px;
    margin: 0;
    font-weight: 700;
    line-height: var(--lh-1);
    color: #111111;
}
.slide-left h2 + h2 { margin-top: 15px; color: #0C9384; }
.slide-left h2 + p { margin-top: 28px; }
.slide-left p {
    font-size: 24px;
    color: #767676;
    font-weight: 400;
    margin: 0;
    line-height: var(--lh-1);
}
.slide-left .btn {
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 151px;
    height: 50px;
    background: #0C9384;
    color: #ffffff;
    border-radius: 99px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    line-height: var(--lh-1);
    gap: 0;
    transition: background 0.3s;
}
.slide-left .btn:hover { background: #0A7A6E; }
.slide-left .btn img { width: 24px; height: 24px; }
.slide-right {
    position: fixed;
    top: 0;
    right: 0;
    height: 692px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.swiper-slide-active .slide-right {
    opacity: 1;
    pointer-events: auto;
}
.slide-right img {
    height: 692px;
    /* 이미지 좌측 끝을 본문 1280 컨테이너 안쪽 512px 지점(=컨테이너 오른쪽에서 768px)에 정렬 */
    width: calc(50vw + 128px);
    max-width: 1408px;
    object-fit: cover;
    display: block;
    border-bottom-left-radius: 70px;
}
.slide-meta-wrapper {
    position: absolute;
    bottom: 80px;
    left: calc((100% - 1280px) / 2);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 20;
}
.swiper-counter { font-size: 14px; font-weight: 300; color: #767676; white-space: nowrap; line-height: var(--lh-1); }
.swiper-counter .current { color: #111111; font-weight: 400; }
.progress-bar-wrapper {
    width: 268px;
    height: 2px;
    background-color: #d6d6d6;
    position: relative;
}
.progress-bar {
    height: 2px;
    background: #111111;
    width: 0%;
    position: absolute;
    top: 0;
    left: 0;
}
.arrow-group { display: flex; align-items: center; gap: 20px; }
.arrow-group button {
    background: none;
    border: none;
    padding: 0;
    width: 8px;
    height: 16px;
    cursor: pointer;
}
.arrow-group img { width: 8px; height: 16px; display: block; }
.swiper-button-prev,
.swiper-button-next { display: none !important; }

/* ========== 섹션 2: 상담현황 ========== */
.inquiry-status-section {
    padding: 120px 0 0;
}
.inquiry-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: var(--lh-1);
    padding: 32px 80px;
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 100px;
    background: #f6f6f6;
    height: 86px;
}
.inquiry-status .fixed-item {
    flex-shrink: 0;
    white-space: nowrap;
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    line-height: var(--lh-1);
}
.inquiry-status .sliding-item {
    position: relative;
    overflow: hidden;
    height: 30px;
    flex-grow: 1;
    margin-left: 60px;
}
.sliding-item .sliding-content {
    position: absolute;
    top: 0;
    width: 100%;
}
.sliding-content .message-pair {
    display: flex;
    align-items: center;
    height: 30px;
    width: 100%;
    justify-content: space-between;
}
/* 각 셀 = 한 줄만큼만 보이게 잘라내고(overflow:hidden), 내부(.mp-inner)를 세로로 굴린다.
   → 내용/날짜가 각자 자기 줄 안에서만 슬라이드(제목 줄로 침범 안 함). */
.message-pair .mp-cell { overflow: hidden; height: 30px; }
.message-pair .mp-cell .mp-inner {
    line-height: 30px;
    font-size: 18px;
    font-weight: 400;
    color: #222;
    white-space: nowrap;
}
.message-pair .mp-text { flex: 1; min-width: 0; }
.message-pair .mp-text .mp-inner { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.message-pair .mp-date { flex-shrink: 0; }
.message-pair .mp-date .mp-inner { text-align: right; }

/* ========== 섹션 3: 소개 타이틀 ========== */
.intro-title-section {
    padding: 160px 0;
    text-align: center;
}
.intro-title-inner {
    max-width: 1280px;
    margin: 0 auto;
}
.intro-subtitle {
    font-size: 32px;
    font-weight: 700;
    color: #7a7a7a;
    margin: 0;
    line-height: var(--lh-1);
}
.intro-heading {
    font-size: 40px;
    font-weight: 700;
    color: #111;
    margin: 0;
    padding-top: 15px;
    letter-spacing: -0.025em;
    line-height: var(--lh-1);
}
.intro-logo-cloud {
    max-width: 1280px;
    margin: 60px auto 0;
    padding: 0;
}
.intro-logo-cloud img { width: 100%; height: auto; }
.logo-mobile { display: none; }

/* ========== 섹션 4: 통계 카운터 ========== */
.stats-section {
    padding: 80px 0;
    background: url('../../assets/images/그라디언트_배경.png') center / cover no-repeat;
}
.stats-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
}
.stat-item {
    width: 320px;
    height: 87px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    position: relative;
}
.stat-label {
    font-size: 20px;
    font-weight: 400;
    color: #767676;
    margin-bottom: 8px;
    line-height: var(--lh-1);
}
.stat-number {
    display: flex;
    align-items: center;
    justify-content: center;
}
.count-num-item-wrap {
    display: inline-block;
    overflow: hidden;
    height: 52px;
    width: 32px;
    margin: 0;
}
.count-num-item-box {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: transform 2.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.count-num-item {
    font-size: 52px;
    font-weight: 700;
    color: #0C9384;
    height: 52px;
    line-height: var(--lh-1);
    text-align: center;
    letter-spacing: -0.025em;
}
.plus {
    font-size: 48px;
    font-weight: 700;
    color: #0C9384;
    line-height: 1;
    margin-left: 4px;
}
.percent {
    font-size: 32px;
    font-weight: 700;
    color: #0C9384;
    line-height: 1;
    margin-left: 4px;
}
.stat-divider {
    width: 1px;
    height: 87px;
    background-color: rgba(118, 118, 118, 0.3);
}

/* ========== 섹션 5: 포트폴리오 ========== */
.portfolio-section {
    padding: 160px 0;
    overflow: hidden;
}
.portfolio-section .section-label {
    color: #d6d6d6;
}
.portfolio-inner {
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 80px;
}
.portfolio-inner .section-heading {
    margin-top: 0;
}
.portfolio-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    gap: 160px;
    align-items: flex-start;
}
.portfolio-more {
    display: flex;
    justify-content: center;
}
.portfolio-col {
    display: flex;
    flex-direction: column;
    gap: 150px;
    flex: 1;
}
.portfolio-col-left {
    padding-top: 160px;
}
.portfolio-card {
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.portfolio-thumb {
    overflow: hidden;
    border-radius: 7px;
    line-height: 0;
    cursor: pointer;
}
.portfolio-card img {
    display: block;
    width: 560px;
    height: 560px;
    object-fit: cover;
    border-radius: 7px;
    transition: transform 0.4s ease;
}
.portfolio-card:hover img {
    transform: scale(1.06);
}
.portfolio-card-wide .portfolio-thumb {
    width: 440px;
}
.portfolio-card-wide img {
    width: 440px;
    height: 280px;
}
.portfolio-card h3 {
    order: 2;
    font-size: 18px;
    font-weight: 400;
    color: #767676;
    margin: 15px 0 0 0;
    letter-spacing: -0.025em;
    line-height: var(--lh-1);
}
.portfolio-card p {
    order: 1;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 20px 0 0 0;
    line-height: var(--lh-1);
}

/* ========== 섹션 6: 뉴스 캐러셀 ========== */
.news-section {
    padding: 160px 0;    
    background-color: #F6F6F6;
}
.news-section .section-label {
    color: #0C9384;
}
.news-section .section-heading {
    line-height: var(--lh-1);
    margin-top: 20px;
}
.news-header {
    max-width: 1280px;
    margin: 0 auto 60px;
    padding: 0;
}
.scroll-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    cursor: grab;
}
.scroll-wrap:active,
.scroll-wrap.active { cursor: grabbing; }
.scroll-wrap::-webkit-scrollbar { display: none; }
.news-carousel-track {
    display: inline-flex;
    gap: 40px;
    padding-left: calc((100vw - 1280px) / 2);
    padding-right: calc((100vw - 1280px) / 2);
}
.news-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.news-card {
    width: 400px;
    flex: 0 0 auto;
}
.news-imgbox {
    width: 100%;
    height: 230px;
    overflow: hidden;
    border-radius: 7px;
}
.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.news-card:hover .news-img { transform: scale(1.05); }
.news-meta {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 20px;
}
.news-num {
    font-size: 40px;
    font-weight: 700;
    color: rgba(12, 147, 132, 0.2);
    letter-spacing: -0.025em;
    line-height: var(--lh-1);
    flex-shrink: 0;
    transform: translateY(10px);
    transition: color 0.3s ease;
}
.news-title {
    font-size: 20px;
    font-weight: 700;
    line-height: var(--lh-20);
    letter-spacing: -0.025em;
    color: #111111;
    white-space: normal;
    transition: color 0.3s ease;
}
.news-link:hover .news-num,
.news-link:hover .news-title { color: #0C9384; }
.scroll-progress-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 80px auto 0;
    height: 2px;
    background: rgba(12, 147, 132, 0.2);
    position: relative;
}
.scroll-progress-bar {
    height: 2px;
    background: #0C9384;
    width: 0%;
    transition: width 0.1s ease-out;
}

/* ========== 섹션 7: 고객 리뷰 ========== */
.review-section {
    padding: 0;
    height: 788px;
}
.review-section .section-label {
    color: rgba(118, 118, 118, 0.3);
}
.review-section-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
}
.review-left {
    flex: 0 0 auto;
    width: 380px;
    padding-top: 0;
}
.review-left .section-heading {
    margin-top: 15px;
    margin-bottom: 40px;
    font-size: 40px;
    font-weight: 400;
    line-height: var(--lh-40);
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 16px 30px;
    border: none;
    border-radius: 100px;
    font-size: 18px;
    font-weight: 500;
    line-height: var(--lh-1);
    color: #fff;
    background: #0C9384;
    text-decoration: none;
    transition: background 0.3s;
}
.btn-outline:hover { background: #0A7A6E; }
/* 리뷰 "후기 전체보기" 모바일 전용 버튼(카드 아래) — 데스크톱에선 숨김 */
.review-more-mobile { display: none; }
.review-right { flex: 1; min-width: 0; }
.carousel-wrapper {
    width: 100%;
    max-width: 800px;
    height: 788px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}
.review-scroll-inner {
    display: grid;
    grid-template-columns: repeat(2, 350px);
    grid-auto-rows: 354px;
    gap: 20px;
    justify-content: center;
}
.review-card {
    width: 350px;
    height: 354px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(176, 128, 112, 0.1);
}
.review-card.right-column { margin-top: -187px; }
.review-content { padding: 50px 30px 0 30px; }
.review-logo {
    display: block;
    height: 30px;
    max-height: 30px;
    width: auto;
    object-fit: contain;
    margin-bottom: 40px;
}
.review-card h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.52;
    letter-spacing: -0.025em;
    color: #111111;
    margin: 0 0 15px 0;
}
.review-card p {
    font-size: 14px;
    font-weight: 400;
    color: #767676;
    line-height: 1.68;
    letter-spacing: -0.025em;
    margin: 0;
}

/* ========== 섹션 8: 맞춤 디자이너 캐러셀 ========== */
.designer-section {
    padding: 160px 0;
    background: url('../../assets/images/%EB%A7%9E%EC%B6%A4%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88_%EB%B0%B0%EA%B2%BD.png') center / cover no-repeat;
}
.designer-title-inner {
    max-width: 1280px;
    margin: 0 auto 80px;
    text-align: center;
}
.designer-section .section-heading {
    margin-top: 0;
    line-height: 1.38;
}
.card-row {
    overflow: visible;
    width: 100%;
    position: relative;
    pointer-events: none;
}
.card-track {
    display: flex;
    gap: 40px;
    animation: scroll-left 40s linear infinite;
    width: max-content;
}
@keyframes scroll-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.card-track:has(.shortcut-card:hover) {
    animation-play-state: paused;
}
.designer-card, .shortcut-card {
    width: 240px;
    height: 354px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(176, 128, 112, 0.1);
}
.shortcut-card {
    background: #0C9384;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px;
    position: relative;
    color: white;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    transition: filter 0.25s ease;
}
.shortcut-card:hover { filter: brightness(0.92); }
.shortcut-card .label {
    font-size: 16px;
    opacity: 0.7;
    margin: 0 0 10px 0;
    line-height: var(--lh-1);
}
.shortcut-card .main {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: var(--lh-1);
}
.circle-button {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
}
.circle-button img { width: 100%; height: 100%; object-fit: contain; }

/* ========== 섹션 9: 포에디트는 다릅니다 ========== */
.difference-mobile-header { display: none; }
.diff-img-mobile { display: none; }
.difference-section {
    padding: 160px 0;
    position: relative;
}
.difference-glow-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.difference-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #0C9384;
    filter: blur(90px);
    opacity: 0;
    transform: translate3d(-125px, -125px, 0);
    will-change: transform, opacity;
    transition: opacity 0.5s ease;
}
.difference-section.glow-active .difference-glow {
    opacity: 0.6;
}
.difference-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 120px;
    position: relative;
    z-index: 1;
}
.difference-sidebar {
    flex: 0 0 360px;
}
.difference-sticky {
    position: sticky;
    top: 202px; /* 헤더(약 122px) 아래로 80px 간격 두고 고정 */
}
.difference-icon {
    width: 44px;
    height: 64px;
    margin-bottom: 15px;
}
.difference-title {
    font-size: 48px;
    font-weight: 700;
    color: #111;
    line-height: var(--lh-48);
    margin: 0 0 60px;
}
#feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#feature-list li {
    font-size: 18px;
    font-weight: 700;
    color: rgba(118, 118, 118, 0.3);
    margin-bottom: 30px;
    line-height: var(--lh-1);
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
#feature-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(118, 118, 118, 0.3);
    flex-shrink: 0;
    transition: background 0.3s ease;
}
#feature-list li.active { color: #767676; }
#feature-list li.active::before { background: #767676; }
#feature-list li:last-child { margin-bottom: 0; }
.difference-content { flex: 0 0 720px; }
.difference-block {
    margin-bottom: 160px;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform-origin: top center;
}
.difference-block:last-child { margin-bottom: 0; }
.difference-block img {
    width: 100%;
    border-radius: 7px;
    margin-bottom: 40px;
}
.difference-block img.diff-img-desktop {
    width: 720px;
    height: 354px;
    object-fit: cover;
}
.difference-block h3 {
    font-size: 32px;
    font-weight: 700;
    color: #0C9384;
    margin: 0 0 20px;
    letter-spacing: -0.025em;
    line-height: var(--lh-1);
}
.difference-block p {
    font-size: 18px;
    color: #767676;
    line-height: var(--lh-18);
    letter-spacing: -0.025em;
    margin: 0;
}

/* ========== 섹션 10: 진행 과정 ========== */
.process-section {
    padding: 160px 0;
    background: #ffffff url('../../assets/images/process-bg.png') center / cover no-repeat;
}
.process-section .section-label {
    color: #767676;
}
.process-inner {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}
.process-inner .section-heading {
    color: #0C9384;
    margin-top: 20px;
    line-height: var(--lh-1);
}
.process-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    width: 1280px;
    max-width: 100%;
    margin: 80px auto 0;
}
.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 100px;
    width: 100px;
    min-width: 0;
}
.process-step img {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    box-shadow: 4px 18px 48px -6px rgba(176, 128, 112, 0.1);
}
.process-step h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: var(--lh-1);
    letter-spacing: -0.025em;
    color: #111111;
    margin: 0 0 15px;
    white-space: nowrap;
}
.process-step p {
    font-size: 16px;
    font-weight: 400;
    line-height: var(--lh-16);
    letter-spacing: -0.025em;
    color: #767676;
    margin: 0;
    white-space: nowrap;
}
.process-dots {
    display: flex;
    align-items: center;
    padding-top: 112px;
    margin: 0;
    flex: 0 0 auto;
}

/* ========== 섹션 11: FAQ ========== */
.faq-section {
    padding: 160px 0;
}
.faq-inner {
    max-width: 1280px;
    margin: 0 auto;
}
.faq-inner > .section-heading {
    text-align: center;
    margin-bottom: 60px;
    color: #333;
    line-height: var(--lh-1);
}
.faq-list {
    max-width: 1280px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid rgba(118, 118, 118, 0.3);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 40px;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    cursor: pointer;
    letter-spacing: -0.025em;
    line-height: var(--lh-1);
    user-select: none;
}
.faq-arrow {
    margin-left: auto;
    flex-shrink: 0;
    width: 18px;
    height: 10px;
    background: url('../../assets/images/faq-arrow.png') center / contain no-repeat;
    transform: rotate(0deg);
    transition: transform 0.35s ease;
    display: inline-block;
}
.faq-item.open .faq-arrow {
    transform: rotate(180deg);
}
.faq-question .prefix {
    color: #111;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
}
.faq-answer-wrap {
    overflow: hidden;
    height: 0;
}
.faq-answer {
    padding: 0 40px 40px;
    font-size: 18px;
    font-weight: 400;
    color: #767676;
    line-height: var(--lh-18);
}
.faq-cta {
    max-width: 1280px;
    margin: 40px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f6f6f6;
    border-radius: 99px;
    height: 84px;
    padding: 0 40px;
}
.faq-cta-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #767676;
    line-height: var(--lh-1);
}
.btn-primary-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 95px;
    height: 46px;
    background: #ffffff;
    color: #111;
    border: 1px solid rgba(118, 118, 118, 0.4);
    border-radius: 99px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    line-height: var(--lh-1);
    transition: filter 0.25s ease;
}
.btn-primary-sm:hover { filter: brightness(0.92); }

/* CTA 배너, 칼럼+공지사항 → common.css로 이동됨 */

/* ========== 반응형 ========== */

/* 히어로: 태블릿 이하 */
@media (max-width: 1280px) {
    .swiper-container { height: auto; }
    .swiper-container .swiper-slide {
        flex-direction: column;
    }
    .slide-right {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        order: -1;
        padding: 0 0 0 40px;
        box-sizing: border-box;
    }
    .slide-right img {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }
    .content-wrapper {
        flex-direction: column;
        padding: 20px 40px;
    }
    .slide-left { width: 100%; padding-top: 0; height: auto; justify-content: flex-start; }
    .slide-meta-wrapper {
        position: static;
        margin-top: 30px;
        padding: 0 40px;
        width: 100%;
        box-sizing: border-box;
    }
    .progress-bar-wrapper { width: 100%; flex: 1; }
    .news-carousel-track {
    }
}

@media (max-width: 1280px) and (min-width: 768px) {
    .inquiry-status-section,
    .intro-title-section,
    .stats-section,
    .portfolio-section,
    .news-section,
    .review-section,
    .designer-section,
    .difference-section,
    .process-section,
    .faq-section { padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
}

@media (max-width: 1024px) {
    .inquiry-status-section { padding-top: 80px; }
    .inquiry-status {
        padding: 30px 30px;
        height: auto;
        border-radius: 16px;
    }
    .inquiry-status .fixed-item { width: auto; font-size: 16px; line-height: var(--lh-1); }
    .message-pair > div:first-child {
        font-size: 16px;
        line-height: var(--lh-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .message-pair > div:last-child { font-size: 14px; white-space: nowrap; line-height: var(--lh-1); }
    .section-heading { font-size: 36px; line-height: var(--lh-36); }
    .intro-heading { font-size: 36px; line-height: var(--lh-1); }
    .intro-subtitle { font-size: 22px; line-height: var(--lh-1); }
    .slide-left h2 { font-size: 36px; line-height: var(--lh-1); }
    .slide-left p { font-size: 18px; line-height: var(--lh-1); }
    .review-section-inner {
        flex-direction: column;
    }
    .review-left { width: 100%; }
    .carousel-wrapper { height: 600px; }
    .review-scroll-inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .review-card { width: auto; }
    .difference-section { padding-top: 120px; padding-bottom: 160px; }
    .difference-inner {
        flex-direction: column;
        gap: 60px;
    }
    .difference-sidebar { flex: none; width: 100%; }
    .difference-sticky { position: static; }
    .process-grid { flex-wrap: wrap; gap: 20px; width: auto; }
    .process-step { flex: 0 0 auto; width: auto; }
    .process-step h3, .process-step p { white-space: normal; }
    .process-dots { display: none; }
}

@media (max-width: 767px) {
    .section-heading { font-size: 24px; letter-spacing: -0.025em; margin-top: 5px; text-align: center; line-height: var(--lh-24); }
    .section-label { font-size: 14px; text-align: center; line-height: var(--lh-1); }

    /* 히어로 — 모바일: 가운데 카드 강조형 캐러셀 (.lrc) */
    .swiper-container { display: none; }

    .lrc.mobile-hero { display: block; position: relative; max-width: 480px; margin: 0 auto; overflow: hidden; }
    .lrc-viewport { position: relative; z-index: 1; overflow: hidden; padding: 30px 0; touch-action: pan-y; }
    .lrc-track { display: flex; gap: 0; align-items: center; will-change: transform; }

    /* 슬라이드: 가로 = (화면 폭 - 40px) → 아래 '최근 문의현황'(margin:0 20px)과 좌우 폭 동일하게 정렬.
       양옆은 살짝 작게(0.955), 활성 카드만 1.0 → 좌우 카드가 미리보기로 삐죽 보임.
       ※ 가운데 카드와 양옆 카드 사이 시각적 간격은 이 축소율에서 생김(≈카드폭×(1-0.955)/2 ≈ 8px @폭393px).
         간격을 넓히려면 0.955를 더 작게(예 0.92), 좁히려면 1.0에 가깝게. */
    .lrc-slide {
        flex: 0 0 calc(100% - 40px);
        border-radius: 8px;
        overflow: hidden;
        transform: scale(0.955);
        transition: transform .45s cubic-bezier(.25,.46,.45,.94);
        box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    }
    .lrc-slide.is-active { transform: scale(1); }

    /* 슬라이드 안쪽 — 기본: 원본 이미지 비율(1206:2076) 그대로 → 잘림 없음.
       (작은 폰(아래 min-height 기준 미만)은 이 상태: 자연 비율, 최근 문의현황은 fold 아래로 내려감)
       ※ 기준 이상 큰 폰에서 문의현황을 첫 화면에 넣기 위한 높이 제한은 아래 별도 미디어쿼리에서 처리 */
    .lrc-slide-inner { position: relative; width: 100%; aspect-ratio: 1206 / 2076; overflow: hidden; }
    .lrc-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

    /* 하단 점(dot) 인디케이터 — 활성 점은 가로로 길어짐 */
    .lrc-dots { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 0 0; }
    .lrc-dot { width: 18px; height: 3px; border-radius: 2px; background: rgba(130,130,130,0.5); cursor: pointer; transition: all .3s ease; }
    .lrc-dot.is-active { background: #1a1a1a; width: 26px; }

    /* 카드 위 텍스트 오버레이 (기존 유지) */
    .mobile-hero-text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 90px 18px 30px 20px;
        background: linear-gradient(to bottom, rgba(17,17,17,0) 0%, rgba(17,17,17,0.9) 100%);
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
    }
    .mobile-hero-text h2 {
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        line-height: var(--lh-1);
        letter-spacing: -0.025em;
        margin: 0;
    }
    .mobile-hero-text h2 + h2 {
        color: #fff;
        margin-top: 5px;
    }
    .mobile-hero-text p {
        font-size: 14px;
        color: #fff;
        margin: 10px 0 0;
        letter-spacing: -0.025em;
        line-height: var(--lh-1);
    }
    .mobile-hero-text .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        height: 36px;
        background: #0C9384;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: var(--lh-1);
        border-radius: 99px;
        text-decoration: none;
        margin-top: 20px;
    }

    /* 상담현황 — 모바일 */
    .inquiry-status-section { padding: 0; }
    .inquiry-status {
        display: block;
        position: relative;
        height: auto;
        padding: 20px;
        border-radius: 12px;
        margin: 0 20px;
    }
    /* 제목: 좌상단 고정 → 날짜(N일 전)와 같은 줄에 오게 */
    .inquiry-status .fixed-item {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 16px;
        font-weight: 700;
        width: auto;
        text-align: left;
        line-height: 20px;
    }
    .inquiry-status .sliding-item { margin-left: 0; width: 100%; height: 48px; }
    /* 한 건 = 2줄: 윗줄=날짜(우측, 제목과 같은 줄) / 아랫줄=문의 내용(전체폭). 두 줄 사이 간격 8px */
    .sliding-content .message-pair {
        flex-direction: column;
        height: 48px;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }
    .message-pair .mp-cell { flex: 0 0 auto; height: 20px; }   /* 세로 배치에서 늘어나지 않게 */
    .message-pair .mp-cell .mp-inner { line-height: 20px; font-size: 14px; }
    .message-pair .mp-date { order: -1; }               /* 윗줄 우측 (제목과 같은 높이) */
    .message-pair .mp-date .mp-inner { text-align: right; }
    .message-pair .mp-text { order: 1; width: 100%; }   /* 아랫줄 전체폭 */
    .message-pair .mp-text .mp-inner { text-align: left; }

    /* 소개 — Figma spec */
    .intro-title-section { padding: 60px 0; }
    .intro-subtitle { font-size: 16px; letter-spacing: -0.025em; line-height: var(--lh-1); }
    .intro-heading { font-size: 24px; letter-spacing: -0.025em; line-height: var(--lh-1); }
    .logo-desktop { display: none; }
    .logo-mobile { display: block; }
    .intro-logo-cloud { margin: 30px auto 0; padding: 0 20px; }

    /* 통계 — Figma 2x2 그리드 */
    .stats-section {
        height: auto;
        padding: 60px 0;
        background: url('../../assets/images/mob-datasection_bg.png') center / cover no-repeat;
    }
    .stats-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 0;
        max-width: 100%;
    }
    .stat-divider { display: none; }
    .stat-item {
        width: auto;
        height: auto;
        padding: 24px 0;
        position: relative;
    }
    /* 2x2 그리드 십자선 — 가운데 여백 있는 형태 */
    .stats-container { position: relative; padding: 0 20px; }
    .stat-item { border: none !important; }
    /* 윗줄(누적 프로젝트·클라이언트) 위쪽 패딩 제거 */
    .stat-item:nth-child(1), .stat-item:nth-child(3) { padding-top: 0; }
    /* 아랫줄(고객 만족도·납기일 준수율) 아래쪽 패딩 제거 */
    .stat-item:nth-child(5), .stat-item:nth-child(7) { padding-bottom: 0; }
    .stats-container::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 12%;
        width: 76%;
        height: 1px;
        background: rgba(118,118,118,0.25);
    }
    .stats-container::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 12%;
        height: 76%;
        width: 1px;
        background: rgba(118,118,118,0.25);
    }
    .stat-label { font-size: 14px; color: #767676; letter-spacing: -0.025em; margin-bottom: 10px; line-height: var(--lh-1); }
    .count-num-item { font-size: 30px; height: 30px; line-height: var(--lh-1); letter-spacing: -0.025em; }
    .count-num-item-wrap { height: 30px; width: 20px; margin: 0 -1.5px;}
    .plus { font-size: 28px; line-height: 30px; top: -2px; }
    .percent { font-size: 28px; line-height: 30px; top: -2px; }

    /* 포트폴리오 — Figma spec */
    .portfolio-inner { padding: 0 20px; 
        margin-bottom: 30px;}
    .portfolio-grid { flex-direction: column; gap: 40px; padding: 0 20px; align-items: stretch; margin-bottom: 30px; }
    .portfolio-col-left { padding-top: 0; }
    .portfolio-col { gap: 30px; }
    .portfolio-card p { font-size: 18px; line-height: var(--lh-1); }
    .portfolio-card h3 { font-size: 14px; margin: 15px 0 10px; line-height: var(--lh-1); }
    /* 이미지가 화면 밖으로 넘치지 않도록 컨테이너 폭에 맞춤 (PC 고정 560/440px 해제) */
    .portfolio-card img,
    .portfolio-card-wide img { width: 100%; height: auto; }
    .portfolio-card-wide .portfolio-thumb { width: auto; }

    /* 뉴스 — Figma spec */
    .news-header { padding: 0 20px; margin-bottom: 30px; }
    .scroll-wrap { scroll-snap-type: x mandatory; }
    .news-carousel-track {
        padding-left: calc((100vw - 280px) / 2);
        padding-right: calc((100vw - 280px) / 2);
        gap: 12px;
    }
    .news-card {
        width: 280px;
        scroll-snap-align: center;
    }
    .news-imgbox { height: 162px; border-radius: 7px; }
    .news-num { font-size: 24px; line-height: var(--lh-1); }
    .news-title { font-size: 14px; line-height: var(--lh-14); }
    .news-meta { gap: 12px; margin-top: 14px; }
    .scroll-progress-wrap { display: none; }

    /* 리뷰 — 모바일: 좌우 스와이프 */
    .review-section-inner {
        flex-direction: column;
        padding: 0;
        gap: 30px;
    }
    .review-left {
        width: 100%;
        padding: 0 20px;
        text-align: center;
    }
    .review-left .section-heading { font-size: 24px; margin-bottom: 30px;
        margin-top: 5px; line-height: var(--lh-24);}
    .review-right { width: 100%; }
    .carousel-wrapper {
        height: auto;
        max-height: none;
        overflow: hidden;
    }
    .review-scroll-inner {
        display: flex;
        flex-direction: row;
        overflow: visible;
        gap: 16px;
        padding: 0;
        grid-template-columns: none;
        grid-auto-rows: auto;
        will-change: transform;
    }
    .review-scroll-inner::-webkit-scrollbar { display: none; }
    .review-card {
        flex: 0 0 75vw;
        width: 75vw;
        height: auto;
        scroll-snap-align: start;
        background: none;
        box-shadow: 0 8px 24px rgba(176, 128, 112, 0.1);
        border-radius: 7px;
    }
    .review-card.right-column { margin-top: 0; }
    .review-content { padding: 28px 24px 28px; }
    .review-logo { height: 36px; margin-bottom: 18px; }
    .review-card h3 { font-size: 16px; line-height: var(--lh-1); margin-bottom: 12px; }
    .review-card p { font-size: 13px; line-height: var(--lh-13); }
    .btn-outline {
        font-size: 14px;
        line-height: var(--lh-1);
        padding: 12px 28px;
        display: inline-flex;
        margin: 0 auto;
    }
    /* 후기 전체보기: 모바일은 리뷰 카드 아래에 표시 (원본은 숨기고 카드 뒤 버튼을 노출) */
    .review-left .btn-outline { display: none; }
    .review-more-mobile { display: inline-flex; align-self: center; }

    /* 디자이너 — Figma spec */
    .designer-title-inner { padding: 0 20px; margin-bottom: 30px; }
    .designer-section .section-heading { font-size: 24px; line-height: var(--lh-24); }
    .designer-card, .shortcut-card { width: 160px; height: 236px; border-radius: 7px; }
    .card-track { gap: 20px; }
    .shortcut-card .label { font-size: 14px; line-height: var(--lh-1); }
    .shortcut-card .main { font-size: 16px; line-height: var(--lh-1); }
    .shortcut-card { padding: 0 24px; }
    .circle-button { width: 34px; height: 34px; right: 24px; }

    /* 차이점 — Figma 모바일 spec */
    .difference-sidebar { display: none; }
    .difference-mobile-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 20px;
        margin-bottom: 30px;
    }
    .difference-mobile-header .difference-icon {
        width: 22px;
        height: 32px;
        margin-bottom: 10px;
    }
    .difference-mobile-header .difference-title {
        font-size: 24px;
        font-weight: 700;
        color: #111;
        line-height: var(--lh-24);
        letter-spacing: -0.025em;
        text-align: center;
        margin: 0;
    }
    .difference-inner { padding: 0 20px; gap: 0; flex-direction: column; }
    .difference-content { width: 100%; }
    .diff-img-desktop { display: none; }
    .diff-img-mobile { display: block; }
    .difference-block { margin-bottom: 60px; }
    .difference-block:last-child { margin-bottom: 0; }
    .difference-block img { border-radius: 7px; margin-bottom: 20px; }
    .difference-block h3 {
        font-size: 20px;
        color: #0C9384;
        letter-spacing: -0.025em;
        margin: 0 0 10px;
        line-height: var(--lh-1);
    }
    .difference-block p {
        font-size: 14px;
        color: #767676;
        line-height: var(--lh-14);
        letter-spacing: -0.025em;
    }

    /* 진행과정 — Figma 모바일 spec */
    .process-section {
        padding: 60px 0;
        background: url('../../assets/images/mob-process_bg.png') center / cover no-repeat;
    }
    .process-inner { padding: 0 20px; }
    .process-inner .section-label { font-size: 16px; color: #767676; letter-spacing: -0.025em; line-height: var(--lh-1); }
    .process-inner .section-heading { font-size: 24px; color: #0C9384;
        margin-top: 10px; line-height: var(--lh-1); }
    .process-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 30px 0;
        margin-top: 30px;
        align-items: start;
    }
    .process-grid > :nth-child(4n) { display: none; }
    .process-dots { display: flex; align-items: center; justify-content: center; padding-top: 16px; margin: 0; }
    .process-dots svg rect { fill: #767676; fill-opacity: 0.3; }
    .process-step { flex: none; }
    .process-step img { width: 60px; height: 60px; margin-bottom: 10px; }
    .process-step h3 { font-size: 14px; letter-spacing: -0.025em; margin-bottom: 6px; color: #111; line-height: var(--lh-1); }
    .process-step p { font-size: 12px; color: #767676; line-height: var(--lh-12); letter-spacing: -0.025em; }

    /* FAQ — Figma spec */
    .faq-inner { padding: 0 24px; }
    .faq-inner > .section-heading { font-size: 24px; margin-bottom: 30px; line-height: var(--lh-1); }
    .faq-question { height: auto; font-size: 14px; padding: 20px 4px; letter-spacing: -0.025em; line-height: var(--lh-1); }
    .faq-answer { font-size: 12px; padding: 0 4px 20px; line-height: var(--lh-12); }
    .faq-arrow { width: 14px; height: 8px; }
    .faq-cta {
        height: auto;
        margin: 30px 0 0;
        padding: 16px 20px;
        flex-direction: row;
        gap: 0;
        text-align: left;
        border-radius: 99px;
    }
    .faq-cta-left { font-size: 14px; color: #767676; letter-spacing: -0.025em; line-height: var(--lh-1); }
    .btn-primary-sm { font-size: 12px; padding: 8px 16px; line-height: var(--lh-1); }

    /* 공통 섹션 패딩 */
    .portfolio-section,
    .news-section,
    .designer-section,
    .difference-section,
    .process-section,
    .faq-section,
    .board-section { padding: 60px 0; }
    .review-section { height: auto; padding: 60px 0; }
}

/* ── 히어로 캐러셀: 화면 세로가 기준(720px) 이상인 폰에서만 카드 높이를 제한 ──
   목적: [헤더 + 캐러셀 + 최근 문의현황]이 첫 화면(100svh) 안에 들어오게.
   카드 가로 너비(화면 폭-40px)는 그대로 두고 높이만 제한 → 이미지가 위아래로 살짝 잘림(object-fit:cover).
   min()으로 상한을 걸어, 화면이 충분히 크면 자연 비율(가로 폭 기준 높이)을 그대로 써서 불필요한 잘림 없음.
   기준(720px) 미만(예: iPhone SE)은 이 규칙이 적용 안 됨 → 자연 비율 + 문의현황은 fold 아래.
   ▸ 조절 포인트: 720px(자르기 시작하는 화면 세로 기준), 256px(빼는 여백).
     256 = 헤더60 + 뷰포트패딩(30+30) + 점18(15+0+3) + 문의현황 박스88(패딩24 + 2줄40 + 패딩24) + 화면하단 여백30.
     → 문의현황 박스 하단이 화면 아래에서 정확히 30px 위에 옴(그 아래 소개 섹션은 fold 밑으로). */
@media (max-width: 767px) and (min-height: 720px) {
    .lrc-slide-inner {
        aspect-ratio: auto;
        height: min(calc(100vh - 256px), calc((100vw - 40px) * 2076 / 1206));   /* 구형 브라우저 폴백 */
        height: min(calc(100svh - 256px), calc((100vw - 40px) * 2076 / 1206));
    }
}

/* ── 화면 세로 720px 미만: 최근 문의현황은 첫 화면에서 생략(=이 아래로 밀림), 캐러셀만 표시.
   이때 카드 높이를 화면에 맞춰 인디케이터(점) 아래로 30px 공간이 남게(100vh 하단 기준).
   빼는 값 138 = 헤더60 + 뷰포트패딩상30 + 점18(15+0+3) + 점 아래 30px 공간(=뷰포트패딩하30). */
@media (max-width: 767px) and (max-height: 719px) {
    .lrc-slide-inner {
        aspect-ratio: auto;
        height: min(calc(100vh - 138px), calc((100vw - 40px) * 2076 / 1206));   /* 구형 브라우저 폴백 */
        height: min(calc(100svh - 138px), calc((100vw - 40px) * 2076 / 1206));
    }
}