body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 1.5vh 0.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
    overflow: auto;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
    height: 100%;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.lang-selector {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.8em;
    color: #888;
    user-select: none;
}

.lang-selector span {
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s ease;
}

.lang-selector span:hover {
    color: #555;
}

.lang-selector span.active {
    font-weight: bold;
    color: #333;
}

h2 {
    margin-top: 5px;
    margin-bottom: 2vh;
    color: #333;
}

.system-selector {
    margin-bottom: 2vh;
    font-size: 1em;
}

.system-selector select {
    padding: 6px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input-section {
    display: flex;
    justify-content: center;
    margin-bottom: 2vh;
    flex-wrap: nowrap;
    gap: 15px;
    width: 100%;
}

.character-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    flex: 1;
    min-width: 0;
}

.input-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.short-input {
    width: 45px !important;
}

.character-input input[type="number"] {
    width: 60px;
    padding: 6px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.character-input select {
    padding: 6px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.file-input {
    width: 80px;
    font-size: 0.7em;
}

.upload-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.reset-btn {
    padding: 3px 4px;
    font-size: 0.7em;
    background-color: #888;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.reset-btn:hover {
    background-color: #666;
}

.visualization-section {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-grow: 1; /* 남은 높이 공간 전부 차지 */
    min-height: 0;
    border-bottom: 2px solid #666;
    gap: max(1.5vw, 4px); /* 화면 좁을 때를 대비해 유동적 단위 vw 사용하되, 최소 여백 유지 */
    transition: gap 0.4s ease;
    overflow: hidden;
}

.character-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    transition: margin 0.4s ease;
}

.character-display span {
    margin-bottom: 10px;
    font-weight: bold;
    color: #444;
}

.silhouette {
    /* 남성 실루엣 SVG 마스크 사용 */
    background-color: #4A90E2; 
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 250" xmlns="http://www.w3.org/2000/svg"><path d="M50,10 C58,10 65,17 65,25 C65,33 58,40 50,40 C42,40 35,33 35,25 C35,17 42,10 50,10 Z M25,50 C25,43 31,45 50,45 C69,45 75,43 75,50 L80,120 C80,125 70,125 68,115 L60,80 L60,140 L70,240 C70,245 60,250 55,240 L50,150 L45,240 C40,250 30,245 30,240 L40,140 L40,80 L32,115 C30,125 20,125 20,120 L25,50 Z" /></svg>') no-repeat center bottom;
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 250" xmlns="http://www.w3.org/2000/svg"><path d="M50,10 C58,10 65,17 65,25 C65,33 58,40 50,40 C42,40 35,33 35,25 C35,17 42,10 50,10 Z M25,50 C25,43 31,45 50,45 C69,45 75,43 75,50 L80,120 C80,125 70,125 68,115 L60,80 L60,140 L70,240 C70,245 60,250 55,240 L50,150 L45,240 C40,250 30,245 30,240 L40,140 L40,80 L32,115 C30,125 20,125 20,120 L25,50 Z" /></svg>') no-repeat center bottom;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: height 0.4s ease, width 0.4s ease;
}

#silhouette2 {
    background-color: #B19CD9; 
}

/* 커스텀 이미지 업로드 시 적용될 클래스 */
.custom-image {
    -webkit-mask: none !important;
    mask: none !important;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
}

/* 크기 차이가 심할 때 거인 쪽에 표시되는 종아리 실루엣 클래스 (상세한 맨발 옆모습) */
.silhouette-calf {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 80 120" xmlns="http://www.w3.org/2000/svg"><path d="M62.2,0 C63.5,15.1 72.8,26.4 70.3,42.5 C67.4,62.1 53.8,71.5 51.2,85.6 C49.4,95.5 58.5,107.6 54.8,114.7 C51.9,120.3 39.3,118.4 32.4,118.8 C21.3,119.5 14.5,116.2 5.8,116.7 C1.3,117.1 -1.7,116.8 0.1,111.4 C1.7,105.8 7.7,101.9 12.4,98.6 C18.5,94.2 26.3,89.5 30.5,83.4 C33.1,79.5 34.1,74.5 34.4,69.5 C35.1,52.3 37.8,36.1 42.5,19.3 C44.5,10.6 46.8,4.1 47.6,0 Z" /></svg>') no-repeat center bottom !important;
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 80 120" xmlns="http://www.w3.org/2000/svg"><path d="M62.2,0 C63.5,15.1 72.8,26.4 70.3,42.5 C67.4,62.1 53.8,71.5 51.2,85.6 C49.4,95.5 58.5,107.6 54.8,114.7 C51.9,120.3 39.3,118.4 32.4,118.8 C21.3,119.5 14.5,116.2 5.8,116.7 C1.3,117.1 -1.7,116.8 0.1,111.4 C1.7,105.8 7.7,101.9 12.4,98.6 C18.5,94.2 26.3,89.5 30.5,83.4 C33.1,79.5 34.1,74.5 34.4,69.5 C35.1,52.3 37.8,36.1 42.5,19.3 C44.5,10.6 46.8,4.1 47.6,0 Z" /></svg>') no-repeat center bottom !important;
}

/* 거인/소인 극심한 격차 발생 시 겹침 효과 */
.visualization-section.overlap-1 {
    gap: 0;
}
.visualization-section.overlap-1 .character-display:nth-child(1) {
    z-index: 1;
}
.visualization-section.overlap-1 .character-display:nth-child(2) {
    z-index: 10;
    margin-left: -60px; /* 발에 가깝게 당김 */
}

.visualization-section.overlap-2 {
    gap: 0;
}
.visualization-section.overlap-2 .character-display:nth-child(1) {
    z-index: 10;
    margin-right: -60px; /* 발에 가깝게 당김 */
}
.visualization-section.overlap-2 .character-display:nth-child(2) {
    z-index: 1;
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #E0E0E0;
    }

    .container {
        background: #1E1E1E;
        box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    }

    h2 {
        color: #FFFFFF;
    }

    .lang-selector {
        color: #AAA;
    }

    .lang-selector span:hover {
        color: #DDD;
    }

    .lang-selector span.active {
        color: #FFFFFF;
    }

    .character-display span {
        color: #E0E0E0;
    }

    input, select {
        background-color: #2C2C2C;
        color: #FFFFFF;
        border: 1px solid #555;
    }

    /* 다크 모드 특화 실루엣 색상 */
    .silhouette {
        background-color: #FFFFFF; /* 하얀색 */
    }

    #silhouette2 {
        background-color: #00FFAA; /* 밝은 옥색 */
    }
}