@font-face {
  font-family: 'GMarketSans';
  src: url('../font/GmarketSansTTFLight.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'GMarketSans';
  src: url('../font/GmarketSansTTFMedium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'GMarketSans';
  src: url('../font/GmarketSansTTFBold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'SUITE';
  src: url('../font/SUITE-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'SUITE';
  src: url('../font/SUITE-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'SUITE';
  src: url('../font/SUITE-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

input[type="text"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], textarea{
  font-family: 'SUITE';
  font-size: 12px;
}

.sp-ico, .evt-toggle-form .circle-checkbox:after, .ui-circle-radio:after, .community-make .cover .swiper-button-prev, .community-make .cover .swiper-button-next, .community-make .theme .active:after {
  background: transparent url("../img/layout/sp-icon@1x.png") no-repeat; }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 1.33dppx) {
    .sp-ico, .evt-toggle-form .circle-checkbox:after, .ui-circle-radio:after, .community-make .cover .swiper-button-prev, .community-make .cover .swiper-button-next, .community-make .theme .active:after {
      background-image: url("../img/layout/sp-icon@2x.png");
      background-size: 250px 500px; } }

.sp-ico {
  display: inline-block;
  text-align: left;
  text-indent: -9999px;
  overflow: hidden; }

.ico-myinfo {
  width: 10px;
  height: 12px;
  background: url("../img/layout/ico_myinfo.png") no-repeat;
  background-size: contain; }

.ico-payment {
  width: 15px;
  height: 10px;
  background: url("../img/layout/ico_payment.png") no-repeat;
  background-size: contain; }

.ico-hamburger {
  width: 14px;
  height: 12px;
  background-position: 0 0; }

.ico-search {
  width: 17px;
  height: 16px;
  background-position: -19px 0; }

.ico-arrow-right {
  width: 6px;
  height: 11px;
  background-position: -41px 0; }

.ico-arrow-down {
  width: 11px;
  height: 6px;
  background-position: -52px 0; }

.ico-close {
  width: 11px;
  height: 11px;
  background-position: -68px 0; }

.ico-arrow-down2 {
  width: 19px;
  height: 11px;
  background-position: -83px 0; }

.ico-blocks {
  width: 13px;
  height: 13px;
  background-position: -106px 0; }

.ico-arrow-left {
  width: 11px;
  height: 19px;
  background-position: -124px 0; }

.ico-arrow-down3 {
  width: 19px;
  height: 11px;
  background-position: -140px 0; }

.ico-arrow-left2 {
  width: 11px;
  height: 19px;
  background-position: -164px 0; }

.ico-setting {
  width: 22px;
  height: 22px;
  background-position: -180px 0; }

.ico-close3 {
  width: 8px;
  height: 8px;
  background-position: -234px 0; }

.ico-heart {
  width: 12px;
  height: 12px;
  background-position: 0 -36px; }

.ico-persons {
  width: 9px;
  height: 12px;
  background-position: -17px -36px; }

.ico-heart2 {
  width: 10px;
  height: 12px;
  background-position: -31px -36px; }

.ico-talk {
  width: 12px;
  height: 12px;
  background-position: -46px -36px; }

.ico-share {
  width: 10px;
  height: 12px;
  background-position: -63px -36px; }

.ico-heart3 {
  width: 12px;
  height: 12px;
  background-position: -78px -36px; }

.ico-talk2 {
  width: 12px;
  height: 12px;
  background-position: -95px -36px; }

.ico-share2 {
  width: 10px;
  height: 12px;
  background-position: -112px -36px; }

.ico-speaker {
  width: 12px;
  height: 9px;
  background-position: -127px -36px; }

.ico-heart5 {
  width: 14px;
  height: 12px;
  background-position: -144px -36px; }

.ico-talk5 {
  width: 15px;
  height: 13px;
  background-position: -163px -36px; }

.ico-share4 {
  width: 13px;
  height: 14px;
  background-position: -183px -36px; }

.ico-camera2 {
  width: 18px;
  height: 15px;
  background-position: -201px -36px; }

.ico-camera3 {
  width: 15px;
  height: 13px;
  background-position: -224px -36px; }

.ico-person {
  width: 25px;
  height: 31px;
  background-position: 0 -68px; }

.ico-mail {
  width: 36px;
  height: 24px;
  background-position: -30px -68px; }

.ico-search2 {
  width: 30px;
  height: 30px;
  background-position: -71px -68px; }

.ico-persons2 {
  width: 23px;
  height: 23px;
  background-position: -106px -68px; }

.ico-camera {
  width: 26px;
  height: 21px;
  background-position: -134px -68px; }

.ico-talk4 {
  width: 25px;
  height: 22px;
  background-position: -165px -68px; }

.ico-calendar {
  width: 25px;
  height: 22px;
  background-position: -195px -68px; }

.ico-search3 {
  width: 24px;
  height: 24px;
  background-position: -225px -68px; }

.ico-notice {
  width: 19px;
  height: 20px;
  background-position: 0 -119px; }

.ico-community {
  width: 19px;
  height: 20px;
  background-position: -24px -119px; }

.ico-planet {
  width: 19px;
  height: 20px;
  background-position: -48px -119px; }

.ico-poll {
  width: 19px;
  height: 20px;
  background-position: -72px -119px; }

.ico-preferences {
  width: 19px;
  height: 20px;
  background-position: -96px -119px; }

.ico-heart4 {
  width: 17px;
  height: 16px;
  background-position: -120px -119px; }

.ico-talk3 {
  width: 17px;
  height: 16px;
  background-position: -142px -119px; }

.ico-share3 {
  width: 17px;
  height: 16px;
  background-position: -164px -119px; }

.ico-zoom {
  width: 17px;
  height: 16px;
  background-position: -183px -119px; }

.ico-eye {
  width: 17px;
  height: 16px;
  background-position: -202px -119px; }

.ico-trash {
  width: 11px;
  height: 13px;
  background-position: -221px -119px; }

.ico-plusBook {
  width: 23px;
  height: 26px;
  background-position: -51px -159px; }

.ico-searchBook {
  width: 24px;
  height: 24px;
  background-position: -78px -159px; }

.ico-new {
  width: 26px;
  height: 27px;
  background-position: -105px -159px; }

.ico-alert {
  width: 26px;
  height: 27px;
  background-position: -136px -159px; }

.ico-circle-d {
  width: 24px;
  height: 24px;
  background-position: -167px -159px; }

.ico-circle-good {
  width: 24px;
  height: 24px;
  background-position: -196px -159px; }

.ico-check-white {
  width: 16px;
  height: 10px;
  background-position: -65px -191px; }

.ico-check-blue {
  width: 16px;
  height: 10px;
  background-position: -86px -191px; }

.ico-image {
  width: 16px;
  height: 18px;
  background-position: -107px -191px; }

.ico-more {
  width: 4px;
  height: 16px;
  background-position: -128px -191px; }

.ico-arrow-left3 {
  width: 8px;
  height: 14px;
  background-position: -137px -191px; }

.ico-arrow-right2 {
  width: 8px;
  height: 14px;
  background-position: -150px -191px; }

.ico-more2 {
  width: 4px;
  height: 21px;
  background-position: -163px -191px; }

.ico-plus {
  width: 14px;
  height: 14px;
  background-position: -172px -191px; }

.ico-plus-member {
  width: 24px;
  height: 26px;
  background-position: -191px -191px; }

.ico-more3 {
  width: 4px;
  height: 21px;
  background-position: -220px -191px; }

.ico-plus-member2 {
  width: 14px;
  height: 16px;
  background-position: -229px -191px; }

.ico-arrow-cramps {
  width: 10px;
  height: 10px;
  background-position: -225px -159px; }

.ico-mail2 {
  width: 22px;
  height: 15px;
  background-position: 0 -241px; }

.ico-talk6 {
  width: 20px;
  height: 18px;
  background-position: -27px -241px; }

.ico-plus2 {
  width: 20px;
  height: 20px;
  background-position: -82px -241px; }

.ico-search4 {
  width: 24px;
  height: 24px;
  background-position: -127px -241px; }

.ico-close2 {
  width: 19px;
  height: 19px;
  background-position: -156px -241px; }

.ico-arrow-left4 {
  width: 9px;
  height: 16px;
  background-position: -180px -241px; }

.ico-arrow-right3 {
  width: 9px;
  height: 16px;
  background-position: -194px -241px; }

.ico-arrow-mic {
  width: 19px;
  height: 27px;
  background-position: -208px -241px; }

.ico-lock {
  width: 13px;
  height: 19px;
  background-position: -232px -241px; }

.ico-photo {
  width: 42px;
  height: 42px;
  background-position: 0 -284px; }

.ico-media {
  width: 42px;
  height: 42px;
  background-position: -47px -284px; }

.ico-location {
  width: 42px;
  height: 42px;
  background-position: -94px -284px; }

.ico-document {
  width: 42px;
  height: 42px;
  background-position: -141px -284px; }

.ico-hamburger2 {
  width: 17px;
  height: 16px;
  background-position: -188px -284px; }

.ico-close4 {
  width: 15px;
  height: 15px;
  background-position: -188px -311px; }

.ico-search5 {
  width: 17px;
  height: 17px;
  background-position: -210px -284px; }

.ico-search6 {
  width: 17px;
  height: 17px;
  background-position: -210px -309px; }

.ico-trash2 {
  width: 14px;
  height: 17px;
  background-position: -232px -284px; }

.ico-pen {
  width: 26px;
  height: 25px;
  background-position: 0 -351px; }

.ico-person2 {
  width: 18px;
  height: 18px;
  background-position: -31px -351px; }

.ico-flag {
  width: 16px;
  height: 17px;
  background-position: -54px -351px; }

.ico-cap {
  width: 21px;
  height: 15px;
  background-position: -75px -351px; }

.ico-at {
  width: 17px;
  height: 18px;
  background-position: -101px -351px; }

.ico-cake {
  width: 18px;
  height: 16px;
  background-position: -123px -351px; }

.ico-arrow-down4 {
  width: 16px;
  height: 9px;
  background-position: -146px -351px; }

.ico-arrow-up {
  width: 16px;
  height: 9px;
  background-position: -167px -351px; }

.ico-zoom3 {
  width: 25px;
  height: 25px;
  background-position: -188px -351px; }

.ico-heart6 {
  width: 25px;
  height: 21px;
  background-position: 0 -386px; }

.ico-talk7 {
  width: 25px;
  height: 21px;
  background-position: -30px -386px; }

.ico-eye2 {
  width: 22px;
  height: 22px;
  background-position: -60px -386px; }

.ico-zoom2 {
  width: 22px;
  height: 22px;
  background-position: -87px -386px; }

.ico-heart6.on {
  width: 25px;
  height: 21px;
  background-position: -114px -386px; }

.ico-pen2 {
  width: 13px;
  height: 14px;
  background-position: -144px -386px; }

.ico-head {
  width: 13px;
  height: 14px;
  background-position: -144px -386px; }

.ico-heart4.on {
  width: 17px;
  height: 16px;
  background-position: -162px -385px; }

.ico-heart5.on {
  width: 14px;
  height: 12px;
  background-position: -184px -385px; }

.ico-my-community {
  width: 34px;
  height: 25px;
  background-position: 0 -425px; }

.ico-kdaWeb {
  width: 19px;
  height: 15px;
  background-position: 0 -141px; }

.rg-icon {
  position: relative;
  display: block; }
  .rg-icon:before, .rg-icon:after {
    content: '';
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out; }
  .rg-icon.cross {
    width: 19px;
    height: 19px; }
    .rg-icon.cross i {
      display: none; }
    .rg-icon.cross:before, .rg-icon.cross:after {
      position: absolute;
      left: 50%;
      top: 50%;
      display: block;
      background: #848484;
      transition: all 0.25s ease-out;
      border-radius: 1em; }
    .rg-icon.cross:before {
      width: 100%;
      left: 0;
      margin-top: -1.5px;
      height: 3px; }
    .rg-icon.cross:after {
      width: 3px;
      top: 0;
      margin-left: -1.5px;
      height: 100%; }
    .rg-icon.cross.active:before, .rg-icon.cross.active:after {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      background: #262626; }

.notification-books .wrap:after, .main-spot:after, .main-community .item .bd:after, #side-navigation .bottom-banners a:after, .community-index-top:after, .community-index .my-community .body:after, .pop-community-info nav:after, .community-invite-selector .bottom:after, .community-calendar-post .datebox:after, .community-chat-body .chat-body .self:after, .planet-index .planet-items:after, .mypage-scrap .group .index:after {
  content: '';
  display: block;
  clear: both; }

.slides-items a {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); 
}  

.blind {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  visibility: hidden;
  font-size: 0;
  line-height: 0; }

/* ul */
.ui-ul {
  margin: 0;
  padding: 0;
  list-style: none; }

/* badge */
.ui-badge {
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-style: normal;
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: #fff;
  text-align: center;
  background: #dd0b01;
  border-radius: 50%; }

/* text center */
.ui-text-center {
  text-align: center; }

/* form */
.ui-form-text {
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #dfdfdf;
  background: #fff;
  -webkit-box-shadow: 0 0 0;
  border-radius: 0;
  -webkit-appearance: none; }
  .ui-form-text.block {
    display: block;
    width: 100%; }

.input_title{
    margin: 0;
    width: 100%;
    height: 40px;
    padding: 6px 15px;
    font-size: 13px;
    background: none;
    outline: none;
    border: none;
    border-radius: 0;
    color: #262626;
    border-bottom: 1px solid var(--Color-Background, #F5F7FA);
    -webkit-appearance: none;
}

.ui-form-ext {
  display: block;
  position: relative;
  border: 1px solid #dfdfdf; }
  .ui-form-ext:after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 0;
    height: 0;
    border-bottom: 12px solid #c4c4c4;
    border-left: 12px solid transparent; }
  .ui-form-ext input[type=date], .ui-form-ext input[type=time] {
    display: block;
    margin: 0;
    padding: 0 6px;
    width: 100%;
    height: 29px;
    line-height: 29px;
    border: none;
    background: #fff;
    border-radius: 0;
    -webkit-appearance: none;
    font-size: 12px !important; }
  .ui-form-ext .ui-form-text {
    border: none;
    margin: 0; }

.ui-form-checkbox {
  display: inline-block; }
  .ui-form-checkbox > * {
    vertical-align: middle;
    display: inline-block; }
  .ui-form-checkbox > span {
    font-size: 12px; }

/* button */
.ui-button {
  font-family: 'SUITE';
  display: inline-block;
  padding: 8px 20px;
  text-align: center;
  background: #FFF;
  color: #303030;
  font-size: 13px;
  border-radius: 0;
  border: 1px solid transparent;
 }
  .ui-button.border {
    border: 1px solid #dfdfdf; }
  .ui-button.color-blue {
    background: #1E3A8A;
    color: #fff; }
  .ui-button.color-skyblue {
    background: #4170D3;
    color: #fff; }
  .ui-button.color-navy {
    background: var(--Color-CommunityExample, #1E3A5F);
    color: #fff; }
  .ui-button.color-red {
    background: #e31b29;
    border: 1px solid #e31b29;
    color: #fff; }
  .ui-button.color-white {
    background: #fff; }
  .ui-button.block {
    display: block; }
  .ui-button.big {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px; }
  .ui-button.small {
    font-size: 13px;
    padding: 5px 8px; }
  .ui-button.round {
    border-radius: .4em; }
  .ui-button.disabled.color-white {
    color: #cecece; }

a.ui-button {
  text-decoration: none; }

button.ui-button {
	border-radius: 12px;
  margin: 1px 2px;
  border: none; }
  button.ui-button.block {
    width: 100%;
    margin: 0; }

/* image style */
.ui-img-border {
  border: 1px solid #dfdfdf; }

.ui-img-rounded {
  border-radius: .3em; }

/* box style */
.ui-box {
  background: #fff; 
}

.ui-box.box-rounded {
  border-radius: .4em; }

.ui-box.box-bordered {
  border: 1px solid var(--Color-Background, #F5F7FA);
}

.ui-box.no-border {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ui-box.box-margin {
  margin: 0 5px; 
}

.ui-box.box-padding {
  padding: 10px; 
}

.ui-box.mar-t {
  margin-top: 5px; 
}

.ui-box.empty span {
  display: block;
  padding: 30px 0;
  text-align: center;
  font-size: 12px;
  color: #666; 
}

.notification-books {
  position: relative;
  overflow: hidden; 
}

.notification-books a {
  position: relative;
  float: left;
  padding: 22px 0 15px;
  text-align: center;
  text-decoration: none;
  width: 25%; 
}
    .notification-books .book em {
      position: relative;
      z-index: 2;
      display: block;
      overflow: hidden;
      width: 100%;
      height: 100%;
      font-size: 34px;
      font-style: normal;
      font-weight: normal;
      color: #000;
      font-family: 'Myriad Pro';
      padding-top: 18px;
      background-size: 100% 100%;
      letter-spacing: -2px; }

.bg-category a {
  position: relative;
  float: left;
  text-decoration: none;

  display: flex;
  width: auto;
  height: 39px;
  padding: 9px 10px;
  justify-content: center;
  align-items: center;

  border-radius: 9999px;
  border: 1px solid #EEEEF3;
  background: #FFF;

  color: #60606B;
  text-align: center;
}

.bg-category {
  height: 60px;
  overflow-x: scroll;
  -ms-overflow-style: none; /* IE, Legacy Edge */
  scrollbar-width: none;    /* Firefox */
}

.bg-category::-webkit-scrollbar {
  display: none;
}

.bg-category .wrap {
  display: flex;
  width: 100%;
  height: 100%; 
  align-items: center; 
  gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
}

.bg-category .wrap > div {
  display: contents;
}

.bg-category .active{
  border-radius: 9999px;
  background: #4170D3;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.bg-category .category-title{
    position: relative;
    z-index: 2;
    display: block;
    padding: 0 8px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    color: #60606B;
    overflow: hidden;
}

.bg-category .active .category-title{
  color: #FFF;
}

.notification-books .book em {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 34px;
  font-style: normal;
  font-weight: normal;
  color: #000;
  font-family: 'Myriad Pro';
  padding-top: 18px;
  background-size: 100% 100%;
  letter-spacing: -2px; 
}
  .notification-books .kda em {
    background-image: url("../img/layout/ico-notification-book-01.png");
    color: #fff; }
  .notification-books .ass em {
    background-image: url("../img/layout/ico-notification-book-04.png");
    color: #123800; }
  .notification-books .ass2 em {
    background-image: url("../img/layout/ico-notification-book-02.png");
    color: #01597c; }
  .notification-books .bra em {
    background-image: url("../img/layout/ico-notification-book-03.png");
    color: #fff; }

  .notification-books .title {
    position: relative;
    z-index: 2;
    display: block;
    padding: 0 8px;
    font-size: 12px;
    color: #FFF;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
  .notification-books .selector {
  position: absolute;
  z-index: 999;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid #fff;
  -webkit-transform: translate(-15px, 0); }
  .notification-books .selector.animate {
    -webkit-transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out; }
  */

.bg-graycheck {
  background-color: #F5F5F7;
}

.bg-bluecheck {
  background: #232b38 url("../img/layout/bg-bluecheck.gif") repeat; }

.evt-toggle-form .circle-checkbox {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 24px;
  height: 24px;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
  text-align: left;
  background-color: #fff;
  -webkit-transition: background 0.2s ease-out;
  transition: background 0.2s ease-out; }
  .evt-toggle-form .circle-checkbox input {
    position: absolute;
    left: 40px;
    top: -20px;
    margin: 0;
    padding: 0;
    visibility: hidden; }
  .evt-toggle-form .circle-checkbox:after {
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -8px;
    width: 16px;
    height: 10px;
    background-position: -65px -191px;
    -webkit-transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  .evt-toggle-form .circle-checkbox.active {
    background-color: #0456d1;
    border: none; }
    .evt-toggle-form .circle-checkbox.active:after {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1); }

.swiper-wrapper img {
  display: block;
  max-width: 100%; }

.swiper-pagination-bullet, .swiper-pagination-bullet-active {
  background-color: #fff !important;
  width: 5px !important;
  height: 5px !important;
  margin: 0 3px !important; }

.android .swiper-wrapper {
  width: 10000px; }
  .android .swiper-wrapper .swiper-slide {
    display: block; }

.ui-small-state {
  font-size: 0; }
  .ui-small-state span {
    display: inline-block;
    padding-left: 15px;
    font-family: "SUITE", arial, sans-serif;
    font-size: 11px; }
    .ui-small-state span:first-child {
      padding-left: 0; }
    .ui-small-state span > * {
      vertical-align: middle; }
  .ui-small-state i {
    margin-right: 3px; }
  .ui-small-state em {
    font-style: normal;
    color: #262626; }

.top-search-form {
  position: relative;
  height: 50px; }
  .top-search-form fieldset {
    margin: 0;
    padding: 0 55px;
    border: none;
    height: 100%; }
  .top-search-form .keyword {
    position: relative;
    display: block;
    z-index: 2;
    height: 100%; }
    .top-search-form .keyword:before, .top-search-form .keyword:after {
      content: '';
      position: absolute;
      bottom: 11px;
      width: 1px;
      height: 5px;
      background: rgba(255, 255, 255, 0.5); }
    .top-search-form .keyword:before {
      left: 0; }
    .top-search-form .keyword:after {
      right: 0; }
    .top-search-form .keyword input {
      margin: 0;
      width: 100%;
      height: 40px;
      padding: 6px 10px 0;
      font-size: 13px;
      font-weight: bold;
      color: #fff;
      background: none;
      outline: none;
      border: none;
      border-radius: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      -webkit-appearance: none; }
  .top-search-form .placeholder {
    display: block;
    position: absolute;
    z-index: 1;
    left: 50px;
    right: 50px;
    top: 0;
    height: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff; }
  .top-search-form.dark .keyword:before, .top-search-form.dark .keyword:after {
    background: #d6d6d6; }
  .top-search-form.dark .keyword input {
    color: #262626;
    border-bottom: 1px solid #d6d6d6;
    }
  .top-search-form.dark .keyword ::-webkit-input-placeholder {
    color: #848484; }
  .top-search-form.dark .placeholder {
    color: #848484; }

.h1-subtitle {
  position: relative;
  margin: 0;
  padding: 12px 12px;
  font-size: 11px;
  color: #000;
  font-weight: bold; }

.h1-subtitle.color-gray {
  color: var(--Color-Gray-500, #9898AA);
}
  .h1-subtitle em {
    margin-left: 4px;
    font-style: normal; }
    .h1-subtitle em:before {
      content: '('; }
    .h1-subtitle em:after {
      content: ')'; }
  .h1-subtitle .more {
    position: absolute;
    display: block;
    right: 10px;
    top: 50%;
    margin-top: -12px;
    padding: 5px; }
  .h1-subtitle.col-blue em {
    color: #446fce; }
  .h1-subtitle.big {
    font-size: 16px; }

/* document index */
.idx-document .item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 120px;
  padding: 17px;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0; 
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid #EEEEF3;
}

.idx-document .items{
  gap: 10px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.idx-document .item:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  -webkit-transform-origin: 0 0;
  height: 1px;
  margin-bottom: -0.5px;
  -webkit-transform: scaleY(0.5);
}
/* 1. 부모(strong)를 Flex 컨테이너로 변경 */
.idx-document .bd strong {
    display: flex;          /* block 대신 flex 사용 */
    align-items: center;    /* 수직 중앙 정렬 */
    justify-content: flex-start;

    width: 100%;            /* 너비 확보 */
    height: 22px;
    
    /* 폰트 스타일 유지 */
    color: #262626;
    font-weight: 500;
    font-size: 13px;
}

.idx-document .bd strong span {
    /* 이 속성이 오른쪽의 NEW 배지를 끝으로 밀어냅니다 */
    margin-right: auto; 
    /* 제목이 너무 길어질 경우를 대비한 말줄임 처리 (선택사항) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* NEW 배지 스타일 (오른쪽 고정 유지) */
.idx-document .bd strong .badge-new {
    flex-shrink: 0; /* 배지가 찌그러지지 않도록 보호 */
}

/* 2. 제목 텍스트(span)가 남은 공간을 다 쓰고, 넘치면 말줄임표 */
/* strong 바로 아래 있는 첫 번째 span(제목)을 타겟팅 */
.idx-document .bd strong > span:first-child {
    flex: 1;                /* 남은 공간 모두 차지 */
    min-width: 0;           /* [중요] Flex 안에서 말줄임표 작동시키려면 필수 */
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. 뱃지 스타일 수정 (float 제거) */
.badge-new {
    /* 크기 및 디자인 유지 */
    width: 40px;
    height: 20px;
    padding: 4px 8px;
    border-radius: 12px;
    background: #4170D3;
    color: #FFF;
    font-size: 8px;
    line-height: 8px;
    
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    /* [수정] float 제거 및 flex 관련 설정 */
    float: none;            /* float 제거 */
    flex-shrink: 0;         /* 공간 좁아져도 찌그러지지 않음 */
    margin-left: 8px;       /* 제목과 뱃지 사이 간격 */
}

.idx-document .bd .category {
  font-style: normal; }
  .idx-document .bd .category:before {
    content: '['; }
  .idx-document .bd .category:after {
    content: ']'; }
.idx-document .bd > span {
  display: block;
  margin: 2px 0 0 0;
  font-size: 11px;
  color: #848484; }
.idx-document .bd .dday {
  margin-left: 6px;
  color: #dd0b01; }
.idx-document .bd em {
  font-style: normal; }

.idx-document .icon {
  position: absolute;
  right: 15px;  
  bottom: 10px;
}
  .idx-document .icon.border {
    border-radius: 50%;
    border: 1px solid #dfdfdf; }
  .idx-document .icon i {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%; }
    .idx-document .icon i.ico-arrow-right {
      margin: -5px 0 0 -3px; }
    .idx-document .icon i.ico-arrow-down {
      margin: -3px 0 0 -6px; }
    .idx-document .icon i.ico-close {
      margin: -6px 0 0 -6px; }
.idx-document .detail {
  padding: 5px 15px 0;
  overflow-y: hidden;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15), inset 0 -3px 5px rgba(0, 0, 0, 0.15); }
  .idx-document .detail figure {
    margin: 15px 0; }
    .idx-document .detail figure img {
      display: block;
      margin: 0 auto;
      max-width: 100%; }
  .idx-document .detail .ui-button {
    margin-top: 20px;
    margin-bottom: 22px;
    font-size: 13px; }
  .idx-document .detail .con-body {
    padding: 15px 0 5px;
    font-size: 12px;
    color: #303030; }
    .idx-document .detail .con-body p {
      margin: 5px 0; }
  .idx-document .detail.show {
    display: block; }
.idx-document .active .detail {
  display: block; }
.idx-document .animate .detail {
  display: block;
  max-height: 0;
  -webkit-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out; }
.idx-document .animate .active .detail {
  max-height: 500px; }
.idx-document .empty span {
  display: block;
  padding: 30px 0;
  font-size: 12px;
  color: #666;
  text-align: center; }
  .idx-document .items.not-first-line .item:first-child:after {
    display: none; }
.idx-document.border-bottom .items {
  border-bottom: 1px solid #dfdfdf; }

/* Swipe */
.swipe {
  position: relative;
  overflow: hidden;
  visibility: hidden;
  height: 100%; }
  .swipe .swipe-wrap {
    overflow: hidden;
    position: relative;
    height: 100%; }
    .swipe .swipe-wrap > div {
      position: relative;
      float: left;
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; }

/* contents head */
.contents-head {
  padding: 10px 3px 0;
  margin-bottom: 10px; }
  .contents-head h1 {
    margin: 0;
    font-size: 16px;
    color: #262626; }
  .contents-head .date {
    margin: 1px 0 0;
    color: #848484;
    font-size: 10px; }

/* contents body */
.contents-body {
  font-size: 100%;
  color: #303030;
  line-height: 1.6;
  word-break: break-all;
  min-height: 80px;
  overflow: hidden;
  width: 100%; }
  .contents-body > * {
    font-size: .813em; }
  .contents-body img {
    max-width: 100%; }
  .contents-body ul, .contents-body ol {
    padding: 0 0 0 18px; }
    .contents-body ul > li, .contents-body ol > li {
      margin: 3px 0; }
  .contents-body p, .contents-body ul, .contents-body ol {
    margin: 15px 0; }
  .contents-body figure {
    margin: 12px 0; }
    .contents-body figure img {
      display: block;
      margin: 0 auto; }

/* slide items */
.slides-items {
  overflow: hidden;
  padding-right: 20px;
  padding-bottom: 5px; }
  .slides-items .swiper-container {
    padding: 0 10px;
    overflow: visible !important; }
  .slides-items .swiper-slide {
    width: 30%;
    background: #fff; }
  .slides-items a {
    display: block;
    text-decoration: none; }
  .slides-items figure {
    height: 100px;
    background-size: cover;
    background-position: center center; }
  .slides-items .caption {
    padding: 5px 8px 7px; }
    .slides-items .caption strong {
      display: block;
      font-size: 12px;
      color: #262626; }
    .slides-items .caption span {
      display: block;
      margin-top: -1px;
      font-size: 9px;
      color: #606060; }

/* popup */
.ui-popup {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }
  .ui-popup .bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: #000;
    background: rgba(0, 0, 0, 0.8); }
  .ui-popup.opacity .bg {
    background: #000; }
  .ui-popup .wrap {
    position: relative;
    z-index: 2;
    overflow: auto;
    background: #fff; }
  .ui-popup .btn-close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 50px;
    height: 50px;
    background: transparent;
    border: none; }
  .ui-popup.transparent .wrap {
    background-color: transparent; }
  .ui-popup.bg-light .bg {
    background: #fff;
    background: rgba(255, 255, 255, 0.8); }
  .ui-popup.full .wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }
  .ui-popup.animate {
    -webkit-transition-duration: .25s;
    transition-duration: .25s; }
  .ui-popup.fade {
    opacity: 0; }
    .ui-popup.fade.active {
      opacity: 1; }
  .ui-popup.slide.top {
    -webkit-transform: translate3d(0, -100%, 1px);
    transform: translate3d(0, -100%, 0); }
  .ui-popup.slide.bottom {
    -webkit-transform: translate3d(0, 100%, 1px);
    transform: translate3d(0, 100%, 0); }
  .ui-popup.slide.left {
    -webkit-transform: translate3d(-100%, 0, 1px);
    transform: translate3d(-100%, 0, 0); }
  .ui-popup.slide.right {
    -webkit-transform: translate3d(100%, 0, 1px);
    transform: translate3d(100%, 0, 0); }
  .ui-popup.slide.active {
    -webkit-transform: translate3d(0, 0, 1px);
    transform: translate3d(0, 0, 0); }

.mode-popup.android main {
  display: none; }
.mode-popup.android .ui-popup .bg {
  background: #000; }

/* profile header */
.ui-profile-header {
  height: 189px;
  background: no-repeat 50% 50%;
  background-size: cover; 
}
  .ui-profile-header:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
    background: #fff;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 100%); }
  .ui-profile-header .profile {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 106px; }
    .ui-profile-header .profile .wrap {
      display: table; }
      .ui-profile-header .profile .wrap > * {
        display: table-cell;
        vertical-align: middle; }
    .ui-profile-header .profile figure span {
      display: block;
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover; }
    .ui-profile-header .profile strong {
      padding-left: 10px;
      font-size: 20px;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }

/* head tab */
.ui-head-tab {
  position: relative;
  z-index: 9;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
  .ui-head-tab > a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: block;
    padding: 11px 0 6px;
    text-align: center;
    text-decoration: none;
    border-left: 1px solid #d6d6d6; }
    .ui-head-tab > a:first-child {
      border-left: none; }
  .ui-head-tab .icon {
    display: block;
    margin: 0 auto; }
  .ui-head-tab .subject {
    display: block;
    margin: 5px 0 0;
    font-size: 10px;
    color: #606060; }
    .ui-head-tab .subject em {
      font-weight: bold;
      font-style: normal;
      color: #262626; }
      .ui-head-tab .subject em:before {
        content: '('; }
      .ui-head-tab .subject em:after {
        content: ')'; }
  .ui-head-tab.fixed {
    position: fixed;
    top: 50px; }

.ui-head-tab-space {
  display: none; }

.ui-web {
  display: table;
  width: 100%;
  margin: 0; }
  .ui-web .title strong, .ui-web.comment .hd strong {
    font-size: 13px;
    color: #262626; }
  .ui-web .title span, .ui-web.comment .hd span {
    font-size: 10px;
    color: var(--Color-Gray-500, #9898AA);
 }
  .ui-web > * {
    display: table-cell;
    word-break: break-all;
    vertical-align: middle; }
  .ui-web.justify > .dt {
    text-align: left; }
  .ui-web.justify > .dd {
    text-align: right;
    padding-left: 10px; }
  .ui-web .top {
    vertical-align: top; }
  .ui-web .bg-img {
    display: block;
    width: 43px;
    height: 43px;
    border-radius: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 1px solid #e1e1e1;
    }
  .ui-web .figure {
    width: 43px; }
  .ui-web .title {
    padding-left: 10px;
    font-size: 14px;
    color: #262626;
    font-weight: bold; }
    .ui-web .title strong {
      display: block; }
    .ui-web .title span {
      margin-top: 0;
      display: block; }
  .ui-web.comment > .dd {
    padding-left: 8px; }
  .ui-web.comment .bd {
    margin-top: 10px; }
  .ui-web .buttons {
    font-size: 0; }
    .ui-web .buttons .ui-button {
      margin: 0 2px; }
  .ui-web .ment {
    font-size: 13px;
    color: #848484; }
  .ui-web a {
    text-decoration: none; }

a.ui-web {
  text-decoration: none; }

.ui-content-body {
  font-size: 12px;
  color: #262626;
  line-height: 1.48; }

.ui-content-images span {
  display: block;
  margin-top: 5px; }
  .ui-content-images span:first-child {
    margin-top: 0; }
.ui-content-images img {
  display: block;
  width: 100%; }

.ui-index-items > * {
  position: relative;
  display: block;
  padding: 13px;
  text-decoration: none;
  }
  .ui-index-items > *:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-transform-origin: 0 0;
    height: 1px;
    margin-bottom: -0.5px;
    -webkit-transform: scaleY(0.5);
    background: #dfdfdf; }
.ui-index-items > *:last-child:after {
    background: transparent; /* 또는 background: transparent; */
}
.ui-index-items > .empty {
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  font-weight: bold; }
.ui-index-items .evt-toggle-form {
  display: block; }

.ui-floating-nav > * {
  position: fixed;
  z-index: 200; }
.ui-floating-nav a {
  text-decoration: none; }
.ui-floating-nav .dropdown-group .idx {
  display: none;
  position: absolute;
  bottom: 60px;
  left: 50%;
  margin-left: -22px; }
  .ui-floating-nav .dropdown-group .idx .ball-button {
    margin: 3px 0; }
.ui-floating-nav .dropdown-group.active .idx {
  display: block; }
.ui-floating-nav .ball-button {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 11px;
  background: #444444;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
  .ui-floating-nav .ball-button.parent {
    width: 53px;
    height: 53px;
    line-height: 51px; }
  .ui-floating-nav .ball-button.child {
    width: 44px;
    height: 44px;
    line-height: 42px; }
.ui-floating-nav .pos-left-top {
  left: 10px;
  top: 10px; }
.ui-floating-nav .pos-right-top {
  right: 10px;
  top: 10px; }
.ui-floating-nav .pos-left-bottom {
  left: 10px;
  bottom: 10px; }
.ui-floating-nav .pos-right-bottom {
  right: 10px;
  bottom: 10px; }
.ui-floating-nav .col-blue {
  background: #1f7ee0; }
.ui-floating-nav .sp-ico {
  position: absolute;
  left: 50%;
  top: 50%; }
.ui-floating-nav .ico-pen {
  margin: -13px 0 0 -13px; }

.ui-nav-bottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 -5px; }
  .ui-nav-bottom div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 0 5px;
    text-align: center; }
  .ui-nav-bottom a {
    display: block;
    padding: 1px 0;
    text-decoration: none;
    border: 1px solid #dfdfdf;
    border-radius: .2em; }
  .ui-nav-bottom i, .ui-nav-bottom em {
    vertical-align: middle; }
  .ui-nav-bottom em {
    margin-left: 4px;
    font-family: "SUITE", arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    color: #262626; }
  .ui-nav-bottom a.active .ico-heart5 {
    background-position: -184px -385px; }

.ui-sharebox {
  display: block;
  border: 1px solid #dfdfdf;
  color: #303030;
  text-decoration: none; }
  .ui-sharebox img {
    display: block;
    width: 100%;
    margin: 0 auto; }
  .ui-sharebox figure {
    margin: 0;
    background-color: #f9f9f9; }
  .ui-sharebox .bd {
    padding: 10px; }
    .ui-sharebox .bd strong, .ui-sharebox .bd span {
      display: block; }
    .ui-sharebox .bd strong {
      font-size: 13px;
      line-height: 1.4em; }
    .ui-sharebox .bd span {
      margin-top: 5px;
      font-size: 11px; }

.ui-thumnail-slide img {
  display: block;
  width: 100%;
  border: 1px solid #dfdfdf; 
  border-radius: 12px;
}
.ui-thumnail-slide figure {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover; }

.ui-more-text {
  display: block;
  margin-top: -5px;
  font-size: 11px;
  font-weight: bold;
  color: #446fce; }

/* toggle dropdown */
.ui-toggle-dropdown {
  display: inline-block; }
  .ui-toggle-dropdown nav {
    position: relative; }
  .ui-toggle-dropdown .trigger {
    display: block;
    padding: 6px 13px;
    font-size: 0;
    text-align: center; }
  .ui-toggle-dropdown .menus {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    padding: 0;
    border-radius: 1em;
    border: 1px solid #E5E7EB;
    background: #FFF;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
  }
  .ui-toggle-dropdown .menus a {
    display: block;
    padding: 9px 24px 9px 8px;
    white-space: nowrap;
    font-size: 12px;
    color: #303030;
    text-decoration: none;
    border-top: 1px solid #eee; }
    .ui-toggle-dropdown .menus a:first-child {
      border-top: none; }
  .ui-toggle-dropdown.right .menus {
    right: 0;
    left: auto; }
    .ui-toggle-dropdown.right .menus a {
      padding-right: 15px;
      padding-left: 15px;
      text-align: left; }
  .ui-toggle-dropdown.left .menus {
    right: auto;
    left: 0; }
    .ui-toggle-dropdown.left .menus a {
      padding-left: 15px;
      padding-right: 30px;
      text-align: left; }

/* body bottom info */
.ui-body-bottom-info {
  margin: 3px 0 6px; }
  .ui-body-bottom-info * {
    vertical-align: middle; }
  .ui-body-bottom-info span {
    margin: 0 5px; }
    .ui-body-bottom-info span.active .ico-heart5 {
      background-position: -184px -385px; }
  .ui-body-bottom-info i {
    margin-right: 4px; }
  .ui-body-bottom-info em {
    font-size: 11px;
    color: #262626;
    font-style: normal; }
  .ui-body-bottom-info.side-margin {
    margin-left: 5px;
    margin-right: 5px; }

/* bottom form */
.ui-bottom-form {
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); }
  .ui-bottom-form fieldset {
    position: relative;
    padding: 8px 10px;
    z-index: 3;
    background: #fff; }
  .ui-bottom-form .input {
    display: block;
    margin-right: 72px; }
    .ui-bottom-form .input input {
      margin: 0;
      padding: 11px 8px;
      width: 100%;
      font-size: 13px;
      color: #303030;
      border: none; }
  .ui-bottom-form button[type=submit] {
    position: absolute;
    right: 10px;
    top: 50%;
    height: 35px;
    margin: -17px 0 0 0; }
  .ui-bottom-form.fix-bottom {
    position: fixed;
    z-index: 201;
    left: 0;
    right: 0;
    bottom: 0; }

.ui-bottom-form-space {
  display: block;
  height: 56px; }

/* fix bottom */
.ui-fix-bottom {
  position: absolute;
  z-index: 300;
  left: 0;
  right: 0;
  bottom: 0; }
  .ui-fix-bottom.top-shadow {
    border-top: 1px solid var(--Color-Background, #F5F7FA);
  }
  .ui-fix-bottom .padding {
    padding: 10px 0; }
  .ui-fix-bottom .ui-web .dt {
    text-align: left;
    padding-left: 10px; }
  .ui-fix-bottom .ui-web .dd {
    padding-right: 10px; }
.ui-fix-bottom .attachfile {
  display: flex;
  text-indent: 0;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.ui-fix-bottom .attachfile span {
  color: var(--Color-Gray-700, #60606B);
  font-size: 13px;
}
    .ui-fix-bottom .attachfile input {
      display: inline-block;
      width: 42px;
      height: 42px;
      opacity: 0; }

.ui-nav-tab {
  position: relative;
  padding-bottom: 2px;
  background: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex; }
  .ui-nav-tab > a, .ui-nav-tab > div {
    -webkit-box-flex: initial;
    -webkit-flex: initial;
    flex: initial;
    display: block;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    color: #262626; }
  .ui-nav-tab.full > a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding-left: 0;
    padding-right: 0; }
    .ui-nav-tab.full > a:nth-child(2) {
      width: 33.34%; }
  .ui-nav-tab .active {
    font-weight: bold;
    color: black; }
  .ui-nav-tab .underbar {
    display: block;
    position: absolute;
    height: 12px;
    bottom: 0;
    left: 0;
    background: #4EB0E3;
    -webkit-transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out; }
  .ui-nav-tab.underbar {
    padding-bottom: 0; }
    .ui-nav-tab.underbar > a, .ui-nav-tab.underbar > div {
      border-bottom: 2px solid transparent; }
    .ui-nav-tab.underbar .active {
      border-bottom: 2px solid #4EB0E3; }
  .ui-nav-tab.thumnail > a, .ui-nav-tab.thumnail > div {
    padding: 5px; }
  .ui-nav-tab.thumnail figure img {
    display: block;
    margin: 0 auto; }
  .ui-nav-tab.thumnail span {
    margin-top: 2px;
    display: block;
    font-size: 11px; }

/* calendar */

.ui-calendar {
  padding: 0 15px; }
.ui-calendar .month {
  margin-bottom: 5px;
  text-align: center; }
.ui-calendar .month > * {
  vertical-align: middle; }
.ui-calendar .month button {
  background: none;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  color: #666;
  display: flex;
  justify-content: center;
}
.ui-calendar .month strong {
  display: inline-block;
  margin: 0 5px;
  font-size: 16px;
  color: #fff;
  font-weight: 500; }
.ui-calendar table {
  width: 100%;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #fff;
  border-top-color: rgba(255, 255, 255, 0.5); }
.ui-calendar table thead th {
  padding: 7px 0 5px;
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #fff;
  color: rgba(255, 255, 255, 0.5); }
.ui-calendar table tbody td {
  padding: 1px;
  height: 35px;
  text-align: center;
  vertical-align: top; }
.ui-calendar table a {
  display: block;
  text-decoration: none; }
.ui-calendar table span {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 13px;
  font-weight: normal;
  color: #333333; }

.ui-calendar table thead th:first-child,
.ui-calendar table tbody td.sun a span {
    color: #E53935 !important;
}

.ui-calendar table thead th:last-child,
.ui-calendar table tbody td.sat a span {
    color: #4285F4 !important;
}

.ui-calendar table .dots i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 1px;
  vertical-align: top;
  background-color: #fffc00;
  border-radius: 50%; 
}

.ui-calendar table tbody td {
  position: relative !important; 
}

.ui-calendar table tbody td .dots {
    position: absolute !important;
    left: 50% !important;               
    transform: translateX(-50%) !important; 
    bottom: 4px !important;  
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.ui-calendar table tbody td .dots i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #4A78E8; /* 기본 파란색 */
}

.ui-calendar table tbody td.selected span em, 
.ui-calendar table tbody td.today span em {
    display: block;
}

.ui-calendar table tbody td.today .dots i {
    background-color: #ffffff !important;
}


.ui-calendar table tbody td.selected:not(.today) .dots i {
    background-color: #4A78E8 !important; 
}

.ui-calendar table .today span:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
 }

.ui-calendar table .today span {
  background: var(--Color-Blue-700, #4170D3) !important;
  color: #FFF !important;
  border: none;
  border-radius: 50%; 
  box-shadow: 0 0 0 1px #4170D3, 0 0 0 0 #FFF;
}

.ui-calendar table .today span em {
  display: none; 
}

.ui-calendar table .selected span {
  background: #EFF6FF;
  color: #4170D3;
  border: none;
  border-radius: 50%; 
  box-shadow: 0 0 0 1px #4170D3, 0 0 0 0 #FFF;
}
.ui-calendar table .selected span em {
  display: none; 
}

.ui-calendar .month svg{
  margin: 0 auto;
}

.ui-circle-radio {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: left;
  vertical-align: top;
  overflow: hidden;
  border: 1px solid #c4c4c4;
  border-radius: 20%;
  background-color: #fff;
  -webkit-transition: background 0.2s ease-out;
  transition: background 0.2s ease-out; }
.ui-circle-radio input {
  position: absolute;
  left: -40px;
  top: -40px;
  margin: 0;
  padding: 0;
  visibility: hidden; }
.ui-circle-radio:after {
  content: '';
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  margin: -4px 0 0 -8px;
  width: 16px;
  height: 10px;
  background-position: -65px -191px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0); }
.ui-circle-radio.active {
  background-color: #0456d1;
  border: none; }
.ui-circle-radio.active:after {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1); }
    /* =========================================
       달력 전체 기본 설정
    ========================================= */
    .ui-calendar {
        background-color: #ffffff;
        padding: 0 15px 15px 15px;
    }
    .ui-calendar table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    /* =========================================
       1. 상단 년/월 네비게이션 (2026.02)
    ========================================= */
    .ui-calendar .month {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
    }
    .ui-calendar .month strong {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        margin: 0 16px;
    }
    .ui-calendar .month button {
        background: none;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        color: #666; /* 화살표 색상 */
    }

    /* =========================================
       2. 요일 헤더 (SUN, MON ...)
    ========================================= */
    .ui-calendar table thead th {
        padding: 10px 0;
        font-size: 11px;
        font-weight: bold;
        color: #888888; /* 기본 평일 요일 색상 */
        border-bottom: 1px solid #f0f0f0; /* 요일 밑 연한 회색 선 */
    }
    /* 헤더 일요일 (첫번째 칸) 빨간색 */
    .ui-calendar table thead th:first-child {
        color: #E53935;
    }
    /* 헤더 토요일 (마지막 칸) 파란색 */
    .ui-calendar table thead th:last-child {
        color: #4285F4;
    }

    /* =========================================
       3. 날짜 숫자 (1, 2, 3 ...)
    ========================================= */
    .ui-calendar table tbody td {
        height: 48px; /* 칸 높이 넉넉하게 */
        text-align: center;
        vertical-align: middle;
        position: relative; /* 하단 점(dot) 배치를 위한 기준점 */
    }
    
    /* 숫자 감싸는 a 태그 (원형 배경을 만들기 위한 틀) */
    .ui-calendar table tbody td a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 36px;  /* 동그라미 너비 */
        height: 36px; /* 동그라미 높이 */
        border-radius: 50%; /* 완전한 원형 */
        text-decoration: none;
        color: #444444; /* 평일 기본 글자색 */
        font-size: 13px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    /* 일요일 (첫번째 칸) 글자 빨간색 */
    .ui-calendar table tbody td:first-child a {
        color: #E53935;
    }
    /* 토요일 (마지막 칸) 글자 파란색 */
    .ui-calendar table tbody td:last-child a {
        color: #4285F4;
    }

    /* =========================================
       5. 일정이 있는 날 하단 파란색 점 (dot)
    ========================================= */
    .ui-calendar table tbody td .dots {
        position: absolute;
        bottom: 6px; /* 칸의 맨 밑에서 살짝 위로 */
        left: 50%;
        transform: translateX(-50%); /* 가운데 정렬 */
    }
    .ui-calendar table tbody td .dots i {
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #4A78E8; /* 점 색상 파란색 */
    }
    
    /* 만약 '선택된 날짜(selected)'에 일정이 있다면 점 색상도 흰색으로 변경 (자연스럽게) */
    .ui-calendar table tbody td.selected .dots i {
        background-color: #ffffff;
    }

    .community-calendar-index .app-content {
        padding-top: 450px !important; /* 캘린더가 겹치지 않게 확 밀어내기 */
        position: relative; /* z-index 적용을 위해 필요할 수 있음 */
        z-index: 10;        /* 배경(.head)보다 위로 올라오도록 설정 */
    }

    /* '예정된 일정이 없습니다' 박스 디자인 보정 (가운데 정렬 및 여백) */
    .tpl-date-empty-item .empty {
        text-align: center;
        padding: 40px 20px;
        color: #888;
        background-color: #fff;
        border: 1px solid #eee;
    }

.ui-floating-nav .ball-button-calendar {
  display: flex;
  text-align: center;
  color: #fff;
  width: 55px;
  font-size: 11px;
  height: 55px;
  vertical-align: middle;
  background: var(--Color-Blue-700, #4170D3);
  border: 2px solid #fff;
  border-radius: 50%;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.ui-floating-nav .ball-button-calendar.color-navy{
  background: var(--Color-Blue-900, #1E3A8A);
}

.ui-switch {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  overflow: hidden;
  text-align: left;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }
.ui-switch:after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: #c4c4c4;
  border-radius: 50%;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }
.ui-switch:before {
  content: '';
  position: relative;
  display: block;
  width: 47px;
  height: 24px;
  border: 2px solid #c4c4c4;
  border-radius: 24px;
  background-image: url("../img/layout/ico-switch-off.png");
  background-position: right 5px top 50%;
  background-repeat: no-repeat;
  background-size: 17px 7px; }
.ui-switch input {
  position: absolute;
  left: -20px;
  top: -20px;
  margin: 0; }
.ui-switch.active:before {
  background-color: #0456d1;
  border-color: #0456d1;
  background-image: url("../img/layout/ico-switch-on.png");
  background-position: 6px 50%; }
.ui-switch.active:after {
  left: 27px;
  background: #fff; }

.ui-bottom-fix {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15);
  transform-origin: 0 100%;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0); }
.ui-bottom-fix.hide {
  -webkit-transform: translateY(100%);
  transform: translateY(100%); }
.ui-bottom-fix.padding {
  padding: 10px; }
  .ui-bottom-fix.padding button {
    margin: 0; }

.ui-icon {
  text-align: center; }
.ui-icon.bordered {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #dfdfdf;
  width: 21px;
  height: 21px;
  line-height: 19px; }

.ui-circle-count {
  display: inline-block;
  padding: 0 6px;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  text-align: center;
  letter-spacing: -1px;
  font-style: normal;
  font-size: 10px;
  font-family: "SUITE",arial,sans-serif; }
.ui-circle-count.col-red {
  background: #e31b29;
  color: #fff; }

.ui-popup-select {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 12px 12px 0 0;
  padding: 0;
  background: #fff;
}

.ui-popup-select h1 {
  text-align: center;
  font-size: 13px; }
.ui-popup-select ul {
  margin: 0 8px;
  padding: 0;
  list-style: none; }
  .ui-popup-select ul li {
    text-align: left; }

.ui-popup-select ul li a {
  display: block;
  padding: 15px 10px;
  font-size: 13px;
  color: #262626;
  font-weight: bold;
  text-decoration: none; 
  text-align: center;
}

.ui-popup-select nav button {
  color: #6B7280;
  border-top: 1px solid #F3F4F6;
}

.ui-btn-scrap {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
  font-size: 0;
  background: #fff; }
.ui-btn-scrap i {
  position: absolute;
  left: 50%;
  top: 50%;
  vertical-align: baseline !important; 
}
.ui-btn-scrap i.ico-search5, .ui-btn-scrap i.ico-search6 {
  margin: -8px 0 0 -8px; }
.ui-btn-scrap i.ico-trash2 {
  margin: -8px 0 0 -7px; }
.ui-btn-scrap.bg-red {
  background: #ee4f4b;
  border: 1px solid #ee4f4b; }
.ui-btn-scrap.border {
  border: 1px solid #dadada; }

/**
 LAYOUT
 */
/* Header */
.lay-header {
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  background: #fff; 
}

.lay-header h1 {
  position: relative;
  /*z-index: 10;
  width: 70%; */
  margin: 0;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 0; 
  background: #4170D3;
  margin: 0 auto;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1; 
  overflow: hidden; 
}

.lay-header h1.white {
  color: #303030; 
  background: #FFF;
  border-bottom: 1px solid #EEEEF3;
}

.lay-header h1.white span {
  color: #303030; 
}

.lay-header svg {
  margin: 10px; 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.lay-header h1 span {
  font-size: 16px;
  color: #FFF; 
}
.lay-header h1 img {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  cursor: pointer;
}
    .lay-header h1 em {
      font-style: normal; }
      .lay-header h1 em:before {
        content: '('; }
      .lay-header h1 em:after {
        content: ')'; }
  .lay-header .top-nav {
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    right: 0; }
    .lay-header .top-nav > div {
      position: absolute;
      top: 0;
      height: 50px; }
    .lay-header .top-nav .icon {
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      height: 100%;
      line-height: 50px;
      width: 50px;
      text-align: center;
      color: #000;
      font-size: 0; }
      .lay-header .top-nav .icon i {
        vertical-align: middle; }
    .lay-header .top-nav button.icon {
      border: none;
      background-color: transparent; }
    .lay-header .top-nav .left {
      left: 10px; }

.lay-header .top-nav .between{
  display: flex;
  justify-content: space-between;
  position: sticky;

}
      
    .lay-header .top-nav .right {
      right: 10px; }
  .lay-header .bg {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: #aaa; }
  .lay-header.bottom-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
  .lay-header.light h1 span {
    color: #fff; }
  .lay-header.transparent {
    background: none; }
  .lay-header.bottom-line {
    border-bottom: 1px solid #dfdfdf; }

.app-container {
  height: 100%; }

/**
 PAGES
 */
/* Intro */
.mode-intro {
  background: #183172;
  background: -webkit-gradient(linear, top, bottom, color-stop(30%, #183172), color-stop(92%, #4EB0E3));
  background: -webkit-linear-gradient(-75deg, #183172 30%, #4EB0E3 92%);
  background: linear-gradient(0deg, #4170D3 0%, #7094DE 100%);
}

.intro {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center; }
  .intro .wrap {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 10px 100px; }
  .intro figure {
    margin: 0; }
  .intro .logo {
    margin: 0; }
    .intro .logo img {
      display: block;
      margin: 0 auto;
      width: 107px; }
  .intro fieldset {
    width: 230px;
    margin: 60px auto 0;
    padding: 0;
    border: none; }
    .intro fieldset p {
      margin: 0 0 13px; }
    .intro fieldset input[type=text], .intro fieldset input[type=password] {
      font-family: 'SUITE';
      width: 100%;
      margin: 0;
      padding: 10px 15px;
      color: #333;
      font-size: 14px;
      border: none;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.95);
    }
    .intro fieldset nav button {
      padding: 10px 0;
      font-size: 14px; }
  .intro fieldset .rememberid{
     margin: 13px 0 0 0;
    text-align: left;
    align-items: center;
    display: flex;
    gap: 4px;
  }
  .intro fieldset .radio-div{
        display: flex;
        gap: 10px;
        text-align: center;
        margin: 0 auto;
        justify-content: space-between;
  }
        .intro fieldset .rememberid span {
          margin-left: 3px;
          color: #fff;
          font-size: 14px; }
    .intro fieldset .autologin {
        margin: 13px 0 0 0;
        text-align: left;
        align-items: center;
        display: flex;
        gap: 4px; 
  }
  .intro fieldset .find-info {
        display: flex;
        margin: 13px 0 0 0;
        justify-content: space-between;
  }
  .intro fieldset .find-info a {
        margin-left: 3px;
        color: #fff;
        font-size: 14px;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
 }
 .intro .info-text-span{
    color: #ffffffba;
    font-size: xx-small;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
 }
      .intro fieldset .autologin i, .intro fieldset .autologin span {
        vertical-align: middle; }
      .intro fieldset .autologin span {
        margin-left: 3px;
        color: #fff;
        font-size: 14px; }

.sns-login{
    border: none;
    cursor: pointer;
    background-color: unset;
}

.term-div{
    width: 85%;
    margin: 0 auto;
}

.term-textarea{
    width: 100%;
    border-radius: 12px;
    min-height: 350px;
    padding: 20px;
    font-size: 12px;
    font-family: "SUITE", Helvetica, Arial, sans-serif;
    color: #262626;
    resize: none;
    line-height: 1.5;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-color: #fff;
    white-space: pre-line;
}
.term-textarea::-webkit-scrollbar {
  border-radius: 12px;
}

/* join */
.join {
    color: #FFF;
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

.join > div h1{
  font-size: 28px;
}

.join_back_div{
    color: #FFF;
    width: 80%;
    display: flex;
    gap: 10px;
    margin: 0 auto;
}

.join_back_div > div {
    display: flex;     
    align-items: center; 
    gap: 5px;        
    cursor: pointer;     
}

.join_button_nav{
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.join_sns_nav{
    width: 85%;
    max-width: 500px;
    margin: 0 auto;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
}

.join_sns_nav button{
    border: none;
    cursor: pointer;
    background-color: unset;
    border-radius: 10px;
} 

.join_input {
    color: #333;
    min-width: 0;
    height: clamp(36px, 9vw, 40px);
    padding: 0 12px;
    box-sizing: border-box;
    font-size: clamp(13px, 3.5vw, 14px);
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #FFF;
}

.join-button{
    width: 50%;
    height: clamp(36px, 9vw, 40px);
}

.join-form-button{
  font-size: 13px !important;
  border-radius: 10px !important;
}

.form_div{
    margin: 20px auto 60px;
    padding: 0;
}

.join_form_div{
    width: 85%;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
    margin-top: 35px;
    color: #2D2D3A;
}

.join_form_div_essential{
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    margin-bottom: 24px;
}

.join_form_div_select{
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    margin-bottom: 24px;
}

.input_div{
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 13px;
}

.input_div b{
    color: red;
}

.input_div label{
    white-space: nowrap;
    font-size: smaller;
}

.input_div input{
    flex: 0.75;
}

.input_div input[type="date"]{
    color: grey;
    font-family: auto;
}

.input_div .ui-button{
    height: clamp(36px, 9vw, 40px);
    padding: 0 clamp(8px, 2.5vw, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    width: auto !important;
    display: inline-flex !important;
    font-size: clamp(12px, 3.3vw, 14px);
}

.input_div .ui-button.block{
    width: auto !important;
    display: inline-flex !important;
}

.form_div > nav button.sns-login{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sns-button-div {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.base-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
    line-height: 1;
    height: 42px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    text-decoration-line: none;
}

.base-btn svg {
    display: inline-block;
    width: 16px;
    height: 20px;
    flex: 0 0 auto;
    max-width: none;
}

.base-btn.naver {
    background-color: #03c75a;
    color: #fff;
    border: none;
}

.base-btn.kakao {
    background-color: #fee500;
    color: #3d3d3d;
}

.base-btn.google {
    background-color: #fff;
    color: #3d3d3d;
}

.base-btn.apple {
    background-color: #fff;
    color: #3d3d3d;
}

.notice_p {
    font-size: xx-small;
    margin-top: 0;
}

.notice_p.red {
    color: red;
}

.form_div .none {
    display: none;
}

.form_div .block {
    display: block;
}

/* 아이디 비밀번호 찾기 */
.find-div{
    width: 85%;
    margin: 0 auto;
    color: white;
}

.find-div-a {
    display: flex;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 4px;
    margin: 0 auto 30px auto;
    width: fit-content;
}

.find-a {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.find-a.active {
    background: white;
    color: #5c8ae3;
}

#result-div{
    height: 120px;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 전체 레이어 */
.postcode-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* 딤(반투명 배경) */
.postcode-dim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45); /* 더 진한 반투명 */
  z-index: 0;                      /* 모달 아래 */
}

/* 모달 */
.postcode-modal {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%); /* 가로/세로 중앙 정렬 */
  width: 520px;                     /* 기본 폭 */
  max-width: 90vw;                  /* 작은 화면 대응 */
  height: 70vh;                     /* 기본 높이 */
  max-height: 720px;                /* 너무 커지지 않도록 */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 1;                       /* 딤 위로 */
}

/* 헤더 */
.postcode-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #eee; background:#fafafa;
}

/* 닫기 버튼 */
.postcode-close {
  border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer;
}

/* 본문(iframe 컨테이너) */
.postcode-body {
  flex: 1; /* 남은 공간 모두 차지 */
}

/* 바디 스크롤 잠금 */
body.noscroll { overflow: hidden; touch-action: none; }

@media (max-width: 480px) {
  .postcode-modal {
    width: 92vw;
    height: 72vh;
  }

  .ai-assistant-room .bubble{ max-width:78%; }
}

/* Main */
.main-body {
  height: auto; }
  .main-body .swipe-wrap > div {
    overflow: hidden;
    height: 200px; }
    .main-body .swipe-wrap > div.active {
      overflow: auto;
      height: auto;
      min-height: 200px; }

.main-sections {
  margin: 0;
  width: 100%; 
  padding: 16px 18px 24px 18px;
  border-bottom: 1px solid var(--Color-Gray-100, #EEEEF3);
}

.main-sections:last-child {
    border-bottom: 0;
}

.main-sections .head{
  display: flex;
  height: 30px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.main-sections .head .more-div{
  cursor: pointer;
}

.ceo-section .head{
  margin-top: 8px;
}

.main-sections .ceo-head{
  flex-direction: column;
  align-items: flex-start !important; 
  gap: 4px; 
  margin-top: 6px;
}

.main-sections .ceo-head span {
  display: block; 
  margin-top: 2px;
}

.main-sections .head > div {
    display: flex;
    align-items: center;   
}

.main-sections .head span{
  font-size: 12px;
  color: var(--Color-Gray-500, #9898AA);
}
#main-ad{
  border-radius: 12px;
}
  .main-spot > * {
    margin: 0;
    float: left;
    width: 100%;
    height: 170px;
    overflow: hidden; }

  .main-spot dt .swiper-container {
    width: 100%;
    height: 100%; 
    border-radius: 12px 12px 0 0;
  }
  .main-spot dt * {
    height: 100%;
    width: 100%; }

.main-spot dt a {
    display: block;
    background-position: 50% 50%;
    aspect-ratio: 21 / 9;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.main-spot dd img {
    width: 100%;
    aspect-ratio: 21 / 9;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

  .main-spot dt .swiper-pagination {
    height: auto; }
  .main-spot dd a {
    display: block;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    text-indent: -9999px; }

.main-body-tab {
  background: #fff; }
  .main-body-tab > div {
    width: 190%;
    position: relative;
    padding: 12px 0;
    text-align: center;
    font-size: 13px;
    color: #000;
    }
    .main-body-tab > div a {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 40px;
      text-indent: -9999px; }
      .main-body-tab > div a em {
        display: block;
        position: relative;
        width: 17px;
        height: 17px;
        text-indent: -9999px;
        text-align: left;
        content: '';
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        margin: -8px 0 0 -8px; }
        .main-body-tab > div a em:before, .main-body-tab > div a em:after {
          content: '';
          position: absolute;
          background: #262626; }
        .main-body-tab > div a em:before {
          width: 100%;
          height: 1px;
          margin-top: -0.5px;
          left: 0;
          top: 50%; }
        .main-body-tab > div a em:after {
          height: 100%;
          width: 1px;
          margin-left: -0.5px;
          left: 50%;
          top: 0; }
    .main-body-tab > div.active {
      color: #fff; }
      .main-body-tab > div.active a em {
        display: block;
        position: relative;
        width: 17px;
        height: 17px;
        text-indent: -9999px;
        text-align: left;
        position: absolute; }
        .main-body-tab > div.active a em:before, .main-body-tab > div.active a em:after {
          content: '';
          position: absolute;
          background: #fff; }
        .main-body-tab > div.active a em:before {
          width: 100%;
          height: 1px;
          margin-top: -0.5px;
          left: 0;
          top: 50%; }
        .main-body-tab > div.active a em:after {
          height: 100%;
          width: 1px;
          margin-left: -0.5px;
          left: 50%;
          top: 0; }
  .main-body-tab.fix {
    position: fixed;
    top: 200px;
    left: 0;
    width: 100%;
    z-index: 99999; }

.main-body-tab-space {
  height: 42px; }

.main-gray-line {
  display: block;
  overflow: hidden;
  -webkit-transform-origin: 0 0;
  height: 1px;
  margin-bottom: -0.5px;
  -webkit-transform: scaleY(0.5);
  background: #d6d6d6; }
  .main-gray-line.fix {
    position: fixed;
    top: 93px;
    left: 0;
    right: 0;
    z-index: 2; }

.main-more-data {
  padding: 10px; }
  .main-more-data button {
    padding: 12px 0;
    font-size: 13px;
    border: 1px solid #ccc;
    background: #fafcfd;
    border-radius: 10px;
    }

.main-community .item {
  position: relative;
  margin: 0 15px;
  padding: 10px 0; }
  .main-community .item:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    overflow: hidden;
    -webkit-transform-origin: 0 0;
    height: 1px;
    margin-bottom: -0.5px;
    -webkit-transform: scaleY(0.5);
    background: #e0e0e0; }
  .main-community .item:first-child {
    border-top: none; }
    .main-community .item:first-child:after {
      display: none; }
  .main-community .item .hd .club-name {
    font-size: 11px;
    color: #183172; }
  .main-community .item .bd {
    display: block;
    margin: 10px 0 0;
    text-decoration: none;
    font-size: 12px;
    color: #262626; }
    .main-community .item .bd figure {
      float: left;
      margin-right: 10px;
      width: 6em;
      height: 6em;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover;
      }
    .main-community .item .bd p {
      display: block;
      display: -webkit-box;
      margin: 0;
      overflow: hidden;
      line-height: 1.5em;
      max-height: 6em;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical; }
  .main-community .item .ui-small-state {
    clear: both;
    padding-top: 12px; }
  .main-community .item .external-link {
    margin: 20px 0 0; }
    .main-community .item .external-link > * {
      vertical-align: top; }
    .main-community .item .external-link figure {
      width: 90px; }
      .main-community .item .external-link figure span {
        display: block;
        width: 80px;
        height: 80px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover; }
    .main-community .item .external-link .dd {
      padding-top: 3px;
      vertical-align: top;
      color: #262626; }
    .main-community .item .external-link p {
      margin: 0; }
    .main-community .item .external-link .msg {
      font-size: 10px; }
    .main-community .item .external-link .source {
      margin: 15px 0 0; }
      .main-community .item .external-link .source strong {
        display: block;
        font-size: 11px;
        text-decoration: underline; }
      .main-community .item .external-link .source span {
        display: block;
        margin-top: 2px;
        font-size: 8px;
        color: #606060; }

.main-planet .main-more-data {
  padding-top: 0; }

/* Side - left and right */
.app-content.mode-side-content {
  overflow: hidden; }

#side-navigation, #side-search {
  position: fixed;
  z-index: 99999;
  width: 100%;
  top: 0;
  bottom: 0;
  -webkit-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  #side-navigation .overlay, #side-search .overlay {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; }
  #side-navigation .wrap, #side-search .wrap {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 80%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    -webkit-perspective: 1000px;
    perspective: 1000px; }
  #side-navigation.active .overlay, #side-search.active .overlay {
    background: #000;
    opacity: 0.5; }
  #side-navigation.active .wrap, #side-search.active .wrap {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

#side-navigation {
  left: -100%; }

#side-navigation .wrap {
  left: 0;
  background: #fff;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); 

  display: flex;
  flex-direction: column; /* 위에서 아래로 쌓기 */
  height: 100vh;          /* 화면 꽉 차게 (스크롤 방지 핵심) */
  overflow: hidden;       /* 내부 요소가 넘쳐도 전체 스크롤 방지 */
  position: relative;
}

#side-navigation .my-info {
  padding: 14px 18px 5px 18px;
  border-bottom: 1px solid #EEEEF3;
}
#side-navigation .my-info .profile {
  display: table;
  width: 100%;
  padding-left: 10px; 
}
#side-navigation .my-info .profile > * {
  display: table-cell;
  vertical-align: middle; 
}
#side-navigation .my-info .profile .figure-div {
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  background: #E8E8ED;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#side-navigation .my-info .profile figure {
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  background: #E8E8ED;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#side-navigation .my-info .profile h1 {
  margin: 0;
  padding: 0 0 0 10px;
  font-size: 11px;
  font-weight: normal;
  color: #b6b6b6; 
}
#side-navigation .my-info .profile h1 strong {
  display: inline-block;
  margin-right: 4px;
  font-size: 20px;
  color: #262626;}
#side-navigation .my-info .profile h1 .btn {
  margin-top: 5px; }
#side-navigation .my-info .profile h1 .btn * {
  vertical-align: middle; }
#side-navigation .my-info .profile h1 .btn a {
  text-decoration: none;
  font-size: 10px;
  color: #303030;
  display: inline-block;
  line-height: 20px;
  border-radius: 3px; }
#side-navigation .my-info .profile h1 .btn .sp-ico {
  margin-right: 5px; }
#side-navigation .my-info nav {
  margin: 10px 0 5px;
  font-size: 0; 
  display: flex;
  justify-content: space-around;
}
#side-navigation .my-info nav a {
  display: block;
  padding: 6px 0;
  text-decoration: none;
  font-size: 0; }
#side-navigation .my-info nav a.btn-1 {
  text-align: left;}
#side-navigation .my-info nav a.btn-2 {
  text-align: center; }
#side-navigation .my-info nav a.btn-3 {
  text-align: right;}
#side-navigation .my-info nav a > div {
  display: inline-block;
  text-align: center; }
#side-navigation .my-info nav .icon {
  position: relative;
  display: inline-block;
  margin: 0;
  width: 53px;
  height: 53px;
  border-radius: 50%; }
#side-navigation .my-info nav .icon i {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%; }
#side-navigation .my-info nav .icon .ico-person {
  margin: -17px 0 0 -12px; }
#side-navigation .my-info nav .icon .ico-mail {
  margin: -12px 0 0 -18px; }
#side-navigation .my-info nav .icon .ico-search2 {
  margin: -15px 0 0 -15px; }
#side-navigation .my-info nav .icon .ico-my-community {
  margin: -10px 0 0 -15px; }

#side-navigation .my-info nav .co-1 {
  background: var(--Color-Blue-100, #E0EDFF);
}

#side-navigation .my-info nav .co-1 svg{
  position: relative;
  width: 26px;
  top: 14px;
}

#side-navigation .my-info nav .co-2 {
  background: #FFF4E6;
}

#side-navigation .my-info nav .co-2 svg {
  position: relative;
  width: 26px;
  top: 15px;
}

#side-navigation .my-info nav .co-3 {
  background: #F0E8FF;
}

#side-navigation .my-info nav .co-3 svg {
  position: relative;
  width: 24px;
  top: 15px;
}

#side-navigation .my-info nav .txt {
  display: block;
  margin-top: 7px;
  color: #000;
  font-size: 11px; }

#side-navigation .lnb {
  flex-shrink: 0;
}

#side-navigation .lnb .lnb-div{
  padding: 16px 0;
  border-bottom: 1px solid #EEEEF3;
  padding: 13px 25px 20px 15px;
}

#side-navigation .lnb .lnb-div h5{
  margin: 0;
  padding: 8px 0 10px 15px;
}

#navigation-bottom-ad {
    flex: 0 0 auto; 
    width: 100%;
    position: relative;
    overflow: hidden;
    
    display: flex;
    align-items: flex-start; 
}

#navigation-bottom-ad img {
    width: 100%;
    height: auto; 
    object-fit: contain;
    padding: 15px;
    box-sizing: border-box; 
    border-radius: 12px;
}

#side-navigation .lnb a {
  position: relative;
  display: flex;
  padding: 10px 0 10px 15px;
  text-decoration: none;
  vertical-align: top;
}
  #side-navigation .lnb a:active span {
    color: #4EB0E3; }
#side-navigation .lnb i {
  position: absolute;
  display: block;
  left: 10px;
  top: 50%;
  margin-top: -10px; }
  #side-navigation .lnb i.ico-kdaWeb {
    margin-top: -7px; }
#side-navigation .lnb span {
  font-size: 14px;
  color: #262626;
  padding-left: 8px;
  }
#side-navigation .lnb em {
  display: inline-block;
  margin-left: 5px;
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-size: 10px;
  color: #fff;
  font-style: normal;
  text-align: center;
  font-family: arial, sans-serif;
  background: #dd0b01;
  border-radius: 50%; }
#side-navigation .btn-close {
  position: absolute;
  right: 0;
  top: 0; }
#side-navigation .btn-close button {
  margin: 0;
  padding: 14px;
  border: none;
  background: none; }
#side-navigation .btn-close button i {
  display: block; }
#side-navigation .bottom-banners {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 25px; }
#side-navigation .bottom-banners a {
  display: block;
  position: relative;
  text-decoration: none;
  border: 2px solid #dadada; }
#side-navigation .bottom-banners a span {
  display: block;
  padding: 8px 0 8px 10px;
  font-size: 11.5px;
  color: #262626;
  font-weight: bold; }
#side-navigation .bottom-banners a i {
  display: block;
  position: absolute;
  right: 8px;
  top: 50%;
  margin: -5px 0 0; }

#side-search {
  right: -100%; 
}

#side-search .wrap {
  width: 100%;
  right: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); 
}

/* ==========================================
   검색 패널 공통 스타일 (#side-search, #planet-side-search)
   ========================================== */

/* 검색 패널 기본 상태 (화면 우측 바깥에 숨김) */
#side-search,
#planet-side-search {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #f5f6f8;
    transition: right 0.3s ease-in-out;
    display: block !important; /* 기존 숨김 속성 무시 */
}

/* 검색창 열렸을 때 클래스 */
#side-search.active,
#planet-side-search.active {
    right: 0;
    transform: translate3d(0, 0, 0); /* 메인 쪽 호환을 위해 추가 */
}

/* 검색 패널 전체 컨테이너 */
#side-search .search-wrap,
#planet-side-search .search-wrap {
    width: 100% !important; 
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 1. 상단 파란색 헤더 */
#side-search .search-header,
#planet-side-search .search-header {
    background-color: #4a76cc;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
}

#side-search .search-header svg,
#planet-side-search .search-header svg {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#side-search .search-header .btn-back,
#planet-side-search .search-header .btn-back {
    position: absolute;
    left: 5px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#side-search .search-header h2,
#planet-side-search .search-header h2 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    color: white;
}

/* 2. 둥근 검색창 영역 */
#side-search .search-form-wrap,
#planet-side-search .search-form-wrap {
    padding: 20px 15px;
}

#side-search .search-input-box,
#planet-side-search .search-input-box {
    display: flex;
    background: white;
    border-radius: 16px;
    padding: 5px 15px;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}

#side-search .search-input-box input,
#planet-side-search .search-input-box input {
    flex: 1;
    border: none;
    height: 35px;
    font-size: 14px;
    outline: none;
    background: transparent;
}

#side-search .search-input-box input::placeholder,
#planet-side-search .search-input-box input::placeholder {
    color: #a0a0a0;
}

#side-search .search-input-box .btn-search,
#planet-side-search .search-input-box .btn-search {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

/* 3. 최근 검색어 (흰색 카드 영역) */
#side-search .recent-search-area,
#planet-side-search .recent-search-area {
    background: white;
    margin: 0 15px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

#side-search .recent-header,
#planet-side-search .recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#side-search .recent-header h3,
#planet-side-search .recent-header h3 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

#side-search .recent-header .btn-clear-all,
#planet-side-search .recent-header .btn-clear-all {
    font-size: 12px;
    color: #a0a0a0;
    background: none;
    border: none;
    cursor: pointer;
}

/* 4. 최근 검색어 칩 (Pill 모양) */
#side-search .recent-chips,
#planet-side-search .recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#side-search .recent-chips .chip,
#planet-side-search .recent-chips .chip {
    display: inline-flex;
    align-items: center;
    background: #f4f5f8;
    border-radius: 10px; /* 기존 side-search 디자인을 따름 */
    padding: 8px 12px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

#side-search .recent-chips .chip span,
#planet-side-search .recent-chips .chip span {
    cursor: pointer;
}

#side-search .recent-chips .chip button,
#planet-side-search .recent-chips .chip button {
    background: none;
    border: none;
    margin-left: 6px;
    color: #bbb;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* 검색 패널 전체 컨테이너 */
.search-full-mode .search-wrap {
    width: 100% !important; 
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 1. 상단 파란색 헤더 */
.search-full-mode .search-header {
    background-color: #4a76cc;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
}

.search-full-mode .search-header svg {
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.search-full-mode .search-header .btn-back {
    position: absolute;
    left: 5px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.search-full-mode .search-header h2 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    color: white;
}

/* 2. 둥근 검색창 영역 */
.search-full-mode .search-form-wrap {
    padding: 20px 15px;
}

.search-full-mode .search-input-box {
    display: flex;
    background: white;
    border-radius: 16px;
    padding: 5px 15px;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}

.search-full-mode .search-input-box input {
    flex: 1;
    border: none;
    height: 35px;
    font-size: 14px;
    outline: none;
    background: transparent;
}

.search-full-mode .search-input-box input::placeholder {
    color: #a0a0a0;
}

.search-full-mode .search-input-box .btn-search {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

/* 3. 최근 검색어 (흰색 카드 영역) */
.search-full-mode .recent-search-area {
    background: white;
    margin: 0 15px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.search-full-mode .recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.search-full-mode .recent-header h3 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.search-full-mode .recent-header .btn-clear-all {
    font-size: 12px;
    color: #a0a0a0;
    background: none;
    border: none;
    cursor: pointer;
}

/* 4. 최근 검색어 칩 (Pill 모양) */
.search-full-mode .recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-full-mode .recent-chips .chip {
    display: inline-flex;
    align-items: center;
    background: #f4f5f8;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

.search-full-mode .recent-chips .chip span {
    cursor: pointer;
}

.search-full-mode .recent-chips .chip button {
    background: none;
    border: none;
    margin-left: 6px;
    color: #bbb;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* Notice */
.notice-content{
    width: 82%;
    height: 48px;
    padding-top: 5px;
}

.notice-content span {
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;  
    color: #9898AA;
    font-size: 12px;
    word-break: break-all;
    line-height: 1.5;
}
.notice-index .idx-document {
  height: 100%; }
.notice-index .bd {
  width: 100%; 
}

.notice-index .idx-document em {
  color: #999; 
}
.notice-index .idx-document .color-blue {
  color: #4480d7; 
}
.notice-index .idx-document .color-green {
  color: #39b76c; 
}
.notice-index .idx-document .color-orange {
  color: #ee4d21; 
}
.notice-index .item .bd strong b {
  font-weight: normal; 
}
.notice-index .item.new .icon {
  border: none;
  border-radius: 0;
  margin: -14px 0 0 -13px; }
  .notice-index .item.new .icon i {
    position: static;
    margin: 0;
    width: 26px;
    height: 27px;
    background-position: -105px -159px; }
.notice-index .item.not-read .bd strong b {
  font-weight: bold; }

.notice-read .hd-extra {
  padding: 13px 0;
  text-align: center;
  font-size: 20px;
  color: #fff; }
.notice-read .ui-box {
  padding: 10px;
  margin-top: 0; }
.notice-read .body {
  margin: 15px 0;
  padding: 0 3px; }

/* Community */
.community-index-top {
  display: flex;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.10);
  padding: 15px 1px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 15px 15px 0 15px;
  cursor: pointer;
}

.community-index-top span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: #4170D3;
  font-family: 'GMarketSans';
  }


.community-index .invite-index {
  padding-top: 10px; }
.community-index .my-community {
  padding-top: 10px; }

.community-index .my-community .body {
  padding: 0 10px 0;
}

.community-index .my-community .body > div {
  width: 50%;
  float: left;
  padding: 0 6px 10px; 
}

.community-index .my-community .body a {
  position: relative;
  display: block;
  height: 168px;
  text-decoration: none; 
  border-radius: 12px;
}

.community-index .my-community .body a {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
}

    .community-index .my-community .body figure {
      margin: 0;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover; 
      border-radius: 12px;
    }
    .community-index .my-community .body img {
      display: block;
      margin: 0 auto;
      width: 100%;
      height: 100%; }
    .community-index .my-community .body .bullets {
      position: absolute;
      left: 9px;
      top: 8px; }
      .community-index .my-community .body .bullets i {
        display: block;
        float: left;
        margin-right: 2px; }
      .community-index .my-community .body .bullets .ico-alert {
        margin-top: 1px; }

.my-community .h1-subtitle{
  padding: 12px 17px;
}

.community-index .my-community .body .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 17px 12px 12px 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 60%) 100%);
  color: #fff; 
  border-radius: 0 0 12px 12px;
}
      .community-index .my-community .body .bottom strong {
        display: block;
        margin-bottom: 5px;
        font-size: 13px; }
    .community-index .my-community .body .small-stat {
      font-size: 10px; }
.community-index .my-community .body .small-stat span {
  padding-left: 7px; 
}
        .community-index .my-community .body .small-stat span:first-child {
          padding-left: 0; }
      .community-index .my-community .body .small-stat i {
        margin: 0 3px 0 0;
        vertical-align: middle; }
      .community-index .my-community .body .small-stat em {
        font-style: normal; }

/* popup community info */
.pop-community-info {
  position: absolute;
  width: 250px;
  height: 305px;
  margin-left: -125px;
  margin-top: -152px;
  top: 50%;
  left: 50%;
  display: none; 
}

.pop-community-info .bd{
  position: relative;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.10), 0 20px 25px -5px rgba(0, 0, 0, 0.10);
  padding: 15px 0;
}

.pop-community-info .bd nav .ui-button{
  width: 80%;
  margin: 0 auto;
  height: 45px;
  padding: 12px 20px;
}

.pop-community-info .btn-close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
}

.pop-community-info figure .img {
  height: 170px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; 
}

    .pop-community-info figure .img.blur {
      position: relative;
      background: none;
      overflow: hidden; }
      .pop-community-info figure .img.blur .bg {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        display: block;
        height: 100%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-filter: blur(15px);
        filter: blur(15px);
        background-color: transparent;
        -webkit-transform: scale(1.18); }
      .pop-community-info figure .img.blur i {
        display: block;
        width: 110px;
        height: 110px;
        z-index: 2;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -55px 0 0 -55px;
        border: 1px solid #e1e1e1;
        border-radius: 50%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat; }
.pop-community-info .caption {
  padding-bottom: 15px;
  text-align: center;
  background-color: #fff; 
}
    .pop-community-info .caption strong {
      display: block;
      font-size: 16px;
      color: #262626; }
    .pop-community-info .caption span {
      display: block;
      font-size: 13px;
      color: #606060; }
    .pop-community-info .caption b {
      font-weight: normal; }
  .pop-community-info .inf {
    padding: 13px 0;
    text-align: center;
    color: black;
    font-size: 10px; }
    .pop-community-info .inf span {
      display: inline-block;
      margin: 0 4px; }
    .pop-community-info .inf i, .pop-community-info .inf em {
      vertical-align: middle; }
    .pop-community-info .inf em {
      font-style: normal;
      margin-left: 3px; }

.pop-community-info nav a {
  margin: 0 2px; 
}

.ui-popup .pop-community-info {
  display: block; }

.community-make .cover {
  margin: 20px 0;  
  padding-top: 8px;
}

.community-make .cover h1 {
  margin-left: 15px;
  font-size: 14px;
  color: #262626; 
}

.community-make .cover .slide {
  position: relative;
  margin: 18px 15px 15px;
}

.community-make .cover .slide .swiper-slide {
  width: 100%;
  height: 165px; 
}

#cover-big{
  border-radius: 0 0 10px 10px;
}

.community-make .cover .slide figure {
  margin: 0;
  /*width: 5%;*/
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 0 0 10px 10px;
}

.community-make .cover .color-bar {
  background: #eee;
  height: 10px; 
  border-radius: 10px 10px 0 0;
}

.community-make .cover .swiper-button-prev-icon, .community-make .cover .swiper-button-next-icon {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  z-index: 10;
  cursor: pointer;
  -moz-background-size: 27px 44px;
  -webkit-background-size: 27px 44px;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
  background: rgba(255, 255, 255, 0.80);
  display: flex;
  justify-content: center;
  align-items: center;
}

.community-make .cover .swiper-button-prev-icon {
  left: 12px;
  background-position: -52px -241px; 
}

.community-make .cover .swiper-button-next-icon {
  right: 12px;
  background-position: -68px -241px; 
}

.community-make .cover .subject {
  width: 100%;
  height: 62px;
  padding: 13px 17px;
  margin: 0 auto;
}

.community-make .cover .subject input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: #F9FAFB;
  font-size: 13px;
  color: #303030;
  outline: none; 
}

    .community-make .cover .subject ::-webkit-input-placeholder {
      color: #848484; }
.community-make .theme {
  margin-bottom: 38px;
}
  .community-make .theme h1 {
    margin: 0;
    text-align: center;
    font-size: 11px;
    color: #262626; }
  .community-make .theme .wrap {
    height: 75px; /* 기존 60px -> 75px (슬라이드 56px + 여백 + 스크롤바 감안) */
    margin-top: 8px; }
  .community-make .theme .bd {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 20px;
    overflow: hidden; }

.community-make .theme .bd figure {
  display: block;
  width: 56px;
  height: 56px;
  background-size: cover;
  background-position: 50% 50%; 
  border-radius: 12px;
}

.community-make .theme .swiper-container {
  overflow: hidden !important; 
  padding-bottom: 20px;
}

.community-make .theme .wrap {
  height: 60px;
  margin-top: 8px;
}

.community-make .swiper-scrollbar {
  position: absolute;
  left: 0 ;  
  bottom: 0 !important;
  z-index: 50;
  width: 100% !important; 
  height: 4px !important; 
  background: rgba(0, 0, 0, 0.1);
}

.community-make .swiper-scrollbar-drag {
  background-color: rgba(0, 0, 0, 0.4); 
  border-radius: 2px;
  height: 100%; 
}

.community-make .theme .swiper-slide {
  width: 56px;
  height: 56px; 
}

  .community-make .theme .active {
    position: relative; }
    .community-make .theme .active:before, .community-make .theme .active:after {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      top: 50%; }
    .community-make .theme .active:before {
      width: 24px;
      height: 24px;
      margin: -12px 0 0 -12px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.6); }
    .community-make .theme .active:after {
      width: 16px;
      height: 10px;
      margin: -4px 0 0 -8px;
      background-position: -65px -192px; }
  .community-make .theme .upload-image {
    position: relative;
    overflow: hidden; }
    .community-make .theme .upload-image label {
      display: block; }
    .community-make .theme .upload-image input {
      position: absolute;
      z-index: 5;
      opacity: 0;
      left: 0;
      top: 0;
      height: 100%;
      font-size: 30px; }

.community-make .bottom {
  margin: 15px; 
}

.community-make .bottom button{
  background: var(--Color-Background, #F5F7FA);
  color: var(--Color-Gray-500, #9898AA);
  border: none;
  border-radius: 8px;
}

.community-make .bottom button.active{
  background: var(--Color-Blue-700, #4170D3);
  color: var(--Color-White, #FFF);
}

.community-notice-item {
  margin: 8px 16px; 
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #FFF;
  padding: 13px 16px;
}
  .community-notice-item .item {
    display: block;
    text-decoration: none; }
    .community-notice-item .item .head .icon, .community-notice-item .item .head .title, .community-notice-item .item .head .date {
      vertical-align: middle; }
    .community-notice-item .item .head .icon {
      position: relative;
      display: inline-block;
      width: 18px;
      height: 15px;
      text-align: center;
      border-radius: .2em;
      background: #ff4200; }
      .community-notice-item .item .head .icon i {
        margin-top: 3px;
        vertical-align: top; }
    .community-notice-item .item .head .title {
      font-size: 12px;
      color: #262626; 
      margin-right: 5px;
    }
    .community-notice-item .item .head .date {
      font-family: "SUITE", arial, sans-serif;
      font-size: 10px;
      color: #848484;
      font-style: normal;
      vertical-align: baseline; }
    .community-notice-item .item .body {
      margin: 5px 0 0;
      height: 4em;
      line-height: 1.6em;
      font-size: 12px;
      color: #303030;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-wrap: break-word; }
  .community-notice-item .swiper-container-horizontal > .swiper-pagination {
    z-index: 5;
    width: auto;
    right: 0;
    top: 3px;
    left: auto;
    bottom: auto;
    font-size: 0;
    transition: none;
    -webkit-transition: none; }
    .community-notice-item .swiper-container-horizontal > .swiper-pagination span {
      display: inline-block;
      margin: 0 2px;
      width: 4px;
      height: 4px;
      background: #9b9b9b !important; }
    .community-notice-item .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet-active {
      background: #4170D3 !important; }

.community-notice-item .head{
  display: flex;
  align-items: center;
}

.community-notice-item .head span{
  margin-right: 5px;
}

.community-write-form .is-notice-checker {
    display: inline-flex !important; 
    align-items: center !important;  
    cursor: pointer;
    vertical-align: middle;  
}

.community-write-form .is-notice-checker span{
    margin-left: 5px;
}


.community-write-form .is-notice-checker .ui-circle-radio {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0; 
}

.community-write-form {
  padding: 15px; 
  font-size: 14px; 
  color: #666; 
  border-bottom: 1px solid var(--Color-Background, #F5F7FA);
}

.lounge .ui-head-tab > a {
  border: none;
  padding: 11px 0 6px;
  padding: 12px 0;
}

.lounge .ui-head-tab > a.active {
  border-bottom: 2px solid var(--Color-CommunityExample, #1E3A5F);
}

.lounge .ui-head-tab{
  box-shadow:none;
  border-bottom: 1px solid #F3F4F6;
}

.lounge .ui-floating-nav .ball-button {
  display: flex;
  width: 56px;
  height: 56px;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 9999px;
  background: #1E3A5F;
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
  border: none;
}

.lounge .ui-nav-bottom div{
  text-align: start;
}

.lounge .ui-nav-bottom a{
  display: inline-flex;
  border: none;
  width: 50px;
  align-items: center;
}

.lounge .ui-nav-bottom em{
  color: #9CA3AF;
  margin-left: 6px;
}

.community-ui-bottom-form{
  box-shadow: none;
  border-top: 1px solid var(--Color-Gray-100, #EEEEF3);
}

.community-ui-bottom-form input{
  background: var(--Color-Background, #F5F7FA);
  border-radius: 8px;
  padding: 13px !important;
}

.community-ui-bottom-form button{
  height: 42px !important;
  margin: -21px 0 0 0 !important;
}

.community-lounge-index .ui-content-body {
  margin: 6px 0 10px;
  overflow: hidden;
  line-height: 18px;
  max-height: 180px; }
.community-lounge-index .ui-nav-bottom {
  margin-top: 10px; }
  
.community-lounge-index .no-data-wrap{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    margin: 45px 0;
}

.community-lounge-index .no-data-wrap svg{
    margin: 15px;
}

.community-lounge-index .no-data-wrap span{
  display: block;
  color: var(--Color-Gray-500, #9898AA);
  font-size: 12px;
}

.community-lounge-index .no-data-wrap .no-data{
  color: var(--Color-Gray-700, #60606B);
  font-size: 14px;
}

.community-read-body .ui-content-body {
  min-height: 100px;
  word-break: break-all; }

.community-read-body .hd.ui-web.justify > .dd:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}

.community-read-body span[data-act="addLike"].active svg path {
  fill: rgb(152, 152, 170);
  stroke: rgb(152, 152, 170);  
}

.community-read-comment li {
  border-bottom: 1px solid #eee;
}

.community-read-comment li:first-of-type {
  border-top: 1px solid #eee;
}

.community-read-body .ui-toggle-dropdown.right .menus a{
  display: flex;
  align-items: center;
  gap: 5px;
}

[data-act="button-scrap"], .ui-toggle-dropdown.right {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
}

.ui-toggle-dropdown.right .more.trigger {
  display: flex;
  align-items: center;
  padding: 0;
}

.community-read-comment ul {
  margin: 0;
  padding: 0;
  list-style: none; }
.community-read-comment .comment {
  position: relative;
  padding: 14px 10px; 
}

.community-read-info {
  width: 80px;
  border-bottom: 1px solid var(--Color-Gray-100, #EEEEF3);
  padding-bottom: 10px;
}

.community-read-comment .menus{
  left: -40px;
}

.community-read-comment .menus a {
  padding: 9px 15px 9px 10px;
}

.member-top-nav{
  padding: 15px 20px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  background: #fff; 
}

.member-item span.member-name{
  color: var(--Color-CommunityExample, #1E3A5F);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

#member-header-area{  
  border-bottom: 1px solid #eee;
}

.member-search-box{
  padding: 0 18px 20px;
}

.member-search-box .input-wrap {
    position: relative; /* 이미 인라인으로 있지만 CSS로 명시 */
    display: flex;
    align-items: center;
}

.member-search-box .member-search-input {
  border-radius: 12px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: #F9FAFB;
  width: 100%;
  padding: 8px 35px 8px 10px;
  box-sizing: border-box;
  height: 40px; /* 높이 예시 */
  padding: 0 35px; /* 좌우에 아이콘 공간(35px)만큼 여백 확보 */
  box-sizing: border-box; /* 패딩 포함해서 너비 계산 */
}

/* 3. 왼쪽 아이콘 (검색 돋보기) */
.member-search-box .left {
    position: absolute;
    top: 50%;
    left: 10px; /* 왼쪽 벽에서 10px 떨어짐 */
    transform: translateY(-50%); /* 수직 중앙 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* 아이콘을 클릭해도 인풋이 클릭되도록 설정 */
}

/* 4. 오른쪽 아이콘 (삭제 버튼 X) */
.member-search-box .right {
    position: absolute;
    top: 50%;
    right: 10px; /* 오른쪽 벽에서 10px 떨어짐 */
    transform: translateY(-50%); /* 수직 중앙 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 클릭 가능 표시 */
    
    /* X 아이콘 배경 스타일 (동그라미) */
    width: 18px;
    height: 18px;
    background-color: #c5c5c5; /* 회색 배경 */
    border-radius: 50%;
}

.member-top-nav .btn-invite{
  display: flex; 
  align-items: center; 
  font-size: 13px; 
  font-weight: 500;
  background: var(--Color-CommunityExample, #1E3A5F);
  color: #FFF;
  border-radius: 25px;
  text-decoration: none;
  padding: 8px 12px;
  gap: 5px;
}

  .community-read-comment .comment:first-child:after {
    display: none; }

.community-member .invite-member {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
  .community-member .invite-member a {
    padding: 10px 15px;
    text-decoration: none; }

.community-invite-form{
  padding: 15px 22px;
}

.community-invite-form .ui-web {
  margin: 13px 0; }

.community-invite-form .ui-web .ui-form-text{
  border: 1px solid #D1D5DB;
  border-radius: 12px;
  font-family: "SUITE", arial, sans-serif;
  font-size: 13px;
  height: 40px;
}
  .community-invite-form .ui-web dt {
    width: 60px;
    font-size: 13px;
    color: #262626; }
  .community-invite-form .ui-web .date {
    display: table;
    width: 100%;
    table-layout: fixed; }
    .community-invite-form .ui-web .date > div, .community-invite-form .ui-web .date > em {
      display: table-cell;
      vertical-align: middle; }
    .community-invite-form .ui-web .date > div {
      width: 46%; }
    .community-invite-form .ui-web .date > em {
      width: 8%;
      text-align: center; }

.community-invite-selector {
  display: none;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 30px;
  bottom: 30px;
  background: #fff;
  padding-bottom: 56px; }
  .community-invite-selector .index {
    height: 100%;
    padding: 0 10px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
    .community-invite-selector .index .ui-web {
      border-top: 1px solid #dfdfdf; }
      .community-invite-selector .index .ui-web:first-child {
        border-top: none; }
    .community-invite-selector .index .dt, .community-invite-selector .index .dd {
      padding: 12px 0; }
    .community-invite-selector .index .dt {
      font-size: 13px;
      color: #262626;
      padding-left: 10px; }
    .community-invite-selector .index .dd {
      padding-right: 10px; }
    .community-invite-selector .index .circle {
      position: relative;
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 7px solid #cfcfcf;
      border-radius: 50%;
      overflow: hidden;
      vertical-align: middle;
      -webkit-transition: border-color 0.2s ease-out;
      transition: border-color 0.2s ease-out; }
      .community-invite-selector .index .circle input {
        position: absolute;
        left: -30px;
        top: -30px; }
    .community-invite-selector .index .active .circle {
      border-color: #e94259; }
  .community-invite-selector .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 8px;
    border-top: 1px solid #dfdfdf; }
    .community-invite-selector .bottom span {
      display: block;
      float: left;
      width: 50%;
      padding: 0 2px; }
    .community-invite-selector .bottom button {
      margin: 0; }
  .ui-popup .community-invite-selector {
    display: block; }

.community-photo {
  padding: 7px 0 0; }
  .community-photo .index {
    margin: 0 3px;
    padding: 0;
    list-style: none; }
    .community-photo .index li {
      width: 50%;
      float: left; }
    .community-photo .index a {
      position: relative;
      display: block;
      margin: 0 3px 5px;
      background: #fff;
      overflow: hidden;
      text-decoration: none;
      border: 1px solid #dfdfdf;
      border-radius: .4em; }
    .community-photo .index figure {
      margin: 0;
      width: 100%;
      height: 150px;
      background-size: cover; }
    .community-photo .index img {
      display: block;
      margin: 0 auto;
      height: 150px; }
    .community-photo .index .body {
      position: relative;
      padding: 8px; }
      .community-photo .index .body strong, .community-photo .index .body span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
      .community-photo .index .body strong {
        margin-right: 15px;
        font-size: 12px;
        color: #262626; }
      .community-photo .index .body span {
        clear: both;
        font-family: "SUITE", arial, sans-serif;
        font-size: 9px;
        color: #606060; }
      .community-photo .index .body em {
        position: absolute;
        right: 8px;
        top: 8px;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        color: #446fce; }
    .community-photo .index .option {
      position: absolute;
      z-index: 10;
      left: 7px;
      top: 7px; }

.pop-photo-detail {
  height: 100%; }
  .pop-photo-detail .swiper-container {
    height: 100%; }
  .pop-photo-detail .swiper-wrapper {
    height: 100%; }
  .pop-photo-detail img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

.community-calendar-index .head {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  height: 310px;
  width: 100%;
  overflow: hidden; }
  .community-calendar-index .head .bg {
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(15px);
    filter: blur(15px);
    background-color: transparent;
    background-position: center top;
    background-size: cover;
    -webkit-transform: scale(1.18); }
    .community-calendar-index .head .bg:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2); }
.community-calendar-index .app-content {
  padding-top: 310px; }
.community-calendar-index .items {
  margin: 5px 5px 0;
  padding-bottom: 5px; }
  
.community-calendar-index .items .item:not(.empty) {
  margin: 0 15px 10px 15px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
}

.schedule-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 12px;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); 
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.s-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background-color: #eef2fc; 
    border-radius: 10px;
    flex-shrink: 0;
}

.s-month {
    font-size: 13px;
    color: #6b89c9;
    font-weight: 600;
}

.s-day {
    font-size: 20px;
    color: #3b65ce;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 2px;
}

.s-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; 
    overflow: hidden;
}

.s-title {
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s-time-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #3b65ce;
    margin-bottom: 6px;
}

.icon-clock {
    stroke: #3b65ce; 
}

.s-time {
    font-size: 11px;
    font-weight: 600;
}

.s-desc {
    font-size: 11px;
    color: #888888;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

  .community-calendar-index .items .date {
    width: 63px;
    vertical-align: top; }
    .community-calendar-index .items .date > * {
      display: block; }

.community-calendar-index .items .date strong {
  font-size: 12px;
  color: #6B7280;
}

.community-calendar-index .items .date span {
  font-size: 11px;
  color: #9CA3AF;
}

.community-calendar-index .items .bd strong {
  display: block;
  font-size: 15px;
  color: #262626; 
}
  .community-calendar-index .items .bd p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    height: 3em;
    line-height: 1.5em;
    font-size: 11px;
    color: #303030;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }

.community-calendar-index .items .empty span {
  display: block;
  padding: 15px 0;
  text-align: center;
  font-size: 12px;
  color: var(--Color-Gray-500, #9898AA);
}

.community-calendar-post .ui-box {
  margin-top: 7px; }
.community-calendar-post .sec {
  margin: 12px 0;
  font-size: 13px; }
  .community-calendar-post .sec.first {
    margin-top: 0; }
.community-calendar-post .ui-web {
  margin: 15px 0; }
.community-calendar-post .datebox {
  margin-left: -6px;
  margin-right: -6px; }
  .community-calendar-post .datebox > div {
    float: left;
    width: 50%;
    padding: 0 6px; }
  .community-calendar-post .datebox span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    color: #999; 
    border: none;
  }
  .community-calendar-post .datebox .ui-form-ext {
    margin-bottom: 0; }
.community-calendar-post nav {
  margin-top: 20px; }

.community-calendar-post input[type="text"], .community-calendar-post input[type="date"], .community-calendar-post input[type="time"], .community-calendar-post textarea{
  border-radius: 8px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: var(--Color-White, #FFF);
  resize: none;
}

.community-calendar-post nav button{
  border-radius: 8px;
  border: 1px solid var(--Color-Gray-100, #dadadd);
  background: var(--Color-White, #FFF);
  resize: none;
  padding: 10px 20px;
}

.community-calendar-post button[type="submit"]:disabled {
  background-color: #FFF !important; 
  color: var(--Color-Gray-700, #60606B);   
  border: 1px solid var(--Color-Gray-200, #C1C1CA);
  cursor: not-allowed;               
}

.community-calendar-post button[type="submit"].active-btn {
  background: var(--Color-Blue-900, #1E3A8A);
  color: #ffffff !important;   
  border: none;
  cursor: pointer;
}

.calendar-read .read .hd h1 {
  margin: 0;
  font-size: 20px;
  color: #303030;
}

.detail-card .c-divider {
    border: none;
    border-top: 1px solid #F0F0F0;
}

.calendar-read .read{
  margin: 20px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.c-info-row {
    display: flex;
    gap: 18px; 
}

.detail-card .c-title {
    font-size: 20px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.c-info-box {
    flex: 1; 
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 16px 0;
}

.content-card .c-info-box.no-bg {
    background-color: transparent;
    padding: 0;
}

.c-icon-wrap {
    width: 36px;
    height: 36px;
    background-color: #EEF2FA; /* 아이콘 뒤 연파란색 */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0; /* 영역 찌그러짐 방지 */
}

.c-text-wrap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.c-label {
    font-size: 12px;
    color: #A0A5B0;
    margin-bottom: 4px;
}

.c-value {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}

.c-value-desc {
    font-size: 14px;
    color: #333333;
    line-height: 1.6;
    word-break: keep-all;
    white-space: pre-wrap;
}

.align-top {
    align-items: flex-start !important;
}

.community-settings .container {
  padding: 0 0 5px; }
.community-settings .ui-index-items .title {
  padding-left: 0; }

.community-settings .dt strong{
  display: flex;
  gap: 8px;
}
.community-settings .dt svg{
  width: 16px;
}

.community-withdraw-confirm .warning {
  padding: 20px 7px 13px; }
  .community-withdraw-confirm .warning h1 {
    margin: 0;
    font-size: 14px;
    color: #262626;
    text-align: center; }
  .community-withdraw-confirm .warning p {
    line-height: 18px;
    font-size: 12px;
    color: #303030; }
.community-withdraw-confirm .confirm-form {
  margin: 0 0 50px;
  padding: 0;
  border-top: 1px solid #dfdfdf;
  text-align: center; }
  .community-withdraw-confirm .confirm-form label {
    padding: 12px 0;
    display: inline-block; }
  .community-withdraw-confirm .confirm-form span {
    color: #262626;
    font-size: 12px; }

.community-chat-index .items .item {
  display: block;
  border-top: 1px solid #dfdfdf;
  padding: 10px; }
  .community-chat-index .items .item:first-child {
    border-top: none; }
.community-chat-index .items .title span {
  width: 170px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
.community-chat-index .items .title em {
  font-style: normal; }
.community-chat-index .items .inf {
  width: 60px; }
  .community-chat-index .items .inf span {
    display: block;
    font-size: 10px;
    color: #848484; }

.community-chat-body {
  padding: 0 12px; }
  .community-chat-body .chat-body {
    margin: 0;
    padding: 0;
    list-style: none; }
    .community-chat-body .chat-body > li {
      margin: 12px 0; }
    .community-chat-body .chat-body .balloon {
      position: relative;
      padding: 8px;
      font-size: 11px;
      border-radius: .2em; }
      .community-chat-body .chat-body .balloon:before, .community-chat-body .chat-body .balloon:after {
        content: '';
        position: absolute;
        top: 8px; }
      .community-chat-body .chat-body .balloon:before {
        z-index: -1; }
      .community-chat-body .chat-body .balloon:after {
        z-index: 3; }
    .community-chat-body .chat-body .state span {
      display: block;
      font-size: 10px;
      color: #848484; }
    .community-chat-body .chat-body .state em {
      display: block;
      margin-top: -2px;
      font-size: 8px;
      font-style: normal;
      color: #446fce; }
    .community-chat-body .chat-body .party {
      display: table;
      width: 100%; }
      .community-chat-body .chat-body .party > div > div {
        display: table-cell;
        vertical-align: top; }
      .community-chat-body .chat-body .party .img {
        width: 58px; }
        .community-chat-body .chat-body .party .img img {
          display: block;
          width: 41px;
          border: 1px solid #fff; }
      .community-chat-body .chat-body .party .bd strong {
        display: block;
        padding: 1px 0 2px 8px;
        font-size: 11px; }
      .community-chat-body .chat-body .party .bd .balloon {
        position: relative;
        display: block;
        background: #fff;
        border: 1px solid #dedede; }
        .community-chat-body .chat-body .party .bd .balloon:after {
          left: -9px;
          border-left: 10px solid transparent;
          border-top: 12px solid #fff; }
        .community-chat-body .chat-body .party .bd .balloon:before {
          left: -11px;
          top: 7px;
          border-left: 13px solid transparent;
          border-top: 15px solid #dedede; }
      .community-chat-body .chat-body .party .state {
        width: 62px;
        padding: 20px 0 0 8px; }
    .community-chat-body .chat-body .self {
      text-align: right; }
      .community-chat-body .chat-body .self > div {
        float: right;
        display: table; }
      .community-chat-body .chat-body .self > div > div {
        display: table-cell;
        vertical-align: top; }
      .community-chat-body .chat-body .self .state {
        width: 65px;
        padding: 0 8px 0 0; }
      .community-chat-body .chat-body .self .balloon {
        position: relative;
        display: block;
        background: #9ed9e8;
        border: 1px solid #82c0cf; }
        .community-chat-body .chat-body .self .balloon:after {
          right: -9px;
          border-right: 10px solid transparent;
          border-top: 12px solid #9ed9e8; }
        .community-chat-body .chat-body .self .balloon:before {
          right: -11px;
          top: 7px;
          border-right: 13px solid transparent;
          border-top: 16px solid #82c0cf; }
  .community-chat-body .today {
    padding: 4px 0;
    text-align: center;
    background: #dfdfdf;
    border-radius: .3em;
    font-size: 11px;
    color: #262626;
    font-weight: bold; }

.community-chat-form {
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); }
  .community-chat-form fieldset {
    position: relative;
    padding: 8px 10px;
    z-index: 3;
    background: #fff; }
  .community-chat-form .input {
    display: block;
    margin-right: 72px;
    margin-left: 40px; }
    .community-chat-form .input input {
      margin: 0;
      padding: 11px 8px;
      width: 100%;
      font-size: 13px;
      color: #303030;
      border: none; }
  .community-chat-form button[type=submit] {
    position: absolute;
    right: 10px;
    top: 50%;
    height: 35px;
    margin: -17px 0 0 0; }
  .community-chat-form .attach {
    position: absolute;
    left: 10px;
    top: 0;
    width: 35px;
    height: 100%;
    background: none;
    border: none; }
    .community-chat-form .attach span {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -9px 0 0 -9px; }
  .community-chat-form .toolbar {
    position: absolute;
    z-index: 2;
    top: -62px;
    left: 7px;
    display: none; }
    .community-chat-form .toolbar a {
      float: left;
      display: block;
      margin: 0 7px;
      width: 46px;
      height: 46px;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      border: 2px solid #fff;
      opacity: 0;
      -webkit-transition: opacity 0.3s ease-in-out;
      transition: opacity 0.3s ease-in-out; }
      .community-chat-form .toolbar a:nth-child(1) {
        -webkit-transition-delay: 0s; }
      .community-chat-form .toolbar a:nth-child(2) {
        -webkit-transition-delay: .05s; }
      .community-chat-form .toolbar a:nth-child(3) {
        -webkit-transition-delay: .1s; }
      .community-chat-form .toolbar a:nth-child(4) {
        -webkit-transition-delay: .15s; }
    .community-chat-form .toolbar.active a {
      opacity: 1; }

/* Main Notice */
/* 공지사항 카드 스타일 */
.notice-card {
  padding-bottom: 15px;
}

.notice-card .card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.notice-card .title {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-card .main-link {
    text-decoration: none !important;
    display: block; 
}

.notice-card .ui-small-state {
  margin-top: 4px;
  font-size: 12px;
  color: #9898AA;
}

/* Main Planet(Ceo Insight) */
.main-sections .planet-items .item a {
  padding: 15px 0;  
}

.planet-items .item a {
    display: flex;           
    align-items: flex-start; 
    text-decoration: none;
}

.planet-items .item figure {
    flex: 0 0 80px;          
    height: 80px;       
    border-radius: 12px;    
    background-size: cover;
    background-position: center;
    margin-right: 15px;    
    margin-bottom: 0;          
}

.planet-content{
    width: 95%;
    height: 48px;
    padding-top: 5px;
}

.planet-content span {
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;  
    color: #9898AA;
    font-size: 12px;
    word-break: break-all;
    line-height: 1.5;
}

.planet-items .item .caption {
  flex: 1;                
  display: flex;
  flex-direction: column;    
  justify-content: center;
  padding-right: 10px;
}

.planet-items .item .caption p {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0; 
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.planet-items .item .caption span p {
    font-size: 12px;
    font-weight: 400;
    color: var(--Color-Gray-500, #9898AA);
    margin: 0 0 5px 0; 
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.planet-items .item .ui-small-state {
  font-size: 11px;
  color: var(--Color-Gray-500, #9898AA);
  margin-top: 5px;
}

.planet-items .ui-small-state em {
  color: var(--Color-Gray-500, #9898AA);
}

.planet-index .planet-content .caption span {
    font-size: 12px;
    font-weight: 400;
    color: var(--Color-Gray-500, #9898AA);
    margin: 0 0 5px 0; 
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Main Community */ 
.community-items .item {
  padding-bottom: 15px;
}

.community-card .main-link {
    text-decoration: none;
    display: block;
}

.community-card .club-tag {
    font-size: 12px;
    color: #4170D3; /* 포인트 컬러 */
    font-weight: bold;
}

.community-card .card-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%; 
    overflow: hidden;  
}

.community-card .club-tag {
    font-size: 12px;
    color: #4170D3;
    flex-shrink: 0;    
    white-space: nowrap; 
}

.community-card .summary {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    flex: 1;           
    white-space: nowrap; 
    overflow: hidden;  
    text-overflow: ellipsis; 
    margin: 0;  
}

.community-items .ui-small-state {
    display: flex;
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

.community-items .ui-small-state span {
    color: #999;
    display: flex;
    align-items: center;
}

.community-items .ui-small-state i {
    font-size: 14px;
}

.planet-index {
  padding-bottom: 0;
  padding-top: 11vh; }
  .planet-index.not-overflow {
    overflow: hidden;
    height: 100%; }
  .planet-index .planet-items {
    min-height: 200px;
    padding: 15px; }
    .planet-index .planet-items .item {
      width: 100%;
      float: left;
      border-radius: 12px;
      background: var(--Color-White, #FFF);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      margin-bottom: 10px;
      padding: 15px; }
    .planet-index .planet-items .ad-style-1 {
      width: 100%; }
    .planet-index .planet-items.swipe {
      min-height: 0;
      padding: 0; }

.planet-index .planet-items .item figure {
    height: 88px; 
    margin: 0;
}

.planet-index .thumb-wrapper {
    position: relative; 
    display: block;
    flex: 0 0 88px;      /* 기존 figure의 가로 넓이 역할 */
    margin-right: 15px;
}

.planet-index .thumb-wrapper .label {
  color: var(--Color-White, #FFF);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.60);
  display: flex;
  height: 19px;
  padding: 0px 4px;
  align-items: center;
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 10;
  font-size: 9px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}


.planet-items-slide {
  overflow: hidden;
  padding: 10px 20px 10px 0; }
  .planet-items-slide .swiper-container {
    overflow: visible !important; }
  .planet-items-slide .item {
    width: 140px;
    padding: 0 0 0 5px; }
    .planet-items-slide .item:first-child {
      padding-left: 0; }

.planet-index-tab {
  position: relative;
  padding-bottom: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  background: #fff;
  -webkit-overflow-scrolling: touch; }
  .planet-index-tab > a {
    padding: 6px 12px 8px;
    display: inline-block;
    min-width: 50px;
    text-align: center;
    text-decoration: none; }
    .planet-index-tab > a figure img {
      display: block;
      margin: 0 auto; }
    .planet-index-tab > a span {
      display: block;
      padding-top: 3px;
      font-size: 11px;
      color: var(--Color-Gray-500, #9898AA);
       }
    .planet-index-tab > a.active {
    color: #262626; }
    .planet-index-tab > a.active span{
    color: var(--Color-Blue-900, #1E3A8A); }
  .planet-index-tab .underbar {
    display: block;
    position: absolute;
    height: 2px;
    bottom: 0;
    left: 0;
    background: var(--Color-Blue-900, #1E3A8A);
    -webkit-transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out; }

#inline-comment-section {
    background: #fff;
    padding: 5px 15px;
    border-top: 10px solid #f2f2f2;
}
#inline-comment-section header {
    border-bottom: 1px solid #eee;
}
#inline-comment-section header h1 {
    font-size: 14px;
    font-weight: bold;
    color: #222;
}

#comment_area li {
    position: relative; 
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

#comment_area li .body .hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#comment_area li:last-of-type {
    margin-bottom: 0;
}
#comment_area li figure img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
#comment_area li .body {
    margin-left: 50px;
}
#comment_area li .body .hd .name {
    font-size: 13px;
    color: #333;
    display: inline-block;
}
#comment_area li .body .hd .date {
    font-size: 10px;
    color: #999;
    margin-left: 5px; 
}
#comment_area li .body .bd {
    margin-top: 5px;
    font-size: 12px;
    color: #444;
}

.comment-opt-wrap {
    position: relative;
}

.btn-comment-opt {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.mini-pop {
  display: none;
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 10;
  border-radius: 8px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: var(--Color-White, #FFF);
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
}

.mini-pop button {
  padding: 8px 15px;
  font-size: 13px;
  color: #ff4757; 
  background: none;
  border: none;
  white-space: nowrap;
  cursor: pointer;
}

.planet-items-slide.custom-recommend {
    padding: 0 0 20px 15px;
}
.planet-items-slide.custom-recommend > h1 {
    font-size: 14px;
    font-weight: bold;
    color: #222;
    margin-bottom: 15px;
}
#anotherItems .swiper-wrapper {
    justify-content: space-around;
}
#anotherItems .swiper-slide a {
    display: block;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
}
#anotherItems .swiper-slide figure {
    margin: 0;
    width: 100%;
    padding-top: 65%; 
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #f4f4f4;
}
#anotherItems .swiper-slide .caption {
    padding: 12px 10px;
}
#anotherItems .swiper-slide .caption p {
    margin: 0;
    font-size: 11px;
    color: #333;
    line-height: 1.4;
    letter-spacing: -0.3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.planet-index-search {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out; }
  .planet-index-search.show {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

.planet-read .app-content {
  padding-bottom: 60px; }
  .planet-read .app-content .wrap, .planet-read .app-content .planet-items-slide {
    visibility: hidden; }
  .planet-read .app-content.show .wrap, .planet-read .app-content.show .planet-items-slide {
    visibility: visible; }
.planet-read .spot img {
  display: block;
  width: 100%; }
.planet-read .body-wrap {
  margin: 20px 0 30px;
  padding: 0 15px; }
  .planet-read .body-wrap h1 {
    margin: 10px 0;
    font-size: 22px;
    letter-spacing: -2px;
    line-height: 32px; }
  .planet-read .body-wrap h2 {
    margin: 15px 0;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -1px; }
  .planet-read .body-wrap .body {
    padding: 0;
    font-size: 12px; }
    .planet-read .body-wrap .body figure {
      margin: 0 -5px; }
.planet-read .copyright {
  margin-top: 0; 
}
  .planet-read .copyright .dt {
    width: 53px; }
    .planet-read .copyright .dt span {
      display: block;
      width: 53px;
      height: 53px;
      background-size: cover; }
.planet-read .copyright .dd {
  padding-left: 0; 
}
    .planet-read .copyright .dd > strong, .planet-read .copyright .dd > span {
      display: block; }
    .planet-read .copyright .dd > strong {
      font-size: 12px; }
    .planet-read .copyright .dd > span {
      font-size: 9px;
      color: #606060; }
.planet-read .copyright .dd .meta {
  margin: 0; 
  border-bottom: 1px solid var(--Color-Background, #F5F7FA);
  padding-bottom: 8px;
}
      .planet-read .copyright .dd .meta span {
        position: relative;
        display: inline-block;
        padding: 0 5px 0 10px;
        font-size: 11px;
        color: #848484;
        font-style: normal; }
        .planet-read .copyright .dd .meta span:before {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 50%;
          width: 1px;
          height: 10px;
          margin: -5px 0 0;
          background: #dfdfdf; }
        .planet-read .copyright .dd .meta span:first-child {
          padding-left: 0; }
          .planet-read .copyright .dd .meta span:first-child:before {
            display: none; }

.planet-read .nav-bottom {
  margin-top: 24px; 
  border-top: 1px solid var(--Color-Background, #F5F7FA);
  border-bottom: 1px solid var(--Color-Background, #F5F7FA);
}

#planet-read [data-act="button-scrap"] svg path {
    fill: none;        
    stroke: #9898AA;  
    stroke-width: 1.5px;   
    transition: all 0.2s;   
}

#planet-read [data-act="button-scrap"].on svg path {
    fill: #9898AA;    
    stroke: #9898AA;   
    stroke-width: 1px;
}

#planet-read .thumb-wrapper figure.spot {
    position: relative;
    margin: 0;
    width: 100%;
}

#planet-read .thumb-wrapper figure.spot .label {
    position: absolute;
    bottom: 8px; 
    left: 8px;  
    z-index: 10;
    display: flex;
    align-items: center;
    height: 21px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.60);
    border-radius: 4px;
    color: var(--Color-White, #FFF);
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.lay-header .top-nav .right[data-act="button-scrap"] svg path {
    fill: transparent;
    stroke: #ffffff;
    transition: fill 0.2s ease;
}

.lay-header .top-nav .right[data-act="button-scrap"].on svg path {
    fill: #ffffff;
}

#planet-read [data-act="addLike"] {
    color: rgb(152, 152, 170);
}

#planet-read [data-act="addLike"].on svg path {
  fill: rgb(152, 152, 170);
  stroke: rgb(152, 152, 170);
}

  .planet-read .nav-bottom dt {
    font-size: 0; }

.planet-read .nav-bottom dt .btn-1 {
  font-family: "SUITE", Helvetica, Arial, sans-serif;
  margin: 0 0 0 8px;
  padding: 7px 12px;
  border: none;
  border-radius: 3px;
  background: #fff; 
  color: var(--Color-Gray-700, #60606B);
}
      .planet-read .nav-bottom dt .btn-1 > * {
        vertical-align: middle; }
      .planet-read .nav-bottom dt .btn-1 em {
        font-style: normal;
        font-size: 11px;
        color: #262626;
        margin-left: 3px; }
.planet-read .nav-bottom dt > *:first-child {
  margin-left: 0; 
  padding-left: 0;
}

.planet-read-ad-bottom {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #eee; }
  .planet-read-ad-bottom figure {
    height: 100%; }
  .planet-read-ad-bottom .bg-img {
    display: block;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover; }

/* Poll */
.poll-index {
  padding-top: 89px;
  overflow: hidden; }
  .poll-index .idx-document {
    height: 100%; }
  .poll-index .items .detail {
    display: none; }
  .poll-index .items .show .detail {
    display: block; }
  .poll-index .items .show .ico-arrow-down {
    width: 11px;
    height: 11px;
    background-position: -68px 0;
    margin: -6px 0 0 -6px; }
  .poll-index .color-all {
    color: #999; }
  .poll-index .color-ing {
    color: #f54032; }
  .poll-index .color-end {
    color: #4EB0E3; }

.poll-form {
  padding-bottom: 5px; }
  .poll-form .introduce {
    padding: 12px; }
    .poll-form .introduce .contents-head {
      padding-top: 10px;
      margin-bottom: 12px; }
      .poll-form .introduce .contents-head .icon {
        margin: 0 0 5px 0; }
        .poll-form .introduce .contents-head .icon em {
          font-style: normal; }
        .poll-form .introduce .contents-head .icon i, .poll-form .introduce .contents-head .icon em, .poll-form .introduce .contents-head .icon span {
          vertical-align: middle; }
        .poll-form .introduce .contents-head .icon .text-count b {
          font-size: 16px;
          vertical-align: middle; }
        .poll-form .introduce .contents-head .icon .text-count em {
          font-size: 10px;
          vertical-align: baseline;
          margin-left: 2px; }
        .poll-form .introduce .contents-head .icon .text-count.col-blue {
          color: #4EB0E3; }
        .poll-form .introduce .contents-head .icon .text-count.col-red {
          color: #dd0b01; }
      .poll-form .introduce .contents-head .date span:first-child:after {
        content: ' ~ '; }
  .poll-form .form {
    margin-bottom: 0; }
    .poll-form .form .toggle-form {
      display: none; }
    .poll-form .form ul {
      margin: 0;
      padding: 0;
      list-style: none; }
      .poll-form .form ul li label {
        display: table;
        width: 100%;
        border-bottom: 1px solid #eee; }
        .poll-form .form ul li label.not-border {
          border-bottom: none; }
      .poll-form .form ul li strong, .poll-form .form ul li span {
        display: table-cell;
        vertical-align: middle;
        padding: 13px 15px; }
      .poll-form .form ul li strong {
        font-size: 13px;
        color: #262626;
        padding-right: 0; }
      .poll-form .form ul li span {
        text-align: right;
        width: 40px;
        padding-left: 0; }
    .poll-form .form nav {
      padding: 15px 14px; }
      .poll-form .form nav button {
        margin: 0;
        padding: 12px 0;
        font-size: 14px; }
    .poll-form .form .toggle-form {
      margin: 0;
      padding: 0 15px; }
      .poll-form .form .toggle-form textarea {
        width: 100%;
        height: 120px;
        margin: 0;
        padding: 10px 8px;
        font-size: 13px;
        line-height: 1.5;
        border: 1px solid #dfdfdf; }
    .poll-form .form .title {
      margin: 0;
      padding: 15px 15px;
      font-size: 14px;
      border-bottom: 1px solid #ddd;
      font-weight: bold; }
      .poll-form .form .title em {
        font-style: normal; }
        .poll-form .form .title em:after {
          content: '. '; }
    .poll-form .form .ipt-text {
      padding: 10px 15px; }
  .poll-form .result-choice, .poll-form .result-word {
    margin-top: 5px; }
    .poll-form .result-choice .title, .poll-form .result-word .title {
      display: block;
      padding: 15px 15px 12px;
      font-size: 14px;
      border-bottom: 1px solid #ddd; }
  .poll-form .result-choice ul {
    margin: 0;
    padding: 15px 15px 10px;
    list-style: none; }
  .poll-form .result-choice li {
    margin: 3px 0 23px; }
  .poll-form .result-choice dl {
    display: table;
    width: 100%;
    margin: 0; }
  .poll-form .result-choice dt, .poll-form .result-choice dd {
    display: table-cell;
    vertical-align: middle; }
  .poll-form .result-choice dt strong {
    display: block;
    font-size: 13px;
    color: #262626; }
  .poll-form .result-choice dd {
    margin: 0;
    width: 60px;
    text-align: right; }
  .poll-form .result-choice .graph {
    position: relative;
    display: block;
    height: 9px;
    background: #ececec; }
    .poll-form .result-choice .graph em {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: #999; }
    .poll-form .result-choice .graph.col-blue em {
      background-color: #3c8aff; }
    .poll-form .result-choice .graph.col-green em {
      background-color: #8bd128; }
    .poll-form .result-choice .graph.col-orange em {
      background-color: #f48830; }
    .poll-form .result-choice .graph.col-red em {
      background-color: #e51212; }
    .poll-form .result-choice .graph.col-gray em {
      background-color: #999; }
  .poll-form .result-choice .count {
    font-size: 10px;
    color: #848484; }
  .poll-form .result-choice nav {
    margin-top: 50px; }
    .poll-form .result-choice nav a em {
      font-style: normal; }
    .poll-form .result-choice nav a em:before {
      content: '('; }
    .poll-form .result-choice nav a em:after {
      content: ')'; }
  .poll-form .result-word nav {
    padding: 10px 15px; }
    .poll-form .result-word nav em {
      font-style: normal; }
      .poll-form .result-word nav em:before {
        content: '('; }
      .poll-form .result-word nav em:after {
        content: ')'; }
  .poll-form .comment {
    margin-bottom: 0;
    padding: 14px; }

.poll-comments {
  display: none; }
  .poll-comments .app-content {
    border-top: 1px solid #dfdfdf;
    padding-left: 15px;
    padding-right: 15px; }

.ui-popup .poll-comments {
  display: block; }
  .ui-popup .poll-comments .poll-comment {
    z-index: -1; }

/* Mypage */
.mypage-myinfo .container {
  padding-bottom: 5px; }
.mypage-myinfo .ui-box {
  overflow: hidden; }
.mypage-myinfo .profile {
  position: relative;
  height: 154px;
  overflow: hidden; }
  .mypage-myinfo .profile .bg-check {
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: linear-gradient(37.59deg, #4EB0E3 0%, #183172 100%);
        /* background-color: #41b6c7; */
        /* background-image: linear-gradient(45deg, #3aa3b3 25%, transparent 25%, transparent 75%, #3aa3b3 75%, #3aa3b3), linear-gradient(45deg, #3aa3b3 25%, transparent 25%, transparent 75%, #3aa3b3 75%, #3aa3b3); */
        /* background-size: 12px 12px; */
        background-position: 0 0, 6px 6px; }
  .mypage-myinfo .profile .bg-img {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: blur(15px);
    filter: blur(15px);
    background-color: transparent;
    -webkit-transform: scale(1.18); }
  .mypage-myinfo .profile .photo {
    position: absolute;
    display: block;
    margin: 0 0 0 -43px;
    left: 50%;
    top: 20px;
    width: 86px;
    height: 86px; }
    .mypage-myinfo .profile .photo .img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45);
      background-position: 50% 50%;
      background-color: #E8E8ED; 
      background-repeat: no-repeat;
      background-size: cover;
    }
      .mypage-myinfo .profile .photo .img input {
        width: 100%;
        height: 100%;
        opacity: 0; }
    .mypage-myinfo .profile .photo .small-icon {
      display: block;
      position: absolute;
      right: -12px;
      bottom: -12px;
      padding: 5px;
      width: 41px;
      height: 41px;
      font-size: 0; }
      .mypage-myinfo .profile .photo .small-icon span {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 31px;
        background: #fff;
        border-radius: 50%;
        text-align: center; }
        .mypage-myinfo .profile .photo .small-icon span i {
          position: relative;
          top: 6px;
          margin: 0 auto; }
  .mypage-myinfo .profile .logout {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    text-align: center; }
    .mypage-myinfo .profile .logout a {
      display: inline-block;
      padding: 4px 8px;
      text-decoration: none;
      font-family: "SUITE", arial, sans-serif;
      font-size: 14px;
      color: #fff; }
    .mypage-myinfo .profile .logout * {
      vertical-align: middle; }
    .mypage-myinfo .profile .logout i {
      margin-right: 5px; }
.mypage-myinfo .index {
  margin: 0 0 0;
  padding: 0;
  list-style: none; }
  .mypage-myinfo .index input {
    margin: 0;
    padding: 0;
    width: 100%;
    border: none; }
  .mypage-myinfo .index li {
    position: relative;
    border-bottom: none; }
    .mypage-myinfo .index li:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      -webkit-transform-origin: 0 0;
      height: 1px;
      margin-bottom: -0.5px;
      -webkit-transform: scaleY(0.5);
      background: #dfdfdf; }
    .mypage-myinfo .index li:first-child {
      border-top: 1px solid #dfdfdf; }
  .mypage-myinfo .index dl {
    margin: 0;
    display: table;
    width: 100%; }
    .mypage-myinfo .index dl * {
      vertical-align: middle; }
    .mypage-myinfo .index dl > * {
      display: table-cell; }
    .mypage-myinfo .index dl dt {
      width: 42px;
      text-align: center; }
    .mypage-myinfo .index dl dd {
      margin: 0; }
      .mypage-myinfo .index dl dd > * {
        display: block;
        padding: 17px 5px;
        font-size: 13px;
        color: #262626;
        font-weight: bold; }
      .mypage-myinfo .index dl dd a {
        text-decoration: none; }
.mypage-myinfo .nav-bottom {
  margin: 35px 0 0;
  padding: 15px; }

.mypage-scrap .group {
  clear: both;
  padding-top: 3px; }
  .mypage-scrap .group:first-child {
    padding-top: 0; }

  .mypage-scrap .group > nav .ico-mm {
    position: relative;
    display: block;
    float: right;
    overflow: hidden;
    margin-right: 10px;
}
/* 기본 상태: 접힘 아이콘 숨기기 */
.ico-mm .svg-closed { display: none; }
.ico-mm .svg-open { display: inline-block; }

/* .group에 .closed 클래스가 붙었을 때 (접힌 상태) */
.group.closed .ico-mm .svg-open { display: none; }
.group.closed .ico-mm .svg-closed { display: inline-block; }

/* 아이콘 위치 정렬 (필요시) */
.ico-mm svg {
    vertical-align: middle;
}

/* 리스트 아이템 레이아웃 */
.mypage-scrap .scrap-item {
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
}

.mypage-scrap .item-container {
    display: flex;
    padding: 12px;
    align-items: center;
    position: relative;
}

/* 이미지 영역 */
.mypage-scrap.thumb-area {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 12px;
}

.mypage-scrap .thumb-img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

/* 텍스트 영역 */
.mypage-scrap .info-area {
    flex: 1;
    min-width: 0; /* 텍스트 생략 처리를 위해 필요 */
    padding-right: 20px;
}

.mypage-scrap .info-area .title {
    display: block;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.mypage-scrap .info-area .summary {
    font-size: 12px;
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    line-height: 1.2;
}

.mypage-scrap .info-area .summary p {
   margin: 0;
}

/* 하단 태그 및 날짜 */
.mypage-scrap .meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mypage-scrap .board-tag {
    background: #F1F6FF;
    color: #4A89FF;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.mypage-scrap .date {
    font-size: 10px;
    color: #BBB;
} 

/* 우측 화살표 */
.mypage-scrap .arrow-area {
    position: absolute;
    right: 12px;
    color: #CCC;
}


  .mypage-scrap .group .index {
    display: none;
    margin: 5px 2px 0px;
    padding: 0;
    list-style: none; }
    .mypage-scrap .group .index li {
      width: 100%;
      float: left;
      padding: 0 3px 5px;
      opacity: 0;
      -webkit-transition: opacity 0.3s ease-out;
      transition: opacity 0.3s ease-out; }
    .mypage-scrap .group .index a {
      display: block;
      overflow: hidden;
      margin: 0;
      text-decoration: none; 
      border-radius: 16px;
      background: var(--Color-White, #FFF);
      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
    }
    .mypage-scrap .group .index li.show {
      opacity: 1; }
    .mypage-scrap .group .index div.bd {
      padding: 18px 10px 5px;
      overflow: hidden; }
      .mypage-scrap .group .index div.bd strong, .mypage-scrap .group .index div.bd span {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        overflow: hidden; }
      .mypage-scrap .group .index div.bd strong {
        font-size: 16px;
        color: #262626; }
      .mypage-scrap .group .index div.bd span {
        font-size: 11px;
        color: #303030; }
    .mypage-scrap .group .index figure {
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover; }
    .mypage-scrap .group .index .inf strong, .mypage-scrap .group .index .inf span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .mypage-scrap .group .index .inf strong {
      font-size: 12px;
      color: #262626;
      height: 1.6em; }
    .mypage-scrap .group .index .inf span {
      font-size: 10px;
      color: #606060; }
  .mypage-scrap .group .more {
    position: relative; }
    .mypage-scrap .group .more i {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 44px;
      height: 44px;
      margin: -22px 0 0 -22px; }
      .mypage-scrap .group .more i:before, .mypage-scrap .group .more i:after {
        content: '';
        position: absolute;
        background: #000; }
      .mypage-scrap .group .more i:before {
        left: 0;
        top: 50%;
        width: 100%;
        height: 2px;
        margin-top: -1px; }
      .mypage-scrap .group .more i:after {
        left: 50%;
        top: 0;
        width: 2px;
        height: 100%;
        margin-left: -1px; }
  .mypage-scrap .group.closed > nav .h1-subtitle {
    margin: 12px 0;
    padding-left: 15px;
    font-size: 14px; }

  .mypage-scrap .group.active > nav .h1-subtitle {
    margin: 12px 0;
    font-size: 14px; 
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mypage-scrap .group.active > nav .h1-subtitle em{
    margin-left: 0;
  }

  .mypage-scrap .thumb-area {
    width: 80px;  
    height: 80px;  
    flex-shrink: 0; 
    margin-right: 12px; 
}

.mypage-scrap .thumb-img {
    width: 100%; 
    height: 100%; 
    margin: 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.mypage-scrap .thumb-default {
    width: 100%; 
    height: 100%; 
    margin: 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

  .mypage-scrap .group.closed > nav .ico-mm {
    margin-right: 15px; }
    .mypage-scrap .group.closed > nav .ico-mm:after {
      display: block; }
  .mypage-scrap .group.closed .index {
    display: none; }
  .mypage-scrap .group.type-A .more a {
    height: 50px; 
    justify-content: center;
    align-items: center;
    display: flex;
    color: #666;
    text-decoration: none;
  }
  .mypage-scrap .group.type-A .index .bd {
    height: 140px; }
    .mypage-scrap .group.type-A .index .bd strong {
      line-height: 1.4em;
      height: 2.8em;
      -webkit-line-clamp: 2;
      letter-spacing: -1px; }
    .mypage-scrap .group.type-A .index .bd span {
      margin-top: 10px;
      line-height: 1.6em;
      height: 4.8em;
      -webkit-line-clamp: 3; }
  .mypage-scrap .group.type-A .index .inf {
    padding: 6px 8px 0;
    height: 45px; }
  .mypage-scrap .group.type-B .more a {
    height: 50px; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    text-decoration: none;
  }
  .mypage-scrap .group.type-B .index .bd {
    height: 130px; }
    .mypage-scrap .group.type-B .index .bd strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-wrap: break-word;
      font-size: 16px;
      color: #262626;
      line-height: 1.5em;
      -webkit-line-clamp: 4;
      letter-spacing: -1px; }
  .mypage-scrap .group.type-B .index .inf {
    padding: 5px; }
  .mypage-scrap .group.last .index {
    margin-bottom: 0; }
.mypage-button {
    width: 90% !important;
    margin: 0 auto !important;
    margin-top: 10px !important;
}

.mypage-myinfo .business-card-div{
  background-color: #b7c1e7;
  padding-bottom: 40px; 
  padding-top: 50px;
  position: relative; 
}

.mypage-myinfo .business-card{
  z-index: 2;
  position: relative;
  margin: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: var(--Color-White, #FFF);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.mypage-myinfo .business-card .top-line{
  background: var(--Color-Blue-700, #4170D3);
  width: 100%;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
}

.mypage-myinfo .business-card .title-div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 12px;
}

.mypage-myinfo .business-card .business-name{
  color: var(--Color-Blue-700, #4170D3);
  font-family: Roboto;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 15px; /* 150% */
  letter-spacing: 0.25px;
  margin: 0;
}

.mypage-myinfo .business-card .profile-div{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--Color-Gray-100, #EEEEF3);
}

.mypage-myinfo .business-card .profile-div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.mypage-myinfo .business-card .profile-div .profile-btn-div{
  position: relative;
  top: -12px;
  left: 28px;
  display: flex;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 9999px;
  background: var(--Color-Blue-500, #7094DE);
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.10), 0 4px 6px -1px rgba(0, 0, 0, 0.10);
}

.mypage-myinfo .business-card .role-name{
  color: var(--Color-Gray-500, #9898AA);
  font-family: Roboto;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px; /* 150% */
  margin: 0;
}

.mypage-myinfo .business-card .name{
  color: var(--Color-Gray-900, #303030);
  font-family: Roboto;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 21.25px; /* 125% */
  letter-spacing: -0.425px;
}

.mypage-myinfo .business-card .divider{
  width: 20px;
  height: 1.5px;  
  background: rgba(65, 112, 211, 0.20);
  margin-bottom: 5px;
}

.mypage-myinfo .business-card .phone{
  color: #505060;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 150% */
  vertical-align: middle;
}

.mypage-myinfo .business-card .phone img{
  width: 10px; 
  margin-right: 5px;
}

.mypage-myinfo .business-card .email{
  color: #505060;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 150% */
  vertical-align: middle;
}

.mypage-myinfo .business-card .email img{
  width: 10px; 
  margin-right: 5px;
}

.mypage-myinfo .info-div{
  background-color: #FFFFFF;
  margin-top: -100px; 
  border-radius: 24px 24px 0 0; 
  padding-top: 50px; 
  position: relative;
  z-index: 1; 
  border: 1px solid #eaeaea;
  border-bottom: none; 
  padding-bottom: 10px;
}

.mypage-myinfo .info-div .info-card-div {
  border-radius: 12px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: var(--Color-White, #FFF);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
  margin: 20px;
  padding: 18px;
}

.mypage-myinfo .info-div .info-card-div .title{
  color: var(--Color-Gray-500, #9898AA);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 16.5px; /* 150% */
  margin: 0;
}

.mypage-myinfo .info-div .info-card-div span{
  color: var(--Color-Gray-900, #303030);
  font-size: 13px;
  font-weight: 500;
  line-height: 25px;
  margin-bottom: 10px; 
}

.mypage-myinfo .info-card-div .title, 
.mypage-myinfo .info-card-div span {
    display: block; 
    margin-bottom: 8px;
}

.mypage-myinfo .info-card-div span:last-of-type {
    margin-bottom: 0;
}

.mypage-myinfo .info-div .info-card-div h2{
  color: #4170D3;
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px; /* 150% */
  letter-spacing: 0.275px;
  margin: 0;
}

.mypage-myinfo .info-div .info-card-div hr{
  border: none;
  border-top: 1px solid var(--Color-Gray-100, #EEEEF3);
  margin: 12px 0;
}

.mypage-myinfo .info-div .user-info-div, .company-info-div {
  display: none; 
}

.mypage-myinfo .info-div .user-info-div.active, .company-info-div.active {
  display: block;
}

.mypage-myinfo .info-div .slide-btn {
  display: flex;
  justify-content: center;
  gap: 8px;
  /*margin-bottom: 15px;*/
}
.mypage-myinfo .info-div .slide-btn .left {
  width: 10px;
  height: 10px;
  background: #DDD;
  border-radius: 50%;
  cursor: pointer;
}
.mypage-myinfo .info-div .slide-btn .left.active {
    background: #4170D3;
}
.mypage-myinfo .save-card-btn-area{
  text-align: center;
}
/* 저장 버튼 영역 */
.mypage-myinfo .btn-save-card {
    background: transparent; /* 배경 투명 */
    border: none;            /* 테두리 제거 */
    color: #4170D3;          /* 글씨 색상 (파란색) */
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    outline: none;           /* 클릭 시 파란 테두리 제거 */
}

/* 저장 버튼 스타일 */
.mypage-myinfo .btn-save-card {
    background-color: rgba(255, 255, 255, 0.2); /* 은은한 배경 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-family: "SUITE", Helvetica, Arial, sans-serif;
    border-radius: 20px;
    color: #4170D3; 
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.mypage-myinfo .btn-save-card svg {
    margin-top: -1px;
}

.mypage-myinfo .button-div {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mypage-myinfo .button-div button{
  display: flex;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: var(--Color-White, #FFF);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
  padding: 15px 21px;
  justify-content: space-between;
  align-items: center;
  font-family: 'SUITE';
}

.mypage-myinfo .button-div button.red{
  color: var(--Color-Red, #DC2626);
}

/** 비밀번호 변경 */
.change-myinfo .ui-box {
  margin: 16px;
  border-radius: 12px;
  border: 1px solid var(--Color-Background, #F5F7FA);
  background: var(--Color-White, #FFF);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.change-myinfo .change_pw_div {
  display: flex;   
  flex-direction: column;   
  gap: 8px;         
  margin-bottom: 16px;   
  align-items: baseline;
  position: relative; 
}

.change-myinfo .pw_icon {
    position: absolute;
    right: 15px; 
    bottom: 10px; 
    display: flex;  
}

.change-myinfo .change_pw_div input {
  height: 43px;
  padding: 11px 41px 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--Color-Background, #F5F7FA);
  background: var(--Color-Background, #F5F7FA);
  width: 100%;               /* 가로 너비를 부모 영역에 맞춤 */
  box-sizing: border-box;    /* 테두리와 패딩을 너비에 포함 (레이아웃 깨짐 방지) */
}

.change-myinfo .change_pw_button_div button{
  font-family: "SUITE", arial, sans-serif;
  border: none;
  border-radius: 8px;
  background: var(--Color-Blue-900, #1E3A8A);
  color: #FFF;
  width: 100%;
  height: 38px;
}

.change-myinfo .change_pw_div label {
  font-weight: 600;
  color: var(--Color-Gray-500, #9898AA);
}

.change-myinfo .none {
  display: none;
}

.change-myinfo .block {
  display: block;
}

.pop-select-attach-file {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); 
  z-index: 9999;
  display: none;
}

.pop-select-attach-file .cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center; 
}

.pop-select-attach-file nav button {
  padding: 12px 0; 
}

.ui-popup .pop-select-attach-file {
  display: table; }

/** 홈화면 검색창 */

.search-a{
  display: block;
  overflow: hidden;
  margin: 0;
  text-decoration: none;
  border-radius: 16px;
  background: var(--Color-White, #FFF);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
}

.search-a .item-container{
  display: flex;
  padding: 12px;
  align-items: center;
  position: relative;
}

.search-a .item-container .thumb-area {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  margin-right: 12px;
}

.search-a .item-container .thumb-area img {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 12px;
}
.search-a .item-container .info-area {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
}

.search-a .item-container .meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-a .item-container .info-area .summary {
  font-size: 12px;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
  line-height: 1.4;
}

.search-a .item-container .info-area strong {
  display: block;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

/** secession */
#delete-community-wrap .secession-div, .secession-myinfo .secession-div{
  border-radius: 12px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: var(--Color-White, #FFF);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
  padding: 20px;
  margin-bottom: 10px;
  text-align: left;
}
.secession-myinfo .secession-header-div{
  margin-bottom: 20px;
}

.secession-myinfo .secession-header-div svg{
  margin: 5px;
}

.secession-myinfo .secession-header-div h2{
  color: var(--Color-Gray-900, #303030);
  font-size: 18px;
  margin: 0;
}

.secession-myinfo .secession-header-div span{
  color: var(--Color-Gray-700, #60606B);
  font-size: 13px;
}

#delete-community-wrap .secession-title-div, .secession-myinfo .secession-title-div {
  display: flex;
  margin-top: 10px;
}

#delete-community-wrap .secession-title-div h3, .secession-myinfo .secession-title-div h3{
  display: inline-block;
  color: var(--Color-Red, #DC2626);
  margin: 0;
  padding-left: 5px;
  font-size: 14px;
}

.secession-myinfo .secession-div ul {
  padding-inline-start: inherit;
}

#delete-community-wrap .secession-div ul li, .secession-myinfo .secession-div ul li{
  color: var(--Color-Gray-700, #60606B);
  padding-top: 12px;
  font-size: 13px;
}

.secession-myinfo .secession-div ul li:first-of-type{
  padding-top: 0;
}

.secession-myinfo .secession-div .secession-agree-text{
  font-size: 14px;
}

.secession-myinfo .secession-button{
  width: 100%;
  display: flex;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  align-content: space-between;
  flex-wrap: inherit;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 10px;
}

.secession-myinfo .secession-button.disabled {
  background: var(--Color-Gray-100, #EEEEF3);
  color: var(--Color-Gray-500, #9898AA);
  pointer-events: none;
}

.secession-myinfo .secession-button.white {
  background: var(--Color-White, #FFF);
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  color: var(--Color-Gray-700, #60606B);
}

.secession-myinfo .secession-button.red {
  background: var(--Color-Red, #DC2626);
  color: #FFF;
}
/* Message */
.message .top-navigation {
  margin: 5px 0;
  padding: 0 5px;
  font-size: 0; }
  .message .top-navigation .ui-button {
    margin: 0;
    padding: 0 12px;
    height: 32px;
    background: #fff;
    border: 1px solid #dfdfdf;
    vertical-align: middle; }
    .message .top-navigation .ui-button i, .message .top-navigation .ui-button span {
      vertical-align: middle; }
  .message .top-navigation .ui-button.dir {
    font-size: 0;
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px; }
  .message .top-navigation .dt .ui-button {
    margin-right: 3px; }
  .message .top-navigation .dd .ui-button {
    margin-left: 3px; }
  .message .top-navigation .ui-toggle-dropdown {
    position: relative; }
    .message .top-navigation .ui-toggle-dropdown .menus {
      width: 100%; }
      .message .top-navigation .ui-toggle-dropdown .menus a {
        padding-left: 12px;
        padding-right: 12px; }
    .message .top-navigation .ui-toggle-dropdown .trigger {
      width: 140px;
      text-align: left;
      font-size: 13px; }
      .message .top-navigation .ui-toggle-dropdown .trigger:after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        display: inline-block;
        margin-top: -3px;
        width: 0;
        height: 0;
        vertical-align: middle;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid #262626; }
    .message .top-navigation .ui-toggle-dropdown.active .trigger:after {
      border-top: none;
      border-bottom: 7px solid #262626; }
.message .index > .ui-web {
  position: relative;
  padding: 0 10px 0 0;
  border-bottom: none; }
  .message .index > .ui-web:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-transform-origin: 0 0;
    height: 1px;
    margin-bottom: -0.5px;
    -webkit-transform: scaleY(0.5);
    background: #dfdfdf; }
.message .index a.dd {
  padding: 15px 0;
  text-decoration: none; }
.message .index .evt-toggle-form {
  width: 45px;
  text-align: center; }
.message .index strong {
  display: block;
  font-size: 13px;
  color: #262626; }
.message .index dl {
  margin-top: 3px;
  font-size: 11px;
  color: #848484; }
.message .read .hd {
  padding: 13px 10px 10px;
  border-bottom: 1px solid #dfdfdf; }
  .message .read .hd h1 {
    margin: 0;
    font-size: 12px;
    color: #303030; }
  .message .read .hd p {
    margin: 7px 0 0;
    font-size: 11px;
    font-family: "SUITE", arial, sans-serif;
    color: #848484; }
.message .read .bd {
  padding: 15px 10px 30px;
  font-size: 12px;
  color: #303030;
  line-height: 1.5em; }

.message-form .reception-list {
  position: relative;
  height: 40px;
  border-bottom: 1px solid #dfdfdf;
  padding: 0 50px 0 0; }
  .message-form .reception-list input {
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 0 0 0 15px;
    border: none; }
  .message-form .reception-list button {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    font-size: 0; }
    .message-form .reception-list button span {
      position: absolute;
      display: block;
      right: 10px;
      top: 0;
      width: 28px;
      height: 28px;
      border: 1px solid #dfdfdf;
      border-radius: 3px; }
    .message-form .reception-list button i {
      margin-top: 5px; }

.message-form .app-content .body {
  height: 100%;
  padding-bottom: 0 !important; 
}
  
.message-form .app-content .body textarea {
  font-family: 'SUITE';
  padding-top: 10px;
  padding-bottom: 20px; 
}

/* 탭 메뉴 */
.message .message-tabs { display: flex; border-bottom: 1px solid #eee; }
.message .tab-item { 
  flex: 1; 
  padding: 15px; 
  text-align: center; 
  background: white; 
  border: none; 
  color: #999; 
  border-bottom: 2px solid transparent; 
  font-family: 'suite', sans-serif;
}
.message .tab-item.active { color: #4A7DDA; border-bottom-color: #4A7DDA; font-weight: bold; }

/* 리스트 아이템 */
.message .message-item-inner { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f5f5f5; }

.message .message-item-inner:first-of-type{
  border-top: 1px solid #f5f5f5; 
}

.message .message-item-inner .avatar{
  width: 40px;
  height: 40px;
  background: #ebebeb;
  border-radius: 50%;
  margin-right: 10px;
}

.message .message-item-inner .avatar .bg-img {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.message .check-area {
    margin-right: 12px;
    flex-shrink: 0; 
}

.message .message-item-inner:last-of-type{
  border-bottom: none;
}

.message .avatar img { 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  margin-right: 12px; 
  background: #eee; 
}

.message .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.message .bottom-row {
    display: flex;
    align-items: center;
}

.message .top-row { 
  display: flex; justify-content: space-between; margin-bottom: 4px; 
  align-items: center;
}
.message .name { font-weight: bold; font-size: 14px; color: var(--Color-Gray-900, #303030);}
.message .date { color: #bbb; font-size: 11px; }

.message .subject { 
  color: #666; 
  font-size: 14px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  max-width: 200px; 
  margin: 0;
}

.unread-dot { 
  display: inline-block; 
  width: 8px; 
  height: 8px; 
  background: #4A7DDA; 
  border-radius: 50%; 
  margin-left: 5px; 
  flex-shrink: 0;
}

.message .all-check-label { display: flex; align-items: center; cursor: pointer; }
.message .all-check-label .txt { 
  font-size: 14px; 
  margin-left: 6px; 
  display: inline-block !important; 
  color: var(--Color-Gray-700, #60606B);
}

.message-item-inner .content-area {
  text-decoration: none;
  display: flex;
  align-items: center;
  flex: 1;
  color: inherit;
  min-width: 0;
}

.message .list-controls { 
  display: flex; 
  justify-content: space-between; 
  padding: 10px 15px; 
  align-items: center; }

.message .btn-delete { 
  display: flex;
  align-items: center;
  gap: 2px;
  background: #eee;
  border: none; 
  padding: 7px 12px; 
  border-radius: 4px; 
  font-size: 13px; 
  color: var(--Color-Gray-500, #9898AA);
  font-family: 'suite', sans-serif;
  border: 1px solid #eee;
}

.message .btn-delete.active {
  color: var(--Color-Gray-900, #303030);
  border: 1px solid var(--Color-Gray-200, #C1C1CA);
  background: var(--Color-White, #FFF);
}

.message .btn-delete.active svg path {
    fill: var(--Color-Gray-900, #303030);
}

.message .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px; 
}

.message .empty-state svg {
    margin-bottom: 12px; 
}

.message .empty-state p {
    font-size: 15px;
    color: #9898AA;
    margin: 0;
}

.ball-button-message {
  display: flex;
  text-align: center;
  color: #fff;
  width: 55px;
  font-size: 11px;
  height: 55px;
  vertical-align: middle;
  background: var(--Color-Blue-700, #4170D3);
  border: none;
  border-radius: 50%;
  align-content: center;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
}

.ball-button-forum {
  display: flex;
  text-align: center;
  color: #fff;
  width: 55px;
  font-size: 11px;
  height: 55px;
  vertical-align: middle;
  background: var(--Color-Blue-700, #4170D3);
  border: none;
  border-radius: 50%;
  align-content: center;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
}

.ball-button-forum {
  display: flex;
  text-align: center;
  color: #fff;
  width: 55px;
  font-size: 11px;
  height: 55px;
  vertical-align: middle;
  background: var(--Color-Blue-700, #4170D3);
  border: none;
  border-radius: 50%;
  align-content: center;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
}

.message .read .hd h1 span{
  font-weight: 400;
}

.message .reply-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px; 
    background: #fff;
    z-index: 100;
    border-top: 1px solid #F3F4F6;
}

.message .reply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    background-color: #4A76D4;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}

.message .reply-btn:active {
    background-color: #395eb3; 
}

.message .app-content.message {
    padding-bottom: 80px; 
}

/**
 * ETC
 */
/* write form */
.write-form .lay-header .text-button {
  width: auto;
  padding: 0 10px;
  background: none;
  border: none;
  height: 50px;
  line-height: 50px; }
  .write-form .lay-header .text-button span {
    display: inline-block;
    padding: 0 15px;
    line-height: 27px;
    height: 27px;
    font-size: 13px;
    color: #fff;
    font-family: 'SUITE', Helvetica, Arial, sans-serif;
    border-radius: .3em; }
.write-form .body {
  padding-bottom: 80px; }
  .write-form .body.is-attach-files {
    padding-bottom: 160px; }
  .write-form .body fieldset {
    height: 100%; }
  .write-form .body textarea {
    padding: 0 15px;
    margin: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    line-height: 18px;
    font-size: 13px;
    color: #262626;
    font-family: "SUITE", Helvetica, Arial, sans-serif;
    -webkit-overflow-scrolling: touch; 
    resize: none;
  }
.write-form .image-index {
  position: absolute;
  z-index: 9;
  display: none;
  bottom: 67px;
  left: 0;
  right: 0;
  padding: 8px;
  background: #f1f1f1;
  font-size: 0;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
  .write-form .image-index > div {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 70px;
    margin-left: 5px;
    overflow: hidden; }
    .write-form .image-index > div button {
      position: absolute;
      right: 5px;
      top: 5px;
      border: none;
      background: #fff;
      background: rgba(255, 255, 255, 0.9);
      width: 20px;
      height: 20px;
      overflow: hidden;
      margin: 0;
      padding: 0;
      border-radius: 50%; }
      .write-form .image-index > div button i {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -4px 0 0 -4px; }
    .write-form .image-index > div:first-child {
      margin-left: 0; }
  .write-form .image-index figure {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%; }
.write-form .toolbar {
  z-index: 10;
  padding: 10px 0;
  font-size: 0;
  text-align: center;
  background: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); }
  .write-form .toolbar a {
    margin: 0 7px; }
  .write-form .toolbar input {
    margin: 0 7px;
    border: 1px solid #000; }

/* comment index */
.idx-comment .index {
  margin: 0;
  padding: 0;
  list-style: none; }
  .idx-comment .index li {
    padding: 0; }
    .idx-comment .index li:first-child {
      padding-top: 12px; }
      .idx-comment .index li:first-child .main-gray-line {
        display: none; }
  .idx-comment .index.web li figure {
    float: left;
    width: 53px;
    margin: 0; }
  .idx-comment .index.web li .body {
    margin-left: 60px; }
  .idx-comment .index.web li.type-reply .body {
    margin-left: 82px; }
  .idx-comment .index .reply {
    display: block;
    float: left;
    width: 22px;
    padding-left: 5px; }
    .idx-comment .index .reply i {
      display: block; }
  .idx-comment .index figure img {
    display: block;
    width: 43px;
    margin: 0 auto; }
  .idx-comment .index .hd {
    position: relative; }
    .idx-comment .index .hd .right {
      display: block;
      position: absolute;
      right: 0;
      top: 0; }
    .idx-comment .index .hd .name {
      display: block;
      font-size: 13px;
      color: #262626; }
      .idx-comment .index .hd .name .sp-ico {
        vertical-align: middle; }
    .idx-comment .index .hd .date {
      top: 3px;
      color: #848484;
      font-size: 11px; }
  .idx-comment .index .bd {
    margin-top: 10px;
    font-size: 12px;
    color: #303030; }
  .idx-comment .index .btns {
    clear: both;
    margin-top: 15px; }
    .idx-comment .index .btns .btn-1 {
      margin: 0;
      padding: 4px 9px;
      border: 1px solid #dfdfdf;
      border-radius: 2px;
      background: #fff; }
      .idx-comment .index .btns .btn-1 > * {
        vertical-align: middle; }
      .idx-comment .index .btns .btn-1 em {
        margin-left: 8px;
        font-weight: bold;
        color: #262626;
        font-style: normal;
        font-size: 11px; }
  .idx-comment .index .main-gray-line {
    margin: 7px 0 12px; }

/* page loading */
.page-loading {
  display: none;
  position: absolute;
  z-index: 99999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
}

.page-loading.show {
  display: block;
}

/* 모던한 링(Ring) 스피너 */
.page-loading i {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;

  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;

  border: 3px solid rgba(65, 112, 211, 0.15);
  border-top-color: #4170D3;
  border-radius: 50%;
  animation: ccloud-spinner 0.8s linear infinite;
}

/* 회전 애니메이션 키프레임 */
@keyframes ccloud-spinner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* app error */
.app-error {
  display: none;
  position: absolute;
  z-index: 999999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  text-align: center; }

.ui-popup .app-error {
  display: block; }

/* 170322 */
.bt-payment {
  display: block;
  color: #463906;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #dfa300;
  border-radius: .4em;
  line-height: 48px;
  background: #ffcc00; }
  .bt-payment span {
    display: inline-block;
    padding-left: 46px;
    background: url("../img/payment/bt_blet_payment.png") 0 50% no-repeat;
    background-size: 31px auto; }

.payment-wrap {
  padding: 16px 0 0; }
  .payment-wrap * {
    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal; }
  .payment-wrap a {
    text-decoration: none; }
  .payment-wrap .pay-body {
    padding: 0 9px; }
  .payment-wrap .p-list {
    padding: 0;
    margin: 0; }
    .payment-wrap .p-list li {
      list-style: none;
      padding: 10px 0 16px 36px;
      border-top: 1px solid #dfdfdf;
      position: relative; }
    .payment-wrap .p-list li:first-child {
      border-top: none; }
    .payment-wrap .p-list input[type="radio"], .payment-wrap .p-list input[type="checkbox"] {
      position: absolute;
      left: 0;
      top: 50%;
      width: 24px;
      height: 24px;
      margin-top: -10px; }
    .payment-wrap .p-list label {
      display: block; }
      .payment-wrap .p-list label span {
        font-size: 10px;
        color: #848484; }
      .payment-wrap .p-list label p {
        font-size: 15px;
        padding-right: 150px;
        margin: 0;
        position: relative; }
        .payment-wrap .p-list label p strong {
          position: absolute;
          right: 0; }

.pay-top a {
  display: block;
  font-size: 14px;
  color: #222;
  text-align: center;
  line-height: 39px;
  height: 39px;
  padding: 0 17.5px; }
.pay-top .blet {
  float: right;
  display: inline-block;
  width: 12px;
  height: 100%;
  background: url(../img/payment/blet1.png) 50% 50% no-repeat;
  background-size: contain;
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg); }
.pay-top .active .blet {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

.pay-tab {
  overflow: hidden; }
  .pay-tab * {
    vertical-align: baseline; }
  .pay-tab a {
    float: left;
    width: 50%;
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 39px;
    height: 39px;
    border: 1px solid #dfdfdf;
    border-radius: .4em .4em  0 0;
    background: #f3f3f3; }
  .pay-tab a:first-child {
    margin-right: -1px; }
  .pay-tab a.active {
    color: #222;
    background: #fff;
    border-bottom-color: #fff; }
  .pay-tab em {
    display: inline-block;
    margin-left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    line-height: 20px;
    color: #fff;
    background: #c61d23; }

.pay-list-ty1 {
  margin: 0 4px 0 5px; }
  .pay-list-ty1 .pay-body {
    background: #fff;
    border: 1px solid #dfdfdf;
    border-top-width: 0;
    margin-right: 1px; }

.pay-list-ty2 {
  margin: 8px 5px 0;
  border: 1px solid #dfdfdf;
  border-radius: .4em;
  background: #fff; }
  .pay-list-ty2 .pay-body {
    border-top: 1px solid #dfdfdf;
    display: none; }
  .pay-list-ty2 .row-year {
    text-align: center;
    line-height: 33px; }
    .pay-list-ty2 .row-year * {
      vertical-align: baseline; }
    .pay-list-ty2 .row-year span {
      padding: 0 40px; }
    .pay-list-ty2 .row-year a {
      display: inline-block;
      width: 14px;
      height: 14px;
      overflow: hidden;
      text-indent: -1000px;
      background: url(../img/payment/blet2.png) 50% 50% no-repeat;
      background-size: contain; }
      .pay-list-ty2 .row-year a.bt-prev {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg); }
      .pay-list-ty2 .row-year a.bt-next {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg); }
  .pay-list-ty2 table {
    width: 100%;
    table-layout: fixed; }
    .pay-list-ty2 table th, .pay-list-ty2 table td {
      text-align: center;
      font-size: 13px;
      padding: 6px 0; }
    .pay-list-ty2 table th {
      color: #999;
      border: solid #dfdfdf;
      border-width: 1px 0; }

.total-pay {
  margin-top: 17px;
  padding-top: 8px;
  background: url(../img/payment/total_price_bg.png) 0 0 repeat-x;
  background-size: 8px; }
  .total-pay article {
    padding: 15px 15px 15px;
    color: #fff;
    font-size: 15px;
    line-height: 24px; }
  .total-pay .price {
    background: #3e4855; }
    .total-pay .price li {
      overflow: hidden;
      margin-top: 7px;
      padding: 0 8px 0 36px;
      background: url("../img/payment/blet3.png") 0 0 no-repeat;
      background-size: 24px auto; }
      .total-pay .price li:first-child {
        margin-top: 0; }
      .total-pay .price li span {
        float: left; }
      .total-pay .price li strong {
        float: right; }
      .total-pay .price li label {
        display: block; }
      .total-pay .price li input[type="checkbox"] {
        float: left;
        width: 24px;
        height: 24px;
        margin-right: 8px; }
      .total-pay .price li.total {
        color: #ffcc00;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #8d9298;
        background: none;
        padding-left: 8px; }
        .total-pay .price li.total span {
          font-size: 18px; }
        .total-pay .price li.total strong {
          font-size: 25px; }
  .total-pay .pay-type {
    background: #37414d; 
    padding-bottom: 20px;}
    .total-pay .pay-type * {
      vertical-align: middle; }
    .total-pay .pay-type dl {
      margin-bottom: 20px; }
    .total-pay .pay-type dt {
      font-weight: bold; }
    .total-pay .pay-type dd {
      overflow: hidden; }
      .total-pay .pay-type dd input[type="radio"] {
        width: 24px;
        height: 24px;
        margin-right: 8px; }
      .total-pay .pay-type dd label {
        float: left;
        width: 50%;
        margin-top: 10px; }
   .total-pay .pay-etc-info {
    margin-top: 20px;
    font-size: 10px;
    overflow: hidden;
    line-height: 1.5;
    color: #b2bcc7;
    letter-spacing: -1px; }
    .total-pay .pay-etc-info span {
      float: left;
      width: 58%; }
    .total-pay .pay-etc-info span.ty2 {
      width: 42%; }
    .total-pay .pay-etc-info strong {
      margin-right: 5px; }
    .total-pay .pay-etc-info p {
      clear: both; }

/*# sourceMappingURL=layout.css.map */

/* AI비서 채팅기록 */
.ai-assistant-index .chat-list {
    padding: 8px 12px;
}

.ai-assistant-index .chat-item {
    position: relative;
    display:flex;
    align-items:center;
    padding:12px 44px 12px 12px;
    margin-bottom:8px;

    border-radius: 12px;
    border: 1px solid #EEEEF3;
    background: #FFF;
}

.ai-assistant-index .chat-item .chat-link {
    display:block;
    width:100%;
    text-decoration: none;
    color: #262626;
}

.ai-assistant-index .chat-item .title {
    text-overflow: ellipsis;
    font-size: 13px;
    display:block;
    line-height:1.3;
}

.ai-assistant-index .chat-item .date {
    color: #9898AA;
    text-align: right;
    font-size: 10px;
}

.ai-assistant-index .chat-item .content {
    overflow: hidden;
    font-size: 10px;  
    margin-top: 5px;
}

.ai-assistant-index .chat-item .content span{
    overflow: hidden;
    color: #60606B;
    text-overflow: ellipsis;
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    line-height: 1.5;
}

.ai-assistant-index .chat-item .chat-more{
    position:absolute;
    right:15px;
    top:24%;
    transform:translateY(-50%);
    border: none;
    background: none;
}

.ai-assistant-index .chat-item .chat-more-pop{
  display:none; 
  position: absolute;
  right: 8px; 
  top: 28px; 
  z-index: 100; 
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #FFF;
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  padding: 4px 0; 
}

.ai-assistant-index .chat-item .chat-more-pop div {
  display: flex;
  width: 100%;
  height: 36px;
  padding: 4px 16px 4px 12px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box; 
  cursor: pointer; 
  font-size: 12px;
  color: #333;
}

.chat-list .chat-title-date{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-list .chat-title-date input[type=text] {
  font-family: 'SUITE';
  width: 155px;
  height: 20px;
  margin: 0;
  padding: 10px 10px;
  color: #333;
  font-size: 13px;
  border: 1px solid #EEEEF3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
}

.chat-list .chat-title-date button {
  font-family: 'SUITE';
  border-radius: 12px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.95);
  border: none;    
  width: 40px;
  height: 22px;
}

.chat-list .chat-title-date button.save-button {
  font-family: 'SUITE';
  border-radius: 12px;
  font-size: 13px;
  color: #FFF;
  background: #4170D3;
}

.chat-list .chat-title-date button.cancel-button {
  font-family: 'SUITE';
  color: #4170D3;
  font-size: 13px;
}

.ai-assistant-index .empty-state {
    padding:48px 16px;
    text-align:center;
    color:#888;
}

.ai-assistant-index .fab {
    position: fixed;
    right: 16px;
    bottom: 24px;
    width:50px;
    height:50px;
    border: none;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;

    border-radius: 9999px;
    background: var(--Color-Blue-700, #4170D3);
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
}

/** AI비서 채팅방 화면 */
.app-content.ai-assistant-room{
  background:#F5F5F7;
  padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));
}

.ai-assistant-room .chat-more-pop{
  display: none;
  width: 120px;
  position: fixed;
  right: 24px;
  top: 40px;
  z-index: 100;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #FFF;
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.ai-assistant-room .chat-more-pop div {
    display: flex;
    width: 100%;
    height: 36px;
    padding: 4px 16px 4px 12px;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 12px;
    color: #333;
}

.ai-assistant-room .msg-group {
    display: flex;
    flex-direction: column;
    max-width: 80%; /* 전체 너비 제한 */
}

.ai-assistant-room .chat-row.ai .msg-group {
    align-items: flex-start;
}

.ai-assistant-room .chat-row.mine .msg-group {
    align-items: flex-end;
}

.ai-assistant-room .bubble-row {
    display: flex;
    align-items: flex-end; 
    gap: 6px;
}

.bg-gradient{
    background: linear-gradient(37.59deg, #4EB0E3 0%, #183172 100%);
}

.bg-category {
  background: #F5F5F7;
}

.app-content .banner_div{
  font-family: 'GMarketSans';
  cursor: pointer;
  color: white;
  padding: 20px;
  background: aliceblue;
  border-radius: 11px;
  position: relative;
  height: 110px;
  margin-top: 10px;
  background-size: contain !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.12);
}

.unit img{
    width: 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.12);
    border-radius: 100%;
}

.book img{
    width: 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.12);
    border-radius: 100%;
}

.app-content .banner_div.concierge_banner{
    background: #ebcd38;
    background-image: url('../img/main/concierge_banner.png');
    background-repeat: no-repeat;
    background-position: right center;
}

.app-content .banner_div.assistant_banner{
    background: #779fe9;
    background-image: url('../img/main/assistant_banner.png');
    background-repeat: no-repeat;
    background-position: left center;
    text-align: right;       
    padding-right: 40px;    
}

.banner_div .gm-light{
  font-weight: 300;
}

.banner_div .gm-medium{
  font-weight: 500;
}

/** Search */
.idx-search .bd {
  width: 82%;
}

.idx-search .bd b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.idx-search .bd strong{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 대화 리스트 */
.ai-assistant-room .chat-thread{
    list-style:none;
    margin:0;
    padding:12px 12px 25px;
}

.ai-assistant-room .chat-row{
    display:flex;
    gap:8px;
    margin:15px 0;
    align-items:flex-start;
}

.ai-assistant-room .chat-row.ai{
    justify-content:flex-start;
}

.ai-assistant-room .chat-row.mine{
    justify-content:flex-end;
}

.ai-assistant-room .avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    overflow:hidden;
    flex:0 0 36px;
    background: var(--Color-Blue-700, #4170D3);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 5px;
}

.ai-assistant-room .avatar img{
    object-fit:cover;
    border-radius: 100%;
}

.ai-assistant-room .bubble{
    max-width: 100%;
    background:#e8f3ff;
    border-radius:14px;
    padding:10px 12px;
    position:relative;
}

.assistant-room-edit-div{
  position: relative;
  z-index: 100;
  align-items: center;
  gap: 4px;
  display: flex;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: center;
  height: 100%;
  width: 75%;
  margin: 0 auto;
}

.assistant-room-edit-div input[type=text]{
  font-family: 'SUITE';
  width: 235px;
  height: 30px;
  margin: 0;
  padding: 10px 10px;
  color: #333;
  font-size: 13px;
  border: 1px solid #EEEEF3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
}

.assistant-room-edit-div button{
  width: 40px;
  font-family: 'SUITE';
  border-radius: 12px;
  font-size: 13px;
  border: none;
  height: 24px;
}

.assistant-room-edit-div .save-button{
  color: #FFF;
  background: #4170D3;
}

.assistant-room-edit-div .cancel-button{
  color: #4170D3;
  background: #FFF;
}

/* 시간과 신고버튼을 감싸는 영역: 가로 정렬 */
.ai-assistant-room .msg-info {
    display: flex;
    align-items: center;
    gap: 6px; /* 시간과 버튼 사이 간격 */
    margin-top: 4px;
}

.ai-assistant-room .chat-row.ai .bubble{
  border-radius: 2px 16px 16px 16px;
  border: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: var(--Color-White, #FFF);
}

.ai-assistant-room .chat-row.mine .bubble{
  color: #FFF;
  border-radius: 16px 16px 2px 16px;
  background: var(--Color-Blue-700, #4170D3);
}

.ai-assistant-room .bubble p{
    margin:0;
    font-size: 14px;
    word-break:break-word;
}

.ai-assistant-room .bubble ul,li,ol{
    font-size: 14px;
    word-break:break-word;
}

.md-body ul,ol{
    padding-inline-start: 15px;
}

.ai-assistant-room .chat-img{
    display:block;
    border-radius:10px;
    margin-top:4px;
    background:#fff;
}

.ai-assistant-room .report{
    border: none;
    background:transparent;
    padding: 0;
    flex-shrink: 0; /* 공간 좁아도 버튼 찌그러짐 방지 */
    margin-bottom: 2px; /* 시각적으로 말풍선과 높이 맞추기 */
}

.ai-assistant-room .time{
  display: block;
  font-size: 11px;
  opacity: .7;
  margin-top: 4px;
}

.ai-assistant-room .chat-row.ai .time {
    text-align: left;
}

.ai-assistant-room .chat-row.mine .time {
    text-align: right;
}

.ai-assistant-room .chat-row.ai .bubble .time{
    color:rgba(255,255,255,.85);
}

.ai-assistant-room .empty-state{
    padding:48px 16px;
    text-align:center;
    color:#262626;
}

.ai-assistant-room .chat-input-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  padding:10px calc(12px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));
  display:flex;
  gap:8px;
  align-items:center;
  border-top: 1px solid var(--Color-Gray-100, #EEEEF3);
  background: var(--Color-White, #FFF);
}

.ai-assistant-room .chat-input-bar .stt-hint{ min-height:18px; font-size:12px; color:#888; margin:4px 56px 0 56px; }
.ai-assistant-room .chat-input-bar .mic-btn { transition: color .2s, background-color .2s; }
.ai-assistant-room .chat-input-bar .mic-btn.recording { color:#EF4444; }

.ai-assistant-room .file-btn{
    width:36px;
    height:36px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.ai-assistant-room .file-btn input[type=file]{
    display:none;
}

.ai-assistant-room .msg-input{
    height:36px;
    border: none;
    border-radius:10px;
    padding:0 12px;
    outline:none;
    background:#F3F4F6;
    min-width:0;

    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    direction: ltr;
}

.ai-assistant-room .msg-input:focus{
  padding:0 12px;
  border: 2px solid var(--Color-Blue-700, #4170D3);
  background: #F3F4F6;
}

.ai-assistant-room .send-btn{
    width:34px;
    height:34px;
    border:0;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;

    border-radius: 9999px;
    background: var(--Color-Gray-200, #C1C1CA);
}

.ai-assistant-room .send-btn:disabled{
    background:#b8c7d6; 
    cursor:not-allowed;
}

.ai-assistant-room .mic-btn{
    width:40px;
    height:36px;
    border-radius:10px;
    border: none;
    display:flex;
    align-items:center;
    justify-content:center;
    background: none;
}

.ai-assistant-room .mic-btn.recording{
    border-color:#ffb3b3;
    color:#EF4444;
    animation:pulse 1.2s infinite;
}

.ai-assistant-room .date-div{
  border-radius: 9999px;
  background: var(--Color-Gray-100, #EEEEF3);
  width: 160px;
  height: 24px;
  padding: 4px 12px;
  margin: 0 auto;
}

.ai-assistant-room .date-label{
  text-align:center;
  font-size:12px;
  color:#666;
}

/* 신고 모달 오버레이 (배경 어둡게) */
.ai-assistant-room .report-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 신고 모달 박스 */
.ai-assistant-room .report-modal {
    background: #fff;
    width: 85%;
    max-width: 320px;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.ai-assistant-room .report-modal h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

/* 라디오 버튼 리스트 */
.ai-assistant-room .report-options {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.ai-assistant-room .report-options li {
    margin-bottom: 12px;
}

.ai-assistant-room .report-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

/* 기타 사유 입력창 */
.ai-assistant-room .report-textarea {
  width: 100%;
  height: 60px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  resize: none;
  box-sizing: border-box;
  font-family: "SUITE", Helvetica, Arial, sans-serif;
}

.ai-assistant-room .report-warning{
  font-size: 12px;
  color: var(--Color-Gray-700, #60606B);
  text-align: center;
  padding: 10px;
  margin-bottom: 16px;
}

/* 버튼 영역 */
.ai-assistant-room .report-btns {
    display: flex;
    gap: 8px;
}

.ai-assistant-room .report-btns button {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

.ai-assistant-room .report-btns .btn-cancel {
    background: #f3f4f6;
    color: #666;
}

.ai-assistant-room .report-btns .btn-submit {
    background: var(--Color-Red, #DC2626);
    color: #fff;
}

.ai-assistant-room .report-btns .btn-submit:disabled {
    background: var(--Color-Gray-200, #C1C1CA);
    cursor: not-allowed;
}

/* 완료 모달 오버레이 */
.ai-assistant-room .success-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000; /* 신고 모달보다 위에 뜨도록 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 완료 모달 박스 */
.ai-assistant-room .success-modal {
    background: #fff;
    width: 280px;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* 녹색 체크 아이콘 원형 배경 */
.ai-assistant-room .success-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #E8F9F0; /* 연한 녹색 배경 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

/* 텍스트 스타일 */
.ai-assistant-room .success-modal h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.ai-assistant-room .success-modal p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.ai-assistant-room #preview_image{
  display: none;
  padding: 8px 12px;
  width: 100%;
  height: 120px;
  background: rgba(255, 255, 255, 0.8);
  bottom: 55px;
  position: fixed;
  border-radius: 10px 10px 0 0;
  backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  gap: 12px;
}

#preview_image .thumb{
  position: relative;
  display: inline-block;
}

#preview_image .chat-img{
  max-width: 120px;
  max-height: 95px;
  border-radius: 8px;
  display: block;
}

#preview_image .thumb > button{
  position: absolute;
  right: 6px;
  top: 8px;
  border: none;
  background: rgba(255,255,255,0.9);
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
}

@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(226,27,60,.4); }
    70%{ box-shadow:0 0 0 8px rgba(226,27,60,0); }
    100%{ box-shadow:0 0 0 0 rgba(226,27,60,0); }
}

/* 하단 바 전체 컨테이너 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 68px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #eee;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #999;
    font-size: 11px;
    flex: 1;
}

.bottom-nav .nav-item span {
    margin-top: 4px;
}

.bottom-nav .nav-item svg{
  padding: 2px;
}

.bottom-nav .nav-item.home {
    position: relative;
}

.bottom-nav .home-icon {
    width: 50px;
    height: 50px;
    background-color: #4170D3; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(65, 112, 211, 0.3);
}

.bottom-nav .sp-ico {
    width: 24px;
    height: 24px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

/* popup community withdraw */
.pop-community-withdraw {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; 
    max-width: 320px;
    z-index: 1000;
}

.pop-community-withdraw .bd {
    position: relative;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.10), 0 20px 25px -5px rgba(0, 0, 0, 0.10);
    padding: 15px 0;
    box-sizing: border-box; 
    width: 100%;
    text-align: left;
}

.pop-community-withdraw .btn-close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
}

.pop-community-withdraw .withdraw-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.pop-community-withdraw .withdraw-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0;
}

.pop-community-withdraw .modal-profile-img {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #f4f5f7; /* 이미지가 없을 때를 대비한 기본 배경색 */
    border: 1px solid #eee;
    margin-right: 10px;
}

.pop-community-withdraw .caption {
    text-align: center;
    background-color: #fff; 
    padding-bottom: 0; 
}

.pop-community-withdraw .caption strong {
    display: block;
    font-size: 16px;
    color: #222; 
}

.pop-community-withdraw .withdraw-warning {
    background-color: #f8f9fb;
    border-radius: 8px;
    padding: 16px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    word-break: keep-all;
    margin: 20px;
}

.pop-community-withdraw .withdraw-agree-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    margin: 20px 28px;
    cursor: pointer;
}

.pop-community-withdraw .withdraw-agree-box input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.pop-community-withdraw nav {
    margin-top: 5px;
}

.pop-community-withdraw nav .ui-button {
    width: 80%;
    margin: 0 auto;
    height: 45px;
    padding: 12px 20px;
}

.pop-community-withdraw nav button[disabled] {
    background-color: #e6e6ef !important;
    color: #a0a4b8 !important;
    border: none !important;
    cursor: not-allowed;
}

.find-div .info-div{
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 30px;
  margin: 0 20px;
  color: #333;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.find-div .input_div {
  margin-bottom: 20px;
  display: inline-block;
  text-align: left;
}

.find-div .input_div label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.find-div .join_input {
    width: 100%;
    border: 1px solid #eee;
    background: #f9f9f9;
    padding: 12px 15px;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 15px;
}

.find-div .input-group {
    display: flex;
    gap: 8px;
}

.input-group input.join_input {
  flex: 1; 
  width: auto;
}

.find-div .btn-verify {
  background: #4a76cc;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 9px 13px;
  white-space: nowrap;
  font-size: 13px;
  flex-shrink: 0; 
}

.find-div .pw-notice {
    background: #f0f4ff;
    color: #5c8ae3;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid #d0deff;
    margin-top: 10px;
}

/* 하단 버튼 네비게이션 */
.find-div nav {
    margin: 30px 20px;
    display: flex;
    gap: 15px;
}

.find-div .ui-button {
  flex: 1;
  height: 50px !important;
  border-radius: 12px !important;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.find-div .color-end {
    background: white;
    color: #333;
}

.find-div .color-blue {
    background: #1e3a8a; /* 진한 남색 버튼 */
    color: white;
}