/* 네비게이션 컨테이너 - 유동적인 너비를 위해 width: 100% 설정 */
.horizontal-responsive-nav {
    width: 100%; 
    background-color: #333;
    padding: 0;
    box-sizing: border-box; 
}

.horizontal-responsive-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden; /* float 해제 */
}

/* 메뉴 항목 (li) - 가로 메뉴 및 유동적인 너비를 위한 설정 */
.horizontal-responsive-nav ul li {
    display: inline-block; /* 수평으로 나열 */
    width: 10%; /* 4개 항목이므로 100% / 4 = 25% */
    float: left; /* 유동적인 너비 배분 */
    box-sizing: border-box;
    text-align: center;
}

/* 링크 (a) 스타일 */
.horizontal-responsive-nav ul li a {
    display: block; 
    color: white; 
    text-decoration: none; 
    padding: 15px 0; 
    transition: background-color 0.3s;
}

/* 1. 선택(활성화)된 항목 스타일 (.active) */
.horizontal-responsive-nav ul li.active {
    background-color: #007bff; /* 선택된 항목의 배경색 */
}

/* 2. 비활성화된 링크 스타일 (.disabled-link) */
.horizontal-responsive-nav ul li.active a.disabled-link {
    cursor: default; /* 마우스 커서를 일반 화살표로 변경 */
    background-color: transparent !important; /* 호버 효과 제거 */
    color: white; 
}

/* 일반 호버 효과 (비활성화 항목 제외) */
.horizontal-responsive-nav ul li:not(.active) a:hover {
    background-color: #555; 
}

/* ------------------------------------------- */
/* 반응형 디자인: 작은 화면에서 세로 메뉴로 변경 (필요한 경우) */
/* ------------------------------------------- */
@media screen and (max-width: 100%;) {
    .horizontal-responsive-nav ul li {
        width: 100%; /* 너비를 100%로 변경하여 세로로 쌓이게 함 */
        float: none; 
        border-bottom: 1px solid #444;
    }
    .horizontal-responsive-nav ul li:last-child {
        border-bottom: none;
    }
}
    /* 기본 페이지 스타일 */
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0;
        box-sizing: border-box;
    }

    /* 전체 생성기 컨테이너 */
    .generator-container {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 100%;
        max-width: 400px;
    }

    h1 {
        color: #333;
        margin-bottom: 20px;
    }

    /* 도장이 표시되는 영역 */
    .stamp-preview {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 25px;
    }

    /* 모든 도장의 공통 스타일 */
    .stamp {
        font-family: '궁서', sans-serif;
        color: #d90429;
        background-color: transparent;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        transition: all 0.3s ease;
        overflow: hidden; /* 글자가 넘치는 것을 방지 */
    }

    /* === 모양별 스타일 === */
    /* 1. 원형 도장 */
    .stamp.circle {
        width: 120px;
        height: 120px;
        border: 7px solid #d90429;
        border-radius: 50%;
        font-size: 40px;
        writing-mode: vertical-rl; /* 세로쓰기 (오른쪽 -> 왼쪽) */
        text-orientation: upright;
        letter-spacing: 0.0em;
    }

    /* 2. 타원형 도장 */
    .stamp.oval {
        width: 60px;
        height: 120px;
        border: 5px solid #d90429;
        border-radius: 50%;
        font-size: 30px;
        writing-mode: horizontal; /* 세로쓰기 (왼쪽 -> 오른쪽) */
        text-orientation: upright;
        letter-spacing: 0.1em;
    }

    /* 3. 사각형 도장 */
    .stamp.square {
        width: 110px;
        height: 110px;
        border: 7px solid #d90429;
        border-radius: 10px;
        font-size: 40px;
        writing-mode: vertical-rl; /* 세로쓰기 (오른쪽 -> 왼쪽) */
        text-orientation: upright;
        letter-spacing: 0.0em;
    }

    /* 4. 직인 도장 */
    .stamp.seal {
        width: 130px;
        height: 130px;
        border: 5px solid #d90429;
        border-width: 6px;
        border-radius: 0;
        padding: 0px;
        /* flex-wrap으로 글자를 격자처럼 배치 */
        flex-wrap: wrap; 
        align-content: space-around;
    }
    /* 직인 안의 개별 글자 스타일 */
    .stamp.seal span {
        display: inline-block;
        text-align: center;
        line-height: 1;
    }
    
    /* 컨트롤 영역 */
    .controls {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
    }
    .control-group label {
        display: block;
        margin-bottom: 5px;
        color: #555;
        font-weight: bold;
        text-align: left;
    }
    input[type="text"], select {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }

    /* 저장 버튼 */
    .save-button {
        background-color: #28a745;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        width: 100%;
    }
    .save-button:hover { background-color: #218838; }