/* ========== VARIABLES ========== */
:root{
  --maxw:1920px;
  --inner:1200px;
}

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

.inner{max-width:var(--inner);margin:0 auto;padding:0 24px;}

/* 골드 텍스트 (이미지 컬러 그대로 그라데이션 적용) */
.gold-text,
strong.gold,
.head-banner__title{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ========== 1. HEAD BANNER ========== */
.head-banner{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  height:550px;
  margin:0 auto;
  overflow:hidden;
}
.head-banner__img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.head-banner__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:18px;
}
.head-banner__title{
  font-size:54px;
  font-weight:800;          /* 타이틀: 굵게 */
  letter-spacing:.04em;
  line-height:1.2;
}
.head-banner__sub{
  font-size:20px;
  font-weight:300;
  color:#ffffff;
  opacity:.92;              /* 투명도는 opacity */
  letter-spacing:.01em;
}

/* ========== 2. CONTACT ========== */
.contact-section{padding:90px 0 60px;background:var(--white);}
.tel-box{
  text-align:center;
  margin-bottom:46px;
}
.tel-box__label{
  display:inline-block;
  font-size:15px;
  font-weight:500;
  color:var(--black);
  opacity:.55;
  letter-spacing:.18em;
  margin-bottom:10px;
}
.tel-box__num{
  display:block;
  font-size:56px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.1;
  color:var(--black);            /* 검정 */
  -webkit-text-fill-color:var(--black);
  background:none;
}

.map-wrap{max-width:980px;margin:0 auto;}
.map-frame{
  position:relative;
  width:100%;
  padding-top:46%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 10px 34px rgba(17,17,17,.06);
  background:var(--gray);
}
.map-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.map-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:18px auto 0;
  padding:11px 22px;
  background:var(--black);
  color:#fef7db;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  transition:.25s;
}
.map-link svg{color:#fef7db;}
.map-link:hover{opacity:.85;}
.map-wrap{text-align:center;}
.map-addr{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin-top:24px;
  font-size:23px;
  font-weight:500;
  color:var(--black);
  opacity:.9;
}
.map-addr__pin{color:var(--gold-solid);flex:none;width:26px;height:26px;}
.map-addr strong{font-weight:700;}

/* ========== 3. DIRECTIONS ========== */
.directions-section{padding:50px 0 110px;background:var(--white);}

.dir-intro{
  text-align:center;
  margin-bottom:44px;
}
.dir-intro__img{
  width:120px;height:120px;
  margin:0 auto 16px;
  object-fit:contain;
}
.dir-intro__txt{
  font-size:24px;
  font-weight:300;
  letter-spacing:.01em;
}
.dir-intro__txt strong{font-weight:800;}
.dir-intro__txt strong{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.dir-block{
  background:var(--gray);
  border:1px solid var(--line);
  border-radius:16px;
  padding:42px 46px;
  margin-bottom:28px;
}
.dir-block:last-child{margin-bottom:0;}

.dir-head{
  display:flex;
  align-items:center;
  gap:18px;
  padding-bottom:22px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.dir-icon{
  flex:none;
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);
  border-radius:14px;
}
.dir-icon svg{color:#fef7db;}   /* 검정 도형 위 골드 톤 아이콘 */

.dir-title{
  font-size:26px;
  font-weight:300;            /* '로 오시는 경우' 얇게 · 검정 */
  color:var(--black);
  letter-spacing:.01em;
}
/* '지하철/버스/자가용/도보' → 굵게 + 골드 */
.dir-title strong{
  font-weight:800;
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.dir-body{font-size:17px;color:var(--black);opacity:.92;}
.dir-body p{font-weight:300;}
.dir-body strong{font-weight:700;color:var(--black);opacity:1;}

/* 버스 라인 */
.bus-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:14px 0;
}
.bus-line + .bus-line{border-top:1px dashed var(--line);}
.bus-stop{
  font-weight:600;
  margin-right:6px;
  min-width:210px;
}
.bus{
  display:inline-block;
  padding:5px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  line-height:1.3;
}
.bus--trunk{background:#0068b7;}    /* 간선 파랑 */
.bus--branch{background:#33a23d;}   /* 지선 초록 */
.bus--general{background:#f9b000;}  /* 일반 노랑 */

/* 자가용 주소 */
.addr-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:22px 0;
}
.addr-item{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
}
.addr-item__type{
  flex:none;
  width:96px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:var(--black);
  border-radius:6px;
  padding:5px 0;
  text-align:center;
}
.addr-item__val{font-weight:400;}

.car-figure{
  margin:8px 0 18px;        /* 왼쪽 정렬 */
  max-width:520px;          /* 작게 표시 */
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
}
.car-figure img{width:100%;}
.car-note{font-weight:300;}

/* 도보 탭 */
.walk-tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.walk-tab{
  flex:1 1 0;
  min-width:140px;
  padding:15px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  font-size:17px;
  font-weight:500;
  color:var(--black);
  opacity:.7;
  transition:.25s;
}
.walk-tab:hover{opacity:1;border-color:var(--gold-solid);}
.walk-tab.is-active{
  background:var(--black);
  color:#fef7db;
  opacity:1;
  font-weight:700;
  border-color:var(--black);
}
.walk-panel{display:none;}
.walk-panel.is-active{display:block;animation:fade .35s ease;}
.walk-desc{
  font-size:17px;
  font-weight:300;
  margin-bottom:18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px 22px;
}
.walk-desc strong{font-weight:700;}
.walk-figure{
  margin:0 auto;
  max-width:480px;          /* 작게 표시 */
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
}
.walk-figure img{width:100%;}

@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ========== RESPONSIVE ========== */
@media (max-width:1024px){
  .head-banner{height:420px;}
  .head-banner__title{font-size:44px;}
  .tel-box__num{font-size:46px;}
}
@media (max-width:768px){
  .head-banner{height:300px;}
  .head-banner__title{font-size:34px;}
  .head-banner__sub{font-size:15px;padding:0 16px;}
  .contact-section{padding:56px 0 40px;}
  .directions-section{padding:30px 0 70px;}
  .tel-box__num{font-size:36px;}
  .map-frame{padding-top:62%;}
  .map-addr{font-size:15px;}
  .dir-block{padding:28px 22px;}
  .dir-icon{width:52px;height:52px;}
  .dir-title{font-size:21px;}
  .dir-body{font-size:15px;}
  .bus-stop{min-width:100%;margin-bottom:4px;}
  .addr-item{flex-direction:column;align-items:flex-start;gap:6px;}
  .addr-item__type{width:auto;padding:4px 14px;}
  .walk-tab{font-size:15px;padding:12px 8px;}
  .walk-desc{font-size:15px;padding:16px;}
}
@media (max-width:480px){
  .head-banner{height:230px;}
  .head-banner__title{font-size:28px;}
  .tel-box__num{font-size:30px;}
}