/*
Theme Name: InfoGrid365 Blue
Theme URI: https://infogrid365hub.com/
Author: InfoGrid365
Author URI: https://infogrid365hub.com/
Description: 인포그리드365 전용 블록 테마 - 파란색 계열, Pretendard 폰트, 최신순/인기순 정렬, 다국어 번역 위젯을 지원합니다.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: infogrid365
Tags: blog, one-column, two-columns, right-sidebar, custom-colors, custom-menu, full-site-editing, block-patterns
*/

/* ============================================
   Layout: desktop 2-column / mobile 1-column
   ============================================ */
.ig-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 18px;
}

/* ============================================
   Post card: thumbnail on the left (desktop),
   sized to match the title+excerpt block height
   ============================================ */
.ig-post-card {
	display: flex;
	align-items: stretch;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--preset--color--tint);
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}
.ig-post-card:hover {
	opacity: 0.85;
}
.ig-post-card:hover .ig-post-title {
	text-decoration: underline;
}
.ig-post-thumb {
	order: -1;
	flex-shrink: 0;
	width: 200px;
	height: 100%;
	min-height: 140px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}
.ig-post-thumb--empty {
	background: var(--wp--preset--color--soft);
}

/* Desktop: the shared drawer/sidebar block only renders in its normal
   position on the home grid; on single/page templates it exists purely
   for the mobile drawer and stays hidden until the mobile media query
   turns it into the slide-out panel. */
.ig-sidebar {
	display: none;
}
.ig-layout .ig-sidebar {
	display: block;
}

/* ============================================
   Text size adjuster — ties the reading-content
   font sizes to a single CSS variable, controlled
   by the floating +/- buttons. Falls back to the
   normal size when the variable is unset.
   ============================================ */
.ig-post-title {
	font-size: calc(22px + var(--ig-fz-delta, 0px)) !important;
}
.ig-post-excerpt {
	font-size: calc(17px + var(--ig-fz-delta, 0px)) !important;
}
.wp-block-post-title {
	font-size: calc(34px + var(--ig-fz-delta, 0px)) !important;
}
.wp-block-post-content > *:not(figure):not(.wp-block-image):not(.wp-block-gallery) {
	zoom: var(--ig-fz-zoom, 1);
}

/* ============================================
   Floating action buttons — bottom right, all pages
   ============================================ */
.ig-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 500;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.ig-fab-group {
	background: #fff;
	border: 1px solid var(--wp--preset--color--tint);
	border-radius: 24px;
	box-shadow: 0 4px 16px rgba(4, 44, 83, 0.15);
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ig-fab-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
	padding: 0;
}
.ig-fab-btn:hover {
	background: var(--wp--preset--color--tint);
}
.ig-fab-top {
	display: none;
}
body.ig-scrolled .ig-fab-top {
	display: flex;
}
.ig-fab-share-btn {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: none;
	background: var(--wp--preset--color--primary);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 19px;
	box-shadow: 0 4px 16px rgba(4, 44, 83, 0.2);
}
body.single-post .ig-fab-share-btn {
	display: flex;
}

/* ============================================
   Comments — password-based edit/delete, no avatar
   ============================================ */
.ig-comments-wrap {
	margin-top: 8px;
	margin-bottom: 32px;
}
.ig-comments-count {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.ig-comments-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.ig-comment {
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--tint);
}
.ig-comment-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}
.ig-comment-author {
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.ig-comment-ip {
	font-size: 11px;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
.ig-comment-date {
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}
.ig-comment-content {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	margin-bottom: 8px;
}
.ig-comment-content p {
	margin: 0;
}
.ig-comment-actions {
	display: flex;
	gap: 12px;
}
.ig-comment-edit-btn,
.ig-comment-delete-btn,
.ig-comment-save-btn,
.ig-comment-cancel-btn {
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	cursor: pointer;
}
.ig-comment-edit-btn {
	color: var(--wp--preset--color--primary);
}
.ig-comment-delete-btn {
	color: var(--wp--preset--color--muted);
}
.ig-comment-edit-box {
	margin-top: 10px;
}
.ig-comment-edit-textarea {
	width: 100%;
	min-height: 80px;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--tint);
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	resize: vertical;
}
.ig-comment-edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
}
.ig-comment-save-btn {
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	padding: 7px 16px !important;
	border-radius: 8px !important;
}
.ig-comment-cancel-btn {
	border: 1px solid var(--wp--preset--color--tint) !important;
	padding: 7px 16px !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--muted);
}

.ig-comments-form-title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.ig-comments-closed {
	margin: 0;
	padding: 14px;
	background: var(--wp--preset--color--tint);
	border-radius: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	text-align: center;
}
.ig-comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.ig-comment-form .comment-form-author,
.ig-comment-form .comment-form-ig-password {
	margin: 0;
}
.ig-comment-form .comment-form-comment,
.ig-comment-form .form-submit {
	grid-column: 1 / -1;
	margin: 0;
}
.ig-comment-input {
	width: 100%;
	height: 40px;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--tint);
	padding: 0 12px;
	font-size: 14px;
	box-sizing: border-box;
	font-family: inherit;
}
.ig-comment-textarea {
	width: 100%;
	min-height: 90px;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--tint);
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	resize: vertical;
}
.ig-comment-submit {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	float: right;
	margin-top: 8px;
	clear: both;
}
.ig-comment-form .comment-form-cookies-consent {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}
.ig-comment-form .comment-form-cookies-consent input {
	margin-top: 3px;
	flex-shrink: 0;
}


