/* -------------------------------------- */
/* 공통 변수 및 스타일                     */
/* -------------------------------------- */
:root {
  --primary-color: #2D5A27;    /* 포레스트 그린 */
  --secondary-color: #88AB66;  /* 세이지 그린 */
  --bg-color: #F9F8F3;         /* 따뜻한 아이보리 */
  --card-bg: #FFFFFF;
  --text-color: #333333;
  --text-muted: #666666;
  --header-bg: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; font-size: 16px; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 5%; width: 100%; }

/* Header */
header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
header .container { display: flex; justify-content: space-between; align-items: center; padding: 18px 5%; }
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary-color); font-size: 1.5rem; }
.logo img { height: 38px; width: auto; object-fit: contain; }

nav ul { display: flex; list-style: none; gap: 30px; }
nav a { font-weight: 500; font-size: 0.95rem; }
nav a:hover, nav a.active { color: var(--primary-color); font-weight: 700; }

.menu-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--primary-color); cursor: pointer; }

/* Page Header (서브 페이지 타이틀 영역) */
.page-header { text-align: center; padding: 80px 0 50px; background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-color) 100%); }
.page-header h1 { font-size: 2.5rem; color: var(--primary-color); font-weight: 700; margin-bottom: 10px; }
.page-header p { color: var(--text-muted); font-size: 1.05rem; }

/* Hero Section (홈 메인) */
.hero { text-align: center; padding: 110px 0 90px; background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-color) 100%); }
.hero h1 { font-family: 'Montserrat', sans-serif; font-size: 3.2rem; color: var(--primary-color); margin-bottom: 12px; }
.hero p.slogan { font-size: 1.25rem; color: var(--secondary-color); font-weight: 700; margin-bottom: 24px; letter-spacing: 2px; text-transform: uppercase; }
.hero p.desc { max-width: 620px; margin: 0 auto 36px; color: var(--text-muted); font-size: 1.05rem; }
.hero .btn { display: inline-block; padding: 14px 36px; background-color: var(--primary-color); color: #fff; border-radius: 30px; font-weight: 700; box-shadow: 0 4px 15px rgba(45, 90, 39, 0.2); }
.hero .btn:hover { background-color: var(--secondary-color); }

/* Common Section */
section { padding: 80px 0; }
.section-title { font-size: 2rem; color: var(--primary-color); margin-bottom: 15px; font-weight: 700; text-align: center; }
.section-subtitle { font-size: 1rem; color: var(--text-muted); margin-bottom: 40px; text-align: center; }

/* 그리드 & 카드 Layout */
.grid { display: grid; gap: 30px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card { background: var(--card-bg); padding: 35px 28px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0,0,0,0.03); }

/* Brand Story Card */
.brand-card h3 { color: var(--primary-color); font-size: 1.3rem; margin-bottom: 12px; }
.brand-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }

/* Product Card */
.product-card { padding: 0; overflow: hidden; }
.product-img { width: 100%; height: 240px; background-color: #EFEFEF; display: flex; align-items: center; justify-content: center; color: #999; }
.product-info { padding: 25px; }
.product-tag { display: inline-block; font-size: 0.75rem; background: #E8F0E6; color: var(--primary-color); padding: 4px 10px; border-radius: 12px; font-weight: 700; margin-bottom: 10px; }
.product-info h3 { font-size: 1.2rem; margin-bottom: 8px; }
.product-info p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; }
.product-price { font-weight: 700; font-size: 1.1rem; color: var(--primary-color); }

/* Footer */
footer { background-color: #222; color: #999; padding: 50px 0; font-size: 0.88rem; text-align: center; margin-top: 60px; }
footer .container { display: flex; flex-direction: column; align-items: center; gap: 12px; }
footer strong { color: #FFF; font-size: 1.05rem; }

.version-switcher { margin-top: 25px; padding-top: 20px; border-top: 1px solid #333; width: 100%; text-align: center; }
.version-switch-btn { background: none; border: 1px solid #555; color: #AAA; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 0.8rem; }

/* Responsive (Mobile) */
@media screen and (max-width: 767px) {
  .menu-toggle { display: block; }
  nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #FFF; box-shadow: 0 5px 15px rgba(0,0,0,0.08); padding: 20px 0; }
  nav.active { display: block; }
  nav ul { flex-direction: column; gap: 15px; text-align: center; }

  .hero h1 { font-size: 2.3rem; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Force PC Mode */
body.force-pc-mode { width: 1200px !important; min-width: 1200px !important; overflow-x: auto !important; }
body.force-pc-mode header .container { padding: 18px 5% !important; }
body.force-pc-mode .menu-toggle { display: none !important; }
body.force-pc-mode nav { display: flex !important; position: static !important; width: auto !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
body.force-pc-mode nav ul { flex-direction: row !important; gap: 30px !important; text-align: left !important; }
body.force-pc-mode .grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
body.force-pc-mode .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }