/*!
Theme Name: pp
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
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: pp
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.

pp 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 fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.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;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Navigation styles */
@font-face {
  font-family: 'font';
  src: url('./fonts/lector.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
	font-family: 'font', sans-serif;
	height: 100vh;
	font-size: 15px;
	line-height: 20px;
    
    /* 사파리에서 텍스트 선택 및 커서 방지 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
  
/* 전체 페이지 텍스트 선택 방지 */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* header */
.site-header {
  padding: 30px;
}

#primary-menu{
	display: flex;
}

/* 기본 메뉴 아이템 색상 */
#primary-menu li a {
    color: #000;
    text-decoration: none;
}

#menu-item-17::after, #menu-item-18::after {
    content: ',\00a0';
    color: #000;
}



/* selected projects */
#page {
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    overflow: hidden;
}

.selected-projects {
    height: calc(var(--vh, 1vh) * 100 - 120px);
    height: calc(100dvh - 120px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.project-container {
    width: 100%;
    height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}

#project-image,
#project-video {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;

	/* 성능 최적화 */
    will-change: transform;
    transform: translateZ(0); /* GPU 가속 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* 이미지 렌더링 최적화 - 이미지 깨짐 방지 */
    image-rendering: auto;
    -webkit-image-rendering: auto;
    -moz-image-rendering: auto;
    
    /* 메모리 사용량 최적화 */
    contain: layout style paint;
    
    /* 로딩 최적화 */
    loading: eager;
    decoding: async;
    
    /* 추가 성능 최적화 */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    /* 이미지 스무딩 활성화로 품질 유지 */
    -webkit-image-smoothing: antialiased;
    -moz-image-smoothing: antialiased;
    -o-image-smoothing: antialiased;
    image-smoothing: antialiased;
    
    /* 하드웨어 가속 강제 */
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
}

/* 비디오 전용 스타일 */
#project-video {
    /* 비디오 컨트롤 숨기기 (선택사항) */
    /* controls 스타일링 */
}

#project-video::-webkit-media-controls {
    display: none !important;
}

#project-video::-webkit-media-controls-panel {
    display: none !important;
}

#project-video::-webkit-media-controls-play-button {
    display: none !important;
}

#project-video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

/* 데스크톱 커스텀 커서 */
.custom-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 15px;
    display: none;
    white-space: nowrap; /* 줄바꿈 방지 */

    color: #000;
	/* 성능 최적화 */
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* 모바일 프로젝트명 */
#mobile-project-name {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    font-size: 15px;
    color: #000;
    z-index: 9999;
    text-align: center;
    
    /* 텍스트 자동 줄바꿈 허용 */
    word-wrap: break-word;
    word-break: break-word;

	/* 성능 최적화 */
    will-change: contents;
    transform: translateZ(0);
}

/* Information page */
.information-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--vh, 1vh) * 100 - 120px);
    height: calc(100dvh - 120px);
    margin-top: 0;
    padding-top: 0;
    text-align: center;
}

.information-page .container {
    max-width: 620px;
    padding: 20px;
}

/* Dynamic theme for background and header based on image brightness */
body.theme-dark {
  background-color: #000;
  color: #fff;
}
body.theme-light {
  background-color: #fff;
  color: #000;
}

body.theme-dark .selected-projects,
body.theme-light .selected-projects {
  background-color: inherit;
}

/* Header and menu colors */
body.theme-dark .site-header,
body.theme-dark .site-header a,
body.theme-dark #primary-menu li a {
  color: #fff;
}
body.theme-light .site-header,
body.theme-light .site-header a,
body.theme-light #primary-menu li a {
  color: #000;
}

/* Commas after specific menu items */
body.theme-dark #menu-item-17::after,
body.theme-dark #menu-item-18::after {
  color: #fff;
}
body.theme-light #menu-item-17::after,
body.theme-light #menu-item-18::after {
  color: #000;
}