:root{--red:#e91f27;--navy:#121b2d;--panel:rgba(17,27,35,.78)}
*{ 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;   
} 
body{ margin:0; color:#fff; background:#cedce2; }
.chair-section{background:linear-gradient(rgba(45,78,92,.25),rgba(32,65,78,.3)),url("assets/background.svg") center/cover no-repeat}
.wrap{max-width:1400px;margin:auto}.wrap>h1{text-align:center;font-size:clamp(30px,4vw,50px);margin:0 0 45px;font-weight:800}
.contents{display:grid;grid-template-columns:minmax(0,760px) minmax(300px,420px);justify-content:center;gap:0;width:100%}
.map-panel{position:relative;min-height:480px; background:var(--panel);overflow:hidden}
.current-area{position:absolute;left:45px;top:45%;z-index:2;margin:0;font-size:27px;font-weight:800}
.daegu-map{display:block;width:min(100%,410px);height:480px;margin:auto;overflow:visible}
.district{cursor:pointer;outline:none}
.district path{fill:#fff;stroke:#69747a;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .48s cubic-bezier(.22,1,.36,1),filter .48s cubic-bezier(.22,1,.36,1),stroke .35s ease}
.district text{font-size:10px;font-weight:800;text-anchor:middle;dominant-baseline:middle;pointer-events:none;fill:#444;paint-order:stroke;stroke:#fff;stroke-width:2px;stroke-linejoin:round;transition:fill .35s ease,stroke .35s ease}
.district:is(:hover,:focus,.active) path{fill:var(--red);stroke:#bf1119;filter:drop-shadow(0 3px 4px rgba(116,0,7,.24))}
.district:is(:hover,:focus,.active) text{fill:#fff;stroke:var(--red)}.district:focus-visible path{stroke:#111;stroke-width:3}
.guide{ position:absolute;right:20px;bottom:20px;margin:0;color:#dbe0e2;font-size:15px; }
.profile-card{ display:flex;flex-direction:column;background:#fff;color:#111;min-height:480px; }
.portrait-wrap{ height:300px;padding:30px 30px 0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.portrait-wrap img { width:100%; height:100%; object-fit:contain;object-position:center bottom;transition:opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1)}
.portrait-wrap img.changing{opacity:0;transform:translateY(10px) scale(.985)}
.profile-info{ text-align:center; flex:1; padding:20px 0 0 0; line-height:2.5em; }
.profile-info p{ margin:0 0 7px;color:var(--red);font-size:21px;transition:opacity .25s ease; }
.profile-info h2{ width:100%; font-family:serif;margin:0;font-size:35px;letter-spacing:.12em;transition:opacity .25s ease; font-family:"IBM Plex Sans KR",'Pretendard',"굴림", "Gulim", Verdana, Arial, Sans-serif; text-align:center; }
.profile-info.is-changing p,.profile-info.is-changing h2{opacity:0}
.profile-link { display:flex; align-items:center; justify-content:center; height:60px; background:var(--red); color:#fff; text-decoration:none; font-size:18px; font-weight:700; transition:background-color .3s ease; }
.profile-link:hover { background:#c9141c; }

@media ( 
   prefers-reduced-motion:reduce){.district path,.district text,.portrait-wrap img,.profile-info p,.profile-info h2,.profile-link{transition:none!important} 
}
@media(max-width:1100px){
  .chair-section{padding:0;}
  .contents{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr)}
  .map-panel,.profile-card{min-height:500px}
  .daegu-map{ height:460px; }
  .portrait-wrap{height:300px; }
}
@media(max-width:800px){
  .chair-section{padding:0;}
  .wrap>h1{margin-bottom:25px}
  .contents{grid-template-columns:1fr;gap:14px;max-width:680px;margin:auto}
  .map-panel{min-height:auto;padding:10px}
  .daegu-map{width:100%;height:auto;max-height:520px}
  .current-area{left:22px;top:42%;font-size:21px}
  .guide{position:static;text-align:center;padding:0 0 12px}
  .profile-card{min-height:0}
  .portrait-wrap{height:300px}.profile-link{height:62px}
}
@media(max-width:520px){
  .chair-section{padding:0;}
  .wrap>h1{font-size:28px}.map-panel{border-radius:4px}
  .contents{grid-template-columns:1fr;gap:0;max-width:100%;margin:auto}
  .current-area{display:none}
  .district text{font-size:11px}
  .profile-card{display:grid;grid-template-columns:55% 45%;grid-template-rows:auto 58px;border-radius:4px;overflow:hidden}
  .portrait-wrap{grid-column:1;grid-row:1;height:210px;padding:0;}
  .profile-info { grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center; padding:0;}
  .profile-info p{font-size:17px}
  .profile-info h2{font-size:28px}
  .profile-link{grid-column:1/-1;grid-row:2;height:58px;font-size:16px}
.portrait-wrap img { width:120%; height:100%; object-fit:contain;object-position:center bottom;transition:opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1)}
}