/* style.css - 최종 통합 버전 (헤더 및 버튼 디자인 원본 복원, AR Try-On 스타일 개선) */

/* 변수 설정 */
:root {
    --gradient-start: #FFC0CB;        /* Light Pink */
    --gradient-end: #ADD8E6;          /* Light Blue */
    --main-text-color: #333333;       
    --h2-underline-color: linear-gradient(to right, #FFC0CB, #ADD8E6); 
    --card-bg: #FFFFFF;               
    --bg-light: #F8F9FA;              
    --shadow-color: rgba(0, 0, 0, 0.1);

    --font-montserrat: 'Montserrat', sans-serif;
    --font-lato: 'Lato', sans-serif;

    /* 버튼 색상 - 원본 디자인에 가깝게 재설정 */
    --primary-button-bg: linear-gradient(to right, #6a82fb, #fc5c7d); /* Start Analysis / Process Uploaded Image */
    --primary-button-hover-bg: linear-gradient(to right, #4c62e0, #e04461);
    
    --secondary-button-bg: #5a5a5a; /* Pause / Stop Try-On */
    --secondary-button-hover-bg: #4a4a4a;

    --mode-button-border: #BBBBBB; /* Webcam / Upload Mode border */
    --mode-button-active-bg: linear-gradient(to right, #6a82fb, #fc5c7d); /* Webcam / Upload Mode active */
    --mode-button-active-text: #FFFFFF;

    --model-select-bg: #e0e0e0; /* Face Type / Personal Tone default */
    --model-select-active-bg: linear-gradient(45deg, #FFD700, #FFA500); /* Face Type / Personal Tone active */
    --model-select-disabled-bg: #e0e0e0; 

    /* 얼굴형/톤 선택 버튼 기본 색상 */
    --face-tone-select-btn-default-bg: #6c757d; 
    --face-tone-select-btn-default-text: white;
}

body {
    font-family: var(--font-lato);
    background-color: var(--card-bg);
    color: var(--main-text-color);
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* 전체 화면 채우기 */
}

header {
    width: 100%;
    background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%); 
    color: var(--main-text-color); 
    padding: 40px 20px;
    box-shadow: 0 6px 15px var(--shadow-color);
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center; /* 수직 가운데 정렬 */
}

.header-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    gap: 20px;
}

.header-text-group {
    flex-grow: 1; 
    display: flex; /* 내부 요소 정렬을 위해 flex 추가 */
    flex-direction: column; /* 텍스트를 수직으로 쌓기 */
    align-items: center; /* 텍스트 수평 가운데 정렬 */
}

.header-icons-left, .header-icons-right {
    display: flex;
    gap: 15px; 
    /* 아이콘 그룹을 좌우 끝으로 밀기 */
    align-items: center;
}

.header-icon {
    width: 80px; 
    height: 80px;
    filter: none; /* 아이콘 필터 제거 */
    opacity: 1.0; 
    transition: transform 0.2s;
}

.header-icon:hover {
    transform: scale(1.1);
    filter: none;
}


h1 {
    font-family: "Jacques Francois", serif;
    font-weight: 800; 
    font-size: 4em; 
    margin-bottom: 5px;
    letter-spacing: 2px; 
    color: var(--main-text-color); 
}

.subtitle {
    font-family: var(--font-lato);
    font-size: 1.3em; 
    opacity: 0.9; 
    max-width: 800px;
    margin: 0 auto;
    color: var(--main-text-color);
}

h2 {
    font-family: var(--font-montserrat);
    font-weight: 600;
    font-size: 1.8em;
    color: var(--main-text-color);
    border-bottom: 3px solid;
    border-image: var(--h2-underline-color);
    border-image-slice: 1;
    padding-bottom: 10px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
h2 .fas {
    color: var(--main-text-color);
}


/* 메인 컨텐츠 및 카드 스타일 */
#main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 0 20px 50px;
    max-width: 1300px;
    width: 100%;
}

.card {
    background-color: var(--card-bg);
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 8px 20px var(--shadow-color);
    flex: 1 1 350px; 
    min-width: 320px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* 버튼 스타일 */
.btn {
    font-family: var(--font-montserrat);
    font-weight: 600;
    border: none;
    padding: 14px 28px;
    margin: 10px 8px;
    border-radius: 30px; 
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.primary-btn { 
    background: var(--primary-button-bg); 
    color: var(--mode-button-active-text);
    box-shadow: 0 4px 10px rgba(106, 130, 251, 0.3);
}
.secondary-btn {
    background-color: var(--secondary-button-bg);
    color: var(--mode-button-active-text);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.secondary-btn:hover {
    background-color: var(--secondary-button-hover-bg);
}


/* 듀얼 모드 버튼 스타일 */
.mode-select-group {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 5px; /* 전체 그룹의 둥근 모서리 */
    overflow: hidden; /* 내부 버튼이 튀어나오지 않게 */
}
.mode-btn {
    background-color: var(--card-bg); /* 기본 흰색 */
    color: var(--main-text-color);
    border: 1px solid var(--mode-button-border); /* 얇은 회색 테두리 */
    padding: 10px 20px;
    margin: 0; /* 그룹 내부에서 마진 제거 */
    border-radius: 0; /* 개별 버튼의 둥근 모서리 제거 */
    transition: all 0.2s;
    font-weight: 400;
    flex-grow: 1; /* 각 버튼이 균등한 너비를 갖도록 */
}
.mode-btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.mode-btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: none; /* 중간 테두리 제거 */
}
.mode-btn.active {
    background: var(--mode-button-active-bg);
    color: var(--mode-button-active-text);
    border-color: transparent;
    font-weight: 600;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2); /* 활성 버튼에 내부 그림자 */
}

/* 모델 선택 버튼 스타일 */
.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* 버튼 간 간격 */
    margin-top: 20px;
}
.model-select-btn { 
    background-color: var(--model-select-bg);
    color: var(--main-text-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 15px; 
    flex-grow: 1; /* 버튼이 컨테이너 너비에 맞춰 확장 */
    min-width: 150px; /* 최소 너비 */
}
.model-select-btn.active {
    background: var(--model-select-active-bg);
    color: var(--main-text-color);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transform: scale(1.02); /* 활성 시 약간 확대 */
}

/* 얼굴형 선택 버튼 그룹 스타일 */
#style-selection-controls {
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: var(--bg-light);
    margin-top: 30px; 
}
#style-selection-controls h3 {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--primary-button-bg); /* 헤더 H1과 비슷한 그라데이션 */
}

.face-type-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.face-select-btn {
    background-color: var(--face-tone-select-btn-default-bg); /* 기본 회색 */
    color: var(--face-tone-select-btn-default-text);
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: 700;
    flex: 1 1 100px; 
    margin: 0;
    font-size: 0.9em;
    text-transform: capitalize;
    transition: background-color 0.2s, transform 0.2s;
}
.face-select-btn.active {
    background: var(--primary-button-bg); 
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

/* 퍼스널 톤 선택 버튼 그룹 스타일 */
#tone-selection-controls {
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: var(--bg-light);
    margin-top: 30px; 
}
#tone-selection-controls h3 {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--primary-button-bg); 
}

.tone-type-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
.tone-select-btn {
    background-color: var(--face-tone-select-btn-default-bg); 
    color: var(--face-tone-select-btn-default-text);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.2s, transform 0.2s;
}
.tone-select-btn.active {
    background: var(--primary-button-bg); 
    box-shadow: 0 4px 8px rgba(252, 92, 125, 0.4);
}


/* 웹캠/이미지 영역 */
#webcam-container canvas, #webcam-container img {
    border-radius: 10px;
    border: 4px solid;
    border-image: linear-gradient(to right, #6a82fb, #fc5c7d) 1; 
    box-shadow: 0 0 12px rgba(106, 130, 251, 0.3);
    width: 100%; 
    height: auto;
    max-width: 400px; 
    display: block; 
    margin: 0 auto;
}

/* 예측 결과 (퍼센트) 컨테이너 */
#label-container {
    margin-top: 15px;
    padding: 15px;
    border-radius: 10px;
    background-color: var(--bg-light);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.prediction-item {
    padding: 8px 0;
    border-bottom: 1px solid #E0E0E0; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
}
.prediction-item strong {
    color: #fc5c7d; 
}

/* 구분선 */
hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
}


