@charset "UTF-8";
/**
 * site.scss — 모든 페이지가 공유하는 스타일 (한 번만 내려받고 캐시됨)
 *
 * 리셋 + 헤더 + 푸터. 페이지별 CSS 에는 그 페이지 고유 스타일만 남깁니다.
 * (예전에는 페이지 CSS 22개가 각각 헤더·푸터 12KB 를 품고 있어
 *  페이지를 옮길 때마다 같은 내용을 다시 받았습니다.)
 *
 * 색·폰트 같은 값은 _variables.scss 가 유일한 원본입니다.
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  color: #2e2e31;
  /* overflow: hidden; */
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: "Pretendard Variable", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  word-break: keep-all; /* 한글은 어절 단위로만 줄바꿈 ("보/조금" 방지) */
  overflow-wrap: break-word; /* 아주 긴 단어/URL은 넘칠 때만 강제 줄바꿈 */
}

article, aside, details, summary, figcaption, figure,
footer, header, hgroup, main, nav, section {
  display: block;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  vertical-align: top; /*이미지에 원치 않는 여백이 생성되는 브라우저 오류가 발생하는 경우가 있음*/
  font-size: 0; /*폰트 크기 초기화*/
  border: 0; /* 이미지 링크시 기본적으로 나타나는 테두리 제거 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* padding: 0 20px;   */
}

/* 고정 헤더의 높이.
   화면 아래쪽에서 무언가를 화면 상단에 붙일 때(표 머리줄 등) 이 값만큼 내려야
   헤더에 가려지지 않는다. 두 군데에 적으면 한쪽을 고칠 때 다른 쪽이 어긋난다. */
:root {
  --smg-header-h: 126px;
}

@media (max-width: 1300px) {
  :root {
    --smg-header-h: 121px;
  }
}
@media (max-width: 768px) {
  :root {
    --smg-header-h: 89px;
  }
}
.m-gnb {
  display: none;
}
.m-gnb.open {
  display: block;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 126px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
  font-family: "SUITE Variable", sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  transition: top 0.3s ease;
}
.header__bg {
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  transition: all 0.3s ease;
  border-top: 1px solid #ebeaef;
}
.header h1 {
  width: 193px;
  height: 40px;
  background: url(/assets/img/logo-wh.png) no-repeat center center;
}
.header h1 > a {
  display: block;
  width: 100%;
  height: 100%;
}
.header .gnb {
  height: 100%;
}
.header .gnb__link {
  display: flex;
  height: 100%;
}
.header .gnb__link > li {
  position: relative;
  width: 130px; /* 최상위 메뉴 6개 대응 (1301px 브레이크포인트에서 오버플로 방지) */
  height: 100%;
  text-align: center;
}
.header .gnb__link > li.over { /* hover 했을 시 */
  color: #00b7ce;
  font-weight: bold;
}
.header .gnb__link > li.over::after { /* 하단 바 */
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00b7ce;
}
.header .gnb__link > li.over .gnb__sublist {
  font-weight: 500;
}
.header .gnb__link > li.over .gnb__sublist li.over {
  color: #00b7ce;
}
.header .gnb__link > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 18px;
}
.header .gnb__link > li .gnb__sublist {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  position: absolute;
  top: calc(100% + 20px);
  color: #2e2f31;
  transition: all 0.2s ease;
}
.header .gnb__link > li .gnb__sublist > li {
  padding: 10px 0px;
  transition: all 0.3s ease;
}
.header .gnb__link > li .gnb__sublist > li > a > strong {
  display: block;
  font-size: 12px;
}
.header .tel {
  font-size: 24px;
  font-weight: bold;
}
.header.over { /* hover효과 */
  display: block;
  background-color: #fff;
  color: #2e2f31;
}
.header.over h1 {
  background: url(/assets/img/logo-color.png);
}
.header.over .header__bg {
  background-color: #fff;
  width: 100%;
  height: calc(100% + 200px);
}
.header.over .gnb .gnb__link li .gnb__sublist {
  visibility: visible;
  opacity: 1;
}
.header.over .tel {
  color: #295d60;
}
.header.open { /* subpage 기본상태 */
  background-color: #fff !important;
  color: #2e2f31;
  border-bottom: 1px solid #ebeaef;
}
.header.open h1 {
  background: url(/assets/img/logo-color.png);
}
.header.open h1 > a {
  display: block;
  width: 100%;
  height: 100%;
}
.header.open .tel {
  color: #295d60;
}
.header.scrolled {
  color: #2e2f31 !important;
  background-color: #fff;
}
.header.hidden {
  top: -150px;
}

