/*
Theme Name: _s
Theme URI: http://underscores.me/
Author: Automattic
Author URI: http://automattic.com/
Description: Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's flavor I can get behind.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _s
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the research by
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ==================== 반응형 폰트 시스템 ==================== */
:root {
    /* 기본 반응형 폰트 크기 */
    --font-size-xs: clamp(12px, 2.5vw, 14px);
    --font-size-sm: clamp(14px, 3vw, 16px);
    --font-size-md: clamp(16px, 3.5vw, 18px);
    --font-size-lg: clamp(18px, 4vw, 22px);
    --font-size-xl: clamp(20px, 4.5vw, 26px);
    --font-size-2xl: clamp(24px, 5vw, 32px);
    --font-size-3xl: clamp(28px, 6vw, 42px);
    --font-size-4xl: clamp(32px, 7vw, 48px);
    --font-size-5xl: clamp(36px, 8vw, 56px);
    --font-size-6xl: clamp(48px, 10vw, 72px);

    /* 색상 */
    --primary-color: #0057ff;
    --secondary-color: #666;
    --accent-color: #0057ff;
    --text-color: #333;
    --light-text: #888;
    --bg-light: #f8f9fa;
}

/* 스케일이 적용된 실제 사용 폰트 크기 */
body {
    font-family: 'Pretendard Variable', Pretendard Variable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--text-color);
    background: #fff;
    opacity: 0;
}
body.reveal {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* ==================== 모든 타이포그래피 요소에 스케일 적용 ==================== */

/* 제목들 */
h1, .h1, .heading-1 {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2, .h2, .heading-2 {
    font-size: var(--font-size-4xl) !important;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.875rem;
}

h3, .h3, .heading-3 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

h4, .h4, .heading-4 {
    font-size: var(--font-size-2xl) !important;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.625rem;
}

h5, .h5, .heading-5 {
    font-size: var(--font-size-xl) !important;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

h6, .h6, .heading-6 {
    font-size: var(--font-size-lg) !important;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* 본문 텍스트들 */
p {
    font-size: var(--font-size-sm) ;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* 리스트 */
ul, ol {
    font-size: var(--font-size-md) !important;
    line-height: 1.6;
    margin-bottom: 1rem;
}

li {
    font-size: var(--font-size-md) !important;
    line-height: 1.6;
    margin-bottom: -1px;
}

/* 인용문 */
blockquote {
    font-size: var(--font-size-lg) !important;
    line-height: 1.6;
    font-style: italic;
    margin: 2rem 0;
    padding: 1rem 2rem;
    border-left: 4px solid var(--accent-color);
    background: var(--bg-light);
}

/* 테이블 */
table {
    font-size: var(--font-size-sm) !important;
}

th, td {
    font-size: var(--font-size-sm) !important;
    line-height: 1.5;
    padding: 0.75rem;
}

button.tab-btn  {
    font-size: var(--font-size-xl) ;
}

/* 버튼 */
button, .btn {
    font-size: var(--font-size-2xl) !important;
    line-height: 1.4;
}

/* 폼 요소들 */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], textarea, select {
    font-size: var(--font-size-sm) !important;
    line-height: 1.4;
}

/* 라벨 */
label {
    font-size: var(--font-size-md) !important;
    line-height: 1.4;
}

/* 작은 텍스트 */
small, .small, .caption {
    font-size: var(--font-size-xs) !important;
    line-height: 1.4;
    color: var(--light-text);
}

/* 큰 텍스트 */
.large, .large-text {
    font-size: var(--font-size-lg) !important;
    line-height: 1.6;
}

/* ==================== 레이아웃 ==================== */
.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.main-content {
    margin-top: 100px;
    padding: 2rem 0;
}

.section {
    padding: 3rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.section:last-child {
    border-bottom: none;
}

/* ==================== 데모 스타일 ==================== */
.demo-section {
    background: var(--bg-light);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
}

.instruction-box {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin: 2rem 0;
}

.instruction-box h3 {
    color: white;
    margin-bottom: 1rem;
}

/* ==================== 버튼 ==================== */
.btn-primary {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: #006b5a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==================== 모바일 반응형 (공통) ==================== */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .main-content {
        margin-top: 140px;
    }
}

/* ==================== 유틸리티 클래스 ==================== */
.text-center { text-align: center; }
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }

/* 디버그 정보 */
.debug-info {
    position: fixed;
    top: 100px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    font-family: monospace;
    z-index: 9999;
    display: none;
}

.debug-info.show {
    display: block;
}

/* ==================== 스크롤 텍스트 애니메이션 (.ani) ==================== */
.ani { display: block; overflow: hidden; }
.ani > * {
    display: inline-block;
    opacity: 0;
    transform: translateY(110%);
    transition: 1.05s cubic-bezier(0.19, 1, 0.22, 1);
}
.ani.on > * { opacity: 1; transform: translateY(0); }
.ani.on { overflow: visible; }
.ani.delay1 > * { transition-delay: 0.1s; }
.ani.delay2 > * { transition-delay: 0.2s; }
.ani.delay3 > * { transition-delay: 0.3s; }