/*
 * style.css - 핏이지 메인 스타일시트
 * Dark Ocean Theme + Resy-Inspired Premium Design
 */

:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #0f1628;
    --bg-surface: #151d2e;
    --bg-card: #1a2236;
    --bg-elevated: #1f2940;
    --primary: #0064FF;
    --primary-light: #4d93ff;
    --primary-dark: #0050cc;
    --secondary: #00d4aa;
    --secondary-light: #33e0be;
    --accent: #4facfe;
    --accent-alt: #667eea;
    --text-primary: #e8edf5;
    --text-secondary: #94a3b8;
    --text-muted: #5a6a80;
    --text-inverse: #0a0e1a;
    --border-color: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.1);
    --border-active: rgba(0,100,255,0.3);
    --gradient-ocean: linear-gradient(135deg, #0064FF 0%, #00d4aa 100%);
    --gradient-text: linear-gradient(135deg, #0064FF, #00d4aa);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 30px rgba(0,100,255,0.15);
    --font-primary: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --section-padding: 100px 0;
    --container-width: 1200px;
    --header-height: 72px;
    --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1);
    --transition-base: 0.3s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 9999px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body { font-family:var(--font-primary); background:var(--bg-primary); color:var(--text-primary); line-height:1.7; overflow-x:hidden; }

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

.container { max-width:var(--container-width); margin:0 auto; padding:0 24px; width:100%; }

.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; }

.section-label { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--secondary); margin-bottom:16px; }
.section-label::before { content:''; display:block; width:24px; height:2px; background:var(--gradient-ocean); border-radius:1px; }

.section-title { font-family:var(--font-display); font-size:clamp(28px,4vw,42px); font-weight:700; color:var(--text-primary); line-height:1.3; margin-bottom:20px; }

.section-subtitle { font-size:16px; color:var(--text-secondary); max-width:600px; line-height:1.8; }

.gradient-text { background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Film Grain Overlay */
.film-grain { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; opacity:0.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }

/* Header */
.site-header { position:fixed; top:0; left:0; width:100%; height:var(--header-height); z-index:1000; transition:all var(--transition-base); background:rgba(10,14,26,0.8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border-color); }
.site-header.scrolled { background:rgba(10,14,26,0.95); box-shadow:var(--shadow-md); }

.header-inner { max-width:var(--container-width); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; }

.logo { display:flex; align-items:center; gap:10px; text-decoration:none; z-index:1001; }
.logo-icon { display:flex; align-items:center; transition:transform var(--transition-base); }
.logo:hover .logo-icon { transform:rotate(10deg) scale(1.1); }
.logo-text { font-size:20px; font-weight:700; color:var(--text-primary); letter-spacing:-0.5px; }

.main-nav { display:flex; align-items:center; }
.nav-list { display:flex; align-items:center; gap:4px; }
.nav-link { display:block; padding:8px 18px; font-size:14px; font-weight:500; color:var(--text-secondary); border-radius:var(--radius-full); transition:all var(--transition-fast); position:relative; }
.nav-link:hover,.nav-link.active { color:var(--text-primary); background:rgba(0,100,255,0.08); }
.nav-link.active { color:var(--primary-light); }

/* Dropdown */
.has-dropdown { position:relative; }
.has-dropdown > .nav-link::after { content:''; display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid currentColor; margin-left:6px; vertical-align:middle; transition:transform var(--transition-fast); }
.has-dropdown:hover > .nav-link::after { transform:rotate(180deg); }
.dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:180px; background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-md); padding:8px; opacity:0; visibility:hidden; transition:all var(--transition-fast); box-shadow:var(--shadow-lg); backdrop-filter:blur(20px); }
.has-dropdown:hover .dropdown { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown li a { display:block; padding:10px 16px; font-size:13px; color:var(--text-secondary); border-radius:var(--radius-sm); transition:all var(--transition-fast); }
.dropdown li a:hover { color:var(--text-primary); background:rgba(0,100,255,0.1); }

/* Mobile Toggle */
.mobile-toggle { display:none; width:44px; height:44px; align-items:center; justify-content:center; z-index:1001; border-radius:var(--radius-sm); }
.hamburger { display:flex; flex-direction:column; gap:5px; width:22px; }
.hamburger span { display:block; width:100%; height:2px; background:var(--text-primary); border-radius:2px; transition:all var(--transition-base); transform-origin:center; }
.mobile-toggle.active .hamburger span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.mobile-toggle.active .hamburger span:nth-child(2) { opacity:0; transform:scaleX(0); }
.mobile-toggle.active .hamburger span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile Nav Overlay */
.mobile-nav-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,14,26,0.98); backdrop-filter:blur(30px); z-index:999; opacity:0; visibility:hidden; transition:all var(--transition-base); display:flex; align-items:center; justify-content:center; }
.mobile-nav-overlay.active { opacity:1; visibility:visible; }
.mobile-nav-list { text-align:center; }
.mobile-nav-list li { margin-bottom:8px; }
.mobile-nav-list a { display:inline-block; font-size:24px; font-weight:600; color:var(--text-secondary); padding:12px 24px; border-radius:var(--radius-md); transition:all var(--transition-fast); }
.mobile-nav-list a:hover,.mobile-nav-list a.active { color:var(--text-primary); background:rgba(0,100,255,0.1); }

