/*
Theme Name:   Flash Apple
Theme URI:    https://lab.y92.us
Description:  Flash Child Theme — Apple blog style with Noto Sans KR
Author:       lab.y92.us
Template:     flash
Version:      1.0.0
Text Domain:  flash-apple
*/

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
	--color-text:         #1d1d1f;
	--color-text-sub:     #6e6e73;
	--color-text-light:   #86868b;
	--color-bg:           #f2f2f4;
	--color-bg-card:      #ffffff;
	--color-bg-alt:       #e8e8ed;
	--color-border:       #d2d2d7;
	--color-accent:       #0066cc;
	--color-accent-hover: #004499;
	--color-code-bg:      #1c1c1e;

	--font-base:     'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	--font-size:     17px;
	--line-height:   1.8;
	--content-width: 740px;
	--wide-width:    1000px;
	--card-padding:  40px;
	--card-radius:   18px;
	--header-h:      52px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
	font-family:             var(--font-base) !important;
	font-size:               var(--font-size) !important;
	line-height:             var(--line-height) !important;
	color:                   var(--color-text) !important;
	background-color:        var(--color-bg) !important;
	-webkit-font-smoothing:  antialiased;
	word-break:              keep-all;
	overflow-wrap:           break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-family:    var(--font-base) !important;
	font-weight:    700 !important;
	letter-spacing: -0.02em;
	line-height:    1.2 !important;
	color:          var(--color-text) !important;
}

h1 { font-size: clamp(32px, 5vw, 56px)   !important; }
h2 { font-size: clamp(24px, 3.5vw, 36px) !important; }
h3 { font-size: clamp(20px, 2.5vw, 28px) !important; }
h4 { font-size: 22px !important; }
h5 { font-size: 19px !important; }
h6 { font-size: 17px !important; }

a {
	color:           var(--color-accent) !important;
	text-decoration: none !important;
	transition:      color 0.2s ease;
}
a:hover { color: var(--color-accent-hover) !important; }

p { margin-bottom: 1.5em; color: var(--color-text); }

/* ============================================================
   Header — Frosted Glass
   ============================================================ */
#preloader-background { display: none !important; }

.site-header {
	position:            sticky !important;
	top:                 0 !important;
	z-index:             999 !important;
	background:          rgba(242, 242, 244, 0.90) !important;
	backdrop-filter:     saturate(180%) blur(20px) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	border-bottom:       1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow:          none !important;
}

.header-top { display: none !important; }

.header-bottom { padding: 0 !important; }

.header-bottom .tg-container {
	max-width:   var(--wide-width) !important;
	margin:      0 auto !important;
	padding:     0 24px !important;
	display:     flex !important;
	align-items: center !important;
	height:      var(--header-h) !important;
	flex-wrap:   nowrap !important;
}

/* Site title */
.logo { flex-shrink: 0; }

.site-title,
.site-title a {
	font-size:      17px !important;
	font-weight:    600 !important;
	color:          var(--color-text) !important;
	letter-spacing: -0.01em !important;
	white-space:    nowrap;
}
.site-title a:hover { color: var(--color-accent) !important; }

.site-description { display: none !important; }

/* Nav wrapper */
.site-navigation-wrapper {
	flex:            1 !important;
	display:         flex !important;
	justify-content: flex-end !important;
	align-items:     center !important;
}

/* Desktop nav links */
#site-navigation { float: none !important; }

#site-navigation ul { margin: 0 !important; padding: 0 !important; }

#site-navigation ul li {
	float:   left !important;
	padding: 0 !important;
}

#site-navigation ul li a {
	font-family:     var(--font-base) !important;
	font-size:       14px !important;
	font-weight:     400 !important;
	color:           var(--color-text) !important;
	padding:         6px 12px !important;
	border-radius:   6px !important;
	display:         block !important;
	transition:      background 0.15s ease, color 0.15s ease !important;
	white-space:     nowrap;
}

#site-navigation ul li a:hover,
#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current_page_item > a,
#site-navigation ul li.current_page_ancestor > a,
#site-navigation ul li.current-menu-ancestor > a {
	background: var(--color-bg-alt) !important;
	color:      var(--color-text) !important;
}

/* Sub-menu */
#site-navigation ul.sub-menu {
	background:    var(--color-bg-card) !important;
	border-radius: 10px !important;
	border:        1px solid var(--color-border) !important;
	box-shadow:    0 8px 24px rgba(0, 0, 0, 0.10) !important;
	min-width:     180px !important;
	padding:       6px !important;
	top:           100% !important;
}

#site-navigation ul.sub-menu li {
	float:   none !important;
	padding: 0 !important;
}

#site-navigation ul.sub-menu li a {
	border-radius: 6px !important;
	padding:       8px 14px !important;
}

/* Mobile hamburger button */
#site-navigation .menu-toggle {
	display:         none !important;
	cursor:          pointer;
	width:           36px;
	height:          36px;
	align-items:     center;
	justify-content: center;
	border-radius:   8px;
	background:      transparent;
	transition:      background 0.15s ease;
}
#site-navigation .menu-toggle:hover { background: var(--color-bg-alt); }

