/* style.css - 참에듀 공부 MBTI 프리미엄 디자인 시스템 */

:root {
    --contrast-min: 4.5; /* Minimum WCAG AA contrast ratio */
    --input-bg: rgb(5 19 39 / 96%); /* Slightly darker for better contrast */
    --input-text: #fff; /* High contrast text */
    --primary-color: #E2C275; /* Premium Gold */
    --primary-light: #FFE082;
    --primary-dark: #07162c; /* Deep Navy Dark */
    --secondary-color: #ffc83b; /* Accent Gold */
    --secondary-dark: #e5b22b;
    --bg-gradient: radial-gradient(circle at center, #0e294f 0%, #051329 100%);
    --card-bg: rgb(10 29 55 / 82%); /* Frosted Dark Navy */
    --text-main: #fff;
    --text-muted: #cbd5e0;
    --border-color: rgb(226 194 117 / 22%); /* Translucent Gold */
    --shadow-premium: 0 20px 50px rgb(0 0 0 / 40%);
    --shadow-inset: inset 0 2px 4px rgb(255 255 255 / 5%);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 8px;
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    /* 윈도우 크롬 환경 등에서 숫자 및 기호 자간이 비정상적으로 벌어지는 버그 교정용 최적 폰트 스택 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", 'Inter', "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.03em; /* 가독성을 위한 최적화 자간 미세 조정 */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* CSS-only background: 성능 목표 < 15KB 유지, PNG 의존 제거 */
    background:
        radial-gradient(ellipse at 15% 40%, rgb(20 60 120 / 35%) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 70%, rgb(15 45 90 / 30%) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%,  rgb(25 70 130 / 25%) 0%, transparent 45%),
        linear-gradient(170deg, #0e2445 0%, #071830 45%, #03101f 100%);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

/* 2. 컨테이너 & 레이아웃 */
.app-container {
    width: 100%;
    max-width: 480px; /* 모바일 전용 컨테이너 고수 */
    min-height: 100vh;
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    box-shadow: 0 0 100px rgb(0 0 0 / 50%);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 30px 24px;
}

/* 3. 스크린 전환 메커니즘 */
.screen {
    display: none;
    opacity: 0%;
    transform: translateY(20px);
    transition: var(--transition-smooth);
    width: 100%;
    flex-direction: column;
    flex-grow: 1;
}

.screen.active {
    display: flex;
    opacity: 100%;
    transform: translateY(0);
}

/* 4. 공통 UI 컴포넌트 */
.logo {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: -1px;
    text-align: center;
    margin-bottom: 40px;
}

.logo span {
    color: var(--secondary-color);
}

.logo-small {
    font-size: 18px;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: -0.5px;
}

.logo-small span {
    color: var(--secondary-color);
}

/* 새 SVG 로고 이미지 스타일 */
.brand-logo-main {
    display: block;
    width: 300px;
    height: auto;
    margin: 0 auto 20px;

    /* 드롭 섀도우로 딥네이비 배경에서 선명하게 */
    filter: drop-shadow(0 2px 16px rgb(226 194 117 / 30%));
}

.logo-small-img {
    display: block;
    height: 36px;
    width: auto;
    filter: drop-shadow(0 1px 6px rgb(226 194 117 / 20%));
}

/* 브랜드 슬로건 (로고 아래 한 줄) */
.brand-slogan {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgb(203 213 224 / 70%); /* --text-muted 보다 약간 더 투명 */
    margin-bottom: 18px;
    line-height: 1.5;
}

.badge {
    background: rgb(15 60 138 / 8%);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 50px;
    align-self: flex-start;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.highlight {
    background: linear-gradient(120deg, var(--secondary-color) 0%, #ffeaa7 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

h1 {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 30px;
}

/* 스펙 카드 */
.spec-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.spec-card {
    flex: 1;
    background: rgb(226 194 117 / 5%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-premium);
}

.spec-card i {
    font-size: 20px;
    color: var(--primary-color);
}

.spec-card span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

/* 폼 요소 */
.form-group {
    margin-bottom: 24px;
    width: 100%;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--primary-color);
}

select, input[type="text"], input[type="tel"], input[type="number"] {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--input-text);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-inset);
    outline: none;
    appearance: none;
    appearance: none;
}

select option {
    background: var(--input-bg);
    color: var(--input-text);
    font-weight: 600;
}

select option:checked,
select option:hover {
    background: #0e294f;
    color: var(--primary-color);
}

select:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="number"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgb(15 60 138 / 10%);
}

/* Chrome, Safari, Edge, Opera에서 숫자 입력 상자의 스핀 화살표 버튼 제거 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox에서 숫자 입력 상자의 스핀 화살표 버튼 제거 */
input[type="number"] {
    -moz-appearance: textfield;
}

/* 고등학생 숫자 입력란(type="number") 전용 글래스모피즘 테마 및 크기 강화 */
input[type="number"] {
    width: 100%;
    padding: 16px !important;
    font-size: 16px !important;
    font-family: inherit;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-inset) !important;
    outline: none;
    box-sizing: border-box;
}

input[type="number"]:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgb(15 60 138 / 10%) !important;
}