/* Hero Section */
.hero-section { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:var(--header-height); }
.hero-bg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.interstellar-canvas { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.hero-gradient-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse 80% 50% at 50% 50%,rgba(0,100,255,0.12) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 20% 60%,rgba(0,212,170,0.08) 0%,transparent 50%),linear-gradient(180deg,rgba(10,14,26,0.3) 0%,rgba(10,14,26,0.8) 100%); z-index:2; }
.hero-content { position:relative; z-index:10; width:100%; max-width:var(--container-width); margin:0 auto; padding:0 24px; }
.hero-inner { max-width:700px; }

.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; background:rgba(0,100,255,0.1); border:1px solid rgba(0,100,255,0.2); border-radius:var(--radius-full); font-size:12px; font-weight:600; color:var(--primary-light); letter-spacing:1px; text-transform:uppercase; margin-bottom:32px; }
.hero-badge-dot { width:6px; height:6px; background:var(--secondary); border-radius:50%; animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.hero-title { font-family:var(--font-display); font-size:clamp(40px,7vw,72px); font-weight:700; line-height:1.1; color:var(--text-primary); margin-bottom:24px; letter-spacing:-1px; }
.hero-title .highlight { background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:18px; color:var(--text-secondary); line-height:1.8; margin-bottom:40px; max-width:520px; }
.hero-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 32px; font-size:14px; font-weight:600; border-radius:var(--radius-full); transition:all var(--transition-base); white-space:nowrap; }
.btn-primary { background:var(--gradient-ocean); color:#fff; box-shadow:0 4px 20px rgba(0,100,255,0.3); position:relative; overflow:hidden; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,100,255,0.4); }
.btn-outline { border:1px solid var(--border-light); color:var(--text-primary); background:rgba(255,255,255,0.03); }
.btn-outline:hover { border-color:var(--primary); background:rgba(0,100,255,0.08); transform:translateY(-2px); }

.hero-scroll { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-muted); font-size:11px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; }
.hero-scroll-line { width:1px; height:40px; background:linear-gradient(180deg,var(--primary),transparent); animation:scroll-line 2s ease-in-out infinite; }
@keyframes scroll-line { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(.5);opacity:.5} }

/* Slider */
.slider-section { padding:80px 0; position:relative; overflow:hidden; }
.slider-wrapper { position:relative; max-width:var(--container-width); margin:0 auto; padding:0 24px; }
.slider-container { position:relative; overflow:hidden; border-radius:var(--radius-lg); aspect-ratio:16/7; background:var(--bg-secondary); }
.slider-track { display:flex; transition:transform 500ms ease; height:100%; }
.slider-slide { min-width:100%; height:100%; position:relative; overflow:hidden; }
.slider-slide-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg,rgba(10,14,26,0.7) 0%,rgba(10,14,26,0.3) 100%); display:flex; align-items:center; padding:40px 60px; }
.slider-slide-content { max-width:500px; }
.slider-slide-title { font-family:var(--font-display); font-size:clamp(24px,3vw,36px); font-weight:700; color:#fff; margin-bottom:12px; }
.slider-slide-desc { font-size:15px; color:rgba(255,255,255,0.8); line-height:1.7; }

.slider-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.15); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition-fast); z-index:10; }
.slider-nav:hover { background:rgba(0,100,255,0.3); border-color:var(--primary); }
.slider-prev { left:16px; }
.slider-next { right:16px; }

