/* ──────────────────────────────────────────────────────────
   리셋 & 기본
────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    background: #f9f9fb;
}

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

/* ──────────────────────────────────────────────────────────
   🔹 상단 네비게이션 바
────────────────────────────────────────────────────────── */
.topbar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    z-index: 2100;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

/* ▣ 좌측 로고 */
.nav-left .nav-logo {
    display: flex;
    align-items: center;
    height: 56px;
    object-fit: contain;
}

/* ▣ 우측 아이콘 버튼들 */
.nav-right {
    display: flex;
    gap: 20px;
}

/* ▣ 공통 아이콘 버튼 스타일 */
.icon-btn {
    position:relative;
    border: none;
    background: none;
    color: #444;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: color 0.2s ease;
    cursor: pointer;
    margin-top: -8px;
}

.icon-btn:hover {
    color: #5b6af0;
}

.icon-btn:active {
    transform: scale(0.95);
}

.icon-btn:disabled {
    color: #aaa;
    opacity: 0.6;
    pointer-events: none;
}

.icon-btn .btn-label{
    position:absolute;
    top:100%; left:50%;                   /* 버튼 하단 중앙 기준 */
    transform:translate(-50%, -2px);      /* 살짝 위로 2 px 끌어올려 겹치기 */
    font-size:11px;
    line-height:1;
    color:#222;
    white-space:nowrap;
    pointer-events:none; user-select:none;
}

/* ──────────────────────────────────────────────────────────
   🔹 단계형 프로그레스바 (앱 스타일)
────────────────────────────────────────────────────────── */
.progress-box{
    height:36px;                     /* □ 전체 높이 */
    display:flex;align-items:center; /* 세로 가운데 */
    position:relative;
}

/* 1) 트랙 밖으로 화살표가 나와야 하므로 overflow 제거 */
.progress-track{
    flex:1; height:36px;
    border-radius:6px;
    /* overflow:hidden;   ⬅️ 주석 처리하거나 visible */
    overflow:visible;
    background:#e2e4ec;
}


