/* common.css - Upgraded Version */

:root {
  /* --- Base Color Palette (Neutral - Light Mode Default) --- */
  /* These are the foundational colors for your design system. */
  --color-white: #fff;
  --color-black: #000;

  --color-gray-100: #f5f8fa; /* Lightest gray for sections/backgrounds */
  --color-gray-200: #e9e9e9; /* Lighter gray for backgrounds/borders */
  --color-gray-300: #bdbdbd; /* Mid-light gray */
  --color-gray-400: #888;    /* Mid gray */
  --color-gray-500: #555;    /* Mid-dark gray */
  --color-gray-600: #222;    /* Darkest gray for text/elements */

  --color-yellow-light: #fff9b2;
  --color-yellow-base: #FFD166;
  --color-yellow-dark: #ffe26b; /* For lines, etc. */
  --color-yellow-strong: #ffd93a;

  --color-pink-base: #FFA4D3;
  --color-pink-strong: #E36498;

  /* --- [NEW] AI Chat/Brand Inspired Colors (for dark mode) --- */
  /* These are specifically for the AI chat modal, but also good for general dark theme accents. */
  --brand-primary: #4285f4; /* Google Blue */
  --brand-secondary: #d96570; /* Google Red/Pink */

  --ai-bg-primary: #242424; /* Main modal background */
  --ai-bg-secondary: #383838; /* Input fields, bot messages */
  --ai-bg-tertiary: #181818; /* Deeper background */
  --ai-bg-lightest: #2a2a2a; /* Slightly lighter for contrast */

  --ai-text-primary: #E3E3E3; /* Main text color */
  --ai-text-secondary: #828282; /* Subheadings, less emphasized */
  --ai-text-inverted: #ffffff; /* White text on dark/colored backgrounds */
  --ai-border-color: #383838;

  /* --- Dynamic Theme Variables (Light Mode Defaults) --- */
  /* These variables will change based on the 'data-theme' attribute on the body. */
  --current-bg: var(--color-white);
  --current-text: var(--color-black); /* [수정] 기본 텍스트를 가장 어둡게 */
  --current-text-secondary: var(--color-gray-600); /* [수정] 보조 텍스트를 더 어둡게 */
  --current-text-inverted: var(--color-white); /* Text color when on a dark/accent background */
  --current-border: var(--color-gray-200);
  --current-header-bg-opacity: rgba(255, 255, 255, 0.96); /* White with opacity for header */
  --current-header-border: rgba(233, 233, 233, 0.67); /* Lighter border for header */
  --current-header-nav-text: rgba(85, 85, 85, 0.66); /* Gray with opacity for nav text */
  --current-header-nav-text-active: var(--color-gray-600); /* Dark text for active nav item */
  --current-header-nav-bg-active: rgba(189, 189, 189, 0.67); /* Gray with opacity for active nav bg */
  --current-toggle-btn-color: var(--color-gray-400);
  --current-toggle-btn-hover-color: var(--color-gray-600);
  --current-yellow-highlight: rgba(255, 226, 107, 0.7); /* Base highlight color */

  /* --- Layout & Spacing --- */
  --main-left-gap: 5vw;
  /* --site-min-width: 860px; */ /* Consider removing if not strictly needed */

 /* --- [추가] 전역으로 사용될 기본 색상 변수들 (Light Mode Default) --- */
  --text-primary-color: var(--color-black); /* [수정] 메인 텍스트 색상 (더 진하게) */
  --text-secondary-color: var(--color-gray-600); /* [수정] 보조 텍스트 색상 (더 진하게) */
  --text-tertiary-color: var(--color-gray-500); /* [수정] 더 연한 텍스트/아이콘 색상 (더 진하게) */
  --text-tertiary-color2: var(--color-gray-300); /* [수정] 더 연한 텍스트/아이콘 색상 (더 진하게) */
  --text-tertiary-color3: var(--color-gray-100); /* [수정] 더 연한 텍스트/아이콘 색상 (더 진하게) */
  --text-inverted-color: var(--color-white);
  
  --border-primary-color: var(--color-gray-200); /* 기본 보더 색상 */
  --border-secondary-color: var(--color-gray-300); /* 약간 더 진한 보더 색상 */

  --background-secondary: var(--color-gray-100); /* 보조 배경 (카드, 섹션 등) */
  --background-tertiary: var(--color-gray-200); /* 더 연한 보조 배경 */
  --background-card: var(--color-white); /* 카드 배경 */

  --yellow-highlight-light: rgba(255, 226, 107, 0.7); /* 라이트 모드 옐로우 하이라이트 */
  --yellow-base-color: var(--color-yellow-base); /* 기존 옐로우 베이스 */

  --link-color: var(--brand-primary); /* 링크 색상 (선택 사항, 통일성을 위해) */
  --link-hover-color: var(--brand-primary); /* 링크 호버 색상 (선택 사항) */
}