/* Hamburger button: hidden on desktop */
.ig-menu-btn {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: var(--wp--preset--color--primary);
	line-height: 0;
}

/* Drawer-only elements: hidden on desktop */
.ig-drawer-head,
.ig-drawer-nav {
	display: none;
}

/* Overlay */
.ig-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(4, 44, 83, 0.45);
	z-index: 998;
}

@media (max-width: 782px) {
	/* Single column: sidebar leaves the flow */
	.ig-layout {
		display: block;
	}

	/* Comment form: single column on mobile (PC keeps name/password side by side);
	   clear the bottom floating buttons */
	.ig-comment-form {
		grid-template-columns: 1fr;
	}
	.ig-comments-wrap {
		margin-bottom: 190px;
	}

	/* Horizontal breathing room on mobile — proportional, not fixed px */
	header .alignfull,
	footer .alignfull,
	main.alignfull,
	main.alignwide {
		padding-left: 6% !important;
		padding-right: 6% !important;
	}

	/* Tables inside post content — smaller text on mobile so rows don't stretch tall */
	.wp-block-post-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
	.wp-block-post-content table th,
	.wp-block-post-content table td {
		font-size: 14px !important;
		padding: 6px 8px !important;
		line-height: 1.5 !important;
	}

	/* Post detail title — shrink on mobile so it fits in ~1-2 lines */
	.wp-block-post-title {
		font-size: calc(26px + var(--ig-fz-delta, 0px)) !important;
		line-height: 1.35 !important;
	}

	/* Table of contents heading inside post content — 3px smaller on mobile only.
	   Covers Rank Math's TOC block and common TOC plugin class names;
	   calc(1em - 3px) shrinks relative to whatever size it renders at. */
	.rank-math-toc-heading,
	.wp-block-rank-math-toc-block .toc-heading,
	.ez-toc-title,
	.lwptoc_title,
	h2.toc-title,
	h3.toc-title {
		font-size: calc(1em - 3px) !important;
	}

	/* Post card: thumbnail on top, full width, larger */
	.ig-post-card {
		flex-direction: column;
	}
	.ig-post-thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		min-height: 0;
	}

	/* Title/excerpt 2px smaller on mobile; single post body 2px smaller.
	   calc() ties these to the font-size adjuster (--ig-fz-delta) too. */
	.ig-post-title {
		font-size: calc(20px + var(--ig-fz-delta, 0px)) !important;
	}
	.ig-post-excerpt {
		font-size: calc(15px + var(--ig-fz-delta, 0px)) !important;
	}
	.wp-block-post-content > *:not(figure):not(.wp-block-image):not(.wp-block-gallery) {
		zoom: var(--ig-fz-zoom, 1);
	}

	/* Hide desktop navigation, show hamburger */
	header .wp-block-navigation {
		display: none !important;
	}
	.ig-menu-btn {
		display: inline-flex;
		flex-shrink: 0;
	}

	/* Keep logo + title + hamburger on one row, never wrap */
	header .alignwide {
		flex-wrap: nowrap !important;
		align-items: center !important;
	}
	header .wp-block-site-logo {
		flex-shrink: 0;
	}
	header .alignwide > .wp-block-group:first-child {
		min-width: 0;
		flex-shrink: 1;
	}
	header .wp-block-site-logo img,
	header .wp-block-site-logo.custom-logo,
	header img.custom-logo {
		width: 52px !important;
		height: 52px !important;
	}
	header .wp-block-site-tagline {
		display: none !important;
	}
	header .wp-block-site-title {
		font-size: 18px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 46vw;
	}
	header .wp-block-site-title a {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}

	/* Sidebar becomes a right drawer */
	.ig-sidebar {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 280px;
		max-width: 85vw;
		background: #ffffff;
		z-index: 999;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		padding: 16px;
		box-shadow: -4px 0 20px rgba(4, 44, 83, 0.15);
	}
	body.ig-drawer-open .ig-sidebar {
		transform: translateX(0);
	}
	body.ig-drawer-open .ig-overlay {
		display: block;
	}
	body.ig-drawer-open {
		overflow: hidden;
	}

	/* Drawer header (title + close) and nav links */
	.ig-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12px;
	}
	.ig-drawer-close {
		background: none;
		border: none;
		cursor: pointer;
		font-size: 20px;
		color: var(--wp--preset--color--muted);
		padding: 2px 6px;
		line-height: 1;
	}
	.ig-drawer-nav {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--wp--preset--color--tint);
		margin-bottom: 14px;
		font-size: 18px;
	}
	.ig-drawer-nav a {
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}
	.ig-drawer-nav a:first-child {
		color: var(--wp--preset--color--primary);
		font-weight: 500;
	}
}