/* 2) 화살표를 붙일 기준면이 되도록 relative */
.progress-fill{
    position:relative;                 /* ★ 추가 */
    height:100%; width:0%;
    background:linear-gradient(90deg,#5b6af0,#98b3ff);
    border-radius:6px;
    transition:width .35s ease;
}

/* ▼ 아래쪽 화살표 (기존 ::after 유지) */
.progress-fill::after{
    content:'';
    position:absolute;
    left:100%;
    bottom:-1px;
    transform:translateX(-50%);
    width:0; height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-bottom:8px solid #5b6af0;
        /* ✨ 아주 연한 네온 효과 */
    filter: drop-shadow(0 0 4px rgba(91,106,240,.45))
            drop-shadow(0 0 6px rgba(91,106,240,.25));
}

/* ▲ 위쪽 화살표 (새로 추가) */
.progress-fill::before{
    content:'';
    position:absolute;
    left:100%;
    top:-1px;                         /* 위로 8px */
    transform:translateX(-50%);
    width:0; height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:8px solid #5b6af0;     /* 색상 동일 */
        /* ✨ 아주 연한 네온 효과 */
    filter: drop-shadow(0 0 4px rgba(91,106,240,.45))
            drop-shadow(0 0 6px rgba(91,106,240,.25));
}

.progress-text{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    font-size:15px;font-weight:600;
    color:#333;pointer-events:none;
}


/* ──────────────────────────────────────────────────────────
    AI 상담 섹션
────────────────────────────────────────────────────────── */

/* 전체 화면 */
/* 1) 페이지 전체를 하나의 Flex-Column 으로 */
.page-ai{
    height:100%;
    display:flex;
    flex-direction:column;
    margin-top: 56px;
}

/* ▣ 스크롤 영역 ─ ai-inner */
.ai-inner{
    position:relative;
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:96px;
}

/* (선택) 포커스 들어오면 둘 다 서서히 숨김 */
.ai-inner:focus-within::before,
.ai-inner:focus-within::after{
    opacity:0; transition:.2s;
}




/* 1) 점선 사각형 — drop-guide 자체 */
.drop-guide{
    position:absolute;
    top:55%; left:50%;
    transform:translate(-50%,-50%);
    width:72%;               /* % 또는 px 로 조절 */
    max-width:440px;
    height:260px;
    border:3px dashed #ced0d3;
    border-radius:14px;
    pointer-events:none;
    user-select:none;
    z-index:1;
}

/* ▣ 가운데 원 + 플러스 */
.drop-guide::before{
    content:'＋';
    position:fixed;
    top:40%; left:50%;
    transform:translate(-50%,-50%);
    width:90px; height:90px;
    border-radius:50%;
    background:#f4f5f6b7;
    color:#bfc1c4ec;
    font:700 52px/90px 'Noto Sans KR',sans-serif;
    text-align:center;
    pointer-events:none;
    user-select:none;
    z-index:3;                      /* ▲ 플러스가 맨 위 */
}

/* 2) 파일(문서) 아이콘 — ::before  */
.drop-guide::before{
    content:"\f15c";                       /* fa-file (문서) */
    font-family:"Font Awesome 6 Free";
    font-weight:900;                       /* solid */
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:64px;
    color:#d6d8dbf3;
}

.ai-inner.dragging   .drop-guide{ border-color:#4a8df8; background:rgba(74,141,248,.06); }
.ai-inner.dragging::before{ opacity:.15; }   /* 원＋ 살짝 희미하게 */


.tip {
    display:block;

    position:absolute;
    top:80%; left:50%;
    transform:translate(-50%,-50%);

    width: 200px;
    text-align: center;
    font-size:12px;
    color:#d0d3d6
}


/* 안내 텍스트 */
.ai-guide {
    background: linear-gradient(135deg, #3e3a4bf8, #31244df5);
    padding: 7px;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 550;
    overflow:hidden;
}

.ai-guide.effect::before,
.ai-guide.effect::after{
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(2px 2px at 20% 30%,#ffffffcc 50%,transparent 52%),
        radial-gradient(2px 2px at 70% 80%,#ffffffbb 50%,transparent 52%),
        radial-gradient(1.5px 1.5px at 40% 60%,#ffffffaa 50%,transparent 52%),
        radial-gradient(1.5px 1.5px at 80% 25%,#ffffff99 50%,transparent 52%);
    background-size:100% 100%;
    animation:stars 18s linear infinite;
}
.ai-guide.effect::after{animation-duration:24s;opacity:.5;}
@keyframes stars{
    from{transform:translateZ(0) scale(1);}
    to  {transform:translateZ(-300px) scale(1.6);}
}

.ai-info {
    background: transparent;
    padding: 0;
    box-shadow: none;
    font-size: 14px;
    color: #fff;
}

.question-pill {
    display: flex;
    padding: 1px 3px;
    margin: 1px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    align-items: flex-start;
}

.question-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-default);
}

/* 입력창 */
.ai-textarea-wrap {
    width: 100%;
    margin: 0;
    padding: 12px;
    margin-top: -8px;
}

.ai-textarea-wrap textarea {
    width: 100%;
    height: 180px;
    border: none;
    border-radius: 0;
    padding: 12px;
    font-size: 16px;
    line-height: 1.6;
    background: #fafafa;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
    resize: none;
    margin-top: -4px;
}

.ai-textarea-wrap textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.12);
}


/* ──────────────────────────────────────────────────────────
    채팅 입력창
────────────────────────────────────────────────────────── */
.chat-input-bar{
    position:fixed;

    bottom:env(safe-area-inset-bottom,0); /* iOS ❶ 노치·홈바 대응 */
    left:0; right:0;
    max-width:1920px;
    margin:0 auto;
    background:#fff;
    border-top:1px solid #ddd;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:999;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    box-shadow:0 -2px 10px rgba(0,0,0,.05);
}


.chat-input-row {
    display: flex;
}

.chat-textarea {
    flex: 1;
    min-height: 42px;
    max-height: 100px;
    resize: none;
    border: none;
    border-radius: 0;
    padding: 10px 0 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
    background-color: transparent;
}

/* ──────────────────────────────────────────────
    버튼 레이아웃 : 좌(←) ‖ 중(🎙) ‖ 우(→)
────────────────────────────────────────────── */
/* ① 버튼 바 : 좌우는 Flex 정렬, Mic는 absolute 가운데 */
.ai-button-bar.v2 {
    position: relative;           /* Mic를 절대 위치로 잡기 위해 */
    display: flex;
    justify-content: space-between;   /* ←   → 를 양 끝으로 */
    align-items: center;
    width: 100%;
}

/* ② Mic 래퍼 : 바 전체의 정확한 중앙에 고정 */
.mic-button-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ③ Back / Send 래퍼는 기본 Flex 위치 그대로 
.ai-btn-wrapper-back { }
.ai-btn-wrapper-send { }

/* ───── 이하 버튼 공통 스타일은 그대로 유지 ───── */

.ai-btn,
.mic-btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid #cccccc;
    border-radius: 50%;
    background: transparent;

    color: #555555;
    font-size: 18px;

    transition: background 0.2s ease, transform 0.1s ease;
}

.ai-btn:hover,
.mic-btn:hover {
    background: #f5f5f5;
}

.ai-btn:active,
.mic-btn:active {
    transform: scale(0.95);
}

.ai-btn[disabled],
.mic-btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

.send-btn {
    border-color: #1e90ff;
    color: #1e90ff;
}

.ai-btn:focus-visible,
.mic-btn:focus-visible {
    outline: 2px solid #1e90ff;
    outline-offset: 2px;
}


/* ──────────────────────────────────────────────────────────
    프로그래스 상태
────────────────────────────────────────────────────────── */
.progress-steps-wrapper {
    width: 100%;
}

.progress-steps {
    position: absolute;
    display: flex;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    gap: 16px;
    margin-top: 24px;
}

.step-item {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 50%;
    background-color: #333;
    color: #aaa;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 2px solid #666;
    font-size: 0.9rem;
}

.step-item.active {
    background-color: #66aaff;
    color: #fff;
    border-color: #66aaff;
    box-shadow: 0 0 10px #66aaff80;
}

/* ✅ 통일된 버튼 스타일 */
.view-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
}

#viewStatementBtn {
    /* 버튼 스타일 유지 */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #333;
    color: #aaa;
    border: 1px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    position: relative;
}