/* --- Dark Mode Overrides for Dynamic Theme Variables --- */
body[data-theme="dark"] {
  --current-bg: var(--ai-bg-primary); /* Main dark background */
  --current-text: var(--ai-text-inverted); /* [수정] 기본 텍스트를 가장 밝게 (대비 강화) */
  --current-text-secondary: var(--ai-text-primary); /* [수정] 보조 텍스트를 더 밝게 (대비 강화) */
  --current-text-inverted: var(--ai-text-inverted); /* White text on dark/accent background */
  --current-border: var(--ai-border-color); /* Dark mode border color */
  --current-header-bg-opacity: rgba(31, 31, 31, 0.67); /* Dark with opacity for header */
  --current-header-border: rgba(255, 255, 255, 0.12); /* Lighter border for header in dark mode */
  --current-header-nav-text: rgba(227, 227, 227, 0.4); /* MODIFIED: Lighter text with more transparency for non-active nav text */
  --current-header-nav-text-active: var(--ai-text-inverted); /* White text for active nav item in dark mode */
  --current-header-nav-bg-active: rgba(21, 21, 21, 0.67); /* Black with slight transparency for active nav bg */
  --current-toggle-btn-color: var(--ai-text-secondary);
  --current-toggle-btn-hover-color: var(--ai-text-primary);
  /* --current-yellow-highlight: rgba(66, 133, 244, 0.4); */ /* 이 라인은 이제 필요 없으므로 주석 처리하거나 삭제합니다. */

  /* Specific cursor overrides for dark mode.
     This assumes your cursor paths are set up to provide dark versions. */
  --cursor-default: var(--cursor-pointer-dark);
  --cursor-default2: var(--cursor-pointer-dark2);
  --cursor-ew-resize: var(--cursor-ew-resize-dark);
  --cursor-ew-resize2: var(--cursor-ew-resize-dark2);
  --cursor-ask: var(--cursor-ask-dark);

  /* --- [추가/수정] 다크 모드에서의 전역 색상 변수 값 --- */
  --text-primary-color: var(--ai-text-inverted); /* [수정] 메인 텍스트 색상 (더 밝게) */
  --text-secondary-color: var(--ai-text-primary); /* [수정] 보조 텍스트 색상 (더 밝게) */
  --text-tertiary-color: var(--ai-text-secondary); /* [수정] 더 연한 텍스트/아이콘 색상 (더 밝게) */
  --text-inverted-color: var(--ai-text-inverted);

  --border-primary-color: var(--ai-border-color);
  --border-secondary-color: var(--color-gray-600); /* 다크 모드에서 더 진한 보더 */

  --background-secondary: var(--ai-bg-secondary);
  --background-tertiary: var(--ai-bg-tertiary);
  --background-card: var(--ai-bg-lightest); /* 다크 모드 카드 배경 */

  --yellow-highlight-light: rgba(255, 255, 100, 0.3); /* 다크 모드 옐로우 하이라이트 조정 */
  --yellow-base-color: var(--color-yellow-dark); /* 다크 모드에서 약간 더 진한 옐로우 */

  --link-color: var(--brand-primary);
  --link-hover-color: var(--brand-secondary); /* 다크 모드 링크 호버 색상 */
}

