/*
Theme Name: GeneratePress Child
Template: generatepress
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Noto+Sans+Mono:wght@400;500;600;700;800&display=swap');

/* ----------------------------------------------
  custom properties
---------------------------------------------- */
:root {
  
  /* font size */
  --fs-9px: 0.5625rem;
  --fs-10px: 0.625rem;
  --fs-11px: 0.6875rem;
  --fs-12px: 0.75rem;
  --fs-12-5px: 0.78125rem;
  --fs-13px: 0.8125rem;
  --fs-13-5px: 0.84375rem;
  --fs-14px: 0.875rem;
  --fs-14-5px: 0.90625rem;
  --fs-15px: 0.9375rem;
  --fs-15-5px: 0.96875rem;
  --fs-16px: 1rem;
  --fs-18px: 1.125rem;
  --fs-20px: 1.25rem;
  --fs-22px: 1.375rem;
  --fs-24px: 1.5rem;
  --fs-26px: 1.625rem;
  --fs-28px: 1.75rem;
  --fs-30px: 1.875rem;
  --fs-32px: 2rem;
  --fs-38px: 2.375rem;
  --fs-40px: 2.5rem;
  --fs-42px: 2.625rem;
  --fs-45px: 2.8125rem;
  --fs-48px: 3rem;
  
  /* font-families */
  --ff-sans: 'Inter',-apple-system,BlinkMacSystemFont,system-ui,Roboto,'Helvetica Neue','Segoe UI','Apple SD Gothic Neo','Noto Sans','Malgun Gothic','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;
  --ff-mono: 'Noto Sans Mono',-apple-system,BlinkMacSystemFont,system-ui,Roboto,'Helvetica Neue','Segoe UI','Apple SD Gothic Neo','Noto Sans','Malgun Gothic','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;
  
  /* color */
  --color-gray-100: hsl(0,0%,15%);
  --color-gray-200: hsl(0,0%,20%);
  --color-gray-250: hsl(0,0%,28%);
  --color-gray-300: hsl(0,0%,36%);
  --color-gray-400: hsl(0,0%,42%);
  --color-gray-450: hsl(0,0%,48%);
  --color-gray-500: hsl(0,0%,54%);
  --color-gray-600: hsl(0,0%,60%);
  --color-gray-700: hsl(0,0%,66%);
  --color-gray-750: hsl(0,0%,72%);
  --color-gray-800: hsl(0,0%,78%);
  --color-gray-900: hsl(0,0%,84%);  
  --color-gray-910: hsl(0,0%,90%);
  --color-gray-920: hsl(0,0%,94%);
  --color-gray-930: hsl(0,0%,95%);
  --color-gray-940: hsl(0,0%,96%);
  --color-gray-950: hsl(0,0%,97%);
  --color-gray-960: hsl(0,0%,97.5%);
  --color-gray-970: hsl(0,0%,96.5%);
  --color-gray-980: hsl(0,0%,97.6%);  
  --color-disable: hsl(0,0%,72%);
  --color-error: hsl(0,68%,55%);
  
  --color-base-1:#F4F6FB;
  --color-base-2:#E8ECF4;
  --color-base-3:#C8D0DE;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-navy: #0A1428;
  --color-blue: #3B82F6;
  --color-sky: #60A5FA;
  --color-yellow: #FBBF24;
  --color-green: #10B981;
  --color-red: #EF4444;
  
  /* 입력폼 스타일(input, textarea) */
  --input-txt-color:var(--color-gray-100);
  --input-line-normal:var(--color-gray-800);
  --input-line-focus:var(--color-navy);
  --input-line-disable:var(--color-gray-600);
  --input-bg-color:var(--color-white);
  --input-bg-color-disable:var(--color-gray-920);
  --input-placeholder:var(--color-gray-700);
  
  /* Mobile Height */
  --height-m-element: 44px;
  
  /* ease */
  --ease-base: cubic-bezier(.215, .61, .355, 1);
  
}