.view-btn-label {
    font-size: 0.65rem;
    color: #4d8fff;
    text-align: center;
    white-space: normal; /* or nowrap, depending */
    word-break: keep-all;
    line-height: 1.2;
    margin-top: 4px;
}

/* ✅ 비활성화 상태 */
#viewStatementBtn:disabled {
    background-color: #222;
    color: #666;
    border-color: #444;
    cursor: not-allowed;
}

/* ✅ 활성화 시 hover 효과 */
#viewStatementBtn:not(:disabled):hover {
    background-color: #4d8fff;
    color: #fff;
    border-color: #4d8fff;
    box-shadow: 0 0 10px #4d8fff80;
}

#viewStatementBtn {
    transition: background-color 0.3s ease;
}

/* ✅ 알림 원형 애니메이션 */
.notify-circle {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 40px;
    height: 40px;
    stroke: red;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    pointer-events: none;
    z-index: 5;
    transition: none;
}

.notify-circle.animate {
    animation: drawCircle 0.6s ease-out forwards;
}

/* 안내 아이콘 강조 */
.notify-animate {
    position: relative;
    background: none;
    border: none;
    padding: 0;
}

.notify-animate[disabled] {
    opacity: 1;              /* ✅ SVG가 투명해지지 않게 */
    pointer-events: none;    /* ✅ 클릭은 안 되도록 유지 */
}