/* --- Cursor Variable Definitions (Separate for clarity) --- */
/* Paths to cursor images */
:root {
  /* Light Mode Cursor Paths */
  --cursor-pointer-light: url('../img/pointer-dark.png'), auto;
  --cursor-pointer-light2: url('../../img/pointer-dark.png'), auto;
  --cursor-ew-resize-light: url('../img/ew-resize-dark.png') 40 20, auto;
  --cursor-ew-resize-light2: url('../../img/ew-resize-dark.png') 40 20, auto;
  --cursor-ask-light: url('../img/asklightmode.png') 25 25, auto;

  /* Dark Mode Cursor Paths */
  --cursor-pointer-dark: url('../img/pointer-light.png'), auto;
  --cursor-pointer-dark2: url('../../img/pointer-light.png'), auto;
  --cursor-ew-resize-dark: url('../img/ew-resize-light.png') 40 20, auto;
  --cursor-ew-resize-dark2: url('../../img/ew-resize-light.png') 40 20, auto;
  --cursor-ask-dark: url('../img/askdarkmode.png') 25 25, auto;

  /* Universal Grab Cursors (Path should be mode-agnostic if possible, or defined per mode if needed) */
  --cursor-grab-single: url('../img/grab.png') 11 3, auto;
  --cursor-grab-single2:  url('../../img/grab.png') 11 3, auto;
  --cursor-grabbing-single: url('../img/grabbing.png') 11 3, auto;
  --cursor-grabbing-single2: url('../../img/grabbing.png') 11 3, auto;
  --cursor-grab-bottom: url('../img/grab-bottom.png') 0 50, auto;
  --cursor-grab-bottom2:  url('../../img/grab-bottom.png') 0 50, auto;

  /* Current Cursor Variable (Defaults to light mode) */
  --cursor-default: var(--cursor-pointer-light);
  --cursor-default2: var(--cursor-pointer-light2);
  --cursor-pointer: var(--cursor-grab-single); /* Using grab for interactive pointer */
  --cursor-grab: var(--cursor-grab-single);
  --cursor-grab2: var(--cursor-grab-single2);
  --cursor-grabbing: var(--cursor-grabbing-single);
  --cursor-grabbing2: var(--grabbing-single2);
  --cursor-ew-resize: var(--cursor-ew-resize-light);
  --cursor-ew-resize2: var(--cursor-ew-resize-light2);
  --cursor-ask: var(--cursor-ask-light);
}

/* --- Global Body & HTML Styles --- */
html, body {
  min-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', Arial, sans-serif;
  background: var(--current-bg);
  color: var(--current-text);
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: var(--cursor-default); /* Apply default cursor from variable */
}

/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--current-bg); /* Use current background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: 'Do Hyeon', sans-serif;
    transition: opacity 0.5s ease;
}

.loading-text {
    font-size: 2rem;
    color: var(--current-text); /* Use current text color */
    animation: fade 1s ease-in-out infinite alternate;
}

@keyframes fade {
    0% { opacity: 0.2; }
    100% { opacity: 1; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Footer Styles --- */
footer {
    width: 100vw;
    height: 30vw;
    /* min-width: var(--site-min-width, 860px); */
    padding: 2rem var(--main-left-gap) 5rem 0;
    text-align: right;
    color: var(--current-text-secondary); /* Use secondary text color */
    background: transparent;
    box-sizing: border-box;
    z-index: 1000;
}

.footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2rem;
    height: 100%;
    min-height: 50px;
}

.footer-content {
    display: inline-block;
    text-align: right;
    vertical-align: bottom;
}

.footer-content p {
    margin: 0 0 1.5rem 0;
    font-size: 1.16rem;
    color: var(--current-text-secondary); /* Use secondary text color */
    line-height: 2.1;
}

.footer-content a {
    color: var(--color-pink-strong); /* Use a strong pink from base palette */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.footer-content a:hover {
    color: var(--color-pink-base); /* Use base pink on hover */
    text-decoration: underline;
}

.footer-copyright {
    font-size: 0.96rem;
    color: var(--current-text-secondary); /* Use secondary text color */
    display: block;
    margin-top: 1.2rem;
}

.footer-image {
    width: 200px;
    height: 250px;
}

@keyframes shakeX {
    0% { transform: rotate(6deg); }
    25% { transform: rotate(12deg); }
    58% { transform: rotate(18deg); }
    75% { transform: rotate(12deg); }
    100% { transform: rotate(6deg); }
}

.footer-image.shake-x {
    animation: shakeX 2.6s cubic-bezier(.66,0,.35,1) infinite;
    transform-origin: 50% 85%;
}

/* --- Lottie Animation Filter (for dark mode compatibility) --- */
/* Filter lottie for dark mode unless it's a portfolio/about page where it's handled differently */
/* body[data-theme='dark']:not(#portfolio-page):not(#about-page) #lottie-container #lottie-inner-section {
    filter: invert(75%);
} */
body[data-theme='dark'] #lottie-container #lottie-inner-section {
    filter: invert(75%);
}

body[data-theme='light'] #lottie-container #lottie-inner-section {
    filter: none;
}

/* --- Highlighter Styles --- */
.meaning-chunk,
.timeline-chunk,
.skill-chunk,
.timeline-tag-chunk1,
.timeline-tag-chunk2 {
    transition: background-color 0.3s ease;
    display: inline;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    margin-top: -0.1em;
    margin-bottom: -0.1em;
    border-radius: 3px;
}