/* 💡 공통 추천 결과 (텍스트 + 이미지) 레이아웃 */
#recommendation-output {
    text-align: left;
    padding: 15px;
    border: 1px dashed #ccc;
    border-radius: 10px;
    margin-top: 20px; 
}

.recommendation-content {
    background-color: #f8f9fa; 
    padding: 20px;
    border-radius: 8px;
}

.recommendation-content h4 {
    color: var(--primary-button-bg); 
    font-size: 1.5em;
    margin-top: 0;
    border-bottom: 2px solid var(--gradient-start);
    padding-bottom: 10px;
}

.summary-text {
    font-size: 1.1em;
    margin-bottom: 20px;
    font-style: italic;
    color: #555;
}


/* ---------------------------------------------------- */
/* 🌟 1. 얼굴형 추천 스타일 (Hair Style Guide) - 레이아웃 개선 */
/* ---------------------------------------------------- */
.hair-styles-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.style-column {
    flex: 1 1 calc(50% - 10px);
    min-width: 250px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: white;
    
    display: flex; 
    flex-direction: column; /* 이미지와 버튼이 깔끔하게 쌓이도록 column으로 변경 */
    gap: 10px; 
    align-items: center; 
}

.style-column h5 {
    color: #4CAF50; 
    margin-top: 0;
    margin-bottom: 5px; 
    font-size: 1.0em; 
    text-align: center;
    width: 100%; 
    line-height: 1.4;
}