/* ----------------------------------------------
  Reset Settings
---------------------------------------------- */
html { 
    box-sizing: border-box; 
    overflow-y: scroll; 
    scrollbar-gutter: stable; 
}
*, *::before, *::after { box-sizing: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; color: inherit; }
img, picture { display: block; max-width: 100%; height: auto; }
svg { vertical-align: middle; fill: currentColor; }
button, input, select, textarea { margin:0; font:inherit; }
button { padding:0; background:none; border:none; cursor:pointer; }
@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}




/* ----------------------------------------------
  Button Base
---------------------------------------------- */
.btn { display:inline-flex; position:relative; justify-content:center; align-items:center; border:1px solid transparent; border-radius:4px; font-family:var(--ff-sans); font-weight:600; white-space:nowrap; transition:all 0.2s ease; cursor:pointer; }

/* Button Sizes */
.btn--xs { height:28px; font-size:var(--fs-12px); /* padding:0 10px; */ }
.btn--sm { height:36px; font-size:var(--fs-13px); /* padding:0 15px; */ }
.btn--rg { height:42px; font-size:var(--fs-13px); /* padding:0 18px; */ }
.btn--md { height:48px; font-size:var(--fs-14px); /* padding:0 20px; */ }
.btn--lg { height:52px; font-size:var(--fs-16px); /* padding:0 25px; */ }

/* Button Variants (Fill) */
.btn--primary { background: var(--color-blue); color: var(--color-white); }
.btn--secondary { background: var(--color-yellow); color: var(--color-navy); }
.btn--navy { background: var(--color-navy); color: var(--color-white); }
.btn--sky { background: var(--color-sky); color: var(--color-white); }
.btn--red { background: var(--color-red); color: var(--color-white); }
.btn--green { background: var(--color-green); color: var(--color-white); }

/* Outline Variants */
.btn--outline-primary { border-color: var(--color-blue); color: var(--color-blue); background: transparent; }
.btn--outline-primary:hover { background: var(--color-blue); color: var(--color-white); }

/* Layout Groups */
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-group--center { justify-content: center; }
.btn-group--right { justify-content: flex-end; }
.w-full { width: 100%; }


/* 워드프레스 기본 버튼 블록에 내 스타일 입히기 */
.wp-block-button__link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-weight: 600;
    transition:all 0.2s ease;
    text-decoration: none;
}

/* 위에서 만든 스타일 이름과 연결 */
.is-style-primary .wp-block-button__link {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
}
.is-style-secondary .wp-block-button__link {
    background-color: var(--color-yellow) !important;
    color: var(--color-navy) !important;
}
.is-style-outline-primary .wp-block-button__link {
    border: 1px solid var(--color-blue) !important;
    color: var(--color-blue) !important;
    background-color: transparent !important;
}
.is-style-navy .wp-block-button__link {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
    border: 1px solid transparent !important;
}
.is-style-outline-navy .wp-block-button__link {
    background-color: transparent !important;
    color: var(--color-navy) !important;
    border: 1px solid var(--color-navy) !important;
}
/* hover */
.is-style-outline-navy .wp-block-button__link:hover {
    background-color: var(--color-navy) !important;
    color: var(--color-white) !important;
}

/* 크기 유틸리티: 편집기 [고급] 탭의 [추가 CSS 클래스]에 직접 입력해서 사용 */
.wp-block-button__link.btn--xs, .btn--xs { height:28px; font-size:var(--fs-12px); /* padding:0 10px; */  }
.wp-block-button__link.btn--sm, .btn--sm { height:36px; font-size:var(--fs-13px); /* padding:0 15px; */ }
.wp-block-button__link.btn--rg, .btn--rg { height:42px; font-size:var(--fs-13px); /* padding:0 18px; */ }
.wp-block-button__link.btn--md, .btn--md { height:48px; font-size:var(--fs-14px); /* padding:0 20px; */ }
.wp-block-button__link.btn--lg, .btn--lg { height:52px; font-size:var(--fs-16px); /* padding:0 25px; */ }



/* ----------------------------------------------
   Input & Form Elements (Design System)
---------------------------------------------- */

