/* ── AI 통역 (Gemini Live Translate · 모바일 전용) ─────────────
   색상: docs/색상컨셉02.html — Walnut Brown 팔레트 */

.itp-app,
.itp-guard,
.itp-pc-notice {
    --itp-bg: #F4EADB;
    --itp-surface: #FCF6EC;
    --itp-surface-alt: #EBDFC9;
    --itp-primary: #5B3A29;
    --itp-primary-deep: #3F2719;
    --itp-secondary: #82864E;
    --itp-accent: #C98A3A;
    --itp-ink: #2E2218;
    --itp-muted: #7A6A57;
    --itp-border: #E3D6BE;
}

/* ── 접근 안내 (비관리자 / PC) ───────────────────────── */
.itp-guard,
.itp-pc-notice {
    min-height: 50vh;
    color: var(--itp-ink);
}

.itp-guard-icon {
    font-size: 2.4rem;
    color: var(--itp-accent);
}

/* PC(넓은 화면)에서는 안내만 보이고 앱은 숨김 */
.itp-pc-notice { display: none; }

@media (min-width: 768px) {
    .itp-pc-notice { display: flex; }
    .itp-app { display: none; }
}

/* ── 공통 셸: 가로폭 고정(흔들림 방지) ─────────────────── */
.itp-app {
    max-width: 480px;
    width: 100%;
    margin-inline: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    color: var(--itp-ink);
    background: var(--itp-bg);
    border-radius: 14px;
    padding: 14px 12px 18px;
    -webkit-user-select: none;
    user-select: none;
}

.itp-screen {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── 화면 1 : 언어 선택 ─────────────────────────────── */
.itp-head { margin-top: 18px; }  /* 상단 바와 제목 사이 여백 */
.itp-head h4 { color: var(--itp-primary-deep); font-weight: 700; }
.itp-sub { color: var(--itp-muted); font-size: 0.9rem; }

/* ── 언어 방향 미리보기 (화면 1) ─────────────────────
   통역 화면과 같은 위/아래 배치. 위 창에서만 선택, 아래 창은 미러 표시 */
.itp-pair-caption {
    font-size: 0.78rem;
    color: var(--itp-muted);
    margin-bottom: 5px;
    padding-left: 2px;
}

.itp-pair {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--itp-surface);
    border: 2px solid var(--itp-border);
    border-radius: 14px;
    padding: 16px 14px;
}

.itp-pair-btn {
    flex: 1;
    min-height: 54px;
    background: var(--itp-bg);
    border: 2px dashed var(--itp-accent);
    border-radius: 10px;
    color: var(--itp-muted);
    font-weight: 600;
    font-size: 1rem;
}

.itp-pair-btn.set {
    border-style: solid;
    border-color: var(--itp-border);
    background: var(--itp-surface-alt);
    color: var(--itp-ink);
}

.itp-pair-btn:active { background: var(--itp-surface-alt); }

.itp-pair-arrow {
    flex-shrink: 0;
    color: var(--itp-accent);
    font-size: 1.25rem;
}

.itp-pair-mirror { opacity: .7; }

.itp-pair-slot {
    flex: 1;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--itp-surface-alt);
    border: 2px solid var(--itp-border);
    border-radius: 10px;
    color: var(--itp-muted);
    font-weight: 600;
    font-size: 1rem;
}

.itp-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.itp-lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
    background: var(--itp-surface);
    border: 2px solid var(--itp-border);
    border-radius: 12px;
    color: var(--itp-ink);
    font-size: 1rem;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}

.itp-lang-btn .itp-lang-flag { font-size: 1.3rem; }

.itp-lang-btn.selected {
    border-color: var(--itp-accent);
    background: var(--itp-surface-alt);
}

.itp-lang-btn:disabled { opacity: .35; }

.itp-lang-btn.selected .itp-lang-name::after {
    content: " ✓";
    color: var(--itp-accent);
}