.style-column img {
    /* 얼굴형 이미지 크기 강제 고정 */
    width: 120px !important; 
    height: 120px !important; 
    max-width: 120px !important;
    object-fit: cover; 
    border-radius: 4px;
    border: 1px solid #ddd;
    flex-shrink: 0; 
}


/* 💡 AR 합성 체험 버튼 스타일 */
.ar-try-on-btn {
    background: linear-gradient(to right, #00BFFF, #3CB371); /* 밝은 파랑/초록 계열 */
    color: white;
    padding: 8px 15px;
    font-size: 0.9em;
    border-radius: 20px;
    margin-top: 5px; 
    box-shadow: 0 3px 6px rgba(0, 191, 255, 0.3);
    width: auto; /* 1. max-width 제거하여 텍스트 길이에 맞게 자동 조절 */
    /* max-width: 180px;  삭제 */
    transition: all 0.2s ease;
}

.ar-try-on-btn:hover {
    background: linear-gradient(to right, #1E90FF, #2E8B57);
    transform: translateY(-2px);
}


/* ---------------------------------------------------- */
/* 🌟 2. 퍼스널 톤 추천 스타일 (Personal Tone Guide) */
/* ---------------------------------------------------- */
.tone-styles-container {
    display: flex;
    gap: 20px;
    align-items: flex-start; 
    margin-top: 15px;
}

/* 이미지 영역 (200px 사각형) */
.tone-image-column {
    flex: 0 0 200px; /* 이미지 너비에 맞춰 크기 조정 */
    display: flex;
    justify-content: center;
    /* 💡 요청: 이미지가 너무 오른쪽으로 뜨지 않도록 중앙에 가깝게 조정 */
    align-items: center; /* 수직 중앙 정렬 유지 */
}

.tone-image-column img {
    /* 💡 요청: 톤 이미지 크기 800x481 비율 (200px x 120.25px) 및 사각형으로 조정 */
    width: 200px !important; 
    height: 120.25px !important; /* 481/800 * 200 = 120.25 */
    max-width: 200px !important;
    object-fit: cover; 
    border-radius: 6px; /* 💡 요청: 사각형으로 변경 (50% 제거, 6px 둥근 모서리) */
    border: 3px solid #FFC0CB;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; 
}

/* 텍스트 영역 */
.tone-text-column {
    flex: 1; 
    text-align: left;
}

.tone-category {
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #eee;
}
.tone-category:last-child {
    border-bottom: none;
    margin-bottom: 0;
}


.tone-category h5 {
    font-size: 1.1em;
    color: #4CAF50; 
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tone-category p {
    margin: 0;
    font-size: 0.95em;
    color: #555;
}

/* ---------------------------------------------------- */
/* 🌟 3. AR 합성 체험 기능 스타일 (디자인 개선) */
/* ---------------------------------------------------- */
#ar-container {
    max-width: 1100px;
    width: 100%;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 30px; 
    padding: 25px;
    border: 2px solid #ADD8E6; 
    border-radius: 15px;
    background-color: #f0f8ff; /* 연한 하늘색 배경 */
    box-shadow: 0 4px 10px rgba(173, 216, 230, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ar-title {
    color: #6a82fb;
    font-size: 1.5em;
    margin-bottom: 5px;
}

.ar-subtitle {
    font-style: italic;
    color: #666;
    margin-bottom: 20px;
    font-size: 0.9em;
}

/* ⭐ 수정 사항: AR 화면 중앙 정렬 및 버튼 우측 배치 */
#ar-view-and-controls-wrapper {
    display: flex; 
    gap: 15px;
    align-items: center; 
    margin-bottom: 20px;
    width: 100%;
    
    /* ⭐ 수정: 내부 래퍼를 수평 중앙 정렬 ⭐ */
    max-width: fit-content; 
    margin-left: auto;
    margin-right: auto;
    
    justify-content: center; /* 전체 래퍼를 가운데 정렬 */
}

#ar-webcam-wrapper {
    position: relative; 
    width: 400px; 
    height: 300px;
    margin: 0; /* 마진 0 유지 */
    border-radius: 10px;
    overflow: hidden; 
    border: 4px solid #6a82fb;
    box-shadow: 0 0 10px rgba(106, 130, 251, 0.5);
}
/* ⭐ /수정 사항 */

#ar-webcam-video {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 0; /* 테두리는 wrapper에 적용했으므로 비디오 테두리 제거 */
    transform: scaleX(-1); /* 거울 효과 */
    border: none; /* 💡 요청: 비디오 자체의 테두리 제거 */
}

#ar-sticker-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 1.0; 
    pointer-events: none; /* 클릭 방지 */
}