.slider-pagination { display:flex; justify-content:center; gap:8px; margin-top:20px; }
.slider-dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted); cursor:pointer; transition:all var(--transition-fast); border:none; }
.slider-dot.active { width:24px; border-radius:4px; background:var(--gradient-ocean); }

/* Content Sections */
.content-section { padding:var(--section-padding); position:relative; }
.section-header { margin-bottom:60px; }
.section-header.center { text-align:center; }
.section-header.center .section-subtitle { margin:0 auto; }

/* Cards */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition-base); position:relative; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gradient-ocean); opacity:0; transition:opacity var(--transition-base); }
.card:hover { transform:translateY(-4px); border-color:var(--border-active); box-shadow:var(--shadow-glow); }
.card:hover::before { opacity:1; }
.card-image { aspect-ratio:16/10; overflow:hidden; position:relative; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow); }
.card:hover .card-image img { transform:scale(1.05); }
.card-body { padding:28px; }
.card-category { display:inline-block; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--secondary); margin-bottom:12px; }
.card-title { font-size:18px; font-weight:600; color:var(--text-primary); margin-bottom:10px; line-height:1.4; }
.card-text { font-size:14px; color:var(--text-secondary); line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-footer { padding:16px 28px; border-top:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-muted); }
.card-link { color:var(--primary-light); font-weight:500; display:inline-flex; align-items:center; gap:6px; font-size:13px; transition:all var(--transition-fast); }
.card-link:hover { color:var(--secondary); gap:10px; }

/* Feature Grid */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.feature-item { padding:36px 28px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); transition:all var(--transition-base); position:relative; overflow:hidden; }
.feature-item::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--gradient-ocean); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-base); }
.feature-item:hover { transform:translateY(-4px); border-color:var(--border-active); box-shadow:var(--shadow-glow); }
.feature-item:hover::after { transform:scaleX(1); }
.feature-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:rgba(0,100,255,0.1); border-radius:var(--radius-md); margin-bottom:20px; font-size:24px; color:var(--primary-light); transition:all var(--transition-base); }
.feature-item:hover .feature-icon { background:rgba(0,100,255,0.15); transform:scale(1.1); }
.feature-title { font-size:18px; font-weight:600; color:var(--text-primary); margin-bottom:10px; }
.feature-desc { font-size:14px; color:var(--text-secondary); line-height:1.7; }

/* Posts Grid */
.posts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:28px; }
.post-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition-base); }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-glow); border-color:var(--border-active); }
.post-card .card-image { aspect-ratio:16/9; }

/* Page Header */
.page-header { padding-top:calc(var(--header-height) + 60px); padding-bottom:60px; background:var(--bg-secondary); position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse 50% 80% at 20% 50%,rgba(0,100,255,0.06) 0%,transparent 50%),radial-gradient(ellipse 50% 80% at 80% 50%,rgba(0,212,170,0.04) 0%,transparent 50%); pointer-events:none; }
.page-header::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:var(--gradient-ocean); opacity:0.3; }
.page-header-content { position:relative; z-index:1; }
.page-header .breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); margin-bottom:16px; }
.page-header .breadcrumb a { color:var(--text-secondary); transition:color var(--transition-fast); }
.page-header .breadcrumb a:hover { color:var(--primary-light); }
.page-header .breadcrumb .separator { font-size:10px; }
.page-title { font-family:var(--font-display); font-size:clamp(32px,5vw,48px); font-weight:700; color:var(--text-primary); margin-bottom:12px; }
.page-desc { font-size:16px; color:var(--text-secondary); max-width:600px; }

/* Stats Bar */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-color); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-color); }
.stat-item { padding:36px 20px; text-align:center; background:var(--bg-card); transition:background var(--transition-fast); }
.stat-item:hover { background:var(--bg-elevated); }
.stat-number { font-family:var(--font-display); font-size:36px; font-weight:700; background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; }
.stat-label { font-size:13px; color:var(--text-muted); }

