/* --- 기본 & 폰트 설정 --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nanum+Myeongjo:wght@400;700&display=swap');

:root {
    --bg-dark-1: #202123; --bg-dark-2: #343541; --bg-dark-3: #444654;
    --text-light-1: #ececf1; --text-light-2: #d1d5db; --text-light-3: #8e8ea0;
    --accent-blue: #3b82f6; --accent-blue-hover: #60a5fa;
    --accent-red: #ef4444;
    --border-color: #565869; --paper-bg: #fdfdfd;
    --font-sans: 'Inter', sans-serif; --font-serif: 'Nanum Myeongjo', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-sans); background: var(--bg-dark-1);
    color: var(--text-light-1); height: 100vh; overflow: hidden;
}

/* --- 로그인 화면 --- */
#login-container {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100vh; gap: 2rem;
    background: var(--bg-dark-2);
}
.login-box {
    background: var(--bg-dark-1); padding: 3rem; border-radius: 12px;
    text-align: center; border: 1px solid var(--border-color);
    width: 90%; max-width: 420px;
}
.login-box .logo { justify-content: center; margin-bottom: 1rem; }
.login-box h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.login-box p { color: var(--text-light-2); margin-bottom: 2rem; }
#login-btn {
    background: #4285F4; color: white; border: none;
    padding: 0.8rem 1.5rem; font-size: 1rem; border-radius: 8px;
    cursor: pointer; transition: background-color 0.2s;
    display: inline-flex; align-items: center; gap: 0.8rem;
}
#login-btn:hover { background: #5a95f5; }
#login-btn:disabled { background-color: #555; cursor: not-allowed; }
#login-btn svg { width: 24px; height: 24px; }
#firebase-error-message {
    display: none; color: #fca5a5; background: #450a0a;
    padding: 1rem; border-radius: 8px; margin-top: 1.5rem;
    text-align: left; max-width: 400px; border: 1px solid #7f1d1d;
}

/* --- 메인 앱 레이아웃 --- */
#app-container { display: none; height: 100vh; flex-direction: row; position: relative; }

.main-content {
    display: grid;
    grid-template-rows: 60px 1fr;
    flex-grow: 1;
    overflow: hidden;
}

.header {
    background: var(--bg-dark-2); padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
    height: 60px; flex-shrink: 0;
}
.header-group { display: flex; align-items: center; gap: 1rem; }
#current-project-title-wrapper {
    display: flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem; border-radius: 6px;
    transition: background-color 0.2s;
}
#current-project-title-wrapper.editable:hover {
    background-color: var(--bg-dark-3);
}
#current-project-title {
    font-weight: 500; color: var(--text-light-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw;
}
#rename-project-btn {
    visibility: hidden; opacity: 0; transition: opacity 0.2s;
}
#current-project-title-wrapper.editable:hover #rename-project-btn {
    visibility: visible; opacity: 1;
}