/* 🌟 새로 추가된 AR 컨트롤 그룹 스타일 */
.ar-controls-group {
    display: flex;
    justify-content: center;
    gap: 15px; 
    margin-top: 20px; 
    width: 100%;
}

#ar-screenshot-btn {
    /* primary-btn의 기본 그라데이션 대신 다른 색상으로 강조 */
    background: linear-gradient(to right, #FFC0CB, #ADD8E6); 
    color: var(--main-text-color);
    font-weight: 700;
}

#ar-stop-button {
    padding: 10px 30px;
}
#ar-sticker-transform-container {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: visible; /* 확대 시 영역을 벗어날 수 있도록 */
    /* 초기 변형 상태: 중앙 배치, 100% 크기 */
    transform: translate(0, 0) scale(1); 
    transition: none; /* JS 제어 시 CSS transition 제거 */
}

/* 스티커 이미지 (컨테이너 내부) */
#ar-sticker-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 1.0; 
    pointer-events: auto; /* ⭐ 수정: 드래그를 위해 auto로 변경 ⭐ */
    cursor: move; /* 이동 가능함을 표시 */
}

/* ⭐ AR 컨트롤 버튼 그룹 스타일 (왼쪽 배치) ⭐ */
#sticker-controls {
    display: flex;
    flex-direction: column; 
    gap: 15px;
    height: 300px; 
    justify-content: space-evenly; 
    width: 100px; /* 너비 지정 */
    flex-shrink: 0;
    margin-right: 15px; /* 웹캠과의 간격 */
}