.top {
  width: 1200px;
  height: 470px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 80px;
}
.top .title {
  font-family: "SUITE Variable", sans-serif;
}
.top .title__sub {
  color: #00b7ce;
  font-weight: 700;
  font-size: 20px;
}
.top .title__main {
  font-size: 65px;
  font-weight: 600;
  color: #1d1d1d;
}
.top .title__main > strong {
  font-size: 40px;
  font-weight: 600;
}
.top .breadcrumb {
  color: #939d9e;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.top .breadcrumb__link {
  position: relative;
  display: block;
  margin-left: 20px;
}
.top .breadcrumb__link.home {
  width: 16px;
  height: 16px;
}
.top .breadcrumb__link.home > img {
  width: 100%;
  height: 100%;
}
.top .breadcrumb__link.active {
  color: #00b7ce;
}
.top .breadcrumb__link:not(:first-child)::before {
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  content: "";
  width: 2px;
  height: 8px;
  background-color: rgba(147, 157, 158, 0.4235294118);
}

.visual {
  height: 2px !important;
  background: none !important;
  background-color: #ebebeb !important;
}

.container h3 {
  position: relative;
  margin: 100px 20px 40px;
  font-weight: 600;
  display: inline-block;
}
.container h3::before {
  content: "";
  position: absolute;
  left: -20px;
  width: 6px;
  height: 100%;
  background-color: #00b7ce;
}

@media (max-width: 1300px) {
  .m-gnb__top.mover {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ebeaef;
  }
  .m-gnb__top.mover .m-gnb__top-logo {
    background: url(/assets/img/logo-color.png) no-repeat center center;
  }
  .m-gnb__top.mover .m-gnb__top-trigger > span {
    background-color: #295d60;
  }
  .top {
    width: 100%;
    padding: 0 40px 80px;
  }
}
@media (min-width: 768px) and (max-width: 1300px) {
  body.no-scroll {
    overflow: hidden;
    height: 100vh;
  }
  .m-gnb {
    display: block;
    position: fixed;
    z-index: 100000;
    width: 100%;
    overflow-y: auto;
    transition: 0.5s;
    /* open */
  }
  .m-gnb__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    transition: 0.3s;
  }
  .m-gnb__top-logo {
    width: 193px;
    height: 40px;
    background: url(/assets/img/logo-wh.png) no-repeat center center;
  }
  .m-gnb__top-logo > a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .m-gnb__top-trigger {
    width: 40px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }
  .m-gnb__top-trigger > span {
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: #fff;
  }
  .m-gnb__link {
    display: none;
  }
  .m-gnb .tel {
    display: none;
  }
  .m-gnb.open {
    background-color: #fff;
    height: 100vh;
  }
  .m-gnb.open .m-gnb__top-logo {
    background: url(/assets/img/logo-color.png) no-repeat center center;
  }
  .m-gnb.open .m-gnb__top-trigger {
    position: relative;
  }
  .m-gnb.open .m-gnb__top-trigger > span {
    position: absolute;
    top: 50%;
    background-color: #295d60;
  }
  .m-gnb.open .m-gnb__top-trigger > span:nth-child(1) {
    transform: rotate(45deg) translateY(-50%);
  }
  .m-gnb.open .m-gnb__top-trigger > span:nth-child(2) {
    display: none;
  }
  .m-gnb.open .m-gnb__top-trigger > span:nth-child(3) {
    transform: rotate(-45deg) translateY(-50%);
  }
  .m-gnb.open .m-gnb__link {
    display: flex;
    flex-wrap: wrap;
  }
  .m-gnb.open .m-gnb__link > li {
    width: 50%;
    font-size: 16px;
    padding: 0 30px;
  }
  .m-gnb.open .m-gnb__link > li > a {
    display: block;
    font-weight: 600;
    font-size: 20px;
    padding: 20px 0 16px 10px;
    border-bottom: 1px solid #ddd;
  }
  .m-gnb.open .m-gnb__sublist {
    margin-top: 10px;
  }
  .m-gnb.open .m-gnb__sublist > li {
    padding: 10px 10px;
  }
  .m-gnb.open .m-gnb__sublist > li > a > strong {
    font-weight: 500;
  }
  .m-gnb.open .tel {
    display: block;
    margin: 40px;
    padding-top: 20px;
    font-size: 24px;
    font-weight: 600;
    border-top: 1px solid #ddd;
    color: #295d60;
  }
  .header {
    display: none !important;
  }
}
@media (max-width: 768px) {
  body.no-scroll {
    overflow: hidden;
    height: 100vh;
  }
  .m-gnb {
    display: block;
    position: fixed;
    z-index: 100000;
    width: 100%;
    overflow-y: auto;
    transition: 0.5s;
    /* open */
  }
  .m-gnb__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
  }
  .m-gnb__top-logo {
    width: 143px;
    height: 40px;
    background: url(/assets/img/logo-wh.png) no-repeat center center;
    background-size: contain;
  }
  .m-gnb__top-logo > a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .m-gnb__top-trigger {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }
  .m-gnb__top-trigger > span {
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: #fff;
  }
  .m-gnb__top.mover .m-gnb__top-logo {
    width: 143px !important;
    height: 40px !important;
    background-size: contain;
  }
  .m-gnb__link {
    display: none;
  }
  .m-gnb .tel {
    display: none;
  }
  .m-gnb.open {
    display: block;
    background-color: #fff;
    height: 100vh;
  }
  .m-gnb.open .m-gnb__top-logo {
    background: url(/assets/img/logo-color.png) no-repeat center center;
    background-size: contain;
  }
  .m-gnb.open .m-gnb__top-trigger {
    position: relative;
  }
  .m-gnb.open .m-gnb__top-trigger > span {
    position: absolute;
    top: 50%;
    background-color: #295d60;
  }
  .m-gnb.open .m-gnb__top-trigger > span:nth-child(1) {
    transform: rotate(45deg) translateY(-50%);
  }
  .m-gnb.open .m-gnb__top-trigger > span:nth-child(2) {
    display: none;
  }
  .m-gnb.open .m-gnb__top-trigger > span:nth-child(3) {
    transform: rotate(-45deg) translateY(-50%);
  }
  .m-gnb.open .m-gnb__link {
    display: block;
  }
  .m-gnb.open .m-gnb__link > li {
    font-size: 14px;
    padding: 0 14px;
  }
  .m-gnb.open .m-gnb__link > li > a {
    display: block;
    font-weight: 600;
    font-size: 16px;
    padding: 20px 0 16px 10px;
    border-bottom: 1px solid #ddd;
  }
  .m-gnb.open .m-gnb__sublist {
    margin-top: 10px;
  }
  .m-gnb.open .m-gnb__sublist > li {
    padding: 10px 10px;
  }
  .m-gnb.open .m-gnb__sublist > li > a > strong {
    font-weight: 500;
  }
  .m-gnb.open .tel {
    display: block;
    margin: 20px;
    padding-top: 20px;
    font-size: 24px;
    font-weight: 600;
    border-top: 1px solid #ddd;
    color: #295d60;
  }
  .header {
    display: none !important;
  }
  .top {
    flex-direction: column;
    justify-content: end;
    align-items: start;
    gap: 40px;
    padding: 0 40px 40px;
    height: 420px;
  }
  .top .title__main {
    font-size: 50px;
  }
  .top .breadcrumb__link {
    margin-left: 0;
    margin-right: 20px;
  }
}
#footer {
  color: #fff;
}