.helper-text {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* 버튼 */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 100%;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 8px 20px rgb(15 60 138 / 25%);
}

.btn-primary:disabled {
    background: hsl(218deg 10% 75%);
    color: hsl(218deg 10% 55%);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary {
    background: rgb(15 60 138 / 8%);
    color: var(--primary-color);
}

.btn-secondary:hover {
    background: rgb(15 60 138 / 14%);
}

.btn-yellow {
    background: var(--secondary-color);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgb(255 200 59 / 25%);
}

.btn-yellow:hover {
    background: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgb(255 200 59 / 30%);
}

.btn-block {
    width: 100%;
}

.mt-10 { margin-top: 10px; }

/* 5. 질문 스크린 스타일 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}

.progress-container {
    flex-grow: 1;
    margin: 0 16px;
    height: 8px;
    background: rgb(15 60 138 / 10%);
    border-radius: 50px;
    overflow: hidden;
}

.progress-bar {
    width: 20%;
    height: 100%;
    background: var(--primary-color);
    border-radius: 50px;
    transition: var(--transition-smooth);
}

.step-indicator {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-color);
}

.question-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 40px;
}

.question-content h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 24px;
    word-break: keep-all;
}

.options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-card {
    background: rgb(226 194 117 / 4%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-premium);
    color: #fff;
}

.option-card:hover {
    border-color: var(--primary-color);
    background: rgb(226 194 117 / 12%);
    transform: translateX(4px);
}

.option-card.selected {
    border-color: var(--primary-color);
    background: rgb(226 194 117 / 20%);
    font-weight: 700;
    box-shadow: 0 0 15px rgb(226 194 117 / 20%);
}

.option-card::before {
    content: "\f111";
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 18px;
}

.option-card.selected::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    color: var(--primary-color);
    font-size: 18px;
}

/* 6. 게이트 (개인정보) 스크린 */
.success-icon {
    font-size: 60px;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 20px;
}

.gate-content {
    text-align: center;
}

.benefit-box {
    background: rgb(14 41 79 / 85%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: left;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-premium);
    backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.benefit-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.benefit-item i {
    font-size: 20px;
    margin-top: 2px;
}

.benefit-item h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.benefit-item p {
    font-size: 12px;
    color: var(--text-muted);
}

.text-primary { color: var(--primary-color); }
.text-yellow { color: var(--secondary-color); }

.privacy-agreement {
    display: flex;
    gap: 10px;
    text-align: left;
    margin-bottom: 24px;
    font-size: 12px;
    color: var(--text-muted);
    align-items: flex-start;
}

.privacy-agreement input {
    margin-top: 2px;
}

/* 7. 결과 스크린 */
.result-header {
    text-align: center;
    margin-bottom: 24px;
}

.greeting {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.result-type {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.result-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-light);
}

.result-card {
    background: rgb(14 41 79 / 85%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-premium);
    backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.result-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.summary-text {
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
}

/* 바 차트 */
.chart-container {
    margin-bottom: 30px;
}

.chart-container h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.chart-bar-item {
    margin-bottom: 12px;
}

.chart-bar-item .label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.bar-outer {
    background: rgb(15 60 138 / 8%);
    height: 24px;
    border-radius: 50px;
    overflow: hidden;
}

.bar-inner {
    background: var(--primary-color);
    color: white;
    height: 100%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    border-radius: 50px;
    transition: width 1s ease-out;
}

/* 쿠폰/티켓 */
.exclusive-offer {
    background: rgb(15 60 138 / 3%);
    border: 2px dashed var(--primary-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-premium);
}

.gift-box-icon {
    font-size: 40px;
    color: var(--secondary-color);
    margin-bottom: 12px;
}

.exclusive-offer h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.exclusive-offer p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.ticket {
    background: rgb(14 41 79 / 85%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow-premium);
    position: relative;
    backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ticket::before, .ticket::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--card-bg);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--border-color);
}

.ticket::before { left: -10px; }
.ticket::after { right: -10px; }

.ticket-body {
    padding: 20px;
}

.ticket h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.ticket-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.ticket-status {
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary-dark);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 8. 예약 모달 (슬라이드업 패널) */
.modal {
    position: fixed;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: rgb(7 22 44 / 97%);
    border: 1px solid var(--border-color);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    box-shadow: 0 -10px 40px rgb(0 0 0 / 50%);
    backdrop-filter: blur(20px);
    transition: var(--transition-smooth);
    z-index: 1000;

    /* 🚨 겹침 및 침범 차단 처리 */
    visibility: hidden;
    opacity: 0%;
    pointer-events: none;
}

.modal.active {
    bottom: 0;
    visibility: visible;
    opacity: 100%;
    pointer-events: auto;
}

.modal-content {
    padding: 24px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
}

.btn-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-muted);
    cursor: pointer;
}

