@charset "utf-8";
/* 발전지원재단 > 찾아오시는길 — 연락처 패널 + 큰 지도 + 오시는 길 안내 */

.location{display:flex;flex-direction:column;gap:22px}

/* ---------- 상단 연락처 패널 ---------- */
.location__panel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  padding:28px 32px;border-radius:var(--radius-l);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.location__eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--brand-strong);
}
.location__panel-text h3{
  margin-top:10px;font-size:clamp(19px,2.2vw,23px);font-weight:900;letter-spacing:-.03em;
}
.location__addr{
  margin-top:10px;display:flex;align-items:flex-start;gap:8px;
  font-size:14px;color:var(--text-mid);line-height:1.6;word-break:keep-all;
}
.location__addr svg{flex:none;margin-top:2px;color:var(--text-dim)}

.location__panel-btns{display:flex;flex-wrap:wrap;gap:10px}
.mapbtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;font-size:13.5px;font-weight:800;
  transition:transform .18s,box-shadow .18s,filter .18s;white-space:nowrap;
}
.mapbtn:hover{transform:translateY(-2px)}
.mapbtn--kakao{background:#fee500;color:#391b1b}
.mapbtn--kakao:hover{filter:brightness(.96);box-shadow:0 10px 22px rgba(254,229,0,.4)}
.mapbtn--naver{background:#007a3d;color:#fff}   /* 네이버 초록을 조금 진하게 — 흰 글자 5.5:1 (예전 #03c75a 는 2.3:1) */
.mapbtn--naver:hover{filter:brightness(1.08);box-shadow:0 10px 22px rgba(0,122,61,.36)}

/* ---------- 지도 ---------- */
.location__map{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  background:var(--bg-alt);min-width:0;
}
.location__map iframe{display:block;width:100%;height:520px;border:0}
.location__maptag{
  position:absolute;left:18px;bottom:18px;z-index:1;max-width:min(340px,calc(100% - 36px));
  display:flex;align-items:flex-start;gap:10px;
  padding:16px 18px;border-radius:var(--radius-m);
  background:rgba(255,255,255,.96);box-shadow:0 12px 28px rgba(10,49,86,.22);
  backdrop-filter:blur(4px);
}
.location__maptag-ico{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--sky-soft);color:var(--brand-strong);
}
.location__maptag b{display:block;font-size:14px;font-weight:900;margin-bottom:3px}
.location__maptag span{font-size:12.5px;color:var(--text-mid);line-height:1.6;word-break:keep-all}

/* ---------- 오시는 길 3단 카드 ---------- */
.location__info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.infocard{
  padding:26px 24px;border-radius:var(--radius-l);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.infocard__ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;margin-bottom:16px;
  background:var(--sky-soft);color:var(--brand-strong);--ti-bg:var(--sky-soft);
}
.infocard__ico svg{width:23px;height:23px}
.infocard__ico .si-fill{fill:currentColor}
.infocard__ico .si-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.infocard__ico .si-knock{fill:var(--ti-bg)}
.infocard:nth-child(2) .infocard__ico{background:#eaf7f1;color:#1b7a52;--ti-bg:#eaf7f1}
.infocard:nth-child(3) .infocard__ico{background:#fdf2e0;color:#a06c10;--ti-bg:#fdf2e0}
.infocard h4{font-size:16px;font-weight:900;letter-spacing:-.02em;margin-bottom:10px}
.infocard p{font-size:13.5px;line-height:1.75;color:var(--text-mid);word-break:keep-all}

@media (max-width:980px){
  .location__info{grid-template-columns:1fr}
}
@media (max-width:760px){
  .location__panel{padding:22px 20px}
  .location__panel-btns{width:100%}
  .mapbtn{flex:1;justify-content:center}
  .location__map iframe{height:340px}
  .location__maptag{left:12px;right:12px;bottom:12px;max-width:none}
}