.control-btn {
    /* ⭐ 수정: 버튼 디자인 개선 ⭐ */
    background: #E0F7FA; /* 매우 연한 하늘색 배경 */
    color: #00897B;      /* 짙은 청록색 텍스트 */
    border: 2px solid #B2EBF2; /* 연한 청록색 테두리 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    padding: 10px 5px;
    font-size: 0.9em;
    border-radius: 15px; /* 더 둥근 모서리 */
    transition: all 0.2s ease;
    font-weight: 700;
    
    display: flex; /* 내부 아이콘/텍스트 정렬 */
    flex-direction: column; /* 아이콘과 텍스트를 수직으로 쌓음 */
    align-items: center;
    justify-content: center;
    height: 100px; /* 버튼 높이 고정 (전체 480px / 3개 / 간격 고려) */
}

.control-btn i {
    /* 아이콘 크기 키우기 */
    font-size: 1.8em; 
    margin-bottom: 5px;
}

.control-btn:hover {
    background: #B2EBF2; /* 호버 시 색상 강조 */
    transform: translateY(-2px); /* 약간의 입체감 효과 */
}

/* style (5).css 파일 (🌟 3. AR 합성 체험 기능 스타일 부분에 추가) */

/* AR 컬러 선택 버튼 그룹 스타일 */
/* 💡 [수정] 컬러 선택 버튼 그룹 (세로 배치 핵심) */
#color-selection-controls.vertical-group {
    display: flex; 
    flex-direction: column; /* 세로 일렬 배치 */
    gap: 15px; /* 버튼 간격 */
    margin: 0;
    padding: 0;
    background-color: transparent; 
    border-radius: 8px;
    width: auto; 
    flex-shrink: 0;
    height: 300px; /* 웹캠 높이에 맞추기 */
    justify-content: space-evenly; /* 버튼들을 균등하게 세로 배치 */
}

.color-btn {
    /* 기존 btn 스타일을 상속받되, 새로운 디자인 적용 */
    padding: 8px 15px;
    font-size: 0.9em;
    border-radius: 20px;
    transition: all 0.2s ease;
    background-color: #cccccc;
    color: var(--main-text-color);
    font-weight: 600;
    flex-grow: 1; /* 버튼이 컨테이너 너비에 맞춰 확장 */
}

