@font-face{
  font-family: "ShillaCulture";
  src: url("/fonts/Shilla_Culture_M.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "ShillaCulture";
  src: url("/fonts/Shilla_Culture_B.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --header:#f1f1f1;
  --radius:18px;
  --heroImg:url("/images/hero/hero-main.jpg");
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color:#111;
  background:#0a0a0a;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Header */
.site-header{
  background:var(--header);
  color:#111;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.header-inner{
  max-width:1400px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{
  font-family:"ShillaCulture", serif;
  font-weight:700;
  font-size:46px;
  line-height:1;
  color:#111;
  text-decoration:none;
  margin-left:22px;
  margin-top:2px;
  transform:none;
  letter-spacing:0.08em; /* 순 백 */
}
.header-right{
  display:flex;
  align-items:center;
  gap:18px;
}
.phone-pills{ display:none; }

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-item{
  color:#111;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
.nav-item:hover{ opacity:.75; }
.nav-item.is-active{ border-bottom-color:#111; }

/* Hero: 원본 이미지 그대로 */
.hero{
  position:relative;
  min-height:calc(100vh - 72px);
  background-image: var(--heroImg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::before{ display:none; }
.hero::after{ display:none; }

/* 컨테이너는 화면 꽉(패딩 0) */
.hero-inner{
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  height:calc(100vh - 72px);
  padding:0; /* ✅ 좌/우 끝으로 보내기 위해 0 */
}

/* 왼쪽 문구: 화면 좌측 "완전 끝" */
.hero-copy{
  position:absolute;
  left:0;     /* ✅ 좌측 끝 */
  top:140px;
  width:700px;
  background:rgba(0,0,0,.46);
  padding:26px 28px 22px;
  border-radius:0 10px 10px 0; /* 끝에 붙으니 왼쪽 라운드 제거 */
}

.hero-title{
  margin:0 0 14px 0;
  font-size:56px;
  line-height:1.10;
  font-weight:900;
  letter-spacing:-0.8px;
  color:#fff;
}

.hero-desc{
  margin:0 0 20px 0;
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,.90);
  max-width:560px;
}

.hero-actions{
  display:flex;
  gap:14px;
  align-items:center;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.btn-ghost{
  background:#0b0b0b;
  color:#fff;
  border-color:rgba(0,0,0,.35);
}
.btn-solid{
  background:#fff;
  color:#111;
  border-color:rgba(0,0,0,.12);
}
.btn:hover{ filter:brightness(1.03); }
.btn:active{ transform:translateY(1px); }

/* 오른쪽 상담박스: 화면 우측 "완전 끝" */
.hero-form{
  position:absolute;
  right:0;   /* ✅ 우측 끝 */
  top:120px;
}

.form-card{
  width:320px;
  max-width:320px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.12);
  border-radius: 10px 0 0 10px; /* 끝에 붙으니 오른쪽 라운드 제거 */
  padding:18px 18px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.form-head{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.form-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 16px;
  border-radius:999px;
  background:#eeeeee;
  color:#111;
  font-weight:800;
  font-size:13px;
  border:1px solid rgba(0,0,0,.06);
}

.field{
  display:block;
  margin:10px 0;
}
.field input,
.field select,
.field textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.90);
  color:#111;
  padding:12px 12px;
  font-size:13px;
  outline:none;
}
.field textarea{ resize:vertical; }

.btn-submit{
  width:100%;
  background:#0b0b0b;
  border:1px solid rgba(0,0,0,.35);
  color:#fff;
  height:46px;
  border-radius:999px;
  font-weight:800;
}

.form-foot{
  margin:12px 0 0;
  font-size:12px;
  color:#555;
  text-align:center;
}
.form-status{
  margin:10px 0 0;
  font-size:13px;
  text-align:center;
  min-height:18px;
  color:#111;
}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{
    height:auto;
    padding:44px 18px 54px;
  }
  .hero-copy,
  .hero-form{
    position:static;
    width:auto;
    max-width:100%;
  }
  .hero-copy{
    border-radius:10px;
    margin-bottom:18px;
  }
  .form-card{
    width:100%;
    max-width:100%;
    border-radius:18px;
  }
}

@media (max-width: 520px){
  .logo{
    font-size:40px;
    margin-left:14px;
    letter-spacing:0.18em;
  }
  .nav-item{ font-size:14px; }

  .hero-title{ font-size:38px; }

  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .btn{ width:auto; }
}

/* ===== hero 위치 미세조정 ===== */

/* 왼쪽 문구 → 오른쪽 2cm, 아래 1.5cm */
.hero-copy{
  left: 2cm !important;
  top: calc(140px + 1.5cm) !important;
}

/* 오른쪽 상담박스 → 왼쪽으로 2cm */
.hero-form{
  right: 2cm !important;
}


/* ===== 좌측 문구 배경 제거 ===== */
.hero-copy{
  background:none !important;
}

/* ===== 타이틀 검은 테두리 (다른 효과 없음) ===== */
.hero-title{
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

/* ===== 우측 상담박스 투명도 조정 ===== */
.form-card{
  background: rgba(255,255,255,0.92) !important;
}


.form-card{
  background: rgba(255,255,255,0.75) !important;
}


.hero-desc{
  font-size:16px !important;
  line-height:1.8 !important;
}


/* header phone pills (logo 기준 배치) */
.phone-pills-inline{
  display:flex;
  gap:10px;
  margin-left:3cm;   /* 순백 기준 여백 */
  align-items:center;
}

.phone-pill{
  background:#111;
  color:#fff;
  padding:9px 16px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  font-size:13px;
  white-space:nowrap;
}

.phone-pill:hover{
  background:#000;
}


/* ===== Header phone redesign ===== */
.phone-pills-inline{
  display:flex;
  gap:8px;

  /* 기존 3cm → 25% 수준으로 축소 */
  margin-left:0.75cm;

  align-items:center;
}

.phone-pill{
  background:rgba(255,255,255,0.85);
  color:#111;
  padding:7px 14px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  font-size:13px;
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(4px);
  transition:all .15s ease;
}

.phone-pill:hover{
  background:#fff;
  transform:translateY(-1px);
}


/* header phone inline style */
.header-phones{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:12px;
  font-weight:700;
  color:#222;
}

.header-phone{
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:#222;
  font-size:14px;
}

.phone-icon{
  font-size:15px;
  opacity:.75;
}

.header-phone:hover{
  opacity:.7;
}


/* ===== header phones: 문의전화 뱃지 + 깔끔한 고급 스타일 ===== */
.header-phones{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-left:12px !important; /* 로고랑 너무 멀지 않게 */
}

.phone-badge{
  width:42px;
  height:42px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;

  background:#fff;
  border:2px solid #111;
  border-radius:12px;

  font-weight:900;
  font-size:12px;
  line-height:1;
  color:#111;
}

.phone-badge span{
  display:block;
}

/* 전화번호는 pill 느낌만 살짝(너무 촌스럽지 않게) */
.header-phone{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;

  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(0,0,0,.10);

  text-decoration:none;
  color:#111;
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}

.header-phone:hover{ filter:brightness(0.98); }

.phone-icon{
  font-size:14px;
  opacity:.75;
}


/* ===== Header size + bottom line ===== */

.site-header{
  padding-top:8px;
  padding-bottom:8px;
  border-bottom:4px solid #000;   /* 굵은 검정선 */
}

.header-inner{
  padding:18px 24px;              /* 헤더 전체 키우기 */
}

.logo{
  font-size:52px;                 /* 순백 로고 살짝 키움 */
}


/* ===== Header overall scale-up (logo + phones + menu) ===== */

/* 로고/전화/메뉴 모두 들어있는 오른쪽 영역을 조금 더 키우기 */
.logo{
  font-size:56px !important;
}

/* 문의전화 블록(뱃지+번호들) 크기 업 + 좌측으로 3cm 이동 */
.header-phones{
  transform: translateX(-3cm) !important;  /* ✅ 전체를 3cm 왼쪽으로 */
  gap:12px !important;                    /* 살짝 여유 */
}

/* 문의전화 뱃지(네모) 조금 키우기 */
.phone-badge{
  width:48px !important;
  height:48px !important;
  font-size:13px !important;
  border-radius:14px !important;
}

/* 전화번호 pill도 조금 키우기 */
.header-phone{
  padding:10px 14px !important;
  font-size:14px !important;
}

/* 메뉴도 같이 키우기 */
.nav{
  gap:22px !important;
}
.nav-item{
  font-size:16px !important;
  font-weight:700 !important;
  padding:8px 2px !important;
}


/* ===== Header vertical centering ===== */

.site-header{
  height:110px !important;
  display:flex;
  align-items:center;
}

/* 내부 컨테이너 중앙정렬 */
.header-inner{
  display:flex !important;
  align-items:center !important;
  height:100%;
}

/* 로고 더 키우기 */
.logo{
  font-size:62px !important;
}

/* 문의전화 영역 더 키우기 */
.phone-badge{
  width:52px !important;
  height:52px !important;
  font-size:14px !important;
}

.header-phone{
  font-size:15px !important;
  padding:12px 16px !important;
}

/* 메뉴도 균형 맞게 */
.nav-item{
  font-size:17px !important;
}


/* ===== Header 3-zone layout ===== */

.header-inner{
  display:grid !important;
  grid-template-columns: auto 1fr auto;
  align-items:center;
}

/* 순백 (좌측 고정) */
.logo{
  justify-self:start;
}

/* 문의전화 (정중앙) */
.phone-wrap{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:10px;
}

/* 메뉴 (우측 고정) */
.nav{
  justify-self:end;
}

/* 헤더 높이 유지 */
.site-header{
  height:110px;
  display:flex;
  align-items:center;
}


/* ===== Header: 좌(로고) / 중(문의전화) / 우(메뉴) 3구역 고정 ===== */
.site-header{
  height:110px !important;
  display:flex;
  align-items:center;
}

.header-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;

  display:grid !important;
  grid-template-columns: auto 1fr auto;   /* 좌 / 중 / 우 */
  align-items:center !important;
  gap:18px;
}

/* 좌측: 로고 */
.logo{
  justify-self:start !important;
  margin:0 !important;
  font-size:62px !important;
  letter-spacing:0.08em; /* 순 백 */
}

/* 중앙: 문의전화 */
.phone-wrap{
  justify-self:center !important;
}
.header-phones{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  /* 이전에 넣었던 이동/여백/변형 다 무력화 */
  margin-left:0 !important;
  transform:none !important;
}

/* 우측: 메뉴 */
.nav{
  justify-self:end !important;
}

/* (겹침 방지) 메뉴가 너무 길면 줄바꿈 안 되게 */
.nav, .header-phones{
  white-space:nowrap;
}


/* ===== Hero slideshow background layer ===== */
.hero{
  position:relative;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background-image: var(--heroImg);
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  z-index:0;
  opacity:1;
  transition: opacity 700ms ease;
}

/* 콘텐츠는 배경 위 */
.hero-inner{
  position:relative;
  z-index:1;
}

.hero-bg.is-fading{
  opacity:0;
}


/* hero 설명문 검정 테두리 */
.hero-desc{
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}


/* about image card */
.about-image-card{
  width:320px;
  height:320px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
  background:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
}

.about-image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ===== page-specific hero tuning ===== */

/* HOME: 메인 히어로는 '분위기 + 공간감'이 목적 → 너무 상단(쿠션)만 보이지 않게 아래로 내림 */
.page-home .hero-bg{
  background-position: center 55% !important;
}

/* ABOUT: 배너는 '회사소개' 타이틀이 주인공 → 인물/쿠션 클로즈업 피하고 구도 안정 */
.page-about .about-top-banner{
  background-position: center 45% !important;
}

/* ABOUT 우측 이미지: '서비스/린넨' 느낌이 목적 → 카드 크롭 안정 */
.page-about .about-image-card img{
  object-fit: cover !important;
  object-position: center 50% !important;
}


/* ===== about page tuning (auto patch) ===== */

/* 히어로(about-top-banner) 하단 굵은 검정선 추가 */
.about-top-banner{
  border-bottom: 4px solid #000 !important;
}

/* 인트로가 히어로에 너무 붙는 문제: 1~1.5cm 띄움(약 48px) */
.intro{
  padding-top: 48px !important;
}

/* 히어로 사진 크롭(쿠션만 크게) 완화: 보이는 구도를 아래쪽으로 이동 */
.about-top-banner{
  background-position: center 65% !important;
}

/* (혹시 index hero도 같이 튜닝하고 싶으면) */
.hero-bg{
  background-position: center 60% !important;
}

/* 좌우 여백 너무 넓음: 컨텐츠 폭 넓히고 좌우 패딩 줄이기 */
.hero-inner,
.header-inner{
  max-width: 1320px !important;
}

.intro,
.values,
.service-list,
.location{
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 인트로 레이아웃이 grid/flex 어느 쪽이든 좌우 간격 균형 */
.intro-row,
.intro-grid,
.intro-inner{
  gap: 36px !important;
}


/* ===== about page final tuning (auto patch) ===== */

/* 히어로(about-top-banner) 하단 굵은 검정선 */
.about-top-banner{
  border-bottom:4px solid #000 !important;
}

/* 인트로가 히어로에 너무 붙는 문제: 1~1.5cm(약 48px) */
.intro{
  margin-top:48px !important;
  padding-top:0 !important;
}

/* 히어로 크롭 조정(쿠션만 크게 보이는 문제 완화) */
.about-top-banner{
  background-position:center 80% !important;
}

/* 좌우 여백 줄이기: 컨테이너 폭 넓히고 패딩 축소 */
.header-inner,
.hero-inner,
.intro,
.values,
.service-list,
.location{
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
}

/* 인트로 좌우 레이아웃 간격 균형 */
.intro-row,
.intro-grid,
.intro-inner{
  gap:36px !important;
}

/* 우측 이미지 카드: 텍스트 높이와 비슷하게 조금 키움 */
.about-image-card{
  width:360px !important;
  height:360px !important;
}
.about-image-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 50% !important;
}

/* === HOTFIX: hero left/right alignment restore (index hero) === */
.hero .hero-inner,
.hero .hero-content,
.hero .hero-grid{
  max-width: none !important;
  margin: 0 !important;
}

.hero .hero-inner,
.hero .hero-content{
  width: 100% !important;
  padding-left: 60px;
  padding-right: 60px;
}

.hero .hero-grid{
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 48px;
}

.hero .hero-left{
  max-width: 720px;
}

.hero .hero-right,
.hero .hero-form,
.hero .consult-box{
  margin-left: auto !important;
}

/* mobile */
@media (max-width: 900px){
  .hero .hero-inner,
  .hero .hero-content{
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero .hero-grid{
    flex-direction: column;
    align-items: stretch;
  }
  .hero .hero-right,
  .hero .hero-form,
  .hero .consult-box{
    margin-left: 0 !important;
  }
}