:root { --color-white:#ffffff; 
    --color-black:#111111; 
    --color-text:#222222; 
    --color-muted:#666666; 
    --color-border:rgba(17,17,17,0.08);
    --color-bg:#ffffff; --color-button:#111111;
    --color-button-text:#ffffff; 
    --color-timeline-card:rgba(255,255,255,0.88); 
    --header-height-pc:96px; 
    --header-height-mobile:72px;
    --logo-width-pc:168px; 
    --logo-width-mobile:120px;
    --logo-height-pc:auto; 
    --logo-height-mobile:auto; 
    --container-pc:48px; 
    --container-mobile:20px;
    --hero-text-max-width:560px; 
    --transition-fast:0.25s ease; 
    --transition-medium:0.35s ease; 
    --font-family:"Noto Sans KR"; }

/* ===============================
   기본 리셋
=============================== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-family); color:var(--color-text); background:var(--color-bg); line-height:1.5; word-break:keep-all; }
img { display:block; max-width:100%; }
ul, ol { list-style:none; }
a { color:inherit; text-decoration:none; }
button { border:0; background:none; cursor:pointer; font:inherit; }
.container { width:100%; padding-left:var(--container-pc); padding-right:var(--container-pc); margin:0 auto; }

/* ===============================
   헤더 공통
=============================== */
.site-header { position:fixed; top:0; left:0; width:100%; height:var(--header-height-pc); z-index:1000; background:transparent; color:var(--color-white); transition:background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); }
.site-header.is-scrolled { background:rgba(255,255,255,0.96); color:var(--color-black); box-shadow:0 8px 24px rgba(0,0,0,0.06); backdrop-filter:blur(10px); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; }
.header-left, .header-right { display:flex; align-items:center; gap:24px; min-width:0; }
.logo-link { display:inline-flex; align-items:center; width:var(--logo-width-pc); flex:0 0 auto; }
.logo-link img { width:100%; height:var(--logo-height-pc); object-fit:contain; }

/* 로고 전환 */
.logo-black { display:none; }
.site-header.is-scrolled .logo-white { display:none; }
.site-header.is-scrolled .logo-black { display:block; }

/* PC 메뉴 */
.gnb { height:100%; }
.gnb-depth1 { display:flex; align-items:center; height:100%; gap:8px; }
.gnb-item { height:100%; }
.gnb-trigger { height:100%; display:inline-flex; align-items:center; padding:0 18px; font-size:17px; font-weight:600; transition:opacity var(--transition-fast); }
.gnb-util { display:flex; align-items:center; gap:16px; font-size:14px; font-weight:500; }
.gnb-util a.small-link { font-size:13px; opacity:0.88; }
.gnb-trigger:hover, .gnb-util a:hover { opacity:0.72; }

