/* BASIC css start */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* 풍류 모바일 기본 하단 통합 CSS
   고객센터·계좌·안내·회사정보 + 둥근 직사각형 유리 메뉴바를 모두 포함합니다.
   기존 하단 정보 CSS와 유리바 CSS/추가 패치를 이 코드 하나로 교체하세요.
   style 태그 없이 입력합니다. 다른 영역의 CSS는 변경하지 않습니다. */

/* ===== A. 하단 정보 ===== */
/* 1. 공통 설정 */
#prmf-footer {
  --prmf-font: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --prmf-edge: 16px;
  --prmf-line: #ededed;

  position: relative;
  display: block;
  float: none;
  clear: both;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: none;
  color: #222;
  font-family: var(--prmf-font) !important;
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

#prmf-footer,
#prmf-footer *,
#prmf-footer *::before,
#prmf-footer *::after {
  box-sizing: border-box;
}

#prmf-footer * {
  font-family: var(--prmf-font) !important;
}

#prmf-footer p,
#prmf-footer h2,
#prmf-footer ul,
#prmf-footer li {
  margin: 0;
  padding: 0;
}

#prmf-footer ul,
#prmf-footer li {
  list-style: none;
}

#prmf-footer a {
  color: inherit;
  text-decoration: none;
}

#prmf-footer .prmf-inner {
  width: 100%;
  min-width: 0;
  max-width: 768px;
  margin: 0 auto;
  padding-right: var(--prmf-edge);
  padding-left: var(--prmf-edge);
}

#prmf-support,
#prmf-links,
#prmf-company {
  position: relative;
  display: block;
  float: none;
  clear: both;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
}

/* 2. 고객센터 / 계좌정보 */
#prmf-support {
  border-top: 1px solid var(--prmf-line);
}

#prmf-support .prmf-inner {
  padding-top: 24px;
  padding-bottom: 24px;
}

#prmf-support .prmf-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

#prmf-support .prmf-support-column {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#prmf-support .prmf-bank {
  align-self: stretch;
  padding-left: 16px;
  border-left: 1px solid var(--prmf-line);
}

#prmf-support .prmf-label {
  margin-bottom: 11px;
  color: #737373;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1px;
}

#prmf-support .prmf-phone {
  margin-bottom: 10px;
  color: #171717;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#prmf-support .prmf-hours {
  color: #666;
  font-size: 12px;
  line-height: 1.7;
}

#prmf-support .prmf-hours p {
  display: flex;
  flex-wrap: wrap;
  column-gap: 7px;
}

#prmf-support .prmf-hours span {
  display: inline;
  white-space: nowrap;
}

#prmf-support .prmf-open {
  margin-top: 8px;
  color: #444;
  font-size: 12px;
  font-weight: 600;
}

#prmf-support .prmf-note {
  margin-top: 2px;
  color: #777;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#prmf-support .prmf-bank-name {
  margin-bottom: 5px;
  color: #222;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

#prmf-support .prmf-account {
  color: #222;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.25px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#prmf-support .prmf-owner {
  margin-top: 8px;
  color: #666;
  font-size: 11px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 3. 매장안내 / 이용약관 / 개인정보처리방침 / 이용안내 */
#prmf-links > ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 768px;
  margin: 0 auto;
  padding: 6px var(--prmf-edge);
  border: 0;
  border-top: 1px solid var(--prmf-line);
  background: transparent;
}

#prmf-links > ul::before,
#prmf-links > ul::after,
#prmf-links li::before,
#prmf-links li::after {
  content: none;
  display: none;
}

#prmf-links > ul > li {
  position: relative;
  display: block;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#prmf-links > ul > li + li::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  width: 1px;
  height: 10px;
  background: #e4e4e4;
  transform: translateY(-50%);
  pointer-events: none;
}

#prmf-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.3px;
  text-align: center;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

#prmf-links a.prmf-privacy {
  color: #222;
  font-weight: 700;
}

#prmf-links a:active {
  color: #111;
}

#prmf-links a:focus-visible {
  outline: 2px solid #222;
  outline-offset: -3px;
}

/* 4. 회사정보 */
#prmf-company .prmf-inner {
  padding-top: 21px;
  padding-bottom: 26px;
  border-top: 1px solid var(--prmf-line);
}

#prmf-company .prmf-company-name {
  margin-bottom: 12px;
  color: #222;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.45px;
}

#prmf-company .prmf-company-details {
  color: #666;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: -0.1px;
}

#prmf-company .prmf-company-details p {
  min-width: 0;
  margin-bottom: 2px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#prmf-company .prmf-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

#prmf-company .prmf-detail-row > span {
  display: block;
  min-width: 0;
}

#prmf-company .prmf-address {
  margin-top: 4px;
}

#prmf-company .prmf-copyright {
  margin-top: 16px;
  color: #777;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1px;
  overflow-wrap: anywhere;
}

/* 5. 작은 휴대폰 */
@media (max-width: 359px) {
  #prmf-footer { --prmf-edge: 12px; }
  #prmf-support .prmf-support-grid { gap: 14px; }
  #prmf-support .prmf-bank { padding-left: 12px; }
  #prmf-support .prmf-phone { font-size: 20px; }
  #prmf-support .prmf-account { font-size: 12px; }
  #prmf-links a { font-size: 11px; }
}

/* ===== B. 고정 유리 메뉴바 ===== */
/* 1. 크기와 여백 설정 */
:root {
  --prdock-max-width: 410px;
  --prdock-edge: 16px;
  --prdock-height: 64px;
  --prdock-bottom: 4px;
  --prdock-icon-size: 29px;
  --prdock-radius: 20px;
  --prdock-item-radius: 14px;

  --prdock-font: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* 2. 기본 상태: 기존 JS가 허용한 페이지에서만 표시 */
#prdock,
#prdock-space {
  display: none;
}

