/* ============================================================
 * FILE: public/assets/css/main.css
 * ── 배치 정보 ──────────────────────────────────────────────────
 *   서버: 웹서버 (macOS, 172.20.200.10)
 *   경로: /Users/lajeong/Documents/Site/public/assets/css/main.css
 *   접근: 브라우저에서 직접 로드 — /assets/css/main.css
 * ── 역할 ──────────────────────────────────────────────────────
 *   사이트 전체 공통 스타일시트.
 *   CSS 변수(다크/라이트 테마), 레이아웃(header/footer/main).
 *   네비게이션, 버튼, 폼, 모달, 토스트 등 공통 컴포넌트.
 * ============================================================ */

/* ----------------------
   CSS 변수 (디자인 토큰)
   ---------------------- */
:root {
    /* 컬러 */
    --color-bg         : #0f0f0f;
    --color-surface    : #1a1a1a;
    --color-surface-2  : #242424;
    --color-border     : #2e2e2e;
    --color-text       : #e8e8e8;
    --color-text-muted : #888;
    --color-primary    : #6366f1;   /* 인디고 포인트 */
    --color-primary-h  : #818cf8;
    --color-success    : #22c55e;
    --color-error      : #ef4444;
    --color-warning    : #f59e0b;

    /* 타이포그래피 */
    --font-base        : 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-base   : 15px;
    --line-height-base : 1.7;

    /* 간격 */
    --spacing-xs  : 4px;
    --spacing-sm  : 8px;
    --spacing-md  : 16px;
    --spacing-lg  : 24px;
    --spacing-xl  : 40px;

    /* 테두리 */
    --radius-sm   : 6px;
    --radius-md   : 10px;
    --radius-lg   : 16px;

    /* 그림자 */
    --shadow-sm   : 0 1px 3px rgba(0,0,0,.4);
    --shadow-md   : 0 4px 16px rgba(0,0,0,.5);

    /* 레이아웃 */
    --container-max : 1200px;
    --header-h      : 60px;
}

/* ----------------------
   라이트 모드 (data-theme="light")
   ---------------------- */
[data-theme="light"] {
    --color-bg         : #f8f9fa;
    --color-surface    : #ffffff;
    --color-surface-2  : #f1f3f5;
    --color-border     : #dde1e7;
    --color-text       : #111827;
    --color-text-muted : #6b7280;
    --shadow-sm        : 0 1px 3px rgba(0,0,0,.08);
    --shadow-md        : 0 4px 16px rgba(0,0,0,.12);
}
[data-theme="light"] .site-header {
    background: rgba(248,249,250,.92);
}

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

html { font-size: var(--font-size-base); scroll-behavior: smooth; }

body {
    font-family    : var(--font-base);
    background     : var(--color-bg);
    color          : var(--color-text);
    line-height    : var(--line-height-base);
    min-height     : 100vh;
    -webkit-font-smoothing : antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary-h); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* ----------------------
   레이아웃
   ---------------------- */
.container {
    max-width  : var(--container-max);
    margin     : 0 auto;
    padding    : 0 var(--spacing-lg);
}

/* ----------------------
   헤더
   ---------------------- */
.site-header {
    position   : sticky;
    top        : 0;
    z-index    : 100;
    height     : var(--header-h);
    background : rgba(15,15,15,.9);
    backdrop-filter : blur(12px);
    border-bottom : 1px solid var(--color-border);
}

.header-inner {
    display        : flex;
    align-items    : center;
    gap            : var(--spacing-lg);
    height         : 100%;
    padding-left   : 32px;
    padding-right  : 32px;
}

.site-logo img { height: 32px; }

/* 네비게이션 */
.site-nav { flex: 1; }

.nav-list {
    display    : flex;
    align-items: center;
    gap        : var(--spacing-sm);
}

.nav-link {
    padding     : var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size   : 14px;
    font-weight : 500;
    color       : var(--color-text-muted);
    transition  : color .2s, background .2s;
    white-space : nowrap;
}
.nav-link:hover { color: var(--color-text); background: var(--color-surface-2); }

/* 드롭다운 */
.nav-dropdown { position: relative; }

.dropdown-menu {
    display    : none;
    position   : absolute;
    top        : calc(100% + 4px);
    left       : 0;
    background : var(--color-surface);
    border     : 1px solid var(--color-border);
    border-radius : var(--radius-md);
    min-width  : 180px;
    padding    : var(--spacing-sm) 0;
    box-shadow : var(--shadow-md);
    z-index    : 200;
}
.dropdown-menu a {
    display   : block;
    padding   : 10px var(--spacing-md);
    font-size : 14px;
    color     : var(--color-text-muted);
    transition: background .15s, color .15s;
}
.dropdown-menu a:hover { background: var(--color-surface-2); color: var(--color-text); }
/* hover: 마우스 커서 디바이스 전용 */
@media (hover: hover) {
    .nav-dropdown:hover .dropdown-menu { display: block; }
}
/* 터치 탭: JS가 추가하는 .is-open 클래스로 제어 */
.nav-dropdown.is-open .dropdown-menu { display: block; }

/* 헤더 우측 버튼 그룹 */
.header-user { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }

/* 햄버거 (모바일) */
.hamburger {
    display   : none;
    flex-direction: column;
    gap       : 5px;
    background: none;
    border    : none;
    padding   : var(--spacing-sm);
    margin-left: auto;
}
.hamburger span {
    display   : block;
    width     : 22px;
    height    : 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}