@keyframes drawCircle {
    from { stroke-dashoffset: 113; }
    to   { stroke-dashoffset: 0; }
}


/* ai-info 기본값: 보이지 않도록 투명 + 살짝 아래 */
#aiInfo{
    opacity:0;
    transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease;
}

/* .show 클래스가 붙으면 부드럽게 올라오며 나타남 */
#aiInfo.show{
    opacity:1;
    transform:translateY(0);
}

/* ──────────────────────────────────────────────────────────
    모달창 섹션
────────────────────────────────────────────────────────── */
/* 음성 인식 오버레이 */
.mrc_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
}

/* 파형 애니메이션 */
.mic-wave {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.mic-wave .circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.3;
    animation: micPulse 1s infinite ease-in-out;
}

.mic-wave .circle:nth-child(2) {
    animation-delay: 0.2s;
}
.mic-wave .circle:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes micPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.8); opacity: 1; }
}


/* ───────────────────────────────────────────
   길이 모달 레이아웃 · 버튼 · 타이포
────────────────────────────────────────────*/
.len-modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.len-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}
.len-body {
    position: relative;
    width: min(90vw, 420px);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(0,0,0,.4);
    overflow: hidden;               /* 라운드 유지 */
    display: flex;
    flex-direction: column;
}

/* Header */
.len-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    background: #f2f4f8;
    border-bottom: 1px solid #e0e4ea;
    font: 700 17px/1 'Noto Sans KR', sans-serif;
}
.len-count {
    padding: 6px 12px;
    background: transparent;
    border: solid 1px #111;
    color: #3a3a3a;
    border-radius: 6px;
    font-size: 15px;
}

/* Middle */
.len-middle {
    padding: 28px 24px 24px;
    text-align: center;
    font: 15px/1.6 'Noto Sans KR', sans-serif;
    color: #333;
}