.color-btn[data-color="original"].active {
    background: linear-gradient(45deg, #FFC0CB, #ADD8E6); 
    color: #333;
}

.color-btn[data-color="warm"].active {
    background: linear-gradient(45deg, #FFD700, #FFA500); /* Warm Yellow/Orange */
    color: #333;
}

.color-btn[data-color="cool"].active {
    background: linear-gradient(45deg, #4682B4, #87CEEB); /* Cool Blue/Sky */
    color: white;
}








@media (max-width: 768px) {
    /* 💡 [추가] 헤더 텍스트와 아이콘 크기 조정 */
    header {
        padding: 20px 10px;
    }
    .header-content-wrapper {
        flex-direction: column; /* 세로로 쌓기 */
        text-align: center;
    }
    .header-icons-left, .header-icons-right {
        gap: 10px; 
    }
    .header-icon {
        width: 50px; /* 아이콘 크기 축소 */
        height: 50px;
    }
    h1 {
        font-size: 2.5em; /* 타이틀 크기 축소 */
    }
    .subtitle {
        font-size: 1em;
    }
    h2 {
        font-size: 1.5em; /* 섹션 타이틀 크기 축소 */
    }

    /* 카드 너비 조정 */
    .card {
        flex: 1 1 100%; /* 모바일에서는 너비 100% 사용 */
        min-width: unset;
        padding: 25px;
    }
    
    /* 얼굴형 추천 반응형 유지 및 이미지 크기 조정 */
    .hair-styles-container {
        gap: 15px;
    }
    .style-column {
        flex-direction: column; 
        align-items: center;
        flex: 1 1 100%; /* 모바일에서는 100% 사용 */
        min-width: unset;
    }
    .style-column h5 {
        font-size: 0.9em;
    }
    .style-column img {
        /* 이미지 크기 고정값을 100px로 줄여 모바일 화면에 맞춤 */
        width: 100px !important; 
        height: 100px !important; 
        max-width: 100px !important;
    }

    /* 톤 추천 반응형 수정 */
    .tone-styles-container {
        flex-direction: column; 
        align-items: center;
        gap: 15px;
    }
    .tone-image-column {
        margin-bottom: 0;
        flex: 0 0 auto;
    }
    .tone-image-column img {
        /* 고정 크기 대신 최대 너비로 조정 (약간 더 작게) */
        width: 250px !important; 
        height: auto !important; 
        max-width: 250px !important; 
    }
    .tone-text-column {
        width: 100%;
        text-align: center;
    }
    .tone-category {
        text-align: left; /* 텍스트는 다시 왼쪽 정렬 */
    }
    .tone-category h5 {
        justify-content: center;
    }
    .tone-category p {
        font-size: 0.9em;
    }
    
    /* 💡 [수정] AR 뷰와 버튼을 세로로 전환 */
    #ar-view-and-controls-wrapper {
        flex-direction: column; 
        gap: 20px;
        max-width: 100%;
        justify-content: center;
    }
    
    /* ⭐ 수정: 모바일 AR 웹캠 뷰 크기 조정 ⭐ */
    #ar-webcam-wrapper {
        width: 100%; 
        max-width: 360px; /* AR 화면 너비를 360px로 확장 */
        height: 270px; /* 비율 유지 (4:3) */
        margin-left: 0; /* 음수 마진 제거 */
    }
    
    /* 💡 [수정] 모바일에서 스티커 컨트롤 버튼 그룹을 가로로 배치 */
    #sticker-controls {
        flex-direction: row; /* 모바일에서는 가로로 배치 */
        height: auto;
        width: 100%;
        max-width: 360px; /* AR 화면 너비와 동일하게 */
        justify-content: space-between; 
        gap: 10px;
        margin-right: 0; /* 마진 제거 */
    }

    /* ⭐ 수정: 모바일 컨트롤 버튼 높이 조정 ⭐ */
    .control-btn {
        flex: 1; /* 가로 배열 시 균등하게 */
        height: auto; /* 고정 높이 제거 */
        padding: 8px 5px; /* 패딩 조정 */
        font-size: 0.8em;
    }
    .control-btn i {
        font-size: 1.5em; /* 아이콘 크기 약간 축소 */
    }
    
    /* 💡 [수정] 모바일에서 컬러 선택 버튼을 가로로 배치 */
    #color-selection-controls.vertical-group {
        flex-direction: row; 
        height: auto;
        width: 100%;
        max-width: 360px; /* AR 화면 너비와 동일하게 */
        justify-content: space-between; 
        gap: 10px;
    }
    #color-selection-controls.vertical-group .color-btn {
        flex: 1; 
        margin: 0; 
        padding: 10px 5px;
        font-size: 0.85em;
    }

    /* AR 버튼 반응형 */
    .ar-controls-group {
        flex-direction: row; /* AR 제어 버튼은 가로로 유지 */
        gap: 10px;
    }
    .ar-controls-group button {
        width: auto;
        flex: 1;
        max-width: unset;
        font-size: 0.9em;
    }

    /* 버튼 그룹 간격 조정 */
    .button-group {
        gap: 8px;
    }
    .model-select-btn {
        min-width: 120px;
        padding: 8px 12px;
        font-size: 0.9em;
    }
    .face-type-buttons, .tone-type-buttons {
        gap: 5px;
    }
    .face-select-btn, .tone-select-btn {
        padding: 8px 10px;
        font-size: 0.8em;
    }
}