.itp-picked {
    color: var(--itp-muted);
    font-size: 0.9rem;
    min-height: 1.4em;
}

/* ── 옵션 버튼 · 모달 ─────────────────────────────── */
.itp-option-row { display: flex; justify-content: center; }

.itp-modal .modal-content {
    background: var(--itp-surface);
    color: var(--itp-ink);
    border: 1px solid var(--itp-border);
    border-radius: 14px;
}

.itp-modal .modal-header,
.itp-modal .modal-footer { border-color: var(--itp-border); }

.itp-modal .modal-title { color: var(--itp-primary-deep); font-weight: 700; }

.itp-modal .form-select {
    background: var(--itp-bg);
    border: 1px solid var(--itp-border);
    color: var(--itp-ink);
}

.itp-modal .itp-label {
    color: var(--itp-primary-deep);
    font-weight: 600;
    font-size: 0.9rem;
}

.itp-form-text { color: var(--itp-muted); font-size: 0.78rem; }

.itp-save-btn { min-height: 44px; padding: 6px 22px; font-size: 1rem; }

.itp-option-msg {
    min-height: 1.3em;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--itp-secondary);
}

.itp-option-msg.error { color: #a13c2c; }

.itp-start-btn {
    min-height: 56px;
    background: var(--itp-primary);
    color: var(--itp-surface);
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
}

/* 통역 시작 버튼은 전체폭 대신 가운데 적당한 폭으로 */
#itpStartBtn {
    align-self: center;
    width: auto;
    min-width: 220px;
    padding-inline: 36px;
}

.itp-start-btn:disabled { background: var(--itp-muted); opacity: .55; }
.itp-start-btn:not(:disabled):active { background: var(--itp-primary-deep); }

/* ── 화면 2 : 통역 (상하 분할 · 전체화면 오버레이) ─────── */
/* 통역 시작 시 사이트 헤더/메뉴 위를 통째로 덮는 고정 오버레이.
   100dvh(주소창 변동 대응) + safe-area 패딩으로 흔들림 없이 고정 */
#itpScreenTalk.itp-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    height: 100vh;   /* dvh 미지원 브라우저 폴백 */
    height: 100dvh;
    background: var(--itp-bg);
    padding: 10px 12px calc(28px + env(safe-area-inset-bottom));
    gap: 8px;
    overflow: hidden;
}

/* 오버레이 동안 뒤 페이지 스크롤 잠금 */
body.itp-lock {
    overflow: hidden;
    overscroll-behavior: none;
}

/* ── 자동회전 보정: 폰이 돌아 뷰포트가 가로(angle 90/270)나 뒤집힘(180)이 되면
   오버레이를 반대 방향으로 돌려 물리적으로는 항상 세로 레이아웃 유지 ── */
#itpScreenTalk.itp-fullscreen.itp-comp90,
#itpScreenTalk.itp-fullscreen.itp-comp270 {
    max-width: none;
    margin: 0;
    width: 100dvh;
    height: 100dvw;
    transform-origin: top left;
}

#itpScreenTalk.itp-fullscreen.itp-comp90 {
    transform: rotate(-90deg) translateX(-100%);
}

#itpScreenTalk.itp-fullscreen.itp-comp270 {
    transform: rotate(90deg) translateY(-100%);
}

#itpScreenTalk.itp-fullscreen.itp-comp180 {
    transform: rotate(180deg);
}

/* 우측 90도 회전: 화면 골격(위/아래 창 + 가운데 버튼)은 세 모드 동일.
   각 창의 "내용"만 반시계 90도로 돌려 고정 — 폰을 오른쪽으로 눕히면 바로 읽힘.
   writing-mode 로 내용 흐름 자체를 돌리므로 창 프레임·버튼 배치는 변하지 않는다 */
#itpScreenTalk.itp-rot90 .itp-window {
    writing-mode: sideways-lr;
}

