/*
Theme Name: Imone Lab
Theme URI: https://imone-lab.com
Author: Imone Lab
Author URI: https://imone-lab.com
Description: Official site theme for Imone Lab, OEM/ODM manufacturer of fragrance products.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imone-lab
Tags: custom, oemODM, fragrance, clean, minimal
*/

:root {
  --c-black: #0a0a0a; --c-dark: #1a1a1a; --c-mid: #555555;
  --c-sub: #999999; --c-border: #e8e8e8; --c-bg: #fafafa; --c-white: #ffffff;
  --font: 'Outfit','Noto Sans KR',sans-serif;
  --max-w: 1160px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: 15px; line-height: 1.75; color: var(--c-dark); background: var(--c-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
#site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); transition: box-shadow .3s; }
#site-header.scrolled { box-shadow: 0 1px 20px rgba(0,0,0,0.06); }
.header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; line-height: 1; }
.logo-kr { font-size: 1.15rem; font-weight: 700; letter-spacing: -.04em; color: #111111; font-family: 'Noto Sans KR', sans-serif; }
.logo-en { display: none; }
.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav ul { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.main-nav ul li { margin: 0; padding: 0; }
.main-nav a,.main-nav ul li a { font-size: 0.86rem; font-weight: 500; color: var(--c-mid); transition: color .2s; text-decoration: none; display: block; }
.main-nav a:hover,.main-nav ul li a:hover { color: var(--c-black); }
.nav-cta a { font-size: 0.82rem; font-weight: 600; background: var(--c-black); color: var(--c-white); padding: 9px 20px; border-radius: 6px; transition: opacity .2s; }
.nav-cta a:hover { opacity: .78; color: var(--c-white); }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; flex-direction: column; gap: 5px; }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--c-dark); transition: all .3s; }
#hero { min-height: 92vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 100px 24px 80px; background: var(--c-white); position: relative; overflow: hidden; }
.hero-inner { position: relative; z-index: 1; max-width: 760px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-sub); margin-bottom: 28px; }
.hero-title { font-size: clamp(2.6rem,6.5vw,4.6rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.1; color: var(--c-black); margin-bottom: 24px; }
.hero-desc { font-size: clamp(0.95rem,2vw,1.08rem); color: var(--c-mid); line-height: 1.85; margin-bottom: 40px; font-weight: 300; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary { display: inline-block; background: var(--c-black); color: var(--c-white); padding: 14px 32px; border-radius: 6px; font-size: 0.88rem; font-weight: 600; transition: opacity .2s; }
.btn-primary:hover { opacity: .75; color: var(--c-white); }
.btn-ghost { display: inline-block; background: transparent; color: var(--c-dark); padding: 14px 32px; border-radius: 6px; font-size: 0.88rem; font-weight: 500; border: 1px solid var(--c-border); transition: border-color .2s,color .2s; }
.btn-ghost:hover { border-color: var(--c-dark); color: var(--c-black); }
#stats { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: var(--c-white); padding: 0 24px; }
.stats-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { padding: 36px 24px; text-align: center; border-right: 1px solid var(--c-border); }
.stat-item:last-child { border-right: none; }
.stat-num { font-size: 2.2rem; font-weight: 600; letter-spacing: -.05em; color: var(--c-black); line-height: 1; margin-bottom: 8px; display: block; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.78rem; color: var(--c-sub); font-weight: 400; }
.section { padding: 100px 24px; }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-sub); margin-bottom: 14px; display: block; }
.section-title { font-size: clamp(1.7rem,3.5vw,2.6rem); font-weight: 600; letter-spacing: -.05em; color: var(--c-black); line-height: 1.15; margin-bottom: 18px; }
.section-desc { font-size: 0.95rem; color: var(--c-mid); font-weight: 300; line-height: 1.8; max-width: 480px; }
.section-head { margin-bottom: 60px; }
.section-head.center { text-align: center; }
.section-head.center .section-desc { margin: 0 auto; }
#products { background: var(--c-bg); }
.products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; }
.product-card { background: var(--c-white); padding: 40px 32px; transition: background .2s; }
.product-card:hover { background: var(--c-bg); }
.product-icon { font-size: 2rem; margin-bottom: 20px; display: block; line-height: 1; }
.product-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: var(--c-black); margin-bottom: 10px; }
.product-desc { font-size: 0.83rem; color: var(--c-mid); line-height: 1.75; font-weight: 300; }
#strengths { background: var(--c-white); }
.strengths-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px 60px; }
.strength-num { font-size: 0.7rem; font-weight: 600; color: var(--c-sub); letter-spacing: .1em; margin-bottom: 14px; display: block; }
.strength-title { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--c-black); margin-bottom: 8px; }
.strength-desc { font-size: 0.83rem; color: var(--c-mid); line-height: 1.75; font-weight: 300; }
#process { background: var(--c-bg); }
.process-list { display: grid; grid-template-columns: repeat(5,1fr); position: relative; }
.process-step { text-align: center; padding: 0 12px; position: relative; z-index: 1; }
.step-dot { width: 52px; height: 52px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-border); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--c-black); margin: 0 auto 18px; }
.step-title { font-size: 0.88rem; font-weight: 700; color: var(--c-black); margin-bottom: 6px; }
.step-desc { font-size: 0.76rem; color: var(--c-sub); line-height: 1.7; font-weight: 300; }
#contact { background: #f7f7f5; }
#contact .section-label { color: var(--c-sub); }
#contact .section-title { color: var(--c-black); }
#contact .section-desc { color: var(--c-mid); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-info-list { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.ci-label { font-size: 0.68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--c-sub); margin-bottom: 4px; display: block; }
.ci-val { font-size: 0.95rem; color: var(--c-dark); font-weight: 400; }
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.contact-form input,.contact-form textarea,.contact-form select { width: 100%; background: #ffffff; border: 1px solid var(--c-border); border-radius: 6px; padding: 13px 16px; color: var(--c-dark); font-size: 0.88rem; transition: border-color .2s; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color: #bbbbbb; }
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { outline: none; border-color: #aaaaaa; }
.contact-form select option { color: var(--c-dark); background: var(--c-white); }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-submit { background: var(--c-black); color: var(--c-white); border: none; border-radius: 6px; padding: 14px 28px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: opacity .2s; align-self: flex-start; }
.btn-submit:hover { opacity: .75; }
#site-footer { background: #1a1a1a; border-top: 1px solid #2e2e2e; padding: 52px 24px 36px; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid #3a3a3a; margin-bottom: 28px; }
.footer-brand .logo-kr { color: #ffffff; display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.03em; margin-bottom: 12px; }
.footer-brand .logo-en { display: none; }
.footer-brand p { font-size: 0.78rem; color: rgba(255,255,255,.5); line-height: 2; font-weight: 300; }
.footer-col h4 { font-size: 0.68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a,.footer-col ul li span { font-size: 0.8rem; color: rgba(255,255,255,.65); font-weight: 300; line-height: 1.7; }
.footer-col ul li a:hover { color: #ffffff; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 0.72rem; color: rgba(255,255,255,.35); flex-wrap: wrap; gap: 8px; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@media(max-width:900px){.stats-inner{grid-template-columns:repeat(2,1fr)}.products-grid{grid-template-columns:repeat(2,1fr)}.strengths-grid{grid-template-columns:repeat(2,1fr);gap:32px}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.contact-grid{grid-template-columns:1fr;gap:48px}.process-list{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:640px){.main-nav,.nav-cta{display:none}.menu-toggle{display:flex}.main-nav.is-open{display:flex;flex-direction:column;gap:0;position:fixed;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid #e8e8e8;padding:8px 0;box-shadow:0 8px 24px rgba(0,0,0,0.06)}.main-nav.is-open ul{display:flex;flex-direction:column;gap:0;width:100%}.main-nav.is-open ul li{width:100%}.main-nav.is-open a,.main-nav.is-open ul li a{display:block;padding:14px 24px;font-size:0.95rem}.strengths-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr!important;gap:28px}.footer-brand{grid-column:auto!important}.contact-form .form-row{grid-template-columns:1fr}}