/* ==========================================================================
   Shared site-wide styles: reset, header (GNB), footer, floating nav.
   Linked from every page in factory/. Edit here once instead of per-page.
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/npm/font-kopub@1.0/kopubdotum.min.css');

/* Same CDN font files, registered under the no-space name too (font-family: 'KoPubDotum'),
   since the CDN's own @font-face only registers "KoPub Dotum" with a space. */
@font-face{
  font-family:'KoPubDotum'; font-style:normal; font-weight:300;
  src:url('https://cdn.jsdelivr.net/npm/font-kopub@1.0/fonts/KoPubDotum-Light.woff') format('woff'),
      url('https://cdn.jsdelivr.net/npm/font-kopub@1.0/fonts/KoPubDotum-Light.ttf') format('truetype');
}
@font-face{
  font-family:'KoPubDotum'; font-style:normal; font-weight:400;
  src:url('https://cdn.jsdelivr.net/npm/font-kopub@1.0/fonts/KoPubDotum-Medium.woff') format('woff'),
      url('https://cdn.jsdelivr.net/npm/font-kopub@1.0/fonts/KoPubDotum-Medium.ttf') format('truetype');
}
@font-face{
  font-family:'KoPubDotum'; font-style:normal; font-weight:700;
  src:url('https://cdn.jsdelivr.net/npm/font-kopub@1.0/fonts/KoPubDotum-Bold.woff') format('woff'),
      url('https://cdn.jsdelivr.net/npm/font-kopub@1.0/fonts/KoPubDotum-Bold.ttf') format('truetype');
}

:root{
  --cream:#eae2d4;
  --dark:#072F23;
  --dark-2:#072F23;
  --sidebar-dark:#072F23;
  --gold:#D0AD7A;
  --gold-2:#D0AD7A;
  --ink:#1a1a1a;
  --gray:#6b6b66;
  --gray-light:#8b877c;
  --white:#ffffff;
  --line:#ddd4bf;
  --maxw:1360px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:var(--ink); background:var(--white); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:"KoPub Dotum","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  font-weight:700;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.container{ width:1200px; margin:0 auto; padding:0; }

/* ---------- Header (shared) ---------- */
#site-header{
  position:sticky; top:0; z-index:200;
  background:url('http://hsfac.co.kr/resources/images/header-texture.jpg') center/cover, var(--cream);
  border-bottom:1px solid var(--line);
}
.header-inner{
  margin:0 auto; padding:14px 50px;
  display:flex; align-items:center; gap:50px;
}
.logo{ font-family:'KoPubDotum'; display:flex; align-items:center; gap:10px; flex-shrink:0; font-weight:800; font-size:24px; color:#284331;}
.logo .mark{ width:70px;  flex-shrink:0; }
.logo .mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.main-nav{ display:flex; gap:30px; flex:1; }
.main-nav a{ font-size:24px; font-weight:700; color:var(--dark); white-space:nowrap; }
.main-nav a.active{ color:var(--gold-2); }
.main-nav a:hover{ opacity:.7; }
.mobile-auth-row{ display:none; }
.mobile-account-menu{ display:none; }
.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.contact-pill{ display:flex; align-items:stretch; flex-shrink:0; }
.phone-link{
  display:flex; align-items:center; gap:8px; font-weight:800; font-size:26px; white-space:nowrap;
  background:var(--gold); color:var(--dark); padding:11px 72px 11px 16px;
  border-radius:999px 0 0 999px; position:relative; z-index:1;
}
.phone-link svg{ flex-shrink:0; }
.btn-consult{
  display:flex; align-items:center; gap:8px;
  background:var(--dark); color:var(--white);
  background-image: url('http://hsfac.co.kr/resources/images/bg_call.png');
  padding:11px 32px 11px 32px; font-weight:700; font-size:24px; white-space:nowrap;
  transition:background .2s;
  border-radius:999px; margin-left:-60px; position:relative; z-index:2;
}
.btn-consult:hover{ background:var(--dark-2); }
.btn-consult .arrow-circle{
  width:30px; height:30px;  
  display:flex; align-items:center; justify-content:center;
}
.icon-user{
  width:36px; height:36px; border-radius:50%;  
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-toggle{ display:none; width:38px; height:38px; align-items:center; justify-content:center; flex-shrink:0; }
.nav-toggle svg{ width:24px; height:auto; transition:transform .2s; }
.nav-toggle.active svg{ transform:rotate(90deg); }

/* ---------- Footer (shared) ---------- */
.site-footer{ width:1200px; margin:auto; border-top:1px solid var(--line); padding:30px 0; background:var(--white); }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.footer-inner p{ font-size:12px; color:var(--gray-light); line-height:1.8; }
.footer-links a:hover{ color:var(--ink); }

/* ---------- Floating nav (shared) ---------- */
.floating-nav{
  position:fixed; right:40px; bottom:40px; z-index:300;
  display:flex; flex-direction:column;
  width:100px;  overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.floating-nav .fn-edit{
  height:93px; background:var(--dark); color:var(--gold);
  display:flex; align-items:center; justify-content:center; transition:opacity .2s;
}
.floating-nav .fn-group{ background:var(--gold); display:flex; flex-direction:column; }
.floating-nav .fn-group a{
  height:93px; display:flex; align-items:center; justify-content:center;
  color:var(--dark); transition:opacity .2s;
}
.floating-nav a:hover{ opacity:.7; }
.pc-text{ display:block; }
.mobile-text{ display:none; }

/* ---------- Responsive (shared) ---------- */
@media (max-width:1024px){
  .container{ width:100%; padding:0 24px; }
  .site-footer{width:100%;}
}

@media (max-width:860px){
  .header-inner{ padding:8px 16px; flex-wrap:wrap; gap:0; }
  .logo{font-family:'KoPubDotum';  font-size:15px; gap:8px; }
  .logo .mark{ width:30px; height:30px; }
  .nav-toggle{ width:32px; height:32px; }
  .header-actions{ display:contents; }
  .logo{font-family:'KoPubDotum'; order:1; margin-right:auto; }
  .nav-toggle{ display:flex; order:2; }
  .icon-user{ display:none; }

  .main-nav{
    order:3; flex:0 0 100%; flex-direction:column; gap:0; text-align:center;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .main-nav.open{ max-height:700px !important; margin-top:20px !important; }
  .main-nav a{ padding:14px 4px; display:block; font-size:19px; font-weight:700; }

  .mobile-auth-row{
    display:flex; justify-content:center; align-items:center; gap:10px;
    padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line);
  }
  .mobile-auth-row a{ font-size:14px; font-weight:700; color:var(--gray); }
  .mobile-auth-row a:hover{ color:var(--dark); }
  .mobile-auth-row .divider{ color:var(--line); font-size:12px; }

  .mobile-account-menu{
    display:grid; grid-template-columns:1fr 1fr; gap:4px 12px;
    margin-top:10px; padding-top:14px; border-top:1px solid var(--line);
  }
  .mobile-account-menu a{
    padding:10px 4px; font-size:15px; font-weight:700; color:var(--gray); text-align:center;
  }
  .mobile-account-menu a:hover{ color:var(--dark); }

  .contact-pill{
    order:4; width:100%; flex-direction:column; align-items:stretch; gap:10px;
    border-radius:0; max-height:0; overflow:hidden; margin-top:0;
    transition:max-height .3s ease, margin-top .3s ease;
  }
  .contact-pill.open{ max-height:220px !important; margin-top:16px !important; }
  .phone-link{ justify-content:center; padding:14px 20px; }
  .btn-consult{ justify-content:center; padding:14px 20px; margin-left:0; box-shadow:none; }
}

@media (max-width:640px){
  .pc-text{ display:none;}
  .mobile-text{ display:block !important;}
  .container{ width:100%; padding:0 18px; }
  .phone-link{border-radius: 999px;}
  .floating-nav{ right:14px; bottom:14px; width:46px; }
  .floating-nav .fn-edit{ height:46px; }
  .floating-nav .fn-group a{ height:42px; }
  .floating-nav svg{ width:50%; height:auto; }
  .site-footer{width:90%;}
}

.pointer {
    cursor : pointer;
}