#site-navigation .menu-toggle .fa {
	font-size: 18px !important;
	color:     var(--color-text) !important;
}

/* Header search/cart icons */
.header-action-container { display: none !important; }

/* ============================================================
   Layout
   ============================================================ */
#content.site-content { padding-top: 0 !important; }

#content .tg-container {
	max-width: var(--wide-width) !important;
	margin:    0 auto !important;
	padding:   0 24px !important;
}

#primary.content-area {
	width:  100% !important;
	float:  none !important;
	margin: 0 auto !important;
}

#secondary.widget-area,
#secondary-left.widget-area { display: none !important; }

/* ============================================================
   Breadcrumb
   ============================================================ */
#flash-breadcrumbs {
	background:    var(--color-bg) !important;
	border-bottom: 1px solid var(--color-border) !important;
	padding:       12px 0 !important;
}
#flash-breadcrumbs .tg-container { max-width: var(--wide-width) !important; }
#flash-breadcrumbs .breadcrumb-trail {
	font-size: 13px !important;
	color:     var(--color-text-sub) !important;
}

/* ============================================================
   Post List (Archive / Home)
   ============================================================ */
.site-main {
	max-width: var(--wide-width) !important;
	margin:    48px auto !important;
	padding:   0 !important;
}

article.post,
article.page {
	background:    var(--color-bg-card) !important;
	border:        none !important;
	border-radius: var(--card-radius) !important;
	overflow:      hidden !important;
	margin-bottom: 24px !important;
	box-shadow:    0 1px 4px rgba(0, 0, 0, 0.06) !important;
	transition:    box-shadow 0.25s ease, transform 0.25s ease;
}
article.post:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10) !important;
	transform:  translateY(-2px);
}

/* List thumbnail */
.post-thumbnail a img {
	width:         100% !important;
	height:        260px !important;
	object-fit:    cover !important;
	display:       block !important;
	border-radius: 0 !important;
}

/* List entry header */
.entry-header {
	padding: 28px 32px 8px !important;
}

.entry-title {
	font-size:      clamp(18px, 2.2vw, 24px) !important;
	font-weight:    700 !important;
	letter-spacing: -0.02em !important;
	line-height:    1.3 !important;
	margin-bottom:  10px !important;
}
.entry-title a          { color: var(--color-text) !important; }
.entry-title a:hover    { color: var(--color-accent) !important; }

.entry-meta {
	font-size:     13px !important;
	color:         var(--color-text-sub) !important;
	padding:       0 32px 12px !important;
	margin-bottom: 0 !important;
}
.entry-meta a { color: var(--color-text-sub) !important; }

/* List excerpt */
.entry-summary,
.entry-content {
	padding:   4px 32px 28px !important;
	font-size: 15px !important;
	color:     var(--color-text-sub) !important;
}

.entry-footer {
	padding:     14px 32px 20px !important;
	border-top:  1px solid var(--color-border) !important;
	font-size:   13px !important;
	color:       var(--color-text-light) !important;
}

/* ============================================================
   Single Post
   ============================================================ */
.single .site-main {
	max-width: 820px !important;
	margin:    40px auto !important;
	padding:   0 24px !important;
}

/* 단일 포스트 카드 */
.single article.post {
	border-radius: var(--card-radius) !important;
	box-shadow:    0 2px 16px rgba(0, 0, 0, 0.08) !important;
	overflow:      hidden !important;
	padding:       0 !important;
}
.single article.post:hover {
	transform:  none !important;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
}

/* 히어로 이미지 — 카드 상단 full width */
.single .post-thumbnail {
	margin: 0 !important;
	width:  100% !important;
}
.single .post-thumbnail img {
	width:         100% !important;
	height:        clamp(260px, 40vw, 520px) !important;
	object-fit:    cover !important;
	display:       block !important;
	border-radius: 0 !important;
}

/* 헤더 영역 */
.single .entry-header {
	padding: 44px var(--card-padding) 0 !important;
}

.single .entry-title {
	font-size:      clamp(28px, 4.5vw, 48px) !important;
	line-height:    1.15 !important;
	letter-spacing: -0.03em !important;
	margin-bottom:  20px !important;
}

/* 메타 (날짜·카테고리·읽기시간) */
.single .entry-meta {
	padding:       0 var(--card-padding) 28px !important;
	margin-bottom: 0 !important;
	border-bottom: 1px solid var(--color-border) !important;
	font-size:     13px !important;
	color:         var(--color-text-sub) !important;
}

/* 본문 */
.single .entry-content {
	padding:     32px var(--card-padding) 0 !important;
	font-size:   var(--font-size) !important;
	color:       var(--color-text) !important;
	line-height: var(--line-height) !important;
}

.single .entry-content p          { margin-bottom: 1.6em; }
.single .entry-content h2          { margin-top: 2.4em; margin-bottom: 0.8em; }
.single .entry-content h3          { margin-top: 2em;   margin-bottom: 0.6em; }

.single .entry-content img {
	max-width:     100%;
	border-radius: 10px;
	margin:        2em 0;
}

