/* 웹 데모(essay.win/try) 겉: 앱 화면(app/src/index.css) 위에 얹는 것만 */
html, body, #root { height: 100%; }

/* AI 는 Claude 체험 하나 — 고르기 · 모델 · 연결 관리 · 사용량은 웹에서 감춘다 */
.ai-mini .provider-menu, .ai-mini-model, .ai-mini-gear, .provider-menu, select[aria-label="AI 모델"], .ai-usage-card, .web-hide { display: none !important; }
.ai-mini { gap: 8px; }
/* 면접 준비 메뉴는 웹에서 뺀다(2026-10-29 사용자 지시) */
.nav a[href="#/interview"], .titlebar-info { display: none !important; }

/* 위 제목 줄: 체험 횟수 · 튜토리얼 · 다운로드 */
.web-tb { display: flex; align-items: center; gap: 8px; margin-left: 10px; -webkit-app-region: no-drag; app-region: no-drag; }
.web-trial-count { white-space: nowrap; }
.web-trial-count.zero { background: var(--surface-2); color: var(--text-3); }
/* 웹에선 위 막대를 조금 높여 오른쪽 버튼을 한 단계 크게(배지 < 튜토리얼 < 다운로드) */
:root:root { --titlebar-h: 52px; }
.titlebar .badge.web-trial-count { height: 34px; padding: 0 12px; border-radius: 8px; font-size: 14px; }
.titlebar .btn.small.web-tour-btn { height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.titlebar .btn.web-dl { height: 40px; padding: 0 18px; font-size: 15px; font-weight: 700; white-space: nowrap; }
/* 로고 · 이름 = 홈으로 */
.titlebar .logo, .titlebar .titlebar-name { cursor: pointer; }
@media (max-width: 760px) {
  :root:root { --titlebar-h: 48px; }
  .titlebar .web-tour-btn, .titlebar .web-trial-count { display: none; }
  .titlebar .btn.web-dl { height: 36px; padding: 0 14px; font-size: 14px; }
}

/* 다운로드 안내 창 */
dialog.web-nudge { border: 0; border-radius: 16px; padding: 22px; width: min(480px, 92vw); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
dialog.web-nudge::backdrop { background: rgb(15 23 42 / 40%); }
dialog.web-nudge h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
dialog.web-nudge p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.web-nudge-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.web-nudge-foot .btn { text-decoration: none; }

/* 튜토리얼: 짚는 곳만 밝게 + 말풍선 */
.web-tour-mask { position: fixed; z-index: 9998; border-radius: 12px; box-shadow: 0 0 0 9999px rgb(15 23 42 / 45%); pointer-events: none; transition: all .2s ease; }
.web-tour-mask.full { inset: 0; border-radius: 0; box-shadow: none; background: rgb(15 23 42 / 45%); }
.web-tour { position: fixed; z-index: 9999; padding: 18px 18px 14px; border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.web-tour.center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, 92vw); }
.web-tour-step { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--primary-text); }
.web-tour h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.web-tour p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.web-tour-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 14px; }
.web-tour-foot .btn { text-decoration: none; }

/* 가벼운 안내 띠(막지 않음) */
.web-hint { position: fixed; z-index: 9000; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 36px)); padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); font-size: 13.5px; color: var(--text-2); }
.web-hint .btn { flex: none; text-decoration: none; }
.web-hint button.x { flex: none; border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 18px; line-height: 1; }

#send-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 12px; background: #191f28; color: #fff; font-size: .92rem; font-weight: 600; z-index: 10000; transition: .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
#send-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 브라우저에는 창 버튼(최소화 · 닫기) · 맥 신호등 자리가 없다 */
.titlebar, .titlebar.mac { padding-left: 14px !important; padding-right: 14px !important; }
.titlebar .web-tb { margin-left: auto; }