/* 회전 모드에서 원문 2줄 클램프 대용 (-webkit-box 는 세로쓰기에서 불안정) */
#itpScreenTalk.itp-rot90 .itp-src {
    display: block;
    max-block-size: 2.7em;
    overflow: hidden;
}

/* 회전된 흐름에서 번역문 박스가 줄어들 수 있게 (물리 가로축이 블록축이 됨) */
#itpScreenTalk.itp-rot90 .itp-dst {
    min-width: 0;
}

.itp-window {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--itp-surface);
    border: 2px solid var(--itp-border);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s, opacity .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}

/* 듣는 중인 창 강조 / 반대편 창 흐리게 */
.itp-window.active {
    border-color: var(--itp-accent);
    box-shadow: 0 0 0 3px rgba(201, 138, 58, .25);
}

/* 탭 직후 AI 연결 중: 창 내용을 흐리게 깔고 중앙에 원형 스피너 오버레이 */
.itp-window { position: relative; }

.itp-window.connecting {
    border-color: var(--itp-accent);
}

.itp-window.connecting > * { opacity: .3; }

.itp-window.connecting::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 4px solid var(--itp-surface-alt);
    border-top-color: var(--itp-accent);
    border-radius: 50%;
    animation: itp-spin .8s linear infinite;
}

@keyframes itp-spin {
    to { transform: rotate(360deg); }
}

.itp-window.dimmed { opacity: .5; }

.itp-win-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.itp-win-lang {
    font-weight: 700;
    color: var(--itp-primary-deep);
}

.itp-win-state { color: var(--itp-muted); font-size: 0.95rem; }
.itp-win-state .fa-spinner { color: var(--itp-accent); }

/* 원문(작게) + 번역문(크게)
   ★ 창 프레임 흔들림 방지: 원문은 최대 2줄로 고정(line-clamp),
     번역문은 남은 영역 고정 + 스크롤 없이 폰트 자동 축소(JS)로 맞춤 */
.itp-src {
    font-size: 0.85rem;
    color: var(--itp-muted);
    min-height: 1.3em;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

.itp-dst {
    flex: 1;
    min-height: 0;
    margin-top: 6px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--itp-ink);
    word-break: break-word;
    overflow: hidden;
}

/* 수신 중(partial) 텍스트는 흐리게 → 확정 시 진하게 */
.itp-src.partial, .itp-dst.partial { opacity: .65; }

/* ── 가운데 Clear · 회전 ───────────────────────────── */
.itp-mid { display: flex; justify-content: center; gap: 10px; flex-shrink: 0; }

/* 위 창 180° 회전 (마주 앉은 상대가 읽기 좋게) */
.itp-window.flipped { transform: rotate(180deg); }
.itp-window { transition: transform .3s ease, border-color .15s, opacity .15s, box-shadow .15s; }

.itp-flip-btn.on {
    border-color: var(--itp-accent);
    color: var(--itp-accent);
}

.itp-clear-btn {
    min-height: 44px;
    padding: 6px 26px;
    background: var(--itp-surface-alt);
    border: 1px solid var(--itp-border);
    border-radius: 22px;
    color: var(--itp-primary-deep);
    font-weight: 600;
}

.itp-clear-btn:active { background: var(--itp-border); }

/* ── 하단 바 ───────────────────────────────────────── */
.itp-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.itp-status {
    min-height: 1.3em;
    font-size: 0.82rem;
    color: var(--itp-muted);
    text-align: center;
}

.itp-status.error { color: #a13c2c; }

.itp-footer-btns {
    display: flex;
    gap: 10px;
}

.itp-foot-btn {
    flex: 1;
    min-height: 48px;
    background: var(--itp-surface);
    border: 1px solid var(--itp-border);
    border-radius: 10px;
    color: var(--itp-primary-deep);
    font-weight: 600;
}

.itp-foot-btn:active { background: var(--itp-surface-alt); }

.itp-foot-stop { color: #8a3a2a; }