/* ----------------------
   버튼
   ---------------------- */
.btn {
    display     : inline-flex;
    align-items : center;
    justify-content: center;
    gap         : var(--spacing-xs);
    padding     : 10px 20px;
    border-radius: var(--radius-md);
    font-size   : 14px;
    font-weight : 600;
    border      : 1.5px solid transparent;
    transition  : background .2s, color .2s, border-color .2s, transform .1s;
    white-space : nowrap;
    user-select : none;
}
.btn:active { transform: scale(.97); }

.btn-primary {
    background : var(--color-primary);
    color      : #fff;
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background  : var(--color-primary-h);
    border-color: var(--color-primary-h);
    color: #fff;
}

.btn-outline {
    background  : transparent;
    color       : var(--color-text);
    border-color: var(--color-border);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-ghost {
    background  : transparent;
    color       : var(--color-text-muted);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); }

.btn-sm { padding: 6px 14px; font-size: 13px; }

.btn-block { width: 100%; }

/* ----------------------
   테마 토글 버튼
   ---------------------- */
.theme-toggle {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 34px;
    height         : 34px;
    background     : var(--color-surface-2);
    border         : 1px solid var(--color-border);
    border-radius  : var(--radius-md);
    cursor         : pointer;
    font-size      : 16px;
    line-height    : 1;
    transition     : background .2s, border-color .2s;
    flex-shrink    : 0;
    color          : var(--color-text);
    padding        : 0;
    font-family    : inherit;
}
.theme-toggle:hover { border-color: var(--color-primary); }

/* ----------------------
   알림 박스
   ---------------------- */
.alert {
    padding       : var(--spacing-md);
    border-radius : var(--radius-md);
    border        : 1px solid;
    font-size     : 14px;
    margin-bottom : var(--spacing-md);
    line-height   : 1.6;
}
.alert-success {
    background  : rgba(34,197,94,.1);
    border-color: rgba(34,197,94,.3);
    color       : #86efac;
}
.alert-error {
    background  : rgba(239,68,68,.1);
    border-color: rgba(239,68,68,.3);
    color       : #fca5a5;
}
.alert-list { padding-left: 16px; list-style: disc; }
.alert-list li { margin-bottom: 4px; }

/* ----------------------
   링크
   ---------------------- */
.link { color: var(--color-primary); }
.link:hover { color: var(--color-primary-h); text-decoration: underline; }
.link-sm { font-size: 13px; }

/* ----------------------
   메인 콘텐츠 영역
   ---------------------- */
.site-main { min-height: calc(100vh - var(--header-h) - 80px); }

/* ----------------------
   푸터
   ---------------------- */
.site-footer {
    border-top  : 1px solid var(--color-border);
    padding     : var(--spacing-xl) 0;
    color       : var(--color-text-muted);
    font-size   : 13px;
}
.footer-inner {
    display     : flex;
    align-items : center;
    gap         : var(--spacing-lg);
    flex-wrap   : wrap;
}
.footer-logo a { font-weight: 700; font-size: 16px; color: var(--color-text); }
.footer-nav { display: flex; gap: var(--spacing-md); }
.footer-nav a:hover { color: var(--color-text); }
.footer-copy { margin-left: auto; }

/* ----------------------
   미디어 쿼리
   ---------------------- */

/* ── 태블릿 (1025px 이하) ── */
@media (max-width: 1024px) {
    .header-inner { gap: var(--spacing-md); }
    .nav-link     { padding: var(--spacing-sm) 10px; font-size: 13px; }
    .header-user  { gap: 6px; }
    .btn-sm       { padding: 5px 10px; }
}

/* ── 모바일 (≤767px · iPhone SE 375 / 14 390·430 / Galaxy S 360·384) ── */
@media (max-width: 767px) {
    body       { overflow-x: hidden; }
    .container { padding: 0 var(--spacing-md); }

    /* ── 헤더: 2단 레이아웃 ──
       1행: 로고(좌) + 유저버튼(우)
       2행: 네비게이션 전체 폭 */
    .site-header  { height: auto; padding-bottom: 4px; }
    .header-inner { flex-wrap: wrap; height: auto; gap: 0; padding-top: 8px; }

    /* 1행 - 로고는 flex-shrink 없이 */
    .site-logo { flex-shrink: 0; }

    /* 1행 - 유저버튼: 오른쪽 정렬 */
    .header-user {
        margin-left : auto;
        flex-shrink : 0;
        gap         : 4px;
    }
    .header-user .btn-sm { font-size: 12px; padding: 5px 9px; }

    /* 햄버거: 사용 안 함 */
    .hamburger { display: none; }

    /* 로고-테마토글 간격 */
    .theme-toggle { margin-left: 10px; }

    /* 2행: 네비 전체 폭 */
    .site-nav {
        width      : 100%;
        flex       : none;
        order      : 10;
        border-top : 1px solid var(--color-border);
        margin-top : 8px;
    }
    .nav-list { flex-wrap: nowrap; gap: 0; padding: 2px 0; }
    .nav-link { white-space: nowrap; font-size: 13px; padding: 8px 10px; }

    /* 푸터 */
    .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
    .footer-copy  { margin-left: 0; }
}