/* ========= 연수지역 페이지 ========= */

/* Hero */
.areas-hero{
  background:linear-gradient(180deg,var(--primary-softer) 0%,#fff 100%);
  border-bottom:1px solid var(--border);
  text-align:center;padding:84px 0 72px;
}
.areas-hero .inner{max-width:760px;margin:0 auto}
.areas-hero h1{margin:16px 0 10px;font-size:56px;line-height:1.1;letter-spacing:-1.8px;font-weight:800;color:var(--text)}
.areas-hero .sub{margin:0 0 14px;font-size:22px;font-weight:700;color:var(--primary);letter-spacing:-.4px}
.areas-hero .lead{margin:0 0 28px;color:var(--text-2);font-size:17px;line-height:1.7}
.areas-hero__stats{list-style:none;margin:0 0 32px;padding:0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.areas-hero__stats li{
  min-width:140px;padding:14px 22px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:grid;gap:2px;
}
.areas-hero__stats b{font-size:26px;font-weight:800;color:var(--primary);letter-spacing:-.6px}
.areas-hero__stats span{font-size:13px;color:var(--text-2)}
.areas-hero .ctas{display:flex;justify-content:center}

/* Map section */
.areas-map{background:#fff}
.areas-map .section-sub{margin-bottom:34px}
.areas-map__grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:stretch}
.areas-card{
  margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:20px;display:flex;flex-direction:column;gap:12px;
}
.areas-card figcaption{font-weight:800;font-size:15px;letter-spacing:-.2px;color:var(--text)}
.areas-card__note{margin:auto 0 0;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--primary)}
.areas-card__note .dot{width:10px;height:10px;border-radius:50%;background:var(--primary);display:inline-block}

.areas-nat{width:100%;height:auto;display:block;max-width:260px;margin:0 auto}
.areas-nat .m-other{fill:#DDE3EE;stroke:#fff;stroke-width:.9;stroke-linejoin:round}
.areas-nat .m-gg{fill:#9DB6F3;stroke:#fff;stroke-width:.9;stroke-linejoin:round}
.areas-nat .m-seoul{fill:var(--primary);stroke:#fff;stroke-width:.9;stroke-linejoin:round}
.areas-nat__pin .halo{fill:rgba(30,64,175,.18);animation:areas-pulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
.areas-nat__pin circle:last-child{fill:#fff;stroke:var(--primary);stroke-width:2}
@keyframes areas-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}

.areas-zoom{width:100%;height:auto;display:block;border-radius:var(--radius-lg);background:#fff}
.areas-zoom .z-other{fill:#EEF1F6;stroke:#fff;stroke-width:1.2}
.areas-zoom .z-inc{fill:#E1E6EF;stroke:#fff;stroke-width:1.2}
.areas-zoom .z-gg{fill:#D3DFFC;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.areas-zoom .z-seoul{fill:var(--primary);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;cursor:pointer;transition:fill .15s ease;outline:none}
.areas-zoom .z-seoul:hover,.areas-zoom .z-seoul.is-hover,.areas-zoom .z-seoul.is-active{fill:#15307E}
.areas-zoom .z-seoul:focus-visible{stroke:#0B1220;stroke-width:2.5}
.areas-zoom .z-title{font-size:20px;font-weight:800;fill:#7C98DC;letter-spacing:2px;opacity:.9}
.areas-zoom .z-sub{font-size:13px;font-weight:700;fill:#A6AFC0}
.areas-zoom .seoul-label__t{font-size:15px;font-weight:800;fill:#fff;letter-spacing:.5px}

.areas-zoom .city{cursor:pointer;outline:none}
.areas-zoom .city__halo{fill:transparent;transition:fill .15s ease}
.areas-zoom .city__dot{fill:var(--primary-2);stroke:#fff;stroke-width:1.6;transition:fill .15s ease}
.areas-zoom .city__label{
  font-size:12.5px;font-weight:700;fill:#1F2A44;
  paint-order:stroke;stroke:#fff;stroke-width:3.2px;stroke-linejoin:round;pointer-events:none;
}
.areas-zoom .city:hover .city__halo,
.areas-zoom .city.is-hover .city__halo{fill:rgba(30,64,175,.16)}
.areas-zoom .city:hover .city__dot,
.areas-zoom .city.is-hover .city__dot{fill:var(--primary)}
.areas-zoom .city.is-active .city__halo{fill:rgba(30,64,175,.24)}
.areas-zoom .city.is-active .city__dot{fill:#fff;stroke:var(--primary);stroke-width:3.2}
.areas-zoom .city.is-active .city__label{fill:var(--primary);font-weight:800}
.areas-zoom .city:focus-visible .city__halo{fill:rgba(30,64,175,.3)}

.areas-legend{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-2)}
.areas-legend li{display:flex;align-items:center;gap:7px}
.areas-legend .lg{width:14px;height:14px;border-radius:4px;display:inline-block}
.areas-legend .lg--seoul{background:var(--primary)}
.areas-legend .lg--gg{background:#D3DFFC;border:1px solid #AFC3F3}
.areas-legend .lg--dot{width:11px;height:11px;border-radius:50%;background:var(--primary-2)}

/* Selected area panel */
.area-pick{
  margin-top:22px;padding:18px 22px;border:1.5px dashed var(--border-2);border-radius:var(--radius-lg);
  background:var(--primary-softer);min-height:72px;display:flex;align-items:center;justify-content:center;text-align:center;
}
.area-pick__hint{margin:0;color:var(--text-2);font-size:14.5px}
.area-pick__result{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.area-pick__result[hidden]{display:none}
.area-pick__badge{
  background:var(--primary);color:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:800;letter-spacing:-.1px;
}
.area-pick__result strong{font-size:19px;letter-spacing:-.4px;color:var(--text)}

/* List */
.areas-list{background:var(--surface)}
.areas-list .section-sub{margin-bottom:34px}
.areas-list__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.areas-list__box{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px 24px 26px}
.areas-list__box h3{margin:0 0 16px;font-size:18px;font-weight:800;letter-spacing:-.4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.areas-list__box h3 em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--primary);background:var(--primary-soft);padding:4px 10px;border-radius:999px;margin-left:auto}
.areas-list__box .tag{padding:4px 11px;border-radius:8px;font-size:14px;font-weight:800;color:#fff}
.areas-list__box .tag--seoul{background:var(--primary)}
.areas-list__box .tag--gg{background:#5B7FE0}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px}
.chip-area{
  padding:8px 13px;border-radius:999px;background:#fff;border:1px solid var(--border-2);
  font-size:13.5px;font-weight:600;color:var(--text);transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.chip-area:hover,.chip-area.is-hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.chip-area.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.chip-area:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Region pages */
.areas-pages .section-sub{margin-bottom:34px}
.areas-pages__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.areas-page-card{
  display:flex;flex-direction:column;gap:6px;padding:20px 18px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease;
}
.areas-page-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.areas-page-card strong{font-size:16px;font-weight:800;color:var(--primary);letter-spacing:-.3px}
.areas-page-card span{font-size:13px;color:var(--text-2);line-height:1.55;flex:1}
.areas-page-card em{font-style:normal;font-size:13px;font-weight:700;color:var(--primary);margin-top:6px}

/* FAQ */
.areas-faq{background:var(--surface)}
.areas-faq__list{max-width:820px;margin:34px auto 0}

/* Responsive */
@media (max-width:1100px){
  .areas-pages__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .areas-hero{padding:56px 0 48px}
  .areas-hero h1{font-size:38px;letter-spacing:-1.2px}
  .areas-hero .sub{font-size:18px}
  .areas-hero .lead{font-size:15px}
  .areas-map__grid{grid-template-columns:1fr}
  .areas-card--nat{flex-direction:row;align-items:center;flex-wrap:wrap}
  .areas-card--nat figcaption{flex:0 0 100%}
  .areas-card--nat .areas-nat{max-width:150px;margin:0}
  .areas-card--nat .areas-card__note{margin:0;flex:1;min-width:140px}
  .areas-list__grid{grid-template-columns:1fr}
  .areas-pages__grid{grid-template-columns:repeat(2,1fr)}
  .areas-zoom .city__label{display:none}
  .areas-zoom .city.is-active .city__label{display:block;font-size:20px;stroke-width:4px}
}
@media (max-width:520px){
  .areas-hero__stats li{min-width:0;flex:1 1 90px;padding:12px 10px}
  .areas-card{padding:16px}
  .areas-list__box{padding:20px 18px 22px}
  .areas-list__box h3 em{margin-left:0}
  .areas-pages__grid{grid-template-columns:1fr}
}

/* FAQ (index.html 인라인 스타일과 동일 디자인) */
.areas-faq .faq{display:flex;flex-direction:column;gap:10px}
.areas-faq .faq details{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;transition:border-color .2s ease}
.areas-faq .faq details[open]{border-color:var(--primary)}
.areas-faq .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:15px;color:var(--text);font-weight:500}
.areas-faq .faq summary::-webkit-details-marker{display:none}
.areas-faq .faq summary .q{display:flex;align-items:center;gap:10px}
.areas-faq .faq summary .q b{color:var(--primary);font-weight:800;width:16px;text-align:center}
.areas-faq .faq summary .chev{width:18px;height:18px;flex:0 0 18px;color:var(--text-3);transition:transform .2s ease}
.areas-faq .faq details[open] summary .chev{transform:rotate(180deg);color:var(--primary)}
.areas-faq .faq .a{margin:10px 0 4px 26px;color:var(--text-2);font-size:14px;line-height:1.65}