.modal-info {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* 🚨 데이 / 타임 피커 정밀 격자화 (모바일 360px 대응) */
.day-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.time-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.day-opt, .time-opt {
    padding: 10px 2px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    background: rgb(14 41 79 / 70%);
    color: var(--text-main);
    transition: var(--transition-smooth);
}

.time-opt {
    padding: 12px 6px;
    font-size: 13px;
}

.day-opt:hover, .time-opt:hover {
    border-color: var(--primary-color);
}

.day-opt.active, .time-opt.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 서머리 박스 */
.summary-box {
    background: rgb(14 41 79 / 70%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 24px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.summary-line:last-child {
    margin-bottom: 0;
    border-top: 1px solid rgb(15 60 138 / 10%);
    padding-top: 6px;
    margin-top: 6px;
}

.summary-line span {
    color: var(--text-muted);
}

/* 9. 컨펌 스크린 */
.confirmed-content {
    text-align: center;
    padding-top: 40px;
}

.success-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgb(15 60 138 / 8%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    color: var(--primary-color);
    margin: 0 auto 24px;
}

.alert-box {
    background: rgb(14 41 79 / 85%);
    border-left: 4px solid var(--secondary-color);
    padding: 16px;
    border-radius: var(--radius-sm);
    text-align: left;
    margin: 24px 0;
    backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.alert-box p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-main);
}

.alert-desc {
    color: var(--text-muted);
    margin-top: 4px;
}

.confirmed-summary {
    background: rgb(14 41 79 / 85%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: var(--shadow-premium);
    backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.confirmed-summary .line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 10px;
}

.confirmed-summary .line:last-child {
    margin-bottom: 0;
}

.confirmed-summary .line span:first-child {
    color: var(--text-muted);
    font-weight: 600;
}

.confirmed-summary .line span:last-child {
    font-weight: 700;
    color: var(--primary-color);
}

/* 10. 원장님 관리 대시보드 전용 스타일 */
.btn-admin-toggle {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(15 60 138 / 6%);
    border: 1px solid rgb(15 60 138 / 15%);
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    z-index: 99;
}

.btn-admin-toggle:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgb(15 60 138 / 15%);
}

.admin-table th, .admin-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.admin-table tr:hover {
    background: rgb(15 60 138 / 2%);
}

.admin-content h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 8px;
    text-align: left;
}

/* 13. 참에듀 자기주도 진학지도 교습소 - 블로그 스킨 스타일 추가 */
.brand-cap-brain-icon {
    display: block;
    margin: 0 auto 20px;
    filter: drop-shadow(0 0 8px rgb(226 194 117 / 40%));
    transition: var(--transition-smooth);
}

.brand-cap-brain-icon:hover {
    transform: scale(1.08) rotate(3deg);
    filter: drop-shadow(0 0 15px rgb(226 194 117 / 70%));
}

.brand-text-block {
    text-align: center;
    margin-bottom: 30px;
}

.brand-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.5px;
    text-shadow: 0 0 10px rgb(226 194 117 / 25%);
    margin-bottom: 6px;
}