/* FAQ Accordion */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border:1px solid var(--border-color); border-radius:var(--radius-md); margin-bottom:12px; overflow:hidden; transition:all var(--transition-fast); }
.faq-item:hover { border-color:var(--border-active); }
.faq-item.active { border-color:var(--primary); box-shadow:var(--shadow-glow); }
.faq-question { width:100%; text-align:left; padding:20px 24px; background:var(--bg-card); color:var(--text-primary); font-size:15px; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; transition:all var(--transition-fast); }
.faq-question:hover { background:var(--bg-elevated); }
.faq-icon { flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,100,255,0.1); color:var(--primary-light); font-size:14px; transition:all var(--transition-fast); }
.faq-item.active .faq-icon { background:var(--primary); color:#fff; transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-item.active .faq-answer { max-height:500px; }
.faq-answer-inner { padding:0 24px 20px; font-size:14px; color:var(--text-secondary); line-height:1.8; }

/* Notice List */
.notice-list { display:flex; flex-direction:column; gap:12px; }
.notice-item { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); transition:all var(--transition-fast); gap:16px; text-decoration:none; }
.notice-item:hover { border-color:var(--border-active); background:var(--bg-elevated); transform:translateX(4px); }
.notice-badge { flex-shrink:0; padding:4px 10px; background:rgba(0,100,255,0.1); border-radius:var(--radius-full); font-size:11px; font-weight:600; color:var(--primary-light); }
.notice-badge.important { background:rgba(255,87,51,0.1); color:#ff5733; }
.notice-title { flex:1; font-size:15px; font-weight:500; color:var(--text-primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notice-date { flex-shrink:0; font-size:13px; color:var(--text-muted); }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.gallery-item { position:relative; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; border:1px solid var(--border-color); transition:all var(--transition-base); }
.gallery-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-glow); border-color:var(--border-active); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow); }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-overlay { position:absolute; bottom:0; left:0; width:100%; padding:40px 20px 20px; background:linear-gradient(180deg,transparent 0%,rgba(10,14,26,0.85) 100%); opacity:0; transition:opacity var(--transition-base); }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay p { font-size:14px; font-weight:500; color:#fff; }

/* Careers */
.job-list { display:flex; flex-direction:column; gap:16px; }
.job-card { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); transition:all var(--transition-base); gap:20px; flex-wrap:wrap; }
.job-card:hover { border-color:var(--border-active); box-shadow:var(--shadow-glow); transform:translateX(4px); }
.job-info { flex:1; min-width:200px; }
.job-title { font-size:17px; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.job-meta { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-muted); }
.job-tag { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:rgba(0,100,255,0.1); border-radius:var(--radius-full); font-size:11px; font-weight:500; color:var(--primary-light); }

/* Location */
.map-container { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-color); aspect-ratio:16/9; background:var(--bg-card); }
.map-container iframe { width:100%; height:100%; border:0; }
.contact-info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; margin-top:40px; }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; padding:24px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); }
.contact-info-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(0,100,255,0.1); border-radius:var(--radius-sm); color:var(--primary-light); flex-shrink:0; }
.contact-info-text h4 { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.contact-info-text p { font-size:13px; color:var(--text-secondary); line-height:1.6; }

/* Legal Content */
.legal-content { max-width:800px; margin:0 auto; }
.legal-content h2 { font-size:22px; font-weight:600; color:var(--text-primary); margin-top:48px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border-color); }
.legal-content h3 { font-size:17px; font-weight:600; color:var(--text-primary); margin-top:28px; margin-bottom:12px; }
.legal-content p { font-size:14px; color:var(--text-secondary); line-height:1.8; margin-bottom:16px; }
.legal-content ul { margin-bottom:16px; padding-left:20px; }
.legal-content li { font-size:14px; color:var(--text-secondary); line-height:1.8; position:relative; padding-left:16px; margin-bottom:4px; }
.legal-content li::before { content:''; position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:50%; background:var(--primary); }

/* Sitemap */
.sitemap-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.sitemap-group { padding:28px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); }
.sitemap-group h3 { font-size:16px; font-weight:600; color:var(--primary-light); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border-color); }
.sitemap-group ul { display:flex; flex-direction:column; gap:8px; }
.sitemap-group a { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-secondary); padding:6px 0; transition:all var(--transition-fast); }
.sitemap-group a::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--text-muted); transition:background var(--transition-fast); }
.sitemap-group a:hover { color:var(--primary-light); transform:translateX(4px); }
.sitemap-group a:hover::before { background:var(--primary); }

/* CTA Section */
.cta-section { padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(0,100,255,0.08) 0%,transparent 60%); pointer-events:none; }
.cta-content { position:relative; z-index:1; }
.cta-title { font-family:var(--font-display); font-size:clamp(28px,4vw,40px); font-weight:700; color:var(--text-primary); margin-bottom:16px; }
.cta-desc { font-size:16px; color:var(--text-secondary); margin-bottom:32px; max-width:480px; margin-left:auto; margin-right:auto; }