/* Ensure highlight colors adapt or are explicitly defined */
/* Light Mode Default Colors */
.highlight-yellow { background-color: var(--yellow-highlight-light); } /* 수정: 새로 정의한 변수 사용 */
.highlight-pink { background-color: rgba(255, 164, 211, 0.6); }
.highlight-orange { background-color: rgba(255, 159, 67, 0.6); }
.highlight-green { background-color: rgba(130, 212, 167, 0.7); }
.highlight-blue { background-color: rgba(137, 196, 244, 0.7); }
.highlight-gray { background-color: rgba(204, 204, 204, 0.8); }

/* Explicit overrides for dark mode for specific highlight colors */
body[data-theme="dark"] .highlight-yellow { background-color: rgba(255, 255, 100, 0.3); } /* 다크 모드 옐로우 하이라이트 직접 정의 */
body[data-theme="dark"] .highlight-pink { background-color: rgba(255, 120, 190, 0.5); }
body[data-theme="dark"] .highlight-orange { background-color: rgba(255, 180, 100, 0.5); }
body[data-theme="dark"] .highlight-green { background-color: rgba(100, 220, 140, 0.6); }
body[data-theme="dark"] .highlight-blue { background-color: rgba(100, 180, 255, 0.6); }
body[data-theme="dark"] .highlight-gray { background-color: rgba(150, 150, 150, 0.7); }


/* --- Highlight Menu --- */
#highlight-menu {
    position: absolute;
    display: none;
    align-items: center;
    gap: 8px;
    background-color: var(--current-bg); /* Use current background */
    border: 1px solid var(--current-border); /* Use current border */
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10001;
    user-select: none;
}

body[data-theme="dark"] #highlight-menu {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Darker shadow for dark mode */
}

#highlight-menu .drag-handle {
    cursor: move;
    padding: 4px;
    color: var(--text-secondary-color); /* 수정: --current-text-secondary 대신 --text-secondary-color 사용 */
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
}

#highlight-menu .color-palette {
    display: flex;
    gap: 6px;
}

#highlight-menu .color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

#highlight-menu .color-swatch:hover {
    transform: scale(1.15);
}

#highlight-menu .color-swatch.active {
    border-color: var(--text-primary-color); /* 수정: --current-text 대신 --text-primary-color 사용 */
    transform: scale(1.1);
}

.color-swatch[data-color="yellow"] { background-color: var(--color-yellow-base); }
.color-swatch[data-color="pink"] { background-color: var(--color-pink-base); }
.color-swatch[data-color="orange"] { background-color: #FF9F43; } /* Assuming this is a custom orange */
.color-swatch[data-color="green"] { background-color: #82D4A7; } /* Assuming this is a custom green */
.color-swatch[data-color="blue"] { background-color: #89C4F4; } /* Assuming this is a custom blue */
.color-swatch[data-color="gray"] { background-color: var(--color-gray-300); } /* Use mid-light gray from palette */

/* =============================================== */
/* Footer & Lottie Responsive Layout        */
/* =============================================== */

/* 화면 너비가 501px 이상일 때 Lottie 컨테이너를 다시 표시합니다. */
@media (min-width: 501px) {
  #lottie-container {
    display: block; /* 또는 flex 등 원래의 display 속성으로 설정 */
  }
}

/* 화면 너비가 500px 이하일 때 적용될 스타일입니다.
  - hobby, about, career, connect, project 페이지의 모든 푸터에 공통으로 적용됩니다.
*/
@media (max-width: 500px) {
  /* 모든 페이지의 footer 태그와 hobby 페이지의 특정 ID(#hobbyPageStandardFooter)에 
    공통 스타일을 적용합니다.
  */
  footer, 
  #hobbyPageStandardFooter {
    transform-origin: bottom right !important;
    scale: 0.9 !important;
  }

  /* Lottie 컨테이너를 레이아웃에서 완전히 제거하여 공간을 차지하지 않게 합니다.
    !important를 사용하여 다른 스타일 규칙보다 우선 적용되도록 합니다.
  */
  #lottie-container {
    display: none !important; 
  }

  /* 모든 푸터 내부의 .footer-row 클래스에 적용하여
    Lottie 컨테이너가 사라진 후에도 콘텐츠가 오른쪽 정렬을 유지하도록 합니다.
  */
  footer .footer-row,
  #hobbyPageStandardFooter .footer-row {
    justify-content: flex-end;
  }
}

/* 화면 너비가 380px 이하일 때 추가로 적용될 스타일입니다. 
  푸터의 크기를 더 줄여 모바일 화면에서 잘 보이도록 합니다.
*/
@media (max-width: 380px) {
  footer,
  #hobbyPageStandardFooter {
    transform-origin: bottom right !important;
    scale: 0.8 !important;
  }
}