/* duplicate .brand-slogan removed – see line 127 */

/* 5 Quick Tabs matching Naver Blog layout */
.skin-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 30px;
    width: 100%;
}

.skin-tab-btn {
    background: rgb(226 194 117 / 5%);
    color: #fff;
    border: 1px solid rgb(226 194 117 / 25%);
    border-radius: 6px;
    padding: 10px 2px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
    backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.skin-tab-btn:hover {
    background: rgb(226 194 117 / 20%);
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgb(226 194 117 / 30%);
    transform: translateY(-2px);
}

/* Glassmorphic Info Modal Overlay */
.info-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(3 10 20 / 80%);
    backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0%;
    transition: opacity 0.3s ease;
}

.info-modal-overlay.active {
    display: flex;
    opacity: 100%;
}

.info-modal-content {
    background: rgb(10 29 55 / 95%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 400px;
    padding: 30px 24px;
    position: relative;
    box-shadow: var(--shadow-premium);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #fff;
}

.info-modal-overlay.active .info-modal-content {
    transform: scale(1);
}

.info-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.info-modal-close:hover {
    color: #fff;
}

.info-modal-body h3 {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 15px;
    border-bottom: 1px solid rgb(226 194 117 / 15%);
    padding-bottom: 8px;
}

.info-modal-body p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.info-modal-body ul {
    list-style: none;
    margin-bottom: 15px;
}

.info-modal-body li {
    font-size: 14px;
    margin-bottom: 8px;
    position: relative;
    padding-left: 18px;
}

.info-modal-body li::before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    left: 5px;
    font-weight: bold;
}

/* ================================================
   1.3 모바일-퍼스트: 360px 이하 소형 기기 대응
   터치 타겟 48px 보장, 텍스트 Warm White 유지
   ================================================ */
@media (width <= 360px) {
    .app-container {
        padding: 20px 16px;
    }

    h1 {
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    h2 {
        font-size: 19px;
    }

    .brand-logo-main {
        width: 180px;
    }

    .btn {
        padding: 15px 20px;
        font-size: 15px;
        min-height: 48px; /* 터치 최소 영역 */
    }

    .option-card {
        padding: 15px 16px;
        font-size: 14px;
        min-height: 48px;
    }

    select, input[type="text"], input[type="tel"], input[type="number"] {
        padding: 14px 12px !important;
        font-size: 15px !important;
        min-height: 48px;
    }

    .skin-tab-btn {
        padding: 10px;
        font-size: 12px;
        min-height: 48px;
    }

    .spec-cards {
        flex-direction: column;
        gap: 8px;
    }

    .day-opt, .time-opt {
        min-height: 48px;
        font-size: 12px;
    }

    .modal-content {
        padding: 18px 16px;
    }

    .description {
        font-size: 13px;
    }

    .badge {
        font-size: 11px;
    }
}

/* 480px 이상: 컨테이너 중앙 고정 */
@media (width >= 480px) {
    .app-container {
        border-radius: var(--radius-lg);
        min-height: auto;
        margin: 24px auto;
    }
}