/* Greeting */
.greeting-section { padding:80px 0; }
.greeting-content { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.greeting-text { font-size:16px; color:var(--text-secondary); line-height:2; }
.greeting-text .greeting-name { display:block; margin-top:32px; text-align:right; font-weight:600; color:var(--text-primary); font-size:18px; }
.greeting-image { aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-color); }

/* Timeline */
.timeline { position:relative; max-width:700px; margin:0 auto; padding-left:40px; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--primary),var(--secondary),transparent); }
.timeline-item { position:relative; margin-bottom:40px; padding-left:32px; }
.timeline-item::before { content:''; position:absolute; left:-45px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(0,100,255,0.2); }
.timeline-year { font-size:13px; font-weight:600; color:var(--primary-light); margin-bottom:8px; }
.timeline-content h4 { font-size:17px; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.timeline-content p { font-size:14px; color:var(--text-secondary); line-height:1.7; }

/* Back to Top */
.back-to-top { position:fixed; bottom:32px; right:32px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--bg-card); border:1px solid var(--border-light); border-radius:50%; color:var(--text-secondary); opacity:0; visibility:hidden; transform:translateY(12px); transition:all var(--transition-base); z-index:900; backdrop-filter:blur(10px); }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:var(--shadow-glow); }

/* Footer */
.site-footer { position:relative; background:var(--bg-secondary); }
.footer-wave { position:relative; width:100%; height:60px; color:var(--bg-secondary); margin-top:-1px; }
.footer-wave svg { width:100%; height:100%; display:block; }
.footer-content { padding:60px 0 40px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; }
.footer-logo { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:16px; }
.footer-desc { font-size:13px; color:var(--text-muted); line-height:1.7; max-width:280px; }
.footer-links h3,.footer-contact h3 { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:20px; text-transform:uppercase; letter-spacing:0.5px; }
.footer-links ul { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:13px; color:var(--text-muted); transition:all var(--transition-fast); }
.footer-links a:hover { color:var(--primary-light); }
.footer-contact ul { display:flex; flex-direction:column; gap:12px; }
.footer-contact li { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-muted); line-height:1.5; }
.footer-contact svg { flex-shrink:0; margin-top:2px; color:var(--primary-light); }
.footer-bottom { padding:20px 0; border-top:1px solid var(--border-color); text-align:center; }
.footer-bottom p { font-size:12px; color:var(--text-muted); }

/* Ink Drop Effect */
.ink-drop-container { position:relative; overflow:hidden; }
.ink-drop-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:0.6; }

/* Placeholder Images */
.placeholder-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-muted); position:relative; overflow:hidden; }
.placeholder-img.style-1 { background:linear-gradient(135deg,rgba(0,100,255,0.15) 0%,rgba(0,212,170,0.1) 50%,rgba(102,126,234,0.08) 100%); }
.placeholder-img.style-2 { background:linear-gradient(135deg,rgba(0,212,170,0.15) 0%,rgba(102,126,234,0.1) 50%,rgba(0,100,255,0.08) 100%); }
.placeholder-img.style-3 { background:linear-gradient(135deg,rgba(102,126,234,0.15) 0%,rgba(0,100,255,0.1) 50%,rgba(0,212,170,0.08) 100%); }
.placeholder-img.style-4 { background:linear-gradient(45deg,rgba(0,100,255,0.12) 0%,rgba(79,172,254,0.1) 50%,rgba(0,212,170,0.12) 100%); }
.placeholder-img.style-5 { background:linear-gradient(225deg,rgba(0,212,170,0.12) 0%,rgba(0,100,255,0.1) 50%,rgba(102,126,234,0.12) 100%); }

/* Scroll Progress */
.scroll-progress { position:fixed; top:0; left:0; height:2px; background:var(--gradient-ocean); z-index:10000; border-radius:0 1px 1px 0; }

/* Data Table */
.data-table { width:100%; border-collapse:collapse; border-radius:var(--radius-md); overflow:hidden; }
.data-table thead { background:var(--bg-elevated); }
.data-table th { padding:14px 20px; text-align:left; font-size:13px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border-color); }
.data-table td { padding:14px 20px; font-size:14px; color:var(--text-primary); border-bottom:1px solid var(--border-color); }
.data-table tbody tr { transition:background var(--transition-fast); }
.data-table tbody tr:hover { background:rgba(0,100,255,0.04); }
.data-table tbody tr:last-child td { border-bottom:none; }