.single .entry-content blockquote {
	border-left:  3px solid var(--color-accent) !important;
	margin:       2em 0 !important;
	padding:      16px 24px !important;
	background:   var(--color-bg-alt) !important;
	border-radius:0 8px 8px 0 !important;
	color:        var(--color-text-sub) !important;
	font-style:   normal !important;
}

.single .entry-content ul,
.single .entry-content ol {
	padding-left:  1.6em;
	margin-bottom: 1.5em;
}
.single .entry-content li { margin-bottom: 0.5em; }

/* inline code */
.single .entry-content code:not([class]) {
	font-family:   'SF Mono', 'Fira Code', 'Consolas', monospace;
	font-size:     0.875em;
	background:    var(--color-bg-alt);
	color:         #c0392b;
	padding:       2px 6px;
	border-radius: 4px;
	border:        1px solid var(--color-border);
}

/* code block */
.single .entry-content pre {
	background:    var(--color-code-bg) !important;
	color:         #f8f8f2 !important;
	border-radius: 10px !important;
	padding:       24px !important;
	overflow-x:    auto !important;
	font-size:     14px !important;
	line-height:   1.6 !important;
	margin:        2em 0 !important;
}
.single .entry-content pre code {
	background: none !important;
	color:      inherit !important;
	border:     none !important;
	padding:    0 !important;
}

/* 푸터 (태그) */
.single .entry-footer {
	padding:    28px var(--card-padding) 36px !important;
	border-top: 1px solid var(--color-border) !important;
	margin-top: 40px !important;
	font-size:  13px !important;
}

.tag-link {
	display:       inline-block;
	background:    var(--color-bg-alt);
	color:         var(--color-text-sub) !important;
	border-radius: 20px;
	padding:       3px 12px;
	margin:        0 4px 6px 0;
	font-size:     13px;
	transition:    background 0.15s ease;
}
.tag-link:hover {
	background: var(--color-border) !important;
	color:      var(--color-text) !important;
}

/* ============================================================
   Reading Progress Bar
   ============================================================ */
.reading-progress-bar {
	position:   fixed;
	top:        var(--header-h);
	left:       0;
	width:      0%;
	height:     2px;
	background: var(--color-accent);
	z-index:    9999;
	transition: width 0.1s linear;
}

/* ============================================================
   Author Bio
   ============================================================ */
.author-info {
	background:    var(--color-bg-alt) !important;
	border:        none !important;
	border-radius: var(--card-radius) !important;
	padding:       28px !important;
	margin-top:    32px !important;
}

/* ============================================================
   Post Navigation
   ============================================================ */
.post-navigation {
	margin-top:  32px !important;
	padding-top: 0 !important;
	border-top:  none !important;
}
.post-navigation .nav-links {
	display:         flex !important;
	justify-content: space-between !important;
	gap:             16px !important;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex:          1;
	background:    var(--color-bg-card) !important;
	border-radius: var(--card-radius) !important;
	padding:       20px 24px !important;
	box-shadow:    0 1px 4px rgba(0, 0, 0, 0.06) !important;
	transition:    box-shadow 0.2s ease !important;
}
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
}
.post-navigation a          { color: var(--color-text) !important; font-weight: 500 !important; }
.post-navigation .meta-nav  { font-size: 12px; color: var(--color-text-light); display: block; margin-bottom: 4px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--color-bg) !important;
	border-top: 1px solid var(--color-border) !important;
	color:      var(--color-text-sub) !important;
	font-size:  13px !important;
	margin-top: 64px !important;
}
.site-footer a       { color: var(--color-text-sub) !important; }
.site-footer a:hover { color: var(--color-text) !important; }

/* ============================================================
   Enlighter Code Blocks
   ============================================================ */
.EnlighterJSRAW,
.enlighterjs {
	border-radius: 10px !important;
	margin:        2em 0 !important;
	font-size:     14px !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
	:root { --card-padding: 28px; }

	.single .site-main { padding: 0 16px !important; margin-top: 24px !important; }
}

@media (max-width: 768px) {
	.header-bottom .tg-container {
		height:  48px !important;
		padding: 0 16px !important;
	}

	/* 모바일 햄버거 표시 */
	#site-navigation .menu-toggle {
		display:         flex !important;
	}

	#site-navigation ul#primary-menu {
		display:       none;
		position:      absolute;
		top:           48px;
		right:         0;
		left:          0;
		background:    rgba(242, 242, 244, 0.97);
		backdrop-filter: blur(20px);
		border-bottom: 1px solid var(--color-border);
		padding:       8px 16px 16px;
		z-index:       998;
	}

	#site-navigation ul#primary-menu.toggled-on { display: block; }

	#site-navigation ul#primary-menu li {
		float:         none !important;
		border-bottom: 1px solid var(--color-border);
	}
	#site-navigation ul#primary-menu li:last-child { border-bottom: none; }

	#site-navigation ul#primary-menu li a {
		padding:       12px 4px !important;
		border-radius: 0 !important;
		font-size:     15px !important;
	}

	.post-navigation .nav-links { flex-direction: column !important; }
}

@media (max-width: 480px) {
	:root { --card-padding: 20px; }

	.single .entry-title { font-size: 26px !important; }
}