/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    line-height: 1.6;
    font-weight: 300;
    /* Requirement: Body text 16px, 300 weight, 1.6 line-height */
    font-size: 16px;
    letter-spacing: -1px;
    /* Requirement: All text -1px spacing */
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    margin-top: 100px;
    /* Requirement: 100px top margin */
}

/* Typography Rules */
.mobile-br {
    display: none;
}

.eng-title {
    font-family: 'Italiana', serif;
    font-size: 32px;
    letter-spacing: 0px;
    margin-bottom: 30px;
    /* Requirement: 30px margin-bottom */
    text-align: center;
    color: #000;
    font-weight: 400;
}

.kor-title,
.section-subtitle-main {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 24px;
    /* Requirement: 24px */
    font-weight: 500;
    /* Requirement: 500 */
    letter-spacing: -1.5px;
    /* Requirement: -1.5px */
    color: #000;
    margin-bottom: 30px;
    /* Requirement: 30px */
    line-height: 1.4;
}

.section-subtitle-main {
    text-align: center;
}

/* Header (Black, Sticky) */
/* Header (Transparent -> Black, Fixed) */
#header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* Requirement: 100px height */
    background-color: transparent;
    /* Requirement: Transparent initially */
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
}

#header.scrolled,
#header.always-dark {
    background-color: #000;
    /* Requirement: Black on scroll */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo img {
    height: 70px;
    /* Desktop Logo Height */
    width: auto;
}

.gnb ul {
    display: flex;
    gap: 2rem;
}

.gnb a {
    color: #fff;
    /* Requirement: White text */
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    transition: color 0.3s;
    opacity: 0.8;
}

.gnb a:hover,
.gnb a.active {
    opacity: 1;
    color: #ff4800;
    /* Accent Color */
}

.hamburger {
    display: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Sections Global */
section {
    padding: 80px 0;
    /* Requirement: 80px padding */
}

/* Zebra Striping */
#about {
    background-color: #fff;
}

#process {
    background-color: #f3f3f3;
}

#portfolio {
    background-color: #fff;
}

#contact {
    background-color: #f3f3f3;
}

#process-details {
    background-color: #fff;
    /* Requirement: White background for details */
}

/* Fade In Animation */
.fade-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* About Us */
.about-container {
    display: flex;
    flex-direction: column;
}

.about-part-a {
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-bottom: 5rem;
}

.about-left {
    flex: 1;
}

.about-right {
    flex: 1;
}

.about-desc {
    font-size: 16px;
    color: #666;
    /* Gray text */
    margin-bottom: 2rem;
    line-height: 1.8;
}

.section-divider {
    height: 10rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.section-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #9999993b;
    /* Requirement: #9999993b */
    top: 50%;
}

.about-btn {
    display: inline-block;
    padding: 13px 70px;
    /* Requirement: 13px 70px */
    border: 1px solid #000000;
    background-color: #000;
    font-size: 14px;
    color: #ffffff;
    /* Requirement: #ffffff */
    transition: all 0.3s;
    border-radius: 0px;
    /* Requirement: 50px rule */
}

.brand-logo-variant {
    width: 150px;
    margin: 0 auto 20px;
    display: block;
}

.about-btn:hover {
    background-color: #333;
    /* Dark gray hover */
    color: #fff;
    border-color: #333;
}