/* Footer */
.len-footer {
    display: flex;
    gap: 32px;                      /* ← 요청 gap */
    padding: 20px 24px 28px;
}
.len-btn {
    flex: 1 1 110px;                /* flex 110 (grow 1, shrink 1, basis 110px) */
    padding: 12px 0;
    border: none;
    border-radius: 8px;
    font: 600 15px/1 'Noto Sans KR', sans-serif;
    cursor: pointer;
    transition: background .2s;
}
.len-btn:first-child { background:#4f6ef7; color:#fff; }
.len-btn:last-child  { background:#e5e8ee; color:#333; }
.len-btn:hover       { filter: brightness(.95); }



/* ──────────────────────────────────────────────────────────
    모달창2 섹션 (안내 모달)
────────────────────────────────────────────────────────── */
/*────────────────────────────────────────────────────────────
    🔹  App Modal  (컴팩트·20 % 더 촘촘한 버전)
────────────────────────────────────────────────────────────*/

/* 1) 모달 셸 */
.app-modal{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    z-index:2000;
    font-family:"Pretendard","Noto Sans KR",sans-serif;
}
.app-modal.hidden{ display:none; }

/* 어두운 백드롭 */
.app-modal .modal-backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(3px);
}

/* 2) 모달 박스 (패딩·갭 −20 %) */
.app-modal .modal-body{
    position:relative;
    width:90vw;
    max-width:440px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 8px 28px rgba(0,0,0,.28);
    padding:19px 18px 22px;     /* 24·22·28 → 19·18·22 */
    z-index:2010;

    display:flex;
    flex-direction:column;
    gap:19px;                   /* 24px → 19px */
    margin-top:-11vh;
}

/* 3) 정보 래퍼 */
.modal-info{
    display:flex;
    flex-direction:column;
    gap:18px;                   /* 22px → 18px */
}

/* 4) 폼 요소 */
.form-group{
    display:flex;
    flex-direction:column;
    gap:6px;                    /* 8px → 6px */
}

/* 레이블 */
.field-label{
    font-size:.95rem;
    font-weight:600;
    color:#222;
}

/* 입력창 (이름·연락처·인증번호) */
.form-group input[type="text"],
.form-group input[type="tel"]{
    width:100%;
    padding:10px 11px;          /* 12px 14px → 10px 11px */
    font-size:.95rem;
    border:1px solid #ccd0d7;
    border-radius:8px;
    transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus{
    border-color:#2d8cff;
    box-shadow:0 0 0 3px rgba(45,140,255,.2);
    outline:none;
}

/* 5) 버튼 공통 */
.btn-secondary,
.modal-next{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:10px 0;             /* 12px → 10px */
    font-size:.9rem;
    font-weight:600;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:background .2s, opacity .2s;
}

.btn-secondary{
    background:#2d8cff;
    color:#fff;
}
.btn-secondary:hover{ background:#1e6fd8; }

.modal-next{
    background:#5b6af0;
    color:#fff;
}
.modal-next:hover:not([disabled]){ background:#4859e8; }

.modal-next[disabled]{
    opacity:.45;
    cursor:not-allowed;
    pointer-events:none;
}

/* 6) 인증 타이머 */
.auth-timer{
    margin-top:5px;             /* 6px → 5px */
    font-size:.8rem;
    color:#c7352d;
    font-weight:600;
}

.modal-next{
    background:#1eb980;
    color:#fff;
}
.modal-next:hover:not([disabled]){
    background:#159e6d;      /* 15 % 어둡게 */
}

/*──────── Media Queries ────────*/
@media (min-width:480px){
    .app-modal .modal-body{
        padding:21px 22px 26px; /* 26·28·32 ×0.8 */
        gap:21px;               /* 28px → 21px */
    }
    .modal-info{ gap:21px; }    /* 26px → 21px */
}


/*──────────────────────────────────────────────
  ▣ 입력 길이 분기 모달 (#len-modal)
──────────────────────────────────────────────*/
#len-modal {
    position: fixed;                /* 뷰포트 기준 고정 */
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;            /* 세로 중앙 */
    justify-content: center;        /* 가로 중앙 */
    z-index: 10000;                 /* 최상단에 배치 */

}

#len-modal.hidden {
    display: none;                  /* JS로 토글 */
}

/* ── 안내 문장 ──────────────────────────────── */
#len-modal .modal-info {
    margin-bottom: 20px;
}

/* ── 버튼 공통 ──────────────────────────────── */
#len-modal .modal-body button {
    width: 100%;
    padding: 12px 0;
    margin-top: 12px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

/* ① GPT-02 바로 실행 */
#btnLengthReview {
    background: #1a73e8;
    color: #fff;
}
#btnLengthReview:hover {
    background: #1763cb;
}

/* ② 기존 질문 진행 */
#btnLengthContinue {
    background: #6b7280;
    color: #fff;
}
#btnLengthContinue:hover {
    background: #4d5259;
}