/* --- 사이드바 (네비게이션) --- */
.sidebar {
    width: 280px; background: var(--bg-dark-1);
    flex-shrink: 0; display: flex; flex-direction: column;
    transition: margin-left 0.3s ease; border-right: 1px solid var(--border-color);
}
.sidebar.collapsed { margin-left: -280px; }
.sidebar-header { padding: 0.75rem; border-bottom: 1px solid var(--border-color); }
.sidebar-header .logo { padding: 0.5rem; }
.nav-tabs { display: flex; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.nav-tab {
    flex: 1; padding: 0.8rem; background: transparent; border: none;
    color: var(--text-light-2); font-size: 0.9rem; cursor: pointer;
    transition: all 0.2s;
}
.nav-tab.active { color: var(--text-light-1); background: var(--bg-dark-2); font-weight: 600; }
.nav-content { flex-grow: 1; overflow-y: auto; padding: 0.75rem; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.project-list, .scene-list, .character-list { list-style: none; }
.project-item, .scene-item, .character-item {
    padding: 0.75rem 1rem; border-radius: 8px; cursor: pointer;
    margin-bottom: 0.25rem; display: flex; justify-content: space-between;
    align-items: center; transition: background-color 0.2s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-item:hover, .scene-item:hover, .character-item:hover { background: var(--bg-dark-2); }
.project-item.active { background: var(--bg-dark-3); }
.delete-project-btn {
    background: none; border: none; color: var(--text-light-3);
    cursor: pointer; font-size: 1.2rem; opacity: 0; transition: opacity 0.2s;
}
.project-item:hover .delete-project-btn { opacity: 1; }
.sidebar-footer {
    padding: 1rem; border-top: 1px solid var(--border-color);
    display: flex; flex-direction: column; gap: 1rem;
}
.add-project-btn {
    width: 100%; padding: 0.75rem 1rem;
    background: var(--bg-dark-3); border: 1px solid var(--border-color);
    color: var(--text-light-1); border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.9rem; transition: background-color 0.2s;
}
.add-project-btn:hover { background-color: var(--bg-dark-2); }
.add-project-btn svg { width: 20px; height: 20px; }
.user-profile { display: flex; align-items: center; gap: 0.8rem; width: 100%; }
.user-profile img { width: 32px; height: 32px; border-radius: 50%; }
#user-name { font-weight: 500; flex-grow: 1; }

/* --- 에디터 --- */
.editor-area {
    display: grid; grid-template-rows: auto 1fr;
    background: var(--bg-dark-2); min-height: 0; position: relative;
}
.editor-toolbar {
    padding: 0.8rem 1.5rem; background: var(--bg-dark-1);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 1rem;
}
.format-buttons { display: flex; gap: 0.5rem; }
.format-btn {
    padding: 0.4rem 0.8rem; background: var(--bg-dark-3);
    border: 1px solid var(--border-color); border-radius: 6px;
    color: var(--text-light-2); font-size: 0.8rem; cursor: pointer;
}
.format-btn.active { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }
.screenplay-container {
    padding: 2rem; overflow: auto; /* [수정됨] 확대/축소를 위해 overflow-y에서 변경 */
}
.screenplay-editor {
    background: var(--paper-bg); color: #111;
    width: 8.5in; margin: 0 auto; padding: 1in;
    font-family: var(--font-serif); font-size: 12pt;
    line-height: 1.5; outline: none; min-height: 11in;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    transform-origin: top center; /* [추가됨] 확대/축소 기준점 */
    transition: transform 0.2s ease-in-out;
}
.element { min-height: 1.5em; }
.element:empty:not(:focus):before { content: attr(data-placeholder); color: #aaa; cursor: text; }
.scene-heading { font-weight: bold; text-transform: uppercase; margin: 1.5rem 0 1rem 0; padding-top: 1.5rem; }
.action { margin: 1rem 0; max-width: 6in; }
.character { text-align: center; margin: 1rem 0 0.2rem 0; padding-left: 2in; padding-right: 2in; }
.dialogue { max-width: 3.7in; margin: 0 auto 1rem auto; text-align: left; }
.parenthetical { max-width: 2.5in; margin: 0 auto -0.8rem auto; text-align: center; color: #666; }

/* --- 공통 컴포넌트 --- */
.icon-btn {
    background: none; border: none; color: var(--text-light-2);
    cursor: pointer; padding: 0.5rem; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.icon-btn:hover { background: var(--bg-dark-3); color: var(--text-light-1); }
.icon-btn .icon { width: 20px; height: 20px; fill: currentColor; }
.action-btn {
    padding: 0.6rem 1.2rem; background: var(--bg-dark-3);
    color: var(--text-light-1); border: 1px solid var(--border-color);
    border-radius: 8px; font-size: 0.9rem; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 500; transition: background-color 0.2s;
}
.action-btn:hover { background-color: var(--bg-dark-1); }
.action-btn svg { width: 20px; height: 20px; }

/* [추가됨] 확대/축소 컨트롤 스타일 */
.zoom-controls {
    display: flex; align-items: center;
    background: var(--bg-dark-1); border: 1px solid var(--border-color);
    border-radius: 8px;
}
.zoom-controls .icon-btn { padding: 0.4rem; }
.zoom-controls .icon-btn:hover { background: var(--bg-dark-3); }
.zoom-reset-btn {
    background: none; border: none; color: var(--text-light-2);
    padding: 0 0.5rem; font-size: 0.8rem; cursor: pointer;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

/* [추가됨] 툴팁 스타일 */
.tooltip-container { position: relative; }
.tooltip-content {
    display: none; position: absolute; top: 120%; left: 50%;
    transform: translateX(-50%); background: var(--bg-dark-3);
    color: var(--text-light-1); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 1rem; width: 300px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10;
}
.tooltip-container:hover .tooltip-content { display: block; }
.tooltip-content strong { display: block; margin-bottom: 0.75rem; }
.tooltip-content p { font-size: 0.85rem; color: var(--text-light-2); line-height: 1.5; }
.tooltip-content p:not(:last-child) { margin-bottom: 0.5rem; }

.logo { display: flex; align-items: center; gap: 0.8rem; }
.logo-icon {
    width: 32px; height: 32px; background: var(--accent-blue);
    border-radius: 8px; display: flex; align-items: center;
    justify-content: center; font-weight: bold; color: white;
}
.save-status { display: flex; align-items: center; gap: 0.5rem; color: var(--text-light-3); font-size: 0.85rem;}
.save-indicator {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-light-3); transition: background-color 0.3s;
}
.save-status.saving .save-indicator { background: #f59e0b; }
.save-status.saved .save-indicator { background: #10b981; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 100;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 0; transition: opacity 0.2s ease-in-out;
}
.modal-overlay.show { display: flex; opacity: 1; }
.modal-content {
    background: var(--bg-dark-2); padding: 2rem; border-radius: 12px;
    border: 1px solid var(--border-color); width: 90%; max-width: 400px;
    transform: scale(0.95); transition: transform 0.2s ease-in-out;
}
.modal-overlay.show .modal-content { transform: scale(1); }
.modal-content h3 { margin-bottom: 1rem; }
.modal-content input {
    width: 100%; padding: 0.8rem; background: var(--bg-dark-1);
    border: 1px solid var(--border-color); border-radius: 6px;
    color: var(--text-light-1); font-size: 1rem; margin-bottom: 1.5rem;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; }
.modal-btn {
    padding: 0.6rem 1.2rem; border-radius: 6px; border: none;
    cursor: pointer; font-weight: 500; transition: background-color 0.2s;
}
.modal-btn.secondary { background: var(--bg-dark-3); color: var(--text-light-2); }
.modal-btn.secondary:hover { background: #555; }
.modal-btn.primary { background: var(--accent-blue); color: white; }
.modal-btn.primary:hover { background: var(--accent-blue-hover); }
.modal-btn.danger { background: var(--accent-red); color: white; }
.modal-btn.danger:hover { background: #f87171; }

.export-options { display: flex; flex-direction: column; gap: 1rem; }
.export-option {
    display: flex; align-items: center; gap: 1rem; text-align: left;
    padding: 1rem; background: var(--bg-dark-3); border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-light-1); cursor: pointer;
}
.export-option:hover { border-color: var(--accent-blue); }
.export-icon { font-size: 2rem; }
.export-option p { color: var(--text-light-3); font-size: 0.8rem; }

/* --- 알림 (토스트) 스타일 --- */
#toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px;
}
.toast {
    background-color: var(--bg-dark-3); color: var(--text-light-1);
    padding: 12px 20px; border-radius: 8px; border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0;
    transform: translateX(100%); animation: slideIn 0.3s forwards, fadeOut 0.3s 2.7s forwards;
}
.toast.error {
    background-color: #450a0a; border-color: #7f1d1d; color: #fca5a5;
}
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { to { opacity: 0; transform: translateX(100%); } }

/* --- 반응형 디자인 --- */
.overlay { display: none; }
@media (max-width: 1024px) {
    .sidebar { width: 260px; }
    .screenplay-editor { width: 100%; max-width: 8.5in; padding: 1in 0.75in; }
}
@media (max-width: 768px) {
    body { -webkit-overflow-scrolling: touch; }
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100%; z-index: 1000;
        transform: translateX(-100%); transition: transform 0.3s ease-in-out;
    }
    .sidebar:not(.collapsed) { transform: translateX(0); }
    .sidebar.collapsed { margin-left: 0; transform: translateX(-100%); }
    .overlay {
        display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 999; opacity: 0;
        pointer-events: none; transition: opacity 0.3s ease-in-out;
    }
    .overlay.show { opacity: 1; pointer-events: auto; }
    .header { padding: 0 0.5rem; gap: 0.5rem; }
    #current-project-title-wrapper { gap: 0; }
    #current-project-title { max-width: 35vw; font-size: 0.9rem; }
    .header-group { gap: 0.5rem; }
    .header-group .save-status span { display: none; }
    .action-btn { padding: 0.6rem; }
    .action-btn span { display: none; }
    .zoom-controls { display: none; } /* 모바일에서는 확대/축소 버튼 숨김 */
    .screenplay-container { padding: 1rem; }
    .screenplay-editor {
        width: 100%; min-height: calc(100vh - 120px);
        padding: 1.5rem 1rem; font-size: 11pt; box-shadow: none;
    }
    .action, .character, .dialogue, .parenthetical {
        max-width: 100%; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto;
    }
    .character { text-align: left; margin-left: 25%; }
    .dialogue { text-align: left; margin-left: 15%; margin-right: 15%; }
    .parenthetical { text-align: left; margin-left: 20%; }
    .editor-toolbar { padding: 0.5rem; flex-wrap: wrap; }
    .format-buttons { flex-wrap: wrap; gap: 0.25rem; }
    .format-btn { padding: 0.3rem 0.6rem; }
    .tooltip-container { display: none; } /* 모바일에서는 툴팁 숨김 */
}
/* style.css 파일 맨 아래에 이 코드를 추가하세요. */
.header-copyright {
    color: var(--text-light-3);
    font-size: 0.8rem;
    margin-right: 1rem; /* 다른 요소와의 간격 */
}

/* 화면이 작아지면 저작권 텍스트를 숨깁니다 */
@media (max-width: 768px) {
    .header-copyright {
        display: none;
    }
}

/* ================================================= */
/* [추가됨] AI 영감 얻기 버튼 스타일 수정             */
/* ================================================= */

/* AI 버튼 자체에 대한 스타일 */
#ai-inspiration-btn {
  /* 다른 버튼과 구별되도록 동그랗게 만듭니다. */
  border-radius: 50%;

  /* 눈에 띄는 밝은 파란색으로 색상을 변경합니다. */
  color: #60a5fa; /* var(--accent-blue-hover) */

  /* 주변에 은은한 네온 효과(빛)를 추가하여 시선을 사로잡습니다. */
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);

  /* 다른 아이콘과 겹치지 않도록 좌우에 약간의 공간을 줍니다. */
  margin: 0 0.5rem;

  /* 부드러운 전환 효과를 추가합니다. */
  transition: all 0.2s ease-in-out;
}

/* AI 버튼 안의 아이콘(SVG) 크기를 키웁니다. */
#ai-inspiration-btn svg {
  width: 22px;  /* 기존 20px에서 크기를 키웁니다. */
  height: 22px;
}

/* 마우스를 올렸을 때의 효과 */
#ai-inspiration-btn:hover {
  /* 아이콘 색상을 더 밝은 흰색으로 변경합니다. */
  color: #fff;

  /* 빛나는 효과를 더 강하게 만듭니다. */
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.9);

  /* 배경색을 살짝 주어 입체감을 더합니다. */
  background-color: var(--bg-dark-3);
}
/* style.css 파일 맨 아래에 추가 */

/* TipTap 에디터의 실제 편집 영역에 스타일을 적용합니다. */
.ProseMirror {
    background: var(--paper-bg);
    color: #111;
    width: 8.5in;
    margin: 0 auto;
    padding: 1in;
    font-family: var(--font-serif);
    font-size: 12pt;
    line-height: 1.5;
    outline: none;
    min-height: 11in;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    transform-origin: top center;
    transition: transform 0.2s ease-in-out;
}

/* TipTap 에디터 내부의 각 요소에 스타일을 적용합니다. */
.ProseMirror .element { min-height: 1.5em; }
.ProseMirror .scene-heading { font-weight: bold; text-transform: uppercase; margin: 1.5rem 0 1rem 0; padding-top: 1.5rem; }
.ProseMirror .action { margin: 1rem 0; max-width: 6in; }
.ProseMirror .character { text-align: center; margin: 1rem 0 0.2rem 0; padding-left: 2in; padding-right: 2in; }
.ProseMirror .dialogue { max-width: 3.7in; margin: 0 auto 1rem auto; text-align: left; }
.ProseMirror .parenthetical { max-width: 2.5in; margin: 0 auto -0.8rem auto; text-align: center; color: #666; }

/* 반응형 스타일도 추가해줍니다. */
@media (max-width: 1024px) {
    .ProseMirror { width: 100%; max-width: 8.5in; padding: 1in 0.75in; }
}
@media (max-width: 768px) {
    .ProseMirror {
        width: 100%; min-height: calc(100vh - 120px);
        padding: 1.5rem 1rem; font-size: 11pt; box-shadow: none;
    }
    .ProseMirror .action, .ProseMirror .character, .ProseMirror .dialogue, .ProseMirror .parenthetical {
        max-width: 100%; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto;
    }
    .ProseMirror .character { text-align: left; margin-left: 25%; }
    .ProseMirror .dialogue { text-align: left; margin-left: 15%; margin-right: 15%; }
    .ProseMirror .parenthetical { text-align: left; margin-left: 20%; }
}