.about-right {
    flex: 1;
    height: 400px;
    /* Fixed height for consistency */
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

.about-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.about-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.about-slide.active {
    opacity: 1;
}

.about-part-b {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.brand-story-text p {
    margin-bottom: 1.5rem;
    word-break: keep-all;
    text-align: center;
}

/* Process */
.process-steps-subtitle {
    text-align: center;
    font-size: 15px;
    color: #666;
    margin-bottom: 4rem;
}

#process .section-subtitle-main {
    margin-bottom: 20px;
}

.process-steps {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.process-item {
    flex: 1;
    text-align: center;
}

.process-item .circle-img {
    width: 200px;
    /* Size: 200px */
    height: 200px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin: 0 auto 1.5rem;
    background-color: #e0e0e0;
}

.process-text h3 {
    font-size: 18px;
    /* Slightly adjusted for hierarchy under 23px title */
    margin-bottom: 0.5rem;
    font-weight: 500;
    /* Requirement: 500 */
    color: #333;
}

.process-text p {
    font-size: 15px;
    /* Requirement: 15px */
    color: #555;
    /* Requirement: #555 */
    line-height: 1.5;
    word-break: keep-all;
}

.process-quote {
    font-size: 21px;
    font-weight: 500;
    color: #444;
    margin-bottom: 30px;
}

/* Portfolio */
.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-sub-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.filter-sub-tabs .filter-btn {
    border: none;
    position: relative;
    padding: 0 25px;
    margin: 0;
    font-size: 1rem;
    color: #666;
}

.filter-sub-tabs .filter-btn::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #ddd;
}

.filter-sub-tabs .filter-btn:last-child::after {
    display: none;
}

.filter-sub-tabs .filter-btn:hover {
    border-bottom: none;
    color: #FF4800;
}

.filter-sub-tabs .filter-btn.active {
    border-bottom: none;
    color: #ff4800;
    font-weight: 500;
}

.filter-btn {
    background: none;
    border: 1px solid transparent;
    padding: 0.5rem 1.5rem;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-btn:hover {
    border-bottom: 1px solid #ddd;
}

.filter-btn.active {
    font-weight: 700;
    border-bottom: 2px solid #000;
}

/* Portfolio Grid - Masonry Layout (Fluid Height) */
.portfolio-grid {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: flex-start;
}

.portfolio-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.portfolio-item {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    display: block;
}

.portfolio-item img {
    width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
    /* Zoom effect */
}

.item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.portfolio-item:hover .item-info {
    opacity: 1;
}

.item-info h4 {
    font-weight: 400;
    margin-bottom: 0.3rem;
    color: #fff;
    font-size: 1.1rem;
}

.item-info p {
    font-weight: 100;
    font-size: 0.9rem;
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: #ff4800;
}

/* Contact Us */
.contact-intro {
    text-align: center;
    margin-bottom: 2rem;
    color: #666;
}

.form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 3rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* KakaoTalk Plus Friend Section */
.kakao-section {
    max-width: 600px;
    margin: 50px auto;
    padding: 40px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.kakao-section h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #333;
}

.kakao-section p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.kakao-guide-img {
    max-width: 95%;
    margin: 20px auto;
    display: block;
}

.kakao-btn {
    display: block;
    width: 100%;
    background-color: #FEE500;
    /* Kakao Yellow */
    color: #191919;
    padding: 15px 0;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.3s;
}

.kakao-btn:hover {
    opacity: 0.9;
    color: #191919;
}

.contact-form {
    width: 100%;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    /* Requirement: 500 */
    font-size: 1rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #eee;
    background-color: #f9f9f9;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #000;
    background-color: #fff;
}

.submit-btn {
    width: 100%;
    padding: 1rem;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    /* Requirement: 500 */
    font-size: 1.1rem;
    /* Requirement: 1.1rem */
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #333;
}

/* Footer */
footer {
    padding: 2rem 0;
    text-align: center;
    background-color: #f3f3f3;
    border-top: 1px solid #e0e0e0;
}

footer p {
    font-size: 0.8rem;
    color: #999;
}

/* Subpage Banner */
.sub-banner {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
    /* Clear fixed header */
}

/* Responsive - Mobile <= 768px */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .mobile-br {
        display: inline;
    }

    .container {
        padding: 0 20px;
        margin-top: 30px;
    }

    section {
        padding: 20px 0;
    }

    .eng-title {
        font-family: 'Italiana', serif;
        font-size: 26px;
    }

    .sub-banner {
        margin-top: 40px;
    }

    .section-divider {
        height: 3rem;
    }

    .brand-logo-variant {
        width: 130px;
    }

    /* Header Mobile */
    #header {
        height: 69px;
    }

    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .logo img {
        height: 50px;
    }

    .hamburger {
        display: block;
        position: absolute;
        right: 20px;
    }

    .gnb {
        position: fixed;
        top: 50px;
        /* below header */
        right: -100%;
        width: 100%;
        height: calc(100vh - 50px);
        background-color: #000;
        transition: right 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .kor-title,
    .section-subtitle-main {
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 19px;
    }

    #process .section-subtitle-main {
        margin-bottom: 20px;
    }

    .gnb.active {
        right: 0;
    }

    .gnb ul {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .gnb a {
        font-size: 1.2rem;
        font-weight: 300;
    }

    /* About Us */
    .about-part-a {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 1rem;
        /* Reverted to 1rem */
        margin-top: 1rem;
        /* Requirement: slightly wider top margin */
    }



    .about-part-a .about-btn {
        display: block;
        width: fit-content;
        margin: 0 auto;
    }

    .about-right {
        display: none;
        /* Hidden on mobile to remove whitespace issues */
    }

    .about-desc {
        font-size: 15px;
    }

    /* Process Mobile (Vertical) */
    .process-steps {
        flex-direction: column;
        align-items: center;
    }

    .process-item {
        margin-bottom: 2rem;
        width: 100%;
        max-width: 300px;
    }

    /* Portfolio Mobile (2 columns with gap) */
    /* Portfolio Mobile - JS handles columns, just adjust gap if needed */
    .portfolio-grid {
        gap: 10px;
    }

    .portfolio-column {
        gap: 10px;
    }

    .portfolio-item {
        margin-bottom: 0;
        width: 100%;
        height: auto;
    }

    .form-wrapper,
    .kakao-section {
        padding: 1.5rem;
    }

    .process-quote {
        font-size: 19px;
        font-weight: 500;
        color: #444;
        margin-bottom: 30px;
        line-height: 1.5;
    }

    .filter-tabs,
    .filter-sub-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 1rem;
        border: none;
        padding: 0;
    }

    .filter-sub-tabs .filter-btn {
        border: none;
        position: relative;
        padding: 0 25px;
        margin: 0;
        font-size: 0.9rem;
        color: #666;
        /* Requirement: Gray for unselected sub-level tabs */
    }

    .filter-sub-tabs .filter-btn::after {
        display: none;
    }

    .filter-sub-tabs .filter-btn.active {
        border-bottom: none;
        color: #ff4800;
        font-weight: 500;
        font-size: 0.9rem;
    }

    .filter-tabs {
        margin-bottom: 30px;
    }

    .filter-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 0.9rem;
        color: #000;
        /* Requirement: Black for unselected top-level tabs */
    }
}