#prdock[hidden],
#prdock-space[hidden] {
  display: none !important;
}

#prdock,
#prdock *,
#prdock *::before,
#prdock *::after {
  box-sizing: border-box;
}

#prdock * {
  font-family: var(--prdock-font) !important;
}

/* 3. 본문 마지막 내용이 메뉴바에 가려지지 않도록 공간 확보 */
html.prdock-enabled #prdock-space {
  display: block;
  clear: both;
  width: 100%;
  height: calc(
    var(--prdock-height) + var(--prdock-bottom) +
    env(safe-area-inset-bottom, 0px) + 16px
  );
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* 4. 바깥 둥근 직사각형 유리 메뉴바 */
html.prdock-enabled #prdock {
  position: fixed !important;
  z-index: 190;

  top: auto !important;
  right: var(--prdock-edge) !important;
  bottom: calc(
    var(--prdock-bottom) + env(safe-area-inset-bottom, 0px)
  ) !important;
  left: var(--prdock-edge) !important;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;

  width: auto;
  max-width: var(--prdock-max-width);
  height: var(--prdock-height);
  margin: 0 auto !important;
  padding: 5px;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--prdock-radius);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 255, 255, .22) 45%,
    rgba(226, 235, 244, .32) 100%
  );

  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);

  box-shadow:
    0 8px 28px rgba(25, 38, 53, .14),
    0 2px 6px rgba(25, 38, 53, .05),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(125, 151, 177, .16);

  color: #222;
  font-family: var(--prdock-font) !important;
  line-height: 1;
  text-align: center;
  -webkit-text-size-adjust: 100%;

  /* 바 전체에는 이동 효과를 적용하지 않습니다. */
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
}

/* 5. 선택된 메뉴 뒤의 둥근 직사각형 유리 선택 표시
   너비·가로 위치·표시 여부는 기존 JS에서 제어합니다. */
#prdock .prdock-active {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;

  display: block;
  width: 0;
  margin: 0;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--prdock-item-radius);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, .82) 0%,
    rgba(255, 255, 255, .26) 48%,
    rgba(195, 211, 229, .42) 100%
  );

  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);

  box-shadow:
    0 2px 8px rgba(35, 52, 73, .12),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 1px rgba(109, 137, 167, .20);

  opacity: 0;
  pointer-events: none;
}

/* 메뉴바는 고정하고 선택 표시만 좌우로 이동 */
#prdock[data-prdock-animated] .prdock-active {
  transition:
    transform 220ms cubic-bezier(.22, .8, .25, 1),
    width 220ms ease,
    opacity 120ms ease;
}

/* 6. 아이콘 버튼: 텍스트 공간 없이 중앙 정렬 */
#prdock .prdock-item {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;

  float: none;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: var(--prdock-item-radius);
  background: transparent;
  color: #434a52;
  text-decoration: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

/* 아이콘 확대: 29px */
#prdock .prdock-item > svg {
  display: block;
  flex: 0 0 var(--prdock-icon-size);
  width: var(--prdock-icon-size) !important;
  height: var(--prdock-icon-size) !important;
  margin: 0 !important;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* 메뉴 이름은 화면에서만 숨기고 화면 읽기용 이름은 유지 */
#prdock .prdock-item > span {
  position: absolute !important;
  display: block;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 선택된 아이콘 */
#prdock .prdock-item[aria-current],
#prdock .prdock-item[aria-expanded="true"] {
  color: #151a20;
}

/* 누르는 순간에도 유리 느낌 유지 */
#prdock .prdock-item:active {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, .58),
    rgba(202, 219, 235, .28)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

#prdock .prdock-item:focus-visible {
  outline: 2px solid #222;
  outline-offset: -3px;
}

/* 7. 기존 입력 키보드 감지 동작 유지: 메뉴바만 잠시 숨김 */
html.prdock-keyboard #prdock {
  visibility: hidden;
  pointer-events: none;
}

/* 작은 휴대폰: 기존 메뉴바 높이·좌우 여백 유지 */
@media (max-width: 359px) {
  :root {
    --prdock-edge: 12px;
    --prdock-height: 62px;
  }
}

/* PC 화면에서는 숨김 */
@media (min-width: 769px) {
  html.prdock-enabled #prdock,
  html.prdock-enabled #prdock-space {
    display: none !important;
  }
}

/* 8. 배경 흐림 미지원 환경 */
@supports not (
  (backdrop-filter: blur(1px)) or
  (-webkit-backdrop-filter: blur(1px))
) {
  html.prdock-enabled #prdock {
    background: rgba(245, 248, 251, .96);
  }

  #prdock .prdock-active {
    background: linear-gradient(145deg, #ffffff, #dce5ee);
  }
}

/* 동작 줄이기 설정 */
@media (prefers-reduced-motion: reduce) {
  #prdock .prdock-active {
    transition: none !important;
  }
}

/* 투명도 줄이기 설정 */
@media (prefers-reduced-transparency: reduce) {
  html.prdock-enabled #prdock {
    background: #f4f6f8;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #prdock .prdock-active {
    background: linear-gradient(145deg, #ffffff, #dce5ee);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

div.F-5864-1-2539 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:repeat left top; border-top:0px solid ; border-right:0px solid ; border-bottom:0px solid ; border-left:0px solid ; }
/* BASIC css end */