/* ── 등장 애니메이션 ────────────────────────── */
@keyframes fadeSlide {
    0%   { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/*──────────────────────────────────────────────
  ▣ 다크 모드(선택)
──────────────────────────────────────────────*/
@media (prefers-color-scheme: dark) {
    #len-modal .modal-body {
        background: #1e1e1e;
        color: #e5e7eb;
    }
    #btnLengthContinue       { background: #4b5563; }
    #btnLengthContinue:hover { background: #374151; }
}


/* ───────────────────────────────
   문자 누적 표시 영역 (.int)
─────────────────────────────── */
.int {
    width:          100px;
    margin:         4px 2px;
    padding:        4px 12px;
    text-align:     right;
    font:           600 1rem/1.4 "Pretendard", "Noto Sans KR", sans-serif;
    color:          #333;

    /* 텍스트 그림자 ↓ */
    text-shadow:    0 1px 2px rgba(0, 0, 0, .25);
}

.width-box{
    width: 100%;
    display: flex;          /* 기본 방향 = row */
    justify-content: flex-end;  /* 가로축 → 오른쪽 정렬 */
}


/* ───────────────────────────────
    토 글 테 스 트
─────────────────────────────── */
/*****  패널 기본 레이아웃  *****/
.toggle-panel {
    position: fixed;
    top: 50px;               /* 탑바 높이 */
    left: 0;
    width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    padding: 16px;
    box-sizing: border-box;
    z-index: 2000;

    /* 슬라이드 효과 : 기본은 숨김 */
    transform: translateY(-100%);
    transition: transform .35s ease;
}

.toggle-panel.open {
    transform: translateY(0);
}

/*****  내부 요소  *****/

.toggle-column,.fix-to {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.toggle-label  {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    padding: 8px;
    margin: 2px 0 8px;
}

/* ────────────────── 인풋 시작 ───────────────────── */
.toggle-input{
    appearance   : none;
    max-width    : 1024px;
    width        : 100%;
    padding      : 8px 12px;
    border       : 1px solid #d0d5dd;
    border-radius: 8px;
    background   : #f9fafb;
    font-size    : 14px;
    line-height  : 1.4;
    color        : #333;
    transition   : border-color .2s, box-shadow .2s, background-color .2s;
}
.toggle-input::placeholder{ color:#9aa0b2; }

.toggle-input:hover{ background:#fff; }

.toggle-input:focus{
    border-color:#4d8dff;
    box-shadow:0 0 0 3px rgba(77,141,255,.25);
    outline:none;
    background:#fff;
}

.toggle-input:disabled,
.toggle-input[readonly]{
    background:#f0f2f5;
    color:#aaa;
    cursor:not-allowed;
}
/* ────────────────── 인풋 끝 ───────────────────── */
.btngroup {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1024px;
    width: 100%;
    gap: 24px;
    margin-bottom: 16px;
}

.toggle-btn {
    max-width: 1024px;
    width: 100%;
    justify-content: center;
    padding: 8px 0;
    background: #2d7df6;
    color:#fff;
    border:none;
    margin: 8px 0;
}

.toggle-info {
    width: 100%;
    max-width: 1024px;
    font-size: 14px;
    font-weight: 500;
    padding: 8px;
}

.toggle-trigger{
    position: fixed;
    top: 10px; right: 16px;         /* 탑바 안쪽에 배치하는 예시 */
    z-index: 2200;
    font: 700 1.2rem/1 monospace;
    background: transparent;
    border: none;
    cursor: pointer;
}

.hidden { display: none !important; }













/* ───────────────────────────────
   안내 모달
─────────────────────────────── */
/* ────────────────[ 1. 공통 ─ 모달 쉘 ]──────────────── */
.start_info_modal{
    position:fixed; inset:0;          /* 전체 화면 덮기 */
    display:flex; align-items:center; justify-content:center;
    z-index:2000;
    font-family:"Pretendard","Noto Sans KR",sans-serif;
}
.start_info_modal.hidden{display:none;}

.start_info_modal .modal-backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
}

/* ────────────────[ 2. 콘텐츠 박스 ]──────────────────── */
.start_info_modal .modal-body{
    position:fixed;                     /* 뷰포트 기준 ‘고정’ */
    left:50%; top:52%;
    transform:translate(-50%, -50%);    /* 요소 중심이 화면 정중앙 */
    z-index:2100;                       /* backdrop(2000) 위 */
    
    width:84vw;
    max-width:600px;
    
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 36px rgba(0,0,0,.25);
    padding:16px 6px;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
}


/* ────────────────[ 3. 슬라이드 영역 ]────────────────── */
.slide-wrapper{
    position: relative;
    width:98%;
    display:flex;
    align-items:center;
    justify-content:center;          /* NEW ─ 가운데로! */
}

.nav-arrow{
    position:absolute !important;
    top:50%; transform:translateY(-50%);
    z-index:2;
    width:50px !important;          /* 강제 고정 */
    height:50px !important;
    border-radius:50% !important;
    border:none;
    background:#fff;
    color:#333; font-size:20px;
    box-shadow:0 2px 6px rgba(0,0,0,.33) !important;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; user-select:none;
    transition:background .25s, transform .25s;
    opacity: 0.85;
}

.nav-arrow.left  { left:-10px; }
.nav-arrow.right { right:-10px; }
.nav-arrow:hover { background:#f5f6f7; transform:translateY(-50%) scale(1.06); }
.nav-arrow:active{ transform:translateY(-50%) scale(.95); }

.slide-content{
    width:100%;
    overflow:hidden;
    border-radius:12px;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 20px rgba(0,0,0,.22);
}

.slide-content img{
    max-width:100%;
    max-height:100%;
    object-fit:cover !important;
    border-radius:8px;
    transform-origin:center;
}

/* ────────────────[ 4. 설명 텍스트 ]──────────────────── */
.slide-texts{
    text-align:center;
}
.slide-texts h2{
    font-size:1.375rem;
    font-weight:600;
    margin-bottom:.5rem;
    color:#111;
}
.slide-texts p{
    font-size:.95rem;
    color:#555;
    line-height:1.5;
}

/* ────────────────[ 5. 건너뛰기 ]────────────────────── */
/* slide-actions: 좌우 끝 정렬 */
.slide-actions{
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:12px;
}

/* 두 버튼 공통 스타일 */
.slide-actions button{
    padding:10px 20px;
    font-size:.9rem;
    border:1px solid #d0d2d6;
    border-radius:6px;
    background:#fff;
    color:#555;
    cursor:pointer;
    transition:background .25s;
}
.slide-actions button:hover:not([disabled]){
    background:#f8f9fa;
}

/* 비활성화 상태 */
.slide-actions button[disabled]{
    opacity:.45;
    cursor:default;
    pointer-events:none;   /* 클릭 막기 */
}

/* ─── 1) 키프레임: box-shadow가 0 → 12px → 0 으로 순환 ─── */
@keyframes pulseGlow{
    0%, 100%{ box-shadow:0 0 0 rgba(0,136,255,.0); }
    50%     { box-shadow:0 0 12px rgba(0,136,255,.55); }
}

/* ─── 2) ‘활성 & 포커스 가능’한 상태에만 애니메이션 부여 ─── */
#btnStart:not([disabled]){
    animation:pulseGlow 1.8s ease-in-out infinite;
    /* 원하는 색으로 변경하려면 rgba 값 수정 */
}


/* ────────────────[ 6. 반응형 ]──────────────────────── */
@media (max-width:680px){
    .start_info_modal .modal-body{
        width:94vw; padding:16px 8px;
        gap:28px;
    }

    .slide-texts h2{font-size:1.2rem;}
    .slide-texts p{font-size:.88rem;}
    #btnSkip{padding:8px 14px; font-size:.85rem;}

    .slide-content{
        aspect-ratio:1/1;
        max-height:80vh;
    }
    .slide-content img{
        width:100%; height:100%;
        object-fit:cover;
    }

    .nav-arrow{
        position:absolute !important;
        top:50%; transform:translateY(-50%);
        z-index:2;
        width:38px !important;          /* 강제 고정 */
        height:38px !important;
        border-radius:50%;
        border:none;
        background:#fff;
        color:#333;
        font-size:18px;
        box-shadow:0 2px 6px rgba(0,0,0,.18);
        display:flex;
        align-items:center; justify-content:center;
        cursor:pointer;
        user-select:none;
        transition:background .25s, transform .25s;
    }
}


/*───────────────────────────────────────────────────────────
    (모달 크기·이미지 20 % 축소)
───────────────────────────────────────────────────────────*/
@media (min-width: 680px) and (max-width: 1400px) {

    /* ────────────────[ 1. 공통 ─ 모달 쉘 ]──────────────── */
    .start_info_modal{
        position:fixed; inset:0;          /* 전체 화면 덮기 */
        display:flex; align-items:center; justify-content:center;
        z-index:2000;
        font-family:"Pretendard","Noto Sans KR",sans-serif;
    }
    .start_info_modal.hidden{display:none;}

    .start_info_modal .modal-backdrop{
        position:absolute; inset:0;
        background:rgba(0,0,0,.55);
        backdrop-filter:blur(4px);
    }

    /* ────────────────[ 2. 콘텐츠 박스 ]──────────────────── */
    /* 높이·폭 20 % 축소(= 0.8×)  ─ width 84 vw → 67.2 vw(≈ 67 vw), max-width 600 px → 480 px  */
    .start_info_modal .modal-body{
        position:fixed;
        left:50%; top:52%;
        transform:translate(-50%, -50%);
        z-index:2100;

        width:67vw;                /* 84vw × 0.8 */
        max-width:480px;           /* 600px × 0.8 */

        background:#fff;
        border-radius:12px;
        box-shadow:0 10px 36px rgba(0,0,0,.25);
        padding:16px 6px;

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:40px;
    }

    /* ────────────────[ 3. 슬라이드 영역 ]────────────────── */
    .slide-wrapper{
        position:relative;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav-arrow{
        position:absolute !important;
        top:50%; transform:translateY(-50%);
        z-index:2;
        width:50px !important;
        height:50px !important;
        border-radius:50% !important;
        border:none;
        background:#fff;
        color:#333; font-size:20px;
        box-shadow:0 2px 6px rgba(0,0,0,.33) !important;
        display:flex; align-items:center; justify-content:center;
        cursor:pointer; user-select:none;
        transition:background .25s, transform .25s;
        opacity:0.85;
    }

    .nav-arrow.left  { left:-10px; }
    .nav-arrow.right { right:-10px; }
    .nav-arrow:hover { background:#f5f6f7; transform:translateY(-50%) scale(1.06); }
    .nav-arrow:active{ transform:translateY(-50%) scale(.95); }

    /* 그림(슬라이드) 폭 20 % 축소  ─ width 100 % → 80 %  */
    .slide-content{
        width:86%;                  /* 100% × 0.8 */
        overflow:hidden;
        border-radius:12px;
        aspect-ratio:1/1;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 6px 20px rgba(0,0,0,.22);
    }

    .slide-content img{
        max-width:100%;
        max-height:100%;
        object-fit:cover !important;
        border-radius:8px;
        transform-origin:center;
    }

    /* ────────────────[ 4. 설명 텍스트 ]──────────────────── */
    .slide-texts{
        text-align:center;
    }
    .slide-texts h2{
        font-size:1.375rem;
        font-weight:600;
        margin-bottom:.5rem;
        color:#111;
    }
    .slide-texts p{
        font-size:.95rem;
        color:#555;
        line-height:1.5;
    }

    /* ────────────────[ 5. 건너뛰기 ]────────────────────── */
    .slide-actions{
        width:100%;
        display:flex;
        justify-content:space-between;
        gap:12px;
    }

    .slide-actions button{
        padding:10px 20px;
        font-size:.9rem;
        border:1px solid #d0d2d6;
        border-radius:6px;
        background:#fff;
        color:#555;
        cursor:pointer;
        transition:background .25s;
    }
    .slide-actions button:hover:not([disabled]){
        background:#f8f9fa;
    }
    .slide-actions button[disabled]{
        opacity:.45;
        cursor:default;
        pointer-events:none;
    }

    /* ─── 1) 키프레임: box-shadow가 0 → 12px → 0 ─── */
    @keyframes pulseGlow{
        0%, 100%{ box-shadow:0 0 0 rgba(0,136,255,0); }
        50%     { box-shadow:0 0 12px rgba(0,136,255,.55); }
    }

    /* ─── 2) ‘활성 & 포커스 가능’한 상태에만 애니메이션 ─── */
    #btnStart:not([disabled]){
        animation:pulseGlow 1.8s ease-in-out infinite;
    }


}