/* 1. 기본 텍스트 입력창 통합 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    display: block;
    width: 100%;
    height: 48px; /* btn--md 높이와 통일 */
    padding: 0 15px;
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-line-normal);
    border-radius: 4px;
    color: var(--input-txt-color);
    font-family: var(--ff-sans);
    font-size: var(--fs-14px);
    vertical-align: middle;
    transition: all 0.25s var(--ease-base);
    -webkit-appearance: none;
    box-sizing: border-box;
}

/* 2. Textarea 전용 (높이 가변) */
textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 15px;
    line-height: 1.6;
    resize: vertical;
}

/* 3. Placeholder 스타일 */
input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1; /* 파이어폭스 투명도 방지 */
}

/* 4. Focus 상태 (버튼의 Navy 컬러 포인트 활용) */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-line-focus) !important; /* Navy */
    outline: 0 !important;
    background-color: var(--color-white);
    /* 미세한 그림자로 포커스 강조 */
    box-shadow: 0 0 0 3px rgba(10, 20, 40, 0.05); 
}

/* 5. Disabled / Readonly (차분한 그레이톤) */
input:disabled,
input:read-only,
textarea:disabled,
textarea:read-only {
    background-color: var(--input-bg-color-disable) !important;
    border-color: var(--color-gray-910) !important;
    color: var(--color-gray-500);
    cursor: not-allowed;
}

/* ----------------------------------------------
   Mobile Optimization
---------------------------------------------- */
@media (max-width: 767px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    textarea,
    select {
        height: var(--height-m-element); /* 44px */
        font-size: var(--fs-16px) !important; /* iOS 확대 방지 */
    }
}

/* 워드프레스 특화 블록 보정 */
/* 워드프레스 검색 블록 내부 인풋 보정 */
.wp-block-search__input {
    border: 1px solid var(--input-line-normal) !important;
    border-radius: 4px !important;
    padding: 0 15px !important;
}

/* 검색 버튼이 인풋 옆에 붙어 있을 때의 간격 */
.wp-block-search__inside-wrapper {
    gap: 8px;
}


/* ----------------------------------------------
  Layout
---------------------------------------------- */
/* container 정의 */
.container { position:relative; padding:0; margin:0 auto; max-width:1280px; width:min(96%, 1280px); }
@media (max-width:1023px) {
    .container { width:100%; padding:0 24px; }
}
@media (max-width:767px) {
    .container { padding:0 16px; }
}

/* footer 하단 고정 */
body { display:flex; flex-direction:column; margin:0; min-height:100vh; }
#primary { display:flex; flex:1; flex-direction:column; }
#main { flex:1; }
.site-footer { flex-shrink:0; }

.separate-containers .site-main { margin:0; }



body { background-color:var(--color-base-1); color:var(--contrast); font-family:var(--ff-sans); font-weight:400; }


/* header */
.site-header { display:flex; align-items:center; height:80px; background:var(--color-navy); }
.site-header .container { display:flex; justify-content:space-between; align-items:center; }

/* 로고 이미지 크기 조절 */
.logo img { display:block; width:150px; height:auto; }
/* 커스텀 로고 클래스 대응 */
.custom-logo-link { display:inline-block; }



.nav {}
.menu { display:flex; }
.menu-item > a { color:var(--color-base-3); font-size:var(--fs-14px); font-weight:500; }
.menu > .menu-item:not(:last-child) { margin-right:20px; }





/* 메인 배너 스타일 */
.main-banner {
    width: 100%;
    overflow: hidden;
}

.main-slider .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}





.product-detail {
  padding: 60px 20px;
}

.product-title {
  font-size: 32px;
  margin-bottom: 10px;
}

.model-code {
  color: #888;
  margin-bottom: 20px;
}

.product-image img {
  max-width: 400px;
  margin-bottom: 30px;
}

.product-specs p {
  margin-bottom: 8px;
}

.product-downloads a {
  display: inline-block;
  margin-right: 15px;
  color: #3B82F6;
}




/* footer */
.site-footer { }
.site-info { background:var(--color-navy); color:var(--color-base-3); }