.footer {
  width: 100%;
  height: 540px;
  background-color: #000;
  padding: 80px;
  color: #e4e4f0;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.footer__logo {
  width: 193px;
  height: 40px;
}
.footer hr {
  border: none;
  height: 1px;
  background-color: #545458;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-top: 40px;
}
.footer__sitemap {
  display: flex;
}
.footer__sitemap-list {
  margin-right: 40px;
}
.footer__sitemap-list > li {
  margin-bottom: 10px;
}
.footer__select {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  font-family: "Pretendard Variable", sans-serif;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.178);
  color: #fff;
}
.footer__select > option {
  background-color: #2d2d2d;
  padding: 10px;
}

@media (min-width: 768px) and (max-width: 1300px) {
  .footer {
    height: 440px;
    padding: 60px;
  }
  .footer__sitemap {
    font-size: 14px;
  }
  .footer__bottom {
    padding-top: 30px;
    flex-direction: column;
  }
  .footer__select {
    margin-top: 20px;
  }
}
@media (max-width: 768px) {
  .footer {
    height: 250px;
    padding: 20px;
  }
  .footer__inner > hr {
    display: none;
  }
  .footer__top {
    align-items: start;
  }
  .footer__sitemap {
    display: none;
  }
  .footer__bottom {
    padding-top: 0;
    justify-content: end;
  }
  .footer__logo {
    width: 143px;
    height: 40px;
  }
  .footer__logo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
/**
 * 팝업(그누보드 새창) — _inc/popup.php 가 그린다.
 *
 * 뒤를 덮고 쪽을 잠근다. 알림이 아니라 관문이라, 먼저 읽고 닫아야 지나간다.
 * 여러 장을 한꺼번에 띄울 수 있고, 딤은 몇 장이 뜨든 한 겹만 깔린다 —
 * 장마다 깔면 두 장일 때 뒤가 두 번 어두워져 그림자처럼 보인다.
 */
.smgpop {
  position: fixed;
  inset: 0;
  z-index: 99000; /* 헤더(999)보다 위, 산단맵 크게보기(100001)보다는 아래 */
  /* 자리를 정하지 않은(가운데) 팝업들이 사는 줄.
     여러 장을 다 "가운데" 로 두면 완전히 포개져 한 장만 보이므로 나란히 세운다.
     화면이 좁으면 줄을 바꾸고, 그래도 넘치면 이 줄이 세로로 구른다. */
  /* 머리줄·본문·단추줄을 세로로 쌓고, 남는 자리를 본문이 가져간다.
     높이를 숫자로 못 박지 않는 이유 — 머리줄은 제목을 적었을 때만 생기고,
     제목이 길면 두 줄이 된다. 못 박으면 그때마다 단추줄이 상자 밖으로 밀린다. */
  /* 제목줄. 관리화면의 "팝업 제목" 을 적어 두었을 때만 생긴다. */
  /* 관리화면에서 자리를 적은 것 */
  /* 그중 좌측만 0 인 것 — 그 줄에서 가로만 가운데.
     transform 으로 맞추면 위 애니메이션과 자리를 다투므로 margin:auto 로 맞춘다. */
  /* 관리자가 편집기로 넣은 글.
     높이는 글이 정한다 — 관리화면의 "높이" 는 최소값으로만 쓴다.
     그것을 최대값으로 쓰면, 300 으로 적어 둔 팝업에 넉 줄만 더 써도
     팝업 안에서 스크롤이 생긴다. 알림 한 장을 읽는 데 스크롤을 시킬 일이 아니다.

     화면을 넘길 때만 구른다. 그때는 자르는 것보다 구르는 편이 낫다 —
     잘린 글은 무엇을 알리려던 것인지 알 수 없다.
     (140px 은 위아래 여백과 단추줄 몫) */
  /* 닫기가 오른쪽 — 오른손이 가는 자리이고, 둘을 가르는 줄이 있어야
     "오늘 하루" 를 누르려다 닫기를 누르는 일이 준다. */
}
.smgpop__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: smgpop-dim 0.2s ease-out;
}
.smgpop__row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
  overflow: auto;
  /* 이 줄을 다 굴린 뒤에도 휠을 계속 돌리면 뒤쪽 쪽으로 넘어간다 — 여기서 끊는다 */
  overscroll-behavior: contain;
  pointer-events: none; /* 빈 자리를 누르면 딤에 닿는다 */
}
.smgpop__row > * {
  pointer-events: auto;
}
.smgpop__item {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  width: var(--pop-w, 400px);
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  flex: 0 0 auto;
  /* 들어올 때 살짝 떠오른다 — 갑자기 나타나면 화면이 튄 것처럼 읽힌다 */
  animation: smgpop-in 0.22s ease-out;
}
.smgpop__head {
  flex: none;
  margin: 0;
  padding: 16px 24px 14px;
  border-bottom: 1px solid #e5e5e8;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #1b1b1f;
}
.smgpop__item--at {
  position: absolute;
}
.smgpop__item--cx {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.smgpop__body {
  /* 남는 자리를 다 가져가되, 좁으면 줄어든다.
     관리화면의 "높이" 는 최소값으로 쓰는데, 화면이 짧을 때까지 지키면
     단추줄이 밖으로 밀려난다 — 그래서 화면 높이의 절반에서 멈춘다. */
  flex: 1 1 auto;
  min-height: min(var(--pop-h, 0px), 50vh);
  overflow: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  padding: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #2e2e31;
  /* 그림 한 장뿐인 팝업(대개 공고문 이미지)은 가장자리까지 채운다.
     여백에 가두면 그림이 그만큼 작아져 글씨가 안 읽힌다. */
  /* 편집기로 쓴 글의 생김새.
     _reset.scss 가 * { margin:0 } 과 li { list-style:none } 으로 다 지워 놓아,
     이대로 두면 제목도 본문도 목록도 같은 크기로 납작하게 나온다 —
     무엇이 제목인지 알 수 없다. 여기서 되살린다. */
  /* 첫 줄 위와 마지막 줄 아래에는 여백을 더하지 않는다 —
     상자의 안쪽 여백과 겹쳐 위아래가 벌어져 보인다. */
}
.smgpop__body--bare {
  padding: 0;
}
.smgpop__body h1, .smgpop__body h2, .smgpop__body h3, .smgpop__body h4, .smgpop__body h5 {
  margin: 18px 0 8px;
  font-weight: 700;
  line-height: 1.35;
  color: #1b1b1f;
}
.smgpop__body h1 {
  font-size: 22px;
}
.smgpop__body h2 {
  font-size: 20px;
}
.smgpop__body h3 {
  font-size: 18px;
}
.smgpop__body h4, .smgpop__body h5 {
  font-size: 16px;
}
.smgpop__body p {
  margin: 0 0 10px;
}
.smgpop__body ul, .smgpop__body ol {
  margin: 0 0 10px;
  padding-left: 20px;
}
.smgpop__body ul li {
  list-style: disc;
}
.smgpop__body ol li {
  list-style: decimal;
}
.smgpop__body li {
  margin: 2px 0;
}
.smgpop__body strong, .smgpop__body b {
  font-weight: 700;
}
.smgpop__body em, .smgpop__body i {
  font-style: italic;
}
.smgpop__body a {
  color: #00808f;
  text-decoration: underline;
}
.smgpop__body a:hover {
  text-decoration: none;
}
.smgpop__body hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid #e5e5e8;
}
.smgpop__body table {
  width: 100%;
  margin: 0 0 10px;
  border-collapse: collapse;
  font-size: 14px;
}
.smgpop__body table th, .smgpop__body table td {
  padding: 6px 8px;
  border: 1px solid #e5e5e8;
  text-align: left;
}
.smgpop__body table th {
  background: #fafafa;
  font-weight: 600;
}
.smgpop__body img {
  max-width: 100%;
  height: auto;
  display: block;
}
.smgpop__body > :first-child {
  margin-top: 0;
}
.smgpop__body > :last-child {
  margin-bottom: 0;
}
.smgpop__foot {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #e5e5e8;
  background: #fafafa;
}
.smgpop__foot button {
  flex: 1;
  padding: 12px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #52525b;
  cursor: pointer;
}
.smgpop__foot button:hover {
  background: #f1f1f3;
}
.smgpop__close {
  flex: 0 0 96px !important;
  border-left: 1px solid #e5e5e8 !important;
  font-weight: 600;
  color: #1b1b1f !important;
}