/* Enhanced Footer */
footer {
    background-color: #f9f9f9;
    padding: 30px 0;
    /* Requirement: Reduce vertical padding */
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #666;
    margin-top: 50px;
    /* Requirement: Top margin 50px */
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* Requirement: Reduce gap */
}

footer .container {
    margin-top: 50px;
}

.footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.footer-logo img {
    width: 150px;
    /* Requirement: 150px width */
    height: auto;
    opacity: 1;
    /* Reset opacity if needed, prompt didn't say */
}

.footer-menu {
    display: flex;
    gap: 30px;
}

.footer-menu a {
    color: #333;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-menu a:hover {
    color: #000;
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    /* Requirement: Reduce padding */
    width: 100%;
    letter-spacing: -0.5px;
    /* Requirement: -0.5px letter-spacing ONLY for bottom */
}

.footer-info {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #888;
}

.footer-info p {
    margin: 5px 0;
}

.footer-copyright {
    font-size: 12px;
    color: #aaa;
}

@media (max-width: 768px) {
    .footer-menu {
        flex-direction: column;
        /* Stack menu items on mobile if minimal, but row is fine for 4 items */
        gap: 15px;
    }

    footer {
        margin-top: 20px;
        /* Give it a little breath but not 50px */
    }

    .footer-logo img {
        width: 130px;
        height: auto;
        opacity: 1;
    }

    footer .container {
        margin-top: 30px;
    }

    .footer-menu a {
        color: #333;
        font-weight: 500;
        font-size: 15px;
    }
}

/* Main Divider */
.main-divider {
    width: 100%;
    max-width: 1200px;
    /* Requirement: Match container max-width */
    height: 1px;
    background-color: #9999993b;
    border: none;
    margin: 0 auto;
    /* Center it */
    box-sizing: border-box;
    /* The container has padding: 0 40px; which means content width is 1120px max. 
       If we want the line to match visual width of content depending on screen size,
       we should probably respect the same padding or width logic.
       Simplest is to set max-width: 1120px (1200 - 80) if we want it to match content exactly?
       Or just use the container class in HTML. Let's try to match content width first. */
    width: calc(100% - 80px);
    /* Match container padding effect (40px * 2) */
}



/* Process Content Styling */
.process-content-text {
    margin-top: 60px;
    line-height: 1.8;
    color: #333;
}



.process-intro h3 {
    font-size: 21px;
    margin-bottom: 20px;
    font-weight: 500;
}

.process-section-block {
    margin-bottom: 50px;
}


/* Accent Color: #ff4800 */

.gnb a:hover,
.gnb .active {
    color: #ff4800;
    opacity: 1;
}

.about-btn:hover {
    background-color: #ff4800;
    border-color: #ff4800;
    color: #fff;
}

.filter-btn.active {
    font-weight: 500;
    border-bottom: 1.5px solid #ff4800;
    color: #ff4800;
}

.submit-btn:hover {
    background-color: #ff4800;
}

.process-section-block h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #000;
    border-bottom: 1px solid #000000;
    display: inline-block;
    letter-spacing: -1px;
}

.process-sub-block {
    margin-bottom: 25px;
}

.process-sub-block h5 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #ff4800;
    font-weight: 500;
}

.process-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    color: #666;
}

.process-list li::before {

    content: "•";
    position: absolute;
    left: 0;
    color: #ff4800;
    /* Accent Bullet */
}

.footer-menu a:hover {
    color: #ff4800;
    text-decoration: none;
}

/* Helper to hide overlay */
.hero-content.hidden {
    opacity: 0;
    pointer-events: none;
}

.hero-content {
    transition: opacity 0.5s ease;
}