/* 휴대폰 폭: 사이드바는 서랍으로(제목 줄 왼쪽 단추로 열고 닫음), 본문은 한 칸 */
@media (max-width: 760px) {
  .app, .app.sidebar-mini { grid-template-columns: minmax(0, 1fr) !important; }
  .app > .sidebar { position: fixed; z-index: 80; top: var(--titlebar-h); left: 0; bottom: 0; width: min(280px, 86vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .app.sidebar-mini > .sidebar { width: min(280px, 86vw); }
  .app.sidebar-mini .side-text, .app.sidebar-mini .nav-count, .app.sidebar-mini .recent { display: revert; }
  .app.web-nav-open > .sidebar { transform: none; }
  .app.web-nav-open::after { content: ''; position: fixed; inset: var(--titlebar-h) 0 0 0; z-index: 70; background: rgb(15 23 42 / 30%); }
  .app > .main { grid-column: 1 / -1 !important; grid-row: 2; }
  .titlebar .titlebar-name, .titlebar .save-state { display: none; }
}

/* 좁은 폭: 입력칸 아래 안내 줄은 체험 배지 아래 한 줄로 */
@media (max-width: 480px) {
  .ai-mini { flex-wrap: wrap; row-gap: 4px; }
  .ai-mini .web-trial-note { flex: 1 0 100%; order: 10; line-height: 1.5; }
}

/* 휴대폰 폭 자소서 편집(2026-10-31): 문항 목록은 위쪽 가로 줄, 본문은 한 칸 전체 폭 — 230px 목록이 본문을 112px 로 눌러 쓸 수 없던 것 */
@media (max-width: 760px) {
  .editor-body, .editor-body.panel-folded { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr); }
  .editor-body > .q-list { height: auto; max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 12px 10px; }
  .editor-body > .q-list ol { display: flex !important; flex-direction: row !important; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0; }
  .q-list ol::-webkit-scrollbar { display: none; }
  .editor-body > .q-list ol > li { flex: 0 0 78% !important; scroll-snap-align: start; }
  .q-list .add-q, .q-list details { display: none; }
  .editor-body > .q-main { min-width: 0; }
}

/* 휴대폰 폭 스펙 관리 이력서: 인적사항은 이름 · 값을 한 줄씩, 학력 · 어학 같은 표는 옆으로 밀어 보기(칸이 눌려 글자가 세로로 서던 것) */
@media (max-width: 760px) {
  .resume { padding-left: 12px !important; padding-right: 12px !important; }
  .resume-sec { overflow-x: auto; }
  .resume-table:not(.resume-profile) { min-width: 560px; }
  .resume-profile, .resume-profile tbody { display: block; width: 100%; }
  .resume-profile tr { display: grid; grid-template-columns: 84px minmax(0, 1fr); }
  .resume-profile th, .resume-profile td { display: block; width: auto !important; min-width: 0; }
  .resume-profile td[colspan] { grid-column: auto; }
}

/* 체험 횟수는 크게(2026-11-01): 제목 줄 · 홈 시작 안내 */
.titlebar .badge.web-trial-count { height: 36px; padding: 0 14px; font-size: 15px; font-weight: 700; }
.web-trial-count b { font-weight: 800; }
.web-trial-count.zero { background: #fde8e8 !important; color: #b42318 !important; }
@media (max-width: 760px) {
  .titlebar .web-trial-count { display: inline-flex !important; height: 32px; padding: 0 10px; font-size: 12.5px; }
  .titlebar .btn.web-dl { padding: 0 10px; font-size: 13px; }
  .titlebar .web-dl .dl-long { display: none; }
  .titlebar .web-tb { gap: 6px; min-width: 0; }
}
/* 예전 자소서 불러오기 권유: 홈 [예전 자소서 불러오기] 아래 말풍선(꼬리가 버튼을 가리킴) */
.web-imp-tip { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 30; width: max-content; max-width: min(340px, 86vw); transform: translateX(-50%); padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); text-align: left; animation: wit-in .25s ease-out; }
/* 꼬리: 테두리색 삼각형 위에 바탕색 삼각형을 1px 내려 겹침 — 밝게 · 어둡게 모두 테마 토큰을 따른다 */
.web-imp-tip::before, .web-imp-tip::after { content: ''; position: absolute; left: 50%; border: 8px solid transparent; }
.web-imp-tip::before { bottom: 100%; margin-left: -8px; border-bottom-color: var(--border); }
.web-imp-tip::after { bottom: calc(100% - 1px); margin-left: -8px; border-bottom-color: var(--surface); }
.web-imp-tip p { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--text); }
.web-imp-tip small { display: block; font-size: 12px; color: var(--text-3); }
.web-imp-tip .wit-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.web-imp-tip button { height: 32px; padding: 0 14px; border-radius: 9px; border: 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.web-imp-tip .wit-go { background: var(--primary); color: #fff; }
.web-imp-tip .wit-x { background: var(--surface-2); color: var(--text-2); }
@keyframes wit-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.import-cta-wrap:has(.web-imp-tip) .import-tip { display: none; }
.web-set .web-clear-sample { display: block; margin-top: 12px; padding: 0; border: 0; background: none; font-size: 12.5px; color: var(--text-3); text-decoration: underline; cursor: pointer; }