/* ===============================
   PC 메가메뉴
=============================== */
.mega-menu-wrap { position:absolute; left:0; top:100%; width:100%; background:rgba(255,255,255,0.98); color:var(--color-black); border-top:1px solid rgba(17,17,17,0.05); border-bottom:1px solid rgba(17,17,17,0.05); box-shadow:0 20px 40px rgba(0,0,0,0.08); overflow:hidden; max-height:0; opacity:0; visibility:hidden; transition:max-height var(--transition-medium), opacity var(--transition-fast), visibility var(--transition-fast); }
.site-header.menu-open .mega-menu-wrap { max-height:360px; opacity:1; visibility:visible; }
.mega-menu-inner { padding:28px 0 34px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.mega-column { padding-right:16px; border-right:1px solid rgba(17,17,17,0.06); display:none; }
.mega-column:last-child { border-right:0; }
.mega-column.is-active { display:block; }
.mega-title { font-size:15px; font-weight:700; margin-bottom:16px; }
.mega-links { display:flex; flex-direction:column; gap:12px; }
.mega-links a { font-size:15px; color:#333333; transition:opacity var(--transition-fast); }
.mega-links a:hover { opacity:0.65; }

/* ===============================
   모바일 햄버거 / 사이드바
   - 햄버거도 헤더 글자색과 동일하게 currentColor 사용
   - 즉, 흰색 -> 검정 자동 전환
=============================== */
.mobile-menu-button { display:none; width:42px; height:42px; position:relative; flex:0 0 auto; color:inherit; }
.mobile-menu-button span { position:absolute; left:9px; width:24px; height:2px; background:currentColor; transition:transform var(--transition-fast), opacity var(--transition-fast), top var(--transition-fast), background-color var(--transition-fast); }
.mobile-menu-button span:nth-child(1) { top:13px; }
.mobile-menu-button span:nth-child(2) { top:20px; }
.mobile-menu-button span:nth-child(3) { top:27px; }
.mobile-menu-button.is-open span:nth-child(1) { top:20px; transform:rotate(45deg); }
.mobile-menu-button.is-open span:nth-child(2) { opacity:0; }
.mobile-menu-button.is-open span:nth-child(3) { top:20px; transform:rotate(-45deg); }

.mobile-drawer { position:fixed; top:0; right:-100%; width:min(88vw,380px); height:100vh; background:#ffffff; color:#111111; z-index:1100; transition:right var(--transition-medium); box-shadow:-12px 0 30px rgba(0,0,0,0.12); overflow-y:auto; padding:24px 20px 40px; }
.mobile-drawer.is-open { right:0; }
.mobile-drawer-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.mobile-close { font-size:28px; line-height:1; }
.mobile-nav-section { border-top:1px solid rgba(17,17,17,0.08); }
.mobile-nav-trigger { width:100%; text-align:left; padding:18px 0; display:flex; align-items:center; justify-content:space-between; font-size:17px; font-weight:700; }
.mobile-submenu { max-height:0; overflow:hidden; transition:max-height var(--transition-medium); }
.mobile-nav-section.is-open .mobile-submenu { max-height:220px; }
.mobile-submenu a { display:block; padding:0 0 14px; color:#444444; font-size:15px; }
.mobile-util { margin-top:28px; padding-top:20px; border-top:1px solid rgba(17,17,17,0.08); display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; font-size:14px; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.4); opacity:0; visibility:hidden; z-index:1050; transition:opacity var(--transition-fast), visibility var(--transition-fast); }
.drawer-backdrop.is-show { opacity:1; visibility:visible; }

/* ===============================
   메인 배너
=============================== */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; color:#ffffff; overflow:hidden; }
.hero-media, .hero-overlay { position:absolute; inset:0; }
.hero-overlay { background:linear-gradient(90deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.18) 48%, rgba(0,0,0,0.08) 100%); z-index:1; }
.hero-image-pc, .hero-image-mobile { width:100%; height:100%; object-fit:cover; }
.hero-image-mobile { display:none; }
.hero-content { position:relative; z-index:2; width:100%; padding-top:var(--header-height-pc); }
.hero-text { max-width:var(--hero-text-max-width); padding-top:80px; padding-bottom:80px; }
.hero-eyebrow { display:block; font-size:20px; font-weight:500; margin-bottom:18px; opacity:0.95; }
.hero-title { font-size:clamp(36px,5vw,62px); line-height:1.22; font-weight:700; letter-spacing:-0.02em; }
.hero-button { display:inline-flex; align-items:center; justify-content:center; min-width:152px; height:52px; padding:0 28px; border:1px solid rgba(255,255,255,0.85); border-radius:999px; margin-top:32px; font-size:16px; font-weight:600; color:#ffffff; transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.hero-button:hover { background:#ffffff; color:#111111; border-color:#ffffff; }

/* ===============================
   연혁 섹션
=============================== */
.history-section { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; color:#111111; background:#f6f4ef; }
.history-bg { position:absolute; inset:0; z-index:0; }
.history-bg img { width:100%; height:100%; object-fit:cover; }
.history-bg-mobile { display:none; }
.history-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.70) 45%, rgba(255,255,255,0.40) 100%); z-index:1; }
.history-content { position:relative; z-index:2; width:100%; padding-top:120px; padding-bottom:120px; }
.section-heading { margin-bottom:36px; max-width:500px; }
.section-title { font-size:clamp(30px,4vw,48px); line-height:1.25; font-weight:700; letter-spacing:-0.02em; }
.history-layout { display:grid; grid-template-columns:minmax(260px,360px) minmax(0,1fr); gap:48px; align-items:start; }
.history-intro { font-size:16px; color:#444444; line-height:1.8; }
.timeline { display:flex; flex-direction:column; gap:14px; }
.timeline-item { display:grid; grid-template-columns:110px 80px minmax(0,1fr); gap:16px; align-items:start; padding:18px 20px; border-radius:18px; background:var(--color-timeline-card); backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,0.05); }
.timeline-year { font-size:26px; font-weight:700; letter-spacing:-0.03em; color:#111111; }
.timeline-month { font-size:15px; font-weight:700; color:#666666; padding-top:6px; }
.timeline-text { font-size:16px; line-height:1.7; color:#222222; padding-top:2px; }

/* ===============================
   인스타그램 섹션
=============================== */
.instagram-section { padding:120px 0; background:#ffffff; }
.instagram-layout { display:grid; grid-template-columns:360px minmax(0,1fr); gap:44px; align-items:start; }
.instagram-copy { position:sticky; top:120px; }
.instagram-title { font-size:clamp(28px,3vw,42px); line-height:1.35; font-weight:700; letter-spacing:-0.02em; }
.instagram-account { display:flex; align-items:center; gap:14px; margin-top:24px; font-size:18px; font-weight:600; color:#222222; }
.instagram-account img { width:32px; height:32px; object-fit:contain; }
.instagram-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.instagram-item { position:relative; border-radius:18px; overflow:hidden; background:#f3f3f3; aspect-ratio:1 / 1; }
.instagram-item img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-medium); }
.instagram-item:hover img { transform:scale(1.04); }

/* ===============================
   반응형
=============================== */
@media (max-width:1200px) {
  .gnb-trigger { padding:0 12px; font-size:16px; }
  .gnb-util { gap:12px; font-size:13px; }
  .history-layout, .instagram-layout { grid-template-columns:1fr; }
  .instagram-copy { position:static; }
}

@media (max-width:1024px) {
  .site-header { height:var(--header-height-mobile); }
  .container { padding-left:var(--container-mobile); padding-right:var(--container-mobile); }
  .logo-link { width:var(--logo-width-mobile); }
  .logo-link img { height:var(--logo-height-mobile); }

  /* 모바일에서는 로고 제외 숨김 */
  .gnb, .gnb-util { display:none; }

  .mobile-menu-button { display:inline-block; }
  .hero-content { padding-top:var(--header-height-mobile); }
  .hero-text { padding-top:44px; padding-bottom:44px; }
  .hero-eyebrow { font-size:18px; margin-bottom:14px; }
  .hero-title { font-size:clamp(30px,8vw,42px); }
  .history-content { padding-top:90px; padding-bottom:90px; }
  .timeline-item { grid-template-columns:96px 56px minmax(0,1fr); gap:12px; }
}

@media (max-width:767px) {
  .hero-image-pc, .history-bg-pc { display:none; }
  .hero-image-mobile, .history-bg-mobile { display:block; }
  .hero-image-mobile { padding-top:0; margin-top:0; }
  .hero-overlay { background:linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.20) 46%, rgba(0,0,0,0.18) 100%); }
  .hero-text { max-width:100%; }
  .hero-eyebrow { font-size:16px; }
  .hero-button { min-width:136px; height:48px; margin-top:24px; font-size:15px; }
  .history-overlay { background:linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.82) 38%, rgba(255,255,255,0.62) 100%); }
  .section-heading { margin-bottom:28px; }
  .history-layout { gap:28px; }
  .timeline { gap:12px; }
  .timeline-item { grid-template-columns:1fr; gap:4px; padding:16px; }
  .timeline-year { font-size:22px; }
  .timeline-month { padding-top:0; font-size:14px; }
  .timeline-text { font-size:15px; padding-top:4px; }
  .instagram-section { padding:90px 0; }
  .instagram-layout { gap:28px; }
  .instagram-title { font-size:30px; }
  .instagram-account { margin-top:18px; font-size:16px; }
  .instagram-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}