/* 떠 있는 동안 쪽을 잠근다.
   body 가 아니라 html 에 건다 — 이 사이트는 html 이 스크롤러라,
   body 의 overflow 를 막으면 그 순간 보던 자리가 맨 위로 튄다.
   (산단맵의 smap-open 과 같은 이유다)

   잠그면 스크롤막대가 사라져 그만큼 화면이 넓어지고 본문이 옆으로 밀린다.
   그 폭만큼 오른쪽에 여백을 채워 밀림을 없앤다 — 폭은 JS 가 재어 넣는다.

   scrollbar-gutter 로 자리를 비워 두는 방법을 먼저 썼는데, 그게 오히려 띠를 만들었다.
   자리를 비우면 화면의 기준폭(초기 컨테이닝 블록)이 그만큼 좁아지고,
   position:fixed; inset:0 인 딤은 그 좁아진 폭까지만 간다 — 비워 둔 자리가
   덮이지 않은 채 하얗게 남는다. (산단맵 크게보기에서 15px 띠가 남던 것과 같은 원인)

   그래서 여기서는 비워 두지 않는다. 산단맵 CSS 가 html 에 걸어 둔 것도
   떠 있는 동안만 풀어, 딤이 화면 끝까지 닿게 한다. */
html.smg-pop-open {
  overflow: hidden;
  scrollbar-gutter: auto;
}

@keyframes smgpop-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes smgpop-dim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 좁은 화면에서는 관리화면이 정해 둔 자리를 버린다.
   left:520px 같은 값은 폰에서 화면 밖이다 — 자리를 떼고 줄의 흐름에 태운다.
   그러면 여러 장이 위아래로 쌓이고, 넘치면 줄이 통째로 구른다. */
@media (max-width: 720px) {
  .smgpop__item--at {
    position: static;
    left: auto !important;
    top: auto !important;
    margin: 0;
  }
  .smgpop__row {
    padding: 16px;
    align-content: center;
  }
  .smgpop__item {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 32px);
  }
  .smgpop__head {
    padding: 14px 18px 12px;
    font-size: 16px;
  }
  /* 폰에서는 "높이" 최소값을 버린다 — 세로가 좁아 최소를 지키면 단추가 밀려난다.
     (상자 높이는 .smgpop__item 의 max-height 가 잡고, 본문이 남는 자리를 가져간다) */
  .smgpop__body {
    min-height: 0;
    padding: 18px;
  }
  .smgpop__body--bare {
    padding: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .smgpop__item,
  .smgpop__dim {
    animation: none;
  }
}