/*
Theme Name: H-Style (Deep Teal)
Theme URI: https://example.com/h-style
Author: 호텔천사
Author URI: https://webworks.co.kr
Description: 매거진/뉴스룸 워드프레스 테마. 풀스크린 히어로, 미니멀 타이포그래피.
Version: 3.6.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: h-style
Tags: magazine, newsroom, grid-layout, full-width, custom-header, featured-images, blog
*/

/* ========== RESET & BASE ========== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors — White & Teal
       헤더      : #ffffff  (화이트)
       페이지 바탕: #ffffff  (화이트)
       카드/섹션 : #ffffff  (흰색)
       액센트   : #16a085  (틸)
       푸터      : #111827  (다크)
    */
    --color-bg-page:    #ffffff;   /* 화이트 — 전체 페이지 배경 */
    --color-bg-dark:    #111827;   /* 다크 — 푸터 배경 */
    --color-bg-darker:  #0d1321;   /* 더 진한 다크 */
    --color-bg-card:    #ffffff;   /* 카드 배경 */
    --color-bg-alt:     #f4f6f8;   /* 보조 섹션 (연한 회색) */
    --color-bg-light:   #ffffff;
    --color-text-primary:   #ffffff;  /* 다크 위 텍스트 */
    --color-text-on-light:  #1a1a2e;  /* 흰 위 텍스트 */
    --color-text-secondary: #666666;  /* 보조 텍스트 */
    --color-text-muted:     #aaaaaa;  /* 뮤트 텍스트 */
    --color-text-dark:      #1a1a2e;
    --color-text-body:      #444444;  /* 본문 텍스트 */
    --color-border-light:   #e8e8e8;  /* 경계선 */
    --color-border-dark:    rgba(255, 255, 255, 0.10); /* 다크 위 경계선 */
    --color-accent:         #16a085;  /* 액센트 = 틸 */
    --color-accent-hover:   #0e7a65;  /* 더 진한 틸 */
    --color-hero-start:     #0d3535;  /* 히어로 그라데이션 시작 */
    --color-hero-end:       #1a5252;  /* 히어로 그라데이션 끝 */

    /* Typography — 한글 최적화 */
    --font-primary: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', sans-serif;
    --font-heading: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', sans-serif;
    --font-display: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    /* Spacing */
    --content-width: 720px;
    --content-wide: 920px;
    --site-max-width: 1280px;
    --grid-gap: 24px;
    --section-padding: 80px 40px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

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

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

/* 페이지 래퍼 — 플러그인/외부 CSS의 너비 제한 방지 */
#page,
.site,
#content,
.site-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}